/* CSS-переменные для тем */
:root {
    --bg-color: #f4f4f4;
    --container-bg-color: #fff;
    --text-color: #333;
    --secondary-text-color: #777;
    --heading-color: #333;
    --border-color: #ddd;
    --dashed-border-color: #eee;
    --input-bg-color: #f9f9f9;
    --input-hover-bg-color: #e9e9e9;
    --input-border-color: #ddd;
    --input-hover-border-color: #ccc;
    /* --- НАЧАЛО ИЗМЕНЕНИЙ --- */
    --button-primary-bg: #2c3e50; /* Строгий темно-серый вместо синего */
    --button-primary-hover-bg: #34495e; /* Более светлый оттенок при наведении */
    /* --- КОНЕЦ ИЗМЕНЕНИЙ --- */
    --button-primary-text: white;
    --button-secondary-bg: #6c757d;
    --button-secondary-hover-bg: #5a6268;
    --button-secondary-text: white;
    --button-secondary-border: #6c757d;
    --button-success-bg: #28a745;
    --button-success-hover-bg: #218838;
    --feedback-correct-bg: #d4edda;
    --feedback-correct-text: #155724;
    --feedback-correct-border: #c3e6cb;
    --feedback-incorrect-bg: #f8d7da;
    --feedback-incorrect-text: #721c24;
    --feedback-incorrect-border: #f5c6cb;
    --shadow-color: rgba(0,0,0,0.1);
    --shadow-light-color: rgba(0,0,0,0.05);
    --shadow-hover-color: rgba(0,0,0,0.08);
    /* --- НАЧАЛО ИЗМЕНЕНИЙ --- */
    --timer-text-color: #2c3e50; /* Таймер теперь тоже темно-серый */
    --quick-nav-current-bg: #2c3e50; /* Выбранный вопрос в навигации */
    /* --- КОНЕЦ ИЗМЕНЕНИЙ --- */
    --quick-nav-current-text: white;
    --theme-toggle-border: #ccc;
    --theme-toggle-hover-bg: #f0f0f0;
    --triggered-word-color: red;
    --primary: #2c3e50;
    --accent: #e74c3c;
}


body.dark-mode {
    --bg-color: #121212;
    --container-bg-color: #1e1e1e;
    --text-color: #e0e0e0;
    --secondary-text-color: #aaa;
    --heading-color: #f1f1f1;
    --border-color: #444;
    --dashed-border-color: #333;
    --input-bg-color: #2a2a2a;
    --input-hover-bg-color: #383838;
    --input-border-color: #444;
    --input-hover-border-color: #555;
    /* --- НАЧАЛО ИЗМЕНЕНИЙ --- */
    --button-primary-bg: #4f5b66; /* Мягкий серо-голубой вместо яркого синего */
    --button-primary-hover-bg: #65737e; /* Чуть светлее при наведении */
    /* --- КОНЕЦ ИЗМЕНЕНИЙ --- */
    --button-primary-text: #f0f0f0;
    --button-secondary-bg: #495057;
    --button-secondary-hover-bg: #343a40;
    --button-secondary-text: #f8f9fa;
    --button-secondary-border: #495057;
    --button-success-bg: #198754;
    --button-success-hover-bg: #157347;
    --feedback-correct-bg: #1c3a24;
    --feedback-correct-text: #a3d9b1;
    --feedback-correct-border: #2e5d3a;
    --feedback-incorrect-bg: #4a1e22;
    --feedback-incorrect-text: #f5c6cb;
    --feedback-incorrect-border: #6b2f34;
    --shadow-color: rgba(0,0,0,0.4);
    --shadow-light-color: rgba(0,0,0,0.2);
    --shadow-hover-color: rgba(0,0,0,0.3);
    /* --- НАЧАЛО ИЗМЕНЕНИЙ --- */
    --timer-text-color: #87ceeb; /* Небесно-голубой для таймера */
    --quick-nav-current-bg: #4f5b66; /* Выбранный вопрос в навигации */
    /* --- КОНЕЦ ИЗМЕНЕНИЙ --- */
    --quick-nav-current-text: #f0f0f0;
    --theme-toggle-border: #555;
    --theme-toggle-hover-bg: #333;
    --triggered-word-color: #ff4d4d;
}



body.claude-mode {
    --bg-color: #f2ede8; /* Более глубокий и теплый бежевый фон */
    --container-bg-color: #f9f6f2; /* Контейнер чуть светлее, создавая эффект слоя */
    --text-color: #4a443e; /* Мягкий, почти коричневый текст вместо черного */
    --secondary-text-color: #8a7d70; /* Приглушенный вторичный текст */
    --heading-color: #3d352f; /* Заголовки чуть темнее основного текста */
    --border-color: #e0dace; /* Теплый цвет рамок */
    --dashed-border-color: #e8e3dc;
    --input-bg-color: #ffffff; /* Поля ввода остаются светлыми для контраста */
    --input-hover-bg-color: #f5f2ee;
    --input-border-color: #d9d3cb;
    --input-hover-border-color: #c9c2ba;
    --button-primary-bg: #8a7d70; /* Основная кнопка в цвет вторичного текста */
    --button-primary-hover-bg: #6e6459; /* Ее более темный вариант при наведении */
    --button-primary-text: #ffffff;
    --button-secondary-bg: #e0dace; /* Вторичная кнопка в цвет рамок */
    --button-secondary-hover-bg: #d4ccc1;
    --button-secondary-text: #4a443e;
    --button-secondary-border: #e0dace;
    --button-success-bg: #5a8e6a; /* Более приглушенный зеленый */
    --button-success-hover-bg: #4a7558;
    --feedback-correct-bg: #e1efe6; /* Светло-зеленая обратная связь */
    --feedback-correct-text: #3c654a;
    --feedback-correct-border: #d0e4d7;
    --feedback-incorrect-bg: #f8e5e6; /* Светло-красная обратная связь */
    --feedback-incorrect-text: #8b454d;
    --feedback-incorrect-border: #f1d8da;
    --shadow-color: rgba(90, 80, 70, 0.1); /* Тень на основе теплых тонов */
    --shadow-light-color: rgba(90, 80, 70, 0.05);
    --shadow-hover-color: rgba(90, 80, 70, 0.12);
    --timer-text-color: #6e6459;
    --quick-nav-current-bg: #8a7d70;
    --quick-nav-current-text: #ffffff;
    --theme-toggle-border: #c9c2ba;
    --theme-toggle-hover-bg: #f5f2ee;
    --triggered-word-color: #c54848;
}





/* --- Глубокая ночь --- */
body.synthwave-mode {
    --bg-color: #0F172A; /* Очень темный синий */
    --container-bg-color: #1E293B;
    --text-color: #E2E8F0;
    --secondary-text-color: #94A3B8;
    --heading-color: #38BDF8; /* Небесно-голубой */
    --border-color: #334155;
    --dashed-border-color: #475569;
    --input-bg-color: #1E293B;
    --input-hover-bg-color: #334155;
    --input-border-color: #475569;
    --input-hover-border-color: #94A3B8;
    --button-primary-bg: #14B8A6; /* Холодный бирюзовый (teal) */
    --button-primary-hover-bg: #2DD4BF;
    --button-primary-text: #FFFFFF;
    --button-secondary-bg: #475569;
    --button-secondary-hover-bg: #64748B;
    --button-secondary-text: #E2E8F0;
    --button-success-bg: #22C55E; /* Более спокойный зеленый */
    --button-success-hover-bg: #4ADE80;
    --feedback-correct-bg: #1F2E2A;
    --feedback-correct-text: #6EE7B7;
    --feedback-correct-border: #3A735E;
    --feedback-incorrect-bg: #3A232A;
    --feedback-incorrect-text: #F87171;
    --feedback-incorrect-border: #804343;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-light-color: rgba(0, 0, 0, 0.2);
    --shadow-hover-color: rgba(0, 0, 0, 0.4);
    --timer-text-color: #38BDF8;
    --quick-nav-current-bg: #14B8A6;
    --quick-nav-current-text: #FFFFFF;
    --theme-toggle-border: #475569;
    --theme-toggle-hover-bg: #334155;
    --triggered-word-color: #FACC15; /* Желтый для триггеров */
    --accent: #38BDF8;
}



/* Общие стили */
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

.app-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    align-items: center;
    padding: 10px;
}

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

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

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

.header-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Мы убираем отступ отсюда, чтобы он не влиял на чат */
}

/* А здесь создаем новое, более точное правило ТОЛЬКО для главного экрана */
.container > .header-controls {
    margin-bottom: 50px;
}

.header-controls h1 {
    margin: 0;
    text-align: left;
    font-size: 1.5em;
    line-height: 1.2;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .header-controls h1 {
        font-size: 1.8em;
    }
}

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

#searchWebButton,
#themeToggle,
#quickModeToggle,
#triggerWordToggle,
#copyQuestionBtnQuiz,
#languageToggle,
#chatToggle {
    background: none;
    border: 1px solid var(--theme-toggle-border);
    color: var(--text-color);
    font-size: 1.3em;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
    flex-shrink: 0;
}

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

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

body.dark-mode #quickModeToggle.active,
body.dark-mode #triggerWordToggle.active {
    background-color: var(--button-primary-hover-bg);
}

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;
    padding: 15px;
    border: 2px dashed var(--border-color);
    border-radius: 5px;
    text-align: center;
}

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

