/* Base styles */
body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   background-color: #f9f9f9;
   height: 100vh;
   
}

.container {
   max-width: 2000px;
   margin: 0 auto;
   padding: 20px;
   height: calc(100vh - 40px);
}

/* Layout components */
.split-screen {
   display: flex;
   gap: 20px;
   height: calc(100vh - 100px);
 align-items: stretch;  
}

.left-pane {
    flex: 2;
    padding: 10px;
	min-height: 0;					   
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;               /* Добавляем flex-контейнер */
    flex-direction: column;      /* Вертикальное расположение элементов */
    max-height: calc(100vh - 80px);
    box-sizing: border-box;
}


.right-pane {
   flex: 1;
   display: flex;
   flex-direction: column;
   background: white;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   position: relative;
   height: 100%;
   overflow: hidden;
}

/* Material viewer */
#materialViewer {
   font-family: Arial, sans-serif;
   line-height: 1.6;
   padding: 5px;
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   height: 100%;
   overflow-y: auto;
}

#materialViewer pre {
   white-space: pre-wrap;
   word-wrap: break-word;
   font-family: Arial, sans-serif;
   font-size: 18px;
   line-height: 1.6;
   background-color: white;
   border: none;
   padding: 15px;
   margin: 10px 0;
   border-radius: 4px;
}

.paragraph-container {
   margin-bottom: 20px;
   padding: 10px;
   border-radius: 4px;
   transition: all 0.3s ease;
}

.current-paragraph {
   border-left: 4px solid #4CAF50;
   padding-left: 15px !important;
   background-color: #f8f9fa !important;
}

.highlighted-paragraph {
   background-color: #FFFFE0 !important;
   border-left: 4px solid #ffd700;
   padding-left: 15px !important;
}

/* Chat container */
#chatContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100vh; /* Чат занимает всю высоту */
    overflow-y: auto; /* Вертикальная прокрутка */
    min-width: 50px; /* Минимальная ширина чата, чтобы не ломался */
    max-width: 400px; /* Максимальная ширина чата */
}

/* Индикаторы - единое определение */
.indicators-container {
    flex-shrink: 0;
    background: white;
    padding: 5px;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Сообщения чата - единое определение */
#chatMessages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    scroll-behavior: smooth;
    max-height: calc(100vh - 450px); /* Увеличиваем пространство */
}

.message {
   margin-bottom: 10px;
   padding: 8px;
   border-radius: 4px;
   word-wrap: break-word;
}

.user {
   text-align: right;
   background-color: #e3f2fd;
}

.assistant {
   text-align: left;
   background-color: #f5f5f5;
}

/* Контролы - единое определение */
#controlsContainer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 10;
    padding: 10px;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

#userInput {
   width: 100%;
   padding: 10px;
   border: 1px solid #dee2e6;
   border-radius: 4px;
   resize: vertical;
   margin-bottom: 10px;
   min-height: 60px;
   max-height: 120px;
   box-sizing: border-box;
}

/* Buttons */
.btn {
   display: inline-block;
   padding: 10px 20px;
   background-color: #4CAF50;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s;
}

.btn:hover {
   background-color: #45a049;
}

.btn:disabled, .btn.disabled {
   background-color: #cccccc;
   color: #666666;
   cursor: not-allowed;
   pointer-events: none;
}

.button-group {
   display: flex;
   gap: 10px;
   margin-top: 10px;
   flex-wrap: wrap;
}

.button-group .btn {
   flex: 1;
   min-width: 120px;
   margin: 0;
}

#startChatBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    z-index: 100;
}

#startTestBtn {
    display: block;  /* Вместо абсолютного позиционирования */
    width: 200px;
    margin: 10px auto;  /* Для центрирования */
}

/* Progress indicators */
.progress-indicator, .score-indicator {
   padding: 10px;
   margin-bottom: 0;
   background: #f5f5f5;
   border-radius: 4px;
}

