/* Поля и кнопки шрифт страницы НЕ наследуют: браузер по своей таблице стилей
   выдаёт им Arial. Пока шрифт приложения был обычным системным гротеском,
   разницы почти не было видно, и это никого не трогало. Стоило дать выбор
   шрифта в настройках — и половина экрана осталась на Arial: замер по живой
   странице показал 28 таких элементов, среди них кнопки «Создать тест»
   и «GRADUS».

   Правило нарочно на голых тегах: специфичность минимальная, поэтому любое
   осознанное правило ниже (моноширинный ввод кода и прочее) его перебьёт. */
button, input, select, textarea, optgroup {
    font-family: inherit;
}

/* Календарь активности рисует подписи шрифтом из своей библиотеки
   (cal-heatmap: "Lucida Grande") — ещё 158 элементов мимо выбора.
   Селектор с body нарочно: cal-heatmap.css подключается ПОСЛЕ этого файла,
   и при равной специфичности побеждал бы он. */
body .cal-heatmap-container .graph {
    font-family: inherit;
}

/* Шрифты для выбора в настройках подключаются по требованию, из JS
   (см. APP_FONTS в script.js) — иначе каждый пользователь платил бы трафиком
   за четыре шрифта, из которых возьмёт максимум один.

   OpenDyslexic отсюда убран намеренно. Кириллица в файле есть, но строчная
   «ж» нарисована в высоту заглавной — «кожные» читается как «коЖные», — а вся
   гарнитура на 48% шире нынешней, отчего текст распирает кнопки. Замеры:
   tests/cyrillic_font_probe.html и tests/font_metrics_probe.html.
   Его место занял Andika: он тоже сделан для тех, кому трудно читать (SIL,
   для обучающихся грамоте), но кириллица у него полноценная, а метрика
   близка к нынешней — 96% высоты строчных, 104% ширины строки. */

:root {
    --accent: #e74c3c;
    --accent-color: #2c3e50;
    --bg-color: #eaeaea;
    --border-color: #c8c8c8;
    --border-color-rgb: 221, 221, 221;
    --button-primary-bg: linear-gradient(135deg, #34495e, #2c3e50);
    --button-primary-hover-bg: linear-gradient(135deg, #2c3e50, #34495e);
    --button-primary-text: #fff;
    --button-secondary-bg: #6c757d;
    --button-secondary-border: #6c757d;
    --button-secondary-hover-bg: #5a6268;
    --button-secondary-text: #fff;
    --button-success-bg: #28a745;
    --button-success-hover-bg: #218838;
    --container-bg-color: #fff;
    --container-bg-color-rgb: 240, 242, 245;
    --dashed-border-color: #eee;
    --feedback-correct-bg: #d4edda;
    --feedback-correct-border: #c3e6cb;
    --feedback-correct-text: #155724;
    --feedback-incorrect-bg: #f8d7da;
    --feedback-incorrect-border: #f5c6cb;
    --feedback-incorrect-text: #721c24;
    --heading-color: #333;
    --input-bg-color: #f0f2f5;
    --input-border-color: #ddd;
    --input-hover-bg-color: #e9e9e9;
    --input-hover-border-color: #ccc;


    --neumorph-shadow-dark: #b5bac1ed; 
    --neumorph-shadow-inset: inset 9px 6px 6px var(--neumorph-shadow-dark), inset -2px -3px 9px var(--neumorph-shadow-light);
    --neumorph-shadow-light: #e9ecf3; 
    --neumorph-shadow-soft: 6px 7px 8px var(--neumorph-shadow-dark), -1px -1px 0 var(--neumorph-shadow-light);
    --neumorph-shadow-soft-sm: 3px 3px 6px var(--neumorph-shadow-dark), -3px -3px 6px var(--neumorph-shadow-light); 
    --primary: #2c3e50;
    /* Чем пишут поверх заливки --primary. Раньше во всех таких местах
       стоял жёстко белый, и на светлых темах заливки это работало,
       а на тёмных, где --primary светлый, надпись пропадала. */
    --on-primary: #ffffff;


    --quick-nav-current-bg: #2c3e50;
    --quick-nav-current-text: #fff;
    --secondary-text-color: #6b6b6b;
    --shadow-color: #0000001a;
    --shadow-hover-color: #00000014;
    --shadow-light-color: #0000000d;
    --text-color: #333;
    --theme-toggle-border: #ccc;
    --theme-toggle-hover-bg: #f0f0f0;
    --timer-text-color: #2c3e50;
    --triggered-word-color: red;
    --update-notification-bg: #007bff;
    --update-notification-button-bg: #fff;
    --update-notification-button-text: #007bff;
    --update-notification-text: #fff;
    --vh: 1vh;
    --zebra-stripe-color: #f9f9f9;
}

body.dark-mode {
    /* Голубой акцент темы: читается на тёмном фоне, а по нему пишут тёмным */
    --primary: #58a6ff;
    --on-primary: #0d1117;
    --accent-color: #58a6ff;
    --bg-color: #1d2025;
    --border-color: #444;
    --border-color-rgb: 68, 68, 68;
    --button-primary-bg: linear-gradient(135deg, #65737e, #4f5b66);
    --button-primary-hover-bg: linear-gradient(135deg, #4f5b66, #65737e);
    --button-primary-text: #f0f0f0;
    --button-secondary-bg: #495057;
    --button-secondary-border: #495057;
    --button-secondary-hover-bg: #343a40;
    --button-secondary-text: #f8f9fa;
    --button-success-bg: #198754;
    --button-success-hover-bg: #157347;
    --container-bg-color: #21242c;
    --container-bg-color-rgb: 33, 36, 44;
    --dashed-border-color: #333;
    --feedback-correct-bg: #1c3a24;
    --feedback-correct-border: #2e5d3a;
    --feedback-correct-text: #a3d9b1;
    --feedback-incorrect-bg: #4a1e22;
    --feedback-incorrect-border: #6b2f34;
    --feedback-incorrect-text: #f5c6cb;
    --heading-color: #f1f1f1;
    --input-bg-color: #21242c;
    --input-border-color: #444;
    --input-hover-bg-color: #383838;


    --input-hover-border-color: #555; --neumorph-shadow-dark: #16181d;
    --neumorph-shadow-inset: inset 7px 7px 9px var(--neumorph-shadow-dark), inset 10px 5px 10px var(--neumorph-shadow-light);
    --neumorph-shadow-light: #2c303b; 
    --neumorph-shadow-soft: 5px 12px 8px var(--neumorph-shadow-dark), -2px -2px 10px var(--neumorph-shadow-light);
    --neumorph-shadow-soft-sm: 3px 3px 6px var(--neumorph-shadow-dark), -3px -3px 6px var(--neumorph-shadow-light);
    --quick-nav-current-bg: #263542;


    --quick-nav-current-text: #f0f0f0;
    --secondary-text-color: #aaa;
    --shadow-color: #0006;
    --shadow-hover-color: #0000004d;
    --shadow-light-color: #0003;
    --text-color: #e0e0e0;
    --theme-toggle-border: #555;
    --theme-toggle-hover-bg: #333;
    --timer-text-color: #87ceeb;
    --triggered-word-color: #ff4d4d;
    --update-notification-bg: #343a40;
    --update-notification-button-bg: #f8f9fa;
    --update-notification-button-text: #343a40;
    --update-notification-text: #f8f9fa;
    --zebra-stripe-color: #ffffff08;
}

body.claude-mode {
    /* Тёплый серый на тон темнее фона темы — 4.6 к кремовому */
    --primary: #7a6d60;
    --on-primary: #ffffff;
    --accent-color: #8a7d70;
    --bg-color: #f2ede8;
    --border-color: #bfb8aa;
    --border-color-rgb: 224, 218, 206;
    --button-primary-bg: #7a6d60;
    --button-primary-hover-bg: #6e6459;
    --button-primary-text: #fff;
    --button-secondary-bg: #e0dace;
    --button-secondary-border: #e0dace;
    --button-secondary-hover-bg: #d4ccc1;
    --button-secondary-text: #4a443e;
    --button-success-bg: #5a8e6a;
    --button-success-hover-bg: #4a7558;
    --container-bg-color: #f2ede8;
    --container-bg-color-rgb: 242, 237, 232;
    --dashed-border-color: #e8e3dc;
    --feedback-correct-bg: #d5e8d4;
    --feedback-correct-border: #b7d8b7;
    --feedback-correct-text: #275c33;
    --feedback-incorrect-bg: #f8e5e6;
    --feedback-incorrect-border: #f1d8da;
    --feedback-incorrect-text: #8b454d;
    --heading-color: #3d352f;
    --input-bg-color: #f2ede8;
    --input-border-color: #d9d3cb;
    --input-hover-bg-color: #f5f2ee;
    --input-hover-border-color: #c9c2ba;
    --neumorph-shadow-dark: #a49686;
    --neumorph-shadow-inset: inset 6px 7px 7px var(--neumorph-shadow-dark), inset -2px -2px 13px var(--neumorph-shadow-light);
    --neumorph-shadow-light: #fff;
    --neumorph-shadow-soft: 2px 7px 10px var(--neumorph-shadow-dark), -3px -1px 4px var(--neumorph-shadow-light);
    --neumorph-shadow-soft-sm: 3px 3px 6px var(--neumorph-shadow-dark), -3px -3px 6px var(--neumorph-shadow-light);
    --quick-nav-current-bg: #8a7d70;


    --quick-nav-current-text: #fff;
    --secondary-text-color: #6b6155;
    --shadow-color: #5a50461a;
    --shadow-hover-color: #5a50461f;
    --shadow-light-color: #5a50460d;
    --text-color: #4a443e;
    --theme-toggle-border: #c9c2ba;
    --theme-toggle-hover-bg: #f5f2ee;
    --timer-text-color: #6e6459;
    --triggered-word-color: #c54848;
    --update-notification-bg: var(--button-primary-bg);
    --update-notification-button-bg: #fff;
    --update-notification-button-text: var(--button-primary-bg);
    --update-notification-text: var(--button-primary-text);
    --zebra-stripe-color: #f5f2ee;
}

body.synthwave-mode {
    /* Бирюза темы; поверх неё — тёмно-синий фон самой темы */
    --primary: #14B8A6;
    --on-primary: #0F172A;
    --accent: #38BDF8;
    --accent-color: #14B8A6;
    --bg-color: #0F172A;
    --border-color: #334155;
    --button-primary-bg: #14B8A6;
    --button-primary-hover-bg: #2DD4BF;
    --button-primary-text: #0F172A;
    --button-secondary-bg: #475569;
    --button-secondary-hover-bg: #64748B;
    --button-secondary-text: #E2E8F0;
    --button-success-bg: #22C55E;
    --button-success-hover-bg: #4ADE80;
    --container-bg-color: #0F172A;
    --dashed-border-color: #475569;
    --feedback-correct-bg: #1F2E2A;
    --feedback-correct-border: #3A735E;
    --feedback-correct-text: #6EE7B7;
    --feedback-incorrect-bg: #3A232A;
    --feedback-incorrect-border: #804343;
    --feedback-incorrect-text: #F87171;
    --heading-color: #38BDF8;
    --input-bg-color: #0F172A;
    --input-border-color: #475569;
    --input-hover-bg-color: #334155;
    --input-hover-border-color: #94A3B8;
    --neumorph-shadow-dark: #0a101f;
    --neumorph-shadow-inset: inset 11px 13px 28px var(--neumorph-shadow-dark), inset 3px 2px 12px var(--neumorph-shadow-light);
    --neumorph-shadow-light: #141e35; 
    --neumorph-shadow-soft: 9px 14px 9px var(--neumorph-shadow-dark), -4px -2px 8px var(--neumorph-shadow-light);
    --neumorph-shadow-soft-sm: 3px 2px 5px var(--neumorph-shadow-dark), -2px -1px 0 var(--neumorph-shadow-light);
    --quick-nav-current-bg: #14B8A6;


    --quick-nav-current-text: #FFF;
    --secondary-text-color: #94A3B8;
    --shadow-color: #0000004d;
    --shadow-hover-color: #0006;
    --shadow-light-color: #0003;
    --text-color: #E2E8F0;
    --theme-toggle-border: #475569;
    --theme-toggle-hover-bg: #334155;
    --timer-text-color: #38BDF8;
    --triggered-word-color: #FACC15;
    --update-notification-bg: #14B8A6;
    --update-notification-button-bg: #FFF;
    --update-notification-button-text: #14B8A6;
    --update-notification-text: #FFF;
    --zebra-stripe-color: #ffffff08;
}

body.oled-mode {
    /* Светло-серый вместо чистого белого: на чёрном не слепит, но читается */
    --primary: #d0d0d0;
    --on-primary: #0a0a0a;
    --accent-color: #fff;
    --bg-color: #000;
    --border-color: #1a1a1a;
    --button-primary-bg: #1f1f1f;
    --button-primary-hover-bg: #333;
    --button-primary-text: #fff;
    --button-secondary-bg: #000;
    --button-secondary-border: #333;
    --button-secondary-hover-bg: #111;
    --button-secondary-text: #ccc;
    --button-success-bg: #004d00;
    --button-success-hover-bg: #060;
    --container-bg-color: #000;
    --dashed-border-color: #222;
    --feedback-correct-bg: #000;
    --feedback-correct-border: #030;
    --feedback-correct-text: #0f0;
    --feedback-incorrect-bg: #000;
    --feedback-incorrect-border: #300;
    --feedback-incorrect-text: #f33;
    --heading-color: #fff;
    --input-bg-color: #000;
    --input-border-color: #333;
    --input-hover-bg-color: #0a0a0a;
    --input-hover-border-color: #555;
    --neumorph-shadow-dark: #000;
    --neumorph-shadow-inset: inset 15px 16px 15px #000000, inset 7px 4px 11px #f5f5f5, 0 0 0 2px #1b1b1b;
    --neumorph-shadow-light: #222;
    --neumorph-shadow-soft: -1px -1px 2px #ffffff, -2px -4px 3px black, 0 0 0 1px #1a1a1a;
    --neumorph-shadow-soft-sm: -1px -2px 4px #5c5959, 4px 1px 4px black, 0 0 0 2px #1a1a1a;
    --quick-nav-current-bg: #333;
    --quick-nav-current-text: #fff;
    --secondary-text-color: #c5c5c5;
    --shadow-color: #000f;
    --shadow-hover-color: #ffffff1a;
    --shadow-light-color: #ffffff0d;
    --text-color: #e0e0e0;
    --theme-toggle-border: #333;
    --theme-toggle-hover-bg: #111;
    --timer-text-color: #fff;
    --triggered-word-color: #fc0;
    --update-notification-bg: #222;
    --update-notification-button-bg: #fff;
    --update-notification-button-text: #000;
    --update-notification-text: #fff;
    --zebra-stripe-color: #050505;
}

 
body.oled-mode #answerOptions li {
    box-shadow: -1px -1px 4px #ffffff, 0 0 0 var(--neumorph-shadow-light);
}

body.oled-mode .study-widget {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    width: 90vw;
    max-width: 700px;
    max-height: 90vh;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    background-color: #000;
    box-shadow: 0 1px 16px 1px #ffffffad;
    transform: translate(-50%, -50%);
    transition: width .3s ease, height .3s ease, opacity .3s ease;
    cursor: grab;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    touch-action: none;
}

body.oled-mode .floating-nav-btn {
    position: fixed;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding-bottom: 13px;
    border: 1px solid rgba(var(--border-color-rgb), 0.3);
    border-radius: 50%;
    background-color: #000000a3;
    color: #fff;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 2;
    box-shadow: var(--neumorph-shadow-soft);
    transition: box-shadow 0.2s, background-color .2s;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(2px);
    touch-action: none;
}

body.oled-mode .smart-deck-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-radius: 16px;
    background: linear-gradient(158deg, #88151b 0%, #d33131 99%, #651d4e 100%);
    color: #d4c2c7;
    transition: transform 0.2s, box-shadow .2s;
    cursor: pointer;
}

body.oled-mode .modal-content {
    width: 90%;
    max-width: 700px;
    padding: 25px 30px;
    border-radius: 15px;
    background: var(--container-bg-color);
    text-align: center;
    box-shadow: 0 4px 48px #968f8f9e;
}

body.oled-mode .anki-audio-player {
    border: 1px solid #333 !important;
    border-radius: 30px;
    background-color: #000 !important;
    box-shadow: none !important;
}

body.oled-mode .anki-audio-player::-webkit-media-controls-panel {
    background-color: #000 !important;
}

body.oled-mode .anki-audio-player::-webkit-media-controls-current-time-display,
body.oled-mode .anki-audio-player::-webkit-media-controls-time-remaining-display {
    color: #fff !important;
    text-shadow: none !important;
}

body.oled-mode .anki-audio-player::-webkit-media-controls-play-button,
body.oled-mode .anki-audio-player::-webkit-media-controls-mute-button,
body.oled-mode .anki-audio-player::-webkit-media-controls-overflow-button,
body.oled-mode .anki-audio-player::-webkit-media-controls-fullscreen-button {
    opacity: .9;
    filter: invert(1) grayscale(100%) !important;
}

body.oled-mode .flashcard-back .anki-audio-player {
    background-color: #000 !important;
    box-shadow: none !important;
    border-color: #333 !important;
}

body.oled-mode .container,
body.oled-mode .question-bubble,
body.oled-mode .input-action-btn,
body.oled-mode #chatInput {
    border: 1px solid #1a1a1a;
    background-color: #000 !important;
}

body.oled-mode .channel-item.active,
body.oled-mode .quick-nav-btn.current {
    border: 1px solid #fff !important;
    background-color: #000 !important;
}

body.oled-mode .advanced-chat-modal {
    box-shadow: 0 1px 16px 1px #ffffffad;
}

body.oled-mode #quickModeToggle.active,
body.oled-mode #triggerWordToggle.active,
body.oled-mode #translateQuestionBtn.active,
body.oled-mode #chatTranslateBtn.active,
body.oled-mode .header-buttons button.active {
    border: 2px solid #fff !important;
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: 0 0 10px #fff6 inset 0 0 5px #ffffff1a !important;
    opacity: 1 !important;
}

body.oled-mode #quickModeToggle.active:hover,
body.oled-mode #triggerWordToggle.active:hover,
body.oled-mode #translateQuestionBtn.active:hover {
    box-shadow: 0 0 15px #fff9 !important;
}

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    /* === БЕЗОПАСНОЕ УЛУЧШЕНИЕ: Сообщаем браузеру о поддержке тем === */
    color-scheme: light dark;
    /* ФИКС СКРОЛЛА: Резервируем место под scrollbar заранее, чтобы при появлении/исчезновении
       анимации генерации изображения страница не "прыгала" (Layout Shift) */
    scrollbar-gutter: stable;
}

*,
:before,
:after {
    box-sizing: inherit;
    /* === БЕЗОПАСНОЕ УЛУЧШЕНИЕ: Убираем синюю вспышку при клике на Android === */
    -webkit-tap-highlight-color: transparent; 
    /* ОПТИМИЗАЦИЯ MOBILE: Убиваем 300ms задержку клика глобально, сохраняя возможность зума и свайпа */
    touch-action: manipulation;
}

/* ENTERPRISE A11Y: Глобальный индикатор фокуса для клавиатурной навигации.
   Текстовые поля исключены: браузер считает :focus-visible выполненным для них даже при
   щелчке мышью и тапе — они принимают клавиатурный ввод. Из-за этого алая рамка
   (--accent в светлой теме = #e74c3c) вылезала при каждом касании поля, хотя задумана
   была под клавиатурную навигацию. В поле фокус и так виден: курсор и подсветка поля. */
*:focus-visible:not(input):not(textarea):not([contenteditable="true"]) {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: 3px !important;
    border-radius: inherit;
}

/* APP STORE TIER: Плавное растворение плейсхолдеров (Fluid Typography) */
input::placeholder, textarea::placeholder {
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: left center;
}
input:focus::placeholder, textarea:focus::placeholder,
.ai-chat-input-container:focus-within textarea::placeholder {
    opacity: 0 !important;
    transform: translateX(8px) scale(0.98);
}

/* === БЕЗОПАСНОЕ УЛУЧШЕНИЕ: Запрет случайного выделения интерфейса === */
button, 
.tab-item, 
.channel-item, 
.quick-nav-btn, 
.floating-nav-btn,
.ai-action-btn,
img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* Запрет всплывающего меню на картинках в iOS */
}

/* Явно разрешаем выделять текст там, где это нужно пользователю */
p, h1, h2, h3, h4, span, .message-content, .ai-message-content-wrapper, textarea, input {
    user-select: auto;
    -webkit-user-select: auto;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    /* Шрифт всего приложения. Значение по умолчанию — в fallback переменной,
       поэтому без выбора в настройках ничего не меняется. Переменную ставит
       инлайн-скрипт в <head> ещё до первой отрисовки: иначе выбранный шрифт
       появлялся бы рывком поверх уже нарисованного текста. */
    font-family: var(--app-font, -apple-system, BlinkMacSystemFont, Google Sans, Arial, sans-serif, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    /* FIX: Жестко убиваем горизонтальный скролл на мобильных */
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
        /* Делает текст максимально читаемым, браузер тратит чуть больше ресурсов на кернинг */
    text-rendering: optimizeLegibility;
    /* Отключаем системное изменение размера шрифта при повороте телефона */
    -webkit-text-size-adjust: 100%;
    /* Фикс для Chrome на Windows (сглаживание векторных краев шрифта) */
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;

}
/* Для заголовков делаем более жесткий кернинг */
h1, h2, h3, .prog-card-title {
    letter-spacing: -0.02em; /* Нативный Apple-стайл для заголовков */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-image: radial-gradient(circle at 10% 20%, #6c5ce733 0%, transparent 40%), radial-gradient(circle at 80% 70%, #f39c1226 0%, transparent 45%);
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.app-wrapper {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    padding: 0px;
}

@media (min-width: 768px) {
    .app-wrapper {
        padding: 20px;
    }
}

.container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: 100%;
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft);
}

@media (min-width: 768px) {
    .container {
        max-width: 900px;
        padding: 20px 20px;
    }
}

.header-buttons {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.header-controls h1 {
    margin: 0;
    color: var(--secondary-text-color);
    /* ENTERPRISE UX: Плавное масштабирование типографики (Fluid Typography) */
    font-size: clamp(3.3em, 4vw + 1.5rem, 4.3em);
    line-height: 1.2;
    text-shadow: 3px 1px 4px var(--neumorph-shadow-dark), -2px -2px 3px var(--neumorph-shadow-light);
}

/* Media query больше не нужен, clamp управляет размером аппаратно */


/* Общий вид кнопок панели. Кнопка легенды перечислена здесь наравне с
   остальными намеренно: форму, размер и тень она обязана получать из того же
   правила, а не из своего собственного. Иначе она выпадает из ряда — как и
   выпадала, оставшись квадратной среди круглых. */
#searchWebButton, #themeDropdownButton, #quizMobileSettingsBtn, #quickModeToggle, #quizMobileSettingsDropdown, #triggerWordToggle, #quizExportBtn, #copyQuestionBtnQuiz, #languageToggle, #showSearchBtn, #flagQuestionBtn, #translateQuestionBtn, #chatToggle, #favoriteQuestionBtn, #reloadAppBtn, #flagQuestionBtn, #customInstallBtn, #quizExportBtn, #studyTogetherBtn, #flashcardTypingToggle, #flashcardAutoplayToggle, #headerLegendBtn, #questionNoteBtn, #aiChatHeaderBtn {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #00000009;
    color: var(--text-color);
    line-height: 1;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: box-shadow 0.2s, color .2s;
    cursor: pointer;
}

#searchWebButton i,
#themeDropdownButton i,
#quickModeToggle i,
#triggerWordToggle i,
#copyQuestionBtnQuiz i,
#showSearchBtn i,
#translateQuestionBtn i,
#chatToggle i,
#favoriteQuestionBtn i,
#reloadAppBtn i,
#flagQuestionBtn i,
#flagQuestionBtn svg,
#questionNoteBtn i,
#questionNoteBtn svg,
#quizExportBtn i,
#quizExportBtn svg {
    width: 22px;
    height: 22px;
}

#languageToggle {
    font-weight: 600;
}


#searchWebButton:hover,
#themeDropdownButton:hover,
#quickModeToggle:hover,
#triggerWordToggle:hover,
#copyQuestionBtnQuiz:hover,
#languageToggle:hover,
#showSearchBtn:hover,
#chatToggle:hover,
#favoriteQuestionBtn:hover,
#reloadAppBtn:hover,
#studyTogetherBtn:hover,
#flagQuestionBtn:hover,
#questionNoteBtn:hover,
#quizExportBtn:hover,
#aiChatHeaderBtn:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

@media (max-width: 768px) {
    #searchWebButton,
    #themeDropdownButton,
    #quickModeToggle,
    #triggerWordToggle,
    #copyQuestionBtnQuiz,
    #languageToggle,
    #showSearchBtn,
    #translateQuestionBtn,
    #chatToggle,
    #favoriteQuestionBtn,
    #reloadAppBtn,
    #flagQuestionBtn,
    #questionNoteBtn,
    #quizExportBtn {
        width: 36px;
        height: 36px;
    }

    #searchWebButton i,
    #themeDropdownButton i,
    #quickModeToggle i,
    #triggerWordToggle i,
    #copyQuestionBtnQuiz i,
    #showSearchBtn i,
    #translateQuestionBtn i,
    #chatToggle i,
    #favoriteQuestionBtn i,
    #reloadAppBtn i,
    #flagQuestionBtn i,
    #flagQuestionBtn svg,
    #questionNoteBtn i,
    #questionNoteBtn svg,
    #quizExportBtn i,
    #quizExportBtn svg {
        width: 20px;
        height: 20px;
    }

    .header-buttons {
        justify-content: center;
    }
}

/* === Update-available state (legacy #reloadAppBtn + текущий #bottomNavUpdateBtn) === */
#reloadAppBtn.has-update,
#bottomNavUpdateBtn.has-update {
    position: relative;
    color: #fff !important;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    border-radius: 12px;
    animation: reload-btn-pulse 1.8s ease-in-out infinite;
}
#reloadAppBtn.has-update i,
#reloadAppBtn.has-update svg,
#bottomNavUpdateBtn.has-update i,
#bottomNavUpdateBtn.has-update svg {
    animation: reload-btn-spin 2.4s linear infinite;
}
@keyframes reload-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55), 0 0 14px 2px rgba(59, 130, 246, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0),    0 0 22px 6px rgba(59, 130, 246, 0.55); }
}
@keyframes reload-btn-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    #reloadAppBtn.has-update,
    #reloadAppBtn.has-update i,
    #reloadAppBtn.has-update svg,
    #bottomNavUpdateBtn.has-update,
    #bottomNavUpdateBtn.has-update i,
    #bottomNavUpdateBtn.has-update svg { animation: none; }
    #reloadAppBtn.has-update,
    #bottomNavUpdateBtn.has-update { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5); }
}

.reload-update-tip {
    position: absolute;
    z-index: 10050;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    max-width: calc(100vw - 24px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px) scale(0.95);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reload-update-tip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.reload-update-tip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #8b5cf6;
    border-radius: 2px;
}

#searchWebButton:hover,
#themeToggle:hover,
#quickModeToggle:hover,
#triggerWordToggle:hover,
#chatToggle:hover {
    /* background-color: var(--theme-toggle-hover-bg); */
}

/* «Включено» у кнопок панели вопроса.
   Список один на все кнопки: раньше подсветку имели три штуки из десяти, и
   по флажку, звезде, вводу ответа и звуку нельзя было понять, включены они
   или нет — все выглядели одинаково серыми. Цвет акцентный и заливка
   полупрозрачная: сплошная заливка кнопкой-«основным действием» на круглых
   кнопках тёмной темы почти не отличалась от обычного фона. */
#quickModeToggle.active,
#translateQuestionBtn.active,
#triggerWordToggle.active,
#chatTranslateBtn.active,
#flagQuestionBtn.active,
#favoriteQuestionBtn.active,
#flashcardTypingToggle.active,
#flashcardAutoplayToggle.active,
.header-buttons button.active {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
#quickModeToggle.active i,
#quickModeToggle.active svg,
#translateQuestionBtn.active i,
#translateQuestionBtn.active svg,
#triggerWordToggle.active i,
#triggerWordToggle.active svg,
#chatTranslateBtn.active i,
#chatTranslateBtn.active svg,
.header-buttons button.active i,
.header-buttons button.active svg {
    color: inherit;
}
/* Звезда закрашивается целиком: контур того же цвета читается хуже, чем
   заливка, а именно её ждут от звезды. */
#favoriteQuestionBtn.active svg {
    fill: var(--accent);
}

body.dark-mode #quickModeToggle.active,
body.dark-mode #triggerWordToggle.active,
body.dark-mode #chatTranslateBtn.active {
    background-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

h1,
h2 {
    color: var(--heading-color);
    text-align: center;
}

h2 {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1.3em;
}

@media (min-width: 768px) {
    h2 {
        font-size: 1.5em;
    }
}

.file-upload-area {
    margin-bottom: 20px;
    border: 2px dashed var(--border-color);
    border-radius: 5px;
    text-align: center;
}

.file-upload-area label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="file"] {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px !important;
    margin-top: 5px;
    padding: 12px 15px; /* Чуть просторнее для пальцев */
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Мягкие углы */
    box-sizing: border-box;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: 1rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    /* PREMIUM UX: Плавный переход тени и бордера */
    transition: border-color 0.3s ease, box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s ease !important;
}


textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
.ai-chat-input-container:focus-within {
 
    transform: translateY(-1px);
    outline: none !important;
    /* Пульсирующее кольцо (focusHaloBreathe) снято: цветом ему служил --accent, а он в
       светлой теме алый — вокруг поля дышало розово-красное свечение. Признак фокуса
       здесь и не нужен яркий: в текстовом поле стоит курсор. Оставляем подъём на пиксель
       и спокойную рамку. */
    border-color: var(--focus-ring);
    transition: box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}

#fileInput::-webkit-file-upload-button {
    border: 1px solid var(--button-secondary-border);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    white-space: nowrap;
}

#fileInput::-webkit-file-upload-button:hover {
    background-color: var(--button-secondary-hover-bg);
}

#recentFilesArea {
    margin-top: 5px;
    padding-top: 5px;
    /* border-top: 1px dashed var(--dashed-border-color); */
}

#recentFilesArea h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--secondary-text-color);
    font-size: .9em;
}

#recentFilesList {
    max-height: 150px;
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    list-style: none;
}

#recentFilesList li {
    margin-bottom: 5px;
    padding: 8px 10px;
    border: none;
    border-radius: 4px;
    background-color: var(--neumorph-bg);
    font-size: .9em;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: box-shadow .2s;
    cursor: pointer;
    word-break: break-all;
}

#recentFilesList li:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

#quizSetupArea,
#quizArea,
#resultsArea,
#cheatSheetResultArea,
#gradusFoldersContainer,
#searchResultsContainer {
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

#quizArea>* {
    flex-shrink: 0;
}

#quizArea>#questionContainer {
    flex-grow: 0 !important;
    margin-bottom: 10px;
    overflow-y: visible;
}

#quizSetupArea h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--heading-color);
}

.settings-group {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--dashed-border-color);
    border-radius: 8px; /* Подготовка к фону */
    transition: background-color 0.3s ease, padding-left 0.3s ease;
}

/* ENTERPRISE UX: Умная подсветка всей строки при взаимодействии с дочерним элементом */
.settings-group:focus-within {
    background-color: color-mix(in srgb, var(--accent) 5%, transparent);
    /* Замена padding на GPU-трансформацию для предотвращения Layout Shift */
    transform: translateX(4px);
}

.settings-group:not(:has(input[type="range"])) {
    /* display: flex; */
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Обычные подписи в группе настроек раскрываются в поток, чтобы подпись и
   элемент управления встали в одну строку.

   Тумблер (.ai-toggle-switch) из этого правила ИСКЛЮЧЁН, и это принципиально.
   Он тоже <label>, но у него внутри абсолютно позиционированный слайдер,
   который держится за него. `display: contents` убирает у элемента бокс — а
   значит и `position: relative` перестаёт действовать. Слайдер тогда цепляется
   за ближайшего позиционированного предка и уезжает в левый верхний угол окна,
   поверх всего остального; а нативный чекбокс, который в норме закрыт
   слайдером сверху, оказывается на виду. Выглядело это как «мистический
   переключатель» в углу модалки объяснений ИИ. */
.settings-group:not(:has(input[type="range"])) label:not(.ai-toggle-switch) {
    display: contents;
    margin-right: 0;
}

.settings-group:not(:has(input[type="range"])) .range-input {
    margin-right: 0;
}

.settings-group:last-child {
    margin-bottom: 3px;
    border-bottom: none;
}

.settings-group label {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin-right: 10px;
    font-weight: 400;
    cursor: pointer;
    word-break: break-word;
}


.settings-group label i {
    flex-shrink: 0;
    flex-shrink: 0;
    width: 22px;
    width: 22px;
    height: 22px;
    height: 22px;
    margin-top: 2px;
    margin-top: 2px;
}

.settings-group label[for="timeLimit"],
.settings-group label[for="questionRangeStart"] {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

.settings-group input[type="range"] {
    width: 60%;
    min-width: 100px;
    margin-right: 10px;
    vertical-align: middle;
}

.settings-group input[type="number"].range-input {
    width: 70px;
    margin-right: 5px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 500;
    text-align: center;
    box-shadow: var(--neumorph-shadow-inset);
    transition: all .2s ease-in-out;
}

.settings-group input[type="checkbox"] {
    position: relative;
    flex-shrink: 0;
    width: 49px;
    height: 28px;
    margin-top: -2px;
    margin-left: 8px;
    border-radius: 16px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* visibility: hidden; */
}

.settings-group input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--neumorph-shadow-dark);
    box-shadow: var(--neumorph-shadow-inset);
    transition: all .2s ease-in-out;
}

.settings-group input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    /* box-shadow: var(--neumorph-shadow-soft-sm); */
}

.settings-group input[type="checkbox"]:checked::before {
    background-color: var(--container-bg-color);
    /* box-shadow: var(--neumorph-shadow-soft); */
    transform: translateX(24px);
}

.settings-group input[type="checkbox"]:disabled {
    background-color: var(--input-bg-color);
    box-shadow: none;
    opacity: .5;
    cursor: not-allowed;
}

.settings-group input[type="checkbox"]:disabled::before {
    background-color: var(--border-color);
    box-shadow: none;
}

.settings-group select {
    width: 100%;
    padding: 12px 15px;
    padding-right: 40px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--input-bg-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    color: var(--text-color);
    font-family: inherit;
    font-size: 1em;
    transition: all .2s ease;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none; appearance: none;
    appearance: none;
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 18px;
}

.settings-group select:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--input-hover-border-color);
}

.settings-group select:focus {
    box-shadow: 0 0 0 3px #007bff26;
    border-color: var(--button-primary-bg);
    outline: none;
}

body.dark-mode .settings-group select,
body.synthwave-mode .settings-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.settings-group select option {
    padding: 10px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
}

#startQuizButton,
#generateCheatSheetButton,
#chooseAnotherFileButton {
    width: 100%;
    margin-top: 10px;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    font-size: 1.05em;
    font-weight: 600;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

#startQuizButton:hover,
#generateCheatSheetButton:hover,
#chooseAnotherFileButton:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

#startQuizButton {
    color: var(--button-success-bg);
}

#generateCheatSheetButton,
#chooseAnotherFileButton {
    color: var(--text-color);
}

#cheatSheetResultArea {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
}

#cheatSheetResultArea h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

#cheatSheetOutput {
    width: 100%;
    margin-bottom: 20px;
    padding: 15px;
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--container-bg-color);
    background-image: repeating-linear-gradient(135deg,
            /* Угол наклона линий */
            var(--border-color),
            /* Цвет линий (берем из темы) */
            var(--border-color) 1px, transparent 1px, transparent 3px
            /* Расстояние между линиями */
        );
    color: var(--text-color);
    font-family: monospace;
    line-height: 1.5;
    box-shadow: var(--neumorph-shadow-inset);
    background-position: right 5px bottom 5px;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    resize: vertical;
}

#downloadCheatSheetButton,
#backToSettingsButton {
    width: 100%;
    margin-top: 10px;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    font-size: 1.05em;
    font-weight: 600;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

#downloadCheatSheetButton:hover,
#backToSettingsButton:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

#downloadCheatSheetButton {
    color: var(--button-success-bg);
}

#backToSettingsButton {
    color: var(--text-color);
}

#backToFileUploadButton,
#backToSearchButton {
    border: 1px solid var(--button-secondary-border);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
}

#backToFileUploadButton:hover,
#backToSearchButton:hover {
    background-color: var(--button-secondary-hover-bg);
}

#timerDisplay {
    margin-bottom: 10px;
    color: var(--timer-text-color);
    font-size: 1.1em;
    font-weight: 700;
    text-align: left;
    padding: 5px;
}

#questionContainer {
    margin-bottom: 0;
}

#questionText:not(:empty) {
    display: block;
    /* width: auto вместо 100%: с полями по краям карточка иначе выходит за экран.
       Вместе с полем контейнера (14 px) даёт 18 px от кромки. */
    width: auto;
    max-width: 100%;
    margin: 15px 4px 30px;
    padding: 15px 10px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-sizing: border-box;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    /* Множитель задаёт ползунок «Размер текста вопроса». Он был подмешан
       только в правило для экранов от 768 пикселей — то есть на телефоне
       ползунок не менял РОВНО НИЧЕГО, хотя показывал проценты и запоминал их.
       Крутить его там можно было до посинения. А нужен он как раз на телефоне:
       клиническая задача на пол-экрана читается мелко именно там. */
    font-size: calc(1.2em * var(--quiz-text-scale, 1));
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
    box-shadow: var(--neumorph-shadow-inset);
    /* Длинный кусок без пробелов — ссылка, формула, посторонняя вставка в
       тексте вопроса — распирал карточку далеко за экран: при ширине 393 она
       вырастала до 662, текст обрезался по краям, а вместе с ней уезжала и
       нижняя панель.

       break-word тут не спасал, и это не опечатка в его работе: он переносит
       слово, которое не влезло в строку, но НЕ уменьшает минимальную ширину
       содержимого. А #quizArea — флекс, и у флекс-элемента автоминимум равен
       как раз этой ширине: самый длинный неразрывный кусок задавал размер
       всей колонке. anywhere уменьшает и её, поэтому распирать становится
       нечему. Порядок важен: старые движки anywhere не знают, отбрасывают
       строку целиком и остаются на break-word. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

#questionText .triggered-word {
    color: var(--triggered-word-color) !important;
    font-weight: 700 !important;
}

#questionText .triggerable-word {
    cursor: pointer;
}

#questionText .triggerable-word:hover {
    background-color: var(--input-hover-bg-color);
}

@media (min-width: 768px) {
    #questionText {
        margin-bottom: 25px;
        /* Масштаб задаёт ползунок в настройках: по умолчанию единица. */
        font-size: calc(1.2em * var(--quiz-text-scale, 1));
        line-height: 1.6;
    }
}

#answerOptions {
    margin: 0 20px;
    /* Вместе с полем контейнера даёт 26 px от кромки — на 8 px уже блока
       вопроса, так список читается как вложенный в вопрос, а не как второй
       такой же блок. Отступ даём списку, чтобы тени кнопок не срезались. */
    padding: 10px 12px;
    list-style: none;
}

#answerOptions li {
    margin-bottom: 10px;
    padding: 12px 15px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    font-size: 1em;
    text-align: left;
    line-height: 1.5;
    box-shadow: 4px 4px 8px var(--neumorph-shadow-dark), -4px -4px 8px var(--neumorph-shadow-light);
    cursor: pointer;
    /* То же, что у текста вопроса: длинный неразрывный кусок в варианте
       ответа растянул бы колонку теста за края экрана. */
    word-break: break-word;
    overflow-wrap: anywhere;
}
#answerOptions li:hover, #answerOptions li:active {
    will-change: transform;
}

/* PREMIUM UX: Физика вдавливания (Squish effect) */
#answerOptions li:active:not(.answered) {
    box-shadow: 1px 1px 3px var(--neumorph-shadow-dark), -1px -1px 3px var(--neumorph-shadow-light);
}

@media (min-width: 768px) {
    #answerOptions li {
        margin-bottom: 10px;
        padding: 12px 15px;
        font-size: 1em;
        line-height: 1.5;
    }
}

/* APP STORE TIER: Левитация при наведении, пружинное сопротивление при клике */
#answerOptions li {
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.1s ease, background-color 0.1s ease, border-color 0.1s ease !important;
}

#answerOptions li:hover:not(.answered) {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06), 0 2px 5px rgba(0,0,0,0.04);
    background-color: var(--input-hover-bg-color);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

#answerOptions li:active:not(.answered) {
    transform: scale(0.97) translateY(2px) !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.08) !important;
    transition: transform 0.05s linear, box-shadow 0.05s linear;
}

#answerOptions li.correct {
    border: none !important;
    background-color: var(--feedback-correct-bg) !important;
    color: var(--feedback-correct-text) !important;
    font-weight: 700 !important;
    box-shadow: var(--neumorph-shadow-inset) !important;
    opacity: 1 !important;
}

#answerOptions li.incorrect {
    border: none !important;
    background-color: var(--feedback-incorrect-bg) !important;
    color: var(--feedback-incorrect-text) !important;
    font-weight: 700 !important;
    box-shadow: var(--neumorph-shadow-inset) !important;
    opacity: 1 !important;
}

#answerOptions li.actual-correct {
    border: none !important;
    background-color: var(--feedback-correct-bg) !important;
    color: var(--feedback-correct-text) !important;
    font-weight: 700 !important;
    box-shadow: var(--neumorph-shadow-inset) !important;
    opacity: 1 !important;
}

#answerOptions li.answered.correct,
#answerOptions li.answered.incorrect {
    opacity: 1;
}

#answerOptions li.answered {
    opacity: .7;
    pointer-events: none !important;
}

#feedbackArea {
    min-height: 20px;
    margin-top: 15px;
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
}

#feedbackArea.correct-feedback {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
}

#feedbackArea.incorrect-feedback {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
}

#questionNavigationControls {
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

#questionNavigationControls button:not(.finish-test),
.haptic-feedback {
    padding: 12px 30px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
    -webkit-tap-highlight-color: #0000001a;
}

#questionNavigationControls button:not(.finish-test):not(:disabled):not(.is-active-feedback):hover {
    box-shadow: var(--neumorph-shadow-inset);
}

#questionNavigationControls button:disabled {
    background-color: var(--input-bg-color);
    color: var(--secondary-text-color);
    box-shadow: none;
    opacity: .6;
    cursor: not-allowed;
}

#questionNavigationControls button:only-child {
    width: 60%;
    max-width: 250px;
    margin-right: auto;
    margin-left: auto;
}

.quiz-footer-controls {
    margin-top: 25px;
    text-align: center;
}

button {
    display: inline-block;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    color: var(--button-primary-text);
    font-size: .95em;
    text-align: center;
    text-decoration: none;
    line-height: 1.3;
    transition: background-position .4s ease, transform .2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background-size: 200% auto;
}

@media (min-width: 768px) {
    button {
        padding: 5px;
        font-size: 1em;
    }
}

/* Выпуклые кнопки — только в верификаторе. Общее правило на весь app
   задевало вкладки чата, строки списков и прочее, что кнопками лишь
   называется. */
#testVerifierArea button,
#testVerifierArea .btn,
#testVerifierArea .ver-upload {
    box-shadow: var(--neumorph-shadow-soft-sm);
}
/* Нажатие вдавливает: без отклика кнопка кажется неживой */
#testVerifierArea button:active,
#testVerifierArea .btn:active,
#testVerifierArea .ver-upload:active {
    box-shadow: var(--neumorph-shadow-inset);
}
/* У выключенной кнопки выпуклости быть не должно — она не нажимается */
#testVerifierArea button:disabled,
#testVerifierArea .btn:disabled {
    box-shadow: none;
}
/* Заголовок сворачивания — не кнопка на вид, тень ему ни к чему */
#testVerifierArea .ver-collapse,
#testVerifierArea .ver-collapse:active {
    box-shadow: none;
}

/* Кнопки, которые модалки досоздают из JS (действия с файлом, действия
   с пользователем и т.п.), создаются без единого класса: document
   .createElement('button') и сразу в контейнер. Им достаётся только базовое
   правило выше — а там задан цвет ТЕКСТА и не задан фон. Фон остаётся
   браузерный, светло-серый, и белый текст на нём не читается: на светлых
   темах кнопка выглядит сломанной, на тёмных случайно совпадает.
   Приводим их к обычному второстепенному виду из переменных темы. */
.modal-buttons > button:not([class]),
.modal-content > button:not([class]) {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border, transparent);
}
.modal-buttons > button:not([class]):hover,
.modal-content > button:not([class]):hover {
    background-color: var(--button-secondary-hover-bg);
}

 

button:disabled {
    background-color: rgba(0,0,0,0);
    color: var(--button-primary-bg);
    opacity: 1;
    cursor: not-allowed;
}

.file-upload-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: none;
}


.main-actions-grid {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 768px) {
    .main-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Скрываем дублирующиеся кнопки на мобильных (они теперь в нижней навигации) */
    .main-actions-grid #fitnessBtn,
    .main-actions-grid #gamesButton,
    .main-actions-grid #toolsButton {
        display: none !important;
    }
}

.custom-file-upload-btn,
#gradusButton,
#parserButton,
#coursesButton,
#openNotesBtn,
#visualTrainerButton,
#roadmapButton,
#endlessModeButton,
#toolsButton,
#gridSearchBtn,
#fitnessBtn,
#errorsMarathonButton,
#openMemoryPalaceBtn,
#openFavoritesBtn,
#openFeynmanRoomBtn,
#openAnatomyAtlasBtn,
#openHistologyBtn,
#referralButton,
#openTestVerifierBtn,
#gamesButton {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 120px !important;
    padding: 15px 5px;
    border: none !important;
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--container-bg-color) !important;
    color: var(--text-color) !important;
    font-size: .95em;
    font-weight: 500;
    text-align: center;
    box-shadow: var(--neumorph-shadow-soft);
    transition: transform .3s ease, box-shadow .3s ease, color .2s ease;
    cursor: pointer;
}

.main-action-text-wrapper,
.custom-file-upload-btn .main-action-text-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

.main-action-text-wrapper span {
    display: block;
    width: 100%;
    font-size: .9em;
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
}

.custom-file-upload-btn i,
#gradusButton i,
#parserButton i,
#coursesButton i,
#openNotesBtn i,
#visualTrainerButton i,
#roadmapButton i,
#endlessModeButton i,
#toolsButton i,
#fitnessBtn i,
#openAnatomyAtlasBtn i,
#openHistologyBtn i,
#gamesButton i {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-bottom: 5px;
    stroke-width: 1.5;
}

/* Список должен совпадать с базовым списком плиток выше (строка ~1486):
   любой id, забытый здесь, остаётся без реакции на наведение. */
.custom-file-upload-btn:hover,
#gradusButton:hover,
#parserButton:hover,
#coursesButton:hover,
#visualTrainerButton:hover,
#roadmapButton:hover,
#endlessModeButton:hover,
#toolsButton:hover,
#fitnessBtn:hover,
#openAnatomyAtlasBtn:hover,
#openHistologyBtn:hover,
#gamesButton:hover,
#errorsMarathonButton:hover,
#openFavoritesBtn:hover,
#openMemoryPalaceBtn:hover,
#openFeynmanRoomBtn:hover,
#gridSearchBtn:hover,
#openTestVerifierBtn:hover,
#referralButton:hover {
    background: var(--container-bg-color) !important;
    box-shadow: 1px 1px 6px var(--neumorph-shadow-dark), -3px -2px 10px var(--neumorph-shadow-light) !important;
    opacity: 1 !important;
    transform: translateY(-5px) !important;
}

/* Здесь этим десяти плиткам через id-селекторы прибивался font-weight: 400.
   Специфичность id перебивает любое классовое правило, поэтому подписи
   «Создать тест», GRADUS, «Курсы», «Марафон», «Визуальный Тренажер»,
   «Карта знаний», «Тренировки», «Игры» и «Инструменты» оставались тоньше
   соседних, а «Выберите» (он задан классом) — нет. Вес подписей задаёт
   единое правило в блоке «ТИПОГРАФИКА ПОДПИСЕЙ ГЛАВНОГО МЕНЮ». */

.main-action-text-wrapper {
    flex-grow: 1;
    justify-content: center;
}

.custom-file-upload-btn:hover,
#gradusButton:hover,
#parserButton:hover,
#coursesButton:hover,
#visualTrainerButton:hover,
.roadmap-btn:hover,
.endless-mode-btn:hover,
#toolsButton:hover {
    border: none !important;
    background: var(--container-bg-color) !important;
    color: var(--text-color) !important;
    box-shadow: 1px 1px 6px var(--neumorph-shadow-dark), -3px -2px 10px var(--neumorph-shadow-light) !important;
    opacity: 1 !important;
    transform: translateY(-5px) !important;
}

#fileInput {
    display: none;
}

#activateSearchBtn,
#searchButton {
    width: 100%;
    margin-top: 10px;
    padding: 5px 20px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: 1.05em;
    font-weight: 500;
    text-align: center;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

#activateSearchBtn:hover,
#searchButton:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

#nextButton.finish-test {
    background-color: var(--button-success-bg);
}

#nextButton.finish-test:hover {
    background-color: var(--button-success-hover-bg);
}

#score {
    margin-top: 20px;
    padding-top: 15px;
    font-size: .9em;
    text-align: right;
    border-top: 1px solid var(--dashed-border-color);
}

#score p {
    margin: 5px 0;
}

#quickNavPanel {
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border-top: 1px solid var(--dashed-border-color);
}


#quickNavPanel h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    text-align: center;
}

@media (min-width: 768px) {
    #quickNavPanel h4 {
        font-size: 1.1em;
    }
}


.quick-nav-btn {
    min-width: 28px;
    border: 1px solid var(--button-secondary-border);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

@media (min-width: 768px) {
    .quick-nav-btn {
        min-width: 30px;
        padding: 5px 8px;
        font-size: .9em;
    }
}

.quick-nav-btn:hover {
    background-color: var(--button-secondary-hover-bg);
    transform: translateY(-1px);
}

.quick-nav-btn.current {
    z-index: 2;
    background-color: var(--quick-nav-current-bg);
    color: var(--quick-nav-current-text);
    font-weight: 700;
    border-color: var(--quick-nav-current-bg);
    /* ENTERPRISE UX: Дыхание активного элемента (Stripe Breathing Focus) */
    animation: activeRingBreathe 1.5s ease-in-out infinite alternate;
}

@keyframes activeRingBreathe {
    0% { box-shadow: 0 0 0 2px var(--container-bg-color), 0 0 0 2px color-mix(in srgb, var(--quick-nav-current-bg) 40%, transparent); }
    100% { box-shadow: 0 0 0 2px var(--container-bg-color), 0 0 0 4px color-mix(in srgb, var(--quick-nav-current-bg) 100%, transparent); }
}

.quick-nav-btn.answered.correct {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    border-color: var(--feedback-correct-border);
}

.quick-nav-btn.answered.incorrect {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border-color: var(--feedback-incorrect-border);
}

.quick-nav-btn.current.answered.correct {
    background-color: var(--feedback-correct-bg) !important;
    color: var(--feedback-correct-text) !important;
    border-color: var(--feedback-correct-border) !important;
    box-shadow: 0 0 0 2px var(--container-bg-color), 0 0 0 4px var(--feedback-correct-border) !important;
}

.quick-nav-btn.current.answered.incorrect {
    background-color: var(--feedback-incorrect-bg) !important;
    color: var(--feedback-incorrect-text) !important;
    border-color: var(--feedback-incorrect-border) !important;
    box-shadow: 0 0 0 2px var(--container-bg-color), 0 0 0 4px var(--feedback-incorrect-border) !important;
}

#resultsArea {
    /* Ритм задаёт один зазор колонки. Раньше у каждой кнопки был свой margin
       (15 px у одних, 8 px у других), и расстояния между соседями скакали. */
    gap: 10px;
    margin-top: 30px;
    text-align: center;
}

#resultsArea p {
    margin: 10px 0;
    font-size: 1.1em;
}

#errorReviewArea,
#triggeredQuizDownloadArea {
    margin: 0;
}

#downloadTriggeredQuizButton {
    background-color: var(--button-secondary-bg);
}

#downloadTriggeredQuizButton:hover {
    background-color: var(--button-secondary-hover-bg);
}

.hidden {
    display: none !important;
}

#searchQueryInput,
#accessCodeInput,
#fileInput {
    padding: 12px 15px;
    border: 1px solid var(--input-border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: 1em;
    box-shadow: inset 0 1px 2px var(--shadow-light-color);
    transition: all .2s ease-in-out;
}

#searchQueryInput:hover,
#accessCodeInput:hover,
#fileInput:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--input-hover-border-color);
}

#searchQueryInput:focus,
#accessCodeInput:focus {
    box-shadow: 0 0 0 3px #007bff26;
    border-color: var(--accent-color);
    outline: none;
}

#searchQueryInput::placeholder,
#accessCodeInput::placeholder {
    color: var(--secondary-text-color);
    opacity: 1;
}

#fileInput::-webkit-file-upload-button {
    margin-right: 15px;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    transition: background-color .2s;
    cursor: pointer;
}

#fileInput::-webkit-file-upload-button:hover {
    background-color: var(--button-secondary-hover-bg);
}

footer {
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
    border-radius: 5px;
    color: var(--secondary-text-color);
    font-size: .9em;
    border-top: none;
}

footer p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
}

footer a {
    color: var(--secondary-text-color);
    text-decoration: none;
    transition: color .2s;
}

footer a:hover {
    color: var(--text-color);
    text-decoration: underline;
}

#gradusFolderList {
    max-height: 700px;
    margin: 0px 0px 20px;
    padding: 15px;
    border: none;
    border-radius: 12px;
    overflow-y: auto;
    box-shadow: var(--neumorph-shadow-inset);
    list-style: none;
}

#gradusFolderList li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 0px;
    padding: 15px 10px;
    border: none;
    border-radius: 8px;
    background-color: var(--container-bg-color);
    font-size: 1em;
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
    word-break: break-word;
    justify-content: space-between;
}

#gradusFolderList li:last-child {
    margin-bottom: 0;
}

#gradusFolderList li:hover {
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
}

#gradusFolderList li.folder-item::before {
    content: '📁';
    margin-right: 12px;
    font-size: 1.3em;
}

#gradusFolderList li:hover {
    background-color: var(--input-hover-bg-color);
}

#gradusFolderList .loading-placeholder {
    padding: 20px;
    color: var(--secondary-text-color);
    text-align: center;
    font-style: italic;
    /* В режиме сетки список — это grid, и заглушка иначе встаёт в одну
       колонку шириной 120px: анимация из неё вываливается, а подпись
       уезжает от центра. Растягиваем на всю строку. */
    grid-column: 1 / -1;
    width: 100%;
}

/* Заглушка синхронизации с облаком: анимация и подпись — одна колонка
   по центру. Отрицательный отступ у подписи убирает воздух, который
   Lottie оставляет внутри своего кадра, а не разъезжается с gap. */
.gradus-sync-loader {
    border: none !important;
    background: transparent !important;
    gap: 0 !important;
}

.gradus-sync-loader lottie-player {
    width: min(200px, 60vw);
    height: min(200px, 60vw);
    margin: 0 auto;
}

.gradus-sync-loader .gradus-sync-caption {
    margin: -18px 0 0;
    text-align: center;
    opacity: .6;
}

#gradusBreadcrumbs {
    margin-bottom: 15px;
    padding: 10px 15px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    font-size: .9em;
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-inset);
    word-break: break-all;
}

#gradusBreadcrumbs a {
    color: var(--button-primary-bg);
    text-decoration: none;
    cursor: pointer;
}

#gradusBreadcrumbs a:hover {
    text-decoration: underline;
}

#gradusBreadcrumbs span {
    margin: 0 5px;
    color: var(--secondary-text-color);
}

#gradusFolderList li.test-item::before { content: '📝'; margin-right: 12px; font-size: 1.3em; }
#gradusFolderList li.pdf-item::before { content: '📄'; margin-right: 12px; font-size: 1.3em; }
/* === НОВЫЕ ИКОНКИ ДЛЯ GRADUS === */
#gradusFolderList li.doc-item::before { content: '📘'; margin-right: 12px; font-size: 1.3em; }
#gradusFolderList li.xls-item::before { content: '📊'; margin-right: 12px; font-size: 1.3em; }
#gradusFolderList li.ppt-item::before { content: '📽️'; margin-right: 12px; font-size: 1.3em; }
#gradusFolderList li.image-item::before { content: '🖼️'; margin-right: 12px; font-size: 1.3em; }
#gradusFolderList li.archive-item::before { content: '🗄️'; margin-right: 12px; font-size: 1.3em; }
#gradusFolderList li.file-item::before { content: '📁'; margin-right: 12px; font-size: 1.3em; opacity: 0.7; }

#searchContainer {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px dashed var(--dashed-border-color);
    border-radius: 12px;
    padding: 5px 50px 10px 50px;
}

#searchContainer label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

#searchButton {
    width: 50%;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content:not(#translateEngineDropdown) {
    position: absolute;
    left: 50%;
    z-index: 3000 !important;
    display: none;
    min-width: 160px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--container-bg-color);
    box-shadow: 0 8px 16px 0 var(--shadow-color);
    transform: translateX(-50%);
    pointer-events: auto !important;
    flex-direction: column;
}

#translateEngineDropdown {
    z-index: 3000 !important;
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    box-shadow: 0 8px 16px 0 var(--shadow-color);
    pointer-events: auto !important;
}

.dropdown-content a {
    padding: 5px 10px;
    color: var(--text-color);
    text-align: left;
    text-decoration: none;
    
    /* Базовое состояние — ВИДИМОЕ.
       Раньше здесь стояло opacity: 0, а проявляла пункты только входная
       анимация. Любая её осечка — отмена, троттлинг вкладки, prefers-
       reduced-motion — оставляла меню с пустыми строками: тест с отменой
       анимаций показал ровно это, темы исчезли. Скрытым состоянием теперь
       заведует сама анимация (кадр from), а разметка по умолчанию видима. */
    opacity: 1;
    transform: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-content.show a {
    /* backwards, а не forwards: пункт держит невидимое состояние во время
       своей задержки (ради каскада), а по окончании просто возвращается к
       базовому — совпадающему с последним кадром. Никакой вечно живой
       анимации, удерживающей стиль, на элементе не остаётся. */
    animation: menuStaggerDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.dropdown-content.show a:nth-child(1) { animation-delay: 0.04s; }
.dropdown-content.show a:nth-child(2) { animation-delay: 0.08s; }
.dropdown-content.show a:nth-child(3) { animation-delay: 0.12s; }
.dropdown-content.show a:nth-child(4) { animation-delay: 0.16s; }
.dropdown-content.show a:nth-child(5) { animation-delay: 0.20s; }
.dropdown-content.show a:nth-child(n+6) { animation-delay: 0.24s; }

@keyframes menuStaggerDrop {
    /* from задан явно: подразумеваемый начальный кадр брался из базового
       состояния, а оно теперь видимое. */
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.dropdown-content {
    pointer-events: auto !important;
}

.dropdown-content a {
    display: block;
    pointer-events: auto;
}

.dropdown-content a:hover {
    background-color: var(--input-hover-bg-color);
}


#themeDropdownContent.show {
    display: flex;
}

:root {
    --chat-accent: #e74c3c;
    --chat-bubble-mine: var(--button-primary-bg);
    --chat-bubble-other: #f8f9fa;
    --chat-info: #3498db;
    --chat-primary: #2c3e50;
    --chat-sidebar-width: 350px;
    --chat-success: #27ae60;
    --chat-warning: #f39c12;
}

body.dark-mode {
    --chat-bubble-mine: var(--button-primary-bg);
    --chat-bubble-other: #343a40;
}

.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #000c;
    animation: fadeIn .3s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.auth-modal {
    width: 90%;
    max-width: 420px;
    max-height: 90vh; /* ENTERPRISE UX: Защита от вылета за экран */
    display: flex;
    flex-direction: column;
    padding: 25px 25px 20px 25px; /* Чуть меньше отступы по краям */
    border-radius: 28px; /* Увеличили скругление как в Apple */
    background: var(--container-bg-color);
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); /* Более мягкая глубокая тень */
    animation: modalSpringUp .5s cubic-bezier(0.32, 1.15, 0.25, 1) forwards; /* Пружинная анимация */
}

@keyframes modalSpringUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-tabs {
    flex-shrink: 0; /* Не даем сжиматься */
    display: flex;
    margin-bottom: 0px;
    background: var(--input-bg-color); /* Стиль Segmented Control iOS */
    padding: 4px;
    border-radius: 12px;
}

.auth-tab {
    position: relative;
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    color: var(--secondary-text-color);
    font-size: .95em;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.auth-tab:hover:not(.active) {
    color: var(--text-color);
}

.auth-tab.active {
    background-color: var(--container-bg-color);
    color: var(--heading-color);
    /* ENTERPRISE UX: Apple Embossed Pill (Выдавленная вкладка с внутренним бликом) */
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.1), 
        0 0 0 1px var(--border-color),
        inset 0 1px 1px rgba(255,255,255,0.5); /* Физический отблеск света на верхнем ребре */
    transform: scale(1.02);
    z-index: 2;
}

body.dark-mode .auth-tab.active,
body.synthwave-mode .auth-tab.active,
body.oled-mode .auth-tab.active {
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.4), 
        0 0 0 1px rgba(255,255,255,0.1),
        inset 0 1px 1px rgba(255,255,255,0.15);
}

.auth-form {
    display: none;
    animation: fadeIn .3s ease;
    overflow-y: auto; /* ENTERPRISE UX: Разрешаем форме скроллиться внутри модалки! */
    scrollbar-width: none; /* Убираем скроллбар для эстетики */
    padding: 15px 15px 20px 15px;
}
.auth-form::-webkit-scrollbar { display: none; }

.auth-form.active {
    display: block;
}

.auth-input {
    width: 100%;
    margin-bottom: 12px; /* Чуть меньше отступ, чтобы больше влезло */
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px; /* Более мягкие края */
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: 16px !important; /* ENTERPRISE FIX: 16px блокирует автозум на iOS */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.auth-input:focus {
    border-color: var(--focus-ring);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02), 0 0 0 4px color-mix(in srgb, var(--focus-ring) 15%, transparent) !important;
    transform: translateY(-1px);
    outline: none;
}

.auth-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 10px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 4px 15px #007bff4d;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background 0.3s ease;
    will-change: transform;
    cursor: pointer;
}

.auth-btn:hover {
    background: var(--button-primary-hover-bg);
    box-shadow: 0 6px 20px #007bff66;
    transform: translateY(-2px);
}

/* === ENTERPRISE UX: Apple Taptic Spring Physics === */
.auth-btn, 
.btn-start-training, 
.advanced-send-btn,
#runParserBtn,
#generateTestFromTextBtn,
#generateTestFromTopicBtn,
#startQuizButton,
.modal-buttons button,
.btn,
.btn-secondary {
    /* Идеальная пружина возврата (Overdamping) */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease, 
                filter 0.3s ease !important;
    transform-origin: center center;
}
.auth-btn:hover, 
.btn-start-training:hover, 
.advanced-send-btn:hover,
#runParserBtn:hover,
#generateTestFromTextBtn:hover,
#generateTestFromTopicBtn:hover,
#startQuizButton:hover,
.modal-buttons button:hover,
.btn:hover,
.btn-secondary:hover {
    will-change: transform, box-shadow;
}

.auth-btn:active, 
.btn-start-training:active, 
.advanced-send-btn:active,
#runParserBtn:active,
#generateTestFromTextBtn:active,
#generateTestFromTopicBtn:active,
#startQuizButton:active,
.modal-buttons button:active,
.btn:active,
.btn-secondary:active {
    /* ENTERPRISE UX: Органическое сохранение объема (Squash & Stretch) */
    transform: scaleX(0.98) scaleY(0.92) translateY(2px) !important;
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.05) !important; 
    filter: brightness(0.92);
    /* Мгновенное сжатие, возврат обрабатывается родительским классом с cubic-bezier */
    transition: transform 0.1s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.1s linear, filter 0.1s linear !important;
    transform-origin: center bottom;
}

.advanced-chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #000c;
    animation: fadeIn .3s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.advanced-chat-modal {
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 1200px;
    height: 90%;
    max-height: 1000px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--container-bg-color);
    box-shadow: 0 25px 80px #00000080;
    transition: all .3s ease;
    animation: slideUp .4s ease;
}

/* Низкий экран при обычной ширине — планшеты вроде 1024×600, ноутбуки в
   ландшафте, окно браузера в половину высоты. Мобильное правило ниже сюда не
   попадает (оно по ширине), и окно оставалось высотой 90% от и без того
   малой высоты, да ещё с отступами сверху и снизу. Шапка, вкладки, полоса
   закреплённого и поле ввода — величины постоянные, поэтому на саму
   переписку оставалась треть экрана. Разворачиваем на весь экран и ужимаем
   поле ввода: место нужно сообщениям, а не пустой форме. */
@media (max-height: 760px) and (min-width: 769px) {
    .advanced-chat-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        max-height: 100%;
        border-radius: 0;
    }

    #chatInput {
        min-height: 52px;
        max-height: 110px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .advanced-chat-header { padding-top: 3px; padding-bottom: 3px; }
    .chat-input-area { padding: 4px 5px; gap: 3px; }

    /* ИИ-чат страдает тем же, только мягче: у него 95vh вместо 90%.
       Оставшиеся 5% на низком экране — это тоже строка переписки. */
    .ai-chat-modal-content {
        height: calc(var(--vh, 1vh) * 100);
        max-height: 100%;
    }
    #aiChatInput {
        min-height: 52px;
        max-height: 120px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .advanced-chat-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        max-height: 100%;
        border-radius: 0;
    }

    .chat-sidebar {
        display: none;
    }

    .chat-grid-container {
        grid-template-columns: 1fr !important;
    }

    /* ИИ-чат на телефоне — единственная модалка во весь экран.
       Причин у тёмной рамки было две. Первая: базовое правило даёт чату
       height: calc(var(--vh) * 95) — на компьютере это осознанная рамка
       вокруг окна, а на телефоне те самые 5% высоты и есть чёрные полосы
       сверху и снизу. Полноэкранная версия существовала, но только в
       @media (max-height: 760px) and (min-width: 769px), то есть с условием
       «экран шире 769px» — на телефон она не попадала никогда.
       Вторая: у чата содержимое несёт и класс .modal-content, поэтому на
       него ложится общее мобильное правило модалок (отступы 20px,
       скругление 32px сверху) — и оно написано через !important, так что
       перебить его можно только тем же.

       Селектор нарочно привязан к #aiChatModal: остальные модалки должны
       сохранить свои отступы от краёв, это их задуманный вид. */
    #aiChatModal .modal-content,
    #aiChatModal .ai-chat-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        /* Снизу оставляем безопасную зону: под ней домашний индикатор,
           и поле ввода не должно под него уезжать. */
        padding: 0 0 env(safe-area-inset-bottom) 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    #aiChatModal {
        padding: 0 !important;
    }
}

.advanced-chat-header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 15px;
    background: var(--container-bg-color);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

.chat-title {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-title h3 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1.4em;
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    white-space: break-spaces;
}

.unread-badge {
    min-width: 20px;
    padding: 4px 8px;
    border-radius: 12px;
    background: var(--chat-accent);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    text-align: center;
}

.header-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 35px;
    padding-top: 80px;
}


/* Кнопка имени в шапке чата.
   Была inline-block с неоморфной плашкой: на стекле она читалась как чужая
   карточка, приклеенная к углу, а аватарка внутри вообще не имела стилей —
   сырой <img> вставал по базовой линии текста и сбивал строку. Теперь это
   одна пилюля: кружок аватара и имя на общей оси, фон появляется только под
   пальцем. */
#currentUser {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 190px;
    padding: 5px 10px 5px 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    overflow: hidden;
    background: transparent;
    color: var(--text-color);
    font-size: 0.95em;
    font-weight: 600;
    box-shadow: none;
    transition: background .2s ease, border-color .2s ease;
    cursor: pointer;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

/* Имя рядом с аватаркой обрезается само, не растягивая пилюлю */
#currentUser > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Аватарка в шапке. Правил у неё не было вовсе: картинка показывалась в
   натуральную величину и ровно настолько, насколько повезло. */
.header-mini-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--input-bg-color);
}

/* Без аватарки пилюля не должна быть приплюснута слева */
#currentUser:not(:has(.header-mini-avatar)) {
    padding-left: 10px;
}

#currentUser:hover,
#currentUser:focus-visible {
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    border-color: var(--border-color);
    box-shadow: none;
    transform: none;
}

#currentUser:active {
    background: color-mix(in srgb, var(--text-color) 14%, transparent);
}

.advanced-chat-header .header-controls button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--secondary-text-color);
    font-size: inherit;
    transition: all .3s ease;
    cursor: pointer;
}

.advanced-chat-header .header-controls button:hover {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
    transform: scale(1.05);
}

.advanced-chat-header .header-controls button i[data-lucide] {
    width: 22px;
    height: 22px;
}


.chat-sidebar {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    width: var(--chat-sidebar-width);
    min-height: 0;
    background-color: var(--container-bg-color);
    border-right: 1px solid var(--border-color);
}

.sidebar-section {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-section h4 {
    margin: 0 0 10px;
    color: var(--text-color);
    font-size: 1em;
    font-weight: 600;
}


.sidebar-search-input {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    color: var(--text-color);
}

.sidebar-search-input:focus {
    box-shadow: 0 0 0 3px #007bff1a;
    border-color: var(--button-primary-bg);
}

/* === User list filter (city / university) === */
.user-search-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.user-search-row .sidebar-search-input { flex: 1; }
.user-list-filter-btn {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin: 12px;
    border: 2px solid var(--border-color);
    background: var(--container-bg-color);
    color: var(--text-color);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.user-list-filter-btn:hover { border-color: var(--button-primary-bg); }
.user-list-filter-btn.active {
    background: var(--accent, var(--button-primary-bg));
    color: #fff;
    border-color: var(--accent, var(--button-primary-bg));
}
.user-list-filter-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--accent, var(--button-primary-bg));
    border-radius: 50%;
    border: 1.5px solid var(--container-bg-color);
}
.user-list-filter-btn.active .user-list-filter-dot { display: none; }

.user-list-filter-panel {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--container-bg-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--neumorph-shadow-soft-sm);
}
.ulfp-section { display: flex; flex-direction: column; gap: 6px; }
.ulfp-label {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--secondary-text-color);
    font-weight: 600;
}
.ulfp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 7px;
}
.ulfp-chip {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--message-bg-other, rgba(150,150,150,0.12));
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.82em;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.ulfp-chip:hover { background: var(--message-bg-self, rgba(150,150,150,0.22)); }
.ulfp-chip.active {
    background: var(--accent, var(--button-primary-bg));
    color: #fff;
    border-color: var(--accent, var(--button-primary-bg));
}
.ulfp-empty {
    font-size: 0.82em;
    color: var(--secondary-text-color);
    padding: 4px 2px;
    font-style: italic;
}
.ulfp-footer { display: flex; justify-content: flex-end; }
.ulfp-reset-btn {
    background: none;
    border: none;
    color: var(--accent, var(--button-primary-bg));
    cursor: pointer;
    font-size: 0.85em;
    padding: 4px 8px;
}
.ulfp-reset-btn:hover { text-decoration: underline; }


.tab-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--container-bg-color);
    transition: all .2s ease;
    cursor: pointer;
}

.tab-item:hover {
    background: var(--input-hover-bg-color);
    transform: translateX(3px);
    border-color: var(--input-hover-border-color);
}

.tab-item.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 600;
    box-shadow: 0 4px 15px #007bff4d;
    border-color: var(--button-primary-bg);
}

.tab-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--chat-accent);
}


.tab-counter {
    min-width: 18px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--chat-accent);
    color: #fff;
    font-size: .75em;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    /* ENTERPRISE UX: Dynamic Island Stretch (Эластичное растяжение счетчиков как капля) */
    animation: dynamicIslandStretch 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transform-origin: center;
}

@keyframes dynamicIslandStretch {
    0% { transform: scaleX(0.2) scaleY(0.5); opacity: 0; }
    40% { transform: scaleX(1.3) scaleY(0.8); opacity: 1; }
    70% { transform: scaleX(0.9) scaleY(1.1); }
    100% { transform: scaleX(1) scaleY(1); opacity: 1; }
}

.tab-item.active .tab-counter {
    border: none;
    background-color: var(--button-primary-text);
    color: var(--heading-color);
}

body.dark-mode .tab-item.active .tab-counter,
body.synthwave-mode .tab-item.active .tab-counter,
body.glass-dark .tab-item.active .tab-counter {
    background-color: var(--button-primary-text);
    color: var(--container-bg-color);
}

.channels-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.channel-item {
    gap: 8px;
    margin-bottom: 0;
    padding: 10px 15px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.channel-item:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

.channel-item.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 600;
    box-shadow: 0 4px 12px var(--shadow-light-color);
    transform: translateY(-2px);
}


.channel-item.active .unread-channel-badge {
    background-color: var(--button-primary-text);
    color: var(--heading-color);
}

.create-btn {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--container-bg-color);
    color: var(--text-color);
    font-size: .9em;
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease;
    cursor: pointer;
}

.create-btn:hover {
    box-shadow: var(--neumorph-shadow-inset);
    border-style: none;
}

.online-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--container-bg-color);
    transition: all .2s ease;
    cursor: pointer;
}

.online-user:hover {
    background: var(--input-hover-bg-color);
    transform: translateX(3px);
}

.status-indicator {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-indicator.online {
    background: #2ecc71;
    box-shadow: 0 0 5px #2ecc71;
}

.status-indicator.away {
    background: #f39c12;
}

.status-indicator.busy {
    background: #e74c3c;
}

.pro-badge {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--chat-warning);
}

.username,
.channel-name-container {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.username-text,
.channel-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-main-content {
    flex: 1;
    min-height: 0;
}

.chat-top-bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
    background: var(--container-bg-color);
    border-bottom: 1px solid var(--border-color);
}

#chatSearchInput {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--input-border-color);
    border-radius: 8px;
    background: var(--input-bg-color);
    color: var(--text-color);
    transition: all .2s ease;
    outline: none;
}

#chatSearchInput:focus {
    box-shadow: 0 0 0 3px #007bff1a;
    border-color: var(--button-primary-bg);
}

.message-area {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
    background: var(--bg-color);
    /* PREMIUM UX FIX: Убираем scroll-behavior: smooth. 
       Он ломает мгновенную корректировку скролла при загрузке истории.
       Все плавные скроллы мы делаем через JS scrollTo({behavior: 'smooth'}) */
    overflow-anchor: auto; /* Помогает браузеру держать позицию при вставке картинок */
}

.empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--secondary-text-color);
    font-size: 1.1em;
    text-align: center;
}

.empty-state::before {
    content: "💭";
    display: inline-block; /* Необходимо для анимации трансформации */
    margin-bottom: 15px;
    font-size: 3.5em; /* Чуть крупнее */
    opacity: 0.8;
    /* PREMIUM UX: Эффект дыхания / левитации */
    animation: breatheEmpty 2s ease-in-out infinite alternate;
    will-change: transform, opacity;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

@keyframes breatheEmpty {
    0% { 
        transform: translateY(0) scale(1); 
        opacity: 0.5; 
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
    }
    100% { 
        transform: translateY(-6px) scale(1.03); 
        opacity: 0.8; 
        filter: drop-shadow(0 12px 15px rgba(0,0,0,0.1));
    }
}

.message {
    position: relative;
    z-index: 1; /* Базовый слой */
    /* На широком экране ограничиваем абсолютной шириной (~680px), на узком — 95% */
    max-width: min(95%, 680px);
    margin-bottom: 20px;
    overflow: visible !important; /* Разрешаем меню вылезать за границы */
    animation: messageSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* Поднимаем сообщение над остальными при наведении, чтобы меню не перекрывалось */
.message:hover {
    z-index: 100 !important;
}

.message.mine {
    align-self: flex-end;
}

.message.other {
    align-self: flex-start;
    padding-left: 44px;
}

/* === АВАТАРКИ В СООБЩЕНИЯХ (Telegram-style) === */
.message-avatar {
    display: none;
}

.message.other .message-avatar {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--chat-primary, #667eea), var(--accent, #764ba2));
    color: #fff;
    font-weight: 700;
    font-size: 0.95em;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    user-select: none;
    flex-shrink: 0;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.message.other .message-avatar:not(.avatar-ai):hover {
    transform: scale(1.06);
}
.message.other .message-avatar:not(.avatar-ai):active {
    transform: scale(0.94);
}

.message.other .message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.message.mine .message-avatar {
    display: none !important;
}

/* Файл/папка/картинка сбрасывают padding через !important — возвращаем место под аватарку */
.message.other.file-share-bubble,
.message.other.folder-share-bubble,
.message.other.image-bubble {
    padding-left: 44px !important;
}

@media (max-width: 600px) {
    .message.other {
        padding-left: 38px;
    }
    .message.other.file-share-bubble,
    .message.other.folder-share-bubble,
    .message.other.image-bubble {
        padding-left: 38px !important;
    }
    .message.other .message-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.85em;
    }
}

.message-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    color: var(--secondary-text-color);
    font-size: .85em;
}

.message.mine .message-header {
    justify-content: flex-end;
}

.author {
    color: var(--chat-primary);
    font-weight: 600;
}

.message.mine .author {
    color: var(--button-primary-bg);
}

.timestamp {
    font-size: .9em;
    opacity: .8;
}

/* Кнопка "⋯" для не-текстовых сообщений (файлы/папки/ссылки-на-вопрос).
   Даёт видимый способ открыть меню действий (ответить/закрепить/удалить),
   т.к. тап по самой карточке отдан под действия с контентом. */
.message-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 4px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    opacity: .65;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.message-more-btn:hover,
.message-more-btn:focus-visible {
    background: rgba(0, 0, 0, 0.08);
    opacity: 1;
    outline: none;
}
.message-more-btn:active {
    transform: scale(0.92);
}
.message-more-btn i,
.message-more-btn svg {
    width: 16px;
    height: 16px;
}

.message-content {
    position: relative;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--container-bg-color);
    line-height: 1.4;
    box-shadow: 0 2px 10px #0000001a;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: Google Sans, Arial, sans-serif;
    letter-spacing: .1px;
}

.message.mine .message-content {
    border: none;
    background: var(--chat-bubble-mine);
    color: var(--button-primary-text);
    box-shadow: var(--neumorph-shadow-inset);
    transition: box-shadow .2s ease-in-out;
}

.message.other .message-content {
    border-bottom-left-radius: 6px;
}

.message-actions {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity .2s ease;
}

.message:hover .message-actions {
    opacity: 1;
}

.message-actions button {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: .85em;
    transition: all .2s ease;
    cursor: pointer;
}

.message-actions button:hover {
    background: var(--input-hover-bg-color);
    transform: scale(1.05);
    border-color: var(--input-hover-border-color);
}

.question-bubble {
    width: 100%;
    margin: 0 0 10px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    box-sizing: border-box;
    background: var(--input-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    animation: messageSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

body.synthwave-mode .question-bubble {
    border: 1px solid var(--accent);
    background: var(--container-bg-color);
    box-shadow: 0 0 15px #38bdf826;
}

body.synthwave-mode .option-vote-btn.correct {
    background-color: #22c55e26;
    border-color: var(--button-success-bg);
}

.question-square {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--button-secondary-bg), var(--button-secondary-hover-bg));
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    box-shadow: 0 4px 10px #0003;
    transition: all .3s ease;
    cursor: pointer;
}

.question-square:hover {
    transform: scale(1.05) rotate(5deg);
}

.question-square.has-votes {
    background: linear-gradient(135deg, var(--chat-success), #1e8449);
}


.question-content {
    flex: 1;
}

.question-content p {
    margin: 8px 0;
    line-height: 1.5;
}

.question-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.question-actions button {
    font-size: .9em;
    font-weight: 500;
    box-shadow: 0 2px 8px #0000001a;
}

.question-actions button:hover {
    box-shadow: 0 4px 12px #0003;
}

.question-actions button:first-child {
    background: linear-gradient(135deg, var(--chat-success), #1e8449);
    color: #fff;
}

.question-actions button:last-child {
    background: linear-gradient(135deg, var(--chat-warning), #d68910);
    color: #fff;
}


.chat-input-area {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 5px;
    background: var(--input-bg-color);
    border-top: 1px solid var(--border-color);
}


.input-actions-top {
    display: flex;
    gap: 8px;
    align-self: flex-start;
}

.input-action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 5px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--secondary-text-color);
    font-size: 1.3em;
    /* [Paint Fix]: Вместо 'all' анимируем только цвета и трансформации */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
}

.input-action-btn.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: 0 0 8px var(--button-primary-bg);
    border-color: var(--button-primary-bg);
}

body.dark-mode .input-action-btn.active:hover,
body.synthwave-mode .input-action-btn.active:hover {
    background: var(--button-primary-hover-bg);
}

.input-action-btn:hover {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
    border-color: var(--input-hover-border-color);
}

.input-wrapper {
    display: flex;
    align-items: flex-end;
}

#chatInput {
    flex: 1;
    min-height: 95px;
    max-height: 150px;
    margin: 0px 0px;
    padding: 14px 95px 14px 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Более мягкая форма iMessage */
    overflow-y: auto;
    background: var(--container-bg-color);
    color: var(--text-color);
    font-size: 1em;
    line-height: 1.2;
    transition: border-color 0.3s ease, box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.2s ease;
    outline: none;
    resize: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    /* ОПТИМИЗАЦИЯ VRAM: Удален статический will-change */
    transform: translateZ(0);
    letter-spacing: 0.1px;
    font-family: Google Sans, Arial, sans-serif;
}

#chatInput:focus {
    border-color: var(--focus-ring);
    /* Глубокое мягкое свечение при фокусе */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02), 0 0 0 4px color-mix(in srgb, var(--focus-ring) 15%, transparent);
    transform: translateY(-1px);
}

.advanced-send-btn {
    right: 6px;
    flex-shrink: 0;
    background: var(--button-primary-bg);
    color: #fff;
    font-size: 1.5em;
}

.advanced-send-btn:hover {
    /* box-shadow: 0 6px 20px #007bff66; */
    transform: scale(1.1);
    transform: scale(1.1) rotate(15deg);
}

.advanced-send-btn:active {
    transform: scale(0.95);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* ENTERPRISE UX: Optical Rack Focus (Плавный расфокус камеры) */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    animation: rackFocusOverlay 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: backdrop-filter, opacity;
}

/* Окно публикации колоды открывается поверх deckStartModal — поднимаем над общим слоем модалок */
#publishDeckModal {
    z-index: 3010;
}

@keyframes rackFocusOverlay {
    0% { opacity: 0; backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); }
    100% { opacity: 1; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); }
}

.modal-content {
    width: 90%;
    max-width: 700px;
    padding: 25px 30px;
    border-radius: 20px; /* Более мягкий угол, как в iOS */
    background: var(--container-bg-color);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
    /* PREMIUM UX: Пружинное появление */
    transform-origin: center;
    animation: modalPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    /* ПРОДАКШЕН ФИКС: Убран перманентный will-change для оптимизации видеопамяти. Браузер сам активирует нужный слой во время animation: modalPopIn */
    transform: translateZ(0); 
}

/* ENTERPRISE UX: iOS App Store Card Reveal (Пружинный 3D-вылет) */
@keyframes modalPopIn {
    0% { 
        opacity: 0; 
        transform: scale(0.85) translateY(40px) perspective(1000px) rotateX(10deg); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0) perspective(1000px) rotateX(0deg); 
    }
}

.modal-content h3 {
    margin: 15px 0px 5px !important;
    color: var(--heading-color);
}

.modal-content input,
.modal-content textarea {
    width: 100%;
    max-width: 100%; /* ЗАЩИТА: Не даем вылезти за пределы родителя */
    box-sizing: border-box !important; /* ЗАЩИТА: Padding внутрь ширины */
    margin-bottom: 12px;
    padding: 13px 10px; /* PREMIUM UX: Удобнее для пальцев */
    border: 1px solid var(--input-border-color);
    border-radius: 12px; /* Чуть мягче углы */
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 16px !important; /* ЗАЩИТА: Спасает от автозума на iOS */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}


.modal-content input:focus,
.modal-content textarea:focus {
    box-shadow: var(--neumorph-shadow-inset);
    border-color: var(--button-primary-bg);
}


/* PREMIUM UX: Превращаем унылую текстовую ссылку "Закрыть" в полноценную широкую кнопку */
#authCloseButton, 
.modal-buttons button[data-lang-key="auth_close_button"] {
    width: 100% !important;
    margin-top: 0px !important;
    padding: 10px !important;
    background: var(--button-secondary-bg) !important;
    color: var(--button-secondary-text) !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#authCloseButton:active,
.modal-buttons button[data-lang-key="auth_close_button"]:active {
    transform: scale(0.96) !important;
}

.modal-buttons button {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

.modal-buttons button:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

.modal-buttons .btn-danger {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
}

.modal-buttons .btn-danger:hover {
    background-color: var(--accent);
    color: #fff;
}

.modal-buttons .btn:not(.btn-danger):not(.btn-secondary) {
    background-color: var(--feedback-correct-bg) !important;
}

.modal-buttons .btn:not(.btn-danger):not(.btn-secondary):hover {
    background-color: var(--button-success-bg);
    color: #fff;
}

.modal-buttons .btn-secondary {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    color: var(--secondary-text-color);
}

.modal-buttons .btn-secondary:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

#fileActionRegenerateBtn {
    border: 1px solid var(--button-secondary-border);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

#fileActionRegenerateBtn:hover {
    background-color: var(--button-secondary-hover-bg);
}

body:not(.dark-mode):not(.synthwave-mode):not(.glass-dark) button[onclick*="closeModal('fileActionsModal')"] {
    color: var(--text-color);
}

emoji-picker {
    z-index: 2100;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
    visibility: hidden;
    
    /* PREMIUM UX FIX: Пробиваем Shadow DOM компонента */
    /* Убиваем вшитый белый фон, чтобы сработал твой backdrop-filter */
    --background: transparent !important;
    /* Убиваем внутреннюю рамку библиотеки, чтобы не было "двойных" рамок */
    --border-color: transparent !important;
}

emoji-picker.visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
    visibility: visible;
    contain: content;
    display: flex;
    flex-direction: column;
    border: var(--border-size) solid var(--button-hover-background);
    border-radius: 12px;
    overflow: hidden;
    --total-emoji-size: calc(var(--emoji-size) + (2 * var(--emoji-padding)));
    --total-category-emoji-size: calc(var(--category-emoji-size) + (2 * var(--category-emoji-padding)));
    background-color: color-mix(in srgb, var(--container-bg-color) 30%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    backdrop-filter: blur(10px) saturate(180%);
    box-shadow: var(--neumorph-shadow-soft);
}


@media (max-width: 480px) {
    emoji-picker {
        left: 15px;
        width: calc(100% - 30px);
    }
    emoji-picker.visible {
        /* background-color: var(--container-bg-color); */
    }
}

.chat-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    height: 20px;
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
    background: var(--chat-accent);
    color: #fff;
    font-size: .75em;
    font-weight: 700;
}

#chatToggle {
    position: relative;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* PREMIUM UX: Telegram-style Bubble Physics */
.message.mine, .ai-message-container.is-user {
    transform-origin: bottom right; /* Вырастает из правого нижнего угла */
}
.message.other, .ai-message-container.is-model {
    transform-origin: bottom left; /* Вырастает из левого нижнего угла */
}

/* PREMIUM UX: Идеальная пружина сообщений (iOS iMessage feel) */
@keyframes messageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.01); 
    }
    80% {
        transform: translateY(2px) scale(0.995); 
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-message-container {
    animation: messageSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) both;
}

/* Создаем легкий каскад (Cascade Reveal) для первых 5 сообщений в чате */
.ai-message-container:nth-last-child(1) { animation-delay: 0.00s; }
.ai-message-container:nth-last-child(2) { animation-delay: 0.04s; }
.ai-message-container:nth-last-child(3) { animation-delay: 0.08s; }
.ai-message-container:nth-last-child(4) { animation-delay: 0.12s; }
.ai-message-container:nth-last-child(5) { animation-delay: 0.16s; }

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

* {
    scrollbar-color: var(--secondary-text-color) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 6px; /* Утоньшаем */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px; /* Отступы по краям, чтобы скролл "левитировал" */
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--secondary-text-color) 40%, transparent); /* Полупрозрачный */
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--secondary-text-color) 80%, transparent);
}

/* Скрываем кнопки со стрелками (если они вдруг появляются) */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.question-options-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.option-vote-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    text-align: left;
    transition: all .2s ease;
    cursor: pointer;
}

.option-vote-btn:hover {
    background-color: var(--input-hover-bg-color);
    box-shadow: 0 4px 10px #0000001a;
    transform: translateY(-2px);
    border-color: var(--button-primary-bg);
}

.option-vote-btn.correct {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    font-weight: 500;
    border-color: var(--feedback-correct-border);
    position: relative;
    overflow: hidden;
}

.option-vote-btn.correct::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-20deg);
    animation: successShimmer 0.7s ease-out forwards;
}

@keyframes successShimmer {
    100% { left: 200%; }
}

body.dark-mode .option-vote-btn.correct {
    background-color: #1c3a24;
}

.option-vote-btn.incorrect {
    border-color: var(--border-color);
}

.option-text {
    flex-grow: 1;
    margin-right: 10px;
}

.option-votes-badge {
    min-width: 22px;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--button-primary-bg);
    color: var(--secondary-text-color);
    font-size: .8em;
    font-weight: 700;
    text-align: center;
}

.option-vote-btn.voted-by-user {
    box-shadow: 0 0 8px #3498db4d;
    border-color: var(--chat-info);
    border-width: 2px;
}

body.dark-mode .option-vote-btn.voted-by-user {
    background-color: #3498db26;
    border-color: var(--chat-info);
}

.message.question-link-bubble .message-content {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.question-link-content {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg-color);
    transition: all .2s ease;
    cursor: pointer;
    border-left: 5px solid var(--chat-info);
}

.question-link-content:hover {
    background-color: var(--input-hover-bg-color);
    box-shadow: 0 4px 12px #00000014;
    transform: translateY(-2px);
    border-color: var(--chat-info);
}

.question-link-icon {
    font-size: 2em;
    opacity: .7;
}

.question-link-text {
    flex: 1;
}

.question-link-text strong {
    color: var(--text-color);
}

.question-link-text p {
    margin: 4px 0 0;
    color: var(--secondary-text-color);
    font-size: .9em;
    line-height: 1.4;
}

.question-link-arrow {
    color: var(--chat-info);
    font-size: 1.8em;
    font-weight: 700;
    transition: transform .2s ease;
}

.question-link-content:hover .question-link-arrow {
    transform: translateX(5px);
}

.reply-context {
    max-width: 80%;
    margin-bottom: -8px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    background: var(--input-bg-color);
    font-size: .85em;
    transition: background-color .2s ease;
    cursor: pointer;
    border-bottom: none;
}

.reply-context:hover {
    background-color: #0000001a;
}

.message.mine .reply-context {
    margin-left: auto;
    background-color: #e7f3ff;
    border-color: #b3d7ff;
}

.message.mine .reply-context:hover {
    background-color: #ffffff40;
}

.reply-author {
    color: #0056b3;
    font-weight: 700;
}

.reply-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #5a6268;
}

.message.mine .reply-context .reply-author {
    color: #004a99;
}

.message.mine .reply-context .reply-text {
    color: #495057;
}

body.dark-mode .reply-context {
    background-color: #ffffff0d;
    border-color: #ffffff1a;
}

body.dark-mode .reply-author {
    color: #a8c7fa;
}

body.dark-mode .reply-text {
    color: var(--secondary-text-color);
}

.replying-to-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg-color);
    animation: fadeIn .3s;
}

.replying-to-panel span {
    color: var(--secondary-text-color);
    font-size: .9em;
}

.replying-to-panel p {
    margin: 2px 0 0;
    font-style: italic;
}

.cancel-reply-btn {
    border: none;
    background: none;
    color: var(--secondary-text-color);
    font-size: 1.5em;
    cursor: pointer;
}

/* Миниатюра картинки в превью ответа — и в input-панели, и в рендере reply-context */
.replying-to-panel .reply-thumb,
.reply-context .reply-thumb {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 8px;
    display: block;
    background: rgba(0,0,0,0.06);
}

/* В replying-to-panel разрешаем reply-info растягиваться, чтобы кнопка крестика осталась справа */
.replying-to-panel .reply-info {
    flex: 1 1 auto;
    min-width: 0;
}

/* В рендере reply-context при наличии миниатюры включаем flex-раскладку */
.reply-context.has-thumb {
    display: flex;
    align-items: center;
}
.reply-context .reply-info {
    min-width: 0;
    flex: 1 1 auto;
}

/* === АНИМАЦИЯ РЕДАКТИРОВАНИЯ СООБЩЕНИЯ (SMART FLASH) === */
@keyframes editBubbleFlash {
    0% { background-color: color-mix(in srgb, var(--accent) 35%, transparent); transform: scale(0.98); }
    40% { background-color: color-mix(in srgb, var(--accent) 15%, transparent); transform: scale(1.02); }
    100% { background-color: var(--container-bg-color); transform: scale(1); }
}

.message.mine .message-content.edit-flash {
    animation: editBubbleFlashMine 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.message.other .message-content.edit-flash {
    animation: editBubbleFlash 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Спец-вспышка для своих сообщений (с учетом их базового цвета) */
@keyframes editBubbleFlashMine {
    0% { background-color: color-mix(in srgb, var(--container-bg-color) 40%, var(--button-primary-bg)); transform: scale(0.98); }
    40% { background-color: color-mix(in srgb, var(--container-bg-color) 15%, var(--button-primary-bg)); transform: scale(1.02); }
    100% { background-color: var(--button-primary-bg); transform: scale(1); }
}

.edited-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 0.75em;
    color: var(--secondary-text-color);
    opacity: 0.7;
    font-style: italic;
    white-space: nowrap;
    /* Пружинное появление надписи "изменено" */
    animation: popInEdited 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes popInEdited {
    0% { opacity: 0; transform: translateY(5px) scale(0.8); filter: blur(2px); }
    100% { opacity: 0.7; transform: translateY(0) scale(1); filter: blur(0px); }
}


.message-actions-toolbar button {
    color: var(--secondary-text-color);
    font-size: 1.1em;
}

.message-actions-toolbar button:hover {
    color: var(--text-color);
}

.reactions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.message.mine .reactions-container {
    justify-content: flex-end;
}

.reaction-badge {
    background: #e7f3ff;
    color: #0056b3;
    font-size: .8em;
    cursor: pointer;
}

.reaction-badge:hover {
    border-color: #0056b3;
}

.reaction-badge.mine {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-hover-bg);
}

body.dark-mode .reaction-badge,
body.synthwave-mode .reaction-badge,
body.glass-dark .reaction-badge {
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    font-weight: 400;
}

.reaction-picker {
    position: fixed;
    z-index: 2500;
    display: flex;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--container-bg-color);
    box-shadow: 0 5px 20px var(--shadow-color);
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    animation: picker-appear .2s ease forwards;
}

@keyframes picker-appear {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.reaction-picker span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 50%;
    font-size: 1.6em;
    transition: all .2s ease;
    cursor: pointer;
}

.reaction-picker span:hover {
    background: var(--input-hover-bg-color);
    transform: scale(1.2);
}

.reaction-picker-add-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    border: 1px dashed var(--border-color);
    border-radius: 50%;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: 1.6em;
    line-height: 1;
    transition: all .2s ease;
    cursor: pointer;
}

.reaction-picker-add-btn:hover {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
    transform: scale(1.1) rotate(90deg);
    border-style: solid;
}

.full-reaction-picker {
    position: fixed;
    bottom: auto;
    z-index: 2600;
    opacity: 0;
    animation: picker-appear .2s ease forwards;
    visibility: visible;

    /* Красивый стеклянный стиль, как у основного пикера */
    display: flex;
    flex-direction: column;
    border: var(--border-size) solid var(--button-hover-background);
    border-radius: 12px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--container-bg-color) 88%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: var(--neumorph-shadow-soft);
    --background: transparent !important;
    --border-color: transparent !important;
    --total-emoji-size: calc(var(--emoji-size) + (2 * var(--emoji-padding)));
    --total-category-emoji-size: calc(var(--category-emoji-size) + (2 * var(--category-emoji-padding)));
}

@media (max-width: 480px) {
    .full-reaction-picker {
        left: 15px !important;
        width: calc(100% - 30px) !important;
        background-color: var(--container-bg-color);
    }
}

@keyframes highlight-fade {
    0% {
        background-color: color-mix(in srgb, var(--accent) 30%, transparent);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0px transparent;
    }
}

.message.highlighted .message-content,
.message.highlighted .chat-image-wrapper,
.message.highlighted .chat-gallery,
.message.highlighted .file-share-content,
.message.highlighted .voice-waveform-player,
.question-bubble.highlighted {
    animation: highlight-fade 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

mark.quote-highlight {
    background-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 1px 2px;
    animation: quote-highlight-pulse 3s ease-out forwards;
}

@keyframes quote-highlight-pulse {
    0% {
        background-color: color-mix(in srgb, var(--accent) 50%, transparent);
        box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent);
    }
    70% {
        background-color: color-mix(in srgb, var(--accent) 35%, transparent);
        box-shadow: 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.question-actions .delete-question-btn {
    background: var(--chat-accent);
}

.question-actions .delete-question-btn:hover {
    background: #c0392b;
}

.user-menu-container {
    position: relative;
}

.user-dropdown {
    position: fixed;
    z-index: 2100;
    min-width: 180px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    /* PREMIUM UX: Frosted Glass */
    background: color-mix(in srgb, var(--container-bg-color) 90%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Пружинная анимация появления от правого верхнего угла */
    transform-origin: top right;
    animation: dropdownPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    background-color: color-mix(in srgb, var(--container-bg-color) 10%, transparent);
}

@keyframes dropdownPop {
    0% { opacity: 0; transform: scale(0.85) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.user-dropdown a {
    padding: 12px 16px;
    color: var(--text-color);
    font-size: .9em;
    text-decoration: none;
    transition: background-color .2s ease;
    white-space: nowrap;
}

.user-dropdown a:hover {
    background: var(--input-hover-bg-color);
}

#profileEmail[readonly] {
    background-color: var(--input-bg-color);
    color: var(--secondary-text-color);
    cursor: not-allowed;
}

.favorite-actions {
    margin-top: 10px;
    text-align: right;
}

.search-results-header {
    margin-bottom: 20px;
}

.search-results-header h2 {
    flex-grow: 1;
    color: var(--primary);
}

.search-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 15px;
    padding: 8px 10px;
    border: none;
    border-radius: 50px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
}

.nav-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--container-bg-color);
    color: var(--text-color);
    font-size: 1.2em;
    font-weight: 700;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.nav-arrow:hover:not(:disabled) {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

.nav-arrow:disabled {
    background-color: var(--input-bg-color);
    color: var(--secondary-text-color);
    box-shadow: none;
    opacity: .6;
    cursor: not-allowed;
}


#searchResultCards {
    max-height: none;
    margin-top: 20px;
    padding: 0;
    border: none;
    overflow-y: visible;
    background-color: transparent;
}

.search-no-results-message {
    padding: 40px 20px;
    color: #666;
    font-size: 1.1em;
    text-align: center;
}

/* ENTERPRISE UX: Эффект левитации для иконок пустых состояний */
.search-no-results-message svg,
.search-no-results-message i {
    will-change: transform, opacity;
    animation: breatheEmptyState 4s ease-in-out infinite alternate;
}

@keyframes breatheEmptyState {
    0% { 
        transform: translateY(0) scale(1); 
        opacity: 0.5; 
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
    }
    100% { 
        transform: translateY(-6px) scale(1.05); 
        opacity: 0.8; 
        filter: drop-shadow(0 8px 12px rgba(0,0,0,0.1));
    }
}

.result-card {
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
    animation: fadeIn .5s ease;
}

.result-card-header {
    background-color: transparent;
    border-bottom: none;
}

.result-card-content {
    padding: 0;
    background: transparent;
}

.question-text-detail {
    padding: 15px 20px;
    border-radius: 12px;
    background-color: transparent;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.6;
    box-shadow: none;
    box-shadow: var(--neumorph-shadow-inset);
    /* Здесь тот же текст вопроса, что и в тесте, — и та же беда с длинным
       неразрывным куском. Разбор причины см. у #questionText. */
    overflow-wrap: anywhere;
}

.answer-options-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: none;
    border-radius: 12px;
    background: var(--container-bg-color);
}

.answer-option.correct {
    border: none;
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    font-weight: 700;
    box-shadow: var(--neumorph-shadow-soft-sm);
}


body.dark-mode .result-card,
body.synthwave-mode .result-card {
    background: var(--container-bg-color);
    border-color: var(--border-color);
}

body.dark-mode .result-card-header,
body.synthwave-mode .result-card-header {
    background-color: var(--input-bg-color);
    border-bottom-color: var(--border-color);
}

body.dark-mode .question-text-detail,
body.synthwave-mode .question-text-detail {
    color: var(--heading-color);
}

body.dark-mode .answer-option,
body.synthwave-mode .answer-option {
    background: var(--input-bg-color);
    color: var(--text-color);
    border-color: var(--input-border-color);
}

body.dark-mode .answer-option.correct,
body.synthwave-mode .answer-option.correct {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    border-color: var(--feedback-correct-border);
}


body.dark-mode .search-navigation,
body.synthwave-mode .search-navigation {
    background-color: var(--input-bg-color);
    border-color: var(--border-color);
}


.advanced-send-btn.loading {
    background: var(--button-secondary-bg);
    transform: none;
    cursor: wait;
}

.advanced-send-btn.loading::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border: 3px solid #ffffff4d;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    border-top-color: #fff;
}

.advanced-send-btn.loading>* {
    visibility: hidden;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.delete-btn {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--feedback-incorrect-border);
    border-radius: 8px;
    background: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    font-size: .95em;
    margin-bottom: 30px;
    font-weight: 600;
    transition: all .2s ease;
    cursor: pointer;
}

.delete-btn:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px #e74c3c4d;
    transform: translateY(-2px);
    border-color: var(--accent);
}

@media (max-width: 768px) {
    /* === WHATSAPP-STYLE MOBILE LAYOUT === */
    .chat-grid-container {
        display: flex !important;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* 1. СОСТОЯНИЕ: СПИСОК ЧАТОВ (Сайдбар на весь экран) */
    .sidebar-container {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        background: var(--container-bg-color) !important;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 10;
    }

    .advanced-chat-body .chat-sidebar {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        transform: none !important;
        border-right: none !important;
        /* Отступ снизу, чтобы Bottom Bar не перекрывал последние чаты */
        padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important;
    }

    /* Прячем окно сообщений в режиме списка */
    .chat-main-content {
        display: none !important;
    }

    /* Убираем кнопку-гамбургер из списка (мы уже в меню) */
    .sidebar-toggle-btn {
        display: none !important;
    }

    /* 2. СОСТОЯНИЕ: ОТКРЫТ ЧАТ (Сообщения на весь экран) */
    body.mobile-chat-active .sidebar-container {
        display: none !important;
    }

    body.mobile-chat-active .chat-main-content {
        display: flex !important;
        width: 100% !important;
    }

    /* Прячем Bottom Bar при открытой модалке — иначе bottom-nav (z-index: 9000)
       перекрывает нижнюю часть bottom-sheet модалок (z-index: 3000-3010). */
    body.modal-open-lock .mobile-bottom-nav {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    /* То же для модалок Block Blast (z-index: 5600-6000). Отдельный класс, а не
       modal-open-lock: тот переводит body в position:fixed и сбрасывает прокрутку
       страницы под игрой — здесь нужно только убрать бар с дороги. */
    body.bb-modal-open .mobile-bottom-nav {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    /* Прячем Bottom Bar при открытом чате, отдавая всё место переписке! */
    body.mobile-chat-active .mobile-bottom-nav {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    /* Показываем кнопку "Назад" вместо гамбургера */
    body.mobile-chat-active .sidebar-toggle-btn {
        display: flex !important;
    }

    /* Меняем иконку гамбургера на стрелку "Назад" через маску */
    body.mobile-chat-active .sidebar-toggle-btn i {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
        background-color: currentColor;
        -webkit-mask-size: cover;
        mask-size: cover;
        width: 24px !important;
        height: 24px !important;
    }
    body.mobile-chat-active .sidebar-toggle-btn i svg {
        display: none !important; 
    }

    /* Прячем крестик из шапки, возврат только по стрелке назад */
    body.mobile-chat-active .advanced-chat-header .close-btn {
        display: none !important;
    }
    
    /* Прячем меню профиля в самом чате для экономии места под имя */
    body.mobile-chat-active .user-menu-container {
        display: none !important;
    }
}

/* Здесь лежало правило с обкусанным селектором — «ge-content» вместо, судя по
   соседям, «.message.pinned .message-content». Элемента с таким именем в
   документе нет, то есть правило не действовало ни на что. Убрано как мусор,
   а не восстановлено: подсветка закреплённого сообщения в тёмных темах — это
   решение о внешнем виде, и принимать его за автора по обрывку селектора
   неправильно. Для светлых тем такая подсветка задана отдельно, ниже по файлу. */

.message.mine.pinned .message-content {
    color: var(--feedback-correct-text);
}

body.dark-mode .message.mine.pinned .message-content {
    color: var(--feedback-correct-text);
}

#onlineUsersList {
    /* max-height: 200px; */
    overflow-x: hidden;
    overflow-y: auto;
}

.channel-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.message-area.user-list-mode {
    padding: 10px;
    background-color: var(--bg-color);
}

.user-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.user-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease;
    cursor: pointer;
}

.user-list-item:hover {
    box-shadow: 0 5px 15px var(--shadow-color);
    transform: translateY(-3px);
    border-color: var(--button-primary-bg);
}

.user-list-avatar {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 10%;
    background: var(--avatar-bg);
    color: var(--avatar-text);
    border: 1px solid var(--border-color);
    font-size: 1.5em;
    font-weight: 700;
    box-shadow: var(--neumorph-shadow-soft);
}

.user-list-avatar .status-indicator {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
}

.user-list-info {
    flex-grow: 1;
    overflow: hidden;
}

.user-list-info .username {
    overflow: hidden;
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-list-info .email {
    overflow: hidden;
    color: var(--secondary-text-color);
    font-size: .9em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-list-info .user-list-uni {
    color: var(--secondary-text-color);
    font-size: .65em;
    line-height: 1.25;
    margin-top: 2px;
}
.user-list-info .user-list-uni-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.user-list-info .user-list-uni-city {
    color: var(--secondary-text-color);
    opacity: 0.75;
    font-size: 0.92em;
    margin-top: 1px;
}


#privateChatsList .status-indicator {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--secondary-text-color);
}

#privateChatsList .status-indicator.online {
    background-color: #2ecc71;
}

.tab-actions-container {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 2px 2px;
    /* background-color: var(--input-bg-color); */
    animation: fadeIn .3s;
    border-bottom: 1px solid var(--border-color);
}

.tab-actions-container button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-size: .9em;
    transition: background-color .2s;
    cursor: pointer;
}

.tab-actions-container button:hover {
    background-color: var(--button-secondary-hover-bg);
}

.tab-actions-container .btn-danger {
    /* width: 36px; */
    padding: 0;
    background-color: var(--chat-accent);
}

.chat-main-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.message-area {
    flex-grow: 1;
    overflow-y: auto;
}

.chat-input-area {
    flex-shrink: 0;
}

.channel-members-section {
    margin-top: 20px;
    padding-top: 15px;
    text-align: left;
    border-top: 1px dashed var(--border-color);
}

.channel-members-section h4 {
    margin: 0 0 10px;
    color: var(--secondary-text-color);
    font-size: .9em;
}

.channel-members-list {
    max-height: 350px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow-y: auto;
    list-style: none;
}

.channel-members-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.channel-members-list li:last-child {
    border-bottom: none;
}

.kick-btn {
    padding: 3px 8px;
    border: 1px solid var(--feedback-incorrect-border);
    border-radius: 4px;
    background: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    font-size: .8em;
    cursor: pointer;
}

.kick-btn:hover {
    opacity: .8;
}

.result-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
}

.result-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 480px) {
    .result-card-actions {
        flex-basis: 100%;
        justify-content: flex-end;
    }
}

.favorite-search-result-btn,
.copy-search-result-btn,
.explain-search-result-btn,
.translate-search-result-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.favorite-search-result-btn:hover,
.copy-search-result-btn:hover,
.explain-search-result-btn:hover,
.translate-search-result-btn:hover {
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

.result-card-actions .translate-search-result-btn.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: 0 4px 10px var(--shadow-light-color);
    transform: scale(1.05);
}

.favorite-search-result-btn:hover {
    color: #f39c12;
    transform: scale(1.2);
}

.copy-search-result-btn:hover {
    color: #007bff;
    transform: scale(1.2);
}

.translate-search-result-btn:hover {
    color: #3498db;
    transform: scale(1.2);
}

.unread-channel-badge {
    background-color: var(--chat-accent);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

#mobileDownloadModal {
    animation: fadeIn .3s ease;
}

#mobileDownloadModal>div {
    animation: slideUp .4s ease;
}

#mobileDownloadModal a[href*="drive.google.com"] {
    position: relative;
    overflow: hidden;
}

#mobileDownloadModal a[href*="drive.google.com"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #ffffff4d, transparent);
    transition: left .5s;
}

#mobileDownloadModal a[href*="drive.google.com"]:hover:before {
    left: 100%;
}

.download-progress {
    width: 100%;
    height: 4px;
    margin: 15px 0;
    border-radius: 2px;
    overflow: hidden;
    background-color: #e9ecef;
}

.download-progress-bar {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    animation: pulse 2s infinite;
}


#mobileDownloadModal textarea {
    border: 2px solid #dee2e6;
    transition: border-color .3s ease;
    resize: vertical;
}

#mobileDownloadModal textarea:focus {
    box-shadow: 0 0 0 3px #007bff1a;
    border-color: #007bff;
    outline: none;
}

#mobileDownloadModal button {
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
}

#mobileDownloadModal button:hover {
    box-shadow: 0 4px 15px #0003;
    transform: translateY(-2px);
}

#mobileDownloadModal button:active {
    transform: translateY(0);
}

#mobileDownloadModal button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #ffffff4d;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height .3s;
}

#mobileDownloadModal button:active:after {
    width: 100px;
    height: 100px;
}

@media (max-width: 480px) {
    #mobileDownloadModal {
        padding: 10px !important;
    }

    #mobileDownloadModal>div {
        max-width: 95% !important;
        padding: 20px !important;
    }

    #mobileDownloadModal h3 {
        font-size: 1.3em;
    }

    #mobileDownloadModal a[href*="drive.google.com"] {
        padding: 12px 20px !important;
        font-size: 1em !important;
    }

    #mobileDownloadModal textarea {
        height: 150px !important;
        font-size: .8em;
    }
}

@media (max-width: 320px) {
    #mobileDownloadModal>div {
        padding: 15px !important;
    }

    #mobileDownloadModal h3 {
        margin-bottom: 10px !important;
        font-size: 1.2em;
    }

    #mobileDownloadModal p {
        font-size: .9em;
    }
}

body.dark-mode #mobileDownloadModal>div {
    background-color: var(--container-bg-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode #mobileDownloadModal h3 {
    color: var(--heading-color) !important;
}

body.dark-mode #mobileDownloadModal textarea {
    background-color: var(--input-bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}


#mobileDownloadModal button[onclick*="remove"] {
    transition: all .2s ease;
}

#mobileDownloadModal button[onclick*="remove"]:hover {
    background-color: #ff00001a !important;
    color: #dc3545 !important;
    transform: scale(1.1);
}


button[onclick*="copyToClipboard"] {
    position: relative;
}

button[onclick*="copyToClipboard"]:after {
    content: '✓ Скопировано!';
    position: absolute;
    top: -30px;
    left: 50%;
    padding: 4px 8px;
    border-radius: 4px;
    background: #28a745;
    color: #fff;
    font-size: .8em;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .3s;
    pointer-events: none;
}

button[onclick*="copyToClipboard"].copied:after {
    opacity: 1;
}

@keyframes success-bounce {

    0%,
    20%,
    60%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    80% {
        transform: translateY(-5px);
    }
}


@media (max-width: 768px) {
    .dropdown-content {
        right: auto;
        left: 0;
        transform: translateX(0);
    }

    #themeDropdownContent {
        left: 50%;
        transform: translateX(-50%);
    }
}

.loading-placeholder {
    color: var(--secondary-text-color);
}

/* APP STORE TIER: Native-like Smooth Spinner */
.loading-spinner {
    border: 3px solid color-mix(in srgb, var(--button-primary-bg) 15%, transparent); /* Упругое вращение */
    border-top-color: var(--button-primary-bg);
    border-right-color: var(--button-primary-bg); /* Двойной акцент для плавности */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#languageToggle {
    padding: 4px;
    font-size: 1em;
}

.question-actions .copy-question-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
}

.question-actions .copy-question-btn:hover {
    background: linear-gradient(135deg, #2980b9, #3498db);
}

.file-share-bubble .message-content {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.file-share-content {
    gap: 15px;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    border-left: 5px solid var(--chat-success);
}

.file-share-content:hover {
    background-color: var(--input-hover-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
    border-color: var(--chat-success);
}

.file-share-icon {
    font-size: 2.5em;
    opacity: .7;
}

.file-share-details {
    flex: 1;
}

.file-share-name {
    color: var(--text-color);
}

.file-share-info {
    color: var(--secondary-text-color);
}

.file-share-arrow {
    color: var(--chat-success);
    font-size: 1.8em;
    font-weight: 700;
    transition: transform .2s ease;
}

.file-share-content:hover .file-share-arrow {
    transform: translateX(5px);
}

.modal-buttons.vertical {
    gap: 10px;
}

.modal-buttons.vertical button {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
}

#fileActionDownloadBtn:hover {
    background-color: var(--button-secondary-hover-bg);
}

#fileActionTestBtn {
    background-color: var(--button-success-bg);
    color: #fff;
}

#fileActionTestBtn:hover {
    background-color: var(--button-success-hover-bg);
    color: #fff;
}

#parserArea {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

#parserArea textarea,
#parserArea select {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-inset);
    transition: all .2s ease-in-out;
}

#parserArea textarea {
    min-height: 150px;
    margin-top: 10px;
    font-family: monospace;
    line-height: 1.5;
    resize: vertical;
}

#parserArea select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    appearance: none;
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 1.5em;
}

#parserArea .settings-group {
    border-bottom: 1px dashed var(--dashed-border-color);
}

#parserOutputArea h3 {
    text-align: center;
}


@media (max-width: 768px) {
    .advanced-chat-header {
        padding: 8px 10px;
    }

    

    


    

    
}


#runParserBtn,
#backToMainFromParserBtn {
    width: 100%;
    margin-top: 15px;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    font-size: 1.05em;
    font-weight: 600;
    box-shadow: var(--neumorph-shadow-soft);
    transition: all .2s ease-in-out;
}

#runParserBtn:hover,
#backToMainFromParserBtn:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

#runParserBtn {
    color: var(--button-primary-bg);
}

#backToMainFromParserBtn {
    color: var(--text-color);
}

.btn-secondary-small {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background-color: var(--container-bg-color);
    color: var(--secondary-text-color);
    font-size: .85em;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.btn-secondary-small:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

.global-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* PREMIUM UX: Формула Apple Glassmorphism (Blur + Saturation) */
    background-color: color-mix(in srgb, var(--bg-color) 70%, rgba(0,0,0,0.5));
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    animation: fadeIn .3s ease;
    will-change: opacity, backdrop-filter;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    
    /* === ЖЕСТКИЕ ОГРАНИЧЕНИЯ РАЗМЕРОВ === */
    width: 90%;            /* Занимаем 90% ширины экрана телефона */
    max-width: 400px;      /* Но не шире 400px на ПК */
    padding: 25px; /* Чуть уменьшил отступы для мобильных */
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--container-bg-color);
    text-align: center;
    box-shadow: 0 10px 30px #0003;
}

.loader-content p {
    
    /* === ПРИНУДИТЕЛЬНЫЙ ПЕРЕНОС ДЛИННЫХ СЛОВ === */
    width: 100%;             /* Текст занимает всю ширину контейнера */
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;     /* Разрешаем перенос */
    overflow-wrap: break-word; /* Стандартный перенос */
    word-break: break-all;   /* ВАЖНО: Разрывать слово в любом месте, если не влезает */
    
    /* ENTERPRISE UX: Голографический блик текста (Vercel Shimmer) */
    background: linear-gradient(90deg, var(--secondary-text-color) 0%, var(--text-color) 50%, var(--secondary-text-color) 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: textShimmerWipe 2s linear infinite;
}

@keyframes textShimmerWipe {
    to { background-position: -200% center; }
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.password-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.password-wrapper .auth-input {
    margin-bottom: 0;
    padding-right: 45px;
}

.toggle-password {
    position: absolute;
    top: 40%;
    right: 15px;
    color: var(--secondary-text-color);
    font-size: 1.2em;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
}

#parserArea textarea {
    transition: border-color .2s ease, box-shadow .2s ease;
}

#parserArea textarea:focus {
    box-shadow: 0 0 0 3px #007bff26;
    border-color: var(--button-primary-bg);
    outline: none;
}

#quickNavButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-height: 350px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
    overflow-y: auto;
}

.quick-nav-category {
    flex-basis: 100%;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 8px 10px;
    border-radius: 5px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-size: .95em;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 2px 5px var(--shadow-light-color);
}

.quick-nav-category:first-child {
    margin-top: 0;
}

.quiz-category-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    padding: 20px;
    color: var(--secondary-text-color);
    text-align: center;
}

.quiz-category-screen span {
    margin-bottom: 10px;
    font-size: 1.2em;
}

.quiz-category-screen h2 {
    margin: 0;
    color: var(--heading-color);
    font-size: 2em;
    line-height: 1.2;
}

#parserErrorsArea {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid var(--feedback-incorrect-border);
    border-radius: 8px;
    background-color: var(--feedback-incorrect-bg);
    animation: fadeIn .4s ease;
}


#errorList {
    max-height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow-y: auto;
    background: var(--container-bg-color);
    list-style: none;
}

.error-list-item {
    color: var(--secondary-text-color);
    font-family: monospace;
    border-bottom: 1px solid var(--dashed-border-color);
}

.error-list-item:last-child {
    border-bottom: none;
}

.error-list-item:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}


#filterVariantsBtn {
    background-color: var(--button-secondary-bg);
}

.filter-dropdown-header {
    color: var(--text-color);
}


.filter-checkboxes input[type="checkbox"] {
    accent-color: var(--button-primary-bg);
}

.filter-actions {
    border-top: 1px solid var(--dashed-border-color);
}

#applyVariantFilterBtn {
    background-color: var(--button-success-bg);
}

.error-list-item.reviewed {
    background-color: #d4edda;
    color: #155724;
}


#filterVariantsBtn {
    padding: 6px 12px;
    background-color: var(--button-secondary-bg);
    font-size: .9em;
}

.filter-dropdown {
    position: absolute;
    z-index: 100;
    width: 280px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--container-bg-color);
    box-shadow: 0 5px 20px var(--shadow-color);
    animation: fadeIn .2s;
}

.filter-dropdown-header {
    margin-bottom: 15px;
    color: var(--text-color);
    font-weight: 700;
}

.filter-checkboxes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.filter-checkboxes label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1em;
    cursor: pointer;
}

.filter-checkboxes input[type="checkbox"] {
    accent-color: var(--button-primary-bg);
}

.filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--dashed-border-color);
}

#applyVariantFilterBtn {
    background-color: var(--button-success-bg);
}

.error-list-item.reviewed {
    background-color: #d4edda;
    color: #155724;
    font-weight: 500;
}

.error-list-item.reviewed:hover {
    background-color: #c3e6cb;
}

.unread-channel-badge {
    margin-right: 8px;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 10px;
    background-color: var(--chat-accent);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    transition: all .3s ease;
}

body.claude-mode .header-controls button,
body.claude-mode #currentUser {
    background: transparent;
    color: var(--text-color);
    border-color: transparent;
}

body.claude-mode .header-controls button:hover,
body.claude-mode #currentUser:hover {
    background: var(--input-hover-bg-color);
}

body.claude-mode .channel-item.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
}

body.claude-mode .message.mine .message-content {
    background: var(--button-primary-bg);
    border-color: transparent;
}

@media (max-width: 768px) {
    .advanced-chat-header {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .chat-top-bar {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .advanced-chat-header .chat-title h3 {
        font-size: 0.9em;
    }

    .advanced-chat-header .header-controls button,
    .advanced-chat-header #currentUser {
        max-width: 42vw;
        padding: 4px 9px 4px 4px;
        font-size: 0.9em;
    }

    #chatSearchInput {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

.message-content.collapsible {
    position: relative;
    max-height: 250px;
    overflow: hidden;
    transition: max-height .4s ease-in-out;
}

.message-content.collapsible::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--container-bg-color));
    pointer-events: none;
}

.message-content.collapsible.expanded {
    max-height: 20000px;
}

.message-content.collapsible.expanded::after {
    opacity: 0;
}

.expand-message-btn {
    border: 1px solid var(--border-color);
    background-color: var(--input-hover-bg-color);
    color: var(--secondary-text-color);
    font-size: .8em;
    cursor: pointer;
}

.expand-message-btn:hover {
    background-color: var(--border-color);
}

body.claude-mode .message.pinned .message-content {
    background-color: #6e6459;
    color: #fff;
    border-left: 4px solid #e58a56;
}

body.claude-mode .message.mine.pinned .message-content {
    background-color: #6e6459;
    color: #fff;
}

#savedSessionArea {
    margin-top: 5px;
    padding: 25px 50px 25px 50px;
    border-top: 1px dashed var(--dashed-border-color);
}

#savedSessionArea h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--secondary-text-color);
    font-size: .9em;
}

.saved-session-card {
    margin-bottom: 10px;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: var(--neumorph-bg);
    box-shadow: var(--neumorph-shadow-soft-sm);
    border-left: 5px solid var(--button-success-bg);
}

.saved-session-name {
    margin-bottom: 10px;
    /* Было 1.1em жирным — имя файла оказывалось самым крупным текстом на
       главной, крупнее заголовков разделов. И word-break: break-all рубил его
       посреди слова: «реабилитация.q / st». */
    font-size: .95em;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.saved-session-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--secondary-text-color);
    font-size: .85em;
}

.progress-bar {
    width: 100%;
    height: 8px;
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--border-color);
}

.progress-bar-fill {
    position: relative;
    height: 100%;
    border-radius: 4px;
    background-color: var(--button-success-bg);
    /* Пружинная анимация заполнения вместо скучного linear */
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* ENTERPRISE UX: Vercel Liquid Edge (Светящийся перетекающий край) */
.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-20deg);
    animation: progressLiquidSweep 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes progressLiquidSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

.saved-session-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.saved-session-actions .btn-resume,
.saved-session-actions .btn-delete {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background-color: var(--container-bg-color);
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
}

.saved-session-actions .btn-resume {
    color: var(--button-success-bg);
}

.saved-session-actions .btn-delete {
    color: var(--feedback-incorrect-text);
}

.saved-session-actions .btn-resume:hover,
.saved-session-actions .btn-delete:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

#continueLaterButton {
    display: inline-block;
    width: auto;
    margin-right: 10px;
    padding: 10px 25px;
    border: 1px solid var(--button-secondary-border);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

#continueLaterButton,
#finishTestButton.finish-test-early {
    display: block;
    width: 80%;
    max-width: 250px;
    margin: 10px auto;
    padding: 12px 25px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    font-size: 1em;
    font-weight: 600;
    box-shadow: var(--neumorph-shadow-soft);
    transition: all .2s ease-in-out;
}

#continueLaterButton:hover,
#finishTestButton.finish-test-early:hover {
    box-shadow: var(--neumorph-shadow-inset);
    opacity: 1;
    transform: none;
}

#continueLaterButton {
    color: var(--secondary-text-color);
}

#finishTestButton.finish-test-early {
    color: var(--feedback-incorrect-text);
}

#downloadTranslatedTxtButton,
#downloadTranslatedQstButton {
    display: inline-block;
    width: auto;
    padding: 10px 25px;
    border: 1px solid var(--button-secondary-border);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

#downloadTranslatedTxtButton:hover,
#downloadTranslatedQstButton:hover {
    background-color: var(--button-secondary-hover-bg);
}

#continueLaterButton:hover {
    background-color: var(--button-secondary-hover-bg);
}

.sidebar-search-container {
    margin-bottom: 0px;
}

.sidebar-search-input {
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: .9em;
    box-shadow: var(--neumorph-shadow-inset);
    transition: all .2s ease;
    outline: none;
}

.sidebar-search-input:focus {
    box-shadow: var(--neumorph-shadow-inset), 0 0 0 2px var(--accent-color);
    border-color: transparent;
}

.sidebar-scroll-container {
    position: relative;
    display: flex;
    max-height: 350px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--neumorph-shadow-inset);
}

#channelsList,
#privateChatsList,
#onlineUsersList {
    width: 100%;
    padding: 15px 25px 15px 15px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
}

#channelsList::-webkit-scrollbar,
#privateChatsList::-webkit-scrollbar,
#onlineUsersList::-webkit-scrollbar {
    display: none;
}

#channelsList,
#privateChatsList,
#onlineUsersList {
    scrollbar-width: none;
}

.chat-sidebar::-webkit-scrollbar {
    display: none;
}

.chat-sidebar {
    scrollbar-width: none;
}

body.dark-mode,
body.synthwave-mode,
body.claude-mode {
    scrollbar-color: var(--secondary-text-color) transparent;
    scrollbar-width: thin;
}

body.dark-mode ::-webkit-scrollbar-thumb,
body.synthwave-mode ::-webkit-scrollbar-thumb,
body.claude-mode ::-webkit-scrollbar-thumb {
    border: 2px solid var(--container-bg-color);
}

.test-results-action {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

.results-btn {
    width: auto;
    padding: 6px 14px;
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-weight: 500;
    font-size: 0.85em;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.results-btn i[data-lucide] {
    width: 14px;
    height: 14px;
}

.results-btn:hover {
    background: var(--button-secondary-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}

.results-btn:active {
    transform: translateY(0);
}

#fileActionPracticeTestBtn {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

#fileActionPracticeTestBtn:hover {
    background-color: var(--button-secondary-hover-bg);
}

/* === PRO UI: ТАБЛИЦА РЕЗУЛЬТАТОВ (SCROLL & STICKY HEADER) === */
#testResultsTableContainer {
    max-height: 55vh; /* Ограничиваем высоту для появления скролла внутри контейнера */
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0px;
    background-color: var(--container-bg-color);
    /* Кастомный скроллбар */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

#testResultsTableContainer::-webkit-scrollbar {
    width: 6px;
}
#testResultsTableContainer::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 0px;
}

#testResultsTableContainer table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    margin: 0;
}

#testResultsTableContainer th,
#testResultsTableContainer td {
    padding: 5px 10px; /* Больше воздуха */
    border-bottom: 1px solid var(--border-color);
}

/* Закрепляем шапку таблицы, чтобы она не уезжала при прокрутке */
#testResultsTableContainer th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--input-bg-color);
    color: var(--heading-color);
    font-weight: 600;
    box-shadow: 0 1px 0 var(--border-color); /* Имитация нижней рамки для sticky */
    -webkit-backdrop-filter: blur(10px); /* Легкий блюр под шапкой */
    backdrop-filter: blur(10px); /* Легкий блюр под шапкой */
}

#testResultsTableContainer tbody tr:hover {
    background-color: var(--input-hover-bg-color);
}

/* Красивый бейдж вместо серого текста "(см. ошибки)" */
.view-mistakes-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    font-size: 0.75em;
    font-weight: 600;
    transition: all 0.2s ease;
}

.view-mistakes-badge i, 
.view-mistakes-badge svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2.5px;
}

/* При наведении на строку бейдж заливается цветом */
.clickable-row:hover .view-mistakes-badge {
    background-color: #e74c3c;
    color: white;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.results-empty-state {
    padding: 30px;
    color: var(--secondary-text-color);
    text-align: center;
}

 
.google-signin-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 90%;
    margin-left: 5%;
    align-self: anchor-center;
    padding: 10px;
  border: 1px solid #ddd;
    border-radius: 10px;
  background-color: #fff;
    color: #333;
    font-size: 1.05em;
    font-weight: 500;
    box-shadow: 0 2px 8px #00000014;
    transition: all .3s ease;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    cursor: pointer;
}

.google-signin-btn:hover {
    background-color: #f8f8f8;
    box-shadow: 0 4px 12px #0000001f;
    transform: translateY(-2px);
}

.google-signin-btn img {
    width: 20px;
    height: 20px;
    transition: transform .3s ease;
}

.google-signin-btn:hover img {
    transform: rotate(360deg);
}

body.dark-mode .google-signin-btn,
body.synthwave-mode .google-signin-btn {
    background-color: var(--input-bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .google-signin-btn:hover,
body.synthwave-mode .google-signin-btn:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--input-hover-border-color);
}


#aiExplanationOutput {
    margin-right: -10px;
    transition: max-height .3s ease-in-out;
}


#aiExplanationOutput h1,
#aiExplanationOutput h2,
#aiExplanationOutput h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--heading-color);
}

#aiExplanationOutput p {
    margin-bottom: 12px;
    line-height: 1.6;
}

#aiExplanationOutput ul,
#aiExplanationOutput ol {
    margin-bottom: 12px;
    padding-left: 25px;
}

#aiExplanationOutput li {
    margin-bottom: 5px;
}

#aiExplanationOutput strong {
    color: var(--text-color);
}


#copyExplanationBtn {
    background-color: var(--button-success-bg);
}

#copyExplanationBtn:hover {
    background-color: var(--button-success-hover-bg);
}


@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: var(--text-color);
    }
}

/* ENTERPRISE UX: Плавное мигание каретки текста ИИ (Alpha Fade) */
.blinking-cursor {
    display: inline-block;
    font-weight: 700;
    color: var(--accent, #3498db);
    /* ENTERPRISE UX: Liquid Caret (Имитация умной каретки Cursor IDE) */
    animation: smoothBlink 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: center bottom;
}

@keyframes smoothBlink {
    0%, 100% { opacity: 0; transform: translateY(-1px) scaleY(0.6) scaleX(0.8); }
    50% { opacity: 1; transform: translateY(-1px) scaleY(1.1) scaleX(1); }
}

@media (max-width: 768px) {

    #aiExplanationModal,
    #aiChatModal {
        justify-content: initial;
        align-items: initial;
        padding: 0;
    }

    #aiExplanationModal .modal-content,
    #aiChatModal .modal-content {
        justify-content: flex-start;
        width: 100vw;
        max-width: 100%;
        height: calc(var(--vh, 1vh) * 100) !important;
        max-height: 100%;
        padding: 5px;
        border-radius: 0;
    }

    #aiExplanationOutput {
        flex-grow: 1;
        min-height: 0;
        max-height: none;
    }

    #aiChatModal .ai-chat-messages {
        flex-grow: 1;
    }

    #aiExplanationModal .modal-buttons {
        flex-shrink: 0;
        margin-top: auto;
        padding-top: 15px;
    }
}

#aiExplanationQuestion.collapsible {
    position: relative;
    overflow: hidden;
    transition: max-height .3s ease-in-out;
}

#aiExplanationQuestion.expanded {
    flex: 0 0 auto;
    overflow: visible;
}

#aiExplanationQuestion.collapsible::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 40px;
    background: linear-gradient(to bottom, #0000, var(--container-bg-color));
    opacity: 1;
    transition: opacity .2s ease;
    pointer-events: none;
}

body.glass-dark #aiExplanationQuestion.collapsible::after {
    background: linear-gradient(to bottom, #0000, #101010eb);
}

#aiExplanationQuestion.collapsible.expanded::after {
    opacity: 0;
}


@media (max-width: 768px) {
    }


.quiz-footer-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.quiz-footer-controls button {
    width: 80%;
    max-width: 250px;
}

.style-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.style-dropdown-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
}

.style-dropdown-btn:hover {
    border-color: var(--button-primary-bg);
}

#aiExplanationStyleText {
    font-weight: 500;
}

.dropdown-arrow {
    transition: transform .2s;
}

.style-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.style-dropdown-content {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    z-index: 20;
    max-height: 300px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow-y: auto;
    /* background-color: var(--container-bg-color); */
    box-shadow: var(--neumorph-shadow-soft);
    background-color: color-mix(in srgb, var(--container-bg-color) 30%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    backdrop-filter: blur(8px) saturate(180%);
}

.style-dropdown-content a {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
    cursor: pointer;
    font-weight: 500;
}

/* Настройка самих иконок */
.style-dropdown-content a i,
.style-dropdown-content a svg {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.7; /* Делаем иконки чуть приглушенными */
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.style-dropdown-content a:hover {
    background-color: var(--input-hover-bg-color);
}

/* При наведении иконка становится ярче и чуть подпрыгивает */
.style-dropdown-content a:hover i,
.style-dropdown-content a:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

/* Активный выбранный пункт */
.style-dropdown-content a.active {
    background: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
    font-weight: 700;
}

.style-dropdown-content a.active i,
.style-dropdown-content a.active svg {
    opacity: 1;
    color: var(--button-primary-text) !important;
    stroke: var(--button-primary-text) !important;
}


.update-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    border-radius: 25px;
    background-color: var(--update-notification-bg);
    color: var(--update-notification-text);
    font-size: 1em;
    font-weight: 500;
    box-shadow: 0 5px 20px #0000004d;
    transform: translateX(-50%);
    animation: slideUp .5s ease-out;
}

.update-notification.hidden {
    display: none !important;
}

.update-notification button {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background-color: var(--update-notification-button-bg);
    color: var(--update-notification-button-text);
    font-weight: 700;
    transition: all .2s ease;
    cursor: pointer;
}

#currentChannelName {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-search-toggle {
    display: none;
    padding: 0 5px;
    border: none;
    background: none;
    color: var(--secondary-text-color);
    font-size: 1.5em;
    cursor: pointer;
}

@media (max-width: 768px) {

    .advanced-chat-header,
    .chat-top-bar {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    

    

    

    .chat-search-toggle {
        display: block;
    }

    #chatSearchInput {
        display: none;
    }

    .chat-top-bar.search-active {
        justify-content: flex-start;
    }

    .chat-top-bar.search-active #currentChannelName,
    .chat-top-bar.search-active .chat-search-toggle {
        display: none;
    }

    .chat-top-bar.search-active #chatSearchInput {
        display: block;
        width: 100%;
    }

    .chat-sidebar {
        padding-top: 5px;
    }
}

#togglePinnedBtn.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
}

.explain-search-result-btn:hover {
    color: #8e44ad;
    transform: scale(1.2);
}

.result-card-content {
    display: flex;
    flex-direction: column;
}

.question-text-detail {
    margin-bottom: 0;
}

.ai-helper-container {
    position: relative;
}

.ai-helper-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    margin-top: -10%;
    left: calc(-150%);
    z-index: 100;
    width: 200px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    box-shadow: 0 5px 20px var(--shadow-color);
    transform: translateX(-50%);
    animation: fadeIn .2s;
}

.ai-helper-menu a {
    display: block;
    padding: 12px 15px;
    color: var(--text-color);
    font-size: .95em;
    text-decoration: none;
    transition: background-color .2s;
}

.ai-helper-menu a:hover {
    background-color: var(--input-hover-bg-color);
}

.ai-helper-menu a:not(:last-child) {
    border-bottom: 1px solid var(--dashed-border-color);
}

/* Меню «больше действий» в чате — иконка + текст в одну строку, индикация активного toggle'а */
#chatMoreMenu {
    width: 260px;
}
#chatMoreMenu a {
    display: flex;
    align-items: center;
    gap: 10px;
}
#chatMoreMenu a > i {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--secondary-text-color);
}
#chatMoreMenu a.active {
    color: var(--accent);
}
#chatMoreMenu a.active > i {
    color: var(--accent);
}
#chatMoreMenu a.active::after {
    content: '✓';
    margin-left: auto;
    font-weight: 600;
    color: var(--accent);
}

#aiSummaryOutput h4 {
    margin-top: 15px;
    padding-bottom: 5px;
    color: var(--heading-color);
    border-bottom: 1px solid var(--border-color);
}

#aiSummaryOutput ul {
    padding-left: 20px;
}

.ai-selection-banner {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 500;
    animation: fadeIn .3s;
}

.ai-selection-banner button {
    background-color: #fff3;
    color: #fff;
}

.message-area.selection-mode .message {
    border: 2px dashed transparent;
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.message-area.selection-mode .message:hover {
    box-shadow: 0 5px 20px var(--shadow-color);
    transform: scale(1.02);
    border-color: var(--button-primary-bg);
}

.forgot-password-link {
    display: block;
    margin-top: -10px;
    margin-bottom: 15px;
    color: var(--secondary-text-color);
    font-size: .9em;
    text-align: right;
    text-decoration: none;
    transition: color .2s;
}

.forgot-password-link:hover {
    color: var(--button-primary-bg);
    text-decoration: underline;
}

.exit-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 10000;
    padding: 12px 20px;
    border-radius: 25px;
    background-color: #000c;
    color: #fff;
    font-size: .9em;
    font-weight: 500;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .3s ease-in-out, bottom .3s ease-in-out;
    pointer-events: none;
}

.exit-toast.show {
    bottom: 50px;
    opacity: 1;
}

.exit-toast.hidden {
    display: block !important;
    opacity: 0;
}

#translateQuestionBtn,
.translate-search-result-btn {
    position: relative;
    overflow: hidden;
}

@keyframes translating-dots {
    0% {
        content: '|文а';
    }

    33% {
        content: '文|а';
    }

    66% {
        content: '文а|';
    }

    100% {
        content: '文а';
    }
}

.translate-engine-container.translating::after {
    content: '文а';
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    animation: translating-dots 1.5s infinite step-end;
}

.translate-engine-container.translating>button {
    visibility: hidden;
}

.translate-search-result-btn.translating::after,
.translate-engine-container.translating::after {
    content: '文а';
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    animation: translating-dots 1.5s infinite step-end;
}

.translate-search-result-btn.translating>i,
.translate-engine-container.translating>button {
    visibility: hidden;
}

@keyframes pulse-translate {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .6;
    }

    100% {
        opacity: 1;
    }
}

.message-content.translating {
    animation: pulse-translate 1.5s infinite;
}

@media (min-width: 769px) {
    
}

.flashcard-viewport {
    display: flex;
    flex-grow: 0 !important;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    perspective: 1000px;
}

@media (max-width: 768px) {
    .flashcard-viewport {
        /* FIX: Убираем отрицательные margin и calc(100vw), рвущие экран */
        width: 100%;
        margin-right: 0;
        margin-top: 15%;
        margin-left: 0;
        padding: 0;
        perspective: 1000px;
    }

    .flashcard {
        width: 100% !important;
        height: 65vh !important;
        max-height: 500px !important;
        margin: 0 auto !important;
    }
}

.flashcard {
    position: relative;
    max-width: 650px;
    height: 550px !important;
    max-height: 70vh !important;
    margin: 0 auto;
    /* PREMIUM UX: Пружинный физический поворот (Spring Flip) */
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    cursor: pointer;
    transform-style: preserve-3d;
}
.flashcard:hover,
.flashcard:active,
.flashcard.is-flipped {
    will-change: transform, box-shadow; /* Динамическое GPU Ускорение */
}

/* PREMIUM UX: Левитация карточки при наведении (только для устройств с мышью,
   чтобы не конфликтовать с гироскопом на тач-экранах) */
@media (hover: hover) and (pointer: fine) {
    .flashcard:hover:not(.is-flipped):not(.is-animating) {
        transform: translateY(-8px) rotateX(4deg) scale(1.02);
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    }
}

/* ENTERPRISE UX: Физика переворота (Z-Axis Lift & Parabola) 
   Во время анимации (50%) карточка отрывается от стола (scale 1.1), 
   а в конце падает обратно обратной стороной. */
.flashcard.is-flipped {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Тень падает обратно */
}

/* Здесь лежали cardFlipParabola и cardFlipParabolaReverse — анимация «взятия»
   карточки при перевороте. Ни одно правило и ни одна строчка кода на них не
   ссылались: переворот карточки делает script.js через .animate(), своими
   кадрами. Сверено по всему проекту с учётом косвенных ссылок через
   переменные (--mi-anim и подобные) — иначе половина живых анимаций выглядит
   мёртвой, потому что имя подставляется не в animation, а в custom property. */

/* Переопределяем транзишен на ключевые кадры при клике через JS (в script.js уже есть .animate(), этот CSS делает fallback идеальным) */

/* PREMIUM UX: Физический световой блик
   Разделён на два слоя:
   1) .flashcard::after — радиальный гироскопический блик, всегда сверху карты
      (оба face, но на ПК неактивен по умолчанию).
   2) .flashcard-back::after — sweep-блик при перевороте; живёт на самой
      back-стороне с backface-visibility:hidden, поэтому виден только когда
      back-плоскость повёрнута к камере (вторая половина флипа). Это
      автоматически синхронизирует видимость с углом поворота — никаких
      delay-костылей. */
.flashcard {
    --shine-x: 50%;
    --shine-y: 50%;
    --shine-strength: 0;
}
.flashcard::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 12px;
    z-index: 10;
    pointer-events: none;
    transform: translateZ(0.5px);

    background-image: radial-gradient(
        circle at var(--shine-x) var(--shine-y),
        rgba(255, 255, 255, calc(0.55 * var(--shine-strength))) 0%,
        rgba(255, 255, 255, 0) 38%
    );
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

body.dark-mode .flashcard::after,
body.synthwave-mode .flashcard::after,
body.oled-mode .flashcard::after {
    background-image: radial-gradient(
        circle at var(--shine-x) var(--shine-y),
        rgba(255, 255, 255, calc(0.13 * var(--shine-strength))) 0%,
        rgba(255, 255, 255, 0) 38%
    );
}

/* Sweep-блик на back-стороне. backface-visibility:hidden делает ::after видимым
   только когда back-плоскость уже развернулась лицом к камере (т.е. карта
   перевалила через 90°), и невидимым в первой половине поворота —
   синхронизация с углом поворота абсолютно автоматическая. */
.flashcard-back::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    z-index: 5;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    background-image: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 80%
    );
    background-size: 300% 100%;
    background-repeat: no-repeat;
    /* Стартовая позиция — peak ЯВНО за левым краем (bg-pos 150% → peak at -150%,
       bright stripe at -240% to -60%, полностью вне элемента). */
    background-position: 150% 0;
}

body.dark-mode .flashcard-back::after,
body.synthwave-mode .flashcard-back::after,
body.oled-mode .flashcard-back::after {
    background-image: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 70%
    );
}

.flashcard.is-flipped .flashcard-back::after {
    animation: cardGlareSweep var(--glare-dur, 0.55s) linear forwards;
}

@keyframes cardGlareSweep {
    /* Геометрия: image-width = 300% элемента; peak = -2*bg-pos + 150 (в %).
       Длительность анимации синхронизирована с WAAPI-флипом. Первая половина
       анимации (карта от front к ребру) проходит при невидимом ::after — мы
       просто подгоняем bg-pos к стартовой позиции левого края. Во второй
       половине back-сторона становится лицом к камере, и пик ровно в этот
       момент въезжает в элемент с левого края, проходит через центр и уезжает
       за правый край. Финальное состояние — bright stripe полностью за
       правым краем, без «залипшего» остатка. */
    0%   { background-position: 150% 0; }   /* peak -150%, всё ещё скрыт backface */
    50%  { background-position: 75% 0; }    /* peak 0% — левый край элемента, back только-только повернулась к зрителю */
    100% { background-position: -50% 0; }   /* peak 250% — далеко за правым краем */
}

 

@media (max-width: 768px) {
    .flashcard {
        min-height: 60vh;
    }
}

.flashcard-face {
    position: absolute;
    top: 0;
    /* left: 20px; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: 5px;
    border-radius: 12px;
    overflow-y: auto;
    font-size: 1.2em;
    text-align: center;
    line-height: 1.5;
    box-shadow: var(--neumorph-shadow-soft);
    -webkit-overflow-scrolling: touch;
    /* БРОНЕБОЙНЫЙ ФИКС 3D: Жесткое аппаратное скрытие задней стороны слоя */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    /* Фикс размытия текста на 3D-флипе: единый GPU-слой высокого разрешения для обеих сторон.
       Без этого Chrome/iOS даунсемплит back-face после rotateY и текст становится мутным. */
    transform: translate3d(0, 0, 0.0001px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}


.flashcard-front {
    background-color: var(--container-bg-color);
}

.flashcard-back {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
}

/* === FIX РАЗМЫТИЯ ТЕКСТА после посадки flip-анимации ===
   Когда карточка приземлилась, выкидываем все transform-ы и просто прячем лицевую сторону.
   Без transform браузер рендерит текст в subpixel-antialiased — текст становится "хрустящим".
   Класс flip-settled добавляется JS-ом в onfinish и снимается перед обратной анимацией. */
.flashcard.is-flipped.flip-settled {
    transform: none !important;
}
.flashcard.is-flipped.flip-settled .flashcard-back {
    transform: none !important;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}
.flashcard.is-flipped.flip-settled .flashcard-front {
    visibility: hidden;
}


/* === РЕЖИМ ВВОДА ОТВЕТА В КАРТОЧКАХ === */
/* Поле ввода зафиксировано у нижнего края back-стороны карточки. */
.flashcard-back > .flashcard-typing-area {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    z-index: 12;            /* выше .blur-hint-overlay (z-index: 10) */
    pointer-events: auto;
}
/* После снятия блюра поле скрывается через inline-style, но
   на случай повторных рендеров — гарантированно прячем при разблокированной back-стороне. */
.flashcard-back:not(.flashcard-locked-back) > .flashcard-typing-area {
    display: none;
}
.flashcard-typing-input {
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    font-size: 1.05em;
    font-family: inherit;
    border: 2px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.98);
    color: #222;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.flashcard-typing-input::placeholder {
    color: #777;
}
.flashcard-typing-input:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25), 0 6px 20px rgba(0,0,0,0.18);
}
.flashcard-typing-input:disabled {
    opacity: 0.7;
}

.typing-comparison {
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    text-align: center;
}
body.dark-mode .typing-comparison,
body.theme-dark .typing-comparison {
    background: rgba(255, 255, 255, 0.04);
}
.typing-comparison.is-perfect {
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.4);
}
.typing-row + .typing-row {
    margin-top: 8px;
}
.typing-label {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.7;
    margin-bottom: 2px;
}
.typing-value {
    font-size: 1.15em;
    font-weight: 600;
    word-break: break-word;
}
.typing-value.typing-correct {
    color: var(--success-color, #27ae60);
}
.typing-mistake {
    color: var(--danger-color, #e74c3c);
    background: rgba(231, 76, 60, 0.12);
    border-radius: 4px;
    padding: 0 2px;
}
.typing-mistake.typing-extra {
    text-decoration: line-through;
    opacity: 0.85;
}

.flashcard-typing-toggle.active,
#flashcardTypingToggle.active,
#flashcardAutoplayToggle.active {
    color: var(--accent, #3498db);
}


.flashcard-category {
    flex-direction: column;
    border: 2px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--heading-color);
    cursor: default;
}

.flashcard-category-label {
    margin-bottom: 8px;
    font-size: .8em;
    font-weight: 400;
    opacity: .8;
}

.flashcard-category-title {
    margin: 0;
    font-size: 1.5em;
    font-weight: 700;
}

body.synthwave-mode .flashcard-category {
    background-color: #38bdf80d;
    box-shadow: 0 0 15px #38bdf833;
    border-color: var(--accent);
}
.flashcard-back {
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px 80px;
    /* left: -20px; */
    scrollbar-width: none;
}
.flashcard-answer-text {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.explain-flashcard-btn {
    flex-shrink: 0;
    margin-top: 15px;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    padding: 10px 15px;
    border: 1px solid var(--feedback-correct-text);
    border-radius: 12px;
    background-color: #0000000d;
    color: var(--feedback-correct-text);
    font-size: .8em;
    font-weight: 700;
    opacity: .8;
    transition: all .2s ease;
    cursor: pointer;
}

.explain-flashcard-btn:hover {
    background-color: #0000001a;
    opacity: 1;
    transform: scale(1.05);
}

body.dark-mode .explain-flashcard-btn {
    background-color: #ffffff1a;
    border-color: var(--feedback-correct-text);
}

body.dark-mode .explain-flashcard-btn:hover {
    background-color: #fff3;
}

.flashcard-text-content {
    position: relative;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    /* Мягкий перенос: рвёт слово ТОЛЬКО когда оно физически не помещается в строку.
       Не разбивает «disagreement» по букве, если font-size подобран корректно. */
    overflow-wrap: break-word;
}
.flashcard-text-content > *,
.flashcard-text-content p {
    max-width: 100%;
    overflow-wrap: break-word;
}

.flashcard-text-content img,
.flashcard-text-content .question-image {
    display: block;
    flex-shrink: 1;
    width: auto;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
    object-fit: contain;
}

.flashcard-text-content:has(.anki-audio-player)::before {
    display: none;
}

.pulse-active {
    animation: pulse 2s infinite;
}

 

 

.parser-tab:hover:not(.active) {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

 

.parser-tab:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

 

.parser-tab-content {
    display: none;
    animation: fadeIn .4s;
}


#aiExplanationOutput h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-size: 1.1em;
    border-bottom: 2px solid var(--border-color);
}

#aiExplanationOutput h3:first-of-type {
    color: var(--feedback-correct-text);
    border-bottom-color: var(--feedback-correct-border);
}

#aiExplanationOutput h3:last-of-type {
    color: var(--feedback-incorrect-text);
    border-bottom-color: var(--feedback-incorrect-border);
}

#aiAnalysisArea {
    width: 100%;
    /* Пунктир убран, отступ тоже: расстояния задаёт зазор колонки, иначе пара
       «разобрать ошибки → спросить ИИ» расходилась шире, чем разные группы. */
    margin-top: 0;
}

#aiAnalysisBtn {
    box-sizing: border-box;
    width: calc(100% - 8px);
    margin: 0 4px;
    background: linear-gradient(135deg, #6c5ce7, #8e44ad);
    color: #fff;
    font-size: 1.05em;
    font-weight: 500;
    /* Тень на экране результатов одна на все кнопки: разными тенями они
       выглядели как элементы из разных приложений. Порядок задаёт заливка. */
    box-shadow: var(--neumorph-shadow-soft);
    transition: all .3s ease;
}

#aiAnalysisBtn:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

.ai-analysis-result {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    text-align: left;
    line-height: 1.6;
    animation: fadeIn .5s;
}

.ai-analysis-result h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--heading-color);
}

.ai-analysis-result ul {
    padding-left: 20px;
}

body.glass-dark #searchQueryInput::placeholder {
    color: var(--secondary-text-color);
}


@media (max-width: 768px) {
    .sidebar-container.open {
        background: #000000b8;
    }
}


#feedbackArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
}

#feedbackArea .explain-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background-color: var(--container-bg-color);
    font-size: .9em;
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: box-shadow .2s ease, color .2s ease;
}

#feedbackArea.correct-feedback .explain-btn {
    color: var(--feedback-correct-text);
}

#feedbackArea.incorrect-feedback .explain-btn {
    color: var(--feedback-incorrect-text);
}

#feedbackArea .explain-btn:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

body.glass-dark #feedbackArea.correct-feedback .explain-btn:hover {
    color: var(--container-bg-color);
}

body.glass-dark #feedbackArea.incorrect-feedback .explain-btn:hover {
    color: var(--container-bg-color);
}

body.glass-dark button:not(.quick-nav-btn):not(.ai-chat-control-btn):not(.ai-action-btn) {
    border: 1px solid var(--input-border-color) !important;
    background-color: var(--input-bg-color) !important;
    color: var(--text-color) !important;
    transition: all .2s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body.glass-dark button:not(.quick-nav-btn):hover:not(:disabled) {
    background-color: var(--input-hover-bg-color) !important;
    border-color: var(--input-hover-border-color) !important;
}

body.glass-dark #finishTestButton.finish-test-early {
    background-color: var(--feedback-incorrect-bg) !important;
    color: var(--feedback-incorrect-text) !important;
    border-color: var(--feedback-incorrect-border) !important;
}

body.glass-dark .header-buttons button {
    border: 1px solid #fff3 !important;
    background-color: #ffffff1a !important;
}

body.glass-dark #quickModeToggle.active,
body.glass-dark #triggerWordToggle.active,
body.glass-dark #translateQuestionBtn.active,
body.glass-dark #flagQuestionBtn.active,
body.glass-dark #favoriteQuestionBtn.active,
body.glass-dark #flashcardTypingToggle.active,
body.glass-dark #flashcardAutoplayToggle.active {
    background: color-mix(in srgb, var(--accent) 26%, transparent) !important;
    color: var(--accent) !important;
    border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
}

body.glass-dark .advanced-send-btn {
    border: none !important;
    background: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
}

footer p a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    padding: 0 8px;
    color: var(--secondary-text-color);
    text-decoration: none;
    transition: color .2s ease;
}

footer p a:hover {
    color: var(--text-color);
    text-decoration: underline;
}

body.synthwave-mode .question-bubble,
body.synthwave-mode .favorite-item {
    border: 2px solid var(--accent);
    background: var(--container-bg-color);
    box-shadow: 0 4px 20px #38bdf81a;
}

body.synthwave-mode .question-bubble .question-content p,
body.synthwave-mode .question-bubble .question-content p strong,
body.synthwave-mode .favorite-item p {
    color: var(--text-color);
}

body.synthwave-mode .option-vote-btn {
    background-color: var(--input-bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.synthwave-mode .option-vote-btn:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--accent);
}

body.synthwave-mode .option-votes-badge {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

body.synthwave-mode .question-square {
    background: linear-gradient(135deg, var(--button-secondary-bg), var(--button-secondary-hover-bg));
}

body.synthwave-mode .question-square.has-votes {
    background: var(--button-primary-bg);
}

body.claude-mode .question-bubble,
body.claude-mode .favorite-item {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
}

body.claude-mode .question-bubble .question-content p {
    color: var(--text-color);
}

body.claude-mode .question-bubble .question-content p strong {
    color: var(--secondary-text-color);
}

body.claude-mode .option-vote-btn {
    background-color: var(--input-bg-color);
    color: var(--text-color);
    border-color: var(--input-border-color);
}

body.claude-mode .option-vote-btn:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--input-hover-border-color);
}

body.claude-mode .question-actions .add-to-favorites-btn {
    border: none;
    background: var(--button-success-bg);
    color: var(--button-primary-text);
}

body.claude-mode .question-actions .copy-question-btn {
    border: none;
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

body.claude-mode .question-square {
    background: var(--button-success-bg);
}

body.claude-mode .question-square.has-votes {
    background: var(--button-primary-bg);
}

body.claude-mode .option-votes-badge {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

#themeDropdownButton:hover {
    /* background-color: var(--theme-toggle-hover-bg); */
}

.theme-picker-dropdown {
    flex-wrap: wrap;
    gap: 6px;
    min-width: auto;
    max-width: min-content;
    padding: 8px;
}

.theme-picker-dropdown a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background-color 0.2s, transform .2s;
}

.theme-picker-dropdown a:hover {
    background-color: var(--input-hover-bg-color);
    transform: scale(1.1);
}

.theme-picker-dropdown .theme-option-icon {
    font-size: 1.5em;
}

.theme-picker-dropdown a.active {
    background: var(--button-primary-bg);
    box-shadow: 0 0 0 1px var(--container-bg-color), 0 0 0 0px var(--button-primary-bg);
}

.theme-picker-dropdown a.active:hover {
    background-color: var(--button-primary-hover-bg);
}

@media (max-width: 768px) {
    #themeDropdownButton {
        padding: 4px 6px;
        font-size: 1.1em;
    }
}

#languageToggle:hover {
    /* background-color: var(--theme-toggle-hover-bg); */
}

@media (max-width: 768px) {
    #languageToggle {
        padding: 4px 6px;
    }
}

.range-label-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dual-slider-container {
    position: relative;
    display: flex;
    align-items: center;
    height: 25px;
    margin: 10px 0;
}

.dual-slider-container input[type="range"] {
    position: absolute;
    width: 100%;
    height: 5px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none; appearance: none;
    appearance: none;
}

.dual-slider-container input[type="range"]:last-of-type {
    pointer-events: auto;
}

input[type="range"]::-webkit-slider-thumb {
    position: relative;
    z-index: 2;
    width: 20px;
    height: 20px;
    margin-top: -6px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    cursor: pointer;
    pointer-events: auto;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: var(--neumorph-shadow-inset);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb {
    box-shadow: var(--neumorph-shadow-inset);
}

.slider-track,
.slider-progress {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    transform: translateY(-50%);
}

.slider-track {
    z-index: 0;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
}

.slider-progress {
    z-index: 1;
    height: 6px;
    background-color: var(--accent-color);
}

.range-inputs-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.settings-group.disabled {
    opacity: .5;
    pointer-events: none;
}

.settings-group.disabled input,
.settings-group.disabled label {
    cursor: not-allowed;
}


.tick {
    background-color: var(--secondary-text-color);
}

.tick-label {
    color: var(--secondary-text-color);
}

.single-slider-container {
    position: relative;
    position: relative;
    display: flex;
    align-items: center;
    height: 20px;
    height: 25px;
    margin: 10px 0;
    margin: 10px 0;
}

.single-slider-container input[type="range"]::-webkit-slider-runnable-track {
    border: none;
    background: transparent;
    box-shadow: none;
}

.single-slider-container input[type="range"]::-moz-range-track {
    border: none;
    background: transparent;
    box-shadow: none;
}

.single-slider-container input[type="range"] {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 5px;
    margin: 0;
    background: transparent;
    pointer-events: auto;
    -webkit-appearance: none; appearance: none;
    appearance: none;
}

#timeSliderProgress {
    left: 0;
}

.translate-engine-container {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    border: none;
    border-radius: 50px;
    background: #00000009;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: box-shadow .2s ease-in-out;
}

.translate-engine-container:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

.translate-engine-container #translateQuestionBtn,
.translate-engine-container #translateEngineToggle {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
}

.translate-engine-container #translateQuestionBtn {
    width: 40px;
    border-radius: 50% 0 0 50%;
}

.translate-engine-container #translateEngineToggle {
    position: relative;
    width: 32px;
    border-radius: 0 50% 50% 0;
    font-size: 0;
}

.translate-engine-container #translateEngineToggle::before {
    content: "";
    width: 0;
    height: 0;
    transition: transform .2s ease;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-color);
}

.translate-engine-container.open #translateEngineToggle::before {
    transform: rotate(180deg);
}

.translate-engine-container #translateEngineToggle::after {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 0;
    width: 1px;
    background-color: var(--border-color);
}

#translateEngineDropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    flex-direction: column !important;
    z-index: 3000;
    display: none;
    min-width: 180px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--container-bg-color);
    box-shadow: 0 10px 24px var(--shadow-color);
    transform: translateX(-50%);
}

#translateEngineDropdown.show {
    display: block;
}

#translateEngineDropdown a {
    display: block;
    padding: 10px 15px;
    color: var(--text-color);
    text-decoration: none;
}

#translateEngineDropdown a:hover {
    background-color: var(--input-hover-bg-color);
}

#translateEngineDropdown a.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 600;
    border-radius: 14px;
}

#translateEngineDropdown a.active:hover {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

.slider-ticks {
    position: absolute;
    top: 18px;
    right: 10px;
    left: 10px;
    z-index: 1;
    height: 10px;
    pointer-events: none;
}

.tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 5px;
    background-color: var(--secondary-text-color);
}

.tick-label {
    position: absolute;
    top: 8px;
    color: var(--secondary-text-color);
    font-size: .75em;
    transform: translateX(-50%);
}

#searchActivationContainer {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px dashed var(--dashed-border-color);
}

#searchActivationContainer label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

#searchActivationContainer input[type="text"] {
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
}

#searchActivationContainer button {
    width: 100%;
}

.parser-output-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.parser-output-header h3 {
    flex: 0 0 auto;
    margin: 0;
    text-align: left;
}

/* Действия над результатом.
   Было: две кнопки разного веса — залитая «Фильтр по вариантам» и контурная
   «Очистить», — хотя обе второстепенные и обе подчинены заголовку. Длинные
   подписи ломались на две строки, кнопки выходили разной высоты и теснили
   сам заголовок.
   Стало: один вес на обе, значок слева, подпись в одну строку. На телефоне
   пара уходит под заголовок своим рядом и делит его поровну. */
.parser-output-actions {
    display: flex;
    flex: 1 1 260px;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.parser-output-actions button {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.parser-output-actions button i {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

/* Подпись — единственное, что можно ужать: значки и поля трогать нельзя,
   иначе кнопка перестанет читаться как кнопка. */
.parser-output-actions button span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Стрелка у фильтра: он раскрывает список, а выглядел обычной кнопкой. */
.parser-output-caret {
    opacity: .55;
    transition: transform .2s ease;
}

.parser-output-actions button.is-open .parser-output-caret {
    transform: rotate(180deg);
}

@media (max-width: 560px) {
    /* Две кнопки под заголовком, поровну: втроём в строку они не помещаются
       ни в одном из трёх языков. */
    .parser-output-actions {
        flex: 1 1 100%;
        justify-content: stretch;
    }
    .parser-output-actions button {
        flex: 1 1 0;
    }
}

#converterErrorList.hidden {
    display: none;
}

#converterErrorsArea button {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 15px;
    border: 1px solid var(--feedback-incorrect-border);
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}


.result-column {
    flex: 2;
    flex-direction: column;
}

.errors-column {
    flex: 1;
}

#converterErrorList {
    max-height: 400px;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
}


.parser-result-wrapper {
    display: flex;
    gap: 15px;
    height: 400px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.result-column {
    display: flex;
    flex-basis: 65%;
    min-width: 0;
}

.errors-column {
    display: flex;
    flex-basis: 35%;
    flex-direction: column;
    min-width: 0;
}

#converterOutput {
    flex-grow: 1;
    height: 100%;
    resize: vertical;
}

.errors-header {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px 6px 0 0;
    background-color: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-weight: 500;
    border-bottom: none;
}

#converterErrorList {
    flex-grow: 1;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 0 0 6px 6px;
    overflow-y: auto;
    background: var(--input-bg-color);
    border-top: none;
    list-style: none;
}

.error-list-item {
    margin-bottom: 3px;
    padding: 8px 10px;
    border-radius: 4px;
    overflow: hidden;
    font-size: .9em;
    transition: background-color .2s;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-list-item:hover {
    background-color: var(--input-hover-bg-color);
}

.error-list-item.reviewed {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
}

.loading-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    min-height: 150px;
    padding: 40px 20px;
    color: var(--secondary-text-color);
    font-size: 1.1em;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--input-hover-bg-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    border-top-color: var(--button-primary-bg);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.question-image {
    border: 1px solid var(--border-color);
    border: 1px solid var(--border-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px var(--shadow-color);
    box-shadow: 0 4px 15px var(--shadow-color);
    box-shadow: 0 4px 15px var(--shadow-color);
}

@media (max-width: 380px) {
    .header-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }
}

@media (max-width: 600px) {
    .header-controls {
        justify-content: center;
    }

    .header-controls h1 {
        flex-basis: 100%;
        margin-bottom: 15px;
        text-align: center;
    }

    .header-buttons {
        flex-basis: 100%;
    }
}

.ai-explanation-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

#aiExplanationQuestion {
    flex-shrink: 1;
    min-height: 0;
    padding-right: 10px;
    overflow-y: auto;
}

.ai-a-text {
    margin-top: 8px;
}

.ai-q-text {
    margin-bottom: 8px;
}

#aiExplanationModal .modal-content {
    gap: 12px;
}

#aiExplanationModal .parser-label-container,
#aiExplanationModal .settings-group,
#aiExplanationModal .modal-buttons {
    flex: 0 0 auto;
}

#aiExplanationQuestion,
#aiExplanationOutput {
    flex: 1 1 0;
    overscroll-behavior: contain;
}

#aiExplanationQuestion img,
#aiExplanationQuestion .ai-explanation-image {
    display: block;
    max-width: 100%;
    height: auto;
}

#aiExplanationQuestion.expanded {
    max-height: none;
}

#aiExplanationOutput.collapsed {
    flex: 0 0 auto;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    overflow: hidden;
}

@media (min-width: 769px) {
    #aiExplanationQuestion {
        flex-basis: 45%;
    }

    #aiExplanationOutput {
        flex-basis: 55%;
    }

    #aiExplanationModal .modal-content {
        width: 90%;
        max-width: 700px;
    }
}

@media (max-width: 768px) {
    #aiExplanationModal, 
    #questionCreateModal,
    .modal-overlay:not(.advanced-chat-overlay) {
        align-items: flex-end !important;
        padding: 0 !important;
        background-color: rgba(0, 0, 0, 0.6) !important; 
    }

    /* ЖЕЛЕЗОБЕТОННЫЙ ФИКС: Запрещаем любым элементам внутри выпирать за края экрана */
    .modal-overlay:not(.advanced-chat-overlay) .modal-content *,
    #aiExplanationModal .modal-content *,
    #questionCreateModal .modal-content * {
        /* max-width: 100% !important; */
        box-sizing: border-box !important;
       
    }

    #aiExplanationModal .modal-content,
    #questionCreateModal .modal-content,
    .modal-overlay:not(.advanced-chat-overlay) .modal-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100% !important; 
        max-width: 100% !important;
        box-sizing: border-box !important; 
        /* Убиваем горизонтальный скролл на корню */
        overflow-x: hidden !important; 
        overflow-y: auto !important;
        height: 100dvh !important; 
        max-height: 100dvh !important;
        /* Восстанавливаем красивые, комфортные отступы для пальцев (20px по бокам) */
        padding: 25px 20px calc(20px + env(safe-area-inset-bottom)) 20px !important; 
        border-radius: 32px 32px 0 0 !important;
        margin: 0 !important;
        box-shadow: 0 -15px 50px rgba(0,0,0,0.4) !important;
        animation: iOSBottomSheet 0.4s cubic-bezier(0.32, 1.15, 0.25, 1) forwards !important;
        will-change: transform;
    }
    
    /* APP STORE TIER: Нативный iOS Grab Handle (Язычок) */
    #aiExplanationModal .modal-content::before,
    #questionCreateModal .modal-content::before,
    .modal-overlay:not(.advanced-chat-overlay) .modal-content::before {
        content: '';
        position: absolute;
        top: 10px; /* Чуть ниже для эстетики */
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background-color: var(--secondary-text-color);
        border-radius: 10px; 
        opacity: 0.3;
        transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s ease;
    }
    
    .modal-content:active::before {
        opacity: 0.6;
        transform: translateX(-50%) scaleX(1.2) scaleY(0.8);
    }
}

@keyframes iOSBottomSheet {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}


#aiExplanationQuestion,
#aiExplanationOutput {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

#aiExplanationModal .modal-buttons {
    flex-shrink: 0;
}


.question-image,
#aiExplanationModal img {
    max-width: 100%;
    height: auto;
    image-rendering: auto;
    object-fit: contain;
}

.translate-engine-container #translateQuestionBtn,
.translate-engine-container #translateEngineToggle {
    padding: 6px 10px;
    border: none !important;
    background: transparent;
    line-height: 1;
}

.translate-engine-container #translateEngineToggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 34px;
    padding-right: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--theme-toggle-border);
}

.translate-engine-container button:hover {
    background: var(--theme-toggle-hover-bg);
}

.translate-engine-container #translateQuestionBtn.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

button.btn,
.btn-secondary,
.quiz-nav-btn,
.question-nav-btn {
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--button-secondary-bg);
    color: var(--text-color);
}

button.btn:hover,
.btn-secondary:hover,
.quiz-nav-btn:hover,
.question-nav-btn:hover {
    background: var(--button-secondary-hover-bg);
}

#prevQuestionButton,
#nextButton {
    padding: 10px 16px;
    border: 1px solid var(--button-secondary-border);
    border-radius: 10px;
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-weight: 600;
    box-shadow: 0 3px 10px #00000014;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}

#prevQuestionButton:hover,
#nextButton:hover {
    background: var(--button-secondary-hover-bg);
    box-shadow: 0 4px 14px #0000001f;
    transform: translateY(-1px);
}

#nextButton.finish-test {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: transparent;
}

#prevQuestionButton:disabled,
#nextButton:disabled {
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    box-shadow: none;
    opacity: .75;
    transform: none;
    cursor: not-allowed;
    border-color: var(--border-color);
}

body.claude-mode #prevQuestionButton,
body.claude-mode #nextButton {
    box-shadow: 0 4px 14px #0000001a;
}

.message.chat-download .message-content {
    border: 1px dashed var(--border-color);
    background: var(--container-bg-color);
    color: var(--text-color);
}

.message.chat-download.success .message-content {
    background: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    border-color: var(--feedback-correct-border);
}

.message.chat-download.error .message-content {
    background: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border-color: var(--feedback-incorrect-border);
}

.message.chat-download .chat-download-title {
    margin-bottom: 6px;
    font-weight: 600;
}

.message.chat-download .chat-download-name {
    font-size: .9em;
    opacity: .85;
}

.message.chat-download .download-progress {
    height: 3px;
    margin: 10px 0 0;
}

.message.chat-download .download-progress-text {
    text-align: right;
    letter-spacing: .2px;
}

.time-limit-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.time-limit-input-container {
    flex-shrink: 0;
}

.time-limit-wrapper .single-slider-container {
    flex-grow: 1;
    width: 100%;
}

.time-limit-wrapper .range-input {
    width: 70px;
}

.time-slider-modern {
    position: relative;
    margin-top: 25px;
    padding-bottom: 20px;
}

.slider-value-bubble {
    position: absolute;
    top: -28px;
    padding: 4px 10px;
    border-radius: 5px;
    background-color: var(--accent);
    color: var(--accent-text);
    font-size: .9em;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .2s ease, visibility .2s ease;
    pointer-events: none;
    visibility: hidden;
    white-space: nowrap;
}

.slider-value-bubble::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--accent);
}

.time-slider-modern input[type="range"]:active+.slider-value-bubble,
.time-slider-modern input[type="range"]:focus+.slider-value-bubble {
    opacity: 1;
    visibility: visible;
}
/* показ по наведению — только там, где наведение есть: на телефоне :hover срабатывает в момент тапа */
@media (hover: hover) {
    .time-slider-modern:hover .slider-value-bubble {
        opacity: 1;
        visibility: visible;
    }
}

i[data-lucide], svg.lucide {
    align-items: center;
    justify-content: center;
    font-size: initial; /* Базовый сброс невидимости */
    /* PREMIUM UX: Аппаратное сглаживание векторов */
    shape-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0); 
}

/* Принудительно задаем размер иконкам в кнопках, если они слетели */
.btn i[data-lucide], .btn-secondary i[data-lucide], .modal-action-btn i[data-lucide] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
}

.header-buttons i[data-lucide] {
    width: 20px;
    height: 20px;
}

.advanced-chat-header .header-controls i[data-lucide] {
    width: 22px;
    height: 22px;
}


.message-actions-toolbar i[data-lucide] {
    width: 16px;
    height: 16px;
}

.result-card-actions i[data-lucide] {
    width: 20px;
    height: 20px;
}

.explain-flashcard-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.explain-flashcard-btn i[data-lucide] {
    width: 14px;
    height: 14px;
}

.toggle-password {
    display: flex;
    justify-content: center;
    align-items: center;
}

i[data-lucide] {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
}

.auth-modal h2 i[data-lucide] {
    width: 28px;
    height: 28px;
}

.toggle-password i[data-lucide] {
    width: 20px;
    height: 20px;
}

.advanced-chat-header .close-btn i[data-lucide],
.advanced-chat-header .notification-toggle i[data-lucide],
.advanced-chat-header .sidebar-toggle-btn i[data-lucide] {
    width: 24px;
    height: 24px;
}

.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-dropdown i[data-lucide] {
    width: 16px;
    height: 16px;
}

.sidebar-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-section h4 i[data-lucide] {
    width: 18px;
    height: 18px;
}


.input-action-btn i[data-lucide],
.advanced-send-btn i[data-lucide] {
    width: 22px;
    height: 22px;
}

.cancel-reply-btn i[data-lucide] {
    width: 18px;
    height: 18px;
}

.modal-buttons button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--secondary-text-color);
}

.modal-buttons i[data-lucide],
.delete-btn i[data-lucide] {
    width: 16px;
    height: 16px;
}

.file-share-icon i,
.question-link-icon i {
    width: 32px;
    height: 32px;
}

.file-share-arrow i,
.question-link-arrow i {
    width: 24px;
    height: 24px;
}

.pinned-icon i {
    width: 12px !important;
    height: 12px !important;
}


/* ===== Кнопка закрепления личного чата ===== */
/* Для уже закреплённого чата — всегда виден (но приглушённо), наведение усиливает */

/* ===== Мини-индикатор закрепления рядом с именем ===== */
.channel-pin-indicator {
    color: var(--button-primary-bg, #4a7dbd);
}
.channel-pin-indicator i[data-lucide] {
    width: 11px;
    height: 11px;
    transform: rotate(35deg);
}
.channel-item.active .channel-pin-indicator {
    color: var(--button-primary-text);
}

/* Лёгкий визуальный акцент для закреплённого чата */
.channel-item.pinned:not(.active) {
    background-image: linear-gradient(to right, rgba(74, 125, 189, 0.08), transparent 60%);
}
@supports (background-image: linear-gradient(to right, color-mix(in srgb, red, transparent), transparent)) {
    .channel-item.pinned:not(.active) {
        background-image: linear-gradient(
            to right,
            color-mix(in srgb, var(--button-primary-bg, #4a7dbd) 8%, transparent),
            transparent 60%
        );
    }
}

.tab-actions-container .btn-danger:hover {
    background-color: #c0392b;
}

.tab-actions-container .btn-danger i[data-lucide] {
    width: 18px;
    height: 18px;
}

.question-actions button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-top: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.question-actions button:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

.question-actions .add-to-favorites-btn:hover {
    color: #f39c12;
}

.question-actions .copy-question-btn:hover {
    color: var(--button-success-bg);
}

.question-actions .delete-question-btn:hover {
    color: var(--accent);
}

.question-actions .edit-question-btn:hover {
    color: #3498db;
}

.question-actions .remove-favorite:hover {
    color: var(--chat-warning);
}

.question-actions .delete-question-btn {
    background-color: var(--chat-warning);
    color: #fff;
}

.question-actions .delete-question-btn:hover {
    background-color: #d68910;
    color: #fff;
}

.question-actions button i[data-lucide] {
    width: 20px;
    height: 20px;
}


body.dark-mode .modal-buttons button,
body.dark-mode #authCloseButton,
/* <-- ДОБАВЛЕНО */
body.dark-mode #runParserBtn,
body.dark-mode #backToMainFromParserBtn,
body.dark-mode .btn-secondary-small,
body.dark-mode #generateTestFromTextBtn,
body.dark-mode #generateTestFromTopicBtn {
    border: 1px solid var(--border-color) !important;
    background: var(--input-bg-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .modal-buttons button:hover,
body.dark-mode #authCloseButton:hover,
/* <-- ДОБАВЛЕНО */
body.dark-mode #runParserBtn:hover,
body.dark-mode #backToMainFromParserBtn:hover,
body.dark-mode .btn-secondary-small:hover,
body.dark-mode #generateTestFromTextBtn:hover,
body.dark-mode #generateTestFromTopicBtn:hover {
    background: var(--input-hover-bg-color) !important;
    border-color: var(--input-hover-border-color) !important;
}


.toast-notification.success {
    background: #28a745;
}

.toast-notification.error {
    background: #dc3545;
}

.toast-notification.info {
    background: #007bff;
}

/* PREMIUM UX: Эластичное появление уведомлений */
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translate(-50%, -30px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, 5px) scale(1.02); /* Пролетает чуть дальше */
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1); /* Возвращается на место */
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

#confirmModalYesBtn {
    border: 1px solid var(--feedback-incorrect-border);
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    font-weight: 700;
}

#confirmModalYesBtn:hover {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.ai-chat-fab {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 10px;
    border: none;
    border-radius: 50%;
    /* background: #7b84874d; */
    /* color: var(--button-primary-text); */
    /* box-shadow: 0 1px 5px #0000004d; */
    transition: all .3s ease;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.ai-chat-fab:hover {
    box-shadow: 0 8px 25px var(--shadow-color);
    transform: scale(1.05);
}

.ai-chat-fab.dragging {
    box-shadow: 0 10px 30px var(--shadow-color);
    transform: scale(1.1);
    cursor: grabbing;
}

.ai-chat-fab svg {
    width: 40px;
    height: 40px;
    transition: width .3s ease, height .3s ease;
}

@media (max-width: 768px) {
    /* Полностью скрываем старую плавающую кнопку чата, так как теперь она есть в Bottom Bar */
    .ai-chat-fab {
        display: none !important;
    }
}

.ai-chat-modal-content {
    width: 100%;
    max-width: 800px;
    height: calc(var(--vh, 1vh) * 95);
    /* max-height: 900px !important; */
    padding: 5px;
    text-align: left;
}

.ai-chat-header {
    position: relative;
    z-index: 1004;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    border-radius: 12px 12px 12px 12px !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    box-shadow: 0 15px 30px 10px rgb(0 0 0 / 50%);
    /* Непрозрачный фон, чтобы заголовки из ответа ИИ не «просвечивали» сквозь sticky-breadcrumb */
    background-color: var(--container-bg-color);
}


/* Отключаем стекло на слабых устройствах (у тебя уже есть класс .low-power) */
body.low-power .ai-chat-header {
    background-color: var(--container-bg-color) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ai-chat-header-controls {
    flex-grow: 1;
    border-radius: 12px;
}

/* Порядок кнопок слева */

/* Селектор персоны переехал в нижнюю панель — отменяем header-specific абсолютное центрирование */
.ai-main-controls #aiPersonaSelectContainer {
    position: relative !important;   /* relative нужен как anchor для абсолютного дропдауна */
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    min-width: 140px;
    width: auto !important;
    flex-shrink: 0;
}

/* Дропдаун персоны в нижней панели. Раньше:
     - position: absolute + bottom: calc(100% + 8px) → раскрывался ВВЕРХ из кнопки;
     - но .ai-main-controls имеет overflow-x: auto / overflow-y: hidden, что по спеке
       клипает вертикальный overflow → верх dropdown'а обрезался ("невидим наверху").
   Решение: position: fixed (вырывает из overflow родителя), координаты ставит JS
   через getBoundingClientRect кнопки. */
/* Селектор по id (а не по родителю) — потому что JS портально переносит этот
   дропдаун в document.body на момент открытия (iOS-fix против невидимости
   position:fixed внутри transform-предка). После переноса предок-цепочка теряется. */
#aiPersonaSelectDropdown {
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    /* Никаких анимаций/transform — простой показ/скрытие. */
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    max-height: min(550px, calc(100vh - 80px)) !important;
    /* Полупрозрачный фон + mask-image + backdrop-filter в комбинации
       давали невидимое меню на iOS — всё чистим. */
    -webkit-mask-image: none !important;
            mask-image: none !important;
    background-color: var(--container-bg-color) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Z-index больше любого UI чата (исходный general был 20000). */
    z-index: 99999 !important;
}

#aiChatResizeBtn {
    order: 3;
}

/* Когда breadcrumb скрыт (display:none), в .ai-chat-header-controls остаются 2 элемента
   ([+], [⛶]) и justify-content: space-between уже корректно разводит их по краям.
   margin-left: auto на resize страхует случай, если justify-content переопределят:
   забирает всё свободное место слева и прижимает [⛶] к правому краю.
   При видимом breadcrumb (flex:1) свободного места нет — margin не действует. */
#aiChatResizeBtn {
    margin-left: auto;
}

/* (стили .ai-chat-breadcrumb описаны ниже, в блоке STICKY CONTEXT PATH ~line 48707 — настоящая реализация breadcrumb там) */

/* Стили новой кнопки Плюс (Слева) */
.ai-header-new-chat-btn {
    background: var(--button-primary-bg); /* Акцентный синий цвет */
    color: var(--button-primary-text, #fff);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Строго самая первая слева */
}

.ai-header-new-chat-btn:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}


.ai-chat-header h3 {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.1em;
    transition: font-size .3s ease;
}

#aiChatUserBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--secondary-text-color);
    transition: all .2s ease;
    cursor: pointer;
}

#aiChatUserBtn:hover,
#aiChatUserBtn.active {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

#aiChatUserBtn #aiChatUserName {
    font-size: .9em;
    font-weight: 500;
}

#aiChatUserBtn i[data-lucide] {
    width: 18px;
    height: 18px;
}

@media (max-width: 600px) {
    

    

    

    

    .ai-chat-header .ai-color-legend-container {
    }

    

    

    

    
}


.ai-chat-control-btn {
    padding: 3px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--secondary-text-color);
    transition: all .2s ease;
    cursor: pointer;
}

.ai-chat-control-btn:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

.ai-chat-modal-content {
    transition: max-width .4s ease, height .4s ease, width .4s ease;
}

.ai-chat-modal-content.expanded {
    width: 100%; /* FIX: 100vw ломает сетку на мобилках */
    max-width: 100%;
    /* ОПТИМИЗАЦИЯ iOS: Использование dvh решает баг обрезки контента панелью Safari */
    height: 100vh; /* Fallback для старых браузеров */
    height: 100dvh;
    max-height: 100%;
    border-radius: 0;
}

@media (min-width: 769px) {
    #aiChatResizeBtn {
        display: flex;
    }
}

@media (max-width: 768px) {
    #aiChatResizeBtn {
        display: none;
    }
}

.ai-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 0;
    padding: 15px 15px 10px 15px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* ОПТИМИЗАЦИЯ MOBILE: Изолируем скролл, чтобы запретить браузеру дергать весь сайт (Scroll Chaining) */
    overscroll-behavior: contain;
}

.ai-message {
    /* padding: 8px 14px; */
    border-radius: 18px;
    line-height: 1.4;
    animation: messageSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    word-wrap: break-word;
}

.ai-message.user {
    max-width: 80%; /* Чуть больше пространства для текста */
    padding: 8px 16px;
    border-radius: 20px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    line-height: 1.45; /* Идеальный интерлиньяж для чтения */
    /* PREMIUM UX: Внутренний блик (Glass Edge) + Мягкая внешняя тень */
    box-shadow: var(--neumorph-shadow-soft); /* Внешняя тень */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    align-self: flex-end;
    border-bottom-right-radius: 4px; /* Острый хвостик, как в нативных мессенджерах */
    border-left: none; /* Убрали прозрачный бордер, он ломал геометрию */
    transform: translateZ(0); /* Аппаратное ускорение */
    margin: 0px 15px 0px 0px;
}

/* Для темной темы корректируем блик */
body.dark-mode .ai-message.user,
body.synthwave-mode .ai-message.user {
    box-shadow: 
        inset 0 1px 1px rgba(255,255,255,0.1), 
        inset 0 -1px 1px rgba(0,0,0,0.2), 
        0 4px 15px rgba(0,0,0,0.3);
}

.ai-message.model {
    padding-right: 0;
    padding-left: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-color);
    color: var(--text-color);
    box-shadow: none;
    align-self: flex-start;
}

.ai-message.model p:first-child {
    margin-top: 0;
}

.ai-message.model p:last-child {
    margin-bottom: 0;
}

.ai-message.model ul,
.ai-message.model ol {
    padding-left: 20px;
}

.ai-message.model h1,
.ai-message.model h2,
.ai-message.model h3,
.ai-message.model h4,
.ai-message.model h5,
.ai-message.model h6 {
    color: var(--heading-color);
    line-height: 1.3;
}

.ai-message.model h1 {
    margin-top: 0;
    margin-bottom: .8em;
    font-size: 1.4em;
}

.ai-message.model h2 {
    margin-top: 1.2em;
    margin-bottom: .6em;
    font-size: 1.25em;
}

.ai-message.model h3 {
    margin-top: 1em;
    margin-bottom: .5em;
    font-size: 1.1em;
    font-weight: 600;
}

.ai-message.model h4 {
    margin-top: 1em;
    margin-bottom: .4em;
    color: var(--secondary-text-color);
    font-size: 1em;
    font-weight: 600;
}


@keyframes typing-bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1.0);
    }
}

.ai-chat-input-area {
    z-index: 1003;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    border-radius: 12px 12px 6px 6px !important;
    border-top: 1px solid var(--border-color);
    /* background: color-mix(in srgb, var(--bg-color) 90%, transparent); */
    /* backdrop-filter: blur(15px); */
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 -10px 20px rgba(0,0,0,0.3) !important;
}

body.dark-mode .ai-chat-input-area,
body.synthwave-mode .ai-chat-input-area,
body.oled-mode .ai-chat-input-area {
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2) !important;
    background: color-mix(in srgb, var(--bg-color) 80%, transparent);
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Отключаем тяжелое стекло на слабых устройствах */
body.low-power .ai-chat-input-area {
    background-color: var(--container-bg-color) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.ai-chat-input-container {
    z-index: 11;
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    border-radius: 12px; /* Более округлый Apple Style */
    background-color: var(--container-bg-color); /* Чистый фон */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    /* ПРОДАКШЕН ФИКС: Убран перманентный will-change. Защита от истощения VRAM на мобильных устройствах. */
    transform: translateZ(0); /* Включает аппаратное ускорение без жесткого выделения GPU-памяти в простое */
}

.ai-chat-input-container:focus-within {
    /* PREMIUM UX: Никаких кислотных обводок. Только мягкая глубокая тень и легкое поднятие */
    box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    border-color: color-mix(in srgb, var(--border-color) 80%, transparent);
    transform: translateY(-2px);
}

body.dark-mode .ai-chat-input-container:focus-within,
body.synthwave-mode .ai-chat-input-container:focus-within,
body.oled-mode .ai-chat-input-container:focus-within {
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
}

.ai-chat-main-input-row {
    display: flex;
    align-items: center;
    gap: 5px;
}


.ai-chat-textarea-wrapper {
    position: relative;
}


#aiChatInput {
    width: 100%;
    min-height: 80px;
    max-height: 200px;
    padding: 14px 95px 14px 15px;
    border: none;
    overflow-y: auto;
    background: transparent;
    color: var(--text-color);
    font-size: 1.1em;
    line-height: 1.4;
    outline: none;
    resize: none;
    /* PREMIUM UX: Мгновенный ресайз без фризов UI. Анимация height удалена во имя 60FPS при быстром наборе */
    transform: translateZ(0);
    contain: paint;
}


#aiChatInput:focus {
    box-shadow: none !important;
}

/* === ГЛОБАЛЬНЫЙ СТИЛЬ ДЛЯ КНОПОК ВВОДА === */
.advanced-send-btn {
    position: absolute;
    bottom: 12px !important; 
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px !important;
    height: 36px !important;
    padding: 0;
    border: none;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.2s ease, 
                box-shadow 0.2s ease, 
                opacity 0.2s ease;
    cursor: pointer;
    transform-origin: center;
}

/* 1. Кнопка Отправить (Внизу справа) */
#sendBtn, #aiChatSendBtn {
    bottom: 5px !important;
    right: 10px !important;
    top: auto !important;
    background: var(--button-primary-bg) !important;
    color: #fff !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#sendBtn:hover:not(:disabled), #aiChatSendBtn:hover:not(:disabled) {
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
#sendBtn:active:not(:disabled), #aiChatSendBtn:active:not(:disabled) {
    transform: scale(0.9) rotate(0deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
#sendBtn:disabled, #aiChatSendBtn:disabled {
    background: var(--border-color) !important;
    color: var(--secondary-text-color) !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
    cursor: not-allowed;
    transform: scale(0.85); /* Прячем неактивную кнопку глубже */
}

/* ================================================ */
/* === TELEGRAM-STYLE VOICE RECORDING UI        === */
/* ================================================ */

/* Кнопка микрофона (занимает место sendBtn) */
#voiceRecordBtn {
    bottom: 15px !important;
    right: 10px !important;
    top: auto !important;
    background: var(--button-primary-bg) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#voiceRecordBtn:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
#voiceRecordBtn:active {
    transform: scale(0.9);
    background: #e74c3c !important;
}

/* Плавное переключение Send / Mic */
#sendBtn.voice-swap-hidden,
#voiceRecordBtn.voice-swap-hidden {
    opacity: 0 !important;
    transform: scale(0.3) !important;
    pointer-events: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

/* --- Панель записи (заменяет input-wrapper) --- */
.voice-record-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--container-bg-color);
    border: 1px solid #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
    transition: transform 0.2s ease, opacity 0.2s ease;
    animation: voicePanelAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.voice-record-panel.hidden {
    display: none !important;
}

/* Панель записи в ИИ-чате: перекрывает textarea на полную ширину */
.ai-voice-record-panel {
    position: absolute;
    inset: 0;
    /* Поверх кнопок textarea-wrapper (.advanced-send-btn z-index: 10) */
    z-index: 20;
    padding: 14px 15px;
    border-radius: 12px;
    background: var(--container-bg-color);
    /* Внешняя RGB-подсветка идёт от .ai-chat-input-container.is-listening — внутреннюю красную рамку убираем */
    border: 1px solid transparent;
    box-shadow: none;
}
body.ai-chat-recording #aiChatInput,
body.ai-chat-recording #aiChatMicBtn,
body.ai-chat-recording #aiChatSendBtn {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.ai-chat-recording .ai-input-actions {
    opacity: 0.3;
    pointer-events: none;
}
@keyframes voicePanelAppear {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.voice-record-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Пульсирующая точка записи */
.voice-record-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e74c3c;
    flex-shrink: 0;
    animation: voicePulse 1s ease-in-out infinite;
}
/* ENTERPRISE UX: Двойной радарный импульс (iOS Dictation Style Echo) */
@keyframes voicePulse {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(231,76,60,0.6), 0 0 0 0 rgba(231,76,60,0.6); 
    }
    70% { 
        transform: scale(1.1); 
        box-shadow: 0 0 0 10px rgba(231,76,60,0), 0 0 0 5px rgba(231,76,60,0.2); 
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(231,76,60,0), 0 0 0 0 rgba(231,76,60,0); 
    }
}

.voice-record-timer {
    font-size: 1.1em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #e74c3c;
    min-width: 40px;
}

.voice-slide-hint {
    font-size: 0.8em;
    color: var(--secondary-text-color);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: slideHintPulse 2s ease-in-out infinite;
}
@keyframes slideHintPulse {
    0%, 100% { opacity: 0.7; transform: translateX(0); }
    50% { opacity: 0.4; transform: translateX(-5px); }
}

/* Кнопка отмены (корзина) */
.voice-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.voice-cancel-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    transform: scale(1.1);
}
.voice-cancel-btn:active {
    transform: scale(0.9);
}
.voice-cancel-btn i {
    width: 18px;
    height: 18px;
}

/* Кнопка отправки голосового */
.voice-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--button-primary-bg);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.voice-send-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.voice-send-btn:active {
    transform: scale(0.9);
}
.voice-send-btn i {
    width: 18px;
    height: 18px;
}

/* 2. Волшебная палочка (Вверху справа) */
#chatTextMagicBtn, #aiChatTextMagicBtn {
    top: 12px !important;
    bottom: auto !important;
    right: 12px !important;
    background: transparent !important;
    color: var(--secondary-text-color) !important;
}

/* 3. Микрофон (Вверху, левее палочки) */
#chatMicBtn, #aiChatMicBtn {
    top: 12px !important;
    bottom: auto !important;
    right: 52px !important; 
    background: transparent !important;
    color: var(--secondary-text-color) !important;
}

/* Ховеры для прозрачных кнопок (Палочка и Микрофон) */
#chatTextMagicBtn:hover, #aiChatTextMagicBtn:hover,
#chatMicBtn:hover, #aiChatMicBtn:hover {
    background: var(--input-hover-bg-color) !important;
    color: var(--accent) !important;
    transform: scale(1.1);
}


.ai-user-message-actions {
    justify-content: flex-end;
}

.ai-message-container.is-user.actions-visible .ai-user-message-actions {
    max-height: 50px;
    margin-top: 8px;
}
/* Показ по наведению — только там, где наведение есть. На телефоне Chrome применяет :hover
   в момент тапа: панель получала pointer-events, и click прилетал в кнопку «...», которую
   палец не нажимал (pointerdown ушёл в пузырь). Отсюда «то открывается, то нет». */
@media (hover: hover) {
    .ai-message-container.is-user:hover .ai-user-message-actions {
        max-height: 50px;
        margin-top: 8px;
    }
}

.ai-message-container {
    display: flex;
    flex-direction: column;
    /* ОПТИМИЗАЦИЯ: Убрали content-visibility, так как он вызывает моргание картинок и скачки скролла. 
       Оставляем только безопасную изоляцию стилей и макета. */
    contain: layout style; 
}

.ai-message-container.is-user {
    align-items: flex-end;
}

.ai-message-container.is-model {
    align-items: flex-start;
    margin-left: 5px;
}

.ai-message-actions .ai-action-btn,
.ai-user-message-actions .ai-action-btn {
    border: none !important;
    background-color: transparent !important;
}

.ai-action-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 30px;
    padding: 0 !important;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    transition: color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    overflow: hidden;
}

/* Эффект расширения круга при наведении (Telegram style) */
.ai-action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    /* background-color: var(--text-color); */
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
    z-index: -1;
}

.ai-action-btn i,
.ai-action-btn svg {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* ОПТИМИЗАЦИЯ VRAM: Удален will-change. Свойство создавало сотни композитных слоев в видеокарте, пожирая память */
    transform: translateZ(0);
}

.ai-action-btn:hover {
    /* Здесь стояло color: var(--container-bg-color) — «иконка становится
       цветом фона». Расчёт был на тёмную подложку ::before, которая
       выросла бы под значком. Но подложку отключили: её background-color
       закомментирован, а сама она лежит на z-index: -1. В итоге значок
       перекрашивался в цвет фона ПОВЕРХ фона того же цвета и растворялся —
       со стороны выглядело как «увеличился и пропал» (увеличение даёт
       scale(1.2) ниже).
       Подсветку даём акцентом: значок остаётся видимым в любой теме. */
    color: var(--accent, var(--button-primary-bg));
}

.ai-action-btn:hover i,
.ai-action-btn:hover svg {
    /* PREMIUM UX: Icon Bop (Отскок с легким вращением) */
    transform: scale(1.2) rotate(5deg);
}

.ai-action-btn:active i,
.ai-action-btn:active svg {
    /* Провал внутрь при клике */
    transform: scale(0.85) rotate(-5deg);
    transition: transform 0.1s ease;
}

.ai-action-btn:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Круг вырастает из центра */
}

body.dark-mode .ai-action-btn:hover {
    color: var(--bg-color);
}

.ai-action-btn i[data-lucide] {
    width: 8px;
    height: 8px;
}

.ai-chat-modal-content {
    position: relative;
}

.ai-chat-settings-panel {
    /* position: absolute; */
    z-index: 10;
    display: flex;
    gap: 0px;
    width: 99%;
    align-self: anchor-center;
    padding: 5px 15px;
    /* border: 1px solid var(--border-color); */
    border-radius: 12px;
    background-color: var(--container-bg-color);
    animation: bounce .2s;
    box-shadow: var(--neumorph-shadow-soft-sm);
    flex-direction: column;
}


@media (min-width: 960px) {
    .ai-chat-settings-panel {
        top: 0;
        left: 100%;
        margin-left: 10px;
    }
}

@media (max-width: 959px) {
    .ai-chat-settings-panel {
        top: 55px;
        right: 15px;
    }
}

.ai-chat-settings-panel.is-inside {
    top: 55px !important;
    right: 15px !important;
    left: auto !important;
    margin-left: 0px !important;
    box-shadow: var(--neumorph-shadow-inset);
    margin-bottom: 1px;
    border-radius: 12px;
    margin-top: 5px;
}

.ai-setting-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
    flex-direction: column;
}


.ai-setting-group label {
    flex-shrink: 0;
    margin-right: 10px;
    color: var(--text-color);
    font-weight: 500;
}

.ai-setting-group span {
    color: var(--secondary-text-color);
    font-size: .9em !important;
    padding: 0px 3px;
}

.ai-chat-settings-panel input[type="range"] {
    width: 95% !important;
    height: 6px !important;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    background: var(--border-color) !important;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

/* Принудительно закрашиваем "рельсы" поверх глобальных стилей */
.ai-chat-settings-panel input[type="range"]::-webkit-slider-runnable-track {
    background: var(--border-color) !important;
    height: 6px !important;
    border-radius: 10px !important;
}

.ai-chat-settings-panel input[type="range"]::-moz-range-track {
    background: var(--border-color) !important;
    height: 6px !important;
    border-radius: 10px !important;
}

.ai-chat-settings-panel input[type="range"]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -6px; /* Фикс центрирования на новом треке */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.ai-chat-settings-panel input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.ai-custom-select {
    position: relative;
    width: 180px;
}

.ai-select-button {
    display: flex;
    box-shadow: var(--neumorph-shadow-soft-sm);
    align-items: center;
    width: 100%;
    /* Здесь стояло ещё одно justify-content: space-between — его перебивало
       center тремя строками ниже, то есть оно не работало никогда. */
    justify-content: center;
    padding: 4px 8px;
    gap: 5px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: .9em;
    text-align: left;
    cursor: pointer;
}
.ai-select-button i[data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--secondary-text-color);
    transition: transform .2s ease;
}

.ai-custom-select.open .ai-select-button i[data-lucide]:last-child {
    transform: rotate(180deg);
}

.ai-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20000; /* Поверх всего чата */
    width: inherit;
    max-height: 550px;
    border: 1px solid var(--border-color);
    border-radius: 14px; /* iOS скругление */
    overflow-y: auto;
    
    /* PREMIUM UX: Glassmorphism */
    background-color: var(--bg-color); /* fallback для старых браузеров */
    background-color: color-mix(in srgb, var(--bg-color) 95%, transparent);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.05);
    
    /* PREMIUM UX: Анимация вырастания из кнопки */
    transform-origin: top center;
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
    /* ОПТИМИЗАЦИЯ VRAM: Браузер сам выделит слой в момент применения CSS-транзишена, статика не нужна */
}

.ai-custom-select.open .ai-select-dropdown {
    opacity: 1;
    transform: scale(1) translateY(0);
    visibility: visible;
    transition-delay: 0s; /* Убираем задержку visibility при открытии */
}


.ai-select-dropdown a {
    padding: 8px 12px;
    color: var(--text-color);
    font-size: .9em;
    text-decoration: none;
}

.ai-select-dropdown a:hover {
    /* background-color: var(--input-hover-bg-color); */
}

.ai-message-container.editing .ai-message,
.ai-message-container.editing .ai-user-message-actions {
    display: none;
}

.ai-edit-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background-color: var(--input-bg-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent);
}

.ai-edit-textarea {
    width: 100%;
    max-height: 250px;
    padding: 4px;
    border: none;
    overflow-y: auto;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.5;
    outline: none;
    resize: none;
}

.ai-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ai-edit-btn-save,
.ai-edit-btn-cancel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 5px;
    border: none;
    border-radius: 50%;
    transition: all .2s ease;
    cursor: pointer;
}

.ai-edit-btn-cancel {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.ai-edit-btn-cancel:hover {
    background-color: var(--button-secondary-hover-bg);
}

.ai-edit-btn-save {
    background-color: var(--button-success-bg);
    color: var(--button-primary-text);
}

.ai-edit-btn-save:hover {
    background-color: var(--button-success-hover-bg);
}

.ai-edit-btn-save i,
.ai-edit-btn-cancel i {
    width: 18px;
    height: 18px;
}


.ai-chat-textarea-wrapper {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    top: 0px;
    padding: 3px;
}
.ai-attachment-remove-btn:hover {
    color: var(--accent);
}

.ai-attachment-preview img {
    border-radius: 6px;
}

.ai-message-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--input-hover-bg-color);
    text-decoration: none;
    cursor: pointer;
}

.ai-message-attachment:hover {
    border-color: var(--accent);
}


.ai-attachment-thumbnail {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.ai-attachment-icon {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--container-bg-color);
}


.ai-attachment-file-info {
    min-width: 0;
}

.ai-attachment-file-name {
    color: var(--text-color);
    font-weight: 500;
}

.ai-message.user .ai-attachment-file-name {
    color: var(--button-primary-text);
}

.ai-attachment-file-type {
    color: var(--secondary-text-color);
    font-size: .8em;
}


@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#textPreviewModal .text-preview-content {
    display: flex;
    flex-direction: column;
    width: 90vw;
    max-width: 800px;
    height: 90vh;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    box-shadow: 0 10px 40px #0000004d;
    animation: fadeIn .3s;
}

.text-preview-header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}

.text-preview-header h3 {
    margin: 0;
    overflow: hidden;
    font-size: 1.1em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.close-text-preview {
    border: none;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.close-text-preview:hover {
    color: var(--text-color);
}

#textPreviewBody {
    flex-grow: 1;
    margin: 0;
    padding: 15px;
    overflow-y: auto;
    color: var(--text-color);
    font-family: monospace;
    font-size: .9em;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ai-reply-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: var(--input-hover-bg-color);
    animation: fadeIn .3s;
    border-left: 3px solid var(--accent);
}

.ai-reply-info {
    flex-grow: 1;
    overflow: hidden;
}

.ai-reply-title {
    color: var(--secondary-text-color);
    font-size: .8em;
    font-weight: 500;
}

.ai-reply-snippet {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text-color);
    font-style: italic;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-cancel-reply-btn {
    flex-shrink: 0;
    margin-left: 10px;
    padding: 4px;
    border: none;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.ai-reply-context {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin-bottom: -5px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    box-sizing: border-box;
    background: var(--input-bg-color);
    font-size: .85em;
    transition: background-color .2s ease;
    cursor: pointer;
    border-bottom: none;
    border-left: 3px solid var(--accent);
}

.ai-reply-context:hover {
    background-color: var(--input-hover-bg-color);
}

.ai-message-container.is-user .ai-reply-context {
    margin-left: auto;
}

.ai-reply-author {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 700;
}

.ai-reply-text {
    overflow: hidden;
    color: var(--secondary-text-color);
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

@keyframes highlight-fade-ai {
    from {
        background-color: color-mix(in srgb, var(--accent) 30%, transparent);
    }

    to {
        background-color: transparent;
    }
}

.ai-message-container.highlighted {
    border-radius: 12px;
    animation: highlight-fade-ai 2s ease-out;
}

#runParserBtn,
#generateTestFromTextBtn,
#generateTestFromTopicBtn {
    width: 100%;
    max-width: 350px;
    margin: 10px auto;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-size: 1.05em;
    font-weight: 500;
    box-shadow: 0 2px 5px var(--shadow-light-color);
    transition: all .2s ease-in-out;
    background-size: 200% auto;
}

/* Подготовка к блику (Isolation) */
#runParserBtn,
#generateTestFromTextBtn,
#generateTestFromTopicBtn {
    position: relative;
    overflow: hidden;
}

#runParserBtn:hover,
#generateTestFromTextBtn:hover,
#generateTestFromTopicBtn:hover {
    box-shadow: 0 4px 15px var(--shadow-color);
    transform: translateY(-2px);
    background-position: right center;
}

/* ENTERPRISE UX: Скользящий блик (Hover Shine) */
#runParserBtn::after,
#generateTestFromTextBtn::after,
#generateTestFromTopicBtn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
}

#runParserBtn:hover::after,
#generateTestFromTextBtn:hover::after,
#generateTestFromTopicBtn:hover::after {
    animation: buttonShine 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes buttonShine {
    0% { left: -150%; }
    100% { left: 150%; }
}

.ai-chat-scroll-wrapper {
    position: relative;
    display: flex;
    border-radius: 12px;
    margin-top: 2px;
    flex-grow: 1;
    flex-direction: column;
    box-shadow: var(--neumorph-shadow-inset);
    min-width: 0;
    margin-bottom: 2px;
    min-height: 0;
}

.ai-chat-messages { /* Нативный якорь браузера */
    /* Убрали scroll-behavior: smooth */
}

.ai-chat-messages::-webkit-scrollbar {
    display: none;
}

.ai-chat-messages {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ai-custom-scrollbar {
    position: absolute;
    top: 10px;
    right: 2px;
    bottom: 10px;
    width: 26px;
}

.scrollbar-track {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: auto;
    width: 2px;
    border-radius: 1px;
    background-color: var(--border-color);
}

.scrollbar-thumb {
    position: absolute;
    right: auto;
    left: 5.3px;
    width: 5px;
    border-radius: 4px;
    background-color: var(--secondary-text-color);
    opacity: 1;
    /* PREMIUM UX: Упругое расширение при наведении */
    transition: opacity 0.4s ease, width 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
    will-change: width, left, opacity; /* GPU ускорение */
}

.scrollbar-thumb:hover, .scrollbar-thumb:active {
    opacity: 1;
    width: 8px; /* Расширяем */
    left: 3.8px; /* Компенсируем сдвиг влево, чтобы росло из центра */
    background-color: var(--text-color); /* Делаем ярче */
}

.scrollbar-thumb:active {
    cursor: grabbing;
}

.scrollbar-dots-container {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 3px;
}

.scrollbar-dot {
    position: absolute;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent);
    transform: translate(-50%, -50%);
    transition: transform .2s ease, box-shadow .2s ease;
}

.scrollbar-dot:hover {
    box-shadow: 0 0 3px var(--accent);
}

.scrollbar-tooltip {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: 0 4px 15px var(--shadow-color);
}

.scrollbar-tooltip.visible {
    transition-delay: 0s;
}

.scrollbar-tooltip::after {
    border-color: transparent transparent transparent var(--container-bg-color);
}

.scrollbar-tooltip::before {
    border-color: transparent transparent transparent var(--border-color);
}

.ai-chat-modal-content {
    display: flex;
    flex-direction: column;
}

.ai-chat-body-wrapper {
    flex-grow: 1;
    min-width: 0;
}

.ai-chat-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1004;
    max-width: 90%;
    height: 98%;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft);
    transform: translateX(-100%);
    transition: transform .3s ease-in-out;
    border-right: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 10px 5px 5px 3px;
}

.ai-sidebar-scroll-container {
    flex-grow: 1;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
}

.ai-sidebar-section {
    flex: 1 1 0;
}

.ai-sidebar-footer {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 8px 15px;
    border-top: 1px solid var(--border-color);
}

.ai-chat-modal-content.sidebar-open .ai-chat-sidebar {
    box-shadow: var(--neumorph-shadow-inset);
}

.ai-chat-scroll-wrapper {
    transition: margin-left .3s ease-in-out;
}

.ai-sidebar-header {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: -1px;
    border-bottom: 1px solid var(--border-color);
}


.ai-chat-history-list {
    position: relative;
    margin: 0;
    padding: 10px 10px;
    list-style: none;
}

.ai-chat-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background-color .2s ease, border-color .2s ease;
    margin-right: 15px;
    user-select: none;
    -webkit-touch-callout: none;
    content-visibility: auto;
    contain-intrinsic-size: auto 40px;
}

.ai-chat-history-item:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--border-color);
    /* APP STORE TIER: Магнитный сдвиг при наведении */
    transform: translateX(4px);
    box-shadow: -2px 2px 8px rgba(0,0,0,0.02);
}

/* ОПТИМИЗАЦИЯ CPU/RAM: CSS-only пружинный отклик (замена JS onpointerdown) */
/* ИСПРАВЛЕНИЕ: Отключаем продавливание всего элемента, если курсор над кнопками действий, 
   чтобы избежать случайного "соскальзывания" мыши с кнопки при клике на ПК. */
.ai-chat-history-item:active:not(:has(.ai-chat-history-actions:hover)) {
    transform: scale(0.96) !important;
}

.ai-chat-history-item.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 500;
}

/* ✅ ИСПРАВЛЕНИЕ: Светлые иконки действий на темном фоне активного чата в светлой теме */
.ai-chat-history-item.active .ai-chat-history-actions button {
    color: var(--button-primary-text) !important; /* Гарантируем контрастный цвет (обычно белый) */
    opacity: 0.7;
}

.ai-chat-history-item.active .ai-chat-history-actions button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 6px;
    transform: scale(1.1); /* Пружинный эффект из основной системы кнопок */
}

body.claude-mode .ai-chat-history-item.active {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.ai-chat-history-title {
    flex-grow: 1;
    margin-right: 10px;
    text-overflow: ellipsis;
}

.ai-chat-history-delete {
    flex-shrink: 0;
    padding: 2px;
    border: none;
    background: none;
    color: inherit;
    opacity: .6;
    transition: opacity .2s;
    cursor: pointer;
}

.ai-chat-history-delete:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .ai-chat-modal-content.sidebar-open .ai-chat-scroll-wrapper {
        margin-left: 0;
    }
}

.ai-chat-body-wrapper {
    position: relative;
    overflow: hidden;
}

.ai-chat-modal-content.sidebar-open .ai-chat-sidebar {
    transform: translateX(0);
}

.ai-sidebar-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    z-index: 1002;
    width: 20px;
    cursor: pointer;
}

.ai-sidebar-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 9px;
    width: 6px;
    height: 40px;
    border-radius: 12px;
    background-color: var(--accent);
    opacity: .3;
    transform: translateY(-50%);
    transition: opacity .2s ease, transform .2s ease;
}

.ai-sidebar-handle:hover::after {
    opacity: .8;
    transform: translateY(-50%) scale(1.1);
}

@media (max-width: 800px) {
    /* PREMIUM UX: Spatial 3D Push-back (VisionOS / Telegram iOS Style) */
    
    /* Делаем фон модалки черным, чтобы контент эффектно проваливался в темноту */
    .ai-chat-modal-content {
        background-color: #000 !important; 
    }

    /* Подготавливаем слои к аппаратному ускорению (GPU - 60FPS) */
    .ai-chat-header,
    .ai-chat-scroll-wrapper,
    .ai-chat-input-area {
        transition: transform 0.45s cubic-bezier(0.32, 1.15, 0.25, 1), 
                    opacity 0.45s ease !important;
        /* ОПТИМИЗАЦИЯ VRAM: Удален перманентный will-change.
           Используем 3D-хак для создания слоя без жесткой аллокации буфера GPU. */
        transform: translateZ(0);
        transform-origin: center right;
        background-color: var(--bg-color);
        backface-visibility: hidden;
    }

    /* Имитация нативной тени и краев устройства */
    .ai-chat-header { border-radius: 20px 20px 0 0; }
    .ai-chat-input-area { border-radius: 0 0 20px 20px; }

    /* === СОСТОЯНИЕ ОТКРЫТОГО МЕНЮ === */
    /* Контент сжимается, уходит в тень и смещается вправо, уступая место сайдбару */
    .ai-chat-modal-content.sidebar-open .ai-chat-header,
    .ai-chat-modal-content.sidebar-open .ai-chat-scroll-wrapper,
    .ai-chat-modal-content.sidebar-open .ai-chat-input-area {
        transform: scale(0.92) translateX(40px) !important;
        opacity: 0.6 !important;
        pointer-events: none !important; /* Блокируем случайные клики сквозь слои */
        border-radius: 12px !important; /* Закругляем углы при сжатии */
        box-shadow: -15px 0 40px rgba(0,0,0,0); /* Глубокая тень падает влево */
    }

    /* Сайдбар выезжает поверх темноты, но визуально находится "под" сдвинутым контентом */
    .ai-chat-sidebar {
        z-index: 1005 !important;
        background-color: var(--container-bg-color);
        border: 2px solid rgba(255,255,255,0.05);
        border-radius: 8px 20px 20px 8px;
        border-color: var(--border-color);
        /* Ускорения через will-change достаточно, убрали конфликт осей */
        will-change: transform;
    }

    /* Убираем старый черный оверлей-костыль */
    .ai-chat-modal-content.sidebar-open .ai-chat-scroll-wrapper::before {
        display: none !important;
    }
}

.ai-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

/* Нативный чекбокс убираем полностью, а не просто сжимаем.

   Нулевых размеров недостаточно: общие правила для input дают ему padding, а
   `.modal-content *` навязывает `box-sizing: border-box !important` — при
   нулевой ширине padding всё равно раздувает коробку примерно до 20×26. Это
   больше слайдера по высоте (23px), поэтому нативный чекбокс выглядывал
   из-под него краями. Раньше `opacity: 0` здесь стоял, но был закомментирован.

   Рецепт тот же, что уже применён вручную у тумблера удаления папки в chat.js:
   вывести из потока, обнулить размеры и отступы, спрятать прозрачностью.
   Прозрачность, а не `display: none`, — чтобы чекбокс оставался настоящим:
   он по-прежнему получает фокус с клавиатуры и переключается пробелом. */
.ai-toggle-switch input {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Раз сам чекбокс невидим, фокус с клавиатуры показываем на слайдере —
   иначе обвести было бы нечего и тумблер стал бы недоступен без мыши. */
.ai-toggle-switch input:focus-visible + .ai-toggle-slider {
    outline: 2px solid var(--accent-color, #58a6ff);
    outline-offset: 2px;
}
.ai-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 43px;
    height: 23px;
    box-shadow: var(--neumorph-shadow-inset) !important;
    background-color: var(--border-color); /* Серый цвет по умолчанию */
    border-radius: 34px;
    transition: .4s ease-in-out;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.ai-toggle-slider:before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--container-bg-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    /* PREMIUM UX: Пружина вместо обычной линейной анимации */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.2s ease, background-color 0.3s;
    /* ОПТИМИЗАЦИЯ VRAM: Удален статический will-change для мелких UI-элементов */
}

.ai-toggle-switch:active .ai-toggle-slider:before {
    /* Эффект сплющивания при нажатии (Squish) */
    width: 24px;
}

.ai-toggle-switch input:checked+.ai-toggle-slider {
    background-color: var(--button-success-bg); /* Ярче цвет */
}

.ai-toggle-switch input:checked+.ai-toggle-slider:before {
    transform: translateX(20px);
}

.ai-toggle-switch input:checked:active+.ai-toggle-slider:before {
    /* Сплющивание в обратную сторону при выключении */
    transform: translateX(14px);
}

.ai-main-controls {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.ai-main-controls::-webkit-scrollbar { display: none; }

/* Дети не сжимаются — лучше скролл, чем сжатие иконок */
.ai-main-controls > * {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.ai-main-controls .ai-setting-group>label {
    margin-right: 5px;
    font-size: .8em;
}

.ai-main-controls .ai-toggle-switch {
    width: 36px;
    height: 20px;
}

.ai-main-controls .ai-toggle-slider:before {
    bottom: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
}

.ai-main-controls .ai-toggle-switch input:checked+.ai-toggle-slider:before {
    transform: translateX(16px);
}


.ai-chat-footer-main-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-chat-footer-actions {
    display: flex;
    gap: 3px;
    align-items: baseline;
}

/* Кнопки, перенесённые в меню «Ещё», физически остаются в DOM
   (чтобы существующие обработчики и .active-стили работали без правок),
   но визуально скрыты. */
.ai-collapsed-in-more {
    display: none !important;
}

/* Чип-индикатор: для toggle-кнопок (Бионика, Wiki-картинки) — когда фича включена,
   её иконка выползает рядом с Google в виде красного «чипа», показывая,
   что режим активен. Клик по чипу выключает (триггерит тот же click-handler). */
.ai-collapsed-in-more.ai-active-chip.active {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    border: 1px solid var(--accent);
    background: rgba(231, 76, 60, 0.08);
    border-radius: 50%;
}
.ai-collapsed-in-more.ai-active-chip.active i[data-lucide],
.ai-collapsed-in-more.ai-active-chip.active svg {
    color: var(--accent);
    stroke: var(--accent);
}

/* Google-кнопка: при фокусе на поле ввода раскрывается и показывает подпись.
   Перебиваем фикс-ширину 30px из .ai-main-controls .ai-action-btn,
   у этой кнопки она inline-flex с авто-шириной. */
.ai-main-controls #aiGroundingToggleBtn {
    width: auto;
    min-width: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    transition: gap 0.25s ease, padding 0.25s ease;
}
.ai-grounding-label {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
    color: var(--text-color);
    transition: max-width 0.28s ease, opacity 0.2s ease;
}
.ai-chat-input-area.input-focused .ai-main-controls #aiGroundingToggleBtn {
    gap: 6px;
    padding: 0 10px 0 8px;
}
.ai-chat-input-area.input-focused .ai-grounding-label {
    max-width: 160px;
    opacity: 1;
}

.ai-more-container {
    position: relative;
    display: inline-flex;
}

/* Меню «Ещё»: пункты с иконкой + текстом в одну строку.
   Селекторы написаны через .ai-attach-menu.ai-more-menu, чтобы перебить
   базовые правила .ai-attach-menu (left:0, width:220px), которые иначе
   растягивают меню на ширину inline-flex родителя и схлопывают текст. */
.ai-attach-menu.ai-more-menu {
    width: 240px;
}
.ai-attach-menu.ai-more-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.ai-attach-menu.ai-more-menu a i[data-lucide] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.ai-attach-menu.ai-more-menu a span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Каскад появления .ai-attach-menu задан до 4-го пункта; в нашем меню 5. */
.ai-attach-menu.ai-more-menu:not(.hidden) a:nth-child(5) { animation-delay: 0.25s; }
/* Индикация on/off для пунктов-проксей к toggle-кнопкам */
.ai-attach-menu.ai-more-menu a.active {
    color: var(--accent);
    font-weight: 600;
}
.ai-attach-menu.ai-more-menu a.active i[data-lucide] {
    color: var(--accent);
}


.ai-main-controls .ai-action-btn {
    width: 30px;
    height: 30px;
}

.ai-main-controls .ai-action-btn i[data-lucide] {
    width: 16px;
    height: 16px;
}

.ai-grounded-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    opacity: .7;
    transition: opacity .2s ease, transform .2s ease;
    cursor: pointer;
    vertical-align: super;
}

.ai-grounded-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

.ai-grounded-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.scrollbar-tooltip {
    position: fixed;
    right: auto;
    z-index: 10002;
    max-width: 250px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: .9em;
    line-height: 1.4;
    box-shadow: 0 4px 15px var(--shadow-color);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
    visibility: hidden;
    word-break: break-word;
}

.scrollbar-tooltip.visible {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

.scrollbar-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -6px;
    border-color: transparent transparent transparent var(--container-bg-color);
    border-style: solid;
    border-width: 6px;
}

.scrollbar-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -7px;
    margin-left: -1px;
    border-color: transparent transparent transparent var(--border-color);
    border-style: solid;
    border-width: 7px;
}

.ai-message.model hr {
    margin: 16px 0;
    border: none;
    border-top: 1px solid var(--border-color);
}

.ai-message.model strong {
    color: var(--text-color);
}

.ai-message.model ol {
    margin-top: 8px;
    margin-bottom: 0;
    padding-left: 20px;
    font-size: .9em;
}

.ai-message.model ol li {
    margin-bottom: 6px;
    color: var(--secondary-text-color);
}

.ai-message.model ol li a {
    color: var(--accent);
    text-decoration: none;
    word-break: break-all;
    position: relative;
    display: inline-block;
}

/* ENTERPRISE UX: Скользящее подчеркивание (Sliding Underline) */
.ai-message.model ol li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.ai-message.model ol li a:hover {
    text-decoration: none;
}

.ai-message.model ol li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

@media (max-width: 600px) {
    .ai-chat-header {
        /* height: 40px убран — шапка растёт под высоту breadcrumb */
        min-height: 40px;
    }

    .ai-chat-header h3 {
        gap: 6px;
    }

    

    

    
}

@media (max-width: 768px) {
    .scrollbar-track {
        right: -3px;
    }

    .scrollbar-dot {
        width: 25px;
        height: 17px;
    }
}

.ai-new-chat-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--input-hover-bg-color);
}


.persistent-tooltip {
    position: absolute;
    z-index: 100;
    max-width: 220px;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: .85em;
    line-height: 1.4;
    box-shadow: 0 2px 8px var(--shadow-light-color);
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    white-space: normal;
    word-break: break-word;
}

.persistent-tooltip.visible {
    opacity: 1;
    transform: translateX(0);
}

.persistent-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border-color: transparent transparent transparent var(--container-bg-color);
    border-style: solid;
    border-width: 6px;
}

.dot-color-picker {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    box-shadow: 0 5px 20px var(--shadow-color);
}

.color-swatch {
    border: 2px solid var(--container-bg-color);
    box-shadow: 0 0 0 1px var(--border-color);
}


.color-picker-reset {
    color: var(--secondary-text-color);
}

.color-picker-reset:hover {
    color: var(--accent);
}

.ai-chat-user-messages-sidebar {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 0;
    /* PREMIUM UX FIX: Поднимаем панель выше кастомного скроллбара (2000) */
    border-radius: 12px 8px 8px 12px;
    box-shadow: var(--neumorph-shadow-dark);
    z-index: 2500 !important;
    display: flex;
    flex-direction: column;
    width: 270px;
    height: 99%;
    max-width: 85%;
    background-color: var(--container-bg-color);
     /* Более глубокая, "нативная" тень */
    transform: translateX(100%);
    /* Apple Spring Transition */
    transition: transform 0.4s cubic-bezier(0.32, 1.15, 0.25, 1);
    will-change: transform;
    border-left: 1px solid var(--border-color);
    border: 3px solid rgba(255, 255, 255, 0.05);
}

.ai-chat-modal-content.user-sidebar-open .ai-chat-user-messages-sidebar {
    transform: translateX(0);
}

.ai-chat-scroll-wrapper,
.ai-chat-input-area {
    transition: margin-right .3s ease-in-out;
}

.ai-chat-user-messages-sidebar .ai-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-user-messages-list {
    flex-grow: 1;
    min-height: 0;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    list-style: none;
    touch-action: pan-y;
    box-shadow: var(--neumorph-shadow-inset);
    border-radius: 12px 12px 12px 12px;
}

.ai-user-message-item {
    margin-bottom: 8px;
    padding: 10px 12px 10px 14px;
    border: none;
    border-radius: 10px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
    user-select: none;
    -webkit-touch-callout: none;
    border-left: 6px solid var(--user-message-color, transparent);
}

.ai-user-message-item:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

.ai-user-message-snippet {
    display: -webkit-box;
    margin-bottom: 4px;
    overflow: hidden;
    font-size: .9em;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
}


@media (max-width: 800px) {

    .ai-chat-modal-content.user-sidebar-open .ai-chat-scroll-wrapper,
    .ai-chat-modal-content.user-sidebar-open .ai-chat-input-area {
        margin-right: 0;
    }
}


.ai-message-sources-list {
    margin-top: 12px;
    padding-top: 12px;
    font-size: .9em;
    border-top: 1px solid var(--border-color);
}

.grounded-segment {
    transition: background-color .2s ease;
    cursor: help;
    border-bottom: 2px dotted color-mix(in srgb, var(--accent) 50%, transparent);
}

.grounded-segment:hover {
    background-color: color-mix(in srgb, var(--accent) 15%, transparent);
}

.source-tooltip {
    position: fixed;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Чуть мягче углы */
    
    /* PREMIUM UX: Матовое стекло (Glassmorphism) */
    background-color: color-mix(in srgb, var(--container-bg-color) 85%, transparent);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    
    font-size: .9em;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Глубокая тень */
    opacity: 0;
    
    /* ENTERPRISE UX: Apple 3D Hinge (Пространственное раскрытие-петля) */
    perspective: 1000px;
    transform-style: preserve-3d;
    transform-origin: top center;
    transform: translateY(12px) scale(0.9) rotateX(-20deg);
    transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    will-change: transform, opacity;
}

.source-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
}

.source-tooltip a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
    pointer-events: auto;
    word-break: break-all;
}

.source-tooltip a:hover {
    text-decoration: underline;
}

.scrollbar-dot.is-cluster {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--button-primary-bg);
    box-shadow: 0 0 5px var(--button-primary-bg);
    transform: translate(-50%, -50%) rotate(90deg);
}

body:not(.synthwave-mode):not(.claude-mode):not(.glass-dark) .scrollbar-dot.is-cluster {
    background-color: var(--accent);
    box-shadow: 0 0 5px var(--accent);
}

.scrollbar-preview-tooltip {
    position: fixed;
    max-width: 280px;
    max-height: 300px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow-y: auto;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.scrollbar-preview-tooltip.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.scrollbar-preview-tooltip ul {
    margin: 0;
    padding: 5px;
    list-style: none;
}

.scrollbar-preview-tooltip li {
    padding: 8px 10px;
    border-radius: 5px;
    overflow: hidden;
    font-size: .9em;
    transition: background-color .2s ease;
    cursor: pointer;

}

.scrollbar-preview-tooltip li:hover {
    background-color: var(--input-hover-bg-color);
}

@media (max-width: 768px) {
    .scrollbar-dot {
        border: 1px solid var(--container-bg-color);
    }

    .scrollbar-dot.is-cluster {
        width: 15px;
        height: 25px;
    }
}

.scrollbar-preview-tooltip li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-color-indicator {
    flex-shrink: 0;
    width: 4px;
    height: 1.5em;
    border-radius: 2px;
}

.ai-sidebar-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px;
}

.ai-sidebar-section-header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: -5px 15px;
    border-radius: 12px;
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.ai-sidebar-section-header h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--secondary-text-color);
    font-size: .9em;
    font-weight: 500;
    padding: 0px 0px 0px 10px;
}

.ai-sidebar-section-header h4 i {
    width: 16px;
    height: 16px;
}

.ai-sidebar-action-btn {
    padding: 4px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--secondary-text-color);
    transition: all .2s ease;
    cursor: pointer;
}

.ai-sidebar-action-btn:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

/* PREMIUM UX: Стили для мгновенной сортировки */
.ai-sidebar-action-btn.premium-sort-btn {
    position: relative;
    overflow: hidden;
    /* Убираем outline при фокусе, чтобы клик был чистым */
    outline: none;
}

/* Эффект физического вдавливания (Apple Taptic feel) */
.ai-sidebar-action-btn.premium-sort-btn:active {
    transform: scale(0.85);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--accent);
}

/* Fallback анимация для старых браузеров (если нет GSAP) */
.sort-pulse-active {
    transform: scale(0.8) !important;
    color: var(--accent) !important;
    transition: transform 0.1s ease, color 0.1s ease !important;
}

.ai-sidebar-divider {
    flex-shrink: 0;
    margin: 4px 8px;
    border-top: 1px solid var(--border-color);
}


#aiChatInput:disabled {
    background-color: var(--input-bg-color);
    cursor: not-allowed;
}

#aiChatInput:disabled::placeholder {
    color: var(--secondary-text-color);
}

.ai-color-legend-container {
    flex-shrink: 0;
    padding: 5px;
    background-color: var(--container-bg-color);
    border-top: 1px solid var(--border-color);
    border-radius: 0px 0px 12px 12px;
}

.ai-color-legend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-color-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 12px;
    background-color: var(--input-bg-color);
    font-size: .85em;
}

.legend-color-swatch {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #0000001a;
    border-radius: 50%;
}

.legend-text {
    color: var(--text-color);
}

.legend-edit-btn {
    display: flex;
    align-items: center;
    padding: 2px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.legend-edit-btn:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

.ai-color-legend-editor {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--dashed-border-color);
}

.legend-editor-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#aiLegendTextInput {
    flex-grow: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
}

.legend-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ai-chat-header-controls {
    flex-shrink: 0;
    gap: 5px;
}

.ai-chat-header .ai-color-legend-container::-webkit-scrollbar {
    height: 4px;
    background-color: transparent;
}

.ai-chat-header .ai-color-legend-container::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--border-color);
}

.ai-chat-header .ai-color-legend-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-text-color);
}

.ai-chat-header .ai-color-legend-container::-webkit-scrollbar {
    display: none;
}

.ai-chat-header .ai-color-legend-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#legendEditModalTitle .legend-color-swatch {
    width: 18px;
    height: 18px;
    border: 2px solid var(--container-bg-color);
    box-shadow: 0 0 0 1px var(--border-color);
}

@media (max-width: 600px) {
    .ai-chat-header {
        padding: 0px 5px;
    }

    .ai-chat-header h3 {
        font-size: 1em;
    }

    .ai-chat-header h3 i[data-lucide] {
        width: 18px;
        height: 18px;
    }

    .ai-chat-header .ai-color-legend-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .ai-chat-header .ai-color-legend-container {
    }

    .ai-chat-header .ai-color-legend-item {
        padding: 2px 6px;
        font-size: .75em;
    }

    .ai-chat-header .legend-color-swatch {
        width: 12px;
        height: 12px;
    }

    .ai-chat-header-controls .ai-chat-control-btn {
        padding: 3px;
    }

    .ai-chat-header-controls .ai-chat-control-btn i[data-lucide] {
        width: 16px;
        height: 16px;
    }
}

#aiTopicsView .ai-sidebar-section-header {
    margin-bottom: 8px;
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--border-color);
}

.ai-topics-breadcrumb {
    overflow: hidden;
    color: var(--text-color);
    font-size: .9em;
    font-weight: 500;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#aiBackToAudiencesBtn,
#aiNewTopicBtn {
    flex-shrink: 0;
}

.ai-message-container.is-model {
    min-width: 0;
}

.ai-message.model {
    max-width: 100%;
    overflow-wrap: break-word;
}


.ai-message.model th {
    background-color: var(--input-bg-color);
}

.ai-message.model pre {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow-x: auto;
    background-color: var(--input-bg-color);
    scrollbar-color: var(--border-color) transparent;
    scrollbar-width: thin;
    white-space: break-spaces;
}

.ai-message.model pre::-webkit-scrollbar {
    height: 6px;
}

.ai-message.model pre::-webkit-scrollbar-track {
    background: transparent;
}

.ai-message.model pre::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--border-color);
}

.ai-message.model pre::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-text-color);
}

.ai-message.model table {
    margin: 0em 0;
}

.ai-message.model th,
.ai-message.model td {
    border-bottom: 1px solid var(--border-color);
}

.ai-message.model th {
    background-color: var(--input-bg-color);
}


.ai-message-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform .2s ease;
    cursor: pointer;
    -webkit-touch-callout: none;
    object-fit: cover;
}

.ai-message-image:hover {
    transform: scale(1.05);
}

.grounded-icon-tooltip {
    position: fixed;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: .9em;
    line-height: 1.4;
    box-shadow: 0 4px 15px var(--shadow-color);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.grounded-icon-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.grounded-icon-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-color: var(--container-bg-color) transparent transparent;
    border-style: solid;
    border-width: 5px;
}

.grounded-icon-tooltip.tooltip-below::after {
    top: -10px;
    bottom: auto;
    border-color: transparent transparent var(--container-bg-color);
}


/* Здесь была unreadPulse — пульсация счётчика непрочитанных. На неё тоже
   ничто не ссылалось: счётчик рисуется без анимации. */


 
.katex {
    color: var(--text-color) !important;
}

.audience-settings-btn {
    margin-left: 8px;
    padding: 2px 5px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--secondary-text-color);
    font-size: 1.1em;
    opacity: .7;
    transition: opacity .2s ease, background-color .2s ease;
    cursor: pointer;
}

.audience-settings-btn:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

.moderator-management-section {
    margin-top: 20px;
    padding-top: 15px;
    text-align: left;
    border-top: 1px solid var(--dashed-border-color);
}

.moderator-management-section h4 {
    margin: 0 0 10px;
    color: var(--secondary-text-color);
    font-size: 1em;
    font-weight: 500;
}

.moderator-add-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.moderator-add-form .auth-input {
    flex-grow: 1;
    margin-bottom: 0;
}

.moderator-list {
    max-height: 150px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.moderator-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 8px 10px;
    border-radius: 5px;
    background-color: var(--input-bg-color);
}

.moderator-name {
    font-weight: 500;
}

.remove-moderator-btn {
    border: none;
    background: none;
    color: var(--accent);
    opacity: .7;
    transition: opacity .2s;
    cursor: pointer;
}

.remove-moderator-btn:hover {
    opacity: 1;
}

.ai-chat-history-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

#aiTestFromMessageModal .time-limit-wrapper {
    margin-top: 10px;
}

#aiTestFromMessageModal .time-limit-input-container {
    flex-shrink: 0;
}

#aiTestFromMessageModal .time-limit-wrapper .single-slider-container {
    position: relative;
    flex-grow: 1;
    width: 100%;
}

#aiTestFromMessageModal .time-limit-wrapper .range-input {
    width: 70px;
}

/* ✅ ИСПРАВЛЕНИЕ: Защита сетки. Изолируем инпут и ползунок друг от друга */
#aiTestFromMessageModal .time-limit-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

#aiTestFromMessageModal .time-limit-input-container {
    flex: 0 0 70px !important; /* Жесткая ширина для цифры */
}

/* Оформляем только само поле ввода, а не всю строку */
#aiTestFromMessageModal .time-limit-input-container input {
    width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: var(--input-bg-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

#aiTestFromMessageModal .single-slider-container {
    position: relative !important;
    flex: 1 1 auto !important; /* Заставляет слайдер занять всю оставшуюся ширину */
    height: 24px !important;
    display: block !important;
}

/* Отрисовка серой дорожки ("рельс"), которой не было */
#aiTestFromMessageModal .single-slider-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--border-color); 
    border-radius: 4px;
    transform: translateY(-50%);
    z-index: 0;
}

#aiTestFromMessageModal .single-slider-container input[type="range"] {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Красивый кружок ползунка */
#aiTestFromMessageModal .single-slider-container input[type="range"]::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    background: var(--accent) !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

#aiTestFromMessageModal #aiTestMsgSliderProgress {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    z-index: 1 !important;
    border-radius: 4px !important;
    background-color: var(--accent) !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

/* FIX: Выравнивание тумблеров и чекбоксов в модальных окнах */
.modal-content .settings-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--input-bg-color);
    border-radius: 12px;
    border: 1px solid transparent;
}

.modal-content .settings-group label {
    margin: 0 !important;
    font-size: 0.95em;
    line-height: 1.3;
    flex-grow: 1;
    color: var(--text-color);
}

/* Чтобы чекбокс не сплющило */
.modal-content .settings-group input[type="checkbox"] {
    flex-shrink: 0;
    width: 50px !important;
    height: 22px;
    margin: 0;
}

/* Для тумблеров (ai-toggle-switch) внутри модалок */
.modal-content .settings-group .ai-toggle-switch {
    flex-shrink: 0;
    margin: 0;
}

.settings-group .category-checkbox-label input[type="checkbox"] {
    margin: 0;
}

@keyframes highlight-new-item {
    0% {
        background-color: color-mix(in srgb, var(--accent) 15%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
    }

    50% {
        background-color: color-mix(in srgb, var(--accent) 25%, transparent);
        box-shadow: 0 0 12px 5px color-mix(in srgb, var(--accent) 50%, transparent);
    }

    100% {
        background-color: color-mix(in srgb, var(--accent) 15%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
    }
}


.main-actions-grid>.custom-file-upload-btn,
.main-actions-grid>#parserButton,
.main-actions-grid>#gradusButton,
.main-actions-grid>#visualTrainerButton,
.main-actions-grid>#coursesButton,
.main-actions-grid>#openNotesBtn,
#openNotesBtn,
.main-actions-grid>#roadmapButton,
.main-actions-grid>#errorsMarathonButton,
.main-actions-grid>#openMemoryPalaceBtn,
.main-actions-grid>#openFavoritesBtn,
.main-actions-grid>#openFeynmanRoomBtn,
.main-actions-grid>#openAnatomyAtlasBtn,
.main-actions-grid>#openHistologyBtn,
.main-actions-grid>#referralButton,
.main-actions-grid>#endlessModeButton {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 120px !important;
}

/* Эти 3 кнопки по умолчанию отображаются на ПК, но скрываются на телефонах */
.main-actions-grid>#toolsButton,
.main-actions-grid>#fitnessBtn,
.main-actions-grid>#gamesButton {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 120px !important;
}

@media (max-width: 768px) {
    .main-actions-grid>#toolsButton,
    .main-actions-grid>#fitnessBtn,
    .main-actions-grid>#gamesButton {
        display: none !important;
    }
}

@media (max-width: 400px) {
    }


.tip-part {
    display: inline;
}


@keyframes fadeInOut {

    0%,
    100% {
        opacity: 0;
    }

    10%,
    90% {
        opacity: 1;
    }
}


/* Блок «.ai-attachment-preview» с фиксированными 72×72 стоял здесь от
   прежнего оформления, когда предпросмотр был одной картинкой. Нынешний
   вариант — горизонтальная лента (объявлена ниже), и она переопределяла всё,
   кроме высоты. А высота вредила: при box-sizing: border-box из 72px за
   вычетом вертикальных отступов оставалось 60px под содержимое, миниатюры же
   ровно 64px, и overflow-y: hidden срезал им низ. Лента должна тянуться по
   содержимому, поэтому высоту здесь не задаём вовсе. */

.ai-attachment-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* === PREMIUM UX: ПАНЕЛЬ ВЛОЖЕНИЙ В ЧАТЕ === */
.ai-attachment-preview {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-bottom: 4px;
    /* Даем отступы сверху и снизу, чтобы крестики не обрезались */
    padding: 8px 4px 4px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Скрываем уродливый скроллбар, оставляем функционал */
    scrollbar-width: none; 
}

.ai-attachment-preview::-webkit-scrollbar {
    display: none;
}

.ai-attachment-preview-item {
    position: relative;
    flex-shrink: 0;
    /* Жестко задаем размер для картинок */
    width: 64px; 
    height: 64px;
    /* УБИРАЕМ overflow: hidden, чтобы крестик мог выступать за края */
    overflow: visible;
    /* Анимация появления */
    animation: popInAttachment 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: bottom center;
}

/* Анимация плавного удаления (добавится через JS) */
.ai-attachment-preview-item.removing {
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

@keyframes popInAttachment {
    0% { transform: scale(0.5) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.ai-attachment-preview-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    /* PREMIUM UX: Указатель лупы и плавная реакция на наведение */
    cursor: zoom-in;
    transition: filter 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Слегка затемняем картинку, чтобы показать, что она кликабельна */
.ai-attachment-preview-item:hover .ai-attachment-preview-thumbnail {
    filter: brightness(0.85);
}

.ai-attachment-preview-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    
    /* Frosted Glass Effect */
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s;
}

.ai-attachment-preview-remove-btn:hover {
    background-color: var(--button-danger-bg, #e74c3c);
    border-color: var(--button-danger-bg, #e74c3c);
    transform: scale(1.15);
}
.ai-attachment-preview-remove-btn:active {
    transform: scale(0.9);
}

/* Кнопка редактирования вложения в AI-чате (открывает универсальный fabric-редактор) */
.ai-attachment-preview-edit-btn {
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s;
}
.ai-attachment-preview-edit-btn i {
    width: 12px;
    height: 12px;
}
.ai-attachment-preview-edit-btn:hover {
    background-color: var(--accent-color, #007aff);
    border-color: var(--accent-color, #007aff);
    transform: scale(1.15);
}
.ai-attachment-preview-edit-btn:active {
    transform: scale(0.9);
}

.ai-message-attachments-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ai-message-attachment {
    position: relative;
}

.attachment-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background-color: #0009;
}

.attachment-loading-overlay .loading-spinner-small {
    width: 24px;
    height: 24px;
    border: 3px solid #ffffff4d;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    border-top-color: #fff;
}

.ai-message-attachments-grid .ai-message-attachment {
    margin-top: 0;
}

/* === КАСТОМНЫЙ АУДИО-ПЛЕЕР ГОЛОСОВЫХ В ИИ-ЧАТЕ (Telegram-style waveform) === */
.ai-voice-note-player {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 220px;
    max-width: 300px;
    padding: 4px 0;
    box-sizing: border-box;
    /* Без фона — плеер бесшовно сидит внутри пузыря сообщения */
}
.ai-voice-note-player audio { display: none; }

/* --- Кнопка Play / Pause --- */
.ai-vnp-play-btn {
    flex-shrink: 0;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent, #3498db);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(.4,0,.2,1), box-shadow 0.15s ease, background 0.2s ease;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent, #3498db) 40%, transparent);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.ai-message.user .ai-vnp-play-btn {
    background: var(--button-primary-text, #fff);
    color: var(--accent, #3498db);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.ai-vnp-play-btn:hover {
    box-shadow: 0 6px 15px color-mix(in srgb, var(--accent, #3498db) 60%, transparent);
    transform: scale(1.05);
}
.ai-message.user .ai-vnp-play-btn:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}
.ai-vnp-play-btn:active { transform: scale(0.93); }
.ai-vnp-play-btn .ai-vnp-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.ai-vnp-play-btn .ai-vnp-icon-play { opacity: 1; transform: translateX(1px) scale(1); }
.ai-vnp-play-btn .ai-vnp-icon-pause { opacity: 0; transform: scale(0.85); }
.ai-vnp-playing .ai-vnp-play-btn .ai-vnp-icon-play { opacity: 0; transform: scale(0.85); }
.ai-vnp-playing .ai-vnp-play-btn .ai-vnp-icon-pause { opacity: 1; transform: scale(1); }
/* Пульсация кнопки при воспроизведении */
.ai-vnp-playing .ai-vnp-play-btn {
    animation: vnpPulse 2s ease-in-out infinite;
}
@keyframes vnpPulse {
    0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color, #4f46e5) 40%, transparent); }
    50%      { box-shadow: 0 3px 18px color-mix(in srgb, var(--accent-color, #4f46e5) 55%, transparent); }
}

/* --- Тело: waveform + время --- */
.ai-vnp-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-right: 2px;
}

/* --- Waveform (имитация звуковой волны) --- */
.ai-vnp-waveform {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ai-vnp-waveform > span {
    flex: 1;
    min-width: 2px;
    min-height: 4px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--accent, #3498db) 55%, transparent);
    transition: background 0.15s ease, transform 0.15s ease;
}
.ai-message.user .ai-vnp-waveform > span {
    /* background: color-mix(in srgb, var(--button-primary-text, #fff) 55%, transparent); */
}
.ai-vnp-waveform > span.ai-vnp-bar-active {
    background: var(--accent, #3498db);
}
.ai-message.user .ai-vnp-waveform > span.ai-vnp-bar-active {
    /* background: var(--button-primary-text, #fff); */
}

/* --- Время --- */
.ai-vnp-time {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--secondary-text-color, #888);
    line-height: 1;
    letter-spacing: 0.02em;
    padding-left: 2px;
}
.ai-message.user .ai-vnp-time {
    color: var(--button-primary-text, #fff);
    opacity: 0.8;
}

/* --- Состояния --- */
.ai-vnp-loading {
    opacity: 0.45;
    pointer-events: none;
}
/* Тёмная тема — плеер адаптируется через css-переменные автоматически */

.ai-attachment-file-info {
    overflow: hidden;
}

.ai-attachment-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.ai-chat-search-container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1003;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    background-color: var(--container-bg-color);
    border-top: 1px solid var(--border-color);
}

#aiChatSearchInputGlobal {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: .95em;
    transition: all .2s ease;
    outline: none;
}

#aiChatSearchInputGlobal:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
    border-color: var(--accent-color);
}

#aiCloseSearchBtn {
    flex-shrink: 0;
}

.ai-chat-search-results {
    position: absolute;
    right: 0;
    bottom: calc(100% + 5px);
    left: 0;
    z-index: 1;
    max-height: 250px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow-y: auto;
    background-color: var(--container-bg-color);
    box-shadow: 0 -5px 20px var(--shadow-light-color);
}

.search-result-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--dashed-border-color);
    /* ОПТИМИЗАЦИЯ CPU/GPU: Не рендерим скрытые карточки поиска */
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: var(--input-hover-bg-color);
}

.search-result-title {
    margin-bottom: 4px;
    overflow: hidden;
    color: var(--text-color);
    font-size: .9em;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-results-empty {
    padding: 15px;
    color: var(--secondary-text-color);
    text-align: center;
    font-style: italic;
}

.search-result-snippet-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding-left: 15px;
}

.search-result-snippet {
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--secondary-text-color);
    font-size: .85em;
    line-height: 1.4;
    transition: background-color .2s;
    cursor: pointer;
}

.search-result-snippet:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

.search-result-snippet {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.search-result-snippet:focus,
.search-result-snippet:focus-visible,
.search-result-snippet:active {
    box-shadow: none !important;
    -moz-appearance: none;
    -webkit-appearance: none; appearance: none;
    appearance: none;
    outline: none !important;
}

.search-result-snippet.active-highlight {
    background-color: color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--text-color);
    font-weight: 500;
}

.search-highlight.temp-active {
    box-shadow: 0 0 8px 3px var(--accent);
    animation: highlight-fade-ai 1.5s ease-out;
}

.search-results-loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 40px 20px;
    color: var(--secondary-text-color);
    font-size: 1em;
}

.search-results-loader .loading-spinner {
    width: 30px;
    height: 30px;
    border-width: 3px;
}

.ai-message-container.is-user.has-color-indicator .ai-message.user {
    border-left-color: var(--user-message-color);
}

.ai-chat-share-btn,
.ai-chat-history-delete,
.copy-topic-btn {
    padding: 2px;
    border: none;
    background: none;
    color: var(--secondary-text-color);
    opacity: .6;
    transition: opacity 0.2s, color .2s;
    cursor: pointer;
}

.ai-chat-edit-btn {
    padding: 2px;
    border: none;
    background: none;
    color: var(--secondary-text-color);
    opacity: .6;
    transition: opacity 0.2s, color .2s;
    cursor: pointer;
}

.ai-chat-add-btn {
    padding: 2px;
    border: none;
    background: none;
    color: var(--secondary-text-color);
    opacity: .6;
    transition: opacity 0.2s, color .2s;
    cursor: pointer;
}

.ai-chat-history-item:hover .ai-chat-add-btn,
.ai-chat-folder-header:hover .ai-chat-add-btn {
    opacity: 1;
}

.ai-chat-add-btn:hover {
    color: var(--button-primary-bg);
}

.audience-select-list {
    max-height: 250px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow-y: auto;
    list-style: none;
}

.audience-select-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    transition: background-color .2s;
    cursor: pointer;
    border-bottom: 1px solid var(--dashed-border-color);
}

.audience-select-list li:last-child {
    border-bottom: none;
}

.audience-select-list li:hover {
    background-color: var(--input-hover-bg-color);
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: .6;
        transform: translateX(0);
    }
}


.sidebar-toggle-btn {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    margin-right: 6px;
}
.sidebar-toggle-btn:hover {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
}
.sidebar-toggle-btn i[data-lucide] {
    width: 20px;
    height: 20px;
}

/* ================================================================== */
/* === MICRO-INTERACTIONS: АНИМАЦИИ ИКОНОК В ТАБАХ ЧАТА           === */
/* ================================================================== */

/* Базовая анимация "рисования" линий SVG по контуру */
@keyframes drawLucideIcon {
    to { stroke-dashoffset: 0; }
}

/* 1. КАНАЛЫ (Хэш/Решетка) - Палочки чертятся по одной, формируя решетку */
.sidebar-tab-btn.active [data-lucide="hash"] line {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: drawLucideIcon 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.sidebar-tab-btn.active [data-lucide="hash"] line:nth-of-type(1) { animation-delay: 0.0s; }
.sidebar-tab-btn.active [data-lucide="hash"] line:nth-of-type(2) { animation-delay: 0.1s; }
.sidebar-tab-btn.active [data-lucide="hash"] line:nth-of-type(3) { animation-delay: 0.2s; }
.sidebar-tab-btn.active [data-lucide="hash"] line:nth-of-type(4) { animation-delay: 0.3s; }

/* 2. ЛИЧНЫЕ СООБЩЕНИЯ (Самолетик) - Плавный взлет + отрисовка контура */
@keyframes flyPlaneIn {
    0% { transform: translate(-5px, 5px) scale(0.8); opacity: 0; }
    50% { transform: translate(1px, -1px) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
.sidebar-tab-btn.active [data-lucide="send"] {
    animation: flyPlaneIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.sidebar-tab-btn.active [data-lucide="send"] path {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: drawLucideIcon 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Базовые физические анимации движения для человечков */
@keyframes popUpPerson {
    0% { transform: translateY(6px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideOutRightPerson {
    0% { transform: translateX(-8px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Спец-анимация для галочки: включает видимость и рисует контур */
@keyframes drawCheckmarkAnim {
    0% { stroke-dashoffset: 30; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

/* 3. ОНЛАЙН (Пользователь с галочкой) */
/* Тело (второй path) и Голова (circle) прыгают вместе */
.sidebar-tab-btn.active [data-lucide="user-check"] path:nth-of-type(2),
.sidebar-tab-btn.active [data-lucide="user-check"] circle {
    animation: popUpPerson 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Галочка (первый path) полностью скрыта со старта и рисуется потом */
.sidebar-tab-btn.active [data-lucide="user-check"] path:nth-of-type(1) {
    opacity: 0; 
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    /* Задержка 0.3s: ждем, пока человек закончит прыжок, затем резко показываем и рисуем */
    animation: drawCheckmarkAnim 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

/* 4. ПОЛЬЗОВАТЕЛИ (Группа) */
/* Первый (главный) человек всплывает снизу вверх */
.sidebar-tab-btn.active [data-lucide="users"] path:nth-of-type(1),
.sidebar-tab-btn.active [data-lucide="users"] circle:nth-of-type(1) {
    animation: popUpPerson 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
/* Второй человек (на заднем плане) выезжает из-за первого вправо */
.sidebar-tab-btn.active [data-lucide="users"] path:nth-of-type(2),
.sidebar-tab-btn.active [data-lucide="users"] path:nth-of-type(3),
.sidebar-tab-btn.active [data-lucide="users"] circle:nth-of-type(2) {
    opacity: 0; /* Скрываем изначально */
    /* Выезжает с задержкой 0.15s, используя пружинную физику */
    animation: slideOutRightPerson 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

/* 5. ЗВОНКИ (Трубка) - Встряска (имитация звонка) + прорисовка */
@keyframes ringPhone {
    0%, 100% { transform: rotate(0deg); }
    20%, 60% { transform: rotate(-15deg) scale(1.1); }
    40%, 80% { transform: rotate(15deg) scale(1.1); }
}
.sidebar-tab-btn.active [data-lucide="phone"] {
    transform-origin: center;
    animation: ringPhone 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}
.sidebar-tab-btn.active [data-lucide="phone"] path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawLucideIcon 0.5s ease-out forwards;
}

/* === DESKTOP: сворачиваемый сайдбар каналов/личных/онлайн === */
@media (min-width: 769px) {
    .advanced-chat-body.sidebar-collapsed .chat-grid-container {
        grid-template-columns: 0 1fr 0 !important;
    }
    .advanced-chat-body.sidebar-collapsed .chat-grid-container.info-panel-open {
        grid-template-columns: 0 1fr 400px !important;
    }
    .advanced-chat-body.sidebar-collapsed .chat-sidebar {
        width: 0 !important;
        min-width: 0 !important;
        border-right: none !important;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }
    .advanced-chat-body .chat-sidebar {
        transition: width .25s ease, opacity .2s ease;
    }
    .advanced-chat-body.sidebar-collapsed .sidebar-toggle-btn i[data-lucide] {
        transform: rotate(180deg);
    }
}

@media (max-width: 768px) {
    .sidebar-toggle-btn {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        padding: 0px;
        border: none;
        border-radius: 6px !important;
        background: none;
        color: var(--secondary-text-color);
        transition: all .2s ease;
        cursor: pointer;
        grid-column: 1 / 2;
    }

    .sidebar-toggle-btn:hover {
        background: var(--input-hover-bg-color);
        color: var(--text-color);
    }

    .sidebar-toggle-btn i[data-lucide] {
        width: 22px;
        height: 22px;
    }

    .advanced-chat-header .chat-title {
        grid-column: 2 / 3;
    }

    .advanced-chat-header .header-controls {
        grid-column: 3 / 4;
    }
}

@keyframes highlight-new-item {
    0% {
        background-color: color-mix(in srgb, var(--accent) 15%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
    }

    50% {
        background-color: color-mix(in srgb, var(--accent) 25%, transparent);
        box-shadow: 0 0 12px 5px color-mix(in srgb, var(--accent) 50%, transparent);
    }

    100% {
        background-color: color-mix(in srgb, var(--accent) 15%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
    }
}

.highlight-new-test {
    animation: highlight-new-item 2s ease-out;
}

#coursesArea,
#courseDetailArea,
#lessonViewArea {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    height: auto !important;
    overflow: visible !important; /* Разрешаем вылезать за пределы */
}

.courses-header {
    justify-content: space-between;
    align-items: center;
}

.courses-header h2 {
    text-align: left;
}

#createCourseBtn,
#createLessonBtn {
    border: none;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 500;
}


#saveLessonBtn {
    border: none;
    background: var(--button-success-bg);
    color: var(--button-primary-text);
    font-weight: 500;
}

#saveLessonBtn:hover {
    background-position: right center;
}

#coursesList,
#courseLessonsList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.course-item,
.lesson-item {
    padding: 15px 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    transition: all .2s ease-in-out;
    cursor: pointer;
    border-left: 4px solid var(--accent-color);
}


.block-handle {
    color: var(--secondary-text-color);
}


.block-handle {
    color: var(--secondary-text-color);
}

.block-actions {
    flex-direction: column;
}

.add-block-btn {
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.content-block-wrapper.is-empty .add-block-btn {
    opacity: 1;
}
/* показ по наведению — только там, где наведение есть: на телефоне :hover срабатывает в момент тапа */
@media (hover: hover) {
    .content-block-wrapper:hover .add-block-btn {
        opacity: 1;
    }
}

.block-actions button {
    color: var(--secondary-text-color);
}

.block-actions button:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}


.content-block-wrapper.dragging {
    background: var(--input-hover-bg-color);
}

.drag-placeholder {
    background-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.lesson-content-container {
    -webkit-overflow-scrolling: touch;
}


.content-block:focus {
    background-color: var(--input-hover-bg-color);
}

.content-block[data-placeholder]:empty:before {
    color: var(--secondary-text-color);
}


.content-block h2 {
    color: var(--heading-color);
}

.content-block h3 {
    color: var(--text-color);
}

.add-block-menu {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    box-shadow: 0 5px 20px var(--shadow-color);
}


.add-block-item:hover {
    background-color: var(--input-hover-bg-color);
}

.add-block-item i {
    color: var(--secondary-text-color);
}

.add-block-item-text strong {
    color: var(--text-color);
}

.add-block-item-text span {
    color: var(--secondary-text-color);
}


.item-actions button {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.item-actions button:hover {
    background: var(--button-secondary-hover-bg);
}


.content-block[data-type="image"],
.content-block[data-type="video"] {
    padding: 0px 0;
}


.content-block hr {
    border-top: 1px solid var(--border-color);
}


.test-block-filename {
    color: var(--text-color);
}

.test-block-viewer {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}


.ai-tools-menu {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    box-shadow: 0 4px 15px var(--shadow-color);
}

.ai-tools-menu button {
    color: var(--text-color);
}

.ai-tools-menu button:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}


.lesson-viewer .content-block {
    padding: 2px 0;
}

.lesson-viewer .content-block-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

.lesson-viewer .content-block h2 {
    margin-top: 1.5em;
    margin-bottom: .5em;
    padding-bottom: .3em;
    border-bottom: 1px solid var(--border-color);
}

.lesson-viewer .content-block:first-child h2 {
    margin-top: 0;
}

@media (min-width: 800px) {

    .ai-chat-scroll-wrapper,
    .ai-chat-input-area,
    .ai-chat-search-container,
    .ai-chat-search-results {
        width: 98%;
        max-width: 800px;
        margin-right: auto;
        margin-left: auto;
    }

    .ai-chat-modal-content.expanded .ai-chat-scroll-wrapper,
    .ai-chat-modal-content.expanded .ai-chat-input-area {
        max-width: 1000px;
    }
}

#coursesList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 20px;
}


.course-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--neumorph-shadow-soft);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
    /* ENTERPRISE OPTIMIZATION: Hardware Acceleration + Layout Isolation */
    transform: translateZ(0); 
    backface-visibility: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    contain: layout paint style; 
}
.course-card:hover {
    will-change: transform, box-shadow;
}

/* PREMIUM UX: Парение карточки курса */
/* APP STORE TIER: Объемная подсветка краев (Inner Edge Highlight) */
.course-card:hover {
    box-shadow: 
        0 20px 40px -10px rgba(0,0,0,0.15),
        0 5px 15px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.4); /* Внутренний блик сверху */
    transform: translateY(-6px) scale(1.01);
    border-color: var(--accent);
}
/* PREMIUM UX: Вдавливание при клике */
.course-card:active,
.deck-card:active,
.dataset-card:active,
.program-card:active,
.library-deck-card:active {
    transform: scale(0.97) translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s ease;
}

/* Картинка лежит поверх заглушки, а не следом за ней.
   Обе были в обычном потоке по 100% высоты карточки, то есть вставали друг
   под другом: заглушка занимала весь видимый квадрат, картинка оказывалась
   ниже нижнего края и обрезалась overflow:hidden. Снаружи это выглядело так,
   будто обложек у курсов нет вовсе — хотя они грузились. */
.course-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.2s ease;
    /* ОПТИМИЗАЦИЯ VRAM: Замена перманентного will-change на аппаратный хак */
    transform: translateZ(0);
    object-fit: cover;
}

.course-card:hover .course-card-image {
    filter: brightness(1.1);
}

.course-card-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 15px;
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-size: 1.1em;
    font-weight: 500;
    text-align: center;
}
.course-card-fallback svg {
    width: 34px;
    height: 34px;
    opacity: 0.35;
}

.course-card-title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 25px 15px 15px;
    /* PREMIUM UX: Text-Frosting. Градиент + Блюр = идеальная читаемость */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 0%, transparent 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    text-shadow: 0 2px 3px rgb(0 0 0 / 90%);
}

/* Отключаем тяжелое стекло на слабых устройствах */
body.low-power .course-card-title {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(to top, #000e 0%, #000a 60%, transparent 100%);
}


.courses-header-actions button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    gap: 8px;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.courses-header-actions button:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
    transform: translateY(-1px);
    border-color: var(--input-hover-border-color);
}

#createCourseBtn,
#createLessonBtn,
#saveLessonBtn {
    border: none;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

#saveLessonBtn {
    background: var(--button-success-bg);
}

#createCourseBtn:hover,
#createLessonBtn:hover {
    border: none;
    background-position: right center;
}

#saveLessonBtn:hover {
    border: none;
    background-color: var(--button-success-hover-bg);
}

#toggleViewModeBtn.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: transparent;
}

.content-block-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 0;
}

.block-handle {
    flex-shrink: 0;
    padding-left: 4px;
    color: var(--secondary-text-color);
    opacity: .4;
    transition: opacity .2s ease-in-out;
}

.block-actions {
    display: flex;
    flex-shrink: 0;
    padding-right: 4px;
    opacity: .4;
    transition: opacity .2s ease-in-out;
}


.block-actions button i {
    width: 16px;
    height: 16px;
}


.content-block-wrapper:hover .block-handle,
.content-block-wrapper:hover .block-actions {
    opacity: 1;
}

.content-block {
    flex-grow: 1;
    min-width: 0;
}

.block-handle {
    left: 4px;
    color: var(--secondary-text-color);
    cursor: grab;
}

.block-actions {
    right: 4px;
    gap: 4px;
}

.block-actions button {
    padding: 4px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.block-actions button:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

.lesson-editor .content-block {
    margin-left: 0;
}

.content-block-wrapper.dragging {
    background: var(--input-hover-bg-color);
    opacity: .5;
}

.drag-placeholder {
    margin: 4px 0;
    background-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.lesson-content-container {
    flex-grow: 1;
    padding: 10px;
    padding-top: 20px;
    /* ВАЖНО: Добавляем огромный отступ снизу (30% высоты экрана).
       Это позволяет последнему абзацу прокрутиться выше и сработать анимации. */
    padding-bottom: 40vh !important; 
    overflow-y: visible !important;
    font-size: 1.1em;
    line-height: 1.6;
    cursor: text;
    -webkit-overflow-scrolling: touch;
}

.content-block {
    min-height: 1.6em;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color .2s;
}

.content-block:focus {
    background-color: var(--input-hover-bg-color);
    outline: none;
}

.content-block[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    display: block;
    color: var(--secondary-text-color);
    opacity: .6;
    pointer-events: none;
}

.content-block h2,
.content-block h3 {
    margin: 1em 0 .5em;
    font-weight: 600;
    line-height: 1.3;
}

.content-block h2 {
    color: var(--heading-color);
    font-size: 1.5em;
}

.content-block h3 {
    color: var(--text-color);
    font-size: 1.25em;
}

.add-block-menu {
    position: absolute;
    z-index: 100;
    width: 300px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    box-shadow: 0 5px 20px var(--shadow-color);
    transition: top .1s ease-out, left .1s ease-out;
    animation: fadeIn .1s ease-out;
}

.add-block-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    transition: background-color .15s;
    cursor: pointer;
}

.add-block-item:hover {
    background-color: var(--input-hover-bg-color);
}

.add-block-item i {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--secondary-text-color);
}

.add-block-item-text strong {
    display: block;
    color: var(--text-color);
    font-weight: 500;
}

.add-block-item-text span {
    color: var(--secondary-text-color);
    font-size: .85em;
}


.item-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    opacity: 1;
    transition: opacity .2s ease-in-out;
}

.item-actions button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.item-actions button:hover {
    background: var(--button-secondary-hover-bg);
}

.item-actions button i {
    width: 16px;
    height: 16px;
}


.content-block img {
    display: block;
    max-width: 100%;
    border-radius: 8px;
}

.video-wrapper {
    aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.content-block[data-type="hr"] {
    min-height: 0;
    padding: 15px 0;
}

.content-block hr {
    border: none;
    border-top: 1px solid var(--border-color);
}

.content-block[data-type="quote"] blockquote {
    margin: 0;
    padding: 4px 0 4px 15px;
    color: var(--secondary-text-color);
    border-left: 3px solid var(--accent-color);
    font-style: italic;
}

.content-block[data-type="callout"] {
    padding: 0;
}

.callout-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.callout-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.callout-icon i {
    width: 20px;
    height: 20px;
}

.callout-content {
    flex-grow: 1;
    min-width: 0;
}

.content-block[data-type="test"] {
    padding: 0;
}

.test-block-editor,
.test-block-viewer {
    border-radius: 8px;
    transition: background-color .2s;
}


.test-block-filename {
    color: var(--text-color);
    font-weight: 500;
}

.test-block-viewer {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border: none;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-size: 1.1em;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.test-block-viewer:hover {
    background-position: right center;
}

.ai-tools-menu {
    position: absolute;
    z-index: 101;
    display: flex;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--container-bg-color);
    box-shadow: 0 4px 15px var(--shadow-color);
    animation: fadeIn .1s ease-out;
}

.ai-tools-menu button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text-color);
    font-size: 18px;
    line-height: 1;
    transition: all .2s;
    cursor: pointer;
}

.ai-tools-menu button:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

.ai-tools-menu i {
    width: 18px;
    height: 18px;
}

#courseAccessModal .settings-group {
    border-bottom: 1px solid var(--dashed-border-color);
}

#courseAccessModal .settings-group:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.key-generation-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.key-generation-form .range-input {
    width: 80px;
}

.key-generation-form select {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
}

.access-keys-table-container {
    max-height: 300px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow-y: auto;
}

.access-keys-table-container table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
}

.access-keys-table-container th,
.access-keys-table-container td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--dashed-border-color);
}

.access-keys-table-container th {
    position: sticky;
    top: 0;
    background-color: var(--input-bg-color);
    font-weight: 500;
}

.access-keys-table-container tbody tr:last-child td {
    border-bottom: none;
}


@media (max-width: 600px) {
    .key-generation-form {
        flex-direction: column;
        align-items: stretch;
    }

    .key-generation-form .range-input,
    .key-generation-form select {
        width: 100%;
    }

    /* Карточка ключа вместо колонки «подпись — значение».
       Раньше каждая из пяти ячеек становилась отдельной строкой с
       разделителем: один ключ занимал полэкрана, и в окно помещалось
       полтора ключа. Между тем читают здесь ровно две вещи — сам ключ и
       свободен ли он. Их и ставим первой строкой, остальное мелким шрифтом
       под ними. */
    .access-keys-table-container thead {
        display: none;
    }

    .access-keys-table-container tr {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "key   key    status"
            "who   left   actions";
        align-items: center;
        gap: 5px 12px;
        margin-bottom: 8px;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--input-bg-color);
    }

    .access-keys-table-container td {
        display: block;
        padding: 0;
        border: none;
        text-align: left;
    }

    /* Ключ — главное в карточке: моноширинный, его сверяют глазами */
    .access-keys-table-container td:nth-child(1) {
        grid-area: key;
        font-family: ui-monospace, "SF Mono", Consolas, monospace;
        font-size: .92em;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .access-keys-table-container td:nth-child(2) {
        grid-area: status;
        text-align: right;
        white-space: nowrap;
    }

    /* «Активировал» и «Осталось дней» — уточнения, идут второй строкой
       рядом друг с другом, каждое в своей колонке сетки. */
    .access-keys-table-container td:nth-child(3),
    .access-keys-table-container td:nth-child(4) {
        color: var(--secondary-text-color);
        font-size: .78em;
        white-space: nowrap;
    }
    .access-keys-table-container td:nth-child(3) { grid-area: who; }
    .access-keys-table-container td:nth-child(4) { grid-area: left; }

    .access-keys-table-container td:nth-child(3)::before,
    .access-keys-table-container td:nth-child(4)::before {
        content: attr(data-label) " ";
        opacity: .75;
    }

    
    /* «Загрузка» и «ключей нет» — не карточка ключа, сетка им не нужна */
    }

.auth-required-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding: 40px 20px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    text-align: center;
}

.auth-required-placeholder p {
    max-width: 400px;
    margin: 0;
    color: var(--secondary-text-color);
    font-size: 1.1em;
}

.auth-required-placeholder .btn {
    padding: 10px 25px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 500;
}

.auth-required-placeholder .btn:hover {
    background-position: right center;
}


@media (max-width: 768px) {
    .content-block-wrapper {
        padding-right: 5px;
        padding-left: 0px;
    }

    .block-handle {
        left: 0;
    }

    .block-handle i {
        width: 18px;
        height: 18px;
    }

    .block-actions button {
        padding: 2px;
    }

    .block-actions i {
        width: 8px;
        height: 8px;
    }
}

.lesson-viewer .image-block-container.img-size-full,
.lesson-editor .image-block-container.img-size-full {
    width: calc(100% + 20px);
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 768px) {

    .lesson-viewer .image-block-container.img-size-full,
    .lesson-editor .image-block-container.img-size-full {
        width: calc(100% + 0px);
        margin-right: -30px;
        margin-left: -30px;
    }
}

.lesson-viewer .image-block-container.img-size-small,
.lesson-editor .image-block-container.img-size-small,
.lesson-viewer .image-block-container.img-size-medium,
.lesson-editor .image-block-container.img-size-medium {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

.lesson-content-container.view-mode .block-handle,
.lesson-content-container.view-mode .block-actions {
    display: none;
}

.lesson-content-container.view-mode {
    cursor: default;
}

.lesson-content-container.view-mode .content-block:focus {
    background-color: transparent;
}

.lesson-viewer .block-handle,
.lesson-viewer .block-actions {
    display: none;
}

/* ==== 3D-АТЛАС В УРОКАХ ==== */
/* Кликабельный анатомический термин в тексте урока */
.atlas-term {
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 3px;
    padding: 0 1px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.atlas-term::after {
    content: "\2022"; /* деликатная точка-маркер «есть 3D» */
    font-size: 0.6em;
    vertical-align: super;
    margin-left: 2px;
    opacity: 0.6;
}
.atlas-term:hover {
    background-color: color-mix(in srgb, var(--accent) 15%, transparent);
    text-decoration-style: solid;
}

/* Кнопка «Открыть 3D-атлас» над уроком */
.lesson-atlas-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 30px 18px;
    padding: 9px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, var(--container-bg-color));
    color: var(--accent);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.lesson-atlas-open-btn:hover {
    background: color-mix(in srgb, var(--accent) 18%, var(--container-bg-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--shadow-color);
}
.lesson-atlas-open-btn i,
.lesson-atlas-open-btn svg { width: 18px; height: 18px; }

/* Активная кнопка привязки атласа в тулбаре редактора */
#lessonAtlasSettingsBtn.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 8px;
}

/* Кнопка привязки атласа к папке-главе */
.atlas-folder-btn { color: var(--secondary-text-color); cursor: pointer; }
.atlas-folder-btn.atlas-attached { color: var(--accent); }

/* Кнопка «Редактировать урок» в шапке просмотра (для владельца) */
.lesson-enter-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 12%, var(--container-bg-color));
    color: var(--accent);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.lesson-enter-edit-btn:hover { background: color-mix(in srgb, var(--accent) 20%, var(--container-bg-color)); transform: translateY(-1px); }
.lesson-enter-edit-btn i, .lesson-enter-edit-btn svg { width: 18px; height: 18px; }

/* Микроинтеракция: copy → check с пружинным «поп» */
.copy-check-morph {
    color: var(--button-success-bg, #28a745) !important;
    animation: copyCheckPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes copyCheckPop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .copy-check-morph { animation: none; } }

/* Микроинтеракция: полоса прогресса чтения урока */
#lessonReadingProgress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    z-index: 100060;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--accent, #e74c3c), color-mix(in srgb, var(--accent, #e74c3c) 60%, #fff));
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    will-change: transform;
}
#lessonReadingProgress.visible { opacity: 1; }

/* Микроинтеракция: волна в точке касания по атлас-термину */
.atlas-tap-ripple {
    position: fixed;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--accent, #e74c3c);
    pointer-events: none;
    z-index: 100070;
    opacity: 0.55;
    transform: scale(0);
    animation: atlasTapRipple 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes atlasTapRipple {
    to { transform: scale(6.5); opacity: 0; }
}

/* Панель выбора структуры (picker) поверх полноэкранного атласа */
.anatomy-picker-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000001; /* выше атласа (999999) */
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(13, 13, 26, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.5);
}
.anatomy-picker-bar .apick-label {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    font-size: 0.9rem;
    opacity: 0.9;
}
.anatomy-picker-bar .apick-actions { display: flex; gap: 8px; flex-shrink: 0; }
.anatomy-picker-bar .apick-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}
.anatomy-picker-bar .apick-cancel {
    background: transparent;
    color: rgba(255,255,255,0.8);
}
.anatomy-picker-bar .apick-confirm {
    background: var(--accent, #e74c3c);
    border-color: var(--accent, #e74c3c);
    color: #fff;
}
.anatomy-picker-bar .apick-btn:active { transform: scale(0.96); }

/* Поповер выбора системы атласа */
.atlas-attach-popover {
    position: fixed;
    z-index: 100000;
    min-width: 230px;
    max-width: min(300px, 90vw);
    padding: 8px;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 40px var(--shadow-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: atlasAttachIn 0.16s ease;
}
@keyframes atlasAttachIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.atlas-attach-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-color);
    opacity: 0.65;
    padding: 6px 8px 8px;
}
.atlas-attach-option {
    text-align: left;
    padding: 9px 10px;
    border: none;
    background: transparent;
    color: var(--text-color);
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.atlas-attach-option:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.atlas-attach-option.selected {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    font-weight: 600;
}
/* Несколько систем: галочка у каждой отмеченной */
.atlas-attach-hint { font-size: 0.78rem; color: var(--secondary-text-color); padding: 0 10px 6px; }
/* Кнопка перевода в микроскопе: пока идёт работа — с мигающей точкой */
#histologyTransBtn.working { opacity: 0.75; cursor: progress; }
#histologyTransBtn.working::before {
    content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
    border-radius: 50%; background: currentColor; vertical-align: middle;
    animation: histTrans 1s ease-in-out infinite;
}
@keyframes histTrans { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.atlas-attach-multi { display: flex; align-items: center; gap: 10px; }
.atlas-attach-check {
    width: 16px; height: 16px; flex: 0 0 16px; border-radius: 5px;
    border: 1.5px solid color-mix(in srgb, var(--text-color) 40%, transparent);
    position: relative;
}
.atlas-attach-multi.selected .atlas-attach-check { background: var(--accent); border-color: var(--accent); }
.atlas-attach-multi.selected .atlas-attach-check::after {
    content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.atlas-attach-done {
    margin: 6px 4px 0; padding: 9px 10px; border-radius: 8px; border: none;
    background: var(--accent); color: #fff; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}

@media (max-width: 767px) {
    body.lesson-view-active .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    /* Свёрнутый язычок тулбара (float:right) прижимается к правому краю
       .container, а у того на мобильном padding-right:15px — из-за этого
       язычок «висел в воздухе» с отступом от кромки экрана. Отрицательным
       margin-right вытягиваем его ровно на край. */
    .lesson-toolbar.collapsed {
        margin-right: -15px !important;
    }

    body.lesson-view-active .lesson-content-container {
        padding-right: 1px;
        padding-left: 1px;
    }

    body.lesson-view-active .lesson-content-container .content-block {
        padding-right: 0;
        padding-left: 0;
    }
}

body.dark-mode .lesson-content-container a,
body.synthwave-mode .lesson-content-container a {
    color: var(--accent-color);
    text-decoration: underline;
}

body.dark-mode .lesson-content-container strong,
body.dark-mode .lesson-content-container b,
body.synthwave-mode .lesson-content-container strong,
body.synthwave-mode .lesson-content-container b {
    color: var(--text-color);
}

.page-break-editor-block {
    margin: 20px 0;
    padding: 10px;
    color: var(--secondary-text-color);
    font-size: .9em;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    user-select: none;
    border-bottom: 2px dashed var(--border-color);
    border-top: 2px dashed var(--border-color);
}

.lesson-page-navigation {
    flex-wrap: wrap;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-weight: 500;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.pagination-btn:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--accent-color);
}

.pagination-btn.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
}

.pagination-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.image-upload-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.image-upload-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    color: var(--secondary-text-color);
    font-weight: 500;
    text-align: center;
    transition: all .2s;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.image-upload-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.image-upload-tab-content {
    display: none;
}

.image-upload-tab-content.active {
    display: block;
}

.cover-image-preview {
    display: block;
    max-width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    object-fit: cover;
}

.upload-button-wrapper {
    margin-top: 10px;
}

.custom-file-upload-btn-small {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 5px;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-weight: 500;
    cursor: pointer;
}

.image-block-container {
    /* width: 100%; */
    padding: 0px 0;
    /* ENTERPRISE UX FIX: Жесткий сброс дефолтных 40px от <figure> */
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


.image-block-container.img-align-left {
    text-align: left;
}

.image-block-container.img-align-center {
    text-align: center;
}

.image-block-container.img-align-right {
    text-align: right;
}

.image-block-container img {
    display: inline-block;
    max-width: 95%;
    border-radius: 8px;
    vertical-align: middle;
    box-shadow: var(--neumorph-shadow-soft);
}

.image-block-container.img-size-small img {
    width: 33.33%;
}

.image-block-container.img-size-medium img {
    width: 66.66%;
}

.image-block-container.img-size-full img {
    width: 100%;
}

.image-caption {
    display: block;
    margin-top: 8px;
    color: var(--secondary-text-color);
    font-size: .9em;
    text-align: center;
}

.image-settings-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.image-settings-controls button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

.image-settings-controls button i {
    width: 18px;
    height: 18px;
}

.image-settings-controls .btn-secondary-small.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
}

.btn-ai {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    background: linear-gradient(135deg, #6c5ce7, #8e44ad);
    color: #fff;
}

.btn-ai:hover {
    background-position: right center;
}

#aiLessonGeneratorModal select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: 1em;
}

.custom-file-upload-label {
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

#youtubeSrtSteps a,
#youtubeSrtSteps label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.lesson-timestamp {
    position: relative;
    z-index: 5;
    margin: 0;
    padding: 0 2px;
    border-radius: 3px;
    color: inherit;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
    cursor: pointer;
    border-bottom: 1px dotted var(--secondary-text-color);
}

.lesson-timestamp:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
    border-bottom-color: transparent;
}

.lesson-timestamp.active-timestamp {
    background-color: transparent !important;
    color: #000 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    text-shadow: none !important;
}


.floating-video-container {
    position: -webkit-sticky; /* Чтобы быть поверх текста */
    margin: 0 10px 15px;
    background-color: #000; /* Черный фон, чтобы текст не просвечивал под видео при скролле */
    box-shadow: 0 8px 25px var(--shadow-color);
    animation: fadeIn .3s ease;
}

@media (max-width: 767px) {
    .floating-video-container {
        margin-right: 0;
        margin-left: 0;
        border-radius: 0;
    }
}

.lesson-content-container .content-block[data-type="table"] {
    padding: 0;
}

.lesson-content-container table {
    width: 100%;
    margin: 1em 0;
    font-size: .95em;
    border-collapse: collapse;
}

.lesson-content-container td,
.lesson-content-container th {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.lesson-content-container table tr:first-child td {
    background-color: var(--input-bg-color);
    font-weight: 600;
}

.lesson-content-container table tbody tr:nth-child(even) {
    background-color: var(--input-hover-bg-color);
}

.lesson-editor .content-block td.selected-cell,
.lesson-editor .content-block th.selected-cell {
    outline: none;
}

.table-dimension-inputs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 25px;
    padding: 15px;
    border-radius: 8px;
    background-color: var(--input-bg-color);
}

.table-dimension-inputs>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.table-dimension-inputs label {
    color: var(--secondary-text-color);
    font-weight: 500;
}

.ai-message.model .table-wrapper {
    border: none;
    border-radius: 12px;
    /* background-color: var(--input-bg-color); */
    box-shadow: var(--neumorph-shadow-inset);
    scrollbar-color: var(--border-color) transparent;
    scrollbar-width: thin;
}

.ai-message.model .table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.ai-message.model .table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.ai-message.model .table-wrapper::-webkit-scrollbar-thumb {
    border: 2px solid var(--input-bg-color);
    border-radius: 4px;
    background-color: var(--border-color);
}

.ai-message.model .table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-text-color);
}

.ai-message.model table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ai-message.model th,
.ai-message.model td {
    padding: 5px 5px;
    text-align: start;
    border-bottom: 1px solid var(--border-color);
    vertical-align: sub;
}


.ai-message.model thead tr {
    border-bottom: 2px solid var(--border-color);
}

.ai-message.model th {
    color: var(--heading-color);
    font-weight: 600;
    border-bottom: none;
}

.ai-message.model tbody tr:nth-child(even) {
    background-color: var(--zebra-stripe-color);
}

.ai-message.model tbody tr:last-child td {
    border-bottom: none;
}

.table-scroll-container {
    overflow-x: auto;
    scrollbar-color: var(--border-color) transparent;
    scrollbar-width: thin;
}

.table-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.table-scroll-container::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--border-color);
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-text-color);
}

#aiLessonGeneratorModal .settings-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

#aiLessonGeneratorModal .settings-group label input[type="checkbox"] {
    margin: 0;
}

.user-status-info {
    padding: 10px 16px;
    font-size: .9em;
    border-bottom: 1px solid var(--border-color);
}

.user-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: 500;
}

.user-status-badge {
    padding: 2px 5px;
    border-radius: 12px;
    font-size: .7em;
    font-weight: 700;
}

.user-status-badge.standard {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.user-status-badge.pro {
    position: relative;
    overflow: hidden;
    background-color: var(--button-success-bg);
    color: var(--button-primary-text);
    /* Задаем контекст для блика */
    isolation: isolate;
}

/* ENTERPRISE UX: Linear-style Holographic Shine (Голографический блик для PRO) */
.user-status-badge.pro::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: proBadgeShine 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes proBadgeShine {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; } /* Пауза между бликами */
}

.user-status-limits {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--secondary-text-color);
}

.limit-item {
    display: flex;
    justify-content: space-between;
}

.limit-item .unlocked {
    color: var(--button-success-bg);
    font-weight: 500;
}

.limit-item .locked {
    color: var(--accent);
    font-weight: 500;
}

.user-status-limits .limit-item:nth-child(odd) {
    border-radius: 4px;
    background-color: var(--zebra-stripe-color);
}

.user-status-limits .limit-item {
    padding: 4px 8px;
}

.limit-item.vertical-limit {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.limit-item.vertical-limit .limit-value {
    width: 100%;
    margin-top: 2px;
    color: var(--text-color);
    font-size: .9em;
    font-weight: 600;
    text-align: right;
}

/* ENTERPRISE UX: Apple Intelligence Glowing Selection */
::selection {
    background-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: inherit; /* Оставляем родной цвет текста */
    /* Текст начинает мягко светиться акцентным цветом изнутри выделения */
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Исключение для темных тем (чуть плотнее фон) */
body.dark-mode ::selection,
body.synthwave-mode ::selection,
body.oled-mode ::selection {
    background-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

body.claude-mode ::selection {
    background-color: color-mix(in srgb, #DC6B19 35%, transparent);
}

/* === Иконки-замена эмодзи в заголовках (lucide вместо эмодзи в тексте) ===
   Эмодзи в переводимых строках ломались в mojibake и не анимировались.
   Заменяем их на lucide-иконку рядом с текстом и даём лёгкую живую анимацию. */
.lang-emoji-icon {
    display: inline-block;
    vertical-align: -0.15em;
    width: 1.05em;
    height: 1.05em;
    margin-right: 0.35em;
    color: var(--accent, #3498db);
    flex-shrink: 0;
    animation: langEmojiIconIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: center;
}
.lang-emoji-icon svg { width: 100%; height: 100%; }

/* Появление: иконка мягко «влетает» с лёгким оверширутом */
@keyframes langEmojiIconIn {
    0%   { opacity: 0; transform: scale(0.3) rotate(-12deg); }
    100% { opacity: 1; transform: scale(1)   rotate(0deg); }
}

/* Постоянная деликатная пульсация, чтобы значок «жил» без назойливости */
@keyframes langEmojiIconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}
.lang-emoji-icon.pulse {
    animation: langEmojiIconIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               langEmojiIconPulse 2.8s ease-in-out 0.6s infinite;
}
@media (prefers-reduced-motion: reduce) {
    .lang-emoji-icon, .lang-emoji-icon.pulse { animation: none; }
}

.callout-container ::selection,
blockquote ::selection {
    background-color: color-mix(in srgb, var(--text-color) 20%, transparent);
}

.lesson-toolbar {
    border: 1px solid var(--border-color);
    background-color: color-mix(in srgb, var(--container-bg-color) 80%, transparent);
    box-shadow: 0 4px 15px var(--shadow-light-color);
    -webkit-backdrop-filter: blur(8px);
}

.lesson-toolbar button {
    color: var(--secondary-text-color);
    opacity: 1;
}

.lesson-toolbar button:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

.lesson-toolbar button.active {
    border: 1px solid color-mix(in srgb, var(--text-color) 50%, transparent);
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

.lesson-toolbar button i {
    width: 20px;
    height: 20px;
}

.lesson-toolbar.collapsed {
    background-color: color-mix(in srgb, var(--container-bg-color) 60%, transparent) !important;
    box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent-color) 40%, transparent) !important; /* Оставляем ровно на краю */
}


#toolbarToggleBtn {
    display: flex !important;
}


.lesson-toolbar.collapsed:hover {
    background-color: color-mix(in srgb, var(--container-bg-color) 80%, transparent);
}

body.video-hidden-mode:not(.two-page-mode-active) #floatingVideoContainer {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1024px) {
    #toolbarToggleBtn {
        display: flex !important;
    }

    .lesson-toolbar {
        transition: transform .3s ease-in-out, opacity .3s ease-in-out;
    }

    .lesson-toolbar.collapsed {
        transform: translateY(-50%) translateX(0) !important;
    }

    .lesson-toolbar.collapsed button:not(#toolbarToggleBtn) {
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        border: none;
        opacity: 0;
        pointer-events: none;
    }

    .lesson-toolbar #toolbarToggleBtn i {
        transition: transform .3s ease-in-out;
    }

    
    }

.container {
    transition: max-width .4s ease-in-out;
}

@media (min-width: 992px) {
    body.large-video-mode .container {
        max-width: 1200px;
    }

    body.large-video-mode .lesson-content-container {
        max-width: 700px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* =================================================== */
/* ИСПРАВЛЕНИЕ: СМАРТФОНЫ В ГОРИЗОНТАЛЬНОМ ПОЛОЖЕНИИ   */
/* Видео обтекается текстом (Float) + Колонки          */
/* =================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    
    /* 1. Снимаем Flexbox-ограничения, чтобы заработало обтекание */
    body .lesson-body-container,
    body .lesson-content-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. Встраиваем видео слева и заставляем текст его обтекать */
    body #floatingVideoContainer {
        
        /* Сброс старых координат */
        top: auto !important;
        z-index: 10 !important;
        width: 280px !important;       /* Ширина видео */
        max-width: 45vw !important;    /* Защита для узких экранов */
        margin: 0 15px 10px 0 !important; /* Отступы: справа и снизу от текста */
        border-radius: 12px !important;
        background-color: #000 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        /* position: relative !important; */ /* Убираем залипание */
        /* float: left !important; */        /* Магия обтекания текстом */
        /* bottom: auto !important; */
        /* left: auto !important; */
        /* right: auto !important; */
    }

    /* 3. Растягиваем плеер внутри контейнера */
    body #floatingVideoContainer .video-wrapper,
    body #floatingVideoContainer .video-wrapper iframe {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }

    /* 4. Настройки самого текста */
    body .lesson-content-container {
        width: 100% !important;
        max-height: none !important; 
        padding-right: 60px !important;  /* Отступ для кнопок меню справа */
        padding-bottom: 50px !important; 
        overflow-x: hidden !important;
    }

    /* 5. ДВУХСТРАНИЧНЫЙ РЕЖИМ (Как на Скрине 3) */
    body.two-page-mode-active .lesson-content-container {
        column-count: 2 !important;
        column-gap: 30px !important;
        column-rule: 1px solid var(--border-color, #eee) !important;
    }

    /* 6. ОДНОСТРАНИЧНЫЙ РЕЖИМ (Как на Скрине 2) */
    body:not(.two-page-mode-active) .lesson-content-container {
        column-count: 1 !important;
    }
}


.scrollbar-thumb.scrollbar-inactive {
    opacity: 0;
    pointer-events: none;
}

.student-view-toggle {
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
}

.student-view-toggle label[for="studentViewToggle"] {
    color: var(--secondary-text-color);
}

.lesson-page-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 10px;
}


.page-numbers-wrapper {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
}

.page-numbers-wrapper::before,
.page-numbers-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 20px;
    pointer-events: none;
}

.page-numbers-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--container-bg-color), transparent);
}

.page-numbers-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--container-bg-color), transparent);
}

.page-numbers-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.page-numbers-container::-webkit-scrollbar {
    display: none;
}

.ai-message-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 100%;
    /* overflow-x: auto; */
    contain: layout paint style;
}

/* PREMIUM UX: Framer-style Clip-Path Reveal (Шторка появления контента) */
@keyframes clipPathReveal {
    0% { clip-path: inset(100% 0 0 0); transform: translateY(12px); opacity: 0; }
    100% { clip-path: inset(-20% -20% -20% -20%); transform: translateY(0); opacity: 1; }
}
.ai-message-container.is-model .ai-message-content-wrapper > * {
    animation: clipPathReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* Каскадная задержка (Stagger) для первых абзацев, создающая "волну" */
.ai-message-container.is-model .ai-message-content-wrapper > *:nth-child(1) { animation-delay: 0.05s; }
.ai-message-container.is-model .ai-message-content-wrapper > *:nth-child(2) { animation-delay: 0.10s; }
.ai-message-container.is-model .ai-message-content-wrapper > *:nth-child(3) { animation-delay: 0.15s; }
.ai-message-container.is-model .ai-message-content-wrapper > *:nth-child(4) { animation-delay: 0.20s; }


.advanced-chat-body.info-panel-open {
    grid-template-columns: var(--chat-sidebar-width) 1fr 300px;
}

.chat-sidebar .sidebar-section {
    padding: 10px;
    border-bottom: none;
}

.chat-sidebar .sidebar-section:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.chat-sidebar h4 {
    margin-bottom: 10px;
}

.channel-content-header {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding: 2px 20px;
    border-bottom: 1px solid var(--border-color);
}

.channel-content-header h4 {
    flex-shrink: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1.2em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-content-header #chatSearchInput {
    min-width: 70px;
    max-width: 150px;
}

.channel-content-tabs {
    display: flex;
    gap: 5px;
}

.channel-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 10px;
    background-color: transparent !important; /* Убиваем старый фон, так как теперь есть highlighter */
    color: var(--secondary-text-color);
    font-weight: 500;
    box-shadow: none !important; /* Убиваем старую тень */
    transition: color .3s ease;
    cursor: pointer;
}

.channel-tab:not(.active):hover {
    color: var(--text-color);
}

.channel-tab.active {
    color: var(--heading-color);
}

.channel-tab i {
    width: 16px;
    height: 16px;
}

.channel-info-toggle {
    display: none;
}

.channel-info-toggle.active {
    background-color: var(--input-hover-bg-color);
}

.channel-info-panel {
    display: none;
    flex-direction: column;
    overflow-y: auto;
    background-color: var(--container-bg-color);
    border-left: 1px solid var(--border-color);
}


.info-panel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .9em;
}

@media (max-width: 768px) {
    .advanced-chat-body.info-panel-open {
        grid-template-columns: 1fr;
        overflow: hidden; /* Запрещаем скролл под панелью */
    }

    .channel-info-panel {
        position: fixed !important; /* FIX: Отвязываем от прыгающей высоты шапки */
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 99999 !important; /* FIX: Поверх всего интерфейса */
        width: 350px !important;
        max-width: 85vw !important;
        background: var(--container-bg-color);
        box-shadow: -10px 0 30px rgba(0,0,0,0.5) !important;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
        padding-top: env(safe-area-inset-top); /* Для челок iOS */
    }

    /* PREMIUM UX: Темная подложка, чтобы фокус был на панели */
    .advanced-chat-body.info-panel-open::after {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.6);
        z-index: 99998;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        animation: fadeIn 0.3s ease;
    }

    

    

    

    .advanced-chat-body.info-panel-open::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        background-color: #00000080;
        animation: fadeIn .3s;
    }

    .channel-info-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        width: 300px;
        max-width: 85%;
        transform: translateX(100%);
        transition: transform .3s ease;
    }

    .advanced-chat-body.info-panel-open .channel-info-panel {
        transform: translateX(0);
    }

    .channel-content-header {
        flex-wrap: wrap;
        padding: 5px 20px;
    }

    .channel-content-header h4 {
        width: 100%;
        margin-bottom: 8px;
        text-align: center;
    }

    .channel-content-header #chatSearchInput {
        flex-grow: 1;
        margin-left: 0;
    }
}

.advanced-chat-body.info-panel-open .channel-info-panel {
    display: flex;
}

.chat-grid-container {
    grid-template-columns: var(--chat-sidebar-width) 1fr 0;
    transition: grid-template-columns .3s ease;
}

.chat-grid-container.info-panel-open {
    grid-template-columns: var(--chat-sidebar-width) 1fr 400px;
}

@media (max-width: 768px) {
    .chat-grid-container {
        grid-template-columns: 1fr;
    }

    .chat-grid-container.info-panel-open {
        grid-template-columns: 1fr;
    }
}

.info-panel-placeholder {
    color: var(--secondary-text-color);
    font-size: .9em;
    font-style: italic;
}

.info-panel-user,
.info-panel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    transition: background-color .2s;
}

.info-panel-item {
    cursor: pointer;
}

.info-panel-user:hover,
.info-panel-item:hover {
    background-color: var(--input-hover-bg-color);
}

.info-panel-item .item-author {
    overflow: visible;
    color: var(--text-color);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: break-spaces;
}

.info-panel-item .item-snippet {
    overflow: hidden;
    color: var(--secondary-text-color);
    font-size: .9em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-panel-item.file .item-icon {
    flex-shrink: 0;
}

.info-panel-item.file .item-details {
    overflow: hidden;
}

/* ======== Инфо-панель: шапка + табы (PR1) ======== */
.channel-info-panel .info-panel-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px 5px 5px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.channel-info-panel .info-panel-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--chat-primary, #667eea), var(--accent, #764ba2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: var(--neumorph-shadow-soft-sm, 0 4px 12px rgba(0,0,0,.12));
}

.channel-info-panel .info-panel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-info-panel .info-panel-avatar .ipa-initial {
    line-height: 1;
}

.channel-info-panel .info-panel-name {
    margin: 4px 0 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-color);
    word-break: break-word;
}

.channel-info-panel .info-panel-meta {
    margin: 0;
    font-size: .85rem;
    color: var(--secondary-text-color);
}

.channel-info-panel .info-panel-meta.hidden {
    display: none;
}

.channel-info-panel .info-panel-description {
    margin: 6px 0 0;
    font-size: .88rem;
    color: var(--secondary-text-color);
    line-height: 1.4;
    word-break: break-word;
    max-width: 100%;
}

.channel-info-panel .info-panel-description.hidden {
    display: none;
}

.channel-info-panel .info-panel-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.channel-info-panel .ipa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: var(--input-bg-color, rgba(127,127,127,.08));
    color: var(--text-color);
    cursor: pointer;
    transition: background-color .2s, transform .1s;
}

.channel-info-panel .ipa-btn:hover {
    background: var(--input-hover-bg-color, rgba(127,127,127,.16));
}

.channel-info-panel .ipa-btn:active {
    transform: scale(.95);
}

.channel-info-panel .ipa-btn.hidden {
    display: none;
}

.channel-info-panel .ipa-btn i {
    width: 18px;
    height: 18px;
}

.channel-info-panel .info-panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--container-bg-color);
    position: sticky;
    top: 0;
    z-index: 2;
}

.channel-info-panel .ipt-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 5px;
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}


.channel-info-panel .ipt-btn i {
    width: 16px;
    height: 16px;
}

.channel-info-panel .ipt-btn:hover {
    color: var(--text-color);
}

.channel-info-panel .ipt-btn.active {
    color: var(--primary, #667eea);
    border-bottom-color: var(--primary, #667eea);
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.channel-info-panel .ipt-count {
    font-size: .75rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--input-hover-bg-color, rgba(127,127,127,.18));
    color: inherit;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

.channel-info-panel .ipt-count:empty {
    display: none;
}

.channel-info-panel .info-panel-tab-body {
    display: none;
    padding: 12px;
}

.channel-info-panel .info-panel-tab-body.active {
    display: block;
}

@keyframes ipt-slide-from-right {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ipt-slide-from-left {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
}
.channel-info-panel .info-panel-tab-body.ipt-anim-forward {
    animation: ipt-slide-from-right .22s ease-out;
}
.channel-info-panel .info-panel-tab-body.ipt-anim-backward {
    animation: ipt-slide-from-left .22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .channel-info-panel .info-panel-tab-body.ipt-anim-forward,
    .channel-info-panel .info-panel-tab-body.ipt-anim-backward {
        animation: none;
    }
}

/* PR3: Поиск внутри инфо-панели */
.channel-info-panel .info-panel-search-wrap {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.channel-info-panel .info-panel-search-wrap .ips-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--secondary-text-color);
    pointer-events: none;
}

.channel-info-panel .info-panel-search-input {
    width: 100%;
    padding: 8px 10px 8px 34px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg-color, transparent);
    color: var(--text-color);
    font-size: .9rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.channel-info-panel .info-panel-search-input:focus {
    border-color: var(--primary, #667eea);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #667eea) 20%, transparent);
}

/* PR3: Карточка участника */
.channel-info-panel .info-panel-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    transition: background-color .2s;
    cursor: pointer;
}

.channel-info-panel .info-panel-member:hover {
    background-color: var(--input-hover-bg-color, rgba(127,127,127,.16));
}

.channel-info-panel .ipm-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* overflow:hidden убран: иначе он обрезал онлайн-точку,
       торчащую за круг. Клиппинг картинки делаем на самой <img>. */
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--chat-primary, #667eea), var(--accent, #764ba2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.channel-info-panel .ipm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.channel-info-panel .ipm-online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    background: #2ecc71;
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
    z-index: 2;
}

.channel-info-panel .ipm-body {
    flex: 1;
    min-width: 0;
}

.channel-info-panel .ipm-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.channel-info-panel .ipm-name {
    font-size: .92rem;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-info-panel .ipm-name-row .pro-badge {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.channel-info-panel .ipm-name-row .owner-badge {
    width: 14px;
    height: 14px;
    color: #ffd700;
    flex-shrink: 0;
    margin-left: 2px;
}

.channel-info-panel .ipm-status {
    font-size: .78rem;
    color: var(--secondary-text-color);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-info-panel .ipm-status.is-online {
    color: #2ecc71;
}

/* PR2: Сетка медиа */
.channel-info-panel .info-panel-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.channel-info-panel .info-panel-media-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    background: var(--input-bg-color, rgba(127,127,127,.08));
}

.channel-info-panel .info-panel-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s;
}

.channel-info-panel .info-panel-media-item:hover img {
    transform: scale(1.05);
}

/* PR2: Список ссылок */
.channel-info-panel .info-panel-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background-color .2s;
}

.channel-info-panel .info-panel-link-item:hover {
    background: var(--input-hover-bg-color, rgba(127,127,127,.16));
}

.channel-info-panel .info-panel-link-item .link-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--input-bg-color, rgba(127,127,127,.12));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #667eea);
    flex-shrink: 0;
}

.channel-info-panel .info-panel-link-item .link-icon i {
    width: 16px;
    height: 16px;
}

.channel-info-panel .info-panel-link-item .link-details {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.channel-info-panel .info-panel-link-item .link-host {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-info-panel .info-panel-link-item .link-url {
    font-size: .78rem;
    color: var(--secondary-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#aiChatUserName {
    color: var(--text-color);
    font-size: .9em;
    font-weight: 500;
}

#aiChatUserDropdown {
    top: 50px;
    right: 15px;
    z-index: 1010;
    width: 280px;
    box-shadow: var(--neumorph-shadow-soft-sm);
}

@media (max-width: 600px) {
    
    #aiChatUserName {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #aiChatUserDropdown {
        width: calc(100% - 30px);
    }
}

.user-dropdown-actions {
    padding: 5px 16px;
    gap: 0px;
    background-color: var(--input-bg-color);
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

.pro-key-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0px 0 5px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--container-bg-color);
    transition: all .2s ease;
}

.pro-key-input-wrapper:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 15%, transparent);
    border-color: var(--focus-ring);
}

.pro-key-input-wrapper i {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: var(--secondary-text-color);
}

.pro-key-input-wrapper .pro-key-input {
    flex-grow: 1;
    min-width: 30px;
    padding: 15px 5px 15px 5px;
    margin-bottom: 0px;
    margin-left: 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.9em;
    outline: none;
}

.pro-key-activate-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--button-success-bg);
    color: #fff;
    opacity: 1;
    transform: translateY(-50%);
    transition: opacity 0.2s, transform .2s;
    cursor: pointer;
}


.pro-key-activate-btn i {
    width: 16px;
    height: 16px;
}

.pro-key-activate-btn.hidden {
    width: 0;
    padding: 6px 0;
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
    pointer-events: none;
}

.pro-key-activate-btn:not(.hidden):hover {
    transform: translateY(-50%) scale(1.1);
}

#userDropdownActions .pro-key-activate-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--button-success-bg);
    color: #fff;
    opacity: 1;
    transform: translateY(-50%);
    transition: opacity 0.2s, transform .2s;
    cursor: pointer;
}

#userDropdownActions .pro-key-activate-btn.hidden {
    width: 0;
    padding: 6px 0;
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
    pointer-events: none;
}

#userDropdownActions .pro-key-activate-btn:not(.hidden):hover {
    transform: translateY(-50%) scale(1.1);
}

#userDropdownActions .pro-key-input {
    padding-right: 40px;
}

#userDropdownActions .pro-key-activate-btn i {
    width: 16px;
    height: 16px;
}

.ai-chat-history-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
}

.ai-chat-history-title>span {
    display: inline-block;
    min-width: 100%;
    will-change: transform;
}

.ai-chat-history-item:hover .ai-chat-history-title>span {
    animation: scroll-text 8s linear infinite alternate;
}

@keyframes scroll-text {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(calc(100% - 100% - (100% - 150px)));
    }
}

.ai-chat-history-item.dragging {
    border: 1px dashed var(--accent-color);
    background-color: var(--input-hover-bg-color);
    opacity: .5;
}

.drag-placeholder {
    height: 40px;
    margin-bottom: 4px;
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
    /* ENTERPRISE UX: Анимация "марширующих муравьев" для D&D зоны */
    background-image: 
        linear-gradient(90deg, var(--accent-color) 50%, transparent 50%), 
        linear-gradient(90deg, var(--accent-color) 50%, transparent 50%), 
        linear-gradient(0deg, var(--accent-color) 50%, transparent 50%), 
        linear-gradient(0deg, var(--accent-color) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right top;
    animation: border-dance 1s infinite linear;
}

@keyframes border-dance {
    0% { background-position: left top, right bottom, left bottom, right top; }
    100% { background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px; }
}

.ai-chat-history-item {
    cursor: grab;
}

.ai-chat-history-item.dragging {
    cursor: grabbing;
}

.ai-chat-folder {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--input-bg-color);
}

.ai-chat-folder-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: grab;
}

.folder-toggle-icon {
    flex-shrink: 0;
    margin-right: 8px;
    transition: transform .2s ease-in-out;
}

.ai-chat-folder.collapsed .folder-toggle-icon {
    transform: rotate(-90deg);
} 

.ai-chat-folder-title {
    flex-grow: 1;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.folder-content {
    max-height: 1000px;
    padding-left: 20px;
    overflow: hidden;
    transition: max-height .3s ease-in-out, padding-top 0.3s, padding-bottom .3s;
}

.ai-chat-folder.collapsed .folder-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}


.add-chats-list {
    max-height: 300px;
    margin-top: 20px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow-y: auto;
    text-align: left;
}

.add-chats-list .add-chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    transition: background-color .2s;
    cursor: pointer;
    border-bottom: 1px solid var(--dashed-border-color);
}

.add-chats-list .add-chat-item:last-child {
    border-bottom: none;
}

.add-chats-list .add-chat-item:hover {
    background-color: var(--input-hover-bg-color);
}

.add-chats-list .add-chat-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
}

.add-chats-list .add-chat-item-title {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Даем родительскому блоку шапки позиционирование для работы абсолюта */
.ai-chat-header-controls {
    position: relative;
    display: flex;
    justify-content: space-between; /* Расталкиваем левые и правые элементы по краям */
    align-items: center;
    width: 100%;
}

/* Абсолютное центрирование селектора персоны (Не зависит от кнопок по краям) */
#aiPersonaSelectContainer {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 10;
    width: auto !important;
}

#aiPersonaSelectContainer .ai-select-button {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--border-color); 
    border-radius: 10px;
    background-color: var(--container-bg-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    left: 0; 
}

#aiPersonaSelectContainer:hover .ai-select-button,
#aiPersonaSelectContainer.open .ai-select-button {
    box-shadow: var(--neumorph-shadow-inset);
    border-color: var(--accent);
}

/* Стили кнопки Плюс (Слева, дизайн матового стекла) */
.ai-header-new-chat-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2); /* Полупрозрачный темный фон как на скрине 1 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
    order: 0; /* Всегда первая слева */
}

/* Адаптация кнопки Плюс для темной темы */
body.dark-mode .ai-header-new-chat-btn,
body.synthwave-mode .ai-header-new-chat-btn,
body.oled-mode .ai-header-new-chat-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.1);
}

.ai-header-new-chat-btn:hover {
    transform: scale(1.1);
    background: var(--button-primary-bg); /* При наведении становится яркой */
}

.ai-header-new-chat-btn:active {
    transform: scale(0.9);
}

.ai-header-new-chat-btn i,
.ai-header-new-chat-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    stroke-width: 2.5px;
}


#aiPersonaSelectText {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#aiPersonaSelectContainer .ai-select-dropdown {
    right: auto;
    left: 50%;
    width: 320px;
    padding: 10px;
    transform: translateX(-50%);
}

.ai-select-dropdown .persona-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    text-align: center;
    box-shadow: var(--neumorph-shadow-soft);
    transition: all .2s ease-in-out;
}

.persona-option:last-child {
    margin-bottom: 0;
}

.persona-option:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: translateY(-1px); /* Легкий подъем */
}

/* PREMIUM UX: Отскок иконки при наведении на пункт меню */
.persona-option:hover .persona-option-icon i {
    transform: scale(1.15) rotate(5deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.persona-option .persona-option-icon i {
    transition: transform 0.2s ease-out;
}

.persona-option.active {
    color: var(--accent-color);
    box-shadow: var(--neumorph-shadow-inset);
}

.ai-select-dropdown .persona-option.active .persona-desc {
    color: var(--text-color);
}

.ai-select-dropdown .persona-name {
    margin-top: 8px;
    color: var(--text-color);
    font-weight: 600;
}

.ai-select-dropdown .persona-desc {
    color: var(--secondary-text-color);
    color: var(--secondary-text-color);
    font-size: .85em;
    font-size: .85em;
    white-space: normal;
    white-space: normal;
}

@media (max-width: 600px) {
    .ai-chat-header {
        gap: 8px;
    }

    #aiPersonaSelectContainer {
        width: 150px;
    }

    #aiPersonaSelectContainer .ai-select-button {
        padding: 4px 8px;
        font-size: .9em;
    }

    #aiPersonaSelectContainer .ai-select-dropdown {
        width: 250px;
    }
}

@media (max-width: 768px) {

    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    textarea,
    .auth-input,
    .pro-key-input,
    /* ПРОДАКШЕН ФИКС: Захватываем элементы SweetAlert и кастомные меню ИИ */
    .swal2-input,
    .swal2-textarea,
    .magic-search-input,
    #magicCustomInput {
        font-size: 16px !important;
    }
}

.ai-message-suggestions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    width: 80%;
}

.ai-suggestion-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: .9em;
    /* PREMIUM UX: Кинематика чипсов-подсказок (iMessage Suggestions) */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    cursor: pointer;
    will-change: transform;
}

.ai-suggestion-item:active {
    transform: scale(0.95);
    background-color: var(--border-color);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.1s ease;
}

.ai-suggestion-item:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--accent-color);
}

.ai-suggestion-item i {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--secondary-text-color);
}

.ai-message-image-wrapper {
    position: relative;
    max-width: 100%;
}

.ai-generated-image {
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 512px;
    border: none;
    border-radius: 12px;
    background-color: var(--input-bg-color);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
    cursor: zoom-in;
    /* [VRAM Fix]: Убран will-change. Резервация видеопамяти для десятков изображений
       приводит к вылету вкладки на мобильных Android (OOM). */
}


@keyframes aiImgBlurUp {
    from { filter: blur(10px); transform: scale(1.05) translateZ(0); }
    to   { filter: none; transform: translateZ(0); }
}

/* PREMIUM UX: Blur-Up эффект ТОЛЬКО для ещё не загруженных картинок */
.ai-generated-image:not(.loaded) {
    filter: blur(10px);
    transform: scale(1.05);
}

/* Класс, который JS добавляет после загрузки (или инлайн onload) */
.ai-generated-image[style*="opacity: 1"],
.ai-generated-image.loaded {
    filter: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Blur-Up: одноразовая анимация при первой загрузке картинки.
   animation запускается однократно и не перезапускается при смене классов контейнера */
.ai-generated-image.loaded {
    animation: aiImgBlurUp 0.5s ease-out;
}

@keyframes aiImgBlurUp {
    from { filter: blur(10px); transform: scale(1.05) translateZ(0); }
    to   { filter: none; transform: translateZ(0); }
}

/* PREMIUM UX: Контейнер для Ambilight */
.ambilight-wrapper {
    position: relative;
    display: block; /* Изменено для лучшего заполнения контейнеров */
    width: 95%;
    margin-top: 0px; /* Убрали жесткий отступ, он контролируется родителем */
}


/* Сама светящаяся тень (создается из копии картинки) */
.ambilight-glow {
    position: absolute;
    top: 10%;
    scale: 0.85;
    left: -2%;
    width: 100% !important;
    height: 90% !important;
    z-index: 1;
    border-radius: inherit;
    filter: blur(14px) saturate(250%) opacity(1);
    /* [VRAM Fix]: Убран transform: translateZ(0). Изоляция размытых слоев в GPU 
       внутри длинного списка = 100% краш браузера из-за исчерпания графической памяти. */
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    object-fit: cover !important;
}
.ambilight-wrapper:hover .ambilight-glow {
    will-change: opacity, filter, top; /* Изолируем затраты памяти GPU только во время hover */
}

/* Гарантируем, что основная картинка всегда поверх тени */
.ambilight-wrapper > img:not(.ambilight-glow) {
    position: relative;
    z-index: 5;
}

.ambilight-wrapper:hover .ambilight-glow {
    /* opacity: 1; */
    /* filter: blur(32px) saturate(250%) opacity(1); */
    /* top: 0%; */ /* При наведении тень опускается еще ниже, создавая эффект 3D-подъема */
}

/* Специфичный фикс для библиотеки колод, чтобы цвет всегда красиво заливал карточку */
.library-deck-card .ambilight-glow {
    top: 10%;
    height: 100% !important;
    filter: blur(24px) saturate(200%) opacity(0.95); /* Максимальная сочность */
}


.library-deck-card:hover .ambilight-glow {
    top: 20%;
    filter: blur(35px) saturate(250%) opacity(1);
}

/* Отключаем на слабых устройствах для экономии батареи */
body.low-power .ambilight-glow {
    display: none !important;
}


#aiImageStyleButton span {
    display: block;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}


@media (max-width: 600px) {
    .ai-main-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ai-main-controls .ai-setting-group {
        width: auto;
    }

    
    #aiImageStyleButton {
        width: 40% !important;
 
    }


    }


.ai-chat-history-list .dragging {
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.ai-character-list {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.ai-character-list-placeholder {
    padding: 20px;
    color: var(--secondary-text-color);
    text-align: center;
    font-style: italic;
}

.ai-character-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.ai-character-card:hover {
    background-color: var(--hover-bg-color);
}

.ai-character-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    object-fit: cover;
}


.ai-character-name {
    display: block;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-character-actions {
    align-items: center;
    transition: opacity .2s ease;
}

.ai-character-card:hover .ai-character-actions {
    opacity: 1;
}

.ai-character-delete-btn {
    padding: 4px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.ai-character-delete-btn:hover {
    background-color: var(--button-danger-hover-bg);
    color: var(--feedback-incorrect-text);
}

.ai-characters-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    width: 260px;
    height: 100%;
    background-color: var(--container-bg-color);
    box-shadow: 2px 0 10px #0003;
    transform: translateX(-100%);
    transition: transform .3s ease-in-out;
    border-right: 1px solid var(--border-color);
}

.ai-chat-modal-content.characters-sidebar-open .ai-characters-sidebar {
    transform: translateX(0);
}

.ai-characters-overlay {
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 1001;
    width: 100%;
    height: 100%;
    background-color: #00000042;
    opacity: 0;
    border-radius: 18px;
    transition: opacity .3s ease-in-out;
    background-color: color-mix(in srgb, var(--container-bg-color) 10%, transparent);
    -webkit-backdrop-filter: blur(4px) saturate(180%);
    backdrop-filter: blur(4px) saturate(180%);
}

.ai-characters-overlay.visible {
    opacity: 1;
}


.ai-character-save-container {
    border: 1px solid var(--border-color) !important;
    background-color: var(--input-bg-color) !important;
}

.ai-character-save-container.single button {
    color: var(--secondary-text-color);
}

.ai-character-save-container.single button:hover {
    color: var(--primary-text-color);
}

.ai-character-save-container.single button strong {
    color: var(--primary-text-color);
}


.ai-character-save-container select {
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--primary-text-color);
}

.ai-character-save-container .save-selected-char-btn {
    background-color: var(--accent);
}

.ai-character-save-container /* APP STORE TIER: Smooth Small Spinner */
.loading-spinner-small {
    border: 2px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-top-color: var(--accent);
    border-right-color: color-mix(in srgb, var(--accent) 60%, transparent);
}


.ai-character-save-container {
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    transition: all .2s ease-in-out;
}

.ai-character-save-container.single button {
    color: var(--secondary-text-color);
}

.ai-character-save-container.single button:hover {
    color: var(--primary-text-color);
}

.ai-character-save-container.single button strong {
    color: var(--primary-text-color);
}


.ai-character-save-container select {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    color: var(--text-color);
}

.ai-character-save-container .save-selected-char-btn {
    background-color: var(--accent);
}

.ai-character-save-container .loading-spinner-small {
    border: 2px solid var(--border-color) !important;
    border-top-color: var(--accent) !important;
}


.ai-character-actions {
    display: block !important;
    margin: 12px 10px 5px;
    opacity: 1 !important;
}

.ai-character-save-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    background-color: var(--input-bg-color) !important;
}

.ai-character-save-container.single button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px !important;
    border: none !important;
    background: none !important;
    color: var(--secondary-text-color) !important;
    font-size: .9em !important;
    text-align: left;
    margin-top: 15px;
    cursor: pointer !important;
}

.ai-character-save-container.single button:hover {
    color: var(--primary-text-color) !important;
}

.ai-character-save-container.single button i {
    color: var(--secondary-text-color) !important;
}

.ai-character-save-container.single button:hover i {
    color: var(--primary-text-color) !important;
}

.ai-character-save-container.single button strong {
    color: var(--primary-text-color) !important;
    font-weight: 600 !important;
}

.ai-character-save-container.multiple {
    gap: 15px;
}

.ai-character-save-container select {
    flex-grow: 1;
    padding: 5px 8px;
    border: 1px solid var(--border-color) !important;
    border-radius: 5px;
    background-color: var(--container-bg-color) !important;
    color: var(--text-color) !important;
}

.ai-character-save-container .save-selected-char-btn {
    padding: 5px 12px;
    border: none !important;
    border-radius: 5px;
    background-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 500;
    cursor: pointer;
}

.ai-character-save-container .loading-spinner-small {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color) !important;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    border-top-color: var(--accent) !important;
}

.loading-spinner-small.hidden {
    display: none !important;
}

.ai-chat-main-input-row .ai-input-actions {
    display: flex;
    align-items: center;
    padding-left: 8px;
}

.ai-attach-container {
    position: relative;
}

.ai-attach-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    /* Должен быть выше #aiPersonaSelectContainer (z-index: 10) —
       иначе кнопка "Эксперт" просвечивает поверх меню при открытии "+". */
    z-index: 20;
    border: 1px solid var(--border-color);
    border-radius: 16px; /* Более круглые iOS края */
    overflow: hidden;
    /* PREMIUM UX: Glassmorphism для меню прикреплений */
    background-color: rgba(var(--container-bg-color-rgb, 255, 255, 255), 0.7);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    
    /* Анимация появления из точки кнопки */
    transform-origin: bottom left;
    opacity: 1;
    transform: scale(1) translateY(0);
    visibility: visible;
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
    will-change: transform, opacity;
}

.dark-mode .ai-attach-menu,
.oled-mode .ai-attach-menu,
.synthwave-mode .ai-attach-menu {
    background-color: rgba(30, 30, 30, 0.85);
}

.ai-attach-menu.hidden {
    display: block !important; /* Отменяем display: none для CSS анимации */
    opacity: 0;
    transform: scale(0.6) translateY(20px) rotate(-5deg); /* Скручивается и падает */
    visibility: hidden;
    pointer-events: none;
}

.ai-attach-menu a {
    padding: 12px 16px;
    color: var(--text-color);
    font-size: 14px;
    text-decoration: none;
    /* Подготовка к каскадной анимации */
    opacity: 0;
    transform: translateX(-15px);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* PREMIUM UX: Каскадное появление (Staggered Reveal) */
.ai-attach-menu:not(.hidden) a {
    animation: menuStaggerItem 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.ai-attach-menu:not(.hidden) a:nth-child(1) { animation-delay: 0.05s; }
.ai-attach-menu:not(.hidden) a:nth-child(2) { animation-delay: 0.10s; }
.ai-attach-menu:not(.hidden) a:nth-child(3) { animation-delay: 0.15s; }
.ai-attach-menu:not(.hidden) a:nth-child(4) { animation-delay: 0.20s; }

@keyframes menuStaggerItem {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ai-attach-menu a:hover {
    background-color: #0000000d;
}

.dark-mode .ai-attach-menu a:hover,
.synthwave-mode .ai-attach-menu a:hover,
.oled-mode .ai-attach-menu a:hover {
    background-color: #ffffff1a;
}

.ai-character-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    max-height: 50vh;
    margin-top: 20px;
    margin-bottom: 25px;
    padding: 5px;
    overflow-y: auto;
}

.ai-character-selection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: var(--input-bg-color);
    transition: all .2s ease;
    cursor: pointer;
}


/* Специфичный стиль для прикрепленных ПЕРСОНАЖЕЙ и ФАЙЛОВ (не картинок) */
.ai-attachment-preview-item.is-character,
.ai-attachment-preview-item.is-file {
    width: auto; /* Позволяем расти по ширине текста */
    height: 40px; /* Фиксированная высота */
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 20px; /* Форма пилюли */
    background-color: var(--input-bg-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.ai-attachment-preview-item.is-character img.character-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    cursor: zoom-in; /* НОВОЕ: Курсор в виде лупы */
    transition: transform 0.2s ease, filter 0.2s ease; /* НОВОЕ: Плавность */
}

/* НОВОЕ: Эффект увеличения при наведении */
.ai-attachment-preview-item.is-character img.character-thumb:hover {
    transform: scale(1.2);
    filter: brightness(1.1);
}

.ai-attachment-preview-item.is-character span,
.ai-attachment-preview-item.is-file span {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Для не-картинок крестик внутри, а не торчит сверху */
.ai-attachment-preview-item.is-character .ai-attachment-preview-remove-btn,
.ai-attachment-preview-item.is-file .ai-attachment-preview-remove-btn {
    position: static;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    background: transparent;
    border: none;
    color: var(--secondary-text-color);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ai-attachment-preview-item.is-character .ai-attachment-preview-remove-btn:hover,
.ai-attachment-preview-item.is-file .ai-attachment-preview-remove-btn:hover {
    color: var(--button-danger-bg, #e74c3c);
    background-color: rgba(231, 76, 60, 0.1);
}

.ai-attachment-preview-item.is-character {
    border: 1px solid var(--primary-light);
    background-color: var(--primary-bg-light);
    color: var(--primary);
    font-weight: 500;
}

.ai-attachment-preview-item.is-character .ai-attachment-preview-remove-btn {
    color: var(--primary);
}

.dark-mode .ai-attachment-preview-item.is-character {
    background-color: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.4);
}

.ai-message-attached-characters {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    padding-left: 52px;
}

.ai-message-container.is-model .ai-message-attached-characters {
    padding-left: 0;
}

.attached-character-avatar {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    object-fit: cover;
    /* PREMIUM UX: Пружинный отскок и курсор лупы */
    cursor: zoom-in;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
    position: relative;
    z-index: 1;
}

/* Эффект всплытия аватарки при наведении */
.attached-character-avatar:hover {
    transform: scale(1.2) translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    filter: brightness(1.1);
    z-index: 2; /* Выводим на передний план, если они стоят рядом */
}

/* Эффект нажатия (Squish) */
.attached-character-avatar:active {
    transform: scale(0.9);
}

#aiViewModeDropdown {
    right: 0;
    left: auto;
    transform: none;
}


.ai-chat-body-wrapper {
    display: grid;
    grid-template-columns: 1fr 0;
    grid-template-rows: 100%;
    transition: grid-template-columns .4s ease-in-out;
    border-radius: 16px;
}

.ai-chat-modal-content.gallery-open .ai-chat-body-wrapper {
    grid-template-columns: 1fr 40%;
}

.ai-chat-gallery-sidebar {
    padding: 10px;
    overflow-y: auto;
    background-color: var(--bg-color);
    opacity: 0;
    transition: opacity .3s 0.1s, visibility 0s .4s;
    border-left: 1px solid var(--border-color);
    visibility: hidden;
}

.ai-chat-modal-content.gallery-open .ai-chat-gallery-sidebar {
    opacity: 1;
    transition-delay: 0s, 0s;
    visibility: visible;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    transition: transform .2s ease-in-out;
    object-fit: cover;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item:hover {
    box-shadow: 0 4px 12px var(--shadow-color);
    transform: scale(1.05);
}

.gallery-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    height: 100%;
    padding: 20px;
    color: var(--secondary-text-color);
    text-align: center;
}

.gallery-placeholder i {
    width: 48px;
    height: 48px;
    opacity: .5;
}

.ai-chat-gallery-sidebar .gallery-placeholder {
    display: flex;
}

.ai-chat-gallery-sidebar .gallery-grid {
    display: none;
}

.ai-chat-gallery-sidebar.has-content .gallery-placeholder {
    display: none;
}

.ai-chat-gallery-sidebar.has-content .gallery-grid {
    display: grid;
}

@media (max-width: 800px) {
    .ai-chat-body-wrapper {
        grid-template-columns: 1fr;
    }

    .ai-chat-gallery-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        width: 80%;
        opacity: 1;
        transform: translateX(100%);
        transition: transform .3s ease-in-out;
        visibility: visible;
        border-radius: 12px;
        margin: 5px;
        padding: 15px;
        box-shadow: var(--neumorph-shadow-inset);
    }

    .ai-chat-modal-content.gallery-open .ai-chat-gallery-sidebar {
        transform: translateX(0);
    }
}

.ai-message.user .ai-message-attachment {
    background-color: #ffffff1a;
    border-color: #fff3;
}

.ai-message.user .ai-message-attachment:hover {
    border-color: #ffffff80;
}

.ai-message.user .ai-attachment-icon {
    background-color: #ffffff26;
}

.ai-message.user .ai-attachment-file-name {
    color: var(--button-primary-text);
}

.ai-message.user .ai-attachment-file-type {
    color: #fffc;
}

.ab-slider-container {
    position: relative;
    line-height: 0;
}


img-comparison-slider {
    --divider-color: #fffc;
    --divider-width: 3px;
    --handle-color: #ffffffe6;
    --handle-size: 40px;
    display: block; /* ФИКС БАГА: Делаем компонент блочным */
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    outline: none;
}

img-comparison-slider img {
    display: block; /* Убиваем отступы снизу */
    width: 100%;
    height: auto !important; /* ФИКС СПЛЮЩИВАНИЯ: Высота формируется по содержимому */
    max-height: 65vh; /* Защита от гигантских вертикальных фото */
    object-fit: contain;
}

.ai-message-actions .ab-toggle-btn i {
    width: 18px !important;
    height: 18px !important;
}

.ai-character-card .ai-character-actions button {
    padding: 4px;
    border: none !important;
    border-radius: 4px;
    background: none !important;
    color: var(--secondary-text-color);
    box-shadow: none !important;
    transition: background-color 0.2s, color .2s;
    cursor: pointer;
}

.ai-character-card .ai-character-actions button:hover {
    background-color: var(--input-hover-bg-color) !important;
    color: var(--text-color) !important;
    transform: none;
}

.ai-character-card .ai-character-actions .ai-character-delete-btn:hover {
    color: var(--feedback-incorrect-text) !important;
}

.ai-character-card .ai-character-actions button i {
    width: 16px;
    height: 16px;
}


#previewMainImageContainer,
#abSliderFullscreenContainer {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 0;
    margin-bottom: 10px;
    overflow: hidden;
}

#previewImage,
.ai-generated-image {
    display: block;
    width: auto;
    max-width: 95%;
    margin-top: 15px;
    height: auto;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 20px #00000080;
    object-fit: contain;
}

.preview-thumbnails-container {
    max-width: 100%;
    border-radius: 12px;
    background-color: #00000080;
}

.preview-thumbnails-container:has(.preview-thumbnail:nth-child(6)) {
    justify-content: flex-start;
}

.preview-thumbnails-container::-webkit-scrollbar {
    height: 6px;
}

.preview-thumbnails-container::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #ffffff80;
}

.preview-thumbnail {
    position: relative;
}


.preview-thumbnail.active {
    border-color: #fff;
}

@media (max-width: 768px) {
    .image-preview-content {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        padding: 10px;
        border-radius: 0;
    }

    .preview-thumbnails-container {
        justify-content: flex-start;
        gap: 5px;
        padding: 5px;
    }
}

.close-image-preview {
    padding: 0;
}


.close-image-preview i[data-lucide] {
    width: 24px;
    height: 24px;
}

.ai-message-actions .ab-toggle-btn.active {
    background-color: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}

#imagePreviewModal.slider-active #previewMainImageContainer {
    display: none !important;
}

#imagePreviewModal.slider-active #abSliderFullscreenContainer {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

#abSliderFullscreenContainer {
    position: relative;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    /* Здесь стоял `background: red !important` — след отладки: так подсвечивают
       границы блока, чтобы понять, куда он растянулся. Ползунок сравнения
       перекрывает контейнер не всегда: при другом соотношении сторон красный
       вылезал полосами по краям картинки. Оставляем прозрачным — фон даёт
       само окно просмотра. */
    background: transparent !important;
}

#abSliderFullscreenContainer img-comparison-slider {
    width: 100% !important;
    max-width: 100%;
    height: 100% !important;
    max-height: 100%;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.preview-thumbnail.compared-from {
    box-shadow: 0 0 8px #3498db;
    border-color: #3498db;
}

.close-ab-slider-fullscreen-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ffffff80;
    border-radius: 50%;
    background-color: #0009;
    color: #fff;
    transition: all .2s ease;
    cursor: pointer;
}

.close-ab-slider-fullscreen-btn:hover {
    background-color: #000c;
    transform: scale(1.1);
}

.close-ab-slider-fullscreen-btn i {
    width: 20px;
    height: 20px;
}

/* APP STORE TIER: Mac OS Window Code Blocks */
.ai-message.model pre[class*="language-"] {
    position: relative;
    margin: 1em 0 !important;
    padding: 45px 15px 15px 15px !important;
    border: 1px solid rgba(150, 150, 150, 0.15);
    border-radius: 12px !important; /* Мягкие углы */
    /* background: #1e1e1e !important; */ /* Нативный темный фон VS Code */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Отрисовка кнопок управления окном (Red, Yellow, Green) */
.ai-message.model pre[class*="language-"]::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff5f56;
    box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
    z-index: 2;
}

.ai-message.model pre[class*="language-"] .copy-code-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.ai-message.model pre:hover .copy-code-btn {
    opacity: 1;
}

.copy-code-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 5px;
    border: none;
    border-radius: 6px;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-size: .85em;
    font-weight: 500;
    /* PREMIUM UX: Физика тулбаров (macOS Code Block) */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}

.copy-code-btn:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

.copy-code-btn:hover {
    background-color: var(--button-secondary-hover-bg);
}

.copy-code-btn i[data-lucide] {
    width: 14px;
    height: 14px;
}

.copy-code-btn.copied {
    background-color: var(--button-success-bg);
    color: var(--button-primary-text);
}

body.dark-mode pre[class*="language-"],
body.synthwave-mode pre[class*="language-"],
body.glass-dark pre[class*="language-"] {
    background: #2d2d2d !important;
}

.ai-interactive-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    padding-bottom: 5px;
}

.interactive-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: .9em;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
}

.interactive-btn:hover {
    background-color: var(--button-secondary-bg-hover);
    border-color: var(--accent-light);
}

.interactive-btn:focus {
    box-shadow: 0 0 0 2px var(--accent-light);
    outline: none;
}

.interactive-btn .dropdown-arrow {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.interactive-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.interactive-dropdown-content.in-body {
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
}

.interactive-dropdown-content.in-body a {
    border-radius: 4px;
    color: var(--text-color);
}

.interactive-dropdown-content.in-body a:hover {
    background-color: var(--button-secondary-bg-hover);
}

.interactive-dropdown .interactive-dropdown-content {
    display: none;
}

.ai-stylist-category {
    margin-top: 20px;
    margin-bottom: 12px;
    padding-bottom: 5px;
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.ai-color-palette-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.palette-title {
    font-size: .9em;
    font-weight: 500;
}

.palette-colors {
    display: flex;
    gap: 8px;
}

.color-swatch-btn {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 1px 3px #0000001a;
    cursor: pointer;
}

.color-swatch-btn:hover {
    box-shadow: 0 0 0 2px var(--accent-light);
}

#downloadConverterBtn,
#downloadAiFromTextBtn,
#downloadAiFromTopicBtn {
    border: 1px solid var(--button-secondary-border);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

#downloadConverterBtn:hover,
#downloadAiFromTextBtn:hover,
#downloadAiFromTopicBtn:hover {
    background-color: var(--button-secondary-hover-bg);
}

#channelInfoToggle {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--secondary-text-color);
    transition: all .2s ease;
    cursor: pointer;
}

#channelInfoToggle:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

#channelInfoToggle.active {
    background-color: var(--accent-color);
    color: var(--button-primary-text);
}

#channelInfoToggle i {
    width: 20px;
    height: 20px;
}

@media (max-width: 1227px) {
    .channel-content-tabs .channel-tab span {
        display: none;
    }

    .channel-content-tabs .channel-tab {
        padding: 5px;
    }
}

.translate-engine-container:has(#translateQuestionBtn.active) {
    box-shadow: var(--neumorph-shadow-inset);
}

.translate-engine-container #translateQuestionBtn.active {
    background: transparent !important;
    color: var(--accent) !important;
}

.translate-engine-container #translateQuestionBtn {
    box-shadow: none !important;
}

 

.ai-suggestion-item,
.photoshop-suggestion,
.interactive-btn {
    margin: 8px 5px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: box-shadow .2s ease-in-out, color .2s ease-in-out, transform .2s ease-in-out;
}

.version-thumbnail {
    padding: 0;
    border: none;
    border: 1px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

.version-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ПРОДАКШЕН ФИКС: Пропускаем клики сквозь картинку на саму кнопку */
    pointer-events: none !important;
}

.version-thumbnail:hover,
.version-thumbnail.active {
    box-shadow: var(--neumorph-shadow-inset);
    border-color: var(--accent);
}

.main-image-display {
    padding: 5px;
    margin-left: 15px;
}

.ai-character-save-container.single button {
    width: 80% !important;
    margin: 5px 20px 5px 20px;
    padding: 20px 26px;
    border: none;
    border-radius: 5px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

.ai-character-save-container.single button:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

.ai-character-save-container.generic {
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body:not(.dark-mode):not(.synthwave-mode):not(.glass-dark) .ai-message.user .ai-attachment-file-name,
body:not(.dark-mode):not(.synthwave-mode):not(.glass-dark) .ai-message.user .ai-attachment-file-type {
    color: var(--text-color) !important;
    opacity: .9;
}

.color-swatch-btn {
    width: 28px;
    height: 28px;
    border: none;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.color-swatch-btn:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: scale(1.1);
}

.message-content,
.file-share-content,
.question-link-content {
    border: none;
    border-radius: 18px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    /* PREMIUM UX: Пружинный отскок при наведении (Interactive Depth) */
    transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateZ(0); /* Легкое аппаратное ускорение без выделения жесткого слоя */
}

/* Hover-эффекты только для устройств с настоящим hover (мышь/трекпад).
   На тач-устройствах :hover триггерится при перетаскивании маркеров выделения текста,
   сдвиг баббла на -2px ломает автоскролл браузера в длинных чатах и смещает выделение. */
@media (hover: hover) and (pointer: fine) {
    /* Включаем тяжелый will-change ТОЛЬКО в момент наведения мыши */
    .ai-message-container:hover .message-content,
    .message:hover .message-content,
    .file-share-content:hover,
    .question-link-content:hover {
        will-change: transform, box-shadow;
    }

    /* Эффект поднятия баббла */
    .ai-message-container:hover .message-content,
    .message:hover .message-content {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }
}

/* Лента во время прокрутки. Здесь стояли will-change: transform, box-shadow: none и
   pointer-events: none на КАЖДЫЙ контейнер сообщения «ради 60 FPS». На телефоне это давало
   обратное: на время прокрутки каждое сообщение становилось отдельным композитным слоем
   (сотни текстур), а через 150–200 мс после конца инерции все слои уничтожались и лента
   растрировалась заново с тенями — 5–7 секунд без кадров, тап по «...» сразу после
   прокрутки «зависал» (замер на устройстве, v1626). pointer-events: none ещё и глотал
   тапы по сообщениям в первые 150–200 мс после прокрутки. Оставлено только отключение
   размытия — в ленте его нет, это страховка для тем. */
.ai-chat-messages.is-scrolling .message-content,
.ai-chat-messages.is-scrolling .ai-message-container {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Также отключаем GIF-ки и сложную анимацию внутри сообщений, пока идет скролл */
.ai-chat-messages.is-scrolling img,
.ai-chat-messages.is-scrolling lottie-player {
    pointer-events: none !important;
}

/* ФИКС МОРГАНИЯ: Запрещаем анимации на картинках при скролле,
   чтобы браузер не пере-рендерил текстуры при compositing */
.ai-chat-messages.is-scrolling img.ai-generated-image,
.ai-chat-messages.is-scrolling img.ambilight-glow {
    transition: none !important;
    
}

/* [ENTERPRISE GPU RESCUE]: Плавное угасание тяжелых эффектов при скролле */
.ambilight-glow,
.premium-image-gen-mesh {
    transition: opacity 0.3s ease-out, filter 0.3s ease-out !important;
    will-change: opacity;
}

.ai-chat-messages.is-scrolling .ambilight-glow,
.ai-chat-messages.is-scrolling .premium-image-gen-mesh,
.ai-chat-messages.is-scrolling .typing-indicator-bar::after {
    /* Плавно скрываем, попутно убирая размытие для мгновенной разгрузки видеокарты */
    opacity: 0 !important;
    filter: blur(0px) !important; 
    pointer-events: none !important;
}

.ai-chat-messages.is-scrolling .ai-generated-image {
    /* ФИКС МОРГАНИЯ: Гарантируем отсутствие filter/transition/animation при скролле */
    filter: none !important;
    transition: none !important;
     
}

body.dark-mode .ai-message-container:hover .message-content,
body.dark-mode .message:hover .message-content,
body.synthwave-mode .ai-message-container:hover .message-content,
body.oled-mode .ai-message-container:hover .message-content {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.message.mine .message-content {
    box-shadow: var(--neumorph-shadow-soft);
    border-bottom-right-radius: 6px;
}

.reaction-badge {
    padding: 4px 10px;
    border: none;
    border-radius: 15px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

.reaction-badge:hover {
    transform: translateY(-1px) scale(1.05);
}

.reaction-badge.mine {
    font-weight: 700;
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.expand-message-btn {
    display: block;
    width: fit-content;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background-color: var(--container-bg-color);
    color: var(--secondary-text-color);
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

.expand-message-btn:hover {
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-inset);
}

.style-dropdown-btn {
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

.style-dropdown-btn:hover,
.style-dropdown.open .style-dropdown-btn {
    box-shadow: var(--neumorph-shadow-inset);
}

#aiExplanationModal .modal-buttons button[data-lang-key="auth_close_button"] {
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    background: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

#aiExplanationModal .modal-buttons button[data-lang-key="auth_close_button"]:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

#copyExplanationBtn {
    border: none;
    border-radius: 12px;
    color: var(--button-primary-text);
    font-weight: 500;
    max-height: fit-content;
    align-self: center;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

#copyExplanationBtn:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: translateY(-1px);
}

#channelsList,
#privateChatsList,
#onlineUsersList {
    /* max-height: 350px; */
    padding-right: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.claude-mode .message.pinned .message-content,
body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode):not(.claude-mode) .message.pinned .message-content {
    background: #fdf3e7 !important;
    color: var(--text-color) !important;
    border-left: 4px solid #f2994a !important;
}

body.claude-mode .message.mine.pinned .message-content,
body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode):not(.claude-mode) .message.mine.pinned .message-content {
    color: var(--text-color) !important;
}

body.dark-mode .message.mine .message-content,
body.synthwave-mode .message.mine .message-content {
    box-shadow: var(--neumorph-shadow-inset) !important;
}

#answerOptions li.multi-choice {
    transition: background-color .2s ease, border-color .2s ease;
    cursor: pointer;
    border-left: 5px solid var(--border-color);
}

#answerOptions li.multi-choice::before {
    content: "☐";
    margin-right: 15px;
    color: var(--secondary-text-color);
    font-size: 1.5em;
    line-height: 1;
}

#answerOptions li.multi-choice.selected {
    background-color: var(--hover-bg-color);
    border-left-color: var(--accent);
}

#answerOptions li.multi-choice.selected::before {
    content: "☑";
    color: var(--accent);
}

#answerOptions li.multi-choice {
    padding-left: 15px;
    list-style-type: none;
}

#checkAnswerBtn {
    display: block;
    width: 50%;
    margin: 20px auto 0;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    color: var(--button-success-bg);
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: var(--neumorph-shadow-soft);
    cursor: pointer;
}

#checkAnswerBtn:hover:not(:disabled) {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

#checkAnswerBtn:disabled {
    background-color: var(--input-bg-color);
    color: var(--secondary-text-color);
    box-shadow: none;
    opacity: .7;
    cursor: not-allowed;
}

#answerOptions li.missed-correct {
    border: 2px dashed var(--feedback-correct-text) !important;
    background-color: var(--feedback-correct-bg) !important;
    color: var(--feedback-correct-text) !important;
    font-weight: 500;
}

#restartButton,
#downloadErrorsButton,
#reviewErrorsButton,
#downloadTriggeredQuizButton,
#shareResultBtn,
#retrySameTestBtn,
#copyErrorsButton {
    display: block;
    /* 100% + поля выталкивали кнопку за экран, а auto давало разную ширину:
       прямые дети колонки растягивались, вложенные сжимались по тексту.
       calc задаёт одну ширину для всех. */
    box-sizing: border-box;
    width: calc(100% - 8px);
    margin: 0 4px;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    font-size: 1.05em;
    font-weight: 600;
    box-shadow: var(--neumorph-shadow-soft);
    transition: all .2s ease-in-out;
}

#restartButton:hover,
#downloadErrorsButton:hover,
#reviewErrorsButton:hover,
#downloadTriggeredQuizButton:hover,
#shareResultBtn:hover,
#retrySameTestBtn:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

#restartButton,
#downloadTriggeredQuizButton {
    color: var(--text-color);
}

#downloadErrorsButton {
    color: var(--secondary-text-color);
}


@media (min-width: 601px) {
    
    
    .header-controls h1 {
        position: static !important; /* Убиваем абсолютное позиционирование, чтобы не было наложения */
        transform: none !important;
        margin: 0;
    }
    
    .header-buttons {
        justify-content: center; /* Центрируем сами кнопки */
        width: 100%;
    }
}

@media (hover: none) {

    button:hover,
    a:hover,
    .custom-file-upload-btn:hover,
    #gradusButton:hover,
    #parserButton:hover,
    #coursesButton:hover,
    .saved-session-actions button:hover,
    .ai-chat-control-btn:hover,
    .ai-action-btn:hover,
    .ai-suggestion-item:hover,
    .interactive-btn:hover,
    .add-block-item:hover,
    .ai-chat-history-item:hover,
    .lesson-item:hover,
    .course-card:hover {
        background-color: initial;
        /* color: inherit, а НЕ initial. Начальное значение цвета — canvastext,
           и при тёмной схеме браузера это белый: на светлой теме подпись
           пропадала. На тач-устройствах :hover залипает после тапа, поэтому
           текст кнопки (например «Настройки» в нижнем меню) становился
           невидимым до следующего касания в другом месте.
           inherit оставляет цвет темы и при этом так же «гасит» ховер. */
        color: inherit;
        box-shadow: initial;
        opacity: initial;
        transform: none;
        background-position: initial;
        /* Радиус здесь не трогаем: на Android :hover залипает после тапа, и
           круглые чипы («Все», «Читаю», стопки) превращались в скруглённые
           квадраты — ровно у той кнопки, по которой только что попали.
           Задача блока — погасить наведение, а не менять форму. */
    }

    #startQuizButton:hover,
    #generateCheatSheetButton:hover,
    #chooseAnotherFileButton:hover {
        box-shadow: var(--neumorph-shadow-soft-sm);
    }
}

#recentFilesList,
#gradusFolderList,
#categoryCheckboxes,
#quickNavButtons,
#aiChatMessages,
#aiChatHistoryList,
#aiAudiencesList,
#aiTopicsList,
.ai-chat-search-results,
.ai-select-dropdown,
.lesson-content-container,
.access-keys-table-container,
.add-chats-list,
.ai-character-selection-grid {
    -webkit-overflow-scrolling: touch;
}

.auth-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .9em;
    font-weight: 500;
}

.auth-status-indicator .loading-spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    border-top-color: var(--accent-color);
}

.sidebar-placeholder-item {
    background-color: var(--input-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.sidebar-placeholder-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-color) 30%, transparent),
            /* Полупрозрачный блик */
            transparent);
    transform: translateX(-100%);
    animation: shimmer 1.8s infinite;
}

/* PREMIUM UX: Мягкий и плавный перелив загрузки (Apple Shimmer) */
@keyframes shimmer {
    0% { transform: translateX(-100%); opacity: 0.5; }
    50% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0.5; }
}

.placeholder-bubble::after,
.sidebar-placeholder-item::after,
.search-result-loader::after {
    /* PREMIUM UX: Идеальный мягкий градиент (Apple Style Shimmer) */
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        color-mix(in srgb, var(--text-color) 3%, transparent) 20%, 
        color-mix(in srgb, var(--text-color) 12%, transparent) 50%, 
        color-mix(in srgb, var(--text-color) 3%, transparent) 80%, 
        transparent 100%
    ) !important;
    animation: shimmer 2.5s cubic-bezier(0.3, 0, 0.7, 1) infinite !important;
}

.placeholder-avatar {
    background-color: var(--border-color);
}

.placeholder-text {
    background-color: var(--border-color);
}

#questionNavigationControls {
    display: none !important;
}

/* APP STORE TIER: Frosted Glass Floating Nav Buttons */
.floating-nav-btn {
    position: fixed;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    
    background-color: color-mix(in srgb, var(--container-bg-color) 70%, transparent);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    
    color: var(--text-color);
    font-size: 1.6em;
    font-weight: 400;
    
    box-shadow: 0 8px 25px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.4);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, filter 0.3s;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    
    /* ENTERPRISE GPU HACK: 3D-Изоляция для кнопок поверх скролла */
    transform: translateZ(0);
    /* ОПТИМИЗАЦИЯ VRAM: Удален статический will-change, translateZ достаточно для GPU-ускорения */
}

/* Жестко задаем размеры и толщину иконок внутри плавающих кнопок */
.floating-nav-btn i,
.floating-nav-btn svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    stroke-width: 2.5px; /* Делаем стрелочки чуть более "жирными" и сочными */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.floating-nav-btn:active {
    transform: scale(0.85) !important; /* Упругое сжатие при клике */
    filter: brightness(0.9);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .floating-nav-btn,
body.synthwave-mode .floating-nav-btn,
body.oled-mode .floating-nav-btn {
    background-color: color-mix(in srgb, var(--container-bg-color) 60%, transparent);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.1);
}

 

.floating-nav-btn:hover:not(.is-disabled) {
    background-color: #f0f2f529;
}

.floating-nav-btn.is-disabled {
    opacity: .4;
    cursor: grab;
}

.floating-nav-btn.dragging {
    z-index: 11;
    box-shadow: 0 8px 25px var(--shadow-color);
    cursor: grabbing;
}

.search-results-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.search-results-header h2 {
    width: 100%;
    margin: 0;
    text-align: center;
    order: 1;
}

.new-search-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 500px;
    margin: 5px 0 0;
    order: 3;
}

#backToSearchButton {
    margin: 5px 0 0;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    order: 2;
}

#newSearchQueryInput {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: .95em;
}

#newSearchQueryInput:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
    border-color: var(--accent-color);
    outline: none;
}

#newSearchButton {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

#newSearchButton:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

#newSearchButton i {
    width: 20px;
    height: 20px;
}

/* === ENTERPRISE UX: Dynamic Island True Glassmorphism === */
.toast-notification {
    position: fixed;
    top: 20px !important; /* Перекрываем инлайн top, который Toastify ставит для линейной раскладки — у нас fan-out стекинг */
    left: 50%;
    z-index: 2147483647; /* Абсолютный максимум поверх всего */
    padding: 14px 28px;
    border-radius: 100px;
    color: #fff;
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.3px;

    /* Идеальное Apple-стекло: Тень + Внутренний блик + Бордер */
    box-shadow: 0 20px 40px rgba(0,0,0,0.25),
                inset 0 1px 2px rgba(255,255,255,0.4),
                inset 0 -1px 2px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);

    /* Оптимизация GPU */
    will-change: transform, opacity, filter;
    transform: translateX(-50%);
    animation: dynamicIslandDrop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               fadeOutIsland 0.4s cubic-bezier(0.32, 1.15, 0.25, 1) 3.5s forwards;
    cursor: pointer;
    pointer-events: auto;
    /* Отдаём свайп-жест нашему JS (horizontal) и оставляем вертикальный пан браузеру */
    touch-action: pan-y;
}

/* Пока пользователь тянется к крестику или свайпит — останавливаем авто-угасание,
   чтобы тост не начал фейдиться прямо в момент тапа и клик не провалился сквозь него. */
.toast-notification:hover,
.toast-notification:active,
.toast-notification:focus-within {
    animation-play-state: paused !important;
}

/* Использование CSS переменных для идеального смешивания цветов (Color Mix) */
.toast-notification.success { background: color-mix(in srgb, var(--button-success-bg, #27ae60) 85%, transparent); }
.toast-notification.error { background: color-mix(in srgb, var(--accent, #e74c3c) 85%, transparent); }
.toast-notification.info { background: color-mix(in srgb, var(--button-primary-bg, #3498db) 85%, transparent); }

/* PREMIUM UX: 3D Toast Stacking (Стек уведомлений как в Vercel Sonner) */
/* Обратная z-индексация и физика ухода в глубину для старых тостов */
.toast-notification, .toastify {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease !important;
}
/* Самый новый тост всегда спереди (он добавляется в начало DOM).
   Смещение свайпа приходит переменными, а не инлайновым transform: здесь
   стоит !important, а авторское !important сильнее инлайнового стиля без
   него — из-за этого тост не мог поехать за пальцем и только растворялся
   на месте. Переменные это правило пропускает. */
.toast-notification:nth-of-type(1), .toastify:nth-of-type(1) {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    transform: translate(calc(-50% + var(--toast-dx, 0px)), var(--toast-dy, 0px))
               scale(var(--toast-scale, 1)) !important;
}

/* Пока тост тянут пальцем, он должен идти ровно за ним: пружинящий переход
   стекинга здесь только отстаёт от руки. */
.toast-notification.is-swiping,
.toastify.is-swiping {
    transition: none !important;
    animation: none !important;
}

/* Уход после броска — короткий и прямой, без пружины: она бы вернула тост
   на полпути обратно в кадр. */
.toast-notification.is-dismissing,
.toastify.is-dismissing {
    transition: transform .26s cubic-bezier(.32, .72, 0, 1), opacity .26s ease !important;
    animation: none !important;
    pointer-events: none !important;
}
/* Задние тосты уходят вглубь и формируют аккуратную стопку */
.toast-notification:nth-of-type(2), .toastify:nth-of-type(2) { 
    z-index: 2147483646 !important; 
    transform: translate(-50%, 14px) scale(0.95) !important; 
    opacity: 0.8 !important; 
    filter: brightness(0.85) !important; 
    pointer-events: none !important; 
}
.toast-notification:nth-of-type(3), .toastify:nth-of-type(3) { 
    z-index: 2147483645 !important; 
    transform: translate(-50%, 28px) scale(0.90) !important; 
    opacity: 0.5 !important; 
    filter: brightness(0.7) !important; 
    pointer-events: none !important; 
}
.toast-notification:nth-of-type(n+4), .toastify:nth-of-type(n+4) { 
    opacity: 0 !important; 
    pointer-events: none !important; 
    transform: translate(-50%, 40px) scale(0.85) !important; 
}

@keyframes dynamicIslandDrop {
    0% {
        opacity: 0;
        transform: translate(-50%, -80px) scale(0.5) rotateX(-45deg); 
        filter: blur(12px);
    }
    40% {
        opacity: 1;
        transform: translate(-50%, 12px) scale(1.08) rotateX(10deg); 
        filter: blur(0px);
    }
    70% {
        transform: translate(-50%, -4px) scale(0.98) rotateX(-5deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1) rotateX(0deg);
    }
}

@keyframes fadeOutIsland {
    /* pointer-events: auto удерживается вплоть до конца анимации, чтобы тост оставался кликабельным
       (крестик/свайп/onClick) всё время, пока он хоть как-то виден. Отключаем взаимодействие
       только в самом конце, когда opacity уже близок к 0 — защита от «клика-призрака» по UI снизу. */
    0%  { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
    99% { pointer-events: auto; }
    100% { opacity: 0; transform: translate(-50%, -30px) scale(0.8); filter: blur(5px); pointer-events: none; }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

#shareFavoritesModal .modal-content {
    max-width: 480px;
    text-align: left;
}

#shareFavoritesModal .parser-tabs {
    margin-bottom: 0;
}

.share-target-list {
    max-height: 300px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow-y: auto;
    list-style: none;
}

.share-target-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    transition: background-color .2s ease;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.share-target-item:last-child {
    border-bottom: none;
}

.share-target-item:hover {
    background-color: var(--input-bg-color);
}

.share-target-item .avatar {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 50%;
    background-color: var(--avatar-bg);
    color: var(--avatar-text);
    border: 1px solid var(--border-color);
    font-weight: 700;
}

.share-target-item .icon {
    margin-right: 12px;
    color: var(--secondary-text-color);
}

.share-target-item .name {
    font-weight: 500;
}

.share-target-item .status-indicator {
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background-color: #ccc;
}

.share-target-item .status-indicator.online {
    background-color: #2ecc71;
}

.share-search-input {
    width: 100%;
    margin-bottom: 15px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--bg-color);
    color: var(--primary-text-color);
}

.question-bubble.collapsed .question-options-container,
.question-bubble.collapsed .question-footer {
    display: none;
}

.question-bubble.collapsed {
    display: flex;
    align-items: center;
    min-height: 50px;
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.question-bubble.collapsed .question-details {
    display: none;
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.question-text-container {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
}

.question-bubble .question-text-content {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.question-bubble.collapsed .question-text-content {
    display: -webkit-box;
    box-shadow: var(--neumorph-shadow-soft-sm);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
    word-break: break-word;
}


.question-bubble.collapsed {
    transition: background-color .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.question-bubble.collapsed:hover {
    background-color: var(--input-hover-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
}


.question-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 0px;
    padding-top: 0px;
    border-top: 1px solid var(--dashed-border-color);
}

.collapse-question-btn {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    color: var(--secondary-text-color);
    font-size: .85em;
    font-weight: 500;
    transition: background-color .2s ease;
    cursor: pointer;
}

.collapse-question-btn:hover {
    background-color: var(--input-hover-bg-color);
}

.question-footer .question-actions {
    order: 1;
}

.question-footer .collapse-question-btn {
    order: 2;
}

.collapse-question-btn i {
    margin-right: 6px;
}


body.synthwave-mode .floating-nav-btn {
    background-color: #0f172ab3;
    color: #14B8A6;
    box-shadow: 0 0 12px #14b8a666;
    border-color: #14b8a680;
}

body.synthwave-mode .floating-nav-btn:hover:not(:disabled) {
    background-color: #0f172ae6;
    color: #FFF;
    box-shadow: 0 0 15px #14b8a699;
    border-color: #14b8a6cc;
}

body.synthwave-mode .floating-nav-btn:disabled {
    background-color: #0f172a80;
    color: #334155cc;
    box-shadow: none;
    border-color: #33415580;
}


#favoritesFolderList {
    margin: 0;
    padding: 10px 0;
}

.favorite-folder-item {
    margin-bottom: 8px;
    padding: 12px 15px;
    border: none;
    border-radius: 10px;
    background-color: var(--container-bg-color);
    font-size: 1em;
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.favorite-folder-item:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

.favorite-folder-item::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L8.6 3.9A2 2 0 0 0 6.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
    opacity: .7;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.favorite-folder-item .folder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#favoritesBreadcrumbs {
    margin-bottom: 15px;
    padding: 10px 15px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    font-size: .9em;
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-inset);
    word-break: break-all;
}

#favoritesBreadcrumbs a {
    color: var(--button-primary-bg);
    text-decoration: none;
    cursor: pointer;
}

#favoritesBreadcrumbs a:hover {
    text-decoration: underline;
}

#favoritesBreadcrumbs span {
    margin: 0 5px;
    color: var(--secondary-text-color);
}

.favorite-item-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 10px;
}

.favorite-item-checkbox {
    margin-top: 15px;
}

.manage-mode .question-bubble,
.manage-mode .message {
    flex-grow: 1;
}

.favorite-item-checkbox {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
    transition: all .2s ease-in-out;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.favorite-item-checkbox::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    width: 5px;
    height: 10px;
    border: solid var(--button-primary-text);
    opacity: 0;
    /* PREMIUM UX: Уменьшаем масштаб в 0 перед появлением */
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    /* Пружинный отскок для галочки */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    border-width: 0 3px 3px 0;
}

.favorite-item-checkbox:checked {
    background-color: var(--accent-color);
    /* PREMIUM UX: Пульсирующее кольцо при выборе */
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-color: var(--accent-color);
    transition: all 0.2s ease;
}

.favorite-item-checkbox:checked::after {
    opacity: 1;
    /* Возврат в нормальный масштаб с пружиной */
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

#confirmModal .share-target-list {
    max-height: 250px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow-y: auto;
    text-align: left;
    list-style: none;
}

#confirmModal .share-target-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    transition: background-color .2s;
    cursor: pointer;
    border-bottom: 1px solid var(--dashed-border-color);
}

#confirmModal .share-target-item:last-child {
    border-bottom: none;
}

#confirmModal .share-target-item:hover {
    background-color: var(--input-hover-bg-color);
}

#selectAllFavoritesBtn {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

#selectAllFavoritesBtn:hover {
    background: var(--button-primary-hover-bg);
}

.tab-actions-container button:disabled {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    opacity: .5;
    cursor: not-allowed;
}

.tab-actions-container button:disabled:hover {
    background-color: var(--button-secondary-bg);
}

#tabActionsContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    padding: 3px;
    border-radius: 8px;
    background-color: var(--input-bg-color);
}

#tabActionsContainer button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-size: 1em;
    transition: background-color 0.2s, transform .1s;
    cursor: pointer;
}

#tabActionsContainer button:hover:not(:disabled) {
    background-color: var(--button-secondary-hover-bg);
    transform: translateY(-1px);
}

#tabActionsContainer button i {
    width: 20px;
    height: 20px;
}

.download-dropdown {
    position: relative;
}

.download-dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    /* ENTERPRISE UX: Заменяем display: none на opacity/visibility для плавной анимации */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
    min-width: 200px;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    /* Glassmorphism */
    background-color: color-mix(in srgb, var(--container-bg-color) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px var(--shadow-color);
    will-change: transform, opacity;
}

.download-dropdown-content.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.download-dropdown-content a {
    display: block;
    padding: 10px 15px;
    border-radius: 4px;
    color: var(--text-color);
    text-decoration: none;
}

.download-dropdown-content a:hover {
    background-color: var(--input-hover-bg-color);
}

#selectAllFavoritesBtn {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

#deleteSelectedFavoritesBtn {
    background-color: var(--chat-accent);
    color: #fff;
}

#tabActionsContainer .manage-action-info {
    margin: 0 5px;
    color: var(--secondary-text-color);
    font-size: .9em;
    user-select: none;
}

#favoritesManageActionsContainer {
    display: none !important;
}

.favorite-folder-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.favorite-folder-item .folder-name {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 12px;
}

.favorite-folder-item .folder-actions-btn {
    flex-shrink: 0;
    margin-left: auto;
    padding: 5px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.favorite-folder-item:hover .folder-actions-btn {
    color: var(--primary);
}

.folder-actions-menu {
    position: absolute;
    top: 38px;
    right: 15px;
    z-index: 100;
    display: none;
    min-width: 160px;
    padding: 5px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    box-shadow: 0 4px 12px #00000026;
}

.folder-actions-menu.show {
    display: block;
}

.folder-actions-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: .9em;
    text-decoration: none;
}

.folder-actions-menu a:hover {
    background-color: var(--button-secondary-bg);
}

.folder-actions-menu a.delete {
    color: var(--feedback-incorrect-text);
}

.folder-actions-menu a i {
    width: 16px;
    height: 16px;
    opacity: .7;
}

body.claude-mode .option-vote-btn.correct {
    background-color: var(--feedback-correct-bg) !important;
    color: var(--feedback-correct-text) !important;
    font-weight: 500;
    border-color: var(--feedback-correct-border) !important;
}

.chat-sidebar {
    height: 100% !important;
    overflow-y: auto !important;
}

.advanced-send-btn.is-stoppable {
    /* background: var(--accent) !important; */
    opacity: 1 !important;
    transform: none;
    cursor: pointer;
}

.advanced-send-btn.is-stoppable:hover {
    background: #c0392b !important;
    transform: scale(1.1);
}

.sidebar-placeholder-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--input-bg-color);
}

/* ================================================================== */
/* === PREMIUM UX: ИДЕАЛЬНЫЕ СКЕЛЕТОНЫ ЗАГРУЗКИ (APPLE STYLE)     === */
/* ================================================================== */

.sidebar-placeholder-item::after,
.placeholder-bubble::after,
.search-result-loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    pointer-events: none; /* Защита от перехвата кликов */
    
    /* ENTERPRISE UX: Vercel Laser Shimmer (Скошенный жесткий луч) */
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 40%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0.05) 60%, 
        transparent 100%
    ) !important;
    
    /* Сдвиг луча под углом для динамики */
    transform: skewX(-20deg) translateZ(0);
    
    animation: skeletonShimmerSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    animation-delay: var(--shimmer-delay, 0s) !important;
    will-change: transform;
}

/* Приглушаем яркость блика для темных тем, чтобы не "выжигало" глаза */
body.dark-mode .sidebar-placeholder-item::after,
body.dark-mode .placeholder-bubble::after,
body.dark-mode .search-result-loader::after,
body.synthwave-mode .sidebar-placeholder-item::after,
body.synthwave-mode .placeholder-bubble::after,
body.synthwave-mode .search-result-loader::after,
body.oled-mode .sidebar-placeholder-item::after,
body.oled-mode .placeholder-bubble::after,
body.oled-mode .search-result-loader::after {
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.02) 20%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.02) 80%, 
        transparent 100%
    ) !important;
}

@keyframes skeletonShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Универсальный skeleton-shimmer для карточек */
.skeleton-card {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}
.skeleton-card .skeleton-shimmer {
    position: relative;
    border-radius: inherit;
}
.skeleton-card .skeleton-shimmer::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 150%; height: 100%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.08) 30%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0.08) 70%,
        transparent 100%
    );
    animation: skeletonShimmerSweep 1.6s ease-in-out infinite;
    animation-delay: var(--shimmer-delay, 0s);
    /* Аппаратное ускорение и стартовая позиция */
    transform: translateX(-100%) translateZ(0);
}
.dark-mode .skeleton-card .skeleton-shimmer::after,
.oled-mode .skeleton-card .skeleton-shimmer::after,
.synthwave-mode .skeleton-card .skeleton-shimmer::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.03) 30%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.03) 70%,
        transparent 100%
    );
}
@keyframes skeletonShimmerSweep {
    /* Оптимизированная GPU анимация без Layout Thrashing */
    to { transform: translateX(100%) translateZ(0); }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-card .skeleton-shimmer::after { animation: none; }
}

.placeholder-avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--border-color);
}

.placeholder-text {
    width: 70%;
    height: 12px;
    border-radius: 4px;
    background-color: var(--border-color);
}

.message-placeholder {
    display: flex;
    max-width: 75%;
    margin-bottom: 20px;
    animation: messageSlideIn .5s ease backwards;
}

.message-placeholder.mine {
    width: 30%;
    min-height: 50px;
    align-self: flex-end;
}

.message-placeholder.other {
    width: 60%;
    min-height: 80px;
    align-self: flex-start;
}

.placeholder-bubble {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 18px;
    overflow: hidden;
    background-color: var(--input-bg-color);
}

.placeholder-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-color) 30%, transparent), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.8s infinite;
}

.message-placeholder.mine .placeholder-bubble {
    border-bottom-right-radius: 6px;
}

.message-placeholder.other .placeholder-bubble {
    border-bottom-left-radius: 6px;
}

.placeholder-line {
    height: 12px;
    border-radius: 4px;
    background-color: var(--border-color);
}

/* ENTERPRISE UX: Восстановление отсутствующих стилей скелетона ИИ */
.ios-skeleton-line {
    height: 14px;
    margin-bottom: 10px;
    border-radius: 6px;
    background-color: var(--border-color);
    opacity: 0.5;
    position: relative;
    overflow: hidden;
}

.ios-skeleton-line::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    transform: translateX(-100%) translateZ(0);
    animation: skeletonShimmerSweep 1.5s infinite;
}

body.dark-mode .ios-skeleton-line::after,
body.synthwave-mode .ios-skeleton-line::after,
body.oled-mode .ios-skeleton-line::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
}

.search-result-loader {
    position: relative;
    padding: 10px 15px;
    overflow: hidden;
    border-bottom: 1px solid var(--dashed-border-color);
}

.search-result-loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-color) 30%, transparent), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.8s infinite;
}

.search-result-loader .placeholder-title {
    width: 40%;
    height: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: var(--border-color);
}

.search-result-loader .placeholder-snippet {
    width: 80%;
    height: 12px;
    border-radius: 4px;
    background-color: var(--border-color);
}

.result-card-actions .translate-engine-container {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    border: none;
    border-radius: 50px;
    background: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: box-shadow .2s ease-in-out;
}

.result-card-actions .translate-engine-container:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

.result-card-actions .translate-engine-container button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-color);
    transition: background-color .2s;
}

.result-card-actions .translate-search-result-btn {
    width: 36px;
    border-radius: 50% 0 0 50%;
}

.result-card-actions .translate-search-result-btn:hover {
    color: #3498db;
}

.translate-engine-toggle-search {
    position: relative;
    width: 28px;
    border-radius: 0 50% 50% 0;
}

.translate-engine-toggle-search::before {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 0;
    width: 1px;
    background-color: var(--border-color);
}

.translate-engine-toggle-search::after {
    content: "";
    width: 0;
    height: 0;
    transition: transform .2s ease;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--text-color);
}

.translate-engine-container.open .translate-engine-toggle-search::after {
    transform: rotate(180deg);
}

.favorites-pagination-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding: 5px;
    user-select: none;
    /* border-top: 1px solid var(--border-color); */
}

.favorites-pagination-controls .pagination-btn {
    min-width: 38px;
    height: 38px;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.favorites-pagination-controls .pagination-btn:hover:not(:disabled) {
    color: var(--accent-color);
    box-shadow: var(--neumorph-shadow-inset);
}

.favorites-pagination-controls .pagination-btn.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 700;
    box-shadow: none;
}

.favorites-pagination-controls .pagination-btn:disabled {
    box-shadow: none;
    opacity: .5;
    cursor: not-allowed;
}

.reading-item-number {
    margin-right: 10px;
    color: var(--secondary-text-color);
    font-weight: 600;
}

.advanced-chat-modal.favorites-reading-active .advanced-chat-header {
    display: none;
}

.advanced-chat-modal.favorites-reading-active .channel-content-header {
    display: flex;
}

.advanced-chat-modal.favorites-reading-active .channel-content-tabs {
    display: none;
}

.advanced-chat-modal.favorites-reading-active #chatSearchInput {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

.advanced-chat-modal.favorites-reading-active #tabActionsContainer {
    justify-content: flex-start;
    margin-bottom: 0;
    padding: 3px 20px;
    background-color: var(--container-bg-color);
    border-bottom: 1px solid var(--border-color);
}

.advanced-chat-modal.favorites-reading-active .standard-fav-action {
    display: none !important;
}


.favorites-search-active #favoritesPaginationControls,
.favorites-search-active #favoritesFolderView {
    display: none !important;
}

/* === Standalone "Избранное" page layout === */
#favoritesArea .favorites-page-toolbar {
    margin: 10px 0;
}

#favoritesArea .favorites-search-input {
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background-color: var(--input-bg-color, var(--container-bg-color));
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-inset);
    font-size: 0.95em;
    outline: none;
}

#favoritesArea .favorites-search-input:focus {
    box-shadow: var(--neumorph-shadow-inset), 0 0 0 2px var(--accent-color);
}

#favoritesArea #favActionsContainer,
#favoritesArea #favoritesManageActionsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-direction: column;
    justify-content: space-evenly;
}

#favoritesArea.favorites-reading-active .favorites-page-toolbar {
    display: none;
}

#favoritesArea.favorites-reading-active .standard-fav-action {
    display: none !important;
}


@media (max-width: 768px) {
    .channel-content-header #chatSearchInput:not(.hidden) {
        display: block !important;
        width: 100%;
        margin: 2px;
        border-radius: 8px;
    }
}

#fileActionsModalTitle {
    line-height: 1.4;
    word-break: break-all;
}

@media (max-width: 768px) {
    .ai-chat-input-area {
        gap: 0px;
        padding: 3px 8px 15px 8px;
    }


    /* Уменьшаем отступы для телефона, чтобы вместить кнопки */
    #chatInput, #aiChatInput {
        min-height: 80px !important;
        padding: 10px 60px 10px 12px !important;
        font-size: 16px !important; /* 16px предотвращает авто-зум на iOS */
    }


    /* Делаем кнопки чуть компактнее на телефоне (32x32) */
    .advanced-send-btn {
        width: 32px !important;
        height: 32px !important;
    }

    /* Корректируем расположение по этажам для мобильных */
    #sendBtn, #aiChatSendBtn {
        bottom: 5px !important;
        right: 10px !important;
        top: auto !important;
        box-shadow: var(--neumorph-shadow-soft);
    }
    #chatTextMagicBtn, #aiChatTextMagicBtn { 
        top: 8px !important; 
        right: 8px !important; 
        bottom: auto !important;
    }
    #chatMicBtn, #aiChatMicBtn { 
        top: 8px !important; 
        right: 44px !important; 
        bottom: auto !important;
    }
    .ai-chat-main-input-row .ai-input-actions .input-action-btn i,
    .advanced-send-btn i {
        width: 18px !important;
        height: 18px !important;
    }
}


.ai-main-controls .ai-setting-group {
    cursor: pointer;
}


@media (max-width: 768px) {
    .ai-chat-modal-content {
        width: 100%;
        max-width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        max-height: 100%;
        border-radius: 0;
    }
}

#aiImageStyleButton {
    width: 30% !important;
    display: flex;
    margin-top: 0px;
    padding: 1px 1px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: .6em;
    cursor: pointer;
    text-align: left;
}
 
 


.advanced-chat-body {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.chat-grid-container {
    display: grid;
    grid-template-columns: var(--chat-sidebar-width) 1fr;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 600px) {

    
}

.pagination-info {
    margin: 0;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--secondary-text-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease, background-color .2s ease;
    cursor: pointer;
}

.pagination-info:hover {
    background-color: var(--button-hover-bg-color);
    color: var(--primary);
}

.undo-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px; /* iOS Pill shape */
    overflow: hidden;
    /* PREMIUM UX: Frosted Glass */
    background-color: color-mix(in srgb, var(--container-bg-color) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.05);
    opacity: 0;
    /* Подготовка к пружинному появлению */
    transform: translate(-50%, 30px) scale(0.9);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.3);
    will-change: transform, opacity;
}

.undo-toast.show {
    opacity: 1;
    /* Точное позиционирование по центру с отскоком */
    transform: translate(-50%, 0) scale(1);
}

.undo-toast-message {
    flex-grow: 1;
}

.undo-toast-button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--primary);
    font-weight: 700;
    transition: background-color .2s;
    cursor: pointer;
}

.undo-toast-button:hover {
    background-color: var(--button-hover-bg-color);
}

.undo-toast::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--primary);
    animation: shrink 5s linear forwards;
}

@keyframes shrink {
    from {
        width: 100%;
    }

    to {
        width: 0;
    }
}


@media screen and (max-width: 600px) {

    .download-dropdown-content,
    .import-dropdown-content {
        right: auto;
        left: 50%;
        width: 90vw;
        min-width: auto;
        box-sizing: border-box;
        transform: translateX(-50%);
    }
}
 


.parser-tab-content-wrapper {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    min-height: 0;
}

.parser-tab-content.active {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    min-height: 0;
}

 

.question-card-item:hover {
    background-color: var(--input-hover-bg-color);
}

.question-card-item.active {
    background: var(--button-primary-bg);
    color: var(--secondary-text-color);
    border-color: var(--button-primary-bg);
}

.question-card-item .delete-card-btn {
    color: inherit;
}


.question-card-item.active .delete-card-btn:hover {
    color: var(--accent);
}


 


 

.answer-option-editor input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--button-success-bg);
}


 

.answer-option-editor .delete-answer-btn:hover {
    color: var(--accent);
}

#addAnswerOptionBtn {
    font-size: .9em;
}

 

@media (max-width: 600px) {
    .question-constructor-layout {
        flex-direction: column;
    }

 
 
 
}

 
 

#questionCardList {
    flex-grow: 1;
    min-height: 0;
    margin: 0 0 10px;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

 

 

 
.question-card-item .delete-card-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--secondary-text-color);
    opacity: .6;
    transition: opacity 0.2s, color .2s;
    cursor: pointer;
}

.question-card-item:hover .delete-card-btn {
    opacity: 1;
}

.question-card-item .delete-card-btn:hover {
    color: var(--accent);
}

.add-question-card-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft);
    transition: all .2s ease-in-out;
}

.add-question-card-btn:hover {
    box-shadow: var(--neumorph-shadow-inset);
}

 

.question-editor-container textarea {
    padding: 15px;
    border: none;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
    transition: all .2s ease-in-out;
}

.answers-editor-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}


 

.answer-option-editor input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 10px;
    border: solid var(--button-primary-text);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: all .2s ease-in-out;
    border-width: 0 3px 3px 0;
}

 

.answer-option-editor input[type="checkbox"]:checked::before {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.answer-option-editor input[type="text"] {
    flex-grow: 1;
    margin: 0;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
}

 

.answer-option-editor .delete-answer-btn:hover {
    color: var(--accent);
}

#addAnswerOptionBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
}

 

/* Устаревший конфликтный блок удален */

body.claude-mode .question-card-item.active {
    background-color: var(--input-hover-bg-color);
    color: var(--heading-color);
}

body.synthwave-mode .question-card-item.active {
    background-color: var(--accent-color);
    color: var(--button-primary-text);
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.radio-group input[type="radio"] {
    position: relative;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 50%;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
    transition: all .2s ease-in-out;
    -webkit-appearance: none; appearance: none;
    appearance: none;
}

.radio-group input[type="radio"]::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--button-primary-text);
    opacity: 0;
    transform: scale(0.3);
    /* PREMIUM UX: Пружинный взрыв внутри радиокнопки */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.radio-group input[type="radio"]:checked {
    background-color: var(--accent-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 20%, transparent); /* Мягкое кольцо фокуса вокруг */
    border-color: var(--accent-color);
    /* ENTERPRISE UX: Implosion Burst (Схлопывание радиокнопки при выборе) */
    animation: radioImplode 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: all 0.2s ease;
}

@keyframes radioImplode {
    0% { transform: scale(1); }
    40% { transform: scale(0.85); box-shadow: 0 0 0 0 transparent; }
    100% { transform: scale(1); }
}

.radio-group input[type="radio"]:checked::after {
    opacity: 1;
    transform: scale(1);
}


/* PREMIUM UX: Эффект глубокого размытия (Cross-Blur) при смене версий */
.ai-generated-image.is-switching,
.ambilight-glow.is-switching {
    opacity: 0 !important; /* Уводим в полную прозрачность */
    filter: blur(15px) brightness(1.2) !important; /* Сильный блюр со вспышкой */
    transform: scale(0.96) !important; /* Слегка вдавливаем картинку внутрь */
    /* Быстрый уход (150ms) */
    transition: opacity 0.09s ease-out, filter 0.15s ease-out, transform 0.15s ease-out !important;
    pointer-events: none;
}

.quiz-filename-display {
    display: block;
    width: 100%;
    margin: 0 0 1px;
    padding-bottom: 15px;
    color: var(--secondary-text-color);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    opacity: .9;
    border-bottom: 1px solid var(--border-color);
    word-wrap: break-word;
}

#categoryCheckboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0 40px;
    width: 100%;
    max-height: 350px;
    margin-top: 15px;
    padding: 5px 15px;
    border: none;
    box-sizing: border-box;
    overflow-y: auto;
}

@media (max-width: 480px) {
    #categoryCheckboxes {
        grid-template-columns: 1fr;
    }
}

.category-checkbox-label {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100%;
    padding: 6px 0;
    cursor: pointer;
}

.category-checkbox-label span {
    /* Удалите или переопределите следующие строки: */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */

    /* Убедитесь, что текст может переноситься: */
    white-space: normal; /* Значение по умолчанию, позволяет перенос строк */
    overflow: visible;   /* Значение по умолчанию, показывает весь контент */
    text-overflow: clip; /* Значение по умолчанию, не добавляет троеточие */

    /* Остальные ваши стили */
    flex-grow: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text-color);
    font-size: .95em;
    font-weight: 500;
    text-align: left;
}

#categoryCheckboxes input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0 !important;
    transform: scale(0.85);
    transform-origin: left center;
}


@keyframes drawMarker {
    to {
        background-size: 100% 100%;
    }
}


.nav-center-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1px 10px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}


#toggleHighlightBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    border: none;
    border-radius: 23px;
    background: none;
    color: var(--secondary-text-color);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    transition: all .2s ease;
    cursor: pointer;
}

#toggleHighlightBtn:hover {
    background-color: var(--bg-color);
}

#toggleHighlightBtn i {
    width: 18px;
    height: 18px;
}

#toggleHighlightBtn.active {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

#searchNavigation .nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none !important;
    border-radius: 50%;
    background-color: transparent !important;
    color: var(--secondary-text-color);
    box-shadow: none !important;
    transition: background-color 0.2s, color .2s;
}

#searchNavigation .nav-btn:not(:disabled):hover {
    background-color: #0000000d !important;
    color: var(--text-color);
}

#searchNavigation .nav-btn:disabled {
    background-color: transparent !important;
    opacity: .3;
    cursor: default;
}

#searchNavigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    width: 100%;
}

.search-input-wrapper input {
    width: 100%;
    padding-right: 35px !important;
    box-sizing: border-box;
}

.clear-search-btn {
    position: absolute;
    right: 5px;
    margin: 5px;
    top: 0px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    transition: all .2s ease;
    cursor: pointer;
}

.clear-search-btn:hover {
    background-color: #0000000d;
    color: var(--text-color);
}

.clear-search-btn.hidden {
    display: none !important;
}

.clear-search-btn i {
    display: block;
    width: 16px;
    height: 16px;
}

#newSearchContainer .search-input-wrapper {
    flex-grow: 1;
    margin-right: 10px;
}

#newSearchQueryInput {
    margin: 0;
}


.srs-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
    border: none;
    border-radius: 10px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: .85em;
    font-weight: 600;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: transform 0.1s, box-shadow .1s;
    cursor: pointer;
}

.srs-btn:active {
    box-shadow: var(--neumorph-shadow-inset);
    transform: scale(0.98);
}

/* Маркер ранее выбранной оценки (юзер вернулся к карточке). */
.srs-btn-previously-chosen {
    box-shadow: var(--neumorph-shadow-inset), 0 0 0 2px var(--accent) inset;
    position: relative;
}
.srs-btn-previously-chosen::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.85em;
    opacity: 0.9;
}

.srs-btn .srs-label {
    display: block;
    margin-bottom: 4px;
}

/* Клавиатурный значок на SRS-кнопках (1..4). На тач-устройствах смысла мало,
   но и места занимает немного, поэтому скрываем только на узких экранах. */
.srs-btn .srs-key {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.78em;
    font-weight: 700;
    opacity: 0.7;
    vertical-align: 1px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
body.dark-mode .srs-btn .srs-key,
body.synthwave-mode .srs-btn .srs-key,
body.oled-mode .srs-btn .srs-key {
    background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 480px) {
    .srs-btn .srs-key { display: none; }
}

.srs-btn .srs-time {
    font-size: .75em;
    font-weight: 400;
    opacity: .7;
}

.srs-btn.again {
    border-bottom: 3px solid #ff4d4d;
}

.srs-btn.hard {
    border-bottom: 3px solid orange;
}

.srs-btn.good {
    border-bottom: 3px solid #3498db;
}

.srs-btn.easy {
    border-bottom: 3px solid #2ecc71;
}

@media (max-width: 480px) {
    .srs-controls {
        gap: 5px;
    }

    .srs-btn {
        padding: 10px 5px;
        font-size: .8em;
    }
}

.decks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.deck-card {
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.deck-card:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: translateY(-6px) !important;
    border-color: var(--accent-color);
}


.deck-stats-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 8px;
    background: var(--input-bg-color);
    flex-direction: column-reverse;
}

.deck-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 1.2em;
    font-weight: 700;
}

.stat-label {
    color: var(--secondary-text-color);
    font-size: .8em;
}

.quick-nav-btn {
    border: 3px solid transparent;
}

.quick-nav-btn.repeat-again {
    background-color: #ff4d4d26;
    border-color: #ff4d4d;
}

.quick-nav-btn.repeat-hard {
    background-color: #ffa50026;
    border-color: orange;
}

.quick-nav-btn.repeat-good {
    background-color: #3498db26;
    border-color: #3498db;
}


#questionContainer {
    min-height: 300px;
    box-sizing: border-box;
    transition: opacity .15s ease-out;
}

.modal-corner-delete-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    transition: all .2s ease;
    cursor: pointer;
}

.modal-corner-delete-btn:hover {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    /* PREMIUM UX: Игривое вращение деструктивной кнопки (Playful Rotate) */
    transform: scale(1.1) rotate(90deg);
}

.modal-corner-delete-btn i {
    width: 20px;
    height: 20px;
}


body:not(.dark-mode):not(.synthwave-mode):not(.glass-dark) .channel-item:not(.active) .channel-settings-btn,
body:not(.dark-mode):not(.synthwave-mode):not(.glass-dark) .channel-item:not(.active) .channel-settings-btn i,
body:not(.dark-mode):not(.synthwave-mode):not(.glass-dark) .channel-item:not(.active) .channel-settings-btn svg {
    color: #555 !important;
    stroke: #555 !important;
}

body:not(.dark-mode):not(.synthwave-mode):not(.glass-dark) .channel-item:not(.active) .channel-settings-btn:hover,
body:not(.dark-mode):not(.synthwave-mode):not(.glass-dark) .channel-item:not(.active) .channel-settings-btn:hover i,
body:not(.dark-mode):not(.synthwave-mode):not(.glass-dark) .channel-item:not(.active) .channel-settings-btn:hover svg {
    background-color: #0000000d !important;
    color: #dc3545 !important;
    stroke: #dc3545 !important;
}

.deck-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    margin-bottom: 15px;
    padding: 0 5px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--input-bg-color);
    text-align: center;
    box-shadow: 0 1px 0 var(--border-color), 0 2px 0 var(--input-bg-color), 0 3px 0 var(--border-color), 0 4px 0 var(--input-bg-color), 0 5px 0 var(--border-color), 0 6px 0 var(--input-bg-color), 0 7px 0 var(--border-color), 0 7px 0 var(--input-bg-color), 0 12px 8px #0000004d;
    transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.deck-card:hover {
    box-shadow: 0 1px 0 var(--border-color), 0 2px 0 var(--input-bg-color), 0 3px 0 var(--border-color), 0 4px 0 var(--input-bg-color), 0 5px 0 var(--border-color), 0 6px 0 var(--input-bg-color), 0 7px 0 var(--border-color), 0 8px 0 var(--input-bg-color), 0 20px 8px #0003;
    transform: translateY(-5px);
    border-color: var(--accent-color);
}


@media (hover: none) {
    }

.endless-mode-btn {
    position: relative;
    height: 120px !important;
    padding: 20px 10px;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-soft);
}

.endless-mode-btn:hover {
    box-shadow: var(--neumorph-shadow-inset);
    transform: none;
}

/* === Бейдж со счётчиком ошибок на главной кнопке «Марафон» === */
.endless-error-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 28px;
    height: 28px;
    padding: 0px 3px;
    display: inline-flex;
    align-items: center;
    font-family: system-ui;
    justify-content: center;
    background: #dc3545;
    color: #fff;
    font-size: 0.8em;
    font-weight: 700 !important;
    line-height: 1;
    border-radius: 25px;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.35);
    pointer-events: none;
    z-index: 2;
    animation: endlessBadgePulse 0.4s ease-out;
}

.endless-error-badge.hidden {
    display: none;
}

@keyframes endlessBadgePulse {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* === Бейдж со счётчиком рядом с вкладкой «Работа над ошибками» === */
.tab-error-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    background: #dc3545;
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1;
    border-radius: 9px;
    vertical-align: middle;
}

.tab-error-badge.hidden {
    display: none;
}

#endlessLivesContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #f003;
    border-radius: 8px;
    background: #ff00001a;
}

.lives-label {
    color: var(--text-color);
    font-weight: 600;
}

.lives-hearts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lives-hearts i {
    width: 24px;
    height: 24px;
    transition: all .3s ease;
}

.lives-hearts .heart-filled {
    color: #ff4757;
    fill: #ff4757;
    filter: drop-shadow(0 2px 4px #ff47574d);
}

.lives-hearts .heart-empty {
    color: var(--secondary-text-color);
    opacity: .5;
}

@keyframes shakeHeart {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-5deg);
    }

    75% {
        transform: translateX(5px) rotate(5deg);
    }

    100% {
        transform: translateX(0);
    }
}


.segmented-control {
    display: flex;
    margin-top: 5px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg-color);
}

.segment-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: .9em;
    transition: all .2s;
    cursor: pointer;
}

.segment-btn.active {
    background: var(--bg-color);
    color: var(--text-color);
    font-weight: 600;
    box-shadow: 0 2px 5px #0000001a;
}

.game-over-title {
    color: #e74c3c !important;
    font-size: 2em;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.roadmap-btn {
    position: relative;
    height: 120px !important;
    padding: 20px 10px;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-soft);
}

.roadmap-btn i {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
}

.roadmap-container {
    background-color: var(--bg-color);
    -webkit-overflow-scrolling: touch;
}

.roadmap-container.active {
    cursor: grabbing;
}

 

#mermaidGraph svg {
    display: block;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    transition: width .1s linear, height .1s linear;
}


@media (max-width: 768px) {
    
}

@media (min-width: 992px) {
    

    

    

    
}

.roadmap-container {
    border-top: none;
}

.roadmap-container.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.roadmap-header-wrapper {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px;
    width: 100%;
    height: 50px;
    /* Слева теперь стоит кнопка «назад» — ей нужен свой отступ от края. */
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--input-bg-color);
    border-bottom: 1px solid var(--border-color);
}

/* Раньше здесь и ниже стояло align-items: flex-end — вкладки прижимались к
   нижней границе шапки, потому что активная вкладка сливалась с холстом.
   Тех вкладок больше нет: шапка рендерит пилюли .rm-cat со скруглением по
   всем углам, и прижимать их не к чему. Остался только перекос — соседние
   кнопки центрируются, а этот блок падал вниз. Центрируем всё. */
.roadmap-tabs-scroll-area {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    height: 100%;
    padding-bottom: 0;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.roadmap-tabs-scroll-area::-webkit-scrollbar {
    display: none;
}

.roadmap-tabs-container {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
}

.roadmap-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    max-width: 200px;
    height: 38px;
    margin-bottom: 0;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    background-color: var(--container-bg-color);
    color: var(--secondary-text-color);
    font-size: .9em;
    transition: all .2s ease;
    cursor: pointer;
    user-select: none;
}


/* Круглые кнопки шапки: библиотека и «новая карта». Форма и размер у них
   общие — расходятся только цветом. Раньше одна была 40px инлайном, другая
   32px отсюда, и рядом с ними «назад» на 36px: три кнопки на трёх высотах. */
.roadmap-header-wrapper > .add-roadmap-tab-btn {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50%;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: background-color .2s ease, transform .2s ease;
    cursor: pointer;
}

.roadmap-header-wrapper > .add-roadmap-tab-btn:hover {
    transform: translateY(-1px);
}

.roadmap-header-wrapper > .add-roadmap-tab-btn i,
.roadmap-header-wrapper > .add-roadmap-tab-btn svg {
    width: 19px !important;
    height: 19px !important;
    stroke-width: 2.5px;
}

#roadmapCommunityBtn {
    background-color: #8b5cf6 !important;
}

#roadmapCommunityBtn:hover {
    background-color: #7c4ddd !important;
}

#addNewRoadmapTabBtn {
    background-color: var(--button-success-bg) !important;
}

#addNewRoadmapTabBtn:hover {
    background-color: var(--button-success-hover-bg) !important;
}

/* Все пять элементов шапки — «назад», две пилюли категорий, библиотека и
   «новая карта» — теперь одной высоты в 36px и центрируются общим правилом
   .roadmap-header-wrapper { align-items: center }. Никаких align-self и
   подгонок на пиксель: разъезжаться больше нечему. */
.roadmap-header-wrapper > .roadmap-nav-btn,
.roadmap-header-wrapper > .add-roadmap-tab-btn {
    align-self: center;
    margin: 0 !important;
}

.roadmap-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}


.roadmap-wrapper-fixed {
    position: relative;
    z-index: 5;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    margin-top: -1px;
    border: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    background-color: var(--bg-color);
    border-top: none;
}

.roadmap-container {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    margin-top: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.roadmap-container.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.roadmap-floating-action-btn {
    position: absolute;
    left: 5px;
    bottom: 5px;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #ffffffe6;
    color: var(--secondary-text-color);
    box-shadow: 0 2px 8px #00000026;
    transition: all .2s ease;
    cursor: pointer;
}

.dark-mode .roadmap-floating-action-btn,
.synthwave-mode .roadmap-floating-action-btn {
    background-color: #1e1e1ee6;
}

.roadmap-floating-action-btn:hover {
    background: var(--button-primary-bg);
    color: #fff;
    box-shadow: 0 4px 12px #0003;
    transform: rotate(90deg);
}

.roadmap-floating-action-btn.hidden {
    display: none;
}

.roadmap-nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--container-bg-color);
    color: var(--secondary-text-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease;
    cursor: pointer;
}

.roadmap-nav-btn:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-inset);
}

body.synthwave-mode .roadmap-nav-btn {
    background-color: #0f172a99;
    border-color: var(--border-color);
}

body.synthwave-mode .roadmap-nav-btn:hover {
    background-color: #0f172ae6;
    color: var(--text-color);
    border-color: var(--accent);
}

/* Блок остался пустым: кнопка «назад» переехала в шапку, к вкладкам.
   Правило держим — контейнер ещё может встретиться в старой разметке,
   и без него он развалил бы поток. */

/* Кнопка в ряду вкладок: не сжимается и не растягивается по высоте ряда. */
.roadmap-header-wrapper > .roadmap-nav-btn {
    flex: 0 0 auto;
    width: 36px !important;
    height: 36px !important;
}

.roadmap-score {
    display: inline-block;
    margin-top: 4px;
    color: #ffd700;
    font-size: .9em;
    font-weight: 700;
    text-shadow: 1px 1px 2px #00000080;
}

.saved-session-card.is-endless {
    background: linear-gradient(to right, #9b59b60d, transparent);
    border-left: 5px solid #9b59b6;
}

.session-icon-endless {
    display: inline-block;
    margin-right: 8px;
    color: #9b59b6;
    vertical-align: middle;
}

.saved-session-card.is-flashcards {
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 0 var(--border-color), 0 2px 0 var(--input-bg-color), 0 3px 0 var(--border-color), 0 4px 0 var(--input-bg-color), 0 5px 0 var(--border-color), 0 10px 20px #0003;
    transition: transform .2s ease;
    border-left: 1px solid var(--border-color);
}

.saved-session-card.is-flashcards:hover {
    transform: translateY(-3px);
}

.session-icon-flashcards {
    display: inline-block;
    margin-right: 8px;
    color: var(--accent-color);
    vertical-align: middle;
}

.saved-session-name {
    display: flex;
    align-items: center;
}

.roadmap-floating-action-btn.top-right {
    top: 15px;
    right: 15px;
    bottom: auto;
    /* Базовое правило задаёт left: 5px — без сброса кнопка "Обзор"
       прилипала к левому краю, а не к правому. */
    left: auto;
}

/* Панель угловых действий карты знаний.
   Раньше каждая кнопка позиционировалась по-своему (класс left:5px/bottom:5px,
   инлайн left:20px/bottom:20px, инлайн right:70px) и они налезали друг на друга.
   Теперь это один ряд с общей раскладкой и одинаковыми размерами. */
/* Нижний ряд действий карты: слева работа с самой картой, справа — учебное.
   Обе группы лежат здесь, а не позиционируются каждая от своего края: пока
   они были независимы, между ними просто оставался зазор, и любая новая
   кнопка съедала его до наложения. В общем ряду места не хватает — группы
   переносятся друг под друга. */
.roadmap-bottom-row {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 20;
    display: flex;
    /* wrap-reverse, а не wrap: при нехватке места первая строка остаётся
       внизу, а вторая надстраивается над ней — ряд привязан по bottom и
       растёт вверх. Побочный эффект: поперечная ось перевёрнута, и «прижать
       к низу» здесь означает flex-start, а не flex-end. Важно, когда одна
       группа в две строки (раскрытое «ещё»), а вторая в одну. */
    flex-wrap: wrap-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    /* Ряд — только рамка для групп: клики по пустому месту между ними должны
       доставать до холста, иначе он перестанет тянуться пальцем. */
    pointer-events: none;
}

.roadmap-bottom-row > * {
    pointer-events: auto;
}

.roadmap-corner-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* Раскрытое «ещё» добавляет кнопок, и группа может не поместиться в свою
       половину ряда. Переносим лишние на строку ВЫШЕ: wrap-reverse вместе с
       выравниванием ряда по нижнему краю оставляет основную строку на месте,
       а новые кнопки надстраивает над ней. */
    flex-wrap: wrap-reverse;
    justify-content: flex-start;
    row-gap: 8px;
    /* Группа отдаёт место соседней, но не уже своего содержимого: сжимать
       кнопки нельзя — они и так по 38px. */
    min-width: 0;
    flex: 0 1 auto;
}

/* !important здесь осознанно: в проекте по кнопкам карты есть более ранние
   ID-правила с !important, и без него они выбивают кнопки из ряда. */
.roadmap-corner-actions .roadmap-floating-action-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
}

.roadmap-corner-actions .roadmap-floating-action-btn i,
.roadmap-corner-actions .roadmap-floating-action-btn svg {
    width: 19px;
    height: 19px;
}

/* Базовый полупрозрачный #ffffffe6 на тёмных темах превращался в еле заметное
   пятно с тусклой иконкой. Даём кнопкам плотную поверхность во всех темах. */
.roadmap-corner-actions .roadmap-floating-action-btn {
    background-color: var(--container-bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important;
}

body.dark-mode .roadmap-corner-actions .roadmap-floating-action-btn,
body.synthwave-mode .roadmap-corner-actions .roadmap-floating-action-btn,
body.oled-mode .roadmap-corner-actions .roadmap-floating-action-btn {
    background-color: #2a2a2e !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #e8e8ea !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .6) !important;
}

.roadmap-corner-actions .roadmap-floating-action-btn:hover {
    background-color: var(--button-primary-bg) !important;
    border-color: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
}

/* Режим правки — состояние, а не разовое действие: кнопка остаётся
   подсвеченной всё время, пока карту можно менять. */
.roadmap-corner-actions .roadmap-floating-action-btn.is-active {
    background-color: var(--button-primary-bg) !important;
    border-color: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-primary-bg) 28%, transparent) !important;
}

/* Кнопка правки — карандаш; разворот на 90° тут читался бы как сбой */
.roadmap-corner-actions #roadmapEditMapBtn:hover {
    transform: none;
}

/* ==================================================================
   РУЧНАЯ ПРАВКА МЕНТАЛЬНОЙ КАРТЫ
   ------------------------------------------------------------------
   Горячие клавиши mind-elixir сами себя не объясняют, поэтому в режиме
   правки показываем подсказку: без неё человек видит редактируемую карту
   и не знает, чем добавить узел.
   ================================================================== */
.mindmap-edit-hint {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 24px);
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--container-bg-color);
    color: var(--secondary-text-color);
    font-size: .82em;
    line-height: 1.3;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
    animation: mm-hint-in .3s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes mm-hint-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.mindmap-edit-hint kbd {
    padding: 1px 6px;
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: .95em;
    font-weight: 600;
}

.mindmap-edit-hint-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mindmap-edit-hint-close:hover {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
}

.mindmap-edit-hint-close svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
    .mindmap-edit-hint {
        top: 6px;
        padding: 6px 10px;
        font-size: .74em;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mindmap-edit-hint { animation: none; }
}

/* Панель команд правки: те же действия, что горячими клавишами и правой
   кнопкой, но доступные пальцем. Сидит по центру снизу — вне угла, где
   уже стоят кнопки карты. */
.mindmap-edit-bar {
    position: absolute;
    left: 50%;
    /* Нижняя кромка холста уже занята: слева кнопки карты (.roadmap-corner-actions,
       38px + 10px отступа), справа — тулбар mind-elixir. По центру они сходятся на
       узком экране, и панель правки ложилась прямо на них. Поднимаем её над этим
       рядом — она перестаёт делить с ними одну строку. */
    bottom: 62px;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-width: calc(100% - 20px);
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: var(--container-bg-color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
    animation: mm-bar-in .28s cubic-bezier(.22, .61, .36, 1) both;
}

.mindmap-edit-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Второй ряд — связи, порядок и оформление. Он легче первого: это
   не то, чем карту строят, а то, чем её приводят в вид. */
.mindmap-edit-row.is-secondary {
    margin-top: 3px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
}

.mindmap-edit-row.is-secondary .mindmap-edit-btn {
    width: 36px;
    height: 34px;
    border-radius: 9px;
    color: var(--secondary-text-color);
}
.mindmap-edit-row.is-secondary .mindmap-edit-btn svg { width: 16px; height: 16px; }
.mindmap-edit-row.is-secondary .mindmap-edit-btn:hover { color: var(--text-color); }

/* Ждём второй узел связи — кнопка держится нажатой, чтобы состояние
   не жило только в тосте, который через секунду исчезнет. */
.mindmap-edit-bar.is-linking .mindmap-edit-btn[data-cmd="link"] {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

/* Отменять нечего — кнопка это показывает. Активная кнопка в пустой
   истории ощущается как поломка: нажал, ничего не произошло. */
.mindmap-edit-btn.is-disabled {
    opacity: .3;
    pointer-events: none;
}

/* Состояние автосохранения. Строка появляется на время и уходит:
   постоянная надпись «сохранено» ничего не сообщает. */
.mindmap-edit-status {
    display: block;
    min-height: 14px;
    padding: 0 8px 2px;
    color: var(--secondary-text-color);
    font-size: .7em;
    line-height: 14px;
    text-align: center;
    opacity: 0;
    transition: opacity .25s ease;
}

.mindmap-edit-status.is-saving,
.mindmap-edit-status.is-saved { opacity: 1; }
.mindmap-edit-status.is-saved { color: var(--button-success-bg, #27ae60); }

/* Подпись выбранного узла. Пока ничего не выбрано — приглушена и
   говорит об этом прямо, а не молчит. */
.mindmap-edit-target {
    display: block;
    max-width: 100%;
    padding: 3px 12px 4px;
    overflow: hidden;
    color: var(--text-color);
    font-size: .78em;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mindmap-edit-target.is-empty {
    color: var(--secondary-text-color);
    font-weight: 500;
}

/* Команды работают по выбранному узлу — пока его нет, они неактивны.
   Отмена относится ко всей карте и гаснуть не должна. */
.mindmap-edit-bar:not(.has-selection) .mindmap-edit-btn:not([data-cmd="undo"]) {
    opacity: .34;
}

@keyframes mm-bar-in {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

body.dark-mode .mindmap-edit-bar,
body.synthwave-mode .mindmap-edit-bar,
body.oled-mode .mindmap-edit-bar {
    background: #2a2a2e;
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
}

.mindmap-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.mindmap-edit-btn svg { width: 19px; height: 19px; }

.mindmap-edit-btn:hover { background: var(--input-hover-bg-color); }
.mindmap-edit-btn:active { transform: scale(.92); }

/* Добавление подтемы — главное действие в правке, поэтому оно выделено */
.mindmap-edit-btn.is-primary {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}
.mindmap-edit-btn.is-primary:hover {
    background: color-mix(in srgb, var(--button-primary-bg) 85%, #000);
}

.mindmap-edit-btn.is-danger { color: var(--button-danger-bg, #e74c3c); }
.mindmap-edit-btn.is-danger:hover {
    background: color-mix(in srgb, var(--button-danger-bg, #e74c3c) 15%, transparent);
}

/* Отмена стоит особняком: она не про выделенный узел, а про всю карту */
.mindmap-edit-btn[data-cmd="undo"] {
    margin-left: 4px;
    border-left: 1px solid var(--border-color);
    border-radius: 0 999px 999px 0;
    padding-left: 4px;
    width: 44px;
}

@media (max-width: 720px) {
    .mindmap-edit-bar {
        /* Кнопки карты здесь ниже (bottom: 6px) и мельче — панели хватает 54px */
        bottom: 54px;
        padding: 5px;
    }
    /* Ужимаем расстояние между кнопками, а не между подписью и рядом */
    .mindmap-edit-row { gap: 2px; }
    /* Палец требует 44px, но пять таких кнопок не влезают в узкий экран
       вместе с отступами — на совсем малой ширине ужимаем до 40px. */
    .mindmap-edit-btn { width: 44px; height: 44px; }
}

@media (max-width: 380px) {
    .mindmap-edit-btn { width: 40px; height: 40px; }
    .mindmap-edit-btn svg { width: 17px; height: 17px; }
    .mindmap-edit-btn[data-cmd="undo"] { width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .mindmap-edit-bar { animation: none; }
    .mindmap-edit-btn:active { transform: none; }
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ ДЕЙСТВИЙ НАД СООБЩЕНИЕМ
   ------------------------------------------------------------------
   Здесь принципиально ДРУГОЙ подход, чем в меню: этот ряд висит под
   каждым сообщением, и непрерывное движение превратило бы переписку из
   сотни реплик в мельтешение — а заодно нагрузило бы кадр анимациями,
   которых никто не просил. Поэтому жест играет только на наведении и
   ровно один раз: это подтверждение, что кнопка живая, а не украшение.
   ================================================================== */
/* Корневой <svg> живёт в вёрстке как обычный элемент: он масштабируется
   при наведении (scale(1.2) rotate(5deg)), и центром вращения должна быть
   ЕГО середина. Задавать здесь 12px 12px нельзя — это координаты внутри
   значка (viewBox 24×24), а сам элемент в кнопке ~16px, и точка отсчёта
   уходила в угол: значок разрастался вбок и вылезал за кнопку. */
.ai-action-btn svg {
    transform-box: view-box;
    transform-origin: 50% 50%;
}

/* А вот детям значка нужна именно система координат значка.
   fill-box (как было раньше) брал собственную коробку заливки элемента, а
   дети lucide — обводочные <line> и <path> без заливки: их коробка вырождена
   в точку, и поворот относительно неё уносил фигуру прочь. В view-box
   координаты общие для всех детей, центр значка — ровно 12,12. */
.ai-action-btn svg > * {
    transform-box: view-box;
    transform-origin: 12px 12px;
}

@media (hover: hover) and (pointer: fine) {
    /* Ответить — стрелка внутри облака отскакивает влево */
    @keyframes act-reply {
        0%   { transform: translateX(0); }
        45%  { transform: translateX(-2.5px); }
        100% { transform: translateX(0); }
    }
    .ai-action-btn:hover svg[data-lucide="message-square-reply"] > *:nth-child(2) {
        animation: act-reply .45s cubic-bezier(.4, 0, .3, 1);
    }

    /* Копировать — верхний лист приподнимается и ложится обратно */
    @keyframes act-copy {
        0%   { transform: translate(0, 0); }
        45%  { transform: translate(1.6px, -1.6px); }
        100% { transform: translate(0, 0); }
    }
    .ai-action-btn:hover svg[data-lucide="copy"] > *:nth-child(1) {
        animation: act-copy .45s cubic-bezier(.4, 0, .3, 1);
    }

    /* Сравнение A/B — весы качнулись и встали */
    @keyframes act-tip {
        0%   { transform: rotate(0deg); }
        35%  { transform: rotate(-7deg); }
        70%  { transform: rotate(4deg); }
        100% { transform: rotate(0deg); }
    }
    .ai-action-btn:hover svg[data-lucide="scale"] > *:nth-child(3) {
        transform-box: view-box;
        transform-origin: 12px 7px;
        animation: act-tip .6s ease-in-out;
    }

    /* Ещё — три точки перекатываются слева направо */
    @keyframes act-dot {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-2px); }
    }
    .ai-action-btn:hover svg[data-lucide="more-horizontal"] > *:nth-child(3) { animation: act-dot .4s ease-in-out; }
    .ai-action-btn:hover svg[data-lucide="more-horizontal"] > *:nth-child(1) { animation: act-dot .4s ease-in-out .07s; }
    .ai-action-btn:hover svg[data-lucide="more-horizontal"] > *:nth-child(2) { animation: act-dot .4s ease-in-out .14s; }

    /* Перегенерировать — стрелки делают оборот */
    @keyframes act-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
    .ai-action-btn:hover svg[data-lucide="refresh-cw"] {
        animation: act-spin .7s cubic-bezier(.4, 0, .3, 1);
    }

    /* Озвучить — волны расходятся от динамика по очереди */
    @keyframes act-wave {
        0%, 100% { opacity: 1; transform: translateX(0); }
        50%      { opacity: .4; transform: translateX(1.5px); }
    }
    .ai-action-btn:hover svg[data-lucide="volume-2"] > *:nth-child(2) { animation: act-wave .6s ease-in-out; }
    .ai-action-btn:hover svg[data-lucide="volume-2"] > *:nth-child(3) { animation: act-wave .6s ease-in-out .1s; }

    /* Удалить — крышка приподнимается */
    @keyframes act-lid {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50%      { transform: translateY(-1.5px) rotate(-8deg); }
    }
    .ai-action-btn:hover svg[data-lucide="trash-2"] > *:nth-child(4),
    .ai-action-btn:hover svg[data-lucide="trash-2"] > *:nth-child(5) {
        transform-box: view-box;
        transform-origin: 12px 5px;
        animation: act-lid .5s ease-in-out;
    }

    /* Править — карандаш пишет короткий штрих */
    @keyframes act-pen {
        0%, 100% { transform: translate(0, 0); }
        50%      { transform: translate(1.2px, -1.2px); }
    }
    .ai-action-btn:hover svg[data-lucide="pencil"] > * {
        animation: act-pen .45s ease-in-out;
    }

    /* Магический редактор — палочка взмахивает, искры вспыхивают.
       Непрерывного жеста здесь быть не должно: эта кнопка повторяется у
       каждого сообщения, и все палочки шли бы в одну фазу — рябь по всей
       переписке. Постоянно живёт только палочка помощника текста, она на
       экране одна. */
    @keyframes act-wand {
        0%, 100% { transform: rotate(0deg); }
        40%      { transform: rotate(-18deg); }
        70%      { transform: rotate(6deg); }
    }
    @keyframes act-wand-spark {
        0%   { opacity: .3; transform: scale(.5); }
        45%  { opacity: 1;  transform: scale(1.3); }
        100% { opacity: 1;  transform: scale(1); }
    }
    .ai-action-btn:hover svg[data-lucide="wand-2"] > *:nth-child(1),
    .ai-action-btn:hover svg[data-lucide="wand-2"] > *:nth-child(2),
    .ai-action-btn:hover svg[data-lucide="wand-sparkles"] > *:nth-child(1),
    .ai-action-btn:hover svg[data-lucide="wand-sparkles"] > *:nth-child(2) {
        transform-box: view-box;
        transform-origin: 3px 20px;
        animation: act-wand .5s cubic-bezier(.4, 0, .3, 1);
    }
    .ai-action-btn:hover svg[data-lucide="wand-2"] > *:nth-child(n+3),
    .ai-action-btn:hover svg[data-lucide="wand-sparkles"] > *:nth-child(n+3) {
        animation: act-wand-spark .5s ease-out;
    }
    .ai-action-btn:hover svg[data-lucide="wand-2"] > *:nth-child(4),
    .ai-action-btn:hover svg[data-lucide="wand-sparkles"] > *:nth-child(4) { animation-delay: .05s; }
    .ai-action-btn:hover svg[data-lucide="wand-2"] > *:nth-child(5),
    .ai-action-btn:hover svg[data-lucide="wand-sparkles"] > *:nth-child(5) { animation-delay: .1s; }
    .ai-action-btn:hover svg[data-lucide="wand-2"] > *:nth-child(6),
    .ai-action-btn:hover svg[data-lucide="wand-sparkles"] > *:nth-child(6) { animation-delay: .15s; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-action-btn:hover svg,
    .ai-action-btn:hover svg > * { animation: none !important; }
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ ВКЛАДОК КОНВЕРТЕРА И ЗАГОЛОВКА АКТИВНОСТИ
   ------------------------------------------------------------------
   Здесь иконки стояли мёртвыми, хотя вокруг всё живёт. Анимируем только
   активную вкладку: четыре шевелящихся значка в ряду — это рябь, а на
   выбранной вкладке движение подсказывает, что это текущий режим.
   ================================================================== */
.parser-tab svg {
    transform-box: fill-box;
    transform-origin: center;
}
.parser-tab svg > * {
    transform-box: fill-box;
    transform-origin: center;
}

/* Конвертер — в документе проступают строки текста (3-5 элементы) */
@keyframes pt-lines {
    0%, 14%   { opacity: .25; transform: scaleX(.55); }
    30%, 76%  { opacity: 1;   transform: scaleX(1); }
    92%, 100% { opacity: .25; transform: scaleX(.55); }
}
.parser-tab.active svg[data-lucide="file-text"] > *:nth-child(n+3) {
    transform-origin: left center;
    animation: pt-lines 4.2s ease-in-out infinite;
}
.parser-tab.active svg[data-lucide="file-text"] > *:nth-child(4) { animation-delay: .18s; }
.parser-tab.active svg[data-lucide="file-text"] > *:nth-child(5) { animation-delay: .36s; }

/* Конструктор — ключ подкручивает: короткий рабочий поворот и возврат */
@keyframes pt-wrench {
    0%, 55%, 100% { transform: rotate(0deg); }
    68%           { transform: rotate(-26deg); }
    80%           { transform: rotate(6deg); }
}
.parser-tab.active svg[data-lucide="wrench"] {
    animation: pt-wrench 3.8s cubic-bezier(.4, 0, .3, 1) infinite;
}

/* ИИ по теме — лампочка загорается: сначала колба, следом цоколь */
@keyframes pt-bulb-glow {
    0%, 45%   { opacity: .45; }
    58%, 82%  { opacity: 1; }
    95%, 100% { opacity: .45; }
}
.parser-tab.active svg[data-lucide="lightbulb"] > *:nth-child(1) {
    animation: pt-bulb-glow 3.6s ease-in-out infinite;
}
.parser-tab.active svg[data-lucide="lightbulb"] > *:nth-child(2),
.parser-tab.active svg[data-lucide="lightbulb"] > *:nth-child(3) {
    animation: pt-bulb-glow 3.6s ease-in-out infinite;
    animation-delay: .12s;
}

/* Активность обучения — по кардиограмме бежит разрыв.
   Порядок в dasharray именно такой: 48 рисуем, 8 пропускаем. При обратном
   (8 48) видна только короткая чёрточка, а сама линия пропадает — иконка
   перестаёт читаться. Ту же ошибку до этого исправляли на «Марафоне». */
@keyframes act-pulse {
    0%   { stroke-dashoffset: 56; }
    100% { stroke-dashoffset: 0; }
}
svg[data-lucide="activity"] > *,
svg[data-icon="activity"] > * {
    stroke-dasharray: 48 8;
    animation: act-pulse 2.8s linear infinite;
}

/* ==================================================================
   ПОДРОБНАЯ СТАТИСТИКА ОБУЧЕНИЯ
   ------------------------------------------------------------------
   Всё построено на долях и сравнении: голое число «изучено 24» не
   говорит ни что из этого закреплено, ни что придёт завтра. Полосы и
   столбики отвечают на это без единой цифры, которую нужно толковать.
   ================================================================== */
.stats-panel {
    margin-top: 14px;
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
}

.stats-panel > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 2px;
    color: var(--text-color);
    font-size: .9em;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.stats-panel > summary::-webkit-details-marker { display: none; }
.stats-panel > summary > svg:first-of-type {
    flex: 0 0 auto; width: 16px; height: 16px;
    color: var(--button-primary-bg);
}
.stats-panel > summary > span { flex: 1; }

.stats-panel-caret {
    flex: 0 0 auto; width: 15px; height: 15px;
    color: var(--secondary-text-color);
    transition: transform .2s ease;
}
.stats-panel[open] .stats-panel-caret { transform: rotate(180deg); }

.stats-panel-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 6px 2px 4px;
}

.stats-loading {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: .84em;
    font-style: italic;
}

.stats-block-title {
    margin-bottom: 9px;
    color: var(--secondary-text-color);
    font-size: .74em;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* --- Состав памяти: одна полоса из долей --- */
.stats-bar {
    display: flex;
    gap: 2px;
    height: 10px;
    margin-bottom: 10px;
}
.stats-bar-seg { border-radius: 3px; min-width: 3px; }

.stats-bar-seg.is-new,        .stats-dot.is-new        { background: #3b82f6; }
.stats-bar-seg.is-learning,   .stats-dot.is-learning   { background: #f59e0b; }
.stats-bar-seg.is-review,     .stats-dot.is-review     { background: #10b981; }
.stats-bar-seg.is-relearning, .stats-dot.is-relearning { background: #ef4444; }

.stats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.stats-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--secondary-text-color);
    font-size: .8em;
}
.stats-legend-item b { color: var(--text-color); font-variant-numeric: tabular-nums; }
.stats-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* --- Прогноз на неделю --- */
.stats-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: end;
}
.stats-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.stats-day-bar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 54px;
    border-radius: 6px;
    background: var(--input-bg-color);
    overflow: hidden;
}
.stats-day-bar > span {
    width: 100%;
    border-radius: 6px 6px 0 0;
    background: var(--button-primary-bg);
    transition: height .4s cubic-bezier(.22, .61, .36, 1);
}
/* Сегодня выделено: это единственный столбик, с которым можно что-то сделать */
.stats-day:first-child .stats-day-bar > span { background: var(--button-danger-bg, #e74c3c); }

.stats-day-count {
    color: var(--text-color);
    font-size: .74em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-height: 1em;
}
.stats-day-name {
    color: var(--secondary-text-color);
    font-size: .66em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- Долг по колодам --- */
/* ==================================================================
   ЧТО НАКОПЛЕНО и ЧЕМ ЗАНИМАЛСЯ
   ------------------------------------------------------------------
   Статистика считала одни карточки, хотя учебная работа идёт по всем
   разделам. Эти два блока показывают материал (колоды, карты, карточки)
   и занятия по видам — тесты, уроки, атлас и прочее.
   ================================================================== */
.stats-lib-grid {
    display: grid;
    /* auto-fit, чтобы на узком экране карточки складывались в одну
       колонку без отдельного медиазапроса. */
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
}

.stats-lib-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg-color);
}
.stats-lib-card svg {
    width: 17px;
    height: 17px;
    margin-bottom: 2px;
    color: var(--secondary-text-color);
}
.stats-lib-card b {
    color: var(--text-color);
    font-size: 1.35em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stats-lib-label {
    color: var(--text-color);
    font-size: .8em;
    font-weight: 600;
}
.stats-lib-sub {
    color: var(--secondary-text-color);
    font-size: .74em;
}

/* Занятия по видам: значок, название, полоса, число.
   Прежде названия висели по центру колонки, полосы были короткими, а числа
   бледнее подписей — колонка цифр не читалась вовсе. Теперь это таблица:
   название слева, число справа и крупно, строки разделены линией. */
.stats-kind-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 90px 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}
.stats-kind-row:last-of-type { border-bottom: none; }
.stats-kind-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text-color);
}
.stats-kind-icon svg { width: 15px; height: 15px; }
.stats-kind-name {
    color: var(--text-color);
    font-size: .88em;
    text-align: left;
    /* «Визуальный тренажёр» не помещался и резался многоточием: обрубок
       вместо подписи. Пусть лучше займёт вторую строку */
    white-space: normal;
    line-height: 1.25;
}
/* Полоса вдавлена в панель, как поля ввода: наклеенная сверху читалась
   чужеродно рядом с остальным приложением */
.stats-kind-bar {
    height: 10px;
    border-radius: 6px;
    background: transparent;
    box-shadow: var(--neumorph-shadow-inset);
    padding: 2px;
}
.stats-kind-bar > span {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: var(--button-primary-bg);
    transition: width .4s cubic-bezier(.22, .61, .36, 1);
}
.stats-kind-count {
    color: var(--text-color);
    font-size: .95em;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.stats-kinds-foot {
    margin-top: 10px;
    color: var(--secondary-text-color);
    font-size: .76em;
}

@media (max-width: 720px) {
    .stats-kind-row { grid-template-columns: 22px minmax(0, 1fr) 64px 40px; gap: 8px; }
    .stats-deck-row { grid-template-columns: minmax(0, 1fr) 64px 40px; gap: 8px; }
}

/* Долги набраны так же, как занятия: две разные полосы в одной панели
   читались как два разных приложения */
.stats-deck-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}
.stats-deck-row:last-child { border-bottom: none; }
.stats-deck-name {
    color: var(--text-color);
    font-size: .88em;
    text-align: left;
    /* Имя колоды длиннее строки — переносим, а не рубим многоточием */
    white-space: normal;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.stats-deck-bar {
    height: 10px;
    border-radius: 6px;
    background: transparent;
    box-shadow: var(--neumorph-shadow-inset);
    padding: 2px;
}
.stats-deck-bar > span {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: var(--button-primary-bg);
    transition: width .4s cubic-bezier(.22, .61, .36, 1);
}
.stats-deck-count {
    color: var(--text-color);
    font-size: .95em;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Удержание --- */
.stats-retention-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.stats-retention-line b {
    color: var(--button-success-bg, #27ae60);
    font-size: 1.6em;
    font-variant-numeric: tabular-nums;
}
.stats-retention-line span {
    color: var(--secondary-text-color);
    font-size: .84em;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .stats-deck-row { grid-template-columns: minmax(0, 1fr) 60px auto; gap: 8px; }
    .stats-day-bar { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .stats-day-bar > span,
    .stats-deck-bar > span { transition: none; }
}

/* ==================================================================
   ВЫБОР КОЛОДЫ ПЕРЕД ПОВТОРЕНИЕМ
   ================================================================== */


/* «Все вместе» — запасной путь, а не первый выбор: отделяем чертой */
.smart-deck-pick.is-all {
    margin-top: 6px;
    border-style: dashed;
    background: transparent;
    color: var(--secondary-text-color);
}

/* ==================================================================
   УПРАВЛЕНИЕ ДОСТУПОМ К КУРСУ
   ------------------------------------------------------------------
   Переключатель говорил только «Закрытый» — что это значит для
   ученика и чем отличается второе положение, догадаться было негде.
   ================================================================== */
.access-status-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.access-status-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.access-status-label {
    color: var(--secondary-text-color);
    font-size: .76em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#courseAccessTypeLabel {
    color: var(--text-color);
    font-size: 1.02em;
    font-weight: 600;
}

.access-status-hint {
    margin: 4px 0 0;
    color: var(--secondary-text-color);
    font-size: .8em;
    line-height: 1.45;
}

.access-status-row .ai-toggle-switch { flex: 0 0 auto; margin-top: 4px; }

/* ==================================================================
   РЕДАКТИРОВАНИЕ КУРСА
   ------------------------------------------------------------------
   Поля были голой стопкой инпутов с подписью только в placeholder —
   она исчезает, как только начали печатать, и потом уже не вспомнить,
   что это за строка. Даём каждому полю постоянную подпись.
   ================================================================== */
/* На широком экране окно было колонкой в 480px с превью обложки во всю
   высоту — получалась узкая полоса на треть экрана, где всё приходится
   листать. Обложка уходит влево, поля вправо: оба столбца видны сразу. */
.course-edit-content {
    max-width: 480px;
}

.course-edit-grid { text-align: left; }

@media (min-width: 760px) {
    .course-edit-content { max-width: 720px; }
    .course-edit-grid {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }
    .course-edit-cover { margin-bottom: 0; }
    /* Ссылка и кнопка загрузки в узкой колонке — друг под другом */
    .course-edit-cover .course-cover-row { flex-direction: column; align-items: stretch; }
    .course-edit-cover .course-cover-row .auth-input { flex: 1 1 auto; }
}

/* Превью не должно съедать высоту окна: пропорции сохраняем кадрированием */
.course-edit-cover .cover-image-preview {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

.course-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    text-align: left;
}

.course-edit-label {
    color: var(--secondary-text-color);
    font-size: .76em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.course-edit-hint {
    color: var(--secondary-text-color);
    font-size: .8em;
    line-height: 1.45;
    opacity: .9;
}

.course-edit-field .auth-input { margin: 0; }

.course-cover-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.course-cover-row .auth-input { flex: 1 1 200px; min-width: 0; }
.course-cover-row .custom-file-upload-btn-small { flex: 0 0 auto; margin: 0; }

/* Действия над курсом целиком — отдельно от «Отмена / Сохранить»:
   те завершают правку, а эти открывают другие экраны. */
.course-edit-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.course-edit-actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    font-size: .9em;
}

.course-edit-actions .btn svg { flex: 0 0 auto; width: 17px; height: 17px; }
.course-edit-actions .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==================================================================
   БИБЛИОТЕКА КАРТ: ДВЕ КАТЕГОРИИ
   ------------------------------------------------------------------
   В библиотеке лежат два разных вида карт: ментальные конспекты и
   учебные планы. В одном списке они путались — на карточке вид не
   написан, а импортировав план вместо конспекта, человек получает
   совсем не то, что ждал.
   ================================================================== */
.community-cat-row {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0 0 12px;
    padding: 4px;
    border-radius: 12px;
    background: var(--input-bg-color);
}

.community-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--secondary-text-color);
    font-family: inherit;
    font-size: .86em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.community-cat:hover { color: var(--text-color); }
.community-cat.is-active {
    background: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.community-cat-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--container-bg-color);
    color: var(--secondary-text-color);
    font-size: .82em;
    font-variant-numeric: tabular-nums;
}
.community-cat.is-active .community-cat-count {
    background: color-mix(in srgb, var(--button-primary-bg) 18%, transparent);
    color: var(--text-color);
}

@media (max-width: 520px) {
    .community-cat { padding: 8px 8px; font-size: .8em; gap: 5px; }
}

/* Карточки библиотеки сплющивались: строка сетки получалась короче
   содержимого, а overflow: hidden срезал описание и кнопки. Двойная
   страховка — строка растёт по содержимому, а карточка не привязана к
   высоте строки жёстким height: 100%. */
.community-maps-grid {
    grid-auto-rows: max-content !important;
}
.community-map-card {
    height: auto !important;
    min-height: 0 !important;
}
/* Описание не должно съедаться флексом: три строки — и достаточно. */
.community-map-card .map-card-desc {
    flex-grow: 0 !important;
    min-height: 0;
}
/* Кнопкам нужен свой воздух — раньше их обрезало нижней кромкой. */
.community-map-card .map-card-actions {
    flex: 0 0 auto;
    padding-bottom: 14px;
}

/* Разделы предметных областей: строка чипов под видом карт. */
.community-topic-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0 0 12px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.community-topic-row::-webkit-scrollbar { display: none; }

.community-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--secondary-text-color);
    font-family: inherit;
    font-size: .8em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.community-topic:hover { color: var(--text-color); }
.community-topic.is-active {
    border-color: var(--button-primary-bg);
    background: color-mix(in srgb, var(--button-primary-bg) 14%, transparent);
    color: var(--text-color);
}
.community-topic-count {
    color: var(--secondary-text-color);
    font-size: .88em;
    font-variant-numeric: tabular-nums;
}

/* Значок карты от самого сайта: отличает её от пользовательских.
   Зелёная галочка читается как «проверено» — ровно то, что значок и
   означает: карту собрал сам сервис, а не случайный автор. */
.map-official-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #16a34a 14%, transparent);
    color: #15803d;
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.map-official-badge svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #16a34a;
}

/* На тёмных темах тёмно-зелёный проваливается в фон. */
body.dark-mode .map-official-badge,
body.synthwave-mode .map-official-badge,
body.oled-mode .map-official-badge {
    background: color-mix(in srgb, #22c55e 16%, transparent);
    color: #4ade80;
}
body.dark-mode .map-official-badge svg,
body.synthwave-mode .map-official-badge svg,
body.oled-mode .map-official-badge svg { color: #22c55e; }

/* ==================================================================
   КНОПКИ КАРТЫ: РАЗДЕЛЕНИЕ ПО УГЛАМ И ПОДПИСИ
   ------------------------------------------------------------------
   Одиннадцать значков стояли одним рядом без подписей: соседями
   оказывались «пересоздать карту» и «вернуть в центр» — разрушающее
   рядом с безобидным, и ни по одному не понять, что он делает.
   Управление видом уехало в свой угол, у всех кнопок появилась
   подпись, которая всплывает сразу, а не через секунду.
   ================================================================== */
/* Управление видом разнесено по двум углам.
   Справа — справка, центровка и раскладка: то, что относится к карте целиком.
   Слева (см. .roadmap-view-actions-left) — оглавление, мини-карта и полный
   экран: всё, чем человек ищет себя на карте. Разные задачи — разные углы,
   и ни один столбец не вырастает в ленту из шести значков. */
.roadmap-view-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roadmap-view-actions-left {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Учебные действия — в правой части нижнего ряда, напротив работы с картой.
   Так рука тянется к разному по разным углам, а не перебирает один ряд. */
.roadmap-study-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    row-gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
}

.roadmap-study-actions .roadmap-floating-action-btn,
.roadmap-view-actions .roadmap-floating-action-btn,
.roadmap-view-actions-left .roadmap-floating-action-btn {
    position: static !important;
    top: auto !important; right: auto !important;
    bottom: auto !important; left: auto !important;
    flex: 0 0 auto;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
}
.roadmap-view-actions .roadmap-floating-action-btn i,
.roadmap-view-actions .roadmap-floating-action-btn svg,
.roadmap-view-actions-left .roadmap-floating-action-btn i,
.roadmap-view-actions-left .roadmap-floating-action-btn svg,
.roadmap-study-actions .roadmap-floating-action-btn i,
.roadmap-study-actions .roadmap-floating-action-btn svg {
    width: 19px;
    height: 19px;
}

/* Подпись у правого нижнего угла — над кнопкой и прижата к правому краю,
   иначе у крайней кнопки она уезжает за холст. */
.roadmap-study-actions .roadmap-floating-action-btn[data-label]::before {
    bottom: calc(100% + 7px);
    right: 0;
}

/* Счётчик тем к повторению переехал вместе с кнопкой. */
.roadmap-study-actions #roadmapReviewBtn { position: relative !important; }

/* --- Подпись у кнопки ---------------------------------------------
   Системная подсказка появляется через секунду и на телефоне не
   показывается вовсе, поэтому назначение кнопок оставалось загадкой.
   Своя всплывает сразу и только при наведении или фокусе с клавиатуры
   — на касание не реагирует, чтобы не мешать пальцу. */
/* !important обязателен: контейнеры кнопок ставят им position: static
   !important (чтобы перебить старые ID-правила), а подпись позиционируется
   от кнопки. Без этого она отсчитывалась от всего ряда, схлопывалась в
   узкий столбик и текст читался по буквам сверху вниз. */
.roadmap-floating-action-btn[data-label] { position: relative !important; }

.roadmap-floating-action-btn[data-label]::before {
    content: attr(data-label);
    position: absolute;
    z-index: 40;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--text-color);
    color: var(--container-bg-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}

/* Нижний ряд подписывается сверху, верхний столбец — слева: иначе
   подпись уезжает за край холста. */
.roadmap-corner-actions .roadmap-floating-action-btn[data-label]::before {
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
}
/* Правая группа: подпись слева от кнопки — в сторону холста. */
.roadmap-view-actions .roadmap-floating-action-btn[data-label]::before {
    right: calc(100% + 7px);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Левая группа: подпись справа. Зеркально, иначе текст упирается в край
   экрана и обрезается. */
.roadmap-view-actions-left .roadmap-floating-action-btn[data-label]::before {
    left: calc(100% + 7px);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

@media (hover: hover) {
    .roadmap-floating-action-btn[data-label]:hover::before { opacity: 1; }
}
.roadmap-floating-action-btn[data-label]:focus-visible::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .roadmap-floating-action-btn[data-label]::before { transition: none; }
}

/* ==================================================================
   МНОЖЕСТВЕННЫЙ ВЫБОР УЗЛОВ
   ------------------------------------------------------------------
   Рамкой узлы выделялись и раньше — но только правой кнопкой мыши, о
   чём никто не знал, а на телефоне её нет вовсе.
   ================================================================== */
.mindmap-edit-btn.is-active {
    background: color-mix(in srgb, var(--button-primary-bg) 24%, transparent);
    color: var(--text-color);
}

.mindmap-multi-bar {
    position: absolute;
    left: 50%;
    bottom: 96px;
    z-index: 30;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100vw - 24px);
    padding: 7px 8px 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--container-bg-color);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
}

.mindmap-multi-count {
    color: var(--text-color);
    font-size: .82em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mindmap-multi-bar button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: none;
    border-radius: 999px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: .78em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .16s ease, opacity .16s ease;
}
.mindmap-multi-bar button:hover { background: var(--input-hover-bg-color); }
.mindmap-multi-bar button svg { width: 14px; height: 14px; }
.mindmap-multi-bar button.is-danger { color: #dc2626; }
body.dark-mode .mindmap-multi-bar button.is-danger { color: #f08a8a; }
.mindmap-multi-bar button.is-disabled {
    opacity: .4;
    pointer-events: none;
}
.mindmap-multi-bar [data-multi="clear"] { padding: 6px; }

/* На узких экранах подписи не влезают — оставляем значки. */
@media (max-width: 560px) {
    .mindmap-multi-bar { padding-left: 11px; gap: 4px; }
    .mindmap-multi-bar button span { display: none; }
    .mindmap-multi-bar button { padding: 6px 9px; }
}

/* Подписи у кнопок панели правки — те же правила, что и у плавающих.
   Двенадцать значков в два ряда без подписей узнать было неоткуда. */
.mindmap-edit-btn[data-label] { position: relative; }
.mindmap-edit-btn[data-label]::before {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--text-color);
    color: var(--container-bg-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}
@media (hover: hover) {
    .mindmap-edit-btn[data-label]:hover::before { opacity: 1; }
}
.mindmap-edit-btn[data-label]:focus-visible::before { opacity: 1; }
/* Второй ряд подписывается снизу: сверху над ним первый ряд кнопок. */
.mindmap-edit-row.is-secondary .mindmap-edit-btn[data-label]::before {
    bottom: auto;
    top: calc(100% + 7px);
}
@media (prefers-reduced-motion: reduce) {
    .mindmap-edit-btn[data-label]::before { transition: none; }
}

/* ==================================================================
   ЛЕГЕНДА КНОПОК КАРТЫ
   ------------------------------------------------------------------
   Подпись у кнопки всплывает при наведении — на телефоне наведения нет,
   и значки остаются загадкой. Легенда показывает их списком. Пока её не
   открывали ни разу, кнопка справки подсвечивается: среди девяти
   значков её иначе не заметят.
   ================================================================== */
.roadmap-floating-action-btn.needs-attention {
    animation: rmHelpPulse 2.4s ease-in-out infinite;
}
.roadmap-floating-action-btn.needs-attention::after {
    content: '';
    position: absolute;
    top: -3px; right: -3px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--accent, #e74c3c);
}

@keyframes rmHelpPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #e74c3c) 55%, transparent); }
    55%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent, #e74c3c) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .roadmap-floating-action-btn.needs-attention { animation: none; }
}

.mindmap-help-panel {
    position: absolute;
    top: 56px;
    right: 10px;
    z-index: 40;
    width: min(330px, calc(100vw - 20px));
    max-height: min(72vh, 560px);
    padding: 0 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--container-bg-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    overflow-y: auto;
    animation: mmKeysIn .16s ease;
}
@media (prefers-reduced-motion: reduce) {
    .mindmap-help-panel { animation: none; }
}

.mindmap-help-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--container-bg-color);
    color: var(--text-color);
    font-size: .92em;
    font-weight: 700;
}
.mindmap-help-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
}
.mindmap-help-close:hover { background: var(--input-hover-bg-color); color: var(--text-color); }
.mindmap-help-close svg { width: 15px; height: 15px; }

.mindmap-help-group {
    padding: 12px 12px 4px;
    color: var(--secondary-text-color);
    font-size: .7em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mindmap-help-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 12px;
}
.mindmap-help-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg-color);
    color: var(--text-color);
}
.mindmap-help-icon svg { width: 16px; height: 16px; }
.mindmap-help-name {
    color: var(--text-color);
    font-size: .84em;
    font-weight: 600;
    line-height: 1.3;
}
.mindmap-help-note {
    margin-top: 1px;
    color: var(--secondary-text-color);
    font-size: .76em;
    line-height: 1.4;
}

.mindmap-help-foot {
    margin-top: 6px;
    padding: 10px 12px 2px;
    border-top: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    font-size: .74em;
    line-height: 1.45;
}
/* На телефоне про наведение писать незачем — его там нет. */
@media (hover: none) {
    .mindmap-help-foot { display: none; }
}

@media (max-width: 520px) {
    .mindmap-help-panel { left: 8px; right: 8px; width: auto; top: 52px; }
}

/* --- Узел ведёт к материалу приложения --------------------------------
   Тема на карте и колода по этой теме жили в разных разделах и друг о
   друге не знали. Привязка делает узел входом в то, что уже накоплено. */
.mindmap-side-link-box {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.mindmap-side-open-deck {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-family: inherit;
    font-size: .9em;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}
.mindmap-side-open-deck:hover { filter: brightness(1.08); }
.mindmap-side-open-deck svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* Длинное имя колоды не должно ломать кнопку на три строки. */
.mindmap-side-open-deck span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Вид материала и сам материал — два списка в ряд. На узкой панели второй
   уходит под первый: «Сердечно-сосудистая система» в половину ширины
   телефона превращается в три буквы с многоточием. */
.mindmap-side-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mindmap-side-link-kind {
    flex: 0 1 118px;
    min-width: 0;
}

.mindmap-side-link-target {
    flex: 1 1 160px;
    min-width: 0;
}

.mindmap-side-link-target:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* --- Картинка в узле ------------------------------------------------
   Подпись «Митральный клапан» и снимок этого клапана — разные по силе
   вещи. Ищем по Викискладу и храним ссылку: карта целиком уезжает в
   localStorage и в облако, и вставленная картинка раздула бы её. */
.rm-style-image-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rm-style-image-row .rm-style-image-query {
    flex: 1 1 auto;
    min-width: 0;
}

.rm-style-image-find {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg-color);
    color: var(--text-color);
    cursor: pointer;
}
.rm-style-image-find:hover {
    background: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
    color: var(--button-primary-text);
}
.rm-style-image-find svg { width: 16px; height: 16px; }

.rm-style-image-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 7px;
}
.rm-style-image-results:empty { margin-top: 0; }

.rm-image-pick {
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--input-bg-color);
    overflow: hidden;
    cursor: pointer;
}
.rm-image-pick img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rm-image-pick:hover { border-color: var(--button-primary-bg); }
.rm-image-pick.is-active { border-color: var(--button-primary-bg); }

.rm-image-note {
    grid-column: 1 / -1;
    padding: 8px 2px;
    color: var(--secondary-text-color);
    font-size: .78em;
}

.rm-style-image-clear {
    margin-top: 7px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    font-family: inherit;
    font-size: .78em;
    cursor: pointer;
}
.rm-style-image-clear:hover {
    border-color: var(--button-danger-bg, #e74c3c);
    color: var(--button-danger-bg, #e74c3c);
}

/* ==================================================================
   МИНИ-КАРТА
   ------------------------------------------------------------------
   На большой карте при панорамировании теряешься: не видно, где ты и
   много ли осталось за краем экрана. Схема всего дерева с рамкой
   текущего окна отвечает на это одним взглядом. Тот же угол, что и у
   оглавления: они про одно и то же, и открыты бывают по очереди.
   ================================================================== */
.mindmap-minimap {
    position: absolute;
    top: 10px;
    /* Рядом с рядом кнопок вида, не под ним — см. оглавление. */
    left: 66px;
    z-index: 24;
    width: 186px;
    height: 132px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--container-bg-color);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
    animation: mmKeysIn .16s ease;
    /* Цвет рамки окна читает canvas через getComputedStyle. */
    --mm-view-frame: #6366f1;
}

body.dark-mode .mindmap-minimap,
body.synthwave-mode .mindmap-minimap,
body.oled-mode .mindmap-minimap {
    background: #2a2a2e;
    border-color: rgba(255, 255, 255, .18);
    --mm-view-frame: #a5b4fc;
}

@media (prefers-reduced-motion: reduce) {
    .mindmap-minimap { animation: none; }
}

.mindmap-minimap-canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    /* Тянут её пальцем — прокрутка страницы тут только мешает. */
    touch-action: none;
    cursor: crosshair;
}

@media (max-width: 720px) {
    .mindmap-minimap {
        /* Правее столбца кнопок вида — он занимает левый край. */
        top: 8px;
        left: 54px;
        width: 132px;
        height: 96px;
    }
}

/* ==================================================================
   ОГЛАВЛЕНИЕ КАРТЫ
   ------------------------------------------------------------------
   Поиск отвечает на «где здесь X». Оглавление — на «а что здесь вообще
   есть»: на большой карте со свёрнутыми ветками форму целого не видно.
   Панель слева, во всю высоту холста: её держат открытой, пока работают,
   и середину карты она закрывать не должна.
   ================================================================== */
.mindmap-outline-panel {
    position: absolute;
    top: 10px;
    /* Отступ от столбца кнопок вида: он стоит в этом же углу
       (38px кнопка + 10px от края + 8px зазор). */
    left: 66px;
    /* Не до самого низа: там ряд действий карты. */
    bottom: 58px;
    z-index: 26;
    display: flex;
    flex-direction: column;
    width: min(288px, calc(100% - 20px));
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--container-bg-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
    animation: mmKeysIn .16s ease;
}

@media (prefers-reduced-motion: reduce) {
    .mindmap-outline-panel { animation: none; }
}

.rm-outline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 8px 9px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: .92em;
    font-weight: 700;
}

.rm-outline-head-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rm-outline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
}
.rm-outline-icon:hover { background: var(--input-hover-bg-color); color: var(--text-color); }
.rm-outline-icon svg { width: 15px; height: 15px; }

.rm-outline-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
}

.rm-outline-row {
    display: flex;
    align-items: center;
    gap: 2px;
    /* Отступ по глубине рисует иерархию: без него список из трёхсот строк
       читается как свалка, а не как дерево. */
    padding-left: calc(var(--depth, 0) * 13px);
    border-radius: 8px;
}

.rm-outline-row.is-active {
    background: color-mix(in srgb, var(--button-primary-bg) 16%, transparent);
    box-shadow: inset 2px 0 0 var(--button-primary-bg);
}

.rm-outline-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
}
.rm-outline-toggle svg {
    width: 13px;
    height: 13px;
    transition: transform .16s ease;
}
.rm-outline-toggle.is-open svg { transform: rotate(90deg); }

/* Лист без детей: точка вместо стрелки держит подписи на одной линии. */
.rm-outline-dot {
    flex: 0 0 auto;
    width: 22px;
    height: 26px;
    position: relative;
}
.rm-outline-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--border-color);
}

.rm-outline-label {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 7px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: .84em;
    text-align: left;
    cursor: pointer;
}
.rm-outline-label:hover { background: var(--input-hover-bg-color); }

.rm-outline-label > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Сколько подтем внутри — видно, стоит ли раскрывать. */
.rm-outline-count {
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .82em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .mindmap-outline-panel {
        /* Во всю ширину, но правее столбца кнопок вида: он в этом же углу,
           и панель поверх него закрыла бы управление картой. */
        top: 8px;
        left: 54px;
        right: 8px;
        width: auto;
        bottom: 96px;
    }
    .rm-outline-label { padding: 8px 7px; }
}

/* ==================================================================
   ШПАРГАЛКА ПО КЛАВИШАМ КАРТЫ
   ------------------------------------------------------------------
   Сочетания у карты богатые, но узнать о них было неоткуда — человек
   кликал мышью то, что делается одной клавишей.
   ================================================================== */
.mindmap-keys-panel {
    position: absolute;
    right: 14px;
    bottom: 96px;
    z-index: 30;
    width: min(320px, calc(100vw - 28px));
    max-height: min(70vh, 520px);
    padding: 6px 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--container-bg-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
    overflow-y: auto;
    animation: mmKeysIn .16s ease;
}

@keyframes mmKeysIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mindmap-keys-panel { animation: none; }
}

.mindmap-keys-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: .92em;
    font-weight: 700;
}
.mindmap-keys-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
}
.mindmap-keys-close:hover { background: var(--input-hover-bg-color); color: var(--text-color); }
.mindmap-keys-close svg { width: 15px; height: 15px; }

.mindmap-keys-group {
    padding: 12px 12px 5px;
    color: var(--secondary-text-color);
    font-size: .7em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mindmap-keys-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 12px;
}
.mindmap-keys-row kbd {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 3px 7px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .72em;
    text-align: center;
    white-space: nowrap;
}
.mindmap-keys-row span {
    color: var(--secondary-text-color);
    font-size: .8em;
    line-height: 1.4;
}

/* На узких экранах панель занимает низ целиком: справа для неё места нет. */
@media (max-width: 520px) {
    .mindmap-keys-panel {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: 84px;
    }
    .mindmap-keys-row kbd { min-width: 78px; }
}

/* ==================================================================
   ОКНО СОЗДАНИЯ КАРТЫ НА ШИРОКОМ ЭКРАНЕ
   ------------------------------------------------------------------
   Всё шло одним столбцом шириной 450px, поэтому окно вытягивалось в
   узкую длинную полосу почти на весь экран. Слева оставляем путь «из
   текста», справа — «с нуля»: это два независимых способа начать, и
   выбирать между ними удобнее рядом, а не пролистывая.
   ================================================================== */
/* Два способа начать — две колонки со своими подписями. Раньше всё шло
   сплошной лентой, и человек не понимал, что это независимые пути, а не
   шаги подряд. Колонки — обёртки в разметке, а не раскладка по grid-column:
   без явных строк элементы разъезжались по высоте. */
.rm-create-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.rm-create-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.rm-create-col-head svg { width: 15px; height: 15px; color: var(--button-primary-bg); }

.rm-create-col-hint {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: .84em;
    line-height: 1.5;
}
.rm-create-col-note {
    margin: -2px 0 0;
    color: var(--secondary-text-color);
    font-size: .76em;
    line-height: 1.45;
}
.rm-create-col .auth-input { margin-bottom: 0 !important; }

/* Кнопки в колонках были вразнобой: зелёная заливка, две разные серые
   плашки и призрачная «Отмена» — четыре веса подряд, и непонятно, что
   здесь главное. Приводим к одной высоте и двум ролям: одно основное
   действие с заливкой, остальные — контурные. */
.rm-create-col .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-size: .92em;
    font-weight: 600;
}
.rm-create-col .btn svg,
.rm-create-col .btn i { width: 17px; height: 17px; flex: 0 0 auto; }

/* Вторичные — контур, а не заливка: серая плашка спорит по весу с
   основным действием и тянет взгляд на себя. */
.rm-create-col .btn.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}
.rm-create-col .btn.btn-secondary:hover {
    background: var(--input-hover-bg-color) !important;
    border-color: var(--input-hover-border-color) !important;
}

/* Загрузка файла — тоже действие второго плана, а выглядела плотной
   серой плашкой наравне с основной кнопкой. */
.rm-create-col .custom-file-upload-btn-small {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: .84em;
    font-weight: 600;
    cursor: pointer;
}
.rm-create-col .custom-file-upload-btn-small:hover {
    border-style: solid;
    color: var(--text-color);
}

.rm-create-col textarea.auth-input { min-height: 110px; resize: vertical; }

/* «Отмена» внизу окна — самое лёгкое, что здесь есть. */
#roadmapCreateCancelBtn {
    width: 100%;
    min-height: 42px;
    border: none !important;
    background: transparent !important;
    color: var(--secondary-text-color) !important;
    font-weight: 600;
}
#roadmapCreateCancelBtn:hover { color: var(--text-color) !important; }

@media (min-width: 769px) {
    #roadmapCreateModal .modal-content {
        max-width: 760px !important;
        height: auto;
        max-height: 88vh;
    }

    /* :not(.hidden) обязателен: селектор по id перебивает .tab-content.hidden,
       и без него скрытая вкладка «Визуальный конспект» показывалась бы
       поверх «Учебного плана». */
    #roadmapContentMindMap:not(.hidden) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    /* В половине ширины две колонки карточек уже не помещаются. */
    #roadmapContentMindMap .rm-templates-list { grid-template-columns: 1fr; }
}

/* На узком экране колонки идут одна под другой, между ними нужен воздух. */
@media (max-width: 768px) {
    #roadmapContentMindMap .rm-create-col + .rm-create-col { margin-top: 22px; }
}

/* ==================================================================
   ШАБЛОНЫ КАРТ ЗНАНИЙ
   ------------------------------------------------------------------
   Пустой лист — тяжёлая точка входа: человек знает тему, но не знает,
   как её разложить, и карта остаётся с одним узлом. Шаблон даёт
   первые ветки.
   ================================================================== */
.rm-templates {
    margin-top: 10px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background: transparent;
    overflow: hidden;
    text-align: left;
}
.rm-templates[open] {
    border-style: solid;
    background: var(--input-bg-color);
}
/* Заголовок — не кнопка: он раскрывает список, а не выполняет действие.
   Раньше он выглядел ровно как «Пустая карта» рядом, и две одинаковые
   плашки подряд читались как две кнопки, одна из которых не работает. */
.rm-templates > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--secondary-text-color);
    font-size: .86em;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.rm-templates > summary::-webkit-details-marker { display: none; }
.rm-templates > summary:hover { color: var(--text-color); }
.rm-templates[open] > summary { color: var(--text-color); }
.rm-templates > summary > span { flex: 1; }
.rm-templates > summary > svg:first-of-type {
    width: 17px; height: 17px; flex: 0 0 auto;
    color: var(--button-primary-bg);
}
.rm-templates-caret {
    width: 16px; height: 16px; flex: 0 0 auto;
    color: var(--secondary-text-color);
    transition: transform .2s ease;
}
.rm-templates[open] .rm-templates-caret { transform: rotate(180deg); }

.rm-templates-hint {
    margin: 0;
    padding: 0 14px 10px;
    color: var(--secondary-text-color);
    font-size: .8em;
    line-height: 1.5;
}

.rm-templates-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 14px 14px;
}
@media (max-width: 520px) {
    .rm-templates-list { grid-template-columns: 1fr; }
}

.rm-template-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--container-bg-color);
    color: var(--text-color);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
.rm-template-card:hover {
    border-color: var(--button-primary-bg);
    background: var(--input-hover-bg-color);
}
.rm-template-title { font-size: .88em; font-weight: 600; }
.rm-template-hint {
    color: var(--secondary-text-color);
    font-size: .76em;
    line-height: 1.35;
}

/* ==================================================================
   СПИСОК ПОЛЬЗОВАТЕЛЕЙ
   ------------------------------------------------------------------
   Список был плоским потоком, где под каждым именем стоял чужой email.
   Онлайн и офлайн визуально сливались, а чтобы написать человеку,
   нужно было открывать меню действий.
   ================================================================== */
.user-list-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 6px;
    color: var(--secondary-text-color);
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.user-list-section-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--input-bg-color);
    font-variant-numeric: tabular-nums;
}

/* «Был в сети» вместо email: по нему видно, ждать ли ответа сейчас. */
.user-list-seen {
    color: var(--secondary-text-color);
    font-size: .78em;
}
.user-list-seen.is-online { color: #2ecc71; }
body.dark-mode .user-list-seen.is-online { color: #5fd18f; }

.user-list-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Сколько каналов общих — дешёвый способ понять, кто это. */
.user-list-shared {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 7px 2px 5px;
    border-radius: 999px;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .72em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.user-list-shared svg { width: 11px; height: 11px; }

.user-list-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.user-list-msg:hover {
    background: color-mix(in srgb, var(--button-primary-bg) 16%, transparent);
    color: var(--text-color);
}
.user-list-msg svg { width: 16px; height: 16px; }

/* Общий курс — строкой под именем, а не значком со счётчиком.
   Название объясняет, о чём заговорить с незнакомым человеком; число
   не объясняет ничего. Если курсов несколько, показываем первый и
   «+N», полный список — в подсказке при наведении. */
.user-list-course {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    min-width: 0;
    color: var(--button-primary-bg);
    font-size: .74em;
    font-weight: 600;
}
.user-list-course svg {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
}
.user-list-course span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Позвать заниматься. Та же кнопка-значок, что и «написать», но зелёная:
   звонок обращается к человеку немедленно, и отличить его от сообщения
   нужно до нажатия, а не после. */
.user-list-call {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.user-list-call:hover {
    background: color-mix(in srgb, var(--button-success-bg, #22c55e) 18%, transparent);
    color: var(--button-success-bg, #22c55e);
}
.user-list-call svg { width: 16px; height: 16px; }

/* Свои — из вашего университета или города.
   Без пометки порядок списка выглядел бы произволом: незнакомые имена
   наверху и непонятно почему. Университет выделен сильнее города: курс
   делят десятки, город — тысячи. */
.user-list-uni.is-same-uni .user-list-uni-name {
    color: var(--button-primary-bg);
    font-weight: 600;
}
.user-list-uni.is-same-uni .user-list-uni-name::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--button-primary-bg);
}
.user-list-uni.is-same-city .user-list-uni-city {
    color: var(--button-primary-bg);
}

/* ==================================================================
   РЕДАКТОР ПРОФИЛЯ
   ------------------------------------------------------------------
   Поля стояли сплошным столбцом без подписей: плейсхолдер исчезал от
   первого символа, и заполненная строка становилась загадкой. Плюс
   было не видно, что из этого увидят другие, а «удалить аккаунт»
   стояло в сантиметре от «сохранить».
   ================================================================== */
.pe-section {
    margin-bottom: 22px;
    text-align: left;
}

.pe-section-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    font-size: .76em;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.pe-section-icon { width: 13px; height: 13px; }

.pe-field {
    display: block;
    margin-bottom: 14px;
}
.pe-field:last-child { margin-bottom: 0; }

.pe-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
    color: var(--text-color);
    font-size: .84em;
    font-weight: 600;
}

.pe-count {
    color: var(--secondary-text-color);
    font-size: .88em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.pe-count.is-full { color: #d08a2c; }
body.dark-mode .pe-count.is-full { color: #e0a758; }

.pe-hint {
    display: block;
    margin-top: 5px;
    color: var(--secondary-text-color);
    font-size: .76em;
    line-height: 1.45;
}

/* Внутри полей .auth-input уже имеет свой отступ снизу — здесь его
   задаёт .pe-field, иначе между подписью и полем копятся два отступа. */
.pe-field .auth-input { margin-bottom: 0 !important; }
.pe-field .password-wrapper { margin-bottom: 0 !important; }
.pe-field .gender-selection-wrapper { margin-bottom: 0 !important; }

/* Необратимое действие не должно быть в один клик рядом с обычными. */
.pe-danger {
    margin-top: 22px;
    border: 1px solid color-mix(in srgb, #dc2626 35%, var(--border-color));
    border-radius: 12px;
    overflow: hidden;

    /* На телефоне «Опасная зона» схлопывалась в красную полоску нулевой
       высоты, а на ПК работала.

       Причина в сочетании двух вещей, каждая из которых сама по себе
       безобидна. Окно .modal-content — колоночный флекс с ограниченной
       высотой. Флекс-элемент обычно не сжимается меньше своего содержимого,
       но это правило действует, только пока у него overflow: visible. Строкой
       выше стоит overflow: hidden (он нужен, чтобы скруглить углы), и он
       снимает автоматический минимальный размер — элемент становится
       единственным в окне, кого разрешено сжать до нуля.

       На ПК форма двухколоночная и по высоте помещается, сжимать никого не
       нужно, поэтому там всё выглядело правильно. На телефоне та же форма
       разворачивается в одну колонку, перестаёт помещаться — и браузер
       честно сжимает того, кто это позволяет.

       flex-shrink: 0 возвращает элементу нормальный минимум. Окно и так
       прокручивается, так что запрет сжатия ничего не ломает. */
    flex-shrink: 0;
}
.pe-danger > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    color: #dc2626;
    font-size: .85em;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.pe-danger > summary::-webkit-details-marker { display: none; }
.pe-danger > summary svg { width: 15px; height: 15px; }
body.dark-mode .pe-danger > summary { color: #f08a8a; }

.pe-danger-text {
    margin: 0;
    padding: 0 14px 10px;
    color: var(--secondary-text-color);
    font-size: .78em;
    line-height: 1.5;
    text-align: left;
}
.pe-danger .delete-btn {
    width: calc(100% - 28px);
    margin: 0 14px 14px;
}

/* На широких экранах форма растягивалась на всю ширину окна (до 700px) и
   шла одним столбцом — короткие поля вроде «Пол» занимали строку целиком,
   и редактор уезжал далеко вниз. Сужаем окно и ставим короткие поля
   парами; «о себе» остаётся во всю ширину — там пишут текст. */
@media (min-width: 769px) {
    #profileEditModal .modal-content {
        max-width: 560px;
        /* Окно должно облегать форму: иначе кнопки, прижатые к низу общим
           правилом, оставляли под полями пустую полосу. */
        height: auto;
        max-height: 88vh;
    }

    #profileEditModal .pe-section {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }
    #profileEditModal .pe-section-head,
    #profileEditModal .pe-field--wide {
        grid-column: 1 / -1;
    }
    /* Отступ между полями задаёт сетка — свой убираем, иначе двойной. */
    #profileEditModal .pe-field { margin-bottom: 0; }

    /* Кнопки к низу окна не прижимаем: у короткой формы это оставляло
       посреди неё пустую полосу. */
    #profileEditModal .modal-buttons { margin-top: 20px !important; }
}

/* Форме нужно чуть больше воздуха сверху, чем окну общего вида. Боковые
   поля теперь задаёт общее мобильное правило — раньше здесь приходилось
   перебивать его отступ в 2px для каждого окна по отдельности. */
@media (max-width: 768px) {
    #profileEditModal .modal-content { padding-top: 18px !important; }

    /* Этим окнам нужен край в край: внутри галерея и редактор во всю
       ширину. Их нулевой отступ задан без !important, а общее правило —
       с ним, поэтому проговариваем исключение здесь, иначе у них
       появились бы поля и содержимое обрезалось. */
    #visualCreatorModal .modal-content,
    #programEditorModal .modal-content {
        padding: 0 !important;
    }
}

/* ==================================================================
   ОКНО «ПОЛУЧИ PRO БЕСПЛАТНО»
   ------------------------------------------------------------------
   Блоков было семь, все одного веса, и половина повторяла соседей:
   награды 3/10/20 стояли и карточками, и на шкале; бонус за серию — и
   полоской, и отдельной карточкой. Читать это подряд было нечем.
   Порядок теперь по делу: ссылка → прогресс → цифры → как это работает.
   ================================================================== */
/* ── Карточки окна «Получи PRO» ───────────────────────────────────────────
   Одиннадцать блоков стояли подряд одним весом, и три пояснительных абзаца
   среди них: сплошная стена, по которой не понять, что тут делать. Теперь
   три карточки — ссылка, прогресс, «как это работает» — и в каждой один
   предмет. Карточка задаёт границу: внутри всё про одно. */
.qst-ref-card {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--input-bg-color);
}

/* Карточка со ссылкой — главная: с неё начинается всё действие, поэтому у
   неё акцентная кромка, а у остальных обычная. */
.qst-ref-card--action {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 7%, transparent),
        transparent 60%), var(--input-bg-color);
}

.qst-ref-card-head {
    margin: 0 0 10px;
    color: var(--secondary-text-color);
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Внутри карточки блоки уже разделены ею самой — лишние поля убираем. */
.qst-ref-card .qst-ref-progress { margin-top: 0; }
.qst-ref-card .qst-ref-stats-row { margin-bottom: 0; }
.qst-ref-card .qst-ref-qr-toggle { margin-bottom: 0; }
.qst-ref-card--action .qst-ref-link-row { margin-top: 10px; }

/* Пояснения переехали внутрь «как это работает»: раньше они лежали тремя
   отдельными абзацами между блоками и читались как шум. */
.qst-ref-howto-note {
    margin: 10px 0 0;
    /* По левому краю, как шаги над ними: центрованный абзац посреди списка
       выглядит отдельной вставкой, хотя это продолжение того же объяснения. */
    text-align: left;
    color: var(--secondary-text-color);
    font-size: .78em;
    line-height: 1.5;
}
.qst-ref-howto-note + .qst-ref-howto-note { margin-top: 8px; }

.qst-ref-code-label {
    margin: 0 0 6px;
    color: var(--secondary-text-color);
    font-size: .78em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
}

.qst-ref-link-row {
    margin-top: 8px;
    text-align: left;
}
.qst-ref-link {
    display: block;
    color: var(--secondary-text-color);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .76em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qst-ref-code-hint {
    margin: 8px 0 18px;
    color: var(--secondary-text-color);
    font-size: .8em;
    line-height: 1.5;
    text-align: left;
}

/* QR прячем: делятся обычно ссылкой, а он занимал треть экрана. */
.qst-ref-qr-toggle { margin-bottom: 18px; }
.qst-ref-qr-toggle > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--secondary-text-color);
    font-size: .82em;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.qst-ref-qr-toggle > summary::-webkit-details-marker { display: none; }
.qst-ref-qr-toggle > summary:hover { color: var(--text-color); }
.qst-ref-qr-toggle > summary svg { width: 15px; height: 15px; }
.qst-ref-qr-toggle[open] > summary { margin-bottom: 12px; }

/* Шаги: текст читается слева, а не по центру. */
.qst-ref-howto > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}
.qst-ref-howto > summary::-webkit-details-marker { display: none; }
.qst-ref-howto-caret {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    color: var(--secondary-text-color);
    transition: transform .2s ease;
}
.qst-ref-howto[open] .qst-ref-howto-caret { transform: rotate(180deg); }
.qst-ref-howto-steps { text-align: left; }
.qst-ref-howto-steps li { text-align: left; }

/* Из трёх чисел дни PRO даёт только «засчитано» — оно и главное. */
.qst-ref-stat.is-key .qst-ref-stat-val { color: var(--accent); }
.qst-ref-stat.is-key .qst-ref-stat-lbl { color: var(--text-color); font-weight: 600; }

.qst-ref-stats-hint {
    margin: 8px 0 18px;
    color: var(--secondary-text-color);
    font-size: .76em;
    line-height: 1.5;
    text-align: left;
}

/* Свайп вниз для закрытия: ручка сверху была нарисована, но не работала.
   ------------------------------------------------------------------
   animation здесь гасится не для красоты: на телефоне у окна стоит
   анимация появления с fill: forwards, а анимация сильнее инлайнового
   стиля — из-за неё лист не тянулся за пальцем вовсе, хотя transform
   исправно проставлялся. */
.modal-content.is-swiping,
.modal-content.is-dismissing {
    animation: none !important;
    will-change: transform;
}
.modal-content.is-swiping {
    transition: none !important;   /* следуем за пальцем без запаздывания */
}
/* Отпустили, но порога не хватило — лист возвращается на место. */
.modal-content.is-returning {
    animation: none !important;
    transition: transform .22s cubic-bezier(.22, .61, .36, 1) !important;
}
/* Порога хватило — уезжает вниз, а не исчезает рывком. */
.modal-content.is-dismissing {
    transition: transform .2s ease-in !important;
    transform: translateY(105%) !important;
}

@media (prefers-reduced-motion: reduce) {
    .modal-content.is-returning,
    .modal-content.is-dismissing { transition: none !important; }
}

/* ==================================================================
   МОДАЛКА КОЛОДЫ
   ------------------------------------------------------------------
   Три числа стояли без подписи и читались как состав колоды, хотя это
   план на сегодня; «Retention 0%» на новой колоде выглядел приговором,
   хотя данных просто ещё нет; а посмотреть, что внутри колоды, было
   негде. Подписи, пояснения и список карточек — здесь.
   ================================================================== */
.deck-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.deck-section-sub {
    color: var(--secondary-text-color);
    font-size: .92em;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.deck-hint {
    margin-top: 6px;
    color: var(--secondary-text-color);
    font-size: .78em;
    line-height: 1.45;
    text-align: left;
}

.deck-retention-block { margin-bottom: 18px; text-align: left; }
.deck-retention-empty {
    color: var(--secondary-text-color);
    font-weight: 500;
}

/* Подпись под кнопкой: что именно случится, если её нажать. */
.deck-btn-hint {
    margin: -4px 0 10px;
    color: var(--secondary-text-color);
    font-size: .78em;
    line-height: 1.45;
    text-align: center;
}

.deck-browse-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 4px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: .9em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}
.deck-browse-btn:hover {
    background: var(--input-hover-bg-color);
    border-color: var(--input-hover-border-color);
}
.deck-browse-btn > span { flex: 1; text-align: left; }
.deck-browse-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.deck-browse-caret { color: var(--secondary-text-color); }

/* --- Список карточек --- */
.deck-cards-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.deck-cards-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 6px 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: .88em;
    font-weight: 600;
    cursor: pointer;
}
.deck-cards-back:hover { background: var(--input-hover-bg-color); }
.deck-cards-back svg { width: 16px; height: 16px; }
.deck-cards-count {
    color: var(--secondary-text-color);
    font-size: .8em;
    font-variant-numeric: tabular-nums;
}

.deck-cards-search { width: 100%; margin-bottom: 10px; }

.deck-cards-list {
    max-height: 46vh;
    overflow-y: auto;
    text-align: left;
}

.deck-card-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-color);
}
.deck-card-row:last-child { border-bottom: none; }

.deck-card-main { flex: 1; min-width: 0; }
.deck-card-q {
    color: var(--text-color);
    font-size: .88em;
    line-height: 1.35;
}
.deck-card-a {
    margin-top: 2px;
    color: var(--secondary-text-color);
    font-size: .8em;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-card-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.deck-card-state {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7em;
    font-weight: 600;
    white-space: nowrap;
}
.deck-card-state.is-new        { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #3b82f6; }
.deck-card-state.is-learning   { background: color-mix(in srgb, #d08a2c 18%, transparent); color: #a86412; }
.deck-card-state.is-review     { background: color-mix(in srgb, #178a4a 15%, transparent); color: #178a4a; }
.deck-card-state.is-relearning { background: color-mix(in srgb, #dc2626 15%, transparent); color: #dc2626; }
body.dark-mode .deck-card-state.is-learning { color: #e0a758; }
body.dark-mode .deck-card-state.is-review   { color: #5fd18f; }
body.dark-mode .deck-card-state.is-relearning { color: #f08a8a; }

.deck-card-due {
    color: var(--secondary-text-color);
    font-size: .7em;
    white-space: nowrap;
}

.deck-card-del {
    flex: 0 0 auto;
    padding: 5px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}
.deck-card-del:hover { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }
.deck-card-del svg { width: 15px; height: 15px; display: block; }

/* Правка карточки: та же кнопка-значок, что и удаление, но нейтральная —
   красным помечено только разрушительное действие. */
.deck-card-edit {
    flex: 0 0 auto;
    padding: 5px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}
.deck-card-edit:hover {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
}
.deck-card-edit svg { width: 15px; height: 15px; display: block; }

/* Редактор раскрывается ПОД строкой во всю её ширину.
   Строка выложена флексом в ряд, поэтому редактор пришлось бы втискивать
   четвёртой колонкой — поля вышли бы в палец шириной. flex-basis: 100%
   вместе с переносом кладёт его отдельной строкой. */
.deck-card-row { flex-wrap: wrap; }

.deck-card-editor {
    flex: 0 0 100%;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg-color);
}
.deck-card-editor label {
    display: block;
    margin-bottom: 4px;
    color: var(--secondary-text-color);
    font-size: .74em;
    font-weight: 600;
}
.deck-card-editor textarea {
    width: 100%;
    margin-bottom: 8px;
    box-sizing: border-box;
    font-size: .86em;
    /* Ответ бывает длинным — пусть тянется, но не бесконечно. */
    max-height: 160px;
    resize: vertical;
}
.deck-card-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.deck-card-editor-actions .btn {
    height: auto;
    padding: 7px 14px;
    font-size: .84em;
}

/* Пока строка в правке, её содержимое приглушено: внимание на полях. */
.deck-card-row.is-editing .deck-card-main,
.deck-card-row.is-editing .deck-card-side {
    opacity: .55;
}

.deck-cards-empty {
    padding: 24px 0;
    color: var(--secondary-text-color);
    font-size: .86em;
    text-align: center;
}

/* ==================================================================
   ВЫБОР ФОРМАТА КОНВЕРТЕРА
   ------------------------------------------------------------------
   Карточка под списком открыта всегда: выбор формата без образца перед
   глазами — угадайка. Сверху вердикт по вставленному тексту, ниже
   правило разметки и сам образец.
   ================================================================== */
/* Нативный select остаётся в разметке — его значение читает конвертер, —
   но с глаз убран: видимый список ниже. Селектор с классом И типом внутри
   .settings-group: иначе общее правило .settings-group select вернёт ему
   ширину во всю строку, и невидимый блок начнёт перехватывать клики. */
/* Служебный <select> за своим выпадающим списком: он нужен доступности и
   запасному поведению, но виден быть не должен.

   Правило было привязано к .settings-group, а единственный такой select в
   приложении — #parserPatternSelect в «Создать тест» — лежит вне неё. То есть
   прятать было некого, а он при этом абсолютно спозиционирован и шириной в
   381 px уходил на 142 px за правый край экрана. Класс уже говорит, что это
   за элемент, — по нему и прячем, без привязки к месту. */
select.format-select-native {
    /* !important здесь по делу: это утилита «скрыть визуально», и она обязана
       побеждать оформление того места, куда элемент попал. Без него правило
       #parserArea select (селектор по id, он сильнее) возвращало селекту
       width:100% и padding:15px — и абсолютно спозиционированный элемент
       уезжал за правый край экрана. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip-path: inset(50%);
    pointer-events: none;
    overflow: hidden;
}

.format-select { position: relative; }

.format-select-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 1em;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.format-select-trigger:hover {
    background: var(--input-hover-bg-color);
    border-color: var(--input-hover-border-color);
}
.format-select-trigger:focus-visible {
    outline: none;
    border-color: var(--button-primary-bg);
    box-shadow: 0 0 0 3px #007bff26;
}

.format-select-value {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.format-select-caret {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--secondary-text-color);
    transition: transform .2s ease;
}
.format-select.is-open .format-select-caret { transform: rotate(180deg); }

.format-select-name {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Сама разметка формата — моноширинно: её видно прямо в строке списка. */
.format-select-mark {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--container-bg-color);
    color: var(--secondary-text-color);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .78em;
    white-space: nowrap;
}

.format-select-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 320px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--container-bg-color);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    overflow-y: auto;
    animation: formatSelectIn .14s ease;
}

@keyframes formatSelectIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .format-select-list { animation: none; }
    .format-select-caret { transition: none; }
}

.format-select-option {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: .92em;
    text-align: left;
    cursor: pointer;
}
.format-select-option:hover,
.format-select-option:focus-visible {
    outline: none;
    background: var(--input-hover-bg-color);
}
.format-select-option.is-active {
    background: color-mix(in srgb, var(--button-primary-bg) 13%, transparent);
    font-weight: 600;
}
.format-select-option.is-active .format-select-mark {
    background: color-mix(in srgb, var(--button-primary-bg) 18%, transparent);
    color: var(--text-color);
}

@media (max-width: 620px) {
    .format-select-option { flex-wrap: wrap; gap: 4px 8px; }
    .format-select-value .format-select-mark { display: none; }
}

.parser-format-hint {
    margin: 8px 0 0;
    color: var(--secondary-text-color);
    font-size: .84em;
    line-height: 1.5;
}

.parser-format-card {
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg-color);
    overflow: hidden;
}

/* Вердикт: строка состояния, а не украшение. Цвет несёт смысл —
   зелёный «текст разобран», янтарный «не подошло». */
.parser-format-verdict {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    font-size: .86em;
    font-weight: 600;
    line-height: 1.45;
}
.parser-format-verdict:empty { display: none; }

.parser-format-verdict::before {
    flex: 0 0 auto;
    font-weight: 700;
}
.parser-format-verdict.is-idle {
    color: var(--secondary-text-color);
    font-weight: 500;
}
.parser-format-verdict.is-idle::before { content: "•"; }
.parser-format-verdict.is-good {
    color: #178a4a;
    background: color-mix(in srgb, #178a4a 10%, transparent);
}
.parser-format-verdict.is-good::before { content: "\2713"; }
.parser-format-verdict.is-bad {
    color: #a86412;
    background: color-mix(in srgb, #d08a2c 14%, transparent);
}
.parser-format-verdict.is-bad::before { content: "!"; }

/* На тёмных темах приглушённая зелень и янтарь теряют контраст. */
body.dark-mode .parser-format-verdict.is-good,
body.synthwave-mode .parser-format-verdict.is-good { color: #5fd18f; }
body.dark-mode .parser-format-verdict.is-bad,
body.synthwave-mode .parser-format-verdict.is-bad { color: #e0a758; }

.parser-format-detail {
    padding: 0 14px 14px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}
.parser-format-verdict:empty + .parser-format-detail { border-top: none; }

.parser-format-label {
    display: block;
    margin-bottom: 3px;
    color: var(--secondary-text-color);
    font-size: .74em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.parser-format-rule {
    margin: 0 0 12px;
    color: var(--text-color);
    font-size: .86em;
    line-height: 1.55;
}

.parser-format-sample-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.parser-format-sample-head .parser-format-label { margin-bottom: 0; }
.parser-format-sample-head .btn-secondary-small { flex: 0 0 auto; }

#parserFormatsSample {
    margin: 0;
    padding: 11px 13px;
    border-radius: 9px;
    background: var(--container-bg-color);
    color: var(--text-color);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .8em;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
}

@media (max-width: 620px) {
    .parser-format-sample-head { flex-direction: column; align-items: stretch; }
    .parser-format-sample-head .btn-secondary-small { width: 100%; }
}

/* ==================================================================
   ПОВТОРЕНИЕ ПО КАРТЕ
   ------------------------------------------------------------------
   Карточка припоминания: сверху одна подпись, содержимое скрыто.
   Вопросом служит сама структура карты — где тема живёт и с чем
   соседствует, — поэтому путь до узла показан всегда.
   ================================================================== */
.rm-review-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: rm-review-in .22s ease both;
}

@keyframes rm-review-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rm-review-card {
    width: min(460px, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: 20px;
    border-radius: 18px;
    background: var(--container-bg-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    animation: rm-review-card-in .28s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes rm-review-card-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.rm-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.rm-review-progress {
    color: var(--secondary-text-color);
    font-size: .78em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.rm-review-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rm-review-close:hover { background: var(--input-hover-bg-color); color: var(--text-color); }
.rm-review-close svg { width: 16px; height: 16px; }

.rm-review-path {
    margin-bottom: 6px;
    color: var(--secondary-text-color);
    font-size: .76em;
    line-height: 1.4;
}

.rm-review-card h3 {
    margin: 0 0 18px;
    color: var(--text-color);
    font-size: 1.35em;
    line-height: 1.25;
}

.rm-review-body {
    margin-bottom: 18px;
    color: var(--text-color);
    font-size: .93em;
    line-height: 1.6;
    animation: rm-review-reveal .26s ease both;
}
.rm-review-body p { margin: 0 0 10px; }
.rm-review-body p:last-child { margin-bottom: 0; }

@keyframes rm-review-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.rm-review-note {
    padding: 9px 12px;
    border-left: 3px solid var(--button-primary-bg);
    border-radius: 0 8px 8px 0;
    background: var(--input-bg-color);
    font-style: italic;
}

.rm-review-empty { color: var(--secondary-text-color); font-style: italic; }

.rm-review-kids {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.rm-review-kids span {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .82em;
}

.rm-review-actions .btn { width: 100%; }

.rm-review-grades {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.rm-grade {
    padding: 12px 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: .86em;
    font-weight: 600;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.rm-grade:hover { transform: translateY(-2px); }
.rm-grade:active { transform: translateY(0); }

/* Оценка — это выбор, а не приговор: цвет подсказывает смысл, но кнопки
   остаются равноправными, чтобы «забыл» не выглядел наказанием. */
.rm-grade.is-again:hover { border-color: var(--button-danger-bg, #e74c3c); }
.rm-grade.is-hard:hover  { border-color: var(--warning-color, #e6a700); }
.rm-grade.is-easy:hover  { border-color: var(--button-success-bg, #27ae60); }

/* Счётчик тем к повторению на кнопке в углу карты */
/* Кнопка повторения переехала в правый нижний угол — значок со счётчиком
   должен переехать вместе с ней. Он живёт на ::after, поэтому подписи у
   кнопок сидят на ::before: на одном элементе псевдоэлемент только один,
   и они бы вытесняли друг друга. */
.roadmap-corner-actions #roadmapReviewBtn,
.roadmap-study-actions #roadmapReviewBtn { position: relative !important; }
.roadmap-corner-actions #roadmapReviewBtn.has-due::after,
.roadmap-study-actions #roadmapReviewBtn.has-due::after {
    content: attr(data-due);
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--button-danger-bg, #e74c3c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Прогресс по ветке в карточке узла */
.mindmap-side-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -6px 0 14px;
}

.mindmap-side-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--input-bg-color);
    overflow: hidden;
}

.mindmap-side-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--button-success-bg, #27ae60);
    transition: width .35s cubic-bezier(.22, .61, .36, 1);
}

.mindmap-side-progress-text {
    flex: 0 0 auto;
    color: var(--secondary-text-color);
    font-size: .76em;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .rm-review-overlay,
    .rm-review-card,
    .rm-review-body { animation: none; }
    .rm-grade:hover { transform: none; }
}

/* ==================================================================
   ПОИСК ПО КАРТЕ
   ================================================================== */
/* Под строкой поиска раскрывается список совпадений, поэтому панель стала
   колонкой: сама строка и результаты. Скругление из круглого стало мягким
   прямоугольником — «таблетка» с прямоугольным списком внутри выглядела
   склейкой двух разных элементов. */
.rm-search-bar {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 27;
    display: flex;
    flex-direction: column;
    width: min(440px, calc(100% - 24px));
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--container-bg-color);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .2);
}

.rm-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 12px;
}

body.dark-mode .rm-search-bar,
body.synthwave-mode .rm-search-bar,
body.oled-mode .rm-search-bar {
    background: #2a2a2e;
    border-color: rgba(255, 255, 255, .18);
}

.rm-search-row > svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--secondary-text-color);
}

.rm-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 0;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: .9em;
}
.rm-search-input:focus { outline: none; }
.rm-search-input::-webkit-search-cancel-button { display: none; }

.rm-search-count {
    flex: 0 0 auto;
    color: var(--secondary-text-color);
    font-size: .76em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rm-search-count.is-empty { opacity: .6; }

.rm-search-nav,
.rm-search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.rm-search-nav:hover,
.rm-search-close:hover { background: var(--input-hover-bg-color); color: var(--text-color); }
.rm-search-nav svg,
.rm-search-close svg { width: 15px; height: 15px; }

/* --- Список совпадений ---------------------------------------------
   Счётчик «3 / 12» говорит, сколько нашлось, но не что именно. На карте,
   где «Строение» есть и у сердца, и у почки, выбирать приходилось перебором
   с разглядыванием холста после каждого шага. */
.rm-search-results {
    max-height: min(46vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;
    border-top: 1px solid var(--border-color);
}

.rm-search-results.is-empty {
    display: none;
}

.rm-search-hit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.rm-search-hit:hover { background: var(--input-hover-bg-color); }

/* Текущее совпадение — то, на котором сейчас стоит холст. Полоса слева, а не
   заливка: заливка спорила бы с наведением, и было бы не понять, где ты
   находишься, а где просто держишь курсор. */
.rm-search-hit.is-current {
    background: var(--input-hover-bg-color);
    box-shadow: inset 3px 0 0 var(--button-primary-bg);
}

.rm-search-hit-label {
    font-size: .88em;
    font-weight: 600;
    line-height: 1.3;
}

.rm-search-hit-label mark {
    padding: 0 1px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--button-primary-bg) 30%, transparent);
    color: inherit;
}

.rm-search-hit-path {
    overflow: hidden;
    color: var(--secondary-text-color);
    font-size: .74em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Совпало только в описании — подпись узла запроса не содержит, и без
   пометки строка выглядит попавшей в список по ошибке. */
.rm-search-hit-where {
    align-self: flex-start;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .68em;
}

.rm-search-more {
    padding: 7px 10px 4px;
    color: var(--secondary-text-color);
    font-size: .74em;
    text-align: center;
}

@media (max-width: 720px) {
    .rm-search-bar { top: 6px; }
    .rm-search-row { gap: 2px; padding: 5px 5px 5px 10px; }
    .rm-search-nav, .rm-search-close { width: 34px; height: 34px; }
    .rm-search-results { max-height: 40vh; }
}

/* ==================================================================
   ОФОРМЛЕНИЕ УЗЛА
   ================================================================== */
.rm-style-panel {
    position: absolute;
    right: 10px;
    bottom: 62px;
    z-index: 28;
    width: min(276px, calc(100% - 20px));
    /* С разделом картинки панель переросла экран телефона. Прижата она по
       нижнему краю, поэтому без ограничения высоты за верх уезжали цвет и
       значок — то, ради чего её чаще всего и открывают. */
    max-height: calc(100% - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--container-bg-color);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .24);
}

body.dark-mode .rm-style-panel,
body.synthwave-mode .rm-style-panel,
body.oled-mode .rm-style-panel {
    background: #2a2a2e;
    border-color: rgba(255, 255, 255, .18);
}

.rm-style-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.rm-style-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text-color);
    font-size: .92em;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rm-style-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--secondary-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rm-style-close:hover { background: var(--input-hover-bg-color); color: var(--text-color); }
.rm-style-close svg { width: 15px; height: 15px; }

.rm-style-group { margin-bottom: 13px; }
.rm-style-group:last-child { margin-bottom: 0; }

.rm-style-label {
    display: block;
    margin-bottom: 7px;
    color: var(--secondary-text-color);
    font-size: .74em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rm-style-colors,
.rm-style-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rm-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease;
}
.rm-swatch:hover { transform: scale(1.12); }
.rm-swatch.is-active { border-color: var(--text-color); }

/* «Авто» — не цвет, а отказ от него: возвращает раскраску по ветке */
.rm-swatch.is-auto {
    background: var(--input-bg-color);
    border: 2px dashed var(--border-color);
    position: relative;
}
.rm-swatch.is-auto.is-active { border-style: solid; border-color: var(--text-color); }
.rm-swatch.is-auto::after {
    content: 'A';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text-color);
    font-size: 11px;
    font-weight: 700;
}

.rm-icon-pick {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .16s ease, transform .16s ease;
}
.rm-icon-pick:hover { transform: scale(1.08); }
.rm-icon-pick.is-active { border-color: var(--button-primary-bg); border-width: 2px; }

.rm-style-panel .auth-input {
    width: 100%;
    margin: 0;
    font-size: .86em;
}

@media (max-width: 720px) {
    .rm-style-panel {
        right: 6px;
        left: 6px;
        width: auto;
        bottom: 118px;
    }
    .rm-icon-pick { width: 34px; height: 34px; }
    .rm-swatch { width: 32px; height: 32px; }
}

/* ==================================================================
   ВЫГРУЗКА КАРТЫ
   ------------------------------------------------------------------
   Меню всплывает над кнопкой в углу — там же, где живут остальные
   действия карты, чтобы не заводить второго места для того же смысла.
   ================================================================== */
.rm-export-menu {
    position: absolute;
    left: 10px;
    bottom: 58px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 208px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--container-bg-color);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    animation: rm-export-in .2s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes rm-export-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

body.dark-mode .rm-export-menu,
body.synthwave-mode .rm-export-menu,
body.oled-mode .rm-export-menu {
    background: #2a2a2e;
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
}

.rm-export-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: .92em;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease;
}

.rm-export-item:hover { background: var(--input-hover-bg-color); }
.rm-export-item:focus-visible { outline: 2px solid var(--button-primary-bg); outline-offset: -2px; }

.rm-export-item svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--secondary-text-color);
}

/* С раскрытым «ещё» ряд кнопок становится двухстрочным — поднимаем меню,
   чтобы оно не легло на второй ряд.
   Селектор идёт через .roadmap-bottom-row: группа кнопок переехала внутрь
   общего ряда и соседом меню быть перестала. */
.roadmap-bottom-row:has(.roadmap-corner-actions.is-open) ~ .rm-export-menu { bottom: 104px; }

@media (max-width: 720px) {
    .rm-export-menu { left: 6px; bottom: 50px; }
    .roadmap-bottom-row:has(.roadmap-corner-actions.is-open) ~ .rm-export-menu { bottom: 94px; }
    .rm-export-item { padding: 12px; }
}

/* ==================================================================
   РЕЖИМ ФОКУСА НА ВЕТКЕ
   ------------------------------------------------------------------
   Без явного выхода фокус читается как поломка: половина карты просто
   исчезла. Полоса всё время говорит, где вы находитесь.
   ================================================================== */
.rm-focus-bar {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 26;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 24px);
    padding: 6px 6px 6px 14px;
    border: 1px solid var(--button-primary-bg);
    border-radius: 999px;
    background: var(--container-bg-color);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    animation: rm-focus-in .24s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes rm-focus-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

body.dark-mode .rm-focus-bar,
body.synthwave-mode .rm-focus-bar,
body.oled-mode .rm-focus-bar {
    background: #2a2a2e;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}

.rm-focus-bar > svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--button-primary-bg);
}

.rm-focus-label {
    min-width: 0;
    overflow: hidden;
    color: var(--text-color);
    font-size: .84em;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rm-focus-exit {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-family: inherit;
    font-size: .8em;
    font-weight: 600;
    cursor: pointer;
    transition: filter .18s ease;
}

.rm-focus-exit:hover { filter: brightness(1.08); }
.rm-focus-exit svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
    .rm-focus-bar { top: 6px; padding: 5px 5px 5px 11px; gap: 7px; }
    .rm-focus-label { font-size: .76em; }
    .rm-focus-exit { padding: 6px 10px; font-size: .74em; }
    /* Подсказка правки и полоса фокуса делят верх экрана — разводим их */
    .rm-focus-bar ~ .mindmap-edit-hint { top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .rm-export-menu,
    .rm-focus-bar { animation: none; }
}

/* ==================================================================
   СОЗДАНИЕ ПУСТОЙ КАРТЫ
   ================================================================== */


/* За «ещё» — редкое и опасное. Пересоздание сносит карту и весь прогресс,
   поэтому оно не должно попадаться под случайный тап; раскладка и «к центру»
   нужны изредка и просто не помещаются в основной ряд на телефоне. */
/* Под «Ещё» уехало редкое и необратимое: публикация, выгрузка и
   пересоздание. Центровка, раскладка и разбор ИИ оттуда ушли — первые две
   в правый верхний угол к остальному управлению видом, разбор к учебным
   действиям справа внизу. Прятать частое за лишним нажатием значит держать
   руку в напряжении на каждой правке. */
.roadmap-corner-actions #regenerateRoadmapBtn,
.roadmap-corner-actions #roadmapPublishBtn,
.roadmap-corner-actions #roadmapExportBtn {
    display: none !important;
}

.roadmap-corner-actions.is-open #roadmapPublishBtn:not(.hidden),
.roadmap-corner-actions.is-open #roadmapExportBtn:not(.hidden) {
    display: flex !important;
}

.roadmap-corner-actions.is-open #regenerateRoadmapBtn {
    display: flex !important;
    color: var(--button-danger-bg, #e74c3c) !important;
    border-color: color-mix(in srgb, var(--button-danger-bg, #e74c3c) 50%, transparent) !important;
}

.roadmap-corner-actions.is-open #regenerateRoadmapBtn:hover {
    background-color: var(--button-danger-bg, #e74c3c) !important;
    border-color: var(--button-danger-bg, #e74c3c) !important;
    color: #fff !important;
}

.roadmap-corner-actions.is-open #roadmapMoreBtn {
    background-color: var(--button-primary-bg) !important;
    border-color: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
}

/* Поворот на 90° задумывался для иконки "обновить"; на рюкзаке и глобусе
   он выглядит случайным, поэтому оставляем его только кнопке пересоздания. */
/* Базовое правило крутит кнопку на 90° при наведении. Подсказка — её
   потомок и поворачивалась вместе с ней: текст вставал боком. Отменяем
   поворот у всех кнопок карты, а не только у нижнего ряда, — подписи
   теперь есть у каждой. */
.roadmap-corner-actions .roadmap-floating-action-btn:hover,
.roadmap-view-actions .roadmap-floating-action-btn:hover,
.roadmap-study-actions .roadmap-floating-action-btn:hover,
.roadmap-floating-action-btn[data-label]:hover {
    transform: none;
}

/* «Пересоздать» подкручивает свою стрелку — жест уместный. Но крутить
   надо иконку, а не кнопку: вместе с кнопкой поворачивалась и подпись. */
.roadmap-corner-actions #regenerateRoadmapBtn:hover {
    transform: none;
}
.roadmap-corner-actions #regenerateRoadmapBtn:hover svg {
    transform: rotate(90deg);
    transition: transform .25s ease;
}

@media (max-width: 480px) {
    .roadmap-corner-actions {
        left: 6px;
        bottom: 6px;
        gap: 6px;
        row-gap: 6px;
        max-width: calc(100% - 12px);
    }
}

/* ==================================================================
   ШАПКА КАРТ ЗНАНИЙ: ДВЕ КАТЕГОРИИ СО СПИСКАМИ
   ------------------------------------------------------------------
   Плоский ряд вкладок при десятке карт превращался в бесконечную
   горизонтальную ленту, где учебные планы шли вперемешку с конспектами.
   Теперь два раздела, список открывается по нажатию.
   ================================================================== */
#roadmapTabsContainer {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.rm-cat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    /* Ряд шире своего содержимого не нужен, но и растягиваться по высоте
       шапки ему нельзя: тогда пилюли внутри тянутся следом. */
    flex: 1 1 auto;
}

.rm-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    /* Высота задана числом, а не отступами: рядом стоят три круглые кнопки
       ровно на 36px, и высота от line-height давала то 40, то 34 — в
       зависимости от шрифта и языка. Ряд разъезжался именно тут. */
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-family: inherit;
    font-size: .88em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.rm-cat:disabled {
    opacity: .45;
    cursor: default;
}

.rm-cat.is-active {
    border-color: var(--button-primary-bg);
    color: var(--text-color);
}

.rm-cat.is-open {
    background: var(--container-bg-color);
    color: var(--text-color);
}

.rm-cat-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.rm-cat-count {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--container-bg-color);
    font-size: .82em;
}

.rm-cat-chevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}

.rm-cat.is-open .rm-cat-chevron {
    transform: rotate(180deg);
}

/* Список лежит в блоке карты, а не в шапке: у .roadmap-header-wrapper
   стоит overflow: hidden, у .roadmap-tabs-scroll-area — overflow-x: auto,
   и абсолютный список внутри них обрезался начисто.
   Раскрывается поверх холста, чтобы карта не прыгала вниз. */
.rm-cat-dropdown {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    z-index: 40;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--container-bg-color);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

.rm-map-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--text-color);
    font-size: .9em;
    cursor: pointer;
    transition: background-color .15s ease;
}

.rm-map-row:hover {
    background: var(--input-hover-bg-color);
}

.rm-map-row.is-current {
    background: var(--input-bg-color);
    font-weight: 600;
}

.rm-map-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--secondary-text-color);
}

.rm-map-row.is-current .rm-map-icon {
    color: var(--feedback-correct-text, #16a34a);
}

.rm-map-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-map-del {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.rm-map-del:hover {
    background: var(--feedback-incorrect-bg, #fee2e2);
    color: var(--feedback-incorrect-text, #b91c1c);
}

.rm-map-del svg {
    width: 15px;
    height: 15px;
}

/* ==================================================================
   ИММЕРСИВНЫЙ РЕЖИМ КАРТЫ («во весь экран»)
   ------------------------------------------------------------------
   Намеренно без Fullscreen API. Тот уносит элемент в top layer, и всё
   вне его поддерева перестаёт показываться — а урок, панель узла,
   модалки и тосты живут на <body>. Карта разворачивалась, урок
   открывался за слоем, и кликнуть было не по чему.
   Обычный position: fixed таких побочных эффектов не даёт: оверлеи
   приложения (z-index 20000) остаются выше и работают как обычно.

   Специфичность (0,2,0) нужна, чтобы перебить инъекцию
   roadmap-ui-fixed-layout с её height: 80vh !important.
   ================================================================== */
body.roadmap-immersive .roadmap-wrapper-fixed {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 9000 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: var(--bg-color) !important;
}

/* Внутренняя коробка карты обязана точно совпадать с обёрткой. Инъекция
   roadmap-ui-fixed-layout и inline-стили прошлых режимов могли оставить ей
   height: 100% и position: relative — тогда она становилась элементом потока
   и вместе с шапкой не помещалась, а низ карты уезжал за край экрана. */
body.roadmap-immersive .roadmap-container {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
}

/* Нижняя навигация перекрывала бы угловые кнопки карты */
body.roadmap-immersive #mobileBottomNav {
    display: none !important;
}

/* Пока карта развёрнута, страница под ней прокручиваться не должна:
   иначе за краем экрана оказываются подвал и остальной интерфейс. */
body.roadmap-immersive {
    overflow: hidden !important;
}

/* ==================================================================
   НИЖНЕЕ МЕНЮ ПОВЕРХ ИИ-ЧАТА (настройка в панели ИИ, только телефоны)
   ------------------------------------------------------------------
   Модалка чата — .modal-overlay с z-index 20000, а панель живёт на 9000,
   поэтому чат её накрывает. Поднимаем панель над чатом и на её высоту
   укорачиваем модалку, иначе поле ввода уезжает под меню.
   ================================================================== */
@media (max-width: 768px) {
    /* В чате панель ужимаем: место дороже, но подписи и иконки остаются
       читаемыми — уменьшаем пропорционально, а не прячем текст.
       Значение должно совпадать с высотой бара ниже, иначе окно чата
       разойдётся с панелью. */
    body.ai-nav-docked {
        --ai-nav-h: calc(54px + env(safe-area-inset-bottom));
    }

    body.ai-nav-docked #mobileBottomNav {
        z-index: 20001 !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        /* Чат вплотную над панелью — скруглённая «шапка» бара тут лишняя,
           иначе в углах просвечивает страница под чатом. */
        border-radius: 0 !important;
        height: var(--ai-nav-h) !important;
    }

    body.ai-nav-docked #mobileBottomNav .bottom-nav-item {
        height: 42px !important;
        margin: 1px !important;
        padding: 3px 2px !important;
        gap: 1px;
    }

    body.ai-nav-docked #mobileBottomNav .bottom-nav-item i,
    body.ai-nav-docked #mobileBottomNav .bottom-nav-item svg {
        width: 19px !important;
        height: 19px !important;
    }

    body.ai-nav-docked #mobileBottomNav .bn-label {
        font-size: clamp(9.5px, 2.7vw, 11px);
        line-height: 1.15;
    }

    /* В сжатом баре вкладка ниже на четыре пикселя — ниша уезжает за
       кромку, если оставить ей полный рост. Ужимаем и её, и сдвиг значка */
    body.ai-nav-docked #mobileBottomNav .bottom-nav-item.active::before {
        width: 40px;
        height: 34px;
        margin: -17px 0 0 -20px;
    }

    body.ai-nav-docked #mobileBottomNav .bottom-nav-item.active i,
    body.ai-nav-docked #mobileBottomNav .bottom-nav-item.active svg {
        transform: translateY(-2px);
    }

    /* Крестик «закрыть чат» лишний: из чата теперь уходят через нижнее
       меню, а две кнопки выхода рядом только путают. */
    body.ai-nav-docked #aiChatCloseBtn {
        display: none !important;
    }

    /* Укорачиваем сам оверлей, а не добавляем отступ внутрь поля ввода:
       отступ оставлял мёртвую полосу внутри панели ввода и обрезал кнопку
       отправки. Так чат заканчивается ровно там, где начинается меню. */
    body.ai-nav-docked #aiChatModal {
        height: calc(100% - var(--ai-nav-h)) !important;
        max-height: calc(100% - var(--ai-nav-h)) !important;
    }

    body.ai-nav-docked #aiChatModal .modal-content,
    body.ai-nav-docked #aiChatModal .ai-chat-modal-content {
        height: 100% !important;
        max-height: 100% !important;
    }
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ ГЛАВНОГО МЕНЮ
   ------------------------------------------------------------------
   У каждого жеста ДВА набора кадров:
     mi-*        — покой: медленное непрерывное движение через весь цикл.
     mi-*-live   — наведение: тот же жест, но коротко и с размахом.

   Раньше покой был устроен наоборот: жест выстреливал за 5% цикла, а
   остальные 95% иконка стояла, и плитки отыгрывали по очереди. Со стороны
   это читалось как рябь — взгляд дёргался на каждую вспышку, потому что
   быстрое движение в неподвижном поле всегда перетягивает внимание.
   Теперь движутся все и всегда, но так медленно, что заметить можно только
   присмотревшись. Это и есть разница между «оживлённым» и «мельтешащим».

   Что удерживает от визуального шума при заметной амплитуде:
   1. Ни одного резкого кадра: размах разложен на весь цикл, только
      ease-in-out и плавные дуги. Рябь давало не движение, а рывок.
   2. У каждой иконки СВОЙ период (3.7-6.5с) — сетка никогда не сходится
      в общий пульс, а это заметнее любого отдельного движения.
   3. filter в покое не анимируется — свечение осталось наведению:
      мерцание яркости бросается в глаза сильнее, чем смещение.
   ================================================================== */
.main-actions-grid > button > svg,
.main-actions-grid > .custom-file-upload-btn > svg {
    /* Значение по умолчанию; каждая иконка ниже задаёт свой период */
    --mi-cycle: 5s;
    --mi-live: 1.5s;
    transform-origin: center;
    animation-name: var(--mi-anim, none);
    animation-duration: var(--mi-cycle);
    animation-delay: var(--mi-delay, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Блок анимируется, только пока он на экране. Класс is-visible ставит
   IntersectionObserver в script.js. animation-play-state (а не отключение
   анимации) выбран намеренно: он ставит на паузу и продолжает с того же
   места, поэтому при возврате блока в кадр иконки не дёргаются с нуля. */
.main-actions-grid svg,
.main-actions-grid svg * {
    animation-play-state: paused;
}

.main-actions-grid.is-visible svg,
.main-actions-grid.is-visible svg * {
    animation-play-state: running;
}

/* Подэлементы внутри SVG считают transform от viewBox — без fill-box
   зрачок улетает за пределы иконки. */
.main-actions-grid svg circle,
.main-actions-grid svg ellipse,
.main-actions-grid svg path {
    transform-box: fill-box;
    transform-origin: center;
}

/* При наведении иконка повторяет свой жест — тем же языком, но живее */
@media (hover: hover) and (pointer: fine) {
    .main-actions-grid > button:hover > svg,
    .main-actions-grid > .custom-file-upload-btn:hover > svg {
        animation-name: var(--mi-anim-live, var(--mi-anim, none));
        animation-duration: var(--mi-live);
        animation-delay: 0s;
    }

    .main-actions-grid > button:hover > svg > *,
    .main-actions-grid > .custom-file-upload-btn:hover > svg > * {
        animation-duration: var(--mi-live) !important;
        animation-delay: 0s !important;
    }
}

/* ------------------------------------------------------------------
   ЖЕСТЫ
   ------------------------------------------------------------------ */

/* Загрузка файла — не просто подъём, а бросок: короткий замах вниз,
   рывок вверх и мягкая посадка. Замах (anticipation) — то, что отличает
   живое движение от механического сдвига по вертикали. */
@keyframes mi-lift {
    0%, 100% { transform: translateY(2.6px) scale(.985); }
    35%      { transform: translateY(-4.2px) scale(1.04); }
    65%      { transform: translateY(-1px) scale(1.012); }
}
@keyframes mi-lift-live {
    0%   { transform: translateY(0) scale(1); }
    22%  { transform: translateY(1.2px) scale(.95); }
    48%  { transform: translateY(-4.5px) scale(1.05); }
    72%  { transform: translateY(.6px) scale(.99); }
    100% { transform: translateY(0) scale(1); }
}

/* Дворец памяти — здание приседает и вырастает, будто возводится.
   Ось у основания: постройка растёт от земли, а не «дышит» из центра. */
@keyframes mi-raise {
    0%, 100% { transform: scaleY(.94) translateY(1.6px); }
    50%      { transform: scaleY(1.07) translateY(-2.4px); }
}
@keyframes mi-raise-live {
    0%   { transform: scaleY(1) translateY(0); }
    28%  { transform: scaleY(.74) translateY(1.5px); }
    62%  { transform: scaleY(1.13) translateY(-2px); }
    100% { transform: scaleY(1) translateY(0); }
}

/* Лампочка дышит светом. filter в покое не трогаем: пульсация яркости
   заметна куда сильнее смещения и первой превращается в рябь. */
@keyframes mi-bulb {
    0%, 100% { transform: scale(.955); }
    45%      { transform: scale(1.075); }
}
@keyframes mi-bulb-live {
    0%   { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    22%  { transform: scale(.93); filter: drop-shadow(0 0 0 transparent); }
    48%  { transform: scale(1.1); filter: drop-shadow(0 0 5px currentColor); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
}

/* Кисточка на шапочке (второй элемент иконки — вертикальный шнурок)
   продолжает раскачиваться уже после того, как шапочка приземлилась.
   Ось вращения — верхняя точка крепления, иначе шнурок болтается серединой. */
@keyframes mi-tassel {
    0%, 100% { transform: rotate(-13deg); }
    50%      { transform: rotate(13deg); }
}
@keyframes mi-tassel-live {
    0%   { transform: rotate(0deg); }
    22%  { transform: rotate(16deg); }
    40%  { transform: rotate(-11deg); }
    56%  { transform: rotate(7deg); }
    70%  { transform: rotate(-4deg); }
    84%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

.main-actions-grid svg[class*="lucide-graduation-cap"] > *:nth-child(2) {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    /* Период чуть длиннее, чем у самой шапочки, и фаза сдвинута: кисточка
       отстаёт от неё, как отстаёт всё висящее. Совпади они — движение
       читалось бы как жёсткая деталь, а не как шнурок. */
    animation: mi-tassel calc(var(--mi-cycle) * 1.35) ease-in-out infinite;
    animation-delay: -1.2s;
}

@media (hover: hover) and (pointer: fine) {
    .main-actions-grid > button:hover > svg[class*="lucide-graduation-cap"] > *:nth-child(2) {
        animation-name: mi-tassel-live;
        animation-duration: var(--mi-live, 1.5s);
        animation-delay: 0s;
    }
}

/* Та же кисточка в нижней навигации — там шапочку подбрасывает tossCap */
@keyframes nav-tassel {
    0%   { transform: rotate(0deg); }
    18%  { transform: rotate(18deg); }
    38%  { transform: rotate(-13deg); }
    56%  { transform: rotate(8deg); }
    72%  { transform: rotate(-4deg); }
    86%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

.bottom-nav-item.is-animating [data-lucide="graduation-cap"] > *:nth-child(2),
.bottom-nav-item.is-animating [data-icon="graduation-cap"] > *:nth-child(2) {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: nav-tassel .75s ease-out forwards;
    animation-delay: .25s; /* вступает, когда шапочка уже пошла вниз */
}

/* Шапочку подбрасывают — выпускной */
@keyframes mi-toss {
    0%, 100% { transform: translateY(1.2px) rotate(-8deg); }
    50%      { transform: translateY(-3.4px) rotate(8deg); }
}
@keyframes mi-toss-live {
    0%   { transform: translateY(0) rotate(0deg); }
    28%  { transform: translateY(-2.5px) rotate(-12deg); }
    55%  { transform: translateY(0) rotate(6deg); }
    78%  { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Страница приоткрывается — разворот книги */
@keyframes mi-page {
    0%, 100% { transform: perspective(70px) rotateY(2deg); }
    50%      { transform: perspective(70px) rotateY(-26deg); }
}
@keyframes mi-page-live {
    0%   { transform: perspective(70px) rotateY(0deg); }
    45%  { transform: perspective(70px) rotateY(-24deg); }
    100% { transform: perspective(70px) rotateY(0deg); }
}

/* Звезда вспыхивает искрой */
@keyframes mi-twinkle {
    0%, 100% { transform: scale(.96) rotate(-10deg); }
    50%      { transform: scale(1.08) rotate(10deg); }
}
@keyframes mi-twinkle-live {
    0%   { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 transparent); }
    30%  { transform: scale(1.12) rotate(-11deg); filter: drop-shadow(0 0 5px currentColor); }
    60%  { transform: scale(1.02) rotate(9deg); filter: drop-shadow(0 0 1px transparent); }
    100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 transparent); }
}

/* Голос: двойной удар уровня звука */
@keyframes mi-voice {
    0%, 100% { transform: scale(.97); }
    30%      { transform: scale(1.07); }
    62%      { transform: scale(1.02); }
}
@keyframes mi-voice-live {
    0%   { transform: scale(1); }
    18%  { transform: scale(1.09); }
    38%  { transform: scale(1); }
    56%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Карта складывается-раскладывается */
@keyframes mi-fold {
    0%, 100% { transform: perspective(80px) rotateY(-16deg); }
    50%      { transform: perspective(80px) rotateY(18deg); }
}
@keyframes mi-fold-live {
    0%   { transform: perspective(80px) rotateY(0deg); }
    35%  { transform: perspective(80px) rotateY(18deg); }
    68%  { transform: perspective(80px) rotateY(-10deg); }
    100% { transform: perspective(80px) rotateY(0deg); }
}

/* Объект поворачивают, разглядывая с разных сторон — 3D */
@keyframes mi-turn {
    0%, 100% { transform: perspective(90px) rotateY(-22deg); }
    50%      { transform: perspective(90px) rotateY(22deg); }
}
@keyframes mi-turn-live {
    0%   { transform: perspective(90px) rotateY(0deg); }
    32%  { transform: perspective(90px) rotateY(-22deg); }
    66%  { transform: perspective(90px) rotateY(13deg); }
    100% { transform: perspective(90px) rotateY(0deg); }
}

/* Подход из двух повторений — «ещё раз» */
@keyframes mi-rep {
    0%, 100% { transform: translateY(2.8px); }
    50%      { transform: translateY(-3.4px); }
}
@keyframes mi-rep-live {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(-3px); }
    42%  { transform: translateY(0); }
    62%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

/* Вибрация геймпада — затухающая */
@keyframes mi-rumble {
    0%, 100% { transform: translateX(-2.2px) rotate(-5deg); }
    50%      { transform: translateX(2.2px) rotate(5deg); }
}
@keyframes mi-rumble-live {
    0%   { transform: translateX(0) rotate(0deg); }
    16%  { transform: translateX(-2px) rotate(-3deg); }
    34%  { transform: translateX(2px) rotate(3deg); }
    52%  { transform: translateX(-1.2px) rotate(-2deg); }
    70%  { transform: translateX(.7px) rotate(1deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

/* Кейс приоткрывается: лёгкое сжатие по вертикали */
@keyframes mi-case {
    0%, 100% { transform: scale(1.05, .93); }
    50%      { transform: scale(.96, 1.06); }
}
@keyframes mi-case-live {
    0%   { transform: scale(1, 1); }
    34%  { transform: scale(1.06, .92); }
    66%  { transform: scale(.98, 1.05); }
    100% { transform: scale(1, 1); }
}

/* Подарок трясут — что внутри? */
@keyframes mi-wiggle {
    0%, 100% { transform: rotate(-9deg); }
    50%      { transform: rotate(9deg); }
}
@keyframes mi-wiggle-live {
    0%   { transform: rotate(0deg); }
    16%  { transform: rotate(-10deg); }
    34%  { transform: rotate(8deg); }
    52%  { transform: rotate(-5deg); }
    70%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

/* Щит подтверждает — короткий кивок вслед за галочкой */
@keyframes mi-guard {
    0%, 100% { transform: scale(.965); }
    50%      { transform: scale(1.06); }
}
@keyframes mi-guard-live {
    0%, 55%  { transform: scale(1); }
    72%      { transform: scale(1.08); }
    100%     { transform: scale(1); }
}

/* --- Жесты отдельных частей иконки --- */

/* Зрачок сканера ведёт взглядом и фокусируется */
@keyframes mi-scan {
    0%, 100% { transform: translateX(-3px) scale(1); }
    40%      { transform: translateX(3px) scale(1); }
    70%      { transform: translateX(0) scale(1.4); }
}
@keyframes mi-scan-live {
    0%   { transform: translateX(0) scale(1); }
    22%  { transform: translateX(-2.4px) scale(1); }
    54%  { transform: translateX(2.4px) scale(1); }
    78%  { transform: translateX(0) scale(1.35); }
    100% { transform: translateX(0) scale(1); }
}

/* Кольца мишени расходятся от центра */
@keyframes mi-ring {
    0%, 100% { transform: scale(.93); opacity: .5; }
    50%      { transform: scale(1.1); opacity: 1; }
}
@keyframes mi-ring-live {
    0%   { transform: scale(1); opacity: 1; }
    45%  { transform: scale(1.14); opacity: .5; }
    100% { transform: scale(1); opacity: 1; }
}

/* По знаку бесконечности пробегает отметка — марафон идёт */
@keyframes mi-trace {
    0%   { stroke-dashoffset: 52; }
    100% { stroke-dashoffset: 0; }
}
@keyframes mi-trace-live {
    0%   { stroke-dasharray: 45 7; stroke-dashoffset: 52; }
    100% { stroke-dasharray: 45 7; stroke-dashoffset: 0; }
}

/* Галочка щита в покое просто набирает и отдаёт плотность. Дорисовывать её
   по кругу нельзя: чтобы нарисовать заново, галочку надо сначала стереть, а
   исчезающая галочка на щите читается как сбой, а не как жест. Само
   прочерчивание осталось наведению — там оно происходит один раз. */
@keyframes mi-check {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}
@keyframes mi-check-live {
    0%, 10% { stroke-dasharray: 12; stroke-dashoffset: 12; }
    55%     { stroke-dasharray: 12; stroke-dashoffset: 0; }
    100%    { stroke-dasharray: 12; stroke-dashoffset: 0; }
}

/* Слои базы отзываются по очереди — «запрос пошёл» */
@keyframes mi-layer {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50%      { opacity: .35; transform: translateY(-2.2px); }
}
@keyframes mi-layer-live {
    0%   { opacity: 1; transform: translateY(0); }
    45%  { opacity: .35; transform: translateY(-1.2px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
   ПРИВЯЗКА ЖЕСТОВ И РАЗВЕДЕНИЕ ФАЗ
   Селектор по [class*=] переживает смену версии lucide: класс бывает
   и lucide-scan-eye, и lucide-scan-eye-icon.
   ------------------------------------------------------------------ */
/* Фазы считаются ВНУТРИ блока, а не сквозной цепочкой по всей странице:
   раньше волна шла от первой плитки к последней через все группы, и на
   длинной сетке это выглядело как бегущая строка. Теперь каждый блок
   («Материалы», «Практика», «Понимание», «Ещё») отыгрывает свою короткую
   последовательность, а блоки идут параллельно. */

/* Период у каждой иконки свой и намеренно НЕ кратный соседним: если дать
   всем один темп, сетка сойдётся в общий пульс и начнёт «дышать» целиком —
   а это заметнее и хуже, чем любое отдельное движение. Ряд без общих
   делителей: 3.7, 4.1, 4.6, 5.3, 6.2...

   Темп подбирался с двух сторон. Прежние 8-13с с крошечной амплитудой
   движение просто прятали — иконка выглядела статичной. Обратная крайность,
   резкий жест раз в цикл, давала рябь. Рабочая середина — полный размах за
   4-6 секунд: заметно с первого взгляда и при этом ни одного рывка. */

/* Материалы */
.main-actions-grid svg[class*="lucide-file-up"]        { --mi-cycle: 4.1s; --mi-delay: -1.4s; --mi-anim: mi-lift;    --mi-anim-live: mi-lift-live; }
.main-actions-grid svg[class*="lucide-lightbulb"]      { --mi-cycle: 5.3s; --mi-delay: -2.1s; --mi-anim: mi-bulb;    --mi-anim-live: mi-bulb-live; }
.main-actions-grid svg[class*="lucide-graduation-cap"] { --mi-cycle: 4.6s; --mi-delay: -.7s;  --mi-anim: mi-toss;    --mi-anim-live: mi-toss-live; }
/* Ось у корешка слева — книга раскрывается, а не поворачивается целиком */
.main-actions-grid svg[class*="lucide-book-marked"]    { --mi-cycle: 6.2s; --mi-delay: -3.1s; --mi-anim: mi-page;    --mi-anim-live: mi-page-live; transform-origin: 15% 50%; }

/* Практика */
.main-actions-grid svg[class*="lucide-star"]           { --mi-cycle: 5.1s; --mi-delay: -1.8s; --mi-anim: mi-twinkle; --mi-anim-live: mi-twinkle-live; }

/* Понимание */
.main-actions-grid svg[class*="lucide-castle"]         { --mi-cycle: 5.9s; --mi-delay: -2.6s; --mi-anim: mi-raise;   --mi-anim-live: mi-raise-live; transform-origin: 50% 100%; }
.main-actions-grid svg[class*="lucide-mic"]            { --mi-cycle: 3.7s; --mi-delay: -1.1s; --mi-anim: mi-voice;   --mi-anim-live: mi-voice-live; }
.main-actions-grid svg[class*="lucide-map"]            { --mi-cycle: 5.6s; --mi-delay: -2.9s; --mi-anim: mi-fold;    --mi-anim-live: mi-fold-live; }
.main-actions-grid svg[class*="lucide-bone"]           { --mi-cycle: 4.9s; --mi-delay: -.4s;  --mi-anim: mi-turn;    --mi-anim-live: mi-turn-live; }

/* Ещё */
.main-actions-grid svg[class*="lucide-shield-check"]   { --mi-cycle: 6.4s; --mi-delay: -3.3s; --mi-anim: mi-guard;   --mi-anim-live: mi-guard-live; }
.main-actions-grid svg[class*="lucide-dumbbell"]       { --mi-cycle: 3.9s; --mi-delay: -1.6s; --mi-anim: mi-rep;     --mi-anim-live: mi-rep-live; }
.main-actions-grid svg[class*="lucide-gamepad"]        { --mi-cycle: 4.4s; --mi-delay: -2.2s; --mi-anim: mi-rumble;  --mi-anim-live: mi-rumble-live; }
.main-actions-grid svg[class*="lucide-briefcase"]      { --mi-cycle: 5.8s; --mi-delay: -.9s;  --mi-anim: mi-case;    --mi-anim-live: mi-case-live; }
.main-actions-grid svg[class*="lucide-gift"]           { --mi-cycle: 4.3s; --mi-delay: -2.7s; --mi-anim: mi-wiggle;  --mi-anim-live: mi-wiggle-live; }

/* Инструменты — раздел добавили позже, и его плиткам жестов не досталось.
   Стетоскоп слушает пульс, экран мигает паузой, конус покачивается. */
@keyframes mi-listen {
    0%, 100% { transform: scale(.94); }
    50%      { transform: scale(1.18); }
}
.main-actions-grid svg[class*="lucide-stethoscope"] { --mi-cycle: 4.5s; --mi-delay: -1.3s; }
.main-actions-grid svg[class*="lucide-stethoscope"] > *:nth-child(5) {
    animation: mi-listen var(--mi-cycle) ease-in-out infinite;
    animation-delay: var(--mi-delay);
}

@keyframes mi-pause-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}
.main-actions-grid svg[class*="lucide-monitor-pause"] { --mi-cycle: 3.9s; --mi-delay: -2.1s; }
.main-actions-grid svg[class*="lucide-monitor-pause"] > *:nth-child(1),
.main-actions-grid svg[class*="lucide-monitor-pause"] > *:nth-child(2) {
    animation: mi-pause-blink var(--mi-cycle) ease-in-out infinite;
    animation-delay: var(--mi-delay);
}
.main-actions-grid svg[class*="lucide-monitor-pause"] > *:nth-child(2) { animation-delay: calc(var(--mi-delay) + .18s); }

/* Конус качается на основании — как настоящий, если его задеть */
@keyframes mi-cone-tilt {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}
.main-actions-grid svg[class*="lucide-traffic-cone"] {
    --mi-cycle: 5.2s;
    --mi-delay: -.6s;
    --mi-anim: mi-cone-tilt;
    transform-origin: 50% 95%;
}

/* Мишень: сама иконка неподвижна, кольца медленно дышат. Сдвиг фаз здесь
   заметный (около трети периода) — иначе три кольца пульсируют как одно
   пятно и смысл «расходящихся кругов» пропадает. */
.main-actions-grid svg[class*="lucide-target"] { --mi-cycle: 4.7s; }
.main-actions-grid svg[class*="lucide-target"] circle {
    animation: mi-ring var(--mi-cycle) ease-in-out infinite;
}
.main-actions-grid svg[class*="lucide-target"] circle:nth-of-type(1) { animation-delay: 0s; }
.main-actions-grid svg[class*="lucide-target"] circle:nth-of-type(2) { animation-delay: -1.57s; }
.main-actions-grid svg[class*="lucide-target"] circle:nth-of-type(3) { animation-delay: -3.13s; }

/* Сканер: зрачок медленно ведёт взглядом. Отрицательная задержка вместо
   положительной — анимация стартует уже в середине, и иконка не стоит
   неподвижно первые секунды после загрузки. */
.main-actions-grid svg[class*="lucide-scan-eye"] { --mi-cycle: 5.4s; }
.main-actions-grid svg[class*="lucide-scan-eye"] circle {
    animation: mi-scan var(--mi-cycle) ease-in-out infinite;
    animation-delay: -1.7s;
}

/* Бесконечность: знак нарисован целиком, а по нему бежит РАЗРЫВ — как
   бегунок по дорожке. Порядок в dasharray именно такой: 45 рисуем, 7
   пропускаем. При обратном порядке (7 45) видна только короткая дуга, а
   сам знак пропадает — иконка перестаёт читаться.
   Единственное линейное движение в наборе: петля на то и петля, разворот
   в ней выглядел бы как сбой. */
.main-actions-grid svg[class*="lucide-infinity"] { --mi-cycle: 6.5s; }
.main-actions-grid svg[class*="lucide-infinity"] path {
    stroke-dasharray: 45 7;
    animation: mi-trace var(--mi-cycle) linear infinite;
}

/* Щит: галочка — последний path в иконке */
.main-actions-grid svg[class*="lucide-shield-check"] path:last-of-type {
    animation: mi-check var(--mi-cycle) ease-in-out infinite;
    animation-delay: -2.1s;
}

/* База: волна проходит по трём слоям сверху вниз */
.main-actions-grid svg[class*="lucide-database"] { --mi-cycle: 5.2s; }
.main-actions-grid svg[class*="lucide-database"] > * {
    animation: mi-layer var(--mi-cycle) ease-in-out infinite;
}
.main-actions-grid svg[class*="lucide-database"] > *:nth-child(1) { animation-delay: 0s; }
.main-actions-grid svg[class*="lucide-database"] > *:nth-child(2) { animation-delay: -.5s; }
.main-actions-grid svg[class*="lucide-database"] > *:nth-child(3) { animation-delay: -1s; }

/* При наведении части иконки переходят на «живые» кадры */
@media (hover: hover) and (pointer: fine) {
    .main-actions-grid > button:hover > svg[class*="lucide-target"] circle { animation-name: mi-ring-live; }
    .main-actions-grid > button:hover > svg[class*="lucide-scan-eye"] circle { animation-name: mi-scan-live; }
    .main-actions-grid > button:hover > svg[class*="lucide-infinity"] path { animation-name: mi-trace-live; }
    .main-actions-grid > button:hover > svg[class*="lucide-shield-check"] path:last-of-type { animation-name: mi-check-live; }
    .main-actions-grid > button:hover > svg[class*="lucide-database"] > * { animation-name: mi-layer-live; }

    /* Кольцам и слоям оставляем сдвиг фаз, иначе они схлопываются в один пульс */
    .main-actions-grid > button:hover > svg[class*="lucide-target"] circle:nth-of-type(2) { animation-delay: .1s !important; }
    .main-actions-grid > button:hover > svg[class*="lucide-target"] circle:nth-of-type(3) { animation-delay: .2s !important; }
    .main-actions-grid > button:hover > svg[class*="lucide-database"] > *:nth-child(2) { animation-delay: .1s !important; }
    .main-actions-grid > button:hover > svg[class*="lucide-database"] > *:nth-child(3) { animation-delay: .2s !important; }
}

/* Корона PRO-бейджа живёт поверх кнопки — её не трогаем, иначе бейдж
   начинает конкурировать за внимание с самой иконкой. */
.main-actions-grid .pro-badge-corner svg,
.main-actions-grid .pro-badge-corner svg * {
    animation: none !important;
}

/* Экономия батареи и покой для тех, кому движение мешает */
@media (prefers-reduced-motion: reduce) {
    .main-actions-grid svg,
    .main-actions-grid svg * {
        animation: none !important;
    }
}

body.low-power .main-actions-grid svg,
body.low-power .main-actions-grid svg * {
    animation: none !important;
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ В МЕНЮ ТЕМ
   ------------------------------------------------------------------
   Здесь движение непрерывное, но очень медленное: список открыт
   недолго, иконок мало, и каждая подсказывает характер своей темы —
   глаз медленно моргает, мотоцикл покачивается на ходу, карандаш
   пишет, бархан плывёт в мареве, снежинка кружится.

   Анимации работают только пока меню раскрыто (.show) — в закрытом
   состоянии браузер не тратит на них ни кадра.

   opacity в кадрах задан намеренно: правило #themeDropdownContent svg
   ставит иконкам opacity: 0 (остаток незавершённой draw-in анимации),
   и без этого они бы гасли.
   ================================================================== */
#themeDropdownContent.show svg[data-lucide],
#themeDropdownContent.show svg[data-icon] {
    transform-box: fill-box;
    transform-origin: center;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Тьма — глаз периодически приоткрывается и снова закрывается.
   Одной иконкой этого не показать: закрытый и открытый глаз лежат
   стопкой, и мы перекрёстно гасим их. Большую часть цикла глаз закрыт —
   открытие должно читаться как редкое событие, а не как мигалка. */
.theme-eye {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.theme-eye .eye-shut,
.theme-eye .eye-open {
    position: absolute;
    inset: 0;
    display: block;
    line-height: 0;
}

/* Базовое правило #themeDropdownContent svg ставит иконкам opacity: 0.
   Видимостью здесь управляют обёртки, поэтому сам svg держим непрозрачным. */
.theme-eye svg {
    width: 18px !important;
    height: 18px !important;
    opacity: 1 !important;
}

@keyframes th-eye-shut {
    0%, 60%   { opacity: 1; }
    67%, 86%  { opacity: 0; }
    93%, 100% { opacity: 1; }
}

@keyframes th-eye-open {
    0%, 60%   { opacity: 0; }
    67%, 86%  { opacity: 1; }
    93%, 100% { opacity: 0; }
}

#themeDropdownContent.show .theme-eye .eye-shut {
    animation: th-eye-shut 6.5s ease-in-out infinite;
}

#themeDropdownContent.show .theme-eye .eye-open {
    animation: th-eye-open 6.5s ease-in-out infinite;
}

/* В закрытом меню показываем только закрытый глаз — иконка темы «Тьма» */
#themeDropdownContent:not(.show) .theme-eye .eye-open {
    opacity: 0;
}

/* Токийская ночь — мотоцикл едет, покачиваясь, и время от времени
   уходит в прыжок с трамплина: задирает нос, зависает и приземляется
   с коротким доворотом. */
@keyframes th-ride {
    0%, 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    16%      { transform: translate(1px, 0) rotate(-3deg); }
    34%      { transform: translate(-.8px, 0) rotate(2deg); }
    /* отрыв */
    56%      { transform: translate(0, -1px) rotate(-15deg); }
    /* верхняя точка */
    68%      { transform: translate(1.6px, -5.5px) rotate(-21deg); }
    76%      { transform: translate(2px, -4px) rotate(-10deg); }
    /* приземление и отыгрыш подвески */
    86%      { transform: translate(.6px, 0) rotate(7deg); }
    93%      { transform: translate(0, 0) rotate(-3deg); }
}
#themeDropdownContent.show svg[data-lucide="motorbike"],
#themeDropdownContent.show svg[data-icon="motorbike"] {
    animation-name: th-ride;
    animation-duration: 5s;
    transform-origin: 70% 80%; /* центр вращения — заднее колесо */
}

/* Графит — карандаш пишет */
@keyframes th-write {
    0%, 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    25%      { opacity: 1; transform: translate(1px, -1px) rotate(-7deg); }
    50%      { opacity: 1; transform: translate(-1px, 1px) rotate(5deg); }
    75%      { opacity: 1; transform: translate(1px, 0) rotate(-3deg); }
}
#themeDropdownContent.show svg[data-lucide="pencil"],
#themeDropdownContent.show svg[data-icon="pencil"] {
    animation-name: th-write;
    animation-duration: 2.6s;
}

/* Дюна — настоящая объёмная пирамида, а не плоская иконка.
   Из SVG-контура объём получить нельзя: rotateY схлопывает его в линию, и
   сразу видно, что фигура плоская. Поэтому строим пирамиду из четырёх
   треугольных граней в общем 3D-контексте и вращаем вокруг вертикальной оси —
   грани уходят за фигуру и выходят с другой стороны, как при облёте. */
.theme-3d-pyramid {
    display: inline-block;
    /* Запас вокруг фигуры. contain: paint ниже обрезает всё по краю коробки,
       а ближняя грань под перспективой выступает за 18×18 на доли пикселя —
       без запаса у пирамиды срезало края. Отступ расширяет область
       отрисовки, отрицательное поле возвращает след в раскладке к прежним
       18×18, content-box гарантирует, что отступ не съест саму фигуру. */
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 5px;
    margin: -5px;
    /* perspective обязана быть на РОДИТЕЛЕ вращающегося слоя, иначе
       грани проецируются ортогонально и объём пропадает.
       260px — умеренно: при 90px на 18-пиксельной фигуре ближняя грань
       раздувалась вдвое относительно дальней, и пирамида ломалась. */
    perspective: 260px;
    flex-shrink: 0;

    /* Клетка для перерисовки.
       Без неё вращение пирамиды объявляло устаревшей отрисовку ВСЕЙ панели
       меню: 3D-контекст (preserve-3d) браузер не может композитить отдельно
       и каждый кадр перерисовывал панель целиком — со стеклом и всем
       содержимым. Внешне это выглядело как моргание меню, хотя ни DOM, ни
       стили не менялись; отладка это подтвердила, а гашение только этой
       анимации моргание прекращало.
       contain: paint запирает перерисовку внутри 18×18, layout — пересчёт
       раскладки. Размеры заданы явно, поэтому клетка ничего не ломает. */
    contain: layout paint;
    /* Своя область наложения: слой пирамиды не смешивается с панелью. */
    isolation: isolate;
    /* Тот же приглушённый тон, что и у соседних значков: без этого фигура
       брала цвет текста строки и в светлой теме читалась чёрным пятном. */
    color: var(--secondary-text-color);
}

.theme-3d-pyramid .p3d-spin {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: dune-orbit 7s linear infinite;
}

/* Свой слой у композитора просим только пока пирамида реально вращается:
   постоянный will-change держал бы лишний слой и при закрытом меню, где
   анимация всё равно на паузе (см. правило ниже). */
#themeDropdownContent.show .theme-3d-pyramid .p3d-spin {
    will-change: transform;
}

.theme-3d-pyramid .p3d-spin i {
    position: absolute;
    inset: 0;
    /* Треугольная грань; цвет берём от текста строки, чтобы иконка
       оставалась в палитре темы. */
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: currentColor;
    /* Ключевой момент: грань отклоняется вокруг СВОЕГО НИЖНЕГО РЕБРА, а не
       вокруг центра. При повороте от центра вершины четырёх треугольников
       разъезжаются в стороны и фигура рассыпается. */
    transform-origin: 50% 100%;
}

/* Четыре грани по кругу. translateZ равен половине основания (18px / 2),
   чтобы ребро встало на периметр базы, а наклон ровно 30°: при нём
   sin(30°) = 0.5, вершина смещается назад ровно на половину основания
   и все четыре сходятся в одной точке на оси.

   Светотень делаем НЕПРОЗРАЧНЫМИ цветами, а не opacity. С полупрозрачными
   гранями задние просвечивают сквозь передние, силуэт мутнеет и фигура
   выглядит поломанной. Непрозрачные грани браузер сортирует по глубине,
   и дальние честно закрываются ближними. */
/* Светотень уводим к цвету ПАНЕЛИ, а не к чёрному.
   С чёрным в светлой теме сплошная фигура превращалась в чёрное пятно —
   соседние значки там контурные и лёгкие, а эта заливная. Смешение с фоном
   работает в обе стороны: на светлой панели боковые грани светлеют, на
   тёмной темнеют, и разница между гранями (то есть сам объём) сохраняется
   в любой теме. */
.theme-3d-pyramid .p3d-spin i:nth-child(1) {
    transform: rotateY(0deg) translateZ(9px) rotateX(30deg);
    background: currentColor;
}
.theme-3d-pyramid .p3d-spin i:nth-child(2) {
    transform: rotateY(90deg) translateZ(9px) rotateX(30deg);
    background: color-mix(in srgb, currentColor 68%, var(--container-bg-color));
}
.theme-3d-pyramid .p3d-spin i:nth-child(3) {
    transform: rotateY(180deg) translateZ(9px) rotateX(30deg);
    background: color-mix(in srgb, currentColor 44%, var(--container-bg-color));
}
.theme-3d-pyramid .p3d-spin i:nth-child(4) {
    transform: rotateY(270deg) translateZ(9px) rotateX(30deg);
    background: color-mix(in srgb, currentColor 68%, var(--container-bg-color));
}

/* Небольшой постоянный наклон вперёд — смотрим на пирамиду чуть сверху,
   так силуэт объёмнее, чем при взгляде строго сбоку. */
@keyframes dune-orbit {
    0%   { transform: rotateX(14deg) rotateY(0deg); }
    100% { transform: rotateX(14deg) rotateY(360deg); }
}

/* Вращаем только пока меню раскрыто */
#themeDropdownContent:not(.show) .theme-3d-pyramid .p3d-spin {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .theme-3d-pyramid .p3d-spin {
        animation: none !important;
        transform: rotateX(14deg) rotateY(25deg);
    }
}

body.low-power .theme-3d-pyramid .p3d-spin {
    animation: none !important;
    transform: rotateX(14deg) rotateY(25deg);
}

/* Снег — снежинка кружится и сносится ветром вбок.
   translateX стоит ДО rotate: иначе снос считался бы в повёрнутой системе
   координат и снежинка ходила бы по кругу вместе с вращением.
   Восемь опорных кадров: поворот остаётся строго равномерным (45° на шаг),
   а боковое смещение получается плавным, без треугольных изломов. */
@keyframes th-snow {
    0%    { opacity: 1; transform: translateX(0)      rotate(0deg); }
    12.5% {             transform: translateX(-1px)   rotate(45deg); }
    25%   {             transform: translateX(-1.8px) rotate(90deg); }
    37.5% {             transform: translateX(-1px)   rotate(135deg); }
    50%   {             transform: translateX(0)      rotate(180deg); }
    62.5% {             transform: translateX(1px)    rotate(225deg); }
    75%   {             transform: translateX(1.8px)  rotate(270deg); }
    87.5% {             transform: translateX(1px)    rotate(315deg); }
    100%  { opacity: 1; transform: translateX(0)      rotate(360deg); }
}
#themeDropdownContent.show svg[data-lucide="snowflake"],
#themeDropdownContent.show svg[data-icon="snowflake"] {
    animation-name: th-snow;
    animation-duration: 14s;
    animation-timing-function: linear;
}

/* Зернистость — искры вспыхивают по очереди.
   Раньше здесь качался весь значок разом: жест ничего не изображал. В иконке
   sparkles три отдельные искры — большая звезда (1), маленький крестик из
   двух штрихов (2 и 3) и точка (4). Зерно — это мерцание, а мерцает оно
   вразнобой, поэтому вспышки разведены по фазе. */
@keyframes th-spark {
    0%, 62%, 100% { opacity: .55; transform: scale(.86); }
    72%           { opacity: 1;   transform: scale(1.18); }
    82%           { opacity: .8;  transform: scale(.96); }
}
#themeDropdownContent.show svg[data-lucide="sparkles"],
#themeDropdownContent.show svg[data-icon="sparkles"] {
    animation: none;
}
#themeDropdownContent.show svg[data-lucide="sparkles"] > *,
#themeDropdownContent.show svg[data-icon="sparkles"] > * {
    transform-box: fill-box;
    transform-origin: center;
    animation: th-spark 2.9s ease-in-out infinite;
}
/* Крестик — это одна искра из двух штрихов: они вспыхивают вместе */
#themeDropdownContent.show svg[data-lucide="sparkles"] > *:nth-child(2),
#themeDropdownContent.show svg[data-lucide="sparkles"] > *:nth-child(3),
#themeDropdownContent.show svg[data-icon="sparkles"] > *:nth-child(2),
#themeDropdownContent.show svg[data-icon="sparkles"] > *:nth-child(3) {
    animation-delay: -1.9s;
}
#themeDropdownContent.show svg[data-lucide="sparkles"] > *:nth-child(4),
#themeDropdownContent.show svg[data-icon="sparkles"] > *:nth-child(4) {
    animation-delay: -1s;
}

/* Живые тени — солнце дышит светом */
@keyframes th-sun {
    0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    50%      { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 4px currentColor); }
}
#themeDropdownContent.show svg[data-lucide="sun"],
#themeDropdownContent.show svg[data-icon="sun"] {
    animation-name: th-sun;
    animation-duration: 4.5s;
}

@media (prefers-reduced-motion: reduce) {
    #themeDropdownContent.show svg[data-lucide],
    #themeDropdownContent.show svg[data-icon] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

body.low-power #themeDropdownContent.show svg[data-lucide],
body.low-power #themeDropdownContent.show svg[data-icon] {
    animation: none !important;
    opacity: 1 !important;
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ ВО ВСПЛЫВАЮЩИХ МЕНЮ ЧАТА
   ------------------------------------------------------------------
   Меню «ещё», «прикрепить» и «магия текста» используют общий класс
   .ai-helper-menu, поэтому правила одни на все три. Анимации идут
   только пока меню открыто (:not(.hidden)) — оно живёт секунды,
   так что непрерывное движение здесь уместно и почти ничего не стоит.

   Стрелки подменю (chevron-right) намеренно исключены: это указатель
   навигации, он не должен шевелиться.
   ================================================================== */
.ai-helper-menu:not(.hidden) svg:not([data-lucide="chevron-right"]):not([data-icon="chevron-right"]) {
    transform-box: fill-box;
    transform-origin: center;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Файлы и папка — «загружается вверх» */
@keyframes hm-lift {
    0%, 65%, 100% { transform: translateY(0); }
    78%           { transform: translateY(-2.5px); }
    88%           { transform: translateY(.5px); }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="file-up"],
.ai-helper-menu:not(.hidden) svg[data-icon="file-up"] {
    animation-name: hm-lift;
    animation-duration: 3.6s;
}
.ai-helper-menu:not(.hidden) svg[data-lucide="folder-up"],
.ai-helper-menu:not(.hidden) svg[data-icon="folder-up"] {
    animation-name: hm-lift;
    animation-duration: 3.6s;
    animation-delay: .5s;
}

/* Создать вопрос — знак вопроса «задумывается» */
@keyframes hm-ask {
    0%, 60%, 100% { transform: rotate(0deg) scale(1); }
    72%           { transform: rotate(-9deg) scale(1.08); }
    86%           { transform: rotate(6deg) scale(1.02); }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="help-circle"],
.ai-helper-menu:not(.hidden) svg[data-icon="help-circle"] {
    animation-name: hm-ask;
    animation-duration: 4.2s;
}

/* Перевод — переворот на другую сторону */
@keyframes hm-flip {
    0%, 55%, 100% { transform: perspective(90px) rotateY(0deg); }
    75%           { transform: perspective(90px) rotateY(-32deg); }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="languages"],
.ai-helper-menu:not(.hidden) svg[data-icon="languages"] {
    animation-name: hm-flip;
    animation-duration: 4.6s;
}

/* Умные ответы — лампочка вспыхивает */
@keyframes hm-glow {
    0%, 60%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    75%           { transform: scale(1.12); filter: drop-shadow(0 0 5px currentColor); }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="lightbulb"],
.ai-helper-menu:not(.hidden) svg[data-icon="lightbulb"] {
    animation-name: hm-glow;
    animation-duration: 3.9s;
}

/* --- Покадровые жесты меню: двигается деталь, а не значок целиком.
   Прежние правила качали и подпрыгивали иконку разом — жест не изображал
   того, что подписано рядом, и все пункты выглядели одинаково. --- */
.ai-helper-menu:not(.hidden) svg[data-lucide="check-check"],
.ai-helper-menu:not(.hidden) svg[data-icon="check-check"],
.ai-helper-menu:not(.hidden) svg[data-lucide="smile"],
.ai-helper-menu:not(.hidden) svg[data-icon="smile"],
.ai-helper-menu:not(.hidden) svg[data-lucide="droplets"],
.ai-helper-menu:not(.hidden) svg[data-icon="droplets"],
.ai-helper-menu:not(.hidden) svg[data-lucide="search"],
.ai-helper-menu:not(.hidden) svg[data-icon="search"],
.ai-helper-menu:not(.hidden) svg[data-lucide="users"],
.ai-helper-menu:not(.hidden) svg[data-icon="users"],
.ai-helper-menu:not(.hidden) svg[data-lucide="sparkles"],
.ai-helper-menu:not(.hidden) svg[data-icon="sparkles"] {
    animation: none !important;
}

.ai-helper-menu:not(.hidden) svg > * {
    transform-box: fill-box;
    transform-origin: center;
}

/* Исправить ошибки — две галочки прочерчиваются одна за другой */
@keyframes hm-draw-tick {
    0%, 40%  { stroke-dasharray: 26; stroke-dashoffset: 26; }
    58%      { stroke-dasharray: 26; stroke-dashoffset: 0; }
    88%      { stroke-dasharray: 26; stroke-dashoffset: 0; }
    100%     { stroke-dasharray: 26; stroke-dashoffset: 26; }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="check-check"] > *,
.ai-helper-menu:not(.hidden) svg[data-icon="check-check"] > * {
    animation: hm-draw-tick 3.6s ease-in-out infinite;
}
.ai-helper-menu:not(.hidden) svg[data-lucide="check-check"] > *:nth-child(2),
.ai-helper-menu:not(.hidden) svg[data-icon="check-check"] > *:nth-child(2) {
    animation-delay: .22s; /* вторая галочка идёт следом за первой */
}

/* Эмодзи — смайлик моргает и шире улыбается. Двигаются глаза (1 и 3) и
   рот (2), окружность лица стоит: прыгающая голова смыслом не была. */
@keyframes hm-blink {
    0%, 62%, 100% { transform: scaleY(1); }
    68%, 72%      { transform: scaleY(.1); }
}
@keyframes hm-grin {
    0%, 40%, 100% { transform: scaleX(1) translateY(0); }
    60%           { transform: scaleX(1.18) translateY(.6px); }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="smile"] > *:nth-child(1),
.ai-helper-menu:not(.hidden) svg[data-lucide="smile"] > *:nth-child(3),
.ai-helper-menu:not(.hidden) svg[data-icon="smile"] > *:nth-child(1),
.ai-helper-menu:not(.hidden) svg[data-icon="smile"] > *:nth-child(3) {
    animation: hm-blink 3.4s ease-in-out infinite;
}
.ai-helper-menu:not(.hidden) svg[data-lucide="smile"] > *:nth-child(2),
.ai-helper-menu:not(.hidden) svg[data-icon="smile"] > *:nth-child(2) {
    animation: hm-grin 3.4s ease-in-out infinite;
}

/* Объём и «вода» — капли наливаются по очереди */
@keyframes hm-drop-fill {
    0%, 30%   { transform: scale(.82) translateY(1.5px); opacity: .5; }
    48%, 78%  { transform: scale(1) translateY(0); opacity: 1; }
    95%, 100% { transform: scale(.82) translateY(1.5px); opacity: .5; }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="droplets"] > *,
.ai-helper-menu:not(.hidden) svg[data-icon="droplets"] > * {
    animation: hm-drop-fill 3.8s ease-in-out infinite;
}
.ai-helper-menu:not(.hidden) svg[data-lucide="droplets"] > *:nth-child(2),
.ai-helper-menu:not(.hidden) svg[data-icon="droplets"] > *:nth-child(2) {
    animation-delay: .3s;
}

/* Сводка — искрится. Состав иконки: большая звезда, крестик справа сверху
   (две черты с общим центром 20,4) и точка слева снизу. Раньше качался весь
   значок целиком: жест читался как «дёрнулось», а не как блеск. Теперь
   звезда медленно дышит, а обе искры вспыхивают по очереди — движение
   мелкое и не отвлекает от текста пункта. */
@keyframes hm-spark-core {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.07) rotate(9deg); }
}
@keyframes hm-spark-twinkle {
    0%, 58%, 100% { transform: scale(.5); opacity: .3; }
    74%           { transform: scale(1.18); opacity: 1; }
    86%           { transform: scale(.85); opacity: .7; }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="sparkles"] > *:nth-child(1),
.ai-helper-menu:not(.hidden) svg[data-icon="sparkles"] > *:nth-child(1) {
    animation: hm-spark-core 3.8s ease-in-out infinite;
}
.ai-helper-menu:not(.hidden) svg[data-lucide="sparkles"] > *:nth-child(2),
.ai-helper-menu:not(.hidden) svg[data-lucide="sparkles"] > *:nth-child(3),
.ai-helper-menu:not(.hidden) svg[data-icon="sparkles"] > *:nth-child(2),
.ai-helper-menu:not(.hidden) svg[data-icon="sparkles"] > *:nth-child(3) {
    animation: hm-spark-twinkle 3.1s ease-in-out infinite;
    animation-delay: var(--spark-phase, 0s);
}
.ai-helper-menu:not(.hidden) svg[data-lucide="sparkles"] > *:nth-child(4),
.ai-helper-menu:not(.hidden) svg[data-icon="sparkles"] > *:nth-child(4) {
    /* Вторая искра — в противофазе, иначе обе мигают разом. */
    animation: hm-spark-twinkle 3.1s ease-in-out infinite;
    animation-delay: calc(var(--spark-phase, 0s) + 1.55s);
}

/* Оба пункта сводки несут одну и ту же иконку. Без сдвига они мерцали бы
   синхронно, и это читалось бы как мигание всего меню, а не как блеск
   двух отдельных значков. Сдвиг задаём переменной: правила выше стоят на
   более цепких селекторах, и спорить с ними специфичностью незачем. */
.ai-helper-menu:not(.hidden) a[data-action="summarize-all"] { --spark-phase: .9s; }

/* Поиск — лупа ведёт по строке и наводит резкость */
@keyframes hm-lens {
    0%, 100% { transform: translate(-1.5px, .8px) scale(1); }
    40%      { transform: translate(1.5px, -.8px) scale(1); }
    70%      { transform: translate(0, 0) scale(1.15); }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="search"] > *,
.ai-helper-menu:not(.hidden) svg[data-icon="search"] > * {
    transform-box: view-box;
    transform-origin: 11px 11px;
    animation: hm-lens 4s ease-in-out infinite;
}

/* --- Меню канала: закрепить, заглушить, уведомления, настройки --- */
.ios-context-menu:not(.hidden) svg,
.ios-menu-item svg {
    transform-box: fill-box;
    transform-origin: center;
}
.ios-context-menu:not(.hidden) svg > *,
.ios-menu-item svg > * {
    transform-box: fill-box;
    transform-origin: center;
}

/* Закрепить — булавка втыкается */
@keyframes cm-pin {
    0%, 55%, 100% { transform: translateY(0) rotate(0deg); }
    68%           { transform: translateY(-2.5px) rotate(-12deg); }
    80%           { transform: translateY(.8px) rotate(0deg); }
}
.ios-context-menu:not(.hidden) svg[data-lucide="pin"],
.ios-menu-item svg[data-lucide="pin"] {
    animation: cm-pin 4s cubic-bezier(.4, 0, .3, 1) infinite;
}

/* Заглушить — по колокольчику проходит перечёркивающая линия */
@keyframes cm-mute {
    0%, 45%  { stroke-dasharray: 29; stroke-dashoffset: 29; }
    62%      { stroke-dasharray: 29; stroke-dashoffset: 0; }
    90%      { stroke-dasharray: 29; stroke-dashoffset: 0; }
    100%     { stroke-dasharray: 29; stroke-dashoffset: 29; }
}
.ios-context-menu:not(.hidden) svg[data-lucide="bell-off"] > *:nth-child(3),
.ios-menu-item svg[data-lucide="bell-off"] > *:nth-child(3) {
    animation: cm-mute 4.4s ease-in-out infinite;
}

/* Уведомления — плюсик у колокольчика подмигивает */
@keyframes cm-plus {
    0%, 55%, 100% { opacity: 1; transform: scale(1); }
    70%           { opacity: 1; transform: scale(1.35); }
}
.ios-context-menu:not(.hidden) svg[data-lucide="bell-plus"] > *:nth-child(2),
.ios-context-menu:not(.hidden) svg[data-lucide="bell-plus"] > *:nth-child(3),
.ios-menu-item svg[data-lucide="bell-plus"] > *:nth-child(2),
.ios-menu-item svg[data-lucide="bell-plus"] > *:nth-child(3) {
    transform-box: view-box;
    transform-origin: 18px 8px;
    animation: cm-plus 3.8s ease-in-out infinite;
}

/* Настройки — шестерня проворачивается на один зуб, ось стоит */
@keyframes cm-gear {
    0%, 50%, 100% { transform: rotate(0deg); }
    72%           { transform: rotate(45deg); }
}
.ios-context-menu:not(.hidden) svg[data-lucide="settings"] > *:nth-child(1),
.ios-menu-item svg[data-lucide="settings"] > *:nth-child(1) {
    animation: cm-gear 4.6s cubic-bezier(.5, 0, .3, 1) infinite;
}

/* Создать вопрос — знак вопроса прочерчивается, точка ставится следом.
   Круг стоит: он рамка, а не смысл. */
@keyframes hm-q-draw {
    0%, 34%  { stroke-dasharray: 12; stroke-dashoffset: 12; }
    52%      { stroke-dasharray: 12; stroke-dashoffset: 0; }
    86%      { stroke-dasharray: 12; stroke-dashoffset: 0; }
    100%     { stroke-dasharray: 12; stroke-dashoffset: 12; }
}
@keyframes hm-q-dot {
    0%, 50%   { opacity: 0; transform: scale(.3); }
    60%, 86%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(.3); }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="circle-question-mark"] > *:nth-child(2),
.ai-helper-menu:not(.hidden) svg[data-lucide="help-circle"] > *:nth-child(2),
.ai-helper-menu:not(.hidden) svg[data-icon="circle-question-mark"] > *:nth-child(2),
.ai-helper-menu:not(.hidden) svg[data-icon="help-circle"] > *:nth-child(2) {
    animation: hm-q-draw 3.6s ease-in-out infinite;
}
.ai-helper-menu:not(.hidden) svg[data-lucide="circle-question-mark"] > *:nth-child(3),
.ai-helper-menu:not(.hidden) svg[data-lucide="help-circle"] > *:nth-child(3),
.ai-helper-menu:not(.hidden) svg[data-icon="circle-question-mark"] > *:nth-child(3),
.ai-helper-menu:not(.hidden) svg[data-icon="help-circle"] > *:nth-child(3) {
    animation: hm-q-dot 3.6s ease-in-out infinite;
}

/* Своя команда — курсор терминала мигает, стрелка приглашения стоит */
.ai-helper-menu:not(.hidden) svg[data-lucide="terminal"] > *:nth-child(1),
.ai-helper-menu:not(.hidden) svg[data-icon="terminal"] > *:nth-child(1) {
    transform-origin: left center;
    animation: hm-caret 2.4s steps(1, end) infinite;
}

/* Бионическое чтение — зрачок ведёт по строке и фокусируется.
   Рамка сканера (элементы 1-4) и контур глаза (6) неподвижны. */
@keyframes hm-scan-pupil {
    0%, 100% { transform: translateX(-2px) scale(1); }
    38%      { transform: translateX(2px) scale(1); }
    66%      { transform: translateX(0) scale(1.8); }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="scan-eye"] > *:nth-child(5),
.ai-helper-menu:not(.hidden) svg[data-icon="scan-eye"] > *:nth-child(5) {
    animation: hm-scan-pupil 4s ease-in-out infinite;
}

/* Персонажи — фигуры проявляются одна за другой: сначала передняя,
   затем та, что позади. Так читается «несколько персон». */
@keyframes hm-person-in {
    0%, 20%   { opacity: .35; transform: translateY(1.5px) scale(.94); }
    38%, 80%  { opacity: 1;   transform: translateY(0) scale(1); }
    96%, 100% { opacity: .35; transform: translateY(1.5px) scale(.94); }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="users"] > *,
.ai-helper-menu:not(.hidden) svg[data-icon="users"] > * {
    animation: hm-person-in 4.2s ease-in-out infinite;
}
.ai-helper-menu:not(.hidden) svg[data-lucide="users"] > *:nth-child(2),
.ai-helper-menu:not(.hidden) svg[data-icon="users"] > *:nth-child(2) { animation-delay: .3s; }
.ai-helper-menu:not(.hidden) svg[data-lucide="users"] > *:nth-child(3),
.ai-helper-menu:not(.hidden) svg[data-icon="users"] > *:nth-child(3) { animation-delay: .4s; }

/* Своя команда — курсор терминала мигает */
@keyframes hm-caret {
    0%, 44%, 100% { opacity: 1; }
    52%, 68%      { opacity: .4; }
}
.ai-helper-menu:not(.hidden) svg[data-lucide="terminal"],
.ai-helper-menu:not(.hidden) svg[data-icon="terminal"] {
    animation-name: hm-caret;
    animation-duration: 2.4s;
    animation-timing-function: steps(1, end);
}

@media (prefers-reduced-motion: reduce) {
    .ai-helper-menu:not(.hidden) svg {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

body.low-power .ai-helper-menu:not(.hidden) svg {
    animation: none !important;
}

/* ==================================================================
   СВОРАЧИВАНИЕ ПАНЕЛИ ВВОДА В ИИ-ЧАТЕ
   ------------------------------------------------------------------
   Кнопка-стрелка сидит на верхней кромке панели. В свёрнутом виде
   прячем поле ввода и ряд кнопок, оставляя саму стрелку — иначе
   развернуть будет нечем.
   ================================================================== */
/* Кнопка живёт в ряду управления, слева от поиска Google.
   Отдельной строкой она добавляла панели высоты — то самое место,
   которое сворачивание и должно освобождать. */
.ai-input-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.ai-input-collapse-btn:hover {
    color: var(--text-color);
    background: var(--input-hover-bg-color);
}

/* Стрелка подсказывает, куда уедет панель: в развёрнутом виде клюёт вниз,
   в свёрнутом — тянется вверх. Движение занимает малую часть цикла, как
   у соседних кнопок футера, иначе рядом с полем ввода это мельтешит.
   Здесь двигается значок целиком — и это тот случай, когда так и надо:
   сама стрелка и есть смысл кнопки, дробить её не на что. */
.ai-input-collapse-btn svg {
    width: 20px;
    height: 20px;
    transform-box: fill-box;
    transform-origin: center;
    animation: aic-nudge-down 2s cubic-bezier(.4, 0, .2, 1) infinite;
}

body.ai-input-collapsed .ai-input-collapse-btn svg {
    animation-name: aic-nudge-up;
}

/* Два клевка с затуханием: второй короче первого — так жест читается
   как приглашение нажать, а не как равномерное качание. */
@keyframes aic-nudge-down {
    0%, 66%   { transform: translateY(0) scaleY(1); }
    72%       { transform: translateY(2.5px) scaleY(.82); }
    78%       { transform: translateY(-.5px) scaleY(1.06); }
    84%       { transform: translateY(1.2px) scaleY(.92); }
    90%, 100% { transform: translateY(0) scaleY(1); }
}
@keyframes aic-nudge-up {
    0%, 66%   { transform: translateY(0) scaleY(1); }
    72%       { transform: translateY(-2.5px) scaleY(.82); }
    78%       { transform: translateY(.5px) scaleY(1.06); }
    84%       { transform: translateY(-1.2px) scaleY(.92); }
    90%, 100% { transform: translateY(0) scaleY(1); }
}

/* На наведении жест становится непрерывным и чуть размашистее:
   курсор уже на кнопке, ждать своей фазы в семисекундном цикле незачем. */
.ai-input-collapse-btn:hover svg,
.ai-input-collapse-btn:focus-visible svg {
    animation-name: aic-nudge-down-live;
    animation-duration: 1.4s;
}
body.ai-input-collapsed .ai-input-collapse-btn:hover svg,
body.ai-input-collapsed .ai-input-collapse-btn:focus-visible svg {
    animation-name: aic-nudge-up-live;
}

@keyframes aic-nudge-down-live {
    0%, 100% { transform: translateY(0) scaleY(1); }
    30%      { transform: translateY(3px) scaleY(.8); }
    55%      { transform: translateY(-1px) scaleY(1.08); }
}
@keyframes aic-nudge-up-live {
    0%, 100% { transform: translateY(0) scaleY(1); }
    30%      { transform: translateY(-3px) scaleY(.8); }
    55%      { transform: translateY(1px) scaleY(1.08); }
}

/* Нажатие — стрелка проваливается в сторону движения панели */
.ai-input-collapse-btn:active svg {
    animation: none;
    transform: translateY(2px) scaleY(.85);
}
body.ai-input-collapsed .ai-input-collapse-btn:active svg {
    transform: translateY(-2px) scaleY(.85);
}

@media (prefers-reduced-motion: reduce) {
    .ai-input-collapse-btn svg,
    .ai-input-collapse-btn:hover svg,
    .ai-input-collapse-btn:active svg {
        animation: none !important;
        transform: none !important;
    }
}

.ai-chat-input-area {
    position: relative;
}

/* Сворачивается только строка ввода. Ряд с выбором персоны и кнопками
   (.ai-main-controls) остаётся на виду — с ним чат продолжает быть
   управляемым: можно сменить персону, открыть настройки и галерею. */
body.ai-input-collapsed .ai-chat-input-area > *:not(.ai-input-collapse-btn):not(.ai-main-controls) {
    display: none !important;
}

body.ai-input-collapsed .ai-chat-input-area {
    min-height: 0 !important;
    padding-top: 6px !important;
    padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
}

body.ai-input-collapsed .ai-chat-input-area .ai-main-controls {
    margin-bottom: 0 !important;
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ ПАНЕЛИ ДЕЙСТВИЙ ИИ-ЧАТА
   ------------------------------------------------------------------
   Эти кнопки видны постоянно, поэтому здесь дисциплина «редкого жеста»,
   как в главном меню: движение занимает малую часть цикла, фазы разведены.
   Непрерывная анимация в двух сантиметрах от поля ввода отвлекала бы.
   ================================================================== */
#aiChatSettingsBtn svg,
#aiToggleGalleryBtn svg,
#aiShowAllUserMessagesBtn svg,
#aiChatMicBtn svg,
#aiChatInputArea .ai-magic-btn svg,
.ai-chat-input-area .ai-magic-btn svg {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* У этих трёх кнопок движется ОДНА деталь, а не значок целиком:
   у настроек — рукоятки ползунков, у галереи — солнце в кадре,
   у писем — знак вопроса. Раскачивать иконку целиком в таких случаях
   неправильно: жест перестаёт что-либо означать. */
#aiChatSettingsBtn svg,
#aiToggleGalleryBtn svg,
#aiShowAllUserMessagesBtn svg {
    animation: none !important;
}

#aiChatSettingsBtn svg > *,
#aiToggleGalleryBtn svg > *,
#aiShowAllUserMessagesBtn svg > * {
    transform-box: fill-box;
    transform-origin: center;
}

/* Настройки — рукоятки едут по своим дорожкам.
   Последние три элемента иконки sliders-horizontal — это как раз они. */
@keyframes af-knob-a {
    0%, 62%, 100% { transform: translateX(0); }
    74%           { transform: translateX(-3.5px); }
    88%           { transform: translateX(-1px); }
}
@keyframes af-knob-b {
    0%, 62%, 100% { transform: translateX(0); }
    74%           { transform: translateX(4px); }
    88%           { transform: translateX(1.5px); }
}
#aiChatSettingsBtn svg > *:nth-last-child(3) {
    animation: af-knob-a 7s cubic-bezier(.5, 0, .3, 1) infinite;
}
#aiChatSettingsBtn svg > *:nth-last-child(2) {
    animation: af-knob-b 7s cubic-bezier(.5, 0, .3, 1) infinite;
    animation-delay: .12s;
}
#aiChatSettingsBtn svg > *:nth-last-child(1) {
    animation: af-knob-a 7s cubic-bezier(.5, 0, .3, 1) infinite;
    animation-delay: .24s;
}

/* Галерея — в кадре восходит и садится солнце */
@keyframes af-sun {
    0%       { transform: translateY(3px); opacity: 0; }
    18%      { transform: translateY(0); opacity: 1; }
    70%      { transform: translateY(0); opacity: 1; }
    88%, 100% { transform: translateY(3px); opacity: 0; }
}
#aiToggleGalleryBtn svg circle {
    animation: af-sun 7s ease-in-out infinite;
    animation-delay: 1.4s;
}

/* Мои сообщения — на конверте прочерчивается знак вопроса.
   Два последних элемента иконки: дуга и точка под ней. */
@keyframes af-q-draw {
    0%, 30%   { stroke-dasharray: 12; stroke-dashoffset: 12; }
    48%       { stroke-dasharray: 12; stroke-dashoffset: 0; }
    84%       { stroke-dasharray: 12; stroke-dashoffset: 0; }
    100%      { stroke-dasharray: 12; stroke-dashoffset: 12; }
}
@keyframes af-q-dot {
    0%, 46%   { opacity: 0; transform: scale(.3); }
    56%, 84%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(.3); }
}
#aiShowAllUserMessagesBtn svg > *:nth-last-child(2) {
    animation: af-q-draw 7s ease-in-out infinite;
    animation-delay: 2.8s;
}
#aiShowAllUserMessagesBtn svg > *:nth-last-child(1) {
    animation: af-q-dot 7s ease-in-out infinite;
    animation-delay: 2.8s;
}

/* Микрофон — ловит звук, уровень качнулся дважды */
@keyframes af-mic {
    0%, 72%, 100% { transform: scale(1); }
    79%           { transform: scale(1.16); }
    85%           { transform: scale(1); }
    91%           { transform: scale(1.09); }
}
#aiChatMicBtn svg {
    animation-name: af-mic;
    animation-delay: 4.2s;
}

/* Магия текста — взмах палочки со вспышкой */
/* Помощник текста — палочка делает взмах, и следом сыплются искры.
   Раньше качался и подсвечивался весь значок разом: жест не изображал
   ничего, кроме «иконка дёрнулась». В иконке волшебной палочки первые два
   элемента — сама палочка, остальные шесть — блёстки вокруг неё; двигаются
   они по отдельности, и только тогда это читается как взмах. */
@keyframes af-wand {
    0%, 66%, 100% { transform: rotate(0deg); }
    76%           { transform: rotate(-20deg); }
    85%           { transform: rotate(8deg); }
    93%           { transform: rotate(-3deg); }
}
@keyframes af-wand-spark {
    0%, 74%   { opacity: .25; transform: scale(.5); }
    83%       { opacity: 1;   transform: scale(1.35); }
    94%, 100% { opacity: .25; transform: scale(.5); }
}

.ai-magic-btn svg[data-lucide="wand-2"],
.ai-magic-btn svg[data-lucide="wand-sparkles"],
.ai-magic-btn svg[data-icon="wand-2"],
.ai-magic-btn svg[data-icon="wand-sparkles"] {
    animation: none;
}

.ai-magic-btn svg[data-lucide="wand-2"] > *,
.ai-magic-btn svg[data-lucide="wand-sparkles"] > *,
.ai-magic-btn svg[data-icon="wand-2"] > *,
.ai-magic-btn svg[data-icon="wand-sparkles"] > * {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: var(--af-cycle, 7s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 5.6s;
}

/* Палочку держат за нижний конец — ось в координатах иконки */
.ai-magic-btn svg[data-lucide="wand-2"] > *:nth-child(1),
.ai-magic-btn svg[data-lucide="wand-2"] > *:nth-child(2),
.ai-magic-btn svg[data-lucide="wand-sparkles"] > *:nth-child(1),
.ai-magic-btn svg[data-lucide="wand-sparkles"] > *:nth-child(2) {
    transform-box: view-box;
    transform-origin: 3px 20px;
    animation-name: af-wand;
    animation-timing-function: cubic-bezier(.4, 0, .3, 1);
}

.ai-magic-btn svg[data-lucide="wand-2"] > *:nth-child(n+3),
.ai-magic-btn svg[data-lucide="wand-sparkles"] > *:nth-child(n+3) {
    animation-name: af-wand-spark;
}
/* Искры загораются не хором, а вразнобой — иначе это вспышка, а не россыпь */
.ai-magic-btn svg[data-lucide="wand-2"] > *:nth-child(4),
.ai-magic-btn svg[data-lucide="wand-sparkles"] > *:nth-child(4) { animation-delay: 5.67s; }
.ai-magic-btn svg[data-lucide="wand-2"] > *:nth-child(5),
.ai-magic-btn svg[data-lucide="wand-sparkles"] > *:nth-child(5) { animation-delay: 5.74s; }
.ai-magic-btn svg[data-lucide="wand-2"] > *:nth-child(6),
.ai-magic-btn svg[data-lucide="wand-sparkles"] > *:nth-child(6) { animation-delay: 5.81s; }
.ai-magic-btn svg[data-lucide="wand-2"] > *:nth-child(7),
.ai-magic-btn svg[data-lucide="wand-sparkles"] > *:nth-child(7) { animation-delay: 5.88s; }
.ai-magic-btn svg[data-lucide="wand-2"] > *:nth-child(8),
.ai-magic-btn svg[data-lucide="wand-sparkles"] > *:nth-child(8) { animation-delay: 5.95s; }

@media (prefers-reduced-motion: reduce) {
    #aiChatSettingsBtn svg,
    #aiToggleGalleryBtn svg,
    #aiShowAllUserMessagesBtn svg,
    #aiChatMicBtn svg,
    .ai-chat-input-area .ai-magic-btn svg {
        animation: none !important;
        transform: none !important;
    }
}

body.low-power #aiChatSettingsBtn svg,
body.low-power #aiToggleGalleryBtn svg,
body.low-power #aiShowAllUserMessagesBtn svg,
body.low-power #aiChatMicBtn svg,
body.low-power .ai-chat-input-area .ai-magic-btn svg {
    animation: none !important;
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ В МЕНЮ ВЛОЖЕНИЙ ИИ-ЧАТА
   ------------------------------------------------------------------
   Здесь анимируются не иконки целиком, а их части: солнце внутри рамки
   фотографии и капли краски на палитре. Так жест читается предметно,
   а не как общее покачивание значка.
   ================================================================== */
.ai-attach-menu:not(.hidden) svg circle,
.ai-attach-menu:not(.hidden) svg ellipse {
    transform-box: fill-box;
    transform-origin: center;
}

/* Фото / Файл — солнце поднимается над горизонтом и садится.
   circle в иконке image — это как раз солнце. */
@keyframes at-sunrise {
    0%       { transform: translateY(3.5px); opacity: 0; }
    22%      { transform: translateY(0); opacity: 1; }
    68%      { transform: translateY(0); opacity: 1; }
    88%, 100% { transform: translateY(3.5px); opacity: 0; }
}
/* Тот же восход — везде, где в ИИ-чате встречается эта иконка:
   и в меню вложений, и на кнопке «Создать изображение». */
.ai-attach-menu:not(.hidden) svg[data-lucide="image"] circle,
#aiChatModal svg[data-lucide="image"] circle,
#aiChatModal svg[data-lucide="image-plus"] circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: at-sunrise 4.4s ease-in-out infinite;
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ НАСТРОЕК ТЕСТА
   ------------------------------------------------------------------
   Экран настроек висит перед глазами, пока человек собирает тест,
   поэтому дисциплина редкого жеста: движение занимает ~10% цикла,
   фазы разведены по строкам списка.
   ================================================================== */
.settings-group label svg,
.radio-title svg {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Перемешивание — две нити меняются местами.
   Анимируем ЧАСТИ иконки, а не значок целиком: в shuffle две независимые
   линии, и обмен читается только когда они реально расходятся и проходят
   друг мимо друга. Поворот всего значка (хоть в плоскости, хоть через
   rotateY) этого не показывает — просто крутится картинка.

   Дочерние элементы lucide shuffle:
     1 — длинная S-кривая, 2 — верхняя стрелка,
     3-4 — короткие дуги,   5 — нижняя стрелка. */
.settings-group label svg[data-lucide="shuffle"] {
    animation: none !important; /* общий жест отключён, движутся только части */
}
.settings-group label svg[data-lucide="shuffle"] > * {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(.5, 0, .3, 1);
    animation-iteration-count: infinite;
}

/* Ни сдвигать части врозь, ни резать пути через stroke-dasharray нельзя:
   в первом случае линии расходятся, во втором иконка почти весь цикл
   показана обрывком штриха — и то и другое выглядит как сломанный значок.

   Работаем только прозрачностью: нити по очереди притухают, будто
   передают очередь друг другу. Геометрия остаётся нетронутой, а обмен
   читается за счёт последовательности. */
@keyframes qs-alt-a {
    0%, 58%, 100% { opacity: 1; }
    68%           { opacity: .22; }
    78%           { opacity: 1; }
}
@keyframes qs-alt-b {
    0%, 68%, 100% { opacity: 1; }
    78%           { opacity: .22; }
    88%           { opacity: 1; }
}

/* Первая нить со своей стрелкой */
.settings-group label svg[data-lucide="shuffle"] > *:nth-child(1),
.settings-group label svg[data-lucide="shuffle"] > *:nth-child(2) {
    animation-name: qs-alt-a;
    animation-timing-function: ease-in-out;
}

/* Вторая — с отставанием, поэтому очередь видна */
.settings-group label svg[data-lucide="shuffle"] > *:nth-child(3),
.settings-group label svg[data-lucide="shuffle"] > *:nth-child(4),
.settings-group label svg[data-lucide="shuffle"] > *:nth-child(5) {
    animation-name: qs-alt-b;
    animation-timing-function: ease-in-out;
}
.settings-group:nth-of-type(1) label svg[data-lucide="shuffle"] { animation-delay: 0s; }
.settings-group:nth-of-type(2) label svg[data-lucide="shuffle"] { animation-delay: 1.3s; }
.settings-group:nth-of-type(3) label svg[data-lucide="shuffle"] { animation-delay: 2.6s; }

/* Обратная связь — по схеме проходит импульс */
@keyframes qs-impulse {
    0%, 72%   { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
    80%       { filter: drop-shadow(0 0 6px currentColor); transform: scale(1.12); }
    88%, 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
}
.settings-group label svg[data-lucide="brain-circuit"] {
    animation-name: qs-impulse;
    animation-delay: 3.9s;
}

/* Режим чтения — страницы приоткрываются и складываются.
   scaleX от центра (корешка), а не 3D-разворот: на иконке в 18px любой
   rotateY читается как мерцание, а сжатие по горизонтали честно показывает
   движение страниц и не проходит через вырожденное положение. */
@keyframes qs-read {
    0%, 66%   { transform: scaleX(1); }
    76%       { transform: scaleX(.7); }
    86%       { transform: scaleX(1.06); }
    94%, 100% { transform: scaleX(1); }
}
.settings-group label svg[data-lucide="book-open"] {
    animation-name: qs-read;
    animation-delay: 5.2s;
    transform-origin: 50% 50%; /* корешок посередине разворота */
}

/* Карточки — стопка расслаивается: верхний лист приподнимается, нижний
   опускается, средний остаётся на месте. Движутся именно слои, а не значок:
   покачивание всей иконки не говорит ничего о том, что это колода.
   Дочерние элементы lucide layers: 1 — верхний, 2 — нижний, 3 — средний. */
.settings-group label svg[data-lucide="layers"] {
    animation: none !important;
}
.settings-group label svg[data-lucide="layers"] > * {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(.4, 0, .3, 1);
    animation-iteration-count: infinite;
    animation-delay: 6.5s;
}

@keyframes qs-layer-up {
    0%, 60%   { transform: translateY(0); }
    74%       { transform: translateY(-3px); }
    86%       { transform: translateY(-3px); }
    96%, 100% { transform: translateY(0); }
}
@keyframes qs-layer-down {
    0%, 60%   { transform: translateY(0); }
    74%       { transform: translateY(3px); }
    86%       { transform: translateY(3px); }
    96%, 100% { transform: translateY(0); }
}

.settings-group label svg[data-lucide="layers"] > *:nth-child(1) { animation-name: qs-layer-up; }
.settings-group label svg[data-lucide="layers"] > *:nth-child(2) { animation-name: qs-layer-down; }

/* Зубрёжка — пламя колышется */
@keyframes qs-flame {
    0%, 100% { transform: scaleY(1) rotate(0deg); }
    30%      { transform: scaleY(1.12) rotate(-4deg); }
    62%      { transform: scaleY(.95) rotate(3deg); }
}
.radio-title svg[data-lucide="flame"] {
    animation-name: qs-flame;
    animation-duration: 2.4s;
    transform-origin: 50% 100%; /* язык пламени растёт от основания */
}

/* Долгая память — ровное дыхание мысли */
@keyframes qs-think {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: .82; }
}
.radio-title svg[data-lucide="brain"] {
    animation-name: qs-think;
    animation-duration: 3.4s;
}

@media (prefers-reduced-motion: reduce) {
    .settings-group label svg,
    .radio-title svg {
        animation: none !important;
        transform: none !important;
    }
}

body.low-power .settings-group label svg,
body.low-power .radio-title svg {
    animation: none !important;
}

/* ==================================================================
   НЕДАВНИЕ ФАЙЛЫ — часы идут
   ------------------------------------------------------------------
   Вращаем только стрелки (последний элемент иконки file-clock).
   transform-box: view-box, а не fill-box: центр вращения должен быть
   центром циферблата (8;16 в координатах иконки), а не центром рамки
   самих стрелок — иначе они крутятся вокруг себя и уезжают с циферблата.
   ================================================================== */
@keyframes rf-tick {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.recent-file-icon svg[data-lucide="file-clock"] > *:last-child {
    transform-box: view-box;
    transform-origin: 8px 16px;
    /* steps() даёт посекундный «тик», а не плавное скольжение стрелки */
    animation: rf-tick 7.2s steps(12, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .recent-file-icon svg[data-lucide="file-clock"] > * {
        animation: none !important;
        transform: none !important;
    }
}

body.low-power .recent-file-icon svg[data-lucide="file-clock"] > * {
    animation: none !important;
}

/* Создать холст — пятна краски на палитре проступают и гаснут по очереди */
@keyframes at-blob {
    0%, 100% { opacity: .2; transform: scale(.55); }
    35%      { opacity: 1; transform: scale(1.3); }
    62%      { opacity: .45; transform: scale(.9); }
}
.ai-attach-menu:not(.hidden) svg[data-lucide="palette"] circle {
    animation: at-blob 3.6s ease-in-out infinite;
}
/* Та же живая палитра у кнопки выбора стиля картинки.
   Анимация уже была написана для меню вложений — переиспользуем её, а не
   заводим второй похожий жест. Пятна на палитре и там, и здесь означают
   одно и то же: «выбери цвет/стиль». */
#aiImageStyleButton svg[data-lucide="palette"] circle,
#aiImageStyleButton svg[data-icon="palette"] circle {
    /* Точка отсчёта — центр самого пятна, иначе scale() тянет его от
       угла системы координат значка. */
    transform-box: fill-box;
    transform-origin: center;
    animation: at-blob 3.6s ease-in-out infinite;
}
#aiImageStyleButton svg circle:nth-of-type(1) { animation-delay: 0s; }
#aiImageStyleButton svg circle:nth-of-type(2) { animation-delay: .28s; }
#aiImageStyleButton svg circle:nth-of-type(3) { animation-delay: .56s; }
#aiImageStyleButton svg circle:nth-of-type(4) { animation-delay: .84s; }

@media (prefers-reduced-motion: reduce) {
    #aiImageStyleButton svg circle {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
body.low-power #aiImageStyleButton svg circle { animation: none !important; opacity: 1 !important; }

.ai-attach-menu:not(.hidden) svg[data-lucide="palette"] circle:nth-of-type(1) { animation-delay: 0s; }
.ai-attach-menu:not(.hidden) svg[data-lucide="palette"] circle:nth-of-type(2) { animation-delay: .28s; }
.ai-attach-menu:not(.hidden) svg[data-lucide="palette"] circle:nth-of-type(3) { animation-delay: .56s; }
.ai-attach-menu:not(.hidden) svg[data-lucide="palette"] circle:nth-of-type(4) { animation-delay: .84s; }

@media (prefers-reduced-motion: reduce) {
    .ai-attach-menu svg circle,
    .ai-attach-menu svg ellipse {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

body.low-power .ai-attach-menu svg circle,
body.low-power .ai-attach-menu svg ellipse {
    animation: none !important;
    opacity: 1 !important;
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ: ВЫБОР МОДЕЛИ И ДЕЙСТВИЯ НАД СООБЩЕНИЕМ
   ------------------------------------------------------------------
   Те же правила, что и для .ai-helper-menu: движение только пока
   список раскрыт, жест — по смыслу пункта.
   ================================================================== */
.ai-select-dropdown:not(.hidden) svg:not([data-lucide="chevron-down"]):not([data-lucide="info"]),
.has-pill.expanded .ai-actions-extra svg,
.ai-more-menu:not(.hidden) svg {
    transform-box: fill-box;
    transform-origin: center;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* PRO — корона поблёскивает */
@keyframes mm-shine {
    0%, 55%, 100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 0 transparent); }
    70%           { transform: rotate(-7deg) scale(1.12); filter: drop-shadow(0 0 5px currentColor); }
    85%           { transform: rotate(4deg) scale(1); }
}
.ai-select-dropdown:not(.hidden) svg[data-lucide="crown"] { animation-name: mm-shine; animation-duration: 4.4s; }

/* Flash — разряд */
@keyframes mm-zap {
    0%, 62%, 100% { transform: scale(1); opacity: 1; }
    70%           { transform: scale(1.18); opacity: .55; }
    76%           { transform: scale(1); opacity: 1; }
    82%           { transform: scale(1.1); opacity: .7; }
}
.ai-select-dropdown:not(.hidden) svg[data-lucide="zap"] { animation-name: mm-zap; animation-duration: 3.8s; }

/* Core — процессор «считает» */
@keyframes mm-cpu {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.07); opacity: .78; }
}
.ai-select-dropdown:not(.hidden) svg[data-lucide="cpu"] { animation-name: mm-cpu; animation-duration: 2.8s; }

/* Creative — перо покачивается */
@keyframes mm-feather {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    35%      { transform: rotate(-8deg) translateY(-1.5px); }
    70%      { transform: rotate(5deg) translateY(.5px); }
}
.ai-select-dropdown:not(.hidden) svg[data-lucide="feather"] { animation-name: mm-feather; animation-duration: 4s; }

/* Озвучить — звук расходится волнами */
@keyframes mm-sound {
    0%, 55%, 100% { transform: scale(1); }
    68%           { transform: scale(1.14); }
    80%           { transform: scale(1.04); }
}
.has-pill.expanded .ai-actions-extra svg[data-lucide="volume-2"],
.ai-more-menu:not(.hidden) svg[data-lucide="volume-2"] { animation-name: mm-sound; animation-duration: 3.2s; }

/* Создать тест — строки в планшете */
@keyframes mm-list {
    0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
    72%           { transform: translateY(-2px) rotate(-4deg); }
    86%           { transform: translateY(0) rotate(2deg); }
}
.has-pill.expanded .ai-actions-extra svg[data-lucide="clipboard-list"],
.ai-more-menu:not(.hidden) svg[data-lucide="clipboard-list"] { animation-name: mm-list; animation-duration: 3.6s; }

/* Редактировать — карандаш правит */
@keyframes mm-edit {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30%      { transform: translate(1px, -1px) rotate(-8deg); }
    60%      { transform: translate(-1px, 1px) rotate(5deg); }
}
.has-pill.expanded .ai-actions-extra svg[data-lucide="pencil"],
.ai-more-menu:not(.hidden) svg[data-lucide="pencil"] { animation-name: mm-edit; animation-duration: 2.9s; }

/* Удалить — крышка корзины подрагивает */
@keyframes mm-trash {
    0%, 58%, 100% { transform: rotate(0deg); }
    68%           { transform: rotate(-11deg); }
    80%           { transform: rotate(7deg); }
    90%           { transform: rotate(-3deg); }
}
.has-pill.expanded .ai-actions-extra svg[data-lucide="trash-2"],
.ai-more-menu:not(.hidden) svg[data-lucide="trash-2"] {
    animation-name: mm-trash;
    animation-duration: 3.4s;
    transform-origin: top center;
}

/* Перегенерировать — круг обновления */
@keyframes mm-regen {
    0%, 50%  { transform: rotate(0deg); }
    100%     { transform: rotate(360deg); }
}
.has-pill.expanded .ai-actions-extra svg[data-lucide="refresh-cw"],
.ai-more-menu:not(.hidden) svg[data-lucide="refresh-cw"] {
    animation-name: mm-regen;
    animation-duration: 4.2s;
    animation-timing-function: cubic-bezier(.5, 0, .2, 1);
}

/* ------------------------------------------------------------------
   ПЕРСОНЫ
   Список приходит с сервера, имена иконок заранее неизвестны — поэтому
   базовый жест один на всех (спокойное «дыхание»), а фазы разведены по
   позиции в списке, чтобы карточки не качались хором. Для известных
   персон сверху ставим жест по смыслу.
   ------------------------------------------------------------------ */
@keyframes pr-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    40%      { transform: translateY(-2px) rotate(-3deg); }
    72%      { transform: translateY(.5px) rotate(2deg); }
}

/* Селектор НЕ привязан к #aiPersonaSelectContainer: дропдаун персон
   переносится порталом в body, и правило с предком там уже не срабатывает.
   .persona-option-icon встречается только у персон, этого достаточно. */
.persona-option-icon svg {
    /* !important и лишний уровень специфичности ниже — иначе размер сбивает
       общее правило .ai-select-dropdown a svg { width: 16px !important }.
       Персона — крупный пункт с описанием, 16px там теряются. */
    width: 24px;
    height: 24px;
    transform-box: fill-box;
    transform-origin: center;
    animation-name: pr-float;
    animation-duration: 4.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ai-select-dropdown a .persona-option-icon svg,
.persona-option .persona-option-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.ai-select-dropdown a:nth-child(2) .persona-option-icon svg { animation-delay: .4s; }
.ai-select-dropdown a:nth-child(3) .persona-option-icon svg { animation-delay: .8s; }
.ai-select-dropdown a:nth-child(4) .persona-option-icon svg { animation-delay: 1.2s; }
.ai-select-dropdown a:nth-child(5) .persona-option-icon svg { animation-delay: 1.6s; }
.ai-select-dropdown a:nth-child(6) .persona-option-icon svg { animation-delay: 2s; }
.ai-select-dropdown a:nth-child(n+7) .persona-option-icon svg { animation-delay: 2.4s; }

/* Мед.консультант — стетоскоп слушает пульс */
@keyframes pr-pulse {
    0%, 55%, 100% { transform: scale(1); }
    64%           { transform: scale(1.14); }
    72%           { transform: scale(1); }
    80%           { transform: scale(1.08); }
}
.persona-option-icon svg[data-lucide="stethoscope"] {
    animation-name: pr-pulse;
    animation-duration: 3.4s;
}

/* Эксперт — по схеме пробегает импульс */
@keyframes pr-spark {
    0%, 60%, 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); }
    72%           { opacity: .8; filter: drop-shadow(0 0 5px currentColor); }
}
.persona-option-icon svg[data-lucide="brain-circuit"],
.persona-option-icon svg[data-lucide="brain"] {
    animation-name: pr-spark;
    animation-duration: 3.8s;
}

/* Фотошопер — палочка взмахивает искрами */
@keyframes pr-wand {
    0%, 55%, 100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 0 transparent); }
    68%           { transform: rotate(-16deg) scale(1.1); filter: drop-shadow(0 0 5px currentColor); }
    82%           { transform: rotate(9deg) scale(1); }
}
.persona-option-icon svg[data-lucide="wand-sparkles"],
.persona-option-icon svg[data-lucide="wand-2"] {
    animation-name: pr-wand;
    animation-duration: 3.6s;
}

/* Стилист — очки примеряют */
@keyframes pr-glasses {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    35%      { transform: translateX(-1.5px) rotate(-4deg); }
    70%      { transform: translateX(1.5px) rotate(4deg); }
}
.persona-option-icon svg[data-lucide="glasses"] {
    animation-name: pr-glasses;
    animation-duration: 4.2s;
}

/* Креативщик — лампочка разгорается и гаснет */
@keyframes pr-bulb {
    0%, 45%   { opacity: .55; transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    60%       { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 6px currentColor); }
    72%       { opacity: 1; transform: scale(1.02); filter: drop-shadow(0 0 3px currentColor); }
    88%, 100% { opacity: .55; transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
}
.persona-option-icon svg[data-lucide="lightbulb"] {
    animation-name: pr-bulb;
    animation-duration: 4.4s;
}

/* Историк — здание вырастает снизу вверх, как будто строится */
@keyframes pr-build {
    0%, 8%    { transform: scaleY(.1); opacity: .35; }
    32%       { transform: scaleY(1.06); opacity: 1; }
    40%       { transform: scaleY(.97); }
    48%, 88%  { transform: scaleY(1); opacity: 1; }
    100%      { transform: scaleY(.1); opacity: .35; }
}
.persona-option-icon svg[data-lucide="landmark"] {
    animation-name: pr-build;
    animation-duration: 5.2s;
    transform-origin: 50% 100%; /* растём от фундамента, а не от центра */
}

/* Редактор — перо выводит строку и возвращается к началу */
@keyframes pr-write {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    18%      { transform: translate(1.5px, -.8px) rotate(-9deg); }
    36%      { transform: translate(-1px, .8px) rotate(6deg); }
    54%      { transform: translate(1.2px, -.5px) rotate(-7deg); }
    72%      { transform: translate(-.6px, .4px) rotate(3deg); }
}
.persona-option-icon svg[data-lucide="file-signature"] {
    animation-name: pr-write;
    animation-duration: 2.8s;
}

/* Сценарист — хлопушка щёлкает: резкий удар и мягкий отскок */
@keyframes pr-clap {
    0%, 62%  { transform: rotate(0deg); }
    70%      { transform: rotate(-15deg); }
    74%      { transform: rotate(2deg); }   /* удар */
    80%      { transform: rotate(-4deg); }
    88%, 100% { transform: rotate(0deg); }
}
.persona-option-icon svg[data-lucide="clapperboard"] {
    animation-name: pr-clap;
    animation-duration: 4s;
    transform-origin: 12% 78%; /* петля хлопушки — левый нижний угол */
}

/* Психолог — вдумчиво склоняет голову набок */
@keyframes pr-ponder {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    35%      { transform: rotate(-7deg) translateY(-1px); }
    70%      { transform: rotate(4deg) translateY(0); }
}
.persona-option-icon svg[data-lucide="hat-glasses"] {
    animation-name: pr-ponder;
    animation-duration: 5s;
}

/* Гейм-мастер — кубики бросают: значения на гранях меняются.
   Крутить значок целиком было бессмысленно — кубик от вращения иконки не
   становится брошенным. Смысл броска в том, что выпадают ДРУГИЕ точки:
   гасим их вразнобой и зажигаем снова, а сами кубики только вздрагивают. */
@keyframes pr-roll-pip {
    0%, 44%   { opacity: 1; transform: scale(1); }
    52%       { opacity: .15; transform: scale(.5); }
    64%       { opacity: .15; transform: scale(.5); }
    74%       { opacity: 1; transform: scale(1.25); }
    82%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes pr-roll-body {
    0%, 46%, 100% { transform: translateY(0) rotate(0deg); }
    56%           { transform: translateY(-1.5px) rotate(-4deg); }
    68%           { transform: translateY(0) rotate(3deg); }
    78%           { transform: translateY(0) rotate(-1deg); }
}
.persona-option-icon svg[data-lucide="dices"] > *:nth-child(1),
.persona-option-icon svg[data-lucide="dices"] > *:nth-child(2) {
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: pr-roll-body 4.2s cubic-bezier(.4, 0, .3, 1) infinite;
}
.persona-option-icon svg[data-lucide="dices"] > *:nth-child(n+3) {
    animation: pr-roll-pip 4.2s ease-in-out infinite;
}
.persona-option-icon svg[data-lucide="dices"] > *:nth-child(4) { animation-delay: .06s; }
.persona-option-icon svg[data-lucide="dices"] > *:nth-child(5) { animation-delay: .12s; }
.persona-option-icon svg[data-lucide="dices"] > *:nth-child(6) { animation-delay: .18s; }

/* Эксперт — по схеме бежит сигнал: узлы вспыхивают один за другим.
   В иконке brain-circuit последние четыре элемента — это точки-контакты
   (circle r=".5"), они и загораются. Мозг при этом неподвижен: думает
   не контур, а то, что по нему идёт. */
@keyframes pr-node {
    0%, 30%   { opacity: .35; transform: scale(1); }
    42%       { opacity: 1; transform: scale(2.6); }
    56%, 100% { opacity: .35; transform: scale(1); }
}
.persona-option-icon svg[data-lucide="brain-circuit"] > *:nth-child(n+10) {
    animation: pr-node 3.6s ease-in-out infinite;
}
.persona-option-icon svg[data-lucide="brain-circuit"] > *:nth-child(11) { animation-delay: .28s; }
.persona-option-icon svg[data-lucide="brain-circuit"] > *:nth-child(12) { animation-delay: .56s; }
.persona-option-icon svg[data-lucide="brain-circuit"] > *:nth-child(13) { animation-delay: .84s; }

/* Мнемонист — полушария работают по очереди.
   Левую половину контура рисуют элементы 7 и 8, правую — 4 и 5. Поочерёдное
   оживление читается как работа памяти; качание значка целиком не читалось
   никак. */
@keyframes pr-hemi {
    0%, 100% { opacity: .45; transform: scale(.97); }
    50%      { opacity: 1;   transform: scale(1.03); }
}
.persona-option-icon svg[data-lucide="brain"] > *:nth-child(7),
.persona-option-icon svg[data-lucide="brain"] > *:nth-child(8) {
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: pr-hemi 3.8s ease-in-out infinite;
}
.persona-option-icon svg[data-lucide="brain"] > *:nth-child(4),
.persona-option-icon svg[data-lucide="brain"] > *:nth-child(5) {
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: pr-hemi 3.8s ease-in-out infinite;
    animation-delay: -1.9s; /* противофаза: пока одно светится, второе гаснет */
}

/* Фотошопер — палочка делает взмах, и следом сыплются искры.
   Первые два элемента — сама палочка, остальные шесть — блёстки вокруг. */
@keyframes pr-wand-flick {
    0%, 52%, 100% { transform: rotate(0deg); }
    62%           { transform: rotate(-16deg); }
    72%           { transform: rotate(7deg); }
    82%           { transform: rotate(-2deg); }
}
@keyframes pr-wand-spark {
    0%, 60%   { opacity: .3; transform: scale(.5); }
    70%       { opacity: 1;  transform: scale(1.3); }
    84%, 100% { opacity: .3; transform: scale(.5); }
}
.persona-option-icon svg[data-lucide="wand-2"] > *:nth-child(1),
.persona-option-icon svg[data-lucide="wand-2"] > *:nth-child(2),
.persona-option-icon svg[data-lucide="wand-sparkles"] > *:nth-child(1),
.persona-option-icon svg[data-lucide="wand-sparkles"] > *:nth-child(2) {
    transform-box: view-box;
    transform-origin: 3px 20px; /* держат палочку за нижний конец */
    animation: pr-wand-flick 4.4s cubic-bezier(.4, 0, .3, 1) infinite;
}
.persona-option-icon svg[data-lucide="wand-2"] > *:nth-child(n+3),
.persona-option-icon svg[data-lucide="wand-sparkles"] > *:nth-child(n+3) {
    animation: pr-wand-spark 4.4s ease-in-out infinite;
}
.persona-option-icon svg[data-lucide="wand-2"] > *:nth-child(4),
.persona-option-icon svg[data-lucide="wand-sparkles"] > *:nth-child(4) { animation-delay: .07s; }
.persona-option-icon svg[data-lucide="wand-2"] > *:nth-child(5),
.persona-option-icon svg[data-lucide="wand-sparkles"] > *:nth-child(5) { animation-delay: .14s; }
.persona-option-icon svg[data-lucide="wand-2"] > *:nth-child(6),
.persona-option-icon svg[data-lucide="wand-sparkles"] > *:nth-child(6) { animation-delay: .21s; }
.persona-option-icon svg[data-lucide="wand-2"] > *:nth-child(7),
.persona-option-icon svg[data-lucide="wand-sparkles"] > *:nth-child(7) { animation-delay: .28s; }
.persona-option-icon svg[data-lucide="wand-2"] > *:nth-child(8),
.persona-option-icon svg[data-lucide="wand-sparkles"] > *:nth-child(8) { animation-delay: .35s; }

/* Мед.консультант — головка стетоскопа слушает сердце: двойной удар.
   Пятый элемент иконки — сама головка (circle). */
@keyframes pr-pulse-head {
    0%, 52%, 100% { transform: scale(1); }
    60%           { transform: scale(1.35); }
    68%           { transform: scale(1); }
    76%           { transform: scale(1.2); }
    84%           { transform: scale(1); }
}
.persona-option-icon svg[data-lucide="stethoscope"] > *:nth-child(5) {
    animation: pr-pulse-head 3.2s ease-in-out infinite;
}

/* Друг — сердце в ладони бьётся двойным ударом */
@keyframes pr-heart {
    0%, 55%, 100% { transform: scale(1); }
    62%           { transform: scale(1.16); }
    70%           { transform: scale(1); }
    78%           { transform: scale(1.09); }
}
.persona-option-icon svg[data-lucide="hand-heart"] {
    animation-name: pr-heart;
    animation-duration: 3s;
}

/* Полиглот — переключение между языками, разворот карточки */
@keyframes pr-lang {
    0%, 45%, 100% { transform: perspective(110px) rotateY(0deg); }
    68%           { transform: perspective(110px) rotateY(-38deg); }
}
.persona-option-icon svg[data-lucide="languages"] {
    animation-name: pr-lang;
    animation-duration: 4.8s;
}

/* Программист — курсор в коде мигает */
@keyframes pr-code {
    0%, 44%, 100% { opacity: 1; transform: translateX(0); }
    50%           { opacity: .45; transform: translateX(-1px); }
    58%           { opacity: 1; transform: translateX(0); }
    66%           { opacity: .45; transform: translateX(1px); }
}
.persona-option-icon svg[data-lucide="code-xml"] {
    animation-name: pr-code;
    animation-duration: 3.6s;
    animation-timing-function: steps(1, end); /* мигание, а не плавное затухание */
}

/* Репетитор — шапочка выпускника.
   Берём кадры от плитки GRADUS (mi-toss и mi-tassel выше по файлу): там та же
   иконка, и её движение принято за образец. Ссылаемся на те же имена, а не
   копируем значения, чтобы правка образца доезжала и сюда.

   Прежние собственные кадры (pr-cap, pr-tassel) убраны. Они были рывком:
   иконка стояла неподвижно больше половины такта, затем резко подбрасывалась
   и, затухая, возвращалась — из-за паузы движение читалось как срыв, а не как
   покачивание. У образца это ровный маятник в два кадра со сглаживанием на
   обоих концах. */
.persona-option-icon svg[data-lucide="graduation-cap"] {
    animation-name: mi-toss;
    animation-duration: 4.6s;
    animation-delay: -.7s;
}

/* Кисточка — второй элемент иконки, короткая вертикальная линия (M22 10v6).
   Её период в 1.35 раза длиннее, а фаза сдвинута: висящее всегда отстаёт от
   того, на чём висит. Совпади они — кисточка читалась бы жёсткой деталью, а
   не шнурком. Ось — верхняя точка крепления, иначе шнурок болтается
   серединой. Всё это — параметры образца, взятые как есть. */
.persona-option-icon svg[data-lucide="graduation-cap"] > *:nth-child(2) {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: mi-tassel 6.21s ease-in-out infinite;
    animation-delay: -1.2s;
}

/* Методист — в списке проставляется галочка */
@keyframes pr-tick {
    0%, 58%, 100% { transform: scale(1) rotate(0deg); }
    68%           { transform: scale(1.14) rotate(-5deg); }
    78%           { transform: scale(.98) rotate(2deg); }
}
.persona-option-icon svg[data-lucide="clipboard-check"] {
    animation-name: pr-tick;
    animation-duration: 3.4s;
}

/* Суммаризатор — страницы книги перелистываются */
@keyframes pr-page {
    0%, 40%, 100% { transform: perspective(120px) rotateY(0deg); }
    62%           { transform: perspective(120px) rotateY(-30deg); }
    80%           { transform: perspective(120px) rotateY(-8deg); }
}
.persona-option-icon svg[data-lucide="book-text"] {
    animation-name: pr-page;
    animation-duration: 4.4s;
    transform-origin: 15% 50%; /* корешок слева */
}

/* Юрист — чаши весов качаются и приходят в равновесие */
@keyframes pr-scale {
    0%, 100% { transform: rotate(0deg); }
    22%      { transform: rotate(-9deg); }
    46%      { transform: rotate(6deg); }
    68%      { transform: rotate(-3deg); }
    86%      { transform: rotate(1deg); }
}
.persona-option-icon svg[data-lucide="scale"] {
    animation-name: pr-scale;
    animation-duration: 5.4s;
    transform-origin: 50% 20%; /* подвес коромысла */
}

/* Организатор — пункты списка отмечаются один за другим */
@keyframes pr-checklist {
    0%, 50%, 100% { transform: translateX(0) scale(1); }
    60%           { transform: translateX(1.4px) scale(1.06); }
    72%           { transform: translateX(0) scale(1); }
    82%           { transform: translateX(1px) scale(1.03); }
}
.persona-option-icon svg[data-lucide="list-checks"] {
    animation-name: pr-checklist;
    animation-duration: 3.8s;
}

/* Спорщик — клинки расходятся и сшибаются.
   Раньше здесь качался весь значок целиком: жест ничего не означал, просто
   иконка ёрзала. В иконке swords два меча по четыре элемента: 1-4 — клинок
   с эфесом справа снизу, 5-8 — второй, слева снизу. Разводим их в стороны и
   сводим обратно — коротким ударом, вокруг точки скрещения. */
@keyframes pr-sword-a {
    0%, 46%   { transform: rotate(0deg); }
    62%       { transform: rotate(-13deg); }   /* замах */
    72%       { transform: rotate(4deg); }     /* удар */
    80%       { transform: rotate(-2deg); }
    88%, 100% { transform: rotate(0deg); }
}
@keyframes pr-sword-b {
    0%, 46%   { transform: rotate(0deg); }
    62%       { transform: rotate(13deg); }
    72%       { transform: rotate(-4deg); }
    80%       { transform: rotate(2deg); }
    88%, 100% { transform: rotate(0deg); }
}
.persona-option-icon svg[data-lucide="swords"] > *:nth-child(-n+4) {
    transform-box: view-box;
    transform-origin: 12px 12px; /* точка скрещения клинков */
    animation: pr-sword-a 4s cubic-bezier(.4, 0, .3, 1) infinite;
}
.persona-option-icon svg[data-lucide="swords"] > *:nth-child(n+5) {
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: pr-sword-b 4s cubic-bezier(.4, 0, .3, 1) infinite;
}

/* ------------------------------------------------------------------
   ПОКАДРОВЫЕ ЖЕСТЫ: анимируем ЧАСТИ иконки, а не значок целиком.
   Для этих персон общий жест отключён — иначе он складывался бы с
   движением внутренних элементов и всё расползалось.
   Порядок дочерних элементов взят из разметки lucide; если она когда-то
   изменится, части просто поменяются ролями — ничего не сломается.
   ------------------------------------------------------------------ */
.persona-option-icon svg[data-lucide="hat-glasses"],
.persona-option-icon svg[data-lucide="hand-heart"],
.persona-option-icon svg[data-lucide="clipboard-check"],
.persona-option-icon svg[data-lucide="scale"],
.persona-option-icon svg[data-lucide="landmark"],
.persona-option-icon svg[data-lucide="clapperboard"],
.persona-option-icon svg[data-lucide="swords"],
.persona-option-icon svg[data-lucide="dices"],
.persona-option-icon svg[data-lucide="brain-circuit"],
.persona-option-icon svg[data-lucide="brain"],
.persona-option-icon svg[data-lucide="wand-2"],
.persona-option-icon svg[data-lucide="wand-sparkles"],
.persona-option-icon svg[data-lucide="stethoscope"],
.persona-option-icon svg[data-lucide="list-checks"] {
    animation: none !important;
}

.persona-option-icon svg > * {
    transform-box: fill-box;
    transform-origin: center;
}

/* Психолог — снимает шляпу и надевает обратно.
   Тулья и поля (2-й и 3-й элементы) уходят вверх, очки остаются на месте. */
@keyframes pr-hat-off {
    0%, 40%   { transform: translateY(0) rotate(0deg); }
    55%       { transform: translateY(-5px) rotate(-12deg); }
    70%       { transform: translateY(-5px) rotate(8deg); }
    88%, 100% { transform: translateY(0) rotate(0deg); }
}
.persona-option-icon svg[data-lucide="hat-glasses"] > *:nth-child(2),
.persona-option-icon svg[data-lucide="hat-glasses"] > *:nth-child(3) {
    animation: pr-hat-off 4.6s ease-in-out infinite;
}

/* Друг — сердце в ладони бьётся.
   Сердце в иконке hand-heart — ВТОРОЙ элемент, а не последний: последний это
   нижний край ладони. Прежнее правило заставляло падать и растворяться кусок
   руки, отчего значок выглядел сломанным. Падение сверху тоже убрано: сердце
   в этой иконке нарисовано лежащим в ладони, прилетать ему неоткуда. */
@keyframes pr-heartbeat {
    0%, 46%, 100% { transform: scale(1); }
    54%           { transform: scale(1.18); }
    62%           { transform: scale(1.02); }
    70%           { transform: scale(1.11); }
    80%           { transform: scale(1); }
}
.persona-option-icon svg[data-lucide="hand-heart"] > *:nth-child(2) {
    animation: pr-heartbeat 3.4s ease-in-out infinite;
}

/* Методист — галочка прочерчивается в планшете */
@keyframes pr-draw-check {
    0%, 30%   { stroke-dasharray: 14; stroke-dashoffset: 14; }
    52%       { stroke-dasharray: 14; stroke-dashoffset: 0; }
    88%       { stroke-dasharray: 14; stroke-dashoffset: 0; }
    100%      { stroke-dasharray: 14; stroke-dashoffset: 14; }
}
.persona-option-icon svg[data-lucide="clipboard-check"] > *:last-child {
    animation: pr-draw-check 3.8s ease-in-out infinite;
}

/* Юрист — весы взвешивают: коромысло качается, чаши ходят вверх-вниз
   в противофазе, стойка и основание стоят.
   Порядок элементов в иконке scale: 1 — стойка, 2 — правая чаша,
   3 — коромысло, 4 — левая чаша, 5 — основание. Прежнее правило двигало
   ВБОК стойку и одну чашу: столб уезжал в сторону, весы разваливались. */
@keyframes pr-beam {
    0%, 100% { transform: rotate(-3.5deg); }
    50%      { transform: rotate(3.5deg); }
}
@keyframes pr-pan-down {
    0%, 100% { transform: translateY(-1.4px); }
    50%      { transform: translateY(1.4px); }
}
@keyframes pr-pan-up {
    0%, 100% { transform: translateY(1.4px); }
    50%      { transform: translateY(-1.4px); }
}
.persona-option-icon svg[data-lucide="scale"] > *:nth-child(3) {
    /* Коромысло вращается вокруг верхушки стойки, а не своего центра */
    transform-box: view-box;
    transform-origin: 12px 7px;
    animation: pr-beam 4.4s ease-in-out infinite;
}
.persona-option-icon svg[data-lucide="scale"] > *:nth-child(2) {
    animation: pr-pan-down 4.4s ease-in-out infinite;
}
.persona-option-icon svg[data-lucide="scale"] > *:nth-child(4) {
    animation: pr-pan-up 4.4s ease-in-out infinite;
}

/* Историк — здание собирается по частям: сначала фундамент,
   затем четыре колонны одна за другой, и в конце ложится крыша. */
@keyframes pr-part-in {
    0%, 8%    { opacity: 0; transform: scaleY(.2); }
    18%, 82%  { opacity: 1; transform: scaleY(1); }
    94%, 100% { opacity: 0; transform: scaleY(.2); }
}
@keyframes pr-roof-in {
    0%, 8%    { opacity: 0; transform: translateY(-5px); }
    18%, 82%  { opacity: 1; transform: translateY(0); }
    94%, 100% { opacity: 0; transform: translateY(-5px); }
}
.persona-option-icon svg[data-lucide="landmark"] > * {
    animation: pr-part-in 5.4s ease-in-out infinite;
    transform-origin: 50% 100%; /* колонны растут снизу */
}
.persona-option-icon svg[data-lucide="landmark"] > *:nth-child(1) { animation-delay: 0s; }
.persona-option-icon svg[data-lucide="landmark"] > *:nth-child(2) { animation-delay: .35s; }
.persona-option-icon svg[data-lucide="landmark"] > *:nth-child(3) { animation-delay: .55s; }
.persona-option-icon svg[data-lucide="landmark"] > *:nth-child(4) { animation-delay: .75s; }
.persona-option-icon svg[data-lucide="landmark"] > *:nth-child(5) { animation-delay: .95s; }
.persona-option-icon svg[data-lucide="landmark"] > *:nth-child(6) {
    animation-name: pr-roof-in;   /* крыша не растёт, а опускается сверху */
    animation-delay: 1.2s;
}

/* Сценарист — крышка хлопушки поднимается и щёлкает.
   Двигаются крышка (2) и две косые полосы на ней (1 и 4). Доска (3) стоит.
   Прежнее правило брало 1, 2 и 3 — то есть саму ДОСКУ вместо второй полосы,
   и вдобавок вращало каждый элемент вокруг его собственного центра
   (transform-box: fill-box), поэтому части разъезжались в разные стороны.
   Здесь нужна общая ось: view-box задаёт её в координатах иконки, и петля
   у всех трёх оказывается в одной точке — там, где крышка сходится с доской. */
@keyframes pr-clap-lid {
    0%, 40%   { transform: rotate(0deg); }
    56%       { transform: rotate(-22deg); }  /* замах */
    68%       { transform: rotate(3deg); }    /* щелчок */
    76%       { transform: rotate(-4deg); }
    86%, 100% { transform: rotate(0deg); }
}
.persona-option-icon svg[data-lucide="clapperboard"] > *:nth-child(1),
.persona-option-icon svg[data-lucide="clapperboard"] > *:nth-child(2),
.persona-option-icon svg[data-lucide="clapperboard"] > *:nth-child(4) {
    transform-box: view-box;
    transform-origin: 3px 11px; /* левый край стыка крышки и доски */
    animation: pr-clap-lid 4.2s cubic-bezier(.5, 0, .3, 1) infinite;
}

/* Организатор — список заполняется по порядку: строка, затем её галочка,
   следующая строка, её галочка, и так далее. */
@keyframes pr-row-in {
    0%, 6%    { opacity: 0; transform: translateX(-3px); }
    16%, 84%  { opacity: 1; transform: translateX(0); }
    95%, 100% { opacity: 0; transform: translateX(-3px); }
}
@keyframes pr-mark-in {
    0%, 6%    { opacity: 0; transform: scale(.4); }
    16%, 84%  { opacity: 1; transform: scale(1); }
    95%, 100% { opacity: 0; transform: scale(.4); }
}
.persona-option-icon svg[data-lucide="list-checks"] > * {
    animation: pr-row-in 5s ease-in-out infinite;
}
/* Две первые фигуры в иконке — галочки, остальные три — строки.
   Чередуем задержки так, чтобы шло «строка → галочка → строка → галочка». */
.persona-option-icon svg[data-lucide="list-checks"] > *:nth-child(3) { animation-delay: 0s; }
.persona-option-icon svg[data-lucide="list-checks"] > *:nth-child(2) { animation-name: pr-mark-in; animation-delay: .3s; }
.persona-option-icon svg[data-lucide="list-checks"] > *:nth-child(4) { animation-delay: .6s; }
.persona-option-icon svg[data-lucide="list-checks"] > *:nth-child(1) { animation-name: pr-mark-in; animation-delay: .9s; }
.persona-option-icon svg[data-lucide="list-checks"] > *:nth-child(5) { animation-delay: 1.2s; }

/* Маркетолог — рупор вещает, звук идёт волнами */
@keyframes pr-shout {
    0%, 48%, 100% { transform: rotate(0deg) scale(1); }
    58%           { transform: rotate(-8deg) scale(1.1); }
    66%           { transform: rotate(-4deg) scale(1.02); }
    74%           { transform: rotate(-8deg) scale(1.08); }
    84%           { transform: rotate(0deg) scale(1); }
}
.persona-option-icon svg[data-lucide="megaphone"] {
    animation-name: pr-shout;
    animation-duration: 3.6s;
    transform-origin: 25% 60%;
}

@media (prefers-reduced-motion: reduce) {
    .ai-select-dropdown svg,
    .ai-actions-extra svg,
    .ai-more-menu svg {
        animation: none !important;
        transform: none !important;
    }
}

body.low-power .ai-select-dropdown svg,
body.low-power .ai-actions-extra svg,
body.low-power .ai-more-menu svg {
    animation: none !important;
}

/* ==================================================================
   ЖИВЫЕ ИКОНКИ РАСКРЫТЫХ ГРУПП НАСТРОЕК
   ------------------------------------------------------------------
   Анимируется только та группа, чьё содержимое сейчас видно (.is-open).
   Это и подсказка «вот здесь открыто», и повод не гонять анимации
   впустую: в свёрнутом состоянии не тратится ни кадра.
   ================================================================== */
.qst-settings-group.is-open .qst-settings-group-icon {
    transform-box: fill-box;
    transform-origin: center;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Внешний вид — глаз моргает */
@keyframes sg-blink {
    0%, 88%   { transform: scaleY(1); }
    93%       { transform: scaleY(.3); }
    98%, 100% { transform: scaleY(1); }
}
.qst-settings-group.is-open .qst-settings-group-icon[data-lucide="eye"],
.qst-settings-group.is-open .qst-settings-group-icon[data-icon="eye"] {
    animation-name: sg-blink;
    animation-duration: 6s;
}

/* Интересы — сердце бьётся в два удара */
@keyframes sg-beat {
    0%, 100% { transform: scale(1); }
    12%      { transform: scale(1.16); }
    24%      { transform: scale(1); }
    36%      { transform: scale(1.1); }
    50%      { transform: scale(1); }
}
.qst-settings-group.is-open .qst-settings-group-icon[data-lucide="heart"],
.qst-settings-group.is-open .qst-settings-group-icon[data-icon="heart"] {
    animation-name: sg-beat;
    animation-duration: 2.6s;
}

/* Поведение — рукоятки едут по своим дорожкам.
   Раньше здесь ездил значок ЦЕЛИКОМ: ползунки не настраивались, а просто
   съезжали вместе с дорожками — жест выглядел дешёвым. Берём тот же приём,
   что у кнопки настроек ИИ-чата (af-knob-a / af-knob-b): двигаются только
   последние три элемента значка, а это и есть рукоятки. */
.qst-settings-group .qst-settings-group-icon[data-lucide="sliders"] > *,
.qst-settings-group .qst-settings-group-icon[data-icon="sliders"] > * {
    transform-box: view-box;
    transform-origin: 12px 12px;
}

/* Рукоятки выбираем ПО ГЕОМЕТРИИ, а не по номеру в списке.
   Позиционный отбор (nth-last-child) уже подвёл: у sliders девять
   элементов вперемешку — рукоятки и куски дорожек, — и под «последние
   три» попали две дорожки. Путь рукоятки однозначен и читается глазом;
   если lucide однажды перерисует значок, селектор просто перестанет
   совпадать — анимации не будет, но и значок не сломается.

   Движение по ВЕРТИКАЛИ: у sliders дорожки вертикальные (в отличие от
   sliders-horizontal у кнопки ИИ-чата, откуда взят приём). Амплитуды
   подобраны так, чтобы рукоятка не сходила со своей дорожки (3..21). */
@keyframes sg-knob-down {
    0%, 62%, 100% { transform: translateY(0); }
    74%           { transform: translateY(3.2px); }
    88%           { transform: translateY(1px); }
}
@keyframes sg-knob-up {
    0%, 62%, 100% { transform: translateY(0); }
    74%           { transform: translateY(-3px); }
    88%           { transform: translateY(-1px); }
}

/* Верхняя рукоятка (y=8) — уходит вниз */
.qst-settings-group.is-open .qst-settings-group-icon[data-lucide="sliders"] > [d="M10 8h4"],
.qst-settings-group.is-open .qst-settings-group-icon[data-icon="sliders"] > [d="M10 8h4"] {
    animation: sg-knob-down 7s cubic-bezier(.5, 0, .3, 1) infinite;
}
/* Правая рукоятка (y=16) — вверх */
.qst-settings-group.is-open .qst-settings-group-icon[data-lucide="sliders"] > [d="M17 16h4"],
.qst-settings-group.is-open .qst-settings-group-icon[data-icon="sliders"] > [d="M17 16h4"] {
    animation: sg-knob-up 7s cubic-bezier(.5, 0, .3, 1) infinite .12s;
}
/* Левая рукоятка (y=14) — вниз, с запозданием */
.qst-settings-group.is-open .qst-settings-group-icon[data-lucide="sliders"] > [d="M3 14h4"],
.qst-settings-group.is-open .qst-settings-group-icon[data-icon="sliders"] > [d="M3 14h4"] {
    animation: sg-knob-down 7s cubic-bezier(.5, 0, .3, 1) infinite .24s;
}

/* Сам значок при этом неподвижен — двигаются только рукоятки внутри. */
.qst-settings-group.is-open .qst-settings-group-icon[data-lucide="sliders"],
.qst-settings-group.is-open .qst-settings-group-icon[data-icon="sliders"] {
    animation: none;
}

/* Уведомления — колокольчик покачивается */
@keyframes sg-ring {
    0%, 70%, 100% { transform: rotate(0deg); }
    76%           { transform: rotate(12deg); }
    82%           { transform: rotate(-9deg); }
    88%           { transform: rotate(5deg); }
    94%           { transform: rotate(-2deg); }
}
.qst-settings-group.is-open .qst-settings-group-icon[data-lucide="bell"],
.qst-settings-group.is-open .qst-settings-group-icon[data-icon="bell"] {
    animation-name: sg-ring;
    transform-origin: top center;
    animation-duration: 5s;
}

/* Язык — меридиан глобуса «поворачивается». Раньше через rotateY крутился весь
   плоский значок и на миг схлопывался в линию (выглядело плохо). Берём ту же
   технику, что у кнопки библиотеки колод: анимируем только вертикальный меридиан
   через scaleX (сжатие через ноль к минусу) — получается настоящее вращение шара,
   а сам контур глобуса стоит на месте. */
.qst-settings-group.is-open .qst-settings-group-icon[data-lucide="globe"] path[d^="M12 2a14.5"],
.qst-settings-group.is-open .qst-settings-group-icon[data-icon="globe"] path[d^="M12 2a14.5"] {
    transform-box: view-box;
    transform-origin: 12px 12px;
    vector-effect: non-scaling-stroke;
    animation: globeMeridianSpin 7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .qst-settings-group.is-open .qst-settings-group-icon {
        animation: none !important;
        transform: none !important;
    }
}

body.low-power .qst-settings-group.is-open .qst-settings-group-icon {
    animation: none !important;
}

/* ==================================================================
   ЗАГРУЗКА ПРИЛОЖЕНИЯ — ПЛИТКИ ПАДАЮТ НА СВОИ МЕСТА
   ------------------------------------------------------------------
   Вместо абстрактного спиннера индикатором служит сам интерфейс:
   плитки меню сбрасываются сверху и встают по местам с лёгким отскоком.
   Человек с первой секунды видит, чем будет пользоваться.

   Пока идёт инициализация, плитки скрыты (app-booting) — иначе они
   мелькнули бы на месте до начала падения.
   ================================================================== */
body.app-booting .main-actions-grid > *,
body.app-booting .action-group-title {
    opacity: 0;
}

@keyframes tile-drop {
    0%   { opacity: 0; transform: translateY(-42px) scale(.93); }
    55%  { opacity: 1; transform: translateY(5px) scale(1.015); }
    75%  { transform: translateY(-3px) scale(1); }
    90%  { transform: translateY(1px); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes title-fade {
    0%   { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}

body.app-drop .action-group-title {
    animation: title-fade .4s ease-out both;
}

body.app-drop .main-actions-grid > * {
    animation: tile-drop .62s cubic-bezier(.22, .9, .3, 1.06) both;
}

/* Каскад внутри группы: плитки приземляются одна за другой, а не хором.
   Группы стартуют почти одновременно — так падение читается как единая
   волна сверху вниз, а не как четыре отдельных очереди. */
body.app-drop .main-actions-grid > *:nth-child(1) { animation-delay: .02s; }
body.app-drop .main-actions-grid > *:nth-child(2) { animation-delay: .08s; }
body.app-drop .main-actions-grid > *:nth-child(3) { animation-delay: .14s; }
body.app-drop .main-actions-grid > *:nth-child(4) { animation-delay: .20s; }
body.app-drop .main-actions-grid > *:nth-child(5) { animation-delay: .26s; }
body.app-drop .main-actions-grid > *:nth-child(6) { animation-delay: .32s; }
body.app-drop .main-actions-grid > *:nth-child(n+7) { animation-delay: .38s; }

/* Заголовок группы появляется чуть раньше своих плиток */
body.app-drop .action-group-title { animation-delay: 0s; }

/* Кому движение мешает — просто показываем готовый экран */
@media (prefers-reduced-motion: reduce) {
    body.app-booting .main-actions-grid > *,
    body.app-booting .action-group-title { opacity: 1; }

    body.app-drop .main-actions-grid > *,
    body.app-drop .action-group-title {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

body.low-power.app-booting .main-actions-grid > *,
body.low-power.app-booting .action-group-title { opacity: 1; }

body.low-power.app-drop .main-actions-grid > *,
body.low-power.app-drop .action-group-title {
    animation: none !important;
    opacity: 1;
}

/* ==================================================================
   ТИПОГРАФИКА ПОДПИСЕЙ ГЛАВНОГО МЕНЮ
   ------------------------------------------------------------------
   Размер и вес подписей разъезжались: часть кнопок задавала их
   инлайном (а инлайн перебивает любой селектор), у «Марафона» подпись
   была обёрнута лишним span и ловила 1.1em × .9em. Инлайновые размеры
   убраны из разметки, здесь — единственный источник правды.

   Селектор через `>`: при вложенном span размеры больше не
   перемножаются, даже если разметку снова усложнят.
   ================================================================== */
.main-actions-grid .main-action-text-wrapper > span:first-child {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.25;
}

.main-actions-grid .main-action-text-wrapper > .gradus-subtitle {
    margin-top: 3px;
    font-size: .82em;
    font-weight: 400;
    line-height: 1.25;
    color: var(--secondary-text-color);
    opacity: .82;
}

/* Подзаголовок, оставшийся пустым, не должен занимать место */
.main-actions-grid .main-action-text-wrapper > .gradus-subtitle:empty {
    display: none;
}

/* ==================================================================
   ИКОНКИ КАРТОЧЕК «ПРОДОЛЖИТЬ»
   ------------------------------------------------------------------
   На листе оживают строки: они стираются и прописываются заново
   сверху вниз — как будто тест дописывают. Строки в lucide-file-text
   это 3-й, 4-й и 5-й path (первые два — контур листа и загнутый угол).

   Дисциплина та же, что и в главном меню: цикл длинный, движение
   занимает малую его часть, карточки разведены по фазе.
   ================================================================== */
.saved-session-card .saved-session-name svg {
    /* 7с на полный проход: достаточно медленно, чтобы не мельтешить,
       и достаточно заметно, чтобы карточка звала вернуться к тесту. */
    --sess-cycle: 7s;
    --sess-shift: 0s;
    transform-origin: center;
    overflow: visible;
}

.saved-session-card .saved-session-name svg path,
.saved-session-card .saved-session-name svg circle {
    transform-box: fill-box;
    transform-origin: center;
}

/* Короткая верхняя строка (M10 9H8, длина 2) */
.saved-session-card .saved-session-name svg[class*="lucide-file-text"] path:nth-of-type(3) {
    stroke-dasharray: 2 2;
    animation: sess-write-s var(--sess-cycle) ease-in-out infinite;
    animation-delay: var(--sess-shift);
}

/* Две длинные строки (длина 8) — пишутся следом, одна за другой */
.saved-session-card .saved-session-name svg[class*="lucide-file-text"] path:nth-of-type(n+4) {
    stroke-dasharray: 8 8;
    animation: sess-write-l var(--sess-cycle) ease-in-out infinite;
}
.saved-session-card .saved-session-name svg[class*="lucide-file-text"] path:nth-of-type(4) {
    animation-delay: calc(var(--sess-shift) + .12s);
}
.saved-session-card .saved-session-name svg[class*="lucide-file-text"] path:nth-of-type(5) {
    animation-delay: calc(var(--sess-shift) + .24s);
}

/* Марафон: по знаку бесконечности пробегает отметка */
.saved-session-card .saved-session-name svg[class*="lucide-infinity"] path {
    animation: mi-trace var(--sess-cycle) linear infinite;
    animation-delay: var(--sess-shift);
}

/* Карточки: стопка чуть «пересдаётся» */
.saved-session-card .saved-session-name svg[class*="lucide-layers"] {
    animation: sess-deck var(--sess-cycle) ease-in-out infinite;
    animation-delay: var(--sess-shift);
}

/* Разводим карточки по фазе, чтобы в списке они не писали хором */
.saved-session-card:nth-child(2) .saved-session-name svg { --sess-shift: -2.3s; }
.saved-session-card:nth-child(3) .saved-session-name svg { --sess-shift: -4.6s; }
.saved-session-card:nth-child(n+4) .saved-session-name svg { --sess-shift: -5.8s; }

/* Здесь, в отличие от главного меню, движение идёт НЕПРЕРЫВНО: карточка
   «Продолжить» должна звать вернуться к тесту. Ритм спокойный — строка
   стирается и пишется за цикл, между фазами есть паузы, поэтому это
   читается как письмо, а не как мельтешение. */
@keyframes sess-write-s {
    0%       { stroke-dashoffset: 0; }
    30%      { stroke-dashoffset: 0; }
    50%      { stroke-dashoffset: 2; }
    62%      { stroke-dashoffset: 2; }
    88%      { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 0; }
}

@keyframes sess-write-l {
    0%       { stroke-dashoffset: 0; }
    30%      { stroke-dashoffset: 0; }
    50%      { stroke-dashoffset: 8; }
    62%      { stroke-dashoffset: 8; }
    88%      { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 0; }
}

@keyframes sess-deck {
    0%       { transform: translateY(0) rotate(0deg); }
    35%      { transform: translateY(0) rotate(0deg); }
    55%      { transform: translateY(-1.5px) rotate(-5deg); }
    75%      { transform: translateY(0) rotate(3deg); }
    92%, 100% { transform: translateY(0) rotate(0deg); }
}

/* Наведение: перо пишет быстрее, но той же последовательностью */
@media (hover: hover) and (pointer: fine) {
    .saved-session-card:hover .saved-session-name svg {
        --sess-cycle: 2.8s;
        --sess-shift: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .saved-session-card .saved-session-name svg,
    .saved-session-card .saved-session-name svg * {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}

body.low-power .saved-session-card .saved-session-name svg,
body.low-power .saved-session-card .saved-session-name svg * {
    animation: none !important;
    stroke-dashoffset: 0 !important;
}

/* ==================================================================
   МОДАЛКА СОЗДАНИЯ КАРТЫ
   .parser-tab.active оформлена как «пилюля» сегмент-контрола, но общий
   .parser-tabs нигде не объявлен как flex (правило есть только у
   #questionCreateModal). Из-за этого кнопки разъезжались, а сверху ещё
   ложился скользящий .tab-indicator — отсюда «кривое подчёркивание».
   ================================================================== */
#roadmapCreateModal .parser-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: none;
    border-radius: 12px;
    background-color: var(--input-bg-color);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06);
}

/* Кегль и отступы ужаты: «Визуальный конспект» не помещался в свою
   половину и резался (замер: scrollWidth больше clientWidth). */
#roadmapCreateModal .parser-tab {
    flex: 1 1 0;
    min-width: 0;
    /* Отступы по бокам и кегль ужаты: «Визуальный конспект» не помещался в
       свою половину и обрезался многоточием — замер показал scrollWidth больше
       clientWidth. Теперь название видно целиком. */
    padding: 9px 6px;
    border-radius: 9px;
    font-size: .86em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#roadmapCreateModal .parser-tab.active {
    background: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Страховка: если индикатор всё-таки кто-то навесит — он тут лишний. */
#roadmapCreateModal .parser-tabs .tab-indicator {
    display: none !important;
}

/* ==================================================================
   «СТРОЙКА» КАРТЫ ЗНАНИЙ
   Вместо абстрактного спиннера показываем, что именно сейчас
   происходит: блоки прилетают, между ними прочерчиваются связи и
   собирается структура. Используется при генерации карты и планов уроков.
   ================================================================== */
.rm-build-overlay {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: rm-overlay-in .25s ease both;
}

body.dark-mode .rm-build-overlay,
body.synthwave-mode .rm-build-overlay,
body.oled-mode .rm-build-overlay {
    background-color: rgba(18, 18, 18, .78);
}

.rm-build-caption {
    max-width: 90%;
    margin: 0;
    color: var(--secondary-text-color);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.rm-builder {
    position: relative;
    width: 280px;
    height: 170px;
    flex: 0 0 auto;
}

.rm-builder-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* pathLength="100" на каждом path — чтобы линии «рисовались» с одинаковой
   скоростью независимо от своей реальной длины. */
.rm-builder-links path {
    fill: none;
    stroke: var(--secondary-text-color, #9ca3af);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0;
    animation: rm-link-draw 3.2s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .16s);
}

.rm-builder-node {
    position: absolute;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background-color: var(--container-bg-color, #fff);
    color: var(--text-color, #1f2937);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    opacity: 0;
    animation: rm-node-pop 3.2s cubic-bezier(.34, 1.56, .64, 1) infinite;
    animation-delay: calc(var(--i, 0) * .16s);
}

.rm-builder-node.is-root {
    border-width: 2px;
    border-color: var(--button-primary-bg, #6366f1);
    background-color: color-mix(in srgb, var(--button-primary-bg, #6366f1) 12%, var(--container-bg-color, #fff));
}

.rm-builder-node.is-exam {
    border-style: dashed;
    border-radius: 18px;
}

/* Условная «строчка текста» внутри блока — чтобы блок читался как карточка. */
.rm-builder-bar {
    display: block;
    height: 4px;
    border-radius: 2px;
    background-color: currentColor;
    opacity: .28;
}

@keyframes rm-node-pop {
    0%   { opacity: 0; transform: translateX(-10px) scale(.72); }
    8%   { opacity: 1; transform: translateX(0) scale(1.06); }
    13%  { opacity: 1; transform: translateX(0) scale(1); }
    74%  { opacity: 1; transform: translateX(0) scale(1); }
    86%  { opacity: 0; transform: translateX(0) scale(.92); }
    100% { opacity: 0; transform: translateX(0) scale(.92); }
}

@keyframes rm-link-draw {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    4%   { stroke-dashoffset: 100; opacity: .5; }
    16%  { stroke-dashoffset: 0; opacity: .5; }
    74%  { stroke-dashoffset: 0; opacity: .5; }
    86%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes rm-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Глобальное правило prefers-reduced-motion обнуляет длительность анимаций,
   из-за чего элементы застыли бы на последнем кадре (opacity: 0) и лоадер
   стал бы невидимым. Показываем структуру статично и целиком. */
@media (prefers-reduced-motion: reduce) {
    .rm-build-overlay .rm-builder .rm-builder-node,
    .rm-build-overlay .rm-builder .rm-builder-links path {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }

    .rm-build-overlay .rm-builder .rm-builder-links path {
        opacity: .5 !important;
    }
}

@media (max-width: 360px) {
    .rm-builder {
        transform: scale(.82);
    }
}

.mermaid-graph {
    transition: transform .3s ease-in-out;
    transform-origin: 0 0;
    will-change: transform;
}

.mermaid-graph svg.fitted {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
}

@media (min-width: 992px) {
    body.roadmap-active .container {
        max-width: 95%;
        transition: max-width .3s ease-in-out;
    }

    body.roadmap-active .roadmap-container {
        display: flex !important;
        justify-content: flex-start;
        align-items: flex-start;
        min-height: 80vh;
        box-shadow: var(--neumorph-shadow-soft-sm) !important;
    }

    body.roadmap-active .mermaid-graph {
        display: block;
        width: auto;
        max-width: none;
        margin: auto;
        padding: 50px;
    }
}

.parser-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.parser-action-buttons button {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 40px;
}

/* Ряд действий: три значка и два подписанных действия.
   Пока все пятеро делили строку поровну, «Читать» и «Пройти тест» сжимались
   до состояния, когда подписи налезали друг на друга. Значки в подписи не
   нуждаются — отдаём им ровно свою ширину, а строку целиком делят между
   собой те двое, у кого есть текст. На телефоне они уходят на второй ряд
   парой и получают по половине ширины каждый. */
.parser-action-buttons > button {
    flex: 0 0 52px;
    width: 52px;
    padding-inline: 0;
}

.parser-action-buttons > button[id^="read"],
.parser-action-buttons > button:last-child {
    flex: 1 1 44%;
    width: auto;
    padding-inline: 14px;
}

.parser-action-buttons button:last-child {
    flex: 2;
    background-color: var(--accent);
    color: #fff;
}


.lesson-flashcards-block {
    margin: 30px 0;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--background-color-secondary);
}

.flashcards-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.flashcards-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--primary);
    font-size: 1.1em;
}

.flashcards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.mini-flashcard {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--container-bg-color);
    font-size: .9em;
}

.mini-front {
    color: var(--text-color);
    font-weight: 700;
}

.mini-divider {
    height: 1px;
    background: var(--border-color);
    opacity: .5;
}

.mini-back {
    color: var(--secondary-text-color);
}

.btn-save-deck {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background-color: var(--button-success-bg);
    color: #fff;
    font-size: .9em;
    cursor: pointer;
}

.btn-save-deck:disabled {
    background-color: var(--secondary-text-color);
    cursor: default;
}

.roadmap-zoom-panel {
    display: none !important;
}

.roadmap-zoom-panel button,
.roadmap-zoom-panel input,
.roadmap-zoom-panel span {
    display: none !important;
}

.roadmap-zoom-panel #zoomInBtn {
    order: 1;
}

.roadmap-zoom-panel #roadmapZoomSlider {
    order: 2;
}

.roadmap-zoom-panel #zoomOutBtn {
    order: 3;
}

.roadmap-zoom-panel #zoomValueText {
    order: 4;
}

#roadmapArea.hidden .roadmap-zoom-panel {
    display: none;
}

.zoom-btn {
    padding: 5px;
    color: var(--text-color);
}

.zoom-btn:hover {
    background-color: var(--input-hover-bg-color);
}

.zoom-btn i {
    width: 18px;
    height: 18px;
}

.zoom-value {
    margin-top: 5px;
    color: var(--secondary-text-color);
    font-size: .8em;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    writing-mode: horizontal-tb;
}

.zoom-value:hover {
    color: var(--accent);
}

#roadmapZoomSlider {
    width: 6px;
    height: 120px;
    margin: 5px 0;
    border-radius: 3px;
    background: var(--border-color);
    direction: rtl;
    outline: none;
    writing-mode: vertical-lr;
}

#roadmapZoomSlider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 5px #0003;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
}

#roadmapZoomSlider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 5px #0003;
    cursor: pointer;
}

#roadmapFitViewBtn {
    display: none !important;
}

.roadmap-zoom-hint {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background-color: #0009;
    color: #fff;
    font-size: .9em;
    font-weight: 500;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .5s ease;
    pointer-events: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.roadmap-zoom-hint.visible {
    opacity: 1;
}

.roadmap-zoom-hint i {
    width: 16px;
    height: 16px;
}


.knowledge-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 5px;
}

.knowledge-tag {
    padding: 6px 12px;
    border: 1px solid var(--primary);
    border-radius: 16px;
    background-color: var(--primary-light);
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 4px #0000000d;
}

.dark-mode .knowledge-tag {
    background-color: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-light);
    border-color: rgba(var(--primary-rgb), 0.4);
}

/* ==================================================================
   ИНВЕНТАРЬ ЗНАНИЙ
   Термины сгруппированы по разделу карты, откуда пришли, награды —
   отдельной корзиной. Кликабельный тег ведёт к уроку-источнику.
   ================================================================== */
.inventory-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
}

.inventory-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.inventory-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.inventory-head h3 i {
    color: var(--primary);
    flex: 0 0 auto;
}

.inventory-count {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .78em;
    font-weight: 600;
    white-space: nowrap;
}

.inventory-search {
    margin-bottom: 12px;
}

.inventory-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
}

.inventory-list::-webkit-scrollbar { width: 6px; }
.inventory-list::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; }

.inventory-group + .inventory-group {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.inventory-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--secondary-text-color);
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.inventory-group-title i {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.inventory-group-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-group-title em {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--input-bg-color);
    font-size: .95em;
    font-style: normal;
    font-weight: 600;
}

/* Внутри инвентаря теги выравниваем по левому краю: так группы читаются
   как списки, а не как облака вперемешку. */
.inventory-list .knowledge-cloud {
    justify-content: flex-start;
    padding: 0;
}

.inventory-list .knowledge-tag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
    text-align: left;
}

.inventory-list .knowledge-tag.is-linked {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.inventory-list .knowledge-tag.is-linked:hover {
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}

.inventory-list .knowledge-tag.is-linked:active {
    transform: scale(.97);
}

.inventory-list .knowledge-tag.is-reward {
    border-color: var(--reward-border, #d9a441);
    background-color: rgba(217, 164, 65, .14);
    color: var(--text-color);
}

.inventory-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    font-size: .82em;
    text-align: center;
}

.inventory-foot i {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .inventory-modal { max-height: 88vh; }
    .inventory-list .knowledge-tag { font-size: 13px; }
}

/* Кнопка «Инвентарь знаний» переехала в общий ряд .roadmap-corner-actions.
   Прежний блок жёстко задавал ей position/left/bottom/48px/круг через !important —
   ID-селектор выигрывал у раскладки ряда, и кнопка ложилась поверх соседних
   «Опубликовать» и «Пересоздать». Оставляем только оформление. */
#roadmapInventoryBtn {
    pointer-events: auto;
}

#roadmapInventoryBtn:hover {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
}

#roadmapInventoryBtn svg {
    stroke-width: 2px;
}

.image-suggestion-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
    padding: 15px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background-color: var(--message-bg-other);
    transition: all .2s;
}

.image-suggestion-container:hover {
    background-color: var(--background-color);
    border-color: var(--primary);
}

.suggestion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary-text-color);
    font-size: .9em;
    font-weight: 600;
    text-transform: uppercase;
}

.suggestion-prompt {
    display: -webkit-box;
    padding: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #0000000d;
    color: var(--text-color);
    font-family: monospace;
    font-size: .95em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3;
    line-clamp: 3;
}

.dark-mode .suggestion-prompt {
    background: #ffffff0d;
}

.suggestion-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-suggestion-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--background-color);
    color: var(--text-color);
    font-size: .9em;
    transition: all .2s;
    cursor: pointer;
}

.btn-suggestion-action:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.btn-suggestion-action.generate-btn {
    border: none;
    background: var(--primary);
    color: var(--on-primary);
}

.btn-suggestion-action.generate-btn:hover {
    opacity: .9;
}

.suggestion-status {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 5px;
    color: var(--secondary-text-color);
    font-size: .9em;
}


@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.reward-text {
    color: var(--text-color);
}

.reward-modal-content {
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff 0%, #fef9c3 100%);
    text-align: center;
}

.dark-mode .reward-modal-content {
    background: linear-gradient(135deg, #1e1e1e 0%, #422006 100%);
}

.reward-icon-large {
    display: block;
    margin-bottom: 15px;
    font-size: 5rem;
    animation: chest-bounce 1s infinite;
}

@keyframes chest-bounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.1);
    }
}

.reward-text {
    margin-bottom: 25px;
    color: var(--text-color);
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.6;
}

.reward-badge {
    display: inline-block;
    margin-bottom: 15px;
    padding: 5px 12px;
    border-radius: 15px;
    background: var(--accent);
    color: #fff;
    font-size: .85em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.community-map-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.community-map-card:hover {
    box-shadow: 0 15px 30px -10px #00000026;
    transform: translateY(-5px);
    border-color: var(--accent);
}

.map-card-top {
    padding: 20px 20px 10px;
}

.map-card-header {
    display: -webkit-box;
    margin-bottom: 8px;
    overflow: hidden;
    color: var(--heading-color);
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
    line-clamp: 2;
}

.map-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--secondary-text-color);
    font-size: .85em;
}

.map-author-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--input-bg-color);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.map-card-desc {
    display: -webkit-box;
    flex-grow: 1;
    margin-bottom: 15px;
    padding: 0 20px;
    overflow: hidden;
    color: var(--text-color);
    font-size: .9em;
    line-height: 1.5;
    opacity: .8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3;
    line-clamp: 3;
}

.map-card-stats {
    display: flex;
    gap: 8px;
    padding: 0 20px 15px;
}

.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .8em;
    font-weight: 600;
}

.stat-badge.nodes-count {
    background-color: #3498db1a;
    color: #3498db;
    border-color: #3498db33;
}

.map-card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 15px 20px;
    background-color: var(--input-bg-color);
    border-top: 1px solid var(--border-color);
}

.btn-map-like {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: .9em;
    transition: all .2s;
}

.btn-map-like:hover {
    background-color: #fff0f5;
    color: #e74c3c;
    border-color: #e74c3c;
}

.btn-map-download {
    flex: 2;
    border: none;
    border-radius: 8px;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-size: .9em;
    font-weight: 500;
}

.btn-map-download:hover {
    background-color: var(--button-secondary-hover-bg);
}

body.synthwave-mode .community-map-card {
    border: 1px solid var(--accent);
    box-shadow: 0 0 10px #14b8a61a;
}

body.synthwave-mode .community-map-card:hover {
    box-shadow: 0 0 20px #14b8a64d;
}

.ai-mermaid-container {
    position: relative;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow-x: auto;
    background: var(--message-bg);
    text-align: center;
    transition: border-color .2s;
    cursor: zoom-in;
}

.ai-mermaid-container:hover {
    border-color: var(--primary);
}

.ai-mermaid-container::after {
    content: '⤢';
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #00000080;
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}

.ai-mermaid-container:hover::after {
    opacity: 1;
}

.ai-mermaid-container svg {
    max-width: 100%;
    height: auto;
    font-family: inherit;
}

.image-preview-content {
    justify-content: center;
    align-items: center;
    cursor: grab;
    touch-action: none;
}

.image-preview-content:active {
    cursor: grabbing;
}

#previewImage {
    transition: transform .1s linear;
    user-select: none;
    image-rendering: -webkit-optimize-contrast;
    transform-origin: 0 0;
}

.zoom-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 1001;
    display: flex;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 30px;
    background: #0009;
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.zoom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ffffff4d;
    border-radius: 50%;
    background: #fff3;
    color: #fff;
    font-size: 18px;
    transition: all .2s;
    cursor: pointer;
}

.zoom-btn:hover {
    background: #fff6;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .roadmap-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 1px !important;
    }

    #mermaidGraph {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

.node-action-btn {
    position: relative;
    top: -2px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    margin-bottom: -6px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: #0000000d;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.node-action-icon {
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--secondary-text-color);
    transition: background-color .2s ease;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%2F%3E%3Ccircle cx='19' cy='12' r='1'%2F%3E%3Ccircle cx='5' cy='12' r='1'%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%2F%3E%3Ccircle cx='19' cy='12' r='1'%2F%3E%3Ccircle cx='5' cy='12' r='1'%2F%3E%3C%2Fsvg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
}

.node-action-btn:hover {
    background: var(--button-primary-bg);
    box-shadow: 0 2px 8px #00000026;
    transform: scale(1.1);
}

.node-action-btn:hover .node-action-icon {
    background-color: #fff;
}

body.dark-mode .node-action-btn {
    background-color: #ffffff1a;
}

body.dark-mode .node-action-btn:hover {
    background-color: var(--accent);
}

.roadmap-container {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: grid !important;
    padding: 0 !important;
    overflow: auto !important;
    background-color: var(--bg-color);
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    background-size: 20px 20px;
    place-items: center !important;
    touch-action: pan-x pan-y;
}

.community-modal-header {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

.community-modal-header h3 {
    flex-shrink: 0;
    margin: 0;
    color: var(--heading-color);
    font-size: 1.2em;
    font-weight: 700;
    white-space: nowrap;
}

.community-search-wrapper {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
}

.community-search-wrapper i {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--secondary-text-color);
    pointer-events: none;
}

.community-search-wrapper input {
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
    outline: none;
}

.community-search-wrapper input:focus {
    background-color: var(--container-bg-color);
    box-shadow: 0 0 0 3px #007bff1a;
    border-color: var(--button-primary-bg);
}

.community-close-btn {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 8px;
    border: none;
    border-radius: 50%;
    background: transparent !important;
    color: var(--secondary-text-color);
    transition: all .2s ease;
    cursor: pointer;
}

.community-close-btn:hover {
    background-color: var(--input-hover-bg-color) !important;
    color: var(--text-color);
    transform: rotate(90deg);
}

.community-close-btn i {
    width: 24px;
    height: 24px;
}

@media (max-width: 600px) {
    .community-modal-header {
        flex-wrap: wrap;
    }

    .community-search-wrapper {
        width: 100%;
        margin-top: 5px;
        order: 3;
    }

    .community-close-btn {
        margin-left: auto;
    }
}

.question-image {
    margin: 10px auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px #0000001a;
}

#deckStartTitle {
    margin-top: 50px !important;
    padding-right: 40px;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
}

.decks-header-wrapper {
    /* Сначала заголовок, потом его кнопки: column-reverse ставил кнопки выше
       слова «Колоды», к которому они относятся. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.icon-btn-small {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--secondary-text-color);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    transition: background-color 0.2s, color .2s;
    cursor: pointer;
}

.icon-btn-small:hover {
    background-color: var(--button-secondary-bg);
    color: var(--primary);
}

.icon-btn-small i {
    width: 16px;
    height: 16px;
}

.icon-btn-small.icon-btn-with-label {
    width: auto;
    border-radius: 14px;
    padding: 5px 10px;
    gap: 6px;
    font-size: 0.8em;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .chat-modal-close-btn { display: none !important; }
}

.lib-deck-header {
    color: var(--text-color);
}

.lib-deck-meta {
    justify-content: space-between;
    color: var(--secondary-text-color);
}


.btn-import-deck {
    flex: 1;
    border: none;
    background-color: var(--button-secondary-bg);
    color: var(--text-color);
}

.btn-import-deck:hover {
    background-color: var(--button-success-bg);
}

.deck-card-visual {
    background: linear-gradient(135deg, #e0eafc, #cfdef3);
}

.deck-card-visual i {
    width: 48px;
    height: 48px;
    color: #fffc;
    filter: drop-shadow(0 2px 4px #0000001a);
}

.deck-card-body {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
}

.lib-deck-header {
    display: -webkit-box;
    color: var(--text-color);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.lib-deck-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--secondary-text-color);
    font-size: .85em;
}

.lib-deck-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}


.btn-import-deck {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: .95em;
    font-weight: 500;
    transition: all .2s ease;
    cursor: pointer;
}

.btn-import-deck:hover {
    background-color: var(--button-success-bg);
    color: #fff;
    box-shadow: 0 4px 10px #2ecc714d;
    border-color: transparent;
}

/* === Скачивание из библиотеки: инлайн-прогресс-бар в кнопке === */
.btn-import-deck.downloading,
.btn-import-deck.downloading:hover {
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--button-primary-bg) !important;
    color: #fff !important;
    border-color: transparent;
    box-shadow: none;
    cursor: progress;
}
.lib-dl-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: .85em;
    font-weight: 500;
    line-height: 1.2;
}
.lib-dl-track {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
}
.lib-dl-bar {
    width: 0%;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    transition: width 200ms ease-out;
}
.lib-dl-bar.indeterminate {
    width: 40%;
    animation: lib-dl-indet 1.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes lib-dl-indet {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

.community-search-wrapper input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: 1em;
    transition: border-color 0.2s, box-shadow .2s;
}

.community-search-wrapper input:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary);
    outline: none;
}

.lib-deck-header {
    display: -webkit-box;
    min-height: 1.4em;
    margin-bottom: 8px;
    overflow: hidden;
    color: var(--text-color);
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.deck-card-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 120px;
    background-color: #e0eafc;
    background-position: center;
    background-size: cover;
}

.deck-card-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
}


.lib-deck-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.cover-upload-container {
    margin-bottom: 15px;
    padding: 15px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    text-align: center;
    transition: border-color .2s;
    cursor: pointer;
}

.cover-upload-container:hover {
    border-color: var(--primary);
}

.cover-preview-img {
    width: 100%;
    max-height: 150px;
    margin-top: 10px;
    border-radius: 6px;
    object-fit: cover;
}

.modal-top-actions {
    position: absolute;
    top: 15px;
    /* Раньше ряд значков крепился к 35% ширины: шесть штук уползали к левому
       краю и налезали друг на друга. Одна кнопка стоит в углу. */
    right: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 10px;
    border-bottom-left-radius: 10px;
}

.modal-action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--secondary-text-color);
    transition: all .2s ease;
    cursor: pointer;
}

.modal-action-btn:hover {
    background-color: var(--button-secondary-bg);
    transform: scale(1.1);
}

.modal-action-btn i {
    width: 20px;
    height: 20px;
}

.btn-action-publish:hover {
    background-color: #eff6ff;
    color: #3b82f6;
}

.btn-action-delete:hover {
    background-color: #fef2f2;
    color: #ef4444;
}

#deckStartModal .modal-content {
    position: relative;
    padding-top: 20px;
}

#errorFilesList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px !important;
    border: none !important;
    background: transparent !important;
}

.error-file-card {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.error-file-card:last-child {
    margin-bottom: 0;
}

.error-file-card:hover {
    background-color: var(--input-hover-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
    transform: translateY(-2px);
    border-color: var(--accent);
}

.error-file-card.selected {
    background-color: color-mix(in srgb, var(--accent) 5%, var(--container-bg-color));
    border-color: var(--accent);
}

.error-file-card input[type="checkbox"] {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-right: 15px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg-color);
    transition: all .2s ease;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    appearance: none;
}

.error-file-card input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* ENTERPRISE UX: Аппаратная отрисовка галочки вместо текстового символа */
.error-file-card input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    /* Точное центрирование с учетом толщины рамки */
    top: 40%; 
    left: 50%;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    /* Стартовая точка анимации (повернута и сжата в 0) */
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
    animation: drawCheckSmooth 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes drawCheckSmooth {
    0% { width: 0; height: 0; opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); }
    40% { width: 0; height: 12px; opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
    100% { width: 6px; height: 12px; opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}

.error-file-info {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.error-file-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
    overflow: hidden;
    color: var(--text-color);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-file-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--secondary-text-color);
}

.error-count-badge {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--feedback-incorrect-border);
    border-radius: 20px;
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    font-size: .85em;
    font-weight: 700;
}

.select-all-container {
    border: 1px dashed var(--border-color);
    background-color: var(--input-bg-color);
}

.select-all-container label {
    color: var(--text-color);
}

.select-all-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--input-bg-color);
    transition: background-color .2s ease;
}

.select-all-container:hover {
    background-color: var(--input-hover-bg-color);
}

.select-all-container label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    color: var(--text-color);
    font-weight: 600;
    cursor: pointer;
}

.select-all-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

@media (max-width: 768px) {
    .radio-group {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        row-gap: 15px;
        column-gap: 10px;
        width: 100%;
        padding-left: 10px;
    }

    .radio-group label {
        justify-content: flex-start;
        width: 100%;
    }
}

.community-maps-grid,
#decksLibraryList {
    display: grid;
    align-items: stretch;
    align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
    padding: 15px;
    padding-bottom: 80px;
}

.library-deck-card {
    position: relative;
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    transition: transform 0.2s, box-shadow .2s;
}

/* ENTERPRISE UX: Ambient Glass Reflection (Фоновый стеклянный блик)
   ------------------------------------------------------------------
   Блик — не едущий блок, а движущийся фон. Раньше это был абсолютный
   псевдоэлемент, уезжавший от left:-100% до left:200%: пока карточка
   обрезала содержимое, его не было видно, но на узких экранах карточке
   ставится overflow:visible (чтобы не срезать текст), и блик начинал
   торчать на две с половиной ширины вправо — окно обзаводилось растущей
   горизонтальной прокруткой. Фон за пределы своего элемента выйти не
   может, поэтому на раскладку он не влияет ни при какой обрезке. */
.library-deck-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(115deg, transparent, rgba(255,255,255,0.08), transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: -100% 0;
    animation: ambientGlassSweep 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes ambientGlassSweep {
    0%, 60% { background-position: -100% 0; }
    100%    { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .library-deck-card::after { animation: none; }
}

.library-deck-card:hover {
    box-shadow: 0 8px 20px #0000001a;
    transform: translateY(-3px);
    border-color: var(--accent);
}

.library-deck-card .deck-card-visual {
    justify-content: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 110px;
    background-color: var(--input-bg-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 12px;
}

.library-deck-card .deck-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}


.library-deck-card .lib-deck-header {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text-color);
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
    line-clamp: 2;
}

.library-deck-card .lib-deck-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: auto;
    color: var(--secondary-text-color);
    font-size: .8em;
}


.library-deck-card .btn-import-deck {
    gap: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
}

.library-deck-card .btn-import-deck:hover {
    background-color: var(--button-success-bg);
}


.anki-audio-player {
    position: absolute !important;
    right: 0;
    bottom: 20px !important;
    left: 0;
    z-index: 10;
    display: block;
    width: 90%;
    max-width: 350px;
    height: 44px;
    margin: 0 auto !important;
    margin-top: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    background-color: var(--input-bg-color);
    box-shadow: var(--neumorph-shadow-soft);
    -webkit-appearance: none; appearance: none;
    appearance: none;
    outline: none;
}

.anki-audio-player::-webkit-media-controls-panel {
    padding: 0 10px;
    background-color: transparent;
}

.anki-audio-player::-webkit-media-controls-play-button {
    border-radius: 50%;
    background-color: var(--accent-color);
    color: #fff;
    transform: scale(1.1);
}

.anki-audio-player::-webkit-media-controls-timeline {
    margin-right: 15px;
    margin-left: 15px;
    background-color: transparent;
}

.anki-audio-player::-webkit-media-controls-current-time-display,
.anki-audio-player::-webkit-media-controls-time-remaining-display {
    color: var(--secondary-text-color);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
}

.anki-audio-player::-webkit-media-controls-mute-button {
    opacity: .6;
}

body.dark-mode .anki-audio-player {
    box-shadow: 5px 5px 10px #0000004d -5px -5px 10px #ffffff0d;
}

.flashcard-back .anki-audio-player {
    bottom: 25px !important;
    border: 1px solid #fff6;
    background-color: #fff3;
    box-shadow: 0 4px 15px #0000001a;
}

body.dark-mode .flashcard-back .anki-audio-player {
    border: 1px solid #ffffff1a;
    background-color: #0000004d;
}

.flashcard-back .anki-audio-player::-webkit-media-controls-current-time-display,
.flashcard-back .anki-audio-player::-webkit-media-controls-time-remaining-display {
    color: #fff !important;
}

.tippy-box {
    border-radius: 10px !important;
    /* APP STORE TIER: Frost Glass Tooltips */
    background-color: rgba(30, 30, 30, 0.75) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

.tippy-arrow {
    color: rgba(30, 30, 30, 0.75) !important;
}

/* Если тема светлая, инвертируем подсказки для контраста, но сохраняем стекло */
body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode) .tippy-box {
    background-color: rgba(25, 25, 25, 0.85) !important;
    color: #f0f0f0 !important;
}
body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode) .tippy-arrow {
    color: rgba(25, 25, 25, 0.85) !important;
}

div[id^=tippy-] {
    z-index: 100000 !important;
}

.content-block b,
.content-block strong {
    color: currentColor !important;
    font-weight: 600 !important;
}

.dark-mode .content-block b,
.dark-mode .content-block strong {
    font-weight: 700 !important;
}

.parser-label-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 15px !important;
}

.parser-label-container label {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 250px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--text-color) !important;
    -webkit-writing-mode: horizontal-tb !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
}

.parser-label-container button {
    flex-shrink: 0 !important;
    margin-left: 10px !important;
}

.filepond--root {
    width: 100% !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* ── Поле загрузки файла под темы приложения ─────────────────────────────
   FilePond приезжает со своей палитрой и своих переменных не имеет: панель
   жёстко #f1f0ef, подпись почти чёрная. На тёмной теме и поверх обоев это
   белый прямоугольник посреди экрана — единственное светлое пятно на всём
   экране создания теста.

   Поэтому перекрашиваем её собственные классы нашими токенами, и тем же
   языком, каким оформлено соседнее поле ввода (#parserArea textarea):
   заливка контейнера, скруглие 12, внутренняя тень. Тогда загрузчик и поле
   читаются как одна пара, а не как чужая вставка. */
.filepond--panel-root {
    background-color: var(--container-bg-color);
    border-radius: 12px;
    box-shadow: var(--neumorph-shadow-inset);
}

/* Через .filepond--root, а не просто по классу: стили библиотеки грузятся с
   CDN уже после нашего файла, поэтому при равной специфичности побеждают
   они. Здесь это заметно — свой #4f4f4f они держат в обеих темах. */
.filepond--root .filepond--drop-label,
.filepond--root .filepond--drop-label label {
    color: var(--secondary-text-color);
}

/* «Выберите файл» — это действие, а не просто слово: красим акцентом и
   оставляем подчёркивание того же цвета, а не библиотечного чёрного. */
.filepond--label-action {
    color: var(--accent);
    text-decoration-color: currentColor;
}

/* Плашка выбранного файла: акцентная заливка, светлый текст поверх неё —
   она перекрывает панель целиком, поэтому от темы не зависит. */
.filepond--item-panel {
    background-color: var(--button-primary-bg);
}

.filepond--file {
    color: #fff;
}

/* Обои: вокруг всё стеклянное, и загрузчик не должен быть плотнее соседей. */
body.has-wallpaper .filepond--panel-root {
    background-color: var(--glass-fill-2);
    border: 1px solid var(--glass-border);
    box-shadow: none;
}


.parser-tab-content label[for="parserFileInput"].custom-file-upload-btn,
.parser-tab-content label[for="aiParserFileInput"].custom-file-upload-btn,
.parser-tab-content label[for="lessonSourceFileInput"],
/* Кнопка в генераторе урока */
.parser-tab-content label[for="srtFileInput"]

/* Кнопка загрузки SRT */
    {
    display: none !important;
}


.lozad {
    opacity: 0;
    transition: opacity .6s ease-in-out;
}

.lozad.loaded {
    opacity: 1;
}

.ai-message-image-wrapper {
    min-height: 100px;
    border-radius: 8px;
    /* background-color: #00000008; */
}

.driver-active .driver-overlay {
    z-index: 2147483640 !important;
    pointer-events: none !important;
}

.driver-popover.driverjs-theme {
    position: fixed !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
}

.driver-popover.driverjs-theme button {
    position: relative;
    /* Было 2147483648 — больше 32-битного максимума. Кнопка живёт в контексте
       наложения самого попапа, ей хватает единицы. */
    z-index: 1;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.driver-popover.driverjs-theme {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: 0 10px 40px #00000080;
}

.driver-popover.driverjs-theme .driver-popover-title {
    margin-bottom: 8px;
    color: var(--heading-color);
    font-size: 1.2em;
    font-weight: 700;
}

.driver-popover.driverjs-theme .driver-popover-description {
    margin-bottom: 15px;
    color: var(--secondary-text-color);
    font-size: .95em;
    line-height: 1.5;
}

.driver-popover.driverjs-theme button {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background-color: var(--button-secondary-bg);
    color: var(--button-primary-text);
    font-size: .9em;
    font-weight: 500;
    transition: all .2s;
    text-shadow: none;
}

.driver-popover.driverjs-theme button:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.driver-popover.driverjs-theme button.driver-popover-close-btn {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--secondary-text-color);
}

.dropdown-content {
    position: fixed !important;
    z-index: 20000 !important;
    display: none;
    min-width: 160px;
    border: 1px solid rgba(150, 150, 150, 0.15); /* Тончайшая внешняя рамка */
    border-radius: 16px; /* Чуть мягче углы */
    
    /* APP STORE TIER: Глубокий Glassmorphism с сатурацией и микро-бликом */
    background-color: color-mix(in srgb, var(--container-bg-color) 90%, transparent) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    box-shadow: 
        0 20px 40px -10px rgba(0,0,0,0.2), 
        0 1px 3px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.2); /* Тонкий световой блик сверху */
    
    /* PREMIUM UX: Пружинная подготовка */
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.32, 1.15, 0.25, 1);
    will-change: transform, opacity;
}

.dropdown-content.show {
    display: block !important;
    opacity: 1;
    transform: scale(1) translateY(0); /* Пружинный отскок в нормальный размер */
}

#themeDropdownContent {
    z-index: 20000 !important;
    display: none;
    grid-template-columns: none !important;
    gap: 4px !important;
    min-width: 290px !important;
    padding: 5px !important;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-color);
    box-shadow: 0 10px 30px #00000026;
    grid-gap: 0 !important;
}

#themeDropdownContent a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    color: var(--text-color) !important;
    text-decoration: none !important;
    transition: background-color .2s;
}

/* Подсветка строки: фон и текст берём ПАРОЙ.
   Раньше менялся только фон, а текст оставался --text-color. В темах, где
   вторичный фон тёмный, а текст страницы тоже тёмный (светлая «Дюна»,
   например), выбранная строка выходила тёмным по тёмному и не читалась. */
#themeDropdownContent a:hover,
#themeDropdownContent a.active {
    background-color: var(--button-secondary-bg) !important;
    color: var(--button-secondary-text) !important;
}

/* Значки внутри подсвеченной строки — тем же цветом, иначе они остаются
   приглушёнными на контрастном фоне. */
#themeDropdownContent a:hover .theme-option-icon,
#themeDropdownContent a.active .theme-option-icon,
#themeDropdownContent a:hover .theme-3d-pyramid,
#themeDropdownContent a.active .theme-3d-pyramid {
    color: var(--button-secondary-text) !important;
}

.theme-option-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    margin-right: 10px;
}

/* Ряд кнопок именно этой шапки. Класс .header-controls общий с главным
   экраном, где он свёрстан под другую задачу: перенос на несколько строк и
   выравнивание по центру. Здесь кнопки стоят в одну строку у правого края и
   не разъезжаются, когда имя длинное. */
.advanced-chat-header .header-controls {
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    gap: 6px;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    flex-direction: row;
}

.flashcard-text-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 25px !important;
    box-sizing: border-box;
    overflow: hidden !important;
    overflow-x: hidden;
}


.deck-name,
.course-card-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 5px 5px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: break-spaces !important;
}


body.dark-mode .anki-audio-player,
body.synthwave-mode .anki-audio-player {
    border: 1px solid var(--border-color) !important;
    background-color: var(--input-bg-color) !important;
    box-shadow: 0 4px 10px #0006 !important;
}

body.dark-mode .anki-audio-player::-webkit-media-controls-panel,
body.synthwave-mode .anki-audio-player::-webkit-media-controls-panel {
    background-color: var(--input-bg-color) !important;
}

body.dark-mode .anki-audio-player::-webkit-media-controls-current-time-display,
body.dark-mode .anki-audio-player::-webkit-media-controls-time-remaining-display,
body.synthwave-mode .anki-audio-player::-webkit-media-controls-current-time-display,
body.synthwave-mode .anki-audio-player::-webkit-media-controls-time-remaining-display {
    color: var(--text-color) !important;
    opacity: .8;
    text-shadow: none !important;
}

body.dark-mode .anki-audio-player::-webkit-media-controls-mute-button,
body.dark-mode .anki-audio-player::-webkit-media-controls-overflow-button,
body.synthwave-mode .anki-audio-player::-webkit-media-controls-mute-button,
body.synthwave-mode .anki-audio-player::-webkit-media-controls-overflow-button {
    opacity: .7;
    filter: invert(1) !important;
}

body.dark-mode .anki-audio-player::-webkit-media-controls-mute-button:hover,
body.synthwave-mode .anki-audio-player::-webkit-media-controls-mute-button:hover {
    opacity: 1;
}

.main-actions-grid button svg,
.custom-file-upload-btn svg {
    opacity: 0;
    will-change: opacity;
}

.deck-icon svg,
.item-icon svg {
    opacity: 0;
}

.main-actions-grid>*,
.custom-file-upload-btn,
#decksArea .deck-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, filter 0.3s ease;
}
.main-actions-grid>*:hover,
.custom-file-upload-btn:hover,
#decksArea .deck-card:hover {
    will-change: transform, opacity, filter;
}

/* Затенение соседних плиток при наведении убрано (18.09.2026).
   Приём задумывался как «всё вокруг отступило», а на деле при каждом
   движении мыши по главному экрану гасли пятнадцать плиток разом: взгляд
   цепляется за движение там, куда не смотришь, и выбирать становится
   труднее, а не легче. Подсветку наведённой плитки делает её собственный
   :hover — этого достаточно. */

.prepare-for-pop {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
}

.pop-in-active {
    animation: bulgeEffect .8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bulgeEffect {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#themeDropdownContent svg,
.theme-picker-dropdown svg {
    opacity: 0;
    will-change: opacity, stroke-dashoffset;
}

.btn-delete-error-file {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    padding: 8px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    transition: all .2s ease;
    cursor: pointer;
}

.btn-delete-error-file:hover {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    transform: scale(1.1);
}

.btn-delete-error-file i {
    width: 18px;
    height: 18px;
}

#folderContentsList {
    width: 100%;
    margin: 20px 0;
    padding: 10px;
    scrollbar-color: var(--border-color) transparent;
    scrollbar-width: thin;
}

#folderContentsModal .modal-content {
    width: 95% !important;
    max-width: 800px !important;
}

#folderContentsList::-webkit-scrollbar {
    width: 6px;
}

#folderContentsList::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--secondary-text-color);
    opacity: .5;
}

#folderContentsList::-webkit-scrollbar-track {
    background: transparent;
}

#folderContentsList li.info-panel-item {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--input-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

#folderContentsList li.info-panel-item:hover {
    background-color: var(--container-bg-color);
    box-shadow: 0 4px 12px #0000001a;
    transform: translateY(-2px);
    border-color: var(--accent);
}

#folderContentsList .item-icon {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--container-bg-color);
    color: var(--secondary-text-color);
    transition: color .2s ease;
}

#folderContentsList li.info-panel-item:hover .item-icon {
    background-color: var(--input-hover-bg-color);
    color: var(--accent);
}

#folderContentsList .item-author {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

#folderContentsList .item-snippet {
    color: var(--secondary-text-color);
    font-size: .85em;
}

#folderContentsModal .modal-buttons button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-weight: 500;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: background-color .2s ease;
}

#folderContentsModal .modal-buttons button:hover {
    background-color: var(--button-secondary-hover-bg);
}

#folderContentsList .item-details {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-align: left;
}

#folderContentsList li.info-panel-item {
    align-items: center;
}

#folderContentsList .item-icon {
    display: none !important;
}


.flashcard-text-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding: 10px;
    overflow-y: auto;
}


/* ======================================================= */
/* === ИСПРАВЛЕНИЕ: КАРТИНКИ В ОБЫЧНОМ ЧАТЕ С AMBILIGHT === */
/* ======================================================= */

.chat-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 300px;
    min-height: 100px;
    /* УБРАНО: overflow: hidden; - иначе свечение обрежется как ножом! */
    /* УБРАНО: background-color и box-shadow (перенесены на саму картинку) */
    background: transparent;
    cursor: pointer;
    transform: translateZ(0); /* Аппаратное ускорение для плавности */
}

/* === BLUR-UP IMAGE PLACEHOLDER === */
.blur-up-container .blur-up-placeholder {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 12px;
    background: var(--input-bg-color);
    filter: blur(0px);
    animation: blurUpPulse 1.8s ease-in-out infinite;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.blur-up-container.loaded .blur-up-placeholder {
    opacity: 0;
}
.blur-up-container .chat-content-image {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.blur-up-container .chat-content-image.loaded {
    opacity: 1;
}
.blur-up-container .ambilight-glow {
    opacity: 0;
    transition: opacity 0.6s ease 0.2s;
}
.blur-up-container .ambilight-glow.loaded {
    opacity: 0.6;
}
@keyframes blurUpPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Основная картинка */
.chat-content-image {
    display: block;
    position: relative;
    z-index: 5; /* Чтобы всегда была ПОВЕРХ свечения */
    width: 100%;
    height: auto;
    border-radius: 12px; /* Возвращаем скругление самой картинке */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Базовая тень */
    object-fit: cover;
    cursor: zoom-in;
    transform-origin: center center;
    /* APP STORE TIER: Пружинная анимация */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                filter 0.3s ease, 
                box-shadow 0.4s ease;
}


.chat-content-image:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    z-index: 2;
    border-radius: 10px; /* Сглаживаем края при увеличении */
}

.message.image-bubble {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .chat-image-wrapper {
        max-width: 240px;
    }
}

#favoritesItemList,
#searchResultsContainer,
#searchResultCards {
    position: relative !important;
    z-index: 0;
}

.search-highlight {
    position: relative !important;
    z-index: 2;
    background-color: transparent !important;
    color: inherit;
    font-weight: 700;
    text-decoration: none !important;
    padding: 0 2px;
    border-radius: 4px;
    
    /* ВОЗВРАЩАЕМ ЭФФЕКТ ЖЕЛТОГО МАРКЕРА */
    background-image: linear-gradient(to right, rgba(255, 210, 0, 0.6), rgba(255, 210, 0, 0.6)) !important;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 0 100%;
    
    /* Плавная анимация закрашивания слева направо */
    animation: drawMarker 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    
    /* Магия: чтобы маркер красиво смотрелся, если текст перенесся на новую строку */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Адаптация маркера под темные темы (чтобы не выжигал глаза) */
body.dark-mode .search-highlight,
body.synthwave-mode .search-highlight,
body.oled-mode .search-highlight {
    background-image: linear-gradient(to right, rgba(255, 210, 0, 0.35), rgba(255, 210, 0, 0.35)) !important;
    color: #fff;
}


#smartDeckContainer {
    animation: slideDown .4s ease;
}

.smart-deck-card {
    background: linear-gradient(135deg, var(--button-primary-bg), var(--accent-color));
    box-shadow: 0 4px 15px #0003;
}


.smart-deck-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border-radius: 50%;
    background: #fff3;
}

.smart-deck-info {
    flex-grow: 1;
}


.radio-option:hover {
    background-color: var(--input-hover-bg-color);
}

.radio-option input[type="radio"] {
    accent-color: var(--accent-color);
}


.radio-title {
    color: var(--text-color);
}

.radio-desc {
    color: var(--secondary-text-color);
}

.calendar-stats-summary {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 12px;
    background: var(--input-bg-color);
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-num {
    color: var(--accent-color);
    font-size: 1.4em;
    font-weight: 700;
}

.stat-desc {
    color: var(--secondary-text-color);
    font-size: .8em;
}

.heatmap-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 20px;
}

.heatmap-day {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .8em;
    cursor: default;
    aspect-ratio: 1;
}


.cal-heatmap-container {
    display: block;
    margin: 0 auto;
}

.q1 {
    fill: #d6e685;
}

.q2 {
    fill: #8cc665;
}

.q3 {
    fill: #44a340;
}

.q4 {
    fill: #1e6823;
}



.smart-deck-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    color: #5e2c3a;
    transition: transform 0.2s, box-shadow .2s;
    cursor: pointer;
}

.dark-mode .smart-deck-card {
    background: linear-gradient(135deg, #591d26 0%, #802835 100%);
    color: #ffcdd2;
    box-shadow: 0 4px 15px #f003;
}

.smart-deck-card:hover {
    box-shadow: 0 15px 25px #b2497366;
    transform: translateY(-8px);
}

.smart-deck-title {
    margin-bottom: 4px;
    font-size: 1.1em;
    font-weight: 700;
}

.smart-deck-desc {
    font-size: .9em;
    opacity: .9;
}

.smart-deck-action i {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.settings-subgroup {
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 35px;
    padding-left: 15px;
    animation: fadeIn .3s ease;
    border-left: 2px solid var(--border-color);
}


.radio-option {
    gap: 12px;
    border: 1px solid transparent;
}

.radio-option:hover {
    background-color: var(--input-hover-bg-color);
}

.radio-option:has(input:checked) {
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    border-color: var(--accent);
}

.radio-option input[type="radio"] {
    margin-top: 4px;
    border: 2px solid var(--border-color);
    background-color: var(--input-bg-color);
    -webkit-appearance: none;
}

.radio-option input[type="radio"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.radio-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

.radio-content {
    gap: 2px;
}

.radio-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
}

.radio-title i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5px;
}

.radio-desc {
    color: var(--secondary-text-color);
    line-height: 1.3;
}

body.dark-mode .radio-option:has(input:checked) {
    background-color: var(--input-bg-color);
}


/* ── Карта активности во всех темах ──────────────────────────────────────
   Раньше пустые ячейки и подписи красились только в тёмной и synthwave: в
   остальных темах сетка была невидимой, и календарь выглядел как несколько
   зелёных квадратов в пустоте. Теперь цвета берутся из переменных темы, а
   подписи на самих квадратах — из фиксированной шкалы, потому что и сама
   шкала фиксированная. */

/* Пустой день: виден в любой теме, но не спорит с заполненными. */
.cal-heatmap-container .graph-rect:not([class*="q"]) {
    fill: color-mix(in srgb, var(--text-color) 12%, transparent) !important;
    rx: 2;
    ry: 2;
}

/* Число на пустом дне. */
.cal-heatmap-container .graph-rect:not([class*="q"]) + .subdomain-text {
    opacity: .75 !important;
    fill: var(--secondary-text-color) !important;
}

.cal-heatmap-container .subdomain-text {
    font-weight: 600 !important;
    pointer-events: none;
}

/* Числа на светлых ступенях шкалы — тёмные, на тёмных — светлые.
   Шкала одна во всех темах, поэтому и контрастная пара одна. */
.cal-heatmap-container .graph-rect.q1 ~ .subdomain-text,
.cal-heatmap-container .graph-rect.q2 ~ .subdomain-text {
    opacity: 1 !important;
    fill: #1b2a12 !important;
}

.cal-heatmap-container .graph-rect.q3 ~ .subdomain-text,
.cal-heatmap-container .graph-rect.q4 ~ .subdomain-text,
.cal-heatmap-container .graph-rect.q5 ~ .subdomain-text {
    opacity: 1 !important;
    fill: #fff !important;
    text-shadow: 0 1px 2px #0009 !important;
}

/* Названия месяцев. */
.cal-heatmap-container .graph-label {
    font-size: 11px;
    font-weight: 500;
    fill: var(--secondary-text-color) !important;
}

.ch-tooltip {
    z-index: 10005 !important;
    padding: 5px 5px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background-color: var(--container-bg-color) !important;
    color: var(--text-color) !important;
    font-family: inherit !important;
    font-size: .9em !important;
    box-shadow: 0 4px 15px var(--shadow-color) !important;
}

.ch-tooltip::after {
    border-bottom-color: var(--container-bg-color) !important;
    border-top-color: var(--container-bg-color) !important;
}


/* =========================================================
   ===  ВИДЖЕТ ВИДЕОЗВОНКОВ (Discord/Telegram-style v2)  ===
   ========================================================= */

.study-widget {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    width: 92vw;
    max-width: 720px;
    height: auto;
    max-height: 88vh;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(24, 26, 32, 0.92), rgba(18, 20, 26, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    color: #f2f3f5;
    transform: translate(-50%, -50%);
    /* transform в переходе НЕ участвует — намеренно.
       Окно позиционируется двумя разными способами: по центру через
       left/top: 50% плюс transform: translate(-50%,-50%), а свёрнутым и при
       перетаскивании — обычными left/top/right/bottom. Эти четыре свойства в
       переходе не перечислены и меняются мгновенно, а transform, будь он в
       списке, ехал бы 0.28 с. Получался рывок ровно в половину размера окна:
       координаты уже новые, а сдвиг ещё старый. Заметно это было в двух
       местах — при сворачивании и разворачивании (toggleMinimize в
       video-call.js) и в момент захвата мышью, где перетаскивание тоже
       сбрасывает transform в none.
       Ширина и высота в списке остаются: их плавное изменение при
       сворачивании и есть задуманный эффект. */
    transition: width .28s ease, height .28s ease, border-radius .28s ease, opacity .28s ease;
    cursor: grab;
    touch-action: none;
}

.study-widget:active { cursor: grabbing; }
.study-widget.hidden { display: none !important; }

/* === Шапка === */
.study-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: 10px 14px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    touch-action: none;
}
.study-widget-header:active { cursor: grabbing; }

.header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: .95em;
    font-weight: 600;
    letter-spacing: .2px;
}
.header-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.header-actions button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    transition: background .18s ease, color .18s ease, transform .18s ease;
    cursor: pointer;
}
.header-actions button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.header-actions button:active { transform: scale(.94); }
.header-actions button i,
.header-actions button svg {
    width: 18px;
    height: 18px;
}

/* Кнопки с текстом в header-actions: снимаем фиксированную 34px-ширину,
   иначе текст рядом с иконкой вываливается за пределы кнопки. */
.header-actions button:has(span) {
    width: auto;
    gap: 6px;
}

/* Кнопка с классом .btn внутри header-actions — это полноценная primary-кнопка
   (например, "Загрузить" в визуальном тренажёре). Базовый ghost-стиль выше
   делал её невидимой в светлой теме (белый текст на белом фоне). */
.header-actions button.btn {
    width: auto;
    height: 40px;
    padding: 0 15px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.header-actions button.btn:hover {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    filter: brightness(1.08);
}
.header-actions button.btn i,
.header-actions button.btn svg {
    width: 18px;
    height: 18px;
}
#startDuelBtn {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}
#startDuelBtn:hover {
    background: rgba(255, 107, 107, 0.22);
    color: #ff8a8a;
}

/* === Видео-область === */
.study-video-area {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    background: #0a0b0d;
    overflow: hidden;
}

.video-grid {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

/* По умолчанию (пока НЕ call-active) — grid 1fr 1fr, чтобы было видно своё превью */
.study-widget:not(.call-active) .video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
    min-height: 220px;
    height: 220px;
}
.study-widget:not(.call-active) .video-wrapper {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: 100% !important;
    border-radius: 14px;
    overflow: hidden;
    background: #131519;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #131519;
    border-radius: 0;
    overflow: hidden;
    transition: all .28s ease;
}

.video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #131519;
}

#localVideo { transform: scaleX(-1); }

/* Скрываем видео-элемент, когда нет видеотрека */
.video-wrapper.no-video video {
    visibility: hidden;
}

/* === Call-active: remote full-bleed, local PiP в углу === */
.study-widget.call-active .video-wrapper.remote {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    z-index: 1;
}

.study-widget.call-active .video-wrapper.local {
    position: absolute !important;
    right: 16px !important;
    bottom: 96px !important;
    top: auto !important;
    left: auto !important;
    width: 140px !important;
    height: 190px !important;
    border-radius: 14px !important;
    overflow: hidden;
    z-index: 5;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.55),
        0 0 0 2px rgba(255, 255, 255, 0.12);
    transition: width .28s ease, height .28s ease, right .28s ease, bottom .28s ease;
}

/* === Метки и статусы === */
.video-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: .75em;
    font-weight: 500;
    letter-spacing: .2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 4;
}
.study-widget.call-active .video-wrapper.local .video-label {
    bottom: 6px;
    left: 6px;
    font-size: .68em;
    padding: 2px 8px;
}

.video-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.55);
    font-size: .9em;
    text-align: center;
    pointer-events: none;
}

/* === Аватар (при выключенной камере) === */
.video-avatar {
    position: absolute;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(40, 44, 52, 0.92), rgba(15, 17, 21, 0.96));
    z-index: 2;
}
.video-wrapper.no-video .video-avatar {
    display: flex;
}
.avatar-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    transition: box-shadow .28s ease, transform .28s ease;
}
.avatar-initials {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
}
.study-widget.call-active .video-wrapper.local .avatar-circle {
    width: 64px;
    height: 64px;
}
.study-widget.call-active .video-wrapper.local .avatar-initials {
    font-size: 22px;
}

/* Пульсация при активной речи */
@keyframes voicePulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55), 0 8px 24px rgba(46, 204, 113, 0.25); }
    70%  { box-shadow: 0 0 0 22px rgba(46, 204, 113, 0), 0 8px 24px rgba(46, 204, 113, 0.1); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0), 0 8px 24px rgba(46, 204, 113, 0); }
}
.video-wrapper.voice-active .avatar-circle {
    animation: voicePulse 1.4s ease-out infinite;
}
/* Обводка remote-видео, когда собеседник говорит */
.video-wrapper.voice-active:not(.no-video)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid rgba(46, 204, 113, 0.85);
    border-radius: inherit;
    pointer-events: none;
    animation: voiceGlow 1.4s ease-out infinite;
    z-index: 3;
}
@keyframes voiceGlow {
    0%, 100% { opacity: .35; }
    50%      { opacity: .9; }
}

/* === Панель подключения (до звонка) === */
.connection-panel {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 12px;
    padding: 16px;
    background: rgba(15, 17, 21, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.my-id-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}
.my-id-box span {
    color: rgba(255, 255, 255, 0.6);
    font-size: .85em;
    white-space: nowrap;
}
.my-id-box strong {
    flex: 1;
    max-width: 220px;
    padding: 0 6px;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#copyPeerIdBtn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transition: background .18s ease, border-color .18s ease;
    cursor: pointer;
    flex-shrink: 0;
}
#copyPeerIdBtn:hover {
    background: rgba(102, 126, 234, 0.25);
    border-color: rgba(102, 126, 234, 0.5);
}
#copyPeerIdBtn i,
#copyPeerIdBtn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    color: #fff !important;
    opacity: 1 !important;
    stroke-width: 2px;
}

.connection-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
#remotePeerIdInput {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: .95em;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
    outline: none;
}
#remotePeerIdInput::placeholder { color: rgba(255, 255, 255, 0.35); }
#remotePeerIdInput:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.btn-connect {
    padding: 0 20px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #5b8cff 0%, #7b5cff 100%);
    color: #fff;
    font-weight: 600;
    font-size: .92em;
    box-shadow: 0 4px 14px rgba(91, 140, 255, 0.35);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
    cursor: pointer;
}
.btn-connect:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(91, 140, 255, 0.45);
}
.btn-connect:active { transform: translateY(0); }

/* === Плавающая pill-панель управления === */
.call-controls {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: transparent;
    z-index: 10;
}
/* В активном звонке — плавающая поверх видео */
.study-widget.call-active .call-controls {
    position: absolute;
    left: 33%;
    bottom: 16px !important;
    padding: 6px;
    gap: 8px;
    background: rgba(24, 26, 32, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.control-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
    cursor: pointer;
}
.control-btn i,
.control-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    color: inherit;
    stroke: currentColor;
    opacity: 1;
}
.control-btn:hover { background: rgba(255, 255, 255, 0.14); }
.control-btn:active { transform: scale(.94); }
.control-btn.active { background: rgba(255, 255, 255, 0.08); color: #fff; }
.control-btn:not(.active):not(.hangup) {
    background: rgba(255, 255, 255, 0.18);
    color: #ff7a7a;
}
.control-btn.hangup {
    background: #e74c3c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.45);
}
.control-btn.hangup:hover {
    background: #c0392b;
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.6);
}

/* В call-active скрываем панель подключения */
.study-widget.call-active .connection-panel { display: none; }

/* === Мини-режим (PiP) === */
.study-widget.minimized {
    top: auto;
    right: 20px;
    bottom: 20px;
    left: auto;
    width: 220px !important;
    max-width: 220px;
    height: 140px !important;
    border-radius: 16px;
    transform: none !important;
    overflow: hidden;
    background: #0a0b0d;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    cursor: grab;
}
.study-widget.minimized:active { cursor: grabbing; }

.study-widget.minimized .study-video-area {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    background: #000 !important;
}
.study-widget.minimized .video-grid {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.study-widget.minimized .video-wrapper {
    position: absolute !important;
    border-radius: 0 !important;
    height: 100% !important;
}
.study-widget.minimized .video-wrapper.remote {
    inset: 0 !important;
    width: 100% !important;
    z-index: 1;
}
.study-widget.minimized .video-wrapper.local {
    right: 4px !important;
    bottom: 4px !important;
    top: auto !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    z-index: 5;
}
.study-widget.minimized .video-wrapper.local .avatar-circle {
    width: 38px !important;
    height: 38px !important;
}
.study-widget.minimized .video-wrapper.local .avatar-initials {
    font-size: 14px;
}
.study-widget.minimized .video-label,
.study-widget.minimized .video-status {
    display: none !important;
}

/* Шапка и контролы в минимизированном — оверлей, появляются по ховеру */
.study-widget.minimized .study-widget-header,
.study-widget.minimized .call-controls {
    position: absolute !important;
    left: 0;
    width: 100%;
    z-index: 10;
    border: none !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    padding: 6px 8px !important;
}
.study-widget.minimized .study-widget-header {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent) !important;
    border-radius: 16px 16px 0 0;
}
.study-widget.minimized .call-controls {
    bottom: 0;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent) !important;
    border-radius: 0 0 16px 16px;
}
.study-widget.minimized.overlay-active .study-widget-header,
.study-widget.minimized.overlay-active .call-controls {
    opacity: 1;
    pointer-events: auto;
}
/* показ по наведению — только там, где наведение есть: на телефоне :hover срабатывает в момент тапа */
@media (hover: hover) {
    .study-widget.minimized:hover .study-widget-header,
    .study-widget.minimized:hover .call-controls {
        opacity: 1;
        pointer-events: auto;
    }
}

.study-widget.minimized .header-title { display: none; }
.study-widget.minimized .header-actions {
    justify-content: flex-end;
    width: 100%;
}
.study-widget.minimized .header-actions button {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.study-widget.minimized .header-actions button i,
.study-widget.minimized .header-actions button svg {
    width: 14px;
    height: 14px;
}

.study-widget.minimized .control-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
}
.study-widget.minimized .control-btn i,
.study-widget.minimized .control-btn svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
}
.study-widget.minimized .control-btn.hangup {
    background: #e74c3c !important;
    color: #fff !important;
}
.study-widget.minimized .connection-panel {
    display: none !important;
}

.video-call-users-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    margin-top: 10px;
    padding-top: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--border-color);
    touch-action: pan-y !important;
}

.video-call-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--input-bg-color);
    transition: all .2s ease;
}

.video-call-user-item:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--accent-color);
}

.vc-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-weight: 500;
}

.vc-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2ecc71;
    box-shadow: 0 0 5px #2ecc71;
}

.vc-call-btn {
    background: var(--button-success-bg);
}


.vc-call-btn:disabled {
    background: var(--button-secondary-bg);
    transform: none;
}

.vc-empty-text {
    padding: 10px;
    color: var(--secondary-text-color);
    font-size: .9em;
    text-align: center;
}

.vc-call-btn i,
.vc-call-btn svg {
    display: block !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    fill: none !important;
    stroke: #fff !important;
}

.remote-quiz-container {
    display: flex;
    flex-direction: column;
    max-height: 700px;
    padding: 10px;
    background-color: var(--input-bg-color);
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

.remote-quiz-container.hidden {
    display: none !important;
}

.remote-quiz-header {
    display: flex;
    justify-content: space-between;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 8px;
    color: var(--secondary-text-color);
    font-size: .85em;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.remote-quiz-header button {
    padding: 2px;
    border: none;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.remote-quiz-content {
    flex-grow: 1;
    padding-right: 5px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
}

.remote-quiz-content::-webkit-scrollbar {
    width: 4px;
}

.remote-quiz-content::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: var(--border-color);
}

.remote-q-text {
    margin: 0 0 10px;
    color: var(--text-color);
    font-size: .95em;
    font-weight: 500;
    line-height: 1.4;
}

.remote-answers-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.remote-answer-item {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--container-bg-color);
    color: var(--secondary-text-color);
    font-size: .85em;
}

.remote-answer-item.correct {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    font-weight: 600;
    border-color: var(--feedback-correct-border);
}

.remote-answer-item.incorrect {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border-color: var(--feedback-incorrect-border);
}

@media (max-width: 768px) {
    /* Full-screen виджет на мобильных */
    .study-widget:not(.minimized):not(.hidden) {
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border: none !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    /* Без звонка: сетка 1x2 колонки, компактная */
    .study-widget:not(.call-active):not(.minimized) .video-grid {
        grid-template-columns: 1fr 1fr !important;
        min-height: 180px !important;
        height: 180px !important;
        padding: 10px !important;
    }

    /* С активным звонком — remote full-bleed, local PiP меньше */
    .study-widget.call-active .video-wrapper.local {
        width: 50px !important;
        height: 50px !important;
        right: 3px !important;
        bottom: 3px !important;
    }

    /* Safe-area для iPhone */
    .study-widget.call-active .call-controls {
        bottom: max(0px, env(safe-area-inset-bottom)) !important;
    }

    .control-btn {
        width: 50px;
        height: 50px;
    }

    /* Мини-режим: позиция над нижним навбаром */
    .study-widget.minimized:not(.hidden) {
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
        width: 160px !important;
        max-width: 160px;
        height: 100px !important;
        max-height: 100px;
    }
}

body.video-active {
    height: 100vh;
    overflow: hidden !important;
    touch-action: none;
}

.settings-label-text {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
}

#answerOptions li.active-key-press {
    background-color: var(--button-secondary-bg-hover);
    transform: scale(0.98);
    transition: transform .1s ease, background-color .1s ease;
}

/* === ENTERPRISE UX: NATIVE APP TRANSITIONS (60 FPS) === */
::view-transition-old(root) {
    animation: 0.4s cubic-bezier(0.32, 1.15, 0.25, 1) both fade-out,
               0.4s cubic-bezier(0.32, 1.15, 0.25, 1) both slide-out-left;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation: 0.4s cubic-bezier(0.32, 1.15, 0.25, 1) both fade-in,
               0.4s cubic-bezier(0.32, 1.15, 0.25, 1) both slide-in-right;
    mix-blend-mode: normal;
    z-index: 2147483646;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes slide-in-right { from { transform: translateX(25px) scale(0.98); } to { transform: translateX(0) scale(1); } }
@keyframes slide-out-left { from { transform: translateX(0) scale(1); } to { transform: translateX(-25px) scale(0.98); } }

#themeDropdownContent.show,
.dropdown-content.show {
    top: auto !important;
    left: auto !important;
    z-index: 20000 !important;
    display: flex !important;
    margin: 0 !important;
    transform: none !important;
}

#themeDropdownContent {
    flex-direction: column !important;
}

#themeDropdownContent.show {
    position: absolute !important;
    left: auto !important;
    z-index: 20000 !important;
    margin-left: 0 !important;
    transform: none !important;
    box-shadow: 0 3px 30px rgba(0,0,0,0.5) !important;
    /* Фон и размытие уехали на слой ниже — см. ::before.
       Здесь их держать нельзя: у элемента с backdrop-filter браузер
       пересобирает подложку при каждой перерисовке содержимого, а внутри
       открытого меню у значков крутятся бесконечные анимации (глаз моргает,
       мотоцикл прыгает, пирамида вращается). Стекло пересчитывалось каждый
       кадр — отсюда и моргание всей панели, одинаковое на любой теме. */
    background-color: transparent !important;
    /* Своя область наложения: без неё z-index: -1 у ::before увёл бы слой
       за пределы меню, под весь экран. */
    isolation: isolate;
}

/* Матовое стекло — отдельным слоем на ::before: у псевдоэлемента нет
   потомков, анимировать внутри него нечему, и снимок подложки не зависит
   от живых значков выше. (Стекло снимали как подозреваемого в мигании —
   мигание осталось и без него, так что оно оправдано и возвращено.) */
#themeDropdownContent.show::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: color-mix(in srgb, var(--container-bg-color) 30%, transparent);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    pointer-events: none;
}

#themeDropdownContent:not(.show),
.dropdown-content:not(.show) {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -9999 !important;
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

#themeDropdownContent:not(.show) *,
.dropdown-content:not(.show) * {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.vc-actions {
    display: flex;
    gap: 8px;
}

.vc-call-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    color: #fff;
    transition: transform .2s;
    cursor: pointer;
}

.vc-call-btn:hover {
    transform: scale(1.1);
}

.vc-btn-video {
    background: var(--button-success-bg);
}

.vc-btn-audio {
    background: var(--button-primary-bg);
}

.vc-call-btn:disabled {
    background: var(--button-secondary-bg);
    opacity: .5;
    cursor: not-allowed;
}

.remote-quiz-content .anki-audio-player {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 10px auto !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

.remote-flashcard-container {
    width: 100%;
    max-width: 400px;
    height: 300px;
    margin: 15px auto;
    cursor: default;
    perspective: 1000px;
}

.remote-flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform .6s;
    transform-style: preserve-3d;
}

.remote-flashcard-container.flipped .remote-flashcard-inner {
    transform: rotateY(180deg);
}

.remote-card-face {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow-y: auto;
    box-shadow: var(--neumorph-shadow-soft-sm);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.remote-card-front {
    background-color: var(--container-bg-color);
}

.remote-card-back {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    transform: rotateY(180deg);
}

.remote-card-face img {
    max-height: 120px;
    margin-bottom: 10px;
    object-fit: contain;
}

.remote-quiz-container {
    min-height: 300px;
    overflow: visible;
    transition: all .4s ease-in-out;
}

.remote-flashcard-container .flashcard-text-content,
.remote-flashcard-container .flashcard-text-content * {
    margin: 2px 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.remote-flashcard-container img {
    width: auto !important;
    max-height: 100px !important;
    margin: 5px auto !important;
}

.remote-flashcard-container h2,
.remote-flashcard-container h3 {
    margin-bottom: 5px !important;
    font-size: 16px !important;
}

.remote-card-face::-webkit-scrollbar {
    width: 4px;
}

.remote-card-face::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #0003;
}

.remote-card-face {
    justify-content: center;
    padding: 10px !important;
}

.question-image-wrapper {
    position: relative;
    display: inline-block;
}

.question-image {
    cursor: crosshair;
}


.visual-search-hint {
    margin-top: 10px;
    padding: 15px;
    border-radius: 8px;
    background: var(--message-bg-other);
    color: var(--secondary-text-color);
    text-align: center;
    font-style: italic;
}

@keyframes pulse-box {
    0% {
        opacity: .6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .6;
    }
}


.question-image-wrapper {
    margin: 0 auto 20px;
    line-height: 0;
}

.question-image {
    display: block;
    min-width: 300px;
    max-width: 100%;
    height: auto;
    max-height: 65vh;
    object-fit: contain;
}

#questionText {
    width: 100%;
    max-width: 800px;
    margin-top: 10px;
    text-align: center;
}


/* === ВИЗУАЛЬНЫЙ ТРЕНАЖЁР: ГЛАВНАЯ === */
/* Раньше экран начинался с кнопки «Загрузить» — без названия и без
   объяснения, куда человек попал. Кнопки при этом были трёх разных видов:
   залитая пилюля, серая плита во всю ширину и коричневая полоса внизу
   карточки. Приводим к одному языку: заголовок, пояснение, ряд действий. */
.vt-head {
    margin: 4px 0 18px;
}
.vt-head__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.35em;
    line-height: 1.2;
}
.vt-head__title i { width: 22px; height: 22px; color: var(--accent); }
.vt-head__sub {
    margin: 6px 0 0;
    font-size: .88em;
    line-height: 1.45;
    opacity: .65;
}

/* Ряд действий: создать своё — основное, загрузить готовый архив —
   второстепенное. Раньше они стояли в разных концах экрана и выглядели
   одинаково важными. */
.vt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.vt-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: .93em;
    font-weight: 600;
    white-space: nowrap;
}
.vt-actions .btn i { width: 17px; height: 17px; }
.vt-btn-secondary {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}
.vt-btn-secondary:hover { background: var(--input-hover-bg-color) !important; }
@media (max-width: 560px) {
    .vt-actions { flex-direction: column; }
    .vt-actions .btn { width: 100%; }
}

/* Пояснение про общую библиотеку. Это предупреждение — «то, что вы
   загрузите, увидят все», — и оно должно читаться как предупреждение,
   а не как серая плита. */
.vt-note {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-left-width: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: .87em;
    line-height: 1.45;
}
.vt-note i {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--accent);
}

/* Ход скачивания и запасной путь */
.dataset-dl-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 4px 0;
    color: var(--secondary-text-color);
    font-size: .82em;
    text-align: center;
}
/* Полоса скачивания набора: заливка растёт по байтам. Полоса вместо
   спиннера — потому что набор бывает на 140 МБ, и минуту крутящегося колёсика
   не отличить от зависания. */
.dataset-dl-bar {
    width: 100%; height: 4px; border-radius: 2px; overflow: hidden;
    background: rgba(255,255,255,0.12);
}
.dataset-dl-fill {
    width: 0; height: 100%; border-radius: 2px;
    background: var(--accent-color, #4D96FF);
    transition: width 0.3s;
}
/* До первого байта полоса бегает: сервер режет и кодирует первую порцию,
   и «0 %» в это время выглядит как зависание. */
.dataset-dl-bar.waiting .dataset-dl-fill {
    width: 30%; transition: none;
    animation: dataset-dl-wait 1.1s ease-in-out infinite alternate;
}
@keyframes dataset-dl-wait {
    from { margin-left: 0; }
    to   { margin-left: 70%; }
}
/* Байты не идут дольше двух секунд — сервер готовит следующую порцию.
   Заливка дышит: стоящая полоса читается как зависание. */
.dataset-dl-bar.stalled .dataset-dl-fill {
    animation: dataset-dl-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes dataset-dl-pulse {
    from { opacity: 1; }
    to   { opacity: 0.4; }
}
.dataset-dl-fallback {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}
.dataset-dl-reason {
    font-size: .78em;
    line-height: 1.35;
    text-align: center;
    color: var(--secondary-text-color);
}
.dataset-dl-direct {
    justify-content: center;
    width: 100%;
    gap: 7px;
}
.dataset-dl-direct i { width: 15px; height: 15px; }

/* Классы внутри набора — списком в отдельном окне. Раньше они разворачивались
   прямо в карточке, и у набора на полторы тысячи вопросов это была стена
   текста высотой в несколько экранов. */
.dataset-classes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 2px;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: .78em;
    cursor: pointer;
}
.dataset-classes:hover { background: var(--input-hover-bg-color); }
.dataset-classes i { width: 14px; height: 14px; }
.dataset-classes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 55vh;
    overflow-y: auto;
    text-align: left;
}
.dataset-classes-list span {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--input-bg-color);
    font-size: .82rem;
}

/* === ВЕРИФИКАТОР === */
.ver-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 18px;
}
.ver-back {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color .18s;
}
.ver-back:hover { background: var(--input-hover-bg-color); }
.ver-head__title {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.3em;
    line-height: 1.2;
}
.ver-head__title i { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); }
/* PRO — отдельной меткой. Строчкой «PRO only.» серым под описанием
   это читалось как сноска, которую можно не заметить. */
.ver-pro {
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFD700, #FDB931);
    color: #4a3b00;
    font-size: .72em;
    font-weight: 800;
    letter-spacing: .04em;
}

.verifier-input-container {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--container-bg-color);
}
.verifier-desc {
    margin: 0 0 14px;
    font-size: .9em;
    line-height: 1.5;
    color: var(--secondary-text-color);
}

/* Сворачивание блока ввода */
.ver-collapse {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 0 14px;
    border: none;
    background: transparent;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
}
.ver-collapse__icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.ver-collapse__title { font-weight: 700; font-size: .95em; }
.ver-collapse__note {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82em;
    opacity: .6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ver-collapse__chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    opacity: .6;
    transition: transform .2s;
}
.verifier-input-container.is-collapsed .ver-input-body { display: none; }
.verifier-input-container.is-collapsed .ver-collapse { padding-bottom: 0; }
.verifier-input-container.is-collapsed .ver-collapse__chevron { transform: rotate(180deg); }

.ver-field { margin-bottom: 18px; }
.ver-field__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}
.ver-field__head label:first-child {
    margin: 0;
    font-weight: 600;
    font-size: .92em;
}
/* Загрузка файла — обычная кнопка, а не подпись, притулившаяся к метке поля */
.ver-upload {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--text-color);
    font-size: .84em;
    cursor: pointer;
    transition: background-color .18s;
}
.ver-upload:hover { background: var(--input-hover-bg-color); }
.ver-upload i { width: 15px; height: 15px; }

.ver-textarea {
    width: 100%;
    box-sizing: border-box;
    /* Сюда вставляют целый тест — поле в шесть строк заставляло скроллить
       внутри крошечного окошка */
    min-height: 220px;
    resize: vertical;
    line-height: 1.5;
}

.ver-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFD700, #FDB931);
    color: #3b2f00;
    font-weight: 700;
}
.ver-start i { width: 18px; height: 18px; }

/* Итог проверки. Четыре числа в строку без пояснений не говорили ничего:
   «Только ИИ: 9» — это хорошо или плохо, и что теперь делать? Каждое число
   стало карточкой с названием и подсказкой, что оно означает. */
.ver-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 18px 0;
}
.ver-summary__item {
    padding: 13px 14px;
    border: 1px solid var(--border-color);
    border-left-width: 3px;
    border-radius: 12px;
    background: var(--container-bg-color);
}
.ver-summary__item b {
    display: block;
    font-size: 1.5em;
    line-height: 1.1;
}
.ver-summary__item span {
    display: block;
    margin-top: 3px;
    font-size: .84em;
    font-weight: 600;
}
.ver-summary__item small {
    display: block;
    margin-top: 4px;
    font-size: .74em;
    line-height: 1.35;
    opacity: .6;
}
.ver-summary__item.is-agree    { border-left-color: #2ecc71; }
.ver-summary__item.is-agree b  { color: #27ae60; }
.ver-summary__item.is-conflict { border-left-color: #e74c3c; }
.ver-summary__item.is-conflict b { color: #e74c3c; }
.ver-summary__item.is-ai       { border-left-color: #3498db; }
.ver-summary__item.is-ai b     { color: #3498db; }

/* Выгрузка файлов. Три цветные кнопки без заголовка читались как выбор
   режима — непонятно было, что нажатие скачивает файл. */
.ver-export {
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--container-bg-color);
}
.ver-export__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: .95em;
}
.ver-export__head i { width: 18px; height: 18px; color: var(--accent); }
.ver-export__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.ver-dl {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 13px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg-color);
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}
.ver-dl i { width: 19px; height: 19px; margin-bottom: 5px; }
.ver-dl__title { font-weight: 700; font-size: .9em; line-height: 1.2; }
/* Подпись объясняет, что именно окажется в файле: по одному названию
   «С пометками» это не угадать */
.ver-dl__sub { font-size: .76em; line-height: 1.35; opacity: .62; }
.ver-dl.is-clean i  { color: #27ae60; }
.ver-dl.is-full i   { color: #2980b9; }
.ver-dl.is-diff i   { color: #e67e22; }
.ver-dl.is-clean:hover { border-color: #27ae60; background: color-mix(in srgb, #27ae60 8%, transparent); }
.ver-dl.is-full:hover  { border-color: #2980b9; background: color-mix(in srgb, #2980b9 8%, transparent); }
.ver-dl.is-diff:hover  { border-color: #e67e22; background: color-mix(in srgb, #e67e22 8%, transparent); }

/* Ход проверки. Прежняя полоска в 6px с серой подписью снизу читалась как
   декоративная линия; между тем это единственный признак, что работа идёт,
   а проверка сотни вопросов занимает минуты. */
.ver-progress {
    margin: 16px 0 18px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.ver-progress__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ver-progress__text {
    font-size: .92em;
    font-weight: 700;
    color: var(--text-color);
}
.ver-progress__spin {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: verSpin .8s linear infinite;
}
@keyframes verSpin { to { transform: rotate(360deg); } }
.ver-progress__track {
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 12%, transparent);
    overflow: hidden;
}
.ver-progress__fill {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
    transition: width .3s ease;
    /* Бегущие полосы: при долгой фазе ширина стоит на месте, и без движения
       непонятно, идёт ли ещё работа */
    background-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 8px, rgba(255,255,255,0) 8px 16px);
    background-blend-mode: overlay;
    background-size: 100% 100%, 32px 32px;
    animation: verStripes 1s linear infinite;
}
@keyframes verStripes {
    to { background-position: 0 0, 32px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ver-progress__spin, .ver-progress__fill { animation: none; }
}

/* === ОКНО РЕДАКТИРОВАНИЯ НАБОРА === */
/* Шапка: название слева, закрытие справа. По умолчанию заголовок вставал
   по центру, а крестик уезжал под него отдельной серой плиткой — читалось
   как ошибка вёрстки. */
#visualDatasetEditModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}
#visualDatasetEditModal .modal-header h3 {
    margin: 0;
    font-size: 1.1em;
    text-align: left;
}
#visualDatasetEditModal .modal-header .close-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--text-color);
}
#visualDatasetEditModal .modal-header .close-btn:hover {
    background: var(--input-hover-bg-color);
}
#visualDatasetEditModal .modal-header .close-btn i { width: 17px; height: 17px; }

/* Низ окна: кнопка сохранения не должна выглядеть полосой во всю ширину
   без полей — она читалась как часть страницы, а не как действие */
#visualDatasetEditModal .modal-footer-actions {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color);
    background: var(--container-bg-color);
}
#visualDatasetEditModal #saveDatasetBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    font-weight: 700;
}

/* Списки шли не во всю ширину и обрезали подпись до «Не указанс» */
#visualDatasetEditModal select.auth-input,
#visualDatasetEditModal input.auth-input,
#visualDatasetEditModal textarea.auth-input {
    width: 100%;
    box-sizing: border-box;
}
/* Пояснения были выровнены по центру и читались как заголовки */
#visualDatasetEditModal .settings-group > p { text-align: left; }
#visualDatasetEditModal .settings-group { margin-bottom: 20px; }
#visualDatasetEditModal .settings-group > label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.vt-trans-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.vt-trans-count {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--input-bg-color);
    font-size: .8em;
    font-weight: 700;
    color: var(--secondary-text-color);
}
.vt-trans-search { margin: 10px 0 12px; }
.vt-trans-empty {
    padding: 18px 10px;
    text-align: center;
    color: var(--secondary-text-color);
    font-size: .9em;
}
.vt-trans-more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 11px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-color);
    font-size: .88em;
    cursor: pointer;
}
.vt-trans-more:hover { background: var(--input-hover-bg-color); }

/* Строка класса: оригинал шапкой, три перевода под ним */
#visualDatasetEditModal .translation-row {
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--container-bg-color);
}
#visualDatasetEditModal .translation-original {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: .9em;
    word-break: break-word;
}
#visualDatasetEditModal .translation-original i {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    opacity: .6;
}
#visualDatasetEditModal .translation-inputs {
    display: grid;
    gap: 8px;
}
#visualDatasetEditModal .trans-input-group {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 8px;
}
/* Метка языка сбоку, а не над полем: три подписи в столбик растягивали
   строку класса на пол-экрана */
#visualDatasetEditModal .trans-input-group label {
    margin: 0;
    font-size: .72em;
    font-weight: 700;
    opacity: .55;
    text-align: center;
}
#visualDatasetEditModal .trans-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: .88em;
}
#visualDatasetEditModal .trans-input:focus {
    outline: none;
    border-color: var(--focus-ring);
}

/* Два списка рубрики в окне редактирования — рядом, пока есть место */
.vt-rubric-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
/* Поле для своего значения появляется под списком, а не вместо него:
   видно и что выбрано «Своё», и что вписано */
.vt-rubric-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.vt-rubric-col input[hidden] { display: none; }
@media (max-width: 520px) {
    .vt-rubric-selects { grid-template-columns: 1fr; }
}
.vt-rubric-hint {
    margin: 8px 0 0;
    font-size: .82em;
    line-height: 1.4;
    color: var(--secondary-text-color);
}

/* Рубрикатор: направление, под ним — раздел внутри него */
.vt-filters { margin-bottom: 6px; }
.vt-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
/* На телефоне полки листаются вбок: восемь направлений в столбик съели бы
   экран до того, как человек увидит хоть один набор */
@media (max-width: 640px) {
    .vt-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .vt-chip-row::-webkit-scrollbar { display: none; }
}
.vt-chip-row--sub {
    padding-left: 2px;
    margin-bottom: 14px;
}
.vt-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-color);
    font-size: .85em;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s, border-color .18s;
}
.vt-chip i { width: 15px; height: 15px; flex: 0 0 auto; opacity: .75; }
/* Число рядом с названием — сколько наборов на полке. Приглушённое,
   чтобы не спорить с самим названием */
.vt-chip b {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--input-bg-color);
    font-size: .85em;
    font-weight: 700;
    opacity: .75;
}
.vt-chip:hover { background: var(--input-hover-bg-color); }
.vt-chip.is-on {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-weight: 700;
}
.vt-chip.is-on i { opacity: 1; }
.vt-chip.is-on b { background: color-mix(in srgb, var(--accent) 22%, transparent); opacity: 1; }
.vt-chip--sm { padding: 6px 12px; font-size: .8em; }

/* Рубрика на карточке набора — одной строкой, без переполнения */
.dataset-rubric {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: .75em;
    color: var(--accent);
    font-weight: 700;
}
.dataset-rubric i { width: 13px; height: 13px; flex: 0 0 auto; }
/* Длинное название («Достопримечательности») не должно распирать плитку
   и лезть за её край — укорачиваем многоточием, полный текст в подсказке */
.dataset-rubric span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Витрина плитками, как в курсах: на телефоне два столбца, дальше — сколько
   влезет. Раньше карточки шли по одной в ряд и были ростом почти в экран,
   так что до третьего набора приходилось долго листать. */
.datasets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px;
    padding: 4px 0 20px;
}
@media (min-width: 700px) {
    .datasets-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }
}

/* Превью квадратом: наборы разного вида (ЭКГ-ленты, снимки, препараты),
   и одинаковая рамка выравнивает витрину */
.datasets-grid .dataset-preview {
    height: auto;
    aspect-ratio: 1 / 1;
}
.datasets-grid .dataset-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
    padding: 10px 12px 12px;
}
.datasets-grid .dataset-title {
    font-weight: 700;
    font-size: .95em;
    line-height: 1.25;
    /* Ровно две строки, даже если название короткое: иначе в ряду одна
       плитка выше другой, и факты под названиями не выстраиваются */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}
/* Факты о наборе прижаты к низу: названия бывают в одну и в две строки,
   и без этого строка с цифрами скачет по высоте от плитки к плитке */
.datasets-grid .dataset-meta {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: auto;
    font-size: .78em;
}
/* Число классов — такой же факт, как вопросы и вес, и стоит с ними в
   строке. Отдельной плашкой оно занимало целую строку. */
.datasets-grid .dataset-classes {
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    font-size: 1em;
    color: var(--secondary-text-color);
}
.datasets-grid .dataset-classes:hover { background: none; color: var(--accent); }
.datasets-grid .dataset-classes i { width: 13px; height: 13px; }
.datasets-grid .dataset-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.datasets-grid .dataset-meta i { width: 13px; height: 13px; flex: 0 0 auto; }

/* Правка и удаление показываются поверх превью. Полупрозрачная подложка
   под ними нужна: на светлом снимке белые значки терялись. */
.datasets-grid .dataset-owner-actions button {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
/* Превью бывает и очень светлым, и очень тёмным — тень по краю не даёт
   значкам и метке сливаться ни с тем, ни с другим */
.datasets-grid .dataset-preview::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 52px;
    pointer-events: none;
    background: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0));
}
.datasets-grid .dataset-actions {
    gap: 6px;
    padding: 8px 10px;
}
.datasets-grid .btn-dataset-action {
    justify-content: center;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 9px 10px;
    font-size: .82em;
    font-weight: 600;
    border-radius: 10px;
}
/* Сообщение о неудаче — строкой, а не абзацем: оно раздвигало плитку и
   ломало ряд */
.datasets-grid .dataset-dl-note {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Многоточие умеет только сам текстовый элемент: надпись, лежащая прямо
   во флекс-контейнере, становится безымянным элементом флекса и просто
   обрезается по краю — «Начать тренирову». */
.datasets-grid .btn-dataset-action > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.datasets-grid .btn-dataset-action > i { flex: 0 0 auto; width: 15px; height: 15px; }

/* Цвета кнопок задавались инлайном из переменных, которые в части тем
   оказываются градиентом — в background-color такое значение отбрасывается,
   и кнопка оставалась без заливки */
.datasets-grid .play-btn {
    background: #27ae60;
    border-color: transparent;
    color: #fff;
}
.datasets-grid .play-btn:hover { background: #219150; color: #fff; }
/* Скачивание — главное действие облачного набора, поэтому акцентом:
   основным фоном кнопка выходила тяжёлой плашкой во всю ширину плитки */
.datasets-grid .download-btn {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
}
.datasets-grid .download-btn:hover { filter: brightness(1.08); color: #fff; }
/* Удаление с устройства — фиксированным квадратом, чтобы не отбирать
   ширину у основной кнопки */
.datasets-grid .btn-delete-local {
    position: static;
    opacity: 1;
    flex: 0 0 auto;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--feedback-incorrect-text, #e74c3c);
    cursor: pointer;
}
.datasets-grid .btn-delete-local:hover {
    background: var(--feedback-incorrect-bg, rgba(231,76,60,0.12));
}
.datasets-grid .btn-delete-local i { width: 16px; height: 16px; }

/* Правка и удаление — поверх превью, а не в строке с названием: в узкой
   плитке они отбирали у названия половину ширины */
.dataset-owner-actions {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    gap: 5px;
}
.dataset-owner-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    cursor: pointer;
    transition: background-color .18s;
}
.dataset-owner-actions button:hover { background: rgba(0,0,0,0.78); }
.dataset-owner-actions .btn-delete-dataset:hover { background: #e74c3c; }
.dataset-owner-actions i { width: 14px; height: 14px; }

.dataset-card {
    /* Якорь для метки статуса. Без него абсолютный бейдж цеплялся
       за страницу и улетал в верхний угол экрана отдельной кнопкой,
       которая ничего не делает. */
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.dataset-card:hover {
    box-shadow: var(--neumorph-shadow-soft);
    transform: translateY(-4px);
    border-color: var(--accent);
}

.dataset-preview {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background-color: var(--input-bg-color);
    border-bottom: 1px solid var(--border-color);
}

.dataset-preview img {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--input-bg-color);
    object-fit: cover;
}

.dataset-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--input-bg-color);
    opacity: 0;
    transition: opacity .4s ease-in-out;
    background-position: center;
    background-size: cover;
}

.dataset-slide.active {
    opacity: 1;
}

.dataset-icon-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--input-bg-color);
}

.dataset-icon-placeholder i {
    width: 64px;
    height: 64px;
    color: var(--text-color);
    opacity: .2;
}

.dataset-info {
    flex-grow: 1;
    padding: 15px;
    background-color: var(--container-bg-color);
}

.dataset-categories {
    position: relative;
    display: flex;
    display: -webkit-box;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    overflow: hidden;
    color: var(--secondary-text-color);
    font-size: .85em;
    line-height: 1.4;
    transition: all .2s ease;
    cursor: pointer;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
    line-clamp: 2;
    border-top: 1px dashed var(--border-color);
}

.dataset-categories:hover {
    color: var(--text-color);
}

.dataset-categories.expanded {
    z-index: 5;
    overflow: visible;
    background-color: var(--container-bg-color);
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.dataset-categories i {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 3px;
}

.dataset-title {
    margin-bottom: 8px;
    overflow: hidden;
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: 600;
    justify-self: center;
    text-overflow: ellipsis;
    white-space: break-spaces;
}

.dataset-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--secondary-text-color);
    font-size: .85em;
}

.dataset-actions {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: var(--input-bg-color);
    border-top: 1px solid var(--border-color);
}

.btn-dataset-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: .9em;
    transition: all .2s;
    cursor: pointer;
}

.btn-dataset-action:hover {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border-color: transparent;
}

.btn-dataset-action.delete:hover {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border-color: var(--feedback-incorrect-border);
}

/* Метка «Облако / Готово». Позиционирование когда-то закомментировали,
   и вместе с обнулённым скруглением бейдж растянулся тёмной лентой во всю
   ширину карточки — читался как сломанная шапка, а не как пометка. */
.dataset-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}


.dataset-status-badge i { width: 13px; height: 13px; flex: 0 0 auto; }
/* Сплошной цвет, а не переменная: в теме она бывает градиентом, а градиент
   в background-color молча отбрасывается — метка оставалась без фона */
.dataset-status-badge.local {
    background-color: #27ae60;
    color: #fff;
}

.dataset-status-badge.cloud {
    background-color: #0009;
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.btn-delete-local {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--container-bg-color);
    color: var(--text-color);
    opacity: 0;
    transition: opacity 0.2s, background-color .2s;
    cursor: pointer;
}

.dataset-card:hover .btn-delete-local {
    opacity: 1;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 60px;
    border: none;
    background: #0000004d;
    color: #fff;
    font-size: 20px;
    opacity: 0;
    transition: all .2s;
    cursor: pointer;
}

.dataset-preview:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background: #0009;
}

.carousel-btn.prev {
    left: 0;
    border-radius: 0 10px 10px 0;
    color: #f5f5f5;
}

.carousel-btn.next {
    right: 0;
    border-radius: 10px 0 0 10px;
    color: #f5f5f5;
}

.carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff6;
    transition: all .2s;
}

.dot.active {
    background: #fff;
    transform: scale(1.2);
}


#backToMainFromVisualBtn {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 35px;
    border: none;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

#backToMainFromVisualBtn:hover {
    color: var(--accent-color);
    box-shadow: var(--neumorph-shadow-inset);
    transform: scale(1.05);
}

#visualSearchInput {
    flex-grow: 1;
    padding: 12px 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: 1em;
    box-shadow: inset 2px 2px 5px var(--shadow-light-color);
    transition: all .2s ease;
    outline: none;
}

#visualSearchInput:focus {
    background-color: var(--input-hover-bg-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
    border-color: var(--accent-color);
}

#visualSearchInput::placeholder {
    color: var(--secondary-text-color);
    opacity: .7;
}

@media (max-width: 600px) {
    .visual-library-header {
        gap: 10px;
    }

    #visualSearchInput {
        padding: 10px 15px;
        font-size: 16px;
    }

    #backToMainFromVisualBtn {
        width: 80px;
        height: 35px;
    }
}

.visual-quiz-viewport {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50vh;
    min-height: 300px;
    max-height: 500px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background-color: #1a1a1a;
    cursor: grab;
    touch-action: none;
}

.visual-quiz-viewport:active {
    cursor: grabbing;
}

.panzoom-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}

.visual-layer-stack {
    position: relative;
    display: inline-block;
}

.visual-layer-stack img {
    display: block;
    max-width: none;
    max-height: none;
    pointer-events: none;
    user-select: none;
    image-rendering: -webkit-optimize-contrast;
}

.visual-svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
}

.target-polygon {
    transition: all .3s ease;
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.target-polygon.found {
    animation: poly-pulse 2s infinite;
    fill: #2ecc714d;
    stroke: #2ecc71;
}

.target-polygon.missed {
    fill: #e74c3c1a;
    stroke: #e74c3c;
    stroke-dasharray: 4 2;
}

.click-marker {
    position: absolute;
    z-index: 20;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px #00000080;
    transform: translate(0%, 0%);
    transition: opacity .5s;
    pointer-events: none;
}

.click-marker.hot {
    background-color: #f1c40f;
}

.click-marker.cold {
    background-color: #3498db;
}

.click-marker.hit {
    background-color: #2ecc71;
}

@keyframes poly-pulse {
    0% {
        fill-opacity: .3;
    }

    50% {
        fill-opacity: .6;
    }

    100% {
        fill-opacity: .3;
    }
}

.visual-controls {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.visual-controls button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ffffff4d;
    border-radius: 50%;
    color: var(--button-secondary-text);
    background-color: color-mix(in srgb, var(--container-bg-color) 30%, transparent);
    -webkit-backdrop-filter: blur(3px) saturate(180%);
    backdrop-filter: blur(3px) saturate(180%);
}


.creator-list li {
    border-bottom: 1px solid var(--border-color);
}

.creator-list li:hover {
    background-color: var(--message-bg-other);
}

.creator-list li.active {
    background-color: var(--primary-light);
    color: var(--primary);
}

.creator-img-thumb {
    margin-right: 10px;
}

.delete-item-btn {
    border: none;
    background: none;
    color: var(--feedback-incorrect-text);
    cursor: pointer;
}


#questionContainer.visual-mode #answerOptions {
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
    order: 1;
}

#questionContainer.visual-mode .visual-quiz-viewport {
    margin-bottom: 15px;
    order: 2;
}

#questionContainer.visual-mode #feedbackArea {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    order: 3;
}

#questionContainer.visual-mode #questionText {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--input-bg-color);
    box-shadow: inset 0 2px 5px #0000000d;
    order: 4;
}

#questionContainer:not(.visual-mode) #questionText {
    /* padding: 25px; */
    border: none;
    background: transparent;
    box-shadow: var(--neumorph-shadow-inset);
    order: 0;
}


#questionContainer:not(.visual-mode) #answerOptions {
    text-align: left;
    order: 0;
}

#questionContainer:not(.visual-mode) #feedbackArea {
    order: 0;
}

#visualCreatorModal .modal-content {
    display: flex;
    flex-direction: column;
    width: 95vw;
    max-width: 1200px;
    height: 90vh;
    max-height: 90vh;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--bg-color);
}

#visualCreatorModal h3 {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 10px 15px;
    background-color: var(--container-bg-color);
    color: var(--heading-color);
    font-size: 1em;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    transition: background-color .2s;
    cursor: pointer;
}

.btn-icon:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

.creator-toolbar {
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    padding: 2px 5px;
    overflow-x: auto;
    background-color: var(--container-bg-color);
    border-bottom: 1px solid var(--border-color);
}

.creator-toolbar .btn,
.creator-toolbar .btn-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 6px 10px;
    font-size: .85em;
    white-space: nowrap;
}

.creator-toolbar i {
    width: 16px;
    height: 16px;
}

.creator-toolbar button {
    padding: 8px 12px;
    font-size: .9em;
    white-space: nowrap;
}

.creator-toolbar .btn-secondary {
    border-color: var(--border-color);
}

.creator-toolbar .btn-secondary:hover {
    background-color: var(--input-hover-bg-color);
}

.creator-workspace {
    position: relative;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    background-color: var(--input-bg-color);
}

.creator-sidebar {
    z-index: 2;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    width: 240px;
    background-color: var(--container-bg-color);
    border-right: 1px solid var(--border-color);
}

.creator-sidebar-header {
    padding: 10px;
    color: var(--secondary-text-color);
    font-size: .85em;
    font-weight: 600;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
}

.creator-list {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.creator-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px;
    transition: background-color .2s;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.creator-list li:hover {
    background-color: var(--input-hover-bg-color);
}

.creator-list li.active {
    padding-left: 6px;
    background-color: var(--input-hover-bg-color);
    border-left: 4px solid var(--accent);
}

.creator-item-content {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.creator-img-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg-color);
    object-fit: cover;
}

.creator-item-name {
    max-width: 120px;
    overflow: hidden;
    color: var(--text-color);
    font-size: .9em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    border-radius: 4px;
    opacity: .6;
    transition: all .2s;
}

.delete-item-btn:hover {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    opacity: 1;
}

.creator-canvas-area {
    position: relative;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #e5e5e5;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
}

body.dark-mode .creator-canvas-area {
    background-color: #2b2b2b;
    background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(-45deg, #333 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(-45deg, transparent 75%, #333 75%);
}

#canvasWrapper {
    position: relative;
    display: flex;
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 10px 40px #0000004d;
}

#creatorMainImage {
    display: block;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
    user-select: none;
    object-fit: contain;
}

#creatorCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

#creatorPlaceholder {
    position: absolute;
    padding: 15px 25px;
    border-radius: 12px;
    color: var(--secondary-text-color);
    font-size: 1.2em;
    pointer-events: none;
}

.creator-annotations {
    z-index: 2;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    width: 280px;
    background-color: var(--container-bg-color);
    border-left: 1px solid var(--border-color);
}

.annotations-header {
    padding: 12px 15px;
    background-color: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .9em;
    font-weight: 600;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
}

#creatorAnnotationList {
    flex-grow: 1;
    overflow-y: auto;
}

#creatorAnnotationList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    color: var(--text-color);
    font-size: .95em;
    border-bottom: 1px solid var(--dashed-border-color);
}

#creatorAnnotationList li:hover {
    background-color: var(--input-hover-bg-color);
}

#creatorAnnotationList li strong {
    margin-right: 5px;
    color: var(--accent);
}

.annotation-editor {
    padding: 15px;
    background-color: var(--input-bg-color);
    box-shadow: 0 -4px 15px #0000000d;
    border-top: 1px solid var(--border-color);
}

.annotation-editor label {
    display: block;
    margin-bottom: 8px;
    color: var(--secondary-text-color);
    font-size: .85em;
    font-weight: 600;
}

.annotation-editor input {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--input-border-color);
    border-radius: 8px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    transition: border-color .2s;
    outline: none;
}

.annotation-editor input:focus {
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
    border-color: var(--focus-ring);
}

.annotation-editor button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background-color: var(--button-success-bg);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 5px #0000001a;
    transition: transform 0.1s, background-color .2s;
    cursor: pointer;
}

.annotation-editor button:hover {
    background-color: var(--button-success-hover-bg);
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    #visualCreatorModal {
        align-items: flex-start !important;
        padding: 0 !important;
    }

    #visualCreatorModal .modal-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    .creator-workspace {
        display: grid !important;
        flex-grow: 1 !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        grid-template-columns: 90px 1fr !important;
        grid-template-rows: 55% 1fr !important;
        width: 100% !important;
        overflow: hidden !important;
        background-color: var(--bg-color);
    }

    .creator-canvas-area {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #1e1e1e;
        border-bottom: 1px solid var(--border-color);
        grid-column: 1 / -1 !important;
        grid-row: 1 / 2 !important;
    }

    .creator-sidebar {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background-color: var(--input-bg-color);
        border-right: 1px solid var(--border-color) !important;
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
    }

    .creator-sidebar-header {
        display: none !important;
    }

    .creator-list {
        height: 100% !important;
        padding-bottom: 20px !important;
        overflow-y: auto !important;
    }

    .creator-list li {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 4px !important;
        text-align: center !important;
    }

    .creator-item-content {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .creator-img-thumb {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }

    .creator-item-name {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        color: var(--secondary-text-color) !important;
        font-size: 9px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .creator-list .delete-item-btn {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 2px !important;
        padding: 4px !important;
        border-radius: 4px !important;
        background-color: #ff00000d !important;
        opacity: .6 !important;
    }

    .creator-list .delete-item-btn i {
        width: 14px !important;
        height: 14px !important;
    }

    .creator-annotations {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background-color: var(--container-bg-color);
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
    }

    .annotations-header {
        display: none !important;
    }

    #creatorAnnotationList {
        flex-grow: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    #creatorAnnotationList li {
        padding: 8px 10px !important;
        font-size: .9em;
    }

    .annotation-editor {
        z-index: 5;
        flex-shrink: 0 !important;
        padding: 8px !important;
        background-color: var(--input-bg-color);
        border-top: 1px solid var(--border-color);
    }

    .annotation-editor input {
        margin-bottom: 5px !important;
        font-size: 16px !important;
    }

    .creator-toolbar {
        flex-shrink: 0;
        overflow-x: auto;
    }

    .creator-toolbar .btn-text {
        display: none;
    }

    #creatorExportBtn .btn-text {
        display: inline;
    }
}

.creator-zoom-controls {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.creator-zoom-btn {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 2px 8px #0003;
    transition: all .2s;
    cursor: pointer;
}

.creator-zoom-btn:hover {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

.creator-canvas-area.panning {
    cursor: grab !important;
}

.creator-canvas-area.panning:active {
    cursor: grabbing !important;
}

.creator-canvas-area,
#creatorCanvas {
    cursor: crosshair;
    touch-action: none !important;
}

.creator-canvas-area.panning-mode,
.creator-canvas-area.panning-mode #creatorCanvas {
    cursor: grab;
}

.creator-canvas-area.panning-mode:active {
    cursor: grabbing;
}

.creator-zoom-btn.active {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.creator-zoom-btn i,
.creator-zoom-btn svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none;
}

.radio-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.radio-option {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-color);
    transition: all .2s ease;
    cursor: pointer;
}

.radio-option:hover {
    background-color: var(--bg-secondary);
    border-color: var(--secondary-text-color);
}

.radio-option:has(input:checked),
.radio-option.selected {
    background-color: rgba(var(--primary-rgb), 0.05);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary);
}

.radio-option input[type="radio"] {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 15px;
    border: 2px solid var(--secondary-text-color);
    border-radius: 50%;
    transition: all .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.radio-option input[type="radio"]:checked {
    background-color: var(--primary);
    box-shadow: inset 0 0 0 4px var(--bg-color);
    border-color: var(--primary);
}

.radio-content {
    display: flex;
    flex-direction: column;
}

.radio-title {
    margin-bottom: 2px;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 600;
}

.radio-desc {
    color: var(--secondary-text-color);
    font-size: .85rem;
}

.export-size-preview {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    text-align: center;
}

.export-size-label {
    color: var(--secondary-text-color);
    font-size: .9em;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

#exportSizeEstimate {
    color: var(--primary);
    font-size: 1.4em;
    font-weight: 700;
}

.battle-arena {
    position: relative;
    width: 100%;
    margin-top: 15px;
    padding: 15px 0;
    background: transparent;
    border-bottom: none;
    border-top: 1px solid var(--border-color);
}

.battle-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.fighter {
    position: relative;
    flex: 1;
}

.fighter-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fighter-name {
    color: var(--text-color);
    font-size: 1em;
    font-weight: 700;
}

.fighter-remote .fighter-name {
    text-align: right;
}

.hp-bar-container {
    position: relative;
    height: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--input-bg-color);
    box-shadow: inset 0 1px 3px #0000001a;
}

.hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    transition: width .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-bar-fill.critical {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    animation: pulse-hp .5s infinite alternate;
}

.hp-text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-shadow: 0 0 3px #000000b3;
}

.battle-vs {
    color: var(--secondary-text-color);
    font-size: 1.5em;
    font-weight: 900;
    opacity: .3;
    font-style: italic;
}

.battle-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #000000d9;
    animation: fadeIn .3s;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.icon-btn-danger {
    color: var(--accent) !important;
}

.icon-btn-danger:hover {
    background-color: var(--feedback-incorrect-bg) !important;
}

.damage-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    color: #e74c3c;
    font-size: 2em;
    font-weight: 700;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-shadow: 0 2px 0 #fff, 0 0 5px #00000080;
}

.damage-indicator.hit {
    animation: floatUp .8s ease-out forwards;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }

    20% {
        transform: translate(-50%, -80%) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(1);
    }
}

@keyframes pulse-hp {
    from {
        opacity: 1;
    }

    to {
        opacity: .6;
    }
}

.shake-screen {
    animation: shake .4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-2px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(4px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-6px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(6px, 0, 0);
    }
}

#battleResultTitle {
    margin-bottom: 20px;
    color: #f1c40f;
    font-size: 2.5em;
    letter-spacing: 2px;
    text-shadow: 0 4px 10px #00000080;
    text-transform: uppercase;
}

 
/* ГЛАВНЫЙ ФИКС: Убираем жесткие width: 0 и opacity: 0, которые "сплющивали" кнопку */
.translate-engine-container.hidden {
    display: none !important;
}

.header-buttons .translate-engine-container {
    display: none;
}

body.quiz-active .header-buttons .translate-engine-container:not(.hidden) {
    display: inline-flex;
}

.flashcard-pdf-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 100%;
}

.flashcard-image-container {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #0000;
}

.flashcard-pdf-img {
    width: auto;
    max-width: 80%;
    height: auto;
    max-height: 80%;
    border-radius: 4px;
    transition: transform .2s;
    cursor: zoom-in;
    object-fit: contain;
}

.flashcard-pdf-img:hover {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .flashcard-image-container {
        height: auto;
    }

    .flashcard-pdf-img {
        max-height: 40vh;
    }
}

.flashcard-question-text {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    color: var(--text-color);
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

body.dark-mode .flashcard-pdf-img {
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px #0000004d;
}

.main-actions-grid {
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    gap: 15px;
    grid-auto-rows: 1fr;
    padding: 15px 15px 20px 15px;
}


#toolsArea button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 40px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-secondary);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-soft) !important;
    box-shadow: 0 4px 6px #0000000d;
    transition: transform 0.2s, box-shadow .2s;
    cursor: pointer;
}

#toolsArea button:hover {
    box-shadow: 0 8px 15px #0000001a;
    transform: translateY(-2px);
    border-color: var(--accent);
}

#toolsArea button i {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    color: var(--accent);
}

.main-action-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.main-action-text-wrapper span:first-child {
    margin-bottom: 4px;
    font-size: 1.1em;
}

.gradus-subtitle {
    color: var(--secondary-text-color);
    font-size: .82em;
    font-weight: 400;
    opacity: .8;
}

.canvas-item-placeholder {
    padding: 30px;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    background: #00000005;
    color: var(--secondary-text-color);
    text-align: center;
}

#certGeneratorArea .settings-group {
    max-width: 450px;
    margin: 40px auto;
    padding: 40px !important;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    text-align: left;
    box-shadow: 0 10px 30px #00000014;
}

#certGeneratorArea .settings-group div[style*="text-align: center"] {
    margin-bottom: 30px !important;
}

#certGeneratorArea .settings-group i[data-lucide="award"] {
    color: #e74c3c;
    filter: drop-shadow(0 4px 6px #e74c3c4d);
}

#certGeneratorArea .settings-group p {
    margin-top: 10px;
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: 500;
}


#certGeneratorArea p[style*="font-size: 0.85em"] {
    margin-top: 20px;
    line-height: 1.4;
    opacity: .6;
}

.courses-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px;
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
    justify-items: start;
}

.courses-header h2 {
    margin: 0;
    overflow: hidden;
    font-size: 1.5em;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.courses-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .courses-header {
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 5px 5px;
        grid-template-areas: "title back""actions actions";
    }

    .courses-header h2 {
        font-size: 1.3em;
        grid-area: title;
    }

    .courses-header-actions {
        justify-content: space-between;
        width: 100%;
        grid-area: actions;
    }

    #saveInterceptorToCourseBtn,
    #saveInterceptorToFavBtn {
        flex-grow: 1;
        justify-content: center;
        max-width: 48%;
        margin: 0 !important;
        padding: 8px 4px !important;
        font-size: .85em !important;
    }

    #backToToolsFromInterceptorBtn {
        position: absolute;
        top: 0;
        right: 0;
    }

    .courses-header {
        position: relative;
    }
}

.interceptor-player-container {
    position: relative !important;
    width: 100%;
    margin-top: 20px;
    /* border: 5px solid red !important; */
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
}

.interceptor-overlay {
    /* position: absolute !important; */
    /* top: 0 !important; */
    /* right: 0 !important; */
    /* bottom: 0 !important; */
    /* left: 0 !important; */
    z-index: 2147483647 !important;
    display: flex !important;
    /* align-items: center !important; */
    width: 100% !important;
    /* height: 100% !important; */
    /* border: 5px solid blue !important; */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}


.interceptor-overlay.hidden {
    display: none !important;
}

.interceptor-question-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 90%;
    max-width: 500px;
    padding: 30px !important;
    border-radius: 24px !important;
    background: #fff !important;
    color: #333 !important;
    box-shadow: 0 20px 60px #00000080 !important;
}

.interceptor-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    color: var(--secondary-text-color, #888) !important;
    font-size: .8em !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid var(--border-color, #eee) !important;
    text-transform: uppercase !important;
}

.interceptor-question-text {
    margin-bottom: 20px !important;
    color: #000 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.interceptor-answers {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.interceptor-btn {
    position: relative !important;
    width: 100% !important;
    padding: 16px 20px 16px 54px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: 0 2px 5px #0000000d !important;
    transition: all .2s ease !important;
    cursor: pointer !important;
}

.interceptor-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 18px !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #ccc !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    transform: translateY(-50%) !important;
    transition: all .2s ease !important;
}

.interceptor-btn:hover {
    background: #f8f9fa !important;
    border-color: #bbb !important;
}

.interceptor-btn:hover::before {
    border-color: #666 !important;
}

.interceptor-btn.correct {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #10b981 !important;
}

.interceptor-btn.correct::before {
    background-color: #10b981 !important;
    box-shadow: inset 0 0 0 4px #fff !important;
    border-color: #10b981 !important;
}

.interceptor-btn.wrong {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #ef4444 !important;
}

.interceptor-btn.wrong::before {
    border-color: #ef4444 !important;
}

.interceptor-feedback {
    margin-top: 10px !important;
    margin-top: 15px;
    padding: 15px !important;
    padding: 12px;
    border-radius: 12px !important;
    border-radius: 8px;
    background: #f3f4f6 !important;
    color: #333 !important;
    font-size: .95em !important;
    text-align: center;
    line-height: 1.5;
    animation: fadeIn .3s ease;
}

.interceptor-feedback button:hover {
    opacity: .9;
    transform: scale(1.02);
}

.interceptor-feedback strong {
    font-size: 1.1em;
}

#interceptorSetup {
    max-width: 650px !important;
    margin: 20px auto !important;
    padding: 30px !important;
    border: 1px solid var(--border-color, #e0e0e0) !important;
    border-radius: 24px !important;
    background-color: var(--container-bg-color, #fff) !important;
    box-shadow: 0 10px 40px #0000001a !important;
}

#interceptorSetup .settings-group {
    margin-bottom: 25px !important;
    padding-bottom: 10px !important;
    border-bottom: none !important;
}

#interceptorSetup label {
    display: block !important;
    margin-bottom: 10px !important;
    color: var(--text-color) !important;
    font-size: 1em !important;
    font-weight: 700 !important;
}

#interceptorVideoUrl,
#interceptorFrequency {
    width: 100% !important;
    height: auto !important;
    padding: 14px 16px !important;
    border: 2px solid var(--border-color, #ddd) !important;
    border-radius: 12px !important;
    background-color: var(--input-bg-color, #f9f9f9) !important;
    color: var(--text-color) !important;
    font-size: 1em !important;
    transition: border-color .2s !important;
    outline: none !important;
}

#interceptorVideoUrl:focus,
#interceptorFrequency:focus {
    background-color: var(--container-bg-color) !important;
    border-color: var(--focus-ring) !important;
}

#interceptorManualSteps {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
    border: 1px dashed var(--border-color, #ccc) !important;
    border-radius: 16px !important;
    background-color: var(--message-bg-other, #f3f4f6) !important;
}

#interceptorDownloadLink {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: #333 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px #0000000d !important;
}

label[for="interceptorSrtInput"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 5px !important;
    padding: 12px !important;
    border: none !important;
    border-radius: 10px !important;
    background-color: #4b5563 !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px #00000026 !important;
    cursor: pointer !important;
}

label[for="interceptorSrtInput"]:hover {
    background-color: #374151 !important;
    transform: translateY(-2px);
}

#interceptorFileName {
    min-height: 1.2em;
    margin-top: 8px;
    font-size: .9em;
    text-align: center;
}

#startInterceptorBtn {
    width: 100% !important;
    padding: 16px !important;
    border: none !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    box-shadow: 0 5px 20px #dc262666 !important;
    text-transform: uppercase !important;
}

#startInterceptorBtn:hover {
    box-shadow: 0 8px 25px #dc262680 !important;
    transform: translateY(-2px);
}

#interceptorManualSteps p {
    margin-bottom: 15px !important;
    color: var(--text-color) !important;
    font-size: .9em !important;
    text-align: center;
    opacity: .8;
}

.message.chained {
    margin-top: 2px !important;
}

.message.chained .author {
    display: none !important;
}

.message.chained.other .message-avatar {
    visibility: hidden;
}

.message.chained.mine .message-avatar {
    display: none !important;
}
/* === ИСПРАВЛЕНИЕ: Оставляем время и галочки видимыми === */
.message.chained .timestamp {
    display: flex !important;
    margin-top: -2px; /* Убираем лишний отступ, так как имени автора нет */
}

.message.chained .message-content {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.message:not(.chained)+.message.chained:last-child .message-content {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* ======================================================= */
/* ФИКС: РАЗДЕЛИТЕЛИ ДАТ (БЕЗ НАЛОЖЕНИЯ ТЕКСТА)            */
/* ======================================================= */
.date-divider {
    position: sticky;
    top: -2.8%;
    z-index: 90; /* Поднимаем выше обычных сообщений */
    display: flex;
    justify-content: center;
    margin: 16px 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* Telegram-style: когда несколько разделителей одновременно "прилипают" к верху,
   показываем только последний (актуальный для текущей секции). Класс ставит JS. */
.date-divider.is-passed {
    opacity: 0;
}


.date-divider span {
    padding: 6px 10px;
    border-radius: 16px;
    /* Делаем фон НЕПРОЗРАЧНЫМ в цвет контейнера, чтобы даты перекрывали друг друга */
    background-color: var(--container-bg-color);
    color: var(--secondary-text-color);
    font-size: 0.85em;
    font-weight: 700;
    /* Добавляем легкую тень и рамку, чтобы плашка выделялась на фоне сообщений */
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--border-color);
    text-shadow: none;
    -webkit-backdrop-filter: none; /* Блюр больше не нужен, фон плотный */
    backdrop-filter: none; /* Блюр больше не нужен, фон плотный */
}

/* Адаптация под темные темы */
body.dark-mode .date-divider span,
body.synthwave-mode .date-divider span,
body.oled-mode .date-divider span {
    background-color: var(--input-bg-color); /* Чуть темнее основного фона */
    color: var(--text-color);
    box-shadow: 0 7px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.message.pending {
    opacity: .7;
}

.message.file-share-bubble,
.message.folder-share-bubble {
    display: block !important;
    width: fit-content;
    max-width: min(95%, 520px);
    margin-bottom: 6px;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.file-share-content {
    border: 1px solid var(--border-color);
    background-color: var(--message-bg, #fff);
    transition: transform 0.2s, box-shadow .2s;
}

body.dark-mode .file-share-content {
    background-color: var(--message-bg-other);
    border-color: var(--border-color);
}

.file-share-content:hover {
    box-shadow: 0 4px 12px #0000001a;
    transform: translateY(-2px);
}

.file-share-icon {
    flex-shrink: 0;
    color: #007bff;
}


.file-share-name {
    font-size: .95em;
}

.file-share-info {
    margin-top: 2px;
    color: var(--secondary-text-color);
}

.file-share-arrow {
    color: var(--secondary-text-color);
}

.message.file-share-bubble .message-main-content,
.message.folder-share-bubble .message-main-content {
    display: block !important;
    width: auto;
}

.message.chained.file-share-bubble .message-content,
.message.chained.file-share-bubble .file-share-content {
    display: flex !important;
    margin-top: 5px !important;
    border-radius: 12px !important;
}

.msg-status {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--secondary-text-color);
    vertical-align: middle;
}

.msg-status.sent {
    color: #888;
}

.msg-status.read {
    color: #3b82f6;
}

.message .timestamp {
    display: flex;
    align-items: center;
    gap: 2px;
}

.chat-input-area {
    position: relative !important;
    z-index: 20;
}


.typing-dots span {
    background-color: var(--accent) !important;
    transform-origin: bottom center !important;
}


/* === ENTERPRISE UX: Organic Liquid Dots (Morphing) === */
.typing-dots {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 12px !important;
    /* Нативный хак для слияния точек (Gooey Effect) */
    filter: contrast(20); 
    background: transparent;
}

.typing-dots span {
    display: block !important;
    width: 6px !important; 
    height: 6px !important;
    border-radius: 50% !important;
    background-color: var(--accent) !important;
    /* Размытие нужно для Gooey-эффекта вместе с контрастом родителя */
    filter: blur(0.5px); 
    animation: typingLiquid 1.4s cubic-bezier(0.45, 0, 0.15, 1) infinite both !important;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s !important; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s !important; }
.typing-dots span:nth-child(3) { animation-delay: 0s !important; }

@keyframes typingLiquid {
    0%, 100% {
        transform: translateY(0) scaleX(1) scaleY(1);
        opacity: 0.5;
    }
    30% {
        /* Точка вытягивается вверх (капля) */
        transform: translateY(-5px) scaleX(0.8) scaleY(1.3);
        opacity: 1;
    }
    50% {
        /* Точка сплющивается при ударе о землю */
        transform: translateY(1px) scaleX(1.3) scaleY(0.8);
        opacity: 0.8;
    }
}


#flagQuestionBtn.active {
    color: #e74c3c;
    fill: #e74c3c1a;
}

#flagQuestionBtn.active svg {
    fill: currentColor;
}

.quick-nav-btn {
    border: 1px solid var(--button-secondary-border);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.quick-nav-btn .nav-flag-indicator {
    border: 2px solid var(--container-bg-color);
    font-size: 9px;
}

@keyframes popInFlag {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.quick-nav-btn .nav-flag-indicator {
    animation: popInFlag .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quick-nav-btn {
    position: relative !important;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--button-secondary-border);
    border-radius: 6px;
    overflow: visible !important;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-size: .9em;
    font-weight: 500;
    transition: all .2s;
    cursor: pointer;
}

@media (max-width: 768px) {
    .quick-nav-btn {
        width: 30px;
        height: 30px;
        font-size: .8em;
    }
}

.quick-nav-btn .nav-flag-indicator {
    border: 2px solid var(--container-bg-color, #fff);
}


@keyframes popInFlag {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.quick-nav-btn .nav-flag-indicator {
    position: absolute !important;
    top: -5px;
    right: -5px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px;
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
    background-color: #e74c3c;
    color: #fff;
    box-shadow: 0 2px 4px #0003;
    pointer-events: none;
}

.quick-nav-btn .nav-flag-indicator svg {
    width: 8px;
    height: 8px;
    stroke-width: 3;
}

.library-deck-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 330px;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background-color: var(--container-bg-color) !important;
}

.library-deck-card .deck-card-body {
    display: flex !important;
    flex-grow: 1 !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 15px !important;
}

.library-deck-card .lib-deck-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 50px !important;
    margin-top: auto !important;
    padding-top: 15px !important;
    border-top: 1px solid var(--border-color) !important;
}

.library-deck-card .btn-import-deck {
    display: flex !important;
    flex-grow: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    background-color: var(--button-secondary-bg) !important;
    color: var(--button-secondary-text) !important;
    font-size: .95em !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    transform: none !important;
    cursor: pointer !important;
    visibility: visible !important;
}

.library-deck-card .btn-import-deck:hover {
    background-color: var(--button-success-bg) !important;
    color: #fff !important;
    border-color: transparent !important;
}


.library-deck-card .btn-import-deck svg,
.library-deck-card .btn-import-deck i,
.library-deck-card .btn-deck-delete svg,
.library-deck-card .btn-deck-delete i {
    display: block !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.library-deck-card .btn-import-deck i,
.library-deck-card .btn-import-deck svg {
    margin-right: 8px !important;
}


/* PREMIUM UX: CSS Grid Transition (Hardware Accelerated Accordion) */

/* Обертка для Grid-ребенка, чтобы скрывать overflow */


.container.wide-container {
    max-width: 1400px !important;
    padding: 20px !important;
}

.fitness-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    padding-bottom: 60px;
}

.fitness-sidebar {
    position: sticky !important;
    top: 70px !important;
    display: flex !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    width: 50px !important;
    min-width: 300px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: var(--bg-secondary) !important;
}

.sticky-map {
    position: sticky;
    top: 20px;
    z-index: 10;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.anatomy-wrapper {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    box-shadow: 0 10px 30px #0000000d;
}

.anatomy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: 700;
}

.fitness-content {
    flex-grow: 1;
    width: 100%;
}


.fitness-search-wrapper {
    flex-grow: 1;
    max-width: 400px;
}

.fitness-search-wrapper input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg-color);
    font-size: .95em;
}

.fitness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.exercise-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-secondary);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.2s ease;
    /* ОПТИМИЗАЦИЯ VRAM: Удален постоянный will-change, заменен на легкий 3D-слой */
    transform: translateZ(0);
    /* PREMIUM UX: Каскадное появление (Staggered Reveal) */
    animation: cardCascade 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

.exercise-card:hover {
    will-change: transform, box-shadow;
}

/* Раскидываем задержку для эффекта веера (до 10 элементов на экране) */
.exercise-card:nth-child(1) { animation-delay: 0.05s; }
.exercise-card:nth-child(2) { animation-delay: 0.10s; }
.exercise-card:nth-child(3) { animation-delay: 0.15s; }
.exercise-card:nth-child(4) { animation-delay: 0.20s; }
.exercise-card:nth-child(5) { animation-delay: 0.25s; }
.exercise-card:nth-child(n+6) { animation-delay: 0.30s; }

@keyframes cardCascade {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* PREMIUM UX: Эффект физического вдавливания (Squish) при клике */
.exercise-card:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s ease;
}

.exercise-card:hover {
    box-shadow: 0 12px 24px #00000014;
    transform: translateY(-4px);
    border-color: var(--accent);
}

.exercise-preview {
    position: relative;
    width: 100%;
    background: #000;
    cursor: pointer;
    aspect-ratio: 16 / 9;
}

.exercise-preview img {
    width: 100%;
    height: 100%;
    opacity: .9;
    object-fit: cover;
}

.play-overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0003;
    opacity: 0;
    transition: opacity .2s;
    inset: 0;
}

.exercise-card:hover .play-overlay {
    opacity: 1;
}

.play-icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ffffff40;
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.exercise-info {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
}

.exercise-title {
    display: -webkit-box;
    margin-bottom: 2px;
    overflow: hidden;
    color: var(--text-color);
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
    line-clamp: 2;
}

.exercise-subtitle {
    margin-bottom: 8px;
    overflow: hidden;
    color: var(--secondary-text-color);
    font-size: .8em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.muscle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
}

.muscle-badge {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: .7em;
    font-weight: 600;
}

.muscle-badge.primary {
    border: 1px solid #e74c3c33;
    background: #e74c3c1a;
    color: #c0392b;
}

.muscle-badge.secondary {
    border: none;
    background: #00000014;
    color: var(--text-color);
}

body.dark-mode .muscle-badge.secondary {
    background: #ffffff26;
    color: #eee;
}

.muscle-svg.force-show-zones .muscle-zone {
    opacity: 1 !important;
    pointer-events: auto !important;
    fill: #3498db80 !important;
    stroke: #3498db !important;
    stroke-width: 2px !important;
    visibility: visible !important;
}

@media (max-width: 900px) {
    .fitness-layout {
        flex-direction: column;
        gap: 10px; /* Слегка уменьшим отступ на мобилках */
    }

    /* Оставляем тут только центрирование, остальное мы перенесли в глобальный фикс выше */
    .fitness-sidebar {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sticky-map {
        width: 100%;
        max-width: 380px; /* Сделали чуть крупнее для удобства на планшете */
    }

    
    .fitness-search-wrapper {
        max-width: 100%;
    }

    .fitness-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px;
    }

    .exercise-info {
        padding: 10px;
    }

    .exercise-title {
        font-size: .9em;
    }

    .exercise-subtitle {
        font-size: .75em;
    }

    .muscle-badge {
        padding: 2px 6px;
        font-size: .65em;
    }

    .play-icon-circle {
        width: 36px;
        height: 36px;
    }

    .play-overlay {
        background: #0000001a;
        opacity: 1;
    }

    }

.muscle-badge {
    transition: transform .2s ease, filter .2s ease !important;
    cursor: pointer !important;
}

.muscle-badge:hover {
    z-index: 2;
    transform: scale(1.05);
    filter: brightness(0.9);
}

@media (max-width: 900px) {
    /* БРОНЕБОЙНЫЙ ФИКС: Убиваем залипание (sticky) на планшетах и телефонах */
    .fitness-sidebar {
        position: relative !important;
        top: auto !important; /* Отменяем прилипание к верху */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border: none !important;
        overflow: visible !important;
        background: transparent !important;
        z-index: 1 !important; /* Убираем над карточками */
    }

    .anatomy-container {
        margin-bottom: 15px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 16px !important;
        background: var(--container-bg-color) !important;
    }

    .anatomy-list-view {
        height: auto !important;
        max-height: 400px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 16px !important;
    }
    
    .sticky-map {
        position: relative !important;
        top: auto !important;
        margin: 0 auto; /* Центрируем атлас на мобилке */
    }
}

@media (max-width: 600px) {
    #exerciseEditModal .modal-content {
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding-bottom: 50px !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        transform: none !important;
    }
}

@media (max-width: 900px) {
    .play-overlay {
        display: none !important;
    }
}

body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode):not(.claude-mode) .btn-mini,
body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode):not(.claude-mode) #toggleFitnessViewBtn,
body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode):not(.claude-mode) #toggleZonesBtn {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #ccc !important;
}

body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode):not(.claude-mode) .btn-mini svg,
body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode):not(.claude-mode) .btn-mini i {
    color: #000 !important;
    stroke: #000 !important;
}

body.claude-mode .btn-mini,
body.claude-mode #toggleFitnessViewBtn,
body.claude-mode #toggleZonesBtn {
    background-color: #f2ede8 !important;
    color: #3d352f !important;
    border-color: #d0c4b4 !important;
}

body.claude-mode .btn-mini svg,
body.claude-mode .btn-mini i {
    color: #3d352f !important;
    stroke: #3d352f !important;
}

body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode) .btn-mini.active,
body:not(.dark-mode):not(.synthwave-mode):not(.oled-mode) #toggleZonesBtn.active {
    background-color: #e0e0e0 !important;
    box-shadow: inset 0 2px 4px #00000026 !important;
}

.fitness-top-bar {
    justify-content: space-between;
    width: 100%;
}

.btn-back-map {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    background-color: #6c757d;
    color: #fff;
    cursor: pointer;
}

.btn-back-map:hover {
    background-color: #5a6268;
}

.btn-back-map svg {
    width: 24px;
    height: 24px;
}

.fitness-main-title {
    margin: 0;
    color: var(--text-color);
    font-size: 1.8em;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
}

.search-input-gray {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: 1em;
    transition: border-color .2s;
    outline: none;
}

.search-input-gray:focus {
    border-color: var(--focus-ring);
}

@media (max-width: 600px) {
    .fitness-main-title {
        font-size: 1.5em;
    }

    #fitnessArea {
        padding-top: 10px;
    }
}


.scroll-to-top-btn {
    position: fixed;
    bottom: 30px;
    z-index: 900;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Треугольник вершиной вверх: форма сама говорит, куда поедет
       страница. Живёт на самой кнопке, а не на её состоянии: пока маска
       стояла на «.visible», нажатие снимало этот класс — и на кадр
       исчезновения кнопка оказывалась квадратом. Углы срезаны маской, а
       не clip-path: у того они выходят иголками. */
    width: 42px;
    height: 37px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    opacity: 0 !important;
    stroke: currentColor !important;
    transform: translateY(20px);
    transition: all .3s ease;
    cursor: pointer;
    visibility: hidden !important;
    pointer-events: none !important;
}


.scroll-to-top-btn.visible {
    position: sticky;
    opacity: 1 !important;
    transform: translateY(0);
    visibility: visible !important;
    pointer-events: auto !important;
}
/* Подложки под маской у кнопки больше нет. Маска и была источником
   квадрата: при нажатии браузер пересобирал слой, и на кадр вместо
   треугольника показывался прямоугольник подложки — человек видел это
   как квадратную рябь. Убирать размытие, как в прошлый раз, помогало
   не до конца: пересборка слоя случается и без него.
   Теперь форму держит сам путь в SVG — он залит и обведён. Готовая
   фигура так сломаться не может: маски, которую нужно применить к
   прямоугольнику, попросту нет. */

/* Искры: кнопка не гаснет, а оставляет за собой шлейф. Сама она уходит
   вверх вместе со страницей, поэтому точки сыплются вниз — назад по ходу
   движения, как искры за взлетающей ракетой. Живут отдельными элементами
   поверх всего и убираются сами через полсекунды. */
.stt-искра {
    position: fixed;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--text-color, #e0e0e0);
    opacity: 0.85;
    pointer-events: none;
    z-index: 901;
    animation: stt-шлейф var(--длит, 620ms) cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes stt-шлейф {
    0% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    70% { opacity: 0.5; }
    100% {
        transform: translate(var(--дх, 0px), var(--ду, 60px)) scale(0.2);
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .stt-искра { display: none; }
}
:root {
    /* Base64, а не сырой svg в адресе: в мобильных движках data:URI с
       незакодированными кавычками и угловыми скобками молча не грузится, и
       маска не применяется — вместо треугольника на экране квадрат
       подложки, который видно при каждом нажатии */
    --треугольник: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0MiI+PHBhdGggZD0iTTE4LjkgNC4zYTYgNiAwIDAgMSAxMC4yIDBsMTYuMiAyN0E2IDYgMCAwIDEgNDAuMiA0MEg3LjhhNiA2IDAgMCAxLTUuMS04Ljd6Ii8+PC9zdmc+');
}

.scroll-to-top-btn:hover {
    transform: translateY(-3px);
}
/* === БРОНЕБОЙНЫЙ ФИКС: ИСЧЕЗНОВЕНИЕ КНОПКИ "НАВЕРХ" === */
.scroll-to-top-btn.is-clicked {
    opacity: 0 !important;
    /* Кнопка улетает вперёд — туда же, куда уезжает страница, — и тает.
       Прежде она проваливалась вниз, навстречу собственному шлейфу. */
    transform: translateY(-52px) scale(0.55) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    /* Разгон, а не упругость: взлёт, у которого нет обратного хода */
    transition: all 0.34s cubic-bezier(0.4, 0, 1, 1) !important;
}

/* Защита от системной обводки фокуса на мобильных */
.scroll-to-top-btn:focus,
.scroll-to-top-btn:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
/* Ни стрелки, ни значка: рисунок занимает всю кнопку — это и есть её
   форма, вместе с заливкой и гранью. */
.scroll-to-top-btn svg,
.stt-грань {
    width: 100%;
    height: 100%;
}
.stt-грань {
    position: relative;
    z-index: 1;
    /* Тень по форме, а не по прямоугольнику кнопки */
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.38));
}
.stt-грань path {
    /* Та же плотность, что была у подложки: сквозь кнопку виден фон */
    fill: color-mix(in srgb, var(--container-bg-color) 82%, transparent);
    stroke: currentColor;
    stroke-width: 1.5;
    /* Приглушаем обводку, а не всю фигуру: общий opacity гасил бы и
       заливку, и кнопка становилась прозрачнее задуманного */
    stroke-opacity: 0.8;
    vector-effect: non-scaling-stroke;
}

@media (max-width: 600px) {
    .scroll-to-top-btn {
        bottom: 20px;
        /* Пропорции треугольника: квадрат тут растянул бы маску и срезал
           вершину. На телефоне чуть крупнее, но не настолько, чтобы
           закрывать собой плитки под ней */
        width: 46px;
        height: 40px;
    }
}

.muscle-selector-grid-grouped {
    max-height: 250px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow-y: auto;
    background: var(--bg-secondary);
}

.catalog-group {
    margin-bottom: 15px;
}

.catalog-group-title {
    margin-bottom: 8px;
    padding-bottom: 4px;
    color: var(--secondary-text-color);
    font-size: .85em;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
}

.catalog-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.catalog-group-items .muscle-checkbox-label {
    padding: 3px 8px;
    font-size: .8em;
}

#exerciseEditModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

.muscle-selector-grid,
.muscle-selector-grid-grouped {
    min-height: 60px;
    max-height: 150px !important;
    overflow-y: auto;
    resize: vertical;
}

#exerciseEditModal .modal-buttons {
    margin-top: 20px;
    padding-bottom: 10px;
}


.fitness-tabs-switch {
    position: relative;
    gap: 0;
    margin: 1px 25px 1px 25px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    box-shadow: inset 0 2px 4px #0000000d;
}

.fit-tab-btn {
    position: relative;
    color: var(--secondary-text-color);
    text-align: center;
}

.fit-tab-btn.active {
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: 0 2px 8px #0000001a 0 0 0 1px var(--border-color);
}

.fitness-section-title {
    margin-bottom: 20px;
    color: var(--text-color);
    font-size: 1.5em;
    font-weight: 800;
    text-align: center;
}


.config-section-header {
    color: var(--secondary-text-color);
}


.config-item {
    position: relative;
    overflow: hidden;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.config-item:hover {
    border-color: var(--accent);
}

.config-item:active {
    background-color: var(--input-bg-color);
}

.config-label {
    color: var(--text-color);
}

.config-value {
    color: var(--accent);
}

.config-item:hover .config-value {
    background: var(--accent);
}

.config-item::after {
    color: var(--secondary-text-color);
}

.config-item:hover::after {
    color: var(--text-color);
}


.program-card {
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-secondary), var(--input-bg-color));
}

.program-card:hover {
    border-color: var(--accent);
}


@media (max-width: 600px) {
    

    

    

    

    .btn-start-training {
        padding: 16px;
    }

    
}

.config-section-header {
    color: var(--secondary-text-color);
}

.fit-option-item {
    padding: 12px 15px;
    transition: background .2s;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}


.fit-option-title {
    margin-bottom: 4px;
}

.fit-option-desc {
    color: var(--secondary-text-color);
    line-height: 1.4;
}

.workout-player-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
}

.workout-player-overlay.hidden {
    display: none;
}

.wp-header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;   /* строка прогресса уходит под название и кнопки */
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to bottom, #000c, transparent);
}

.wp-info {
    /* Базис 0, а не auto: с переносом в шапке длинное название распирало строку
       и выталкивало кнопки на вторую строку, к левому краю. С нулевым базисом
       колонка сжимается, и кнопки остаются справа от названия. */
    flex: 1 1 0;
    min-width: 0;
    padding-right: 10px;
    pointer-events: auto;
    text-shadow: 0 2px 4px #000c;
}

.wp-now-playing {
    margin-bottom: 5px;
    font-size: 2em;
    font-weight: 700;
}

.wp-next-up {
    font-size: 1em;
    font-weight: 500;
    opacity: .8;
}

.wp-close-btn {
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(5px);
}

.wp-stage {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.wp-media {
    width: 100%;
    height: 100%;
    /* Только contain. Пробовал cover, чтобы убрать чёрные поля, — и срезал
       тренера: ролики сняты горизонтально и кадрированы не под вертикальный
       экран, человек в кадре не по центру. Лучше поля, чем обрезанный тренер. */
    object-fit: contain;
}


.wp-strip-container {
    flex-shrink: 0;
    height: 140px;
    overflow: hidden;
    background: #000c;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid #ffffff1a;
}

.wp-strip {
    display: flex;
    gap: 5px;
    height: 100%;
    padding: 5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.wp-strip::-webkit-scrollbar {
    display: none;
}

.wp-thumbnail {
    /* Было: кадр во всю плитку, подпись поверх него, и opacity: .5 на всю
       плитку разом. Кадры у всех упражнений — одна и та же тёмная комната, так
       что подпись ложилась на чёрное, а полупрозрачность гасила заодно и её.
       Теперь кадр сверху, подпись отдельной строкой под ним на своей подложке:
       читается независимо от того, что попало в кадр. */
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 108px;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff14;
    transition: border-color .25s ease, background .25s ease;
    cursor: pointer;
}

.wp-thumbnail img {
    flex-shrink: 0;
    width: 100%;
    height: 44px;
    /* Приглушаем только кадр — подпись остаётся в полную силу. */
    opacity: .6;
    object-fit: cover;
    transition: opacity .25s ease;
}

.wp-thumbnail-label {
    /* Не поверх кадра, а под ним: своя строка, свой фон, две строки текста. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1 1 auto;
    width: 100%;
    padding: 4px 6px;
    overflow: hidden;
    color: #c8ccd2;
    font-size: .66em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.wp-thumbnail.active {
    /* transform: scale(1.05) дёргал соседей при каждой смене упражнения.
       Достаточно рамки и яркой подписи. */
    z-index: 2;
    background: #3498db26;
    border-color: #3498db;
}

.wp-thumbnail.active img {
    opacity: 1;
}

.wp-thumbnail.active .wp-thumbnail-label {
    color: #fff;
    font-weight: 700;
}

.wp-thumbnail.played img {
    opacity: .3;
    filter: grayscale(100%);
}

.wp-thumbnail.played .wp-thumbnail-label {
    color: #8a9099;
}

.wp-stage {
    position: relative;
    cursor: pointer;
}

.wp-controls-overlay {
    position: absolute;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    inset: 0;
}

.wp-play-pause-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #00000080;
    color: #fff;
    transition: transform .2s;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.wp-play-pause-icon svg {
    width: 40px;
    height: 40px;
    fill: #fff;
}

.wp-nav-btn {
    /* Было: полоса в 15-20% ширины во всю высоту экрана. Полупрозрачная плита
       поперёк видео выглядела как поломка, а не как кнопка. Теперь — кружок по
       центру края, как в любом просмотрщике. */
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #00000059;
    color: #fff;
    font-size: 2em;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s, background .2s;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

@media (hover: hover) {
    .wp-nav-btn:hover {
        background: #ffffff40;
        opacity: 1;
    }
}

.wp-nav-btn.left {
    left: 12px;
}

.wp-nav-btn.right {
    right: 12px;
}

.wp-timer-container {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 25;
    padding: 5px 15px;
    border-radius: 20px;
    background: #0009;
}

#wpTimer {
    color: #fff;
    font-size: 3.5em;
    font-weight: 900;
    text-shadow: 0 2px 5px #000;
}

.wp-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 6px;
    background: #fff3;
}

.wp-progress-bar {
    width: 0;
    height: 100%;
    background: #3498db;
    transition: width .1s linear;
}

.wp-header {
    z-index: 50 !important;
    pointer-events: none;
}

.wp-info,
.wp-close-btn {
    pointer-events: auto !important;
}

.wp-close-btn {
    z-index: 60 !important;
    width: 44px !important;
    height: 44px !important;
    background: #00000080 !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

@media (max-width: 900px) {
    .wp-strip-container {
        /* Кадр 44px плюс две строки подписи плюс отступы ленты. */
        height: 96px !important;
    }

    .wp-thumbnail {
        width: 104px !important;
        border-radius: 6px !important;
    }

    .wp-header {
        padding: 15px 10px !important;
        background: linear-gradient(to bottom, #000000e6 0%, transparent 100%) !important;
    }

    .wp-now-playing {
        display: -webkit-box;
        max-width: 85%;
        margin-bottom: 2px !important;
        overflow: hidden;
        font-size: 1.1em !important;
        line-height: 1.2 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; line-clamp: 2;
        line-clamp: 2;
    }

    .wp-next-up {
        font-size: .8em !important;
        opacity: .7;
    }

    .wp-timer-container {
        right: 15px !important;
        bottom: 15px !important;
        padding: 4px 10px !important;
    }

    #wpTimer {
        font-size: 1.6em !important;
    }

    .wp-nav-btn i {
        width: 24px;
        height: 24px;
    }

    .wp-play-pause-icon {
        width: 60px !important;
        height: 60px !important;
    }

    .wp-play-pause-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
}

.wp-rest-overlay {
    position: absolute;
    z-index: 15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #fff;
    inset: 0;
}

.wp-rest-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    color: #3498db;
    animation: pulse 2s infinite;
}

.wp-rest-text {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wp-rest-next {
    margin-top: 10px;
    color: #aaa;
    font-size: 1em;
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .8;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.video-preview-mode {
    transition: filter .5s ease;
    /* !important обязателен. На видео при каждой смене вешается
       .cinematic-fade-in с animation: ... forwards, и её последний кадр
       (filter: blur(0px)) закрепляется за элементом насовсем. Заполненное
       значение анимации перебивает обычное объявление, поэтому серый цвет
       стирался и превью следующего упражнения шло в полном цвете.
       Объявление с !important анимацию перебивает — это единственное, что её бьёт. */
    filter: grayscale(100%) contrast(1.1) !important;
}

.btn-back-map {
    border: 1px solid transparent;
    border-radius: 14px;
    background-color: var(--bg-secondary);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all .2s;
}

.btn-back-map:hover {
    background-color: var(--input-bg-color);
    box-shadow: 0 6px 15px #00000014;
    transform: scale(1.05);
}

.btn-back-map svg {
    stroke-width: 2.5px;
}

.programs-nav-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.prog-nav-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: none;
    color: var(--secondary-text-color);
    font-weight: 600;
    transition: all .2s;
    cursor: pointer;
}

.prog-nav-btn.active {
    background-color: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
}

.programs-grid {
    padding-bottom: 80px;
}

.program-card {
    border: 1px solid transparent;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft);
}

.program-card:hover {
    border-color: var(--accent);
}


.floating-create-btn {
    background: var(--primary);
    color: var(--on-primary);
    font-size: large;
    box-shadow: 0 4px 15px #0000004d;
}


.editor-day-block {
    position: relative;
    border: 1px solid var(--border-color);
    background: var(--message-bg);
}

.editor-day-header {
    margin-bottom: 10px;
}


.editor-exercises-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.editor-ex-item {
    /* border: 1px solid var(--border-color); */
    border-radius: 8px;
    background: var(--container-bg-color);
}


.editor-ex-info {
    overflow: hidden;
}


.editor-input-small {
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.btn-add-ex {
    margin-top: 10px;
}

.selector-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.selector-card:hover {
    background-color: var(--message-bg-other);
}

#exerciseSelectorModal {
    z-index: 10050 !important;
}

#programEditorModal {
    z-index: 10040 !important;
}

#editorDaysContainer {
    max-height: 60vh;
    margin-bottom: 5%;
    padding-top: 5px;
    padding-right: 5px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}


.program-card {
    border: 0 solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: var(--neumorph-shadow-soft);
}

.program-card:hover {
    border-color: var(--accent);
}


.prog-card-title {
    color: var(--text-color);
}

.prog-card-desc {
    display: -webkit-box;
    color: var(--secondary-text-color);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.prog-card-footer {
    color: var(--secondary-text-color);
    font-size: .85em;
    font-weight: 500;
    border-top: 1px solid var(--border-color);
}

.btn-delete-prog {
    background: #e74c3c1a;
    color: #e74c3c;
}

.btn-delete-prog:hover {
    background: #e74c3c;
    color: #fff;
    transform: scale(1.1);
}

.grad-orange {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.grad-purple {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.grad-blue {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.grad-red {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.grad-green {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.grad-dark {
    background: linear-gradient(135deg, #434343 0%, black 100%);
}

.swal-page-input {
    width: 80px !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.swal-admin-form {
    color: var(--text-color);
    font-size: .95rem;
    text-align: left;
}

.swal-form-group {
    margin-bottom: 15px;
}

.swal-form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--secondary-text-color);
    font-size: .85em;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.swal-admin-input {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    background: var(--input-bg-color) !important;
    color: var(--text-color) !important;
    font-size: 1rem !important;
    box-shadow: none !important;
}

.swal-admin-input:focus {
    box-shadow: 0 0 0 2px #3498db33 !important;
    border-color: var(--focus-ring) !important;
}

textarea.swal-admin-input {
    min-height: 80px;
    line-height: 1.4;
    resize: vertical;
}

.swal-form-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.swal-col-grow {
    flex-grow: 1;
}

.swal-col-fixed {
    flex-shrink: 0;
    width: 80px;
}

.swal-col-fixed input {
    text-align: center;
}

#fitnessSettingsModal {
    z-index: 20005 !important;
}

#programConfigModal {
    z-index: 20000 !important;
}


#exSelectorGrid {
     /* display: grid; */
    grid-template-columns: 1fr;
    gap: 15px;
    max-height: 60vh;
    padding: 10px;
    overflow-y: auto;
}

.selector-card-complex {
    display: flex;
    min-height: 100px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--container-bg-color);
    transition: transform 0.2s, border-color .2s;
    cursor: pointer;
}


.selector-play-overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0003;
    opacity: 0;
    transition: opacity .2s;
    inset: 0;
}


@media (max-width: 600px) {
    #exerciseSelectorModal .modal-content {
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    

    #programEditorModal .modal-content,
    #exerciseSelectorModal .modal-content {
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: var(--bg-color) !important;
        transform: none !important;
    }

    #programEditorModal .modal-header,
    #exerciseSelectorModal .modal-header {
        flex-shrink: 0;
        padding: 15px !important;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    #programEditorModal .modal-body {
        flex-grow: 1 !important;
        padding: 10px !important;
        padding-bottom: 5px !important;
        overflow-y: auto !important;
    }

    #programEditorModal .modal-footer-actions {
        position: sticky;
        bottom: 0;
        flex-shrink: 0;
        padding: 15px !important;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
    }

    #exerciseSelectorModal .modal-body {
        display: flex !important;
        flex-grow: 1 !important;
        flex-direction: column !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    #exSelectorSearch {
        flex-shrink: 0 !important;
        margin-bottom: 10px !important;
    }

    #exSelectorGrid {
        display: grid !important;
        flex-grow: 1 !important;
        align-content: start !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        height: auto !important;
        max-height: none !important;
        padding-bottom: 40px !important;
        overflow-y: auto !important;
    }
}

.prog-card-visual {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 130px;
    border-radius: 16px 16px 0 0;
    color: #fff;
}

.prog-card-visual::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(to bottom, #0006, #0000001a);
}

.prog-card-visual>* {
    position: relative;
    z-index: 1;
}


.btn-fav-card {
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 10;
    display: flex;
    width: 30px;
    height: 30px;
    border: none;
    padding: 3px;
    border-radius: 50%;
    background: #0000;
    color: #fff;
    transition: all .2s;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.btn-fav-card:hover {
    background: #0009;
    transform: scale(1.1);
}

.btn-fav-card.active {
    background: #fff0;
    color: #ffd700;
}

.btn-fav-card svg {
    fill: none;
    stroke-width: 2px;
}

.btn-fav-card.active svg {
    fill: #ffd700;
    stroke: #ffd700;
}


.prog-day-container {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border-color);
}

.prog-day-container:last-child {
    border-bottom: none;
}

#programDetailModal .fitness-grid {
    grid-template-columns: 1fr !important;
    gap: 15px;
}


#programDetailModal .exercise-card {
    flex-direction: row;
    height: auto;
    min-height: 120px;
}

#programDetailModal .exercise-preview {
    flex-shrink: 0;
    width: 140px;
    height: auto;
    aspect-ratio: 1/1;
}

@media (max-width: 500px) {
    #programDetailModal .exercise-card {
        flex-direction: column;
    }

    #programDetailModal .exercise-preview {
        width: 100%;
        height: 180px;
        aspect-ratio: auto;
    }
}

#programDetailModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

#programDetailModal .modal-header,
#programDetailModal .modal-footer-actions {
    flex-shrink: 0;
}

#programDetailModal .prog-detail-body {
    flex-grow: 1;
    min-height: 0;
    padding-right: 5px;
    overflow-y: auto;
}


.selector-fav-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 5;
    width: 18px;
    height: 18px;
    color: #ffd700;
    pointer-events: none;
    fill: #ffd700;
    filter: drop-shadow(0 1px 2px #0009);
}

#zonkGameArea {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #2b1042 0%, #1a0b2e 100%);
    font-family: 'Segoe UI', sans-serif;
    user-select: none;
}

.zonk-top-bar {
    position: relative;
    z-index: 20000 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: transparent;
    pointer-events: auto !important;
}

#exitZonkBtn {
    position: relative;
    z-index: 20001;
    cursor: pointer;
    pointer-events: auto !important;
    touch-action: manipulation;
}

#exitZonkBtn svg,
#exitZonkBtn i {
    pointer-events: none;
}

.zonk-top-bar>* {
    pointer-events: auto;
}

.zonk-icon-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #ffffff26;
    border-radius: 12px;
    background: #ffffff1a;
    color: #fff;
    transition: background .2s;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.zonk-icon-btn:hover {
    background: #fff3;
}

.zonk-total-score-display {
    text-align: center;
    filter: drop-shadow(0 2px 1px #000f);
}

.zonk-total-score-display .label {
    display: block;
    color: #ffe30a;
    font-size: 2em;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.zonk-total-score-display .value {
    color: #fff;
    font-size: 2.2em;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 20px #fff3;
}

.zonk-history-panel {
    text-shadow: 0 2px 1px #000f;
}


.round-row.active {
    padding-right: 5px;
    padding-left: 5px;
    border-bottom: none;
}

.zonk-board {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.zonk-hand-area {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 10;
    width: auto;
    height: auto;
}

.pyramid-grid {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}


.p-col.active-col {
    background: #ffd7000d;
    box-shadow: 0 5px 6px #000f;
    border-color: #dfa821fa;
}

.held-dice-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.active-dice-area {
    position: absolute;
    top: 25%;
    right: 25%;
    z-index: 15;
    width: 50%;
    height: 50%;
    pointer-events: none;
}


.zonk-dice:hover {
    transform: scale(1.1);
}

.zonk-dice.rolling {
    transition: top .5s ease-out, left .5s ease-out, transform .5s ease-out;
}

.zonk-dice.in-slot {
    pointer-events: auto;
}


@keyframes popIn {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes popInSide {
    from {
        opacity: 0;
        transform: translate(0, -50%);
    }

    to {
        opacity: 1;
        transform: translate(12px, -50%);
    }
}

.zonk-controls-area {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 100;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 20px;
    pointer-events: none;
}

.zonk-btn-bank {
    min-width: 180px;
    padding: 15px 20px;
    border: none;
    border-radius: 50px;
    background: #f1c40f;
    color: #3e2723;
    font-size: 1.2em;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: 0 4px 0 #b7950b, 0 10px 20px #0000004d;
    transition: all .1s;
    cursor: pointer;
    pointer-events: auto;
    text-transform: uppercase;
}

.zonk-btn-bank:active {
    box-shadow: 0 0 0 #b7950b, 0 5px 10px #0000004d;
    transform: translateY(4px);
}

.zonk-btn-bank:disabled {
    background: #4a4a4a;
    color: #777;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.round-score-bubble {
    margin-left: 20px;
    color: #fff;
    font-size: 3.5em;
    font-weight: 900;
    filter: drop-shadow(0 8px 15px #0009);
    text-shadow: 0 5px 15px #00000080;
}


.shaker-container:active {
    transform: scale(0.95) rotate(-10deg);
}

.zonk-shaker {
    width: 100%;
    filter: drop-shadow(0 29px 18px #000f);
}


@keyframes shake-hard {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-5px, 5px) rotate(-10deg);
    }

    50% {
        transform: translate(5px, -5px) rotate(10deg);
    }

    75% {
        transform: translate(-5px, -5px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.zonk-message {
    position: absolute;
    top: 10%;
    left: 50%;
    z-index: 2000;
    padding: 12px 25px;
    border: 1px solid #fff3;
    border-radius: 30px;
    background: #000000d9;
    color: #fff;
    font-size: 1.1em;
    font-weight: 800;
    box-shadow: 0 10px 25px #0006;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    white-space: nowrap;
}

.zonk-message.visible {
    opacity: 1;
}

.zonk-combo-legend {
    border: 1px solid #ffffff1a;
    border-radius: 16px;
    font-family: 'Segoe UI', sans-serif;
    -webkit-backdrop-filter: blur(5px);
}

.legend-title {
    margin-bottom: 10px;
    color: #fff;
    font-size: 1.1em;
    font-weight: 600;
    text-align: center;
    letter-spacing: .5px;
    text-shadow: 0 2px 4px #00000080;
}

.combo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ffffff0d;
}

.combo-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.mini-dice-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.mini-die {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px #0000004d;
}

.combo-score {
    color: #a496c0;
    font-size: 1.1em;
    font-weight: 700;
    font-style: italic;
    text-shadow: 0 1px 2px #000c;
}

.combo-score.high {
    color: #f1c40f;
}

.combo-score.blue {
    color: #81ecec;
}

.zonk-legend-toggle {
    transition: right .3s ease;
    filter: drop-shadow(-14px 1px 13px #000f);
}

.close-legend-mobile {
    display: none;
}

@media (max-width: 768px) {
    .zonk-legend-toggle {
        position: absolute;
        top: 15%;
        right: 0;
        z-index: 150;
        display: flex;
        padding: 10px 5px;
        border: 1px solid #fff3;
        border-radius: 12px 0 0 12px;
        background: #2c0f41e6;
        color: #ffd700;
        font-size: .8em;
        font-weight: 800;
        letter-spacing: 2px;
        box-shadow: -2px 0 10px #0000004d;
        transform: translateY(-50%);
        transition: right .3s ease;
        cursor: pointer;
        border-right: none;
        filter: drop-shadow(-14px 1px 13px #000f);
        text-orientation: mixed;
        writing-mode: vertical-rl;
    }

    .zonk-combo-legend {
        position: fixed;
        top: 0;
        right: -300px;
        z-index: 20000;
        display: block !important;
        width: 260px;
        height: 100%;
        padding-top: 50px;
        border-radius: 0;
        overflow-y: auto;
        background: #14051ef2;
        box-shadow: -5px 0 20px #00000080;
        transition: right .3s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-left: 1px solid #ffd7004d;
    }

    .zonk-combo-legend.open {
        right: 0;
    }

    .close-legend-mobile {
        position: absolute;
        top: 10px;
        right: 10px;
        display: block;
        padding: 5px;
        border: none;
        background: none;
        color: #fff;
        cursor: pointer;
    }

    .desktop-only {
        display: block !important;
    }
}

.col-score-label {
    position: absolute;
    top: -45px;
    left: 0;
    width: 100%;
    color: #f9ff00;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    transition: opacity .2s;
    text-shadow: 0 3px 8px #000f;
}

.col-score-label.visible {
    opacity: 1;
}

.zonk-shaker-overlay {
    position: absolute;
    top: -70px;
    left: -50px;
    z-index: 20;
    width: 125%;
    height: auto;
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.zonk-shaker-overlay.hidden {
    opacity: 0;
    transform: scale(0.8);
}


.close-history-mobile {
    display: block !important;
}

.shaker-container {
    position: relative;
    z-index: 100;
    width: 120px;
    margin-right: 20px;
    transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    pointer-events: auto;
    transform-origin: bottom right;
}

@keyframes shake-hard {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(-10px, 0) rotate(-20deg);
    }

    40% {
        transform: translate(10px, 0) rotate(10deg);
    }

    60% {
        transform: translate(-10px, 0) rotate(-20deg);
    }

    80% {
        transform: translate(10px, 0) rotate(10deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.zonk-shaker.shake {
    animation: shake-hard .3s ease-in-out infinite;
}

.shaker-container.pour {
    transform: rotate(-15deg) translate(10px, -80px) !important;
}

.zonk-dice.landed {
    transform: scale(1) rotate(var(--final-rotation));
}

.zonk-dice.in-slot {
    position: absolute;
}

.game-banner-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    align-self: anchor-center;
    height: 140px;
    border: 0 solid #ffffff1a;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #28034a 0%, #ff001dc4 100%);
    box-shadow: 0 8px 8px #2c0b4a66;
    transition: transform 0.2s, box-shadow .2s;
    cursor: pointer;
}

.game-banner-card:hover {
    box-shadow: 0 15px 35px #2c0b4a99;
    transform: translateY(-5px);
    border-color: #ffffff4d;
}

.game-banner-card:active {
    transform: scale(0.98);
}

.game-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 90%;
    height: 60%;
    padding: 20px;
}

.game-banner-text {
    display: flex;
    flex-direction: column;
}

.game-title {
    /* ENTERPRISE UX: Vercel Shimmering Text (Голографическое переливание) */
    background: linear-gradient(110deg, #fff 10%, #a5b4fc 40%, #fff 60%, #e0e0e0 90%);
    background-size: 200% auto;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.8em;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmerFlow 4s linear infinite;
}

@keyframes textShimmerFlow {
    to { background-position: 200% center; }
}

.game-subtitle {
    margin-top: 5px;
    color: #ffffffb3;
    font-size: 0.9em;
    font-weight: 500;
}

.game-play-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 16px;
    border: 1px solid #ffffff1a;
    border-radius: 50px;
    background: #fff3;
    color: #fff;
    font-size: .85em;
    font-weight: 700;
    transition: background .2s;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.game-banner-card:hover .game-play-cta {
    background: #fff;
    color: #2c0b4a;
}

.game-banner-img {
    position: absolute;
    top: 50%;
    right: -2px;
    z-index: 1;
    width: auto;
    height: 140px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 10px 20px #00000080);
}

.game-banner-card:hover .game-banner-img {
    transform: translateY(-50%) rotate(0deg) scale(1.1);
}

.zonk-hero-title {
    margin: 10px 0 25px;
    text-align: center;
}

.zonk-hero-title h1 {
    margin: 0;
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    font-size: 3em;
    font-weight: 900;
    letter-spacing: 2px;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 15px rgba(253, 185, 49, 0.3);
}

.zonk-hero-title p {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: 1em;
    opacity: .8;
}

.zonk-lobby-balance {
    gap: 8px;
    border: 0 solid #ffd7004d;
}


.zonk-modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    padding-bottom: 40px;
}

.zonk-mode-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    background: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    /* box-shadow: 0 4px 10px #0000000d; */
    transition: transform 0.2s, box-shadow .2s;
}

.zonk-mode-card:hover {
    box-shadow: 0 15px 30px #00000026;
    transform: translateY(-5px);
    border-color: var(--accent);
}

.mode-bg-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    opacity: .05;
    transform: rotate(15deg);
    pointer-events: none;
}

.mode-bg-icon svg {
    width: 120px;
    height: 120px;
}

.mode-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mode-header h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mode-tag {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #0000000d;
    color: var(--secondary-text-color);
    font-size: .7em;
    font-weight: 700;
    text-transform: uppercase;
}

.mode-tag.hot {
    background: #e74c3c1a;
    color: #e74c3c;
}

.mode-tag.new {
    background: #2ecc711a;
    color: #2ecc71;
}

.mode-tag.locked {
    background: #0000001a;
    color: #999;
}

.zonk-mode-card p {
    margin: 10px 0 auto;
    color: var(--secondary-text-color);
    font-size: .85em;
    line-height: 1.4;
}

.btn-mode-play {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    transition: all .2s;
    cursor: pointer;
}

.mode-practice .btn-mode-play {
    background: #8e44ad;
    color: #fff;
    box-shadow: 0 4px 10px #8e44ad4d;
}

.mode-risk .btn-mode-play {
    background: linear-gradient(135deg, #28034a 0%, #ff001dc4 100%);
    box-shadow: 0 4px 10px #e74c3c66;
}

.mode-shop .btn-mode-play {
    background: #3498db;
    color: #fff;
    box-shadow: 0 4px 10px #3498db4d;
}

.mode-duel.disabled {
    opacity: .7;
    filter: grayscale(1);
}

.zonk-setup-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 20px;
    background: #fff0;
}

.zonk-setup-container.practice-theme {
    background: #09090900;
}


.setup-header h2 {
    margin: 0;
    font-size: 2em;
    font-weight: 800;
    letter-spacing: 3px;
}

.close-setup-btn {
    position: absolute;
    right: 0;
    padding: 4px 4px 0;
    border: none;
    border: 1px solid var(--border-color);
    background: none;
    color: #fff;
    color: var(--heading-color);
    color: var(--secondary-text-color) #8a7d70;
    cursor: pointer;
}

.setup-desc {
    max-width: 400px;
    margin-bottom: 30px;
    color: #aaa;
    font-size: .9em;
    text-align: center;
}


.bet-label {
    margin-bottom: 10px;
    text-align: center;
}

.bet-control {
    display: flex;
    align-items: center;
    gap: 15px;
}


.target-btn {
    gap: 5px;
    border: 1px solid var(--border-color);
    color: #fff;
}


.t-score {
    --text-color: var(--text);  
    color: var(--heading-color);
}

.btn-start-game {
    padding: 10px 40px;
    border: none;
    border-radius: 30px;
    background: #d63384;
    color: #fff;
    font-size: 1.3em;
    font-weight: 900;
    box-shadow: 0 5px 20px #d6338480;
    cursor: pointer;
}

.zonk-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #fff3;
    border-radius: 8px;
    background: #0000004d;
    color: #fff;
    font-size: 1.1em;
}

.zonk-game-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #ffffff1a;
    border-radius: 20px;
    background: #0009;
    filter: drop-shadow(0 12px 14px #000f);
}

.zonk-game-balance span {
    color: #fff;
    font-size: 1.1em;
    font-weight: 700;
}

.swal-zonk-theme.swal2-popup {
    border: 1px solid #ffd70033 !important;
    border-radius: 20px !important;
    background: radial-gradient(circle at 50% 50%, #2b1042 0%, #1a0b2e 100%) !important;
    color: #fff !important;
    box-shadow: 0 0 30px #000c !important;
}

.swal-zonk-theme .swal2-title {
    color: #ffd700 !important;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px #00000080;
    text-transform: uppercase;
}

.swal-zonk-theme .swal2-html-container {
    color: #e0e0e0 !important;
    font-size: 1.1em !important;
}

.swal-zonk-theme .swal2-confirm {
    padding: 12px 30px !important;
    border: none !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #d63384, #b02a6b) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px #d6338466 !important;
    text-transform: uppercase;
}

.swal-zonk-theme .swal2-cancel {
    padding: 12px 20px !important;
    border-radius: 50px !important;
    background: #ffffff1a !important;
    color: #aaa !important;
    font-weight: 600 !important;
}


.shop-tab.active {
    background: linear-gradient(135deg, #28034a 0%, #ff001d 100%);
    color: #fff;
    border-color: #d63384;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 10px;
    height: 520px;
    padding: 10px;
    overflow-y: auto;
}

.shop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 200px;
    padding: 10px;
    border: 2px solid #fff0;
    border-radius: 16px;
    background: #0000004d;
    cursor: pointer;
}

.shop-item:hover {
    transform: translateY(-3px);
}

.shop-item.equipped {
    background: #16b44296;
    box-shadow: 0 0 11px #2ecc71ff;
    border-color: #2d8452;
}

.shop-item-img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    filter: drop-shadow(0 5px 10px #00000080);
    object-fit: contain;
}

.shop-item-name {
    margin-bottom: 0;
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
}

.equip-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2ecc71;
    color: #fff;
    font-size: 12px;
}

.shop-item {
    position: relative;
    overflow: hidden;
    transition: all .2s ease;
}

.shop-item.locked {
    border: 1px dashed var(--border-color);
    opacity: .8;
    filter: grayscale(0.8);
}

.shop-item-price-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: #0009;
    color: #ffd700;
    font-size: .75em;
    font-weight: 700;
}

.shop-item.bought .shop-item-price-badge {
    display: none;
}

.shop-lock-overlay {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: #000000b3;
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: opacity .2s;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    inset: 0;
}

.shop-item.locked:hover .shop-lock-overlay {
    opacity: 1;
}

.lock-desc {
    margin-top: 5px;
    color: #ccc;
    font-size: .75em;
    line-height: 1.2;
}

.btn-shop-buy {
    width: 90%;
    margin-top: 5px;
    padding: 5px 12px;
    border: none;
    border-radius: 15px;
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #3e2723;
    font-size: .8em;
    font-weight: 800;
    box-shadow: 0 2px 5px #0000004d;
    transition: transform .1s;
    cursor: pointer;
}

.btn-shop-buy:active {
    transform: scale(0.95);
}

.btn-shop-buy:disabled {
    background: #555;
    color: #888;
    cursor: not-allowed;
}

.achievement-toast {
    position: absolute;
    top: 80px;
    left: 50%;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    padding: 10px 20px;
    border: 1px solid #fff3;
    border-radius: 30px;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: #fff;
    box-shadow: 0 5px 20px #2575fc80;
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    visibility: hidden;
}

.achievement-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}


.ach-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.ach-title {
    color: #ffd700;
    font-size: .9em;
    font-weight: 800;
    text-transform: uppercase;
}

.ach-desc {
    font-size: .8em;
    opacity: .9;
}


.zonk-setup-container .zonk-select {
    -moz-appearance: none;
    -webkit-appearance: none;
}


.shop-achievement-label {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2em;
    margin-top: -2px;
    margin-bottom: 5px;
    padding: 0 5px;
    color: #d8f500 !important;
    font-size: 1em;
    line-height: 1.2;
    opacity: .8;
    font-style: italic;
    text-shadow: 0 2px 4px #000f;
}

.shop-item.equipped .shop-achievement-label,
.shop-item.bought .shop-achievement-label {
    color: #ccc;
}

@media (max-width: 768px) {

    @keyframes shake-hard {
        0% {
            transform: translate(0, 0) rotate(0deg);
        }

        20% {
            transform: translate(-3px, 2px) rotate(-15deg);
        }

        30% {
            transform: translate(3px, -2px) rotate(10deg);
        }

        50% {
            transform: translate(-3px, 1px) rotate(-10deg);
        }

        60% {
            transform: translate(3px, -2px) rotate(10deg);
        }

        70% {
            transform: translate(-3px, 1px) rotate(-10deg);
        }

        80% {
            transform: translate(3px, -1px) rotate(5deg);
        }

        100% {
            transform: translate(0, 0) rotate(0deg);
        }
    }

    .zonk-hand-area {
        bottom: 110px;
        left: 10px;
        transform: scale(0.65);
        transform-origin: bottom left;
    }

    .active-dice-area {
        position: absolute;
        z-index: 15;
    }

    

    

    

    .shaker-container {
        margin-right: 0;
    }

    .zonk-history-toggle {
        position: absolute;
        top: 15%;
        left: 0;
        z-index: 150;
        display: flex;
        padding: 10px 5px;
        border: 1px solid #fff3;
        border-radius: 0 12px 12px 0;
        background: #2c0f41e6;
        color: #ffd700;
        font-size: .8em;
        font-weight: 800;
        letter-spacing: 2px;
        box-shadow: 2px 0 10px #0000004d;
        transform: translateY(-50%);
        transition: left .3s ease;
        cursor: pointer;
        border-left: none;
        filter: drop-shadow(14px 0px 13px #000f);
        text-orientation: mixed;
        writing-mode: vertical-rl;
    }

    .zonk-history-panel {
        position: fixed !important;
        top: 0 !important;
        left: -220px !important;
        z-index: 20000;
        display: block !important;
        width: 180px !important;
        height: 100% !important;
        padding-top: 50px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        border-radius: 0 !important;
        background: #14051ef2;
        box-shadow: 5px 0 20px #00000080;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-right: 1px solid #ffd7004d;
        text-shadow: 0 2px 1px #000f;
    }

    .zonk-history-panel.open {
        left: 0 !important;
    }

    .close-history-mobile {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 201;
        display: block;
        padding: 5px;
        border: none;
        background: none;
        color: #fff;
        cursor: pointer;
    }

    .close-history-mobile i {
        width: 24px;
        height: 24px;
    }

    .zonk-shaker-overlay {
        position: absolute;
        top: -60px;
        left: -40px;
        z-index: 20;
        width: 125%;
        height: auto;
        transition: opacity .3s ease, transform .3s ease;
        pointer-events: none;
    }

    * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        outline: none !important;
    }

    img {
        user-select: none;
        -webkit-user-drag: none;
    }

    .zonk-shaker.shake {
        animation: shake-hard .4s ease-in-out infinite;
        transform-origin: center bottom;
    }

    .zonk-controls-area {
        position: absolute;
        right: auto;
        bottom: 0;
        left: 0;
        z-index: 100;
        display: block;
        width: 100%;
        height: 160px;
        padding: 0;
        pointer-events: none;
    }

    .zonk-btn-bank {
        position: absolute;
        bottom: 30px !important;
        left: 20px !important;
        width: auto;
        min-width: auto;
        margin: 0;
        padding: 12px 30px;
        font-size: 1.1em;
        transform: none !important;
        pointer-events: auto;
        filter: drop-shadow(0 12px 14px #000f);
    }

    .shaker-container {
        position: absolute;
        right: 10px !important;
        bottom: 20px !important;
        width: 100px;
        margin: 0;
        pointer-events: auto;
    }

    .round-score-bubble {
        position: absolute;
        top: auto !important;
        right: 45% !important;
        bottom: 47% !important;
        left: auto !important;
        margin: 0;
        font-size: 2em;
        text-align: right;
        filter: drop-shadow(0 2px 1px #000f);
    }
}

.zonk-lobby-balance img {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    margin-right: 10px;
    object-fit: contain;
}

.zonk-lobby-balance {
    display: inline-flex !important;
    align-items: center;
    min-width: 100px;
    height: 40px;
    padding: 5px 15px 5px 10px;
    border-radius: 50px;
    background: linear-gradient(135deg, #28034a 0%, #ff001d 100%);
    box-shadow: 0 4px 15px #0003;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


.zonk-setup-container .settings-group label {
    display: block;
    margin-bottom: 8px;
    font-size: .85em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.zonk-setup-container .zonk-select {
    width: 100%;
    padding: 15px 20px;
    padding-right: 45px;
    border: 2px solid #ffffff26 !important;
    border-radius: 16px !important;
    background-color: #00000080 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    color: #fff !important;
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0 4px 15px #0000001a !important;
    transition: all .2s ease;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-position: right 15px center !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    outline: none;
}


.zonk-custom-select {
    position: relative;
    width: 100%;
    font-family: 'Segoe UI', sans-serif;
}

.zonk-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border: 0 solid #ffffff26;
    border-radius: 16px;
    background: linear-gradient(135deg, #28034a 0%, #ff001d 100%);
    color: #fff;
    font-size: 1.1em;
    font-weight: 600;
    transition: all .2s ease;
    cursor: pointer;
}

.zonk-select-trigger:hover {
    background: linear-gradient(135deg, #28034a 0%, #ff001d 100%);
    border-color: #fff6;
}

.zonk-custom-select.open .zonk-select-trigger {
    box-shadow: 0 0 0 4px #d6338440;
    border-color: #d63384;
}

.zonk-select-arrow {
    width: 10px;
    height: 10px;
    margin-top: -5px;
    transform: rotate(45deg);
    transition: transform .2s;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}

.zonk-custom-select.open .zonk-select-arrow {
    margin-top: 5px;
    transform: rotate(-135deg);
}

.zonk-options-list {
    position: absolute;
    top: 110%;
    left: 0;
    z-index: 1000;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #28034a 0%, #ff001d 100%);
    box-shadow: 0 10px 30px #00000080;
    opacity: 0;
    transform: translateY(-10px);
    transition: all .2s cubic-bezier(0.25, 0.8, 0.25, 1);
    visibility: hidden;
}

.zonk-custom-select.open .zonk-options-list {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.zonk-option {
    padding: 12px 20px;
    color: #ffffffe6;
    font-size: 1em;
    transition: background .1s;
    cursor: pointer;
    border-bottom: 1px solid #ffffff0d;
}

.zonk-option:last-child {
    border-bottom: none;
}

.zonk-option:hover {
    background: #d63384;
    color: #fff;
}

.zonk-option.selected {
    background: #d6338433;
    color: #fff;
    font-weight: 800;
}

.bet-section {
    width: 110%;
    max-width: 700px;
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid #ffffff1a;
    border-radius: 20px;
    background: #00000080;
    text-shadow: #000 0 0 2px;
}

.bet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.bet-label {
    color: rgb(255 255 255);
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 1px;
}

.bet-value-display {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffd700;
    font-size: 1.5em;
    font-weight: 800;
}

.bet-value-display img {
    width: 24px;
    height: 24px;
}

.range-slider-wrapper {
    width: 100%;
    padding: 10px 0;
}

.range-slider-wrapper input[type=range] {
    width: 100%;
    background: transparent;
    -webkit-appearance: none; appearance: none;
}

.range-slider-wrapper input[type=range]:focus {
    outline: none;
}

.range-slider-wrapper input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: #fff3;
    cursor: pointer;
}

.range-slider-wrapper input[type=range]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #d63384;
    box-shadow: 0 0 10px #d63384cc;
    transition: transform .1s;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
}

.range-slider-wrapper input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.target-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 500px;
    margin-bottom: 30px;
}

.target-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 5px;
    border: 1px solid #ffffff1a;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff0d;
    transition: all .2s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.target-btn:hover {
    background: #ffffff1a;
    transform: translateY(-2px);
}

.target-btn.active {
    background: #d6338426;
    box-shadow: 0 0 15px #d633844d inset 0 0 10px #d633841a;
    border-color: #d63384;
}

.t-score {
    margin-bottom: 2px;
    color: #fff;
    font-size: 1.3em;
    font-weight: 800;
    text-shadow: #000 0 0 2px;
}

.t-score-sub {
    margin-bottom: 8px;
    color: #ffffff80;
    font-size: .75em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.t-mult {
    color: #ffd700;
    font-size: 2em;
    font-weight: 900;
    text-shadow: 0 0 2px #000;
}

.potential-win span {
    display: block;
    color: rgb(235 186 13);
    letter-spacing: 2px;

}

@media (max-width: 768px) {

    @media (max-width: 380px) {
        .zonk-dice {
            width: 50px !important;
            height: 50px !important;
        }
    }

    .active-dice-area {
        top: 15% !important;
        right: 5% !important;
        left: 5% !important;
        width: 90% !important;
        height: 50% !important;
        pointer-events: none !important;
    }
}

.risk-slider-modern {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    margin-top: 10px;
}

.risk-slider-modern input[type=range] {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
}

.risk-slider-track {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    z-index: 1;
    height: 8px;
    border-radius: 4px;
    background: #ffffff1a;
    transform: translateY(-50%);
}

.risk-slider-fill {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: 0;
    height: 8px;
    border-radius: 4px;
    background: #d63384;
    transform: translateY(-50%);
    pointer-events: none;
}

.risk-ticks {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 100%;
    height: 8px;
    transform: translateY(-50%);
    pointer-events: none;
}

.risk-tick {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 10px;
    background: #fff3;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.risk-tick.medium {
    width: 2px;
    height: 16px;
    background: #fff6;
}

.risk-tick.major {
    width: 2px;
    height: 24px;
    background: #fffc;
    box-shadow: 0 0 4px #ffffff4d;
}

.risk-slider-modern input[type=range]::-webkit-slider-thumb {
    position: relative;
    z-index: 4;
    width: 28px;
    height: 28px;
    margin-top: -10px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #d63384;
    box-shadow: 0 2px 6px #00000080;
    -webkit-appearance: none; appearance: none;
}

.risk-slider-modern input[type=range]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border: 3px solid #fff;
    border: none;
    border-radius: 50%;
    background: #d63384;
    box-shadow: 0 2px 6px #00000080;
}

.risk-slider-row {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.risk-adjust-btn {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #fff3;
    border-radius: 12px;
    background: #ffffff1a;
    color: #fff;
    font-size: 1.5em;
    font-weight: 300;
    transition: all .1s;
    cursor: pointer;
}

.risk-adjust-btn:active {
    background: #ffffff40;
    transform: scale(0.95);
}

.risk-slider-modern {
    flex-grow: 1;
}

#zonkTableLayer {
    transition: background .5s ease, filter .5s ease;
}

.table-skin-default {
    background: radial-gradient(circle at 50% 50%, #2b1042 0%, #1a0b2e 100%);
}

.table-skin-green {
    background: radial-gradient(circle at 50% 50%, #1a4a2e 0%, #0d2b1a 100%);
}

.table-skin-dark {
    background: radial-gradient(circle at 50% 50%, #2c3e50 0%, #000 100%);
}

.table-skin-red {
    background: radial-gradient(circle at 50% 50%, #4a0d0d 0%, #2b0505 100%);
}

.table-skin-wood {
    background-image: url(assets/zonk/tables/wood.jpg);
    background-position: center;
    background-size: cover;
}

.table-skin-carbon {
    background-image: url(assets/zonk/tables/carbon.jpg);
    background-size: repeat;
}

.shop-item-table-preview {
    width: 80px;
    height: 60px;
    margin-bottom: 10px;
    border: 1px solid #fff3;
    border-radius: 8px;
    box-shadow: 0 4px 10px #0000004d;
}

.close-legend-mobile,
.close-history-mobile {
    z-index: 100 !important;
    padding: 10px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}


.zonk-board {
    position: relative;
    z-index: 5;
}

.zonk-dice.scoring-highlight {
    z-index: 60 !important;
    filter: drop-shadow(0 0 6px #f1c40f) brightness(1.1) !important;
    outline: 0 solid #f1c40f;
    outline-offset: -2px;
}

.zonk-dice.in-slot:not(.scoring-highlight) {
    opacity: .7;
    filter: grayscale(0.3);
}

.zonk-skins-toggle {
    position: absolute;
    top: 40%;
    right: 0;
    z-index: 150;
    display: flex;
    padding: 10px 5px;
    border: 1px solid #fff3;
    border-radius: 12px 0 0 12px;
    background: #2c0f41e6;
    color: #ffd700;
    font-size: .8em;
    font-weight: 800;
    letter-spacing: 2px;
    box-shadow: -2px 0 10px #0000004d;
    transform: translateY(-50%);
    transition: right .3s ease;
    cursor: pointer;
    border-right: none;
    filter: drop-shadow(-14px 1px 13px #000f);
    text-orientation: mixed;
    writing-mode: vertical-rl;
}

.zonk-skins-panel {
    position: fixed;
    top: 0;
    right: -300px;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    width: 260px;
    height: 100%;
    padding: 20px;
    padding-top: 60px;
    background: #14051eb3;
    box-shadow: -22px 0 100px #000f !important;
    transition: right .3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-left: 1px solid #ffd7004d;
}

.zonk-skins-panel.open {
    right: 0;
}

.skins-scroll-area {
    flex-grow: 1;
    padding-right: 5px;
    overflow-y: auto;
}

.skin-section-label {
    margin: 15px 0 10px;
    padding-bottom: 5px;
    color: #a496c0;
    font-size: .75em;
    font-weight: 700;
    letter-spacing: 1px;
    border-bottom: 1px solid #ffffff1a;
    text-transform: uppercase;
}

.quick-skins-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.quick-skin-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #ffffff0d;
    transition: all .2s;
    cursor: pointer;
    aspect-ratio: 1/1;
}

.quick-skin-item img {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 2px 4px #00000080);
}

.quick-skin-item.active {
    background: #ffd7001a;
    box-shadow: 0 0 10px #ffd70033;
    border-color: #ffd700;
}

.quick-table-preview {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.close-skins-mobile {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
}

.zonk-dice.collecting {
    top: var(--shaker-y) !important;
    left: var(--shaker-x) !important;
}

.ach-item-preview {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff1a;
}

.ach-item-preview img {
    max-width: 90%;
    max-height: 90%;
    filter: drop-shadow(0 2px 4px #00000080);
}

.ach-item-preview.table-preview {
    border: 1px solid #ffffff4d;
}


.zonk-dice img {
    transform: rotate(var(--final-rotation, 0deg));
    -webkit-backface-visibility: hidden;
}


.table-skin-white {
    background: radial-gradient(circle at 50% 50%, #fff 0%, #8d8d8d 100%);
}

.table-skin-green-plus {
    background-position: center;
    background-repeat: no-repeat;
}

.table-skin-wooden {
    background-position: center;
    background-repeat: no-repeat;
}

.shop-item-table-preview.table-skin-green-plus,
.shop-item-table-preview.table-skin-wooden {
    background-position: center;
    background-size: cover;
}


.table-skin-code {
    background-image: url(assets/zonk/table/code.jpg);
    background-size: cover;
}

.table-skin-green-autum {
    background-image: url(assets/zonk/table/Green_autum.jpg);
    background-size: cover;
}

.table-skin-green-plus {
    background-image: url(assets/zonk/table/Green_plus.jpg);
    background-size: cover;
}

.table-skin-green-ultra {
    background-image: url(assets/zonk/table/Green_ultra.jpg);
    background-size: cover;
}

.table-skin-ice {
    background-image: url(assets/zonk/table/ice.jpg);
    background-size: cover;
}

.table-skin-napkin {
    background-image: url(assets/zonk/table/napkin.jpg);
    background-size: cover;
}

.table-skin-night-sky {
    background-image: url(assets/zonk/table/night_sky.jpg);
    background-size: cover;
}

.table-skin-red-cloth {
    background-image: url(assets/zonk/table/Red_cloth.jpg);
    background-size: cover;
}

.table-skin-red-knitted {
    background-image: url(assets/zonk/table/Red_knitted.jpg);
    background-size: cover;
}

.table-skin-red-velvet {
    background-image: url(assets/zonk/table/Red_velvet.jpg);
    background-size: cover;
}

.table-skin-wooden {
    background-image: url(assets/zonk/table/Wooden.jpg);
    background-size: cover;
}

.table-skin-wooden-b {
    background-image: url(assets/zonk/table/Wooden_B.jpg);
    background-size: cover;
}

.table-skin-wooden-w {
    background-image: url(assets/zonk/table/Wooden_W.jpg);
    background-size: cover;
}

[class*="table-skin-"] {
    background-position: center;
    background-repeat: no-repeat;
}

.joker-picker {
    position: absolute;
    z-index: 99999 !important;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 10px;
    border: 2px solid #ffd700;
    border-radius: 14px;
    background: #1a0b2e;
    box-shadow: 0 0 30px #000000e6;
    pointer-events: auto !important;
}

.joker-picker-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    padding: 2px;
    border: none;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.joker-picker-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 600px) {
    .joker-picker {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .joker-picker-btn {
        width: 50px;
        height: 50px;
    }
}

.shop-progress-container {
    width: 85%;
    height: 8px;
    margin-top: 10px;
    border: 1px solid #ffffff1a;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff26;
}

.shop-progress-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #f1c40f, #f39c12);
    box-shadow: 0 0 10px #f1c40f80;
    transition: width .4s ease-out;
}

.shop-progress-text {
    margin-top: 4px;
    color: #ffd700;
    font-size: 11px;
    font-weight: 800;
    text-shadow: 0 1px 2px #000c;
}

.shop-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 5px 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
}

.shop-tabs::-webkit-scrollbar {
    display: none;
}

.shop-tab {
    flex-shrink: 0;
    padding: 10px 20px;
    border: 1px solid #ffffff1a;
    border-radius: 20px;
    background: #ffffff0d;
    color: #aaa;
    font-size: 13px;
    font-weight: 700;
    transition: all .2s;
    cursor: pointer;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        height: auto;
        max-height: 65vh;
        padding: 5px;
    }

    .shop-item {
        height: auto;
        min-height: 180px;
        padding: 8px;
    }

    .shop-item-img {
        width: 60px;
        height: 60px;
    }

    .shop-item-name {
        font-size: 1rem;
    }

    .buster-buy-group {
        gap: 3px !important;
        width: 100% !important;
    }
}


.potential-win .win-value {
    padding: 20px;
}


.bet-value-display,
.win-value {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 150px !important;
}

.potential-win .win-value {
    justify-content: center !important;
}

.buster-limit {
    position: absolute;
    top: -5px;
    left: -5px;
    padding: 1px 4px;
    border: 1px solid #1a0b2e;
    border-radius: 6px;
    background: #3498db;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
}

.buster-slot.limit-reached {
    cursor: not-allowed !important;
    filter: grayscale(1) opacity(0.5);
}

.buster-slot.limit-reached:active {
    transform: none !important;
}

.zonk-history-panel {
    max-height: calc(100vh);
    border: 1px solid #ffffff0d;
    border-radius: 12px;
    overflow-x: hidden;
    overflow-y: auto !important;
    color: #ffffffe6;
    font-family: monospace;
    font-size: 1.1em;
    pointer-events: auto !important;
    -webkit-backdrop-filter: blur(15px);
    scrollbar-color: #ffd700 transparent;
    scrollbar-width: thin;
}

.zonk-history-panel::-webkit-scrollbar {
    width: 3px;
}

.zonk-history-panel::-webkit-scrollbar-track {
    background: transparent;
}

.zonk-history-panel::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ffd700;
}

.round-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 4px;
    transition: background .2s;
    border-bottom: 1px solid #ffffff1a;
}

.round-row.active {
    border-radius: 4px;
    background: #ffd70033;
    color: #ffd700;
    font-weight: 700;
}

@media (max-width: 768px) {
    .zonk-history-panel {
        width: 85px;
        opacity: 1.6;
        transition: opacity 0.3s, width .3s;
    }

    .zonk-history-panel:active,
    .zonk-history-panel:hover {
        width: 100px;
        opacity: 1;
    }
}


.zonk-history-panel {
    padding: 60px 15px 20px !important;
    box-shadow: 15px 0 60px #000f !important;
    -webkit-backdrop-filter: blur(15px) !important;
    backdrop-filter: blur(15px) !important;
    border-right: 1px solid #ffd7004d !important;
}


.zonk-combo-legend {
    padding: 60px 20px 20px !important;
    box-shadow: -22px 0 35px #000f !important;
    pointer-events: auto !important;
    -webkit-backdrop-filter: blur(15px) !important;
    backdrop-filter: blur(15px) !important;
    border-left: 1px solid #ffd7004d !important;
}


.zonk-history-toggle {
    position: absolute;
    top: 20%;
    left: 0;
    z-index: 20000;
    display: flex !important;
    padding: 12px 6px;
    border: 1px solid #fff3;
    border-radius: 0 12px 12px 0;
    background: #2c0f41e6;
    color: #ffd700;
    font-size: .75em;
    font-weight: 800;
    letter-spacing: 1px;
    transform: translateY(-50%);
    cursor: pointer;
    border-left: none;
    text-orientation: mixed;
    writing-mode: vertical-rl;
}

.zonk-legend-toggle {
    position: absolute;
    top: 20%;
    right: 0;
    z-index: 20000;
    display: flex !important;
    padding: 12px 6px;
    border: 1px solid #fff3;
    border-radius: 12px 0 0 12px;
    background: #2c0f41e6;
    color: #ffd700;
    font-size: .75em;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: -2px 0 10px #0000004d;
    transform: translateY(-50%);
    cursor: pointer;
    border-right: none;
    text-orientation: mixed;
    writing-mode: vertical-rl;
}


.zonk-history-panel {
    position: fixed !important;
    top: 0 !important;
    z-index: 20000 !important;
    width: 180px !important;
    height: 100% !important;
    padding-top: 60px !important;
    background: #14051eb3 !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-right: 1px solid #ffd7004d;
}


.zonk-combo-legend {
    position: fixed !important;
    top: 0 !important;
    right: -300px !important;
    z-index: 20000 !important;
    width: 260px !important;
    height: 100% !important;
    padding-top: 60px !important;
    background: #14051ef2 !important;
    transition: right .3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-left: 1px solid #ffd7004d;
}

.zonk-combo-legend.open {
    right: 0 !important;
}

.zonk-history-toggle,
.zonk-legend-toggle,
.zonk-skins-toggle {
    display: flex !important;
}

@media (min-width: 769px) {
    .zonk-controls-area {
        flex-direction: row-reverse;
    }

    

    

    .shaker-container {
        margin-right: 20px;
    }

    

    .zonk-btn-bank {
        position: absolute !important;
        bottom: 30px !important;
        left: 30px !important;
        min-width: 180px;
        pointer-events: auto;
    }

    .round-score-bubble {
        bottom: 35px !important;
        left: 50% !important;
        display: block !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
    }

    .shaker-container {
        position: absolute !important;
        right: 30px !important;
        bottom: 20px !important;
        margin: 0 !important;
        pointer-events: auto;
    }
}


.zonk-dice.in-slot {
    overflow: visible !important;
}

.zonk-history-panel {
    left: -280px !important;
    transition: left .3s ease-out !important;
}

.zonk-combo-legend,
.zonk-skins-panel {
    right: -320px !important;
    transition: right .3s ease-out !important;
}

.zonk-history-panel.open {
    left: 0 !important;
}

.zonk-combo-legend.open,
.zonk-skins-panel.open {
    right: 0 !important;
}


.zonk-history-panel:not(.open),
.zonk-combo-legend:not(.open),
.zonk-skins-panel:not(.open) {
    pointer-events: none !important;
}

.zonk-history-panel.open,
.zonk-combo-legend.open,
.zonk-skins-panel.open {
    pointer-events: auto !important;
}

#zonkTableLayer {
    cursor: default;
}


.zonk-history-toggle,
.zonk-legend-toggle,
.zonk-skins-toggle {
    pointer-events: auto !important;
}

.close-history-mobile {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #fff3;
    border-radius: 50%;
    background: #ffffff1a;
    color: #fff;
    transition: background .2s;
    cursor: pointer;
}

.close-history-mobile:hover {
    background: #fff3;
}

.close-history-mobile svg {
    width: 18px;
    height: 18px;
}

#zonkTableLayer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: auto !important;
}

.zonk-history-panel,
.zonk-combo-legend,
.zonk-skins-panel {
    pointer-events: auto !important;
}

.zonk-dice {
    position: absolute;
    z-index: 50;
    width: 60px;
    height: 60px;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0);
    transition: top .6s cubic-bezier(0.19, 1, 0.22, 1), left .6s cubic-bezier(0.19, 1, 0.22, 1), transform .4s ease, opacity .6s ease;
    cursor: pointer;
    pointer-events: auto;
    /* УДАЛЕНО will-change: GPU-слой уже создан через translate3d. Это предотвращает OOM на слабых устройствах. */
}

.zonk-dice.landed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}


.zonk-dice img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    transform: rotate(var(--final-rotation, 0deg));
    transition: transform .4s ease;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    filter: drop-shadow(0 4px 3px #0009) !important;
}

.zonk-dice.collecting img {
    filter: none !important;
}

.zonk-dice.collecting {
    top: var(--shaker-y) !important;
    bottom: auto !important;
    left: var(--shaker-x) !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    transform: translate3d(0, 0, 0) scale(0.1) rotate(720deg) !important;
    transition: all .5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

.zonk-dice.scoring-highlight img {
    filter: drop-shadow(0 0 5px #f1c40f) brightness(1.1) !important;
}


.zonk-history-toggle,
.zonk-legend-toggle,
.zonk-skins-toggle {
    z-index: 15000 !important;
}

.zonk-history-panel,
.zonk-combo-legend,
.zonk-skins-panel {
    z-index: 20000 !important;
}

.zonk-history-panel.open~.zonk-history-toggle {
    opacity: 0;
    pointer-events: none;
}

.zonk-combo-legend.open~.zonk-legend-toggle {
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 769px) {
    

    .zonk-btn-bank,
    .shaker-container,
    .round-score-bubble {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: -20% !important;
        left: 5% !important;
        margin: 0 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    

    

    
}

.p-col {
    position: relative;
    display: flex;
    justify-content: center;
    width: 68px !important;
    border: 2px solid #fff3;
    border-radius: 12px;
    box-sizing: border-box;
    background: #00000040;
}

.zonk-dice.in-slot {
    z-index: 40;
    width: 54px !important;
    height: 54px !important;
    box-shadow: none;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transition: all .3s cubic-bezier(0.25, 1, 0.5, 1);
    filter: drop-shadow(0 2px 3px #00000080) !important;
}

.p-col[data-col="0"] {
    height: 358px !important;
}

.p-col[data-col="1"] {
    height: 300px !important;
}

.p-col[data-col="2"] {
    height: 242px !important;
}

.p-col[data-col="3"] {
    height: 184px !important;
}

.p-col[data-col="4"] {
    height: 126px !important;
}

.p-col[data-col="5"] {
    height: 68px !important;
}

@media (min-width: 769px) {
    .zonk-controls-area {
        position: absolute !important;
        top: auto !important;
        right: 40px !important;
        bottom: 40px !important;
        left: auto !important;
        z-index: 100 !important;
        display: grid !important;
        align-items: center !important;
        grid-template-columns: auto auto !important;
        grid-template-rows: auto auto !important;
        gap: 30px 20px !important;
        width: auto !important;
        height: auto !important;
        pointer-events: none;
        justify-items: center !important;
    }

    .round-score-bubble {
        position: relative !important;
        right: -10px !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        font-size: 3.5em !important;
        text-align: right !important;
        grid-column: 1 / 3 !important;
        grid-row: 1 / 2 !important;
    }

    .zonk-btn-bank {
        margin-right: 5px !important;
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        white-space: nowrap;
    }

    .shaker-container {
        width: 120px !important;
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
    }
}

.hidden-btn {
    display: none !important;
}

.setup-header {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 40px;
    margin-bottom: 20px !important;
}

.setup-header #riskCurrentBalance {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    z-index: 10;
    min-width: auto !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: .9em !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 380px) {
    .setup-header #riskCurrentBalance {
        transform: translateY(-50%) scale(0.85) !important;
        transform-origin: left center !important;
    }
}

.zonk-lobby-balance span {
    color: #ffd700;
    font-family: 'Segoe UI', monospace;
    font-size: 1em !important;
    font-weight: 800;
    line-height: 1;
    text-shadow: #000 0 0 2px;
    white-space: nowrap;
}

.potential-win {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.win-value {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.win-value span {
    margin: 0 !important;
    color: #ffd700;
    font-weight: 800 !important;
    text-align: center;
    line-height: 1.1;
    text-shadow: 0 0 5px #00000080;
    word-break: break-all;
}

.win-value img {
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
}

.win-value span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(18px, 6vw, 36px) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-item-name {
    max-width: 100%;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mode-duel .btn-mode-play {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    box-shadow: 0 4px 10px #2a529866;
}

.duel-layout {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 900px;
    height: 100%;
    padding-bottom: 20px;
}

.duel-settings-col,
.duel-players-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #ffffff1a;
    border-radius: 20px;
    background: #0000004d;
}

.duel-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    color: #fff;
    letter-spacing: 1px;
    border-bottom: 1px solid #ffffff1a;
    text-shadow: 0 1px 5px #000;
    text-transform: uppercase;
}

#refreshDuelPlayersBtn {
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
}

#refreshDuelPlayersBtn:hover {
    color: #fff;
}

.duel-online-list {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.duel-player-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #4f4f4fba;
    transition: background .2s;
}

.duel-player-card:hover {
    background: #ffffff1a;
    border-color: #fff3;
}

.duel-player-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.duel-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-weight: 700;
}

.duel-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 5px #2ecc71;
}

.btn-invite {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: #3498db;
    color: #fff;
    font-size: .8em;
    font-weight: 600;
    transition: transform .1s;
    cursor: pointer;
}

.btn-invite:hover {
    background: #2980b9;
}

.btn-invite:active {
    transform: scale(0.95);
}

@media (max-width: 700px) {
    .duel-layout {
        flex-direction: column;
        overflow-y: auto;
    }

    .duel-settings-col,
    .duel-players-col {
        flex: none;
        height: auto;
    }

    .duel-players-col {
        min-height: 300px;
    }
}

#ludoGameArea {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1e272e;
    user-select: none;
}

.ludo-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-bottom: 20px;
}

.ludo-top-bar {
    z-index: 10;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    min-height: 70px;
    padding: 0 15px;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.ludo-icon-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #ffffff1a;
    color: #fff;
    cursor: pointer;
}

.ludo-status-display {
    max-width: 45%;
    overflow: hidden;
    color: #ffd700;
    font-size: 1.2em;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px #00000080;
    text-transform: uppercase;
    white-space: nowrap;
}

.ludo-board-container {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 600px;
    padding: 10px;
}

.ludo-board-aspect {
    position: relative;
    width: 100%;
    border-radius: 4px;
    background: #000;
    box-shadow: 0 10px 30px #00000080;
    aspect-ratio: 1 / 1;
}

.ludo-board-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ludo-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ludo-cell {
    position: absolute;
    width: 6.666%;
    height: 6.666%;
    border: none;
    background: transparent;
}

.ludo-token.jump {
    z-index: 100 !important;
    transform: translate(var(--t-x, 0px), var(--t-y, 0px)) scale(1.5) translateY(-25px) rotate(var(--t-rot, 0deg));
    /* При высоком полете тень падает еще ниже и становится очень мягкой */
    filter: drop-shadow(4px 20px 10px rgba(0, 0, 0, 0.4));
}

.ludo-token.red {
    background-image: url(assets/ludo/RD.png);
}

.ludo-token.green {
    background-image: url(assets/ludo/GN.png);
}

.ludo-token.yellow {
    background-image: url(assets/ludo/YL.png);
}

.ludo-token.blue {
    background-image: url(assets/ludo/BL.png);
}

.board-rotated .ludo-token.red {
    background-image: url(assets/ludo/RD_flip.png);
}

.board-rotated .ludo-token.green {
    background-image: url(assets/ludo/GN_flip.png);
}

.board-rotated .ludo-token.yellow {
    background-image: url(assets/ludo/YL_flip.png);
}

.board-rotated .ludo-token.blue {
    background-image: url(assets/ludo/BL_flip.png);
}


.ludo-player-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: .5;
    transition: opacity .3s;
}

.ludo-player-panel.active {
    opacity: 1;
    transform: scale(1.1);
}


@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.ludo-token {
    position: absolute;
    z-index: 20;
    width: 6%;
    height: 6%;
    margin: .33%;
    transition: top .15s linear, left .15s linear;
    cursor: pointer;
    pointer-events: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* Тень падает строго вниз (3px) и чуть вправо (1px), создавая идеальный 3D объем */
    filter: drop-shadow(1px -3px 3px rgba(0, 0, 0, 0.6));
    transform: translate(var(--t-x, 0px), var(--t-y, 0px)) rotate(var(--t-rot, 0deg));
}

.ludo-token.is-hopping {
    z-index: 100 !important;
    animation: frog-hop .2s linear forwards;
}

@keyframes frog-hop {
    0% {
        transform: translate(var(--t-x, 0px), var(--t-y, 0px)) scale(1) translateY(0) rotate(var(--t-rot, 0deg));
    }

    50% {
        /* Фишка летит вверх (-30%) */
        transform: translate(var(--t-x, 0px), var(--t-y, 0px)) scale(1.4) translateY(-30%) rotate(var(--t-rot, 0deg));
        /* А тень отдаляется вниз (12px), становясь более размытой, как в реальной жизни */
        filter: drop-shadow(2px 12px 6px rgba(0, 0, 0, 0.5));
    }

    80% {
        transform: translate(var(--t-x, 0px), var(--t-y, 0px)) scale(1.1) translateY(0) rotate(var(--t-rot, 0deg));
    }

    100% {
        transform: translate(var(--t-x, 0px), var(--t-y, 0px)) scale(1) translateY(0) rotate(var(--t-rot, 0deg));
    }
}

.ludo-token.movable {
    z-index: 30;
    animation: token-pulse .8s infinite alternate;
    cursor: pointer;
    filter: drop-shadow(0 0 5px white);
}

@keyframes token-pulse {
    0% {
        transform: translate(var(--t-x, 0px), var(--t-y, 0px)) scale(1) rotate(var(--t-rot, 0deg));
    }

    100% {
        transform: translate(var(--t-x, 0px), var(--t-y, 0px)) scale(1.15) rotate(var(--t-rot, 0deg));
    }
}


@keyframes dice-shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.ludo-dice-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ludo-shaker-wrapper {
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    transition: top .6s cubic-bezier(0.25, 1, 0.5, 1), bottom .6s cubic-bezier(0.25, 1, 0.5, 1), left .6s cubic-bezier(0.25, 1, 0.5, 1), right .6s cubic-bezier(0.25, 1, 0.5, 1), transform .6s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    pointer-events: auto;
}

.ludo-shaker-wrapper:active {
    transform: scale(0.9) !important;
    transition: transform .1s;
}

.ludo-shaker-img {
    width: 100%;
    height: 100%;
    transition: transform .2s;
    filter: drop-shadow(0 15px 25px #0009);
    object-fit: contain;
    will-change: transform, filter;
}

.ludo-shaker-wrapper.pos-red {
    top: auto;
    right: auto;
    bottom: 30px;
    left: 20px;
    transform: rotate(25deg);
    rotate: 30deg;
}

.ludo-shaker-wrapper.pos-green {
    top: 90px;
    right: auto;
    bottom: auto;
    left: 20px;
    transform: rotate(155deg);
    rotate: 359deg;
}

.ludo-shaker-wrapper.pos-yellow {
    top: 90px;
    right: 20px;
    bottom: auto;
    left: auto;
    transform: rotate(-155deg);
    rotate: 30deg;
}

.ludo-shaker-wrapper.pos-blue {
    top: auto;
    right: 20px;
    bottom: 30px;
    left: auto;
    transform: rotate(-25deg);
    rotate: 359deg;
}

.ludo-shaker-wrapper.pos-red .ludo-shaker-img {
    filter: sepia(1) saturate(6) hue-rotate(-50deg) drop-shadow(0 15px 25px #0009) !important;
}

.ludo-shaker-wrapper.pos-green .ludo-shaker-img {
    filter: sepia(1) saturate(4) hue-rotate(60deg) drop-shadow(0 15px 25px #0009) !important;
}

.ludo-shaker-wrapper.pos-yellow .ludo-shaker-img {
    filter: sepia(1) saturate(10) hue-rotate(5deg) drop-shadow(0 15px 25px #0009) !important;
}

.ludo-shaker-wrapper.pos-blue .ludo-shaker-img {
    filter: sepia(1) saturate(6) hue-rotate(190deg) drop-shadow(0 15px 25px #0009) !important;
}

/* === Цвет шейкера (tint) — отделяем от позиции, чтобы не зависел от перспективы === */
.ludo-shaker-wrapper.tint-red .ludo-shaker-img {
    filter: sepia(1) saturate(6) hue-rotate(-50deg) drop-shadow(0 15px 25px #0009) !important;
}
.ludo-shaker-wrapper.tint-green .ludo-shaker-img {
    filter: sepia(1) saturate(4) hue-rotate(60deg) drop-shadow(0 15px 25px #0009) !important;
}
.ludo-shaker-wrapper.tint-yellow .ludo-shaker-img {
    filter: sepia(1) saturate(10) hue-rotate(5deg) drop-shadow(0 15px 25px #0009) !important;
}
.ludo-shaker-wrapper.tint-blue .ludo-shaker-img {
    filter: sepia(1) saturate(6) hue-rotate(190deg) drop-shadow(0 15px 25px #0009) !important;
}

.ludo-shaker-img.shake {
    animation: ludo-shake .4s ease-in-out infinite;
}

@keyframes ludo-shake {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-3px, 3px) rotate(-5deg);
    }

    50% {
        transform: translate(3px, -3px) rotate(5deg);
    }

    75% {
        transform: translate(-3px, -3px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0);
    }
}

.ludo-shaker-img.pour {
    transform: translateY(-40px) scale(1.1);
}

@media (max-width: 600px) {
    .ludo-shaker-wrapper {
        width: 80px;
        height: 80px;
    }

    .ludo-shaker-wrapper.pos-red {
        bottom: 20px;
        left: 10px;
    }

    .ludo-shaker-wrapper.pos-green {
        top: 80px;
        left: 10px;
    }

    .ludo-shaker-wrapper.pos-yellow {
        top: 80px;
        right: 10px;
    }

    .ludo-shaker-wrapper.pos-blue {
        right: 10px;
        bottom: 20px;
    }
}

.ludo-die-wrapper {
    position: absolute;
    z-index: 55;
    width: 8%;
    height: 8%;
    transition: top .5s cubic-bezier(0.19, 1, 0.22, 1), left .5s cubic-bezier(0.19, 1, 0.22, 1), transform .5s ease-out;
}

.ludo-die-wrapper::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 10%;
    z-index: -1;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: #000;
    opacity: .6;
    filter: blur(8px);
}

.ludo-die-visual {
    width: 100%;
    height: 100%;
    transition: transform .5s ease-out;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 2px 2px #0000004d);
}

.ludo-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #004e92 0%, #000428 100%);
}

.ludo-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border: 2px solid #ffd700;
    border-radius: 20px;
    background: #0009;
    text-align: center;
    box-shadow: 0 0 30px #00000080 inset 0 0 20px #ffd7001a;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ludo-logo-img {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 10px #ffd700);
    object-fit: contain;
}

.ludo-menu-title {
    margin-bottom: 30px;
    color: #ffd700;
    font-size: 2em;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #c0392b;
    text-transform: uppercase;
}

.ludo-menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 15px;
    padding: 15px;
    border: 2px solid #fff;
    border-radius: 12px;
    background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
    color: #fff;
    font-size: 1.2em;
    font-weight: 800;
    box-shadow: 0 5px 0 #1a5276;
    transition: transform .1s;
    cursor: pointer;
}

.ludo-menu-btn:active {
    box-shadow: 0 1px 0 #1a5276;
    transform: translateY(4px);
}

.ludo-menu-btn.disabled {
    background: #7f8c8d;
    box-shadow: 0 5px 0 #555;
    opacity: .7;
    cursor: not-allowed;
}

.ludo-setup-group {
    width: 100%;
    margin-bottom: 20px;
}

.ludo-setup-group label {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    text-transform: uppercase;
}

.ludo-toggle-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.ludo-toggle-btn {
    width: 60px;
    height: 60px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.5em;
    font-weight: 800;
    cursor: pointer;
}

.ludo-toggle-btn.active {
    background: #ffd700;
    color: #333;
    box-shadow: 0 0 15px #ffd700;
    border-color: #ffd700;
}

.ludo-player-config {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.ludo-p-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #ffffff7a;
    transition: all .2s;
    cursor: pointer;
}

.ludo-p-slot:hover {
    background: #fff3;
}

.ludo-p-slot.is-bot {
    border-color: #e74c3c;
}

.ludo-p-slot.is-human {
    border-color: #2ecc71;
}

.ludo-p-icon {
    width: 30px;
    height: 30px;
    border: 2px solid #0000004d;
    border-radius: 50%;
}

.ludo-p-slot[data-color="red"] .ludo-p-icon {
    background: #e74c3c;
}

.ludo-p-slot[data-color="green"] .ludo-p-icon {
    background: #2ecc71;
}

.ludo-p-slot[data-color="yellow"] .ludo-p-icon {
    background: #f1c40f;
}

.ludo-p-slot[data-color="blue"] .ludo-p-icon {
    background: #3498db;
}

.ludo-p-type {
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
}

.ludo-menu-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
}

.ludo-small-btn {
    width: 50px;
    border: none;
    border-radius: 10px;
    background: #555;
    color: #fff;
    cursor: pointer;
}

.ludo-play-btn {
    flex-grow: 1;
    padding: 15px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
    color: #fff;
    font-size: 1.2em;
    font-weight: 900;
    box-shadow: 0 5px 0 #1e8449;
    cursor: pointer;
}

.ludo-play-btn:active {
    box-shadow: 0 1px 0 #1e8449;
    transform: translateY(4px);
}

.ludo-board-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.board-option {
    position: relative;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    transition: transform .2s;
    cursor: pointer;
}

.board-option img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.board-option span {
    display: block;
    padding: 5px;
    color: #ccc;
    font-size: .8em;
}

.board-option:hover {
    background: #ffffff1a;
    transform: scale(1.05);
}

.board-option.active {
    background: #ffd70026;
    border-color: #ffd700;
}

.board-option.active span {
    color: #ffd700;
    font-weight: 700;
}

.ludo-bg-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 5px;
}

.bg-option {
    height: 60px;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    opacity: .7;
    transition: all .2s;
    cursor: pointer;
}

.bg-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-option:hover {
    opacity: 1;
    transform: scale(1.05);
}

.bg-option.active {
    box-shadow: 0 0 10px #ffd7004d;
    opacity: 1;
    border-color: #ffd700;
}

.ludo-background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(0.6);
}

.ludo-track-selector {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

/* Выбор музыкальной темы.
   Фон был буквально `background: red` — тревожный цвет на кнопке «Готика»,
   который в любом интерфейсе читается как «опасно». Невыбранные варианты
   теперь нейтральные, выбранный — золотой, как и весь акцент в Ludo. */
.track-option {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    border: 1px solid #ffffff1f;
    border-radius: 12px;
    background: #ffffff0a;
    color: #c7d3ec;
    font-size: .82em;
    text-align: center;
    transition: background .18s, border-color .18s, color .18s;
    cursor: pointer;
}

.track-option i,
.track-option svg {
    width: 18px;
    height: 18px;
}

.track-option:hover {
    border-color: #ffd45c66;
    background: #ffffff14;
    color: #eef3ff;
}

.track-option.active {
    background: #ffd45c;
    border-color: #ffd45c;
    color: #10203f;
    font-weight: 700;
    box-shadow: 0 0 0 3px #ffd45c26;
}

/* Ползунки громкости: дорожка залита до бегунка, чтобы уровень читался
   с одного взгляда, а не только по проценту справа */
.ludo-range {
    width: 100%;
    height: 6px;
    margin: 0;
    border-radius: 5px;
    background: #ffffff1f;
    -webkit-appearance: none; appearance: none;
    outline: none;
    cursor: pointer;
}

.ludo-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid #10203f;
    border-radius: 50%;
    background: #ffd45c;
    box-shadow: 0 2px 6px #0009;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
}

.ludo-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid #10203f;
    border-radius: 50%;
    background: #ffd45c;
    box-shadow: 0 2px 6px #0009;
    cursor: pointer;
}

.ludo-range:focus-visible {
    outline: 2px solid #ffd45c;
    outline-offset: 4px;
}

/* =========================================================
   ОКНО НАСТРОЕК LUDO
   =========================================================
   Прежнее окно было единым столбцом по центру: заголовки вперемешку с
   ползунками, разделы разделены тонкой линией, а всё вместе не помещалось
   в экран — верхний ряд с выбором доски просто срезало, и добраться до
   него было нельзя. Поэтому: заголовок и кнопка «Готово» закреплены,
   середина прокручивается, а разделы собраны в карточки с подписями. */
.ludo-settings {
    display: flex;
    flex-direction: column;
    width: min(92vw, 420px);
    max-height: min(88vh, 760px);
    border: 1px solid #ffd45c4d;
    border-radius: 20px;
    background: #0d1b3af2;
    color: #e8eefc;
    box-shadow: 0 24px 60px #00000073;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.ludo-settings__head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #ffffff14;
}

.ludo-settings__title {
    margin: 0;
    color: #ffd45c;
    font-size: 1.15em;
    font-weight: 800;
    letter-spacing: .5px;
}

.ludo-settings__x {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: #ffffff12;
    color: #c7d3ec;
    transition: background .18s, color .18s;
    cursor: pointer;
}

.ludo-settings__x:hover {
    background: #ffffff20;
    color: #fff;
}

.ludo-settings__x svg {
    width: 18px;
    height: 18px;
}

.ludo-settings__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ludo-set {
    padding: 14px;
    border: 1px solid #ffffff12;
    border-radius: 14px;
    background: #ffffff08;
    text-align: left;
}

.ludo-set__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #93a3c4;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ludo-set__title svg {
    width: 15px;
    height: 15px;
    color: #ffd45c;
}

/* Подписи под миниатюрами стола */
.bg-option span {
    display: block;
    padding: 4px 2px 0;
    color: #93a3c4;
    font-size: .72em;
    text-align: center;
}

.bg-option.active span {
    color: #ffd45c;
    font-weight: 700;
}

.ludo-vol {
    margin-top: 14px;
}

.ludo-vol__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.ludo-vol__head label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #c7d3ec;
    font-size: .88em;
    cursor: pointer;
}

.ludo-vol__head svg {
    width: 15px;
    height: 15px;
    color: #93a3c4;
}

.ludo-vol__value {
    color: #ffd45c;
    font-size: .82em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ludo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ludo-row__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ludo-row__label {
    color: #e8eefc;
    font-size: .92em;
    font-weight: 600;
}

/* Пояснение стояло отдельной строкой под всем блоком и не было связано ни
   с чем визуально. Теперь это подпись к своему переключателю. */
.ludo-row__hint {
    color: #8493b4;
    font-size: .76em;
    line-height: 1.35;
}

.ludo-settings__foot {
    flex-shrink: 0;
    padding: 14px 18px;
    border-top: 1px solid #ffffff14;
}

/* Закрытие — не главное действие в окне, поэтому кнопка спокойная, а не
   огромная синяя с аркадной тенью, спорившая с золотой рамкой */
.ludo-settings__done {
    width: 100%;
    padding: 13px;
    border: 1px solid #ffd45c59;
    border-radius: 12px;
    background: #ffd45c1a;
    color: #ffd45c;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: .4px;
    transition: background .18s, border-color .18s;
    cursor: pointer;
}

.ludo-settings__done:hover {
    border-color: #ffd45c;
    background: #ffd45c2e;
}

/* На телефоне окно занимает экран целиком.
   Плавающая карточка здесь только мешает: поля по краям съедают ширину,
   которой и так мало, а прокручиваемая середина остаётся такой короткой,
   что ползунок громкости обрезается нижним краем. Рамка и скругления при
   этом теряют смысл — вокруг ничего не видно. */
@media (max-width: 640px) {
    .ludo-settings {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border: none;
        border-radius: 0;
        background: #0d1b3a;
        box-shadow: none;
    }

    .ludo-settings__head {
        /* Место под чёлку и вырезы */
        padding-top: max(16px, env(safe-area-inset-top, 16px));
    }

    .ludo-settings__body {
        padding: 14px 14px 20px;
    }

    .ludo-settings__foot {
        padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
    }

    .ludo-set { padding: 12px; }
    .track-option { font-size: .76em; }
}

@media (max-width: 600px) {
    .ludo-status-display {
        max-width: 160px;
        font-size: .9em;
    }

    .ludo-icon-btn {
        width: 36px !important;
        height: 36px !important;
    }
}

#courseAccessModal .settings-group {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--dashed-border-color) !important;
}

#courseAccessModal .settings-group label {
    margin-bottom: 0 !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
}

#courseAccessModal .ai-toggle-switch {
    position: relative !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 26px !important;
    margin: 0 !important;
    background: transparent !important;
}

#courseAccessModal .ai-toggle-switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

#courseAccessModal .ai-toggle-slider {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 34px !important;
    background-color: #ccc !important;
    box-shadow: inset 0 1px 3px #0003;
    transition: .4s;
    cursor: pointer;
}

#courseAccessModal .ai-toggle-slider:before {
    content: "";
    position: absolute !important;
    bottom: 3px !important;
    left: 3px !important;
    z-index: 2;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
    background-color: #fff !important;
    box-shadow: 0 2px 4px #00000040;
    transition: .4s;
}

#courseAccessModal input:checked+.ai-toggle-slider {
    background-color: #28a745 !important;
}

#courseAccessModal input:checked+.ai-toggle-slider:before {
    transform: translateX(24px);
}

.access-keys-table-container {
    width: -webkit-fill-available;
    margin-top: 15px;
    border: 1px solid var(--border-color);
    background: var(--container-bg-color) !important;
}

.student-view-toggle {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    height: 40px !important;
    margin-right: 10px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    background-color: var(--input-bg-color) !important;
}

.student-view-toggle label[for="studentViewToggle"] {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--secondary-text-color) !important;
    font-size: .9em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.student-view-toggle .ai-toggle-switch {
    position: relative !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.student-view-toggle .ai-toggle-switch input {
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.student-view-toggle .ai-toggle-slider {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 34px !important;
    background-color: #ccc !important;
    box-shadow: inset 0 1px 3px #0003 !important;
    transition: .4s !important;
    cursor: pointer !important;
}

body.dark-mode .student-view-toggle .ai-toggle-slider,
body.synthwave-mode .student-view-toggle .ai-toggle-slider {
    background-color: #4a5568 !important;
}

.student-view-toggle .ai-toggle-slider:before {
    content: "" !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 3px !important;
    z-index: 2;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    box-shadow: 0 2px 4px #00000040 !important;
    transition: .4s !important;
}

.student-view-toggle input:checked+.ai-toggle-slider {
    background-color: var(--button-success-bg) !important;
}

.student-view-toggle input:checked+.ai-toggle-slider:before {
    transform: translateX(20px) !important;
}

@media (max-width: 600px) {
    .student-view-toggle {
        padding: 4px 8px !important;
    }

    .student-view-toggle label {
        font-size: .8em !important;
    }
}

@media (max-width: 768px) {
    .ludo-top-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        height: 60px !important;
        padding: 5px 10px !important;
    }

    .ludo-icon-btn {
        display: flex !important;
        flex-shrink: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #fff3 !important;
        border-radius: 8px !important;
        background: #ffffff26 !important;
    }

    .ludo-icon-btn i,
    .ludo-icon-btn svg {
        display: block !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        opacity: 1 !important;
    }

    .ludo-status-display {
        flex-grow: 1 !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    .ludo-menu-content {
        display: flex !important;
        flex-direction: column !important;
        width: 95% !important;
        max-height: 85vh !important;
        padding: 15px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .ludo-menu-title {
        flex-shrink: 0;
        margin-bottom: 15px !important;
        font-size: 1.5em !important;
    }

    .ludo-board-selector,
    .ludo-bg-selector {
        gap: 8px !important;
        margin-bottom: 15px !important;
    }

    .board-option,
    .bg-option {
        height: auto !important;
        aspect-ratio: 16/9;
    }

    .ludo-track-selector {
        gap: 5px !important;
        margin-bottom: 15px !important;
    }

    .track-option {
        padding: 8px 4px !important;
        font-size: .8em !important;
    }

    .ludo-setup-group {
        margin-bottom: 10px !important;
    }

    .ludo-range {
        height: 8px !important;
        margin-top: 5px !important;
    }

    .ludo-setup-group:last-of-type {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 10px;
        padding: 10px;
        border-radius: 10px;
        background: #ffffff0d;
    }

    .ludo-setup-group:last-of-type label {
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin-bottom: 0 !important;
    }

    .ludo-play-btn {
        flex-shrink: 0;
        margin-top: 20px !important;
        padding: 12px !important;
        font-size: 1.1em !important;
    }
}

#ludoGameArea .ai-toggle-switch {
    position: relative !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#ludoGameArea .ai-toggle-switch input {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#ludoGameArea .ai-toggle-slider {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ffffff4d !important;
    border-radius: 34px !important;
    background-color: #fff3 !important;
    transition: .4s !important;
    cursor: pointer !important;
}

#ludoGameArea .ai-toggle-slider:before {
    content: "" !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 2px !important;
    z-index: 2 !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    box-shadow: 0 2px 4px #0000004d !important;
    transition: .4s !important;
}

#ludoGameArea .ai-toggle-switch input:checked+.ai-toggle-slider {
    background-color: #ffd700 !important;
    opacity: 1 !important;
    border-color: #ffd700 !important;
}

#ludoGameArea .ai-toggle-switch input:checked+.ai-toggle-slider:before {
    transform: translateX(24px) !important;
}

#ludoGameArea .ludo-setup-group:last-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .ludo-status-display {
        max-width: 65% !important;
        margin: 0 auto !important;
        font-size: .75em !important;
        line-height: 1.1 !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }
}

.duel-opponent-panel {
    flex-direction: column;
    -webkit-backdrop-filter: blur(5px);
}


@keyframes pulse-turn {
    0% {
        opacity: .5;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: .5;
        transform: scale(0.9);
    }
}

.round-score-bubble {
    pointer-events: none !important;
}

.duel-grid-header {
    display: grid;
    grid-template-columns: 30px 1fr 1fr;
    padding: 10px;
    background: #0000004d;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #ffffff1a;
}

.duel-history-row {
    display: grid;
    align-items: center;
    grid-template-columns: 30px 1fr 1fr;
    padding: 8px 10px;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #ffffff0d;
}

.duel-history-row.active {
    background: #ffffff0d;
    border-left: 2px solid #f1c40f;
}

.d-num {
    color: #666;
    font-size: 10px;
}

.d-score.my {
    color: #fff;
    font-weight: 700;
}

.d-score.opp {
    color: #aaa;
}

.waiting-dot {
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% {
        opacity: .2;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}

.duel-opponent-panel {
    position: absolute;
    top: 2%;
    right: 5%;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 160px;
    padding: 8px 12px;
    border: 1px solid #ffffff26;
    border-radius: 12px;
    background: #14141ed9;
    box-shadow: 0 4px 15px #00000080;
    transition: all .3s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.duel-opponent-panel.active-turn {
    box-shadow: 0 0 15px #e74c3c66;
    transform: scale(1.05);
    border-color: #e74c3c;
}

.duel-opp-avatar {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid #fff3;
    border-radius: 50%;
    background: linear-gradient(135deg, #4b6cb7, #182848);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.duel-opp-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.duel-opp-name {
    overflow: hidden;
    color: #aaa;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.duel-opp-score {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

.duel-opp-score span {
    color: #e74c3c;
}

.duel-sync-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    border-radius: 50%;
    background: #ffffff1a;
    color: #aaa;
    transition: .2s;
    cursor: pointer;
}

.duel-sync-btn:active {
    background: #ffffff4d;
    transform: scale(0.9);
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}


/* === Исправление переноса названий уроков === */
.lesson-folder-content li, 
.lesson-item-title,
span.lesson-title {
    height: auto !important;             /* Высота подстраивается под текст */
    padding-right: 10px;                 /* Отступ справа, чтобы текст не наезжал на карандаш */
    overflow: visible !important;        /* Показываем весь текст */
    line-height: 1.4;                    /* Делаем строки чуть свободнее */
    white-space: normal !important;      /* Разрешаем перенос строк */
    text-overflow: clip !important;      /* Убираем троеточие */
}

/* Убеждаемся, что контейнер (li) тоже растягивается */


/* === ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ ЗАГОЛОВКА УРОКА === */
#lessonViewTitle {
    display: block !important;
    width: 100% !important;            /* Растянуть на всю ширину */
    max-width: 100% !important;        /* Не вылезать за пределы */
    height: auto !important;           /* Высота по содержимому */
    margin-top: 10px !important;       /* Отступ от шапки */
    margin-bottom: 4px !important;
    padding: 0px 20px !important;    /* Отступы по бокам, чтобы текст не лип к краям */
    padding: 0px 20px !important;
 
    overflow: visible !important;      /* Показывать весь текст */
    font-size: 1.3em !important;
    text-align: center !important;
    line-height: 1.4 !important;
    
    /* Самое важное для переноса: */
    white-space: normal !important;    /* Разрешить перенос слов */
    word-wrap: break-word !important;  /* Переносить длинные слова */
    overflow-wrap: break-word !important;
    text-overflow: clip !important;    /* Убрать троеточие */
}


/* Контейнер, в котором лежит заголовок, тоже должен быть гибким */
.lesson-content-container, 
#lessonViewArea {
    width: 100% !important;
    max-width: 100vw !important;       /* Не шире экрана */
    box-sizing: border-box !important;
    overflow-x: hidden !important;     /* Скрыть горизонтальную прокрутку */
}


/* === УЛУЧШЕННЫЙ РЕДАКТОР ПРОГРАММ === */

/* 1. Настройка самого окна (Flex-контейнер) */
#programEditorModal .modal-content {
    display: flex;
    flex-direction: column;
    width: 95vw;
    max-width: 500px;
    height: 90vh; /* Фиксированная высота */
    max-height: 90vh;
    padding: 0; /* Убираем отступы контейнера, они будут у блоков */
    overflow: hidden; /* Скрываем скролл у самого окна */
    /* background-color: var(--bg-secondary); */ /* Чуть темнее фона карточек */
}

/* 2. Шапка (Закреплена) */
#programEditorModal .modal-header {
    z-index: 10;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--container-bg-color);
    border-bottom: 1px solid var(--border-color);
}

#programEditorModal .modal-header h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 700;
}

/* Кнопка закрытия (крестик) */


/* 3. Тело (Скроллится) */
#programEditorModal .modal-body {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 20px;
    padding: 5px;
    overflow-y: auto;
    background-color: var(--container-bg-color);
}

/* Поля ввода названия и обложки */


/* 4. Блок Дня */
.editor-day-block {
    padding: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.editor-day-header {
    background-color: var(--input-bg-color);
    color: var(--heading-color);
    border-bottom: 1px solid var(--border-color);
}

/* 5. Карточка упражнения (Редизайн) */
.editor-ex-item {
    position: relative;
    background: var(--container-bg-color);
    border-bottom: 1px solid var(--dashed-border-color);
}

.editor-ex-item:last-child {
    border-bottom: none;
}

/* Картинка */
.editor-ex-img {
    flex-shrink: 0;
    background-color: #000;
}

/* Инфо блок */
.editor-ex-info { /* Важно для обрезки текста */
}

.editor-ex-name {
    color: var(--text-color);
}

/* Блок таймеров (Инпуты) */
.editor-ex-inputs {
    align-items: center;
}

.time-input-group {
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
}

.time-input-group i {
    color: var(--secondary-text-color);
}

.editor-input-small {
    color: var(--text-color);
}

.editor-input-small:focus {
    color: var(--accent);
    outline: none;
}

/* Кнопка удаления упражнения */
.btn-remove-ex {
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--border-color); /* Скрытая, пока не наведешь */
    transition: color 0.2s;
    cursor: pointer;
}

.editor-ex-item:hover .btn-remove-ex {
    color: var(--feedback-incorrect-text);
}

/* Кнопка добавления упражнения */
.btn-add-ex {
    color: var(--accent);
    font-size: 0.9em;
    transition: background 0.2s;
}

.btn-add-ex:hover {
    background-color: var(--input-hover-bg-color);
}

/* 6. Подвал (Footer) */
#programEditorModal .modal-footer-actions {
    z-index: 10;
    flex-shrink: 0;
    padding: 15px 20px;
    background-color: var(--container-bg-color);
    border-top: 1px solid var(--border-color);
}


/* === ДОПОЛНЕНИЕ: СВОРАЧИВАЕМЫЕ НАСТРОЙКИ === */


/* Заголовок-кнопка */


/* Контент (поля ввода) */

/* === СОСТОЯНИЕ "СВЕРНУТО" === */


/* === ДОРАБОТКА РЕДАКТОРА (Сворачивание и Видео) === */

/* 1. Заголовок дня теперь кликабельный */
.editor-day-header {
    transition: background-color 0.2s;
    user-select: none;
}

.editor-day-header:hover {
    background-color: var(--hover-bg-color); /* Или просто чуть темнее */
}

/* 2. Иконка стрелочки */
.day-chevron {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--secondary-text-color);
    transition: transform 0.3s ease;
}


.editor-day-block.collapsed .day-chevron { /* Поворот стрелки */
}

/* 4. Картинка упражнения - кнопка Play */
.editor-ex-img {
    position: relative;
    z-index: 1;
    transition: transform 0.2s, filter 0.2s;
}

.editor-ex-img:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Добавляем иконку Play при наведении (опционально, через псевдо-элемент сложнее, оставим просто курсор и эффект) */


/* === РЕДИЗАЙН КАРТОЧКИ ПРОГРАММЫ (FINAL) === */

/* 1. Основа карточки */
.program-card {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.program-card:hover {
    will-change: transform, box-shadow;
}

/* APP STORE TIER: Объемная подсветка краев */
.program-card:hover {
    border-color: var(--accent);
}

/* PREMIUM UX: Глубокое эластичное вдавливание карточки программы (Apple Card Physics) */
.program-card:active {
    transform: scale(0.96) translateY(2px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    /* Ускоряем переход для нажатия, чтобы реакция была мгновенной */
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s ease !important;
    filter: brightness(0.95);
}

/* То же самое для кнопок управления на карточке, чтобы они не отскакивали вместе с картой */
.program-card .btn-card-tool:active,
.program-card .btn-delete-prog:active {
    transform: scale(0.85);
    transition: transform 0.1s;
}

/* 2. Область картинки (ВСЕГДА ВИДНА) */
.prog-card-visual {
    flex-shrink: 0; /* Фиксированная высота */
    background-color: #e2e2e2;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--border-color);
}


/* 4. Панель инструментов ПОД картинкой */
.prog-tools-row {
    display: flex;
    justify-content: flex-end; /* Кнопки справа */
    gap: 32px;
    min-height: 15px; /* Чтобы не скакало, если кнопок нет */
    margin-bottom: 1px;
}

/* Кнопки действий (Редактировать/Поделиться) */
.btn-card-tool {
    background-color: transparent;
    color: var(--secondary-text-color);
}


.btn-card-tool:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--primary); /* Цвет при наведении */
    border-color: var(--border-color);
}

/* Возвращаем иконки на карточки курсов */
.btn-card-tool i, 
.btn-card-tool svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    stroke: currentColor !important;
}

/* Возвращаем иконки в боковое меню урока */
.lesson-toolbar button i,
.lesson-toolbar button svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    stroke: currentColor !important;
}

/* 5. Текстовый контент */
.prog-card-title {
    margin-bottom: 6px;
    padding: 4px 30px;
    color: var(--heading-color);
}

.prog-card-desc {
    display: -webkit-box;
    margin-bottom: auto;
    color: var(--secondary-text-color);
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 6. Подвал карточки */
.prog-card-footer {
    border-top: 0px dashed var(--border-color);
}

/* Счетчик */
.prog-count-badge {
    color: var(--text-color);
}

/* Кнопка удаления (Корзина) */
.btn-delete-prog {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: transparent;
    color: var(--feedback-incorrect-text); /* Красный */
    transition: all 0.2s;
    cursor: pointer;
}

.btn-delete-prog:hover {
    background-color: var(--feedback-incorrect-bg);
    border-color: var(--feedback-incorrect-border);
}

.btn-delete-prog i, 
.btn-delete-prog svg {
    width: 20px;
    height: 20px;
}


/* === ИСПРАВЛЕНИЕ: МОДАЛЬНОЕ ОКНО НАСТРОЙКИ ТРЕНИРОВКИ === */

/* 1. Контейнер внутри модального окна */
#programConfigModal .training-config-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 5px; /* Небольшой отступ от краев окна */
}

/* 2. Список настроек (исправляем слипание) */
.config-list { /* ВАЖНО: Добавляем отступ между карточками */
    width: 100%;
}

/* 3. Карточка настройки (Длительность, Сложность и т.д.) */
.config-item {
    align-items: center !important;
    margin: 3px; /* Больше воздуха внутри */
    border: 1px solid var(--border-color); /* Скругление */
    background-color: var(--container-bg-color); /* Белый фон */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}


.config-item:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--accent);
}


/* Текст слева (Название настройки) */
.config-label {
    color: var(--heading-color);
}

/* Значение справа (Плашка) */
.config-value {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--text-color);
}

.config-item:hover .config-value {
    background-color: var(--accent);
}

/* Стрелочка справа */
.config-item::after {
    margin-top: -2px;
    color: var(--secondary-text-color);
}

/* 4. Заголовок раздела "ТАЙМИНГИ" */
.config-section-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; /* Больше отступа сверху и снизу */
    color: var(--secondary-text-color);
    text-align: center;
}

/* Линии по бокам от заголовка "ТАЙМИНГИ" */
.config-section-header::before,
.config-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    margin: 0 15px;
    background-color: var(--border-color);
    opacity: 0.5;
}

/* 5. Кнопка "ПОЕХАЛИ" */
#progConfigStartBtn {
    width: 100%;
    margin-top: 30px;
    padding: 16px;
    border: none;
    border-radius: 16px;
    background: var(--button-primary-bg); /* Синий градиент */
    color: #fff;
    font-size: 1.2em;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

#progConfigStartBtn:hover {
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

/* 6. Фон самого модального окна */
#programConfigModal .modal-content {
    max-height: 90vh;
    padding: 25px;
    border-radius: 24px;
    overflow-y: auto;
    background-color: var(--container-bg-color);
}


/* === НОВЫЙ ДИЗАЙН МОДАЛЬНОГО ОКНА ВЫБОРА === */

/* 1. Исправление шапки модального окна */
#exerciseSelectorModal .modal-header {
    display: flex !important;
    justify-content: space-between !important; /* Разносим заголовок и кнопку */
    align-items: center !important;
    min-height: 60px; /* Фиксированная высота */
    padding: 15px 20px !important;
    background-color: var(--container-bg-color);
}

#exerciseSelectorModal h3 {
    margin: 0 !important;
    font-size: 1.2em;
    font-weight: 700;
}

/* Кнопка закрытия (крестик) */
#exerciseSelectorModal .close-btn {
    position: static !important; /* Убираем абсолютное позиционирование */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 30px;
    margin: 0 !important; /* Сброс отступов */
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    transition: background 0.2s;
    cursor: pointer;
}

#exerciseSelectorModal .close-btn:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
}

/* 2. Новая структура карточки (Обертка) */
.selector-card-wrapper {
    border: 1px solid var(--border-color);
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
}

/* Основная строка (всегда видна) */
.card-main-row {
    position: relative; /* Показываем, что можно нажать */
}

.card-main-row:active {
    background-color: var(--input-hover-bg-color);
}

/* Картинка (Слева) */
.card-mini-img {
    flex-shrink: 0;
    background-color: #000;
}

/* Информация (Центр) */
.card-main-info {
    padding: 0 12px;
    overflow: hidden;
}

.card-title {
    margin-bottom: 4px;
    color: var(--text-color);
    line-height: 1.2;
}

.card-subtitle {
    color: var(--secondary-text-color);
}

/* Кнопка добавления (Справа) */
.btn-add-exercise {
    z-index: 2;
    flex-shrink: 0;
    background: var(--button-success-bg);
}

.btn-add-exercise:active {
    transform: scale(0.95);
}

/* 3. Разворачиваемая часть (Скрыта по умолчанию) */
.card-expanded-details { /* Скрыто */
    margin-top: 5px;
    animation: fadeIn 0.2s ease;
    border-top: 1px dashed var(--border-color);
}


.selector-card-wrapper.expanded {
    border-color: var(--accent);
}

/* Теги внутри развернутой части */
.details-tags {
    margin-top: 10px;
}

.details-tag {
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
}


 


/* === ФИКС РАСКРЫТИЯ КАРТОЧКИ НА ТЕЛЕФОНЕ === */
@media (max-width: 768px) {

    /* Анимация плавного появления */
    @keyframes mobileExpand {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* 1. Жестко скрываем детали по умолчанию */
    .selector-card-wrapper .card-expanded-details {
        display: none !important;
        opacity: 0;
        transition: opacity 0.2s;
        visibility: hidden !important;
    }

    /* 2. Жестко показываем, когда есть класс .expanded */
    .selector-card-wrapper.expanded .card-expanded-details {
        display: block !important;
        padding: 12px 15px !important;
        background-color: var(--input-bg-color) !important;
        opacity: 1;
        animation: mobileExpand 0.2s ease-out forwards;
        visibility: visible !important;
        border-top: 1px dashed var(--border-color) !important;
    }

    /* 3. Делаем область кликабельной */
    .card-main-row {
        cursor: pointer !important;
        /* Убираем синюю подсветку при тапе на Android/iOS */
        -webkit-tap-highlight-color: transparent; 
    }
    
    /* Доп. стили для тегов на мобильном */
    .details-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .details-tag {
        padding: 4px 8px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 6px !important;
        background: var(--container-bg-color) !important;
        color: var(--secondary-text-color) !important;
        font-size: 12px !important;
    }
}


 /* === ПОЛНЫЙ ПЕРЕЗАПУСК МОБИЛЬНЫХ СТИЛЕЙ ДЛЯ ВЫБОРА УПРАЖНЕНИЙ === */
@media (max-width: 900px) {
    /* 1. Сетка: Обычный вертикальный список */
    #exSelectorGrid {
        display: block !important;
        padding: 10px !important;
        padding-bottom: 80px !important;
    }

    /* 2. Карточка: Обычный блок (не flex) */
    .selector-card-wrapper {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 85px !important; /* Гарантируем высоту! */
        margin-bottom: 12px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        overflow: visible !important; /* Чтобы тени не обрезались */
        background: var(--container-bg-color) !important;
    }

    /* 3. Верхняя строка (Flex внутри блока) */
    .card-main-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        /* Важно: возвращаем фон, чтобы перекрывать детали при сворачивании */
        background-color: var(--container-bg-color) !important;
    }

    /* Картинка */
    .card-mini-img {
        position: static !important; /* Отменяем absolute */
        flex-shrink: 0 !important;
        width: 120px !important;
        min-width: 65px !important; /* Не сжимать */
        height: 70px !important;
        margin-right: 12px !important;
        border-radius: 8px !important;
        background-color: #eee !important;
        box-shadow: var(--neumorph-shadow-soft-sm);
        object-fit: cover !important;
    }


    /* Текст */
    .card-main-info {
        flex: 1 !important;
        min-width: 0 !important; /* Для работы text-overflow */
        padding: 0 !important;
    }

    .card-title {
        margin-bottom: 4px !important;
        font-size: 15px !important;
        white-space: normal !important;
    }

    /* Кнопка ПЛЮС */
    .btn-add-exercise {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        margin-left: 10px !important;
    }

    /* 4. Нижняя часть (Теги): Классическое переключение */
    /* Скрыто */
    .selector-card-wrapper .card-expanded-details {
        display: none !important;
    }

    /* Раскрыто (когда JS добавляет класс expanded) */
    .selector-card-wrapper.expanded .card-expanded-details {
        display: block !important;
        padding: 12px !important;
        background-color: var(--input-bg-color) !important;
        animation: fadeIn 0.2s ease;
        border-top: 1px dashed var(--border-color) !important;
    }

    /* Теги */
    .details-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .details-tag {
        font-size: 12px !important;
        text-align: center !important;
        white-space: normal !important;
    }
    
    /* 5. Исправление шапки модального окна */
    #exerciseSelectorModal .modal-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 50px !important;
        padding: 10px 15px !important;
    }
    
    #exerciseSelectorModal .close-btn {
        position: static !important;
        margin: 0 !important;
    }
}


/* Делаем теги визуально кликабельными */
.details-tag {
    transition: background-color 0.2s, transform 0.1s;
    cursor: pointer !important;
    user-select: none; /* Чтобы текст не выделялся при тапе */
}

/* Эффект нажатия на телефоне и наведения на ПК */
.details-tag:hover {
    background-color: var(--button-secondary-bg);
    border-color: var(--accent);
}

.details-tag:active {
    background-color: var(--accent);
    color: #fff;
    transform: scale(0.95);
}


/* === ОБНОВЛЕНИЕ ДЛЯ 4-Х ПОЛЕЙ ВВОДА В РЕДАКТОРЕ === */

/* Контейнер инпутов */
.editor-ex-inputs {
    margin-top: 4px;
}

/* Группа (Иконка + Инпут) */
.time-input-group {
    flex-grow: 1; /* Растягиваем, чтобы заполнить место */
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
}


/* Иконки внутри инпутов */
.time-input-group i {
    flex-shrink: 0;
    color: var(--secondary-text-color);
}

/* Сами поля ввода */
.editor-input-small {
    color: var(--text-color);
    font-weight: 700;
    outline: none;
}

/* АДАПТИВНОСТЬ: На телефоне делаем сетку 2x2 */
@media (max-width: 600px) {
    .editor-ex-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Два столбца равной ширины */
        width: 100%;
    }
    
    /* Скрываем подписи на телефоне, оставляем иконки, если места мало */
    .time-input-group {
        justify-content: space-between;
    }
}


/* === СТИЛИ ДЛЯ ПОВТОРОВ И ПОДХОДОВ === */

/* 1. В списке упражнений (Детали программы) */
.ex-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    color: var(--secondary-text-color);
    font-size: 0.85em;
}

.ex-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg-color);
}

.ex-meta-item i {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* 2. Индикатор повторений в ПЛЕЕРЕ */
.wp-reps-badge {
    position: absolute;
    top: 20%; /* Под названием упражнения */
    left: 20px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffd700;
    font-size: 1.5em;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    pointer-events: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* На мобильном чуть меньше и ниже */
@media (max-width: 600px) {
    .wp-reps-badge {
        top: 20%;
        left: 15px;
        font-size: 1.2em;
    }
}


/* === КНОПКА ИЗБРАННОГО В ПЛЕЕРЕ === */

/* Обертка для кнопок в правом верхнем углу */
.wp-header-actions {
    display: flex;
    flex-shrink: 0;   /* Кнопки не сжимаются под длинным названием */
    align-items: center;
    gap: 12px; /* Расстояние между звездой и крестиком */
    pointer-events: auto !important; /* Чтобы клики проходили */
}

/* Сама кнопка избранного */
.wp-fav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.wp-fav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Активное состояние (когда добавлено) */
.wp-fav-btn.active {
    background: rgba(255, 215, 0, 0.2); /* Золотистый фон */
    color: #ffd700; /* Золотая звезда */
}

.wp-fav-btn.active svg {
    fill: #ffd700; /* Заливка звезды */
}

/* Скрываем на превью, если нужно */
.wp-fav-btn.hidden {
    display: none;
}


/* === ИСПРАВЛЕНИЕ Z-INDEX ДЛЯ МОДАЛЬНЫХ ОКОН ПОВЕРХ ПЛЕЕРА === */
.modal-overlay.super-modal {
    z-index: 60000 !important; /* Выше плеера (50000) */
}

/* Также убедимся, что обычные модалки ниже плеера, но выше остального */
.modal-overlay {
    z-index: 20000;
}

/* В style.css или в <style> */


.message-actions-toolbar button {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #555 !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer;
    flex-shrink: 0 !important; /* ЖЕЛЕЗОБЕТОННАЯ ЗАЩИТА ОТ СПЛЮЩИВАНИЯ */
}

/* Гарантируем, что SVG иконки наследуют цвет и всегда имеют размер */
.message-actions-toolbar button i,
.message-actions-toolbar button svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    display: block !important;
    color: inherit !important;
    stroke: currentColor !important;
    stroke-width: 2px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.message-actions-toolbar button:hover {
    background-color: rgba(0,0,0,0.05) !important; /* Легкий фон при наведении */
    color: var(--accent) !important; /* Цвет при наведении (например, красный/синий) */
    transform: scale(1.1);
}

/* Исправление для Темной темы (чтобы иконки стали светлыми на темном фоне) */
body.dark-mode .message-actions-toolbar button,
body.synthwave-mode .message-actions-toolbar button,
body.oled-mode .message-actions-toolbar button {
    color: #ccc !important;
}

body.dark-mode .message-actions-toolbar button:hover,
body.synthwave-mode .message-actions-toolbar button:hover,
body.oled-mode .message-actions-toolbar button:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}


/* Скрываем картинку, когда вопрос свернут */
.question-bubble.collapsed .question-image-container {
    display: none !important;
}

/* Дополнительно: убедимся, что текст в свернутом состоянии обрезается и выглядит аккуратно */
.question-bubble.collapsed .question-text-content {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 2; /* Оставляем только 2 строки текста */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/* Убираем лишние отступы в свернутом состоянии */
.question-bubble.collapsed {
    padding-top: 10px;
    padding-bottom: 10px;
}


/* === КРАСИВОЕ ОКНО ПОДТВЕРЖДЕНИЯ ЗАГРУЗКИ === */

/* Фон-затемнение */


/* Само окно */


/* Заголовок */

/* Иконка в заголовке */

/* Текст описания */

/* Кнопки */

.upload-btn {
    flex: 1;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
}

.upload-btn.cancel {
    border: 1px solid var(--border-color, #444);
    background-color: transparent;
    color: var(--text-color, #fff);
}
.upload-btn.cancel:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.upload-btn.confirm {
    background-color: var(--primary, #3498db);
    color: var(--on-primary);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}
.upload-btn.confirm:hover {
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
    transform: translateY(-2px);
}


/* === ИСПРАВЛЕНИЕ: ДЕЛАЕМ ТОЧКИ КЛИКАБЕЛЬНЫМИ === */
.ai-custom-scrollbar {
    /* Поднимаем выше заголовка (1004) и поля ввода (1003) */
    z-index: 2000 !important; 
    /* Сам контейнер пропускает клики, чтобы не мешать скроллу пальцем */
    pointer-events: none; 
}

.scrollbar-track {
    z-index: 2001;
    pointer-events: auto !important; /* Полоса прокрутки активна */
}

.scrollbar-thumb {
    z-index: 2002;
    cursor: grab;
    pointer-events: auto !important; /* Ползунок активен */
}

.scrollbar-dot {
    z-index: 2003 !important; /* Самый высокий приоритет внутри скролла */
    /* Увеличиваем зону клика */
    border: 2px solid transparent;
    cursor: pointer !important;
    pointer-events: auto !important; /* Точки ОБЯЗАТЕЛЬНО активны */ 
    background-clip: padding-box;
}

.scrollbar-dot:hover {
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%) scale(1.3) !important;
}

/* Подсказка должна быть выше всего */
.scrollbar-preview-tooltip {
    z-index: 20005 !important;
}
/* ============================================== */


.dot-color-picker {
    position: fixed;
    /* Ставим индекс выше, чем у чата (20000) и оверлеев */
    z-index: 50000 !important; 
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 50px; /* Делаем овальным */
    background-color: var(--container-bg-color);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); /* Сильная тень для выделения */
    animation: zoomIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center bottom;
}

/* Добавим стили для анимации, если их нет */
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.color-swatch {
    width: 28px;
    height: 28px;
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-color);
    transition: transform 0.2s ease;
    cursor: pointer;
}

.color-swatch:hover {
    z-index: 2;
    transform: scale(1.2);
}

.color-picker-reset {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.color-picker-reset:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--accent);
}
 

/* === ИСПРАВЛЕНИЕ: Принудительное скрытие переключателя === */
#studentViewToggleContainer.hidden {
    display: none !important;
}

/* === FIX: ПРИНУДИТЕЛЬНОЕ ВКЛЮЧЕНИЕ STICKY ВИДЕО === */

/* 1. Заставляем основные контейнеры не обрезать контент */
html, body, .app-wrapper, .container, #lessonViewArea {
    height: auto !important;      /* Высота по содержимому */
    max-height: none !important;
    overflow: visible !important; /* Разрешаем вылезать за границы */
}

/* 2. Настраиваем контейнер видео */
.floating-video-container {
    /* Обязательно sticky */
    position: -webkit-sticky !important;
    position: sticky !important;
    
    /* Отступ сверху (чтобы не прилипало к самому краю) */
    top: 10px !important;
    
    /* Поверх всего текста */
    z-index: 1000 !important;
    margin-bottom: 40px; 
    
    /* Скругление */
    border-radius: 12px;
    overflow: hidden;
    
    /* Белый/Темный фон, чтобы текст не просвечивал под видео при прокрутке */
    background-color: var(--container-bg-color);
    
    /* Тень для отделения от текста */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    
    /* Важно: предотвращает растягивание во флекс-контейнере */
    align-self: flex-start !important;
}

/* 3. Контейнер текста должен просто течь вниз */
.lesson-content-container {
    height: auto !important;
    overflow: visible !important;
}

/* 4. Исправление для мобильных (чтобы не уезжало вбок) */
@media (max-width: 768px) {
    .floating-video-container {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important; /* На телефоне прижимаем к самому верху */
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        border-radius: 0 0 12px 12px !important;
    }
}


/* ========================================= */
/* === НОВЫЙ ДИЗАЙН РАЗДЕЛА ТРЕНИРОВКИ === */
/* ========================================= */

/* 1. Верхняя панель и Навигация */
.fitness-top-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

/* Стильный переключатель вкладок (Segmented Control) */
.fitness-tabs-switch {
    /* position: relative; */
    display: flex;
    flex-grow: 1;
    /* gap: 5px; */
    padding: 10px 10px 10px;
    border-radius: 16px;
    background-color: var(--input-bg-color);
    box-shadow: var(--neumorph-shadow-inset) !important;
}


.fit-tab-btn {
    z-index: 2;
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.fit-tab-btn.active {
    background-color: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 0 1px var(--border-color);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    transform: scale(1.02);
}

/* 2. Вкладка "Параметры" (Конфигуратор) */
.training-config-container {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.config-section-header {
    margin: 25px 0 10px 5px;
    color: var(--secondary-text-color);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.8;
    text-transform: uppercase;
}

.config-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Карточка настройки (как в iOS) */
.config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border: 1px solid transparent;
    border-radius: 16px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all 0.2s ease;
    cursor: pointer;
}

.config-item:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    border-color: var(--accent);
}

.config-item:active {
    background-color: var(--input-bg-color);
    transform: scale(0.98);
}

.config-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
    font-size: 1.05em;
    font-weight: 600;
}

.config-value {
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.1);
    color: var(--accent);
    font-size: 0.95em;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}

.config-item:hover .config-value {
    background: var(--accent);
    color: #fff;
}

/* Стрелочка справа */
.config-item::after {
    content: '›';
    margin-left: 10px;
    color: var(--secondary-text-color);
    font-family: monospace;
    font-size: 1.5em;
    font-weight: bold;
    opacity: 0.5;
    transition: transform 0.2s;
}
.config-item:hover::after {
    color: var(--text-color);
    transform: translateX(3px);
}

/* Большая кнопка старта */
.btn-start-training {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 35px;
    padding: 18px 0;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: white;
    font-size: 1.2em;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
    will-change: transform; 
    cursor: pointer;
    text-transform: uppercase;
}

/* PREMIUM UX: Бесконечный световой перелив (Liquid Shimmer) */
.btn-start-training::after {
    content: '';
    position: absolute;
    top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    animation: premiumShimmer 3s infinite;
    pointer-events: none;
}

@keyframes premiumShimmer {
    0% { left: -150%; }
    50% { left: 150%; }
    100% { left: 150%; }
}

.btn-start-training::before {
    content: '';
    display: inline-block;
    width: 0; 
    height: 0;
    margin-right: 5px; 
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid white;
}

.btn-start-training:hover {
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.4);
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.btn-start-training:active {
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
    transform: scale(0.97);
}


.program-card {
    align-items: center;
    gap: 0;
    padding: 0; /* Убираем паддинг, чтобы картинка была на весь фон или сверху */
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-secondary), var(--input-bg-color));
    /* ОПТИМИЗАЦИЯ VRAM: Удален статический will-change */
    transform: translateZ(0);
}

.program-card:hover {
    border-color: var(--accent);
}


/* Адаптивность */
@media (max-width: 600px) {
    .fitness-top-bar {
        flex-direction: row; /* Оставляем в строку */
        gap: 10px;
    }
    .fitness-tabs-switch {
        flex-grow: 1;
        justify-content: space-between;
    }
    .fit-tab-btn {
        flex-grow: 1;
        padding: 8px 10px;
        font-size: 0.85em;
    }
    .config-item {
        padding: 16px 20px;
        border-radius: 16px;
    }
    .btn-start-training {
        bottom: auto;
        /* На мобильных кнопку можно прибить к низу для удобства */
        /* position: fixed; bottom: 20px; left: 5%; width: 90%; z-index: 100; */
        /* Но пока оставим просто большой */
        width: 100%;
        margin-top: 25px;
    }
}


/* === ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ КОМПЛЕКСОВ === */

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Чуть шире карточки */
    gap: 20px;
    padding: 10px 5px 80px 5px; /* Отступ снизу для FAB */
}

/* 1. Карточка Комплекса */
.program-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.2s ease;
    will-change: transform; /* Ускоряет анимацию поднятия карточки при наведении */
    cursor: pointer;
}

.program-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transform: translateY(-5px);
    border-color: var(--accent);
}

.program-card:active {
    transform: scale(0.98);
}

/* 2. Визуальная шапка (Картинка) */
.prog-card-visual {
    position: relative;
    width: 100%;
    height: 140px;
    background-size: cover;
    background-position: center;
}

/* Эмодзи/Тип в углу */

/* 3. Тело карточки */
.prog-card-body {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: 15px;
}

/* Заголовок и меню в одну строку */

.prog-card-title {
    /* Ограничение в 2 строки */
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--heading-color);
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Контейнер кнопок (Карандаш, Удалить) */

.btn-card-tool {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    transition: all 0.2s;
    cursor: pointer;
}

.btn-card-tool:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

.btn-card-tool i, .btn-card-tool svg {
    width: 16px;
    height: 16px;
}

/* Описание */
.prog-card-desc {
    display: -webkit-box;
    flex-grow: 1; /* Толкает футер вниз */
    margin: 5px 0 15px 0;
    overflow: hidden;
    color: var(--secondary-text-color);
    font-size: 0.9em;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Подвал (Статистика и кнопка Play) */
.prog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-color); /* Тонкая линия */
}

.prog-count-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
    font-size: 0.85em;
    font-weight: 600;
    opacity: 0.8;
}

/* Индикатор Play (справа внизу) */


/* === ПЛАВАЮЩАЯ КНОПКА СОЗДАНИЯ (+) === */
@keyframes siriBreathe {
    0%, 100% { box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 20%, transparent); }
    50% { box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.floating-create-btn {
    position: fixed;
    right: auto; /* Сбрасываем right */
    bottom: 3%;
    left: 30px;  /* Было right, стало left */
    z-index: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, black));
    color: white;
    /* APP STORE TIER: Живое свечение (Breathing Glow) */
    animation: siriBreathe 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s;
    cursor: pointer;
}

.floating-create-btn:hover {
    filter: brightness(1.1);
}

.floating-create-btn:active {
    transform: scale(0.9) rotate(90deg);
    transition: transform 0.1s;
}

.floating-create-btn:hover {
    transform: scale(1.1) rotate(90deg);
}

.floating-create-btn svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.5;
}

/* Адаптив для кнопки на мобильных */
@media (max-width: 600px) {
    .floating-create-btn {
        bottom: 0%; /* Выше, если есть нижнее меню навигации */
        left: 5px;
    }
}


/* Стили для редактора программ */
    .collapsible-section {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
    }
    .collapsible-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background: var(--input-bg-color);
        font-weight: 500;
        cursor: pointer;
    }
    .collapsible-content {
        padding: 15px;
        border-top: 1px solid var(--border-color);
    }
    .collapsible-section.collapsed .collapsible-content {
        display: none;
    }
    .collapsible-section.collapsed .chevron {
        transform: rotate(-90deg);
    }

    .editor-day-block {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        background: var(--bg-color);
    }
    .editor-day-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        background: var(--input-bg-color);
        font-weight: bold;
        cursor: pointer;
    }
    .editor-day-block.collapsed .editor-exercises-list,
    .editor-day-block.collapsed .btn-add-ex {
        display: none;
    }
    .editor-day-block.collapsed .day-chevron {
        transform: rotate(-90deg);
    }

    .editor-ex-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background: var(--bg-color);
        border-bottom: 1px solid var(--border-color);
    }
    .editor-ex-img {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        cursor: pointer;
        object-fit: cover;
    }
    .editor-ex-info {
        flex-grow: 1;
        min-width: 0;
    }
    .editor-ex-name {
        margin-bottom: 4px;
        overflow: hidden;
        font-size: 0.9em;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .editor-ex-inputs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .time-input-group {
        display: flex;
        align-items: center;
        padding: 2px 6px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background: var(--input-bg-color);
    }
    .time-input-group i {
        width: 12px;
        height: 12px;
        margin-right: 4px;
        color: var(--secondary-text-color);
    }
    .editor-input-small {
        width: 30px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--text-color);
        font-size: 0.85em;
        text-align: center;
    }
    
    .btn-add-ex {
        width: 100%;
        padding: 10px;
        border: none;
        background: none;
        color: var(--accent);
        font-weight: 500;
        cursor: pointer;
        border-top: 1px solid var(--border-color);
    }
    
    .filter-chip {
        height: 35px;
        padding: 1px 2px;
        border: 1px solid var(--border-color);
        border-radius: 7px;
        background: var(--border-color);
        /* Цвет текста был не задан вовсе, и приходил из базового правила
           button — то есть белый. Белым по светло-серой рамке-фону надпись
           не читалась ни в одной теме (контраст 1.67). */
        color: var(--text-color);
        font-size: 0.85em;
        transition: all 0.2s;
        cursor: pointer;
        white-space: nowrap;
    }
    .filter-chip:hover, .filter-chip.active {
        background: var(--accent);
        color: white;
        border-color: var(--accent);
    }
    
    /* Стили для карточки в селекторе */
    .selector-card-wrapper {
        margin-bottom: 8px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        overflow: hidden;
        background: var(--container-bg-color);
        transition: all 0.2s ease;
    }
    .card-main-row {
        display: flex;
        align-items: center;
        padding: 8px;
        cursor: pointer;
    }
    .card-mini-img {
        width: 48px;
        height: 48px;
        border-radius: 6px;
        background: #eee;
        object-fit: cover;
    }
    .card-main-info {
        flex-grow: 1;
        min-width: 0;
        margin-left: 12px;
    }
    .card-title {
        display: flex;
        align-items: center;
        color: var(--text-color);
        font-size: 0.95em;
        font-weight: 600;
    }
    .card-subtitle {
        overflow: hidden;
        color: var(--secondary-text-color);
        font-size: 0.8em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .btn-add-exercise {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: var(--primary);
        color: var(--on-primary);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        transition: transform 0.1s;
        cursor: pointer;
    }
    
    .card-expanded-details {
        display: none; /* Скрыто по умолчанию */
        padding: 10px;
        background: var(--input-bg-color);
        border-top: 1px solid var(--border-color);
    }
    .selector-card-wrapper.expanded .card-expanded-details {
        display: block; /* Показываем при разворачивании */
    }
    .details-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .details-tag {
        padding: 3px 8px;
        border-radius: 4px;
        background: rgba(0,0,0,0.05);
        color: var(--secondary-text-color);
        font-size: 0.75em;
        cursor: pointer;
    }
    .details-tag:hover {
        background: var(--accent);
        color: white;
    }


    /* Стили для ручки перетаскивания */
.drag-handle {
    flex-shrink: 0;
    padding: 0px; /* Увеличим область нажатия */
    color: var(--secondary-text-color);
    touch-action: none; /* Важно для мобильных */
}

.drag-handle:active {
    opacity: 1;
}

/* Подсветка перетаскиваемого элемента */
.sortable-ghost {
    background-color: var(--accent-color-transparent);
    opacity: 0.4;
}

/* Элемент, который мы тащим (убираем лишнее) */
.sortable-drag {
    background: var(--bg-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Обновляем отступы для уроков и папок, чтобы вместить ручку */
.chapter-header, .course-lesson-row {
    padding-left: 10px !important; /* Сбрасываем большие отступы, будем регулировать структурой */
}

/* Чтобы можно было кидать ВНУТРЬ папки */
.chapter-content {
    min-height: 10px; /* Чтобы можно было бросить в пустую папку */
    padding-bottom: 5px;
}

#lessonFooterNavigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 40px; /* Отступ снизу для мобилок */
    border-top: 1px solid var(--border-color);
}


/* Когда галерея открыта, скрываем кастомный скроллбар */
.ai-chat-modal-content.gallery-open .ai-custom-scrollbar {
    display: none !important;
}


/* Подсказка для иконки Google */
.grounded-icon-tooltip {
    z-index: 40000 !important; /* Увеличили до максимума */
}

/* Подсказка для текста с источниками */
.source-tooltip {
    z-index: 40000 !important; /* Увеличили до максимума */
}

/* Также на всякий случай проверяем, чтобы тултипы не были ограничены родителями */
body > .grounded-icon-tooltip,
body > .source-tooltip {
    /* Эти элементы должны добавляться прямо в body скриптом */
}

/* Стили для интерактивного меню, перенесенного в body */
.interactive-dropdown-content.in-body {
    position: fixed !important; /* Фиксируем относительно экрана */
    z-index: 35000 !important;  /* Выше чем модальные окна (30000) */
    display: block !important;
    min-width: 200px;
    max-height: 300px;
    padding: 5px 0;
    border: 1px solid var(--accent);
    border-radius: 12px;
    overflow-y: auto;
    background-color: var(--container-bg-color, #ffffff);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: fadeIn 0.1s ease-out;
}

/* Ссылки внутри меню */
.interactive-dropdown-content.in-body a {
    display: block;
    padding: 12px 15px;
    color: var(--text-color);
    font-size: 0.95em;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.interactive-dropdown-content.in-body a:last-child {
    border-bottom: none;
}

.interactive-dropdown-content.in-body a:hover {
    background-color: var(--accent);
    color: white;
}


/* === UPDATED STYLES FOR MED CALC === */
.med-table-wrapper {
    margin-top: 20px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow-x: auto;
    background: var(--bg-secondary);
}

.med-result-table {
    width: 100%;
    font-size: 0.95em;
    border-collapse: collapse;
}

.med-result-table th,
.med-result-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.med-result-table thead th {
    background: var(--bg-tertiary, rgba(0,0,0,0.03));
    color: var(--text-color);
    font-weight: 700;
}

.med-result-table tbody tr:last-child td {
    border-bottom: none;
}

.med-result-table .group-header td {
    padding-top: 18px;
    padding-bottom: 10px;
    background-color: var(--bg-tertiary, rgba(0,0,0,0.03));
    color: var(--secondary-text-color);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
}

.med-result-table .drug-row {
    transition: background 0.2s ease;
}

.med-result-table .drug-row:hover {
    background: rgba(var(--accent-rgb, 15, 111, 216), 0.05);
}

.med-result-table td small {
    display: block;
    margin-top: 6px;
    color: var(--secondary-text-color);
    line-height: 1.4;
}

.med-calc-interface {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.med-calc-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.med-calc-header h3 {
    margin: 0;
    font-size: 1.4rem;
}

.med-calc-subtitle {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: 0.95rem;
}

.med-calc-header-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.med-calc-header-actions {
    display: flex;
    gap: 8px;
}

.med-calc-header button.btn-secondary-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.med-calc-form {
    display: grid;
    gap: 5px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
}

.med-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.med-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.med-field label {
    font-size: 0.9rem;
    font-weight: 600;
}

.med-field label span.required {
    color: var(--button-danger-bg, #e74c3c);
}

.med-number-with-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.med-number-with-slider input[type="number"] {
    flex: 1;
    min-width: 110px;
}

.med-number-with-slider input[type="range"] {
    flex: 2;
    accent-color: var(--accent);
}

.med-inline-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.med-inline-group select,
.med-inline-group input {
    flex: 1;
}

.med-actions-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.med-actions-line .btn {
    justify-content: center;
    min-width: 160px;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
}

.med-actions-line .btn-secondary-small {
    justify-content: center;
    min-width: 120px;
}

.med-form-message {
    display: none;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.med-form-message.visible {
    display: block;
}

.med-form-message.success {
    border: 1px solid rgba(46, 204, 113, 0.25);
    background: rgba(46, 204, 113, 0.12);
    color: var(--success-text, #27ae60);
}

.med-form-message.error {
    border: 1px solid rgba(231, 76, 60, 0.25);
    background: rgba(231, 76, 60, 0.12);
    color: var(--button-danger-bg, #c0392b);
}


.med-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.med-checkbox input {
    width: 18px;
    height: 18px;
}

.med-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.med-search {
    position: relative;
    flex: 1 1 280px;
}

.med-search input[type="search"] {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg-color);
    color: var(--text-color);
    box-shadow: var(--neumorph-shadow-inset) !important;
}

.med-search i {
    position: absolute;
    top: 50%;
    left: 12px;
    color: var(--secondary-text-color);
    transform: translateY(-50%);
}


.med-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
}

.med-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.med-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.med-summary-label {
    color: var(--secondary-text-color);
    font-size: 0.8rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.med-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb, 15, 111, 216), 0.12);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
}


.med-dose-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.med-dose-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 12px;
    border-left: 3px solid transparent;
}

.med-dose-item.highlight {
    border-left-color: var(--accent);
}


.med-dose-label {
    color: var(--secondary-text-color);
    font-weight: 600;
}


.med-note,
.med-note-list,
.med-note-block {
    color: var(--secondary-text-color);
    font-size: 0.85rem;
    line-height: 1.5;
}


.med-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(var(--accent-rgb, 15, 111, 216), 0.15);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.med-tag + .med-tag {
    margin-left: 6px;
}


.med-drug-primary {
    font-size: 1rem;
    font-weight: 700;
}


@keyframes medPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 15, 111, 216), 0.4);
    }
    100% {
        box-shadow: 0 0 0 16px rgba(var(--accent-rgb, 15, 111, 216), 0);
    }
}


@keyframes highlightFade {
    0% {
        background-color: rgba(var(--accent-rgb, 15, 111, 216), 0.25);
    }
    100% {
        background-color: transparent;
    }
}

/* Responsive */
@media (max-width: 900px) {
    .med-result-table thead {
        display: none;
    }
    .med-result-table,
    .med-result-table tbody,
    .med-result-table tr,
    .med-result-table td {
        display: block;
        width: 100%;
    }
    .med-result-table tr {
        margin-bottom: 16px;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        overflow: hidden;
        background: var(--bg-primary);
    }
    .med-result-table td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-color);
    }
    .med-result-table tr.group-header {
        margin-bottom: 6px;
        border: none;
        background: transparent;
    }
    .med-result-table tr.group-header td {
        padding: 10px 0;
        border: none;
    }
}

/* Lucide icon sizing tweaks */
.med-dose-card i[data-lucide],
.med-summary i[data-lucide],
.med-toast i[data-lucide] {
    width: 18px;
    height: 18px;
}

/* === Medical Calculator Upgrades === */

/* Секция клиренса креатинина */
.med-ckd-section {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(var(--primary-rgb), 0.05);
    animation: fadeIn 0.3s ease;
}

.med-ckd-section.hidden {
    display: none;
}

.med-ckd-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--container-bg-color);
    font-size: 0.85rem;
}


/* Статусы почек (Бейджи) */
.med-badge.ckd-normal { border: 1px solid rgba(46, 204, 113, 0.3); background: rgba(46, 204, 113, 0.15); color: #27ae60; }
.med-badge.ckd-moderate { border: 1px solid rgba(243, 156, 18, 0.3); background: rgba(243, 156, 18, 0.15); color: #d35400; }
.med-badge.ckd-severe { border: 1px solid rgba(231, 76, 60, 0.3); background: rgba(231, 76, 60, 0.15); color: #c0392b; }

/* Исправление слайдера (ползунка) */
.med-number-with-slider input[type=range] {
    height: 24px;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Трек слайдера */
.med-number-with-slider input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: var(--border-color);
}
.med-number-with-slider input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: var(--border-color);
}

/* Ползунок слайдера */
.med-number-with-slider input[type=range]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -6px; /* Центрирование */
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-appearance: none;
}
.med-number-with-slider input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Срочные предупреждения */
.med-urgent {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 4px;
    background: rgba(231, 76, 60, 0.1);
    color: #c0392b;
    font-size: 0.8em;
    font-weight: 700;
}


/* ========================================= */
/* === СТИЛИ МЕНЮ МЕДИЦИНСКОГО КАЛЬКУЛЯТОРА === */
/* ========================================= */

/* Сетка для карточек меню */
.med-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    padding: 10px 5px;
}

/* Карточка меню (Кнопка входа в раздел) */
.med-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    background-color: var(--container-bg-color);
    text-decoration: none;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

/* Ховер-эффект карточки */
.med-card:hover {
    box-shadow: var(--neumorph-shadow-soft);
    transform: translateY(-5px);
    border-color: var(--accent);
}

/* Иконка слева (Квадрат с цветом) */
.med-icon {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.med-icon i,
.med-icon svg {
    stroke-width: 2px;
}

/* Текстовая часть карточки */
.med-info {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    overflow: hidden;
}

.med-info h3 {
    margin: 0 0 5px 0;
    color: var(--heading-color);
    font-size: 1.15em;
    font-weight: 700;
    text-align: left;
    line-height: 1.2;
}

.med-info p {
    
    /* Обрезка текста если слишком длинный */
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--secondary-text-color);
    font-size: 0.9em;
    text-align: left;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Стрелочка справа (декоративная) */
.med-card::after {
    content: '→';
    position: absolute;
    top: 50%;
    right: 20px;
    color: var(--border-color);
    font-family: monospace;
    font-size: 1.5em;
    font-weight: bold;
    opacity: 0;
    transform: translateY(-50%);
    transition: all 0.2s ease;
}

.med-card:hover::after {
    right: 15px;
    color: var(--accent);
    opacity: 1;
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
    .med-calc-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 12px;
    }
    
    .med-card {
        padding: 15px;
    }
    
    .med-icon {
        width: 48px;
        height: 48px;
    }
    
    .med-info h3 {
        font-size: 1.1em;
    }
}


/* 1. Базовый контейнер карточки */
    .file-share-content {
        position: relative;
        z-index: 2; /* Поверх фона сообщения */
        display: flex !important;
        align-items: center;
        width: fit-content;
        min-width: 250px;
        max-width: 100%;
        margin-top: 5px;
        padding: 12px 16px;
        border: 1px solid var(--border-color, #e0e0e0);
        border-radius: 12px;
        background-color: var(--bg-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        cursor: pointer;
    }
    
    /* 2. Стиль для папок */
    .file-share-content.folder-style {
        background-color: #f8f9fa00 !important;
        border-left: 4px solid #ffd700 !important;
    }
    
    /* 3. Гарантия видимости даже при группировке (chained) */
    .message.chained.folder-share-bubble .message-main-content,
    .message.chained.file-share-bubble .message-main-content {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .message.chained .file-share-content {
        display: flex !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 4. Сброс стилей сообщения-обертки */
    .message.folder-share-bubble,
    .message.file-share-bubble {
        margin-top: 2px !important;
        margin-bottom: 6px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* 5. Иконки */
    .file-share-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        margin-right: 12px;
        border-radius: 8px;
        background-color: rgba(0,0,0,0.05);
    }
    .file-share-icon.folder-icon {
        background-color: rgba(255, 215, 0, 0.15);
        color: #d4ac0d;
    }

    /* 6. Текст */
    .file-share-details { flex-grow: 1; overflow: hidden; }
    .file-share-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    overflow-wrap: anywhere;
}
    .file-share-info { color: var(--secondary-text-color); font-size: 0.85em; }
    
    /* 7. Стрелка */
    .file-share-arrow { margin-left: 10px; opacity: 0.5; }

    /* Темная тема */
    body.dark-mode .file-share-content {
        background-color: var(--message-bg-other);
        border-color: var(--border-color);
    }


    /* =================================================== */
    /* СТИЛИ ДЛЯ СПИСКА УРОКОВ И ПАПОК В КУРСАХ (LMS)      */
    /* =================================================== */

    #courseLessonsList {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }

    /* Стили для папки (модуля) */
    .chapter-item {
         
        border: 1px solid var(--border-color, #e0e0e0);
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.2s ease;
        box-shadow: var(--neumorph-shadow-soft-sm);
    }

    .chapter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background: var(--input-bg-color, #ffffff);
        cursor: pointer;
        user-select: none;
    }

    .chapter-header:hover {
        border-color: var(--accent);
    }

    .chapter-title-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-color);
        font-size: 0.95em;
        font-weight: 600;
        flex: 1 1 auto;
        min-width: 5.5em; /* титул не схлопывается в вертикаль на вложенных папках */
    }

    .chapter-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--secondary-text-color);
        flex-shrink: 0;
    }
    /* Кнопки действий папки компактны и не растягивают строку */
    .chapter-meta .icon-btn-flat { margin-right: 0 !important; flex-shrink: 0; }
    .chapter-meta .icon-btn-flat i,
    .chapter-meta .icon-btn-flat svg { width: 15px; height: 15px; }

    .lesson-count {
        padding: 2px 8px;
        border-radius: 12px;
        background: var(--border-color, #e0e0e0);
        font-size: 0.85em;
    }

    .chevron {
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease;
    }

    /* Содержимое папки (скрыто по умолчанию) */
    .chapter-content {
        display: none;
        flex-direction: column;
        gap: 10px;
        /* Уменьшенный боковой отступ: на вложенных папках титул иначе схлопывался */
        padding: 14px 10px 12px 10px;
        border-top: 1px solid var(--border-color, #e0e0e0);
    }

    /* Открытая папка */
    /* ИСПРАВЛЕНИЕ: Используем '>', чтобы открывался только родной контент, а не вложенные папки */
    .chapter-item.open > .chapter-content {
        display: flex;
    }
    
    /* То же самое для стрелки - поворачиваем только стрелку этой папки */
    .chapter-item.open > .chapter-header .chevron {
        transform: rotate(180deg);
    }

    /* Стили для отдельного урока (строки) */
    .course-lesson-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        border: 1px solid var(--border-color, #e0e0e0);
        border-radius: 8px;
        background: var(--container-bg-color, #ffffff);
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .course-lesson-row:hover {
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        transform: translateX(4px);
        border-color: var(--accent, #3498db);
    }

    .lesson-row-left {
        display: flex;
        flex-grow: 1;
        align-items: center;
        gap: 10px;
        overflow: hidden;
    }

    .lesson-title {
        overflow: hidden;
        color: var(--text-color);
        font-size: 0.95em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .lesson-icon {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        color: var(--button-success-bg, #2ecc71);
    }

    .lesson-row-right {
        display: flex;
        flex-shrink: 0;
        gap: 5px;
    }

    /* Иконки действий (редактировать/удалить) */
    .icon-btn-flat {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--secondary-text-color);
        transition: all 0.2s;
        cursor: pointer;
    }

    .icon-btn-flat:hover {
        background: var(--border-color, #e0e0e0);
        color: var(--text-color);
    }

    /* Ручка для Drag & Drop */
    .drag-handle {
        width: 18px;
        height: 18px;
        margin-right: 5px;
        opacity: 0.4;
        cursor: grab;
    }
.drag-handle:active {
        cursor: grabbing;
    }  

/* =================================================== */
/* ПЛАВАЮЩИЙ ТУЛБАР УРОКА (Улучшенный дизайн)          */
/* =================================================== */

.lesson-toolbar {
    right: 0;
    /* Отступ слева под "язычок" */
    padding-left: 20px;
    border: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, rgba(255, 255, 255, 0.9));
    box-shadow: -4px 0 15px rgba(0,0,0,0.1);
    -webkit-backdrop-filter: blur(10px);
    border-right: none; 
}


/* Язычок для перетаскивания (Handle) */
.lesson-toolbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    width: 15px; /* Ширина зоны клика/язычка */
    height: 99%;
    /* background-image: radial-gradient(circle at center, var(--secondary-text-color, #999) 1.5px, transparent 2px); */
    opacity: 0.5;
    transition: opacity 0.2s;
    cursor: pointer;
    background-size: 100% 8px; /* Создает эффект ребристой поверхности (точек) */
    background-position: center;
    background-repeat: repeat-y;
}

.lesson-toolbar:hover::before {
    opacity: 1;
}

/* Стили кнопок внутри тулбара */
.lesson-toolbar button {
    height: 40px;
    border: 1px solid var(--border-color, #eee);
    background: var(--input-bg-color, #fff);
    color: var(--text-color, #333);
    cursor: pointer;
}

.lesson-toolbar button:hover {
    background: var(--bg-secondary, #f0f0f0);
}

.lesson-toolbar button.active {
    background: var(--accent, #3498db);
    color: white;
    border-color: var(--accent, #3498db);
}


/* =================================================== */
/* РЕЖИМЫ ОТОБРАЖЕНИЯ УРОКА (Отклик на кнопки Тулбара) */
/* =================================================== */

/* 1. Аудио-режим (Скрыть видео) */
body.video-hidden-mode .floating-video-container {
    display: none !important;
}

/* 2. Режим большого видео */
body.large-video-mode .lesson-body-container {
    flex-direction: column; /* Ставим видео НАД текстом */
}

body.large-video-mode .floating-video-container {
    position: sticky !important; /* ИСПРАВЛЕНИЕ: Возвращаем прилипание сверху */
    top: 10px !important;
    z-index: 1000 !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 20px auto;
    border-radius: 12px;
}

body.large-video-mode .lesson-content-wrapper {
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto;
}

/* ИСПРАВЛЕНИЕ ВИДЕО: Принудительно растягиваем iframe внутри широкого контейнера */
body.large-video-mode .floating-video-container .video-wrapper,
body.large-video-mode .floating-video-container .video-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
}

/* 3. Двухстраничный режим */
body.two-page-mode-active .lesson-content-container { 
    display: block !important;
    /* ИСПРАВЛЕНИЕ: Убираем огромный padding, который "съедал" текст в колонках */
    padding-bottom: 20px !important;
}

@media (min-width: 768px) {
    body.two-page-mode-active .lesson-content-container {
        column-rule: 1px solid var(--border-color, #eee);
    }
    
    /* Чтобы абзацы и картинки не разрывались пополам между страницами */
    body.two-page-mode-active .content-block-wrapper,
    body.two-page-mode-active p,
    body.two-page-mode-active img {
        break-inside: avoid-column;
        page-break-inside: avoid;
    }
}

/* На телефонах отключаем колонки, чтобы текст не ломался */
@media (max-width: 767px) {
    
}

/* 4. Фикс для Бионического чтения (Агрессивный контраст во всем приложении) */
    .lesson-content-container b.bionic-word,
    .ai-message-content-wrapper b.bionic-word,
    b.bionic-word {
        color: var(--text-color) !important;
        font-weight: 900 !important;
        letter-spacing: 0.3px;
        text-shadow: 0 0 1px rgba(0,0,0,0.3);
    }
    body.dark-mode b.bionic-word,
    body.synthwave-mode b.bionic-word,
    body.oled-mode b.bionic-word {
        color: #ffffff !important;
        text-shadow: 0 0 2px rgba(255,255,255,0.4);
    }


/* =================================================== */
/* ИСПРАВЛЕНИЕ: ДВУХСТРАНИЧНЫЙ РЕЖИМ (КАК В КНИГЕ)     */
/* =================================================== */

/* 1. Отменяем боковое расположение, ставим видео НАД текстом */
body.two-page-mode-active .lesson-body-container {
    display: flex !important;
    flex-direction: column !important; /* Выстраиваем сверху вниз */
    align-items: center !important;
    width: 100% !important;
}

/* 2. Настраиваем видео: по центру, нормального размера, НО ВОЗВРАЩАЕМ ПРИЛИПАНИЕ СВЕРХУ */
body.two-page-mode-active #floatingVideoContainer {
    position: sticky !important; /* ИСПРАВЛЕНИЕ: Видео снова закрепляется сверху */
    top: 10px !important;
}

/* Принудительно растягиваем плеер внутри контейнера */
body.two-page-mode-active #floatingVideoContainer .video-wrapper,
body.two-page-mode-active #floatingVideoContainer .video-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
}

/* 3. Обертка текста занимает всю доступную ширину */
body.two-page-mode-active .lesson-content-wrapper {
    width: 100% !important;
    max-width: 1200px !important; /* Ширина разворота "книги" */
    margin: 0 auto !important;
}

/* 4. Сам текст бьется на 2 колонки (Только на ПК/Планшетах) */
@media (min-width: 768px) {
    body.two-page-mode-active .lesson-content-container {
        display: block !important;
        height: auto !important;
        padding: 0 20px 40px 20px !important;
        overflow: visible !important; /* Расстояние между колонками */
        column-rule: 1px solid var(--border-color, #eee) !important; /* Разделительная линия */
    }

    /* Запрещаем браузеру разрывать блоки, заголовки и картинки посередине между колонками */
    body.two-page-mode-active .content-block-wrapper,
    body.two-page-mode-active p,
    body.two-page-mode-active h2,
    body.two-page-mode-active h3,
    body.two-page-mode-active img {
        break-inside: avoid-column !important;
        page-break-inside: avoid !important;
    }
}

/* 5. На телефонах колонки отключаем (там слишком узко для 2х колонок) */
@media (max-width: 767px) {
    body.two-page-mode-active .lesson-content-container {
        display: block !important;
        padding-bottom: 20px !important;
        column-count: 1 !important;
    }
}


/* =================================================== */
/* ФИКС БАГА БРАУЗЕРОВ: ПРОПАДАЮЩИЕ ТАБЛИЦЫ В КОЛОНКАХ */
/* =================================================== */
body.two-page-mode-active .content-block[data-type="table"] {
    
    /* Жестко ограничиваем ширину блока рамками одной колонки */
    display: block !important; 
    width: 100% !important;
    max-width: 100% !important;
    
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
    /* Категорически запрещаем разрывать таблицу между колонками */
    break-inside: avoid-column !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
}

body.two-page-mode-active .table-scroll-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 5px !important; /* Место под ползунок скролла */
    overflow-x: auto !important; /* Скролл появляется строго ВНУТРИ колонки */
}

/* Настройки самой таблицы */
body.two-page-mode-active .table-scroll-container table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important; /* Разрешаем таблице быть шире обертки, чтобы сработал скролл */
    table-layout: auto !important; 
}
/* =================================================== */
/* ИСТИННЫЙ ПЛАВАЮЩИЙ ПЛЕЕР (PiP) С ВОЗМОЖНОСТЬЮ ПЕРЕТАСКИВАНИЯ */
/* =================================================== */

/* 1. СТИЛИ ДЛЯ ЛАНДШАФТНОГО РЕЖИМА (Телефоны) */
@media screen and (orientation: landscape) and (max-height: 500px) {
    #floatingVideoContainer {
        /* position: fixed !important; */
        top: 20px !important;
        /* right: 20px !important; */
        /* left: auto !important; */
        bottom: auto !important;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: column !important;
        float: none !important;
        width: 300px !important;
        max-width: 45vw !important;
        margin: 0 !important;
        border: 1px solid var(--border-color, #444) !important;
        border-radius: 12px !important;
        background: var(--container-bg-color, #1e1e1e) !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
    }

    #floatingVideoContainer .video-wrapper {
        width: 100% !important;
        padding-top: 0 !important;
        border-radius: 0 0 12px 12px !important;
    }

    #floatingVideoContainer iframe {
        width: 100% !important;
        height: auto !important;
        border-radius: 0 0 12px 12px !important;
        pointer-events: auto;
        aspect-ratio: 16 / 9 !important;
    }

    .video-drag-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 24px;
        border-radius: 12px 12px 0 0;
        background: var(--input-bg-color, #333);
        cursor: grab;
        touch-action: none;
    }

    .video-drag-handle:active {
        background: var(--accent, #3498db);
        cursor: grabbing;
    }

    .video-drag-handle::after {
        content: '';
        width: 30px;
        height: 4px;
        border-radius: 2px;
        background: var(--secondary-text-color, #888);
        transition: background 0.2s;
    }
    
    .video-drag-handle:active::after {
        background: #fff;
    }

    #floatingVideoContainer.is-dragging iframe {
        pointer-events: none !important;
    }
    
    #lessonContentContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 2. ТЕ ЖЕ СТИЛИ ДЛЯ ДВУХСТРАНИЧНОГО РЕЖИМА (Без медиа-запроса) */
body.two-page-mode-active #floatingVideoContainer {
    /* position: fixed !important; */
    /* top: 20px !important; */
    /* right: 20px !important; */
    /* left: auto !important; */
    /* bottom: auto !important; */
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: 300px !important;
    max-width: 45vw !important;
    margin: 0 !important;
    border: 1px solid var(--border-color, #444) !important;
    border-radius: 12px !important;
    background: var(--container-bg-color, #1e1e1e) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

body.two-page-mode-active #floatingVideoContainer .video-wrapper {
    width: 100% !important;
    padding-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
}

body.two-page-mode-active #floatingVideoContainer iframe {
    width: 100% !important;
    height: auto !important;
    border-radius: 0 0 12px 12px !important;
    pointer-events: auto;
    aspect-ratio: 16 / 9 !important;
}

body.two-page-mode-active .video-drag-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 24px;
    border-radius: 12px 12px 0 0;
    background: var(--input-bg-color, #333);
    cursor: grab;
    touch-action: none;
}

body.two-page-mode-active .video-drag-handle:active {
    background: var(--accent, #3498db);
    cursor: grabbing;
}

body.two-page-mode-active .video-drag-handle::after {
    content: '';
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: var(--secondary-text-color, #888);
    transition: background 0.2s;
}

body.two-page-mode-active .video-drag-handle:active::after {
    background: #fff;
}

body.two-page-mode-active #floatingVideoContainer.is-dragging iframe {
    pointer-events: none !important;
}

body.two-page-mode-active #lessonContentContainer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Колонки для ПК (Это оставляем как было) */
@media (min-width: 768px) {
    body.two-page-mode-active .lesson-content-container {
        text-align: justify !important;
        column-count: 2 !important;
        column-gap: 50px !important;
        column-rule: 1px solid var(--border-color) !important;
    }
}


/* =================================================== */
/* ФИКС: ПЛАВАЮЩИЙ ПЛЕЕР ДЛЯ ГОРИЗОНТАЛЬНОГО РЕЖИМА ТЕЛЕФОНА */
/* =================================================== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    body #floatingVideoContainer,
    body.two-page-mode-active #floatingVideoContainer,
    body.large-video-mode #floatingVideoContainer {
        position: fixed !important; 
        right: auto !important;
        bottom: auto !important;
        left: 10px !important;
        z-index: 999999 !important;
        display: flex !important;
        float: none !important; 
        width: 40vw !important; 
        min-width: 200px !important;
        max-width: 280px !important;
        margin: 0 !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
    }

    body #lessonContentContainer,
    body.two-page-mode-active #lessonContentContainer {
        display: block !important;
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: calc(max(20vw, 185px) + 40px) !important;
        column-count: 1 !important;
    }
}

/* =================================================== */
/* РЕЖИМ МИНИ-ПЛЕЕРА (Свободно плавающий)              */
/* =================================================== */

body.mini-player-mode #floatingVideoContainer {
    display: flex !important;
    flex-direction: column !important;
    width: 320px !important;
    max-width: 85vw !important;
    border: 1px solid var(--border-color, #444) !important;
    border-radius: 12px !important;
    background: var(--container-bg-color, #1e1e1e) !important;
    box-shadow: var(--neumorph-shadow-soft) !important;
}

body.mini-player-mode #floatingVideoContainer .video-wrapper {
    width: 100% !important;
    border-radius: 0 0 12px 12px !important;
}

body.mini-player-mode #floatingVideoContainer iframe {
    border-radius: 0 0 12px 12px !important;
}

/* Ручка перетаскивания (язычок сверху видео) */
.video-drag-handle {
    display: none; /* Скрыта по умолчанию */
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 24px;
    border-radius: 12px 12px 0 0;
    background: var(--input-bg-color, #333);
    cursor: grab;
    touch-action: none;
}

/* Показываем ручку, если видео переведено в fixed режим или мини-плеер */
body.mini-player-mode .video-drag-handle,
#floatingVideoContainer[style*="position: fixed"] .video-drag-handle {
    display: flex !important;
}

.video-drag-handle:active {
    background: var(--accent, #3498db);
    cursor: grabbing;
}

.video-drag-handle::after {
    content: '';
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: var(--secondary-text-color, #888);
    transition: background 0.2s;
}

.video-drag-handle:active::after {
    background: #fff;
}

/* Защита от кликов по iframe во время перетаскивания */
#floatingVideoContainer.is-dragging iframe {
    pointer-events: none !important;
}

/* =================================================== */
/* ПОЛЗУНОК ДЛЯ ИЗМЕНЕНИЯ РАЗМЕРА ПЛЕЕРА               */
/* =================================================== */

/* Сам интерактивный квадрат в углу */
.video-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: none; /* Скрыт по умолчанию */
    width: 25px;
    height: 25px;
    cursor: nwse-resize; /* Курсор изменения размера по диагонали */
    touch-action: none;
}

/* Отрисовка треугольника из точек/линий */
.video-resize-handle::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 0;
    height: 0;
    transition: border-color 0.2s;
    pointer-events: none; /* Чтобы не мешал кликам */
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent rgba(255, 255, 255, 0.4) transparent;
}

.video-resize-handle:hover::after,
.video-resize-handle:active::after {
    border-color: transparent transparent #3498db transparent; /* Цвет акцента при наведении */
}

/* Показываем ползунок ресайза только когда плеер откреплен (fixed) */
body.mini-player-mode .video-resize-handle,
#floatingVideoContainer[style*="position: fixed"] .video-resize-handle {
    display: block !important;
}

/* ЗАЩИТА: Отключаем клики внутри iframe во время растягивания, иначе мышка "провалится" в YouTube и ресайз залипнет */
#floatingVideoContainer.is-resizing iframe,
#floatingVideoContainer.is-dragging iframe {
    pointer-events: none !important;
}


/* Добавить в style.css */
.ai-visual-link {
    padding: 0 2px;
    color: #3498db;          /* Синий цвет */
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    border-bottom: 1px dashed #3498db; /* Пунктирное подчеркивание */
}

.ai-visual-link:hover {
	background-color: rgba(52, 152, 219, 0.1);
	color: #2980b9;
	border-bottom-style: solid;
}

/* =================================================== */
/* === ТУМБЛЕРЫ: СКРЫТИЕ АКТИВНОСТИ И ИНФО-ПАНЕЛИ  === */
/* =================================================== */
body.hide-activity-mode #activityStatsArea {
    display: none !important;
}

body.hide-seo-mode .seo-footer-info {
    display: none !important;
}

body.hide-decks-mode #decksArea {
    display: none !important;
}


/* ========================================================= */
/* === СТИЛИ ДЛЯ ИНСТРУМЕНТА "РЕФЛЕКСИЯ" (ИЗОЛИРОВАННЫЕ) === */
/* ========================================================= */
.refl-app-wrapper {
  /* --refl-bg: #0b1020; */
  --refl-text: #eaf0ff;
  --refl-muted: #b9c3e6;
  /* --refl-shadow: 0 18px 60px rgba(0,0,0,.45); */
  --refl-radius: 18px;
  /* --refl-red: #ff4b4b; */
  /* --refl-yellow: #ffd34d; */
  /* --refl-green: #2ee68c; */
  /* --refl-focus: 0 0 0 3px rgba(135, 180, 255, .45), 0 0 0 1px rgba(255,255,255,.1) inset; */
  /* background:
      radial-gradient(1200px 700px at 20% -20%, rgba(111, 162, 255,.28), transparent 60%),
      radial-gradient(900px 600px at 105% 10%, rgba(255, 217, 74,.18), transparent 55%),
      radial-gradient(900px 600px at 60% 120%, rgba(46, 230, 140,.14), transparent 55%),
      linear-gradient(180deg, #070a14, #090e1d 40%, #070a14); */
}


.refl-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  color: var(--refl-text);
  overflow-y: auto;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.refl-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.refl-title { display: flex; flex-direction: column; gap: 4px; max-width: 980px; }
.refl-title h1 {margin: 0;font-size: clamp(18px, 2.2vw, 26px);letter-spacing: .2px;/* color: var(--refl-text); */text-align: left;text-shadow: none;}
.refl-title p {margin: 0;color: var(--heading-color);font-size: 13px;line-height: 1.35;}
.refl-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.refl-btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15, 22, 45, .72);
  color: var(--refl-text);
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  font-weight: 650;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.refl-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.2); background: rgba(18, 26, 51, .85); }
.refl-btn:active { transform: translateY(0px) scale(.99); }
.refl-btn.refl-secondary { font-weight: 600; opacity: .92; }

.refl-pill {
  padding: 7px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10, 14, 30, .55);
  color: var(--refl-muted); font-size: 12px;
  display: flex; align-items: center; gap: 8px;
}
.refl-mono { font-variant-numeric: tabular-nums; }
.refl-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }

.refl-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-content: start;
}
.refl-card {
  background: linear-gradient(180deg, rgb(18 26 51 / 94%), rgb(11 16 32 / 93%));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--refl-radius);
  box-shadow: var(--refl-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(320px, 56vh, 560px);
  position: relative;
  isolation: isolate;
  cursor: pointer;
}
.refl-card .refl-scene { position: relative; flex: 1 1 auto; min-height: clamp(120px, 22vh, 220px); overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); }
.refl-card .refl-meta { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.refl-card h2 { margin: 0; font-size: clamp(20px, 3vw, 32px); display: flex; align-items: center; gap: 8px; color: var(--refl-text); text-shadow:none; text-align: left; line-height: 1.15; }
.refl-tag { font-size: 11px; color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.14); padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.18); }
.refl-card p { margin: 0; color: var(--refl-muted); font-size: clamp(13px, 1.5vw, 17px); line-height: 1.4; }

.refl-cardVote {
  position: absolute;
  top: 10px;
  right: 10px;
  width: clamp(52px, 8vw, 72px);
  height: clamp(52px, 8vw, 72px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-weight: 800;
  font-size: clamp(20px, 3.2vw, 32px);
  color: white;
  font-variant-numeric: tabular-nums;
}
.refl-cardVote.refl-bump { transform: scale(1.08); }

.refl-cardVote:hover {
  transform: scale(1.05);
  border-color: rgba(255,255,255,.4);
}

.refl-cardVote:active {
  transform: scale(0.95);
}

.refl-cold .refl-cardVote {
  background: rgba(255, 75, 75, .8);
  border-color: rgba(255, 75, 75, .6);
}

.refl-warm .refl-cardVote {
  background: rgba(255, 211, 77, .8);
  border-color: rgba(255, 211, 77, .6);
}

.refl-hot .refl-cardVote {
  background: rgba(46, 230, 140, .8);
  border-color: rgba(46, 230, 140, .6);
}

.refl-sceneInner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
.refl-character {
  width: min(70%);
  max-width: 70%;
  aspect-ratio: 1/1;
  border-radius: 28px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  z-index: 1;
  overflow: hidden;
}
.refl-emojiFace { font-size: clamp(44px, 7vw, 64px); filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); transform: translateY(-2px); user-select: none; }
.refl-media { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; }

/* THEMES */
.refl-cold .refl-scene { background: radial-gradient(600px 340px at 50% 25%, rgba(160, 200, 255,.35), transparent 60%), radial-gradient(400px 260px at 30% 80%, rgba(0, 255, 255,.10), transparent 55%), linear-gradient(180deg, rgba(30, 78, 160,.65), rgba(6, 10, 22, .2)); }
.refl-warm .refl-scene { background: radial-gradient(600px 340px at 40% 20%, rgba(255, 214, 102,.35), transparent 60%), radial-gradient(440px 280px at 70% 85%, rgba(120, 220, 255,.14), transparent 58%), linear-gradient(180deg, rgba(28, 56, 110,.55), rgba(6, 10, 22, .25)); }
.refl-hot .refl-scene { background: radial-gradient(700px 400px at 40% 10%, rgba(255, 237, 160,.55), transparent 60%), radial-gradient(520px 360px at 72% 86%, rgba(255, 120, 200,.15), transparent 55%), linear-gradient(180deg, rgba(50, 150, 120,.45), rgba(6, 10, 22, .18)); }

.refl-card.refl-pulse { animation: reflPulseBorder .45s ease-out 1; }
@keyframes reflPulseBorder { 0%{ transform: translateY(0); border-color: rgba(255,255,255,.12); } 40%{ transform: translateY(-1px); border-color: rgba(135, 180, 255, .55); } 100%{ transform: translateY(0); border-color: rgba(255,255,255,.12); } }

.refl-layer { position: absolute; inset: 0; pointer-events: none; opacity: .95; z-index: 0; }
.refl-particle { position: absolute; left: calc(var(--x) * 1%); top: -12%; width: var(--s); height: var(--s); opacity: var(--o); transform: translateZ(0); animation: reflFall var(--d) linear var(--delay) infinite; filter: blur(var(--b)); }
@keyframes reflFall { 0%{ transform: translate(0, -20%); } 100%{ transform: translate(var(--dx), 140%); } }
.refl-snow .refl-particle { background: rgba(235, 248, 255, .95); border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset; }
.refl-rain .refl-particle { width: 2px; height: calc(var(--s) * 3.2); border-radius: 999px; background: linear-gradient(180deg, rgba(170, 235, 255, .9), rgba(170, 235, 255, .05)); }
.refl-spark .refl-particle { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.0) 70%); border-radius: 50%; mix-blend-mode: screen; }

.refl-sun { position: absolute; right: 10%; top: 10%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255, 230, 120, .9)); box-shadow: 0 0 0 8px rgba(255, 211, 77, .15), 0 26px 70px rgba(255, 211, 77, .15); z-index: 0; opacity: .95; }
.refl-sun::before { content: ""; position: absolute; top: -18px; bottom: -18px; left: -18px; right: -18px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,211,77,0) 0 15deg, rgba(255,211,77,.35) 15deg 30deg); animation: reflSpin 8s linear infinite; filter: blur(1px); opacity: .9; }
@keyframes reflSpin { to{ transform: rotate(360deg); } }

.refl-cloud { position: absolute; left: -30%; top: 12%; width: 180px; height: 70px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; filter: blur(.2px); z-index: 0; animation: reflDrift 10s ease-in-out infinite; }
.refl-cloud::before, .refl-cloud::after { content: ""; position: absolute; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.10); border-radius: 999px; top: -28px; width: 90px; height: 60px; left: 24px; }
.refl-cloud::after { top: -18px; width: 110px; height: 70px; left: 78px; }
@keyframes reflDrift { 0%,100%{ transform: translateX(0); opacity: .85; } 50%{ transform: translateX(120%); opacity: 1; } }

.refl-gloss { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 36%, rgba(255,255,255,.05) 60%, transparent 78%); opacity: .55; z-index: 2; pointer-events: none; border-radius: 26px; }
.refl-floaty { animation: reflFloaty 2.8s ease-in-out infinite; }
@keyframes reflFloaty { 0%,100%{ transform: translateY(2px); } 50%{ transform: translateY(-5px); } }

.refl-footer { background: rgba(10, 14, 30, .55); border: 1px solid rgba(255,255,255,.10); border-radius: var(--refl-radius); box-shadow: var(--refl-shadow); padding: 10px; display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.refl-traffic { flex: 1 1 520px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-width: min(100%, 560px); }
.refl-choice { border: 1px solid rgba(255,255,255,.10); border-radius: 16px; background: linear-gradient(180deg, rgba(18, 26, 51, .55), rgba(10, 14, 30, .35)); padding: 10px; display: flex; gap: 10px; align-items: center; }
.refl-countBox { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-weight: 850; font-size: 18px; color: rgba(255,255,255,.95); transition: transform .12s ease; }
.refl-countBox.refl-bump { transform: scale(1.07); }
.refl-lightWrap { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.refl-light { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.refl-lamp { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 0 0 3px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.32); cursor: pointer; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; flex: 0 0 auto; position: relative; user-select: none; }
.refl-lamp::after { content: ""; position: absolute; inset: 6px 10px auto 8px; height: 12px; border-radius: 999px; background: rgba(255,255,255,.28); filter: blur(.2px); transform: rotate(-18deg); opacity: .85; }
.refl-lamp:hover { transform: translateY(-1px); filter: brightness(1.05); }
.refl-lamp:active { transform: translateY(0px) scale(.99); }
.refl-lamp.refl-red { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), rgba(255,75,75,1) 45%, rgba(160, 20, 20, .95)); }
.refl-lamp.refl-yellow { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,211,77,1) 45%, rgba(170, 110, 0, .95)); }
.refl-lamp.refl-green { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(46,230,140,1) 45%, rgba(0, 120, 72, .95)); }

.refl-label { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.refl-label b { font-size: 12px; letter-spacing: .2px; line-height: 1.15; color:var(--refl-text); }
.refl-label span { font-size: 11px; color: var(--refl-muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.refl-stats { flex: 0 1 310px; min-width: 240px; display: flex; flex-direction: column; justify-content: center; padding: 6px 6px 6px 4px; }
.refl-statsRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; }
.refl-big { font-size: 14px; font-weight: 800; color:var(--refl-text); }
.refl-muted { color: var(--refl-muted); font-size: 12px; line-height: 1.3; }

@media (max-width: 640px) {
  .refl-app { padding: 12px; gap: 12px; }
  .refl-main { gap: 12px; }
  .refl-card { min-height: clamp(260px, 48vh, 420px); }
  .refl-card .refl-scene { min-height: 140px; }
  .refl-card .refl-meta { padding: 12px 14px 14px; }
  .refl-header { gap: 8px; }
  .refl-title h1 { font-size: clamp(16px, 5vw, 20px); }
  .refl-title p { font-size: 12px; }
  .refl-tools { gap: 6px; }
  .refl-btn { padding: 8px 10px; font-size: 12px; }
}

/* Уважаем системное "уменьшить анимации" — глушим всё, что шевелится. */
@media (prefers-reduced-motion: reduce) {
  .refl-particle,
  .refl-floaty,
  .refl-cloud,
  .refl-sun::before,
  .refl-card.refl-pulse,
  .refl-cardVote.refl-bump { animation: none !important; transition: none !important; }
}

/* Когда вкладка скрыта — JS вешает .refl-paused на обёртку, и мы глушим все refl-* анимации. */
.refl-app-wrapper.refl-paused .refl-particle,
.refl-app-wrapper.refl-paused .refl-floaty,
.refl-app-wrapper.refl-paused .refl-cloud,
.refl-app-wrapper.refl-paused .refl-sun::before { animation-play-state: paused !important; }

/* ========================================================= */
/* === МОДАЛКА ШЕРИНГА РЕФЛЕКСИИ                         === */
/* ========================================================= */
.refl-share-modal { padding: 18px 20px 20px; gap: 14px; }
.refl-share-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.refl-share-head h3 { margin: 0; font-size: 17px; }
.refl-share-body { display: flex; flex-direction: column; gap: 14px; }
.refl-share-body .hidden { display: none !important; }

.refl-share-loading { text-align: center; padding: 30px 10px; color: var(--secondary-text-color); }

.refl-share-hint { margin: 0; font-size: 13px; color: var(--secondary-text-color); line-height: 1.45; text-align: center; }

.refl-share-qr {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  align-self: center;
}
.refl-share-qr canvas { display: block; max-width: 100%; height: auto; border-radius: 6px; }

.refl-share-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.refl-share-link-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--input-bg-color);
  color: var(--text-color);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.refl-share-link-row input:focus { outline: none; border-color: var(--focus-ring); }
.refl-share-link-row button { flex: 0 0 auto; padding: 10px 12px; }

.refl-share-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--secondary-text-color);
  padding: 4px 2px;
}
.refl-share-count b { color: var(--text-color); font-variant-numeric: tabular-nums; }

.refl-share-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.refl-share-actions .btn { flex: 1 1 140px; justify-content: center; }

.refl-share-error,
.refl-share-authrequired {
  text-align: center;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.refl-share-error p,
.refl-share-authrequired p {
  margin: 0;
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 480px) {
  .refl-share-modal { padding: 14px 14px 16px; }
  .refl-share-qr { padding: 10px; }
  .refl-share-qr canvas { width: 200px !important; height: 200px !important; }
  .refl-share-actions .btn { flex: 1 1 100%; }
}

/* ========================================================= */
/* === JOIN-ЭКРАН УЧАСТНИКА РЕФЛЕКСИИ                    === */
/* ========================================================= */

/* Статусная плашка (загрузка / истекла / закрыта / ошибка) */
.refl-join-statusbox {
  background: rgba(10, 14, 30, .55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--refl-radius);
  padding: 24px;
  margin-bottom: 14px;
}
.refl-join-statusbox.hidden { display: none; }
.refl-join-statusbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--refl-text);
}
.refl-join-statusbox-inner #reflJoinStatusIcon { font-size: 40px; line-height: 1; }
.refl-join-statusbox-inner #reflJoinStatusText { font-size: 15px; color: var(--refl-muted); max-width: 360px; line-height: 1.45; }
.refl-join-statusbox-inner .btn.hidden { display: none; }

/* Подсветка активного (выбранного) голоса — глубокая рамка + чуть ярче */
.refl-join-app .refl-card.refl-selected,
#reflectionJoinArea .refl-card.refl-selected {
  border-color: rgba(135, 180, 255, .85);
  box-shadow: 0 0 0 2px rgba(135, 180, 255, .35), var(--refl-shadow);
  transform: translateY(-2px);
}

/* Футер с агрегатами */
.refl-join-footer {
  background: rgba(10, 14, 30, .55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--refl-radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--refl-text);
}

.refl-join-aggregates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.refl-join-agg-row {
  display: grid;
  grid-template-columns: 22px 1fr 60px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.refl-join-agg-row .refl-join-agg-label { display: flex; align-items: center; gap: 8px; color: var(--refl-muted); }
.refl-join-agg-row .refl-join-agg-bar {
  height: 10px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.refl-join-agg-row .refl-join-agg-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 999px;
  transition: width .35s ease;
}
.refl-join-agg-row[data-key="cold"] .refl-join-agg-fill { background: linear-gradient(90deg, rgba(255,75,75,.85), rgba(255,75,75,1)); }
.refl-join-agg-row[data-key="warm"] .refl-join-agg-fill { background: linear-gradient(90deg, rgba(255,211,77,.85), rgba(255,211,77,1)); }
.refl-join-agg-row[data-key="hot"]  .refl-join-agg-fill { background: linear-gradient(90deg, rgba(46,230,140,.85), rgba(46,230,140,1)); }
.refl-join-agg-row .refl-join-agg-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--refl-text);
}

.refl-join-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--refl-muted);
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.refl-join-votestate { display: flex; align-items: center; gap: 6px; }
.refl-join-votestate.refl-voted { color: var(--refl-text); }
.refl-join-total b { color: var(--refl-text); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .refl-join-footer { padding: 12px; }
  .refl-join-agg-row { grid-template-columns: 20px 1fr 52px; font-size: 12px; }
  .refl-join-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ========================================================= */
/* === ГЕСТ-ГЕЙТ: модалка выбора способа входа           === */
/* ========================================================= */
.refl-gate-modal { padding: 22px 22px 24px; }
.refl-gate-head h3 { margin: 0 0 6px; font-size: 18px; }
.refl-gate-intro {
  margin: 0 0 18px;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.45;
}
.refl-gate-section { display: flex; flex-direction: column; gap: 10px; }
.refl-gate-label {
  font-size: 12px;
  color: var(--secondary-text-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.refl-gate-section .auth-input { font-size: 14px; }
.refl-gate-section .btn { justify-content: center; }
.refl-gate-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--secondary-text-color);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.refl-gate-or::before,
.refl-gate-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* Когда открыт join-экран, мы хотим такую же раскладку fullscreen,
   что и у основного reflectionArea — используем тот же body-класс. */
body.reflection-active #reflectionJoinArea:not(.hidden) {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* ========================================================= */
/* === МОДАЛКА ОТВЕТОВ УЧАСТНИКОВ (для хозяина)          === */
/* ========================================================= */
.refl-responses-modal { padding: 18px 20px 18px; gap: 12px; }
.refl-responses-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.refl-responses-head h3 { margin: 0; font-size: 17px; }

.refl-responses-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.refl-responses-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--input-bg-color);
}
.refl-responses-summary-card .num {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-color);
}
.refl-responses-summary-card .label {
  font-size: 11px;
  color: var(--secondary-text-color);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.refl-responses-summary-card[data-key="cold"] { border-color: rgba(255, 75, 75, .45); }
.refl-responses-summary-card[data-key="warm"] { border-color: rgba(255, 211, 77, .45); }
.refl-responses-summary-card[data-key="hot"]  { border-color: rgba(46, 230, 140, .45); }

.refl-responses-body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
}
.refl-responses-empty {
  text-align: center;
  padding: 30px 10px;
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 1.5;
}

.refl-responses-group {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--input-bg-color);
}
.refl-responses-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
}
.refl-responses-group-head .refl-responses-group-count {
  font-variant-numeric: tabular-nums;
  color: var(--secondary-text-color);
  font-weight: 600;
}
.refl-responses-group[data-key="cold"] .refl-responses-group-head { background: rgba(255, 75, 75, .10); }
.refl-responses-group[data-key="warm"] .refl-responses-group-head { background: rgba(255, 211, 77, .10); }
.refl-responses-group[data-key="hot"]  .refl-responses-group-head { background: rgba(46, 230, 140, .10); }

.refl-responses-list { list-style: none; padding: 6px 0; margin: 0; max-height: 220px; overflow-y: auto; }
.refl-responses-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
}
.refl-responses-list li:last-child { border-bottom: none; }
.refl-responses-list li .refl-resp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.refl-responses-list li .refl-resp-time { font-size: 11px; color: var(--secondary-text-color); font-variant-numeric: tabular-nums; }

.refl-responses-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}
.refl-responses-footer .btn { flex: 0 0 auto; }

@media (max-width: 480px) {
  .refl-responses-modal { padding: 14px 14px 14px; max-height: 90vh; }
  .refl-responses-summary { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .refl-responses-summary-card { padding: 8px 4px; }
  .refl-responses-summary-card .num { font-size: 18px; }
  .refl-responses-list { max-height: 180px; }
}


/* ========================================================= */
/* === РАСШИРЕНИЕ ЭКРАНА ДЛЯ "РЕФЛЕКСИИ" И "ФЕЙНМАНА"    === */
/* ========================================================= */

/* 1. Жестко фиксируем body, чтобы он не скроллился вообще (скролл будет только внутри зон чата/карточек) */
body.reflection-active,
body.feynman-active {
    overflow: hidden !important;
    height: 100dvh !important;
}

/* Принудительно прячем мешающий глобальный футер и шапку приложения */
body.reflection-active footer,
body.feynman-active footer,
body.feynman-active .header-controls {
    display: none !important;
}

/* 2. Растягиваем контейнеры на всю высоту с помощью гибкого Flexbox */
body.reflection-active .app-wrapper,
body.feynman-active .app-wrapper {
    padding: 0 !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

body.reflection-active > .app-wrapper > .container,
body.feynman-active > .app-wrapper > .container {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 !important; 
    min-height: 0 !important; 
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* 3. Сами экраны тоже гибкие и забирают всё место */
#reflectionArea:not(.hidden),
#feynmanRoomArea:not(.hidden) {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important; 
    height: auto !important;
    max-height: none !important;
}

/* 4. Обертка приложения внутри экрана */
.refl-app-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important; 
    height: auto !important; 
}

.refl-app {
    min-height: 0 !important;
}

/* 5. И наконец, скроллируемый контейнер с карточками */
.refl-main {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important; 
    padding-bottom: 20px !important; 
}

/* Фикс для мобилок */
@media (max-width: 768px) {
    .refl-main {
        /* ДОБАВЛЯЕМ большой отступ снизу, чтобы 3-я карточка гарантированно выезжала */
        padding-bottom: 80px !important; 
    }
    .refl-footer {
        padding: 10px !important;
    }
    .refl-choice {
        padding: 6px !important;
        gap: 5px !important;
    }
    .refl-lamp {
        width: 38px !important;
        height: 38px !important;
    }
    .refl-countBox {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }
    .refl-app {
        padding: 10px !important;
        gap: 10px !important;
    }
}


/* === ФИНАЛЬНЫЙ ФИКС ПРОКРУТКИ ФОНА (SCROLL BLEED) === */

/* 1. Блокируем прокрутку на body, убираем багованный height: 100vh */
body.modal-open-lock,
body.chat-open {
    overflow: hidden !important;
    overscroll-behavior: none !important; /* Запрещаем браузеру передавать скролл фону */
    /* iOS Safari: overscroll-behavior работает только с iOS 16+. До неё скролл «протекает»
       сквозь модалку чата на body. position:fixed надёжно глушит проброс на всех iOS.
       Значение top выставляется из JS (MutationObserver), чтобы сохранить позицию скролла. */
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

/* 2. Блокируем любые свайпы и тачи на самих темных подложках (оверлеях) */
.modal-overlay,
.advanced-chat-overlay {
    overscroll-behavior: none !important;
    touch-action: none !important; /* Полностью отключаем скролл на затемнении */
}

/* 3. ЯВНО РАЗРЕШАЕМ прокрутку внутри самих окон и их контента */
.modal-content,
.advanced-chat-modal,
.ai-chat-modal-content,
.ai-chat-messages,
.message-area,
.chat-sidebar,
.ai-sidebar-scroll-container,
.ai-chat-user-messages-sidebar,
.ai-characters-sidebar,
#aiExplanationQuestion,
#aiExplanationOutput,
#exSelectorGrid,
#editorDaysContainer,
textarea {
    touch-action: auto !important; /* Возвращаем скролл контенту */
    overscroll-behavior: contain !important; /* Contain не дает скроллу "пробить" насквозь при достижении дна/верха */
}

/* Опциональный визуальный индикатор оффлайна для кнопок сохранения */
body.is-offline button[onclick*="save"], 
body.is-offline #aiChatSendBtn {
    opacity: 0.5;
    pointer-events: none; /* Запрещаем кликать, пока нет сети */
}


.ai-main-controls {
    display: flex;
    flex-wrap: wrap; /* FIX: Разрешаем перенос на узких экранах */
    gap: 8px;
    justify-content: space-between; /* Раскидываем по краям */
    align-items: center !important; /* Выравниваем по центру вертикали */
    width: 100%;
    padding: 0px 5px 8px 5px;
}

@media (max-width: 600px) {
    .ai-main-controls {
        flex-direction: row;
        justify-content: space-between;
    }
    .ai-main-controls .ai-setting-group {
        flex: 1; /* Пусть тумблеры делят место поровну */
        justify-content: center;
    }
}


/* ========================================= */
/* === FSRS DASHBOARD (DAILY PLAN)       === */
/* ========================================= */
.fsrs-stats-row {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin: 10px 3px 10px 3px;
    padding: 10px 10px;
    background: var(--input-bg-color);
    border-radius: 20px;
    box-shadow: var(--neumorph-shadow-inset);
}
.fsrs-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
}
.fsrs-stat .num {
    font-size: 2.5em;
    font-weight: 900;
    line-height: 1;
    font-family: 'Segoe UI', monospace;
    text-shadow: var(--neumorph-shadow-soft-sm);
}
.fsrs-stat .label {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 8px;
    opacity: 0.8;
    letter-spacing: 0.5px;
}
/* Цвета статусов Anki */
.fsrs-stat.new { color: #3498db; }
.fsrs-stat.learning { color: #e74c3c; }
.fsrs-stat.review { color: #2ecc71; }

.fsrs-retention-bar {
    background: var(--border-color);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 15px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* Подсказка под полем настроек колоды */
.deck-settings-help {
    font-size: 0.78em;
    line-height: 1.35;
    margin-top: 6px;
    color: var(--secondary-text-color, #888);
    opacity: 0.85;
}
.fsrs-retention-fill {
    position: relative;
    background: linear-gradient(90deg, #e74c3c, #f1c40f, #2ecc71);
    height: 100%;
    transition: width 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

/* ENTERPRISE UX: Эффект "живой жидкости" (Liquid Shimmer) */
.fsrs-retention-fill::after {
    content: '';
    position: absolute;
    top: 0; 
    left: -100%; 
    width: 50%; 
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    animation: liquidSweep 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes liquidSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}
.fsrs-retention-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    margin-top: 8px;
    color: var(--secondary-text-color);
    font-weight: 600;
}


/* ========================================= */
/* === FSRS SESSION QUEUE COUNTERS       === */
/* ========================================= */
.fsrs-queue-counters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 800;
    font-family: 'Segoe UI', monospace;
}
.fsrs-queue-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.fsrs-queue-item.new { color: #3498db; }
.fsrs-queue-item.learning { color: #e74c3c; }
.fsrs-queue-item.review { color: #2ecc71; }

.fsrs-queue-item i {
    width: 14px;
    height: 14px;
    stroke-width: 3px;
}
.fsrs-queue-item span {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Анимация при изменении числа */
.fsrs-queue-item.pop span {
    transform: scale(1.4);
}


/* ========================================= */
/* === FSRS TRIUMPH SCREEN               === */
/* ========================================= */

.fsrs-triumph-container {
    padding: 20px;
    border-radius: 24px;
    background: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
    text-align: center;
    margin-top: 20px;
    animation: fadeIn 0.5s ease-out;
}

.fsrs-triumph-icon {
    font-size: 4em;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
    animation: fsrs-bounce 2s infinite ease-in-out;
}

@keyframes fsrs-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.fsrs-triumph-title {
    font-size: 1.6em;
    font-weight: 800;
    color: var(--heading-color);
    margin: 0 0 5px 0;
}

.fsrs-triumph-subtitle {
    color: var(--secondary-text-color);
    font-size: 1em;
    margin: 0 0 20px 0;
}

/* Радиальный график Retention */
.fsrs-retention-circle {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 25px auto;
    border-radius: 50%;
    background: conic-gradient(var(--button-success-bg) var(--retention-deg, 0deg), var(--border-color) 0deg);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.fsrs-retention-circle::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--container-bg-color);
    border-radius: 50%;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.fsrs-retention-value {
    position: relative;
    z-index: 1;
    font-size: 1.8em;
    font-weight: 900;
    color: var(--text-color);
}

.fsrs-retention-value span {
    font-size: 0.5em;
    color: var(--secondary-text-color);
    display: block;
    margin-top: -5px;
}

/* Статистика сессии */
.fsrs-session-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.fsrs-session-stat {
    flex: 1;
    min-width: 80px;
    padding: 12px;
    background: var(--input-bg-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.fsrs-session-stat .val {
    display: block;
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.fsrs-session-stat .lbl {
    color: var(--secondary-text-color);
    font-size: 0.75em;
    text-transform: uppercase;
    font-weight: 700;
}

.fsrs-session-stat.s-new .val { color: #3498db; }
.fsrs-session-stat.s-rev .val { color: #2ecc71; }
.fsrs-session-stat.s-err .val { color: #e74c3c; }

/* Кастомная кнопка вне плана */
.btn-custom-study {
    background: transparent !important;
    border: 2px dashed var(--accent) !important;
    color: var(--accent) !important;
}
.btn-custom-study:hover {
    background: rgba(var(--accent-rgb), 0.1) !important;
}

/* === ЖЕЛЕЗОБЕТОННЫЙ ФИКС 3D МОРГАНИЯ (ANTI-FLICKER) === */
.flashcard-front {
    background-color: var(--container-bg-color);
    /* Физически выдвигаем грань вперед на 1px, спасает от пересечения слоев (z-fighting) */
    transform: rotateY(0deg) translateZ(1px); 
}

.flashcard-back {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    /* Выдвигаем заднюю грань в ее собственной системе координат */
    transform: rotateY(180deg) translateZ(1px);
}

/* Когда карточка перевернута */
.flashcard.is-flipped {
    transform: rotateY(180deg);
}

/* Управляем только кликабельностью. КАТЕГОРИЧЕСКИ ЗАПРЕЩЕНО менять z-index во время 3D анимации */
.flashcard.is-flipped .flashcard-front {
    pointer-events: none;
}

.flashcard.is-flipped .flashcard-back {
    pointer-events: auto;
}

/* Гарантируем, что панель кнопок FSRS ловит клики */
.srs-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    margin-top: 20px;
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
}
 

.ch-tooltip {
	position: initial !important;
}


/* ================================================================== */
/* === ENTERPRISE UX: ИДЕАЛЬНОЕ ОКНО ОБЪЯСНЕНИЙ ИИ (SMART SCROLL) === */
/* ================================================================== */

/* 1. ГЛАВНЫЙ КОНТЕЙНЕР: Переносим скролл на само окно */
#aiExplanationModal .modal-content { 
    
    /* Плавный скролл на iOS */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 2. ШАПКА (Фиксируется сверху при скролле) */
#aiExplanationModal .parser-label-container {
    position: sticky !important;
    /* top: 0 !important; */
    z-index: 100 !important;
    /* PREMIUM UX: Glassmorphism для шапки */
    background-color: color-mix(in srgb, var(--container-bg-color) 85%, transparent) !important;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    margin: 0 !important;
    padding: 5px 5px 5px 5px !important;
    border-bottom: 1px solid rgba(150, 150, 150, 0.15) !important;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.05); */
}

/* 3. ВОПРОС (Восстанавливаем работу JS-сворачивания!) */
#aiExplanationQuestion {
    margin: 0px 0px 0px 0px !important;
    border-radius: 12px !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02) !important;
    /* УБРАНО: max-height: none и overflow-y: visible, чтобы JS мог сворачивать этот блок */
}

/* Фикс для кнопки сворачивания, чтобы она была по центру и не наезжала на текст */

/* 4. ВЫБОР СТИЛЯ */
#aiExplanationModal .settings-group {
    flex: 0 0 auto !important;
    margin: 2px 20px 15px 20px !important;
    width: auto !important;
    padding: 10px !important;
}

/* 5. ОТВЕТ ИИ (ЖЕЛЕЗОБЕТОННО БЕЗ СКРОЛЛА И СПЛЮЩИВАНИЯ) */
#aiExplanationOutput { /* Убиваем внутренний скролл */
    margin: 0 20px 20px 20px !important;
    padding: 0 !important;
}

/* Отступы для генерируемых кнопок под ответом */
#aiRegenerateExplanationBtn,
#aiContinueInChatBtn {
    margin-left: 20px !important;
    margin-right: 20px !important;
    margin-bottom: 5px !important;
}
 
 

/* =================================================== */
/*  ЭФФЕКТ ФОТОГРАФИЧЕСКОЙ ЗЕРНИСТОСТИ (ОТКЛЮЧАЕМЫЙ)   */
/* =================================================== */

body {
  position: relative; 
}

/* Зерно появляется ТОЛЬКО если у body есть класс grain-enabled */
body.grain-enabled::after {
  content: "";
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  pointer-events: none;
  z-index: 99999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  background-repeat: repeat;
  /* Смещение задаётся из скрипта при прокрутке внутренних контейнеров: сам слой
     висит на body, поэтому без сдвига он стоял на месте и выглядел наклеенным. */
  background-position: 0 0;   /* сдвиг вслед за прокруткой снят: он отставал на кадр и дёргался */
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ————— Тема «Claude / Бумага» ————— */
body.grain-enabled.claude-mode::after {
  opacity: 0.35;
  mix-blend-mode: multiply;
  filter: contrast(0.1) brightness(0.3);
}

/* ————— Светлая тема (без класса) ————— */
body.grain-enabled:not(.dark-mode):not(.synthwave-mode):not(.oled-mode):not(.claude-mode)::after {
  opacity: 0.35;
  mix-blend-mode: multiply;
  filter: contrast(0.5) brightness(0.5);
}

/* ————— Тёмные темы: «Графит», «Тьма», «Токийская ночь» —————
   У двух последних правила не было вовсе, и зерно оставалось на opacity: 0
   из базового правила — то есть включённый тумблер ничего не менял. У
   «Графита» правило было, но soft-light поверх почти чёрного фона даёт
   разницу, которую не видно.

   На тёмном работает screen: он подмешивает светлые крупинки, а не пытается
   затемнить и без того тёмное. Непрозрачность поэтому втрое ниже, чем на
   светлых темах — иначе получается снег на экране, а не плёночное зерно. */
body.grain-enabled.dark-mode::after,
body.grain-enabled.oled-mode::after,
body.grain-enabled.synthwave-mode::after {
  opacity: 0.1;
  mix-blend-mode: screen;
  filter: contrast(1.8) brightness(0.85);
}

/* =================================================== */
/*  СТИЛИ ДЛЯ ПЕРЕКЛЮЧАТЕЛЯ В МЕНЮ ТЕМ                 */
/* =================================================== */
.theme-dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 6px 12px;
    opacity: 0.5;
}

.grain-toggle-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 15px !important;
    cursor: pointer;
    color: var(--text-color) !important;
    border-radius: 8px !important;
    transition: background-color 0.2s;
}

/* Выбор шрифта приложения. Одна колонка, а не две: названия вроде
   «IBM Plex Sans» в узкой ячейке обрезались бы многоточием, а образец,
   который не дочитать, бесполезен.
   Свёрнут по умолчанию — раскрывается нажатием строки «Шрифт». */
.qst-font-picker {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 2px 15px 10px;
}
.qst-font-picker.is-open {
    display: flex;
    animation: qst-font-reveal 0.22s ease both;
}
@keyframes qst-font-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Свёрнутая строка сама говорит, что выбрано */
.qst-font-row-value {
    font-size: 0.85em;
    color: var(--secondary-text-color);
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qst-font-chevron {
    transition: transform 0.2s ease;
}
.qst-font-row.is-open .qst-font-chevron {
    transform: rotate(180deg);
}
.qst-font-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s;
}
/* Имя набрано самим шрифтом — это и есть образец */
.qst-font-pick-name {
    font-size: 1.02em;
    line-height: 1.25;
}
/* Подпись остаётся текущим шрифтом: она должна читаться и пока образец
   ещё качается, и если он не загрузился вовсе */
.qst-font-pick-desc {
    font-family: inherit;
    font-size: 0.76em;
    opacity: 0.6;
    line-height: 1.2;
}
.qst-font-pick:hover {
    background-color: var(--input-hover-bg-color);
}
.qst-font-pick.is-on {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 16%, transparent);
}
.qst-font-pick.is-on .qst-font-pick-name { font-weight: 700; }

.grain-toggle-item:hover {
    background-color: var(--input-hover-bg-color) !important;
}

.grain-toggle-item .ai-toggle-switch {
    width: 32px !important;
    height: 18px !important;
    margin: 0 !important;
}

.grain-toggle-item .ai-toggle-slider:before {
    width: 19px !important;
    height: 19px !important;
    bottom: 2px !important;
    left: 2px !important;
}

.grain-toggle-item input:checked + .ai-toggle-slider:before {
    transform: translateX(22px) !important;
}

/* === Collapsible-группы настроек в выпадающем меню тем === */
/* ВАЖНО: префикс qst- чтобы не пересекаться с историческим .settings-group
   (style.css:892), который перекрашивает <input type=checkbox> в neumorph-toggle. */
.qst-settings-group {
    margin: 3px 0;
}
.qst-settings-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}
.qst-settings-group-header:hover {
    background-color: var(--input-hover-bg-color);
}

/* Подпись группы обязана читаться в любом состоянии.
   На телефоне тап по заголовку подсвечивал его системным tap-highlight и
   выделял текст — подпись выцветала до нечитаемой. Это управляющий элемент,
   а не контент: выделять и подсвечивать его незачем. */
.qst-settings-group-header,
.qst-settings-group-header:hover,
.qst-settings-group-header:focus,
.qst-settings-group-header:active {
    color: var(--text-color);
    -webkit-tap-highlight-color: transparent;
}

.qst-settings-group-header {
    -webkit-user-select: none;
    user-select: none;
}

.qst-settings-group-title {
    color: var(--text-color);
}

.qst-settings-group-header ::selection,
.qst-settings-group-header::selection {
    background: transparent;
    color: var(--text-color);
    text-shadow: none;
}
.qst-settings-group-icon {
    width: 18px;
    height: 18px;
    color: var(--secondary-text-color);
    flex-shrink: 0;
}
.qst-settings-group-title {
    flex: 1;
}
.qst-settings-group-chevron {
    width: 16px;
    height: 16px;
    color: var(--secondary-text-color);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.qst-settings-group.is-open .qst-settings-group-chevron {
    transform: rotate(180deg);
}
.qst-settings-group-body {
    overflow: hidden;
    padding: 0px 0px 0px 15px;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}
.qst-settings-group.is-open .qst-settings-group-body {
    max-height: 600px;
    opacity: 1;
}


/* ======================================================= */
/* === ИСПРАВЛЕНИЕ: СХЛОПЫВАНИЕ ФЛЕШ-КАРТОЧЕК В ЛИНИЮ  === */
/* ======================================================= */

/* 1. Гарантируем, что контейнер вопроса выстраивает элементы вертикально, а не в строку */
#questionContainer {
    display: flex;
    flex-direction: column !important; /* Принудительно колонка */
    align-items: center;
    width: 100%;
 
}

/* 2. Обертка карточки должна занимать 100% ширины */
.flashcard-viewport {
    width: 95% !important;
    min-width: 95%;
    margin: 2%;
}


/* 3. Сама карточка не должна сжиматься (flex-shrink: 0) */
.flashcard {
    flex: 0 0 auto !important; /* flex-grow: 0, flex-shrink: 0, flex-basis: auto */
    width: 100% !important;
    min-width: min(100%, 600px) !important; /* Гарантируем нормальную ширину */
}

/* 4. Контейнер, куда инжектится карточка через JS, тоже должен быть растянут */
#answerOptions {
    width: 100% !important;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .flashcard {
        min-width: 100% !important; /* На мобильных занимаем всю ширину */
    }
}


/* ======================================================= */
/* === ИСПРАВЛЕНИЕ: КАСТОМНЫЙ ДИЗАЙН АУДИОПЛЕЕРА       === */
/* ======================================================= */

/* 2. ГЛАВНЫЙ ФИКС: Скрываем стандартный системный фон внутри плеера */
audio.anki-audio-player::-webkit-media-controls-enclosure,
audio.anki-audio-player::-webkit-media-controls-panel {
    background-color: transparent !important;
    border-radius: 30px !important;
}

/* 3. Кнопка Play / Пауза */
audio.anki-audio-player::-webkit-media-controls-play-button {
    background: var(--button-primary-bg) !important;
    border-radius: 50% !important;
    transform: scale(1.1);
    margin-left: 5px;
}

/* 4. Текст таймера (чтобы был виден в любой теме) */
audio.anki-audio-player::-webkit-media-controls-current-time-display,
audio.anki-audio-player::-webkit-media-controls-time-remaining-display {
    color: var(--text-color) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-shadow: none !important;
}

/* 5. Кнопка звука и три точки (опции) */
audio.anki-audio-player::-webkit-media-controls-mute-button,
audio.anki-audio-player::-webkit-media-controls-overflow-button {
    opacity: 0.7;
    transition: opacity 0.2s;
}
audio.anki-audio-player::-webkit-media-controls-mute-button:hover,
audio.anki-audio-player::-webkit-media-controls-overflow-button:hover {
    opacity: 1;
}

/* ======================================================= */
/* АДАПТАЦИЯ ПОД ТЕМНЫЕ ТЕМЫ (ДЛЯ ИКОНОК ПЛЕЕРА)       */
/* ======================================================= */

body.dark-mode audio.anki-audio-player,
body.oled-mode audio.anki-audio-player,
body.synthwave-mode audio.anki-audio-player {
    background-color: var(--input-bg-color) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* Инвертируем стандартные черные иконки браузера в белые для темных тем */
body.dark-mode audio.anki-audio-player::-webkit-media-controls-play-button,
body.dark-mode audio.anki-audio-player::-webkit-media-controls-mute-button,
body.dark-mode audio.anki-audio-player::-webkit-media-controls-overflow-button,
body.oled-mode audio.anki-audio-player::-webkit-media-controls-play-button,
body.oled-mode audio.anki-audio-player::-webkit-media-controls-mute-button,
body.oled-mode audio.anki-audio-player::-webkit-media-controls-overflow-button,
body.synthwave-mode audio.anki-audio-player::-webkit-media-controls-play-button,
body.synthwave-mode audio.anki-audio-player::-webkit-media-controls-mute-button,
body.synthwave-mode audio.anki-audio-player::-webkit-media-controls-overflow-button {
    filter: invert(1) !important;
}


/* ======================================================= */
/* === ИСПРАВЛЕНИЕ: КАРТИНКИ И ПОЛИГОНЫ В ЧАТЕ (ВЕРСИЯ 3) === */
/* ======================================================= */

.chat-image-svg-wrapper {
    /* position: relative !important; */
    display: block !important;
    width: 100% !important;
    max-width: 450px !important; /* Делаем картинку в чате крупной */
    margin: 0px 0px !important;
    line-height: 0 !important;
    font-size: 0 !important;
    padding: 0px 0px 0px;
    border-radius: 8px !important;
    overflow: hidden !important;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; */
}


.chat-image-svg-wrapper svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* Холст железно совпадает с картинкой */
    height: 100% !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Фикс для темной темы */
body.dark-mode .chat-image-svg-wrapper {
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
    border: 0px solid var(--border-color) !important;
}


/* === СТИЛИ ДЛЯ ПОДМЕНЮ В DROPDOWN (ЭКСПОРТ) === */
.dropdown-submenu {
    position: relative;
    display: flex;
    flex-direction: column;
}
.dropdown-submenu-content {
    display: flex;
    flex-direction: column;
    margin-left: 28px;
    padding-left: 10px;
    border-left: 2px solid var(--border-color);
    margin-top: 2px;
    margin-bottom: 5px;
    gap: 2px;
    animation: fadeIn 0.2s ease;
}
.dropdown-submenu-content a {
    padding: 8px 12px !important;
    font-size: 0.9em;
    color: var(--secondary-text-color) !important;
}
.dropdown-submenu-content a:hover {
    color: var(--text-color) !important;
    background-color: var(--input-hover-bg-color) !important;
}
.dropdown-submenu.open .submenu-chevron {
    transform: rotate(180deg);
}


/* Стили для новой кнопки-иконки Google и Вики */
#aiGroundingToggleBtn,
#aiWikiImagesToggleBtn {
    padding: 6px;
    border-radius: 8px;
    transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
    line-height: 0; 
}

/* Ховер только для устройств с мышью (отключаем залипание на iOS/Android) */
@media (hover: hover) {
    #aiGroundingToggleBtn:hover,
    #aiWikiImagesToggleBtn:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
}

body.dark-mode #aiGroundingToggleBtn:hover,
body.synthwave-mode #aiGroundingToggleBtn:hover,
body.oled-mode #aiGroundingToggleBtn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Эффект нажатия (Squish) */
#aiGroundingToggleBtn:active,
#aiWikiImagesToggleBtn:active {
    transform: scale(0.9);
}

/* === АКТИВНОЕ СОСТОЯНИЕ (Включено) === */
#aiGroundingToggleBtn.active,
#aiWikiImagesToggleBtn.active {
    background-color: color-mix(in srgb, var(--accent) 15%, transparent) !important;
    box-shadow: 0 0 0 1px var(--accent);
}


#aiGroundingToggleBtn.active svg,
#aiWikiImagesToggleBtn.active i {
    filter: drop-shadow(0 0 2px var(--accent));
}


/* === СТИЛИ ДЛЯ УЛУЧШЕННОЙ ПАНЕЛИ ФАЙЛОВ === */
.modern-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-bottom: 4px;
}

.modern-file-item:hover {
    background-color: var(--input-hover-bg-color, rgba(0,0,0,0.05));
}

body.dark-mode .modern-file-item:hover {
    background-color: rgba(255,255,255,0.05);
}

.modern-file-icon-wrap {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--message-bg-other);
}

.modern-file-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modern-file-details {
    flex-grow: 1;
    min-width: 0; /* Важно для обрезки текста */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modern-file-name {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.modern-file-meta {
    font-size: 0.75em;
    color: var(--secondary-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ======================================================= */
/* === СТИЛИЗАЦИЯ И АДАПТАЦИЯ КНОПКИ ЭКСПОРТА (СКАЧАТЬ) == */
/* ======================================================= */

#quizExportBtn {
    display: inline-flex !important;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    /* background: var(--container-bg-color) !important; */
    color: var(--text-color) !important;
    line-height: 1;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    transition: box-shadow 0.2s, color 0.2s, background-color 0.2s !important;
    cursor: pointer;
}

#quizExportBtn svg, 
#quizExportBtn i {
    width: 22px !important;
    height: 22px !important;
}

#quizExportBtn:hover {
    box-shadow: var(--neumorph-shadow-inset) !important;
}

/* Мобильная версия (чтобы была в ряд с остальными) */
@media (max-width: 768px) {
    #quizExportBtn {
        width: 36px !important;
        height: 36px !important;
    }
    #quizExportBtn svg, 
    #quizExportBtn i {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Адаптация под специальные темные темы (OLED / Glass) */
body.dark-mode #quizExportBtn:hover,
body.synthwave-mode #quizExportBtn:hover,
body.oled-mode #quizExportBtn:hover,
body.glass-dark #quizExportBtn:hover {
    background-color: var(--input-hover-bg-color) !important;
}

body.glass-dark #quizExportBtn,
body.oled-mode #quizExportBtn {
    border: 1px solid #fff3 !important;
    background-color: #ffffff00 !important;
}

body.claude-mode #quizExportBtn {
    /* background: var(--input-bg-color) !important; */
    border: 1px solid var(--border-color) !important;
}

body.claude-mode #quizExportBtn:hover {
    background: var(--input-hover-bg-color) !important;
}

/* Жесткое скрытие */
#quizExportBtn.hidden {
    display: none !important;
}


/* Состояние при прокрутке вниз (Стекло) */
.header-controls.scrolled-glass { /* Уменьшаем паддинг, чтобы шапка реально сжалась! */
    /* Убираем flex-gap: пока H1 коллапсится до 0, gap между ним и
       .header-buttons всё равно занимал ~15px и шапка казалась толстой. */
    gap: 0 !important;
    background-color: color-mix(in srgb, var(--container-bg-color) 10%, transparent);
    -webkit-backdrop-filter: blur(4px) saturate(180%);
    box-shadow: var(--neumorph-shadow-soft);
    border-bottom: 1px solid var(--border-color);
}


.header-controls.scrolled-glass h1 {
    opacity: 0 !important;
    transform: translateY(-20px) scale(0) !important;
    pointer-events: none !important;
    /* Плавно схлопываем по высоте вместо position:absolute. Cooldown в JS
       (SHRINK_COOLDOWN_MS) защищает от петли, когда уменьшение документа
       во время анимации форсит scrollY к нулю и триггерит обратный переход. */
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Специфичные правила для ПК (Широкий экран) */
@media (min-width: 601px) {
    .header-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
    }
    
    /* Магия: на ПК при скролле перестраиваем колонку в строку! */
    .header-controls.scrolled-glass {
        flex-direction: row; 
        padding: 8px 20px; /* Делаем красивую тонкую полоску */
        border-radius: 0 0 16px 16px; /* Скругляем низ */
        margin: 0 -20px 15px -20px;
    }
    
    .header-controls.scrolled-glass .header-buttons {
        /* justify-content: flex-end; */ /* Кнопки уезжают вправо */
        width: auto;
    }
}

body.dark-mode .header-controls.scrolled-glass,
body.synthwave-mode .header-controls.scrolled-glass,
body.oled-mode .header-controls.scrolled-glass {
    background-color: color-mix(in srgb, var(--container-bg-color) 10%, transparent);
    /* box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important; */
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
}


/* ======================================================= */
/* === PREMIUM UX: ПЛАВНОЕ ПОЯВЛЕНИЕ ЭКРАНОВ           === */
/* ======================================================= */
/* Применяется ко всем главным экранам (когда у них нет класса hidden) */
.view:not(.hidden) {
    /* Без forwards — намеренно.
       Анимация трогает transform, а анимация с forwards остаётся в силе
       навсегда: браузер считает такой элемент точкой отсчёта для потомков с
       position: fixed, независимо от того, что в последнем кадре стоит
       transform: none (см. соседний комментарий в @keyframes viewEnter —
       с этим уже боролись, но одного none мало, пока анимация удерживается).
       Из-за этого плавающая кнопка «создать программу» отсчитывала свой
       bottom от ВЫСОТЫ ЭКРАНА-КОНТЕЙНЕРА, а та растёт вместе с содержимым:
       кнопка стояла под текстом «У вас нет программ», а стоило появиться
       карточке — переезжала под неё.
       Удерживать тут нечего: последний кадр (opacity: 1, transform: none)
       совпадает с обычным состоянием элемента, своих opacity и transform у
       .view нет. */
    animation: viewEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* ПРОДАКШЕН ФИКС (VRAM LEAK): Убран перманентный will-change. 
       Браузер сам аппаратно ускорит элемент во время выполнения анимации viewEnter. 
       Оставлять will-change навсегда = бессмысленно резервировать 20-50 МБ видеопамяти на каждый экран. */
}

@keyframes viewEnter {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        /* ФИКС: Обязательно 'none', чтобы не создавать containing block и не ломать position: fixed у дочерних элементов */
        transform: none; 
    }
}


/* ======================================================= */
/* === PREMIUM UX: SMART DIMMING (УМНОЕ ЗАТЕМНЕНИЕ)    === */
/* ======================================================= */
/* 1. Подготавливаем элементы к плавной анимации прозрачности */
.header-controls,
.floating-nav-btn,
#timerDisplay,
#score,                 /* Строка "Вопрос X из Y" */
#quickNavPanel,         /* Сетка навигации */
#continueLaterButton,   /* Кнопка "Продолжить позже" */
#finishTestButton,      /* Кнопка "Завершить тест" */
footer {                /* Копирайт в самом низу */
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s ease !important;
    will-change: opacity;
}

/* 2. Когда пользователь не активен (добавлен класс на body) */
body.smart-dim-active .header-controls,
body.smart-dim-active .floating-nav-btn,
body.smart-dim-active #timerDisplay,
body.smart-dim-active #score,
body.smart-dim-active #quickNavPanel,
body.smart-dim-active #continueLaterButton,
body.smart-dim-active #finishTestButton,
body.smart-dim-active footer {
    opacity: 0.15 !important; /* Уводим в глубокую тень */
}

/* 3. При наведении на "спящий" элемент, он мгновенно "просыпается" (Только для ПК с мышью) */
@media (hover: hover) and (pointer: fine) {
    body.smart-dim-active .header-controls:hover,
    body.smart-dim-active .floating-nav-btn:hover,
    body.smart-dim-active #score:hover,
    body.smart-dim-active #quickNavPanel:hover,
    body.smart-dim-active #continueLaterButton:hover,
    body.smart-dim-active #finishTestButton:hover,
    body.smart-dim-active footer:hover {
        opacity: 1 !important;
        transition: opacity 0.1s ease !important; /* Быстрое пробуждение */
    }

    /* Проявление шапки при скролле только если навести на нее настоящую мышь */
    .header-controls.scrolled-fade-out:hover {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* ======================================================= */
/* === PREMIUM UX: СВЕЧЕНИЕ АКТИВНЫХ ПОЛЕЙ ВВОДА       === */
/* ======================================================= */
textarea, 
input[type="text"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
.auth-input {
    transition: border-color 0.3s ease, box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s ease !important;
}

textarea:focus, 
input[type="text"]:focus, 
input[type="number"]:focus, 
input[type="password"]:focus, 
input[type="search"]:focus, 
.auth-input:focus {
 
    transform: translateY(-1px); /* Слегка приподнимаем поле */
    outline: none !important;
}

/* Возврат видимого фокуса тем же полям.
   Правило выше снимает outline у ВСЕХ текстовых полей приложения, а взамен
   даёт подъём на один пиксель — как признак фокуса это не читается вовсе.
   Общее правило в конце файла сюда не достаёт: у него специфичность (0,1,0),
   а здесь (0,2,1), и !important стоит с обеих сторон — при таком раскладе
   спор решает специфичность, и выигрывает этот селектор. Поэтому пару к нему
   пишем здесь же, повторяя список один в один: одинаковая специфичность,
   но ниже по файлу — значит перевес наш.

   :focus-visible, а не :focus: по щелчку мышью рамка не появится, только при
   переходе с клавиатуры. Подъём на пиксель при этом остаётся на месте. */
/* Здесь была пара к правилу выше — рамка, возвращаемая текстовым полям. Снята: она и
   давала алое кольцо при каждом тапе по полю ввода (см. комментарий у *:focus-visible). */


/* ======================================================= */
/* === PREMIUM UX: DYNAMIC GLARE EFFECT (БЛИК СВЕТА)   === */
/* ======================================================= */
.tilt-glare-effect {
    position: relative;
    overflow: hidden; /* Чтобы свет не выходил за границы карточки */
}

/* Псевдоэлемент, который рисует само световое пятно */
.tilt-glare-effect::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    pointer-events: none; /* Пропускаем клики сквозь свет */
    /* ПРОДАКШЕН ФИКС: Усиливаем яркость блика для светлых тем (0.6 вместо 0.2) */
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.6) 0%, 
        transparent 60%
    );
    /* Добавляем режим смешивания для сочности поверх любых цветов */
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity 0.3s ease; /* Плавное появление света */
}

/* Включаем свет при наведении */
.tilt-glare-effect:hover::after {
    opacity: 1;
}

/* Подъём вместо прежнего 3D-наклона: спокойно, читаемо и одинаково хорошо
   работает и на маленьких плитках, и на широких карточках-строках.
   Только для мыши — на тач-экранах :hover залипает после тапа. */
@media (hover: hover) and (pointer: fine) {
    .tilt-glare-effect {
        transition: transform .22s cubic-bezier(.2, .7, .3, 1),
                    box-shadow .22s cubic-bezier(.2, .7, .3, 1);
        will-change: transform;
    }

    .tilt-glare-effect:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    }

    .tilt-glare-effect:active {
        transform: translateY(-1px) scale(.995);
        box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
        transition-duration: .08s;
    }

    body.dark-mode .tilt-glare-effect:hover,
    body.synthwave-mode .tilt-glare-effect:hover,
    body.oled-mode .tilt-glare-effect:hover {
        box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
    }
}

/* Для темных тем делаем блик чуть ярче для контраста */
body.dark-mode .tilt-glare-effect::after,
body.synthwave-mode .tilt-glare-effect::after,
body.oled-mode .tilt-glare-effect::after {
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.25) 0%, 
        transparent 60%
    );
}


/* ======================================================= */
/* === АНИМАЦИЯ ИСЧЕЗНОВЕНИЯ ЗАГОЛОВКА ПРИ СКРОЛЛЕ (GPU) === */
/* ======================================================= */

/* 1. Подготавливаем заголовок. Анимируем transform, opacity и max-height. */
.header-controls h1 {
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: top center;
    overflow: hidden;
    max-height: 150px;
    will-change: transform, opacity, max-height;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.25s ease-out,
                max-height 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* 2. Состояние заголовка при активном скролле ИЛИ при ручном скрытии */
.header-controls.scrolled-glass h1,
body.title-hidden-mode .header-controls h1 {
    opacity: 0 !important;
    transform: translateY(-15px) scale(0) !important;
    pointer-events: none !important;
    /* Плавный max-height-коллапс вместо position:absolute. Cooldown в JS
       (initSmartHeader, SHRINK_COOLDOWN_MS) защищает от петли при сжатии
       документа во время анимации. */
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.header-controls.scrolled-glass {
    padding-top: 15px;
    /* padding-bottom: 15px; */
}

@media (min-width: 601px) {
    .header-controls.scrolled-glass {
        gap: 0; 
    }
}


/* ======================================================= */
/* === ИСПРАВЛЕНИЕ: ВИДЕО СТРОГО ПОД УМНОЙ ШАПКОЙ      === */
/* ======================================================= */

/* Стандартный, двухстраничный и широкий режимы */
.floating-video-container,
body.large-video-mode .floating-video-container,
body.two-page-mode-active #floatingVideoContainer {
    top: 55px !important; /* Опускаем видео ниже свернутой шапки */
}

/* Режим мини-плеера (если он не был перетащен вручную) */
body.mini-player-mode #floatingVideoContainer:not(.is-dragged-once) {
    top: 65px !important; 
}

/* Адаптив для телефонов (шапка там занимает чуть меньше места) */
@media (max-width: 768px) {
    .floating-video-container,
    body.large-video-mode .floating-video-container,
    body.two-page-mode-active #floatingVideoContainer,
    body.mini-player-mode #floatingVideoContainer:not(.is-dragged-once) {
        top: 55px !important;
    }

    /* Когда заголовок-шапка скрыт (title-hidden-mode), на телефоне её вообще
       нет (display:none). Резерв в 55px под неё оставлял пустоту над видео —
       прижимаем видео к самому верху. Мини-плеер (position:fixed) не трогаем. */
    body.title-hidden-mode .floating-video-container,
    body.title-hidden-mode.large-video-mode .floating-video-container,
    body.title-hidden-mode.two-page-mode-active #floatingVideoContainer {
        top: 0 !important;
    }
}

/* Горизонтальный режим телефона */
@media screen and (orientation: landscape) and (max-height: 500px) {
    body #floatingVideoContainer,
    body.two-page-mode-active #floatingVideoContainer,
    body.large-video-mode #floatingVideoContainer {
        top: 75px !important; 
    }
}

/* ======================================================= */
/* === ИСПРАВЛЕНИЕ: МИНИ-ПЛЕЕР УЕЗЖАЕТ ПРИ СКРОЛЛЕ     === */
/* ======================================================= */

/* 1. Гарантируем, что плеер 100% зафиксирован относительно окна */
body.mini-player-mode #floatingVideoContainer {
    position: fixed !important;
    z-index: 2147483647 !important; /* Поверх вообще всего */
}

/* 2. СНИМАЕМ ЛОВУШКИ CSS У РОДИТЕЛЕЙ */
/* Отключаем transform и will-change у родительских блоков пока активен PiP, 
   иначе браузер привязывает fixed-элемент к ним, а не к экрану */
body.mini-player-mode .app-wrapper,
body.mini-player-mode .container,
body.mini-player-mode .view,
body.mini-player-mode #lessonViewArea {
    transform: none !important;
    will-change: auto !important;
    animation: none !important;
    perspective: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ======================================================= */
/* === ОПТИМИЗАЦИЯ ДЛЯ ГИГАНТСКИХ ТЕСТОВ (3000+ ВОПРОСОВ) == */
/* ======================================================= */
#quickNavButtons {
    /* Изолирует пересчет стилей (когда меняется тема) только внутри этого блока */
    contain: content;
}


/* ======================================================= */
/* === РЕЖИМ ЭНЕРГОСБЕРЕЖЕНИЯ (СЛАБЫЕ ТЕЛЕФОНЫ / ANDROID)=== */
/* ======================================================= */

/* Класс low-power больше не ставится (защита для слабых устройств снята 10.09.2026);
   правила ниже остались на случай ручного включения класса. */

body.low-power .tilt-glare-effect::after {
    /* 2. Отключаем эффект 3D светового блика на карточках (экономит перерисовку) */
    display: none !important;
}

/* 3. Компенсируем отключенный блюр заливкой фона, чтобы текст оставался читаемым */
body.low-power .header-controls.scrolled-glass,
body.low-power .lesson-toolbar,
body.low-power .advanced-chat-header,
body.low-power .ludo-top-bar,
body.low-power .zonk-history-panel,
body.low-power .user-dropdown,
body.low-power .message-actions-toolbar,
body.low-power .undo-toast,
body.low-power #typingIndicator.typing-indicator-bar,
body.low-power .modal-overlay,
body.low-power .advanced-chat-overlay,
body.low-power .auth-overlay {
    background-color: var(--container-bg-color) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Для полноэкранных оверлеев фон должен быть темным */
body.low-power .modal-overlay,
body.low-power .advanced-chat-overlay,
body.low-power .auth-overlay {
    background-color: rgba(0, 0, 0, 0.9) !important; /* Плотный черный вместо блюра */
}

/* Усиливаем тени для мелких плавающих панелей, так как блюр отключен */
body.low-power .user-dropdown,
body.low-power .message-actions-toolbar,
body.low-power .undo-toast {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* Пикеры: плотный фон когда блюр отключен */
body.low-power emoji-picker.visible,
body.low-power .full-reaction-picker {
    background-color: var(--container-bg-color) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* 4. Отключаем эффект фото-зернистости (он тоже ест ресурсы GPU) */
/* body.low-power.grain-enabled::after {
    display: none !important;
}

/* 5. Упрощаем тяжелые Box-Shadow на плавающих кнопках */
body.low-power .study-widget,
body.low-power .advanced-chat-modal {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
/* ======================================================= */
/* === CONTENT-VISIBILITY: Браузер пропускает рендер    === */
/* === скрытых секций, экономя CPU/GPU                  === */
/* ======================================================= */
#quizSetupArea.hidden,
#quizArea.hidden,
#resultsArea.hidden,
#parserArea.hidden,
#coursesArea.hidden,
#courseDetailArea.hidden,
#lessonViewArea.hidden,
#visualTrainerArea.hidden,
#fitnessArea.hidden,
#roadmapArea.hidden,
#toolsArea.hidden,
#medicalCalcArea.hidden,
#reflectionArea.hidden,
#reflectionJoinArea.hidden,
#gamesMenuArea.hidden,
#zonkLobbyArea.hidden,
#videoInterceptorArea.hidden {
    content-visibility: hidden;
}

/* Видимые, но тяжёлые секции — рендерим только в viewport */
.seo-footer-info,
#savedSessionArea,
#decksArea,
#gradusFoldersContainer,
.main-actions-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
    padding: 15px 15px 45px 15px;
}


/* Модальные оверлеи — не рендерим пока скрыты */
#imageCropModal.hidden,
#quizControlModal.hidden,
#studentResultDetailsModal.hidden,
#programEditorModal.hidden,
#videoPlayerModal.hidden {
    content-visibility: hidden;
}

/* Тяжёлые списковые элементы */
.course-card,
.gradus-folder-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}

/* ======================================================= */
/* === ПОЛНОЭКРАННАЯ ГАЛЕРЕЯ И ЗУМ (PRO UX)            === */
/* ======================================================= */

#imagePreviewModal { /* Поверх всего, включая BottomSheet (100051) */
    display: flex;
    -webkit-backdrop-filter: blur(10px);
}

.image-preview-content {
    animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* Панель миниатюр внизу */
.preview-thumbnails-container { 
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.3s ease;
    scroll-snap-type: x mandatory;
}

.preview-thumbnail {
    scroll-snap-align: center;
}

.preview-thumbnails-container::-webkit-scrollbar {
    display: none;
}

.preview-thumbnails-container.hidden {
    display: none !important;
}

.preview-thumbnail {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0.5;
}

.preview-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
 
    transform: scale(1.1);
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Предполагается, что скрипт добавляет загруженным картинкам opacity 1 или класс loaded */
.preview-thumbnail img[style*="opacity: 1"],
.preview-thumbnail img[style*="opacity:1"] {
    filter: blur(0px) grayscale(0%);
    transform: scale(1);
}

.preview-thumbnail:hover {
    opacity: 0.9;
    transform: translateY(-2px); /* Легкий подъем миниатюры при наведении */
}

.preview-thumbnail.active {
    opacity: 1;
    border-color: var(--accent, #3498db);
    transform: scale(1.15);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.close-image-preview {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: all 0.2s;
}

.close-image-preview:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}


/* ======================================================= */
/* === MICRO-INTERACTIONS: НАСТРОЙКИ НАВИГАЦИИ (СВАЙПЫ) === */
/* ======================================================= */

/* По умолчанию скрываем кнопку настроек навигации */
#quizMobileSettingsDropdown {
    display: none !important;
}

/* Показываем её и на ПК, и на мобилках, но ТОЛЬКО когда активен тест */
body.quiz-active #quizMobileSettingsDropdown:not(.hidden) {
    display: inline-flex !important;
}

/* === БОКОВОЕ ПОЛОЖЕНИЕ ШАПКИ ВО ВРЕМЯ ТЕСТА === */
/* Превращаем .header-buttons в плавающую боковую панель с подписями.
   Подписи берём из атрибута title (он автолокализуется через data-lang-key). */
body.header-side-mode.quiz-active .header-buttons {
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 260px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 10px !important;
    gap: 6px !important;
    background-color: color-mix(in srgb, var(--container-bg-color) 95%, transparent) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-right: none !important;
    border-radius: 14px 0 0 14px !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.12) !important;
    z-index: 1100 !important;
    transition: width 0.25s ease, padding 0.25s ease, background-color 0.25s ease !important;
}

/* Прячем заголовок приложения, чтобы освободить место в зоне теста */
body.header-side-mode.quiz-active #appTitleHeader {
    display: none !important;
}

/* В боковом режиме .header-buttons переносится в <body>, в .header-controls
   остаётся только скрытый #appTitleHeader. Полностью убираем «пустой обрубок».
   Селектор .container > .header-controls — только главная шапка, не nested .header-controls
   из чата (chat.js:2501 рендерит свой `<div class="header-controls">` внутри
   `.advanced-chat-header`, и без child-комбинатора он тоже скрывался). */
body.header-side-mode.quiz-active .container > .header-controls {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    border: none !important;
    display: none !important;
}

/* Контейнеры-обёртки (dropdown) разворачиваем во всю ширину панели, столбцом */
body.header-side-mode.quiz-active .header-buttons > .dropdown:not(.hidden) {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Обёртка #quizMobileSettingsDropdown в общем списке line 554 получает width:36px,
   height:36px, border-radius:50%, background и box-shadow — отсюда эллипс на ширину 100%.
   Полностью сбрасываем «кнопочные» стили обёртки в боковом режиме. */
body.header-side-mode.quiz-active #quizMobileSettingsDropdown,
body.header-side-mode.quiz-active #quizExportDropdownContainer,
body.header-side-mode.quiz-active #webSearchDropdown,
body.header-side-mode.quiz-active #themeDropdownContainer {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 10px !important;
}

/* === КОНТЕЙНЕР ПЕРЕВОДА — СПЛИТ-КНОПКА В БОКОВОМ РЕЖИМЕ ===
   По умолчанию это «таблетка» (border-radius: 50px, box-shadow). В боковом режиме
   делаем её обычной прямоугольной строкой: левая часть — translateQuestionBtn (с подписью),
   правая часть — узкий triangle-toggle (открывает выбор движка). */
body.header-side-mode.quiz-active .header-buttons > .translate-engine-container:not(.hidden) {
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

body.header-side-mode.quiz-active .translate-engine-container:hover {
    box-shadow: none !important;
}

body.header-side-mode.quiz-active .translate-engine-container > #translateQuestionBtn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    border-radius: 10px 0 0 10px !important;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.header-side-mode.quiz-active .translate-engine-container > #translateEngineToggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: none !important;
    border-left: 1px solid var(--border-color) !important;
    border-radius: 0 10px 10px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

/* В сплит-режиме у кнопки-перевода НЕ показываем подпись из ::after,
   потому что title уже самодостаточный («Перевести на русский»),
   а ::after-правило ниже добавляет дубликат. Здесь его подавляем. */
/* (см. ниже — общее ::after для translate-container button перекрываем) */

/* Базовое правило — для прямых детей-кнопок */
body.header-side-mode.quiz-active .header-buttons > button,
body.header-side-mode.quiz-active .header-buttons > .dropdown > button,
body.header-side-mode.quiz-active .header-buttons > .translate-engine-container > button {
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    gap: 10px !important;
}

/* Во время теста прячем PWA-кнопку «Установить приложение» — её иконка download
   путает пользователей, выглядит как «скачать». В режиме теста она не нужна. */
body.quiz-active #customInstallBtn {
    display: none !important;
}

/* Override-ы для кнопок с ID-правилами !important (ui-addons.js, inline style).
   Селектор body.x.x #id даёт более высокую специфичность, чем одиночный #id !important. */
body.header-side-mode.quiz-active #flagQuestionBtn,
body.header-side-mode.quiz-active #questionNoteBtn,
body.header-side-mode.quiz-active #customInstallBtn,
body.header-side-mode.quiz-active #quizExportBtn,
body.header-side-mode.quiz-active #quizMobileSettingsBtn,
body.header-side-mode.quiz-active #copyQuestionBtnQuiz,
body.header-side-mode.quiz-active #searchWebButton,
body.header-side-mode.quiz-active #themeDropdownButton,
body.header-side-mode.quiz-active #quickModeToggle,
body.header-side-mode.quiz-active #triggerWordToggle,
body.header-side-mode.quiz-active #languageToggle,
body.header-side-mode.quiz-active #chatToggle,
body.header-side-mode.quiz-active #favoriteQuestionBtn,
body.header-side-mode.quiz-active #translateQuestionBtn,
body.header-side-mode.quiz-active #studyTogetherBtn,
body.header-side-mode.quiz-active #flashcardTypingToggle,
body.header-side-mode.quiz-active #flashcardAutoplayToggle,
body.header-side-mode.quiz-active #reloadAppBtn,
body.header-side-mode.quiz-active #showSearchBtn {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Hover — мягкая подсветка вместо «утопленной» неоморф-тени */
body.header-side-mode.quiz-active .header-buttons button:hover {
    background-color: var(--input-hover-bg-color, rgba(0,0,0,0.06)) !important;
    box-shadow: none !important;
}

/* Иконки внутри кнопок — единый размер, не сжимаются */
body.header-side-mode.quiz-active .header-buttons button > i,
body.header-side-mode.quiz-active .header-buttons button > svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
}

/* Подпись из aria-label — title нельзя, потому что tippy.delegate в script.js:50160
   удаляет title после первого hover (переносит его в data-tippy-content), и attr(title)
   становится пустым. aria-label tippy не трогает, обновляется при смене языка через i18n. */
body.header-side-mode.quiz-active .header-buttons > button::after,
body.header-side-mode.quiz-active .header-buttons > .dropdown > button::after,
body.header-side-mode.quiz-active .header-buttons > .translate-engine-container > #translateQuestionBtn::after {
    content: attr(aria-label);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    text-align: left;
    line-height: 1.2;
}

/* Не выводим ::after-подпись для toggle-стрелочки — у него нет нормального title */
body.header-side-mode.quiz-active #translateEngineToggle::after {
    content: none !important;
}

/* === КНОПКА-«ЯЗЫЧОК» СВОРАЧИВАНИЯ === */
/* По умолчанию (в режиме «сверху») кнопка-сворачивания скрыта.
   ID-селектор + !important — чтобы перебить любые .header-buttons > button display-правила. */
#headerSideCollapseBtn,
.header-side-collapse-btn {
    display: none !important;
}

body.header-side-mode.quiz-active #headerSideCollapseBtn,
body.header-side-mode.quiz-active .header-side-collapse-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--secondary-text-color) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin-bottom: 2px !important;
    order: -1 !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

body.header-side-mode.quiz-active .header-side-collapse-btn:hover {
    background-color: var(--input-hover-bg-color, rgba(0,0,0,0.05)) !important;
}

body.header-side-mode.quiz-active .header-side-collapse-btn > i,
body.header-side-mode.quiz-active .header-side-collapse-btn > svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.2s ease;
}

/* В развёрнутом виде стрелка смотрит вправо (свернуть). В свёрнутом — влево (развернуть). */
body.header-side-mode.quiz-active .header-buttons:not(.is-side-collapsed) .header-side-collapse-btn > i,
body.header-side-mode.quiz-active .header-buttons:not(.is-side-collapsed) .header-side-collapse-btn > svg {
    transform: rotate(0deg);
}

body.header-side-mode.quiz-active .header-buttons.is-side-collapsed .header-side-collapse-btn > i,
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed .header-side-collapse-btn > svg {
    transform: rotate(180deg);
}

/* === СВЁРНУТОЕ СОСТОЯНИЕ — узкий язычок === */
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
    height: 64px !important;
    max-height: 64px !important;
    background-color: color-mix(in srgb, var(--container-bg-color) 85%, transparent) !important;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15) !important;
    gap: 0 !important;
    cursor: pointer !important;
    /* Глушим клики по всей панели — оживляем только саму ручку ниже */
    pointer-events: none !important;
}

/* Прячем всё, кроме кнопки-разворачивания. Двойная защита:
   visibility+display+pointer-events — чтобы пережить любые !important-правила
   из мобильной media (.header-buttons > button { display: inline-flex !important }). */
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed > *:not(.header-side-collapse-btn) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ID-уровень specificity — чтобы перебить #flagQuestionBtn { display: inline-flex !important }
   из ui-addons.js и аналогичные ID-правила в style.css. :is() даёт specificity ID. */

/* Dropdown-обёртки и контейнер переводчика — тоже глушим. ID нужны, потому что
   #quizMobileSettingsDropdown:not(.hidden) { display: inline-flex !important }
   из style.css:42968 перебивает класс-селектор .dropdown. */
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed > :is(
    #webSearchDropdown,
    #themeDropdownContainer,
    #quizExportDropdownContainer,
    #quizMobileSettingsDropdown
),
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed > .dropdown,
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed > .translate-engine-container {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Убираем ::after-подпись с title у ручки — она перекашивает центрирование иконки в 16px */
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed .header-side-collapse-btn::after,
body.header-side-mode.quiz-active .header-side-collapse-btn::after {
    content: none !important;
    display: none !important;
}

/* ID в селекторе нужен, чтобы перебить #headerSideCollapseBtn { height: 28px; min-height: 28px; padding: 4px !important }
   из правила на line 43192 — иначе кнопка-ручка остаётся 28px высотой и chevron прижат к верху панели. */
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed #headerSideCollapseBtn,
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed .header-side-collapse-btn {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    align-self: stretch !important;
    flex: 1 1 100% !important;
}

/* === ГРУППИРОВКА КНОПОК В БОКОВОМ РЕЖИМЕ === */
/* По умолчанию (верхний режим, любой другой) — разделители групп не видны.
   !important нужен, чтобы перебить мобильное правило .header-buttons > div { display: inline-flex !important }
   из @media (max-width: 768px) на line ~50581. */
.header-buttons > .header-side-divider {
    display: none !important;
}

/* В развёрнутом боковом режиме — показываем как заголовок-секцию */
body.header-side-mode.quiz-active .header-buttons:not(.is-side-collapsed) > .header-side-divider {
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
    padding: 8px 12px 4px !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--secondary-text-color) !important;
    border-top: 1px solid var(--border-color) !important;
    opacity: 0.75 !important;
}
/* Первый разделитель (Текущий вопрос) идёт сразу после ручки сворачивания — без верхней линии */
body.header-side-mode.quiz-active .header-buttons:not(.is-side-collapsed) > .header-side-divider[data-side-group="current"] {
    border-top: none !important;
    margin-top: 0 !important;
}

/* В свёрнутом виде — разделители тоже прячем (общие правила :not(.header-side-collapse-btn)
   их уже скрывают через display:none, но дублируем явно для надёжности) */
body.header-side-mode.quiz-active .header-buttons.is-side-collapsed > .header-side-divider {
    display: none !important;
}

/* Порядок элементов внутри боковой панели. order работает только в flex-контейнере,
   а .header-buttons в side-mode именно flex-column. В верхнем режиме order не влияет,
   потому что top-mode использует обычный row-layout без переопределения order. */
body.header-side-mode.quiz-active .header-buttons > #headerSideCollapseBtn          { order: -1 !important; }
/* Группа 1 — текущий вопрос */
body.header-side-mode.quiz-active .header-buttons > .header-side-divider[data-side-group="current"]  { order:  0 !important; }
body.header-side-mode.quiz-active .header-buttons > #copyQuestionBtnQuiz            { order:  1 !important; }
body.header-side-mode.quiz-active .header-buttons > .translate-engine-container     { order:  2 !important; }
body.header-side-mode.quiz-active .header-buttons > #flagQuestionBtn                { order:  3 !important; }
body.header-side-mode.quiz-active .header-buttons > #questionNoteBtn                { order:  4 !important; }
body.header-side-mode.quiz-active .header-buttons > #favoriteQuestionBtn            { order:  5 !important; }
body.header-side-mode.quiz-active .header-buttons > #webSearchDropdown              { order:  6 !important; }
/* Группа 2 — сервисы (общение и оформление) */
body.header-side-mode.quiz-active .header-buttons > .header-side-divider[data-side-group="services"] { order: 10 !important; }
body.header-side-mode.quiz-active .header-buttons > #chatToggle                     { order: 11 !important; }
body.header-side-mode.quiz-active .header-buttons > #studyTogetherBtn               { order: 12 !important; }
body.header-side-mode.quiz-active .header-buttons > #themeDropdownContainer         { order: 13 !important; }
body.header-side-mode.quiz-active .header-buttons > #languageToggle                 { order: 14 !important; }
/* Группа 3 — режимы теста и настройки */
body.header-side-mode.quiz-active .header-buttons > .header-side-divider[data-side-group="modes"]    { order: 20 !important; }
body.header-side-mode.quiz-active .header-buttons > #quickModeToggle                { order: 21 !important; }
body.header-side-mode.quiz-active .header-buttons > #triggerWordToggle              { order: 22 !important; }
body.header-side-mode.quiz-active .header-buttons > #quizExportDropdownContainer    { order: 23 !important; }
body.header-side-mode.quiz-active .header-buttons > #quizMobileSettingsDropdown     { order: 24 !important; }
/* Прочее (flashcard-only, customInstall и т.п.) — в конец */
body.header-side-mode.quiz-active .header-buttons > #flashcardTypingToggle          { order: 30 !important; }
body.header-side-mode.quiz-active .header-buttons > #flashcardAutoplayToggle        { order: 31 !important; }
body.header-side-mode.quiz-active .header-buttons > #reloadAppBtn                   { order: 32 !important; }
body.header-side-mode.quiz-active .header-buttons > #customInstallBtn               { order: 33 !important; }

/* На мобиле кнопки Чат/Видео/Тема/Язык переехали в нижнюю навигацию (см. line ~50591),
   поэтому категория «Сервисы» в боковом режиме остаётся пустой — прячем её заголовок.
   Specificity (0,5,1) нужна, чтобы перебить «показывающее» правило выше с тем же весом. */
@media (max-width: 768px) {
    body.header-side-mode.quiz-active .header-buttons:not(.is-side-collapsed) > .header-side-divider[data-side-group="services"] {
        display: none !important;
    }
}

/* На очень узких экранах сужаем панель, чтобы не съедала пол-экрана */
@media (max-width: 600px) {
    body.header-side-mode.quiz-active .header-buttons {
        width: 240px !important;
        padding: 8px !important;
        gap: 4px !important;
    }
    body.header-side-mode.quiz-active .header-buttons > button::after,
    body.header-side-mode.quiz-active .header-buttons > .dropdown > button::after,
    body.header-side-mode.quiz-active .header-buttons > .translate-engine-container > button::after {
        font-size: 12px;
    }
}

/* Если включен режим свайпов — скрываем плавающие кнопки-стрелки */
body.swipe-nav-mode .floating-nav-btn {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Стили для активного пункта меню */
#quizMobileSettingsContent a.active {
    background-color: rgba(var(--accent-rgb, 52, 152, 219), 0.1);
    color: var(--accent) !important;
    font-weight: 600;
}
#quizMobileSettingsContent a.active i {
    color: var(--accent);
}


/* ======================================================= */
/* === PREMIUM MICRO-INTERACTIONS (GPU OPTIMIZED)      === */
/* ======================================================= */

/* 1. Микро-физика тумблеров (Сплющивание при движении) */
.ai-toggle-slider::before {
    /* Меняем обычный transition на физическую пружину */
    transition: transform 0.4s cubic-bezier(0.54, -0.2, 0.25, 1.2), width 0.2s ease !important;
}
.ai-toggle-switch:active .ai-toggle-slider::before {
    /* ОПТИМИЗАЦИЯ GPU: Эффект натяжения через композитор (без Layout Thrashing) */
    transform: scaleX(1.3) !important;
    transform-origin: left center !important;
}
.ai-toggle-switch input:checked:active + .ai-toggle-slider::before {
    /* Аппаратное сплющивание в обратную сторону */
    transform: translateX(14px) scaleX(1.3) !important;
    transform-origin: right center !important;
}

/* 2. Распаковка панели действий (Каскадный веер)
   Видимость НЕ должна зависеть от анимации.
   Раньше здесь стояло opacity: 0 плюс forwards: кнопка была невидима, и
   проявляла её только доигравшая анимация. Любой её перезапуск или сброс
   при наведении оставлял кнопку погашенной — значок пропадал прямо под
   курсором. Теперь база видимая, а скрытое состояние живёт в кадре from;
   backwards держит его во время задержки, так что веер сохранился, но
   после осечки кнопка остаётся ВИДИМОЙ, а не исчезает. */
/* Только при наличии наведения: на сенсорном экране :hover залипает после тапа и веер
   перезапускался на каждом касании — нажатая кнопка гасла на время задержки анимации. */
@media (hover: hover) {
    .ai-message-container:hover .ai-action-btn {
        animation: popInBtn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
        opacity: 1;
    }
}
/* Задаем задержку для каждой следующей кнопки (эффект веера) */
.ai-message-actions .ai-action-btn:nth-child(1) { animation-delay: 0.00s; }
.ai-message-actions .ai-action-btn:nth-child(2) { animation-delay: 0.04s; }
.ai-message-actions .ai-action-btn:nth-child(3) { animation-delay: 0.08s; }
.ai-message-actions .ai-action-btn:nth-child(4) { animation-delay: 0.12s; }
.ai-message-actions .ai-action-btn:nth-child(5) { animation-delay: 0.16s; }
.ai-message-actions .ai-action-btn:nth-child(6) { animation-delay: 0.20s; }

@keyframes popInBtn {
    0% { transform: scale(0.5) translateX(-10px); opacity: 0; }
    100% { transform: scale(1) translateX(0); opacity: 1; }
}

/* 3. Индикатор "ИИ Думает" (Siri-style Gradient) - FIXED HOLLOW MASK */
.ai-chat-input-container {
    position: relative;
    overflow: visible !important; 
}

/* 3 & 5. УМНЫЙ НЕОНОВЫЙ ФОКУС (Siri & Listening) - THICK HOLLOW MASK */
.ai-chat-input-container.is-thinking::before,
.ai-chat-input-container.is-listening::before,
.input-wrapper.is-listening::before {
    content: '';
    position: absolute;
    /* PREMIUM UX: Выносим далеко за пределы стандартного фокуса */
    inset: -6px; 
    z-index: -1;
    border-radius: 16px; 
    background: linear-gradient(450deg, #ff4b4b, #9b59b6, #3498db, #2ee68c, #ffd34d, #ff4b4b);
    background-size: 200% 200%;
    pointer-events: none;
    
    /* Делаем "трубку" неона толстой (7px) */
    padding: 7px; 
    background-clip: content-box, border-box;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.ai-chat-input-container.is-thinking::before {
    animation: siriGradient 2s linear infinite, glowPulse 1.5s ease-in-out infinite alternate;
    opacity: 1; /* Полная яркость */
    filter: blur(6px); /* Делаем свет мягким и широким */
    transform: translateZ(0);
}

.ai-chat-input-container.is-listening::before,
.input-wrapper.is-listening::before {
    opacity: calc(0.7 + var(--mic-vol, 0) * 0.3);
    filter: blur(calc(5px + var(--mic-vol, 0) * 6px));
    transform: scale(calc(1 + var(--mic-vol, 0) * 0.015)) translateZ(0);
}

/* PREMIUM UX: Подавляем обычный бордер и тень при активном ИИ, чтобы они не спорили с неоном */
.ai-chat-input-container.is-thinking:focus-within,
.ai-chat-input-container.is-listening:focus-within {
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important; 
    border-color: transparent !important;
}

@keyframes siriGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes glowPulse {
    0% { opacity: 0.4; filter: blur(4px); transform: scale(1); }
    100% { opacity: 0.8; filter: blur(6px); transform: scale(1.01); }
}

/* 4. Отправка сообщения (Swoosh) */
#aiChatInput {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: right bottom;
}
#aiChatInput.swoosh-out {
    transform: scale(0.3) translate(50px, 50px);
    opacity: 0;
    filter: blur(4px);
}
@keyframes sendRocket {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-20px) scale(0.8); opacity: 0; }
    31% { transform: translateY(20px) scale(0.8); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 5. Сердцебиение таймера */
#timerDisplay.timer-critical {
    color: var(--button-danger-bg, #e74c3c) !important;
    animation: heartbeat 1s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.05); }
    30% { transform: scale(1); }
    45% { transform: scale(1.05); }
}

/* 6. "Дыхание" и блик прогресс-бара */
.fsrs-session-progress-fill {
    position: relative;
    overflow: hidden;
}
.fsrs-session-progress-fill.breathe {
    animation: barBreathe 0.4s ease-out;
}

@keyframes barBreathe {
    0% { filter: brightness(1); transform: scaleY(1); }
    50% { filter: brightness(1.5); transform: scaleY(1.5); box-shadow: 0 0 10px var(--accent); }
    100% { filter: brightness(1); transform: scaleY(1); }
}
@keyframes lightSweep {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}

.fsrs-session-progress-fill.breathe::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* APP STORE TIER: Жесткий лазерный блик (Laser Sweep) */
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
    width: 50%;
    animation: lightSweep 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 8. Трансформация кнопки "Проверить" */
#checkAnswerBtn {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}
#checkAnswerBtn.is-checking {
    width: 60px !important;
    border-radius: 30px !important;
    color: transparent !important;
}
#checkAnswerBtn.is-checking::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Оптимизация Tinder-свайпа */
#questionContainer {
    will-change: transform, opacity;
    transform-origin: bottom center; /* Чтобы карточка падала вниз, а не улетала вбок */
}


/* --- SPICE 3: Breathing Empty States --- */
.empty-state::before,
.empty-state i,
.gallery-placeholder i {
    will-change: transform, opacity;
    animation: breatheEmpty 2s ease-in-out infinite alternate;
}

@keyframes breatheEmpty {
    0% { transform: scale(1) translateY(0); opacity: 0.5; }
    100% { transform: scale(1.05) translateY(-3px); opacity: 0.8; }
}

/* --- SPICE 4: Graceful Delete Animation --- */
.item-deleting {
    pointer-events: none !important; 
    animation: shrinkAndFade 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
    transform-origin: center top;
}

@keyframes shrinkAndFade {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0; transform: scale(0.95); }
    100% { 
        opacity: 0; 
        transform: scale(0.8); 
        height: 0 !important; 
        min-height: 0 !important; 
        margin-top: 0 !important; 
        margin-bottom: 0 !important; 
        padding-top: 0 !important; 
        padding-bottom: 0 !important; 
        border: none !important; 
    }
}


.wiki-image-wrapper,
.ai-message-image-wrapper {
    /* Запрещаем цепляться за сами картинки, чтобы они могли спокойно расти вниз */
    overflow-anchor: none !important;
    margin-left: 10px;
    padding: 25px;
}


.chat-image-svg-wrapper img {
    display: block !important;
    width: 100% !important; /* Картинка железно заполняет обертку */
    height: auto !important;
    margin: 0px 0px 0px !important;
    object-fit: cover !important;
}

/* ======================================================= */
/* === PREMIUM UX: SHARED ELEMENT MORPHING             === */
/* ======================================================= */

/* Настройки пружинной анимации для морфинга карточек в окна */
::view-transition-group(hero-card) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.4, 1.2); /* Эффект мягкой пружины */
}

::view-transition-old(hero-card),
::view-transition-new(hero-card) {
    /* Убираем стандартное резкое растворение (crossfade), 
       заставляя элемент физически менять размер */
    animation: none;
    mix-blend-mode: normal;
}

/* Оптимизируем рендеринг карточек, чтобы браузеру было легче делать их "слепки" */
.deck-card, .program-card, .course-card {
    contain: layout paint;
}

/* ======================================================= */
/* === ИСПРАВЛЕНИЕ: ШИРОКАЯ ГАЛЕРЕЯ ДЛЯ БИБЛИОТЕКИ КОЛОД === */
/* ======================================================= */
#decksLibraryModal .modal-content {
    width: 95vw !important;
    max-width: 1200px !important;
    height: 90vh !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important; /* Убираем стандартные паддинги для галереи */
    overflow: hidden !important;
    background-color: var(--bg-color) !important; /* Фон как у самого приложения */
}

/* Шапка библиотеки */
#decksLibraryModal .community-modal-header {
    padding: 5px 25px !important;
    background-color: var(--container-bg-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 0 !important;
}

/* Сетка карточек */
#decksLibraryList {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 25px !important;
    align-content: start !important;
    /* Нативный плавный скролл для iOS */
    -webkit-overflow-scrolling: touch;
}

/* Мобильная адаптация библиотеки */
@media (max-width: 768px) {
    #decksLibraryModal .modal-content {
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
    
}

@media (max-width: 768px) {
    /* 1. Настройка главного списка (убираем Grid, ставим Flex-колонку) */
    #decksLibraryList {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
        padding-bottom: 80px !important;
    }

    /* 2. Карточка: Строго горизонтальная и растягивается по высоте контента */
    .library-deck-card {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important; /* Убиваем старые desktop-лимиты в 280px */
        padding: 12px !important;
        border-radius: 16px !important;
        gap: 15px !important;         /* Отступ между фото и текстом */
        box-sizing: border-box !important;
        /* overflow был visible, чтобы карточка фиксированной высоты не резала
           содержимое. Высоты больше нет — карточка растёт под текст, — а
           видимая обрезка нужна: без неё смещённая миниатюра и блик вылезали
           наружу и наезжали на соседнюю карточку. */
        overflow: hidden !important;
    }

    /* 3. Картинка слева: Жесткий квадрат.
       top: 20% отсюда убран. Элемент позиционирован relative, поэтому смещал
       картинку вниз, НЕ резервируя под неё место: миниатюра вылезала за низ
       карточки и наезжала на следующую. Вертикальное положение задаёт
       align-self, сдвиг тут был лишним. */
    .library-deck-card .deck-card-visual {
        width: 90px !important;
        min-width: 90px !important;
        height: 90px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important; /* Прижимаем к верху, а не растягиваем */
        border: none !important;
        top: auto !important;
        overflow: hidden !important;
    }


    /* 4. Контейнер текста: Занимает всю правую часть */
    .library-deck-card .deck-card-body {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        flex-grow: 1 !important;
        padding: 0 !important;
        min-width: 0 !important;    /* ВАЖНО: Чтобы длинный текст переносился, а не рвал карточку вширь */
    }

    /* 5. Заголовок */
    .library-deck-card .lib-deck-header {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        white-space: normal !important; 
        -webkit-line-clamp: 3 !important; /* Максимум 3 строки названия */
    }

    /* 6. Автор и скачивания */
    .library-deck-card .lib-deck-meta,
    .library-deck-card .lib-deck-stats {
        font-size: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important; /* Прижимаем иконки влево */
    }

    /* 7. Контейнер кнопки "Скачать" */
    .library-deck-card .lib-deck-actions {
        border-top: none !important;
        min-height: auto !important;
        justify-content: flex-start !important; /* Кнопка слева, а не на всю ширину */
    }

    /* 8. Сама кнопка "Скачать" */
    .library-deck-card .btn-import-deck { /* Кнопка облегает текст */
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 16px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
    }

    /* Возвращаем текст кнопке */
    .library-deck-card .btn-import-deck .desktop-text {
        display: inline !important;
    }

    .library-deck-card .btn-import-deck i {
        margin-right: 6px !important;
    }

    /* --- Порядок в карточке -------------------------------------------
       Карточку держали ростом в 200px независимо от содержимого, поэтому
       под кнопкой зияла пустота. Заголовок при этом наследовал
       выравнивание по центру от модального окна и стоял вразнобой с
       остальным текстом, а счётчик скачиваний висел отдельной строкой. */
    .library-deck-card {
        min-height: 0 !important;
        align-items: flex-start !important;
        /* Список — колоночный флекс с заданной высотой, и карточки в нём
           сжимаются, даже когда контейнер прокручивается. Раньше это
           затыкала жёсткая min-height в 200px, из-за которой под кнопкой
           зияла пустота. Правильнее просто запретить сжатие: карточка
           держит высоту своего содержимого, а список скроллится. */
        flex-shrink: 0 !important;
    }

    .library-deck-card .deck-card-body {
        text-align: left !important;
        gap: 5px !important;
    }

    .library-deck-card .lib-deck-header {
        text-align: left !important;
        font-weight: 700 !important;
    }

    .library-deck-card .lib-deck-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px 12px !important;
        color: var(--secondary-text-color) !important;
    }
    .library-deck-card .lib-deck-meta > span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }
    .library-deck-card .lib-deck-meta svg {
        width: 13px !important;
        height: 13px !important;
        opacity: .75;
    }
    /* Счётчик скачиваний — единственная цифра, которая что-то говорит о
       популярности: делаем его читаемым, а не тревожно-красным. */
    .library-deck-card .lib-deck-downloads {
        padding: 1px 8px 1px 6px !important;
        border-radius: 999px !important;
        background: var(--input-bg-color) !important;
        color: var(--text-color) !important;
        font-variant-numeric: tabular-nums;
    }
    .library-deck-card .lib-deck-downloads svg {
        color: var(--secondary-text-color) !important;
        opacity: 1;
    }

    .library-deck-card .lib-deck-actions {
        margin-top: auto !important;
        padding-top: 10px !important;
    }

    /* Скачать — главное действие карточки, а выглядело блёклой плашкой. */
    .library-deck-card .btn-import-deck {
        width: 100% !important;
        background: var(--button-primary-bg) !important;
        border-color: transparent !important;
        color: var(--button-primary-text) !important;
        font-weight: 600 !important;
    }
    .library-deck-card .btn-import-deck:active { transform: scale(.985); }
}


/* --- НАЙТИ --- */
/* (просто вставьте в самый конец style.css) */

/* --- ЗАМЕНИТЬ --- */
/* ======================================================= */
/* === PRODUCTION MICRO-INTERACTIONS & PHYSICS         === */
/* ======================================================= */

/* 1. Голодная папка (Hungry Folder) */
.ai-chat-folder { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s; }
.ai-chat-folder.hungry {
    transform: scale(1.02);
    background-color: var(--input-hover-bg-color);
    border-color: var(--accent);
}
.ai-chat-folder.hungry .folder-toggle-icon {
    transform: rotate(0deg) scale(1.2);
    color: var(--accent);
}

/* 2. Жидкий ползунок (Squishy Slider - Улучшено для Мобильных) */
input[type="range"]::-webkit-slider-thumb {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
}
input[type="range"]:active::-webkit-slider-thumb,
input[type="range"].is-active-slider::-webkit-slider-thumb {
    transform: scaleX(1.3) scaleY(0.7);
    box-shadow: 0 0 15px var(--accent);
}
input[type="range"]::-moz-range-thumb {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
}
input[type="range"]:active::-moz-range-thumb,
input[type="range"].is-active-slider::-moz-range-thumb {
    transform: scaleX(1.3) scaleY(0.7);
    box-shadow: 0 0 15px var(--accent);
}

/* 3. Отрицательное покачивание (Error Shake) */
@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.error-shake {
    border-color: var(--button-danger-bg, #e74c3c) !important;
}

 

/* 5. Реакция микрофона (Звукореактивный ИИ - FIXED HOLLOW MASK) */
.ai-chat-input-container, .input-wrapper {
    position: relative;
    isolation: isolate;
    /* background-color: var(--input-bg-color) !important; */
}

.ai-chat-input-container.is-listening::before,
.input-wrapper.is-listening::before {
    animation: siriGradient 2s linear infinite;
    /* Связываем яркость и свечение со звуком */
    opacity: calc(0.6 + var(--mic-vol, 0) * 0.4);
    filter: blur(calc(3px + var(--mic-vol, 0) * 5px));
    transform: scale(calc(1 + var(--mic-vol, 0) * 0.015)) translateZ(0);
    transition: opacity 0.15s ease-out, filter 0.15s ease-out, transform 0.15s ease-out;
}

/* 6. Динамические тени скролла (Scroll Shadows - Pure CSS) */
.scroll-shadows {
    background: 
        linear-gradient(var(--container-bg-color) 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), var(--container-bg-color) 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.1), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.1), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: var(--container-bg-color);
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}
body.dark-mode .scroll-shadows, body.synthwave-mode .scroll-shadows {
    background-image: 
        linear-gradient(var(--container-bg-color) 30%, rgba(0,0,0,0)),
        linear-gradient(rgba(0,0,0,0), var(--container-bg-color) 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(255,255,255,0.05), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(255,255,255,0.05), rgba(0,0,0,0)) 0 100%;
}

/* 7. Комбо-искры (Combo Sparks) */
.combo-glow {
    animation: comboPulse 1s ease-out;
}
@keyframes comboPulse {
    0% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.8); }
    70% { box-shadow: 0 0 0 20px rgba(241, 196, 15, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); }
}

/* 8. Инерция вкладок (Liquid Tab - Scale effect) */
.tab-item:active, .channel-tab:active, .fit-tab-btn:active {
    transform: scaleX(0.95) scaleY(1.05) !important;
    transition: transform 0.1s !important;
}

/* 9. Резиновый край для iOS/Android (Rubber Band Scroll) */
.ai-chat-messages, .message-area, #recentFilesList, .ai-chat-history-list {
    overscroll-behavior-y: contain; /* Нативная резина на мобилках */
}

/* 10. Swipe-to-Delete (CSS Only Snap trick для мобилок) */
#recentFilesList li {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-right: 0 !important;
}
#recentFilesList li::-webkit-scrollbar { display: none; }
.recent-file-name-span {
    scroll-snap-align: start;
    min-width: 100%;
}
.delete-recent-btn {
    scroll-snap-align: end;
    min-width: 60px;
    background: var(--button-danger-bg);
    color: white;
    border-radius: 0 8px 8px 0;
}

/* ======================================================= */
/* PREMIUM UX: CONFIDENCE HEATMAP SLIDER (FIXED V2)        */
/* ======================================================= */
.dual-slider-container .slider-track {
    background-color: var(--input-bg-color); 
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.15);
    transition: background 0.5s ease;
    border-radius: 6px;
    height: 8px; /* Чуть толще для лучшей видимости карты */
    overflow: hidden; /* Важно, чтобы градиент не вылезал за скругления */
}

.dual-slider-container .slider-progress {
    /* Абсолютно прозрачный фон, эффект рамки */
    background-color: transparent !important;
    /* border-top: 2px solid var(--accent) !important; */
    /* border-bottom: 2px solid var(--accent) !important; */
    box-sizing: border-box !important;
    border-radius: 0 !important;
    z-index: 2 !important;
    pointer-events: none;
    /* Легкое свечение по краям выделенной области */
    box-shadow: inset 0 3px 6px -3px rgba(var(--accent-rgb, 52, 152, 219), 0.3), 
                inset 0 -3px 6px -3px rgba(var(--accent-rgb, 52, 152, 219), 0.3) !important;
}

/* Затемняем НЕвыделенные области трека для контраста */
.dual-slider-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 8px;
    transform: translateY(-50%);
    background: rgba(0,0,0, 0.05); /* Легкая тень поверх всей шкалы */
    border-radius: 6px;
    pointer-events: none;
    z-index: 1; /* Выше трека, но ниже выделения */
}

/* Адаптация затемнения для темных тем */
body.dark-mode .dual-slider-container::before,
body.synthwave-mode .dual-slider-container::before,
body.oled-mode .dual-slider-container::before {
    background: rgba(0,0,0, 0.4); 
}


/* ======================================================= */
/* === TELEGRAM-STYLE CHAT OPTIMIZATION (SCROLL FIX)   === */
/* ======================================================= */

/* 1. Умный якорь скролла: заставляет браузер цепляться за нижние сообщения */
.ai-chat-messages, .message-area {
    overflow-anchor: auto !important;
    /* ПРОДАКШЕН ФИКС: scroll-behavior: smooth удален из CSS, так как он ломает
       мгновенную корректировку scrollTop в JS при загрузке старой истории. */
}

/* Когда пользователь выделяет текст внутри чата — глушим якорь.
   При автоскролле браузера вниз (расширение выделения маркером) якорь
   корректирует scrollTop → символ под маркером съезжает → выделение прыгает.
   Класс ставится/снимается из JS по событию selectionchange. */
.message-area.selecting-text {
    overflow-anchor: none !important;
}


/* Резервируем место под картинки, чтобы они не толкали текст при загрузке */
.chat-content-image.lozad:not(.loaded),
.ai-generated-image.lozad:not(.loaded) {
    min-height: 150px;
    min-width: 150px;
    background: var(--input-hover-bg-color);
    border-radius: 12px;
}

/* Фиксация кнопки истории строго наверху */


/* ======================================================= */
/* === PRO UI: WIKI ИЗОБРАЖЕНИЯ (БРОНЕБОЙНАЯ КАРТОЧКА) === */
/* ======================================================= */

.wiki-image-wrapper {
    background: var(--container-bg-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    overflow-anchor: none !important;
    transform: translateZ(0); 
    transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wiki-image-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}

/* Скелетон до загрузки картинки */
.wiki-image-wrapper.is-skeleton .wiki-main-image-box {
    min-height: 250px !important;
    max-height: 250px !important;
    background: var(--input-bg-color) !important;
}


.wiki-main-img:hover {
    transform: scale(1.05) !important;
}

/* Эффект свечения позади картинки (Ambilight) */
.wiki-ambilight {
    position: absolute !important;
    top: -10% !important;
    left: -10% !important;
    width: 120% !important;
    height: 120% !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(30px) brightness(0.35) !important; 
    opacity: 0.1 !important;
    z-index: 1 !important; 
    pointer-events: none !important; 
}

/* Лента миниатюр */
.wiki-thumbs-box {
    -webkit-overflow-scrolling: touch;
    background: var(--input-bg-color);
    border-bottom: 1px solid var(--border-color);
}
.wiki-thumbs-box::-webkit-scrollbar { display: none; }

/* Миниатюры (Идеальные квадраты) */
.wiki-thumbs-box .version-thumbnail {
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: var(--border-color) !important;
}

.wiki-thumbs-box .version-thumbnail:hover {
    transform: scale(1.08) !important;
}

.wiki-thumbs-box .version-thumbnail.active {
    border-color: var(--accent) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

/* Текст описания */
.wiki-caption-display {
    color: var(--text-color);
}

/* Ссылки на источник */
.wiki-sources-link {
    color: var(--secondary-text-color);
}
.wiki-sources-link a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.wiki-sources-link a:hover {
    text-decoration: underline;
}

 


/* === ОПТИМИЗАЦИЯ ПОИСКА (Аппаратное скрытие) === */
.is-filtering .search-hidden {
    display: none !important;
    /* content-visibility: hidden; Позволяет браузеру вообще не считать этот блок (работает в Chrome) */
}

/* Панель управления GRADUS */
.gradus-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}
.gradus-sort {
    width: auto !important;
    padding: 8px 12px !important;
    font-size: 0.9em;
    margin: 0 !important;
    border-radius: 10px !important;
    box-shadow: var(--neumorph-shadow-inset) !important;
    border: none !important;
}

/* PREMIUM UX: iOS Style Segmented Control для переключателя вида */
.gradus-view-toggles {
    display: flex;
    gap: 0;
    background: var(--input-bg-color);
    padding: 4px;
    border-radius: 12px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
}
.gradus-view-toggles button {
    position: relative;
    width: 38px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    transition: color 0.3s ease;
    z-index: 2;
}
.gradus-view-toggles button:hover {
    color: var(--text-color);
}
.gradus-view-toggles button.active {
    color: var(--button-primary-text);
    background: var(--button-primary-bg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    animation: popInBtn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* === РЕЖИМ СЕТКИ (GRID) === */
#gradusFolderList {
    transition: opacity 0.3s ease;
}
#gradusFolderList.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    padding: 15px 15px 20px 15px; /* Отступы для теней */
}
/* На широком экране плитки в 120 px выглядели полосками в половину экрана
   ростом: колонка уже, чем высота превью, и карточка вытягивалась. */
@media (min-width: 700px) {
    #gradusFolderList.grid-view {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 18px;
    }
}

/* PREMIUM UX: Каскадное появление карточек (Staggered 3D Reveal) */
#gradusFolderList.grid-view li {
    animation: cardPopUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
    will-change: transform, opacity;
}
/* Создаем задержки для первых 10 элементов */
#gradusFolderList.grid-view li:nth-child(1) { animation-delay: 0.05s; }
#gradusFolderList.grid-view li:nth-child(2) { animation-delay: 0.10s; }
#gradusFolderList.grid-view li:nth-child(3) { animation-delay: 0.15s; }
#gradusFolderList.grid-view li:nth-child(4) { animation-delay: 0.20s; }
#gradusFolderList.grid-view li:nth-child(5) { animation-delay: 0.25s; }
#gradusFolderList.grid-view li:nth-child(n+6) { animation-delay: 0.30s; }

@keyframes cardPopUp {
    0% { opacity: 0; transform: translateY(30px) scale(0.9) rotateX(10deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}
.grid-view li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0px 0px !important;
    border-radius: 12px;
    background: var(--input-bg-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
    height: 100%;
}
.grid-view li::before { display: none !important; } /* Убираем дефолтные иконки списка */

.grid-thumbnail {
    position: relative;
    width: 100%;
    /* Квадрат вместо жёстких 180 px: в узкой колонке та высота давала
       вытянутую полоску, а в широкой — обрезанное превью */
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 12px 12px 0 0;
    margin-bottom: 8px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}
.grid-thumbnail i, .grid-thumbnail svg { 
    width: 40px; 
    height: 40px; 
    opacity: 0.3; 
    position: absolute; 
    z-index: 1;
}
.grid-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    transition: opacity 0.3s ease;
}
.grid-filename {
    font-size: 0.85em;
    padding: 0 10px;
    font-weight: 600;
    line-height: 1.25;
    /* Обрезка по двум строкам не работала: display у -webkit-box был закрыт
       комментарием, и длинное название вылезало за плитку поверх соседней */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    /* Две строки всегда: иначе плитки в ряду разной высоты */
    min-height: 2.5em;
}
.grid-meta {
    font-size: 0.7em;
    color: var(--secondary-text-color);
    margin: 2px 0 10px;
    opacity: 0.8;
}
/* Папка — не документ: вместо пустого превью тонированный квадрат со значком */
.grid-view li.folder-item .grid-thumbnail i,
#gradusFolderList.grid-view li .grid-thumbnail i[data-lucide="folder"] {
    width: 34px;
    height: 34px;
    opacity: 1;
}


/* Блокируем анимации для массового рендера, предотвращая скачки высоты */
.disable-message-animations .message,
.disable-message-animations .question-bubble,
.disable-message-animations .favorite-item {
    animation: none !important;
    transition: none !important;
}


/* ======================================================= */
/* === HOTFIX: ИКОНКИ, КНОПКИ И МОДАЛКИ (PRODUCTION)   === */
/* ======================================================= */

/* 1. ЖЕЛЕЗОБЕТОННОЕ ВОССТАНОВЛЕНИЕ ВСЕХ ИКОНОК LUCIDE */
i[data-lucide], svg.lucide {
    display: inline-block !important; /* Убиваем баг невидимых SVG во Flexbox */
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    /* ✅ ИСПРАВЛЕНИЕ: currentColor позволяет иконкам наследовать цвет родителя (например, белый текст на активной кнопке) */
    stroke: currentColor !important; 
}

/* ✅ ИСПРАВЛЕНИЕ: Кнопки поверх картинок (Курсы, QR, Редактировать) - Apple Glassmorphism */
.item-actions button,
.card-action-btn {
    background-color: rgba(255, 255, 255, 0.85) !important;
    color: #1a1a1a !important; /* Темная иконка для высокой контрастности */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

/* Адаптация подложки для темных тем */
body.dark-mode .item-actions button,
body.synthwave-mode .item-actions button,
body.oled-mode .item-actions button,
body.dark-mode .card-action-btn {
    background-color: rgba(0, 0, 0, 0.65) !important;
    color: #f0f0f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.item-actions button:hover,
.card-action-btn:hover {
    background: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
    transform: scale(1.1);
}

/* ✅ Убираем принудительный серый цвет, позволяем работать currentColor */
.item-actions button i, 
.item-actions button svg,
.card-action-btn i, 
.card-action-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important; 
    opacity: 1 !important;
}

/* Возвращаем иконки в Мед. Калькулятор (Квадраты меню и кнопка Назад) */
.med-icon i, .med-icon svg {
    width: 28px !important;
    height: 28px !important;
    stroke: #ffffff !important; /* Принудительно белые на цветном фоне */
}

.med-calc-header-left button i, 
.med-calc-header-left button svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
}


/* 2. ФИКС МОДАЛЬНЫХ ОКОН (КНОПКИ ВНИЗУ И В РЯД КАК В iOS) */
.modal-content, 
.auth-modal {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.modal-buttons {
    display: flex !important;
    flex-direction: row !important; /* Кнопки ставим в ряд! */
    justify-content: space-between !important;
    align-items: center !important;
    gap: 5px !important; /* ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОГО СКРОЛЛА */
    margin-top: auto !important; /* МАГИЯ: Прижимает блок кнопок к самому низу окна */
    padding-top: 20px !important;
}

/* Если у блока кнопок специально задан класс vertical, оставляем их в колонку, но все равно внизу */
.modal-buttons.vertical {
    flex-direction: column !important;
}

.modal-buttons button, 
#authCloseButton, 
.modal-buttons button[data-lang-key="auth_close_button"] {
    flex: 1 !important; /* Кнопки делят ширину 50/50 */
    width: 100% !important;
    margin: 20px 0px 0px 0px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Если кнопка всего одна (например, просто "ОК" или "Закрыть"), она займет всю ширину */
.modal-buttons button:only-child {
    flex: none !important;
    width: 100% !important;
}


/* ================================================================== */
/* === ULTIMATE MODAL ANTI-SCROLL FIX (ENTERPRISE UX)             === */
/* ================================================================== */

/* 1. Безопасные поля ввода */
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="password"],
.modal-content textarea,
.auth-input {
    margin-bottom: 5px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 98% !important;
    max-width: 98% !important;
    box-sizing: border-box !important;
}

/* 2. Защита флекс-групп от распирания экрана */
.modal-content form,
.modal-content .settings-group,
.auth-form {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0px !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    /* Разрешаем перенос длинных тумблеров и чекбоксов на новую строку */
    flex-wrap: wrap !important;
}


/* 3. Фикс графика Chart.js (Forecast Modal) */
.modal-content .chart-container,
.modal-content canvas {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. Фикс Конструктора вопросов */
.answer-option-editor {
    max-width: 100% !important; /* Держим иконку, инпут и крестик в 1 линии */
}

.answer-option-editor .input-wrapper,
.answer-option-editor input[type="text"] {
    flex: 1 1 auto !important;
    /* Магическое свойство: позволяет флекс-ребенку сжиматься, не ломая родителя */
    min-width: 0 !important; 
    width: 100% !important;
}

/* 5. Безопасный блок кнопок */
.modal-buttons {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-wrap: wrap !important;
}


/* 4. ФИКС МЕДКАЛЬКУЛЯТОРА НА МОБИЛЬНЫХ (Чтобы блоки не слипались) */
@media (max-width: 600px) {
    .med-calc-grid {
        padding: 20px 10px !important;
    }
    .med-card {
        min-height: 90px;
    }
}

/* ======================================================= */
/* === ULTIMATE FIX: ИНФОПАНЕЛЬ ПОЛЬЗОВАТЕЛЯ (SCROLL)  === */
/* ======================================================= */

/* 1. Глобальный предохранитель для самого меню (защита от вылета за экран) */
.user-dropdown, 
#aiChatUserDropdown {
    max-height: calc(100dvh - 80px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    flex-direction: column !important;
}

/* ФИКС: Показываем flex только если нет класса hidden */
.user-dropdown:not(.hidden), 
#aiChatUserDropdown:not(.hidden) {
    display: flex !important;
}

.user-dropdown.hidden, 
#aiChatUserDropdown.hidden {
    display: none !important;
}

/* 2. УМНЫЙ СКРОЛЛ: Скроллим ТОЛЬКО список лимитов! */
.user-status-limits {
    max-height: 28vh !important; /* Занимает максимум 28% высоты экрана */
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 8px !important;
    margin-right: -4px !important; /* Компенсация паддинга для скроллбара */
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

/* 3. Красивый тонкий скроллбар (Mac OS style) */
.user-status-limits::-webkit-scrollbar,
.user-dropdown::-webkit-scrollbar,
#aiChatUserDropdown::-webkit-scrollbar {
    width: 4px !important;
}
.user-status-limits::-webkit-scrollbar-track,
.user-dropdown::-webkit-scrollbar-track,
#aiChatUserDropdown::-webkit-scrollbar-track {
    background: transparent !important;
}
.user-status-limits::-webkit-scrollbar-thumb,
.user-dropdown::-webkit-scrollbar-thumb,
#aiChatUserDropdown::-webkit-scrollbar-thumb {
    background-color: var(--border-color) !important;
    border-radius: 4px !important;
}
.user-status-limits::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-text-color) !important;
}

/* 4. ЖЕЛЕЗОБЕТОННАЯ ФИКСАЦИЯ КНОПОК: Запрещаем Flexbox'у их сплющивать */
.user-dropdown > a,
#aiChatUserDropdown > a {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important; /* Горизонтально для ссылок */
    align-items: center !important;
    justify-content: flex-start !important;
}

.user-dropdown-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important; /* ВАЖНО: Колонка для PRO кнопок, чтобы они не ломались */
}

.sync-toggle-wrapper,
.user-status-header {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important; 
}

/* 5. Отступ для самой нижней кнопки ("Выйти"), чтобы не липла к краю */
.user-dropdown > a:last-child,
#aiChatUserDropdown > a:last-child {
    margin-bottom: 10px !important;
}


.ai-chat-messages {
    flex-grow: 1;
    overflow-anchor: auto !important; /* Нативный якорь браузера */
}
 
/* Плавное растворение краев для всех списков (Apple UI) */
#folderContentsList, 
#gradusFolderList, 
#recentFilesList, 
.ai-select-dropdown, 
.ai-chat-history-list, 
.modal-body, 
#quickNavPanel {
}
/* ======================================================= */
/* === PREMIUM UX: INSET GROUPED ACTION SHEET (iOS)      === */
/* ======================================================= */

/* 1. Ограничиваем модалку по высоте контента и прижимаем к низу */
#fitnessSettingsModal .modal-content {
    display: flex;
    flex-direction: column;
    width: 95vw;
    max-width: 500px;
    height: auto !important; /* ВАЖНО: Обтягивает контент, а не экран */
    max-height: 85vh !important; /* Не выше 85% экрана */
    margin-top: auto; /* Прижимает к низу */
    margin-bottom: 20px;
    padding: 25px 20px 20px 20px !important;
    border-radius: 28px !important;
    background-color: var(--bg-color); /* Чуть более серый фон подложки */
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    #fitnessSettingsModal .modal-content {
        width: 100vw;
        max-width: 100%;
        margin-bottom: 0;
        /* padding-bottom: env(safe-area-inset-bottom, 20px) !important; */
        border-radius: 32px 32px 0 0 !important;
        animation: iOSBottomSheet 0.4s cubic-bezier(0.32, 1.15, 0.25, 1) forwards !important;
    }
}

/* Декоративный "язычок" (Handle) сверху */
#fitnessSettingsModal .modal-content::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background-color: var(--secondary-text-color);
    opacity: 0.3;
}

/* Заголовок окна */
#fitSettingsTitle {
    margin: 10px 0 20px 0;
    color: var(--heading-color);
    font-size: 0.9em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2. Контейнер сгруппированного списка */
.fit-options-grouped-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--container-bg-color); /* Белый фон блока */
    border-radius: 16px;
    overflow-y: auto;
    /* Убираем скроллбар, оставляя функцию */
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch;
    /* Мягкая тень и бордер */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
    margin-bottom: 20px; /* Отступ до кнопки "Закрыть" */
}
.fit-options-grouped-list::-webkit-scrollbar { display: none; }

/* 3. Отдельная строка опции */
.fit-option-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background-color: transparent;
    text-align: left;
    transition: background-color 0.2s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Убираем линию у последнего элемента */
.fit-option-row:last-child {
    border-bottom: none;
}

/* Эффект нажатия (iOS style) */
.fit-option-row:active {
    background-color: var(--input-hover-bg-color);
}

/* Текстовая часть */
.fit-option-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fit-option-title {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-color);
    transition: color 0.2s;
}

.fit-option-desc {
    font-size: 0.85em;
    color: var(--secondary-text-color);
}

/* Активное состояние текста */
.fit-option-row.active .fit-option-title {
    color: var(--accent);
    font-weight: 600;
}

/* 4. Галочка выбора */
.fit-option-check {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent);
    /* Прячем до активации */
    opacity: 0;
    transform: scale(0.5) translateX(-10px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fit-option-check i,
.fit-option-check svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 3px; /* Жирная галочка */
}

/* Пружинное появление галочки */
.fit-option-row.active .fit-option-check {
    opacity: 1;
    transform: scale(1) translateX(0);
}

/* 5. Кнопка "Закрыть" (Уже есть в твоем HTML, стилизуем её) */
#fitnessSettingsModal .modal-buttons {
    margin-top: 0 !important; /* Убираем лишний отступ */
    padding-top: 0 !important;
}

#fitnessSettingsModal .modal-buttons button {
    margin: 0 !important;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}


/* ======================================================= */
/* === PREMIUM UX: FITNESS PLAYER UPGRADES             === */
/* ======================================================= */

/* 1. КИНЕМАТОГРАФИЧНОЕ ПРЕВЬЮ (Без блюра, с градиентом) */
#wpRestScreen.preview-mode {
    /* Градиент: черный снизу (для текста), абсолютно прозрачный сверху (для видео) */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 30%, transparent 60%, transparent 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    justify-content: flex-end !important; /* Опускаем текст вниз */
    padding-bottom: 15vh !important; /* Отступ от таймера */
}

/* Прячем чашку кофе на превью (она нужна только для отдыха) */
#wpRestScreen.preview-mode .wp-rest-icon {
    display: none !important;
}

#wpRestScreen.preview-mode .wp-rest-text {
    font-size: 2.5em; /* Делаем текст крупнее */
    text-shadow: 0 4px 15px rgba(0,0,0,0.8);
    letter-spacing: 4px;
}


/* 2. APPLE WATCH HEARTBEAT (Пульсация таймера на последних 3 секундах) */
#wpTimer {
    transition: color 0.3s ease, text-shadow 0.3s ease;
    font-variant-numeric: tabular-nums; /* Чтобы цифры не дергались по ширине */
}

.timer-adrenaline {
    color: #ff4757 !important;
    /* Настоящее физическое биение сердца (два удара - пауза) */
    animation: appleWatchHeartbeat 1s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
    text-shadow: 0 0 20px rgba(255, 71, 87, 0.8), 0 0 40px rgba(255, 71, 87, 0.4) !important;
}

@keyframes appleWatchHeartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    100% { transform: scale(1); }
}


/* 3. НЕОНОВЫЙ ХВОСТ ПРОГРЕСС-БАРА (Glowing leading edge) */
.wp-progress-bar {
    position: relative;
    border-radius: 0 4px 4px 0;
}

/* Яркая светящаяся точка на конце прогресс-бара */
.wp-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translateX(50%);
}


/* 4. ПЛАВНЫЙ КРОССФЕЙД МЕДИА (Мягкое переключение видео/картинок) */
#wpMainVideo, #wpMainImage {
    transition: opacity 0.4s ease-in-out, filter 0.4s ease-in-out;
    will-change: opacity, filter;
}

/* Когда видео меняется, оно плавно проявляется из темноты */
.cinematic-fade-in {
    animation: mediaFadeIn 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

@keyframes mediaFadeIn {
    from { opacity: 0; filter: brightness(0.5) blur(5px); transform: scale(1.02); }
    to { opacity: 1; filter: brightness(1) blur(0px); transform: scale(1); }
}


/* ================================================================== */
/* === ИДЕАЛЬНОЕ ОКНО КОНСТРУКТОРА ВОПРОСОВ (MOBILE & PC FIX)     === */
/* ================================================================== */

/* 1. Жесткий каркас модального окна (Запрещаем ему скроллиться) */
#questionCreateModal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 700px !important;
    height: 95vh !important; /* Фиксированная высота для ПК */
    max-height: 95vh !important;
    padding: 20px 15px 15px 15px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* ГАРАНТИЯ ОТСУТСТВИЯ ЛИШНИХ СКРОЛЛОВ */
}

/* Мобильный экран: занимаем 100% с учетом челки снизу */
@media (max-width: 768px) {
    #questionCreateModal .modal-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 28px 28px 0 0 !important;
        padding: 20px 15px calc(15px + env(safe-area-inset-bottom)) !important;
    }
}

/* 2. Шапка и тумблеры (Верхний этаж, не сжимается) */
#questionCreateModal .parser-tabs,
#questionCreateModal .collection-toggle-container {
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


.parser-tab {
    flex: 1;
    padding: 5px 5px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.95em;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Поддержка структуры <i data-lucide><span>Текст</span> внутри parser-tab */
.parser-tab:has(> i[data-lucide]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.parser-tab > i[data-lucide] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.parser-tab.active {
    background: var(--container-bg-color);
    color: var(--text-color);
}

/* 3. РАБОЧАЯ ЗОНА (Средний этаж, ТОЛЬКО ОНА ИМЕЕТ СКРОЛЛ) */
#questionCreateModal .parser-tab-content-wrapper {
    flex: 1 1 auto !important; /* Растягивается на всё доступное место */
    min-height: 0 !important;  /* МАГИЯ FLEXBOX: разрешает скролл внутренностям */
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important; /* Включаем вертикальный скролл */
    overflow-x: hidden !important; /* Режем всё, что выпирает вбок */
    padding: 0 !important; /* Убиваем паддинги, рвущие ширину 100% */
    margin: 0 !important;
}

#questionCreateModal .parser-tab-content.active {
    display: flex !important;
    flex-direction: column !important;
    min-height: min-content !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. Конструктор (Левая и правая панели) */
.question-constructor-layout {
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px;
}


/* Навигация по карточкам */
.question-card-list-container {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    width: 180px;
}

.question-card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    cursor: pointer;
}

.question-card-item.active {
    font-weight: 600;
    background-color: var(--container-bg-color);
    border: 1px solid var(--accent);
}

.add-question-card-btn {
    background: transparent !important;
    border: 2px dashed var(--border-color) !important;
    color: var(--text-color) !important;
}

/* 5. Элементы ввода (Защита от распирания) */
.constructor-search-container,
.question-editor-container {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important; /* Защита от багов Flexbox */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.constructor-search-container {
    margin: 0 0 12px 0 !important;
}

#constructorSearchInput,
.question-editor-container textarea,
.answer-option-editor input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--input-bg-color);
}

.question-editor-container textarea {
    min-height: 100px;
    resize: vertical;
}

/* 6. Строка варианта ответа (Защита крестика и инпута) */
.answer-option-editor {
    display: flex !important;
    flex-wrap: nowrap !important; /* Запрещаем перенос элементов */
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
}

.answer-option-editor .input-wrapper {
    flex: 1 1 auto !important; /* Тянется на всю ширину */
    min-width: 0 !important;   /* Позволяет инпуту сжиматься, а не выталкивать соседей */
}

/* Жесткие размеры, чтобы Flexbox не сплющил иконки */
.answer-option-editor input[type="checkbox"] {
    -webkit-appearance: none;
    flex: 0 0 30px !important;
    border: 2px solid var(--border-color);
    background-color: var(--container-bg-color);
}

.answer-option-editor input[type="checkbox"]:checked {
    background-color: var(--button-success-bg);
    border-color: var(--button-success-bg);
}

@keyframes drawCheck {
    0% { width: 0; height: 0; opacity: 0; }
    30% { width: 0; height: 10px; opacity: 1; }
    100% { width: 5px; height: 10px; opacity: 1; }
}


.answer-option-editor .delete-answer-btn {
    flex: 0 0 32px !important; /* Запрет на сжатие крестика */
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--border-color);
    cursor: pointer;
}

.answer-option-editor .delete-answer-btn:hover {
    background-color: rgba(231, 76, 60, 0.1);
    color: var(--feedback-incorrect-text);
}

#addAnswerOptionBtn {
    border: 2px dashed var(--border-color) !important;
    color: var(--secondary-text-color) !important;
}

/* 7. Кнопки внизу (Нижний этаж, жестко зафиксирован) */
#questionCreateModal .modal-buttons {
    flex: 0 0 auto !important; /* Не сжимать, не растягивать */
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 5px 0px 20px 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--border-color) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    /* background: var(--bg-color); */ /* Скрываем прокручивающийся текст под кнопками */
}


#questionCreateModal .modal-buttons button {
    flex: 1 !important; /* Кнопки делят ширину 50/50 */
    margin: 0 !important;
}

/* 8. Идеальная мобильная адаптация конструктора */
@media (max-width: 768px) {
    .question-constructor-layout {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .question-card-list-container {
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* Красивая горизонтальная карусель карточек вместо вертикального списка */
    #questionCardList {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        padding-bottom: 5px !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #questionCardList::-webkit-scrollbar { display: none; }

    .question-card-item {
        flex: 0 0 auto !important; /* Карточки не плющатся */
        white-space: nowrap !important;
        margin-bottom: 0 !important;
        padding: 8px 14px !important;
        border-radius: 20px !important;
    }
    
    .add-question-card-btn {
        margin-top: 5px !important;
        padding: 5px !important;
    }
}


/* ================================================================== */
/* === ENTERPRISE UX: ИСПРАВЛЕНИЕ СКРОЛЛОВ И ПЛАШКА ИСТОРИИ       === */
/* ================================================================== */

/* 1. Элегантная плашка "Начало истории" */
.history-end-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 20px auto;
    padding: 6px 16px;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--secondary-text-color);
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: fadeIn 0.4s ease-out;
    user-select: none;
    width: max-content;
}
.history-end-badge i { width: 14px; height: 14px; }

/* 2. ЖЕСТКИЙ ФИКС ГОРИЗОНТАЛЬНОГО СКРОЛЛА В МОДАЛКАХ */
#questionCreateModal .modal-content,
.advanced-chat-modal {
    overflow-x: hidden !important;
}

/* 3. iOS Segmented Control для вкладок (Конструктор / Быстрый ввод) */
#questionCreateModal .parser-tabs {
    display: flex;
    /* background: var(--input-bg-color); */
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    border: none;
}

#questionCreateModal .parser-tab {
    flex: 1;
    margin: 0;
    padding: 8px 15px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.95em;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

#questionCreateModal .parser-tab {
    /* Подготовка к плавному переходу текста и фона */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center bottom;
}

.parser-tab:active {
    /* Эффект проминания при нажатии */
    transform: scale(0.95);
    background: rgba(0,0,0,0.05);
}

.parser-tab.active {
    background: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 600;
    /* PREMIUM UX: Мягкая "левитирующая" тень для активной вкладки */
    box-shadow: 0 3px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.8);
    transform: scale(1);
    z-index: 2; /* Чтобы тень падала на соседние вкладки */
}

body.dark-mode .parser-tab.active,
body.synthwave-mode .parser-tab.active {
    box-shadow: 0 3px 8px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.1);
}

/* === Вкладки парсера (#parserArea): равные колонки, иконки, адаптивность === */
#parserArea .parser-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    margin-bottom: 15px;
    position: relative;
}

#parserArea .parser-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.88em;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

#parserArea .parser-tab i[data-lucide],
#parserArea .parser-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-width: 2;
    opacity: 0.65;
    transition: color 0.25s ease, opacity 0.25s ease;
}

#parserArea .parser-tab:hover:not(.active) {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
}

#parserArea .parser-tab:hover:not(.active) svg {
    opacity: 0.9;
}

#parserArea .parser-tab.active {
    background: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

#parserArea .parser-tab.active svg {
    color: var(--accent-color);
    opacity: 1;
}

body.dark-mode #parserArea .parser-tab.active,
body.synthwave-mode #parserArea .parser-tab.active {
    box-shadow: 0 3px 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2);
}

/* Узкие экраны: иконка над подписью, чтобы 3 равные колонки не ломались */
@media (max-width: 520px) {
    #parserArea .parser-tab {
        flex-direction: column;
        gap: 4px;
        padding: 2px 5px;
        font-size: 0.72em;
        letter-spacing: -0.01em;
    }
    #parserArea .parser-tab i[data-lucide],
    #parserArea .parser-tab svg {
        width: 20px;
        height: 20px;
    }
}

/* === Подвкладки конвертера: Ввод / Вывод === */
.converter-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    background: var(--input-bg-color, rgba(0,0,0,0.03));
    border-radius: 10px;
}
.converter-subtab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.95em;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.converter-subtab i[data-lucide],
.converter-subtab svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    opacity: 0.7;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.converter-subtab:hover:not(.active) {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
}
.converter-subtab.active {
    background: var(--container-bg-color);
    color: var(--text-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
.converter-subtab.active svg {
    color: var(--accent-color);
    opacity: 1;
}
body.dark-mode .converter-subtab.active,
body.synthwave-mode .converter-subtab.active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2);
}

.converter-subtab-content {
    display: none;
}
.converter-subtab-content.active {
    display: block;
}

.converter-output-placeholder {
    text-align: center;
    color: var(--secondary-text-color);
    padding: 40px 16px;
    margin: 0;
    font-size: 0.95em;
}

/* === Поле ввода парсера + миникарта строк === */
.parser-input-wrap {
    display: flex;
    gap: 6px;
    width: 100%;
    align-items: stretch;
}
.parser-input-textarea-col {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.parser-input-textarea-col > textarea {
    width: 100%;
    box-sizing: border-box;
    padding-right: 70px;
    display: block;
}
.parser-fs-toggle {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text-color);
    transition: color 0.15s ease, transform 0.15s ease;
}
.parser-fs-toggle:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}
.parser-fs-toggle svg, .parser-fs-toggle i[data-lucide] {
    width: 20px;
    height: 20px;
}
.parser-input-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.parser-input-line-highlight {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(220, 38, 38, 0.22);
    border-left: 3px solid #dc2626;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.parser-input-line-highlight.ok {
    background: rgba(22, 163, 74, 0.22);
    border-left-color: #16a34a;
}
.parser-input-minimap {
    position: relative;
    width: 14px;
    flex: 0 0 14px;
    background: var(--input-bg-color, rgba(0,0,0,0.04));
    border-radius: 4px;
    overflow: hidden;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.parser-input-minimap[hidden] { display: none; }
body.dark-mode .parser-input-minimap,
body.synthwave-mode .parser-input-minimap {
    background: rgba(255,255,255,0.06);
}
.parser-input-minimap-btn {
    flex: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: rgba(0,0,0,0.06);
    color: var(--secondary-text-color);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.parser-input-minimap-btn:hover {
    background: rgba(220,38,38,0.18);
    color: #dc2626;
}
.parser-input-minimap-btn:active {
    background: rgba(220,38,38,0.3);
}
body.dark-mode .parser-input-minimap-btn,
body.synthwave-mode .parser-input-minimap-btn {
    background: rgba(255,255,255,0.08);
}
body.dark-mode .parser-input-minimap-btn:hover,
body.synthwave-mode .parser-input-minimap-btn:hover {
    background: rgba(220,38,38,0.25);
}
.parser-input-minimap-track {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}
.parser-input-minimap-segment {
    position: absolute;
    left: 0;
    right: 0;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.parser-input-minimap-segment:hover {
    filter: brightness(1.15);
    transform: scaleX(1.4);
}
.parser-input-minimap-segment.ok   { background: #16a34a; }
.parser-input-minimap-segment.fail { background: #dc2626; }
.parser-input-minimap-segment.current {
    filter: brightness(1.3);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.85), 0 0 3px rgba(220,38,38,0.6);
    z-index: 2;
}

/* === Полноэкранный редактор парсера === */
.parser-fs-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.parser-fs-modal.hidden { display: none; }
.parser-fs-inner {
    background: var(--container-bg-color);
    color: var(--text-color);
    border-radius: 14px;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.parser-fs-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
body.dark-mode .parser-fs-header,
body.synthwave-mode .parser-fs-header {
    border-bottom-color: rgba(255,255,255,0.1);
}
.parser-fs-title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 600;
}
.parser-fs-toolbar {
    display: flex;
    gap: 8px;
}
.parser-fs-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.parser-fs-tool-btn:hover {
    background: var(--input-hover-bg-color, rgba(0,0,0,0.05));
}
.parser-fs-tool-btn.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}
.parser-fs-tool-btn.parser-fs-tool-primary {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}
.parser-fs-tool-btn.parser-fs-tool-primary:hover {
    filter: brightness(1.07);
    background: var(--accent-color);
}
.parser-fs-tool-btn svg, .parser-fs-tool-btn i[data-lucide] {
    width: 16px;
    height: 16px;
}
.parser-fs-close {
    padding: 7px 9px;
}
body.dark-mode .parser-fs-tool-btn,
body.synthwave-mode .parser-fs-tool-btn {
    border-color: rgba(255,255,255,0.15);
}

.parser-fs-filter-panel {
    flex: 0 0 auto;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.025);
}
.parser-fs-filter-panel.hidden { display: none; }
body.dark-mode .parser-fs-filter-panel,
body.synthwave-mode .parser-fs-filter-panel {
    background: rgba(255,255,255,0.04);
    border-bottom-color: rgba(255,255,255,0.1);
}
.parser-fs-filter-label {
    font-size: 0.9em;
    color: var(--secondary-text-color);
    margin-bottom: 8px;
}
.parser-fs-filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 10px;
}
.parser-fs-filter-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    font-size: 0.95em;
}
.parser-fs-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.parser-fs-filter-status {
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--secondary-text-color);
    min-height: 1em;
}

.parser-fs-body {
    flex: 1 1 auto;
    display: flex;
    gap: 12px;
    padding: 12px 18px 18px;
    min-height: 0;
}
.parser-fs-editor-slot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
}
/* Когда .parser-input-wrap живёт в фуллскрине — растягиваем */
.parser-fs-editor-slot > .parser-input-wrap {
    flex: 1 1 auto;
    height: 100%;
}
.parser-fs-editor-slot .parser-input-textarea-col {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.parser-fs-editor-slot textarea#parserInput {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0;
    resize: none;
}

.parser-fs-errors-panel {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,0.02);
}
.parser-fs-errors-panel.hidden { display: none; }
body.dark-mode .parser-fs-errors-panel,
body.synthwave-mode .parser-fs-errors-panel {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
}
.parser-fs-errors-header {
    flex: 0 0 auto;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.95em;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
body.dark-mode .parser-fs-errors-header,
body.synthwave-mode .parser-fs-errors-header {
    border-bottom-color: rgba(255,255,255,0.1);
}
.parser-fs-errors-list {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
}
.parser-fs-errors-list li {
    padding: 8px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
    font-size: 0.9em;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.parser-fs-errors-list li:hover {
    background: var(--input-hover-bg-color, rgba(0,0,0,0.05));
    border-left-color: #dc2626;
}
.parser-fs-errors-list li.reviewed {
    opacity: 0.55;
    text-decoration: line-through;
}

/* Мобильные: вертикаль, errors-panel снизу, компактный header */
@media (max-width: 768px) {
    .parser-fs-modal { padding: 0; }
    .parser-fs-inner {
        max-height: 100vh;
        max-width: 100%;
        border-radius: 0;
    }
    .parser-fs-header { padding: 10px 12px; }
    .parser-fs-tool-btn { padding: 7px 10px; font-size: 0.85em; }
    .parser-fs-tool-btn span { display: none; }
    .parser-fs-filter-panel { padding: 10px 12px; }
    .parser-fs-body {
        flex-direction: column;
        padding: 10px 12px 12px;
        gap: 10px;
    }
    .parser-fs-errors-panel {
        flex: 0 0 35vh;
        max-height: 35vh;
    }
}
.parser-input-minimap-viewport {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.15);
    pointer-events: none;
    border-radius: 2px;
}
body.dark-mode .parser-input-minimap-viewport,
body.synthwave-mode .parser-input-minimap-viewport {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.20);
}

@media (max-width: 520px) {
    .converter-subtab {
        padding: 9px 6px;
        font-size: 0.88em;
    }
    .converter-subtab i[data-lucide],
    .converter-subtab svg {
        width: 16px;
        height: 16px;
    }
}

/* 4. Безопасные контейнеры редактора (Без выталкивания за края) */
.question-editor-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0; /* Фикс Flexbox overflow */
    box-sizing: border-box !important;
}

.answer-option-editor {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box !important;
}

.answer-option-editor .input-wrapper {
    flex-grow: 1;
    min-width: 0; /* Разрешаем инпуту сжиматься */
}

/* Гладкие современные инпуты */
.question-editor-container textarea,
.answer-option-editor input[type="text"] {
    width: 100%;
    box-sizing: border-box !important;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--input-bg-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.01) !important; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.question-editor-container textarea:focus,
.answer-option-editor input[type="text"]:focus {
    background-color: var(--container-bg-color);
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus-ring) 15%, transparent) !important;
    transform: translateY(-1px);
}

/* 5. Круглые радио-кнопки для правильного ответа (Вместо квадратных) */
.answer-option-editor input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid var(--border-color);
    background-color: var(--container-bg-color);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: none !important;
}

.answer-option-editor input[type="checkbox"]:checked {
    background-color: var(--button-success-bg) !important;
    border-color: var(--button-success-bg) !important;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3) !important;
}

@keyframes drawCheck {
    0% { width: 0; height: 0; opacity: 0; }
    30% { width: 0; height: 10px; opacity: 1; }
    100% { width: 5px; height: 10px; opacity: 1; }
}

.answer-option-editor input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    /* Центрируем с учетом толщины рамки */
    top: 45%; left: 50%;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    /* APP STORE TIER: Эффект рисования галочки */
    animation: drawCheck 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Кнопка "Добавить вариант" */
#addAnswerOptionBtn {
    background: transparent !important;
    border: 2px dashed var(--border-color) !important;
    color: var(--secondary-text-color) !important;
    justify-content: center;
    width: 100%;
    padding: 10px;
    box-shadow: none !important;
    font-weight: 600;
}
#addAnswerOptionBtn:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
}


 /* ================================================================== */
/* === ENTERPRISE FIX: УСТРАНЕНИЕ МЕРЦАНИЯ СКРОЛЛБАРА В САЙДБАРЕ  === */
/* ================================================================== */

/* 1. Жестко фиксируем родительский контейнер */
.ai-chat-sidebar {
    display: flex;
    flex-direction: column;
    
     
 
}

/* 2. Настраиваем список чатов (верхний блок) */
.ai-chat-history-list {
    flex-grow: 1;
    min-height: 0 !important; /* КРИТИЧЕСКИ ВАЖНО: не дает Flex-детям вылезать за пределы */
    overflow-y: auto !important;
    overflow-x: hidden !important; /* Убиваем случайный горизонтальный скролл */
    overscroll-behavior: contain;
}

/* 3. Настраиваем секцию Аудиторий (нижний блок) */
 
 
/* 4. ПОЛНОСТЬЮ УБИВАЕМ ВИЗУАЛЬНЫЕ СКРОЛЛБАРЫ В САЙДБАРЕ */
/* (Прокрутка колесиком и свайпом продолжит работать идеально) */
.ai-chat-history-list::-webkit-scrollbar,
#aiAudiencesList::-webkit-scrollbar,
.ai-chat-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

 

/* 5. Защита скелетонов от схлопывания */
.sidebar-placeholder-item {
    flex-shrink: 0 !important;
}


/* === APP STORE TIER: Гарантируем, что окна результатов всегда поверх чата === */
#testResultsModal {
    z-index: 65000 !important; 
}

#studentResultDetailsModal {
    z-index: 66000 !important; /* Строго выше списка результатов! */
}

#imageCropModal {
    /* Должен быть строго выше BottomSheet (100051) и глобального лоадера (100000) — иначе на мобиле кроп прячется за листом настроек */
    z-index: 200000 !important;
}

/* Круговая подсказка в кропе: превью внутри crop-box рисуется как круг,
   чтобы пользователь сразу видел, как изображение будет выглядеть в аватарке. */
#imageCropModal .cropper-view-box {
    border-radius: 50%;
    outline: 0;
    overflow: hidden;
}
#imageCropModal .cropper-view-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    pointer-events: none;
}
/* Скрываем сетку «правило третей» — при круглом превью она визуально конфликтует с кругом */
#imageCropModal .cropper-dashed {
    display: none;
}

#globalLoader {
    z-index: 100000 !important;
}

 
.collection-toggle-container {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 15px 0; /* ФИКС: Убрали отрицательный отступ */
padding: 8px 12px;
width: 100%;
box-sizing: border-box;
background-color: var(--message-bg-other);
border-radius: 12px;
}


/* ================================================================== */
/* === ИСПРАВЛЕНИЕ: ВЫПИРАЮЩИЕ КНОПКИ-ПОДСКАЗКИ ИИ В ЧАТЕ         === */
/* ================================================================== */

/* Ограничиваем контейнер 100% ширины родителя */
.ai-chat-suggestions {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Настраиваем сами кнопки внутри чата */
.ai-chat-suggestions .smart-reply-chip {
    max-width: 100%; /* Кнопка не может быть шире экрана */
    white-space: normal !important; /* РАЗРЕШАЕМ перенос текста на новые строки */
    word-wrap: break-word !important; /* Разрываем длинные ссылки, если они есть */
    height: auto !important; /* Позволяем кнопке расти в высоту */
    line-height: 1.4 !important; /* Делаем межстрочный интервал читаемым */
    text-align: left !important;
    align-items: flex-start !important; /* Иконка остается сверху, если текст в 3 строки */
    padding: 10px 14px !important; /* Чуть увеличиваем отступы для многострочного текста */
}

/* Защищаем иконку внутри кнопки от сплющивания */
.ai-chat-suggestions .smart-reply-chip i,
.ai-chat-suggestions .smart-reply-chip svg {
    flex-shrink: 0 !important;
    margin-top: 2px !important; /* Слегка опускаем иконку, чтобы она была на уровне первой строки */
}


/* ================================================================== */
/* === ENTERPRISE UX: МОДАЛЬНОЕ ОКНО ОБЪЯСНЕНИЙ ИИ (V4 ACCORDION) === */
/* ================================================================== */

#aiExplanationModal .modal-content {
    animation: none !important;
    width: 100% !important;
    max-width: 700px !important;
    height: 90vh !important; 
    max-height: 90vh !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; 
}

@media (max-width: 768px) {
    #aiExplanationModal {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    #aiExplanationModal .modal-content {
        height: 92dvh !important; 
        max-height: 92dvh !important;
        border-radius: 28px 28px 0 0 !important;
        padding: 25px 15px calc(15px + env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
    }
}

/* === СМАРТ-АККОРДЕОН КОНТЕКСТА ВОПРОСА === */
#aiExplanationQuestion {
    margin-bottom: 5px !important;
    width: 100% !important;
    padding: 0 !important;
}

.ai-context-accordion {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--input-bg-color);
    overflow: hidden;
    box-shadow: var(--neumorph-shadow-soft-sm);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ai-context-accordion.expanded {
    border-color: var(--accent);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb, 52, 152, 219), 0.1);
}

.ai-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--container-bg-color);
    transition: background 0.2s ease;
}

.ai-context-header:hover {
    background: var(--input-hover-bg-color);
}

.ai-context-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.context-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(var(--accent-rgb, 52, 152, 219), 0.1);
    color: var(--accent);
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.context-badge i { width: 12px; height: 12px; stroke-width: 2.5px; }

.context-snippet {
    font-size: 0.9em;
    color: var(--secondary-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-chevron {
    width: 20px;
    height: 20px;
    color: var(--secondary-text-color);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.ai-context-accordion.expanded .context-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

/* МАГИЯ CSS: Аппаратная анимация высоты без JS (Grid) */
.ai-context-body-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.ai-context-accordion.expanded .ai-context-body-wrapper {
    grid-template-rows: 1fr;
}

.ai-context-body {
    overflow: hidden;
}

/* Внутренние отступы тела (применяются только когда раскрыто) */
.ai-context-accordion.expanded .ai-context-body {
    padding: 16px;
    border-top: 1px dashed var(--border-color);
}

/* === ОСНОВНОЙ КОНТЕНТ (ОТВЕТ ИИ) === */

#aiExplanationOutput { 
    min-height: 0 !important;
    overflow-y: auto !important; 
    padding-right: 5px !important; 
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    -webkit-overflow-scrolling: touch;
}

/* === КНОПКИ ВНИЗУ === */
#aiExplanationModal .modal-buttons {
    flex: 0 0 auto !important;
    padding-top: 15px !important;
    border-top: 1px solid var(--border-color) !important;
    padding-bottom: 0px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important; 
    gap: 10px !important;
    background: var(--container-bg-color);
}
#aiExplanationModal .modal-buttons button {
    flex: 1 !important; 
    margin: 0 !important;
}


/* ================================================================== */
/* === ULTIMATE MOBILE MODAL & OVERFLOW FIX (PRODUCTION READY v2) === */
/* ================================================================== */

/* 1. Глобальная защита от скролла. */
html, body {
    max-width: 100vw !important;
    /* МАГИЯ ЗДЕСЬ: clip режет горизонтальный скролл, но НЕ ломает плавающую шапку! */
    overflow-x: clip !important; 
}

.app-wrapper {
    width: 100%;
    /* УДАЛЕНО: overflow-x: hidden, так как именно он отвязывал шапку от верха экрана */
}

/* 2. Защита для ВСЕХ модальных окон (Десктоп и Мобайл) */
.modal-content *, .auth-modal * {
    /* max-width: 100% !important; */
    box-sizing: border-box !important;
}

.modal-content input,
.modal-content textarea,
.auth-input,
.password-wrapper {
    width: 100% !important;
    min-width: 0 !important; /* Магия Flexbox: Разрешаем сжатие */
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 768px) {
    /* 3. Железобетонный контейнер оверлея на телефонах */
    /* .auth-overlay здесь появилась не сразу — и в этом была вся поломка
       окна входа. Само окно .auth-modal ниже получает оформление нижней
       шторки: полная ширина, скругление только сверху, язычок, выезд снизу.
       А его подложка оставалась с align-items: center из базовых стилей —
       шторка зависала посреди экрана с прямым нижним краем, будто её
       обрезали. Теперь подложка прижимает окно к низу, как у остальных. */
    .modal-overlay:not(.advanced-chat-overlay),
    .auth-overlay {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: flex-end !important; /* Прижимаем к низу (Bottom Sheet) */
        background-color: rgba(0, 0, 0, 0.6) !important;
        overflow: hidden !important; 
    }

    /* 4. Сама модалка на телефонах */
    .modal-overlay:not(.advanced-chat-overlay) .modal-content,
    .auth-modal {
        width: 100vw !important; /* Занимает строго всю ширину экрана */
        max-width: 100vw !important;
        height: auto !important;
        max-height: 100dvh !important; /* Оставляем воздух сверху */
        margin: 0px !important;
        border-radius: 16px 16px 0px 0px !important; /* Скругление только сверху */
        
        /* КРИТИЧЕСКИЙ ФИКС: Отступы считаются ВНУТРЬ ширины */
        /* Было 2px — содержимое любого окна упиралось в самые края экрана.
           Это чинилось по одному окну трижды подряд, значит чинить надо
           здесь. Окнам, которым нужен край в край (галереи, редакторы во
           всю ширину), нулевой отступ задан отдельными правилами по id —
           они этот запас перебивают и без !important-гонки. */
        padding: 16px 16px calc(14px + env(safe-area-inset-bottom)) 16px !important;
        box-sizing: border-box !important;
        
        /* Скроллится ТОЛЬКО внутри модалки по вертикали */
        overflow-x: hidden !important;
        overflow-y: auto !important;
        animation: iOSBottomSheet 0.4s cubic-bezier(0.32, 1.15, 0.25, 1) forwards !important;
    }

    /* Меню режимов BlockBlast и ежедневный бонус: резервируем место под нижний навбар */
    #bbModeMenu .modal-content,
    #bbDailyRewardModal .modal-content {
        padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important;
        width: 90vw !important;
    }

    /* Редактор JSON: шторке нужна реальная высота, иначе flex-раскладка
       схлопывает textarea в пару строк (height:auto от общего правила). */
    #jsonEditorModal .modal-content {
        height: 88dvh !important;
        max-height: 88dvh !important;
        padding: 0 !important;
    }
    #jsonEditorTextarea { min-height: 40vh; }


    /* Окно входа как нижняя шторка: язычку нужна точка отсчёта, иначе он
       позиционируется от подложки и уезжает к верху экрана, а заголовку —
       воздух, чтобы не наезжать на этот язычок. */
    .auth-modal {
        position: relative !important;
        padding-top: 26px !important;
    }

    /* Декоративный язычок iOS */
    .modal-overlay:not(.advanced-chat-overlay) .modal-content::before,
    .auth-modal::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background-color: var(--secondary-text-color);
        border-radius: 10px;
        opacity: 0.3;
    }

    /* 5. Умные флекс-контейнеры (Переключатели, настройки) - ИСПРАВЛЕНО */
    .settings-group,
    .collection-toggle-container {
        flex-direction: column !important; /* Возвращаем колонку, чтобы <p> падали вниз */
        align-items: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0px !important;
        padding: 5px !important;
        border-radius: 12px !important;
        border: 1px solid transparent !important;
    }


    /* Внутренняя строка с тумблером и заголовком */
    .settings-group > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
    }

    /* Защита текстов от выпирания */
    .settings-group label,
    .collection-toggle-container label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        font-size: 0.95em !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* ЖЕСТКИЙ ФИКС ТУМБЛЕРОВ: Запрещаем им растягиваться в уродливые овалы */
    .ai-toggle-switch,
    .collection-toggle-switch {
        flex: 0 0 44px !important; /* Жесткая ширина для Flexbox */
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        display: block !important;
        position: relative !important;
    }
    
    .ai-toggle-slider,
    .collection-toggle-switch .slider {
        width: 100% !important;
        /* height: 100% !important; */
        position: absolute !important;
        top: 3px !important;
        left: 3px !important;
        margin: 0 !important;
        box-shadow: var(--neumorph-shadow-inset) !important;
    }

    /* 6. Конструктор вопросов: строка ответа */
    .answer-option-editor {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    
    .answer-option-editor input[type="checkbox"] {
        flex: 0 0 30px !important;
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
    }
    
    .answer-option-editor .input-wrapper,
    .answer-option-editor input[type="text"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .answer-option-editor .delete-answer-btn {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
    }

    /* 7. Кнопки действий внизу (Сохранить/Отмена) */
    .modal-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Кнопки строго в одну линию */
        width: 100% !important;
        min-width: 0 !important;
        gap: 10px !important;
        margin: 20px 0px 30px 0px !important;
        padding: 15px 15px 0 15px !important;
        border-top: 1px solid var(--border-color) !important;
        box-sizing: border-box !important;
    }

    .modal-buttons.vertical {
        flex-direction: column !important;
    }

    .modal-buttons button,
    #authCloseButton {
        flex: 1 1 auto !important;
        width: 90% !important;
        min-width: 0px !important;
        margin: 5px !important;
        padding: 10px 10px !important;
        font-size: 1rem !important;
        white-space: break-spaces;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
        align-self: anchor-center;
    }
    
    /* Вкладки конструктора */
    .parser-tabs {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Принудительный перенос длинных неразрывных слов и ссылок (AI-Объяснения) */
#aiExplanationQuestion,
#aiExplanationOutput,
#aiExplanationModal .ai-q-text {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* Умный скролл для таблиц и кода от ИИ (чтобы не рвали ширину окна) */
#aiExplanationOutput table,
#aiExplanationOutput pre {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}


 
  /* ======================================================= */
/* === БРОНЕБОЙНЫЙ ФИКС ДЛЯ WIKI-КАРТОЧЕК В ЧАТЕ (V2)  === */
/* ======================================================= */

.wiki-image-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 95% !important;
    max-width: 400px !important; /* Ограничиваем ширину карточки в чате */
    margin: 15px 0 !important;
    background-color: var(--container-bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    z-index: 1 !important;
    clear: both !important;
    flex: 0 0 auto !important; /* Запрещаем Flexbox растягивать обертку */
}

.wiki-main-image-box {
    position: relative !important;
    display: block !important; /* Убиваем Flexbox внутри коробки */
    width: 100% !important;
    height: 250px !important; /* Строго фиксируем высоту */
    min-height: 250px !important;
    max-height: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #050505 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    /* МАГИЯ ЗДЕСЬ: Полная изоляция рендеринга. Картинка физически не сможет вылезти */
    contain: strict !important; 
}

.wiki-main-img {
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; 
    max-width: 100% !important; /* Защита от гигантских исходников */
    max-height: 100% !important;
    object-fit: contain !important; /* Идеально вписывает без искажений */
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 5 !important;
    cursor: zoom-in !important;
    box-shadow: none !important;
    border: none !important;
}

.wiki-thumbs-box {
    display: flex !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--input-bg-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    position: relative !important;
    z-index: 10 !important;
}

.wiki-thumbs-box .version-thumbnail {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    border: 2px solid transparent !important;
    flex-shrink: 0 !important; /* Запрещаем сжатие миниатюр */
    cursor: pointer !important;
    background-color: var(--border-color) !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: none !important;
    display: block !important;
}

.wiki-caption-display {
    display: block !important;
    padding: 12px 16px 4px 16px !important;
    font-size: 0.95em !important;
    line-height: 1.5 !important;
    color: var(--text-color) !important;
    max-height: 150px !important;
    overflow-y: auto !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
}

.wiki-sources-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px 14px 16px !important;
    font-size: 0.85em !important;
    color: var(--secondary-text-color) !important;
    background: transparent !important;
    border: none !important;
}


 
/* ======================================================= */
/* === БРОНЕБОЙНЫЙ ФИКС ПОЛНОЭКРАННОЙ ГАЛЕРЕИ (V3)     === */
/* ======================================================= */

#imagePreviewModal {
    z-index: 200000 !important;
    /* УБРАНО: display: flex !important; (чтобы окно могло скрываться при старте) */
    flex-direction: column !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important; 
}

/* Включаем Flexbox ТОЛЬКО когда окно открыто (нет класса .hidden) */
#imagePreviewModal:not(.hidden) {
    display: flex !important;
}

.image-preview-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}
#previewMainImageContainer {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important; /* Занимает всё доступное место */
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important; /* МАГИЯ: Не дает flex-контейнеру растягиваться из-за огромного содержимого */
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important; /* Строго обрезаем всё, что вылезет */
    touch-action: none !important;
    background: transparent !important;
}

.preview-panzoom-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#previewImage {
    display: block !important;
    width: 100% !important; /* Принудительно ограничиваем ширину 100% экрана */
    height: 100% !important; /* Принудительно ограничиваем высоту 100% экрана */
    max-width: 100vw !important;
    max-height: 100dvh !important;
    object-fit: contain !important; /* Вписываем без искажений */
    margin: auto !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
    border-radius: 8px !important;
    position: relative !important;
}

.preview-thumbnails-container {
    display: flex !important;
    flex-shrink: 0 !important; /* ЗАЩИТА: Галерея НИКОГДА не сожмется */
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 90px !important; /* Гарантированная высота панели */
    padding: 15px 15px 30px 15px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important; 
    -webkit-overflow-scrolling: touch !important;
    z-index: 10 !important;
    scroll-behavior: smooth !important;
    box-sizing: border-box !important;
}

.preview-thumbnails-container .preview-thumbnail {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    opacity: 0.5 !important;
    scroll-snap-align: center !important;
    background-color: #333 !important;
    display: block !important;
}

.preview-thumbnails-container .preview-thumbnail.active {
    opacity: 1 !important;
    border-color: var(--accent, #3498db) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

.preview-thumbnails-container .preview-thumbnail img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* ======================================================= */
/* === ИСПРАВЛЕНИЕ МЕНЮ ТЕМ ДЛЯ ТЁМНЫХ РЕЖИМОВ (PRO)   === */
/* ======================================================= */

/* 1. Глобальный фон выпадающего меню для всех темных тем */
body.dark-mode #themeDropdownContent,
body.synthwave-mode #themeDropdownContent,
body.oled-mode #themeDropdownContent,
body.claude-mode #themeDropdownContent {
    background-color: color-mix(in srgb, var(--container-bg-color) 50%, transparent) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 3px 30px rgba(0,0,0,0.5) !important;
}


/* Специфично для OLED (Тьма) - делаем радикально черным */
body.oled-mode #themeDropdownContent {
  
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
}

/* Специфично для Synthwave (Токийская ночь) */
body.synthwave-mode #themeDropdownContent {
  
    border-color: var(--border-color) !important;
}

/* 2. Исправляем цвет текста и прозрачный фон у элементов меню */
body.dark-mode #themeDropdownContent a,
body.synthwave-mode #themeDropdownContent a,
body.oled-mode #themeDropdownContent a,
body.claude-mode #themeDropdownContent a,
body.dark-mode .grain-toggle-item,
body.synthwave-mode .grain-toggle-item,
body.oled-mode .grain-toggle-item,
body.claude-mode .grain-toggle-item {
    color: var(--text-color) !important;
    background-color: transparent !important;
}

/* 3. Иконки внутри меню (чтобы они не сливались с фоном) */
body.dark-mode #themeDropdownContent i,
body.synthwave-mode #themeDropdownContent i,
body.oled-mode #themeDropdownContent i,
body.dark-mode #themeDropdownContent svg,
body.synthwave-mode #themeDropdownContent svg,
body.oled-mode #themeDropdownContent svg {
    color: var(--secondary-text-color) !important;
    stroke: var(--secondary-text-color) !important;
}

/* 4. Эффект при наведении (Hover) */
body.dark-mode #themeDropdownContent a:hover,
body.synthwave-mode #themeDropdownContent a:hover,
body.oled-mode #themeDropdownContent a:hover,
body.dark-mode .grain-toggle-item:hover,
body.synthwave-mode .grain-toggle-item:hover,
body.oled-mode .grain-toggle-item:hover {
    background-color: var(--input-hover-bg-color) !important;
}

/* 5. Активный пункт меню (Текущая тема) */
body.dark-mode #themeDropdownContent a.active,
body.synthwave-mode #themeDropdownContent a.active,
body.oled-mode #themeDropdownContent a.active,
body.claude-mode #themeDropdownContent a.active {
    background: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
}

/* Иконка у активного пункта меню */
body.dark-mode #themeDropdownContent a.active i,
body.synthwave-mode #themeDropdownContent a.active i,
body.oled-mode #themeDropdownContent a.active i,
body.dark-mode #themeDropdownContent a.active svg,
body.synthwave-mode #themeDropdownContent a.active svg,
body.oled-mode #themeDropdownContent a.active svg {
    color: var(--button-primary-text) !important;
    stroke: var(--button-primary-text) !important;
}

/* 6. ИСПРАВЛЕНИЕ ТУМБЛЕРОВ (Серый фон для выключенного состояния) */
body.dark-mode .grain-toggle-item .ai-toggle-slider,
body.synthwave-mode .grain-toggle-item .ai-toggle-slider,
body.oled-mode .grain-toggle-item .ai-toggle-slider {
    background-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5) !important;
}

/* Шарик тумблера */
body.dark-mode .grain-toggle-item .ai-toggle-slider:before,
body.synthwave-mode .grain-toggle-item .ai-toggle-slider:before,
body.oled-mode .grain-toggle-item .ai-toggle-slider:before {
    background-color: #e0e0e0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* Включенный тумблер (Зеленый или Акцентный) */
body.dark-mode .grain-toggle-item input:checked + .ai-toggle-slider,
body.synthwave-mode .grain-toggle-item input:checked + .ai-toggle-slider,
body.oled-mode .grain-toggle-item input:checked + .ai-toggle-slider {
    background-color: var(--button-success-bg) !important;
}

/* 7. Разделительная полоса */
body.dark-mode .theme-dropdown-divider,
body.synthwave-mode .theme-dropdown-divider,
body.oled-mode .theme-dropdown-divider {
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/* ================================================================== */
/* === БРОНЕБОЙНЫЙ ФИКС: ЕДИНЫЙ СКРОЛЛ ДЛЯ ОКНА ОБЪЯСНЕНИЙ ИИ     === */
/* ================================================================== */

/* 1. Главный контейнер окна: включаем прокрутку для него самого */
#aiExplanationModal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important; /* Скроллится всё окно целиком */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* Плавный скролл на iOS */
    padding-bottom: 0 !important; /* Убираем нижний отступ, он будет у кнопок */
}

/* 2. Блок вопроса: снимаем все ограничения по высоте и отключаем внутренний скролл */
#aiExplanationQuestion {
    flex: 0 0 auto !important; /* Запрещаем сплющиваться */
    max-height: none !important; /* Разрешаем расти бесконечно */
    overflow: visible !important; /* Убиваем внутренний скролл */
}

/* 3. Жестко отключаем "сворачиваемость" вопроса */
#aiExplanationQuestion.collapsible {
    max-height: none !important; 
}
#aiExplanationQuestion.collapsible::after {
    display: none !important; /* Убираем эффект полупрозрачного градиента снизу */
}

/* 4. Блок ответа ИИ: снимаем ограничения по высоте и отключаем внутренний скролл */
#aiExplanationOutput {
    flex: 0 0 auto !important; /* Запрещаем сплющиваться */
    height: auto !important;
    max-height: none !important; /* Убиваем лимит в 40vh */
    overflow: visible !important; /* Убиваем внутренний скролл */
    padding-bottom: 20px !important;
}

/* 5. Нижние кнопки: делаем их "прилипающими" к низу, чтобы они не уехали за экран */
#aiExplanationModal .modal-buttons {
    position: sticky !important; /* Прилипает к низу контейнера */
    bottom: 0 !important;
    align-self: anchor-center;
    z-index: 100 !important;
    background: var(--container-bg-color) !important; /* Непрозрачный фон, чтобы текст скрывался под ними */
    margin-top: auto !important;
    padding: 15px 20px 20px 20px !important;
    border-top: 1px solid var(--border-color) !important;
    margin-left: -20px !important; /* Компенсируем паддинги родителя */
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
}

/* Адаптация нижних кнопок для мобильных (учет челки/безопасной зоны) */
@media (max-width: 768px) {
    #aiExplanationModal .modal-buttons {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
        padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    }
}


.droodle-catalog-card {
    background: var(--container-bg-color) !important;
    border: 2px solid var(--border-color) !important;
}

/* Нажатие на карточку */
.droodle-catalog-card:active {
    border-color: var(--secondary-text-color) !important;
}

/* Если это текущий открытый друдл */
.droodle-catalog-card.current {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

/* Обертка картинки: ЖЕСТКО ДЕРЖИТ КВАДРАТ 1:1 */
.catalog-card-img-wrapper { /* Главный фикс схлопывания! */
    background: var(--input-bg-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}


/* Информационный блок снизу (Текст и номер) */
.catalog-card-info {
    background: var(--container-bg-color) !important;
}

.catalog-card-number {
    color: var(--text-color) !important;
}

.catalog-card-preview {
    color: var(--secondary-text-color) !important;
}


/* Зеленая галочка "Отвечено" */
.answered-badge {
    background: var(--button-success-bg, #2ecc71) !important;
    border: 2px solid var(--container-bg-color) !important;
}

/* Синий счетчик вариантов */
.answers-count-badge {
    background: var(--accent, #3498db) !important;
}


/* ======================================================= */
/* === КАТАЛОГ ДРУДЛОВ: PREMIUM GRID (АНТИ-СПЛЮЩИВАНИЕ)=== */
/* ======================================================= */

#droodleCatalogGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; 
    /* БРОНЕБОЙНЫЙ ФИКС: Жестко заставляем каждую строку быть не меньше 130px в высоту */
    grid-auto-rows: minmax(130px, max-content) !important;
    gap: 12px !important;
    padding: 10px 5px !important;
    align-content: start;
}

.droodle-catalog-card {
    display: flex !important;
    flex-direction: column !important;
    background: var(--container-bg-color) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    cursor: pointer;
    /* БРОНЕБОЙНЫЙ ФИКС: Карточка никогда не будет меньше 130px */
    min-height: 130px !important;
    height: 100% !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.droodle-catalog-card:active {
    transform: scale(0.92) !important;
    border-color: var(--secondary-text-color) !important;
}

.droodle-catalog-card.current {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.catalog-card-img-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; 
    /* БРОНЕБОЙНЫЙ ФИКС: Категорически запрещаем флексбоксу сжимать блок картинки */
    flex-shrink: 0 !important; 
    min-height: 90px !important;
    background: var(--input-bg-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.catalog-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 8px !important; 
    transition: opacity 0.3s ease !important;
}

.catalog-card-info {
    padding: 8px 6px !important;
    text-align: center !important;
    background: var(--container-bg-color) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex-grow: 1 !important;
    /* Защита текста от сплющивания */
    min-height: 40px !important; 
}

.catalog-card-number {
    font-weight: 800 !important;
    font-size: 0.95em !important;
    color: var(--text-color) !important;
    line-height: 1 !important;
}

.catalog-card-preview {
    font-size: 0.7em !important;
    color: var(--secondary-text-color) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 4px !important;
}

/* БЕЙДЖИ ПОВЕРХ КАРТИНКИ */
.catalog-card-badge {
    position: absolute !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: white !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    z-index: 5 !important;
}

.answered-badge {
    top: 6px !important;
    right: 6px !important;
    width: 22px !important;
    height: 22px !important;
    background: var(--button-success-bg, #2ecc71) !important;
    border: 2px solid var(--container-bg-color) !important;
}

.answers-count-badge {
    bottom: 6px !important;
    left: 6px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--accent, #3498db) !important;
}


/* ======================================================= */
/* === PREMIUM UX: ПОИСК В ФАКТАХ И СОВЕТАХ            === */
/* ======================================================= */

.facts-search-container {
    position: relative;
    margin: 15px 20px 5px 20px; /* Отступы по бокам как у карточки */
    display: flex;
    align-items: center;
}

.facts-search-input {
    width: 100%;
    padding: 12px 40px 12px 42px; /* Место под иконки слева и справа */
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: 16px !important; /* Защита от автозума в iOS Safari */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02), 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
}

.facts-search-input:focus {
    border-color: var(--focus-ring);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02), 0 0 0 4px color-mix(in srgb, var(--focus-ring) 15%, transparent);
}

.facts-search-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--secondary-text-color);
    pointer-events: none; /* Чтобы не перекрывать клик по инпуту */
}

.facts-search-clear {
    position: absolute;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    border-radius: 50%;
}

.facts-search-clear:hover {
    color: var(--text-color);
    background: var(--input-hover-bg-color);
}

.facts-search-clear i {
    width: 18px;
    height: 18px;
}

/* Маркер выделения найденного текста */
mark.facts-search-highlight {
    background-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--text-color);
    border-radius: 4px;
    padding: 0 2px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

body.dark-mode mark.facts-search-highlight,
body.synthwave-mode mark.facts-search-highlight {
    background-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: #fff;
}

/* Полоса перевода факта: состояние и переключатель на оригинал.
   Держится тихо — читателю важен текст, а не служебная строка. */
.facts-tr-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    font-size: 0.8em;
    color: var(--secondary-text-color);
}
.facts-tr-toggle {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px 12px;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.facts-tr-toggle:hover { border-color: var(--accent); }


/* ================================================================== */
/* === FIX: ВОССТАНОВЛЕНИЕ ШИРИНЫ ВЫПАДАЮЩИХ МЕНЮ (MOBILE)        === */
/* ================================================================== */

/* 1. Меню выбора ИИ-Персоны (Эксперт, Фотошопер и т.д.) */
.ai-select-dropdown,
#aiPersonaSelectContainer .ai-select-dropdown {
    width: max-content !important; /* Убиваем 'inherit', который брал ширину узкой кнопки */
    /* min-width: 280px !important; */   /* Комфортная ширина для текста */
    /* Раньше было 70vw — на ПК это давало ~480px, и при центрировании по кнопке у правого края модалки dropdown уходил за viewport. */
    max-width: min(360px, calc(100vw - 40px)) !important;
    box-shadow: var(--neumorph-shadow-inset);
    padding: 10px;
}


/* На телефоне выравниваем меню Персон ровно по центру экрана */
@media (max-width: 600px) {
    #aiPersonaSelectContainer .ai-select-dropdown {
        left: 50% !important;
        
    }
    
    
}

/* 2. Меню прикрепления файлов (Плюс / Скрепка внизу) */
.ai-attach-menu {
    width: 260px !important;       /* Жестко задаем нормальную ширину */
    min-width: 260px !important;
    /* ГЛАВНЫЙ ФИКС: Перебиваем агрессивный max-width: 100% от родительской модалки */
    max-width: 90vw !important;    
}

/* Гарантируем, что иконка и текст в меню файлов идут в одну ровную строку */
.ai-attach-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    white-space: normal !important; /* Разрешаем перенос длинного текста, если нужно */
    line-height: 1.3 !important;
}

/* Запрещаем иконкам внутри меню сплющиваться */
.ai-attach-menu a i,
.ai-attach-menu a svg {
    flex-shrink: 0 !important;
}


/* ======================================================= */
/* === ПЛАВАЮЩИЕ КАРТИНКИ (PIN IMAGE) В УРОКАХ         === */
/* ======================================================= */

.image-block-container {
    position: sticky; /* База для позиционирования кнопки */
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-radius 0.3s ease;
}

/* Кнопка закрепления (внутри .pinned-image-controls; позиционирование задаёт панель) */
.pin-image-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    /* opacity: 0; */
    transform: scale(0.9);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.image-block-container:hover .pin-image-btn {
    opacity: 1;
    transform: scale(1);
}

.pin-image-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1) !important;
}

.pin-image-btn.active {
    opacity: 1;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 10px rgba(var(--accent-rgb, 52, 152, 219), 0.4);
}

.pin-image-btn i, .pin-image-btn svg {
    width: 18px !important;
    height: 18px !important;
    pointer-events: none;
    stroke: #fff !important;
}
 


/* === ПЛЕЙСХОЛДЕР (чтобы текст не прыгал при отрыве картинки) === */
.pinned-image-placeholder {
    background: rgba(0,0,0,0.03);
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    margin: 8px 0;
    transition: all 0.3s ease;
}

body.dark-mode .pinned-image-placeholder,
body.synthwave-mode .pinned-image-placeholder,
body.oled-mode .pinned-image-placeholder {
    background: rgba(255,255,255,0.02);
}
/* === ЖЕЛЕЗОБЕТОННОЕ СОСТОЯНИЕ ЗАКРЕПЛЕННОЙ КАРТИНКИ (В КОРНЕ BODY) === */
body > .pinned-media {
    position: fixed !important;
    top: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    
    /* === ФИКС ГРАНИЦ И РАЗМЕРОВ === */
    box-sizing: border-box !important; /* Учитываем padding внутри ширины */
    width: 95vw !important;
    max-width: 600px !important;
    margin: 0px !important; /* Жестко убиваем отрицательные отступы от img-size-full */
    padding: 0px !important;
    
    /* Визуальное оформление */
    /* background: var(--container-bg-color) !important; */
    border-radius: 16px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--border-color) !important;
    max-height: 40vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important; /* Центрируем содержимое */
    will-change: auto !important;
    animation: pinPopRoot 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    /* background-color: color-mix(in srgb, var(--container-bg-color) 10%, transparent); */
    /* backdrop-filter: blur(4px) saturate(180%); */
}


@keyframes pinPopRoot {
    0% { transform: translateX(-50%) scale(0.72); opacity: 0; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* === ФИКС САМОГО ИЗОБРАЖЕНИЯ ВНУТРИ === */
body > .pinned-media img {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important; /* Картинка строго по ширине контейнера */
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(40vh - 24px) !important; /* Учитываем padding контейнера */
    margin: 0 !important; /* Убиваем отступы на самой картинке */
    object-fit: contain !important;
    border-radius: 16px !important;
}

/* Legacy-правило отключено: pin-кнопка теперь внутри .pinned-image-controls и позиционируется панелью */
body > .pinned-media .pin-image-btn {
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
}

/* Скрываем подпись */
body > .pinned-media .image-caption { display: none !important; }

@media (max-width: 768px) {
    body > .pinned-media {
        top: 55px !important;
        max-height: 35vh !important;
    }
    body > .pinned-media img {
        max-height: calc(75vh - 24px) !important;
    }
    /* Когда заголовок-шапка скрыт (title-hidden-mode) — её на телефоне нет,
       поэтому резерв в 55px убираем и прижимаем закреплённую картинку к верху. */
    body.title-hidden-mode > .pinned-media {
        top: 10px !important;
    }
}


.picker {
    contain: content;
    display: flex;
    flex-direction: column;
    border: var(--border-size) solid var(--border-color);
    border-radius: var(--border-radius);
    width: 100%;
    height: 100%;
    overflow: hidden;
    --total-emoji-size: calc(var(--emoji-size) + (2 * var(--emoji-padding)));
    --total-category-emoji-size: calc(var(--category-emoji-size) + (2 * var(--category-emoji-padding)));
    background-color: color-mix(in srgb, var(--container-bg-color) 10%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}


.pad-top, input.search {
    width: 100%;
    background-color: color-mix(in srgb, var(--container-bg-color) 10%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}


/* ======================================================= */
/* === КНОПКИ ЗУМА ДЛЯ ОКНА ПРЕДПРОСМОТРА ПОЛИГОНОВ    === */
/* ======================================================= */

.quick-preview-zoom-controls {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 50;
}

.quick-preview-zoom-controls button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    outline: none;
}

.quick-preview-zoom-controls button i,
.quick-preview-zoom-controls button svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.5px;
}

.quick-preview-zoom-controls button:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.quick-preview-zoom-controls button:active {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0.9);
}

/* На мобильных телефонах делаем кнопки чуть меньше и прижимаем ближе к краю */
@media (max-width: 768px) {
    .quick-preview-zoom-controls {
        right: 10px;
        top: 75% !important;
        gap: 10px;
    }
    .quick-preview-zoom-controls button {
        width: 40px;
        height: 40px;
    }
}


/* === ФИКС ДЛЯ ИКОНОК В МЕНЮ ВЫБОРА === */
.ai-select-dropdown a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ai-select-dropdown a i,
.ai-select-dropdown a svg {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.ai-select-dropdown a:hover i,
.ai-select-dropdown a:hover svg {
    opacity: 1;
    transform: scale(1.1);
}


/* ======================================================= */
/* === СТИЛИ ДЛЯ КАСТОМНЫХ КОМАНД (PRO UX FIX)         === */
/* ======================================================= */

.magic-command-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important; /* Центрируем строго по одной линии */
    padding: 6px 8px !important;
    margin-bottom: 4px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    gap: 8px !important;
}

.magic-command-item:hover {
    background: rgba(var(--accent-rgb, 52, 152, 219), 0.08) !important;
}

.magic-command-text {
    flex-grow: 1 !important;
    font-size: 0.9em !important;
    color: var(--text-color) !important;
    line-height: 1.4 !important;
    /* Защита от переноса текста на новую строку */
    white-space: nowrap !important; 
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
}

.magic-command-actions {
    display: flex !important;
    flex-shrink: 0 !important; /* Запрещаем кнопкам сжиматься */
    gap: 4px !important;
    opacity: 0;
    transform: translateX(5px);
    transition: all 0.2s ease;
}

.magic-command-item:hover .magic-command-actions {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .magic-command-actions { opacity: 1; transform: translateX(0); }
}

/* Исправленные кнопки (Прозрачные, вписываются в любую тему) */
.magic-action-btn {
    background: transparent !important;
    border: none !important;
    color: var(--secondary-text-color) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Жестко задаем размер и цвет иконок внутри */
.magic-action-btn i,
.magic-action-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Эффекты при наведении */
.magic-action-btn.edit:hover {
    background: var(--input-hover-bg-color) !important;
    color: var(--text-color) !important;
}

.magic-action-btn.delete:hover {
    background: rgba(231, 76, 60, 0.15) !important;
    color: #e74c3c !important;
}

.magic-edit-mode-active {
    box-shadow: 0 0 0 2px var(--accent) !important;
    background: var(--accent) !important;
    color: white !important;
}


 


/* ================================================================== */
/* === PREMIUM UX: APPLE INTELLIGENCE IMAGE GENERATOR             === */
/* ================================================================== */

.premium-image-gen-wrapper {
    position: relative;
    width: 350px;
    max-width: 100%; /* ФИКС СКРОЛЛА: Не выходим за ширину родителя на узких экранах */
    height: 350px; /* Идеальная высота для превью */
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Изолируем слой для GPU-ускорения 60FPS */
    transform: translateZ(0);
    /* ФИКС СКРОЛЛА: Гарантируем, что blur/scale дочерних элементов не выходит за bounds */
    contain: paint;
    /* ФИКС СКРОЛЛА: clip-path полностью блокирует выход filter:blur за границы блока */
    clip-path: inset(0 round 18px);
    /* Темная подложка, чтобы белые иконки всегда читались */
    background-color: #1a1c23;
    box-shadow: inset 0 2px 20px rgba(0,0,0,0.2);
}

.premium-image-gen-mesh {
    position: absolute;
    /* ФИКС СКРОЛЛА: inset:0 — меш не выходит за layout-bounds обёртки */
    inset: 0;
    z-index: 1;

    /* Тот самый красивый градиент */
    background-image:
        radial-gradient(at 43% 74%, #6A719F 0px, transparent 30%),
        radial-gradient(at 13% 58%, #734C72 0px, transparent 20%),
        radial-gradient(at 69% 85%, #84A76E 0px, transparent 40%),
        radial-gradient(at 39% 16%, #8C7ACA 0px, transparent 60%),
        radial-gradient(at 18% 65%, #B14B44 0px, transparent 20%),
        radial-gradient(at 32% 6%, #B3867B 0px, transparent 40%),
        radial-gradient(at 25% 50%, #B8A947 0px, transparent 50%),
        radial-gradient(at 86% 77%, #CD7221 0px, transparent 20%),
        radial-gradient(at 91% 16%, #6A719F 0px, transparent 80%),
        radial-gradient(at 28% 38%, #734C72 0px, transparent 50%),
        radial-gradient(at 45% 40%, #84A76E 0px, transparent 50%),
        radial-gradient(at 9% 18%, #8C7ACA 0px, transparent 40%);
    background-size: 300% 300%;
    /* Эффект матового стекла, смешивающего цвета */
    filter: blur(25px) saturate(1.5);
    opacity: 0.95;

    /* Анимация переливания (дыхания) */
    animation: appleMeshFlow 8s ease-in-out infinite alternate;
    will-change: background-position, filter;
}

@keyframes appleMeshFlow {
    0%   { background-position: 0% 0%; filter: blur(25px) saturate(1.5); }
    50%  { background-position: 100% 100%; filter: blur(30px) saturate(2); }
    100% { background-position: 0% 100%; filter: blur(25px) saturate(1.5); }
}

.premium-image-gen-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 1.05em;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.gen-icon-pulse-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* Эффект сердцебиения */
    animation: genIconPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.gen-icon-pulse-wrap i,
.gen-icon-pulse-wrap svg {
    width: 24px !important;
    height: 24px !important;
    color: white !important;
    stroke: white !important;
}

@keyframes genIconPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}

/* ================================================================== */
/* === PREMIUM UX: NATIVE TYPING INDICATOR (iMessage Style)       === */
/* ================================================================== */

.ai-typing-premium {
    padding: 10px 14px;
    background-color: var(--container-bg-color); /* Идеально ложится в баббл сообщения */
    border-radius: 18px;
    display: inline-block;
    min-width: 60px;
    height: 38px;
}

/* Расширенный режим: с этапами мышления (вместо 3 точек) */
.ai-typing-premium.has-thinking-steps {
    height: auto;
    padding: 12px 16px;
    min-width: 220px;
}

.ai-thinking-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ai-thinking-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88em;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(4px);
    animation: aiStepAppear 0.35s ease-out forwards;
}
.ai-thinking-step:nth-child(1) { animation-delay: 0.05s; }
.ai-thinking-step:nth-child(2) { animation-delay: 2.6s; }
.ai-thinking-step:nth-child(3) { animation-delay: 5.1s; }

.ai-thinking-step .step-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.ai-thinking-step .step-spinner {
    position: absolute;
    inset: 0;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0.85;
    animation: aiStepSpin 0.8s linear infinite;
}
.ai-thinking-step .step-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
}
.ai-thinking-step .step-text {
    opacity: 0.7;
    transition: opacity 0.3s ease, font-weight 0.3s ease;
}

/* Этап 1: завершается на 2.5с */
.ai-thinking-step:nth-child(1) .step-spinner { animation: aiStepSpin 0.8s linear infinite, aiStepFadeOut 0.3s 2.5s forwards; }
.ai-thinking-step:nth-child(1) .step-check   { animation: aiStepFadeIn 0.3s 2.5s forwards; }
.ai-thinking-step:nth-child(1) .step-text    { animation: aiStepDim 0.3s 2.5s forwards; }

/* Этап 2: завершается на 5.0с */
.ai-thinking-step:nth-child(2) .step-spinner { animation: aiStepSpin 0.8s linear infinite, aiStepFadeOut 0.3s 5.0s forwards; }
.ai-thinking-step:nth-child(2) .step-check   { animation: aiStepFadeIn 0.3s 5.0s forwards; }
.ai-thinking-step:nth-child(2) .step-text    { animation: aiStepDim 0.3s 5.0s forwards; }

/* Этап 3: крутится бесконечно — узел будет заменён реальным ответом */
.ai-thinking-step:nth-child(3) .step-text { opacity: 1; font-weight: 500; }

@keyframes aiStepAppear {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes aiStepSpin {
    to { transform: rotate(360deg); }
}
@keyframes aiStepFadeOut {
    to { opacity: 0; }
}
@keyframes aiStepFadeIn {
    to { opacity: 1; }
}
@keyframes aiStepDim {
    to { opacity: 0.5; font-weight: 400; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-thinking-step,
    .ai-thinking-step .step-spinner,
    .ai-thinking-step .step-check,
    .ai-thinking-step .step-text {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .ai-thinking-step .step-check { display: none; }
}

/* ================================================================== */
/* === OPTICAL BLUR REVEAL: ответ ИИ кристаллизуется из размытия  === */
/* ================================================================== */
.ai-message-container.ai-blur-reveal .ai-message {
    animation: aiBlurReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: filter, opacity;
}
@keyframes aiBlurReveal {
    0%   { filter: blur(8px);   opacity: 0.35; }
    60%  { filter: blur(2px);   opacity: 0.85; }
    100% { filter: blur(0);     opacity: 1;    }
}
@media (prefers-reduced-motion: reduce) {
    .ai-message-container.ai-blur-reveal .ai-message {
        animation: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}

/* ================================================================== */
/* === STICKY CONTEXT PATH: хлебные крошки H2 › H3 в AI-чате      === */
/* Bar живёт в .ai-chat-header-controls (на месте бывшей кнопки персоны),  */
/* поэтому это обычный flex-чип, а не абсолютный оверлей.                  */
/* ================================================================== */
.ai-chat-breadcrumb {
    flex: 1 1 0;            /* съедает свободное место между [+] и [⛶][✕] */
    min-width: 0;
    padding: 10px 2px;
    font-size: 0.85em;
    line-height: 1.2;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center; /* контент всегда по центру слота */
    gap: 1px;
    transition: opacity 0.2s ease;
    opacity: 1;
    border-radius: 12px;
}
.ai-chat-breadcrumb.hidden {
    opacity: 0;
}
.ai-chat-breadcrumb .crumb-segment {
    flex: 0 1 auto;
    min-width: 0;
    /* Длинный текст переносится; шапка растёт по высоте */
    white-space: normal;
    overflow-wrap: anywhere;
}
.ai-chat-breadcrumb .crumb-h2 {
    font-weight: 600;
    opacity: 0.95;
}
.ai-chat-breadcrumb .crumb-h3 {
    opacity: 0.7;
}
.ai-chat-breadcrumb .crumb-placeholder {
    opacity: 0.55;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ai-chat-breadcrumb .crumb-sep {
    opacity: 0.4;
    flex-shrink: 0;
    font-size: 1.05em;
}
@media (prefers-reduced-motion: reduce) {
    .ai-chat-breadcrumb {
        transition: opacity 0.15s linear !important;
        transform: none !important;
    }
    .ai-chat-breadcrumb.hidden {
        transform: none !important;
        display: none;
    }
}

/* === Дропдаун-оглавление: клик по breadcrumb → список заголовков === */
.ai-chat-breadcrumb {
    cursor: pointer;
    pointer-events: auto !important;
}
.ai-chat-breadcrumb:hover {
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
}
.ai-bc-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 8px;
    right: 8px;
    z-index: 20000;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    /* PREMIUM UX: Glassmorphism */
    background-color: rgba(var(--container-bg-color-rgb, 255, 255, 255), 0.6);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    
    /* Лёгкая анимация появления */
    box-shadow: var(--neumorph-shadow-soft);
    margin: 25px;
    transform-origin: top center;
    animation: ai-bc-dropdown-in 0.18s ease-out;
}
.ai-bc-dropdown.hidden { display: none; }

@keyframes ai-bc-dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.ai-bc-item {
    display: block;
    padding: 8px 12px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9em;
    line-height: 1.3;
    transition: background 0.15s ease;
}
.ai-bc-item:hover {
    background: var(--input-hover-bg-color);
}
.ai-bc-item.is-active {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-weight: 600;
}
.ai-bc-h1 { font-weight: 700; font-size: 0.95em; }
.ai-bc-h2 { font-weight: 600; }
.ai-bc-h3 { padding-left: 28px; opacity: 0.9; }
.ai-bc-h4 { padding-left: 44px; opacity: 0.75; font-size: 0.85em; }

/* Разделитель в дропдауне оглавления: текст вопроса пользователя,
   к которому относится следующая группа заголовков AI-ответа. */
.ai-bc-separator {
    margin: 2px 5px 2px;
    padding: 2px 10px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-top: 1px solid var(--border-color);
    padding-top: 5px;
    /* Обрезаем длинные вопросы в 2 строки */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: inherit;
    overflow: overlay;
    word-break: auto-phrase;
}
.ai-bc-dropdown > .ai-bc-separator:first-child {
    margin-top: 2px;
    border-top: none;
    padding-top: 4px;
}

.ai-bc-empty {
    padding: 14px;
    color: var(--secondary-text-color);
    text-align: center;
    font-size: 0.9em;
}

/* Подсветка заголовка после прыжка по нему из дропдауна */
@keyframes ai-bc-flash-pulse {
    0%   { background-color: color-mix(in srgb, var(--accent) 35%, transparent); }
    100% { background-color: transparent; }
}
.ai-bc-flash {
    animation: ai-bc-flash-pulse 2.2s ease-out;
    border-radius: 8px;
}

/* ================================================================== */
/* === ACTIONS DROPDOWN: дополнительные действия — меню с подписями === */
/* ================================================================== */
.ai-message-actions.has-pill,
.ai-user-message-actions.has-pill {
    position: relative;       /* anchor для абсолютного дропдауна */
    align-items: center;
    flex-wrap: nowrap;
}

/* Контейнер дополнительных действий — выпадающее меню над "..." */
/* Меню дополнительных действий сообщения — раскрывается кнопкой «...».
   Видимость держится на одном свойстве: есть класс expanded — меню в раскладке, нет — его нет.
   Раньше видимость собиралась из opacity + visibility + transform с переходами и отложенной
   сменой visibility; стоило одному звену не сработать, и меню оставалось прозрачным при
   выставленном классе — именно так оно и «не открывалось». */
.ai-actions-extra {
    position: absolute;
    bottom: calc(100% + 6px);
    z-index: 100;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: min(210px, calc(100vw - 20px));
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    /* Фон плотный и без backdrop-filter: размытие здесь заставляло браузер пересобирать
       композицию поверх всей ленты, и телефон замирал на секунду перед появлением меню. */
    background-color: var(--container-bg-color, #fff);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    contain: layout paint style;
}
/* AI-сообщения прижаты к левому краю, пользовательские — к правому:
   меню раскрывается внутрь экрана, а не за его край. */
.ai-message-actions .ai-actions-extra {
    left: 0;
    right: auto;
    transform-origin: bottom left;
}
.ai-user-message-actions .ai-actions-extra {
    right: 0;
    left: auto;
    transform-origin: bottom right;
}
.has-pill.expanded .ai-actions-extra {
    /* Ровно одно свойство отвечает за видимость. Анимации появления здесь нет намеренно:
       именно наслоение opacity, visibility и переходов приводило к меню, которое «открыто»
       по классу, но невидимо на экране. */
    display: flex;
}

/* Кнопка-троеточие: лёгкая ротация при раскрытии */
.ai-action-more-btn {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, background-color 0.2s ease;
}
.has-pill.expanded .ai-action-more-btn {
    transform: rotate(90deg);
    color: var(--accent, var(--text-color));
}

/* Кнопки внутри дропдауна: строка "иконка + текст" во всю ширину.
   Текст подтягивается из атрибута title — все кнопки уже имеют локализованный title. */
.ai-actions-extra .ai-action-btn {
    /* display не !important: иначе перебьёт .dev-only-btn { display: none !important }
       и скрытая dev-кнопка станет видна обычным пользователям. */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100% !important;       /* перебиваем 35px из базового .ai-action-btn */
    height: auto !important;
    padding: 8px 12px !important;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.88em;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ai-actions-extra .ai-action-btn:hover {
    background: var(--input-hover-bg-color, rgba(0,0,0,0.06));
}
body.dark-mode .ai-actions-extra .ai-action-btn:hover,
body.synthwave-mode .ai-actions-extra .ai-action-btn:hover,
body.oled-mode .ai-actions-extra .ai-action-btn:hover {
    background: rgba(255,255,255,0.08);
}
.ai-actions-extra .ai-action-btn i,
.ai-actions-extra .ai-action-btn svg {
    flex-shrink: 0;
    width: 18px !important;
    height: 18px !important;
}
.ai-actions-extra .ai-action-btn::after {
    content: attr(title);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Подпись после первого наведения берём из data-tippy-content.
   Подсказки tippy при первом показе НАМЕРЕННО удаляют атрибут title —
   иначе поверх всплывала бы вторая, системная подсказка браузера, — и
   переносят текст в data-tippy-content. Но подпись строки в этом меню
   рисуется как раз из title, поэтому после первого наведения она
   исчезала. Правило ниже перехватывает ровно этот случай. */
.ai-actions-extra .ai-action-btn[data-tippy-content]::after {
    content: attr(data-tippy-content);
}

@media (prefers-reduced-motion: reduce) {
    .ai-action-more-btn { transition: none; }
}

/* Плавающее состояние — меню телепортировано в <body>, чтобы вырваться из containing-block,
   создаваемого предками с backdrop-filter (иначе blur(15px) не имеет что размывать).
   Координаты top/left ставит JS через getBoundingClientRect; ниже — только видимость
   и направление "вырастания" вместо относительного позиционирования. */
/* Телепорт меню в <body> (класс is-floating) убран: меню живёт в своей строке действий,
   поэтому ни fixed-слоя поверх страницы, ни z-index в два миллиарда больше не нужно. */

/* iOS Safari: backdrop-filter молча отключается, если у любого предка есть transform/
   filter/will-change/perspective. У AI-чата таких предков много (модалка, контейнеры),
   из-за чего полупрозрачный фон дропдаунов выглядит «прозрачно». На мобилке отдаём
   opaque-фон и отключаем blur, чтобы меню были непрозрачными независимо от iOS. */
@media (max-width: 768px) {
    .ai-bc-dropdown,
    .ai-attach-menu,
    .ai-select-dropdown {
        background-color: var(--container-bg-color);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}


/* ======================================================= */
/* === ФИКСИРУЕМ КАРТОЧКИ ПЕРСОНАЖЕЙ (APP STORE TIER)  === */
/* ======================================================= */

.ai-character-card {
    /* Добавляем transition для физики нажатия */
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease !important;
    will-change: transform;
    /* Запрещаем выделение текста при долгом тапе на телефоне */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Эффект глубокого вдавливания при тапе */
.ai-character-card:active {
    transform: scale(0.96);
    background-color: var(--input-hover-bg-color);
}

/* Убеждаемся, что аватарка имеет правильный курсор */
.ai-character-avatar {
    cursor: zoom-in !important;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.ai-character-avatar:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}


/* ======================================================= */
/* === PREMIUM UX: IMAGE STYLE PILL & GRID MODAL       === */
/* ======================================================= */

/* 1. Убираем старый мусор, если он остался в CSS */

/* 2. Контейнер бейджа внутри поля ввода */
.style-context-pill-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0px 0px 0px; /* Отступы от краев textarea */
    transition: all 0.3s ease;
    animation: fadeIn 0.3s ease;
    justify-content: center;
}
.style-context-pill-wrapper.hidden {
    display: none !important;
}

/* 3. Сама кнопка-бейдж (Pill) */
.style-context-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.style-context-pill i {
    width: 14px; height: 14px;
}
.style-context-pill:hover {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
    border-color: var(--secondary-text-color);
    transform: translateY(-1px);
}
.style-context-pill:active {
    transform: scale(0.96);
}

/* Выбранный стиль (Активное состояние) */
.style-context-pill.active {
    background: rgba(var(--accent-rgb, 52, 152, 219), 0.1);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 4px 10px rgba(var(--accent-rgb, 52, 152, 219), 0.15);
}

/* Кнопка сброса (Крестик) */
.style-context-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    padding: 0;
    border-radius: 50%;
    background: var(--button-danger-bg, #e74c3c);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: popInBtn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.style-context-clear:hover {
    transform: scale(1.15) rotate(90deg);
}
.style-context-clear i { width: 14px; height: 14px; }


/* 4. МОДАЛЬНОЕ ОКНО-СЕТКА (STYLE PICKER MODAL) */
.style-picker-modal {
    max-width: 700px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 85vh !important;
    max-height: 85vh !important;
    overflow: hidden !important;
}

.style-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--container-bg-color);
    flex-shrink: 0;
}
.style-picker-header h3 {
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2em;
}
.close-style-picker-btn {
    background: var(--input-bg-color);
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: all 0.2s;
}
.close-style-picker-btn:hover { 
    background: var(--feedback-incorrect-bg); 
    color: var(--feedback-incorrect-text); 
    transform: rotate(90deg);
}

.style-picker-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex-grow: 1;
    background: var(--bg-color); /* Слегка контрастный фон */
}

/* Плитка кнопок */
.style-grid-category {
    margin-bottom: 25px;
}
.style-grid-category h4 {
    margin: 0 0 12px 0;
    font-size: 0.85em;
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.style-grid-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.style-grid-btn {
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.style-grid-btn:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}
.style-grid-btn:active {
    transform: scale(0.95);
}

/* Активная кнопка в сетке */
.style-grid-btn.active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    font-weight: 700;
}

.reset-style-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    margin-bottom: 25px;
    background: var(--input-bg-color);
    border: 2px dashed var(--border-color);
    color: var(--secondary-text-color);
}
.reset-style-btn:hover {
    color: var(--text-color);
    border-style: solid;
}
.reset-style-btn.active {
    background: rgba(46, 204, 113, 0.1);
    border-color: #2ecc71;
    border-style: solid;
    color: #27ae60;
}

/* 5. Адаптация под телефоны (iOS Bottom Sheet Style) */
@media (max-width: 768px) {
    .style-picker-modal {
        height: 90dvh !important;
        max-height: 90dvh !important;
        border-radius: 28px 28px 0 0 !important;
    }
    .style-grid-btn {
        flex-grow: 1; /* На телефоне кнопки растягиваются, заполняя ряд */
        text-align: center;
    }
}


 

/* ======================================================= */
/* === FIX: HOVER MENU CUTOFF AT BOTTOM (CHAT)         === */
/* ======================================================= */

.ai-chat-messages {
    /* Добавляем дополнительные 70px отступа снизу. 
       Это навсегда решит проблему, когда меню "Ответить/Копировать/Удалить" 
       на последнем сообщении уходило за край экрана и не отображалось! */
    padding-bottom: 70px !important; 
}


/* ================================================================== */
/* === ENTERPRISE UX: SMART SCROLL-TO-BOTTOM BUTTON (V3 ARMORED)  === */
/* ================================================================== */

#aiScrollToBottomBtn {
    position: absolute !important;
    right: 16px !important; 
    bottom: 16px !important; 
    z-index: 1005 !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* ЖЕЛЕЗОБЕТОННЫЕ РАЗМЕРЫ (Защита от глобальных button { width: 100% }) */
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    
    background-color: color-mix(in srgb, var(--container-bg-color) 85%, transparent) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    
    color: var(--text-color) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; 
    
    /* 1. БАЗОВОЕ СОСТОЯНИЕ: Скрыто внизу */
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    pointer-events: none;
    visibility: hidden;
    
    /* Плавный уход */
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s !important;
    will-change: transform, opacity;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 2. СОСТОЯНИЕ АКТИВНОСТИ: Кнопка выплывает */
#aiScrollToBottomBtn.visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition-delay: 0s !important;
}

/* 3. НАВЕДЕНИЕ (Только для ПК) */
@media (hover: hover) {
    #aiScrollToBottomBtn.visible:hover {
        background-color: var(--input-hover-bg-color) !important;
        transform: translateY(-3px) scale(1.05) !important; 
        box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
    }
}

/* 4. КЛИК И ИСЧЕЗНОВЕНИЕ */
#aiScrollToBottomBtn.is-clicked {
    opacity: 0 !important;
    transform: translateY(40px) scale(0.6) !important; 
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) !important; 
}

/* Иконки внутри кнопки (Защита от смещения) */
#aiScrollToBottomBtn i[data-lucide], 
#aiScrollToBottomBtn svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    opacity: 0.8 !important;
    transition: transform 0.2s ease !important;
    margin: 0 !important; 
    padding: 0 !important;
    display: block !important;
}

/* Бейдж непрочитанных (Красная точка) */
#aiScrollToBottomBtn::after {
    content: '';
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 12px !important;
    height: 12px !important;
    background-color: var(--accent, #e74c3c) !important;
    border: 2px solid var(--container-bg-color) !important;
    border-radius: 50% !important;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-sizing: border-box !important;
}

#aiScrollToBottomBtn.has-unread::after {
    opacity: 1 !important;
    transform: scale(1) !important;
    box-shadow: 0 0 8px var(--accent, #e74c3c) !important;
}


/* === ЖЕСТКИЙ ФИКС АКТИВНОЙ КНОПКИ A/B СЛАЙДЕРА === */
.ai-message-actions .ab-toggle-btn.active,
.message-actions-toolbar button.ab-toggle-btn.active {
    background-color: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.05);
}

body.dark-mode .ai-message-actions .ab-toggle-btn.active,
body.synthwave-mode .ai-message-actions .ab-toggle-btn.active,
body.oled-mode .ai-message-actions .ab-toggle-btn.active {
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1) !important;
}

.ai-message-actions .ab-toggle-btn.active i,
.ai-message-actions .ab-toggle-btn.active svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
}


/* === МОДАЛЬНОЕ ОКНО ТОЧЕЧНОЙ НАСТРОЙКИ МАСКИ (SMART STITCH TUNER) === */
.stitch-tuner-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 80000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stitch-tuner-container {
    background: var(--container-bg-color);
    border-radius: 20px;
    padding: 20px;
    width: 95%;
    max-width: 600px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stitch-tuner-preview {
    width: 100%;
    height: 50vh;
    background: repeating-conic-gradient(rgba(255,255,255,0.05) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.stitch-tuner-preview canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.stitch-slider-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stitch-slider-group label {
    color: var(--secondary-text-color);
    font-size: 0.9em;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}

.stitch-slider-group input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.stitch-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}


/* ======================================================= */
/* === ENTERPRISE FIX: ИДЕАЛЬНЫЕ ТАБЛИЦЫ С ТЕНЯМИ      === */
/* ======================================================= */
.ai-message.model .table-outer-wrapper {
    padding: 10px;
    border-radius: 12px;
    background-color: var(--container-bg-color);
    box-shadow: var(--neumorph-shadow-inset);
    /* Обрезаем углы таблицы, чтобы они не выпирали за красивую тень при скролле */
    overflow: hidden; 
}

.ai-message.model .table-wrapper {
    overflow-x: auto;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important; /* Убиваем старую конфликтующую тень */
}


/* ======================================================= */
/* === ИДЕАЛЬНЫЕ КНОПКИ ДЛЯ КАРТИНОК В УРОКАХ (PRO UX) === */
/* ======================================================= */

/* 1. Контейнер кнопок (По умолчанию внутри картинки, сверху справа) */
.pinned-image-controls {
    /* В обычном (не закреплённом) состоянии панель идёт в потоке ПОД картинкой по центру */
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    z-index: 100;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Сами кнопки (Стеклянный эффект, адаптивный под тему) */
.pinned-action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.2s  cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s, box-shadow 0.2s;
    
    /* Дефолт: Светлая тема */
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-color);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Адаптация под темные темы */
body.dark-mode .pinned-action-btn,
body.synthwave-mode .pinned-action-btn,
body.oled-mode .pinned-action-btn {
    background: rgba(30, 30, 30, 0.7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

body.claude-mode .pinned-action-btn {
    background: rgba(242, 237, 232, 0.9);
    border: 1px solid var(--border-color);
    box-shadow: var(--neumorph-shadow-soft-sm);
}

/* Эффекты наведения и нажатия */
.pinned-action-btn:hover {
    transform: scale(1.1);
    background: var(--input-hover-bg-color);
}
.pinned-action-btn:active {
    transform: scale(0.9);
}

/* Убираем уродливый пунктир фокуса (как на 1-м скриншоте) */
.pinned-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}

.pinned-action-btn i, 
.pinned-action-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

/* 3. Активное состояние кнопки (когда картинка закреплена) */
.pinned-action-btn.active {
    background: var(--button-danger-bg, #e74c3c) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
}

/* 4. ПАНЕЛЬ В ЗАКРЕПЛЁННОМ СОСТОЯНИИ — выносим под картинку абсолютной док-панелью,
   чтобы не упираться в max-height: 40vh у обёртки и не накладываться на картинку */
.pinned-media .pinned-image-controls {
    position: absolute !important;
    top: auto !important;
    bottom: -44px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin-top: 0 !important;
    flex-direction: row !important;
    padding: 4px 8px;

    /* Док-панель (Pill) */
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Убираем собственные тени у кнопок, когда они внутри док-панели */
.pinned-media .pinned-action-btn {
    box-shadow: none;
    border: none;
    background: transparent;
}

.pinned-media .pinned-action-btn:hover {
    background: var(--input-hover-bg-color);
}


.dev-only-btn { display: none !important; }
body.dev-mode-active .dev-only-btn { display: inline-flex !important; }


/* ================================================================
   БЛОК МОБИЛЬНОЙ ОПТИМИЗАЦИИ
   Цель: убрать GPU-killer эффекты на ВСЕХ тач-устройствах
   (hover:none + pointer:coarse = телефоны и планшеты без мышки)
   body.low-power уже покрывает слабые устройства; этот блок
   дополнительно охватывает флагманские iPhone/Samsung
   ================================================================ */
@media (hover: none) and (pointer: coarse) {

    /* 1. BACKDROP-FILTER на тач-устройствах больше не запрещается (решение пользователя,
          10.09.2026): матовое стекло должно быть и на слабом железе. Экономия — адресная,
          см. блок «Стекло на слабом железе» в конце файла. */

    /* 2. WILL-CHANGE — на мобильных каждый GPU-слой стоит 4-8 MB VRAM.
          19 постоянных will-change = 76-152 MB только на слои.
          Сбрасываем в auto; браузер сам активирует нужный слой
          во время реальной анимации. */
    *:not(.animating) {
        will-change: auto !important;
    }

    /* 3. FILTER на статичных элементах — дополнительный рекомпозит.
          Оставляем только on-active/hover где это нужно. */
    .ambilight-glow,
    .tilt-glare-effect::after {
        display: none !important;
    }

}


/* ================================================================
   PREFERS-REDUCED-MOTION
   Для пользователей с вестибулярными расстройствами и эпилепсией.
   Также автоматически применяется iOS "Уменьшить движение".
   ================================================================ */
@media (prefers-reduced-motion: reduce) {

    /* Останавливаем ВСЕ CSS-анимации и переходы, КРОМЕ вариантов ответов и спецэффектов */
    *:not(li):not(.correct):not(.incorrect):not(.error-shake):not(canvas):not([class*="mofx"]):not([class*="burst"]):not([class*="confetti"]),
    *:not(li):not(.correct):not(.incorrect):not(.error-shake):not(canvas):not([class*="mofx"]):not([class*="burst"]):not([class*="confetti"])::before,
    *:not(li):not(.correct):not(.incorrect):not(.error-shake):not(canvas):not([class*="mofx"]):not([class*="burst"]):not([class*="confetti"])::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Убираем бесконечные фоновые анимации */
    .breathing-empty-state,
    .pulse-animation,
    .shimmer,
    .skeleton-loader::after,
    [class*="spin"],
    [class*="pulse"],
    [class*="bounce"] {
        animation: none !important;
    }

}

/* === РАЗБЛОКИРОВКА СТРАНИЦЫ ДЛЯ STICKY === */
/* ФИКС: Sticky по вертикали не работает в flex-direction: column. Переводим родителя в block. 
   ЖЕЛЕЗОБЕТОННАЯ ЗАЩИТА: Применяем block ТОЛЬКО если экран не скрыт классом .hidden */
#lessonViewArea:not(.hidden) {
    display: block !important; 
}

/* === ОФОРМЛЕНИЕ ШИРОКОЙ ПАНЕЛИ ИНСТРУМЕНТОВ LMS === */
.lesson-toolbar {
    /* ЖЕЛЕЗОБЕТОННЫЙ ФИКС: Привязка Sticky, как заказывали */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 50vh !important; /* Держим по центру экрана при скролле */
    float: right !important; /* Прижимаем к правому краю */
    
    /* Компенсируем высоту в потоке, чтобы шапка и контент не разрывались дырой в 300px */
    margin-bottom: -1000px !important;
    transform: translateY(-50%) translateX(10%) !important;
    width: max-content !important;
    max-width: 65vw !important;
    padding: 12px !important;
    border-radius: 12px 0 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    box-sizing: border-box;
    z-index: 2000 !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--neumorph-shadow-soft);
 
    /* Ширину/высоту НЕ анимируем: развёрнутая панель имеет width:max-content и
       height:auto, а auto не интерполируется — высота схлопывалась мгновенно,
       пока ширина ехала 300 мс, и в этот момент панель выглядела как обрезанная
       широкая плашка. Анимируем только то, что реально умеет плавно меняться. */
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Сохраняем широкую панель только когда она НЕ свернута */
.lesson-toolbar:not(.collapsed) {
    min-width: 180px !important;
}

/* ИДЕАЛЬНОЕ СВЕРНУТОЕ СОСТОЯНИЕ (ЯЗЫЧОК) */
.lesson-toolbar.collapsed {
    min-width: 18px !important;
    width: 18px !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 8px 0 0 8px !important;
    background-color: var(--border-color) !important;
    box-shadow: var(--neumorph-shadow-soft-sm) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    /* Базовый translateX(10%) уводил свёрнутый язычок за кромку экрана —
       в свёрнутом виде держим его ровно на краю. */
    transform: translateY(-50%) translateX(0) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

/* Стрелка-подсказка: без неё свёрнутая панель была просто пустой серой полоской,
   и по ней не читалось, что это кнопка "развернуть". */
.lesson-toolbar.collapsed::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--text-color);
    border-left: 2px solid var(--text-color);
    border-radius: 1px;
    opacity: .5;
    transform: rotate(-45deg) translate(1px, 1px);
    transition: opacity .2s ease;
}

.lesson-toolbar.collapsed:hover::after {
    opacity: 1;
}

/* Улучшенный дизайн ребристого язычка */
.lesson-toolbar.collapsed::before {
    width: 100% !important;
    height: 100% !important;
    /* background-image: radial-gradient(circle at center, var(--container-bg-color) 1.5px, transparent 2px) !important; */
    background-size: 100% 6px !important;
    opacity: 0.6 !important;
}

.lesson-toolbar.collapsed:hover::before {
    opacity: 1 !important;
}

/* Полностью скрываем кнопки, когда свернуто */
.lesson-toolbar.collapsed button {
    display: none !important;
}

body.dark-mode .lesson-toolbar,
body.synthwave-mode .lesson-toolbar,
body.oled-mode .lesson-toolbar {
    background-color: rgba(30, 30, 30, 0.95) !important;
    box-shadow: -4px 4px 25px rgba(0,0,0,0.6) !important;
    border-left: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode .lesson-toolbar.collapsed,
body.synthwave-mode .lesson-toolbar.collapsed,
body.oled-mode .lesson-toolbar.collapsed {
    background-color: #444 !important;
    border: none !important;
}

.lesson-toolbar button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease;
    background: transparent !important;
    /* box-shadow: var(--neumorph-shadow-soft-sm); */
}

.lesson-toolbar button:hover {
    background-color: var(--input-hover-bg-color, rgba(0,0,0,0.05)) !important;
    transform: translateX(-2px);
}

/* ИСПРАВЛЕНИЕ: Текст кнопок теперь виден всегда, даже на телефонах */
.lesson-toolbar .toolbar-btn-text {
    display: block !important; 
    margin-left: 12px;
    font-size: 14px;
    font-weight: 500;
    white-space: normal !important; /* Разрешаем перенос текста, если экран узкий */
    text-align: left;
    line-height: 1.2;
    color: var(--text-color);
    opacity: 0.9;
}

.lesson-toolbar button.active {
    background: var(--button-primary-bg, #89b4fa) !important;
    box-shadow: var(--neumorph-shadow-soft-sm);
}

.lesson-toolbar button.active .toolbar-btn-text,
.lesson-toolbar button.active i,
.lesson-toolbar button.active svg {
    color: var(--button-primary-text, #11111b) !important;
    opacity: 1 !important;
    font-weight: 600;
}

/* На телефонах немного уменьшаем отступы, но ТЕКСТ ОСТАВЛЯЕМ */
@media screen and (max-width: 768px) {
    .lesson-toolbar {
        padding: 10px !important;
        gap: 6px !important;
    }
    .lesson-toolbar button {
        padding: 8px 10px !important;
    }
    .lesson-toolbar .toolbar-btn-text {
        font-size: 13px;
        margin-left: 8px;
    }
}


/* ================================================================== */
/* === FIX: УСТРАНЕНИЕ ДЕРГАНИЯ СООБЩЕНИЙ ПОЛЬЗОВАТЕЛЯ НА ПК      === */
/* ================================================================== */

/* 1. Превращаем прыгающее меню действий в красивую "парящую" панель */
.ai-user-message-actions {
    position: absolute !important;
    bottom: -15px !important; /* Меню выплывает чуть ниже сообщения */
    right: 10px !important;
    z-index: 105 !important;
    
    display: flex !important;
    gap: 2px !important;
    padding: 4px 6px !important;
    
    /* Плотный фон без backdrop-filter: размытие поверх длинной ленты подвешивало телефон
       при каждом показе панели — та же причина, что была у меню «...» (см. .ai-actions-extra). */
    background: var(--container-bg-color) !important;
    border: 1px solid rgba(150, 150, 150, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12) !important;
    
    /* УБИВАЕМ СВОЙСТВА, ВЫЗЫВАЮЩИЕ ДЕРГАНИЕ ВЕРСТКИ */
    max-height: none !important;
    margin-top: 0 !important;
    overflow: visible !important;
    
    /* Плавная пружинная анимация появления */
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 2. Появление меню при наведении на сообщение */
.ai-message-container.is-user.actions-visible .ai-user-message-actions {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}
@media (hover: hover) {
    .ai-message-container.is-user:hover .ai-user-message-actions {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }
}

/* 3. Гарантируем, что контейнер не обрежет всплывающее меню */
.ai-message-container.is-user {
    position: relative !important;
    overflow: visible !important;
    margin-bottom: 20px !important; /* Даем место снизу для выпадающего меню */
}

/* 4. Фикс для самой карточки "Исходный кадр" (Вложение) */
.ai-message-attachment {
    /* Убираем изменение физического размера (scale), которое тоже сдвигает курсор */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    transform: translateZ(0) !important; /* Аппаратное ускорение */
}

.ai-message-attachment:hover {
    transform: none !important; /* ОТКЛЮЧАЕМ scale(1.02), вызывающий вибрацию */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; /* Добавляем тень вместо увеличения */
    border-color: var(--accent) !important;
}

/* Оставляем эффект сжатия только при реальном клике */
.ai-message-attachment:active {
    transform: scale(0.98) !important;
}

/* 5. Адаптация темной темы для нового парящего меню */
body.dark-mode .ai-user-message-actions,
body.synthwave-mode .ai-user-message-actions,
body.oled-mode .ai-user-message-actions {
    background: #2d2d2d !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    border-color: rgba(255,255,255,0.1) !important;
}


/* ================================================================== */
/* === FIX: КЛИКАБЕЛЬНАЯ ШАПКА ПАПОК В САЙДБАРЕ ЧАТА              === */
/* ================================================================== */

/* Добавляем мягкую подсветку при наведении на папку */
.ai-chat-folder-header {
    transition: background-color 0.2s ease;
}

.ai-chat-folder-header:hover {
    background-color: var(--input-hover-bg-color, rgba(0,0,0,0.03));
}

body.dark-mode .ai-chat-folder-header:hover,
body.synthwave-mode .ai-chat-folder-header:hover,
body.oled-mode .ai-chat-folder-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Делаем курсор "пальчик" при наведении на название, чтобы было ясно, что это кнопка */
.ai-chat-folder-title {
    cursor: pointer !important;
}

/* Эффект легкого пружинного сжатия при клике на саму папку (исключая кнопки действий) */
.ai-chat-folder-header:active:not(:has(.folder-actions:hover)) {
    transform: scale(0.98);
    transition: transform 0.1s;
}


/* ================================================================== */
/* === ФИКС: ЗАЩИТА ПОЛЗУНКОВ ОТ ГЛОБАЛЬНЫХ СТИЛЕЙ ТЕКСТОВЫХ ПОЛЕЙ === */
/* ================================================================== */

/* Глобальное правило .modal-content input ломает range-ползунки, 
   добавляя им огромный padding и фон. Жестко переопределяем это. */
.modal-content input[type="range"],
.auth-modal input[type="range"],
.settings-group input[type="range"] {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 20px !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Глобальное правило .modal-content input ломает чекбоксы,
   растягивая их на 100%. Жестко переопределяем. */
.modal-content input[type="checkbox"] {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Фикс позиционирования прогресс-бара именно в окне генерации */
#aiTestFromMessageModal .time-limit-wrapper .single-slider-container {
    display: flex !important;
    align-items: center !important;
    height: 24px !important;
}

#aiTestFromMessageModal #aiTestMsgSliderProgress {
    /* Поднимаем прогресс-бар, чтобы он точно совпадал с треком слайдера */
    margin-top: 0px !important;
    height: 6px !important;
}


 /* Нативный круглый шрифт для цифр (как на Apple Watch) */
.unread-badge, 
.tab-counter, 
.action-limit-badge, 
.fsrs-stat .num, 
#wpTimer, 
#timerDisplay,
.zonk-total-score-display .value,
.prog-count-badge {
    font-family: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    /* Гарантирует, что таймер не будет дергаться в ширину при смене цифр (например, 1 и 8) */
    font-variant-numeric: tabular-nums; 
}


/* ======================================================= */
/* === СТИЛИ ТЕЛЕГРАМ-ФОРМАТИРОВАНИЯ И РЕАКЦИЙ         === */
/* ======================================================= */

/* 1. Telegram Spoiler */
.tg-spoiler {
    background-color: var(--secondary-text-color);
    color: transparent;
    border-radius: 4px;
    padding: 0 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    /* Эффект шума (зернистости) для нераскрытого спойлера */
    background-image: radial-gradient(rgba(0,0,0,0.2) 1px, transparent 0);
    background-size: 3px 3px;
    user-select: none;
}
body.dark-mode .tg-spoiler, body.synthwave-mode .tg-spoiler, body.oled-mode .tg-spoiler {
    background-color: rgba(255,255,255,0.2);
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 0);
}
.tg-spoiler.revealed {
    background-color: rgba(0,0,0,0.05);
    color: inherit;
    background-image: none;
    user-select: auto;
}
body.dark-mode .tg-spoiler.revealed, body.synthwave-mode .tg-spoiler.revealed, body.oled-mode .tg-spoiler.revealed {
    background-color: rgba(255,255,255,0.05);
}

/* 2. Telegram Code */
.tg-code {
    font-family: monospace;
    background-color: rgba(0,0,0,0.06);
    color: var(--chat-accent, #e74c3c);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.9em;
}
body.dark-mode .tg-code, body.synthwave-mode .tg-code, body.oled-mode .tg-code {
    background-color: rgba(255,255,255,0.1);
    color: #ff6b6b;
}

/* 3. Мобильный Тултип Реакций (Кто поставил) */
.reaction-users-tooltip {
    position: fixed;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: translate(-50%, -100%);
    margin-top: -8px;
    opacity: 0;
    animation: tooltipFadeIn 0.2s forwards;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.reaction-users-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}
@keyframes tooltipFadeIn {
    to { opacity: 1; margin-top: -4px; }
}


/* ======================================================= */
/* === ПЛАВАЮЩАЯ КНОПКА ВНИЗ И BUBBLE-АНИМАЦИЯ         === */
/* ======================================================= */

/* 1. Bubble-анимация для новых сообщений */
@keyframes bubbleAppear {
    0% { opacity: 0; transform: scale(0.8) translateY(15px); }
    50% { transform: scale(1.02) translateY(-2px); } /* Легкий пружинный эффект */
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.message-bubble-anim { /* По умолчанию вырастает из левого нижнего угла */
}
.message.sent.message-bubble-anim, 
.message.mine.message-bubble-anim { /* Свои сообщения вырастают из правого угла */
}

 

@keyframes popBadge {
    0% { transform: scale(0); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ======================================================= */
/* === АНИМАЦИЯ СООБЩЕНИЙ И СЧЕТЧИК НА ВАШЕЙ КНОПКЕ    === */
/* ======================================================= */

/* 1. Bubble-анимация для новых сообщений (оставляем как есть) */
@keyframes bubbleAppear {
    0% { opacity: 0; transform: scale(0.8) translateY(15px); }
    50% { transform: scale(1.02) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.message-bubble-anim {
    animation: bubbleAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: bottom left;
}
.message.sent.message-bubble-anim, 
.message.mine.message-bubble-anim {
    transform-origin: bottom right;
}

/* 2. Бейдж счетчика внутри ВАШЕЙ кнопки (#chatScrollToBottomBtn) */
#chatScrollToBottomBtn {
    position: absolute; /* Или relative, в зависимости от вашей верстки */
    overflow: visible !important; /* Важно, чтобы бейдж мог выходить за края кнопки */
}

#chatScrollToBottomBtn .unread-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: var(--chat-accent, #e74c3c); /* Красный цвет TG */
    color: white;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 10;
    display: none; /* Скрыт по умолчанию */
    animation: popBadge 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popBadge {
    0% { transform: scale(0); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


/* ======================================================= */
/* === РАЗДЕЛИТЕЛЬ "НЕПРОЧИТАННЫЕ СООБЩЕНИЯ" (SLACK/TG)=== */
/* ======================================================= */


@keyframes fadeInSeparator {
    to { opacity: 1; }
}


/* ======================================================= */
/* === ПРЕВЬЮ ССЫЛОК В ЧАТЕ (OG CARDS / LINK PREVIEW)  === */
/* ======================================================= */

.link-preview-card {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--container-bg-color) 40%, transparent);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent);
    text-decoration: none !important;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Плавное появление */
    animation: popInEdited 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.link-preview-card:hover {
    background: var(--input-hover-bg-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.link-preview-card:active {
    transform: scale(0.98);
}

.link-preview-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    justify-content: center;
}

.link-preview-site {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 3px;
    text-transform: lowercase;
}

.link-preview-title {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
    /* Обрезка 2 строки */
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.link-preview-desc {
    font-size: 0.85em;
    color: var(--secondary-text-color);
    /* Обрезка 2 строки */
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.link-preview-image {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--input-bg-color);
    border: 1px solid rgba(0,0,0,0.05);
}

body.dark-mode .link-preview-image,
body.synthwave-mode .link-preview-image,
body.oled-mode .link-preview-image {
    border-color: rgba(255,255,255,0.05);
}

/* === SKELETON LOADER для превью ссылок === */
.link-preview-skeleton {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--container-bg-color) 40%, transparent);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    overflow: hidden;
    animation: popInEdited 0.3s ease forwards;
}
.link-preview-skeleton .lps-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 6px;
    min-width: 0;
    justify-content: center;
}
.link-preview-skeleton .lps-line {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(150,150,150,0.12) 0%,
        rgba(150,150,150,0.25) 50%,
        rgba(150,150,150,0.12) 100%
    );
    background-size: 200% 100%;
    animation: lpsShimmer 1.4s ease-in-out infinite;
}
.link-preview-skeleton .lps-site { width: 30%; height: 8px; }
.link-preview-skeleton .lps-title { width: 85%; height: 14px; }
.link-preview-skeleton .lps-desc { width: 70%; height: 10px; }
.link-preview-skeleton .lps-image {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        rgba(150,150,150,0.12) 0%,
        rgba(150,150,150,0.25) 50%,
        rgba(150,150,150,0.12) 100%
    );
    background-size: 200% 100%;
    animation: lpsShimmer 1.4s ease-in-out infinite;
}
@keyframes lpsShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
body.dark-mode .link-preview-skeleton,
body.synthwave-mode .link-preview-skeleton,
body.oled-mode .link-preview-skeleton {
    background: rgba(30,30,30,0.4);
}


/* ================================================================== */
/* === ФИКС: УСТРАНЕНИЕ ПОДПРЫГИВАНИЯ СООБЩЕНИЙ ПРИ СКРОЛЛЕ (MOBILE) === */
/* ================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Отключаем сдвиг вверх при касании на тач-устройствах */
    .ai-message-container:hover .message-content,
    .message:hover .message-content,
    .file-share-content:hover,
    .question-link-content:hover {
        transform: translateZ(0) !important; 
        will-change: auto !important;
    }
    
    /* Сбрасываем hover-тени на дефолтные для светлой темы */
    .ai-message-container:hover .message-content,
    .message:hover .message-content {
        box-shadow: var(--neumorph-shadow-soft-sm) !important; 
    }

    /* Сбрасываем hover-тени на дефолтные для темных тем */
    body.dark-mode .ai-message-container:hover .message-content,
    body.dark-mode .message:hover .message-content,
    body.synthwave-mode .ai-message-container:hover .message-content,
    body.oled-mode .ai-message-container:hover .message-content {
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; 
    }

    /* Сохраняем "вдавленную" тень для собственных сообщений в темной теме */
    body.dark-mode .message.mine:hover .message-content,
    body.synthwave-mode .message.mine:hover .message-content {
        box-shadow: var(--neumorph-shadow-inset) !important;
    }
}


/* ================================================================== */
/* === FLOATING MARKDOWN TOOLBAR (APPLE GLASSMORPHISM)            === */
/* ================================================================== */

.input-wrapper {
    position: relative;
}

.markdown-toolbar {
    position: absolute;
    bottom: 100%; /* Всегда над полем ввода */
    left: 50%;
    transform: translate(-50%, 10px) scale(0.9);
    z-index: 1000;
    
    display: flex;
    gap: 4px;
    padding: 6px;
    margin-bottom: 12px;
    
    /* Эффект матового стекла */
    background: color-mix(in srgb, var(--container-bg-color) 85%, transparent);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(150, 150, 150, 0.2);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Активное состояние (когда текст выделен) */
.markdown-toolbar.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

/* Хвостик, указывающий на текст */
.markdown-toolbar::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: var(--container-bg-color) transparent transparent transparent;
}

/* Темная тема */
body.dark-mode .markdown-toolbar,
body.synthwave-mode .markdown-toolbar,
body.oled-mode .markdown-toolbar {
    background: rgba(30, 30, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
body.dark-mode .markdown-toolbar::after,
body.synthwave-mode .markdown-toolbar::after,
body.oled-mode .markdown-toolbar::after {
    border-top-color: rgba(30, 30, 30, 0.9);
}

/* Кнопки форматирования */
.md-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.md-btn:hover {
    background: var(--input-hover-bg-color);
    color: var(--text-color);
    transform: translateY(-2px);
}

.md-btn:active {
    transform: scale(0.9);
}

/* === Режим фокуса (Focus Mode) === */

/* --- Карточка «Фокус» в Игротеке: тот же размер, что и баннеры игр --- */
.fm-banner-card {
    background: linear-gradient(135deg, #1f2544 0%, #3b2a63 55%, #164e63 100%);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 8px 8px rgba(20, 16, 48, 0.4);
}
.fm-banner-card.fm-active {
    background: linear-gradient(135deg, #10331f 0%, #12463a 55%, #0f5132 100%);
    box-shadow: 0 8px 8px rgba(6, 46, 30, 0.45),
                0 0 0 1px rgba(34, 197, 94, 0.45) inset;
}

.fm-banner-content {
    /* Перебиваем .game-banner-content (width:90%; height:60%) —
       текст должен ужиматься, а не залезать под правую колонку */
    width: auto;
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    padding: 16px 8px 16px 18px;
}
.fm-banner-title {
    /* Только background-image: шорткат background сбросил бы background-clip:text,
       унаследованный от .game-title, и градиент залил бы весь блок вместо букв. */
    background-image: linear-gradient(110deg, #fff 10%, #a5f3fc 40%, #fff 60%, #ddd6fe 90%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.6em;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.fm-banner-card .game-banner-text { min-width: 0; }
.fm-banner-card .game-subtitle {
    /* Не больше двух строк, иначе карточка (140px) переполняется на узких экранах */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    font-size: 0.82em;
    line-height: 1.3;
}

/* Строка с текущим файлом вопросов */
.fm-banner-file {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75em;
    font-weight: 600;
}
.fm-banner-file i[data-lucide],
.fm-banner-file svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.75;
}
.fm-banner-file-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Режим включён, но файла нет — предупреждаем, что вопросов не будет */
.fm-banner-file.fm-file-missing {
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.16);
    color: #fde68a;
}

/* Правая колонка: тумблер + статус + вход в настройки */
.fm-banner-side {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 0 18px 0 4px;
}
.fm-banner-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
    flex-shrink: 0;
    cursor: pointer;
}
.fm-banner-switch input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.fm-banner-switch-slider {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.25s ease, border-color 0.25s ease;
}
.fm-banner-switch-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fm-banner-switch input:checked + .fm-banner-switch-slider {
    border-color: rgba(34, 197, 94, 0.6);
    background: var(--button-success-bg, #22c55e);
}
.fm-banner-switch input:checked + .fm-banner-switch-slider::before {
    transform: translateX(22px);
}
.fm-banner-switch input:focus-visible + .fm-banner-switch-slider {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.fm-banner-status {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.fm-banner-card.fm-active .fm-banner-status {
    color: #86efac;
}
.fm-banner-tune {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s;
}
.fm-banner-tune i[data-lucide],
.fm-banner-tune svg { width: 13px; height: 13px; flex-shrink: 0; }
.fm-banner-card:hover .fm-banner-tune { background: #fff; color: #1f2544; }

/* Фоновая иконка-мишень вместо картинки игры */
.fm-banner-glyph {
    position: absolute;
    top: 50%;
    right: -18px;
    z-index: 1;
    display: block;
    color: #fff;
    opacity: 0.07;
    transform: translateY(-50%);
    pointer-events: none;
}
.fm-banner-glyph i[data-lucide],
.fm-banner-glyph svg {
    display: block;
    width: 150px !important;
    height: 150px !important;
    stroke-width: 1.5;
}

@media (max-width: 400px) {
    .fm-banner-content { padding: 14px 4px 14px 14px; }
    .fm-banner-title { font-size: 1.35em; letter-spacing: 1px; }
    .fm-banner-card .game-subtitle { font-size: 0.75em; }
    .fm-banner-side { padding: 0 12px 0 2px; gap: 6px; }
    /* Подпись «Настроить» остаётся: голая иконка читается как случайная точка */
    .fm-banner-tune { padding: 4px 8px; gap: 4px; font-size: 0.65em; }
    .fm-banner-tune i[data-lucide],
    .fm-banner-tune svg { width: 12px; height: 12px; }
    .fm-banner-switch { width: 46px; height: 27px; }
    .fm-banner-switch-slider::before { width: 19px; height: 19px; }
    .fm-banner-switch input:checked + .fm-banner-switch-slider::before { transform: translateX(19px); }
}

.fm-settings-form { display: flex; flex-direction: column; gap: 16px; }
.fm-row { display: flex; flex-direction: column; gap: 6px; }
.fm-row-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fm-label { font-size: 0.9em; font-weight: 600; color: var(--text-color); }
.fm-hint { font-size: 0.8em; color: var(--secondary-text-color); margin-top: 2px; }
.fm-file-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border: 1px dashed var(--border-color);
    border-radius: 10px; background: var(--message-bg, transparent);
    font-size: 0.9em;
    width: 100%; color: var(--text-color); cursor: pointer;
    font-family: inherit; text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.fm-file-chip:hover { border-style: solid; border-color: var(--button-primary-bg); }
.fm-file-chip .fm-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-recent-label { font-size: 0.8em; font-weight: 600; color: var(--secondary-text-color); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.fm-recent-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; padding-right: 4px; }
.fm-recent-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px;
    background: transparent; color: var(--text-color); cursor: pointer;
    font-family: inherit; font-size: 0.88em; text-align: left; width: 100%;
    transition: background 0.15s, border-color 0.15s;
}
.fm-recent-item:hover:not(:disabled) { background: var(--hover-bg, rgba(127,127,127,0.08)); border-color: var(--button-primary-bg); }
.fm-recent-item:disabled { opacity: 0.5; cursor: wait; }
.fm-recent-item.fm-recent-active { border-color: var(--button-success-bg, #22c55e); background: rgba(34,197,94,0.08); }
.fm-recent-item .fm-recent-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-recent-empty { font-size: 0.85em; color: var(--secondary-text-color); padding: 6px 2px; font-style: italic; }
.fm-pick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-pick-row .fm-secondary-btn { flex: 1 1 140px; justify-content: center; }
.fm-chat-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.fm-chat-group-title { font-size: 0.75em; font-weight: 700; color: var(--secondary-text-color); text-transform: uppercase; letter-spacing: 0.6px; margin: 10px 2px 2px; }
.fm-chat-group-title:first-child { margin-top: 2px; }
.fm-chat-qcount { flex-shrink: 0; font-size: 0.8em; color: var(--secondary-text-color); padding: 2px 8px; border-radius: 10px; background: var(--hover-bg, rgba(127,127,127,0.1)); }
.fm-chat-folder { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.fm-chat-folder-summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; font-size: 0.88em; color: var(--text-color); user-select: none; }
.fm-chat-folder-summary::-webkit-details-marker { display: none; }
.fm-chat-folder-summary:hover { background: var(--hover-bg, rgba(127,127,127,0.08)); }
.fm-chat-folder-chev { transition: transform 0.2s; opacity: 0.6; }
.fm-chat-folder[open] > .fm-chat-folder-summary .fm-chat-folder-chev { transform: rotate(180deg); }
.fm-chat-folder-body { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 8px 24px; border-top: 1px solid var(--border-color); }
.fm-range { display: flex; align-items: center; gap: 10px; }
.fm-range input[type="range"] { flex: 1; }
.fm-range-value { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.fm-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.fm-switch input { opacity: 0; width: 0; height: 0; }
.fm-switch-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--border-color, #ccc); border-radius: 999px;
    transition: background 0.2s;
}
.fm-switch-slider::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.fm-switch input:checked + .fm-switch-slider { background: var(--button-success-bg, #22c55e); }
.fm-switch input:checked + .fm-switch-slider::before { transform: translateX(20px); }

.fm-primary-btn {
    padding: 11px 18px; border: none; border-radius: 10px; cursor: pointer;
    background: var(--button-success-bg, #22c55e); color: #fff;
    font-weight: 600; font-size: 0.95em;
}
.fm-secondary-btn {
    padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 10px;
    cursor: pointer; background: transparent; color: var(--text-color);
    font-size: 0.9em; display: inline-flex; align-items: center; gap: 6px;
}
/* Кнопки-«столбиком» (онбординг) центрируем, в .fm-pick-row это делает своё правило */
.fm-settings-form > .fm-secondary-btn { justify-content: center; }

/* --- Popup overlay (question during game) --- */
#focusModePopupOverlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(10, 14, 22, 0.72);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; animation: fm-fade-in 0.2s ease;
}
@keyframes fm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.fm-popup-card {
    position: relative;
    background: var(--card-bg-color, var(--bg-color, #fff));
    color: var(--text-color, #1a1a1a);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    border-radius: 20px; width: min(540px, 100%);
    max-height: 90vh; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.15);
    animation: fm-slide-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fm-popup-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
    opacity: 0.9;
}
@keyframes fm-slide-up { from { transform: translateY(24px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.fm-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 10px; gap: 12px;
}
.fm-popup-title {
    font-size: 1.1em; font-weight: 700; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 8px;
}
.fm-popup-title::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
    animation: fm-pulse 1.8s ease-in-out infinite;
}
@keyframes fm-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.85; } }
.fm-popup-progress {
    font-size: 0.82em; font-weight: 600;
    color: var(--secondary-text-color, #6b7280);
    padding: 4px 10px; border-radius: 999px;
    background: var(--hover-bg, rgba(127,127,127,0.1));
    letter-spacing: 0.2px;
}
.fm-popup-question {
    font-size: 1.02em; line-height: 1.5;
    padding: 6px 22px 16px;
    white-space: pre-wrap; word-break: break-word;
    color: var(--text-color, #1a1a1a);
    font-weight: 500;
}
.fm-popup-options {
    display: flex; flex-direction: column; gap: 8px;
    padding: 0 22px; overflow-y: auto;
}
.fm-popup-option {
    padding: 13px 16px;
    border: 1.5px solid var(--border-color, rgba(0,0,0,0.12));
    border-radius: 12px;
    background: var(--input-bg-color, var(--bg-color, #f8fafc));
    color: var(--text-color, #1a1a1a);
    cursor: pointer; font-size: 0.95em; font-weight: 500;
    text-align: left; line-height: 1.4;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.fm-popup-option:hover:not(:disabled) {
    border-color: var(--button-primary-bg, #3b82f6);
    background: var(--hover-bg, rgba(59,130,246,0.06));
    box-shadow: 0 2px 8px rgba(59,130,246,0.08);
}
.fm-popup-option:active:not(:disabled) { transform: scale(0.98); }
.fm-popup-option:disabled { cursor: default; opacity: 0.85; }
.fm-popup-option.fm-correct {
    border-color: #22c55e;
    background: rgba(34,197,94,0.12);
    color: var(--text-color, #1a1a1a);
    box-shadow: 0 0 0 1px #22c55e inset;
}
.fm-popup-option.fm-wrong {
    border-color: #ef4444;
    background: rgba(239,68,68,0.12);
    color: var(--text-color, #1a1a1a);
    box-shadow: 0 0 0 1px #ef4444 inset;
}
.fm-popup-feedback {
    margin: 16px 22px 0; font-size: 0.95em; font-weight: 600;
    text-align: center; padding: 8px; border-radius: 10px;
    transition: all 0.2s;
}
.fm-popup-feedback:empty { display: none; }
.fm-popup-feedback.fm-ok { color: #16a34a; background: rgba(34,197,94,0.1); }
.fm-popup-feedback.fm-bad { color: #dc2626; background: rgba(239,68,68,0.1); }
.fm-popup-footer {
    margin-top: 16px; padding: 0 22px 20px;
    display: flex; justify-content: flex-end;
}
.fm-popup-footer .fm-primary-btn {
    min-width: 140px;
    box-shadow: 0 4px 14px rgba(34,197,94,0.3);
    transition: transform 0.1s, box-shadow 0.15s;
}
.fm-popup-footer .fm-primary-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34,197,94,0.4); }
.fm-popup-footer .fm-primary-btn:active { transform: translateY(0); }

.md-btn i, .md-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2px;
}


/* ================================================================== */
/* === ANTI-MISCLICK UX: ПРИВАТНЫЕ ЧАТЫ (ВЫДВИЖНЫЕ КНОПКИ)        === */
/* ================================================================== */

.chat-item-action-group {
    display: flex;
    align-items: center;
    margin-left: auto; /* Выталкиваем вправо */
    flex-shrink: 0;
}

.chat-item-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.4; /* На телефоне кнопка слегка видна всегда */
}

/* На ПК показываем только при наведении на чат */
@media (hover: hover) {
    .chat-item-more-btn {
        opacity: 0;
    }
    .channel-item:hover .chat-item-more-btn {
        opacity: 1;
    }
}

.chat-item-more-btn:hover,
.chat-item-action-group.show-actions .chat-item-more-btn {
    background-color: var(--input-hover-bg-color);
    color: var(--text-color);
    opacity: 1;
}

.chat-item-more-btn i {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Скрытый контейнер кнопок (выезжает из-под триточия) */
.chat-item-actions-revealed {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s ease, margin-left 0.2s ease;
}


/* Специфичные ховер-цвета для кнопок меню каналов */
.ch-pin-btn:hover {
    background-color: rgba(52, 152, 219, 0.15);
    color: #3498db;
}
.ch-mute-btn:hover {
    background-color: rgba(149, 165, 166, 0.2);
    color: var(--text-color);
}
.ch-notify-btn:hover {
    background-color: rgba(241, 196, 15, 0.18);
    color: #f1c40f;
}
.ch-notify-btn.is-on {
    color: #f1c40f;
}
.ch-settings-btn:hover {
    background-color: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
}

/* Поповер настроек уведомлений канала */
.ch-notify-popover {
    background: var(--container-bg-color) !important; /* ФИКС: переменной main-bg-color не существует, из-за чего фон был белым в темной теме */
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); /* Усилил тень для объема */
    padding: 6px;
    min-width: 220px;
    max-width: 280px;
    font-size: 0.92em;
    animation: chNotifPopIn 0.16s ease-out;
    z-index: 35000 !important; /* Железобетонная гарантия, что меню будет выше модальных окон */
}
@keyframes chNotifPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ch-notify-popover-title {
    padding: 8px 10px 6px;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-text-color);
    opacity: 0.8;
}
.ch-notify-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}
.ch-notify-option:hover {
    background-color: var(--input-hover-bg-color, rgba(0,0,0,0.05));
}
.ch-notify-option.is-active {
    color: #f1c40f;
    background-color: rgba(241, 196, 15, 0.1);
}
.ch-notify-option i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.ch-notify-option span {
    flex: 1;
}
.ch-notify-option .ch-notify-check {
    color: #f1c40f;
    margin-left: 4px;
}

/* Индикатор заглушения слева от счётчика */
.channel-mute-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text-color);
    opacity: 0.6;
    margin-right: 4px;
    flex-shrink: 0;
}
.channel-mute-indicator i {
    width: 14px;
    height: 14px;
}
.channel-item.active .channel-mute-indicator {
    color: var(--button-primary-text);
    opacity: 0.8;
}

/* Индикатор закреплённого канала (маленький pin перед счётчиком) */
.channel-pin-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3498db;
    opacity: 0.85;
    margin-right: 4px;
    flex-shrink: 0;
    transform: rotate(45deg);
}
.channel-pin-indicator i {
    width: 13px;
    height: 13px;
}
.channel-item.active .channel-pin-indicator {
    color: var(--button-primary-text);
    opacity: 1;
}

/* Индикатор подписки на уведомления канала */
.channel-notif-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #3498db);
    opacity: 0.9;
    margin-right: 4px;
    flex-shrink: 0;
}
.channel-notif-indicator i {
    width: 14px;
    height: 14px;
}
.channel-item.active .channel-notif-indicator {
    color: var(--button-primary-text);
    opacity: 1;
}

/* Сами кнопки действий (Закреп / Корзина) */
.pc-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    border-radius: 8px;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pc-pin-btn:hover {
    background-color: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.pc-delete-btn:hover {
    background-color: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.pc-action-btn i {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* Адаптация цвета активного канала */
.channel-item.active .chat-item-more-btn,
.channel-item.active .pc-action-btn {
    background-color: rgba(0,0,0,0.15);
    color: var(--button-primary-text);
}
.channel-item.active .pc-pin-btn:hover,
.channel-item.active .pc-delete-btn:hover {
    background-color: rgba(255,255,255,0.25);
    color: #fff;
}


/* ======================================================= */
/* === BREADCRUMB DROPDOWN (LMS NAVIGATION)            === */
/* ======================================================= */
.lms-smart-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.75em;
    color: var(--secondary-text-color);
    padding: 5px 5px 5px !important;
}
.lms-smart-breadcrumb .breadcrumb-item {
    color: var(--secondary-text-color);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.lms-smart-breadcrumb .breadcrumb-item.clickable {
    cursor: pointer;
    padding: 4px 10px;
    background: rgba(150,150,150,0.1);
    border-radius: 8px;
    font-weight: 600;
}
.lms-smart-breadcrumb .breadcrumb-item.clickable:hover {
    color: var(--text-color);
    background: rgba(150,150,150,0.2);
}
.lms-smart-breadcrumb .breadcrumb-separator {
    display: flex;
    align-items: center;
}
.lms-smart-breadcrumb .breadcrumb-separator i {
    width: 14px;
    height: 14px;
    opacity: 0.5;
}

/* Окно выпадающего списка */
.breadcrumb-dropdown-menu {
    position: fixed;
    z-index: 100000;
    background: color-mix(in srgb, var(--container-bg-color) 95%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--neumorph-shadow-soft);
    padding: 10px;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    animation: fadeIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Элементы внутри */
.bd-folder-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
    border-radius: 10px;
    transition: background 0.2s;
    user-select: none;
}
.bd-folder-header:hover {
    background: var(--input-hover-bg-color);
}
.bd-folder-header span {
    flex-grow: 1;
    margin: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bd-folder-header i { 
    width: 18px; 
    height: 18px; 
    color: var(--secondary-text-color); 
}
.bd-folder.open > .bd-folder-header .bd-chevron { 
    transform: rotate(180deg); 
}

/* Вложенность папок */
.bd-folder-content {
    padding-left: 15px;
    margin-left: 9px;
    border-left: 1px solid var(--border-color);
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Урок в меню */
.bd-lesson {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--text-color);
    border-radius: 10px;
    font-size: 0.95em;
    transition: background 0.2s;
}
.bd-lesson:hover {
    background: var(--input-hover-bg-color);
    color: var(--accent);
}
.bd-lesson i {
    width: 18px; height: 18px;
    margin-right: 10px;
    color: var(--button-success-bg);
}
.bd-lesson span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Темная тема для меню */
body.dark-mode .breadcrumb-dropdown-menu,
body.synthwave-mode .breadcrumb-dropdown-menu,
body.oled-mode .breadcrumb-dropdown-menu {
    background: color-mix(in srgb, #2d2d2d 85%, transparent);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    border-color: rgba(255,255,255,0.1);
}


/* ======================================================= */
/* === PREMIUM UX: SMART FROSTED GLASS HEADER          === */
/* ======================================================= */
.header-controls {
    position: sticky;
    top: 0px;
    z-index: 100;
    padding: 5px 5px !important;
    margin: 0px 0px 5px 0px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 0px 0px 16px 16px;
}

.header-controls.scrolled-glass {
    padding: 5px;
    background-color: color-mix(in srgb, var(--container-bg-color) 10%, transparent);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(4px) saturate(180%);
    box-shadow: var(--neumorph-shadow-soft);
    border-bottom: 1px solid var(--border-color);
}

/* ДОБАВИТЬ ЭТОТ БЛОК: Затухание шапки при скролле вниз */
.header-controls.scrolled-fade-out {
    opacity: 0.05 !important; /* Делаем полупрозрачной */
    pointer-events: none !important; /* Разрешаем кликать СКВОЗЬ шапку по тексту под ней! */
}

 

/* ================================================================== */
/* === БРОНЕБОЙНЫЙ ФИКС АНИМАЦИЙ ОТВЕТОВ (ФИНАЛ)                  === */
/* ================================================================== */

/* 1. ЖЕЛЕЗОБЕТОННЫЙ БЛЮР ДЛЯ ШАПКИ ВО ВСЕХ РЕЖИМАХ */
body.low-power .header-controls.scrolled-glass,
body .header-controls.scrolled-glass {
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    background-color: color-mix(in srgb, var(--container-bg-color) 40%, transparent) !important;
}

/* 2. ЗАЩИТА АНИМАЦИЙ ОТ РЕЖИМА ЭНЕРГОСБЕРЕЖЕНИЯ (ИСПРАВЛЕНИЕ БАГА "СЛИШКОМ БЫСТРО") */
/* Жестко прописываем 0.4 секунды, чтобы перебить глобальное глушение анимаций на телефоне */
@media (prefers-reduced-motion: reduce) {
    .error-shake {
        animation-duration: 0.4s !important;
        animation-iteration-count: 1 !important;
    }
    }

/* 3. CSS АНИМАЦИИ (3D Ускорение внутри кадров для мобильных GPU) */
/* ENTERPRISE UX: Decaying Physical Shake (Затухающая 3D-отдача с вращением) */
@keyframes forceMobileShake {
    0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
    20% { transform: translate3d(-8px, 0, 0) rotateZ(-1.5deg); }
    40% { transform: translate3d(6px, 0, 0) rotateZ(1deg); }
    60% { transform: translate3d(-4px, 0, 0) rotateZ(-0.5deg); }
    80% { transform: translate3d(2px, 0, 0) rotateZ(0.2deg); }
}

@keyframes forceMobileBounce {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, 0, 0) scale(1.05); }
}

/* 4. КЛАССЫ АНИМАЦИЙ (Изоляция от конфликтов с темами) */
.error-shake {
    animation: forceMobileShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
    transition: none !important; /* Убиваем конфликт с transition при смене цвета */
    border-color: var(--button-danger-bg, #e74c3c) !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2) !important;
    z-index: 10 !important;
    pointer-events: none !important; /* Блокируем клики во время тряски */
}


/* ======================================================= */
/* === МОБИЛЬНАЯ НИЖНЯЯ ПАНЕЛЬ НАВИГАЦИИ (BOTTOM BAR)  === */
/* ======================================================= */

.mobile-bottom-nav {
    display: none; /* Скрыта на ПК */
}

@media (max-width: 768px) {
    /* Отображаем панель только на мобильных устройствах */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: calc(75px + env(safe-area-inset-bottom));
        /* Светлая тема: белёсая стеклянная подложка с явным контрастом к бежевому фону страницы.
            Тёмные темы переопределяют ниже. Fallback для совсем старых движков — по @supports. */
        background-color: rgba(255, 255, 255, 0.45);
        -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
        backdrop-filter: blur(15px) saturate(180%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.6);
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 9000;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 17%), 0 -10px 25px rgb(0 0 0 / 35%);
        border-radius: 24px 24px 0 0;
        transition: background-color 0.3s ease;
    }
    /* Fallback: если backdrop-filter не поддерживается ни в одной форме —
       даём непрозрачный фон темы, чтобы бар не был сквозным. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .mobile-bottom-nav {
            background-color: var(--container-bg-color) !important;
        }
    }

    body.dark-mode .mobile-bottom-nav,
    body.synthwave-mode .mobile-bottom-nav,
    body.oled-mode .mobile-bottom-nav {
        background-color: rgba(15, 18, 30, 0.45);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 -10px 30px rgba(0, 0, 0, 0.4);
    }

    .bottom-nav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-color);
        text-decoration: none;
        /* Ширина — по содержимому, без роста. Раньше стояло flex-grow: 1, и
           свободное место делилось поровну: «Чат» и «ИИ» раздувались до своих
           сорока пикселей, а «Инструментам» и «Настройкам» не хватало, и их
           подписи вылезали за вкладку — на 393 px просвет между ними был
           ровно нулевой. Остаток теперь распределяет панель промежутками.
           Нижний предел обязателен: «ИИ» и «Чат» выходили по 28 px, и промах
           по узкой вкладке попадал в соседнюю. */
        flex: 0 1 auto;
        min-width: 34px;
        height: 46px;
        /* Замер показал: на вкладку высотой 46 px значок забирает 22, зазор
           4, отступы 10 — подписи оставалось ровно 10 при собственной высоте
           строки 13, и нижние хвосты букв («р», «у») срезались по всей
           панели. Четыре пикселя отданы подписи: высота вкладки прежняя,
           панель не поехала. */
        padding: 4px 2px;
        margin: 2px 0;
        gap: 2px;
        border-radius: 12px;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
    }


    .bottom-nav-item i,
    .bottom-nav-item svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 2px;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    /* Кнопка «Назад» в нижней панели.
       Подписи у неё нет: стрелка понятна без слов, а место в панели уже
       поделено между шестью разделами — седьмая подпись выдавила бы
       остальные. Поэтому она уже прочих и обведена рамкой, чтобы читалась
       как действие, а не как ещё одна вкладка. */
    .bottom-nav-item.nav-back {
        flex: 0 0 auto;
        min-width: 0;
        width: 42px;
        padding: 5px 0;
        /* Утоплена в панель, а не наклеена на неё: рамка с заливкой поля
           ввода выпадала из стекла и читалась чужой плашкой. Ниша тем и
           хороша, что кнопка остаётся частью панели. */
        border: 0;
        background: rgba(0, 0, 0, 0.18);
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.10);
        /* Верхний левый угол повторяет угол самой панели: кнопка стоит в
           нём, и прежний общий радиус ломал её изгиб. Прочие углы острые —
           так круглый угол читается перекличкой с панелью, а не случайной
           разницей, и ниша не спорит с круглой площадкой активной вкладки */
        border-radius: 24px 4px 4px 4px;
    }

    .bottom-nav-item.nav-back:active {
        background: rgba(0, 0, 0, 0.26);
    }

    /* Родная кнопка возврата раздела на телефоне уходит: её работу делает
       кнопка в панели, а две кнопки «Назад» на одном экране — это не
       стандартизация, а дубль. На широком экране обе остаются: там нижней
       панели нет. */
    .back-moved-to-nav {
        display: none !important;
    }

    /* Пока «Назад» в панели, соседям тесно: ужимаем их, а не режем подписи. */
    .mobile-bottom-nav.has-back .bottom-nav-item {
        min-width: 32px;
        padding-inline: 1px;
        margin-inline: 0;
    }

    .mobile-bottom-nav.has-back .bn-label {
        font-size: clamp(8.5px, 2.35vw, 10.5px);
        letter-spacing: -0.2px;
    }

    .mobile-bottom-nav.has-back .bottom-nav-item.nav-back {
        width: 36px;
        min-width: 36px;
    }

    .bottom-nav-item .bn-label {
        /* Кегль плывёт по ширине экрана: даже на 320px все 7 подписей
           помещаются целиком, без обрезки и без горизонтального скролла.
           Если человек увеличил размер текста в настройках браузера, наши
           пиксели приезжают крупнее — тогда кегль подбирает
           подогнатьПодписиПанели() и кладёт его сюда переменной. */
        font-size: var(--bn-кегль, clamp(10.5px, 2.9vw, 11.5px));
        line-height: 1.15;
        font-weight: 600;
        letter-spacing: 0.1px;
        white-space: nowrap;
        /* Страховка на самый узкий экран: подпись скорее сократится
           многоточием, чем налезет на соседнюю вкладку */
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.85;
    }
    /* У выбранной вкладки подписи нет вовсе: где ты находишься, говорит
       площадка под значком, а освободившееся место достаётся соседям —
       на семи вкладках их подписи и так подбираются по кеглю */
    .bottom-nav-item.active .bn-label {
        display: none;
    }

    /* Цвет подписи и иконки задаём явно во всех состояниях.
       На тач-устройствах :hover залипает после тапа, а общий сброс
       для (hover: none) обнулял color — подпись выцветала до невидимой. */
    .bottom-nav-item,
    .bottom-nav-item:hover,
    .bottom-nav-item:focus,
    .bottom-nav-item:active,
    .bottom-nav-item .bn-label,
    .bottom-nav-item:hover .bn-label {
        color: var(--text-color);
    }

    .bottom-nav-item i,
    .bottom-nav-item svg,
    .bottom-nav-item:hover i,
    .bottom-nav-item:hover svg {
        /* Невыбранные значки притушены до вторичного текста. У выбранного
           нет ни площадки, ни рамки — он отличается цветом и размером, а
           такая разница видна только когда соседи тише: на светлой теме
           цвет темы почти совпадает с цветом текста, и без этого выбранная
           вкладка терялась бы среди прочих. */
        color: var(--secondary-text-color);
        stroke: currentColor;
    }

    /* Анимация при нажатии/выборе */
    .bottom-nav-item:active {
        transform: scale(0.9);
    }

    /* Выбранную вкладку метим цветом и точкой, а не подложкой. Площадка
       под значком была светлой плёнкой поверх светлой панели: на обоях
       её край почти совпадал с панелью, и вкладка читалась пятном, а не
       выбором. Теперь панель остаётся чистым стеклом — на ней ничего не
       наклеено, а выбранный раздел говорит о себе цветом темы, размером
       значка и точкой под ним. */
    .bottom-nav-item.active {
        color: var(--accent-color);
        box-shadow: none;
    }

    .bottom-nav-item.active::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 46px;
        height: 40px;
        margin: -20px 0 0 -23px;
        /* Тот же треугольник, что у кнопки «Наверх»: маска берётся из
           одной переменной, и форма в двух местах приложения не разойдётся.
           Углы срезаны маской, а не clip-path — у того они выходят иголками. */
        -webkit-mask-image: var(--треугольник);
        mask-image: var(--треугольник);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        /* Вершиной вниз: рядом с кнопкой «Наверх» одинаково направленные
           треугольники читались повтором, а перевёрнутый держит перекличку
           формой и при этом не спорит с ней.
           Вдавленность рисуют две вещи: затенение внутри маски, густое у
           широкой стороны, и светлая грань по нижнему краю — её даёт
           drop-shadow, который повторяет форму, а не прямоугольник
           элемента. Без грани ниша читается пятном.
           Направления заданы «наоборот» намеренно: поворот переворачивает
           и заливку, и тень, поэтому до поворота они смотрят в другую
           сторону, а после — куда надо. */
        transform: rotate(180deg);
        background: linear-gradient(to top,
                    rgba(0, 0, 0, 0.38) 0%,
                    rgba(0, 0, 0, 0.16) 45%,
                    rgba(0, 0, 0, 0.03) 100%);
        filter: drop-shadow(0 -1.5px 0 rgba(255, 255, 255, 0.7));
        pointer-events: none;
    }

    /* На тёмных темах одной тенью углубление не покажешь: чёрное на
       тёмном не читается — снимок панели показал ровное пятно вместо
       ниши. Свет уходит внутрь: низ ниши подсвечен изнутри, будто туда
       заглядывает экран, а вершина остаётся глухой. Внешняя грань под
       основанием тоже ярче — она отделяет нишу от панели. */
    body.dark-mode .bottom-nav-item.active::before,
    body.synthwave-mode .bottom-nav-item.active::before,
    body.oled-mode .bottom-nav-item.active::before {
        background: linear-gradient(to top,
                    rgba(0, 0, 0, 0.75) 0%,
                    rgba(0, 0, 0, 0.34) 42%,
                    rgba(255, 255, 255, 0.05) 76%,
                    rgba(255, 255, 255, 0.20) 100%);
        filter: drop-shadow(0 -1.5px 0 rgba(255, 255, 255, 0.38));
    }

    /* OLED: фон под панелью чёрный, затенение внутри маски пропадает
       вовсе — там всю работу делает свет, поэтому его больше */
    body.oled-mode .bottom-nav-item.active::before {
        background: linear-gradient(to top,
                    rgba(0, 0, 0, 0.88) 0%,
                    rgba(0, 0, 0, 0.45) 42%,
                    rgba(255, 255, 255, 0.07) 76%,
                    rgba(255, 255, 255, 0.26) 100%);
        filter: drop-shadow(0 -1.5px 0 rgba(255, 255, 255, 0.5));
    }

    /* Значок и подпись поднимаем над площадкой: иначе она закрывает их,
       и вкладка выглядит пустой плиткой */
    .bottom-nav-item.active i,
    .bottom-nav-item.active svg,
    .bottom-nav-item.active .bn-label {
        position: relative;
        z-index: 1;
    }


    /* Значок сидит в нише, поэтому размером с соседями не спорит: крупнее
       его делать некуда — у вершины треугольник узкий, и лишние пиксели
       вылезали бы за грань. Отличают его цвет темы и толщина обводки.
       Сдвиг вниз обязателен: по центру вкладки значок упирается в вершину,
       а ниже треугольник шире и значок стоит в нём ровно. */
    .bottom-nav-item.active i,
    .bottom-nav-item.active svg {
        stroke-width: 2.3px;
        color: var(--accent-color);
        /* Вершина теперь внизу, и широкая часть ниши — сверху: значок
           поднимается туда, где треугольнику есть чем его окружить */
        transform: translateY(-3px);
    }


/* ================================================================== */
    /* === MICRO-INTERACTIONS: УМНЫЕ АНИМАЦИИ BOTTOM BAR (ПО СМЫСЛУ)  === */
    /* ================================================================== */

    /* 1. ЧАТ (Пузырь) */
    @keyframes bubblePop {
        0% { transform: translateY(0) scale(0.6) rotate(-15deg); }
        50% { transform: translateY(-4px) scale(1.15) rotate(8deg); }
        75% { transform: translateY(-1px) scale(0.95) rotate(-3deg); }
        100% { transform: translateY(-2px) scale(1) rotate(0deg); }
    }
    .bottom-nav-item.is-animating [data-lucide="message-circle"],
    .bottom-nav-item.is-animating [data-icon="message-circle"] {
        transform-origin: bottom left;
        animation: bubblePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* 2. УЧЁБА (Шапка выпускника) */
    @keyframes tossCap {
        0% { transform: translateY(0) rotate(0deg); }
        40% { transform: translateY(-10px) rotate(12deg); }
        70% { transform: translateY(1px) rotate(-4deg); }
        100% { transform: translateY(-2px) rotate(0deg); }
    }
    .bottom-nav-item.is-animating [data-lucide="graduation-cap"],
    .bottom-nav-item.is-animating [data-icon="graduation-cap"] {
        transform-origin: center bottom;
        animation: tossCap 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    /* 3. ИИ (Искры/Звезды) */
    @keyframes magicSparkles {
        0% { transform: translateY(0) scale(0.3) rotate(-90deg); opacity: 0.5; }
        60% { transform: translateY(-4px) scale(1.2) rotate(20deg); filter: drop-shadow(0 0 6px var(--accent)); opacity: 1; }
        100% { transform: translateY(-2px) scale(1) rotate(0deg); filter: drop-shadow(0 0 2px var(--accent)); }
    }
    .bottom-nav-item.is-animating [data-lucide="sparkles"],
    .bottom-nav-item.is-animating [data-icon="sparkles"] {
        transform-origin: center center;
        animation: magicSparkles 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    /* 4. ТРЕНИРОВКА (Гантель) */
    @keyframes pumpIron {
        0% { transform: translateY(0) rotate(0deg); }
        25% { transform: translateY(-4px) rotate(-25deg); }
        50% { transform: translateY(-1px) rotate(0deg); }
        75% { transform: translateY(-4px) rotate(-25deg); }
        100% { transform: translateY(-2px) rotate(0deg); }
    }
    .bottom-nav-item.is-animating [data-lucide="dumbbell"],
    .bottom-nav-item.is-animating [data-icon="dumbbell"] {
        transform-origin: bottom right;
        animation: pumpIron 0.7s ease-in-out forwards;
    }

    /* 5. ИГРЫ (Геймпад) */
    @keyframes gamingVibe {
        0% { transform: translateY(0) rotate(0deg); }
        20% { transform: translateY(-4px) rotate(-10deg); }
        40% { transform: translateY(-2px) rotate(10deg); }
        60% { transform: translateY(-3px) rotate(-10deg); }
        80% { transform: translateY(-1px) rotate(5deg); }
        100% { transform: translateY(-2px) rotate(0deg); }
    }
    .bottom-nav-item.is-animating [data-lucide="gamepad-2"],
    .bottom-nav-item.is-animating [data-icon="gamepad-2"] {
        transform-origin: center center;
        animation: gamingVibe 0.5s linear forwards;
    }

    /* 6. ИНСТРУМЕНТЫ (Чемодан) */
    @keyframes dropToolbox {
        0% { transform: translateY(-15px) scale(1.1); }
        40% { transform: translateY(2px) scaleY(0.8) scaleX(1.1); }
        70% { transform: translateY(-4px) scaleY(1.05) scaleX(0.95); }
        100% { transform: translateY(-2px) scale(1); }
    }
    .bottom-nav-item.is-animating [data-lucide="briefcase"],
    .bottom-nav-item.is-animating [data-icon="briefcase"] {
        transform-origin: bottom center;
        animation: dropToolbox 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* 7. НАСТРОЙКИ (Шестеренка) */
    @keyframes spinGear {
        0% { transform: translateY(0) rotate(0deg); }
        70% { transform: translateY(-3px) rotate(210deg); }
        100% { transform: translateY(-2px) rotate(180deg); }
    }
    .bottom-nav-item.is-animating [data-lucide="settings"],
    .bottom-nav-item.is-animating [data-icon="settings"] {
        transform-origin: center center;
        animation: spinGear 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    /* 8. ОБНОВЛЕНИЕ (Облако) */
    @keyframes downloadBump {
        0% { transform: translateY(0); }
        30% { transform: translateY(-6px); }
        60% { transform: translateY(3px) scaleY(0.8); }
        100% { transform: translateY(-2px) scale(1); }
    }
    .bottom-nav-item.is-animating [data-lucide="download-cloud"],
    .bottom-nav-item.is-animating [data-icon="download-cloud"] {
        transform-origin: bottom center;
        animation: downloadBump 0.5s ease-in-out forwards;
    }

    /* ================================================================== */
    /* === MICRO-INTERACTIONS: АНИМАЦИИ ИКОНОК В ТАБАХ ЧАТА           === */
    /* ================================================================== */

    @keyframes drawLucideIcon {
        to { stroke-dashoffset: 0; }
    }

    /* 1. КАНАЛЫ (Хэш/Решетка) */
    .sidebar-tab-btn.is-animating [data-lucide="hash"] line {
        stroke-dasharray: 24;
        stroke-dashoffset: 24;
        animation: drawLucideIcon 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    .sidebar-tab-btn.is-animating [data-lucide="hash"] line:nth-of-type(1) { animation-delay: 0.0s; }
    .sidebar-tab-btn.is-animating [data-lucide="hash"] line:nth-of-type(2) { animation-delay: 0.1s; }
    .sidebar-tab-btn.is-animating [data-lucide="hash"] line:nth-of-type(3) { animation-delay: 0.2s; }
    .sidebar-tab-btn.is-animating [data-lucide="hash"] line:nth-of-type(4) { animation-delay: 0.3s; }

    /* 2. ЛИЧНЫЕ СООБЩЕНИЯ (Самолетик) */
    @keyframes flyPlaneIn {
        0% { transform: translate(-5px, 5px) scale(0.8); opacity: 0; }
        50% { transform: translate(1px, -1px) scale(1.1); }
        100% { transform: translate(0, 0) scale(1); opacity: 1; }
    }
    .sidebar-tab-btn.is-animating [data-lucide="send"] {
        animation: flyPlaneIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .sidebar-tab-btn.is-animating [data-lucide="send"] path {
        stroke-dasharray: 80;
        stroke-dashoffset: 80;
        animation: drawLucideIcon 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    /* Базовые физические анимации движения для человечков */
    @keyframes popUpPerson {
        0% { transform: translateY(6px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }
    @keyframes slideOutRightPerson {
        0% { transform: translateX(-8px); opacity: 0; }
        100% { transform: translateX(0); opacity: 1; }
    }
    @keyframes drawCheckmarkAnim {
        0% { stroke-dashoffset: 30; opacity: 1; }
        100% { stroke-dashoffset: 0; opacity: 1; }
    }

    /* 3. ОНЛАЙН (Пользователь с галочкой) */
    .sidebar-tab-btn.is-animating [data-lucide="user-check"] path:nth-of-type(2),
    .sidebar-tab-btn.is-animating [data-lucide="user-check"] circle {
        animation: popUpPerson 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
    .sidebar-tab-btn.is-animating [data-lucide="user-check"] path:nth-of-type(1) {
        opacity: 0; 
        stroke-dasharray: 30;
        stroke-dashoffset: 30;
        animation: drawCheckmarkAnim 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
    }

    /* 4. ПОЛЬЗОВАТЕЛИ (Группа) */
    .sidebar-tab-btn.is-animating [data-lucide="users"] path:nth-of-type(1),
    .sidebar-tab-btn.is-animating [data-lucide="users"] circle:nth-of-type(1) {
        animation: popUpPerson 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
    .sidebar-tab-btn.is-animating [data-lucide="users"] path:nth-of-type(2),
    .sidebar-tab-btn.is-animating [data-lucide="users"] path:nth-of-type(3),
    .sidebar-tab-btn.is-animating [data-lucide="users"] circle:nth-of-type(2) {
        opacity: 0;
        animation: slideOutRightPerson 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
    }

    /* 5. ЗВОНКИ (Трубка) */
    @keyframes ringPhone {
        0%, 100% { transform: rotate(0deg); }
        20%, 60% { transform: rotate(-15deg) scale(1.1); }
        40%, 80% { transform: rotate(15deg) scale(1.1); }
    }
    .sidebar-tab-btn.is-animating [data-lucide="phone"] {
        transform-origin: center;
        animation: ringPhone 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    }
    .sidebar-tab-btn.is-animating [data-lucide="phone"] path {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: drawLucideIcon 0.5s ease-out forwards;
    }

    /* Добавляем отступ всему контенту снизу, чтобы он не перекрывался панелью */
    .app-wrapper {
        padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Сдвигаем кнопку "Наверх", чтобы она не мешала новой панели */
    .scroll-to-top-btn {
        bottom: calc(85px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Сдвигаем всплывающие Toast-уведомления выше панели */
    .exit-toast, .undo-toast {
        bottom: calc(85px + env(safe-area-inset-bottom)) !important;
    }
}


/* ======================================================= */
/* === ИСПРАВЛЕНИЕ: ШАПКА В ТЕСТЕ И ПЛИТКИ НА ГЛАВНОЙ === */
/* ======================================================= */
@media (max-width: 768px) {
    /* 1. ГАРАНТИРОВАННО скрываем дублирующиеся плитки на главной */
    .main-actions-grid > #fitnessBtn,
    .main-actions-grid > #gamesButton,
    .main-actions-grid > #toolsButton {
        display: none !important;
    }

    /* 2. Настраиваем макет шапки: Заголовок слева, кнопки справа.

       Селектор именно `.container > .header-controls`, а не голый класс: это
       правило про шапку ГЛАВНОГО экрана (ниже оно же правит .header-controls h1
       — заголовок QSTiUM). Но класс тот же носит и ряд кнопок в шапке чата, и
       голому селектору с !important доставалось и ему: на телефоне чат получал
       непрозрачную подложку var(--container-bg-color) со скруглёнными нижними
       углами — ту самую «плашку», которая в стеклянной теме висела отдельной
       карточкой, — плюс min-height 60px, перенос кнопок на вторую строку и
       выравнивание по краям. */
    .container > .header-controls {
        flex-direction: row !important;
        flex-wrap: wrap !important; /* Разрешаем перенос кнопок на 2 строку, если их много */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 6px !important;
        background: var(--container-bg-color) !important;
        border-radius: 0 0 20px 20px !important;
        /* box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; */
        margin-bottom: 15px !important;
        height: auto !important;
        min-height: 60px !important;
    }

    /* Заголовок QSTiUM */
    .container > .header-controls h1 {
        flex: 0 0 auto !important; /* Не даем заголовку выталкивать кнопки */
        font-size: 22px !important;
        font-weight: 800 !important;
        color: var(--text-color) !important;
        text-shadow: none !important;
        text-align: left !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Контейнер для кнопок (Лупа, Перевод, Экспорт и т.д.) */
    .header-buttons {
        flex: 1 1 auto !important;
        display: flex !important;
        width: auto !important;
        gap: 7px !important;
        /* justify-content: space-evenly; */
        margin: 0px 5px 0px 5px !important;
    }

    /* 3. УПРАВЛЕНИЕ ВИДИМОСТЬЮ КНОПОК */
    
    /* Разрешаем показ всех кнопок и выпадающих меню... */
    .header-buttons > button,
    .header-buttons > div {
        display: inline-flex !important;
    }

    /* ...НО строго скрываем те, у которых JS повесил класс .hidden */
    .header-buttons > .hidden {
        display: none !important;
    }

    /* И жестко выключаем кнопки, которые теперь переехали в нижнее меню.
       ИИ-чат здесь же: на телефоне его открывает плавающая кнопка под
       большим пальцем, а правило выше показывает в шапке всё подряд. */
    #chatToggle,
    #studyTogetherBtn,
    #themeDropdownButton,
    #themeDropdownContainer,
    #aiChatHeaderBtn,
    #languageToggle {
        display: none !important;
    }

}

/* ======================================================= */
/* === МЕНЮ НАСТРОЕК КАК POPOVER (МОБИЛЬНЫЕ)           === */
/* ======================================================= */
@keyframes settingsPopoverIn {
    from { transform: scale(0.92) translateY(8px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);   opacity: 1; }
}

/* Опции языка — вне media query, чтобы галочка работала и на ПК */
#themeDropdownContent .theme-lang-option,
.theme-picker-dropdown a.theme-lang-option {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 95% !important;
    height: auto !important;
    padding: 5px 15px !important;
    border-radius: 10px !important;
    margin: 3px;
    text-decoration: none;
    color: var(--text-color);
    justify-content: flex-start !important;
}
#themeDropdownContent .theme-lang-option .theme-option-icon {
    font-size: 0.78em !important;
    font-weight: 700;
    opacity: 0.7;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}
#themeDropdownContent .theme-lang-option .theme-option-text {
    flex: 1;
}
#themeDropdownContent .theme-lang-option .theme-lang-check {
    opacity: 0;
    color: var(--accent-color);
    display: inline-flex;
    flex-shrink: 0;
}
#themeDropdownContent .theme-lang-option .theme-lang-check svg {
    width: 18px;
    height: 18px;
}
#themeDropdownContent .theme-lang-option.active .theme-lang-check {
    opacity: 1;
}
#themeDropdownContent .theme-lang-option.active {
    background: var(--input-hover-bg-color);
}
#themeDropdownContent .theme-lang-option:hover {
    transform: none !important;
    background: var(--input-hover-bg-color);
}

/* Скрываем back-кнопки на мобиле — навигация теперь через bottom-nav */
@media (max-width: 768px) {
    #backToMainFromFitness,
    #backToMainFromToolsBtn,
    #backToMainFromGamesBtn {
        display: none !important;
    }
}


/* ======================================================= */
/* === ИСПРАВЛЕНИЕ: ПЛАВНОЕ УМЕНЬШЕНИЕ ЗАГОЛОВКА       === */
/* ======================================================= */

/* 1. Базовое состояние заголовка на главной (Крупный) */
body:not(.quiz-active) .container > .header-controls h1 {
    opacity: 1 !important;
    transform: none !important;
    font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
    font-weight: 800 !important;
    text-align: center !important;
    width: 100% !important;
    max-height: 150px !important;
    color: var(--secondary-text-color) !important;
    text-shadow: 2px 4px 6px rgba(0,0,0,0.15) !important;
    letter-spacing: -1.5px !important;
    margin: 10px 0 5px 0 !important;
    transition: font-size 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.25s ease-out,
                text-shadow 0.3s ease,
                margin 0.3s ease !important;
}

/* 2. Заголовок при скролле вниз (Уменьшается и помещается в шапку) */
body:not(.quiz-active) .container > .header-controls.scrolled-glass h1 {
    opacity: 1 !important;
    transform: none !important;
    font-size: 1.6rem !important; /* Аккуратный размер для шапки */
    text-shadow: none !important; /* Убираем тяжелую тень */
    margin: 10px 0px 0px 0px !important;    /* Центрируем */
    pointer-events: auto !important;
    max-height: 100px !important; /* Отменяем сплющивание высоты */
}

/* 3. Центрирование контента внутри стеклянной шапки главной */
body:not(.quiz-active) .container > .header-controls.scrolled-glass {
    justify-content: center !important;
    padding: 5px !important;
    top: -15px;
}

/* 4. ФИКС: Скрытие шапки (ТОЛЬКО НА ГЛАВНОМ ЭКРАНЕ), не ломая чат */
/* Для телефонов: полностью убиваем шапку, так как кнопки есть в нижнем меню */
@media (max-width: 768px) {
    body.title-hidden-mode:not(.quiz-active) .container > .header-controls {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Для ПК: скрываем ТОЛЬКО заголовок, оставляем панель кнопок видимой и сдвигаем вправо */
@media (min-width: 769px) {
    body.title-hidden-mode:not(.quiz-active) .container > .header-controls h1 {
        display: none !important;
    }
    body.title-hidden-mode:not(.quiz-active) .container > .header-controls {
        justify-content: flex-end !important; /* Прижимаем кнопки вправо */
        padding-top: 15px !important; /* Аккуратный отступ сверху */
    }
}

/* 5. Компактный заголовок внутри теста */
body.quiz-active .container > .header-controls h1 {
    flex: 0 0 auto !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--secondary-text-color) !important;
    text-shadow: none !important;
    text-align: left !important;
    margin: 0 !important;
    line-height: 1 !important;
    max-height: 50px !important;
}


/* Адаптация нижнего меню под 7 элементов — ТОЛЬКО мобила,
   иначе display:flex отменяет глобальный display:none и панель показывается на ПК.

   Панель больше НЕ скроллится и НЕ маскируется по краям: все пункты влезают
   целиком за счёт плавающего кегля подписи (см. .bn-label выше). overflow-x:auto
   оставлен только как страховка на случай 8-го пункта («Обновить») — тогда
   панель прокрутится, а не спрячет последний пункт под градиентом. */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        /* Вкладки больше не растут сами — свободное место раскладывается
           между ними промежутками, и у каждой подписи есть воздух */
        justify-content: space-between;
        /* Подписи стали крупнее, и «Инструменты» с «Настройками» сливались
           в одно слово. Зазор возвращает им границу — и разводит подложки
           соседних вкладок, которые иначе стоят край в край. На узком
           экране промежуток ужимается: там дороже кегль подписи. */
        gap: clamp(2px, 1.2vw, 5px);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;

        /* Нижний отступ обязан включать safe-area, иначе на iPhone с «чёлкой»
           подписи уезжают под индикатор home. */
        padding: 0 6px calc(6px + env(safe-area-inset-bottom)) 6px;
    }
    .mobile-bottom-nav::-webkit-scrollbar { display: none; }

    /* Появилась кнопка «Обновить» — пунктов стало 8. Поджимаем кегль и отступы,
       чтобы и в этом состоянии всё влезло на 320px без скролла и обрезки.
       Браузеры без :has() просто прокрутят панель — данные не теряются. */
    .mobile-bottom-nav:has(> #bottomNavUpdateBtn:not(.hidden)) .bottom-nav-item {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .mobile-bottom-nav:has(> #bottomNavUpdateBtn:not(.hidden)) .bn-label {
        font-size: clamp(7.5px, 2.2vw, 10px);
        letter-spacing: 0;
    }
    /* У коротких подписей («ИИ», «Чат») ширину задаёт иконка — ужимаем и её */
    .mobile-bottom-nav:has(> #bottomNavUpdateBtn:not(.hidden)) .bottom-nav-item i,
    .mobile-bottom-nav:has(> #bottomNavUpdateBtn:not(.hidden)) .bottom-nav-item svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* === Marathon Leaderboard: подиум-стиль === */
.mlb-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 2px 12px;
}

/* --- Подиум: топ-3 --- */
.mlb-podium {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 12px 0;
    background: linear-gradient(180deg, transparent 0%, rgba(127,127,127,0.05) 60%, transparent 100%);
    border-radius: 16px;
}

.mlb-podium-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    padding-bottom: 4px;
}

.mlb-podium-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 8px;
    background: transparent;
    color: var(--text-color);
    position: relative;
    user-select: none;
}

/* 1-е место чуть выше 2-3 */
.mlb-podium-item.mlb-place-1 { padding-bottom: 14px; }
.mlb-podium-item.mlb-place-2,
.mlb-podium-item.mlb-place-3 { padding-bottom: 4px; }

.mlb-crown {
    position: absolute;
    top: -25px;
    left: 32%;
    transform: translateX(-50%);
    display: block;
    width: 26px;
    height: 26px;
    box-sizing: content-box;
    color: #fbbf24;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(251,191,36,0.4));
}
/* Lucide заменяет <i class="mlb-crown"> на <svg class="mlb-crown">; принудительно нормализуем размеры. */
svg.mlb-crown {
    width: 26px !important;
    height: 26px !important;
    overflow: visible;
}

.mlb-podium-topic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
    font-size: 0.78em;
    color: var(--text-color);
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: 4px;
    min-width: 0;
}
.mlb-podium-topic-label {
    color: var(--secondary-text-color);
    font-weight: 500;
    flex-shrink: 0;
}
.mlb-podium-topic-text {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mlb-podium-topic .mlb-hard-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.mlb-podium-score-wave {
    font-weight: 600;
    opacity: 0.85;
}
.mlb-podium-beat-btn {
    margin-top: 4px;
    padding: 5px 12px;
    font-size: 0.74em;
}

.mlb-podium-ava-wrap {
    position: relative;
    display: inline-flex;
}
.mlb-ava-img {
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--container-bg-color);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.mlb-ava-fallback {
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 3px solid var(--container-bg-color);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* Place-specific borders */
.mlb-place-1 .mlb-ava-img,
.mlb-place-1 .mlb-ava-fallback { border-color: #fbbf24; }
.mlb-place-2 .mlb-ava-img,
.mlb-place-2 .mlb-ava-fallback { border-color: #c0c0c0; }
.mlb-place-3 .mlb-ava-img,
.mlb-place-3 .mlb-ava-fallback { border-color: #cd7f32; }

.mlb-podium-rank-badge {
    position: absolute;
    bottom: -6px;
    right: 50%;
    transform: translateX(50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.7em;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    white-space: nowrap;
}
.mlb-podium-rank-badge i { width: 11px; height: 11px; }
.mlb-rb-1 { background: #fbbf24; color: #5a3a00; }
.mlb-rb-2 { background: #c0c0c0; color: #1a1a1a; }
.mlb-rb-3 { background: #cd7f32; color: #fff; }

.mlb-podium-name {
    font-weight: 600;
    font-size: 0.85em;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
}
.mlb-place-1 .mlb-podium-name { font-size: 0.95em; font-weight: 700; }

.mlb-podium-score {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85em;
    line-height: 1;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.mlb-ps-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #3b1f00; }
.mlb-ps-2 { background: linear-gradient(135deg, #d4d4d4, #a3a3a3); color: #1a1a1a; }
.mlb-ps-3 { background: linear-gradient(135deg, #d97706, #b45309); }

/* Подиум-блоки (визуальные ступени) */
.mlb-podium-base {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}
.mlb-podium-block {
    flex: 1 1 0;
    max-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--input-bg-color), var(--container-bg-color));
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    color: var(--secondary-text-color);
    font-weight: 800;
    font-size: 1.6em;
    box-shadow: inset 0 -8px 18px rgba(0,0,0,0.04);
    user-select: none;
}
.mlb-pb-1 { height: 86px; font-size: 2em; }
.mlb-pb-2 { height: 64px; }
.mlb-pb-3 { height: 50px; }
.mlb-podium-block span { opacity: 0.55; }

/* --- Список остальных --- */
.mlb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mlb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: background 0.18s ease, transform 0.18s ease;
}
.mlb-row:hover { background: var(--input-hover-bg-color, var(--input-bg-color)); }

.mlb-row-rank {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 36px;
    font-weight: 700;
    font-size: 0.85em;
    color: var(--secondary-text-color);
}
.mlb-row-rank i { width: 13px; height: 13px; }

.mlb-row-info {
    flex: 1;
    min-width: 0;
}
.mlb-row-name {
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mlb-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    color: var(--secondary-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.mlb-row-topic {
    overflow: hidden;
    text-overflow: ellipsis;
}
.mlb-hard-icon { width: 13px; height: 13px; color: #f97316; flex-shrink: 0; }

.mlb-row-score {
    text-align: right;
    min-width: 56px;
}
.mlb-row-score-val {
    font-weight: 800;
    font-size: 1.05em;
    color: var(--text-color);
}
.mlb-row-score-wave {
    font-size: 0.72em;
    color: var(--secondary-text-color);
}

.mlb-beat-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mlb-beat-btn i { width: 13px; height: 13px; }
.mlb-beat-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.mlb-sentinel {
    text-align: center;
    padding: 12px;
    color: var(--secondary-text-color);
    font-size: 0.85em;
}

/* Узкие экраны: на ~360px подровнять подиум */
@media (max-width: 400px) {
    .mlb-podium-row { gap: 8px; }
    .mlb-podium-base { gap: 8px; }
    .mlb-podium-item { padding: 4px 2px 6px; }
    .mlb-place-1 .mlb-ava-img,
    .mlb-place-1 .mlb-ava-fallback { width: 64px !important; height: 64px !important; }
    .mlb-place-2 .mlb-ava-img,
    .mlb-place-3 .mlb-ava-img,
    .mlb-place-2 .mlb-ava-fallback,
    .mlb-place-3 .mlb-ava-fallback { width: 52px !important; height: 52px !important; }
    .mlb-pb-1 { height: 70px; font-size: 1.7em; }
    .mlb-pb-2 { height: 54px; }
    .mlb-pb-3 { height: 42px; }
    .mlb-row-meta .mlb-row-topic { display: inline-block; max-width: 130px; }
    /* На узких экранах оставляем подпись "Побить рекорд" видимой,
       но компактизируем кнопку, чтобы текст не уходил в обрыв. */
    .mlb-beat-btn {
        padding: 6px 9px;
        font-size: 0.72em;
        gap: 3px;
    }
    .mlb-beat-btn i { width: 12px; height: 12px; }
}

/* === Focus Mode (Антипрокрастинация): интро + группировка === */
.fm-intro {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(59,130,246,0.10));
    border: 1px solid rgba(34,197,94,0.2);
}
.fm-intro-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(34,197,94,0.18);
    color: #22c55e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fm-intro-icon i { width: 16px; height: 16px; }
.fm-intro-text {
    font-size: 0.88em;
    line-height: 1.45;
    color: var(--text-color);
}

.fm-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fm-section-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 4px;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--secondary-text-color);
}
.fm-section-title i { width: 13px; height: 13px; opacity: 0.85; }

.fm-card {
    padding: 12px 14px;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fm-card.fm-row-inline { flex-direction: row; }

/* ======================================================= */
/* ===          Cookie / localStorage consent          === */
/* ======================================================= */
.cookie-consent-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--container-bg-color, #171a21);
    color: var(--text-color, #e6e8eb);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 0.9em;
    line-height: 1.45;
    max-width: 720px;
    margin: 0 auto;
}
.cookie-consent-banner .cookie-consent-text { flex: 1; }
.cookie-consent-banner .cookie-consent-text a { color: var(--accent, #4f8cff); }
.cookie-consent-banner .cookie-consent-btn {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 10px;
    border: none;
    background: var(--accent, #4f8cff);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95em;
}
.cookie-consent-banner .cookie-consent-btn:hover { filter: brightness(1.1); }
@media (max-width: 520px) {
    .cookie-consent-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .cookie-consent-banner .cookie-consent-btn { width: 100%; }
}

/* ===========================================================
   REFERRAL & STREAK UI (v1.0, 2026-05-09)
   =========================================================== */

.qst-ref-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; margin: 18px 0;
    background: linear-gradient(135deg, var(--accent-color, #6c5ce7) 0%, #a259ff 100%);
    color: #fff; border-radius: 16px; cursor: pointer;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.qst-ref-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(108, 92, 231, 0.35); }
.qst-ref-banner-icon {
    flex-shrink: 0; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.2); border-radius: 50%;
}
.qst-ref-banner-icon i { width: 24px; height: 24px; }
.qst-ref-banner-text { flex: 1; line-height: 1.3; }
.qst-ref-banner-text strong { display: block; font-size: 1em; margin-bottom: 2px; }
.qst-ref-banner-text span { font-size: 0.85em; opacity: 0.9; }
.qst-ref-banner-arrow { flex-shrink: 0; opacity: 0.85; }

.qst-ref-modal { position: relative; padding: 28px 24px 24px; }
.qst-ref-close {
    position: absolute; top: 12px; right: 12px;
    background: transparent; border: none; cursor: pointer;
    color: var(--secondary-text-color);
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.qst-ref-close:hover { background: var(--input-bg-color); }
.qst-ref-title { margin: 0 0 6px; font-size: 1.4em; }
.qst-ref-subtitle { margin: 0 0 18px; color: var(--secondary-text-color); font-size: 0.92em; }

.qst-ref-body { min-height: 240px; }
.qst-ref-loading {
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 4px 8px; gap: 10px;
    color: var(--secondary-text-color);
}
.qst-ref-spin { animation: qst-ref-spin 1s linear infinite; }
@keyframes qst-ref-spin { to { transform: rotate(360deg); } }

.qst-ref-spinner {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 3px solid var(--input-bg-color);
    border-top-color: #a259ff;
    border-right-color: #6c5ce7;
    animation: qst-ref-spin 0.85s linear infinite;
    margin-top: 6px;
}
.qst-ref-loading-text { font-size: 0.88em; opacity: 0.85; margin-bottom: 6px; }

.qst-ref-skeleton {
    width: 100%;
    background: linear-gradient(90deg, var(--input-bg-color) 25%, rgba(162,89,255,0.08) 50%, var(--input-bg-color) 75%);
    background-size: 200% 100%;
    border-radius: 10px;
    animation: qst-ref-shimmer 1.4s ease-in-out infinite;
}
.qst-ref-skeleton-code { height: 46px; }
.qst-ref-skeleton-qr { width: 140px; height: 140px; border-radius: 14px; }
.qst-ref-skeleton-line { height: 12px; }
.qst-ref-skeleton-line.short { width: 60%; }
@keyframes qst-ref-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.qst-ref-howto {
    margin: 4px 0 18px;
    padding: 14px 14px 12px;
    background: linear-gradient(135deg, rgba(108,92,231,0.08), rgba(162,89,255,0.08));
    border: 1px solid rgba(162,89,255,0.25);
    border-radius: 14px;
}
.qst-ref-howto-title {
    font-size: 0.82em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-color); opacity: 0.85;
    margin-bottom: 10px;
}
.qst-ref-howto-steps {
    list-style: none; padding: 0; margin: 0 0 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.qst-ref-howto-steps li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 0.9em; line-height: 1.4; color: var(--text-color);
}
.qst-ref-step-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c5ce7, #a259ff);
    color: #fff; font-size: 0.78em; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}

.qst-ref-code-block { display: flex; gap: 10px; align-items: stretch; margin-bottom: 16px; }
.qst-ref-code {
    flex: 1; padding: 14px 16px;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 1.4em; font-weight: 700; letter-spacing: 0.15em;
    text-align: center; color: var(--text-color);
}
.qst-ref-copy-btn, .qst-ref-share-btn {
    flex-shrink: 0; padding: 0 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary); color: var(--text-color);
    border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.15s ease, transform 0.1s ease;
}
.qst-ref-copy-btn:hover, .qst-ref-share-btn:hover { background: var(--input-bg-color); }
.qst-ref-copy-btn:active, .qst-ref-share-btn:active { transform: scale(0.97); }
.qst-ref-copy-btn.copied { background: #10b981; color: #fff; border-color: #10b981; }

.qst-ref-qr-wrap { display: flex; justify-content: center; margin: 6px 0 18px; }
.qst-ref-qr {
    padding: 10px; background: #fff;
    border-radius: 12px; border: 1px solid var(--border-color);
    line-height: 0;
}
.qst-ref-qr canvas, .qst-ref-qr img { display: block; }

.qst-ref-progress {margin: 18px 15px 14px;}
.qst-ref-progress-label {
    display: flex; justify-content: space-between;
    font-size: 0.85em; color: var(--secondary-text-color);
    margin-bottom: 8px;
}
.qst-ref-progress-track {
    /* Отступ по бокам — под кружки тиров.
       Кружок стоит по центру своей отметки (translateX(-50%)), поэтому
       крайний, на отметке 20, вылезал за правый край полосы на половину
       своей ширины, а с ним и подпись «+30д». Полосу сужаем ровно настолько,
       чтобы крайние кружки с подписями остались внутри карточки. */
    margin-inline: 16px;
    position: relative; height: 10px;
    background: rgba(128, 128, 128, 0.22);
    border-radius: 99px;
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.15);
}
.qst-ref-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #6c5ce7, #a259ff);
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.qst-ref-tier {
    position: absolute; top: -6px;
    transform: translateX(-50%);
    width: 22px; height: 22px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7em; font-weight: 700;
    color: var(--secondary-text-color);
    transition: all 0.3s ease;
}
.qst-ref-tier.reached { background: #10b981; border-color: #10b981; color: #fff; }
.qst-ref-tier.current {
    background: #a259ff; border-color: #a259ff; color: #fff;
    box-shadow: 0 0 0 4px rgba(162, 89, 255, 0.25);
}
.qst-ref-tier-tooltip {
    position: absolute; top: 24px; left: 50%;
    transform: translateX(-50%); white-space: nowrap;
    font-size: 0.7em; color: var(--secondary-text-color);
}

.qst-ref-stats-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin: 14px 0 18px;
}
.qst-ref-stat {
    text-align: center; padding: 10px 6px;
    background: var(--input-bg-color); border-radius: 10px;
}
.qst-ref-stat-val { display: block; font-size: 1.3em; font-weight: 700; color: var(--text-color); }
.qst-ref-stat-lbl { display: block; font-size: 0.75em; color: var(--secondary-text-color); margin-top: 2px; }

.qst-ref-streak {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 16px;
    background: linear-gradient(135deg, #ff7e5f10, #feb47b10);
    border: 1px solid #ff7e5f40; border-radius: 12px;
}
.qst-ref-streak-flame { font-size: 1.8em; }
.qst-ref-streak-text { flex: 1; line-height: 1.3; }
.qst-ref-streak-text strong { display: block; font-size: 1em; }
.qst-ref-streak-text span { font-size: 0.8em; color: var(--secondary-text-color); }

.qst-ref-list-title {
    font-size: 0.9em; color: var(--secondary-text-color);
    margin: 16px 0 8px;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.qst-ref-list { max-height: 180px; overflow-y: auto; }
.qst-ref-list-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-radius: 8px; margin-bottom: 4px;
    background: var(--input-bg-color); font-size: 0.85em;
}
.qst-ref-status { font-size: 0.78em; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.qst-ref-status-pending { background: #f59e0b30; color: #f59e0b; }
.qst-ref-status-qualified { background: #10b98130; color: #10b981; }
.qst-ref-status-expired { background: #6b728030; color: #6b7280; }
.qst-ref-status-fraud { background: #ef444430; color: #ef4444; }

.qst-ref-empty {
    text-align: center; padding: 30px 14px;
    color: var(--secondary-text-color); font-size: 0.9em;
}

.qst-ref-warmup-note {
    padding: 10px 12px; margin-bottom: 14px;
    background: #f59e0b15; border: 1px solid #f59e0b40;
    border-radius: 10px; font-size: 0.85em; color: var(--text-color);
}

.qst-ref-toast {
    position: fixed; top: 20px; left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 100000;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    opacity: 0; max-width: 90vw;
}
.qst-ref-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.qst-ref-toast-text { font-weight: 600; line-height: 1.3; }
.qst-ref-toast-text small { display: block; font-weight: 400; opacity: 0.9; font-size: 0.8em; }

@media (max-width: 480px) {
    .qst-ref-modal { padding: 24px 16px 18px; }
    .qst-ref-code { font-size: 1.15em; padding: 12px 10px; }
    .qst-ref-stats-row { gap: 6px; }
}

/* Invite banner shown to invitees BEFORE signup */
.qst-ref-invite-banner {
    position: fixed;
    bottom: 16px; left: 50%;
    transform: translateX(-50%) translateY(140%);
    z-index: 9500;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px 12px 16px;
    background: linear-gradient(135deg, #6c5ce7 0%, #a259ff 100%);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(108, 92, 231, 0.45);
    max-width: min(540px, calc(100vw - 24px));
    width: calc(100vw - 24px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.qst-ref-invite-banner.show { transform: translateX(-50%) translateY(0); }

.qst-ref-invite-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.22);
    border-radius: 50%;
}
.qst-ref-invite-icon i { width: 22px; height: 22px; }

.qst-ref-invite-text { flex: 1; line-height: 1.3; min-width: 0; }
.qst-ref-invite-text strong { display: block; font-size: 0.98em; margin-bottom: 2px; }
.qst-ref-invite-text span { font-size: 0.82em; opacity: 0.92; }

.qst-ref-invite-cta {
    flex-shrink: 0;
    padding: 8px 16px;
    background: #fff;
    color: #6c5ce7;
    border: none; border-radius: 10px;
    font-weight: 700; font-size: 0.9em;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease;
}
.qst-ref-invite-cta:hover { background: #f1f0ff; }
.qst-ref-invite-cta:active { transform: scale(0.96); }

.qst-ref-invite-close {
    flex-shrink: 0;
    background: transparent; border: none;
    color: #fff; opacity: 0.75;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.qst-ref-invite-close:hover { opacity: 1; background: rgba(255,255,255,0.15); }

@media (max-width: 480px) {
    .qst-ref-invite-banner { padding: 10px 10px 10px 12px; gap: 10px; }
    .qst-ref-invite-icon { width: 36px; height: 36px; }
    .qst-ref-invite-text strong { font-size: 0.92em; }
    .qst-ref-invite-text span { font-size: 0.76em; }
    .qst-ref-invite-cta { padding: 7px 12px; font-size: 0.85em; }
}

/* Streak badge on the "Get PRO" main-grid button */
#referralButton { position: relative; }
.qst-streak-badge {
    position: absolute;
    top: 6px; right: 6px;
    display: flex; align-items: center; gap: 2px;
    padding: 3px 8px 3px 6px;
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    color: #fff;
    border-radius: 99px;
    font-size: 0.82em; font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(255, 126, 95, 0.5);
    pointer-events: none;
    animation: qst-streak-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes qst-streak-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}


/* ======================================================= */
/* === DYNAMIC LIVE SHADOWS (ЖИВЫЕ ТЕНИ ВКЛЮЧЕНЫ)      === */
/* ======================================================= */
body.live-shadows-active {
    --neumorph-shadow-inset: 
        inset calc(9px + var(--neumorph-tilt-x, 0px)) calc(6px + var(--neumorph-tilt-y, 0px)) 6px var(--neumorph-shadow-dark), 
        inset calc(-2px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-3px - (var(--neumorph-tilt-y, 0px) / 2)) 9px var(--neumorph-shadow-light);
    --neumorph-shadow-soft: 
        calc(6px + var(--neumorph-tilt-x, 0px)) calc(7px + var(--neumorph-tilt-y, 0px)) 10px var(--neumorph-shadow-dark), 
        calc(-2px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-2px - (var(--neumorph-tilt-y, 0px) / 2)) 5px var(--neumorph-shadow-light);
    --neumorph-shadow-soft-sm: 
        calc(3px + var(--neumorph-tilt-x, 0px)) calc(3px + var(--neumorph-tilt-y, 0px)) 6px var(--neumorph-shadow-dark), 
        calc(-2px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-2px - (var(--neumorph-tilt-y, 0px) / 2)) 4px var(--neumorph-shadow-light); 
}

body.live-shadows-active.dark-mode {
    --neumorph-shadow-inset: 
        inset calc(7px + var(--neumorph-tilt-x, 0px)) calc(7px + var(--neumorph-tilt-y, 0px)) 9px var(--neumorph-shadow-dark),
        inset calc(10px - (var(--neumorph-tilt-x, 0px) / 2)) calc(5px - (var(--neumorph-tilt-y, 0px) / 2)) 10px var(--neumorph-shadow-light); 
    --neumorph-shadow-soft: 
        calc(5px + var(--neumorph-tilt-x, 0px)) calc(12px + var(--neumorph-tilt-y, 0px)) 8px var(--neumorph-shadow-dark), 
        calc(-2px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-2px - (var(--neumorph-tilt-y, 0px) / 2)) 10px var(--neumorph-shadow-light); 
    --neumorph-shadow-soft-sm: 
        calc(3px + var(--neumorph-tilt-x, 0px)) calc(3px + var(--neumorph-tilt-y, 0px)) 6px var(--neumorph-shadow-dark), 
        calc(-3px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-3px - (var(--neumorph-tilt-y, 0px) / 2)) 6px var(--neumorph-shadow-light);
}

body.live-shadows-active.claude-mode {
    --neumorph-shadow-inset: 
        inset calc(6px + var(--neumorph-tilt-x, 0px)) calc(7px + var(--neumorph-tilt-y, 0px)) 7px var(--neumorph-shadow-dark), 
        inset calc(-2px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-2px - (var(--neumorph-tilt-y, 0px) / 2)) 13px var(--neumorph-shadow-light); 
    --neumorph-shadow-soft: 
        calc(2px + var(--neumorph-tilt-x, 0px)) calc(7px + var(--neumorph-tilt-y, 0px)) 10px var(--neumorph-shadow-dark), 
        calc(-3px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-1px - (var(--neumorph-tilt-y, 0px) / 2)) 6px var(--neumorph-shadow-light); 
    --neumorph-shadow-soft-sm: 
        calc(3px + var(--neumorph-tilt-x, 0px)) calc(3px + var(--neumorph-tilt-y, 0px)) 6px var(--neumorph-shadow-dark), 
        calc(-2px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-2px - (var(--neumorph-tilt-y, 0px) / 2)) 5px var(--neumorph-shadow-light);
}

body.live-shadows-active.synthwave-mode {
    --neumorph-shadow-inset:
        inset calc(11px + var(--neumorph-tilt-x, 0px)) calc(13px + var(--neumorph-tilt-y, 0px)) 28px var(--neumorph-shadow-dark),
        inset calc(3px - (var(--neumorph-tilt-x, 0px) / 2)) calc(2px - (var(--neumorph-tilt-y, 0px) / 2)) 12px var(--neumorph-shadow-light);
    --neumorph-shadow-soft:
        calc(9px + var(--neumorph-tilt-x, 0px)) calc(14px + var(--neumorph-tilt-y, 0px)) 9px var(--neumorph-shadow-dark),
        calc(-4px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-2px - (var(--neumorph-tilt-y, 0px) / 2)) 8px var(--neumorph-shadow-light);
    --neumorph-shadow-soft-sm:
        calc(3px + var(--neumorph-tilt-x, 0px)) calc(2px + var(--neumorph-tilt-y, 0px)) 5px var(--neumorph-shadow-dark),
        calc(-2px - (var(--neumorph-tilt-x, 0px) / 2)) calc(-1px - (var(--neumorph-tilt-y, 0px) / 2)) 2px var(--neumorph-shadow-light);
}

/* ============================================================
   ПРЕВЬЮ КАРТИНОК ПЕРЕД ОТПРАВКОЙ (HD + кроп через Cropper.js)
   ============================================================ */
.chat-image-preview-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.chat-image-preview-bar.hidden { display: none; }
.cipb-thumbs {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.cipb-thumb {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
}
.cipb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cipb-thumb .cipb-edit,
.cipb-thumb .cipb-remove {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.1s ease;
}
.cipb-thumb:focus-within .cipb-edit,
.cipb-thumb:focus-within .cipb-remove { opacity: 1; }
/* показ по наведению — только там, где наведение есть: на телефоне :hover срабатывает в момент тапа */
@media (hover: hover) {
    .cipb-thumb:hover .cipb-edit,
    .cipb-thumb:hover .cipb-remove { opacity: 1; }
}
.cipb-thumb .cipb-edit { top: 4px; left: 4px; }
.cipb-thumb .cipb-remove { top: 4px; right: 4px; }
.cipb-thumb .cipb-edit i,
.cipb-thumb .cipb-remove i,
.cipb-thumb .cipb-edit svg,
.cipb-thumb .cipb-remove svg { width: 13px; height: 13px; }
.cipb-thumb .cipb-edit:active,
.cipb-thumb .cipb-remove:active { transform: scale(0.92); }
@media (hover: none) {
    .cipb-thumb .cipb-edit,
    .cipb-thumb .cipb-remove { opacity: 1; }
}

.cipb-hd-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--container-bg-color);
    color: var(--secondary-text-color);
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cipb-hd-btn:hover { background: var(--input-hover-bg-color); }
.cipb-hd-btn.active {
    background: var(--accent, #e74c3c);
    color: #fff;
    border-color: var(--accent, #e74c3c);
}

/* === ПРЕВЬЮ-ПОЛОСА ФАЙЛОВ (qst/pdf/docx/...) === */
.chat-file-preview-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.chat-file-preview-bar.hidden { display: none; }
.cfpb-chips {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.cfpb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 10px;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    flex: 0 0 auto;
    max-width: 240px;
}
.cfpb-chip .cfpb-icon { display: inline-flex; color: var(--accent, #e74c3c); }
.cfpb-chip .cfpb-icon i,
.cfpb-chip .cfpb-icon svg { width: 16px; height: 16px; }
.cfpb-chip .cfpb-name {
    font-size: 13px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.cfpb-chip .cfpb-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-color);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s ease, transform 0.1s ease;
}
.cfpb-chip .cfpb-remove:hover { background: rgba(0, 0, 0, 0.15); }
.cfpb-chip .cfpb-remove:active { transform: scale(0.92); }
.cfpb-chip .cfpb-remove i,
.cfpb-chip .cfpb-remove svg { width: 12px; height: 12px; }

/* === МОДАЛ КРОПА === */
.cropper-stage {
    flex: 1;
    min-height: 0;
    max-height: 70vh;
    overflow: hidden;
    background: #000;
    border-radius: 10px;
}
.cropper-stage img {
    display: block;
    max-width: 100%;
}
.cropper-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.cropper-btn {
    padding: 9px 18px;
    border: 1px solid var(--border-color);
    background: var(--container-bg-color);
    color: var(--text-color);
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cropper-btn:hover { background: var(--input-hover-bg-color); }
.cropper-btn.cropper-icon-btn {
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cropper-btn.cropper-icon-btn i,
.cropper-btn.cropper-icon-btn svg { width: 16px; height: 16px; }
.cropper-btn-primary {
    background: var(--accent, #e74c3c);
    color: #fff;
    border-color: var(--accent, #e74c3c);
}
.cropper-btn-primary:hover { filter: brightness(1.08); }

/* === РЕДАКТОР КАРТИНКИ (Fabric.js): crop + brush + text + shapes === */
.image-editor-content {
    width: min(94vw, 1100px);
    max-width: 1100px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}
.ie-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.ie-tool-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ie-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--container-bg-color);
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.ie-tool:hover { background: var(--input-hover-bg-color); }
.ie-tool:active { transform: scale(0.92); }
.ie-tool:disabled { opacity: 0.4; cursor: not-allowed; }
.ie-tool.active {
    background: var(--accent, #e74c3c);
    border-color: var(--accent, #e74c3c);
    color: #fff;
}
.ie-tool i, .ie-tool svg { width: 18px; height: 18px; }

.ie-options {
    flex: 1;
    justify-content: center;
    gap: 14px;
}
.ie-colors { display: flex; gap: 6px; }
.ie-color {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.15s ease;
}
.ie-color:hover { transform: scale(1.1); }
.ie-color.active { border-color: var(--text-color); }
.ie-size-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    color: var(--secondary-text-color);
}
.ie-size-label input[type="range"] {
    width: 100px;
    accent-color: var(--accent, #e74c3c);
}

.ie-stage {
    flex: 1;
    min-height: 0;
    max-height: 70vh;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 8px;
}
.ie-stage canvas {
    display: block;
    /* Перебиваем глобальный фикс .modal-content canvas { width: 100% !important },
       иначе Fabric-канвас растягивается на ширину контейнера и теряет соотношение сторон. */
    width: auto !important;
    max-width: none !important;
}
.ie-stage .canvas-container { margin: 0 auto; }

.ie-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.ie-btn {
    padding: 9px 18px;
    border: 1px solid var(--border-color);
    background: var(--container-bg-color);
    color: var(--text-color);
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ie-btn:hover { background: var(--input-hover-bg-color); }
.ie-btn-primary {
    background: var(--accent, #e74c3c);
    color: #fff;
    border-color: var(--accent, #e74c3c);
}
.ie-btn-primary:hover { filter: brightness(1.08); }

/* ===========================================================
   Pending-картинка в чате: оптимистичный UI с blur-эффектом.
   Локальный objectURL показывается размытым, пока идёт upload;
   после прихода настоящего сообщения через onSnapshot DOM
   заменяется на чистую серверную версию (которую мы заранее
   прогрели через new Image().src — браузер уже её закешировал).
   =========================================================== */
.message.pending.image-bubble .chat-content-image {
    opacity: 0.9 !important;
    filter: blur(10px) saturate(120%);
    transform: scale(1.03);
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.message.pending.image-bubble .ambilight-glow {
    opacity: 0.3 !important;
}
.message.pending.image-bubble .blur-up-placeholder {
    animation: cipbUploadPulse 1.4s ease-in-out infinite;
}
@keyframes cipbUploadPulse {
    0%, 100% { opacity: 0.18; }
    50%      { opacity: 0.45; }
}

/* ===========================================================
   Галерея картинок в одном сообщении (2-9 шт)
   =========================================================== */
.chat-gallery {
    display: grid;
    gap: 8px;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
    background: var(--input-bg-color);
}
/* Раскладки Telegram-style */
.chat-gallery[data-count="2"] { grid-template-columns: 1fr 1fr; }
.chat-gallery[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
.chat-gallery[data-count="4"] { grid-template-columns: 1fr 1fr; }
.chat-gallery[data-count="5"],
.chat-gallery[data-count="6"] { grid-template-columns: 1fr 1fr 1fr; }
.chat-gallery[data-count="7"],
.chat-gallery[data-count="8"],
.chat-gallery[data-count="9"] { grid-template-columns: 1fr 1fr 1fr; }

.chat-gallery .gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--container-bg-color);
    cursor: zoom-in;
}
.chat-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.chat-gallery .gallery-item img.loaded { opacity: 1; }

/* Индикатор "+N" на последней плитке когда картинок > 9 */
.chat-gallery .gallery-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 1.4em;
    font-weight: 700;
    pointer-events: none;
}

/* Pending-галерея: блюр (как у одиночной pending-картинки) */
.message.pending.gallery-bubble .chat-gallery .gallery-item img {
    filter: blur(10px) saturate(120%);
    transform: scale(1.04);
}


/* ================================================================== */
/* === FIX: БЛОКИРОВКА АНИМАЦИЙ ИКОНОК ПРИ ПЕРВИЧНОЙ ЗАГРУЗКЕ     === */
/* ================================================================== */

/* Пока приложение собирается (нет класса app-ready), запрещаем иконкам прыгать */
body:not(.app-ready) .bottom-nav-item [data-lucide],
body:not(.app-ready) .bottom-nav-item svg,
body:not(.app-ready) .sidebar-tab-btn [data-lucide],
body:not(.app-ready) .sidebar-tab-btn svg,
body:not(.app-ready) .sidebar-tab-btn path,
body:not(.app-ready) .sidebar-tab-btn circle,
body:not(.app-ready) .sidebar-tab-btn polyline {
    animation: none !important;
    transition: none !important;
}
/* ============================================================ */
/* === КОНСТРУКТОР ТЕСТОВ (Test Builder)                     === */
/* ============================================================ */
.builder-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
    margin: 16px 0;
    align-items: start;
    position: relative;
}
.builder-sidebar {
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}
.builder-sidebar-close {
    display: none;
    align-self: flex-end;
    background: transparent;
    border: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    padding: 4px;
    margin-bottom: 4px;
}
.builder-sidebar-search-wrap {
    position: relative;
    margin-bottom: 8px;
}
.builder-sidebar-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--secondary-text-color);
    pointer-events: none;
}
.builder-sidebar-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px 8px 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: 0.9em;
}
.builder-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.builder-sidebar-empty {
    color: var(--secondary-text-color);
    font-size: 0.85em;
    padding: 12px 8px;
    text-align: center;
}
.builder-sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-color);
    font-size: 0.9em;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.builder-sidebar-item:hover {
    background: var(--button-secondary-bg);
}
.builder-sidebar-item.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-weight: 600;
}
.builder-sidebar-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.builder-sidebar-item-del {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--secondary-text-color);
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.builder-sidebar-item-del:hover {
    color: #fff;
    background: #d32f2f;
}
.builder-sidebar-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px 4px;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-text-color);
    cursor: pointer;
    border-radius: 6px;
}
.builder-sidebar-divider:hover {
    background: var(--button-secondary-bg);
}
.builder-sidebar-divider.active {
    color: var(--accent);
}
.builder-sidebar-divider-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.builder-sidebar-open-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--button-secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9em;
    margin-bottom: 10px;
    align-self: flex-start;
}
.builder-sidebar-counter {
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.8em;
    min-width: 18px;
    text-align: center;
}
.builder-sidebar-counter:empty {
    display: none;
}
.builder-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
}
.builder-sidebar-backdrop.open {
    display: block;
}
@media (max-width: 900px) {
    .builder-layout {
        grid-template-columns: 1fr;
    }
    .builder-sidebar-open-btn {
        display: inline-flex;
    }
    .builder-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 82vw;
        max-width: 320px;
        max-height: 100vh;
        border-radius: 0 12px 12px 0;
        z-index: 9999;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 16px rgba(0,0,0,0.25);
    }
    .builder-sidebar.open {
        transform: translateX(0);
    }
    .builder-sidebar-close {
        display: inline-flex;
    }
}
.builder-items-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.builder-items-list.swipe-anim-left {
    animation: builderSwipeLeft 0.22s ease;
}
.builder-items-list.swipe-anim-right {
    animation: builderSwipeRight 0.22s ease;
}
@keyframes builderSwipeLeft {
    0%   { transform: translateX(40px); opacity: 0.4; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes builderSwipeRight {
    0%   { transform: translateX(-40px); opacity: 0.4; }
    100% { transform: translateX(0); opacity: 1; }
}
.builder-empty-hint {
    text-align: center;
    color: var(--secondary-text-color);
    padding: 24px 8px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}
.builder-card {
    background: color-mix(in srgb, var(--text-color) 4%, var(--container-bg-color));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.builder-card.builder-category-card {
    background: color-mix(in srgb, var(--accent) 8%, var(--container-bg-color));
    border-style: dashed;
}
.builder-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}
.builder-card-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.builder-card-actions {
    display: flex;
    gap: 6px;
}
.builder-icon-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    color: var(--secondary-text-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
}
.builder-icon-btn:hover {
    background: var(--button-secondary-bg);
    color: var(--text-color);
}
.builder-icon-btn.builder-remove-btn:hover {
    color: #fff;
    background: #d32f2f;
    border-color: #d32f2f;
}
.builder-question-text,
.builder-category-text {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95em;
    background: var(--input-bg-color);
    color: var(--text-color);
    resize: vertical;
    box-sizing: border-box;
}
.builder-category-text {
    min-height: 36px;
}
.builder-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}
.builder-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.builder-option-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    margin: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.builder-option-row input[type="checkbox"]:hover {
    border-color: color-mix(in srgb, #22c55e 60%, var(--border-color));
}
.builder-option-row input[type="checkbox"]:checked {
    background: #22c55e;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}
.builder-option-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.builder-option-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.builder-option-row input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9em;
    background: var(--input-bg-color);
    color: var(--text-color);
}
.builder-option-row .builder-option-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--secondary-text-color);
    padding: 4px;
    border-radius: 4px;
}
.builder-option-row .builder-option-remove:hover {
    color: #d32f2f;
    background: rgba(211, 47, 47, 0.12);
}
.builder-add-option-btn {
    align-self: flex-start;
    background: transparent;
    border: 1px dashed var(--border-color);
    color: var(--secondary-text-color);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    margin-top: 4px;
}
.builder-add-option-btn:hover {
    background: var(--button-secondary-bg);
    color: var(--text-color);
}
.builder-image-area {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.builder-image-preview {
    max-width: 140px;
    max-height: 100px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    object-fit: cover;
}
.builder-toolbar {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 16px 0;
}
.builder-images-lock-hint {
    text-align: center;
    color: var(--secondary-text-color);
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.35);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9em;
}
/* Четыре кнопки в столбик одинаковой ширины читались как список равных
   вариантов, где выбрать нечего. Действие здесь одно главное — пройти
   собранный тест; выгрузки и отправка вторичны, им хватает ряда. */
.builder-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

/* «Пройти тест» идёт последней в разметке — растягиваем её на всю ширину
   и ставим первой строкой: это следующий шаг после сборки. */
.builder-action-buttons > .btn {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 13px 16px;
    font-size: 1em;
    font-weight: 600;
}

.builder-action-buttons > .btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 10px 8px;
    font-size: .86em;
}

.builder-action-buttons > .btn-secondary svg { flex: 0 0 auto; width: 16px; height: 16px; }
.builder-action-buttons > .btn-secondary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
    .builder-action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Три вторичные кнопки в две колонки: последняя занимает строку целиком */
    .builder-action-buttons > .btn-secondary:last-of-type { grid-column: 1 / -1; }
}

/* Подсказка про кружок: без неё непонятно, что он помечает ПРАВИЛЬНЫЙ
   ответ — а это первое, что нужно знать в конструкторе. */
.builder-answer-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 9px 13px;
    border-left: 3px solid var(--button-primary-bg);
    border-radius: 0 9px 9px 0;
    background: color-mix(in srgb, var(--button-primary-bg) 10%, transparent);
    color: var(--text-color);
    font-size: .85em;
    line-height: 1.45;
}

.builder-answer-hint svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--button-primary-bg);
}
.builder-action-buttons button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Кнопка картинки в строке варианта ответа конструктора */
.builder-option-img-btn {
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: var(--secondary-text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.builder-option-img-btn:hover {
    background: var(--button-secondary-bg);
    color: var(--text-color);
    border-style: solid;
}
.builder-option-img-preview {
    display: block;
    max-width: 200px;
    max-height: 140px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin: 4px 0 4px 28px;
    object-fit: contain;
}
/* Картинка варианта ответа в режиме прохождения теста / чтения */
.answer-option-image {
    display: block;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 6px;
    margin-top: 6px;
    cursor: zoom-in;
}


/* === Вопросы персонализации в регистрации/онбординге ============= */
/* Строка «Люблю спорт / Люблю игры» с тумблером справа.             */
.onb-interest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--container-bg-color);
    color: var(--text-color);
    font-size: 0.92em;
    cursor: pointer;
    transition: border-color .2s ease;
}
.onb-interest-row:hover {
    border-color: var(--accent);
}
.onb-interest-row > span:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}
.onb-interest-row i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--secondary-text-color);
}
/* Тумблер внутри label: сам label уже ловит клик, поэтому
   переключателю оставляем только внешний вид. */
.onb-interest-row .ai-toggle-switch {
    flex-shrink: 0;
}

/* ================================================================= */
/* === ГЛАВНЫЙ ЭКРАН: СМЫСЛОВЫЕ ГРУППЫ ПЛИТОК ПО 4                === */
/* ПК и планшет — 4 в ряд, мобилка — 2 в ряд (группа = 2 ряда).      */
/* Правила намеренно в самом конце файла: выше есть                  */
/* .main-actions-grid { grid-template-columns: repeat(5,1fr) } и     */
/* мобильный !important-оверрайд, их нужно перебить по порядку.      */
/* ================================================================= */

.action-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 15px 2px;
    color: var(--secondary-text-color);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: 0.75;
}
/* Линия справа: делит экран, но не перетягивает внимание на себя */
.action-group-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, var(--border-color), transparent);
}
/* Первая группа идёт сразу под колодами — большой отступ не нужен */
.action-group-title:first-of-type {
    margin-top: 2px;
}

.action-group-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    /* Снимаем нижний padding 45px от базового .main-actions-grid:
       четыре грида подряд дали бы 180px пустоты */
    padding: 15px 15px 15px 15px !important;
    /* Строки по содержимому: иначе grid-auto-rows:1fr растянул бы
       строку с широким баннером до высоты обычной плитки */
    grid-auto-rows: auto !important;
    /* Группа короткая — резервировать под неё 300px незачем */
    contain-intrinsic-size: auto 200px;
}

/* --- «Получить PRO» — широкая строка-баннер, а не квадратная плитка --- */
.action-group-grid > #referralButton {
    grid-column: 1 / -1;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 14px;
    height: auto !important;
    min-height: 64px !important;
    padding: 14px 18px !important;
}
.action-group-grid > #referralButton .main-action-text-wrapper {
    flex: 0 1 auto;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.action-group-grid > #referralButton .main-action-text-wrapper span {
    width: auto;
    text-align: left;
}
.action-group-grid > #referralButton .gradus-subtitle {
    margin-top: 1px;
}

@media (max-width: 768px) {
    .action-group-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .action-group-title {
        margin: 22px 15px 2px;
    }

    /* В группе «Ещё» на мобилке видны «Верификатор» и «Поиск по базе»
       (Тренировки/Игры/Инструменты живут в нижней панели) — их двое,
       так что обычная сетка 2 в ряд, растяжка больше не нужна. */
}


/* =======================================================
   ОЧЕРЕДЬ ПОВТОРЕНИЙ: ПЕРЕКЛЮЧАТЕЛЬ ВИДА И СПИСОК
   ======================================================= */

.forecast-view-toggle {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}

.forecast-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.forecast-view-btn i,
.forecast-view-btn svg {
    width: 15px;
    height: 15px;
}

.forecast-view-btn:hover {
    border-color: var(--accent);
    color: var(--text-color);
}

.forecast-view-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* --- список --- */

.forecast-list-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.forecast-list-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.forecast-list-search {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--container-bg-color);
    color: var(--text-color);
    font-size: 13px;
}

.forecast-list-search:focus {
    outline: none;
    border-color: var(--focus-ring);
}

.forecast-list-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--secondary-text-color);
    font-variant-numeric: tabular-nums;
}

/* Очередь бывает на тысячу карточек — прокрутка своя, окно не растёт */
.forecast-list-body {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
}

.forecast-list-day {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 8px 4px;
    background: var(--container-bg-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--secondary-text-color);
}

.forecast-list-day.is-overdue {
    color: #ef4444;
}

.forecast-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
}

.forecast-row:hover {
    background: rgba(128, 128, 128, 0.10);
}

.forecast-row-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.forecast-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.forecast-row-text {
    font-size: 13px;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.forecast-row-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--secondary-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forecast-row-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.forecast-row-remove i,
.forecast-row-remove svg {
    width: 15px;
    height: 15px;
}

.forecast-row-remove:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Второй щелчок подтверждает — состояние должно быть видно сразу */
.forecast-row-remove.is-confirming {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.forecast-list-empty,
.forecast-load-error {
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--secondary-text-color);
}

/* Ложится поверх пустого холста, не разрушая его — холст нужен потом */
.forecast-load-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .forecast-list-body {
        max-height: 46vh;
    }
}


/* =======================================================
   ЖИВЫЕ ИКОНКИ КНОПОК КОЛОД
   =======================================================

   Анимируются внутренние пути по их геометрии, а не сама <svg>: у lucide
   дети — штрихи без заливки, и transform-box: fill-box для них вырожден
   (у пути «M8 13h.01» площадь нулевая), отчего иконка при наведении
   пропадала. Здесь везде view-box и явный центр в единицах вьюбокса.

   Идёт постоянно, поэтому такт медленный: иконка должна жить в углу
   глаза, а не тянуть его на себя. Наведение ускоряет — тогда движение
   уже уместно, на него смотрят намеренно. */

/* Календарь: дни зажигаются волной слева направо, сверху вниз. */
#openCalendarBtn svg path[d="M8 13h.01"]   { animation: calDayBlink 3.2s ease-in-out infinite; animation-delay: 0s; }
#openCalendarBtn svg path[d="M12 13h.01"]  { animation: calDayBlink 3.2s ease-in-out infinite; animation-delay: 0.13s; }
#openCalendarBtn svg path[d="M16 13h.01"]  { animation: calDayBlink 3.2s ease-in-out infinite; animation-delay: 0.26s; }
#openCalendarBtn svg path[d="M8 17h.01"]   { animation: calDayBlink 3.2s ease-in-out infinite; animation-delay: 0.39s; }
#openCalendarBtn svg path[d="M12 17h.01"]  { animation: calDayBlink 3.2s ease-in-out infinite; animation-delay: 0.52s; }
#openCalendarBtn svg path[d="M16 17h.01"]  { animation: calDayBlink 3.2s ease-in-out infinite; animation-delay: 0.65s; }

@media (hover: hover) and (pointer: fine) {
    #openCalendarBtn:hover svg path[d$="h.01"],
    #openCalendarBtn:focus-visible svg path[d$="h.01"] {
        animation-duration: 1.4s;
    }
}

/* Только прозрачность: точки крошечные, любое смещение на 15px читается
   как дрожание, а не как волна. Долгая пауза на единице — волна проходит
   и уступает место покою, иначе иконка мельтешит без остановки. */
@keyframes calDayBlink {
    0%, 40%, 100% { opacity: 1; }
    20%           { opacity: 0.12; }
}

/* Глобус: меридиан «поворачивается». scaleX через ноль к минусу даёт
   настоящее вращение, а не качание — фигура симметрична, шва не видно. */
#openDecksLibraryBtn svg path[d^="M12 2a14.5"] {
    transform-box: view-box;
    transform-origin: 12px 12px;
    /* Без этого штрих при сжатии по горизонтали заплывает и меридиан
       на миг превращается в кляксу. */
    vector-effect: non-scaling-stroke;
    animation: globeMeridianSpin 7s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
    #openDecksLibraryBtn:hover svg path[d^="M12 2a14.5"],
    #openDecksLibraryBtn:focus-visible svg path[d^="M12 2a14.5"] {
        animation-duration: 2.6s;
    }
}

@keyframes globeMeridianSpin {
    0%   { transform: scaleX(1); }
    25%  { transform: scaleX(0.06); }
    50%  { transform: scaleX(-1); }
    75%  { transform: scaleX(0.06); }
    100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    #openCalendarBtn svg path,
    #openDecksLibraryBtn svg path {
        animation: none;
    }
}


/* =======================================================
   ПОДТВЕРЖДЕНИЕ ПРОФЕССИОНАЛЬНОГО ПРИМЕНЕНИЯ
   =======================================================

   Окно должно читаться как предупреждение, а не как рекламная плашка:
   спокойный знак, короткий текст, кнопка отказа — первой по фокусу. */

.prof-ack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 4px 6px 0;
}

.prof-ack-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb, 52, 152, 219), 0.12);
    color: var(--accent);
    flex-shrink: 0;
}

.prof-ack-badge svg,
.prof-ack-badge i {
    width: 26px;
    height: 26px;
    stroke-width: 1.8;
}

.prof-ack-text {
    margin: 0;
    /* Такой текст читают по диагонали, поэтому строка короче обычного и
       межстрочный интервал крупнее — иначе взгляд соскальзывает. */
    max-width: 42ch;
    font-size: 0.94em;
    line-height: 1.55;
    color: var(--secondary-text-color);
    text-align: left;
}

.prof-ack-popup .swal2-title {
    font-size: 1.25em;
    line-height: 1.3;
}


/* =======================================================
   ПЛАШКИ ПОВТОРЕНИЯ: ПО ОДНОЙ НА КОЛОДУ
   =======================================================

   Раньше плашка была одна на всё, и после нажатия появлялось окно выбора
   колоды. Теперь колода видна сразу — вместе со своим счётчиком и цитатой
   из собственных карточек. */

#smartDeckContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

#smartDeckContainer.hidden {
    display: none;
}

/* Заголовок теперь несёт имя колоды, а не общее «Повторение на сегодня»:
   на него смотрят первым, поэтому не даём ему растекаться на две строки. */
#smartDeckContainer .smart-deck-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smartDeckContainer .smart-deck-icon {
    margin-right: 10px;
}

.smart-deck-priming {
    display: block;
    margin-top: 2px;
    opacity: 0.75;
    font-style: italic;
    /* Цитата — подсказка, а не заголовок: одна строка, дальше многоточие */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smartDeckContainer .smart-deck-card:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}


/* =======================================================
   ВЫБОР ПЕРСОНЫ ПЕРЕД РАЗГОВОРОМ
   =======================================================

   Список читают сверху вниз и выбирают один раз, поэтому строка должна
   считываться за взгляд: значок — имя — что умеет. Всё оформление здесь,
   а не во встроенных стилях: раньше правка отступа означала правку строки
   в JavaScript. */

.persona-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 52vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 6px;
}

.persona-select-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--input-bg-color);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    /* Появление сверху вниз: порядок строки приходит из разметки */
    animation: personaPickIn 0.26s ease backwards;
    animation-delay: calc(var(--persona-order, 0) * 22ms);
}

@keyframes personaPickIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.persona-select-btn:hover,
.persona-select-btn:focus-visible {
    border-color: var(--focus-ring);
    background: var(--input-hover-bg-color, var(--input-bg-color));
    outline: none;
}

.persona-select-btn:active {
    transform: scale(0.99);
}

.persona-pick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb, 52, 152, 219), 0.12);
    color: var(--accent);
}

.persona-pick-icon svg,
.persona-pick-icon i {
    width: 22px;
    height: 22px;
    stroke-width: 2;
    /* Анимация идёт по внутренним путям значка, а не по самой <svg>:
       у детей lucide нет заливки, и transform-box: fill-box для них
       вырожден — значок пропадал бы при наведении. */
    transform-box: view-box;
    transform-origin: 12px 12px;
}

/* Значок оживает только у строки под курсором — список длинный, и общее
   движение превратило бы его в мельтешение. */
@media (hover: hover) and (pointer: fine) {
    .persona-select-btn:hover .persona-pick-icon svg,
    .persona-select-btn:focus-visible .persona-pick-icon svg {
        animation: personaIconPop 0.42s ease;
    }
}

@keyframes personaIconPop {
    0%   { transform: scale(1) rotate(0deg); }
    45%  { transform: scale(1.16) rotate(-7deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.persona-pick-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.persona-pick-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 1.02em;
    color: var(--text-color);
}

.persona-pick-desc {
    font-size: 0.85em;
    line-height: 1.35;
    color: var(--secondary-text-color);
}

.persona-pick-badge {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    opacity: 0.85;
}

.persona-pick-badge svg,
.persona-pick-badge i {
    width: 14px;
    height: 14px;
}

/* Стрелка появляется под курсором: намекает, что строка ведёт дальше,
   но в покое не отвлекает от чтения описаний. */
.persona-pick-go {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--secondary-text-color);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.persona-pick-go svg,
.persona-pick-go i {
    width: 18px;
    height: 18px;
}

.persona-select-btn:focus-visible .persona-pick-go {
    opacity: 1;
    transform: none;
}
/* показ по наведению — только там, где наведение есть: на телефоне :hover срабатывает в момент тапа */
@media (hover: hover) {
    .persona-select-btn:hover .persona-pick-go {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .persona-select-btn,
    .persona-select-btn:hover .persona-pick-icon svg {
        animation: none;
    }
}


/* =======================================================
   ПРИВЕТСТВИЕ ПЕРВОГО ЗАПУСКА
   =======================================================

   Показывается один раз. Задача — за десять секунд объяснить, что здесь
   есть кроме тестов. Поэтому не пошаговый тур с подсветкой кнопок, а одна
   карточка со списком: её видно целиком и можно закрыть не читая, если
   человек и так знает, зачем пришёл. */

.qst-welcome {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: qstWelcomeFade 0.2s ease;
}

.qst-welcome.is-leaving {
    animation: qstWelcomeFade 0.2s ease reverse forwards;
}

@keyframes qstWelcomeFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.qst-welcome-card {
    width: 100%;
    max-width: 440px;
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 26px 24px 20px;
    border-radius: 22px;
    background: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    animation: qstWelcomeRise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes qstWelcomeRise {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.qst-welcome-head {
    margin-bottom: 20px;
    text-align: center;
}

.qst-welcome-title {
    font-size: 1.35em;
    font-weight: 700;
    /* Заголовок в две строки на узком экране не должен рвать слово пополам */
    text-wrap: balance;
}

.qst-welcome-sub {
    margin-top: 6px;
    font-size: 0.92em;
    line-height: 1.45;
    color: var(--secondary-text-color);
}

.qst-welcome-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qst-welcome-step {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    /* Появляются по очереди — взгляд успевает пройти сверху вниз */
    animation: qstWelcomeStepIn 0.3s ease backwards;
    animation-delay: calc(140ms + var(--step-order, 0) * 60ms);
}

@keyframes qstWelcomeStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.qst-welcome-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb, 52, 152, 219), 0.12);
    color: var(--accent);
}

.qst-welcome-step-icon svg,
.qst-welcome-step-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.qst-welcome-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qst-welcome-step-title {
    font-weight: 600;
    font-size: 0.98em;
}

.qst-welcome-step-desc {
    font-size: 0.86em;
    line-height: 1.4;
    color: var(--secondary-text-color);
}

.qst-welcome-actions {
    margin-top: 22px;
}

.qst-welcome-start {
    width: 100%;
    padding: 13px 18px;
    border: none;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.qst-welcome-start:hover { filter: brightness(1.06); }
.qst-welcome-start:active { transform: scale(0.99); }

.qst-welcome-start:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .qst-welcome-card {
        padding: 22px 18px 18px;
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qst-welcome,
    .qst-welcome-card,
    .qst-welcome-step {
        animation: none;
    }
}


/* =======================================================
   ПРИВЕТСТВИЕ: ВЫБОР ЯЗЫКА И ОЖИВШИЕ ЗНАЧКИ
   ======================================================= */

/* Язык выбирают первым: до этого окна человек его нигде не указывал, и
   приветствие на языке по умолчанию было бы приветствием на чужом. */
.qst-welcome-langs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
}

.qst-welcome-lang {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.86em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.qst-welcome-lang:hover {
    border-color: var(--accent);
    color: var(--text-color);
}

.qst-welcome-lang.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.qst-welcome-lang:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* --- значки разделов --- */

/* Анимация идёт по внутренним путям значка, а не по самой <svg>: у детей
   lucide нет заливки, и transform-box: fill-box для них вырожден — значок
   пропадал бы вместо движения. */
.qst-welcome-step-icon svg,
.qst-welcome-step-icon i {
    transform-box: view-box;
    transform-origin: 12px 12px;
    /* Появляются вслед за своей строкой, каждый со своей задержкой */
    animation: qstWelcomeIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(200ms + var(--step-order, 0) * 60ms);
}

@keyframes qstWelcomeIconPop {
    0%   { transform: scale(0.4) rotate(-14deg); opacity: 0; }
    60%  { transform: scale(1.12) rotate(4deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

/* Наведение на строку повторяет тот же жест — приятно и подсказывает,
   что раздел живой, но в покое ничего не мельтешит. */
@media (hover: hover) and (pointer: fine) {
    .qst-welcome-step:hover .qst-welcome-step-icon svg {
        animation: qstWelcomeIconNudge 0.45s ease;
    }
}

@keyframes qstWelcomeIconNudge {
    0%   { transform: scale(1) rotate(0deg); }
    45%  { transform: scale(1.15) rotate(-8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.qst-welcome-step-icon {
    transition: background 0.18s ease;
}

.qst-welcome-step:hover .qst-welcome-step-icon {
    background: rgba(var(--accent-rgb, 52, 152, 219), 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .qst-welcome-step-icon svg,
    .qst-welcome-step-icon i,
    .qst-welcome-step:hover .qst-welcome-step-icon svg {
        animation: none;
    }
}


/* =======================================================
   КНОПКА СМЕНЫ ЯЗЫКА
   =======================================================

   В покое — значок: он сразу говорит, о чём кнопка. Код языка появляется
   только после нажатия, как подтверждение выбора, и сам уходит. Постоянные
   «Ру / En / Қаз» приходилось разгадывать: это текущий язык или тот, на
   который переключит? */

#languageToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Размер держим постоянным: значок и код занимают разное место, и без
       фиксации соседние кнопки дёргались бы на каждое переключение. */
    min-width: 38px;
    line-height: 1;
}

#languageToggle svg,
#languageToggle i {
    width: 19px;
    height: 19px;
    stroke-width: 2;
}

#languageToggle.is-flashing {
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: 0.02em;
    animation: langCodeIn 0.22s ease;
}

@keyframes langCodeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #languageToggle.is-flashing { animation: none; }
}


/* =======================================================
   ОПАСНАЯ ЗОНА: ОЧИСТКА КАЛЕНДАРЯ ПОВТОРЕНИЙ
   =======================================================

   Отделена от списка чертой и цветом. Кнопка не выглядит как обычное
   действие: её находят, когда ищут специально, и не задевают, просматривая
   очередь. */

.forecast-danger {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(239, 68, 68, 0.35);
}

.forecast-danger-text {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--secondary-text-color);
}

.forecast-wipe-btn {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 10px;
    background: transparent;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.forecast-wipe-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.forecast-wipe-btn:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

/* --- окно подтверждения --- */

.forecast-wipe-dialog {
    text-align: left;
}

.forecast-wipe-warn {
    margin: 0 0 14px;
    font-size: 0.92em;
    line-height: 1.5;
    color: var(--secondary-text-color);
}

.forecast-wipe-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88em;
    color: var(--text-color);
}

.forecast-wipe-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: 0.95em;
}

.forecast-wipe-input:focus {
    outline: none;
    border-color: #ef4444;
}

/* Кнопка подтверждения красная и неактивна, пока слово не совпало —
   заблокированное состояние должно читаться, а не выглядеть поломкой. */
.swal-danger-btn {
    background-color: #ef4444 !important;
}

.swal-danger-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* =======================================================
   СРАВНЕНИЕ С ПРОШЛЫМИ ПРОХОЖДЕНИЯМИ
   =======================================================

   Появляется на экране результатов, когда тест по этому файлу проходили не
   впервые. Одна цифра точности не отвечает на вопрос «стало ли лучше» —
   отвечает разница с первым разом, поэтому она вынесена в заголовок и
   покрашена. */

.attempts-compare {
    margin: 18px 0;
    padding: 16px 16px 12px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--container-bg-color);
}

.attempts-compare.hidden {
    display: none;
}

.attempts-compare-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.attempts-compare-title {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-color);
}

.attempts-compare-delta {
    font-size: 1.05em;
    font-weight: 700;
    /* Цифры со знаком — колонкой ровнее, если они моноширинные по ширине */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.attempts-compare-delta.is-up { color: #22c55e; }
.attempts-compare-delta.is-down { color: #ef4444; }
.attempts-compare-delta.is-flat { color: var(--secondary-text-color); }

.attempts-compare-canvas-wrap {
    position: relative;
    height: 180px;
    width: 100%;
}

.attempts-compare-summary {
    margin-top: 10px;
    font-size: 0.82em;
    line-height: 1.4;
    color: var(--secondary-text-color);
    text-align: center;
}

@media (max-width: 480px) {
    .attempts-compare-canvas-wrap { height: 150px; }
    .attempts-compare-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}


/* =======================================================
   СВОИ РАЗДЕЛЫ И РЕЖИМ ПРАВКИ В БИБЛИОТЕКЕ ОБРАЗОВ
   ======================================================= */

/* Кнопка «свой раздел» — не такая же плашка, как готовые разделы: она не
   выбирает, а заводит новое. Пунктир отделяет её от выбора. */
.palace-cat-chip--add {
    border-style: dashed !important;
    opacity: 0.85;
}

.palace-cat-chip--add:hover {
    opacity: 1;
}

/* Зона правки собственной карточки. Скрыта, пока не нажали «Редактировать»:
   раздел иначе менялся случайным касанием при чтении, и заметить это можно
   было только по съехавшему фильтру. */
.palace-modal__editzone[hidden] {
    display: none;
}

.palace-modal__editzone {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    animation: palaceEditIn 0.2s ease;
}

@keyframes palaceEditIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Включённый режим правки виден по самой кнопке — иначе непонятно, почему
   под заголовком вдруг появился блок. */
#palaceModalEdit.is-on {
    background: rgba(var(--accent-rgb, 52, 152, 219), 0.15);
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .palace-modal__editzone { animation: none; }
}


/* =======================================================
   ЖИВЫЕ ЗНАЧКИ ПЛИТОК ДВОРЦА ПАМЯТИ
   =======================================================

   Оба жеста рассказывают, что за плиткой: у «Образов» расслаивается стопка,
   у «Библиотеки» крайняя книга выдвигается с полки. Анимируются внутренние
   части значка, а не он целиком — покачивание иконки не говорит ничего.

   Такт редкий и с большой паузой: это две плитки на видном месте, и
   непрерывное движение превратило бы экран в вывеску. */

/* --- «Образы»: та же расслаивающаяся стопка, что и в настройках --- */
#memoryPalaceArea .palace-tile--mine .palace-tile__icon svg > * {
    transform-box: fill-box;
    transform-origin: center;
    /* Такт короткий и почти без задержки: на телефоне наведения нет, и жест
       обязан случиться сам, пока человек смотрит на экран. Восьмисекундный
       цикл с паузой в шесть с половиной секунд означал, что движение
       увидит только тот, кто специально ждёт. */
    animation-duration: 4.5s;
    animation-timing-function: cubic-bezier(.4, 0, .3, 1);
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

#memoryPalaceArea .palace-tile--mine .palace-tile__icon svg > *:nth-child(1) {
    animation-name: qs-layer-up;
}
#memoryPalaceArea .palace-tile--mine .palace-tile__icon svg > *:nth-child(2) {
    animation-name: qs-layer-down;
}

/* --- «Библиотека»: крайняя книга выдвигается и встаёт обратно ---
   В значке library-big третий ребёнок — наклонная книга справа. Её и
   двигаем: полка остаётся на месте, как ей и положено. */
#memoryPalaceArea .palace-tile--library .palace-tile__icon svg > *:nth-child(3) {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: mp-book-pull 4.5s cubic-bezier(.4, 0, .3, 1) infinite;
    animation-delay: 1.2s;
}

@keyframes mp-book-pull {
    0%, 40%   { transform: translate(0, 0) rotate(0deg); }
    58%       { transform: translate(1.8px, -1.8px) rotate(-11deg); }
    78%       { transform: translate(1.8px, -1.8px) rotate(-11deg); }
    94%, 100% { transform: translate(0, 0) rotate(0deg); }
}

/* Корешок соседней книги едва заметно качнётся следом — будто её задели.
   Второй ребёнок в library-big это вертикальная линия внутри полки. */
#memoryPalaceArea .palace-tile--library .palace-tile__icon svg > *:nth-child(2) {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: mp-book-nudge 4.5s cubic-bezier(.4, 0, .3, 1) infinite;
    animation-delay: 1.2s;
}

@keyframes mp-book-nudge {
    0%, 46%   { transform: rotate(0deg); }
    62%       { transform: rotate(3deg); }
    82%       { transform: rotate(0deg); }
    100%      { transform: rotate(0deg); }
}

/* Касание на телефоне — жест сразу, не дожидаясь следующего такта. */
#memoryPalaceArea .palace-tile:active .palace-tile__icon svg > * {
    animation-duration: 1.4s;
    animation-delay: 0s;
}

/* Наведение — то же самое там, где есть курсор. */
@media (hover: hover) and (pointer: fine) {
    #memoryPalaceArea .palace-tile:hover .palace-tile__icon svg > * {
        animation-delay: 0s;
        animation-duration: 1.6s;
    }
}

@media (prefers-reduced-motion: reduce) {
    #memoryPalaceArea .palace-tile .palace-tile__icon svg > * {
        animation: none;
    }
}


/* =======================================================
   ЖИВЫЕ ЗНАЧКИ НА ГЛАВНОЙ
   =======================================================

   Идут сами, без наведения: на телефоне курсора нет, и жест, доступный
   только по hover, для половины людей просто не существует. Такт общий с
   плитками дворца — 4.5 секунды, движение занимает меньше половины цикла,
   остальное покой. */

/* --- «Работа над ошибками»: прицел берёт цель ---
   В значке target три концентрических круга. Сжимаем их к центру по
   очереди, с небольшим перелётом обратно — читается как наведение, а не
   как пульсация. */
#errorsMarathonButton svg > * {
    transform-box: fill-box;
    transform-origin: center;
    animation: qs-target-lock 4.5s cubic-bezier(.4, 0, .3, 1) infinite;
}
#errorsMarathonButton svg > *:nth-child(1) { animation-delay: 1s; }
#errorsMarathonButton svg > *:nth-child(2) { animation-delay: 1.1s; }
#errorsMarathonButton svg > *:nth-child(3) { animation-delay: 1.2s; }

@keyframes qs-target-lock {
    0%, 44%   { transform: scale(1); }
    58%       { transform: scale(0.82); }
    74%       { transform: scale(1.07); }
    90%, 100% { transform: scale(1); }
}

/* --- «Визуальный тренажёр»: взгляд осматривает кадр ---
   Дети scan-eye: 1–4 — уголки рамки, 5 — зрачок, 6 — контур глаза.
   Зрачок ведёт влево-вправо, рамка следом чуть расходится. */
#visualTrainerButton svg > *:nth-child(5) {
    /* view-box, а не fill-box: у зрачка радиус 1, собственная коробка почти
       вырождена, и сдвиг относительно неё вёл бы себя непредсказуемо. */
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: qs-eye-scan 4.5s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes qs-eye-scan {
    0%, 32%   { transform: translateX(0); }
    48%       { transform: translateX(-3px); }
    66%       { transform: translateX(3px); }
    82%, 100% { transform: translateX(0); }
}

#visualTrainerButton svg > *:nth-child(-n+4) {
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: qs-frame-pulse 4.5s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes qs-frame-pulse {
    0%, 30%   { transform: scale(1); opacity: 1; }
    52%       { transform: scale(1.09); opacity: 0.7; }
    78%, 100% { transform: scale(1); opacity: 1; }
}

/* Касание и наведение — жест сразу, не дожидаясь следующего такта. */
#errorsMarathonButton:active svg > *,
#visualTrainerButton:active svg > * {
    animation-duration: 1.4s;
    animation-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
    #errorsMarathonButton:hover svg > *,
    #visualTrainerButton:hover svg > * {
        animation-duration: 1.6s;
        animation-delay: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    #errorsMarathonButton svg > *,
    #visualTrainerButton svg > * {
        animation: none;
    }
}

/* =======================================================
   ГОТОВЫЕ КАРТЫ КАК РАВНОПРАВНЫЙ ПУТЬ
   =======================================================

   Окно создания открывается само при первом входе. Без этой кнопки человек
   вынужден был сначала отменить создание, чтобы просто посмотреть, что уже
   есть — то есть отказаться от действия ради того, чтобы начать другое. */

.rm-create-alt {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* «или» — не заголовок, а связка между двумя равными путями */
.rm-create-alt-or {
    align-self: center;
    font-size: 0.82em;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--secondary-text-color);
}

.rm-create-alt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Ровняем по главным кнопкам окна: они 48 px, а эта выходила 30 —
       в одном столбце это читалось как сбой вёрстки. */
    min-height: 48px;
}

.rm-create-alt-btn i,
.rm-create-alt-btn svg {
    width: 17px;
    height: 17px;
}

/* =========================================================================
   ВИДИМЫЙ ФОКУС С КЛАВИАТУРЫ
   =========================================================================
   По файлу рассыпано 53 правила, снимающих outline у полей и кнопок, и лишь
   23 из них возвращают взамен хоть какой-то видимый признак фокуса. Для того,
   кто ходит по интерфейсу табом, это значит буквально «непонятно, где я»:
   курсор в поле есть, а на экране ничего не изменилось.

   Правило намеренно устроено так:
   :where() не добавляет специфичности вовсе, поэтому оно не спорит ни с
   одним оформлением; выигрывает оно только за счёт !important — ровно у тех
   правил, что гасят outline без замены. Шесть мест гасят его с !important и
   останутся при своём: их надо править поштучно.

   :focus-visible, а не :focus — по клику мышью кольцо не появится, только
   при навигации с клавиатуры. Так задумано браузером, и это именно то
   поведение, которое здесь нужно. */
/* Текстовые поля и здесь не перечислены — по той же причине: :focus-visible срабатывает
   у них от обычного тапа, и рамка читалась как ошибка ввода, а не как признак фокуса. */
:where(a, button, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: 2px !important;
}

/* =========================================================================
   3D АТЛАС — ОБЪЁМНАЯ КОСТЬ
   =========================================================================
   Плитка называется «3D Атлас», а значок у неё был плоским контуром. Здесь
   тот же подход, что у пирамиды «Дюны», но форма другая, и приём пришлось
   поменять.

   У пирамиды объём собирается из ЧЕТЫРЁХ ГРАНЕЙ — это работает, потому что
   пирамида и есть четыре треугольника. Кость так не разложить: её силуэт —
   не многогранник. Поэтому объём получаем ЭКСТРУЗИЕЙ: берём один силуэт и
   ставим 12 его копий одна за другой по оси Z. Спереди виден силуэт, сбоку —
   торцы всех двенадцати копий, слипающиеся в боковую стенку. Ровно так
   устроен пряник в форме косточки, и на повороте это читается объёмным.

   Силуэт задаётся МАСКОЙ, а не clip-path: маска принимает произвольный SVG,
   поэтому кость собрана из перемычки и четырёх головок — вещей, которые
   полигоном не описать. Одна копия — один элемент, а не пять.

   Головки: r=3.3 при перемычке высотой 4.8 — головка ощутимо толще стержня,
   иначе на 28 пикселях кость читается просто палкой. Наклон -32° сохраняет
   узнаваемость прежнего значка lucide, он был диагональным. */
.bone-3d {
    /* Запас под перспективу: ближние копии под наклоном чуть выходят за
       28x28, а contain: paint режет строго по коробке. Padding расширяет
       область отрисовки, отрицательное поле возвращает след в раскладке к
       28x28 — кроме низа, где у соседних значков margin-bottom: 5px
       (-6 + 5 = -1), чтобы подпись не поехала относительно других плиток. */
    box-sizing: content-box;
    display: block;
    width: 28px;
    height: 28px;
    padding: 6px;
    margin: -6px -6px -1px;
    flex-shrink: 0;

    /* perspective обязана быть на РОДИТЕЛЕ вращающегося слоя. 360px против
       260px у пирамиды: фигура здесь длинная и широкая, и при близкой камере
       дальняя головка становилась заметно мельче ближней — кость выглядела
       не повёрнутой, а кривой. */
    perspective: 360px;

    /* Клетка для перерисовки — та же причина, что у пирамиды: 3D-контекст
       браузер не композитит отдельно. Без неё вращение объявляло бы
       устаревшей отрисовку всей сетки плиток. */
    contain: layout paint;
    isolation: isolate;

    /* Силуэт держим в одном месте: 12 копий ссылаются на эту переменную.

       Пропорции. В первой версии головки были r=3.3 при расстоянии между
       центрами 12 — перемычки между ними оставалось видно всего 5.4 единицы,
       и кость читалась не костью, а комком. Здесь головки разведены к самым
       краям (cx 4.6 и 19.4) и уменьшены до r=2.8: открытой перемычки стало
       9.2 единицы, отношение длины к высоте 20.4 : 10 вместо прежних
       18.6 : 12.4. Разворот на -32° при таком габарите ещё умещается в
       коробку 24x24 (22.6 x 19.3), то есть маска ничего не срезает. */
    --bone-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' transform='rotate(-32 12 12)'%3E%3Crect x='3.5' y='10.1' width='17' height='3.8' rx='1.9'/%3E%3Ccircle cx='4.6' cy='9.8' r='2.8'/%3E%3Ccircle cx='4.6' cy='14.2' r='2.8'/%3E%3Ccircle cx='19.4' cy='9.8' r='2.8'/%3E%3Ccircle cx='19.4' cy='14.2' r='2.8'/%3E%3C/g%3E%3C/svg%3E");
}

.bone-3d .b3d-spin {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    /* Вращение постоянное. Сначала оно было привязано к наведению — из
       осторожности: бесконечные 3D-анимации уже вызывали непрерывную
       перерисовку в меню тем. Но на телефоне наведения не существует вовсе,
       и там кость просто стояла неподвижно.

       Постоянное вращение здесь безопасно по двум причинам, и обе проверены:
       1. Экраны приложения прячутся через .hidden { display: none } — а у
          элемента с display: none анимации не идут в принципе. То есть за
          пределами главного экрана эта анимация выключена сама собой, без
          единой строчки на её выключение.
       2. contain: layout paint выше запирает перерисовку внутри коробки
          40x40. Именно это, судя по комментарию у пирамиды, и прекратило
          моргание в меню тем; там вдобавок был backdrop-filter поверх
          меняющегося содержимого — самая дорогая комбинация, — а у плиток
          главного экрана его нет.

       5.6s, а не 2.8s: значок крутится всё время, что открыт главный экран,
       и рядом с двенадцатью неподвижными плитками быстрое вращение начинает
       дёргать взгляд. На такой скорости это фон, а не мельтешение. */
    animation: bone-orbit 3.2s cubic-bezier(.45, 0, .55, 1) infinite alternate;

    /* Слой у композитора просим постоянно: анимация теперь тоже постоянная,
       пока плитка на экране, а вне его элемент скрыт вместе со слоем. */
    will-change: transform;
}

.bone-3d b {
    position: absolute;
    inset: 0;
    -webkit-mask: var(--bone-mask) center / contain no-repeat;
    mask: var(--bone-mask) center / contain no-repeat;
    background: currentColor;
}

/* 12 копий на глубине 4.2px, шаг ~0.38px — плотнее размера пикселя, поэтому
   сбоку торцы сливаются в сплошную стенку, а не в гребёнку.

   Глубину подбираем под толщину перемычки, а не «на глаз»: после удлинения
   кости стержень стал 3.8 единицы, то есть 4.4 пикселя при отрисовке в 28.
   Кость в сечении примерно кругла, поэтому глубина должна быть примерно
   равна высоте стержня. При прежних 5px против 4.4px в высоту фигура на
   повороте выглядела не костью, а плашкой, положенной на ребро.

   Светотень — НЕПРОЗРАЧНЫМИ цветами (урок пирамиды): с полупрозрачными
   копиями все двенадцать просвечивают друг сквозь друга и силуэт мутнеет.
   Смешиваем с цветом плитки, а не с чёрным, чтобы в светлой теме кость не
   стала чёрным пятном рядом с контурными значками соседей. Передняя копия —
   чистый currentColor, дальше равномерно к 56%: это и даёт боковой стенке
   градиент, читаемый как скруглённый бок. */
/* Светотень СИММЕТРИЧНА: обе крайние копии одинаково светлые, темнеет к
   середине. Это не украшательство, а лечение вполне конкретного дефекта.

   Сначала слои затемнялись монотонно — передний 100%, задний 56%. При
   вращении фигура дважды за оборот встаёт ребром (на 90 и 270 градусах), и
   ровно в этот момент видимая грань меняется с передней на заднюю. При
   монотонной раскраске это мгновенный скачок яркости со 100% на 56% — он и
   читался как два моргания в крайних положениях.

   При симметричной раскраске обе грани выглядят одинаково, поэтому смена
   видимой стороны ничего не меняет на экране. Заодно боковая стенка
   получает подсветку с обоих краёв и темноту посередине — так плоская
   пачка копий больше похожа на скруглённое тело кости. */
.bone-3d b:nth-child(1)  { transform: translateZ(2.1px); }
.bone-3d b:nth-child(2)  { transform: translateZ(1.72px);  background: color-mix(in srgb, currentColor 92%, var(--container-bg-color)); }
.bone-3d b:nth-child(3)  { transform: translateZ(1.34px);  background: color-mix(in srgb, currentColor 84%, var(--container-bg-color)); }
.bone-3d b:nth-child(4)  { transform: translateZ(0.95px);  background: color-mix(in srgb, currentColor 76%, var(--container-bg-color)); }
.bone-3d b:nth-child(5)  { transform: translateZ(0.57px);  background: color-mix(in srgb, currentColor 68%, var(--container-bg-color)); }
.bone-3d b:nth-child(6)  { transform: translateZ(0.19px);  background: color-mix(in srgb, currentColor 62%, var(--container-bg-color)); }
.bone-3d b:nth-child(7)  { transform: translateZ(-0.19px); background: color-mix(in srgb, currentColor 62%, var(--container-bg-color)); }
.bone-3d b:nth-child(8)  { transform: translateZ(-0.57px); background: color-mix(in srgb, currentColor 68%, var(--container-bg-color)); }
.bone-3d b:nth-child(9)  { transform: translateZ(-0.95px); background: color-mix(in srgb, currentColor 76%, var(--container-bg-color)); }
.bone-3d b:nth-child(10) { transform: translateZ(-1.34px); background: color-mix(in srgb, currentColor 84%, var(--container-bg-color)); }
.bone-3d b:nth-child(11) { transform: translateZ(-1.72px); background: color-mix(in srgb, currentColor 92%, var(--container-bg-color)); }
.bone-3d b:nth-child(12) { transform: translateZ(-2.1px); }

/* Постоянный наклон вперёд: смотрим на кость чуть сверху, так торец виден
   даже в положении покоя. Старт не с нуля, а с -24°, потому что при 0°
   фигура повёрнута к нам плашмя и выглядит плоской — именно это положение
   и было бы видно на паузе. */
/* Качание, а не полный оборот — и это вынужденно.
   Фигура собрана экструзией: двенадцать плоских копий силуэта, разнесённых по
   оси Z. У такой конструкции есть врождённое слабое место — положение ребром.
   На 90 и 270 градусах все копии стоят к экрану строго перпендикулярно, их
   проекция обращается в ноль, и кость на пару кадров попросту исчезает. Это и
   были два моргания, ровно два за оборот, ровно в крайних положениях.

   Подкрасить это нельзя: сначала я решил, что виноват скачок яркости при
   смене видимой грани, сделал светотень симметричной — не помогло, потому что
   пропадала сама геометрия, а не цвет.

   Поэтому крайних положений просто нет: размах ±68 градусов, до ребра кость
   не доходит. Объём при этом виден всё время, а на 28 пикселях разница между
   облётом и качанием почти незаметна — зато нет провалов.

   alternate вместо повторения с начала: так возврат идёт тем же путём и
   стыка между концом и началом не существует в принципе. Плавность на
   разворотах даёт cubic-bezier(.45,0,.55,1) — на краях замедление, в
   середине ход ровный. */
@keyframes bone-orbit {
    0%   { transform: rotateX(12deg) rotateY(-68deg); }
    100% { transform: rotateX(12deg) rotateY(68deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bone-3d .b3d-spin {
        animation: none;
        /* Анимации нет — значит и положения покоя из кадра 0% нет; задаём
           тот же угол напрямую, иначе кость встала бы к нам плашмя, и
           объём, ради которого всё затевалось, пропал бы вовсе. */
        transform: rotateX(12deg) rotateY(-24deg);
        /* Слой композитора без анимации незачем держать. */
        will-change: auto;
    }
}

/* =========================================================================
   МЕСТО ПОД ОДИНОЧНУЮ КАРТИНКУ В СООБЩЕНИИ
   =========================================================================
   Это причина того, что чат открывался «то в середине, то в начале».

   Сообщение с одной картинкой до её загрузки занимало НОЛЬ высоты:
   заполнитель .blur-up-placeholder объявлен position: absolute; inset: 0 —
   такой элемент высоты родителю не даёт вовсе, — а обе <img> внутри до
   загрузки пусты и тоже нулевые. Прокрутка вставала на дно по этой нулевой
   высоте, затем картинки догружались и добавляли содержимое НИЖЕ точки
   остановки. Чем медленнее сеть, тем выше оказывалась остановка.

   Галереи из 2-9 картинок этим не страдали: у .gallery-item задан
   aspect-ratio, и место резервируется само. Не повезло ровно одиночным.

   Побочно чинится и второе: мерцающий заполнитель, ради которого весь
   blur-up и затевался, до сих пор не был виден НИ РАЗУ — его рисовали
   внутри коробки нулевой высоты.

   200px — не угаданное число, а компромисс: точную высоту знать неоткуда,
   размеры картинки нигде не хранятся, а 200px близки к типичной высоте
   картинки в переписке. После загрузки ограничение снимается, и коробка
   принимает настоящий размер: остаточный сдвиг ограничен разницей с 200px
   вместо прежнего «с нуля до полной высоты». */
.blur-up-container:not(.loaded) {
    min-height: 200px;
}

/* =========================================================================
   НАВЕДЕНИЯ, СРАБАТЫВАВШИЕ РЫВКОМ
   =========================================================================
   Эти правила :hover меняют transform, opacity или filter, но ни одно правило
   для тех же элементов не задавало transition. Значит эффект применялся
   мгновенно, скачком: кнопка не подъезжала, а перескакивала.

   Список получен машинным разбором и ПРОВЕРЕН поштучно — из 35 найденных
   целей настоящими оказались 24. Одиннадцать были ложными по двум причинам,
   и обе стоит помнить:

   1. Составная цель против простой. Для `.control-btn.hangup:hover` переход
      задан на базовом `.control-btn` — это другая строка селектора, и разбор
      по совпадению строк её не видел. Так отсеялись `.control-btn.hangup`,
      `.advanced-send-btn.is-stoppable`, `.upload-btn.confirm`,
      `.header-controls.scrolled-fade-out`, `#aiScrollToBottomBtn.visible`,
      `.parser-fs-tool-btn.parser-fs-tool-primary`,
      `.btn-suggestion-action.generate-btn`.
   2. Переход в соседнем правиле. Первая проверка читала строки вперёд от
      упоминания класса и залезала в следующее правило, приписывая цели чужой
      transition. Правильная проверка смотрит РАЗОБРАННЫЕ правила.

   Отдельно исключён `.header-actions button.btn`: класс `.btn` слишком общий,
   и уверенно доказать отсутствие перехода у него не вышло.

   Правило одно и стоит в конце файла намеренно. Ни у одной из перечисленных
   целей transition не задан НИГДЕ, поэтому конфликтовать здесь не с чем — это
   единственное объявление свойства, и специфичность роли не играет.

   Список свойств явный, не `all`: анимируется ровно то, что меняет наведение.
   `transition: all` в этом файле встречается 219 раз и тянет за собой всё
   подряд, включая дорогое, — повторять это незачем.

   no-preference: у кого в системе включено «уменьшить движение», всё остаётся
   мгновенным, как было до этой правки. */
@media (prefers-reduced-motion: no-preference) {

    .roadmap-btn,
    .endless-mode-btn,
    .kick-btn,
    #sendBtn,
    #aiChatSendBtn,
    #chatTextMagicBtn,
    #aiChatTextMagicBtn,
    #chatMicBtn,
    .ai-chat-attach-btn,
    .gallery-item,
    .roadmap-tab-close,
    #roadmapEditMapBtn,
    #regenerateRoadmapBtn,
    .graph-rect,
    label[for="interceptorSrtInput"],
    #startInterceptorBtn,
    #progConfigStartBtn,
    .wiki-main-img,
    .card-action-btn,
    .theme-lang-option,
    .cookie-consent-btn,
    .cropper-btn-primary,
    .ie-btn-primary,
    .palace-cat-chip--add {
        transition: transform 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
    }
}

/* =========================================================================
   ПЛАВАЮЩАЯ КНОПКА «СОЗДАТЬ ПРОГРАММУ» НАД НИЖНЕЙ ПАНЕЛЬЮ
   =========================================================================
   Кнопка пряталась под нижней панелью навигации на телефоне. Причин было две,
   и каждой хватило бы самой по себе.

   Первая: у мобильного правила кнопки стояло bottom: 0%, то есть у самого низа
   окна — ровно там, где лежит панель. Комментарий рядом при этом гласил «Выше,
   если есть нижнее меню навигации»: значение делало противоположное
   написанному, и по комментарию причину было не найти.

   Вторая, менее очевидная: правило кнопки жило в @media (max-width: 600px), а
   панель показывается при max-width: 768px. В полосе 601-768px кнопка вообще
   не знала, что панель уже на экране, и пряталась под ней даже с исправленным
   отступом.

   Поэтому условие здесь — ровно то же, при котором появляется сама панель, а
   отступ считается из её настоящих размеров (.mobile-bottom-nav: высота
   75px плюс системный вырез снизу), а не подобран на глаз. 16px сверх того —
   воздух между кнопкой и панелью.

   left намеренно не трогаем: на узких экранах он задан отдельным правилом
   (5px), и менять положение по горизонтали здесь незачем — сломано было
   только вертикальное. */
@media (max-width: 768px) {
    .floating-create-btn {
        bottom: calc(75px + env(safe-area-inset-bottom, 0px) + 16px);
    }
}

/* =========================================================================
   ХОД РАССУЖДЕНИЙ МОДЕЛИ
   =========================================================================
   Настоящая сводка размышлений, которую вернула модель. До этого чат показывал
   три выдуманных «шага обдумывания» — они остались, но теперь честно означают
   только «идёт работа», а сами рассуждения приходят вместе с ответом.

   Свёрнуто по умолчанию и стоит после ответа: человек пришёл за ответом, а
   рассуждения нужны, только когда он хочет проверить, как модель к нему
   пришла.

   Оформление намеренно тише самого ответа — приглушённый цвет, мелкий шрифт,
   без рамки вокруг всего блока. Рассуждения не должны спорить за внимание с
   тем, ради чего человек писал. */
.ai-thoughts {
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
}

.ai-thoughts > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    color: var(--secondary-text-color);
    font-size: .82em;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Стандартный маркер убираем в обоих движках: у WebKit он свой. */
.ai-thoughts > summary::-webkit-details-marker { display: none; }

.ai-thoughts > summary svg,
.ai-thoughts > summary i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Стрелка-указатель: рисуем сами, чтобы она поворачивалась при раскрытии. */
.ai-thoughts > summary::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .18s ease;
}

.ai-thoughts[open] > summary::after {
    transform: rotate(-135deg) translate(-1px, -1px);
}

.ai-thoughts > summary:hover {
    color: var(--text-color);
}

.ai-thoughts-body {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--input-bg-color);
    color: var(--secondary-text-color);
    font-size: .85em;
    line-height: 1.55;

    /* Рассуждения бывают длинными. Ограничиваем высоту и прокручиваем внутри,
       иначе они выталкивают из виду сам ответ, под которым стоят. */
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-thoughts-body p:first-child { margin-top: 0; }
.ai-thoughts-body p:last-child { margin-bottom: 0; }

.ai-thoughts-body pre,
.ai-thoughts-body code {
    font-size: .95em;
}

/* Длинные формулы и код внутри рассуждений прокручиваем по горизонтали, а не
   растягиваем ими пузырь сообщения. */
.ai-thoughts-body pre {
    overflow-x: auto;
}


/* ==========================================================
   ЛЕГЕНДА ПАНЕЛИ ИНСТРУМЕНТОВ
   ========================================================== */

/* Кнопка легенды до первого открытия зовёт к себе: пульсирует и светится.
   Класс снимается навсегда после первого нажатия (см. HeaderLegend), поэтому
   анимация не превращается в постоянный раздражитель. */
.header-legend-btn.legend-attention {
    color: var(--accent-color, #58a6ff);
    animation: legend-attention 2.2s ease-in-out infinite;
}

/* Цвет свечения берём от акцента темы через color-mix, а не через
   rgba(var(--accent-rgb, …)): переменной --accent-rgb в проекте нет, и такая
   запись всегда давала бы один и тот же синий мимо выбранной темы. */
/* Родная объёмная тень кнопки сохраняется в обоих кадрах — иначе на время
   пульсации кнопка становится плоской и снова выпадает из ряда соседей. */
@keyframes legend-attention {
    0%, 100% {
        box-shadow: var(--neumorph-shadow-soft-sm), 0 0 0 0 color-mix(in srgb, var(--accent-color) 55%, transparent);
        transform: scale(1);
    }
    50% {
        box-shadow: var(--neumorph-shadow-soft-sm), 0 0 0 8px color-mix(in srgb, var(--accent-color) 0%, transparent);
        transform: scale(1.08);
    }
}

/* Пульсация — украшение, а не смысл: тем, кто просил убрать движение, оставляем
   только цвет. Кнопка при этом всё равно выделяется среди серых соседей. */
@media (prefers-reduced-motion: reduce) {
    .header-legend-btn.legend-attention {
        animation: none;
        box-shadow: var(--neumorph-shadow-soft-sm), 0 0 0 2px color-mix(in srgb, var(--accent-color) 50%, transparent);
    }
}

.legend-modal {
    max-width: 520px;
}

.legend-hint {
    margin: 0 0 14px;
    color: var(--secondary-text-color);
    font-size: 0.88em;
    line-height: 1.45;
}

/* Список может быть длинным (полтора десятка кнопок), поэтому прокручивается
   сам, а не растит окно за пределы экрана. */
.legend-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: min(56vh, 460px);
    overflow-y: auto;
    padding-right: 4px;
}

.legend-section {
    margin: 14px 0 6px;
    color: var(--secondary-text-color);
    font-size: 0.74em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legend-section:first-child {
    margin-top: 0;
}

.legend-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 6px;
    border-radius: 10px;
}

.legend-row:hover {
    background: var(--input-bg-color);
}

.legend-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--input-bg-color);
    color: var(--accent-color, #58a6ff);
}

.legend-row-icon i,
.legend-row-icon svg {
    width: 18px;
    height: 18px;
}

.legend-row-text {
    min-width: 0;
}

.legend-row-name {
    font-weight: 600;
    font-size: 0.95em;
}

.legend-row-desc {
    margin-top: 2px;
    color: var(--secondary-text-color);
    font-size: 0.86em;
    line-height: 1.45;
}

.legend-empty {
    padding: 18px 4px;
    color: var(--secondary-text-color);
    text-align: center;
}
/* Баннер раздела приключений: широкая обложка втекает в градиент карточки,
   а не лежит на ней прямоугольной наклейкой */
.dnd-banner-img {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: 1;
    width: auto;
    max-width: 72%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    transform: none;
    filter: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .5) 24%, #000 54%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .5) 24%, #000 54%);
}

.game-banner-card:hover .dnd-banner-img {
    transform: scale(1.05);
}


/* ===== Затемнение карточек игр в тёмных темах =====
   Баннеры покрашены инлайновыми градиентами под светлый фон и на тёмных темах
   светятся как фонари. Фон инлайновый и правилом не перебивается, поэтому
   кладём поверх затемняющий слой; подпись поднимаем над ним, чтобы гасли
   только заливка и картинка, а текст остался читаемым. */
body.dark-mode .game-banner-card::after,
body.oled-mode .game-banner-card::after,
body.synthwave-mode .game-banner-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background: rgba(6, 5, 12, 0.42);
}
/* На «Тьме» фон полностью чёрный, и разница с карточкой резче всего. */
body.oled-mode .game-banner-card::after { background: rgba(0, 0, 0, 0.52); }

body.dark-mode .game-banner-card > .game-banner-content,
body.oled-mode .game-banner-card > .game-banner-content,
body.synthwave-mode .game-banner-card > .game-banner-content {
    position: relative;
    z-index: 3;
}
/* Рамка карточки на тёмном фоне тоже слишком яркая. */
body.dark-mode .game-banner-card,
body.oled-mode .game-banner-card,
body.synthwave-mode .game-banner-card { border-color: rgba(255, 255, 255, 0.08); }

/* Гравюра «Приключений» нарисована чёрным по белому, и в тёмных темах именно она
   делает карточку светлым пятном — фон-то у неё тёмно-лиловый. Инвертируем, как
   инвертируются образы внутри самой игры. */
body.dark-mode .dnd-banner-img,
body.oled-mode .dnd-banner-img,
body.synthwave-mode .dnd-banner-img { filter: invert(1) brightness(0.82); }

/* ==================================================================
   ОБОИ ИНТЕРФЕЙСА И СТЕКЛО
   ------------------------------------------------------------------
   Классы на body ставит модуль Wallpaper (script.js):
     has-wallpaper — под интерфейсом слой #appWallpaper с картинкой текущего окна;
     wp-chat / wp-ai — у чата / ИИ-чата свои обои: картинка приходит переменными
                       --wp-chat / --wp-ai, потому что их оверлеи лежат поверх слоя;
     glass — любое из перечисленного: включает стеклянные токены тем.
   Замысел по эскизу пользователя: фото резкое по всей странице, стеклом становятся
   только блоки — плитки, панель колод, окна, заголовки-плашки. Неоморфные двойные
   тени (светлая с одной стороны, тёмная с другой) рассчитаны на сплошной фон и на
   фото читались как кривой ореол — под стеклом их заменяет одна мягкая тень вниз
   и блик по верхней кромке. Панели с вдавленной тенью сохраняют её, но тоже стеклом.
   ================================================================== */
#appWallpaper {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    display: none;
}
body.has-wallpaper #appWallpaper { display: block; }
/* Фон body уходит на холст страницы (у html фона нет), обои (z-index: -1) рисуются поверх холста.
   Прозрачный фон давал белый холст под View Transitions — смена темы белела. */
body.has-wallpaper { background-color: var(--bg-color); }
/* На время перехода между экранами холст прозрачный: снимок корня несёт его
   фон и перекрывал бы обои, отчего картинка моргала на каждом переходе.
   Вне перехода фон остаётся — без него белеет холст при смене темы. */
html.vt-view body.has-wallpaper { background-color: transparent; }
/* Вуаль лёгкая: страхует читаемость, картинку не прячет. */
#appWallpaper::after { content: ''; position: absolute; inset: 0; background: var(--wp-scrim); }

/* --- Стеклянные токены по темам --- */
body.glass {
    --wp-scrim: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .12) 40%, rgba(255, 255, 255, .28));
    --glass-fill: rgba(255, 255, 255, 0.52);
    --glass-fill-2: rgba(255, 255, 255, 0.40);
    --glass-border: rgba(255, 255, 255, 0.72);
    /* Тени стекла: одна глубокая тёмная тень (пользователь: «как у кнопок шапки теста»). */
    --glass-shadow: 0 6px 18px rgba(20, 30, 50, 0.24), 0 1px 3px rgba(20, 30, 50, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --glass-shadow-sm: 0 4px 12px rgba(20, 30, 50, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.70);
    --glass-shadow-menu: 0 14px 36px rgba(20, 30, 50, 0.32), 0 2px 6px rgba(20, 30, 50, 0.16);
    --glass-inset: inset 0 2px 10px rgba(40, 50, 70, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    --glass-blur: 10px;
    --glass-panel: rgba(255, 255, 255, 0.58);   /* панель раздела с текстом */
    --glass-dense: rgba(255, 255, 255, 0.78);   /* модалки, листы, меню */
    --glass-menu: rgba(255, 255, 255, 0.94);    /* меню и тултипы, которым размытие недоступно */
    --container-bg-color: var(--glass-fill);
    --button-secondary-bg: var(--glass-fill);
    --button-secondary-hover-bg: rgba(255, 255, 255, 0.72);
    --input-bg-color: var(--glass-fill-2);
    --input-hover-bg-color: rgba(255, 255, 255, 0.62);
    --neumorph-shadow-soft: var(--glass-shadow);
    --neumorph-shadow-soft-sm: var(--glass-shadow-sm);
    --neumorph-shadow-inset: var(--glass-inset);
    --shadow-color: rgba(40, 50, 70, 0.18);
    /* Сырые неоморфные тени (не через переменную) разбросаны по приложению: их цвета —
       сплошные цвета темы — на фото ложились грязными пятнами. Делаем прозрачными. */
    --neumorph-shadow-dark: rgba(40, 50, 70, 0.16);
    --neumorph-shadow-light: rgba(255, 255, 255, 0.55);
    --neumorph-bg: var(--glass-fill-2);
}
body.glass.dark-mode, body.glass.synthwave-mode, body.glass.oled-mode {
    --neumorph-shadow-dark: rgba(0, 0, 0, 0.30);
    --neumorph-shadow-light: rgba(255, 255, 255, 0.06);
}
body.glass.claude-mode {
    --glass-panel: rgba(246, 241, 232, 0.62);
    --glass-dense: rgba(246, 241, 232, 0.82);
    --glass-menu: rgba(246, 241, 232, 0.95);
    --glass-fill: rgba(246, 241, 232, 0.56);
    --glass-fill-2: rgba(246, 241, 232, 0.44);
    --glass-border: rgba(255, 250, 240, 0.72);
    --button-secondary-hover-bg: rgba(246, 241, 232, 0.76);
    --input-hover-bg-color: rgba(246, 241, 232, 0.66);
}
body.glass.dark-mode,
body.glass.synthwave-mode {
    --wp-scrim: linear-gradient(180deg, rgba(6, 8, 16, .26), rgba(6, 8, 16, .16) 40%, rgba(6, 8, 16, .32));
    --glass-fill: rgba(22, 25, 34, 0.42);
    --glass-fill-2: rgba(22, 25, 34, 0.36);
    --glass-panel: rgba(22, 25, 34, 0.56);
    --glass-dense: rgba(22, 25, 34, 0.82);
    --glass-menu: rgba(22, 25, 34, 0.94);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 6px 18px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --glass-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --glass-shadow-menu: 0 14px 36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --glass-inset: inset 0 3px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --button-secondary-hover-bg: rgba(52, 58, 72, 0.62);
    --input-hover-bg-color: rgba(34, 38, 50, 0.62);
    --shadow-color: rgba(0, 0, 0, 0.45);
}
body.glass.synthwave-mode {
    --glass-fill: rgba(28, 18, 48, 0.44);
    --glass-fill-2: rgba(28, 18, 48, 0.38);
    --glass-panel: rgba(28, 18, 48, 0.58);
    --glass-dense: rgba(28, 18, 48, 0.84);
    --glass-menu: rgba(28, 18, 48, 0.94);
}
body.glass.oled-mode {
    --wp-scrim: linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .20) 40%, rgba(0, 0, 0, .36));
    --glass-fill: rgba(0, 0, 0, 0.40);
    --glass-fill-2: rgba(0, 0, 0, 0.34);
    --glass-panel: rgba(0, 0, 0, 0.56);
    --glass-dense: rgba(0, 0, 0, 0.84);
    --glass-menu: rgba(0, 0, 0, 0.94);
    --glass-border: rgba(255, 255, 255, 0.16);
    --glass-shadow: 0 6px 18px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --glass-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --glass-shadow-menu: 0 14px 36px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.40);
    --glass-inset: inset 0 3px 14px rgba(0, 0, 0, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --button-primary-bg: rgba(31, 31, 31, 0.70);
    --button-secondary-hover-bg: rgba(24, 24, 24, 0.62);
    --input-hover-bg-color: rgba(20, 20, 20, 0.60);
}
/* Слабое устройство (glass-lite): размытия нет (см. ниже), читаемость даёт плотность заливки. */
body.glass.glass-lite { --glass-fill: rgba(255, 255, 255, 0.80); --glass-fill-2: rgba(255, 255, 255, 0.74); --glass-panel: rgba(255, 255, 255, 0.86); --glass-dense: rgba(255, 255, 255, 0.95); }
body.glass.glass-lite.claude-mode { --glass-fill: rgba(246, 241, 232, 0.82); --glass-fill-2: rgba(246, 241, 232, 0.76); --glass-panel: rgba(246, 241, 232, 0.88); --glass-dense: rgba(246, 241, 232, 0.96); }
body.glass.glass-lite.dark-mode,
body.glass.glass-lite.synthwave-mode { --glass-fill: rgba(22, 25, 34, 0.76); --glass-fill-2: rgba(22, 25, 34, 0.70); --glass-panel: rgba(22, 25, 34, 0.84); --glass-dense: rgba(22, 25, 34, 0.95); }
body.glass.glass-lite.oled-mode { --glass-fill: rgba(0, 0, 0, 0.74); --glass-fill-2: rgba(0, 0, 0, 0.68); --glass-panel: rgba(0, 0, 0, 0.84); --glass-dense: rgba(0, 0, 0, 0.95); }
/* Сенсорные: размытие мягче — на телефоне оно дороже, чем на ПК. */
@media (hover: none) and (pointer: coarse) {
    body.glass { --glass-blur: 8px; }
}

/* --- Главный экран: обёртка прозрачна, стекло на блоках --- */
body.has-wallpaper .container {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.has-wallpaper #fileUploadArea { border-color: transparent; }
/* Панель колод: стекло с вдавленной тенью (инлайновый var(--neumorph-shadow-inset) берёт --glass-inset). */
body.has-wallpaper #decksArea {
    background: var(--glass-fill) !important;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
}
body.has-wallpaper .main-actions-grid > button,
body.has-wallpaper .main-actions-grid > label {
    color: var(--text-color);
    background: var(--glass-fill) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}
/* Заголовок группы над фото — плашкой, как на эскизе: буквы сами по себе пропадают
   на пёстром снимке. Обёртка — flex-колонка, поэтому ширину задаём по тексту явно. */
body.has-wallpaper .action-group-title {
    display: inline-flex;
    width: max-content;
    max-width: calc(100% - 30px);
    align-self: flex-start;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-sm);
    color: var(--text-color);
    opacity: 1;
    text-shadow: none;
}
body.has-wallpaper .action-group-title::after,
body.has-wallpaper .action-group-title::before { display: none; }
/* Текст над фото: лёгкая тень возвращает контраст, не трогая цвета тем. */
body.has-wallpaper .main-actions-grid,
body.has-wallpaper .container h1, body.has-wallpaper .container h2, body.has-wallpaper .container h3 {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}
body.has-wallpaper.dark-mode .main-actions-grid, body.has-wallpaper.synthwave-mode .main-actions-grid, body.has-wallpaper.oled-mode .main-actions-grid,
body.has-wallpaper.dark-mode .container h1, body.has-wallpaper.dark-mode .container h2, body.has-wallpaper.dark-mode .container h3,
body.has-wallpaper.synthwave-mode .container h1, body.has-wallpaper.synthwave-mode .container h2, body.has-wallpaper.synthwave-mode .container h3,
body.has-wallpaper.oled-mode .container h1, body.has-wallpaper.oled-mode .container h2, body.has-wallpaper.oled-mode .container h3 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* --- Размытие блоков ---
   Мобильное правило оптимизации гасит backdrop-filter у всего подряд: !important и в :not()
   среди классов стоит #themeDropdownContent — то есть у него специфичность с ID. Перебиваем
   удвоенным ID (#x#x считается как два). Дропдауны и навбар на телефоне размываются давно,
   железо это тянет. Гасит размытие только glass-lite — его модуль Wallpaper ставит реально
   слабому устройству (≤2 ГБ / ≤2 ядра) или по системной просьбе убрать прозрачность;
   low-power для этого не годится: он достаётся любому телефону с deviceMemory ≤ 4. */
body.glass:not(.glass-lite) #fileUploadArea#fileUploadArea .main-actions-grid > button,
body.glass:not(.glass-lite) #fileUploadArea#fileUploadArea .main-actions-grid > label,
body.glass:not(.glass-lite) #fileUploadArea#fileUploadArea .action-group-title,
body.glass:not(.glass-lite) #decksArea#decksArea,
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .advanced-chat-header,
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .chat-sidebar,
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .chat-input-wrapper,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-header,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-input-area,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-sidebar {
    backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
}

/* --- Панели с текстом ---
   Главный экран — плитки на фото, но его текстовые блоки («Недавно использованные»,
   «Продолжить», «Активность обучения», поиск) — стеклянные панели: заголовки и цифры
   на фото не читались. Любой другой раздел получает одну панель на корне: что бы ни
   было свёрстано внутри (тест, настройка, результаты, курсы), оно лежит на стекле.
   Игры, карты, атлас, меню игр и инструментов не трогаем — у них свой фон или плитки. */
body.has-wallpaper #recentFilesArea,
body.has-wallpaper #savedSessionArea,
body.has-wallpaper #activityStatsArea,
body.has-wallpaper #searchContainer {
    background: var(--glass-panel) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--glass-shadow);
}
body.has-wallpaper #searchResultsContainer,
body.has-wallpaper #gradusFoldersContainer,
body.has-wallpaper #quizSetupArea,
body.has-wallpaper #cheatSheetResultArea,
body.has-wallpaper #resultsArea,
body.has-wallpaper #parserArea,
body.has-wallpaper #coursesArea,
body.has-wallpaper #visualTrainerArea,
body.has-wallpaper #courseDetailArea,
body.has-wallpaper #fitnessArea,
body.has-wallpaper #lessonViewArea,
body.has-wallpaper #medicalCalcArea,
body.has-wallpaper #reflectionArea,
body.has-wallpaper #reflectionJoinArea,
body.has-wallpaper #videoInterceptorArea,
body.has-wallpaper #feynmanRoomArea,
body.has-wallpaper #favoritesArea,
body.has-wallpaper #testVerifierArea,
body.has-wallpaper #zonkLobbyArea,
body.has-wallpaper #zonkRiskSetupArea,
body.has-wallpaper #zonkDuelSetupArea,
body.has-wallpaper #zonkPracticeSetupArea,
body.has-wallpaper #zonkShopArea,
body.has-wallpaper #factsArea {
    background: var(--glass-panel) !important;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 12px;
    box-shadow: var(--glass-shadow);
}
body.has-wallpaper footer,
body.has-wallpaper .seo-footer-info { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
/* Размытие панелей — тем же приёмом с удвоенным ID. */
body.glass:not(.glass-lite) #recentFilesArea#recentFilesArea,
body.glass:not(.glass-lite) #savedSessionArea#savedSessionArea,
body.glass:not(.glass-lite) #activityStatsArea#activityStatsArea,
body.glass:not(.glass-lite) #searchContainer#searchContainer,
body.glass:not(.glass-lite) #searchResultsContainer#searchResultsContainer,
body.glass:not(.glass-lite) #gradusFoldersContainer#gradusFoldersContainer,
body.glass:not(.glass-lite) #quizSetupArea#quizSetupArea,
body.glass:not(.glass-lite) #cheatSheetResultArea#cheatSheetResultArea,
body.glass:not(.glass-lite) #resultsArea#resultsArea,
body.glass:not(.glass-lite) #coursesArea#coursesArea,
body.glass:not(.glass-lite) #visualTrainerArea#visualTrainerArea,
body.glass:not(.glass-lite) #courseDetailArea#courseDetailArea,
body.glass:not(.glass-lite) #medicalCalcArea#medicalCalcArea,
body.glass:not(.glass-lite) #reflectionArea#reflectionArea,
body.glass:not(.glass-lite) #reflectionJoinArea#reflectionJoinArea,
body.glass:not(.glass-lite) #videoInterceptorArea#videoInterceptorArea,
body.glass:not(.glass-lite) #feynmanRoomArea#feynmanRoomArea,
body.glass:not(.glass-lite) #favoritesArea#favoritesArea,
body.glass:not(.glass-lite) #testVerifierArea#testVerifierArea,
body.glass:not(.glass-lite) #zonkLobbyArea#zonkLobbyArea,
body.glass:not(.glass-lite) #zonkRiskSetupArea#zonkRiskSetupArea,
body.glass:not(.glass-lite) #zonkDuelSetupArea#zonkDuelSetupArea,
body.glass:not(.glass-lite) #zonkPracticeSetupArea#zonkPracticeSetupArea,
body.glass:not(.glass-lite) #zonkShopArea#zonkShopArea,
body.glass:not(.glass-lite) #factsArea#factsArea {
    backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
}

/* --- Модалки, нижние листы, меню: плотное стекло ---
   Полупрозрачная заливка плиток здесь не годится: в светлой теме модалка над тёмным
   оверлеем становилась серой, лист «Обои» просвечивал чат. */
body.glass .modal-content,
body.glass .swal2-popup,
body.glass #themeDropdownContent,
body.glass .user-dropdown,
body.glass .dropdown-content { background: var(--glass-dense); }
body.glass .bs-sheet.bs-sheet { background: var(--glass-dense) !important; }
body.glass:not(.glass-lite) .bs-sheet.bs-sheet {
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

/* --- Подсказки и поповеры: плотное стекло ---
   Все они красятся var(--container-bg-color), а в стеклянных темах этот
   токен переопределён на --glass-fill с прозрачностью 0.42. Прозрачность
   тут не украшение: сквозь облачко читался текст под ним, и на экране
   оказывались две надписи разом, ни одной до конца.
   Правило только для стеклянных тем — в обычных токен и так непрозрачный. */
body.glass .cookie-consent-banner,
body.glass .undo-bar,
body.glass .scrollbar-tooltip,
body.glass .scrollbar-preview-tooltip,
body.glass .persistent-tooltip,
body.glass .grounded-icon-tooltip,
body.glass .ch-notify-popover,
body.glass .swipe-hint,
body.glass .user-dropdown-actions,
body.glass .mindmap-edit-hint {
    background: var(--glass-dense) !important;
}
/* Полноэкранный редактор — тот же случай, но крупнее: сквозь панель читалась
   вся страница под ней, вплоть до кнопок. Здесь прозрачность мешает сильнее
   всего — в редакторе человек работает с текстом. */
body.glass .parser-fs-inner {
    background: var(--glass-dense) !important;
}
body.glass:not(.glass-lite) .parser-fs-inner {
    backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
}
/* Затемнение под ним тоже размываем: иначе поверх чёткой страницы висит
   матовая панель, и края выглядят вырезанными. */
body.glass:not(.glass-lite) .parser-fs-modal {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

body.glass:not(.glass-lite) .cookie-consent-banner,
body.glass:not(.glass-lite) .undo-bar,
body.glass:not(.glass-lite) .scrollbar-tooltip,
body.glass:not(.glass-lite) .scrollbar-preview-tooltip,
body.glass:not(.glass-lite) .persistent-tooltip,
body.glass:not(.glass-lite) .grounded-icon-tooltip,
body.glass:not(.glass-lite) .ch-notify-popover,
body.glass:not(.glass-lite) .swipe-hint,
body.glass:not(.glass-lite) .mindmap-edit-hint {
    backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
}

/* --- Полировка ---
   Сетки плиток и обёртки не должны резать тени плиток по своему краю. */
body.has-wallpaper .main-actions-grid,
body.has-wallpaper #fileUploadArea,
body.has-wallpaper .container {
    overflow: visible !important;
    contain: none !important;
    content-visibility: visible !important;
}
/* Экран теста: контейнер вопроса и сам вопрос рисовали две рамки одну в другой, а поля
   с обеих сторон съедали ширину текста на телефоне. Одна стеклянная карточка, поля уже. */
body.has-wallpaper #questionContainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
}
body.has-wallpaper #questionText {
    background: var(--glass-fill-2) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px;
    padding: 18px 16px !important;
    margin: 0 0 14px !important;
    box-shadow: none !important;
}
/* Варианты чуть уже карточки вопроса (пользователь: «сейчас они одинаковой ширины»). */
body.has-wallpaper #answerOptions { margin: 0 !important; padding: 0 10px !important; }
/* Внешней панели у теста нет (пользователь: «подложку вокруг текста уберём, блок шире») —
   карточка вопроса, варианты и навигация по вопросам сами стекло и размываются. */
body.has-wallpaper #quizArea { padding: 0 !important; }
body.has-wallpaper #quickNavPanel {
    background: var(--glass-panel);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 12px;
}
body.has-wallpaper #score, body.has-wallpaper #timerDisplay, body.has-wallpaper #quickNavPanel h4 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
body.glass:not(.glass-lite) #questionText#questionText,
body.glass:not(.glass-lite) #answerOptions#answerOptions li,
body.glass:not(.glass-lite) #quickNavPanel#quickNavPanel {
    backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
}
/* Варианты — плоские стеклянные строки: неоморфные тени на фото читались грязью. */
body.has-wallpaper #answerOptions li {
    background-color: var(--glass-fill-2);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: none;
    padding: 14px 16px;
}
body.has-wallpaper #answerOptions li:hover {
    box-shadow: none;
    background-color: var(--input-hover-bg-color);
}
/* Кнопки под стеклом — без вдавленных и неоморфных теней, плоское стекло с волосяной рамкой. */
body.glass .btn-secondary,
body.glass .btn-secondary-small,
body.glass .icon-btn-small,
body.has-wallpaper .quick-nav-btn,
body.has-wallpaper #questionNavigationControls button,
body.has-wallpaper .quiz-footer-controls button {
    box-shadow: none !important;
}
/* Малые кнопки-пилюли (в панели колод) в тёмных темах держались только на неоморфной тени —
   без неё пропадали. Волосяная рамка возвращает форму в любой теме. */
body.glass .icon-btn-small { border: 1px solid var(--glass-border); }

/* У урока, парсера и тренировки панель без размытия: backdrop-filter, как и filter,
   делает предка контейнером для position: fixed — мини-плеер урока, боковая панель
   парсера и плавающие кнопки тренировки начинали ехать вместе с содержимым вместо
   того, чтобы прилипнуть к краю экрана. Стекло у них — только заливкой. */

/* --- Чат и ИИ-чат ---
   Их оверлеи лежат поверх слоя обоев. Под обоями главный экран сквозь них не должен
   просвечивать (обёртка экрана прозрачна, и плитки виднелись) — фон глухой, цвет темы. */
body.has-wallpaper .advanced-chat-overlay,
body.has-wallpaper #aiChatModal.modal-overlay {
    background-color: var(--bg-color) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Свои обои у окна: картинка на оверлее, вуаль псевдоэлементом, окно поверх неё. */
body.wp-chat .advanced-chat-overlay,
body.wp-ai #aiChatModal.modal-overlay {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
body.wp-chat .advanced-chat-overlay { background-image: var(--wp-chat) !important; }
body.wp-ai #aiChatModal.modal-overlay { background-image: var(--wp-ai) !important; }
body.wp-chat .advanced-chat-overlay::before,
body.wp-ai #aiChatModal.modal-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wp-scrim);
    pointer-events: none;
}
body.wp-chat .advanced-chat-modal,
body.wp-ai .ai-chat-modal-content {
    position: relative;
    z-index: 1;
    background: transparent !important;
    box-shadow: none !important;
}
body.wp-chat .message-area,
body.wp-chat .advanced-chat-body { background: transparent !important; }
body.wp-chat .advanced-chat-header,
body.wp-chat .chat-sidebar,
body.wp-chat .chat-input-wrapper { background: var(--glass-fill) !important; }
body.wp-chat .message-content {
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
}
body.wp-ai .ai-chat-body-wrapper,
body.wp-ai .ai-chat-scroll-wrapper {   /* на телефоне лента красится var(--bg-color) под сдвиг сайдбара */
    background-color: transparent !important;
    box-shadow: none !important;
}
body.wp-ai .ai-chat-header,
body.wp-ai .ai-chat-input-area,
body.wp-ai .ai-chat-sidebar { background-color: var(--glass-fill) !important; }
body.wp-ai .ai-message.user {
    background-color: var(--glass-fill);
    border: 1px solid var(--glass-border);
}
/* Ответы ИИ без пузыря лежали текстом прямо на фото — над ветками читались плохо. Лёгкая подложка. */
body.wp-ai .ai-message-container.is-assistant .ai-message:not(.user),
body.wp-ai .ai-message-container.is-model .ai-message:not(.user) {
    background-color: var(--glass-fill-2);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 10px 14px;
}
/* Тени текста на всю ленту сняты: text-shadow на тысячах глифов — дорогая отрисовка на
   телефоне, а пузыри и так плотные. */

/* --- Пункт «Обои» в настройках и лист выбора --- */
.wallpaper-acts, .wp-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.wallpaper-btn {
    font: inherit; font-size: 0.85em; font-weight: 600;
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
    color: var(--text-color);
    background: var(--input-hover-bg-color);
    border: 1px solid var(--border-color);
}
.wallpaper-btn.ghost { padding: 6px 7px; display: inline-flex; align-items: center; background: transparent; }
.wallpaper-btn.ghost svg { width: 14px; height: 14px; }
.wallpaper-btn:active { transform: scale(0.97); }
.wp-sheet { padding: 2px 4px 14px; }
.wp-hint { margin: 0 6px 12px; font-size: 0.85em; line-height: 1.4; color: var(--secondary-text-color); }
.wp-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; }
.wp-row + .wp-row { border-top: 1px solid var(--border-color); }
/* Общая картинка — отдельной карточкой сверху: она задаёт всё остальное. */
.wp-row-global { background: var(--input-bg-color); border: 1px solid var(--border-color); border-radius: 14px; margin-bottom: 8px; padding: 12px 10px; }
.wp-row-global + .wp-row { border-top: none; }
.wp-thumb {
    flex: 0 0 auto; width: 64px; height: 44px; border-radius: 10px;
    background: var(--input-bg-color) center / cover no-repeat;
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    color: var(--secondary-text-color);
}
.wp-thumb svg { width: 18px; height: 18px; }
.wp-meta { flex: 1 1 auto; min-width: 0; }
.wp-name { font-weight: 600; font-size: 0.95em; color: var(--text-color); }
.wp-status { font-size: 0.8em; color: var(--secondary-text-color); margin-top: 2px; }

/* --- Выдвижные панели и меню: плотное стекло ---
   При заливке плиток (.42) сквозь шторку «Мои сообщения» и меню просвечивала лента —
   не читалось. Панели поверх содержимого всегда плотные, шторки ИИ-чата ещё и размыты. */
body.glass .ai-chat-sidebar,
body.glass .ai-chat-user-messages-sidebar,
body.glass .ai-chat-gallery-sidebar,
body.glass .ai-chat-settings-panel,
body.glass .ai-characters-sidebar,
body.glass .ai-helper-menu,
body.glass .ai-attach-menu,
body.glass .ai-more-menu,
body.glass .ai-bc-dropdown,
body.glass .ai-select-dropdown,
body.glass .ai-tools-menu,
body.glass .add-block-menu,
body.glass .floating-menu,
body.glass .attachment-menu,
body.glass .magic-menu,
body.glass .message-actions-toolbar,
body.glass .style-dropdown-content {
    background-color: var(--glass-dense) !important;
}
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-sidebar,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-user-messages-sidebar,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-gallery-sidebar,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-settings-panel,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-characters-sidebar {
    backdrop-filter: blur(16px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
}

/* --- Лист «Обои»: шапка и библиотека тем --- */
.wp-tabs { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; border-radius: 999px; background: var(--input-bg-color); }
.wp-tab {
    flex: 1 1 0; font: inherit; font-size: 0.9em; font-weight: 600; padding: 8px 10px; border-radius: 999px;
    border: none; background: transparent; color: var(--secondary-text-color); cursor: pointer;
}
.wp-tab.on { background: var(--container-bg-color); color: var(--text-color); box-shadow: var(--glass-shadow-sm, 0 1px 3px rgba(0,0,0,.15)); }
.wp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* На ПК лист шире телефона — колонки считаются от места, а не от числа 2.
   Ширину берёт только сетка картинок: строки второй вкладки и переключатель
   вкладок на 920 пикселях растянулись бы в ленту через весь экран. */
@media (min-width: 821px) and (pointer: fine) {
    .wp-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
    .wp-bs .wp-tabs, .wp-bs .wp-row, .wp-bs .wp-hint { max-width: 620px; margin-inline: auto; }
    .wp-bs .wp-hint { text-align: center; }
}
.wp-card { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: var(--input-bg-color); border: 1px solid var(--border-color); }
.wp-card-img { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--container-bg-color) center / cover no-repeat; }
/* Применённые обои видно до кнопки: рамка и галочка на самой картинке. */
.wp-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.wp-card-mark {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.wp-card-mark svg { width: 14px; height: 14px; }
.wallpaper-btn.is-reset { color: var(--accent); border-color: var(--accent); background: transparent; }
.wp-card-name { font-weight: 600; font-size: 0.92em; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-card-acts { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }

/* --- Панель инструментов теста прижата к верху: под обоями отступ обёртки стал виден. Главному экрану дыхание оставляем. --- */
body.has-wallpaper .container { padding-top: 0 !important; }
body.has-wallpaper #fileUploadArea { padding-top: 12px; }
body.has-wallpaper .header-controls { margin-top: 0 !important; }
/* Зелёный текст кнопок «Продолжить» / «Начать тест» на тёмном стекле тускнел. */
body.glass.dark-mode .btn-resume, body.glass.oled-mode .btn-resume, body.glass.synthwave-mode .btn-resume,
body.glass.dark-mode #startQuizButton, body.glass.oled-mode #startQuizButton, body.glass.synthwave-mode #startQuizButton { color: #5fd38d; }
/* «Назад» в GRADUS: белый текст на светлом стекле. */
body.glass #backToFileUploadButton { color: var(--text-color); background: var(--glass-fill-2); border: 1px solid var(--glass-border); }
/* Заглушка «скоро новые инструменты» лежала текстом на фото. */
body.has-wallpaper .canvas-item-placeholder { background: var(--glass-fill-2); color: var(--text-color); border-radius: 14px; }

/* --- ИИ-чат: пузыри, подсказки и панель действий тоже стекло ---
   Под обоями они оставались просто полупрозрачными: правило-убийца backdrop-filter гасит
   размытие на сенсорных, поэтому селекторы с удвоенным ID (см. выше). */
body.wp-ai .ai-suggestion-item,
body.wp-ai .ai-message-actions,
body.wp-ai .ai-reasoning-block,
body.wp-ai .ai-message-content-wrapper > pre,
body.wp-ai .ai-chat-input-container {
    background-color: var(--glass-fill) !important;
    border: 1px solid var(--glass-border);
}
/* Размытие — только на поле ввода: на пузырях и подсказках оно стояло на каждом
   элементе ленты, и каждый кадр прокрутки пересчитывал десятки backdrop-областей —
   отсюда дёрганый скролл в обоих чатах. Пузыри читаемы плотной заливкой. */
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-input-container {
    backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
}
body.wp-ai .ai-message.user,
body.wp-ai .ai-message-container.is-assistant .ai-message:not(.user),
body.wp-ai .ai-message-container.is-model .ai-message:not(.user),
body.wp-ai .ai-suggestion-item,
body.wp-ai .ai-message-actions,
body.wp-ai .ai-reasoning-block,
body.wp-chat .message-content {
    background-color: var(--glass-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- Поля у краёв экрана ---
   Пользователь: «во всех окнах далековато от краёв на телефонах, кроме главного экрана».
   Обёртка почти вплотную; «Учёба» добирает своё дыхание сама, стеклянные панели разделов —
   тоньше, чтобы содержимое (курсы, уроки) шло от края. */
@media (max-width: 768px) {
    /* Было 5 px: содержимое упиралось в кромку экрана, кнопки читались как
       полоса от края до края. 14 px дают поле, от которого считается всё
       остальное: вопрос 18 px, варианты 26 px, кнопки 18 px. */
    .container { padding-left: 14px !important; padding-right: 14px !important; }
    /* Плитки главной уже отбиты контейнером, свои 10 px больше не нужны. */
    #fileUploadArea { padding-left: 0; padding-right: 0; }
    body.has-wallpaper #searchResultsContainer, body.has-wallpaper #gradusFoldersContainer,
    body.has-wallpaper #quizSetupArea, body.has-wallpaper #cheatSheetResultArea,
    body.has-wallpaper #resultsArea, body.has-wallpaper #parserArea, body.has-wallpaper #coursesArea,
    body.has-wallpaper #visualTrainerArea, body.has-wallpaper #courseDetailArea, body.has-wallpaper #fitnessArea,
    body.has-wallpaper #lessonViewArea, body.has-wallpaper #medicalCalcArea, body.has-wallpaper #reflectionArea,
    body.has-wallpaper #reflectionJoinArea, body.has-wallpaper #videoInterceptorArea,
    body.has-wallpaper #feynmanRoomArea, body.has-wallpaper #favoritesArea, body.has-wallpaper #testVerifierArea,
    body.has-wallpaper #zonkLobbyArea, body.has-wallpaper #zonkRiskSetupArea, body.has-wallpaper #zonkDuelSetupArea,
    body.has-wallpaper #zonkPracticeSetupArea, body.has-wallpaper #zonkShopArea, body.has-wallpaper #factsArea {
        /* 10, а не 8: контейнер вокруг ужался с 14 px до 5 (см. правило ниже),
           и эти два пикселя возвращают содержимому то дыхание, что у него было.
           По краю выходит 15 px вместо прежних 22 — панель у кромки, текст нет. */
        padding: 10px !important;
    }

    /* Раздел с собственной подложкой прижимается к краям экрана.
       Боковой отступ считался дважды: 14 px у контейнера плюс 8 px у самой
       панели — 22 px пустоты по каждому краю, при том что панель и так
       отбивает своё содержимое. Контейнеру оставляем 5 px: совсем без него
       тень панели прилипает к кромке и панель перестаёт читаться как
       отдельный лист. Дыхание берём изнутри панели — её padding ниже.
       Условие has-wallpaper то же, что и у самой подложки: без неё раздел
       прозрачный, и прижимать к краю было бы нечего — текст упёрся бы в
       кромку, ровно от чего 14 px когда-то и спасали. */
    body.has-wallpaper[data-view="searchResultsContainer"] .container,
    body.has-wallpaper[data-view="gradusFoldersContainer"] .container,
    body.has-wallpaper[data-view="quizSetupArea"] .container,
    body.has-wallpaper[data-view="cheatSheetResultArea"] .container,
    body.has-wallpaper[data-view="resultsArea"] .container,
    body.has-wallpaper[data-view="parserArea"] .container,
    body.has-wallpaper[data-view="coursesArea"] .container,
    body.has-wallpaper[data-view="visualTrainerArea"] .container,
    body.has-wallpaper[data-view="courseDetailArea"] .container,
    body.has-wallpaper[data-view="fitnessArea"] .container,
    body.has-wallpaper[data-view="lessonViewArea"] .container,
    body.has-wallpaper[data-view="medicalCalcArea"] .container,
    body.has-wallpaper[data-view="reflectionArea"] .container,
    body.has-wallpaper[data-view="reflectionJoinArea"] .container,
    body.has-wallpaper[data-view="videoInterceptorArea"] .container,
    body.has-wallpaper[data-view="feynmanRoomArea"] .container,
    body.has-wallpaper[data-view="favoritesArea"] .container,
    body.has-wallpaper[data-view="testVerifierArea"] .container,
    body.has-wallpaper[data-view="zonkLobbyArea"] .container,
    body.has-wallpaper[data-view="zonkRiskSetupArea"] .container,
    body.has-wallpaper[data-view="zonkDuelSetupArea"] .container,
    body.has-wallpaper[data-view="zonkPracticeSetupArea"] .container,
    body.has-wallpaper[data-view="zonkShopArea"] .container,
    body.has-wallpaper[data-view="factsArea"] .container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* --- Шапка теста показывается только в самом тесте ---
   body.quiz-active держал её видимой в любом разделе: во время теста заходишь в игры —
   сверху блок кнопок теста. Текущий раздел showView пишет в body[data-view]. */
body.quiz-active.quiz-away .container > .header-controls { display: none !important; }
/* Класс quiz-away ставит наблюдатель за #quizArea (script.js, quizHeaderGuard). Не :has():
   :has(#quizArea.hidden) на body заставлял браузер при каждом переключении .hidden где угодно
   (меню, тултипы) заново искать #quizArea.hidden по всему документу — в чате с тысячами узлов
   это давало паузу в 3–4 секунды при открытии любого меню. И не body[data-view]: его ставит
   showView, а тест открывается и мимо него. */

/* --- Курсы на телефоне: карточки по две в ряд --- */
@media (max-width: 768px) {
    #coursesList { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}

/* --- Плашка «загружаю обои» — не блокирует интерфейс --- */
#wpBusy, #repairBusy {
    position: fixed; left: 50%; opacity: 0; pointer-events: none;
    display: inline-flex; align-items: center; gap: 10px;
    border-radius: 999px; z-index: 100060;
    font-weight: 600; white-space: nowrap;
    transition: opacity .2s ease, transform .2s ease;
}

/* Плашка тренировок остаётся внизу: там она не спорит с содержимым. */
#wpBusy {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    transform: translate(-50%, 16px);
    padding: 9px 16px; font-size: 0.9em;
    background: var(--glass-dense, var(--container-bg-color)); color: var(--text-color);
    border: 1px solid var(--border-color); box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
#wpBusy.on { opacity: 1; transform: translate(-50%, 0); }

/* Ремонт теста — наверх и заметно.
   Раньше плашка стояла внизу экрана прозрачным стеклом, над самой панелью
   навигации, и терялась совершенно: человек загружал файл, ничего не понимал
   и ждал. А сообщать она должна о небыстром деле — разборе файла и обращении
   к нейросети. Поэтому сверху, где взгляд, и акцентным цветом, а не стеклом. */
#repairBusy {
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    transform: translate(-50%, -16px);
    /* width: max-content, а не ужимание по умолчанию: inline-flex сжимался до
       197 пикселей и ломал короткую фразу на три строки — получался пузырь,
       похожий на реплику в чате. Так плашка держит одну строку, пока та
       помещается, и переносится только упёршись в ограничение. */
    display: flex; width: max-content; max-width: min(92vw, 440px);
    /* Скругление меньше: у пузыря-таблетки многострочный текст выглядит нелепо. */
    border-radius: 14px;
    padding: 11px 18px; font-size: 0.95em;
    white-space: normal; text-align: left; line-height: 1.35;
    /* Пара «фон основной кнопки + текст на ней», а не акцент с белым текстом.
       Акцент к светлому тексту не обязан подходить: в synthwave он #14B8A6,
       и белым по нему читать больно, а в oled он вообще #fff — белый текст
       на белом исчезал целиком. Эта пара задаётся в каждой теме вместе и
       проверена на контраст (tests/button_contrast_probe.html), поэтому
       плашка остаётся заметной, но читаемой везде. */
    background: var(--button-primary-bg, #2F6F5E); color: var(--button-primary-text, #fff);
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
}
#repairBusy.on { opacity: 1; transform: translate(-50%, 0); }
#repairBusy .wp-busy-spin {
    /* Вслед за текстом: на светлом фоне белый кружок не виден. */
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    border-top-color: currentColor;
}
.wp-busy-spin {
    width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, var(--text-color) 25%, transparent);
    border-top-color: var(--text-color); animation: wpSpin .8s linear infinite;
}
@keyframes wpSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wp-busy-spin { animation: none; } }

/* --- Токены, зависящие от темы, объявляем на body ---
   var(--accent-color) внутри :root разрешается значением :root, то есть светлой темы, —
   тёмные темы получали чужой цвет. На body переменная берёт акцент текущей темы. */
body.claude-mode {
    /* Буква на плитке аватара кремовым по тёплому серому давала 3.44 —
       для подписи мало. Плитку темнее, букву светлее. */
    --avatar-bg: #6f6357;
    --avatar-text: #f7f3ee;
}

body.oled-mode {
    /* В «Тьме» акцент — чистый белый. Для тонких линий это хорошо, но крупная
       белая плитка аватара на чёрном экране слепит. Даём ей тёмную заливку. */
    --avatar-bg: #1c1c1c;
    --avatar-text: #e6e6e6;
}

body {
    --focus-ring: var(--accent-color, #3498db);
    /* Заглушки аватаров (буква вместо фото): всегда контрастный круг. Акцент темы на фоне
       темы — навы/белый в светлой, голубой/тёмный в тёмных, белый/чёрный в OLED. */
    --avatar-bg: var(--accent-color, #2c3e50);
    --avatar-text: var(--bg-color, #ffffff);
}
/* Под стеклом в светлых темах вторичная заливка полупрозрачно-белая — белый текст на ней
   пропадал (кнопки «Предыдущий/Следующий», навигация по вопросам, обложки курсов). */
body.glass:not(.dark-mode):not(.oled-mode):not(.synthwave-mode) { --button-secondary-text: var(--text-color); }

/* --- Список заголовков в шапке ИИ-чата — плотное стекло с размытием ---
   Он попал в список «заливка .52» вместе с пузырями, и сквозь него просвечивала лента.
   Это меню поверх содержимого — ему плотность и размытие, как всем меню. Мобильное правило
   выше снимает у него backdrop-filter — перебиваем: он в белом списке правила-убийцы. */
body.glass .ai-bc-dropdown.ai-bc-dropdown { background-color: var(--glass-dense) !important; }
body.glass:not(.glass-lite) .ai-bc-dropdown.ai-bc-dropdown {
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
}
/* Список живёт ВНУТРИ шапки, а у шапки свой backdrop-filter. Элемент с backdrop-filter —
   «корень фона» для потомков: их размытие видит только нарисованное внутри шапки, а не
   ленту за ней. Поэтому список оставался прозрачным, хотя размытие у него стояло. Пока
   список открыт, шапка размытие отдаёт ему, а сама становится плотной. Меню настроек
   висит на body — потому у него всё работало сразу. */
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-header:has(> .ai-bc-dropdown:not(.hidden)) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--glass-dense) !important;
}

/* --- Библиотека обоев: подходящие темы чипами --- */
.wp-fits { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 2px 0 4px; }
.wp-fits-label { flex: 0 0 100%; font-size: 0.72em; letter-spacing: .04em; text-transform: uppercase; color: var(--secondary-text-color); margin-bottom: 1px; }
.wp-theme-chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    font: inherit; font-size: 0.78em; font-weight: 600; line-height: 1;
    padding: 5px 9px 5px 7px; border-radius: 999px; cursor: pointer;
    color: var(--text-color); background: var(--container-bg-color);
    border: 1px solid var(--border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-theme-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.wp-theme-chip.on { background: var(--accent-color); color: var(--bg-color); border-color: transparent; }
.wp-theme-chip:active { transform: scale(0.97); }
/* --- Тумблер «Цвета от обоев» в листе --- */
.wp-tint-row { gap: 12px; }
.wp-tint-row .ai-toggle-switch { flex: 0 0 auto; }

/* --- Плавающие поверхности под стеклом — плотные ---
   Меню, тултипы, пикеры, панели: всё, что position: absolute/fixed и красится переменными,
   ставшими под стеклом полупрозрачными. Размытие им не помощник — большинство живёт внутри
   предков с backdrop-filter (корень фона) или под мобильным правилом-убийцей, поэтому
   плотность ~.94. Список сгенерирован обходом style.css и встроенных стилей chat.js;
   поверхности, у которых размытие работает (навбар, листы, шторки), сюда не входят. */
body.glass .dropdown-content:not(#translateEngineDropdown),
body.glass .reaction-picker,
body.glass .full-reaction-picker,
body.glass .filter-dropdown,
body.glass .ai-helper-menu,
body.glass #translateEngineDropdown,
body.glass #aiPersonaSelectDropdown,
body.glass .ai-voice-record-panel,
body.glass .scrollbar-tooltip,
body.glass .persistent-tooltip,
body.glass .source-tooltip,
body.glass .scrollbar-preview-tooltip,
body.glass .grounded-icon-tooltip,
body.glass .ai-chat-search-container,
body.glass .ai-chat-search-results,
body.glass .add-block-menu,
body.glass .ai-tools-menu,
body.glass .atlas-attach-popover,
body.glass .channel-info-panel,
body.glass .ai-characters-overlay,
body.glass .floating-nav-btn,
body.glass .download-dropdown-content,
body.glass .folder-actions-menu,
body.glass .undo-toast,
body.glass .import-dropdown .import-dropdown-content,
body.glass .mindmap-edit-hint,
body.glass .mindmap-edit-bar,
body.glass .mindmap-multi-bar,
body.glass .mindmap-help-panel,
body.glass .mindmap-minimap,
body.glass .mindmap-outline-panel,
body.glass .mindmap-keys-panel,
body.glass .format-select-list,
body.glass .rm-search-bar,
body.glass .rm-style-panel,
body.glass .rm-export-menu,
body.glass .rm-focus-bar,
body.glass .rm-cat-dropdown,
body.glass .anki-audio-player,
body.glass .dropdown-content,
body.glass .blur-up-container .blur-up-placeholder,
body.glass #typingIndicator.typing-indicator-bar,
body.glass .dot-color-picker,
body.glass .interactive-dropdown-content.in-body,
body.glass .med-toast,
body.glass body.header-side-mode.quiz-active .header-buttons,
body.glass #aiScrollToBottomBtn,
body.glass .pinned-media .pinned-image-controls,
body.glass .ai-user-message-actions,
body.glass .markdown-toolbar,
body.glass .breadcrumb-dropdown-menu,
body.glass .cookie-consent-banner,
body.glass .chat-scroll-to-bottom-btn,
body.glass .edit-history-popup,
body.glass .bottom-sheet,
body.glass .drag-drop-overlay {
    background-color: var(--glass-menu) !important;
}
/* Меню действий сообщения под стеклом: плотный фон без размытия. Размытие здесь
   подвешивало телефон при каждом открытии — см. правило .ai-actions-extra. */
body.glass:not(.glass-lite) .has-pill.expanded .ai-actions-extra,
body.glass:not(.glass-lite) .ai-user-message-actions {
    background-color: var(--glass-dense) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* --- Размытие внутри теста пропадало после ответа ---
   У #questionContainer стоит will-change: transform, opacity; will-change с opacity делает
   элемент корнем фона для потомков — их backdrop-filter видит только содержимое контейнера,
   а он под обоями прозрачный. Мобильное правило сбрасывает will-change у всего, кроме
   :hover/:active, а на телефоне :hover залипает на контейнере после тапа по варианту —
   потому размытие карточки вопроса и вариантов исчезало ровно после ответа. */
body.glass #questionContainer { will-change: auto !important; }

/* --- Все меню — плотное стекло с размытием, как у меню настроек ---
   Список общий для белого списка правила-убийцы и для этого правила. На слабом железе —
   плотнее и без размытия. */
body.glass:not(.glass-lite) .ai-select-dropdown,
body.glass:not(.glass-lite) .ai-attach-menu,
body.glass:not(.glass-lite) .ai-more-menu,
body.glass:not(.glass-lite) .ai-bc-dropdown,
body.glass:not(.glass-lite) .ai-helper-menu,
body.glass:not(.glass-lite) #aiPersonaSelectDropdown,
body.glass:not(.glass-lite) .dropdown-content,
body.glass:not(.glass-lite) #translateEngineDropdown,
body.glass:not(.glass-lite) .download-dropdown-content,
body.glass:not(.glass-lite) .folder-actions-menu,
body.glass:not(.glass-lite) .import-dropdown-content,
body.glass:not(.glass-lite) .format-select-list,
body.glass:not(.glass-lite) .interactive-dropdown-content,
body.glass:not(.glass-lite) .style-dropdown-content,
body.glass:not(.glass-lite) .user-dropdown,
body.glass:not(.glass-lite) .reaction-picker,
body.glass:not(.glass-lite) .full-reaction-picker,
body.glass:not(.glass-lite) .filter-dropdown,
body.glass:not(.glass-lite) .add-block-menu,
body.glass:not(.glass-lite) .ai-tools-menu,
body.glass:not(.glass-lite) .atlas-attach-popover,
body.glass:not(.glass-lite) .rm-export-menu,
body.glass:not(.glass-lite) .rm-cat-dropdown,
body.glass:not(.glass-lite) .dot-color-picker,
body.glass:not(.glass-lite) .breadcrumb-dropdown-menu,
body.glass:not(.glass-lite) .edit-history-popup,
body.glass:not(.glass-lite) .ai-user-message-actions,
body.glass:not(.glass-lite) .markdown-toolbar,
body.glass:not(.glass-lite) .mindmap-help-panel,
body.glass:not(.glass-lite) .mindmap-outline-panel,
body.glass:not(.glass-lite) .mindmap-keys-panel,
body.glass:not(.glass-lite) .channel-info-panel,
body.glass:not(.glass-lite) .ai-chat-search-container,
body.glass:not(.glass-lite) .chat-item-actions-revealed,
body.glass:not(.glass-lite) emoji-picker {
    background-color: var(--glass-dense) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
}
body.glass.glass-lite .ai-select-dropdown,
body.glass.glass-lite .ai-attach-menu,
body.glass.glass-lite .ai-more-menu,
body.glass.glass-lite .ai-bc-dropdown,
body.glass.glass-lite .ai-helper-menu,
body.glass.glass-lite #aiPersonaSelectDropdown,
body.glass.glass-lite .dropdown-content,
body.glass.glass-lite #translateEngineDropdown,
body.glass.glass-lite .download-dropdown-content,
body.glass.glass-lite .folder-actions-menu,
body.glass.glass-lite .import-dropdown-content,
body.glass.glass-lite .format-select-list,
body.glass.glass-lite .interactive-dropdown-content,
body.glass.glass-lite .style-dropdown-content,
body.glass.glass-lite .user-dropdown,
body.glass.glass-lite .reaction-picker,
body.glass.glass-lite .full-reaction-picker,
body.glass.glass-lite .filter-dropdown,
body.glass.glass-lite .add-block-menu,
body.glass.glass-lite .ai-tools-menu,
body.glass.glass-lite .atlas-attach-popover,
body.glass.glass-lite .rm-export-menu,
body.glass.glass-lite .rm-cat-dropdown,
body.glass.glass-lite .dot-color-picker,
body.glass.glass-lite .breadcrumb-dropdown-menu,
body.glass.glass-lite .edit-history-popup,
body.glass.glass-lite .ai-user-message-actions,
body.glass.glass-lite .markdown-toolbar,
body.glass.glass-lite .mindmap-help-panel,
body.glass.glass-lite .mindmap-outline-panel,
body.glass.glass-lite .mindmap-keys-panel,
body.glass.glass-lite .channel-info-panel,
body.glass.glass-lite .ai-chat-search-container,
body.glass.glass-lite .chat-item-actions-revealed,
body.glass.glass-lite emoji-picker {
    background-color: var(--glass-menu) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Меню внутри размытой поверхности размывать нечего: хозяин с backdrop-filter — «корень фона»
   для потомков. Пока внутри открыто меню, хозяин снимает размытие и становится плотным.
   :has здесь дешёвый: при смене класса проверяются только предки изменившегося элемента. */
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-settings-panel:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-header:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-input-area:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-input-container:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-sidebar:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-user-messages-sidebar:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .advanced-chat-header:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .chat-sidebar:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .chat-input-wrapper:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #decksArea#decksArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #quickNavPanel#quickNavPanel:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #searchResultsContainer#searchResultsContainer:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #gradusFoldersContainer#gradusFoldersContainer:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #quizSetupArea#quizSetupArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #cheatSheetResultArea#cheatSheetResultArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #resultsArea#resultsArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #coursesArea#coursesArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #visualTrainerArea#visualTrainerArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #courseDetailArea#courseDetailArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #medicalCalcArea#medicalCalcArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #reflectionArea#reflectionArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #reflectionJoinArea#reflectionJoinArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #videoInterceptorArea#videoInterceptorArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #feynmanRoomArea#feynmanRoomArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #favoritesArea#favoritesArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #testVerifierArea#testVerifierArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #zonkLobbyArea#zonkLobbyArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #zonkRiskSetupArea#zonkRiskSetupArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #zonkDuelSetupArea#zonkDuelSetupArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #zonkPracticeSetupArea#zonkPracticeSetupArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #zonkShopArea#zonkShopArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #factsArea#factsArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #recentFilesArea#recentFilesArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #savedSessionArea#savedSessionArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #activityStatsArea#activityStatsArea:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) #searchContainer#searchContainer:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)),
body.glass:not(.glass-lite) .container > .header-controls:has(.dropdown-content.show, .ai-custom-select.open, .ai-attach-menu:not(.hidden), .ai-more-menu:not(.hidden), .ai-bc-dropdown:not(.hidden), #aiPersonaSelectDropdown:not(.hidden), .user-dropdown:not(.hidden), .folder-actions-menu.show, .chat-item-action-group.show, .style-dropdown.open, emoji-picker, .import-dropdown-content.show, .download-dropdown-content.show, .interactive-dropdown.open, .format-select.is-open, .ai-helper-menu:not(.hidden), .has-pill.expanded, .reaction-picker:not(.hidden), .full-reaction-picker:not(.hidden), .filter-dropdown:not(.hidden)) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--glass-dense) !important;
}
/* Конвертер и урок: панель размывается, кроме моментов, когда внутри открыт fixed-элемент —
   боковая панель конструктора или мини-плеер: backdrop-filter сделал бы их контейнером. */
body.glass:not(.glass-lite) #parserArea#parserArea:not(:has(.builder-sidebar.open, .builder-sidebar-backdrop.open)),
body.glass:not(.glass-lite):not(.mini-player-mode) #lessonViewArea#lessonViewArea {
    backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
}

/* ==================================================================
   Размытие не должно пропадать «само по себе»
   Chromium: предок с удерживаемой анимацией (fill: forwards/both и кадры opacity/filter),
   с will-change: opacity/filter, filter или opacity < 1 делает потомков слепыми к фону —
   их backdrop-filter читает пустоту. Так были устроены оверлей и содержимое каждой модалки
   (ИИ-чат целиком), каждое сообщение чата и ИИ-чата.
   Конечный кадр у этих анимаций совпадает с покоем (opacity 1, transform как в стилях),
   удерживать нечего: backwards держит стартовый кадр только на время задержки (каскад
   сообщений) и отпускает элемент по окончании. Заодно исчезают вечные композитные слои —
   по одному на каждое сообщение. Пары «предок → потомок» проверяет scratchpad/bf_diag.py.
   ================================================================== */
.modal-overlay, .modal-content, .auth-modal,
.message, .question-bubble, .favorite-item,
.ai-message-container, .ai-message, .ai-message-container.ai-blur-reveal .ai-message,
.rm-review-overlay, .rm-review-card, .rm-review-body, .rm-build-overlay,
body.app-drop .main-actions-grid > *, body.app-drop .action-group-title {
    animation-fill-mode: backwards !important;
}
/* will-change: opacity ничего не ускоряет у одноразового перехода, а на телефоне возвращается
   через липкий :hover после касания и слепит вложенные меню и панели. */
.modal-overlay,
.ai-message-container.ai-blur-reveal .ai-message,
.header-controls, .floating-nav-btn, #timerDisplay, #score, #quickNavPanel,
#continueLaterButton, #finishTestButton, footer {
    will-change: auto !important;
}

/* --- Чат: фон сообщений и карточек ---
   --message-bg / --message-bg-other используются в полутора десятках правил (карточки файлов,
   вложения, ответы), но нигде не были объявлены: в Графите карточки выходили прозрачными.
   --chat-primary (имя автора) был задан только в :root тёмно-синим — на тёмных темах имена
   гасли. Переменные на body: var() внутри подставляется по теме этого же элемента. */
:root { --message-bg: #ffffff; --message-bg-other: #f1f3f5; }
body.claude-mode { --message-bg: #fbf7f0; --message-bg-other: #f3ede3; }
body.dark-mode { --message-bg: #2b3038; --message-bg-other: #343a40; --chat-primary: var(--accent-color); }
body.synthwave-mode { --message-bg: #241a3a; --message-bg-other: #2c2148; --chat-primary: var(--accent-color); }
body.oled-mode { --message-bg: #141414; --message-bg-other: #1c1c1c; --chat-primary: var(--accent-color); }
body.glass { --message-bg: var(--glass-panel); --message-bg-other: var(--glass-panel); }

/* Чат на обоях: всё, что лежит вне пузыря, получает стекло; имена и время — тень под текст. */
body.wp-chat .file-share-content,
body.wp-chat .question-link-content {
    background: var(--glass-panel) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow-sm);
}
body.wp-chat .reply-context,
body.wp-chat .message.mine .reply-context {
    background: var(--glass-panel) !important;
    border-color: var(--glass-border) !important;
}
body.wp-chat .reply-context .reply-author { color: var(--chat-primary) !important; }
body.wp-chat .reply-context .reply-text { color: var(--text-color) !important; opacity: .85; }
/* Свой пузырь в стеклянной теме — матовое стекло, а не заливка.
   Общее правило .message-content красит пузыри в --glass-panel, а текст здесь
   белый (в «Дюне» вышло бы белым по светлому) — поэтому свой цвет задаётся
   отдельно.

   Почему полупрозрачность, а не backdrop-filter. Размытие с пузырей снято
   намеренно: оно стояло на каждом элементе ленты, и каждый кадр прокрутки
   пересчитывал десятки backdrop-областей — отсюда был дёрганый скролл (см.
   пояснение у правила размытия поля ввода выше). Вернуть его только своим
   пузырям — это всё ещё десятки областей в личной переписке.

   Матовость даёт сама прозрачность: обои просвечивают и подкрашивают пузырь,
   а светлая кромка сверху и мягкая тень снизу читаются как край стекла. На
   плавных обоях — а официальные как раз такие — от настоящего размытия это
   почти не отличить: размывать там нечего, мелкой структуры в картинке нет.
   На фотообоях с деталями разница видна; если понадобится именно размытие,
   включается блоком ниже. */
body.wp-chat .message.mine .message-content {
    background: color-mix(in srgb, var(--chat-bubble-mine) 72%, transparent) !important;
    color: var(--button-primary-text) !important;
    border: 1px solid color-mix(in srgb, #fff 20%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
                0 4px 14px rgba(10, 18, 30, 0.22) !important;
}

/* Настоящее размытие под своим пузырём. Выключено: см. про скролл выше.
   Чтобы попробовать — снять комментарий и прокрутить длинный канал на телефоне.
   :not(.glass-lite) обязателен — это признак слабого устройства.
body.glass:not(.glass-lite).wp-chat .message.mine .message-content {
    backdrop-filter: blur(12px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
}
*/
/* Счётчик теста стоит вне стеклянных панелей: на тёмных обоях в светлой теме текст пропадал. */
body.glass #score {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    align-self: flex-end;
    padding: 8px 14px;
    border-top: none;
    border-radius: 14px;
    background: var(--glass-panel);
    box-shadow: inset 0 0 0 1px var(--glass-border);
    text-shadow: none;
}
body.glass #score .quiz-filename-display:empty { display: none; }
body.glass #score .quiz-filename-display { margin-top: 6px; padding-bottom: 0; border-bottom: none; font-size: .95rem; }
body.wp-chat .date-divider span {
    background-color: var(--glass-dense) !important;
    box-shadow: inset 0 0 0 1px var(--glass-border), 0 2px 8px rgba(0, 0, 0, 0.18);
}
body.wp-chat .message-more-btn {
    background: var(--glass-fill-2);
    box-shadow: inset 0 0 0 1px var(--glass-border);
    color: var(--text-color);
    opacity: 1;
}
body.wp-chat .message-header { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.35); }
body.wp-chat:not(.dark-mode):not(.oled-mode):not(.synthwave-mode) .message-header {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 8px rgba(255, 255, 255, 0.7);
}
body.wp-chat .message-header .timestamp { opacity: 1; }

/* ==================================================================
   Стекло на слабом железе — без запретов, с адресной экономией
   Запрет backdrop-filter на тач-устройствах и режимы glass-lite/low-power сняты: матовое
   стекло должно быть везде. Дорого не размытие само по себе, а его количество на элементах
   прокручиваемых списков, большой радиус и анимация размытия всего экрана.
   ================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Мелкие декоративные размытия на элементах списков: десятки областей на кадр прокрутки. */
    .course-card-title, .prog-card-icon, .btn-fav-card, .item-actions button, .card-action-btn,
    .ai-attachment-preview-remove-btn, .ai-attachment-preview-edit-btn {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Открытие модалки: анимируем только прозрачность, размытие экрана не пересчитывается 25 кадров. */
    .modal-overlay { animation-name: rackFocusOverlayTouch; }
}
@keyframes rackFocusOverlayTouch { 0% { opacity: 0; } 100% { opacity: 1; } }

/* --- View Transitions под обоями и смена темы ---
   Обои — отдельная группа перехода под корнем: при переходах между экранами картинка стоит на месте,
   а не уезжает и не растворяется вместе с корневым снимком. Смена темы (transitionTheme, класс
   vt-theme на html): старый снимок неподвижен и непрозрачен, новый раскрывается кругом (WAAPI). */
#appWallpaper { view-transition-name: wallpaper; }
::view-transition-group(wallpaper) { z-index: -1; animation: none; }
::view-transition-old(wallpaper),
::view-transition-new(wallpaper) { animation: none; mix-blend-mode: normal; }
html.vt-theme::view-transition-old(root) { animation: none !important; opacity: 1; mix-blend-mode: normal; }
html.vt-theme::view-transition-new(root) { animation: none !important; mix-blend-mode: normal; }

/* ==================================================================
   Тени стекла везде — как у кнопок шапки теста
   Пользователь: тёмная тень кнопок шапки под стеклом — «отличный эффект, отсутствует на всех
   остальных элементах». Одиночная тёмная тень (не двойная неоморфная) чиста и на фото.
   Список объектов собран из правил стекла (background: var(--glass-fill|-2|-panel)).
   ================================================================== */
body.has-wallpaper #decksArea,
body.glass:not(.glass-lite) #fileUploadArea#fileUploadArea .main-actions-grid > button,
body.glass:not(.glass-lite) #fileUploadArea#fileUploadArea .main-actions-grid > label,
body.glass:not(.glass-lite) #decksArea#decksArea,
body.glass:not(.glass-lite) #recentFilesArea#recentFilesArea,
body.glass:not(.glass-lite) #savedSessionArea#savedSessionArea,
body.glass:not(.glass-lite) #activityStatsArea#activityStatsArea,
body.glass:not(.glass-lite) #searchContainer#searchContainer,
body.glass:not(.glass-lite) #searchResultsContainer#searchResultsContainer,
body.glass:not(.glass-lite) #gradusFoldersContainer#gradusFoldersContainer,
body.glass:not(.glass-lite) #quizSetupArea#quizSetupArea,
body.glass:not(.glass-lite) #cheatSheetResultArea#cheatSheetResultArea,
body.glass:not(.glass-lite) #resultsArea#resultsArea,
body.glass:not(.glass-lite) #coursesArea#coursesArea,
body.glass:not(.glass-lite) #visualTrainerArea#visualTrainerArea,
body.glass:not(.glass-lite) #courseDetailArea#courseDetailArea,
body.glass:not(.glass-lite) #medicalCalcArea#medicalCalcArea,
body.glass:not(.glass-lite) #reflectionArea#reflectionArea,
body.glass:not(.glass-lite) #reflectionJoinArea#reflectionJoinArea,
body.glass:not(.glass-lite) #videoInterceptorArea#videoInterceptorArea,
body.glass:not(.glass-lite) #feynmanRoomArea#feynmanRoomArea,
body.glass:not(.glass-lite) #favoritesArea#favoritesArea,
body.glass:not(.glass-lite) #testVerifierArea#testVerifierArea,
body.glass:not(.glass-lite) #zonkLobbyArea#zonkLobbyArea,
body.glass:not(.glass-lite) #zonkRiskSetupArea#zonkRiskSetupArea,
body.glass:not(.glass-lite) #zonkDuelSetupArea#zonkDuelSetupArea,
body.glass:not(.glass-lite) #zonkPracticeSetupArea#zonkPracticeSetupArea,
body.glass:not(.glass-lite) #zonkShopArea#zonkShopArea,
body.glass:not(.glass-lite) #factsArea#factsArea,
body.has-wallpaper #questionText,
body.has-wallpaper #quickNavPanel,
body.glass:not(.glass-lite) #questionText#questionText,
body.glass:not(.glass-lite) #quickNavPanel#quickNavPanel,
body.glass:not(.glass-lite):not(.mini-player-mode) #lessonViewArea#lessonViewArea,
body.glass:not(.glass-lite) #parserArea#parserArea {
    box-shadow: var(--glass-shadow) !important;
}
body.glass:not(.glass-lite) #fileUploadArea#fileUploadArea .action-group-title,
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .advanced-chat-header,
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .chat-sidebar,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-header,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-sidebar,
body.has-wallpaper #answerOptions li,
body.glass .icon-btn-small,
body.glass #backToFileUploadButton,
body.has-wallpaper .canvas-item-placeholder,
body.glass .btn-secondary,
body.glass .btn-secondary-small,
body.has-wallpaper #questionNavigationControls button,
body.has-wallpaper .quiz-footer-controls button,
body.wp-chat .message-content,
body.wp-ai .ai-message.user,
body.wp-ai .ai-message-container.is-assistant .ai-message:not(.user),
body.wp-ai .ai-message-container.is-model .ai-message:not(.user),
body.wp-ai .ai-suggestion-item,
body.wp-ai .ai-chat-input-area,
body.wp-chat .chat-input-wrapper,
body.wp-chat .file-share-content,
body.wp-chat .question-link-content {
    box-shadow: var(--glass-shadow-sm) !important;
}
body.has-wallpaper #answerOptions li,
body.has-wallpaper #answerOptions li:hover { box-shadow: var(--glass-shadow-sm) !important; }
body.has-wallpaper .container > .header-controls { box-shadow: var(--glass-shadow); }
body.glass #score { box-shadow: inset 0 0 0 1px var(--glass-border), var(--glass-shadow-sm); }
body.wp-chat .message-more-btn { box-shadow: inset 0 0 0 1px var(--glass-border), var(--glass-shadow-sm); }
body.wp-chat .reply-context, body.wp-chat .message.mine .reply-context { box-shadow: var(--glass-shadow-sm); }
/* Меню и всплывающие панели — глубокая тень отрыва от страницы. */
body.glass .ai-select-dropdown,
body.glass .ai-attach-menu,
body.glass .ai-more-menu,
body.glass .ai-bc-dropdown,
body.glass .ai-helper-menu,
body.glass #aiPersonaSelectDropdown,
body.glass .dropdown-content,
body.glass #translateEngineDropdown,
body.glass .download-dropdown-content,
body.glass .folder-actions-menu,
body.glass .import-dropdown-content,
body.glass .format-select-list,
body.glass .interactive-dropdown-content,
body.glass .style-dropdown-content,
body.glass .user-dropdown,
body.glass .reaction-picker,
body.glass .full-reaction-picker,
body.glass .filter-dropdown,
body.glass .add-block-menu,
body.glass .ai-tools-menu,
body.glass .atlas-attach-popover,
body.glass .rm-export-menu,
body.glass .rm-cat-dropdown,
body.glass .dot-color-picker,
body.glass .breadcrumb-dropdown-menu,
body.glass .edit-history-popup,
body.glass .ai-user-message-actions,
body.glass .markdown-toolbar,
body.glass .mindmap-help-panel,
body.glass .mindmap-outline-panel,
body.glass .mindmap-keys-panel,
body.glass .channel-info-panel,
body.glass .ai-chat-search-container,
body.glass .chat-item-actions-revealed,
body.glass emoji-picker {
    box-shadow: var(--glass-shadow-menu) !important;
}
/* Быстрая навигация прокручивается (overflow: auto): поля, чтобы тени крайних кнопок не резались. */
body.has-wallpaper #quickNavButtons { padding: 6px; }
body.has-wallpaper .quick-nav-btn { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30) !important; }


/* ── Правки по проходу новичком (11.09.2026) ────────────────────────────── */

/* Подпись загрузчика: между текстом и ссылкой-действием пропадал пробел
   («Перетащите файл илиВыберите»), пробел из строки съедала разметка FilePond.

   Отступ был только слева — под тогдашний порядок слов, где ссылка стояла
   последней. С тех пор во всех трёх языках ссылка идёт ПЕРВОЙ («Выберите
   файл» или перетащите сюда), и слипаться стало справа. Ставим с обеих
   сторон: подпись выровнена по центру, лишние три десятых em по краю
   незаметны, зато порядок слов больше не важен. */
.filepond--label-action { margin-inline: .3em; }

/* Экран создания теста прокручивается под нижним меню: последняя строка
   («Выберите формат…») оказывалась за панелью. */
#parserArea { padding-bottom: calc(95px + env(safe-area-inset-bottom, 0px)); }

/* Имя файла в тесте — это подпись, а не заголовок: оно не должно спорить
   с самим вопросом. */
#score .quiz-filename-display {
    color: var(--secondary-text-color);
    font-size: .9rem;
    font-weight: 500;
    opacity: .75;
}

/* Пустое состояние тепловой карты вместо сетки из нулей. */
.heatmap-empty {
    padding: 22px 16px;
    text-align: center;
    color: var(--secondary-text-color);
}
.heatmap-empty-title {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}
.heatmap-empty-text { font-size: .9em; line-height: 1.45; }

/* Строка «что дальше» на экране результатов. */
.results-hint {
    margin: 6px 0 14px;
    color: var(--secondary-text-color);
    font-size: .95em;
}

/* Флажок согласия, на котором остановилась регистрация. */
.consent-needed {
    outline: 2px solid var(--button-primary-bg);
    outline-offset: 4px;
    border-radius: 8px;
}

/* Баннер cookie на телефоне садился поверх нижнего меню (75 px) и закрывал навигацию
   до тех пор, пока его не примут. Поднимаем над панелью. */
@media (max-width: 768px) {
    .cookie-consent-banner { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}


/* ── Микровзаимодействия 12.09.2026 ─────────────────────────────────────── */

/* Значок состояния на варианте ответа. Верный и неверный различались только
   цветом фона: для дальтоника оба состояния выглядели одинаково, а боковым
   зрением цвет не читается вовсе. */
#answerOptions li.correct,
#answerOptions li.incorrect,
#answerOptions li.actual-correct,
#answerOptions li.missed-correct {
    position: relative;
    padding-right: 46px;
}
#answerOptions li.correct::after,
#answerOptions li.incorrect::after,
#answerOptions li.actual-correct::after,
#answerOptions li.missed-correct::after {
    position: absolute;
    top: 50%;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    animation: answerMarkIn .28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#answerOptions li.correct::after,
#answerOptions li.actual-correct::after,
#answerOptions li.missed-correct::after {
    content: '✓';
    background: var(--feedback-correct-text);
    color: var(--feedback-correct-bg);
}
#answerOptions li.incorrect::after {
    content: '✕';
    background: var(--feedback-incorrect-text);
    color: var(--feedback-incorrect-bg);
}
@keyframes answerMarkIn {
    from { opacity: 0; transform: scale(.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* Полоса хода теста. Светлая часть — текущая позиция, тёмная — сколько
   вопросов уже отвечено: пропуски видно сразу. */
.quiz-progress {
    /* У самой кромки экрана, над шапкой с кнопками: внутри потока полоса
       оказывалась под рядами иконок и терялась среди них. Ширину держим по
       контейнеру, чтобы на широком экране линия не растягивалась во всю страницу. */
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 101;
    width: 100%;
    max-width: 700px;
    height: 4px;
    margin: 0 auto;
    /* Дорожка и заливка раньше брались из переменных, которые в теме «Тьма»
       почти сливаются с чёрным фоном, и полоса исчезала целиком. Дорожка —
       подмешанный цвет текста, заливка — акцент темы: он по определению
       контрастен её фону. */
    background: color-mix(in srgb, var(--text-color) 16%, transparent);
    overflow: hidden;
}
.quiz-progress-fill,
.quiz-progress-answered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width .35s cubic-bezier(0.25, 1, 0.5, 1);
}
.quiz-progress-fill {
    background: var(--accent-color);
    opacity: .4;
}
.quiz-progress-answered {
    background: var(--accent-color);
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    #answerOptions li.correct::after,
    #answerOptions li.incorrect::after,
    #answerOptions li.actual-correct::after,
    #answerOptions li.missed-correct::after { animation: none; }
    .quiz-progress-fill,
    .quiz-progress-answered { transition: none; }
}


/* ── Вычёркивание варианта и метка прошлых ошибок ────────────────────────── */

/* Вычеркнутый вариант: приём с экзамена — отсечь заведомо неверные. Он гаснет
   и перечёркивается, но остаётся на месте, чтобы решение можно было вернуть. */
#answerOptions li.eliminated {
    opacity: .45;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--secondary-text-color);
    box-shadow: none;
    transition: opacity .2s ease;
}

/* Метка «здесь вы уже ошибались». Правильный ответ она не выдаёт — только повод
   прочитать вопрос внимательнее, чем в первый раз. */
.question-seen-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--feedback-incorrect-text) 12%, transparent);
    color: var(--feedback-incorrect-text);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

.question-seen-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    #answerOptions li.eliminated { transition: none; }
}


/* ── Экран результатов: иерархия ─────────────────────────────────────────────
   Было пять кнопок в четырёх разных оформлениях и три равных абзаца статистики:
   разобрать ошибки выглядело так же, как скачать файл. Теперь порядок и вес
   рассказывают одну историю: сколько набрал → что это значит → что делать. */

#resultsArea > h2 { order: 1; }
.results-hero { order: 2; }
#resultsHint { order: 3; }
#resultsTiming { order: 4; }
#attemptsCompareBlock { order: 5; }
#errorReviewArea { order: 6; }
#aiAnalysisArea { order: 7; }
#retrySameTestBtn { order: 8; }
#marathonLeaderboardArea { order: 9; }
#restartButton { order: 10; }
#resultsServiceRow { order: 11; }
#triggeredQuizDownloadArea { order: 12; }

/* Итог одним взглядом. */
.results-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 10px 0 6px;
}

#resultsArea .results-hero__pct {
    margin: 0;
    color: var(--accent-color);
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.results-hero__sign {
    margin-left: 2px;
    font-size: .45em;
    font-weight: 700;
    vertical-align: super;
    opacity: .65;
}

#resultsArea .results-hero__score {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: 1rem;
    font-weight: 500;
}

/* Контекст: короткие строки под итогом, а не абзацы того же веса. */
#resultsArea .results-hint {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: .92rem;
    line-height: 1.4;
}

/* Две короткие плашки читаются с одного взгляда; одной длинной строкой время
   переносилось и обрывалось на «(8 с)». */
#resultsTiming {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    align-self: center;
    max-width: 100%;
}

#resultsTiming .results-chip {
    padding: 5px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
    font-size: .86rem;
    white-space: nowrap;
}

/* Главное действие экрана — единственная залитая кнопка рядом с ИИ-градиентом. */
/* Пара --button-primary-bg / --button-primary-text задана в каждой теме как
   контрастная. Раньше здесь стоял акцент с белым текстом, и в «Тьме», где
   акцент — чистый белый, надпись пропала на белом поле. */
#reviewErrorsButton {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

/* Служебные действия: сохранить, скопировать, отправить. Три полосы во всю
   ширину подряд читались как продолжение главных кнопок, поэтому они стоят
   одной строкой, мельче и тише остальных. */
#resultsServiceRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Отбивка от пары «пройти заново / другой тест»: внутри группы зазор 10,
       между группами вдвое больше. */
    margin: 10px 4px 0;
}

#resultsServiceRow #feedbackDownloadArea {
    display: flex;
    /* Внутри две кнопки, снаружи одна: доля вдвое больше, иначе третья кнопка
       сжималась до обрезанной надписи. */
    flex: 2 1 0;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

#resultsServiceRow > button { flex: 1 1 0; }

#resultsServiceRow button {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 10px 8px;
    font-size: .78em;
    font-weight: 500;
    color: var(--secondary-text-color);
    /* Подпись говорит, над чем действие, поэтому она длиннее одного слова:
       значок сверху, текст под ним и перенос вместо обрезки. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
    text-align: center;
}

#resultsServiceRow button svg { width: 17px; height: 17px; }

#downloadTriggeredQuizButton {
    padding: 11px 16px;
    font-size: .92em;
    font-weight: 500;
    color: var(--secondary-text-color);
}

#shareResultBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--secondary-text-color);
}

#shareResultBtn svg { width: 16px; height: 16px; }


/* Повтор того же теста: равен по весу «Пройти другой тест» — это парные действия,
   и различать их должен текст, а не оформление. */
#retrySameTestBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-color);
}

#retrySameTestBtn svg { width: 17px; height: 17px; }


/* Метка «черновик сохранён» у поля конвертера: появляется на пару секунд. */
.parser-draft-mark {
    margin-left: auto;
    color: var(--secondary-text-color);
    font-size: .8em;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.parser-draft-mark.is-visible { opacity: .85; }

/* Копирование ошибок — служебное действие рядом с выгрузкой файла. */
#copyErrorsButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 11px 16px;
    font-size: .92em;
    font-weight: 500;
    color: var(--secondary-text-color);
}

#copyErrorsButton svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
    .parser-draft-mark { transition: none; }
}


#startQuizButton#startQuizButton {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 700;
}


/* Плашка, которая открывает вопрос: выглядит нажимаемой, но остаётся плашкой. */
.results-chip--action {
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font: inherit;
    font-size: .86rem;
    cursor: pointer;
    transition: background .2s ease;
}

.results-chip--action:hover,
.results-chip--action:focus-visible {
    background: color-mix(in srgb, var(--text-color) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .results-chip--action { transition: none; }
}


/* Отбивка между группами действий: внутри группы работает зазор колонки,
   а пара «пройти заново / другой тест» отделяется от разбора ошибок. */
#retrySameTestBtn { margin-top: 10px; }


/* Подсказка о свайпе: один раз за всё время, поверх теста, гаснет сама.
   Имя своё: .swipe-hint уже занято стрелками режима карточек. */
.quiz-swipe-hint {
    position: fixed;
    left: 50%;
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100vw - 48px);
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
    border: 1px solid var(--border-color);
    font-size: .88rem;
    transform: translateX(-50%);
    animation: swipeHintIn .35s cubic-bezier(0.25, 1, 0.5, 1);
}

.quiz-swipe-hint.is-leaving {
    opacity: 0;
    transition: opacity .35s ease;
}

.quiz-swipe-hint svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@keyframes swipeHintIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Счётчик серии: появляется с третьего верного подряд и подпрыгивает на каждом
   следующем. Раньше серия отмечалась только свечением, без самого числа. */
.combo-counter {
    flex-shrink: 0;
    margin: 0 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    font-size: .82em;
    font-weight: 700;
    white-space: nowrap;
}

.combo-counter.is-bump {
    animation: comboBump .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes comboBump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-swipe-hint { animation: none; }
    .combo-counter.is-bump { animation: none; }
}


/* Плашка о подставленных настройках: сообщение, а не блок управления, поэтому
   тише заголовка и без собственной тени. */
.quiz-prefs-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 4px 16px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    color: var(--secondary-text-color);
    font-size: .86rem;
    line-height: 1.3;
    text-align: left;
}

.quiz-prefs-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.quiz-prefs-note span {
    flex: 1 1 auto;
    min-width: 0;
}

.quiz-prefs-note button {
    flex-shrink: 0;
    width: auto;
    margin: 0;
    padding: 5px 12px;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 10%, transparent);
    box-shadow: none;
    color: var(--text-color);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.quiz-prefs-note button:hover {
    background: color-mix(in srgb, var(--text-color) 18%, transparent);
}


/* Поиск и фильтр над сеткой номеров. */
.quick-nav-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.quick-nav-search {
    position: relative;
    /* Поиск занимает всю строку: два фильтра встают под ним своим рядом. */
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
}

.quick-nav-search svg {
    position: absolute;
    left: 12px;
    /* Выравнивание по вертикали задано явно. Раньше у лупы был только left, а
       по высоте она держалась на align-items: center родителя — но абсолютно
       позиционированный элемент подчиняется этому правилу лишь при top: auto,
       и браузеры считают такую «статическую позицию» по-разному. Отсюда и
       перекос: иконка сидела чуть выше строки. */
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    /* Толщина линии у lucide по умолчанию 2 при размере 24. На 16 пикселях
       такая линия выглядит жирнее окружающего текста. */
    stroke-width: 1.8;
    pointer-events: none;
    color: var(--secondary-text-color);
}

.quick-nav-search input {
    width: 100%;
    height: 38px;
    /* !important тут вынужденный: глобальное правило для input[type="search"]
       выше по файлу ставит margin-bottom: 10px !important, и обычное margin: 0
       ему проигрывало. Эти десять пикселей растягивали контейнер поиска с 38 до
       48, и лупа, выровненная по его середине, садилась на пять пикселей ниже
       строки. Они же давали двойной отступ под полем — свой margin плюс gap
       родителя, — отчего весь блок выглядел собранным наспех. */
    margin: 0 !important;
    box-sizing: border-box;
    padding: 0 12px 0 34px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--input-bg-color, var(--container-bg-color));
    color: var(--text-color);
    font-size: .88rem;
}

.quick-nav-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.quick-nav-filter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 34px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--secondary-text-color);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

#quickNavUnansweredBtn.is-active,
#quickNavFlaggedBtn.is-active {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

/* Найденные вопросы: номер и начало текста, чтобы узнать вопрос без перехода. */
.quick-nav-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    margin-bottom: 12px;
    overflow-y: auto;
}

.quick-nav-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--text-color);
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
}

.quick-nav-result:hover {
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
}

.quick-nav-result__num {
    flex-shrink: 0;
    min-width: 24px;
    color: var(--secondary-text-color);
    font-weight: 700;
}

.quick-nav-result__text {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    overflow: hidden;
}

.quick-nav-empty {
    margin: 4px 0;
    color: var(--secondary-text-color);
    font-size: .84rem;
    text-align: center;
}

.quick-nav-hidden {
    display: none !important;
}


/* Заметка к вопросу: тихая полоса под вариантами, нажимается целиком. */
.question-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 4px 0;
    padding: 10px 13px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    color: var(--text-color);
    font-size: .88rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.question-note svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--secondary-text-color);
}

.question-note span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Кнопка заметки в шапке: вид берёт из общего правила панели, своё у неё
   только одно — точка у края, которая говорит, что заметка уже есть. */
#questionNoteBtn {
    position: relative;
}

#questionNoteBtn.active::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--container-bg-color);
    border-radius: 50%;
    background: var(--accent-color);
}

/* Отмена ответа стоит рядом с «Объяснить», но тише её: это откат, а не действие. */
.undo-answer-btn {
    color: var(--secondary-text-color);
}


/* ===== ЭКРАН НАСТРОЕК ТЕСТА: ЧИТАЕМОСТЬ =====
   Подписи были inline-содержимым блока (у label в группе стоит display:
   contents), и длинный текст переносился под тумблер к левому краю: строка
   разваливалась, а шесть пунктирных линий подряд читались одной кашей.
   Строка стала рядом из трёх колонок, разделение держат заголовки разделов.
   Имя .quiz-setting-text своё: .settings-label-text занято настройками ИИ-чата. */
#quizSetupArea .settings-section-head {
    margin: 24px 0 10px;
    color: var(--secondary-text-color);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
}

#quizSetupArea .settings-section-head:first-of-type {
    margin-top: 4px;
}

#quizSetupArea .settings-group {
    /* Шесть пунктирных линий подряд читались одной кашей: разделение держат
       заголовки разделов и единый вертикальный шаг. */
    border-bottom: none;
    margin-bottom: 18px;
}

#quizSetupArea .range-inputs-container {
    margin-top: 12px;
}

/* Мобильный медиазапрос (max-width: 768px) разворачивает любую .settings-group
   в колонку через !important — там это спасало длинные абзацы. Здесь строка
   собрана заново, поэтому колонку перебиваем: без !important правило с ID всё
   равно проиграет, потому что важность идёт раньше специфичности. */
#quizSetupArea .settings-row {
    display: flex;
    flex-direction: row !important;
    /* Без запрета переноса длинная подпись выталкивала тумблер на вторую
       строку, к левому краю: ряд читался как два разных пункта. */
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px;
    margin-bottom: 2px;
    padding: 9px 4px !important;
}

/* Тумблер уходит вправо: слева остаётся единый край у заголовков разделов,
   подписей ползунков и текста строк. */
#quizSetupArea .settings-row > input[type="checkbox"] {
    order: 3;
    margin-left: 0 !important;
}

#quizSetupArea .settings-row > label,
#quizSetupArea .settings-row__body {
    order: 1;
}

/* Поле количества стоит перед тумблером: оно уточняет ту же настройку. */
#quizSetupArea .settings-row__count {
    order: 2;
    flex-shrink: 0;
    width: 62px !important;
    margin: 0 !important;
}

/* Идентификатор нужен, чтобы перебить display: contents у подписей группы. */
#quizSetupArea .settings-row > label {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

#quizSetupArea .settings-row > label > i,
#quizSetupArea .settings-row > label > svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    color: var(--secondary-text-color);
}

#quizSetupArea .quiz-setting-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.3;
}

#quizSetupArea .settings-hint {
    display: block;
    color: var(--secondary-text-color);
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.3;
}

/* Предложение «Случайный набор из N вопросов» переносится целиком. */
#quizSetupArea .settings-row__body {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* Тот же медиазапрос растягивает первый div группы на всю ширину —
       в строке с тумблером это выбросило бы его на вторую строку. */
    width: auto !important;
    min-width: 0;
}

/* Подписи над ползунками: заголовок и пояснение под ним. */
#quizSetupArea .settings-block-label,
#quizSetupArea .range-label-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    text-align: left;
}

#quizSetupArea .settings-block-label .settings-hint {
    margin-top: 2px;
}


/* Фильтры отдельным рядом под поиском: втроём в одну строку они не влезали. */
.quick-nav-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

/* Слово, которое переворачивает задание. Подчёркивание, а не заливка: рядом
   уже живёт заливка триггер-слов, отмеченных вручную. */
.negation-mark {
    color: var(--feedback-incorrect-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Номер вопроса в строке состояния ведёт к первому неотвеченному. */
.score-jump {
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s ease;
}

.score-jump:hover,
.score-jump:focus-visible {
    background: color-mix(in srgb, var(--text-color) 10%, transparent);
}

/* Кнопка завершения, когда отвечать больше нечего. */
#finishTestButton.is-calling {
    animation: finishCall 1.2s ease-in-out 1;
}

@keyframes finishCall {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.04); }
    60% { transform: scale(0.99); }
}

@media (prefers-reduced-motion: reduce) {
    .score-jump { transition: none; }
    #finishTestButton.is-calling { animation: none; }
}


/* ===== ПАНЕЛЬ НАВИГАЦИИ ПО ВОПРОСАМ: ОДИН КРАЙ И ВОЗДУХ =====
   Поиск и фильтры шли по одному краю, сетка номеров по другому: панель
   отступала на 25 px, а сетка вдобавок центрировалась, и ни одна строка ни с
   чем не совпадала. Фильтры при этом упирались прямо в номера. */
#quizArea #quickNavPanel {
    padding-left: 4px;
    padding-right: 4px;
}

/* Заголовок раздела, а не подпись к списку: тот же вид, что у разделов
   в настройках теста. */
#quizArea #quickNavPanel h4 {
    margin: 0 0 12px;
    color: var(--secondary-text-color);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    /* По центру. Раньше стояло по левому краю — «заголовок раздела, как в
       настройках теста», — но здесь под ним не список настроек, а поиск,
       фильтры и сетка номеров, и сетка стоит по центру. Левый заголовок
       над центрованным блоком выглядел съехавшим. */
    text-align: center;
}

/* Поиск и фильтры отодвинуты от края.
   Панели заданы боковые поля в 4 px — так сетка номеров совпадает с краем
   карточки. Но под это правило попали и поиск с фильтрами: они упирались
   прямо в край экрана, хотя внутри сетки цифры отступают на 10 px. Ставим
   им тот же отступ — тогда поле поиска, чипы и первый столбец номеров идут
   по одной линии. Двигаем только эти два ряда: заголовок и сетка на месте. */
#quizArea .quick-nav-tools {
    gap: 10px;
    margin-bottom: 10px;
    padding-inline: 10px;
}

#quizArea .quick-nav-filters {
    margin-bottom: 14px;
    padding-inline: 10px;
}

/* Сетка номеров — один предмет, а не россыпь квадратов по всей ширине.
   Колонки выравниваются сами, поэтому последняя строка не висит по центру. */
#quizArea #quickNavButtons {
    display: grid !important;
    /* Колонки были minmax(40px, 1fr) и растягивались на всю ширину, а клетка
       фиксированные 32px: между клетками получалось 17px по горизонтали против
       8px по вертикали, и ряды выглядели разреженными. Колонка по размеру
       клетки — промежутки одинаковые во все стороны, блок стоит по центру. */
    grid-template-columns: repeat(auto-fill, minmax(32px, max-content));
    gap: 8px !important;
    justify-items: center;
    justify-content: center;
    /* Ровно шесть рядов. При 300px полоса обрывалась посреди седьмого ряда и
       резала цифры пополам — казалось, что список сломан. На широком экране
       клетка 36px (ui-addons.js): 36*6 + 8*5 + 20 = 276. */
    max-height: calc(36px * 6 + 8px * 5 + 20px);
    padding: 10px !important;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
}

/* Заголовок категории занимает всю ширину сетки. */
#quizArea #quickNavButtons .quick-nav-category {
    grid-column: 1 / -1;
    width: auto;
    margin: 4px 0 2px;
}

/* Найденные вопросы живут в той же подложке, что и сетка. */
#quizArea .quick-nav-results {
    margin-bottom: 14px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .quick-nav-filter { transition: none; }
}


/* Полоса отмены удаления. Стоит над нижним меню, сама уходит, а тонкая
   полоска снизу показывает, сколько времени на раздумье осталось. */
.undo-bar {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(420px, calc(100vw - 36px));
    padding: 12px 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .26);
    font-size: .88rem;
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(0.25, 1, 0.5, 1);
}

.undo-bar.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.undo-bar__text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.undo-bar__btn {
    flex-shrink: 0;
    width: auto;
    height: 32px;
    margin: 0;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    box-shadow: none;
    color: var(--accent-color);
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}

.undo-bar__life {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-color);
    transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
    .undo-bar { transition: opacity .2s ease; }
    .undo-bar__life { display: none; }
}


/* Карточка колоды: название, объём и работа на сегодня. Раньше стояло одно
   название, и понять, стоит ли открывать, можно было только открыв. */
.deck-card-count {
    margin-top: 4px;
    color: var(--secondary-text-color);
    font-size: .74rem;
    line-height: 1.2;
}

.deck-card-due-pill {
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--feedback-correct-text) 16%, transparent);
    color: var(--feedback-correct-text);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* Сколько ошибок по файлу ещё не разобрано. */
.recent-file-errors {
    flex-shrink: 0;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--feedback-incorrect-text) 16%, transparent);
    color: var(--feedback-incorrect-text);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Блок «У вас на устройстве» над результатами общей базы. */
.local-search-area {
    margin: 0 4px 18px;
}

.local-search-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--secondary-text-color);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
}

.local-search-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
    font-size: .74rem;
    letter-spacing: 0;
}

.local-search-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.local-search-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--text-color);
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
}

.local-search-row:hover {
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
}

.local-search-row svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--secondary-text-color);
}

.local-search-row__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.local-search-row__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    overflow: hidden;
}

.local-search-row__sub {
    color: var(--secondary-text-color);
    font-size: .78rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Экран «Мои заметки». */
.notes-screen {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.notes-screen-search {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--input-bg-color, var(--container-bg-color));
    color: var(--text-color);
    font-size: .9rem;
}

.notes-screen-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 56vh;
    overflow-y: auto;
}

.notes-screen-item {
    position: relative;
    padding: 12px 42px 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-color) 4%, transparent);
}

.notes-screen-item__q {
    margin-bottom: 6px;
    color: var(--secondary-text-color);
    font-size: .8rem;
    line-height: 1.35;
}

.notes-screen-item__text {
    color: var(--text-color);
    font-size: .92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.notes-screen-item__meta {
    margin-top: 8px;
    color: var(--secondary-text-color);
    font-size: .74rem;
}

.notes-screen-item__del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.notes-screen-item__del:hover {
    background: color-mix(in srgb, var(--feedback-incorrect-text) 14%, transparent);
    color: var(--feedback-incorrect-text);
}

.notes-screen-item__del svg {
    width: 15px;
    height: 15px;
}

.notes-screen-empty {
    margin: 10px 0;
    color: var(--secondary-text-color);
    font-size: .86rem;
    text-align: center;
}


/* История разборов: список последних удачных конвертаций. */
.parser-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 58vh;
    overflow-y: auto;
    text-align: left;
}

.parser-history-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
}

.parser-history-row:hover {
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
}

.parser-history-row__head {
    color: var(--secondary-text-color);
    font-size: .76rem;
    font-weight: 600;
}

.parser-history-row__text {
    font-size: .86rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Список горячих клавиш. */
.keys-help {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.keys-help__row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .9rem;
}

.keys-help__row kbd {
    flex: 0 0 92px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-color);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
}

.keys-help__row span {
    color: var(--secondary-text-color);
}


/* Заголовки разделов главной — один вид на всю страницу. Раньше «Недавно
   использованные:» и «Колоды:» стояли по центру с двоеточием, а «МАТЕРИАЛЫ»
   и «ЕЩЁ» — капсом с линией. */
.home-section-head {
    margin: 0 0 10px;
    color: var(--secondary-text-color);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
}

.decks-header-actions {
    /* Две кнопки в строку и одинаковой ширины: раньше они стояли столбиком,
       каждая по длине своей подписи, и ряд выглядел рваным. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.decks-header-actions button {
    width: 100%;
    min-width: 0;
    margin: 0;
    justify-content: center;
}

/* Строка «что сегодня»: долг, ошибки и серия одним взглядом. */
.today-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.today-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    margin: 0;
    padding: 8px 13px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--text-color);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1;
}

.today-chip.is-action {
    cursor: pointer;
}

.today-chip svg {
    width: 15px;
    height: 15px;
}

.today-chip--due {
    border-color: color-mix(in srgb, var(--feedback-correct-text) 45%, transparent);
    background: color-mix(in srgb, var(--feedback-correct-text) 12%, transparent);
    color: var(--feedback-correct-text);
}

.today-chip--errors {
    border-color: color-mix(in srgb, var(--feedback-incorrect-text) 45%, transparent);
    background: color-mix(in srgb, var(--feedback-incorrect-text) 12%, transparent);
    color: var(--feedback-incorrect-text);
}

/* Серия, засчитанная сегодня, дышит: по одной цифре не понять, жива она или нет. */
#currentStreakCount.is-alive {
    animation: streakAlive 2.4s ease-in-out infinite;
}

@keyframes streakAlive {
    0%, 100% { text-shadow: none; }
    50% { text-shadow: 0 0 10px rgba(230, 126, 34, .55); }
}

/* Потянуть вниз — обновить. */
.home-pull {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 0;
    overflow: hidden;
    color: var(--secondary-text-color);
    transition: height .18s ease;
}

.home-pull svg {
    width: 20px;
    height: 20px;
    margin-bottom: 6px;
    transition: transform .2s ease, color .2s ease;
}

.home-pull.is-ready svg {
    transform: rotate(180deg);
    color: var(--accent-color);
}

.home-pull.is-spinning svg {
    animation: homePullSpin .9s linear infinite;
}

@keyframes homePullSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #currentStreakCount.is-alive { animation: none; }
    .home-pull, .home-pull svg { transition: none; }
    .home-pull.is-spinning svg { animation: none; }
}


/* Кнопка «наверх» в видимом состоянии становится липкой и встаёт в поток —
   ровно на строку копирайта. Даём подписи место под собой. */
footer p {
    padding-bottom: 52px;
}


/* Строка канала: имя и под ним последнее сообщение, время справа.
   Раньше стояло только имя, и понять, где что-то произошло, было нельзя. */
.channel-main-column {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.channel-preview {
    color: var(--secondary-text-color);
    font-size: .78rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-preview:empty {
    display: none;
}

.channel-preview-time {
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: 8px;
    color: var(--secondary-text-color);
    font-size: .72rem;
    white-space: nowrap;
}

.channel-preview-time:empty {
    display: none;
}

/* Действия над колодой по долгому нажатию. */
.deck-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.deck-actions__row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--text-color);
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
}

.deck-actions__row:hover {
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
}

.deck-actions__row svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--secondary-text-color);
}

.deck-actions__row:last-child svg,
.deck-actions__row:last-child span {
    color: var(--feedback-incorrect-text);
}

/* Смахивание строки недавнего файла: вертикальная прокрутка остаётся за списком. */
.recent-file-item {
    touch-action: pan-y;
}


/* Подпись пустого раздела колод: по левому краю, как и всё в блоке. */
#decksList .course-item-placeholder {
    padding: 6px 2px 10px;
    color: var(--secondary-text-color);
    font-size: .88rem;
    line-height: 1.45;
    text-align: left;
}

/* Окно «Получи PRO» выше экрана телефона: шапка уезжала за верхний край.
   Ограничиваем высоту и прокручиваем содержимое внутри. */
.qst-ref-modal {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}


/* ===== СТРОКА КАНАЛА =====
   Подпись и время задавали свой цвет и не переворачивались вместе со строкой:
   на активном канале получался тёмный текст на тёмной плашке. Цвет активной
   строки задаёт она сама, а подпись лишь приглушается прозрачностью. */
.channel-item.active .channel-preview,
.channel-item.active .channel-preview-time {
    color: inherit;
    opacity: .75;
}

/* Значки канала стоят после названия: раньше замок и планшет шли перед ним,
   и каждое название начиналось на своей позиции. */
.channel-name-container .channel-name-text {
    flex: 0 1 auto;
}

.channel-name-container svg {
    flex-shrink: 0;
    opacity: .65;
}

/* Аватарка канала тише: ряд одинаковых ярких кругов перетягивал внимание
   с названий, ради которых в список и заходят. */
.channel-avatar-sm--placeholder {
    background: color-mix(in srgb, var(--text-color) 12%, transparent) !important;
    color: var(--secondary-text-color) !important;
    font-weight: 700;
}

.channel-item.active .channel-avatar-sm--placeholder {
    background: color-mix(in srgb, currentColor 22%, transparent) !important;
    color: inherit !important;
}


/* ===== ЧИТАЕМОСТЬ И РАЗМЕР МИШЕНЕЙ =====
   Обход с замером показал подписи по 10 px и кнопки по 32-35 px. Палец
   накрывает около 40 px, и всё, что меньше, промахивается — особенно у края
   экрана. Значок внутри не растёт, увеличивается только площадь нажатия. */
.recent-file-delete,
.favorite-folder-item .folder-actions-btn,
.share-course-btn,
#createCourseBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

#openCalendarBtn,
#openDecksLibraryBtn,
#verInputToggle {
    min-height: 40px;
}

/* Числа и месяцы в тепловой карте рисует библиотека кеглем 8 px:
   на телефоне это неразличимо. */
#cal-heatmap text {
    font-size: 10px;
}

#cal-heatmap .graph-label {
    font-size: 11px;
}


/* Длинное условие — абзац, а не заголовок. По центру оно читается тяжело:
   каждая строка начинается на новом месте, глазу не за что зацепиться. */
#questionText.is-long-question {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
    text-align: left;
    text-wrap: pretty;
}

/* Ползунок размера текста вопроса в настройках приложения. */
/* Размер текста вопроса — в меню настроек теста, над самим вопросом.
   Заголовок повторяет вид разделов «Навигация» и «Положение панели» этого же
   меню, чтобы новый пункт не выглядел пришитым сбоку. */
.quiz-menu-head {
    padding: 8px 12px;
    font-size: 0.8em;
    color: var(--secondary-text-color);
    font-weight: bold;
    text-transform: uppercase;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin: 5px 0;
}

.quiz-text-scale-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 10px;
}

.quiz-text-scale-menu input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    /* Глобальное правило для полей ввода ставит поля и ширину во всю строку с
       !important — в тесном меню это разъезжается. */
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    background: transparent;
}

.quiz-text-scale-menu span {
    flex-shrink: 0;
    min-width: 44px;
    color: var(--secondary-text-color);
    font-size: .84rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* Ряд авторов под полем поиска по каналу. */
.chat-search-authors {
    display: flex;
    gap: 6px;
    padding: 8px 12px 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-search-authors::-webkit-scrollbar {
    display: none;
}

.chat-search-author {
    flex-shrink: 0;
    width: auto;
    min-height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--secondary-text-color);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.chat-search-author.is-active {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}


/* Значок, взлетающий от пальца при двойном тапе по сообщению. Это
   подтверждение жеста: без него непонятно, засчитан второй тап или нет. */
.fly-reaction {
    position: fixed;
    z-index: 10000;
    font-size: 34px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
}

/* Закреплённая колода. Значок в углу карточки, чтобы порядок списка не
   выглядел случайным: видно, почему она стоит первой.
   position: relative у .deck-card уже задан выше — здесь только значок. */
.deck-card-pin {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    color: var(--accent-color);
    opacity: .75;
}

.deck-card.is-pinned {
    border-color: color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
}

/* Недописанное в списке каналов. Цветом, а не значком: строка и так узкая,
   а слово «Черновик» уже говорит, что это. */
.channel-preview.is-draft {
    color: var(--accent-color);
    opacity: 1;
}


/* Разделитель даты стал кнопкой перехода. Курсор и подсветка — весь намёк:
   подпись должна остаться подписью, а не превратиться в ещё одну кнопку. */
.date-divider[role="button"] {
    cursor: pointer;
}

.date-divider[role="button"]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Куда приехали после перехода. Гаснет само через полторы секунды. */
.date-divider--hit > span {
    background: color-mix(in srgb, var(--accent-color) 22%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent);
    transition: background .25s ease, box-shadow .25s ease;
}

/* Недавние запросы под полем поиска по архиву. */
.search-history-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.search-history-chip {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.search-history-chip__text {
    width: auto;
    min-height: 34px;
    max-width: 230px;
    margin: 0;
    padding: 0 6px 0 12px;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--secondary-text-color);
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.search-history-chip__drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--secondary-text-color);
    opacity: .6;
    cursor: pointer;
}

.search-history-chip__drop i {
    width: 13px;
    height: 13px;
}

.search-history-chip:hover {
    border-color: var(--accent-color);
}






/* ===== СЕТКА ВОПРОСОВ: ЧИТАЕТСЯ КАК ХОД РАБОТЫ =====
   Неотвеченные клетки были залиты сплошным --button-secondary-bg (в тёмной
   теме #495057) — то есть тяжелее отвеченных зелёных. Невыполненное кричало
   громче выполненного, и сетка превращалась в пёструю шахматку вместо картины
   прогресса. Текущий вопрос при этом почти сливался с фоном панели.

   Теперь: неотвеченное — тихий контур, отвеченное — цветная заливка, текущий —
   акцент. Цвета считаются от токенов темы, поэтому работают во всех пяти.
   Перебиваем впрыск ui-addons.js: у него !important, у нас два id плюс !important. */
#quizArea #quickNavButtons .quick-nav-btn {
    background-color: color-mix(in srgb, var(--text-color) 6%, transparent) !important;
    border-color: color-mix(in srgb, var(--text-color) 16%, transparent) !important;
    color: color-mix(in srgb, var(--text-color) 65%, transparent) !important;
    font-weight: 500 !important;
}

#quizArea #quickNavButtons .quick-nav-btn.answered.correct {
    background-color: var(--feedback-correct-bg) !important;
    border-color: var(--feedback-correct-border) !important;
    color: var(--feedback-correct-text) !important;
}

#quizArea #quickNavButtons .quick-nav-btn.answered.incorrect {
    background-color: var(--feedback-incorrect-bg) !important;
    border-color: var(--feedback-incorrect-border) !important;
    color: var(--feedback-incorrect-text) !important;
}

/* «Вы здесь» должно быть видно сразу, не вглядываясь. */
#quizArea #quickNavButtons .quick-nav-btn.current,
#quizArea #quickNavButtons .quick-nav-btn.current.answered.correct,
#quizArea #quickNavButtons .quick-nav-btn.current.answered.incorrect {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
    font-weight: 700 !important;
}


/* На телефоне клетка 32px (ui-addons.js), поэтому и высота полосы другая:
   32*6 + 8*5 + 20 = 252. Иначе шестой ряд снова резался бы пополам. */
@media (max-width: 768px) {
    #quizArea #quickNavButtons {
        max-height: calc(32px * 6 + 8px * 5 + 20px);
    }
}


/* Найденное слово в списке результатов поиска по тесту. Раньше показывалось
   начало вопроса, и понять, почему строка нашлась, было нельзя. */
.quick-nav-result__hit {
    padding: 0 2px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-color) 38%, transparent);
    color: inherit;
    font-weight: 700;
}

/* Пометка «в ответе»: совпадение нашлось не в вопросе, а в варианте. */
.quick-nav-result__where {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 12%, transparent);
    color: var(--secondary-text-color);
    font-size: .74em;
    font-weight: 600;
    vertical-align: 1px;
}


/* Пока открыто окно тренировки, полоса прокрутки страницы под ним не нужна.
   У html стоит scrollbar-gutter: stable — место под полосу зарезервировано
   всегда, и справа от полноэкранного окна оставалась серая колея. Окно и так
   перекрывает страницу целиком, прокручивать под ним нечего. */
html:has(.workout-player-overlay:not(.hidden)) {
    scrollbar-gutter: auto;
    overflow: hidden;
}


/* ===== ГДЕ ТЫ В ТРЕНИРОВКЕ =====
   Сверху и снизу кадра оставалась чернота: ролик 16:9 не заполняет высокий
   экран, а заполнять его подрезкой нельзя — тренер уезжает за край. Занимаем
   верхнюю полосу делом: какое упражнение по счёту и сколько ещё терпеть. */
.wp-overall {
    /* Стоял абсолютно на top: 74px и налезал на шапку, стоило длинному
       «Далее: …» перенестись на вторую строку. Теперь это третий ряд самой
       шапки: она переносит его вниз при любой высоте заголовка. */
    flex: 0 0 100%;
    order: 3;
    margin-top: 8px;
    pointer-events: none;
}

.wp-overall__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
    color: #ffffffd9;
    font-size: .82rem;
    font-weight: 600;
    text-shadow: 0 1px 3px #000000b3;
}

.wp-overall__left {
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.wp-overall__track {
    height: 3px;
    border-radius: 999px;
    background: #ffffff2e;
    overflow: hidden;
}

.wp-overall__fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: #3498db;
    transition: width .3s linear;
}

/* ===== ТРИ СЕКУНДЫ НА ИЗГОТОВКУ =====
   Ролик стартовал сразу, и первые секунды подхода уходили на то, чтобы встать
   в позицию. */
.wp-preroll {
    position: absolute;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #000000b3;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    inset: 0;
}

.wp-preroll.hidden {
    display: none;
}

.wp-preroll__num {
    color: #fff;
    font-size: 6rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 4px 24px #000;
}

.wp-preroll__name {
    max-width: 80%;
    color: #ffffffd9;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    text-wrap: balance;
}

/* ===== ИТОГИ ТРЕНИРОВКИ =====
   Раньше окно просто закрывалось: ни сколько сделано, ни сколько заняло. */
.wp-summary__stats {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin: 4px 0 16px;
}

.wp-summary__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.wp-summary__stat b {
    color: var(--text-color);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.wp-summary__stat span {
    color: var(--secondary-text-color);
    font-size: .8rem;
}

.wp-summary__list {
    max-height: 190px;
    margin: 0;
    padding: 0 0 0 4px;
    overflow-y: auto;
    color: var(--secondary-text-color);
    font-size: .88rem;
    line-height: 1.5;
    list-style: none;
    text-align: left;
}

.wp-summary__list li::before {
    content: '✓';
    margin-right: 8px;
    color: #2ecc71;
    font-weight: 700;
}

.wp-summary__more {
    margin: 8px 0 0;
    color: var(--secondary-text-color);
    font-size: .8rem;
}


/* Что работает в этом упражнении. Стоит в нижней части кадра — там, где при
   вписанном ролике всё равно чернота.
   Имя с приставкой stage не случайно: .wp-meta уже занят строкой редактора
   программ, и одноимённый класс сломал бы её. */
.wp-stage-meta {
    position: absolute;
    bottom: 74px;
    left: 0;
    z-index: 18;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0 20px;
    pointer-events: none;
}

.wp-stage-meta.hidden {
    display: none;
}

.wp-stage-meta__muscles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wp-stage-meta__chip {
    padding: 3px 10px;
    border: 1px solid #ffffff2e;
    border-radius: 999px;
    background: #00000073;
    color: #ffffffd9;
    font-size: .76rem;
    font-weight: 600;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}


/* ===== ОКНО ТРЕНИРОВКИ ЛЁЖА (АЛЬБОМНАЯ ОРИЕНТАЦИЯ) =====
   Телефон повёрнутый вбок — это те же 400 точек ширины, но втрое меньше высоты.
   Вёрстка считалась под вертикальный экран: лента в 96px съедала треть окна,
   плашка мышц с bottom: 74px ложилась поверх видео вместо чёрного поля под ним,
   а таймер в 1.6em перекрывал кадр. Здесь всё ужимается по высоте. */
@media (orientation: landscape) and (max-height: 520px) {
    .wp-header {
        padding: 8px 14px !important;
    }

    .wp-now-playing {
        font-size: 1em !important;
        -webkit-line-clamp: 1;
    }

    .wp-next-up {
        font-size: .74em !important;
    }

    .wp-overall {
        margin-top: 4px;
    }

    .wp-overall__row {
        margin-bottom: 3px;
        font-size: .72rem;
    }

    /* Мышцам места нет: любое их положение приходится на кадр. Название
       упражнения и так в шапке, а разбор мышц читают не на весу. */
    .wp-stage-meta {
        display: none;
    }

    #wpTimer {
        font-size: 1.15em !important;
    }

    .wp-timer-container {
        right: 10px !important;
        bottom: 10px !important;
        padding: 2px 8px !important;
    }

    /* Лента: кадр пониже, зато плитка шире — по ширине лёжа места вдоволь,
       а при 92px обрезались все подписи до одной. */
    .wp-strip-container {
        height: 66px !important;
    }

    .wp-thumbnail {
        width: 132px !important;
    }

    .wp-thumbnail img {
        height: 24px;
    }

    .wp-thumbnail-label {
        -webkit-line-clamp: 2;
        padding: 2px 6px;
        font-size: .62em;
        line-height: 1.15;
    }

    /* Кнопки перелистывания ближе к краю: по центру они лезут на человека. */
    .wp-nav-btn {
        width: 38px;
        height: 38px;
    }

    /* Отсчёт: цифра во весь экран по высоте не влезает. */
    .wp-preroll__num {
        font-size: 3.4rem;
    }

    .wp-preroll__name {
        font-size: .9rem;
    }
}


/* ===== ОКНО «СОЗДАТЬ КАРТУ ЗНАНИЙ» =====
   Замер показал разнобой: главные кнопки лежат в .modal-buttons.vertical с
   align-items: center и собственными отступами и выходили по 296 px, а
   «Выбрать из библиотеки» и «Отмена» стоят снаружи и занимали все 359. В одной
   колонке две ширины — отсюда и ощущение кривизны. Ровняем всё по одной
   ширине, в пределах этого окна, чтобы не задеть остальные модальные окна. */
#roadmapCreateModal .modal-buttons.vertical {
    align-items: stretch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 6px !important;
    gap: 8px;
}

#roadmapCreateModal .modal-buttons.vertical button {
    width: 100% !important;
    margin: 0 !important;
    min-height: 48px;
}

/* Совет под кнопкой — вместо «(Рекомендуется)» внутри неё. */
#roadmapCreateModal .rm-create-hint {
    margin: 2px 0 10px;
    color: var(--secondary-text-color);
    font-size: .82rem;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
}

/* Описание было длинным абзацем по центру над полем — читается как стена.
   Прижимаем к полю и даём левый край. */
#roadmapCreateModal #roadmapContentPlan > p {
    margin: 12px 0 10px !important;
    font-size: .9rem;
    text-align: left;
}


/* ======================================================= */
/* === РЕДАКТОР КОЛОДЫ В БИБЛИОТЕКЕ (deck-editor.js)   === */
/* ======================================================= */
/* Лист во весь экран телефона: править карточки в окне на треть высоты
   нельзя — текст вопроса с вариантами туда не помещается. */
.de-overlay .de-modal {
    text-align: left;
    width: 100%;
    max-width: 640px;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
}
@media (min-width: 700px) {
    .de-overlay .de-modal {
        height: 88vh;
        max-height: 88vh;
        border-radius: 18px;
    }
}

.de-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 14px 10px;
    border-bottom: 1px solid var(--border-color);
}
.de-head-text { flex: 1; min-width: 0; }
.de-eyebrow {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--secondary-text-color);
}
.de-title {
    margin: 2px 0 0;
    font-size: 1.15em;
    line-height: 1.25;
    color: var(--text-color);
    overflow-wrap: anywhere;
}
.de-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.de-close:hover { background: var(--input-hover-bg-color); color: var(--text-color); }

.de-tabs { margin: 10px 14px 0; }

/* Прокручивается только содержимое: шапка и строка сохранения на месте,
   иначе кнопку «Сохранить» пришлось бы искать в конце длинного списка. */
.de-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
}

.de-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-color);
    background: var(--container-bg-color);
}
.de-state {
    flex: 1;
    min-width: 0;
    font-size: 0.82em;
    color: var(--secondary-text-color);
}
.de-state.is-dirty { color: var(--accent); font-weight: 600; }
.de-save {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}
.de-save:disabled { opacity: 0.45; cursor: default; }
.de-save svg { width: 18px; height: 18px; }

/* --- Оформление --- */
.de-cover {
    position: relative;
    width: 100%;
    max-width: 240px;
    margin: 0 auto 16px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
}
.de-cover-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text-color);
    opacity: 0.4;
}
.de-cover-empty svg { width: 44px; height: 44px; }
.de-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.de-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 6px;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--secondary-text-color);
}
.de-label em {
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
}
.de-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: 0.95em;
}
.de-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.de-area { resize: vertical; min-height: 72px; line-height: 1.4; }

.de-cover-row { display: flex; align-items: center; gap: 8px; }
.de-cover-row .de-input { flex: 1; min-width: 0; }
.de-hint {
    margin-top: 6px;
    font-size: 0.8em;
    line-height: 1.4;
    color: var(--secondary-text-color);
}

.de-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--input-hover-bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
}
.de-btn svg { width: 17px; height: 17px; }
.de-btn.ghost { background: transparent; }
.de-btn.primary {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: transparent;
}
.de-btn.danger { color: #e74c3c; }
.de-btn:disabled { opacity: 0.4; cursor: default; }

.de-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.de-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.de-facts span {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--secondary-text-color);
}
.de-facts b {
    font-size: 0.92em;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Карточки --- */
.de-cards-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.de-search { position: relative; flex: 1; min-width: 0; }
.de-search svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--secondary-text-color);
    pointer-events: none;
}
.de-search input {
    width: 100%;
    margin: 0 !important;
    padding: 10px 12px 10px 34px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: 0.9em;
}

.de-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, #e67e22 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #e67e22 12%, transparent);
    color: #e67e22;
    font: inherit;
    font-size: 0.85em;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    flex-wrap: wrap;
}
.de-warn svg { width: 17px; height: 17px; flex-shrink: 0; }
.de-warn em { margin-left: auto; font-style: normal; font-weight: 500;
              text-decoration: underline; opacity: 0.85; white-space: nowrap; }

.de-list { display: flex; flex-direction: column; gap: 8px; }
.de-card {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--input-bg-color);
    overflow: hidden;
}
.de-card.is-open { border-color: var(--accent); }
.de-card.is-bad { border-left: 3px solid #e67e22; }
.de-card.is-section {
    background: transparent;
    border-style: dashed;
}
.de-card.is-section svg { width: 18px; height: 18px; color: var(--secondary-text-color); flex-shrink: 0; }
.de-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.de-card-num {
    flex-shrink: 0;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--container-bg-color);
    color: var(--secondary-text-color);
    font-size: 0.78em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
}
.de-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.de-card-text b {
    font-size: 0.93em;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.de-card-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76em;
    color: var(--secondary-text-color);
}
.de-card-sub svg { width: 13px; height: 13px; }
.de-card-sub .ok { color: var(--feedback-correct-text, #2ecc71); }
.de-card-sub .bad { color: #e67e22; }
.de-card-arrow {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: var(--secondary-text-color);
    transition: transform 0.2s ease;
}
.de-card.is-open .de-card-arrow { transform: rotate(180deg); }
.de-card-edit:empty { display: none; }
.de-card-edit { padding: 0 12px 12px; }

.de-opts { display: flex; flex-direction: column; gap: 7px; }
.de-opt { display: flex; align-items: center; gap: 7px; }
.de-opt .de-input { flex: 1; min-width: 0; padding: 9px 11px; font-size: 0.9em; }
.de-opt.is-right .de-input {
    border-color: color-mix(in srgb, var(--feedback-correct-text, #2ecc71) 55%, transparent);
    background: color-mix(in srgb, var(--feedback-correct-text, #2ecc71) 10%, transparent);
}
.de-opt-mark,
.de-opt-del {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.de-opt-mark svg, .de-opt-del svg { width: 19px; height: 19px; }
.de-opt.is-right .de-opt-mark { color: var(--feedback-correct-text, #2ecc71); }
.de-opt-del:hover { color: #e74c3c; background: color-mix(in srgb, #e74c3c 12%, transparent); }
.de-add-opt { margin-top: 9px; }

.de-img {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 10px;
    background: var(--container-bg-color);
    font-size: 0.78em;
    color: var(--secondary-text-color);
}
.de-img img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }

.de-card-tools {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.de-card-tools .de-btn { padding: 8px 10px; }
.de-card-tools .de-btn.danger { margin-left: auto; }

.de-more {
    margin-top: 4px;
    padding: 11px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--secondary-text-color);
    font: inherit;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
}

.de-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 42px 20px;
    text-align: center;
    color: var(--secondary-text-color);
}
.de-empty.small { padding: 28px 20px; }
.de-empty svg { width: 40px; height: 40px; opacity: 0.4; }
.de-empty b { color: var(--text-color); font-size: 1.02em; }
.de-empty p { margin: 0; font-size: 0.87em; line-height: 1.5; max-width: 34ch; }

/* Кнопка правки на карточке библиотеки — только у автора */
.lib-deck-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
}
.lib-deck-edit:hover { color: var(--accent); border-color: var(--accent); }
.lib-deck-edit svg { width: 17px; height: 17px; }


/* Облако-подсказка у счётчика «Вопрос N из M».
   Объясняет, что по счётчику можно нажать: узнать об этом иначе было неоткуда —
   на телефоне подписи title не видно, а сам счётчик выглядит как текст. */
.jump-hint {
    position: absolute;
    z-index: 9500;
    max-width: 320px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 10px 10px 13px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    /* Плотное стекло, а не просто --container-bg-color: в стеклянных темах
       он полупрозрачный, и сквозь облачко просвечивал текст вопроса —
       читались оба сразу и ни одного до конца. Здесь прозрачность не
       украшение: подсказка обязана читаться поверх любого текста. */
    background: var(--glass-dense, var(--container-bg-color));
    backdrop-filter: blur(var(--glass-blur, 10px)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) saturate(1.1);
    box-shadow: 0 8px 26px rgb(0 0 0 / 28%);
    color: var(--text-color);
    font-size: 0.85em;
    line-height: 1.4;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
}
.jump-hint.is-on { opacity: 1; transform: translateY(0); }
/* Хвостик к счётчику: положение задаёт --jh-arrow, потому что на узком
   экране облако прижимается к краю и перестаёт быть по центру кнопки. */
.jump-hint::before {
    content: '';
    position: absolute;
    top: -7px;
    left: var(--jh-arrow, 50%);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    transform: rotate(45deg);
    border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    /* Хвостик — то же стекло, что и облако: иначе он остался бы прозрачным
       язычком на плотном фоне. Своего размытия ему не нужно, он вплотную. */
    background: var(--glass-dense, var(--container-bg-color));
}
.jump-hint span { flex: 1; min-width: 0; }
.jump-hint-x {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 1.15em;
    line-height: 1;
    cursor: pointer;
}
.jump-hint-x:hover { background: var(--input-hover-bg-color); color: var(--text-color); }

@media (prefers-reduced-motion: reduce) {
    .jump-hint { transition: none; }
}


/* Ссылки, распознанные в тексте сообщения.
   Цвет раньше стоял инлайном как var(--accent). В своём пузыре это тот же
   цвет, что и фон (подкраска от обоев кладёт одно значение и в --accent, и в
   --chat-bubble-mine), поэтому ссылка исчезала. Теперь: в чужом сообщении —
   акцент, в своём — цвет самого текста с подчёркиванием. Читается при любой
   подкраске, потому что не зависит от неё вовсе. */
.chat-auto-link {
    color: var(--accent, #3498db);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
    display: inline-block;
}

.message.mine .chat-auto-link {
    color: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

.message.mine .chat-auto-link:hover {
    text-decoration-color: currentColor;
}

/* Библиотека: папка не открылась — показываем причину и даём повторить */
.gradus-load-error { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gradus-load-error p { margin: 0; }

/* ИИ-чат: кружок телефону, кнопка компьютеру (18.09.2026)
   Плавающая кнопка задумана под большой палец и на широком экране просто
   висит над правым нижним углом, перекрывая работу. Все прочие действия
   там давно живут одной строкой в шапке — ИИ становится рядом с ними. */
#aiChatHeaderBtn { display: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    #aiChatHeaderBtn { display: inline-flex; }
    #aiChatFab { display: none !important; }
}

/* Колесо увеличения в визуальном тренажёре (18.09.2026)
   Прежние «+ ⟲ −» меняли масштаб ступенями и закрывали угол снимка. Лента у
   края даёт непрерывное увеличение и стоит вне изображения. Устройство то же,
   что у колеса микроскопа: засечки отдельным слоем под маской растворения,
   чтобы край ленты не выглядел обрубленным. */
.vt-wheel {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 24px;
    height: min(46%, 220px);
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    touch-action: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.vt-wheel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.22) 0 1.5px, transparent 1.5px 11px);
    background-size: 11px 11px;
    background-repeat: repeat-y;
    background-position-x: center;
    background-position-y: var(--tick-y, 0px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    pointer-events: none;
}
.vt-wheel:hover { background-color: rgba(255, 255, 255, 0.14); }
.vt-wheel.dragging::before {
    background-image: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.5) 0 1.5px, transparent 1.5px 11px);
}
@media (max-width: 480px) {
    .vt-wheel { width: 28px; border-radius: 14px; }
}

/* ============================================
   БИБЛИОТЕКА GRADUS — ВКЛАДКИ, ПОЛКА, ПОИСК (18.09.2026)

   Раздел вырос из одного дерева папок в три разные задачи: дочитать начатое,
   пройтись по библиотеке курса, найти книгу снаружи. Каждая получила свою
   вкладку — иначе человек, которому нужно продолжить чтение, каждый раз шёл
   через папки и сортировку.
   ============================================ */

.grd-tabs {
    /* Вкладки — первое, что видно в разделе: заголовок над ними убран */
    margin-top: 4px;
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}
.grd-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 9px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.92em;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
}
.grd-tab i,
.grd-tab svg { width: 1.15em; height: 1.15em; flex: none; }
.grd-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grd-tab:hover { color: var(--text-color); }
.grd-tab.active {
    color: var(--button-primary-text);
    background: var(--button-primary-bg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
@media (max-width: 480px) {
    .grd-tab { padding: 9px 6px; font-size: 0.85em; gap: 5px; }
}

/* --- ПОЛКА --- */
.grd-shelf { display: block; }
/* Плитки книг лежат в своей сетке: над ними стоит широкая карточка
   продолжения, и общей сеткой их было не развести */
.grd-shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}
@media (max-width: 420px) {
    .grd-shelf-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
}

/* --- КРУПНОЕ «ПРОДОЛЖИТЬ» --- */
.grd-go-on {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-bottom: 20px;
    padding: 14px;
    border: none;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    text-align: left;
    cursor: pointer;
    align-items: center;
}
.grd-go-on-cover {
    flex: none;
    width: 76px;
    height: 108px;
    position: relative;
    border-radius: 6px 2px 2px 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.7em;
    font-weight: 800;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
}
.grd-go-on-cover.has-image { color: transparent; }
/* Тот же корешок и срез страниц, что у остальных книг */
.grd-go-on-cover::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.16) 62%, rgba(255, 255, 255, 0.12));
}
.grd-go-on-cover::after {
    content: "";
    position: absolute;
    right: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    border-radius: 0 1px 1px 0;
    background: repeating-linear-gradient(to right, #ece7df 0 1px, #c9c2b8 1px 2px);
}
.grd-go-on-body { min-width: 0; flex: 1 1 auto; }
.grd-go-on-label {
    display: block;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.grd-go-on-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 5px;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color);
}
.grd-go-on-note {
    display: block;
    margin-top: 5px;
    font-size: 0.8em;
    color: var(--secondary-text-color);
}
.grd-go-on-bar {
    display: block;
    height: 4px;
    margin-top: 10px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--text-color) 14%, transparent);
    overflow: hidden;
}
.grd-go-on-bar i { display: block; height: 100%; background: var(--accent); }

/* Остаток времени на плитке — отдельной строкой под процентами */
.grd-book-left {
    display: block;
    margin-top: 2px;
    font-size: 0.72em;
    color: var(--accent);
}

.grd-book {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
/* Обложка — цветной корешок: у книг библиотеки картинок нет, а ряд одинаковых
   серых плиток глазами не разбирается. Оттенок считается из имени файла,
   поэтому одна и та же книга всегда одного цвета. */
.grd-book-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    /* Скругление со стороны корешка: там сгиб переплёта. Срез страниц
       остаётся прямым — стопку бумаги режут под нож, и мягкий угол на ней
       сразу читается как подделка. */
    border-radius: 6px 2px 2px 6px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.42);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.grd-book:hover .grd-book-cover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}
/* С обложкой буква не нужна, а корешок остаётся: он держит форму книги */
.grd-book-cover.has-image { color: transparent; }
.grd-book-cover.has-image .grd-book-letter { display: none; }

/* Обложка наклеена, а не натянута: сама картинка видна целиком, а поля по
   краям закрыты ею же, размытой. Обрезка «по краю» съедала фамилию автора,
   растяжение делало из книги вывеску. */
.grd-cover-blur,
.grd-cover-art {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
.grd-cover-blur {
    background-size: cover;
    /* Масштаб — чтобы размытые края не показывали пустоту по периметру */
    transform: scale(1.18);
    filter: blur(12px) saturate(1.15) brightness(0.62);
}
.grd-cover-art { background-size: contain; }

/* Книга, а не картинка: слева корешок с тенью переплёта, справа срез
   страниц. Полосок ровно столько, чтобы читались как бумага, а не как узор. */
.grd-book-cover::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    z-index: 2;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.16) 62%, rgba(255, 255, 255, 0.12));
}
.grd-book-cover::after {
    content: "";
    position: absolute;
    right: 0;
    top: 2px;
    bottom: 2px;
    width: 5px;
    z-index: 2;
    border-radius: 0 1px 1px 0;
    background: repeating-linear-gradient(to right, #ece7df 0 1px, #c9c2b8 1px 2px);
}
.grd-book-kind {
    position: absolute;
    top: 8px;
    right: 8px;
    /* Цвет явно: у обложки с картинкой color: transparent — он гасил букву,
       а заодно и надпись на этой плашке */
    color: #fff;
    padding: 2px 7px;
    border-radius: 7px;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.grd-book-letter {
    font-size: 2.6em;
    font-weight: 800;
    line-height: 1;
    opacity: 0.85;
    margin-left: 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.grd-book-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.28);
}
.grd-book-bar i {
    display: block;
    height: 100%;
    background: #fff;
}
.grd-book-title {
    margin-top: 8px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.grd-book-note {
    display: block;
    margin-top: 3px;
    font-size: 0.78em;
    color: var(--secondary-text-color);
}

/* --- ПУСТЫЕ СОСТОЯНИЯ --- */
.grd-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 38px 18px;
    text-align: center;
    color: var(--secondary-text-color);
}
.grd-empty i,
.grd-empty svg { width: 2.2em; height: 2.2em; opacity: 0.5; }
.grd-empty p { margin: 0; max-width: 24em; line-height: 1.5; }
.grd-empty button {
    margin-top: 4px;
    padding: 9px 18px;
    border: none;
    border-radius: 10px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 600;
    cursor: pointer;
}

/* --- ПОИСК --- */
.grd-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.grd-search-row input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}
#grdSearchGo {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: none;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.grd-adv-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
}
.grd-adv-toggle i,
.grd-adv-toggle svg { width: 1.05em; height: 1.05em; }
.grd-adv-arrow { transition: transform 0.25s ease; }
.grd-adv-toggle[aria-expanded="true"] { color: var(--accent); }
.grd-adv-toggle[aria-expanded="true"] .grd-adv-arrow { transform: rotate(180deg); }

/* display: grid перебивает браузерное [hidden] { display: none } — правило
   автора сильнее, и свёрнутая панель оставалась на экране. Скрываем явно. */
.grd-adv[hidden] { display: none; }
/* История запросов. Правило скрытия — до правила с display: браузерное
   [hidden] слабее авторского display и не сработало бы (уже обжигались
   на панели расширенного поиска). */
.grd-history[hidden] { display: none; }
.grd-history {
    display: block;
    margin: 14px 0 0;
}
.grd-history-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.76em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary-text-color);
}
.grd-history-clear {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.grd-history-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Чип — запрос и крестик рядом: повторить поиск и забыть его должны быть
   разными нажатиями, иначе промах пальцем стирает нужное */
.grd-hist-chip {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    overflow: hidden;
}
.grd-hist-go,
.grd-hist-del {
    border: none;
    background: none;
    color: var(--text-color);
    font: inherit;
    font-size: 0.86em;
    cursor: pointer;
}
.grd-hist-go {
    min-width: 0;
    padding: 8px 4px 8px 14px;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.grd-hist-del {
    flex: none;
    padding: 8px 12px 8px 6px;
    color: var(--secondary-text-color);
    font-size: 1.05em;
    line-height: 1;
}
.grd-hist-chip:hover { border-color: var(--accent); }
.grd-hist-del:hover { color: var(--accent); }

.grd-adv {
    /* Раньше внутри лежали поля с ярлыками, и им нужна была сетка. Теперь тут
       фраза и ползунки под ней: в сетке ползунок года уезжал вбок, к соседней
       колонке, и наезжал на саму фразу */
    display: block;
    padding: 14px;
    margin-top: 6px;
    border-radius: 14px;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
}
.grd-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--secondary-text-color);
}
.grd-field input,
.grd-field select { margin: 0 !important; width: 100% !important; }
.grd-range { display: flex; gap: 8px; }
.grd-range input { min-width: 0; }
.grd-adv-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.78em;
    line-height: 1.45;
    color: var(--secondary-text-color);
    opacity: 0.85;
}

/* --- РЕЗУЛЬТАТЫ ПОИСКА --- */
.grd-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.grd-searching {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px;
    color: var(--secondary-text-color);
}

/* --- КАРТОЧКА КНИГИ ПЕРЕД ЧТЕНИЕМ --- */
.grd-card { text-align: left; }
.grd-card-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.grd-card-cover {
    flex: none;
    width: 104px;
    height: 146px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.4em;
    font-weight: 800;
    /* contain, а не cover: у обложек пропорции разные, и обрезка по центру
       показывает случайный кусок вместо картинки */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* Фон под картинкой ставит скрипт вместе с самой картинкой: у элемента уже
   есть инлайновый background с корешком, и класс его не перебьёт */
.grd-card-cover.has-image { font-size: 0; }
.grd-card-head { min-width: 0; flex: 1 1 auto; }
.grd-card-head h3 {
    /* Справа сидит крестик закрытия — заголовок на него наезжал */
    margin: 0 44px 4px 0;
    font-size: 1.08em;
    line-height: 1.3;
    color: var(--text-color);
    overflow-wrap: anywhere;
}
.grd-card-author {
    margin: 0 0 8px;
    font-size: 0.88em;
    color: var(--secondary-text-color);
    overflow-wrap: anywhere;
}
/* Аннотация длинная, и обрывать её на полуслове резким краем некрасиво:
   низ растворяется, и сразу видно, что текст продолжается. */
.grd-card-about-wrap { position: relative; }
.grd-card-about-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--container-bg-color));
}
.grd-card-about {
    margin: 14px 0 0;
    max-height: 30vh;
    overflow-y: auto;
    padding-right: 6px;
    padding-bottom: 18px;
    font-size: 0.9em;
    line-height: 1.55;
    color: var(--text-color);
    text-align: left;
}
.grd-card-about.is-empty { color: var(--secondary-text-color); font-style: italic; }
.grd-card-warn {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.85em;
    line-height: 1.45;
    color: var(--feedback-incorrect-text);
    background: var(--feedback-incorrect-bg);
    border: 1px solid var(--feedback-incorrect-border);
}
.grd-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.grd-read-btn {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 11px 14px;
    border: none;
    border-radius: 11px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 600;
    font-size: 0.92em;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.grd-read-btn:hover { opacity: 0.9; }
.grd-read-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 480px) {
    .grd-card-cover { width: 74px; height: 102px; font-size: 2em; }
    .grd-card-about { max-height: 34vh; }
}

/* --- ПОЛКА: ФИЛЬТР, УДАЛЕНИЕ, ДОЧИТАННОЕ --- */
/* Фильтр полки — плавающий остров над нижним меню.
   Наверху экрана до него не дотянуться большим пальцем, а переключают
   «Читаю/Дочитано» чаще, чем что-либо ещё на полке. */
.grd-shelf-filter {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* 75px — высота нижнего меню, ещё 12 — воздух между ним и островом */
    bottom: calc(87px + env(safe-area-inset-bottom, 0px));
    z-index: 8500;      /* ниже самого меню (9000), выше содержимого полки */
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 6px;
    max-width: calc(100vw - 28px);
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--container-bg-color) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}
.grd-shelf-filter[hidden] { display: none; }
/* На компьютере нижнего меню нет — остров садится на его место */
@media (min-width: 769px) {
    .grd-shelf-filter { bottom: 18px; }
}
/* Под островом должно оставаться место: иначе он накрывает последний ряд книг */
.grd-shelf { padding-bottom: 56px; }

/* Поиск и порядок — одной строкой сверху */
.grd-shelf-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}
.grd-shelf-tools:not(:has(> :not([hidden]))) { display: none; }
.grd-shelf-sort {
    margin: 0 !important;
    width: auto !important;
    flex: none;
    padding: 9px 10px !important;
    border-radius: 999px !important;
    font-size: 0.82em;
    background: transparent;
    color: var(--secondary-text-color);
    border: 1px solid var(--border-color);
}
.grd-shelf-sort[hidden] { display: none; }
/* Свои стопки: чипы в островке. Их может быть много, поэтому островок
   прокручивается вбок, а «плюс» стоит последним и всегда одного размера. */
.grd-shelf-filter { overflow-x: auto; scrollbar-width: none; }
.grd-shelf-filter::-webkit-scrollbar { height: 0; }
.grd-chip-add {
    flex: none;
    min-width: 34px;
    font-weight: 700;
    line-height: 1;
}
/* Выбор стопок для книги: отмеченные подсвечены, как чекбоксы в списке */
.grd-pick.is-on { color: var(--accent); }
.grd-pick.is-on i, .grd-pick.is-on svg { color: var(--accent); }

/* Плитка «Добавить книгу»: выглядит книгой, потому что ею и станет.
   Обложка — пунктирная рамка с плюсом, чтобы плитка не спорила с настоящими
   корешками, но стояла с ними в одном ряду. */
/* Ширина карточки шла от подписи: у книг названия длинные, а у плитки два
   слова — она и выходила мельче соседей (замер: 107 против 128 пикселей).
   Отдаём плитке всю колонку сетки. */
.grd-add-slot, .grd-add-slot .grd-book { width: 100%; }
.grd-add-cover {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Та же бумага и та же тень, что у книг: плитка — заготовка книги, а не
       чужой элемент на полке */
    background: linear-gradient(145deg, var(--input-bg-color), var(--container-bg-color)) !important;
    color: var(--secondary-text-color);
}
/* Пунктир внутри, отступив от края: снаружи у книги переплёт, а не рамка */
.grd-add-cover::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px dashed var(--border-color);
    border-radius: 4px;
}
.grd-add-cover i, .grd-add-cover svg { width: 34px; height: 34px; position: relative; }
.grd-add:hover .grd-add-cover { color: var(--accent); }
.grd-add:hover .grd-add-cover::before { border-color: var(--accent); }
.grd-add .grd-book-title { color: var(--text-color); }
/* На пустой полке подсказка идёт под плиткой и не тянет на себя внимание */
.grd-empty-slim {
    padding-top: 6px;
    text-align: center;
    color: var(--secondary-text-color);
}
.grd-shelf-search {
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}
.grd-shelf-search[hidden] { display: none; }
.grd-chip {
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.84em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.grd-chip.active {
    background: var(--button-primary-bg);
    border-color: transparent;
    color: var(--button-primary-text);
}

/* Действия над книгой — долгим нажатием: крестик поверх каждой обложки был
   виден всегда и шумел ради того, что делают раз в месяц. */
.grd-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.grd-act {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.92em;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.grd-act:hover { background: color-mix(in srgb, var(--text-color) 12%, transparent); }
.grd-act i, .grd-act svg { width: 1.15em; height: 1.15em; flex: none; }
.grd-act.is-danger { color: var(--accent); }

.grd-book.is-done .grd-book-cover { opacity: 0.55; }
.grd-book.is-done .grd-book-title { color: var(--secondary-text-color); }
/* Отметка дочитанного — в углу обложки.
   Раньше кружок рисовался у .grd-book-slot, а тот не позиционирован: значок
   уезжал к предку и ложился поверх названия соседней книги. */
.grd-book-done {
    position: absolute;
    right: 8px;
    bottom: 10px;
    z-index: 3;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    font-size: 0.78em;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* ============================================
   КАРТОЧКА КНИГИ — «ОБЛОЖКА-ГЕРОЙ» (19.09.2026)

   Лист снизу почти во весь экран: обложка крупно по центру, под ней название
   и плашки, дальше прокручиваемая аннотация, а действия прижаты к низу — до
   них всегда можно дотянуться большим пальцем, не докручивая текст.
   ============================================ */
.grd-hero-container { padding: 0 !important; height: 100% !important; align-items: flex-end !important; }
/* Общее правило модалок в index.html задаёт окну поля и рамку через
   !important, и обычным сбросом его не перебить: между краем листа и шапкой
   оставалась полоса фона. Берём специфичностью, а не правкой общего правила —
   оно нужно всем остальным окнам приложения. */
.swal2-container .grd-hero-popup.swal2-popup {
    width: 100% !important;
    max-width: 560px !important;
    /* Во весь экран: прежние 92dvh оставляли сверху полосу с вкладками
       раздела, и карточка выглядела приоткрытым ящиком, а не своим экраном */
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--container-bg-color) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
.grd-hero-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    overflow: hidden !important;
    text-align: left;
}
/* Ни рамки, ни полей у самого окна: иначе между его краем и шапкой
   остаётся полоса фона — она и была видна сверху и по бокам */
.grd-hero-popup,
.grd-hero-popup .swal2-html-container,
.grd-hero-popup .swal2-actions,
.grd-hero-popup .swal2-footer { border: 0 !important; }
.grd-hero-popup .swal2-actions,
.grd-hero-popup .swal2-footer { display: none !important; }
.grd-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    transition: transform .22s ease, opacity .22s ease;
}

/* Фон карточки — та же обложка, размытая во весь экран. Слой лежит под
   содержимым и не ловит касания; поверх — затемнение, иначе текст
   аннотации тонет в пёстрой картинке. */
.grd-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .35s ease;
    /* Масштаб съедает светлую кайму, которую оставляет размытие по краям */
    transform: scale(1.25);
    filter: blur(42px) saturate(135%);
}
.grd-hero-bg.is-on { opacity: .55; }
.grd-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--container-bg-color) 35%, transparent),
        color-mix(in srgb, var(--container-bg-color) 88%, transparent) 62%,
        var(--container-bg-color));
}
/* Содержимое — поверх фона */
.grd-hero > *:not(.grd-hero-bg) { position: relative; z-index: 1; }

/* Шапка: подсветка сверху даёт обложке сцену, а не просто поле */
.grd-hero-top {
    position: relative;
    flex: none;
    margin: 0;
    border-radius: 22px 22px 0 0;
    padding: 26px 20px 18px;
    text-align: center;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%);
}
.grd-hero-close {
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-color) 12%, transparent);
    color: var(--text-color);
    /* Знак «×» у большинства гарнитур сидит выше середины строки: центруем
       его флексом, а не строчной высотой */
    font-size: 1.25em;
    line-height: 0;
    font-family: inherit;
    cursor: pointer;
}
/* Книга, а не картинка: обложка развёрнута к читателю, справа из-под неё
   выходит стопка страниц, снизу лежит тень. Поворот небольшой — сильнее
   и обложка начинает читаться косо. */
.grd-hero-book {
    /* Обложка и торец лежат встык одной строкой и поворачиваются вместе:
       раздельный поворот в 3D оставлял между ними щель — страницы висели
       отдельной полосой в воздухе */
    display: flex;
    /* Не stretch: он растягивал обложку по высоте коробки и тем отменял её
       собственные пропорции — книга выходила квадратной, а картинку резало
       сверху и снизу. Высоту задаёт обложка, торец тянется за ней. */
    align-items: flex-start;
    width: 168px;
    /* Высоту задаёт сама обложка: у книг разные пропорции, и от
       фиксированного прямоугольника картинка либо вписывалась с полями —
       тогда торец торчал выше и ниже неё, — либо обрезалась по краям */
    height: auto;
    margin: 0 auto 20px;
    transform: perspective(1100px) rotateY(-15deg) rotateX(1.5deg);
    filter: drop-shadow(16px 20px 22px rgba(0, 0, 0, 0.5));
}
/* Торец: тонкие листы, видные из-под обложки */
.grd-hero-book::after {
    content: '';
    flex: none;
    align-self: stretch;
    width: 12px;
    margin: 3px 0;
    border-radius: 0 3px 3px 0;
    background: repeating-linear-gradient(to right,
        #f4efe4 0 1px, #cbc3b1 1px 2px);
    box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.35);
}
.grd-hero-cover {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    /* Пропорции приходят из самой картинки (их ставит подставитьОбложку).
       Запасное значение — обычный книжный формат: по нему рисуется цветной
       корешок с буквой, пока обложка едет из сети */
    aspect-ratio: var(--обложка-формат, 0.65);
    height: auto;
    border-radius: 3px 9px 9px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 3em;
    font-weight: 800;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
/* В карточке обложка заполняет книгу целиком: размытая подложка нужна
   там, где картинку вписывают в чужой прямоугольник, а здесь прямоугольник
   свой — по картинке */
.grd-hero-cover .grd-cover-art { background-size: contain; }
.grd-hero-cover .grd-cover-blur { display: none; }
/* Корешок: слева бумага уходит в сгиб, и по краю ложится тень */
.grd-hero-cover::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 12px;
    z-index: 2;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12) 55%, rgba(255, 255, 255, 0.1));
}
.grd-hero-cover.has-image { font-size: 0; }
.grd-hero-title {
    margin: 0;
    font-size: 1.15em;
    line-height: 1.28;
    color: var(--text-color);
    overflow-wrap: anywhere;
}
.grd-hero-author {
    margin: 6px 0 0;
    font-size: 0.86em;
    color: var(--secondary-text-color);
    overflow-wrap: anywhere;
}
.grd-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

/* Вкладки появляются, только когда у книги есть оглавление: источник
   отдаёт его не всегда, и пустая вкладка была бы обещанием, которого экран
   не выполняет. */
.grd-hero-tabs {
    flex: none;
    display: flex;
    gap: 20px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
}
.grd-hero-tab {
    padding: 10px 0 11px;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.9em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.grd-hero-tab.active { color: var(--text-color); border-bottom-color: var(--accent); }

/* Скрытую вкладку прячем явно: display у блока перебил бы браузерное
   [hidden], на чём уже дважды обожглись */
.grd-hero-about[hidden] { display: none; }
/* Оглавление — список строк, его читают по вертикали, а не абзацем */
.grd-hero-about.is-toc { font-size: 0.88em; line-height: 1.75; }

/* Аннотация занимает всё, что осталось, и растворяется у нижнего края —
   резкий обрыв на полуслове читается как поломка вёрстки */
.grd-hero-about {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Отступ сверху: обложка отбрасывает тень на 30 пикселей вниз, и первая
       строка аннотации попадала прямо в неё — текст читался приглушённым,
       будто он часть картинки */
    padding: 18px 20px 22px;
    font-size: 0.92em;
    line-height: 1.62;
    color: var(--text-color);
    /* Растворяется с обоих концов: снизу — чтобы обрыв на полуслове не
       выглядел поломкой, сверху — чтобы при прокрутке строки уходили под
       обложку, а не упирались в неё */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 26px), transparent);
}
.grd-hero-about .is-empty { color: var(--secondary-text-color); font-style: italic; }

.grd-hero-actions {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color);
    background: var(--container-bg-color);
}
.grd-hero-actions .grd-read-btn { flex: 0 1 auto; min-width: 88px; min-height: 46px; }
.grd-hero-actions .grd-read-btn.is-main { flex: 1 1 auto; }

@media (max-width: 480px) {
    /* На узком экране книга просто меньше. Высоту не задаём: её держит
       формат обложки, а жёсткие 195 px отменяли его — книга выходила
       квадратной, и картинку резало сверху и снизу */
    .grd-hero-book { width: 152px; }
}

/* --- ПЛАШКА ОТМЕНЫ --- */
.grd-undo {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 0;
    padding: 11px 12px 11px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-color) 88%, var(--bg-color));
    color: var(--bg-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    animation: grdUndoIn 0.22s ease;
}
@keyframes grdUndoIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.grd-undo-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85em;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.grd-undo-btn {
    flex: none;
    border: none;
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.88em;
    padding: 4px 6px;
    cursor: pointer;
    font-family: inherit;
}
@media (prefers-reduced-motion: reduce) {
    .grd-undo { animation: none; }
}

/* ============================================
   ВЫДАЧА ПОИСКА — ПОЛКИ ПО АВТОРАМ (19.09.2026)

   На запрос вроде «Рэй» источник отдаёт по нескольку книг одного автора
   подряд, и плоский список превращался в кашу из похожих названий. Теперь
   находки разложены по авторам, каждая полка листается вбок, а книга
   узнаётся по обложке, а не по строке текста.
   ============================================ */
.grd-row { margin-bottom: 22px; }
.grd-row-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0 0 10px;
    font-size: 0.95em;
    font-weight: 600;
}
.grd-row-head b { color: var(--text-color); overflow-wrap: anywhere; }
.grd-row-head span { font-size: 0.78em; font-weight: 500; color: var(--secondary-text-color); flex: none; }
.grd-row.is-rest .grd-row-head b { color: var(--secondary-text-color); }

/* Лента листается пальцем; полосу прокрутки прячем — она тут только шумит */
/* Находки лежат сеткой, а не лентой.
   Лентой на экран влезали три книги из тридцати, и каждую полку приходилось
   листать вбок по отдельности — пролистав, человек терял место в списке.
   Сетка показывает сразу девять и прокручивается вместе со страницей. */
.grd-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 14px 10px;
    padding-bottom: 4px;
}

.grd-spine {
    width: 100%;
    max-width: 120px;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    scroll-snap-align: start;
}
.grd-spine-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 96 / 138;
    height: auto;
    border-radius: 6px 2px 2px 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.9em;
    font-weight: 800;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.48);
    transition: transform 0.2s ease;
}
/* Те же корешок и срез, что на полке: книга должна выглядеть книгой всюду */
.grd-spine-cover::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.16) 62%, rgba(255, 255, 255, 0.12));
}
.grd-spine-cover::after {
    content: "";
    position: absolute;
    right: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    border-radius: 0 1px 1px 0;
    background: repeating-linear-gradient(to right, #ece7df 0 1px, #c9c2b8 1px 2px);
}
.grd-spine-cover.has-image { color: transparent; }
.grd-spine:hover .grd-spine-cover { transform: translateY(-3px); }
.grd-spine-title {
    margin-top: 7px;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.28;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.grd-spine-note {
    display: block;
    margin-top: 3px;
    font-size: 0.7em;
    color: var(--secondary-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   ТЕСТ ПО ГЛАВЕ КНИГИ (19.09.2026)

   Окно выбора и итог на экране результатов: читалка в этот момент закрыта,
   поэтому её собственные стили сюда не достают.
   ============================================ */
.rdr-pick { text-align: left; }
.rdr-pick-label {
    margin: 12px 0 7px;
    font-size: 0.76em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary-text-color);
}
.rdr-pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rdr-pick-chip {
    flex: 1 1 auto;
    min-width: 64px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: 0.92em;
    cursor: pointer;
}
.rdr-pick-chip.on { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.rdr-pick-note { margin: 14px 0 0; font-size: 0.8em; line-height: 1.5; color: var(--secondary-text-color); }

/* Итог теста по главе — среди кнопок экрана результатов, поэтому со своим
   order: #resultsArea раскладывает детей по номерам, и блок без номера уехал
   бы выше заголовка. */
.rdr-res { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; order: 8; }
.rdr-res-line {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.88em;
    font-weight: 700;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.rdr-res-btn {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.rdr-res-btn:hover { filter: brightness(1.08); }

/* Сводка чтения над полкой: четыре коротких числа, без графиков.
   Прячется целиком, пока журнал пуст. */
/* Лицо автора в заголовке группы: кружок слева от имени. Пока фото не
   найдено, место пустое и ничего не занимает — каталог знает примерно
   половину авторов, и пустая рамка у остальных смотрелась бы хуже */
/* Жанр в карточке книги: по нему понимают, о чём книга, ещё до аннотации —
   а её источник даёт не всегда */
/* ============================================
   УСЛОВИЯ ФРАЗОЙ (расширенный поиск)
   ============================================
   Ярлыки над полями читались списком настроек, и человек не понимал, что
   условия складываются. Фраза читается целиком: «ищу книги автора N на
   таком-то языке, в таком-то формате, изданные тогда-то». */
.grd-phrase {
	margin: 0;
	/* Фраза должна читаться фразой: при крупном шрифте каждое поле уезжало
	   на свою строку, и предложение рассыпалось на этажи */
	font-size: 0.86em;
	line-height: 1.95;
	color: var(--secondary-text-color);
}
.grd-slot {
	display: inline-block;
	vertical-align: baseline;
	max-width: 100%;
	font: inherit;
	color: var(--text-color);
	background: var(--input-hover-bg-color);
	border: 1px solid var(--border-color);
	border-radius: 9px;
}
/* Поля страницы по умолчанию во всю ширину, с отступом снизу и крупным
   шрифтом — внутри фразы это превращает каждое слово в отдельный этаж.
   Перебиваем адресно: у общего правила стоит !important на отступе. */
.grd-phrase .grd-slot {
	width: auto;
	max-width: 100%;
	min-width: 0;
	margin: 0 2px !important;
	padding: 1px 8px !important;
	font-size: 0.95em !important;
	line-height: 1.5;
	border-radius: 9px;
	box-shadow: none !important;
	transition: none !important;
}
.grd-phrase .grd-slot-text { width: 7em; }
.grd-phrase select.grd-slot { padding-right: 22px !important; }
/* Незаполненное место видно как пропуск в тексте, а не как пустое поле */
.grd-slot-text::placeholder { color: var(--secondary-text-color); opacity: 0.75; }
.grd-slot:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }
select.grd-slot {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 9px top 55%, right 4px top 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.grd-slot-btn { cursor: pointer; }
/* Заданное условие видно во фразе: остальное — значения по умолчанию */
.grd-slot.задан {
	color: var(--accent-color);
	border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
	background: color-mix(in srgb, var(--accent-color) 12%, var(--input-hover-bg-color));
}

/* Свой список выбора: те же капсулы, что и во фразе, только рядами */
/* display перебивает встроенное [hidden] { display: none }: без этой строки
   оба списка висели на экране разом */
.grd-choices[hidden] { display: none; }
.grd-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 12px;
}
.grd-choice {
	font: inherit;
	font-size: 0.82em;
	padding: 5px 12px;
	border-radius: 999px;
	color: var(--text-color);
	background: var(--input-bg-color);
	border: 1px solid var(--border-color);
	cursor: pointer;
}
.grd-choice.on {
	color: var(--on-primary, #0d1117);
	background: var(--accent-color);
	border-color: var(--accent-color);
	font-weight: 700;
}

.grd-slider { margin-top: 12px; }
.grd-slider-track { position: relative; height: 26px; }
.grd-slider-track::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	/* Дорожка на фоне панели почти сливалась, и полоса казалась короткой:
	   видна была только залитая часть */
	background: color-mix(in srgb, var(--secondary-text-color) 30%, transparent);
}
.grd-slider-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background: var(--accent-color);
}
/* Два ползунка года лежат друг на друге: полосу рисуем сами, от input
   оставляем только бегунок — иначе верхний перекрывает нижний целиком */
.grd-slider-track input[type="range"] {
	position: absolute;
	left: 0; right: 0; top: 0;
	width: 100%;
	height: 26px;
	margin: 0 !important;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}
.grd-slider-track input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	pointer-events: auto;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--container-bg-color);
	border: 2px solid var(--accent-color);
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	cursor: pointer;
}
.grd-slider-track input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--container-bg-color);
	border: 2px solid var(--accent-color);
}
.grd-slider-ends {
	display: flex;
	justify-content: space-between;
	font-size: 0.75em;
	color: var(--secondary-text-color);
	font-variant-numeric: tabular-nums;
}

/* ============================================
   ПОЛКА, НА КОТОРУЮ КНИГИ ВСТАЮТ
   ============================================ */
.grd-ghost { pointer-events: none; }
.grd-ghost .grd-spine-cover {
	background: linear-gradient(140deg,
		color-mix(in srgb, var(--secondary-text-color) 14%, var(--input-hover-bg-color)),
		var(--input-hover-bg-color));
	box-shadow: none;
}
.grd-ghost .grd-spine-title,
.grd-ghost .grd-spine-note {
	display: block;
	height: 0.8em;
	margin-top: 5px;
	border-radius: 4px;
	background: var(--input-hover-bg-color);
}
.grd-ghost .grd-spine-note { width: 60%; }
.grd-row.is-loading .grd-row-head b {
	display: inline-block;
	width: 8em; height: 0.9em;
	border-radius: 4px;
	background: var(--input-hover-bg-color);
}
.grd-row.is-loading,
.grd-ghost { animation: grd-дышит 1.4s ease-in-out infinite; }
@keyframes grd-дышит { 50% { opacity: 0.55; } }
.grd-searching-note {
	display: block;
	margin-top: 10px;
	text-align: center;
	font-size: 0.8em;
	color: var(--secondary-text-color);
}

@keyframes grd-встать {
	from { transform: translateY(22px) rotate(-5deg); opacity: 0; }
	60%  { transform: translateY(-2px) rotate(1deg); opacity: 1; }
	to   { transform: none; opacity: 1; }
}
.grd-spine.встаёт {
	animation: grd-встать 0.42s cubic-bezier(.2,.9,.3,1.25) both;
	animation-delay: var(--задержка, 0ms);
}

/* Долгое нажатие: книга наклоняется к читателю и показывает аннотацию */
.grd-spine { position: relative; }
.grd-spine.подглядываем {
	transform: perspective(600px) rotateY(-16deg) scale(1.04);
	transform-origin: left center;
	transition: transform 0.18s ease-out;
	z-index: 3;
}
.grd-peek {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 4;
	width: 15em;
	max-width: 70vw;
	padding: 9px 11px;
	border-radius: 11px;
	background: var(--container-bg-color);
	border: 1px solid var(--border-color);
	box-shadow: 0 8px 22px rgba(0,0,0,.45);
	font-size: 0.72em;
	line-height: 1.4;
	color: var(--text-color);
	text-align: left;
	white-space: normal;
}

/* Когда поиск по названию ничего не дал, а запрос похож на описание —
   предлагаем подбор: источник ищет строкой по заголовкам и именам, и
   «что-нибудь страшное про Марс» он не найдёт никогда. */
.grd-ask-ai {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px auto 0;
	padding: 11px 20px;
	border-radius: 14px;
	font: inherit;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--accent-color);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
	cursor: pointer;
}
.grd-ask-ai i { width: 18px; height: 18px; }

/* Книга уже на полке.
   Раньше выдача не отличала знакомую книгу от новой, и человек качал заново
   то, что читает третий день. Начатую подписываем процентом, нетронутую —
   галочкой: «0%» на непрочитанной выглядит как ошибка. */
.grd-mine {
	position: absolute;
	top: 5px;
	right: 5px;
	min-width: 20px;
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--accent-color);
	color: var(--on-primary, #0d1117);
	font-size: 0.6em;
	font-weight: 800;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.grd-spine.на-полке .grd-spine-cover {
	outline: 2px solid var(--accent-color);
	outline-offset: -2px;
}

/* ============================================
   ЛУПА, КОТОРАЯ ЧИТАЕТ
   ============================================ */
.grd-search-row { position: relative; }
.grd-pages { display: none; gap: 2px; align-items: center; }
#grdSearchGo.читает .grd-pages { display: flex; }
#grdSearchGo.читает > i[data-lucide] { display: none; }
.grd-pages i {
	width: 5px; height: 15px;
	border-radius: 1px 3px 3px 1px;
	background: currentColor;
	transform-origin: left center;
	animation: grd-листать 1.05s ease-in-out infinite;
}
.grd-pages i:nth-child(2) { animation-delay: .17s; opacity: .7; }
.grd-pages i:nth-child(3) { animation-delay: .34s; opacity: .45; }
@keyframes grd-листать {
	0%, 100% { transform: rotateY(0deg); }
	50% { transform: rotateY(-72deg); }
}
/* Число находок набегает у правого края поля и уходит через пару секунд */
.grd-count {
	position: absolute;
	right: 4.2em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.85em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--accent-color);
	pointer-events: none;
	animation: grd-проступить 0.2s ease-out;
}
@keyframes grd-проступить { from { opacity: 0; transform: translateY(-40%); } }

@media (prefers-reduced-motion: reduce) {
	.grd-spine.встаёт, .grd-row.is-loading, .grd-ghost, .grd-pages i, .grd-count {
		animation: none;
	}
}

.grd-badge.is-genre {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.78em;
    color: var(--secondary-text-color);
}

/* Полоса жанров над находками: сужает выдачу на месте, без нового запроса */
.grd-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}
.grd-genre {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--secondary-text-color);
    font-family: inherit;
    font-size: 0.8em;
    cursor: pointer;
}
.grd-genre.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.grd-ol-thanks {
    margin: 14px 2px 4px;
    font-size: 0.72em;
    color: var(--secondary-text-color);
    opacity: 0.8;
}
.grd-ol-thanks a { color: inherit; text-decoration: underline; }
/* ============================================
   ФОНОВЫЙ ЗВУК
   ============================================
   Экран поверх читалки. Он про вечер и тишину, поэтому тёмный и с мягким
   свечением — но цвета берёт у темы, а не держит свои: на «Снеге» и «Дюне»
   собственная тёмно-синяя палитра смотрелась чужой заплаткой.

   Ползунков тут нет вовсе: громкость крутят рифлёным колесом — общим у
   микса, у канала в строке и у сцены в карточке. */
.amb-overlay {
    position: fixed;
    inset: 0;
    /* Выше читалки: у неё 10000, и окно фона открывалось под книгой —
       человек нажимал кнопку, ничего не видел и уходил назад */
    z-index: 10100;
    display: none;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.amb-overlay.visible { display: block; }
/* Жесты не уходят на страницу под окном: без этого палец листал книгу и
   прокручивал главную прямо сквозь микшер */
.amb-overlay { touch-action: none; overscroll-behavior: contain; }
.amb-body { touch-action: pan-y; overscroll-behavior: contain; }

.amb {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    color: var(--text-color);
    /* Подложка темы с лёгким уклоном в акцент — от него и берётся вечерний
       оттенок, какой бы ни была тема */
    background:
        radial-gradient(120% 80% at 50% 0%,
            color-mix(in srgb, var(--accent-color) 14%, var(--container-bg-color)) 0%,
            var(--container-bg-color) 45%,
            color-mix(in srgb, var(--bg-color) 70%, var(--container-bg-color)) 100%);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35);
    animation: amb-въехать 0.28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes amb-въехать { from { transform: translateY(12%); opacity: 0; } }

/* На ПК окно перестаёт быть полосой во всю ширину экрана. На 1800 px
   карточки звуков расходились одним рядом через весь монитор, кнопки
   «Сохранить» и «Выключить» растягивались на полтора метра, а кассета
   оставалась крошечной посередине — смотреть было не на что. Порог тот
   же, что у листа обоев: 821 px и мышь. */
@media (min-width: 821px) and (pointer: fine) {
    .amb {
        /* inset + margin: auto — окно встаёт по центру экрана, а высоту
           берёт по содержимому, а не растягивается от края до края */
        inset: 0;
        margin: auto;
        width: min(92vw, 640px);
        height: fit-content;
        max-height: 88vh;
        border-radius: 24px;
        border: 1px solid var(--border-color);
        animation-name: amb-проявиться;
    }
    /* Нижней панели приложения на ПК нет — и подвал в её высоту не нужен */
    .amb-body {
        padding-bottom: 24px;
    }
    /* Ручку тянуть некому: жеста мышью тут нет */
    .amb-grip { display: none; }
}
@keyframes amb-проявиться { from { transform: scale(0.97); opacity: 0; } }

/* Пятно света за кольцом: оно и делает экран атмосферным */
.amb-glow {
    position: absolute;
    top: -90px; left: 50%;
    width: 380px; height: 380px;
    margin-left: -190px;
    pointer-events: none;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--accent-color) 22%, transparent) 0%,
        color-mix(in srgb, var(--accent-color) 7%, transparent) 45%,
        transparent 70%);
}
.amb-grip {
    width: 42px; height: 4px;
    margin: 9px auto 0;
    border-radius: 2px;
    background: color-mix(in srgb, var(--text-color) 25%, transparent);
}

.amb-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px 8px;
}
.amb-head-text h2 {
    margin: 0;
    font-size: 1.12em;
    font-weight: 700;
    letter-spacing: 0.01em;
    /* Иначе берёт цвет заголовков приложения — в некоторых темах он
       акцентный, и «Фоновый звук» светился синим */
    color: var(--text-color);
}
.amb-head-text p { margin: 2px 0 0; font-size: 0.76em; color: var(--secondary-text-color); }
.amb-close {
    margin-left: auto;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    cursor: pointer;
}
.amb-close i { width: 18px; height: 18px; }

.amb-body {
    position: relative;
    overflow-y: auto;
    /* Снизу — высота нижней панели приложения плюс безопасная зона: без
       этого последние карточки и таймер сна прятались под «Чат / ИИ / Игры» */
    padding: 4px 16px calc(92px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

/* ── Кольцо ─────────────────────────────────────────────────
   Сорок палочек по кругу. Их ведёт скрипт: амплитуда растёт от громкости
   микса, а три волны разной длины не дают картинке повторяться. */
/* Кольцо осталось без палочек: центром стало ядро слизи, к которому
   прилипает звучащий набор, и лучи спорили с ним за внимание */
/* Подпись на кассете — от руки.

   Шрифт лежит у нас, а не тянется с чужого сервера: приложение работает
   офлайн, и наклейка не должна зависеть от сети. Caveat под лицензией
   OFL — его можно класть в проект. Два файла: кириллица и латиница,
   каждый подхватывается только под свои буквы. */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/ambient/caveat-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/ambient/caveat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* Наборы — стопка кассет.

   Кассета собрана из трёх слоёв одного размера: корпус и две катушки
   отдельными картинками. Порознь они нужны затем, чтобы у звучащего набора
   крутились катушки, а корпус стоял на месте.

   Отрисовка — AGFA SR-XS-90 с Викисклада, CC0; марка снята, на её месте
   наша наклейка. */
/* Своя полоса и свой слой: кассеты лежат друг на друге и разъезжаются
   вверх, поэтому им нужна высота на всю стопку — иначе верхние вылезают
   наружу и накрывают то, что под ними */
.amb-tapes { position: relative; z-index: 1; margin-bottom: 14px; }
.amb-tape-stack {
    /* Кассеты меняются местами и крутятся: держим их перерисовку внутри
       стопки, чтобы она не тянула за собой остальной экран */
    contain: layout paint;
    position: relative;
    /* Высота кассеты плюс разлёт: 78% ширины окна делить на 1.565 — это
       пропорция настоящей кассеты, — и по 24 пикселя на каждую заднюю.
       Задние приподняты и уменьшены разом, поэтому верхняя укладывается
       в эту высоту с запасом — замер на 393 и на 1440 показал по 5 px */
    height: 322px;
    /* Вертикальный ход отдаём прокрутке окна, горизонтальный ловим сами */
    touch-action: pan-y;
    user-select: none;
    overflow: hidden;
}
.amb-tape {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 78%;
    max-width: 300px;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    /* Разлёт заметный: при малом сдвиге передняя кассета закрывает
       остальные, и стопка читается одной кассетой с оборкой */
    /* Разлёт в тридцать шесть пикселей — ровно столько, чтобы у задней
       кассеты целиком помещалась наклейка с названием: ради неё стопка и
       нужна, а полоска корпуса не говорит ничего */
    transform: translateX(-50%) translateY(calc(var(--место) * -36px))
               scale(calc(1 - var(--место) * 0.05));
    /* Задние кассеты не притушаем: глубину задают размер и наложение, а
       название — единственное, что на них видно, и оно должно читаться */
    opacity: 1;
    filter: none;
    z-index: calc(20 - var(--место));
    transition: transform 420ms cubic-bezier(0.3, 1.1, 0.4, 1),
                opacity 300ms ease, filter 300ms ease;
}
.amb-tape.сверху { filter: none; }
/* Слои кладём от левого верхнего угла, высоту отдаём пропорции: inset: 0
   растягивает картинку, и слои перестают совпадать */
.amb-tape img {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: auto;
    display: block;
    pointer-events: none;
}
/* Корпус — единственный слой в потоке: по нему кассета получает высоту.
   Селектор из двух классов не случайно: .amb-tape img выше по
   специфичности, и одного класса не хватало — кнопка схлопывалась в ноль */
.amb-tape .amb-tape-body { position: relative; }
/* Катушки крутятся вокруг своих осей: слой во всю кассету, но точка
   вращения там, где у настоящей кассеты ось */
.amb-tape-reel { transform-origin: 30% 47.8%; }
.amb-tape-reel.is-right { transform-origin: 70.4% 46.8%; }
.amb-tape.звучит .amb-tape-reel {
    animation: amb-катушка 3.6s linear infinite;
    /* Своим слоем: иначе каждый кадр вращения перерисовывает кассету
       целиком вместе с корпусом и наклейкой */
    will-change: transform;
}
.amb-tape.звучит .amb-tape-reel.is-right { animation-duration: 5.2s; }
@keyframes amb-катушка { to { transform: rotate(360deg); } }
/* Звучащая кассета подсвечена — видно, с какой идёт звук */
.amb-tape.звучит .amb-tape-body {
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--accent-color) 45%, transparent));
}
.amb-tape-label {
    position: absolute;
    left: 11%; right: 11%; top: 9%;
    padding: 3% 4%;
    border-radius: 2px;
    background: var(--лента, #d98b5f);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    /* Наклейку человек клеит рукой, а не станком */
    transform: rotate(-0.6deg);
    line-height: 1;
}
.amb-tape-label span {
    display: block;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-weight: 600;
    font-size: 1.45em;
    color: #14120f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Светлый след под буквами: рукописный шрифт тонкий, а бумага цветная */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* Листаем тем же колесом, что и громкость: одна и та же вещь в руках
   должна работать одинаково */
.amb-tape-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    margin-top: 10px;
}
.amb-tape-wheel { max-width: 260px; }
/* Скрытые кассеты лежат в разметке, чтобы колесо могло вытащить любую
   без перерисовки — но места не занимают и не рисуются */
.amb-tape[hidden] { display: none; }
/* Кассета, летящая от кнопки «Готово» к стопке. Класс .amb-tape на ней
   тоже есть — от него достаются слои корпуса и наклейка, — а здесь его
   раскладка отменяется: летит она поверх окна и по своим координатам.
   Живёт в body: у .amb-overlay своё размытие фона, а оно ломает fixed. */
.amb-tape-fly {
    position: fixed;
    bottom: auto;
    /* Выше самого окна фона: у него 10100 */
    z-index: 10200;
    pointer-events: none;
    transform-origin: 50% 50%;
    /* Тень по силуэту, а не по прямоугольнику: без неё кассета едет по
       экрану наклейкой, а не летит над ним */
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
    .amb-tape.звучит .amb-tape-reel { animation: none; }
    .amb-tape { transition: none; }
}

body.dark-mode .amb-preset,
body.oled-mode .amb-preset,
body.synthwave-mode .amb-preset {
    --клавиша-свет: rgba(255, 255, 255, 0.14);
    --клавиша-бок: rgba(255, 255, 255, 0.07);
    --клавиша-тень: rgba(0, 0, 0, 0.35);
    --клавиша-низ: rgba(0, 0, 0, 0.55);
}

/* ── Что звучит сейчас ────────────────────────────────────── */
/* Колесо общей громкости стоит слева от списка, а не под ним: список
   короткий, справа от колеса места хватает, и блок выходит на четыре
   десятка пикселей ниже. Раскладку держит флекс по своей обёртке —
   грид по самому блоку не годился: строк микса произвольное число, и
   колесо на «двадцать строк вперёд» занимало ещё и ряд кнопок. */
.amb-now-body {
    display: flex;
    align-items: center;
    gap: 12px;
}
.amb-now .amb-master {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-right: 10px;
    border-right: 1px solid var(--border-color);
}
.amb-mix-list { flex: 1 1 auto; min-width: 0; }
/* Подсказка вместо строки звука: высота та же, поэтому первый выбранный
   звук ничего не сдвигает */
.amb-mix-empty {
    margin: 0;
    padding: 9px 4px;
    font-size: 0.84em;
    line-height: 1.35;
    color: var(--secondary-text-color);
}
/* В тишине блок приглушён, а его кнопки недоступны: место они занимают,
   но нажимать их не на что */
.amb-now.is-empty { opacity: 0.72; }
.amb-now .amb-chip[disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
.amb-now .amb-now-acts {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 10px;
}
/* Строка именования встаёт на место кнопок: поле шире всего, рядом
   «Готово» и «Отмена». На узком экране кнопки уезжают под поле, иначе
   от названия остаётся полтора символа. */
.amb-name {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.amb-name input {
    flex: 1 1 140px;
    min-width: 0;
    font: inherit;
    font-size: 0.86em;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
}
.amb-name input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-color) 65%, transparent);
}
.amb-name .amb-chip { flex: 0 0 auto; }
.amb-name .amb-chip.is-ok {
    border-color: color-mix(in srgb, var(--accent-color) 65%, transparent);
    color: var(--accent-color);
}
.amb-now .amb-now-acts .amb-chip { flex: 1 1 0; justify-content: center; }
.amb-now {
    padding: 13px 14px;
    border-radius: 18px;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
}
.amb-now-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.9em; margin-bottom: 9px;
}
.amb-now-head span { font-size: 0.8em; color: var(--secondary-text-color); }
.amb-mix { display: flex; flex-direction: column; gap: 4px; }
.amb-mix-item { border-radius: 10px; transition: background 0.18s; }
.amb-mix-item.раскрыт { background: var(--input-hover-bg-color); }
.amb-mix-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.84em;
    padding: 5px 6px;
    cursor: pointer;
}
.amb-mix-row i { width: 16px; height: 16px; color: var(--accent-color); flex: none; }
.amb-mix-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amb-mix-val {
    font-variant-numeric: tabular-nums;
    color: var(--secondary-text-color);
    font-size: 0.86em;
    min-width: 2.2em; text-align: right;
}
.amb-mix-off { border: none; background: none; cursor: pointer; padding: 2px; color: var(--secondary-text-color); }
.amb-mix-off i { width: 14px; height: 14px; }

/* Колесо канала: то же рифление, только лёжа */
.amb-mix-wheel { padding: 2px 6px 8px; }
.amb-wheel.is-h {
    width: 100%;
    height: 24px;
    border-radius: 12px;
    touch-action: none;
}
.amb-wheel.is-h i {
    background-image: linear-gradient(to right,
        color-mix(in srgb, var(--text-color) 28%, transparent) 0 1.5px, transparent 1.5px 9px);
    background-size: 9px 9px;
    background-repeat: repeat-x;
    background-position-y: center;
    background-position-x: var(--насечка, 0px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px,
        #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 10px,
        #000 calc(100% - 10px), transparent 100%);
}
.amb-mix-item.раскрыт .amb-wheel.is-h i,
.amb-card.on .amb-card-wheel i {
    background-image: linear-gradient(to right,
        color-mix(in srgb, var(--accent-color) 55%, transparent) 0 1.5px, transparent 1.5px 9px);
}
/* Под пальцем засечки светлеют — так видно, что колесо схвачено */
.amb-wheel.is-h.крутим i {
    background-image: linear-gradient(to right,
        var(--accent-color) 0 1.5px, transparent 1.5px 9px);
}
.amb-wheel.is-h.крутим { border-color: color-mix(in srgb, var(--accent-color) 50%, transparent); }

.amb-now-foot {
    display: flex; align-items: center; gap: 12px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* Колесо громкости: рифлёная лента вместо полоски с бегунком — бегунок
   надо поймать, а колесо берётся в любой точке */
.amb-master {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    touch-action: none;
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
}
.amb-wheel {
    position: relative;
    display: block;
    touch-action: none;
    width: 26px;
    /* Длиннее короткого: на 58 пикселях палец не помещался и ход выходил
       рваным — громкость прыгала вместо плавного набора */
    height: 96px;
    border-radius: 13px;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    overflow: hidden;
    flex: none;
}
.amb-wheel i {
    position: absolute;
    inset: 0;
    /* Плитка ровно в один шаг засечки: лента повторяется без шва, и сдвиг
       по вертикали заворачивается сам */
    background-image: linear-gradient(to bottom,
        color-mix(in srgb, var(--text-color) 28%, transparent) 0 1.5px, transparent 1.5px 9px);
    background-size: 9px 9px;
    background-repeat: repeat-y;
    background-position-x: center;
    background-position-y: var(--насечка, 0px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px,
        #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10px,
        #000 calc(100% - 10px), transparent 100%);
}
.amb-master.крутим .amb-wheel i {
    background-image: linear-gradient(to bottom,
        var(--accent-color) 0 1.5px, transparent 1.5px 9px);
}
.amb-master.крутим .amb-wheel { border-color: color-mix(in srgb, var(--accent-color) 50%, transparent); }
.amb-master-side { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.amb-master-side i { width: 17px; height: 17px; color: var(--secondary-text-color); }
.amb-master-side b {
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-color);
}
.amb-now-acts { display: flex; flex-direction: column; gap: 7px; margin-left: auto; }
.amb-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font: inherit; font-size: 0.74em;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
}
.amb-chip i { width: 13px; height: 13px; }
.amb-chip.is-stop {
    color: var(--feedback-incorrect-text, #d9534f);
    border-color: color-mix(in srgb, var(--feedback-incorrect-text, #d9534f) 35%, transparent);
}
.amb-chip.is-drop {
    color: var(--warning-color, #d98c4a);
    border-color: color-mix(in srgb, var(--warning-color, #d98c4a) 35%, transparent);
}

/* ── Разделы и сетка ──────────────────────────────────────── */
/* Лента стоит вплотную к сетке: выбранная вкладка садится на её корпус
   и должна быть с ним одним куском, а зазор рвал бы их на два */
/* Разделы — шкала, а не ряд кнопок.

   Пилюли с рамками пробовали и вдавливать в корпус, и сажать на него
   язычком: под ними панель со сценами, и любой стык между двумя объёмными
   вещами читался ступенькой. Здесь объёма нет вовсе — только надписи на
   общей линии и короткий огонёк под выбранной. Шкала не спорит ни с
   клавишами сцен, ни с тем, что появится над ней. */
.amb-tabs {
    display: flex; gap: 2px; margin-bottom: 10px;
    overflow-x: auto; scrollbar-width: none;
    padding: 0 0 8px;
    border-bottom: 2px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}
.amb-tabs::-webkit-scrollbar { display: none; }
.amb-tab {
    position: relative;
    flex: none;
    font: inherit; font-size: 0.78em;
    padding: 6px 12px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--secondary-text-color);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s;
}
.amb-tab.on {
    color: var(--accent-color);
    font-weight: 700;
}
/* Огонёк сидит на самой линии: он продолжение шкалы, а не подчёркивание
   слова, поэтому уходит вниз ровно на толщину линии */
.amb-tab.on::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: -10px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-color);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-color) 70%, transparent);
}

/* Сетка — корпус, сцены на нём — клавиши.
   Приём взят у «Squishy Toggle Buttons» (Justin Windle): свет идёт сверху,
   а при нажатии переезжает вниз, и кнопка проваливается в корпус. Здесь он
   переложен на квадратные карточки: круглая площадка внутри квадрата не
   годится — у сцены есть подпись и колесо громкости.
   Светлые блики и тёмные тени разведены переменными: в тёмной теме белый
   на 85% даёт вокруг каждой карточки ореол, и клавиатура превращается в
   гирлянду. */
.amb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--text-color) 6%, var(--container-bg-color));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.amb-card {
    /* Шесть десятков карточек, а на экране помещается шесть. Остальные
       браузер может не рисовать вовсе — пока они за краем, от них нужен
       только размер, и его мы называем сами. Без этого каждый кадр
       прокрутки перекрашивал всю сетку с её градиентами и фасками */
    content-visibility: auto;
    contain-intrinsic-size: auto 134px;
    /* Фаска: сверху свет, снизу тень, по бокам — половина того и другого */
    --клавиша-свет: rgba(255, 255, 255, 0.85);
    --клавиша-бок: rgba(255, 255, 255, 0.4);
    --клавиша-тень: rgba(0, 0, 0, 0.12);
    --клавиша-низ: rgba(0, 0, 0, 0.3);
    border-radius: 13px;
    border: 0;
    background: linear-gradient(175deg,
        color-mix(in srgb, #fff 40%, var(--input-bg-color)) 0%,
        var(--input-bg-color) 58%,
        color-mix(in srgb, var(--text-color) 6%, var(--input-bg-color)) 100%);
    box-shadow: 0 6px 12px -4px var(--клавиша-низ),
                inset 0 1px 0 1px var(--клавиша-свет),
                inset 0 -2px 0 1px var(--клавиша-тень),
                inset 2px 0 2px -1px var(--клавиша-бок),
                inset -2px 0 2px -1px rgba(0, 0, 0, 0.08);
    padding: 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    transition: box-shadow 220ms ease, transform 140ms ease, background 220ms ease;
}
/* Палец на клавише — она уходит вниз ещё до того, как звук включится */
.amb-card:active,
.amb-card:has(.amb-card-top:active) {
    transform: translateY(2px) scale(0.985);
}
/* Звучит — значит нажата. Свет переезжает вниз, тень уходит внутрь:
   включённую сцену видно боковым зрением, без чтения подписей */
.amb-card.on {
    background: linear-gradient(175deg,
        color-mix(in srgb, var(--accent-color) 18%, var(--input-bg-color)) 0%,
        color-mix(in srgb, var(--accent-color) 10%, var(--input-bg-color)) 100%);
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.22),
                inset 0 -2px 2px var(--клавиша-бок),
                0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}
.amb-card.on:active,
.amb-card.on:has(.amb-card-top:active) {
    transform: translateY(2px) scale(0.985);
}
/* В тёмной теме белый блик в полную силу светится вокруг карточки, а не
   очерчивает её кромку: приглушаем свет и усиливаем падающую тень */
body.dark-mode .amb-card,
body.oled-mode .amb-card,
body.synthwave-mode .amb-card {
    --клавиша-свет: rgba(255, 255, 255, 0.14);
    --клавиша-бок: rgba(255, 255, 255, 0.07);
    --клавиша-тень: rgba(0, 0, 0, 0.35);
    --клавиша-низ: rgba(0, 0, 0, 0.55);
}
body.dark-mode .amb-grid,
body.oled-mode .amb-grid,
body.synthwave-mode .amb-grid {
    background: color-mix(in srgb, #000 22%, var(--container-bg-color));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.amb-card-top {
    font: inherit;
    border: none; background: none; cursor: pointer; padding: 0;
    color: var(--text-color);
    display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
    text-align: left;
}
.amb-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--secondary-text-color);
    transition: background 0.2s, color 0.2s;
}
.amb-card.on .amb-card-icon {
    background: color-mix(in srgb, var(--accent-color) 24%, transparent);
    color: var(--accent-color);
}
.amb-card-icon i { width: 19px; height: 19px; }
.amb-card-name { font-size: 0.76em; line-height: 1.3; color: var(--text-color); }
/* Шапка карточки: значок слева, громкость в пустом месте справа от него */
.amb-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}
.amb-card-val {
    font-size: 0.8em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent-color);
}
.amb-card-wheel {
    height: 20px;
    border-radius: 10px;
    transition: opacity 200ms ease;
}
/* Место занято, полосок не видно: без этого включение сцены меняло высоту
   карточки, ряд сетки перестраивался, и соседи дёргались под пальцем */
.amb-card-wheel.пусто {
    opacity: 0;
    pointer-events: none;
}

/* ── Таймер сна ───────────────────────────────────────────── */
.amb-sleep {
    margin-top: 18px;
    padding: 13px 14px;
    border-radius: 18px;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
}
.amb-sleep-head { display: flex; align-items: center; gap: 8px; font-size: 0.88em; margin-bottom: 10px; }
.amb-sleep-head i { width: 16px; height: 16px; color: var(--secondary-text-color); }
.amb-sleep-head span {
    margin-left: auto; font-variant-numeric: tabular-nums;
    color: var(--accent-color); font-weight: 700;
}
.amb-sleep-row { display: flex; gap: 7px; flex-wrap: wrap; }
.amb-sleep-btn {
    font: inherit; font-size: 0.78em;
    padding: 7px 13px;
    border-radius: 11px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
}
.amb-sleep-btn.is-off { color: var(--secondary-text-color); }
.amb-sleep-note { margin: 10px 0 0; font-size: 0.7em; color: var(--secondary-text-color); }

.amb-credits {
    margin: 16px 0 4px;
    font-size: 0.68em;
    color: var(--secondary-text-color);
    opacity: 0.75;
    text-align: center;
}

/* Громкость фона в меню оформления: строка появляется, только когда звук
   уже идёт, и состоит из значка, колеса и числа */
.amb-menu-vol {
    display: flex;
    align-items: center;
    gap: 10px;
}
.amb-menu-vol[hidden] { display: none; }
.amb-menu-vol .amb-wheel.is-h {
    flex: 1;
    min-width: 0;
    height: 22px;
    /* Без этого браузер считает жест прокруткой меню и забирает его себе:
       колесо не двигалось вовсе */
    touch-action: none;
    border-radius: 11px;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
}
.amb-menu-vol b {
    font-size: 0.82em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-color);
    min-width: 2.2em;
    text-align: right;
}

/* Пока открыт микшер, страница под ним не прокручивается */
body.amb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .amb { animation: none; }
}

/* ============================================
   ВИЗИТКА АВТОРА
   ============================================
   Раньше тут был кружок 28 px сбоку от строки — он читался как случайная
   картинка неизвестно кого. Теперь автор представлен: лицо, имя и строка о
   нём. Пока каталог не ответил, в рамке стоит монограмма, поэтому выдача не
   прыгает, когда фотография проявляется. */
.grd-author {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.grd-face {
    grid-row: 1 / 3;
    align-self: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 1.35em;
    font-weight: 800;
    color: #fff;
    /* Тон из имени: один автор — один цвет, и он не скачет между показами */
    background: linear-gradient(140deg,
        hsl(var(--тон, 210) 42% 46%), hsl(var(--тон, 210) 46% 32%));
    background-size: cover;
    background-position: center top;
    border: 2px solid var(--border-color);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
/* Нашлось фото — буква под ним не нужна */
.grd-face.есть {
    color: transparent;
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}
.grd-author-name {
    margin: 0;
    align-self: end;
    font-size: 1.02em;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.25;
}
.grd-author-note {
    margin: 2px 0 0;
    align-self: start;
    display: flex;
    gap: 8px;
    font-size: 0.78em;
    color: var(--secondary-text-color);
}
/* Годы жизни приходят из каталога и появляются не всегда: пустая строка не
   должна оставлять разрыв между именем и числом книг */
.grd-author-life:empty { display: none; }

.grd-stats[hidden] { display: none; }
/* Сводка чтения — одна панель, а не россыпь плиток. Четыре узкие плитки в
   ряд ломали «11 ч 30» на три строки и выходили разной высоты, а сам блок
   занимал пол-экрана: книги уезжали вниз. Теперь цифры идут строкой, под
   ними неделя столбиками, и всё это в общей рамке */
.grd-stats {
    display: block; margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--container-bg-color);
}
.grd-stats-head {
    margin-bottom: 8px;
    font-size: 0.76em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary-text-color);
}
.grd-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}
/* Цифра и подпись стоят рядом на одной строке: отдельная плитка на каждую
   пару была слишком дорогой по месту */
.grd-stat {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
}
.grd-stat b { font-size: 1.02em; font-weight: 700; color: var(--text-color); }
.grd-stat span { font-size: 0.78em; color: var(--secondary-text-color); }
/* Примечание вроде «156 тыс. знаков» ушло в подсказку: в строке оно
   растягивало блок, а нужно оно раз в месяц */
.grd-stat i { display: none; }
.grd-stat i.ZZ-неиспользуется {
    font-size: 0.7em;
    font-style: normal;
    color: var(--secondary-text-color);
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   ТОЛЩИНА СТЕКЛА (19.09.2026)

   Размытие делает поверхность матовой, но не стеклянной: у настоящего стекла
   виден край — он ловит свет сверху, темнеет снизу и красит границу в
   холодный и тёплый. Рисуем это градиентами в фоне: ни перерисовок, ни
   второго слоя размытия, ни расхода сверх того, что уже тратит backdrop-filter.

   Почему фон, а не ::after: псевдоэлемент ложится поверх содержимого, и чтобы
   текст остался читаемым, детям приходилось задавать position: relative. Этот
   position перебивал absolute у всех, кто им позиционирован — поле ввода
   ИИ-чата и кнопки в углах панелей разъезжались. Фон под содержимым таких
   последствий не имеет.

   Список поверхностей взят из самих glass-правил: стеклянным считается то,
   чему задан backdrop-filter. Те, у кого в фоне уже свой градиент или
   картинка, пропущены — их оформление важнее кромки.
   ============================================ */
body.glass:not(.glass-lite) #fileUploadArea#fileUploadArea .main-actions-grid > button,
body.glass:not(.glass-lite) #fileUploadArea#fileUploadArea .main-actions-grid > label,
body.glass:not(.glass-lite) #fileUploadArea#fileUploadArea .action-group-title,
body.glass:not(.glass-lite) #decksArea#decksArea,
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .advanced-chat-header,
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .chat-sidebar,
body.glass:not(.glass-lite) #chatOverlay#chatOverlay .chat-input-wrapper,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-header,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-input-area,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-sidebar,
body.glass:not(.glass-lite) #recentFilesArea#recentFilesArea,
body.glass:not(.glass-lite) #savedSessionArea#savedSessionArea,
body.glass:not(.glass-lite) #activityStatsArea#activityStatsArea,
body.glass:not(.glass-lite) #searchContainer#searchContainer,
body.glass:not(.glass-lite) #searchResultsContainer#searchResultsContainer,
body.glass:not(.glass-lite) #gradusFoldersContainer#gradusFoldersContainer,
body.glass:not(.glass-lite) #quizSetupArea#quizSetupArea,
body.glass:not(.glass-lite) #cheatSheetResultArea#cheatSheetResultArea,
body.glass:not(.glass-lite) #resultsArea#resultsArea,
body.glass:not(.glass-lite) #coursesArea#coursesArea,
body.glass:not(.glass-lite) #visualTrainerArea#visualTrainerArea,
body.glass:not(.glass-lite) #courseDetailArea#courseDetailArea,
body.glass:not(.glass-lite) #medicalCalcArea#medicalCalcArea,
body.glass:not(.glass-lite) #reflectionArea#reflectionArea,
body.glass:not(.glass-lite) #reflectionJoinArea#reflectionJoinArea,
body.glass:not(.glass-lite) #videoInterceptorArea#videoInterceptorArea,
body.glass:not(.glass-lite) #feynmanRoomArea#feynmanRoomArea,
body.glass:not(.glass-lite) #favoritesArea#favoritesArea,
body.glass:not(.glass-lite) #testVerifierArea#testVerifierArea,
body.glass:not(.glass-lite) #zonkLobbyArea#zonkLobbyArea,
body.glass:not(.glass-lite) #zonkRiskSetupArea#zonkRiskSetupArea,
body.glass:not(.glass-lite) #zonkDuelSetupArea#zonkDuelSetupArea,
body.glass:not(.glass-lite) #zonkPracticeSetupArea#zonkPracticeSetupArea,
body.glass:not(.glass-lite) #zonkShopArea#zonkShopArea,
body.glass:not(.glass-lite) #factsArea#factsArea,
body.glass:not(.glass-lite) .bs-sheet.bs-sheet,
body.glass:not(.glass-lite) .parser-fs-inner,
body.glass:not(.glass-lite) .parser-fs-modal,
body.glass:not(.glass-lite) .ch-notify-popover,
body.glass:not(.glass-lite) #quickNavPanel#quickNavPanel,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-user-messages-sidebar,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-gallery-sidebar,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-settings-panel,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-characters-sidebar,
body.glass:not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-input-container,
body.glass:not(.glass-lite) .ai-bc-dropdown.ai-bc-dropdown,
body.glass:not(.glass-lite) .has-pill.expanded .ai-actions-extra,
body.glass:not(.glass-lite) .ai-user-message-actions,
body.glass:not(.glass-lite) .ai-select-dropdown,
body.glass:not(.glass-lite) .ai-attach-menu,
body.glass:not(.glass-lite) .ai-more-menu,
body.glass:not(.glass-lite) .ai-bc-dropdown,
body.glass:not(.glass-lite) .ai-helper-menu,
body.glass:not(.glass-lite) #aiPersonaSelectDropdown,
body.glass:not(.glass-lite) .dropdown-content,
body.glass:not(.glass-lite) #translateEngineDropdown,
body.glass:not(.glass-lite) .download-dropdown-content,
body.glass:not(.glass-lite) .folder-actions-menu,
body.glass:not(.glass-lite) .import-dropdown-content,
body.glass:not(.glass-lite) .format-select-list,
body.glass:not(.glass-lite) .interactive-dropdown-content,
body.glass:not(.glass-lite) .style-dropdown-content,
body.glass:not(.glass-lite) .user-dropdown,
body.glass:not(.glass-lite) .reaction-picker,
body.glass:not(.glass-lite) .full-reaction-picker,
body.glass:not(.glass-lite) .filter-dropdown,
body.glass:not(.glass-lite) .add-block-menu,
body.glass:not(.glass-lite) .ai-tools-menu,
body.glass:not(.glass-lite) .atlas-attach-popover,
body.glass:not(.glass-lite) .rm-export-menu,
body.glass:not(.glass-lite) .rm-cat-dropdown,
body.glass:not(.glass-lite) .dot-color-picker,
body.glass:not(.glass-lite) .breadcrumb-dropdown-menu,
body.glass:not(.glass-lite) .edit-history-popup,
body.glass:not(.glass-lite) .markdown-toolbar,
body.glass:not(.glass-lite) .mindmap-help-panel,
body.glass:not(.glass-lite) .mindmap-outline-panel,
body.glass:not(.glass-lite) .mindmap-keys-panel,
body.glass:not(.glass-lite) .channel-info-panel,
body.glass:not(.glass-lite) .ai-chat-search-container,
body.glass:not(.glass-lite) .chat-item-actions-revealed,
body.glass:not(.glass-lite):not(.mini-player-mode) #lessonViewArea#lessonViewArea,
body.glass:not(.glass-lite) .modal-content,
body.glass:not(.glass-lite) .swal2-popup,
body.glass:not(.glass-lite) .bottom-sheet {
    /* Свет по верхней кромке, тень по нижней, холодная и тёплая полосы по
       бокам — стекло получает толщину. Всё это фон, поэтому рисуется поверх
       цвета, но под текстом: содержимое никуда не поднимается и ничего не
       перекрывает. */
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 2px),
        linear-gradient(to top, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0) 2px),
        linear-gradient(to right, rgba(130, 200, 255, 0.22), rgba(130, 200, 255, 0) 7px),
        linear-gradient(to left, rgba(255, 180, 130, 0.18), rgba(255, 180, 130, 0) 7px),
        linear-gradient(158deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 44%);
    background-repeat: no-repeat;
}
body.glass:not(.glass-dark):not(.glass-lite) #fileUploadArea#fileUploadArea .main-actions-grid > button,
body.glass:not(.glass-dark):not(.glass-lite) #fileUploadArea#fileUploadArea .main-actions-grid > label,
body.glass:not(.glass-dark):not(.glass-lite) #fileUploadArea#fileUploadArea .action-group-title,
body.glass:not(.glass-dark):not(.glass-lite) #decksArea#decksArea,
body.glass:not(.glass-dark):not(.glass-lite) #chatOverlay#chatOverlay .advanced-chat-header,
body.glass:not(.glass-dark):not(.glass-lite) #chatOverlay#chatOverlay .chat-sidebar,
body.glass:not(.glass-dark):not(.glass-lite) #chatOverlay#chatOverlay .chat-input-wrapper,
body.glass:not(.glass-dark):not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-header,
body.glass:not(.glass-dark):not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-input-area,
body.glass:not(.glass-dark):not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-sidebar,
body.glass:not(.glass-dark):not(.glass-lite) #recentFilesArea#recentFilesArea,
body.glass:not(.glass-dark):not(.glass-lite) #savedSessionArea#savedSessionArea,
body.glass:not(.glass-dark):not(.glass-lite) #activityStatsArea#activityStatsArea,
body.glass:not(.glass-dark):not(.glass-lite) #searchContainer#searchContainer,
body.glass:not(.glass-dark):not(.glass-lite) #searchResultsContainer#searchResultsContainer,
body.glass:not(.glass-dark):not(.glass-lite) #gradusFoldersContainer#gradusFoldersContainer,
body.glass:not(.glass-dark):not(.glass-lite) #quizSetupArea#quizSetupArea,
body.glass:not(.glass-dark):not(.glass-lite) #cheatSheetResultArea#cheatSheetResultArea,
body.glass:not(.glass-dark):not(.glass-lite) #resultsArea#resultsArea,
body.glass:not(.glass-dark):not(.glass-lite) #coursesArea#coursesArea,
body.glass:not(.glass-dark):not(.glass-lite) #visualTrainerArea#visualTrainerArea,
body.glass:not(.glass-dark):not(.glass-lite) #courseDetailArea#courseDetailArea,
body.glass:not(.glass-dark):not(.glass-lite) #medicalCalcArea#medicalCalcArea,
body.glass:not(.glass-dark):not(.glass-lite) #reflectionArea#reflectionArea,
body.glass:not(.glass-dark):not(.glass-lite) #reflectionJoinArea#reflectionJoinArea,
body.glass:not(.glass-dark):not(.glass-lite) #videoInterceptorArea#videoInterceptorArea,
body.glass:not(.glass-dark):not(.glass-lite) #feynmanRoomArea#feynmanRoomArea,
body.glass:not(.glass-dark):not(.glass-lite) #favoritesArea#favoritesArea,
body.glass:not(.glass-dark):not(.glass-lite) #testVerifierArea#testVerifierArea,
body.glass:not(.glass-dark):not(.glass-lite) #zonkLobbyArea#zonkLobbyArea,
body.glass:not(.glass-dark):not(.glass-lite) #zonkRiskSetupArea#zonkRiskSetupArea,
body.glass:not(.glass-dark):not(.glass-lite) #zonkDuelSetupArea#zonkDuelSetupArea,
body.glass:not(.glass-dark):not(.glass-lite) #zonkPracticeSetupArea#zonkPracticeSetupArea,
body.glass:not(.glass-dark):not(.glass-lite) #zonkShopArea#zonkShopArea,
body.glass:not(.glass-dark):not(.glass-lite) #factsArea#factsArea,
body.glass:not(.glass-dark):not(.glass-lite) .bs-sheet.bs-sheet,
body.glass:not(.glass-dark):not(.glass-lite) .parser-fs-inner,
body.glass:not(.glass-dark):not(.glass-lite) .parser-fs-modal,
body.glass:not(.glass-dark):not(.glass-lite) .ch-notify-popover,
body.glass:not(.glass-dark):not(.glass-lite) #quickNavPanel#quickNavPanel,
body.glass:not(.glass-dark):not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-user-messages-sidebar,
body.glass:not(.glass-dark):not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-gallery-sidebar,
body.glass:not(.glass-dark):not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-settings-panel,
body.glass:not(.glass-dark):not(.glass-lite) #aiChatModal#aiChatModal .ai-characters-sidebar,
body.glass:not(.glass-dark):not(.glass-lite) #aiChatModal#aiChatModal .ai-chat-input-container,
body.glass:not(.glass-dark):not(.glass-lite) .ai-bc-dropdown.ai-bc-dropdown,
body.glass:not(.glass-dark):not(.glass-lite) .has-pill.expanded .ai-actions-extra,
body.glass:not(.glass-dark):not(.glass-lite) .ai-user-message-actions,
body.glass:not(.glass-dark):not(.glass-lite) .ai-select-dropdown,
body.glass:not(.glass-dark):not(.glass-lite) .ai-attach-menu,
body.glass:not(.glass-dark):not(.glass-lite) .ai-more-menu,
body.glass:not(.glass-dark):not(.glass-lite) .ai-bc-dropdown,
body.glass:not(.glass-dark):not(.glass-lite) .ai-helper-menu,
body.glass:not(.glass-dark):not(.glass-lite) #aiPersonaSelectDropdown,
body.glass:not(.glass-dark):not(.glass-lite) .dropdown-content,
body.glass:not(.glass-dark):not(.glass-lite) #translateEngineDropdown,
body.glass:not(.glass-dark):not(.glass-lite) .download-dropdown-content,
body.glass:not(.glass-dark):not(.glass-lite) .folder-actions-menu,
body.glass:not(.glass-dark):not(.glass-lite) .import-dropdown-content,
body.glass:not(.glass-dark):not(.glass-lite) .format-select-list,
body.glass:not(.glass-dark):not(.glass-lite) .interactive-dropdown-content,
body.glass:not(.glass-dark):not(.glass-lite) .style-dropdown-content,
body.glass:not(.glass-dark):not(.glass-lite) .user-dropdown,
body.glass:not(.glass-dark):not(.glass-lite) .reaction-picker,
body.glass:not(.glass-dark):not(.glass-lite) .full-reaction-picker,
body.glass:not(.glass-dark):not(.glass-lite) .filter-dropdown,
body.glass:not(.glass-dark):not(.glass-lite) .add-block-menu,
body.glass:not(.glass-dark):not(.glass-lite) .ai-tools-menu,
body.glass:not(.glass-dark):not(.glass-lite) .atlas-attach-popover,
body.glass:not(.glass-dark):not(.glass-lite) .rm-export-menu,
body.glass:not(.glass-dark):not(.glass-lite) .rm-cat-dropdown,
body.glass:not(.glass-dark):not(.glass-lite) .dot-color-picker,
body.glass:not(.glass-dark):not(.glass-lite) .breadcrumb-dropdown-menu,
body.glass:not(.glass-dark):not(.glass-lite) .edit-history-popup,
body.glass:not(.glass-dark):not(.glass-lite) .markdown-toolbar,
body.glass:not(.glass-dark):not(.glass-lite) .mindmap-help-panel,
body.glass:not(.glass-dark):not(.glass-lite) .mindmap-outline-panel,
body.glass:not(.glass-dark):not(.glass-lite) .mindmap-keys-panel,
body.glass:not(.glass-dark):not(.glass-lite) .channel-info-panel,
body.glass:not(.glass-dark):not(.glass-lite) .ai-chat-search-container,
body.glass:not(.glass-dark):not(.glass-lite) .chat-item-actions-revealed,
body.glass:not(.glass-dark):not(.glass-lite):not(.mini-player-mode) #lessonViewArea#lessonViewArea,
body.glass:not(.glass-dark):not(.glass-lite) .modal-content,
body.glass:not(.glass-dark):not(.glass-lite) .swal2-popup,
body.glass:not(.glass-dark):not(.glass-lite) .bottom-sheet {
    /* В светлой теме тот же край, но мягче: на белом сильные тени выглядят
       грязью, а не стеклом */
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 2px),
        linear-gradient(to top, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0) 2px),
        linear-gradient(to right, rgba(90, 170, 255, 0.16), rgba(90, 170, 255, 0) 7px),
        linear-gradient(to left, rgba(255, 160, 110, 0.13), rgba(255, 160, 110, 0) 7px),
        linear-gradient(158deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 44%);
}
/* Слабому устройству ничего этого не достаётся: там и размытия нет */
body.glass-lite .modal-content,
body.glass-lite .swal2-popup { background-image: none; }


/* ============================================
   ЗАМЕТКИ (notes.js)

   Экран во весь экран, как читалка: список длинный, и открывать его листом
   значило бы читать заметки в щель. Наверху поиск, под ним вкладки по видам
   — и только те, где что-то есть. Отмеченное собирается полосой внизу: там
   до неё дотягивается большой палец.
   ============================================ */
.notes {
    position: fixed;
    inset: 0;
    z-index: 100040;
    display: none;
    flex-direction: column;
    background: var(--bg-color);
    color: var(--text-color);
}
.notes.visible { display: flex; }
body.notes-open { overflow: hidden; }

.notes-top {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px calc(10px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--border-color);
}
.notes-btn {
    flex: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-color);
    font-size: 1.3em;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
}
.notes-search {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.92em;
}

/* Строка быстрой записи: живёт под шапкой и появляется по «плюсу».
   Постоянным ярусом её держать нельзя — над списком и так поиск, вкладки,
   метки и порядок */
.notes-quick {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
}
.notes-quick[hidden] { display: none; }
.notes-quick-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.92em;
}
.notes-quick-btn {
    flex: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
}
.notes-quick-btn i, .notes-quick-btn svg { width: 17px; height: 17px; }

/* Вкладки: горизонтальная лента, их может быть пять и больше */
.notes-tabs {
    flex: none;
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-color);
}
.notes-tabs::-webkit-scrollbar { height: 0; }
/* Своё display сильнее браузерного скрытия: без этой строки hidden на
   ленте вкладок не значит ничего */
.notes-tabs[hidden] { display: none; }
/* Запись из архива: её уже нет, и выглядеть как живая она не должна */
.notes-card.is-gone { opacity: 0.72; border-style: dashed; }
.notes-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--secondary-text-color);
    font-family: inherit;
    font-size: 0.85em;
    cursor: pointer;
    white-space: nowrap;
}
.notes-tab b { font-weight: 700; opacity: 0.6; }
.notes-tab.on {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--text-color);
}

.notes-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    /* Записей много и каждая короткая: воздух между рамками съедал экран,
       а прокрутка шла по пустоте */
    gap: 4px;
}

/* Карточка: слева отметка, справа сама запись. Отметку выносим наружу,
   чтобы нажатие на текст открывало запись, а не выделяло её.
   Откуда запись — говорит цветная полоска слева: читается быстрее
   иконки и не занимает места в строке. */
.notes-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--container-bg-color);
}
.notes-card::before {
    content: '';
    position: absolute;
    left: 5px; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--notes-кант, var(--accent-color));
    opacity: 0.8;
}
/* Оттенки приглушённые: полоска должна различаться, а не спорить с текстом */
.notes-card[data-вид="своя"] { --notes-кант: var(--accent-color); }
.notes-card[data-вид="вопрос"] { --notes-кант: #e0a33f; }
.notes-card[data-вид="книга"] { --notes-кант: #4aa3ff; }
.notes-card[data-вид="атлас"] { --notes-кант: #46b98a; }
.notes-card[data-вид="объяснение"] { --notes-кант: #a97bd6; }
.notes-card[data-вид="аудио"] { --notes-кант: #e0708f; }
.notes-card.picked {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, var(--container-bg-color));
}
.notes-pick {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    cursor: pointer;
    padding: 0;
}
.notes-card.picked .notes-pick { color: var(--accent); }
.notes-pick i, .notes-pick svg { width: 15px; height: 15px; }
.notes-card-body { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.notes-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74em;
    color: var(--secondary-text-color);
}

.notes-card-src { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-card-when { flex: none; }
.notes-card-sub {
    margin-top: 3px;
    font-size: 0.74em;
    color: var(--secondary-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Своя мысль о цитате: она главнее выписанных слов, поэтому не бледнее
   их и отделена кантом */
.notes-card-mine {
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid var(--accent-color);
    font-size: 0.86em;
    line-height: 1.4;
    color: var(--text-color);
}
.notes-card-text {
    margin-top: 4px;
    font-size: 0.82em;
    line-height: 1.4;
    color: var(--text-color);
    overflow-wrap: anywhere;
    /* Две строки превью: полный текст читают в карточке, а списку важно
       уместить побольше записей */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-empty {
    margin: 40px auto 0;
    max-width: 320px;
    text-align: center;
    color: var(--secondary-text-color);
}
.notes-empty i, .notes-empty svg { width: 42px; height: 42px; opacity: 0.5; }
.notes-empty p { margin: 12px 0 0; font-size: 0.92em; line-height: 1.5; }

/* Полоса отмеченного: появляется, когда есть что делать */
.notes-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color);
    background: var(--container-bg-color);
    font-size: 0.86em;
    color: var(--secondary-text-color);
}
.notes-bar[hidden] { display: none; }
/* Счёт отмеченных не растягиваем: место нужно ленте кнопок */
.notes-bar span { flex: none; }
/* Кнопок семь, а экран узкий: лента с прокруткой честнее, чем семь
   сплющенных подписей в одну строку */
.notes-acts {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.notes-acts::-webkit-scrollbar { height: 0; }
.notes-act {
    flex: none;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
}
.notes-act.is-ghost {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--secondary-text-color);
}

/* Запись целиком: вопрос сверху, ответ под ним */
.notes-full { text-align: left; }
.notes-full-q {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-color);
}
.notes-full-text {
    font-size: 0.95em;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-color);
}


/* ============================================
   ДИАЛОГИ (SweetAlert2) — под вид приложения

   Библиотека приходит с CDN со своим оформлением: крупные красные кнопки в
   два ряда, широкие поля, своя типографика. Здесь она приводится к виду
   остального приложения: те же токены цвета, те же радиусы, кнопки в
   колонку под большой палец. Логику не трогаем — диалоги зовут из сотни
   мест, меняется только вид.

   Свои попапы (.grd-hero-popup, .swal-zonk-theme и прочие с собственным
   классом) остаются как были: их правила специфичнее.
   ============================================ */
.swal2-container { padding: 16px; }
.swal2-container.swal2-backdrop-show { background: rgba(10, 12, 18, 0.55); }

.swal2-popup {
    width: min(92vw, 430px);
    padding: 22px 20px 18px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--container-bg-color);
    color: var(--text-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    font-family: inherit;
}

.swal2-popup .swal2-title {
    padding: 0 0 4px;
    font-size: 1.18em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
}
.swal2-popup .swal2-html-container {
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--secondary-text-color);
    overflow-wrap: anywhere;
}

/* Кнопки — колонкой и во всю ширину: на телефоне в строку влезают только
   короткие слова, а «Перейти к источнику» переносилось в две строки и
   ломало ряд */
.swal2-popup .swal2-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 18px 0 0;
    padding: 0;
}
/* Селектор с контейнером: у приложения свои правила для любой кнопки, и по
   одному классу они перебивали и радиус, и заливку «тихих» кнопок */
.swal2-container .swal2-popup .swal2-styled {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 14px !important;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: none;
    transition: filter 0.15s ease, background 0.15s ease;
}
/* Обводку показываем только при ходьбе по клавишам: после тапа синяя рамка
   висела на кнопке и выглядела поломкой */
/* Библиотека рисует фокус толстой синей тенью — гасим её насовсем: после
   тапа она остаётся висеть на кнопке и читается как поломка */
.swal2-container .swal2-popup .swal2-styled:focus { box-shadow: none !important; outline: none; }
.swal2-container .swal2-popup .swal2-styled:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.swal2-container .swal2-popup .swal2-styled.swal2-confirm {
    background: var(--accent) !important;
    color: #fff !important;
}
.swal2-container .swal2-popup .swal2-styled.swal2-confirm:hover { filter: brightness(1.06); }
/* Второе действие — не соперник первому: рамка вместо заливки */
.swal2-container .swal2-popup .swal2-styled.swal2-deny {
    background: transparent !important;
    border-color: var(--border-color);
    color: var(--text-color) !important;
}
/* Отмена звучит тише всех: у неё нет даже рамки */
.swal2-container .swal2-popup .swal2-styled.swal2-cancel {
    background: transparent !important;
    border-color: transparent;
    color: var(--secondary-text-color) !important;
}
.swal2-container .swal2-popup .swal2-styled.swal2-cancel:hover { color: var(--text-color) !important; }
/* Опасное действие красим только когда оно и есть подтверждение */
.swal2-container .swal2-popup.swal2-icon-warning .swal2-styled.swal2-confirm,
.swal2-container .swal2-popup.swal2-icon-error .swal2-styled.swal2-confirm {
    background: var(--danger-color, #e5484d) !important;
}

/* Значок сверху: уменьшаем и приглушаем — он подсказка, а не плакат */
.swal2-popup .swal2-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-width: 3px;
}
.swal2-popup .swal2-icon .swal2-icon-content { font-size: 2.1em; }

/* Поля ввода — те же, что в остальном приложении */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    width: 100%;
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--input-bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95em;
    box-shadow: none;
}
.swal2-popup .swal2-textarea { min-height: 108px; line-height: 1.5; }
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus {
    border-color: var(--accent);
    box-shadow: none;
}
.swal2-popup .swal2-validation-message {
    margin: 10px 0 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--danger-color, #e5484d) 14%, transparent);
    color: var(--text-color);
    font-size: 0.86em;
}

/* Крестик — кружком в углу, как в остальных окнах приложения */
.swal2-popup .swal2-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--secondary-text-color);
    font-size: 1.5em;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.swal2-popup .swal2-close:hover {
    background: color-mix(in srgb, var(--text-color) 14%, transparent);
    color: var(--text-color);
}
.swal2-popup .swal2-close:focus { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 2px; }

/* Полоса таймера — тонкая, в цвет акцента */
.swal2-popup .swal2-timer-progress-bar { height: 3px; background: var(--accent); }

/* Появление: мягкий подъём вместо прыжка */
@keyframes qstSwalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.swal2-popup.swal2-show { animation: qstSwalIn 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .swal2-popup.swal2-show { animation: none; }
}

/* На узком экране лишние поля съедают текст */
@media (max-width: 380px) {
    .swal2-popup { padding: 18px 16px 14px; }
}


/* Столбики чтения за неделю: «за неделю 1 ч 33» не говорит, как эти минуты
   легли — каждый день понемногу или всё в одну ночь. */
.grd-spark {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 46px;
    margin-top: 12px;
}
.grd-spark-day {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
}
.grd-spark-day i {
    display: block;
    width: 100%;
    max-width: 22px;
    border-radius: 4px 4px 2px 2px;
    background: var(--accent);
    opacity: 0.85;
}
/* День без чтения — не пустое место, а тонкая черта: ряд остаётся рядом */
.grd-spark-day i.пусто { background: var(--border-color); opacity: 1; }
.grd-spark-day span {
    font-size: 0.64em;
    color: var(--secondary-text-color);
    line-height: 1;
}

/* Тихое напоминание в карточке книги: без баннеров и уведомлений */
.grd-book-idle, .grd-go-on-idle {
    display: block;
    margin-top: 2px;
    font-size: 0.72em;
    color: var(--secondary-text-color);
    opacity: 0.85;
}

/* ============================================================
   ПОДБОР КНИГИ («Не знаю, что почитать»)

   Разговор на весь экран: один вопрос за раз крупно, варианты —
   широкими строками под большой палец. Полоса сверху показывает
   пройденное из двенадцати: точного числа вопросов нет, оно зависит
   от ответов, и выдуманное «5 из 7» было бы враньём.
   ============================================================ */
.grd-pick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    color: var(--text-color);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
}
.grd-pick-btn i,
.grd-pick-btn svg { width: 1.1em; height: 1.1em; color: var(--accent); }

.gpick {
    position: fixed;
    inset: 0;
    z-index: 100040;
    display: none;
    flex-direction: column;
    background: var(--bg-color);
    color: var(--text-color);
}
.gpick.visible { display: flex; }
body.gpick-open { overflow: hidden; }

.gpick-top {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(10px + env(safe-area-inset-top, 0px));
}
.gpick-x {
    flex: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: var(--container-bg-color);
    color: var(--text-color);
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
}
.gpick-title { flex: 1; font-size: 1.05em; font-weight: 700; }
.gpick-step {
    flex: none;
    font-size: 0.82em;
    color: var(--secondary-text-color);
    font-variant-numeric: tabular-nums;
}
.gpick-line {
    flex: none;
    height: 3px;
    margin: 0 14px;
    border-radius: 3px;
    background: var(--border-color);
    overflow: hidden;
}
.gpick-line i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    transition: width 0.25s ease;
}

.gpick-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.gpick-q {
    margin: 4px 0 18px;
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
}
.gpick-opts { display: flex; flex-direction: column; gap: 10px; }
.gpick-opt {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--container-bg-color);
    color: var(--text-color);
    font-size: 0.98em;
    text-align: left;
    line-height: 1.35;
    cursor: pointer;
}
.gpick-opt:active { background: color-mix(in srgb, var(--accent) 12%, var(--container-bg-color)); }

.gpick-own { display: flex; gap: 8px; margin-top: 14px; }
.gpick-own .auth-input { flex: 1; margin: 0; }
.gpick-go {
    flex: none;
    width: 46px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
.gpick-go i, .gpick-go svg { width: 1.2em; height: 1.2em; }

.gpick-enough {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
}

/* ==================================================================
   ПОДБОР ПО ПОЛКЕ: КНИГИ, ОТ КОТОРЫХ ИДЁТ ЭНЕРГИЯ
   ------------------------------------------------------------------
   Раньше это была серая строчка внизу экрана, и её не замечали:
   непонятно, что за полка и откуда возьмётся вкус. Теперь под кнопкой
   стоят настоящие книги человека, от них к кнопке идут пунктирные
   линии, а по нажатию обложки рассыпаются и утекают по этим линиям.
   ================================================================== */
.gpick-shelf {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gpick-shelf[hidden] { display: none; }

/* Развилка между «ответить на вопросы» и «взять с полки». Без неё кнопка
   читалась как ещё один вариант ответа, стоящий в том же столбце. */
.gpick-or {
    margin-bottom: 34px;
    font-size: 1.6em;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--text-color);
    opacity: 0.85;
}

/* Объёмная кнопка: свет сверху, тень снизу, при нажатии вдавливается */
.gpick-shelf-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: min(100%, 300px);
    padding: 14px 20px;
    border: none;
    border-radius: 18px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 88%, #fff) 0%,
            var(--accent) 46%,
            color-mix(in srgb, var(--accent) 82%, #000) 100%);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -2px 4px rgba(0, 0, 0, 0.25),
        0 8px 18px color-mix(in srgb, var(--accent) 38%, transparent),
        0 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform .14s ease, box-shadow .14s ease;
}
.gpick-shelf-btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.35),
        0 3px 8px color-mix(in srgb, var(--accent) 28%, transparent);
}
.gpick-shelf-btn:disabled { cursor: default; }
.gpick-shelf-label { font-size: 1em; font-weight: 700; letter-spacing: 0.01em; }
.gpick-shelf-note { font-size: 0.76em; opacity: 0.85; font-weight: 500; }

/* Зона между кнопкой и книгами: в ней живут линии и осколки */
.gpick-flow {
    position: relative;
    width: 100%;
    padding-top: 46px;
}
.gpick-flow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.gpick-flow-line {
    fill: none;
    stroke: color-mix(in srgb, var(--accent) 60%, transparent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 9;
}
/* Пока энергия течёт, пунктир бежит к кнопке */
.gpick-shelf.is-flowing .gpick-flow-line {
    stroke: var(--accent);
    animation: gpick-поток .5s linear infinite;
}
/* И тут же гаснет: книги рассыпались, искры летят сами, а пустые дуги
   висели бы в воздухе над опустевшей полкой */
.gpick-shelf .gpick-flow-svg { transition: opacity .25s ease; }
.gpick-shelf.is-flowing .gpick-flow-svg { opacity: 0; }
@keyframes gpick-поток {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 11; }
}

.gpick-covers {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
}
.gpick-shelf-cover {
    position: relative;
    width: 58px;
    height: 82px;
    border-radius: 4px 7px 7px 4px;
    background-size: cover;
    background-position: center;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.35),
        inset 3px 0 6px rgba(0, 0, 0, 0.3);
    transform: rotate(var(--gpick-угол, 0deg));
    transition: opacity .25s ease, transform .25s ease;
}
/* Корешок: без него прямоугольник не читается как книга */
.gpick-shelf-cover::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.08));
}
.gpick-shelf-cover.is-gone { opacity: 0; transform: scale(0.9); }
.gpick-shelf-letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.5em;
    font-weight: 700;
    font-style: normal;
}
/* Под настоящей обложкой буква не нужна */
.gpick-shelf-cover.has-image .gpick-shelf-letter { display: none; }

/* Осколки летят поверх всего, но кликам не мешают */
.gpick-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.gpick-spark {
    position: absolute;
    display: block;
    border-radius: 2px;
    background-repeat: no-repeat;
    /* Искра, а не плитка: подсветка по краю собирает поток в единое течение */
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
    will-change: transform, opacity;
}

/* Ожидание ответа модели: три точки вместо пустого экрана */
.gpick-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 40px 0;
}
.gpick-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.35;
    animation: gpickDot 1.1s infinite ease-in-out;
}
.gpick-dot:nth-child(2) { animation-delay: 0.15s; }
.gpick-dot:nth-child(3) { animation-delay: 0.3s; }
.gpick-wait p {
    flex: 1 0 100%;
    margin: 14px 0 0;
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 0.92em;
}
@keyframes gpickDot {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .gpick-dot { animation: none; opacity: 0.6; }
    .gpick-line i { transition: none; }
}

/* Итог: книга — карточкой, где название крупнее автора, а строка «почему»
   объясняет выбор. Вся карточка — кнопка поиска. */
.gpick-books { display: flex; flex-direction: column; gap: 12px; }
.gpick-book {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--container-bg-color);
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
}
.gpick-book b { font-size: 1.02em; line-height: 1.3; }
.gpick-book span { font-size: 0.88em; color: var(--secondary-text-color); }
.gpick-book i {
    margin-top: 4px;
    font-style: normal;
    font-size: 0.86em;
    line-height: 1.4;
    color: var(--secondary-text-color);
}
.gpick-tail { margin-top: 16px; }

/* Карточка совета: слева обложка (пока книга не найдена — цветной корешок
   с буквой), справа название, автор, чем подходит и строка о том, есть ли
   книга в библиотеке. */
.gpick-cover {
    flex: none;
    /* Обложка приезжает двумя слоями с position: absolute — им нужен якорь */
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 52px;
    height: 74px;
    border-radius: 8px;
    background: linear-gradient(140deg, #6c7a89, #47535e);
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5em;
    font-weight: 700;
    padding-bottom: 6px;
    overflow: hidden;
}
.gpick-cover.has-image { font-size: 0; }
.gpick-about {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.gpick-book em {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-style: normal;
    font-size: 0.82em;
    font-weight: 700;
    color: var(--secondary-text-color);
}
.gpick-book.is-found em { color: var(--accent); }
/* Ненайденное не выкидываем: у источника книга может называться иначе, и
   нажатие всё равно ведёт в поиск — просто это видно заранее */
.gpick-book.is-missing { opacity: 0.72; }
.gpick-book.is-missing em { color: var(--secondary-text-color); }
.gpick-book.is-wait em { opacity: 0.7; }

/* Карточка книги открывается поверх подбора (её окно и так выше: 999999
   против 100040 у экрана подбора) — закрыл карточку, вернулся к советам. */


/* ── ПОТОК УРОКА: чтение вслух, автопереход, автотест ───────────────
   Панель висит под шапкой урока и открывается кнопкой с наушниками.
   Три переключателя врозь: кто-то слушает, но листает сам, кто-то
   листает молча, и связывать их в один режим неправильно. */
.lesson-flow-btn.звучит {
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
}
.lesson-flow-panel {
    position: absolute;
    top: 100%;
    right: 12px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 232px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--container-bg-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.lesson-flow-panel[hidden] { display: none; }
.lesson-flow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    font: inherit;
    font-size: 0.86em;
    text-align: left;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text-color);
    cursor: pointer;
}
.lesson-flow-row:active { background: var(--input-hover-bg-color); }
.lesson-flow-row b {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--secondary-text-color);
}
.lesson-flow-row.on { background: color-mix(in srgb, var(--accent-color) 14%, transparent); }
.lesson-flow-row.on b { color: var(--accent-color); }
/* Черта отделяет переключатели урока от настроек голоса: это разные
   вещи, и общий столбец кнопок читался одним списком */
.lesson-flow-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--border-color);
}
.lesson-flow-play {
    margin-top: 2px;
    padding: 9px 10px;
    font: inherit;
    font-size: 0.86em;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
    background: none;
    color: var(--accent-color);
    cursor: pointer;
}
/* Абзац, который читают прямо сейчас: на длинном уроке иначе не понять,
   где голос */
.lesson-speaking {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    border-radius: 6px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 16%, transparent);
}


/* ── ЗАМЕТКИ: МЕТКИ ──────────────────────────────────────────────────
   Вкладки делят записи по источнику, метки — по теме. Полоса появляется
   только когда метки есть: пустой ряд под вкладками читался поломкой. */
.notes-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 12px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.notes-tags::-webkit-scrollbar { display: none; }
.notes-tags[hidden] { display: none; }
.notes-tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font: inherit;
    font-size: 0.78em;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    cursor: pointer;
}
.notes-tag b {
    font-size: 0.86em;
    font-weight: 600;
    color: var(--secondary-text-color);
}
.notes-tag.on {
    border-color: color-mix(in srgb, var(--accent-color) 65%, transparent);
    background: color-mix(in srgb, var(--accent-color) 16%, var(--input-bg-color));
    color: var(--accent-color);
}
.notes-tag.on b { color: var(--accent-color); }
/* Срез — не метка: он про состояние записи, а не про её тему. Пунктир
   отличает его от меток, не крича цветом */
.notes-tag.is-slice {
    border-style: dashed;
    color: var(--secondary-text-color);
}
.notes-tag.is-slice.on { color: var(--accent-color); border-style: solid; }
.notes-card-tags,
.notes-full-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.notes-card-tags span,
.notes-full-tags span {
    padding: 2px 8px;
    font-size: 0.74em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
}
/* Сколько ещё отмечено в том же источнике */
.notes-full-near {
    margin-top: 10px;
    font-size: 0.82em;
    color: var(--secondary-text-color);
}

.notes-copy {
    font: inherit;
    font-size: 0.84em;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}


/* ── ЗАМЕТКИ: ПОРЯДОК, БУЛАВКА, СВОДКА ──────────────────────────── */
.notes-tools {
    display: flex;
    gap: 8px;
    padding: 0 12px 8px;
}
.notes-tool {
    font: inherit;
    font-size: 0.78em;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}
/* Кнопка-значок в ряду инструментов: подпись съела бы всю строку на
   телефоне, а значок понятен и без неё */
.notes-tool-icon {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
}
.notes-tool-icon i, .notes-tool-icon svg { width: 15px; height: 15px; }
/* Тем же порядком, что и лента вкладок: display у кнопки свой, и hidden
   без этой строки ничего не прячет */
.notes-tool-icon[hidden] { display: none; }

.notes-pin {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
}
.notes-pin i, .notes-pin svg { width: 15px; height: 15px; }
/* Закреплённая всплыла наверх — это должно быть видно, иначе кажется,
   что список перемешался сам собой */
.notes-card.pinned {
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
}
.notes-card.pinned .notes-pin { color: var(--accent-color); }
/* Связь в тексте: не синяя ссылка, а слово с подчёркиванием — она ведёт
   не наружу, а к другой своей записи */
.notes-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}
/* Идёт запись — микрофон должен гореть, иначе непонятно, слушают ли */
.notes-quick-btn.on {
    border-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
    color: var(--accent-color);
}

/* Найденное в списке: без подсветки карточка попадает в отбор, а чем
   именно — непонятно */
.notes-hit {
    padding: 0 1px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent-color) 30%, transparent);
    color: inherit;
}

.notes-sum ul { margin: 6px 0 0; padding-left: 18px; text-align: left; }
.notes-sum li { font-size: 0.88em; }
.notes-sum-dup { margin-top: 10px; color: var(--accent-color); }
/* Ответ модели прямо в окне сводки: второе окно поверх первого на телефоне
   не помещается */
.notes-sum-ai {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    font-size: 0.9em;
    line-height: 1.5;
    text-align: left;
    white-space: pre-wrap;
}
/* Похожие пары: две строки и кнопка. Список без отступа слева — маркеры
   здесь только сбивали бы, у каждой записи своя рамка */
.notes-sum-pairs { padding-left: 0 !important; list-style: none; }
.notes-sum-pairs li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.notes-sum-pairs i {
    font-style: normal;
    color: var(--secondary-text-color);
}
.notes-sum-join {
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 10px;
    font: inherit;
    font-size: 0.86em;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
    background: none;
    color: var(--accent-color);
    cursor: pointer;
}


/* Картинка есть, но она на этом устройстве: пометка мелкая, зато честная —
   иначе человек ждал бы снимок на втором телефоне */
.notes-card-img {
    margin-top: 4px;
    font-size: 0.72em;
    color: var(--secondary-text-color);
}
/* Снимок в окне записи: во всю ширину, по нажатию открывается крупно */
.notes-full-img {
    display: block;
    width: 100%;
    max-height: 40vh;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 12px;
    cursor: zoom-in;
}

/* Метки на плотной карточке мельче: они подпись, а не содержание */
.notes-card-tags { margin-top: 4px; }
.notes-card-tags span { font-size: 0.7em; padding: 1px 6px; }