textarea,
input[type="text"],
input[type="number"],
input[type="file"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#fileInput {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

#fileInput::-webkit-file-upload-button {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
    white-space: nowrap;
}

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

#recentFilesArea {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--dashed-border-color);
}

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

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

#recentFilesList li {
    padding: 8px 10px;
    margin-bottom: 5px;
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    word-break: break-all;
}

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

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

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

#quizArea > #questionContainer {
    flex-grow: 1;
    overflow-y: auto;
}

#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);
}

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

.settings-group label {
    display: inline-block;
    margin-right: 10px;
    font-weight: normal;
    word-break: break-word;
}

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

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

.settings-group input[type="number"].range-input {
    width: 60px;
    padding: 5px;
    margin-right: 5px;
    text-align: center;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.settings-group input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
    accent-color: var(--button-primary-bg);
}

#generateCheatSheetButton,
#chooseAnotherFileButton {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
    width: 100%;
}

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

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

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

#cheatSheetOutput {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-family: monospace;
    border: 1px solid var(--input-border-color);
    background-color: var(--container-bg-color);
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.4;
}

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

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

#backToSettingsButton,
#backToFileUploadButton,
#backToSearchButton {
     background-color: var(--button-secondary-bg);
     color: var(--button-secondary-text);
     border: 1px solid var(--button-secondary-border);
}

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

#timerDisplay {
    text-align: right;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--timer-text-color);
    margin-bottom: 10px;
}

#questionContainer {
    margin-bottom: 20px;
}

#questionText {
    font-size: 1.1em;
    margin-bottom: 20px;
    line-height: 1.5;
    text-align: left;
    word-break: break-word;
}

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

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

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

@media (min-width: 768px) {
    #questionText {
        font-size: 1.2em;
        margin-bottom: 25px;
        line-height: 1.6;
    }
}

#answerOptions {
    list-style: none;
    padding: 0;
    margin: 0;
}

#answerOptions li {
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    padding: 10px 12px;
    font-size: 0.95em;
    margin-bottom: 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 1px 2px var(--shadow-light-color);
    line-height: 1.4;
    word-break: break-word;
}

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

#answerOptions li:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--input-hover-border-color);
    box-shadow: 0 2px 4px var(--shadow-hover-color);
}

#answerOptions li.correct {
    background-color: var(--feedback-correct-bg);
    border-color: var(--feedback-correct-border);
    color: var(--feedback-correct-text);
    font-weight: bold;
}

#answerOptions li.incorrect {
    background-color: var(--feedback-incorrect-bg);
    border-color: var(--feedback-incorrect-border);
    color: var(--feedback-incorrect-text);
    font-weight: bold;
}

#answerOptions li.actual-correct {
    background-color: var(--feedback-correct-bg);
    border: 2px solid var(--feedback-correct-text);
    color: var(--feedback-correct-text);
}

body.dark-mode #answerOptions li.actual-correct {
     border: 2px solid var(--feedback-correct-bg);
}

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

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

#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 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 10px;
}

#questionNavigationControls button {
    flex-grow: 0;
    flex-basis: auto;
    padding-left: 25px;
    padding-right: 25px;
}

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

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

#finishTestButton.finish-test-early {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border: 1px solid var(--feedback-incorrect-border);
    padding: 10px 25px;
    width: auto;
    display: inline-block;
}

body.dark-mode #finishTestButton.finish-test-early {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border-color: var(--feedback-incorrect-border);
}

#finishTestButton.finish-test-early:hover {
    opacity: 0.8;
}

button {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.95em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    line-height: 1.3;
}

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

button:hover {
    background-color: var(--button-primary-hover-bg);
}

button:disabled {
    background-color: var(--secondary-text-color);
    color: var(--container-bg-color);
    cursor: not-allowed;
    opacity: 0.7;
}

#startQuizButton,
#downloadErrorsButton,
#reviewErrorsButton {
    background-color: var(--button-success-bg);
}

#startQuizButton:hover,
#downloadErrorsButton:hover,
#reviewErrorsButton:hover {
    background-color: var(--button-success-hover-bg);
}

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

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

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

#reviewErrorsButton:hover {
    background-color: var(--button-primary-hover-bg);
}

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

#score p {
    margin: 5px 0;
}

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

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

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

#quickNavButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
}

.quick-nav-btn {
    min-width: 28px;
    padding: 4px 6px;
    font-size: 0.85em;
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
    border-radius: 3px;
}

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

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

.quick-nav-btn.current {
    background-color: var(--quick-nav-current-bg);
    color: var(--quick-nav-current-text);
    border-color: var(--quick-nav-current-bg);
    font-weight: bold;
}

.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);
}

#resultsArea {
    text-align: center;
    margin-top: 30px;
}

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

#feedbackDownloadArea,
#errorReviewArea,
#triggeredQuizDownloadArea {
    margin-top: 15px;
    margin-bottom: 10px;
}

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

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

.hidden {
    display: none !important;
}

footer {
    width: 100%;
    text-align: center;
    padding: 15px 0;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    font-size: 0.85em;
    color: var(--secondary-text-color);
    background-color: var(--container-bg-color);
}

body.dark-mode footer {
    background-color: var(--container-bg-color);
}

/* Стили для GRADUS */
#gradusFolderList {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

#gradusFolderList li {
    padding: 12px 15px;
    background-color: var(--container-bg-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    word-break: break-word;
    display: flex;
    align-items: center;
}

#gradusFolderList li:last-child {
    border-bottom: none;
}

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

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

#gradusFolderList .loading-placeholder {
    text-align: center;
    padding: 20px;
    color: var(--secondary-text-color);
    font-style: italic;
}

#gradusBreadcrumbs {
    padding: 8px 10px;
    margin-bottom: 10px;
    background-color: var(--input-bg-color);
    border-radius: 4px;
    font-size: 0.9em;
    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.file-item:before {
    content: '📝';
    margin-right: 12px;
    font-size: 1.3em;
}

/* Стили для ПОИСКА */
#searchContainer {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px dashed var(--dashed-border-color);
}

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

#searchQueryInput {
    padding: 8px;
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    margin-bottom: 10px;
}

#searchButton {
    width: 100%;
}

/* Стили для ВЫПАДАЮЩЕГО МЕНЮ */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--container-bg-color);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px var(--shadow-color);
    z-index: 1;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

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

.dropdown-content.show {
    display: block;
}


/* ===== ГИБРИДНЫЕ СТИЛИ ЧАТА (Красивый + Функциональный) ===== */

/* Основные переменные для чата */
:root {
    --chat-primary: #2c3e50;
    --chat-accent: #e74c3c;
    --chat-success: #27ae60;
    --chat-warning: #f39c12;
    --chat-info: #3498db;
    /* ИЗМЕНЕНИЕ: Пузырь сообщения теперь использует основной цвет темы */
    --chat-bubble-mine: var(--button-primary-bg);
    --chat-bubble-other: #f8f9fa;
    --chat-sidebar-width: 280px;
}

body.dark-mode {
    /* ИЗМЕНЕНИЕ: Здесь тоже самое для темной темы */
    --chat-bubble-mine: var(--button-primary-bg);
    --chat-bubble-other: #343a40;
}

/* ===== СИСТЕМА АУТЕНТИФИКАЦИИ ===== */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}

.auth-modal {
    background: var(--container-bg-color);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 420px;
    width: 90%;
    text-align: center;
    animation: slideUp 0.4s ease;
}

.auth-tabs {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.auth-tab {
    flex: 1;
    padding: 15px 20px;
    background: var(--input-bg-color);
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--secondary-text-color);
    transition: all 0.3s ease;
    font-size: 1rem;
}

.auth-tab.active {
    background: var(--button-primary-bg);
    color: white;
    transform: translateY(-2px);
}

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

.auth-form {
    display: none;
    animation: fadeIn 0.3s ease;
}

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

.auth-input {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--input-border-color);
    border-radius: 10px;
    margin-bottom: 15px;
    font-size: 1rem;
    background: var(--input-bg-color);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.auth-input:focus {
    outline: none;
    border-color: var(--button-primary-bg);
    box-shadow: 0 0 0 4px rgba(0,123,255,0.1);
    transform: translateY(-1px);
}

.auth-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--button-primary-bg), var(--button-primary-hover-bg));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,123,255,0.3);
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,123,255,0.4);
}

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

/* ===== ОСНОВНОЙ ЧАТ ===== */
.advanced-chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}

.advanced-chat-modal {
    background: var(--container-bg-color);
    width: 95%;
    max-width: 1200px;
    height: 90%;
    max-height: 800px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5);
    animation: slideUp 0.4s ease;
}


/* --- И ЗАМЕНИТЕ ЕГО НА ЭТОТ --- */
/* Header */
.advanced-chat-header {
    padding: 10px 25px; /* ИЗМЕНЕНИЕ: Уменьшили вертикальные отступы */
    background: var(--container-bg-color); 
    color: var(--text-color); 
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color); 
}

.chat-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chat-title h3 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
    text-align: left;
}

.unread-badge {
    background: var(--chat-accent);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    animation: pulse 2s infinite;
}

.header-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

#currentUser {
    /* ИЗМЕНЕНИЕ: Используем адаптивные цвета темы */
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1em;
    position: relative;
}