.score-indicator {
   margin-top: 0;
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

.progress-bar, .score-bar {
   height: 8px;
   background: #ddd;
   border-radius: 4px;
   overflow: hidden;
}


.score-bar { 
   position: relative;
   height: 8px;
   background: #ddd;
   border-radius: 4px;
   overflow: hidden;
}

.score-progress-green {
   position: absolute;
   height: 100%;
   background: #4CAF50;
   border-radius: 4px;
   transition: width 0.3s ease;
}

.score-progress-red {
   position: absolute;
   height: 100%;
   background: #f44336;
   border-radius: 4px;
   transition: width 0.3s ease;
}

.progress, .score-progress {
   height: 100%;
   background: #4CAF50;
   transition: width 0.3s ease;
}

.progress-text, .score-text {
   font-size: 12px;
   color: #666;
   margin-top: 5px;
   text-align: center;
}

/* File list */
.file-list {
   margin-top: 10px;
   list-style-type: none;
   padding: 0;
}

.file-list li {
   margin: 5px 0;
   padding: 15px;
   background-color: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 4px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: background-color 0.2s;
}

.file-list li:hover {
   background-color: #e9ecef;
}

/* Test components */
.question-container {
   margin: 15px 0;
   padding: 15px;
   background-color: #f8f9fa;
   border-radius: 4px;
}

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

.option-button {
   width: 100%;
   padding: 15px;
   margin: 10px 0;
   text-align: left;
   border: 2px solid #ddd;
   border-radius: 8px;
   background-color: white;
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 1em;
   display: block;
}

.option-button:hover:not(:disabled) {
   background-color: #f0f0f0;
   border-color: #4CAF50;
}

.option-button:disabled {
   cursor: not-allowed;
   opacity: 0.8;
}

.option-button.correct {
   background-color: #4CAF50;
   color: white;
   border-color: #4CAF50;
}

.option-button.incorrect {
   background-color: #f44336;
   color: white;
   border-color: #f44336;
}

.test-results {
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   margin-top: 20px;
}

.score-display {
   font-size: 1.5em;
   color: #2c3e50;
   margin: 20px 0;
}

/* Messages */
.system-message {
   font-style: italic;
   color: #666;
   text-align: center;
   padding: 5px;
   margin: 5px 0;
   background: #f5f5f5;
   border-radius: 4px;
}

.error-message, .success-message {
   padding: 10px;
   margin: 10px 0;
   border-radius: 4px;
   display: none;
}

.error-message {
   color: #dc3545;
   background-color: #f8d7da;
   border: 1px solid #f5c6cb;
}

.success-message {
   color: #28a745;
   background-color: #d4edda;
   border: 1px solid #c3e6cb;
}

/* Top section with language selector */
.top-section {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    padding: 5px 0;
}

.language-selector-container {
    display: inline-block;
    text-align: left;
    margin-bottom: 5px;
}

.language-selector {
    padding: 6px 12px;
    border: 1px solid #4CAF50;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    cursor: pointer;
    width: 280px;
    transition: all 0.3s ease;
}

.language-selector:hover:not([disabled]) {
    border-color: #45a049;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.language-selector:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.language-selector[disabled] {
    background-color: #f5f5f5;
    border-color: #ddd;
    cursor: not-allowed;
}

.language-selector option[disabled] {
    color: #999;
    font-style: italic;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Media queries */
@media (max-width: 768px) {
   .button-group {
       flex-direction: column;
   }
   .button-group .btn {
       width: 100%;
   }
   .split-screen {
       flex-direction: column;
   }
   .left-pane, .right-pane {
       width: 100%;
   }
}

.no-copy {
    /* Запрет выделения текста */
    user-select: none;          
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
}

.no-context-menu {
    /* Запрет контекстного меню на мобильных/тач-устройствах */
    -webkit-touch-callout: none; 
    -webkit-user-drag: none;
}
/* Базовый стиль для кнопки голосового ввода — зелёный фон */
#voiceBtn {
    background-color: #4CAF50; /* Зеленый фон */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Стиль для кнопки во время записи — красный фон */
#voiceBtn.recording {
    background-color: #e74c3c !important; /* красный фон, !important для приоритета */
    color: #fff;
    animation: pulse 1s infinite;
}

/* Анимация пульсации (необязательно) */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}
#mediaSliderContainer {
    flex: 0 0 35%;             /* Фиксированная высота: 25% от левой панели */
    overflow: hidden;          /* Скрываем лишнее содержимое */
    margin-bottom: 10px;       /* Отступ между слайдером и материалом */
    background-color: #f1f1f1; /* Фоновый цвет (опционально) */
    display: flex;
    align-items: center;
    justify-content: center;
}
#materialViewer {
    flex: 1;                 /* Занимает оставшееся пространство */
    overflow-y: auto;        /* Вертикальная прокрутка при необходимости */
}
/* Стили для модального окна */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left:50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white; /* Теперь фон самого окна белый */
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}


/* Обертка для контента внутри модального окна */
.modal-content-wrapper {
  margin: 5% auto;
  max-width: 90%;
  max-height: 90%;
}

/* Стили для изображений и видео внутри модального окна */
.modal-content-wrapper img,
.modal-content-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}