#currentUser:hover {
    /* ИЗМЕНЕНИЕ: Используем адаптивные цвета темы */
    background: var(--input-hover-bg-color);
    border-color: var(--input-hover-border-color);
    transform: scale(1.05);
}

.header-controls button {
    /* ИЗМЕНЕНИЕ: Используем адаптивные цвета темы */
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1em;
}

.header-controls button:hover {
    /* ИЗМЕНЕНИЕ: Используем адаптивные цвета темы */
    background: var(--input-hover-bg-color);
    border-color: var(--input-hover-border-color);
    transform: scale(1.05);
}

.notification-toggle.active {
    background: rgba(255,255,255,0.3);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.close-btn {
    font-size: 1.5em !important;
    padding: 5px 10px !important;
    line-height: 1;
}

/* Main body */
.advanced-chat-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar */
.chat-sidebar {
    width: var(--chat-sidebar-width);
    background: var(--input-bg-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    height: 100%;
}

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

.sidebar-section h4 {
    margin: 0 0 15px 0;
    color: var(--text-color);
    font-size: 1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== НОВЫЕ ТАБЫ В САЙДБАРЕ ===== */
.tabs-list {
    margin-bottom: 15px;
}

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

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

.tab-item.active {
    background: linear-gradient(135deg, var(--button-primary-bg), var(--button-primary-hover-bg));
    color: white;
    border-color: var(--button-primary-bg);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,123,255,0.3);
}

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

.tab-icon {
    font-size: 1.2em;
    margin-right: 8px;
}

.tab-name {
    flex: 1;
    font-weight: 500;
}

.tab-counter {
    background: var(--chat-accent);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    animation: pulse 2s infinite;
}

.tab-item.active .tab-counter {
    background: rgba(255,255,255,0.9);
    color: var(--button-primary-bg);
}

/* Channels */
.channels-list {
    margin-bottom: 15px;
}

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

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

.channel-item.active {
    background: var(--chat-success);
    color: white;
    border-color: var(--chat-success);
    font-weight: 600;
}

.channel-name {
    font-weight: 500;
}

.create-btn {
    width: 100%;
    padding: 10px;
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px dashed var(--button-secondary-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9em;
}

.create-btn:hover {
    background: var(--button-secondary-hover-bg);
    border-style: solid;
}

/* Online users */
.online-users-list {
    overflow-y: auto;
}

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

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

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

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

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

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

.status-indicator.invisible {
    background: #95a5a6;
}

.username {
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Main content area */
.chat-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
 

/* Top bar */
.chat-top-bar {
    padding: 10px 20px; /* ИЗМЕНЕНИЕ: Уменьшили вертикальные отступы */
    background: var(--container-bg-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 15px;
    align-items: center;
    flex-shrink: 0;
}

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

#chatSearchInput:focus {
    border-color: var(--button-primary-bg);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* Message area */
.message-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-color);
    scroll-behavior: smooth;
    display: flex; /* <-- ДОБАВЛЕНО */
    flex-direction: column; /* <-- ДОБАВЛЕНО */
}

/* Пустое состояние */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--secondary-text-color);
    font-size: 1.1em;
    text-align: center;
}

.empty-state::before {
    content: "💭";
    font-size: 3em;
    margin-bottom: 15px;
    opacity: 0.7;
}

/* Messages */
.message {
    margin-bottom: 20px;
    max-width: 85%;
    position: relative;
    animation: messageSlideIn 0.3s ease;
}

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

.message.other {
    margin-right: auto;
    align-self: flex-start;
}

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

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

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

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

.timestamp {
    font-size: 0.9em;
    opacity: 0.8;
}

.message-content {
    background: var(--container-bg-color);
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color);
    word-wrap: break-word;
    line-height: 1.4;
    position: relative;
    white-space: pre-wrap; 
}

.message.mine .message-content {
    background: linear-gradient(135deg, var(--chat-bubble-mine), #0056b3);
    color: white;
    border-color: var(--chat-bubble-mine);
    border-bottom-right-radius: 6px;
}

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

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

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

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

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

/* Вопросы */
.question-bubble {
    background: linear-gradient(135deg, #fff9e6, #fff3cd);
    border: 2px solid var(--chat-warning);
    padding: 20px;
    border-radius: 15px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.2);
    animation: messageSlideIn 0.3s ease;
}

body.dark-mode .question-bubble {
    background: linear-gradient(135deg, #3e3820, #4a4226);
    border-color: #a68b3e;
}

/* --- НОВЫЙ КОД: Стили для вопросов в теме "Глубокая ночь" --- */
body.synthwave-mode .question-bubble {
    /* Используем фон контейнера из этой темы */
    background: var(--container-bg-color); 
    /* Делаем акцентную рамку в цвет заголовков */
    border: 2px solid var(--accent); 
    /* Добавляем легкое неоновое свечение */
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.1); 
}

/* Также стилизуем правильный ответ внутри вопроса */
body.synthwave-mode .option-vote-btn.correct {
    background-color: rgba(34, 197, 94, 0.15); /* Прозрачный зеленый */
    border-color: var(--button-success-bg);
}

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

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

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

.vote-indicator {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--chat-accent);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: bold;
    border: 2px solid var(--container-bg-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.question-content {
    flex: 1;
}

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

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

.question-actions button {
    padding: 8px 15px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.question-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

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

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

/* Избранное */
.favorite-item {
    background: var(--container-bg-color);
    border: 2px solid var(--chat-warning);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    animation: messageSlideIn 0.3s ease;
}

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

.remove-favorite {
    background: linear-gradient(135deg, var(--chat-accent), #c0392b);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.remove-favorite:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}



/* ===== НОВЫЕ СТИЛИ ДЛЯ ОБЛАСТИ ВВОДА (v3) ===== */
.chat-input-area {
    background: var(--input-bg-color);
    border-top: 1px solid var(--border-color);
    padding: 10px 15px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Расстояние между верхними кнопками и полем ввода */
}

/* Контейнер для верхних кнопок (смайлы, вопрос) */
.input-actions-top {
    display: flex;
    gap: 8px;
}

/* --- НОВЫЙ КОД (ЗАМЕНИТЬ СТАРЫЙ) --- */
.input-action-btn {
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    border-radius: 8px;
    /* Делаем кнопки квадратными для единообразия */
    width: 40px;
    height: 40px;
    font-size: 1.3em; /* Немного увеличим иконки */
    cursor: pointer;
    transition: all 0.2s ease;
    /* Центрируем иконку внутри кнопки */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Убираем лишние отступы */
}

/* Добавляем стиль для активной кнопки "Закрепить" */
#togglePinnedBtn.active {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
}
/* --- КОНЕЦ НОВОГО КОДА --- */

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

/* Основной контейнер для textarea и кнопки "Отправить" */
.input-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

#chatInput {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--container-bg-color);
    color: var(--text-color);
    outline: none;
    resize: none;
    min-height: 44px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 1em;
    line-height: 1.4;
    transition: all 0.2s ease;
}

#chatInput:focus {
    border-color: var(--button-primary-bg);
}

.advanced-send-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.5em;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--button-primary-bg), var(--button-primary-hover-bg));
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.advanced-send-btn:hover {
    transform: scale(1.1);
}



.advanced-send-btn:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 6px 20px rgba(0,123,255,0.4);
}

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

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

.modal-content {
    background: var(--container-bg-color);
    padding: 25px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.4);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.modal-content h3 {
    margin: 0 0 20px 0;
    color: var(--heading-color);
}

.modal-content input,
.modal-content textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--input-border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    background: var(--input-bg-color);
    color: var(--text-color);
    outline: none;
    transition: all 0.2s ease;
}

.modal-content input:focus,
.modal-content textarea:focus {
    border-color: var(--button-primary-bg);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.modal-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.modal-buttons button:first-child {
    background: var(--button-primary-bg);
    color: white;
}

.modal-buttons button:first-child:hover {
    background: var(--button-primary-hover-bg);
}

.modal-buttons button:last-child {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.modal-buttons button:last-child:hover {
    background: var(--button-secondary-hover-bg);
}



/* ===== УЛУЧШЕННЫЕ СТИЛИ ДЛЯ ПИКЕРА ЭМОДЗИ (v3) ===== */
emoji-picker {
    /* Позиционируем пикер НАД областью ввода */
    z-index: 2100;

    /* Скрываем пикер по умолчанию */
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}

/* Когда пикер должен быть виден */
emoji-picker.visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
    emoji-picker {
        /* На маленьких экранах делаем пикер на всю ширину */
        width: calc(100% - 30px);
        left: 15px;
    }
}



/* Значок уведомлений в кнопке чата */
.chat-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--chat-accent);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: bold;
    border: 2px solid var(--container-bg-color);
    animation: pulse 2s infinite;
}

#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);
    }
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Скроллбары */
.message-area::-webkit-scrollbar,
.chat-sidebar::-webkit-scrollbar,
.online-users-list::-webkit-scrollbar {
    width: 6px;
}

.message-area::-webkit-scrollbar-track,
.chat-sidebar::-webkit-scrollbar-track,
.online-users-list::-webkit-scrollbar-track {
    background: var(--input-bg-color);
    border-radius: 3px;
}

.message-area::-webkit-scrollbar-thumb,
.chat-sidebar::-webkit-scrollbar-thumb,
.online-users-list::-webkit-scrollbar-thumb {
    background: var(--secondary-text-color);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.message-area::-webkit-scrollbar-thumb:hover,
.chat-sidebar::-webkit-scrollbar-thumb:hover,
.online-users-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-color);
}

/* ===== АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (ИСПРАВЛЕННАЯ) ===== */





/* Дополнительные стили для кнопок-ответов в вопросах */
.question-options-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.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);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

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

/* Кнопка с правильным ответом */
.option-vote-btn.correct {
    border-color: var(--chat-success);
    background-color: #e8f5e9; /* Светло-зеленый фон */
}

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 {
    background-color: var(--button-primary-bg);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    min-width: 22px;
    text-align: center;
}

/* Подсветка варианта, за который проголосовал пользователь */
.option-vote-btn.voted-by-user {
    border-color: var(--chat-info);
    border-width: 2px;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}

body.dark-mode .option-vote-btn.voted-by-user {
    border-color: var(--chat-info);
    background-color: rgba(52, 152, 219, 0.15);
}

/* Стили для сообщения-ссылки на вопрос */
.message.question-link-bubble .message-content {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

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

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

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

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

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

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

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

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

/* Контекст ответа над сообщением */
.reply-context {
    background: var(--input-bg-color);
    padding: 6px 10px;
    margin-bottom: -8px;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
    font-size: 0.85em;
    max-width: 80%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.reply-context:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

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

.message.mine .reply-context:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

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

.reply-text {
    color: #5a6268;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

/* Стили ответа в темной теме */
body.dark-mode .reply-context {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

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

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

/* Панель ответа над полем ввода */
.replying-to-panel {
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: fadeIn 0.3s;
}

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

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

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

/* Индикатор редактирования */
.edited-indicator {
    font-size: 0.8em;
    color: var(--secondary-text-color);
    margin-left: 5px;
}


/* === НАЧАЛО ИСПРАВЛЕНИЙ: Контекстное меню и пикер реакций (v2) === */
.message-actions-toolbar {
    display: flex;
    gap: 8px;
    position: absolute;
    /* Позиционируем относительно сообщения */
    top: -15px; /* Сдвигаем немного вверх */
    background: var(--container-bg-color);
    padding: 4px 8px;
    border-radius: 15px;
    box-shadow: 0 2px 8px var(--shadow-color);
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

/* Для сообщений слева (other) - меню выравнивается по левому краю */
.message.other .message-actions-toolbar {
    left: 10px;
    right: auto;
}

/* Для сообщений справа (mine) - меню выравнивается по правому краю */
.message.mine .message-actions-toolbar {
    right: 10px;
    left: auto;
}

.message:hover .message-actions-toolbar {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-5px); /* Добавляем эффект "всплытия" */
}

.message-actions-toolbar button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    padding: 3px;
    color: var(--secondary-text-color);
    transition: color 0.2s ease;
}

.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: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
}

.reaction-badge:hover {
    transform: scale(1.1);
}

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






/* Стили для пикера реакций */
.reaction-picker {
    position: fixed; /* Используем fixed для надежного позиционирования в окне */
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 8px;
    display: flex;
    gap: 4px;
    box-shadow: 0 5px 20px var(--shadow-color);
    z-index: 2500;
    
    /* Анимация появления */
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    animation: picker-appear 0.2s ease forwards;
}

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

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

.reaction-picker span:hover {
    background: var(--input-hover-bg-color);
    transform: scale(1.2);
}
/* === КОНЕЦ ИСПРАВЛЕНИЙ === */

/* Стиль для кнопки "+" в быстрой панели */
.reaction-picker-add-btn {
    padding: 5px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.6em; /* Размер как у эмодзи */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--input-bg-color);
    border: 1px dashed var(--border-color);
    color: var(--secondary-text-color);
    transition: all 0.2s ease;
    line-height: 1;
}

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

/* Стиль для полноэкранного пикера, когда он вызван для реакций */
.full-reaction-picker {
    z-index: 2600; /* Выше чем .reaction-picker */
    animation: picker-appear 0.2s ease forwards;

    /* ДОБАВЛЕНО: Эти стили переопределяют базовые стили 'emoji-picker' */
    visibility: visible;
    opacity: 0; /* Анимация начнется с этого значения */
    position: fixed; /* Обязательно для позиционирования в окне */
    bottom: auto; /* Сбрасываем 'bottom' от базового стиля, чтобы он не мешал */
}

/* Анимация подсветки для прокрутки к сообщению */
@keyframes highlight-fade {
    from { background-color: rgba(255, 255, 0, 0.5); }
    to { background-color: transparent; }
}

.message.highlighted,
.question-bubble.highlighted {
    animation: highlight-fade 2.5s ease-out;
}

/* Стили для кнопки удаления вопроса */
.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: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--container-bg-color);
    border-radius: 8px;
    box-shadow: 0 8px 25px var(--shadow-color);
    border: 1px solid var(--border-color);
    z-index: 2100;
    overflow: hidden;
    animation: fadeIn 0.2s;
    min-width: 180px;
}

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

.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 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.search-results-header h2 {
    margin: 0;
    text-align: left;
    flex-grow: 1;
    color: var(--primary);
}

.search-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    margin-top: 20px;
    margin-bottom: 15px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.nav-arrow {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text)
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrow:hover:not(:disabled) {
    background: var(--primary);
    transform: scale(1.1);
}

.nav-arrow:disabled {
    background-color: #ced4da;
    cursor: not-allowed;
    opacity: 0.7;
}

.result-counter {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--dark);
}

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

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

.result-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    animation: fadeIn 0.5s ease;
}

.result-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.result-card-content {
    padding: 20px;
}

.question-text-detail {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 15px;
    line-height: 1.5;
}

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

.answer-option {
    padding: 12px 15px;
    border-radius: 8px;
    background: #f8f9fa;
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid #e0e0e0;
}

.answer-option.correct {
    background-color: #d4edda;
    color: #155724;
    font-weight: bold;
    border-color: #c3e6cb;
}

.provider-tag {
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    background: #e9ecef;
    color: #495057;
}

.relevance-tag {
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    background-color: var(--button-success-bg);
    color: var(--button-primary-text);
}




/* --- ОБНОВЛЕННЫЙ КОД --- */
/* ===== СТИЛИ ДЛЯ КАРТОЧЕК ПОИСКА В ТЕМНЫХ РЕЖИМАХ ===== */

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);
    border-color: var(--input-border-color);
    color: var(--text-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 .provider-tag,
body.synthwave-mode .provider-tag {
    background: var(--input-hover-bg-color);
    color: var(--secondary-text-color);
}

/* Стили для навигации в темных темах */
body.dark-mode .search-navigation,
body.synthwave-mode .search-navigation {
    background-color: var(--input-bg-color);
    border-color: var(--border-color);
}

body.dark-mode .result-counter,
body.synthwave-mode .result-counter {
    color: var(--text-color);
}



/* ===== СТИЛИ ДЛЯ КНОПКИ ОТПРАВКИ В РЕЖИМЕ ЗАГРУЗКИ ===== */

.advanced-send-btn.loading {
    transform: none; /* Отключаем анимацию поворота при наведении */
    cursor: wait;
    background: var(--button-secondary-bg);
}

.advanced-send-btn.loading::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

.advanced-send-btn.loading > * {
    /* Скрываем стрелочку внутри кнопки, когда идет загрузка */
    visibility: hidden;
}

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


/* ===== СТИЛИ ДЛЯ КНОПКИ УДАЛЕНИЯ АККАУНТА ===== */

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

.delete-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* ======================================================= */
/* ===== ФИНАЛЬНЫЕ СТИЛИ ДЛЯ АДАПТИВНОСТИ ЧАТА (v3.0) ===== */
/* ======================================================= */

/* Кнопка-бургер, которая видна только на мобильных */
.sidebar-toggle-btn {
    display: none; /* Скрыта по умолчанию на больших экранах */
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 2em;
    cursor: pointer;
    padding: 5px 10px;
}

/* --- СТИЛИ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (до 768px) --- */
@media (max-width: 768px) {
    
    /* Показываем кнопку-бургер и делаем ее "точкой отсчета" */
    .sidebar-toggle-btn {
        display: block;
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2100; /* Выше чем сайдбар */
    }

    /* Делаем шапку "точкой отсчета" для бургера */
    .advanced-chat-header {
        position: relative;
        padding-left: 50px; /* Освобождаем место для кнопки */
    }
    
    /* Контейнер сайдбара становится оверлеем */
    .sidebar-container {
        position: fixed; /* Используем fixed для покрытия всего экрана */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2050;
        
        visibility: hidden;
        background: rgba(0,0,0,0);
        transition: background 0.3s ease, visibility 0s 0.3s;
    }

    .sidebar-container.open {
        visibility: visible;
        background: rgba(0,0,0,0.5);
        transition-delay: 0s;
    }
    
    /* Сам сайдбар выезжает слева */
    .advanced-chat-body .chat-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 280px;
        max-width: 80%;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        border-right: 1px solid var(--border-color);
        z-index: 1;
        /* Убираем старые ограничения, если они были */
        max-height: none; 
    }

    .sidebar-container.open .chat-sidebar {
        transform: translateX(0);
    }

    /* Основной контент теперь занимает всю ширину */
    .chat-main-content {
        width: 100%;
    }
}