/* Кнопка закрытия модального окна */
/* Close button - Base styles */
.modal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: white; /* Цвет текста (крестика) */
    background-color: rgba(0, 0, 0, 0.6); /* Темный фон с прозрачностью */
    border: none;
    border-radius: 50%; /* Круглая форма */
    width: 35px; /* Размер кнопки */
    height: 35px;
    text-align: center;
    line-height: 35px; /* Выравнивание текста по центру */
    font-size: 20px; /* Размер текста */
    font-weight: bold; /* Жирный текст */
    cursor: pointer;
    opacity: 1; /* Кнопка всегда видима */
    transition: background-color 0.3s, transform 0.2s, opacity 0.3s;
    z-index: 1001; /* Поверх остальных элементов */
}

/* Hover effect - при наведении курсора */
.modal .close:hover {
    background-color: rgba(255, 0, 0, 0.8); /* Красный фон */
    color: white; /* Белый цвет текста */
    transform: scale(1.1); /* Увеличение кнопки */
}

/* Если нужно, чтобы крестик был чуть менее заметным, но все равно видимым */
.modal .close {
    opacity: 0.8; /* Чуть менее заметный по умолчанию */
}

.modal .close:hover {
    opacity: 1; /* Полностью видимый при наведении */
}

#mediaSliderContainer {
    display: none;
}
/* === Дополнительные стили для окна формульного редактора === */

/* Само окно re-использует общий класс .modal */
#formulaModal {
    /* Можно переопределить позицию/размер, если нужно */
    /* Изначально inherit'им стили от .modal, которую вы уже объявили выше */
}

/* Внутренняя обёртка для нашего контента */
#formulaModal .formula-content-wrapper {
    /* Переопределим базовые размеры под формульный редактор */
    margin: 5% auto;
    max-width: 600px;    /* Ширина окна */
    max-height: 80vh;    /* Высота окна */
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    padding: 20px;
    /* Можно добавить тень, если хотите */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Заголовок, если нужен */
#formulaModal .formula-content-wrapper h3 {
    margin-top: 0;
}

/* Чтобы редактор формул (например, MathLive) занимал место */
#formulaModal .math-editor-area {
    border: 1px solid #ccc;
    padding: 5px;
    min-height: 50px;
    margin-top: 10px;
}

/* Кнопка закрытия (можно переиспользовать .close или задать отдельно) */
#formulaModal .close {
    /* Можем просто наследовать стили из .modal .close */
    /* или переопределить что-то при желании */
    top: 10px;
    right: 10px;
}

/* Кнопка "Вставить формулу" */
#formulaModal .insert-formula-btn {
    background-color: #4CAF50;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}
#formulaModal .insert-formula-btn:hover {
    background-color: #45a049;
}
.pdf-section {
    margin-top: 0px;
    border: 1px solid #eee;
    border-radius: 8px;
    
}

#pdfContainer {
    min-height: 500px;
    background: #f5f5f5;
    overflow-y: auto;
    max-height: calc(100vh - 200px); 
}

#pdfContainer iframe {
    width: 100%;
    height: 100%;
    border: none;
}
#materialViewer {
    display: none;  /* Всегда скрыт от студента */
}
/* Ограничение размера изображений в сообщениях чата */

/* Скрываем скроллбары, но сохраняем прокрутку */
.left-pane,
.right-pane,
#chatMessages,
#materialViewer,
.canvas-container {
  /* Для Firefox */
  scrollbar-width: none;
  /* Для IE 10+ */
  -ms-overflow-style: none; 
}

/* Для Chrome/Safari/Edge/Opera */
.left-pane::-webkit-scrollbar,
.right-pane::-webkit-scrollbar,
#chatMessages::-webkit-scrollbar,
#materialViewer::-webkit-scrollbar,
.canvas-container::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}



/* Можно положить в original-styles.css */
#pdfContainer {
  /* 80% от высоты вьюпорта, можно скорректировать */
  height: 90vh!important;
  background-color: #f5f5f5;
  /* скроллбар для контейнера, если PDF выше 80vh */
 
  overflow-y: auto !important;
}

#pdfContainer::-webkit-scrollbar,
#pdfContainer embed::-webkit-scrollbar {
  display: none;
}

#pdfContainer {
  scrollbar-width: none; /* Firefox */
}

/* Изменение положения кнопки Test для десктопной версии */
#startTestBtn {
    display: block;
    width: 200px;
    margin: 20px auto;  /* Было 10px, увеличиваем отступ сверху */
    position: relative;
    top: -100px;        /* Отрицательное значение сдвигает кнопку вверх */
    z-index: 100;       /* Обеспечиваем, чтобы кнопка была поверх других элементов */
}

/* Убедимся, что поздравительное сообщение не будет конфликтовать с кнопкой */
.completion-animation {
    margin-bottom: 120px; /* Добавляем дополнительный отступ для поздравительного сообщения */
}