/* ===== СТИЛИ ДЛЯ ЗАКРЕПЛЕННЫХ СООБЩЕНИЙ ===== */

/* Подсветка активной кнопки "Закрепленные" */
#togglePinnedBtn.active {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
}

/* Стиль для самой иконки-скрепки в сообщении */
.pinned-icon {
    display: inline-block;
    margin-right: 5px;
    opacity: 0.7;
}

/* Стиль для всего блока закрепленного сообщения */
.message.pinned .message-content {
    background: var(--feedback-correct-bg);
    border-left: 4px solid var(--button-success-bg);
}

/* Стили для темной темы */
body.dark-mode #togglePinnedBtn.active {
    background-color: var(--button-primary-hover-bg);
}

body.dark-mode .message.pinned .message-content {
    background: var(--feedback-correct-bg);
    border-left-color: var(--button-success-hover-bg);
}


/* Для светлой темы: если сообщение МОЕ и оно ЗАКРЕПЛЕНО,
   делаем текст темным, как у правильного ответа. */
.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-y: auto;
    overflow-x: hidden;
}


/* ===== СТИЛИ ДЛЯ КНОПКИ НАСТРОЕК КАНАЛА ===== */
.channel-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.channel-settings-btn {
    background: none;
    border: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    font-size: 1.1em;
    padding: 2px 5px;
    border-radius: 4px;
    opacity: 0; /* Скрываем кнопку по умолчанию */
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.channel-item:hover .channel-settings-btn {
    opacity: 1; /* Показываем при наведении на элемент канала */
}

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


/* ===== СТИЛИ ДЛЯ СПИСКА ПОЛЬЗОВАТЕЛЕЙ (НОВЫЕ) ===== */

.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: 15px;
}

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

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

.user-list-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;
    flex-shrink: 0;
    position: relative;
}

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

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

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

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

.user-list-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.user-list-item:hover .user-list-actions {
    opacity: 1;
}

.user-list-actions .action-btn {
    background-color: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-color);
}

.user-list-actions .action-btn:hover {
    background-color: var(--input-hover-bg-color);
    color: var(--button-primary-bg);
}

/* Стили для модального окна действий */
.modal-buttons.vertical {
    flex-direction: column;
    gap: 10px;
}

.modal-buttons.vertical button {
    width: 100%;
}


/* Стили для активного личного чата */
#privateChatsList .channel-item.active {
    background: var(--chat-success);
    color: white;
    border-color: var(--chat-success);
    font-weight: 600;
}

/* Иконка статуса в списке ЛС */
#privateChatsList .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--secondary-text-color);
}

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

/* === НАЧАЛО НОВЫХ СТИЛЕЙ: ПАНЕЛЬ ДЕЙСТВИЙ === */
.tab-actions-container {
    padding: 10px 20px;
    background-color: var(--input-bg-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    animation: fadeIn 0.3s;
}

.tab-actions-container button {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: none;
    padding: 8px 12px;
    font-size: 0.9em;
    border-radius: 5px;
    cursor: pointer;
}

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

.tab-actions-container .btn-danger {
    background-color: var(--chat-accent);
}

.tab-actions-container .btn-danger:hover {
    background-color: #c0392b;
}

.chat-main-content {
    /* Убедимся, что и область сообщений, и область ввода могут сжиматься/растягиваться */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Важно */
}

.message-area {
    /* Область сообщений должна занимать все доступное пространство */
    flex-grow: 1;
    overflow-y: auto;
}

.chat-input-area {
    /* Область ввода не должна растягиваться */
    flex-shrink: 0;
}

/* style.css */

/* Добавьте эти стили в конец файла, в секцию стилей чата */

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

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

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

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

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

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

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




/* --- НАЧАЛО БЛОКА НА ЗАМЕНУ --- */

/* Сама шапка карточки: два блока по краям */
.result-card-header {
    display: flex;
    justify-content: space-between; /* Главное правило: расталкивает левый и правый блоки */
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    gap: 10px; /* Добавляем небольшой отступ между элементами */
}

/* Правый блок с действиями */
.result-card-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* Отступы между тегом релевантности и кнопками */
}

/* Кнопки "В избранное" и "Копировать" */
.favorite-search-result-btn, .copy-search-result-btn {
    background: none;
    border: none;
    font-size: 1.6em;
    cursor: pointer;
    color: var(--secondary-text-color);
    padding: 0 5px;
    transition: all 0.2s ease;
    line-height: 1; /* Для лучшего вертикального выравнивания */
}

.favorite-search-result-btn:hover {
    color: #f39c12; /* Желтый для избранного */
    transform: scale(1.2);
}

.copy-search-result-btn:hover {
    color: #007bff; /* Синий для копирования */
    transform: scale(1.2);
}

/* --- КОНЕЦ БЛОКА НА ЗАМЕНУ --- */

/* Стили для индивидуального счетчика непрочитанных в канале */
.unread-channel-badge {
    background-color: var(--chat-accent);
    color: white;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: auto; /* Прижимает счетчик вправо, перед иконкой настроек */
    margin-right: 8px;
    transition: all 0.3s ease;
}

/* Добавьте эти стили в конец файла style.css */

/* ===== СТИЛИ ДЛЯ МОБИЛЬНОГО СКАЧИВАНИЯ ===== */

/* Анимации для модального окна */
@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 0.3s ease;
}

#mobileDownloadModal > div {
    animation: slideUp 0.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, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

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

/* Стили для индикатора прогресса */
.download-progress {
    width: 100%;
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
    margin: 15px 0;
}

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

/* Стили для статуса скачивания */
.download-status {
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    text-align: center;
    font-weight: 500;
}

.download-status.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.download-status.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.download-status.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Стили для textarea с содержимым файла */
#mobileDownloadModal textarea {
    border: 2px solid #dee2e6;
    transition: border-color 0.3s ease;
    resize: vertical;
}

#mobileDownloadModal textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
    outline: none;
}

/* Кнопки действий */
#mobileDownloadModal button {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

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

/* Эффект ripple для кнопок */
#mobileDownloadModal button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.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: 0.8em;
    }
}

@media (max-width: 320px) {
    #mobileDownloadModal > div {
        padding: 15px !important;
    }
    
    #mobileDownloadModal h3 {
        font-size: 1.2em;
        margin-bottom: 10px !important;
    }
    
    #mobileDownloadModal p {
        font-size: 0.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;
}

body.dark-mode #mobileDownloadModal .download-status.success {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    border-color: var(--feedback-correct-border);
}

body.dark-mode #mobileDownloadModal .download-status.warning {
    background-color: #4a3d1a;
    color: #ffc107;
    border-color: #6b4e00;
}

body.dark-mode #mobileDownloadModal .download-status.info {
    background-color: #1a3a4a;
    color: #17a2b8;
    border-color: #004d5c;
}

/* Дополнительные эффекты для лучшего UX */
.download-link-container {
    position: relative;
    margin: 20px 0;
}

.download-countdown {
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 10px;
    font-style: italic;
}

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

/* Иконки для разных типов файлов */
.file-type-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
}

.file-type-icon.qst:before { content: '📝'; }
.file-type-icon.txt:before { content: '📄'; }
.file-type-icon.cheat:before { content: '📋'; }

/* Улучшенная кнопка закрытия */
#mobileDownloadModal button[onclick*="remove"] {
    transition: all 0.2s ease;
}

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

/* Стили для прелоадера */
.mobile-download-spinner {
    border: 4px solid rgba(0,123,255,0.1);
    border-left: 4px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

/* Особые стили для кнопки копирования */
button[onclick*="copyToClipboard"] {
    position: relative;
}

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

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); }
}

.download-success {
    animation: success-bounce 1s ease;
}

/* ДОБАВЬТЕ ЭТО В КОНЕЦ ФАЙЛА */
#favoriteQuestionBtn {
    background: none;
    border: 1px solid var(--theme-toggle-border);
    color: var(--text-color);
    font-size: 1.3em;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
    flex-shrink: 0;
}

#favoriteQuestionBtn:hover {
    background-color: var(--theme-toggle-hover-bg);
    color: #f39c12;
    transform: scale(1.05);
}

#favoriteQuestionBtn.active {
    background-color: #f39c12;
    color: white;
    border-color: #f39c12;
}


@media (max-width: 768px) {
  .dropdown-content {
    /* Вместо выравнивания по правому краю, выравниваем по левому */
    left: 0; 
    /* Сбрасываем выравнивание по правому краю, чтобы оно не мешало */
    right: auto;
  }
}



/* Контейнер для загрузчика */
.loading-placeholder {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px; /* Расстояние между спиннером и текстом */
  color: var(--secondary-text-color);
  font-size: 1.1em;
  min-height: 150px; /* Чтобы контейнер не был слишком маленьким */
}

/* Сам спиннер (вращающийся кружок) */
.loading-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Цвет основного круга (полупрозрачный) */
  border: 4px solid var(--input-hover-bg-color); 
  /* Цвет вращающегося сегмента */
  border-top-color: var(--button-primary-bg); 
  /* Запускаем анимацию вращения */
  animation: spin 1s linear infinite;
}

/* Описание самой анимации */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#languageToggle {
    font-size: 1.0em; /* Немного увеличим размер эмодзи */
    padding: 4px; /* Можно слегка подогнать отступы */
}



.question-actions .copy-question-btn {
    background: linear-gradient(135deg, #3498db, #2980b9); /* Синий градиент */
    color: white;
}

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


@media (max-width: 768px) {
    .header-buttons {
        /* Уменьшаем расстояние между кнопками с 10px до 4px */
        gap: 6px;
    }

    /* Применяем стили ко всем кнопкам в панели */
    #searchWebButton,
    #themeToggle,
    #quickModeToggle,
    #copyQuestionBtnQuiz,
    #triggerWordToggle,
    #languageToggle,
    #chatToggle,
    #favoriteQuestionBtn {
        /* Уменьшаем внутренние отступы (делаем кнопку уже) */
        padding: 5px 6px;
        /* Немного уменьшаем размер самой иконки (был 1.3em) */
        font-size: 1.1em;
    }
}

/* --- НАЧАЛО НОВЫХ СТИЛЕЙ: Файлы в чате --- */

/* Стили для карточки файла */
.file-share-bubble .message-content {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.file-share-content {
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--chat-success); /* Зеленая полоска */
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s ease;
}

.file-share-content:hover {
    background-color: var(--input-hover-bg-color);
    border-color: var(--chat-success);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

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

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

.file-share-name {
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-share-info {
    font-size: 0.9em;
    color: var(--secondary-text-color);
}

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

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

/* Стили для модального окна действий с файлом */
.modal-buttons.vertical {
    flex-direction: column;
    gap: 10px;
}

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

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

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

/* --- КОНЕЦ НОВЫХ СТИЛЕЙ --- */

/* --- СТИЛИ ДЛЯ ПАРСЕРА --- */
#parserArea {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#parserArea textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-family: monospace;
    border: 1px solid var(--input-border-color);
    background-color: var(--container-bg-color);
    color: var(--text-color);
    margin-top: 10px;
    line-height: 1.4;
    resize: vertical;
}

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

#runParserBtn {
    background-color: var(--button-primary-bg); /* ИЗМЕНЕНИЕ */
    width: 50%;
}
#runParserBtn:hover {
    background-color: var(--button-primary-hover-bg); /* ИЗМЕНЕНИЕ */
}

#parserOutputArea h3 {
    text-align: center;
}

#downloadParsedBtn {
    width: 100%;
    margin-top: 10px;
}


@media (max-width: 768px) {

    /* 1. Уменьшаем высоту ОСНОВНОЙ шапки (синей/темной) */
    .advanced-chat-header {
        /* Уменьшаем вертикальные отступы (было 15px) */
        padding-top: 7px;
        padding-bottom: 7px;
    }

    /* 2. Уменьшаем высоту ВТОРОЙ шапки (с названием канала и поиском) */
    .chat-top-bar {
        /* Уменьшаем вертикальные отступы (было 15px) */
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* 3. (Опционально) Немного уменьшаем заголовок и кнопки для гармонии */
    .advanced-chat-header .chat-title h3 {
        font-size: 1.2em; /* Был 1.4em */
    }

    .advanced-chat-header .header-controls button,
    .advanced-chat-header #currentUser {
         padding: 5px 8px; /* Было 8px 12px */
         font-size: 0.7em;
    }
    
    #chatSearchInput {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}


/* Контейнер для выравнивания заголовка и кнопки по краям */
.parser-label-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Стиль для маленькой вторичной кнопки */
.btn-secondary-small {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    padding: 4px 10px;
    font-size: 0.85em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-secondary-small:hover {
    background-color: var(--button-secondary-hover-bg);
}

/* ===== СТИЛИ ДЛЯ ГЛОБАЛЬНОГО ИНДИКАТОРА ЗАГРУЗКИ ===== */

.global-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background-color: var(--container-bg-color);
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.loader-content p {
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-color);
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid var(--input-hover-bg-color);
    border-top-color: var(--button-primary-bg);
    animation: spin 1s linear infinite;
}

@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: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--secondary-text-color);
    font-size: 1.2em;
    /* Отключаем выделение иконки как текста */
    user-select: none;
}

/* Улучшенные стили для текстовых полей парсера */
#parserArea textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Стиль при фокусе: красивая синяя рамка и тень */
#parserArea textarea:focus {
    border-color: var(--button-primary-bg); /* Синяя рамка */
    outline: none; /* Убираем стандартный контур */
    /* Добавляем мягкую тень для эффекта "свечения" */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); 
}


/* --- Стили для навигации по категориям в тесте --- */

/* Делаем контейнер кнопок более гибким */
#quickNavButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Выравниваем по левому краю */
    gap: 5px; /* Устанавливаем единый отступ */
}

/* Стили для плашки-заголовка категории */
.quick-nav-category {
    /* Растягиваем на всю ширину, чтобы она была на отдельной строке */
    flex-basis: 100%; 
    width: 100%;
    
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: 8px 10px;
    margin-top: 10px; /* Отступ сверху */
    margin-bottom: 5px; /* Отступ снизу */
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 0.95em;
    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;
    text-align: center;
    min-height: 200px; /* Чтобы экран не был слишком маленьким */
    padding: 20px;
    color: var(--secondary-text-color);
}

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

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

/* --- СТИЛИ ДЛЯ БЛОКА ОШИБОК ПАРСЕРА --- */
#parserErrorsArea {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid var(--feedback-incorrect-border);
    background-color: var(--feedback-incorrect-bg);
    border-radius: 8px;
    animation: fadeIn 0.4s ease;
}

#showErrorsBtn {
    width: 100%;
    background-color: var(--chat-accent);
    color: white;
    font-weight: bold;
    text-align: left;
    padding: 10px 15px;
    margin-bottom: 10px;
    border: none;
    cursor: default; /* Кнопка не кликабельна, это просто заголовок */
}

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

.error-list-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--dashed-border-color);
    cursor: pointer;
    font-family: monospace;
    font-size: 0.9em;
    color: var(--secondary-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.2s;
}

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

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

/* --- СТИЛИ ДЛЯ ФИЛЬТРА ВАРИАНТОВ ОТВЕТОВ --- */

.filter-controls-container {
    position: relative; /* Важно для позиционирования выпадающего меню */
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end; /* Выравниваем кнопку по правому краю */
}

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

.filter-dropdown {
    position: absolute;
    top: 100%; /* Появляется под кнопкой */
    right: 0;
    width: 280px;
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 20px var(--shadow-color);
    z-index: 100;
    padding: 15px;
    animation: fadeIn 0.2s;
}

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

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

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

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

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

#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;
}

/* --- СТИЛИ ДЛЯ ФИЛЬТРА ВАРИАНТОВ ОТВЕТОВ --- */

.filter-controls-container {
    position: relative; /* Важно для позиционирования выпадающего меню */
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end; /* Выравниваем кнопку по правому краю */
}

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

.filter-dropdown {
    position: absolute;
    top: 100%; /* Появляется под кнопкой */
    right: 0;
    width: 280px;
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 20px var(--shadow-color);
    z-index: 100;
    padding: 15px;
    animation: fadeIn 0.2s;
}

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

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

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

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

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

#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 {
    background-color: var(--chat-accent);
    color: white;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: auto; /* Прижимает счетчик вправо, перед иконкой настроек */
    margin-right: 8px;
    transition: all 0.3s ease;
}


body.claude-mode .header-controls button,
body.claude-mode #currentUser {
    /* Делаем кнопки в шапке чата соответствующими теме */
    background: var(--input-bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

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);
    border-color: var(--button-primary-bg);
    color: var(--button-primary-text);
}

body.claude-mode .message.mine .message-content {
    /* Сообщение пользователя (было синим) теперь в цветах темы */
    background: linear-gradient(135deg, var(--button-primary-bg), var(--button-primary-hover-bg));
    border-color: transparent;
}

@media (max-width: 768px) {

    /* 1. Уменьшаем высоту ОСНОВНОЙ шапки (с заголовком "Сообщения") */
    .advanced-chat-header {
        /* Уменьшаем вертикальные отступы (было 15px) */
        padding-top: 7px;
        padding-bottom: 7px;
    }

    /* 2. Уменьшаем высоту ВТОРОЙ шапки (с названием канала и поиском) */
    .chat-top-bar {
        /* Уменьшаем вертикальные отступы (было 15px) */
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* 3. (Опционально) Немного уменьшаем заголовок и кнопки для гармонии */
    .advanced-chat-header .chat-title h3 {
        font-size: 1.2em; /* Был 1.4em */
    }

    .advanced-chat-header .header-controls button,
    .advanced-chat-header #currentUser {
         padding: 5px 8px; /* Было 8px 12px */
         font-size: 0.9em;  /* Немного уменьшаем шрифт */
    }
    
    #chatSearchInput {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* Стили для сворачивания длинных сообщений */
.message-content.collapsible {
    max-height: 250px; /* Максимальная высота свернутого сообщения */
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease-in-out;
}

/* Градиент внизу, намекающий на продолжение */
.message-content.collapsible::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--container-bg-color));
    pointer-events: none; /* Чтобы не мешал кликам */
}

/* Состояние, когда сообщение развернуто */
.message-content.collapsible.expanded {
    max-height: 2000px; /* Большая высота для анимации */
}

/* Убираем градиент, когда сообщение развернуто */
.message-content.collapsible.expanded::after {
    opacity: 0;
}

/* Стиль для кнопки "Развернуть/Свернуть" */
.expand-message-btn {
    background-color: var(--input-hover-bg-color);
    color: var(--secondary-text-color);
    border: 1px solid var(--border-color);
    padding: 5px 12px;
    font-size: 0.8em;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 8px;
    transition: background-color 0.2s;
}

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




/* Улучшенные стили для закрепленных сообщений в теме Claude */
body.claude-mode .message.pinned .message-content {
    /* ИЗМЕНЕНИЕ: Теплый, темно-серый фон для высокого контраста */
    background-color: #6e6459; 
    border-left: 4px solid #e58a56; 
    /* ИЗМЕНЕНИЕ: Белый текст, который теперь отлично читается */
    color: #ffffff; 
}

/* 
 * Это правило теперь также использует новый цвет и фон, чтобы переопределить
 * стили на ВАШИХ сообщениях, когда они закреплены.
 */
body.claude-mode .message.mine.pinned .message-content {
    background-color: #6e6459; /* Используем тот же самый новый фон */
    color: #ffffff; /* Используем тот же самый белый цвет */
}

/* --- СТИЛИ ДЛЯ СОХРАНЕННЫХ СЕССИЙ --- */

#savedSessionArea {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--dashed-border-color);
}

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

.saved-session-card {
    background-color: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--button-primary-bg);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px var(--shadow-light-color);
}

.saved-session-name {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
    word-break: break-all;
}

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

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

.progress-bar-fill {
    height: 100%;
    background-color: var(--button-success-bg);
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
}

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

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

.saved-session-actions .btn-delete {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border: 1px solid var(--feedback-incorrect-border);
}

/* Стили для кнопки "Продолжить позже" */
#continueLaterButton {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
    padding: 10px 25px;
    width: auto;
    display: inline-block;
    margin-right: 10px; /* Отступ от кнопки "Завершить" */
}

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

/* ===== НОВЫЕ СТИЛИ ДЛЯ ПОИСКА И СКРОЛЛИНГА В САЙДБАРЕ ===== */

/* Контейнер для поля поиска */
.sidebar-search-container {
    margin-bottom: 15px;
}

/* Стиль самого поля поиска */
.sidebar-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    font-size: 0.9em;
    outline: none;
    transition: all 0.2s ease;
}

.sidebar-search-input:focus {
    border-color: var(--button-primary-bg);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* ГЛАВНОЕ: Устанавливаем максимальную высоту и скроллинг */
#channelsList,
#privateChatsList,
#onlineUsersList {
    max-height: 180px; /* Вы можете изменить это значение по своему вкусу */
    overflow-y: auto;  /* Показывать скроллбар, только если нужно */
    padding-right: 5px; /* Небольшой отступ, чтобы скроллбар не прилипал к тексту */
}

/* --- ИСПРАВЛЕННЫЙ КОД --- */

/* ===== КАСТОМНЫЕ СКРОЛЛБАРЫ ДЛЯ ТЕМНЫХ ТЕМ ===== */

body.dark-mode ::-webkit-scrollbar,
body.synthwave-mode ::-webkit-scrollbar {
  width: 8px; 
}

body.dark-mode ::-webkit-scrollbar-track,
body.synthwave-mode ::-webkit-scrollbar-track {
  background: var(--input-bg-color);
}

body.dark-mode ::-webkit-scrollbar-thumb,
body.synthwave-mode ::-webkit-scrollbar-thumb {
  background-color: #475569; /* Используем цвет из палитры synthwave */
  border-radius: 4px;
  border: 2px solid var(--input-bg-color);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover,
body.synthwave-mode ::-webkit-scrollbar-thumb:hover {
  background-color: #64748B; /* Используем цвет из палитры synthwave */
}

/* ===== СТИЛИ ДЛЯ КАНАЛОВ ТЕСТИРОВАНИЯ ===== */

/* Контейнер для кнопки "Результаты" */
.test-results-action {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--dashed-border-color);
}

/* Сама кнопка "Результаты" */
.results-btn {
  width: 100%;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  padding: 8px 15px;
  font-weight: 500;
}
.results-btn:hover {
  background: var(--button-secondary-hover-bg);
}

/* Кнопка "Пробный тест" в модальном окне */
#fileActionPracticeTestBtn {
  background-color: var(--button-success-bg);
  color: white;
}
#fileActionPracticeTestBtn:hover {
  background-color: var(--button-success-hover-bg);
}

/* Таблица результатов */
#testResultsTableContainer table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

#testResultsTableContainer th,
#testResultsTableContainer td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}

#testResultsTableContainer th {
  background-color: var(--input-bg-color);
  font-weight: 600;
  color: var(--heading-color);
}

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

/* Сообщение-заглушка для пустой таблицы */
.results-empty-state {
  padding: 30px;
  text-align: center;
  color: var(--secondary-text-color);
}

/* ===== СТИЛИ ДЛЯ КНОПКИ GOOGLE SIGN-IN ===== */

.google-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    padding: 12px;
    background-color: #ffffff; /* Белый фон */
    color: #333; /* Темный текст */
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1.05em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

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

.google-signin-btn img {
    width: 20px;
    height: 20px;
}

/* ===== СТИЛИ ДЛЯ КНОПКИ GOOGLE SIGN-IN (ОБЩИЕ) ===== */
.google-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    padding: 12px;
    background-color: #ffffff; /* Белый фон по умолчанию */
    color: #333; 
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1.05em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

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

.google-signin-btn img {
    width: 20px;
    height: 20px;
    transition: transform 0.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);
}

/* ===== ИСПРАВЛЕНИЕ ДЛЯ ДЛИННЫХ ОБЪЯСНЕНИЙ ИИ ===== */

/* 1. Ограничиваем высоту модального окна и делаем его гибким */
#aiExplanationModal .modal-content {
    max-height: 85vh; /* Окно не будет выше 85% высоты экрана */
    display: flex;
    flex-direction: column;
}

/* ======================================================= */
/* === СТИЛИ ДЛЯ ВЗАИМНОГО СВОРАЧИВАНИЯ В ОКНЕ ИИ (v2) === */
/* ======================================================= */
#aiExplanationOutput {
    overflow-y: auto;
    padding-right: 15px;
    margin-right: -10px;
    padding-bottom: 10px;
    
    /* Устанавливаем максимальную высоту по умолчанию */
    max-height: 40vh; /* Занимает 40% высоты видимой области экрана */
    
    /* Добавляем плавный переход для высоты */
    transition: max-height 0.3s ease-in-out;
}

/* Новый класс, который будет "сворачивать" блок с ответом */
#aiExplanationOutput.collapsed {
    max-height: 100px; /* Небольшая высота, чтобы видеть начало ответа */
}

/* ===== СТИЛИ ДЛЯ ОТФОРМАТИРОВАННОГО MARKDOWN ===== */
#aiExplanationOutput h1,
#aiExplanationOutput h2,
#aiExplanationOutput h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--heading-color);
}

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

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

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

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

/* ===== СТИЛИ ДЛЯ АКТИВНОЙ КНОПКИ СТИЛЯ ОБЪЯСНЕНИЯ ===== */

#aiExplanationStyleButtons .btn-secondary-small.active {
    /* Используем цвета основной кнопки приложения для единообразия */
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
    font-weight: bold; /* Делаем текст жирным для акцента */
}

/* Убираем эффект затемнения при наведении для уже активной кнопки */
#aiExplanationStyleButtons .btn-secondary-small.active:hover {
    background-color: var(--button-primary-bg);
}

/* ===== СТИЛИ ДЛЯ КНОПКИ КОПИРОВАНИЯ В ОКНЕ ИИ ===== */
#copyExplanationBtn {
    background-color: var(--button-success-bg);
}

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

/* ===== СТИЛИ ДЛЯ АНИМАЦИИ ПЕЧАТАНИЯ ===== */

/* Контейнер, чтобы отцентрировать анимацию */
.typing-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* Даем немного пространства */
    width: 100%;
}

/* Сам элемент с текстом и анимацией */
.typing-loader {
    font-family: monospace; /* Моноширинный шрифт лучше всего подходит для эффекта печати */
    font-size: 1.1em;
    color: var(--secondary-text-color);
    
    /* Эти три свойства - ключ к анимации */
    white-space: nowrap;      /* Запрещаем тексту переноситься на новую строку */
    overflow: hidden;         /* Скрываем символы, которые еще не "напечатаны" */
    border-right: 3px solid var(--text-color); /* Это наш мигающий курсор */
    
    /* Подключаем две анимации одновременно */
    animation: 
        typing 8.5s steps(80, end) infinite, /* Анимация печатания */
        blink-caret .75s step-end infinite;  /* Анимация мигания курсора */
}

/* Описание анимации "печатания" */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* Описание анимации мигания курсора */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--text-color); }
}

/* ======================================================= */
/* === АДАПТИВНОСТЬ ОКНА ОБЪЯСНЕНИЙ ДЛЯ МОБИЛЬНЫХ (v2) === */
/* ======================================================= */

/* Применяем эти стили на экранах шириной 600px или меньше */
@media (max-width: 600px) {

    /* 1. Делаем само модальное окно больше и убираем лишние отступы */
    #aiExplanationModal .modal-content {
        width: 95%; /* Занимает почти всю ширину экрана */
        max-height: 90vh; /* Занимает почти всю высоту экрана */
        padding: 20px 15px; /* Уменьшаем внутренние отступы */
    }

    /* 2. Уменьшаем заголовок */
    #aiExplanationModal h3 {
        font-size: 1.2em;
        margin-bottom: 15px;
    }

    /* 3. Уменьшаем блок с текстом вопроса */
    #aiExplanationQuestion {
        padding: 10px;
        font-size: 0.9em;
    }
    
    /* 4. Адаптируем кнопки стилей */
    #aiExplanationStyleButtons {
        gap: 8px; /* Чуть меньше расстояние между кнопками */
    }

    #aiExplanationStyleButtons .btn-secondary-small {
        padding: 6px 10px; /* Делаем кнопки компактнее */
        font-size: 0.85em;
    }

    /* 5. Улучшаем область вывода текста */
    #aiExplanationOutput {
        padding-right: 10px; /* Уменьшаем отступ справа от скроллбара */
        margin-right: -10px;
    }

    /* 6. Уменьшаем нижние кнопки */
    #aiExplanationModal .modal-buttons button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}


/* ======================================================= */
/* === СТИЛИ ДЛЯ СВОРАЧИВАНИЯ ДЛИННЫХ ВОПРОСОВ В ОКНЕ ИИ === */
/* ======================================================= */

/* 1. Стили для блока вопроса, когда он свернут */
#aiExplanationQuestion.collapsible {
    max-height: 50px; /* Ограничиваем высоту свернутого блока */
    overflow: hidden;
    position: relative; /* Необходимо для позиционирования градиента */
    padding-bottom: 25px; /* Оставляем место для кнопки "Развернуть" */
    transition: max-height 0.3s ease-in-out;
}

/* 2. Градиент внизу свернутого блока, намекающий на продолжение */
#aiExplanationQuestion.collapsible::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--input-bg-color));
    pointer-events: none;
}

/* 3. Когда блок развернут, убираем ограничение высоты и градиент */
#aiExplanationQuestion.collapsible.expanded {
    max-height: 1000px; /* Большая высота для плавной анимации */
}

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



/* ======================================================= */
/* === СТИЛИ ДЛЯ ИНДИКАТОРА СВОРАЧИВАНИЯ ("ПОЛЗУНОК")  === */
/* ======================================================= */

.expand-question-btn {
    position: absolute;
    bottom: -10px; /* Смещаем вниз, чтобы он находился на границе блока */
    left: 50%;
    transform: translateX(-50%);
    
    width: 80px;  /* Ширина элемента */
    height: 20px; /* Высота кликабельной области */
    
    background-color: transparent; /* Убираем фон */
    border: none;
    cursor: ns-resize; /* Курсор "изменение размера по вертикали" - очень интуитивно */
    z-index: 10;
    
    /* Убираем стандартные стили кнопки */
    padding: 0;
    margin: 0;
    outline: none;
}

/* Создаем сам видимый "ползунок" внутри кнопки с помощью псевдо-элемента */
.expand-question-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 40px; /* Ширина видимой части */
    height: 6px;  /* Высота видимой части */
    
    background-color: var(--secondary-text-color); /* Цвет ползунка */
    border-radius: 3px; /* Скругляем края */
    transition: background-color 0.2s;
}

/* При наведении делаем ползунок ярче */
.expand-question-btn:hover::after {
    background-color: var(--text-color);
}





/* =============================================================== */
/* === ИСПРАВЛЕНИЕ ЦВЕТА АКТИВНОЙ КНОПКИ В ТЕМНЫХ ТЕМАХ (v2) === */
/* =============================================================== */

/* Применяем стили к активной кнопке в dark-mode и synthwave-mode */
body.dark-mode #aiExplanationStyleButtons .btn-secondary-small.active,
body.synthwave-mode #aiExplanationStyleButtons .btn-secondary-small.active {
    /* Яркий, контрастный фон для выделения */
    background-color: #38BDF8; /* Небесно-голубой, как акцент в теме synthwave */
    
    /* Темный текст для максимальной читаемости на светлом фоне */
    color: #0F172A; 
    
    /* Убираем рамку, делая ее в цвет фона */
    border-color: #38BDF8; 
}

/* Также убедимся, что при наведении на активную кнопку, она не меняет цвет */
body.dark-mode #aiExplanationStyleButtons .btn-secondary-small.active:hover,
body.synthwave-mode #aiExplanationStyleButtons .btn-secondary-small.active:hover {
    background-color: #38BDF8; /* Оставляем тот же цвет */
}

/* =============================================================== */
/* === ИСПРАВЛЕНИЕ РАССТОЯНИЯ МЕЖДУ КНОПКАМИ В КОНЦЕ ТЕСТА === */
/* =============================================================== */

.quiz-footer-controls {
    /* Превращаем контейнер в гибкий столбец */
    display: flex;
    flex-direction: column;
    
    /* Выравниваем кнопки по центру горизонтально */
    align-items: center;
    
    /* Добавляем расстояние в 10px между кнопками */
    gap: 10px;
}

/* (Опционально, но рекомендуется) Задаем ширину самим кнопкам для лучшего вида */
.quiz-footer-controls button {
    width: 80%;
    max-width: 250px;
}

/* ======================================================= */
/* === СТИЛИ ДЛЯ ВЫПАДАЮЩЕГО СПИСКА СТИЛЕЙ ОБЪЯСНЕНИЯ === */
/* ======================================================= */

/* 1. Главный контейнер */
.style-dropdown {
    position: relative; /* Необходимо для позиционирования списка */
    display: inline-block;
    width: 100%;
}

/* 2. Кнопка, которая открывает список */
.style-dropdown-btn {
    width: 100%;
    background-color: var(--container-bg-color);
    color: var(--text-color);
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;
}
.style-dropdown-btn:hover {
    border-color: var(--button-primary-bg);
}

/* 3. Текст внутри главной кнопки */
#aiExplanationStyleText {
    font-weight: 500;
}

/* 4. Стрелочка в кнопке */
.dropdown-arrow {
    transition: transform 0.2s;
}
/* Поворачиваем стрелочку, когда список открыт */
.style-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* 5. Сам выпадающий список (скрыт по умолчанию) */
.style-dropdown-content {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 5px 15px var(--shadow-color);
    z-index: 20;
    max-height: 250px;
    overflow-y: auto;
}

/* 6. Элементы внутри списка */
.style-dropdown-content a {
    display: block;
    padding: 10px 15px;
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.style-dropdown-content a:hover {
    background-color: var(--input-hover-bg-color);
}

/* 7. Стиль для активного (выбранного) элемента в списке */
.style-dropdown-content a.active {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: bold;
}

/* ======================================================= */
/* === СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА ПОДТВЕРЖДЕНИЯ ВЫХОДА === */
/* ======================================================= */

.modal-overlay-exit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998; /* Чуть ниже, чем у чата или лоадера */
    animation: fadeIn 0.3s ease;
}

.modal-content-exit {
    background: var(--container-bg-color);
    padding: 25px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 40px var(--shadow-color);
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: slideUp 0.4s ease;
    border-top: 5px solid var(--feedback-incorrect-border);
}

.modal-content-exit h3 {
    margin: 0 0 10px 0;
    color: var(--heading-color);
    font-size: 1.4em;
}

.modal-content-exit p {
    margin: 0 0 25px 0;
    color: var(--secondary-text-color);
    font-size: 1.05em;
    line-height: 1.5;
}

.modal-content-exit .modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.modal-content-exit .btn-danger {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border: 1px solid var(--feedback-incorrect-border);
    font-weight: bold;
}

.modal-content-exit .btn-danger:hover {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.modal-content-exit .btn-secondary {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.modal-content-exit .btn-secondary:hover {
    background-color: var(--button-secondary-hover-bg);
}

/* ======================================================= */
/* === СТИЛИ ДЛЯ ПЛАШКИ УВЕДОМЛЕНИЯ ОБ ОБНОВЛЕНИИ === */
/* ======================================================= */

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

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

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

.update-notification button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* ======================================================= */
/* === АДАПТИВНЫЕ СТИЛИ ДЛЯ ВЕРХНЕЙ ПАНЕЛИ ПОИСКА (v2) === */
/* ======================================================= */

/* 1. Настраиваем заголовок канала, чтобы он мог сжиматься и обрезаться */
#currentChannelName {
    flex-shrink: 1; /* Разрешаем сжиматься */
    min-width: 0; /* Важный трюк, чтобы flexbox мог сжать элемент меньше его содержимого */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2. Стили по умолчанию (для мобильных) */
.chat-search-toggle {
    display: none; /* По умолчанию скрыта, покажем в медиа-запросе */
    background: none;
    border: none;
    font-size: 1.5em;
    color: var(--secondary-text-color);
    cursor: pointer;
    padding: 0 5px;
}

/* --- ЗАМЕНИТЕ СТАРЫЙ МЕДИА-ЗАПРОС НА ЭТОТ --- */
@media (max-width: 768px) {
    /* УМЕНЬШАЕМ ВЫСОТУ ШАПОК */
    .advanced-chat-header,
    .chat-top-bar {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* ИСПРАВЛЯЕМ ЛОГИКУ ПОИСКА */
    .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%;
    }
}
/* --- КОНЕЦ БЛОКА НА ЗАМЕНУ --- */

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