/* BOOKVIK AI Transformation - Базовая версия */
/* Применяется только к видимым элементам */

/* 1. ОСНОВА - Фон */
body {
    background-color: #10002b !important;
    background: linear-gradient(135deg, 
        #10002b 0%, 
        #1a0f2e 25%, 
        #10002b 50%, 
        #1a0f2e 75%, 
        #10002b 100%) !important;
    color: #ffffff !important;
    overflow-x: hidden !important;
}

.container {
    background: transparent !important;
}

/* 2. ЛЕВАЯ ПАНЕЛЬ */
.left-pane {
    background: rgba(15, 25, 45, 0.3) !important;
    border: 1px solid !important;
    border-image: linear-gradient(45deg, #ff2a6d, #05d9e8, #ff2a6d) 1 !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
}

.left-pane::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important; 
    left: -2px !important; 
    right: -2px !important; 
    bottom: -2px !important;
    background: linear-gradient(45deg, #ff2a6d, #05d9e8, #ff2a6d) !important;
    border-radius: 12px !important;
    z-index: -1 !important;
    filter: blur(4px) !important;
    opacity: 0.3 !important;
    animation: glow 3s ease-in-out infinite !important;
}

/* 3. ПРАВАЯ ПАНЕЛЬ */
.right-pane {
    background: rgba(15, 25, 45, 0.3) !important;
    border: 1px solid #ff2a6d !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
    padding: 5px !important; /* Уменьшили отступы панели */
    
    /* FLEX-ЦЕНТРИРОВАНИЕ (БЕЗ GAP) */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Центрирование по горизонтали */
    /* gap убрали - используем margin-bottom вместо этого */
}

.right-pane::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important; 
    left: -1px !important; 
    right: -1px !important; 
    bottom: -1px !important;
    background: linear-gradient(45deg, #ff2a6d, #05d9e8) !important;
    border-radius: 12px !important;
    z-index: -1 !important;
    filter: blur(2px) !important;
    opacity: 0.3 !important;
    animation: glow 3s ease-in-out infinite !important;
}

/* 4. ТАБЫ СВЕРХУ (Material/Drawing) */
.tab-buttons {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 20px !important;
}

.tab-btn {
    padding: 12px 24px !important;
    background: rgba(15, 25, 45, 0.8) !important;
    border: 1px solid #05d9e8 !important;
    color: #ffffff !important;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

.tab-btn.active {
    background: linear-gradient(45deg, #05d9e8, #ff2a6d) !important;
    box-shadow: 0 0 15px rgba(5, 217, 232, 0.3) !important;
}

.tab-btn:hover:not(.active) {
    background: rgba(5, 217, 232, 0.2) !important;
    box-shadow: 0 0 10px rgba(5, 217, 232, 0.2) !important;
}

/* 5. КНОПКА Start Chat */
#startChatBtn {
    background: linear-gradient(45deg, #05d9e8, #ff2a6d) !important;
    border: none !important;
    color: #ffffff !important;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 15px rgba(5, 217, 232, 0.3) !important;
    padding: 12px 20px !important;
}

#startChatBtn:hover {
    box-shadow: 0 0 25px rgba(5, 217, 232, 0.5) !important;
}

/* 5.1. КНОПКА Test */
#startTestBtn {
    background: linear-gradient(45deg, #05d9e8, #ff2a6d) !important;
    border: none !important;
    color: #ffffff !important;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 15px rgba(5, 217, 232, 0.3) !important;
    padding: 12px 20px !important;
    width: 200px !important;
    margin: 20px auto !important;
    position: relative !important;
    top: -100px !important;
    z-index: 100 !important;
}

#startTestBtn:hover {
    box-shadow: 0 0 25px rgba(5, 217, 232, 0.5) !important;
}

/* 6. ИНДИКАТОРЫ СВЕРХУ */
.indicators-container {
    background: rgba(15, 25, 45, 0.3) !important; /* Темный фон вместо белого */
    border: 1px solid #05d9e8 !important;
    border-radius: 12px !important;
    padding: 10px !important; /* Уменьшили padding */
    margin: 0 !important; /* Убираем margin - gap во flex справится */
    margin-bottom: 8px !important; /* Уменьшаем отступ с 20px до 8px */
    backdrop-filter: blur(10px) !important;
    position: relative !important;
}

/* ПЕРЕБИВАЕМ СТИЛИ ИЗ original-styles.css */
.progress-indicator, .score-indicator {
    background: rgba(15, 25, 45, 0.3) !important; /* Темный фон вместо #f5f5f5 */
    border: 1px solid #05d9e8 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin-bottom: 0 !important;
}

.indicators-container::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important; 
    left: -1px !important; 
    right: -1px !important; 
    bottom: -1px !important;
    background: linear-gradient(45deg, #05d9e8, #ff2a6d) !important;
    border-radius: 12px !important;
    z-index: -1 !important;
    filter: blur(2px) !important;
    opacity: 0.3 !important;
}

.progress-bar, .score-bar {
    height: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
}

.progress, .score-progress {
    background: linear-gradient(90deg, #05d9e8, #ff2a6d) !important;
    box-shadow: 0 0 10px rgba(5, 217, 232, 0.3) !important;
    height: 100% !important;
    transition: width 0.3s ease !important;
}

.progress-text, .score-text {
    color: #05d9e8 !important; /* Изменили с белого на голубой */
    font-size: 12px !important;
    text-align: center !important;
    margin-top: 5px !important;
    text-shadow: 0 0 5px #05d9e8 !important; /* Добавили свечение */
    font-weight: bold !important; /* Для лучшей читаемости */
}

/* НОВЫЕ КЛАССЫ ДЛЯ SCORE ИНДИКАТОРОВ */
.score-progress-green {
    background: #05d9e8 !important; /* Неоново-голубой для "хорошего" прогресса */
    box-shadow: 0 0 10px rgba(5, 217, 232, 0.5) !important;
    height: 100% !important;
    position: absolute !important;
    transition: width 0.3s ease !important;
    border-radius: 4px !important;
}

.score-progress-red {
    background: #ff2a6d !important; /* Неоново-розовый для "плохого" прогресса */
    box-shadow: 0 0 10px rgba(255, 42, 109, 0.5) !important;
    height: 100% !important;
    position: absolute !important;
    transition: width 0.3s ease !important;
    border-radius: 4px !important;
}

/* 7. ПОЛЕ ЧАТА */
#chatMessages {
    background: rgba(20, 30, 50, 0.5) !important;
    border: 1px solid rgba(5, 217, 232, 0.3) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    margin: 0 !important; /* Убираем margin - gap во flex справится */
    margin-bottom: 8px !important; /* Уменьшаем отступ с 20px до 8px */
    padding: 10px !important; /* Уменьшили padding */
}

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

.message.user {
    background-color: rgba(5, 217, 232, 0.2) !important;
    text-align: right !important;
}

.message.assistant {
    background-color: rgba(255, 42, 109, 0.2) !important;
    text-align: left !important;
}

/* 8. ПОЛЕ ВВОДА */
#userInput {
    background: rgba(20, 30, 50, 0.8) !important;
    border: 1px solid rgba(5, 217, 232, 0.5) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 12px !important;
    resize: none !important;
    outline: none !important;
}

#userInput::placeholder {
    color: #888888 !important;
}

#userInput:focus {
    border-color: #05d9e8 !important;
    box-shadow: 0 0 10px rgba(5, 217, 232, 0.2) !important;
}

/* 9. КОНТЕЙНЕР УПРАВЛЕНИЯ */
#controlsContainer {
    background: rgba(15, 25, 45, 0.3) !important;
    border: 1px solid #05d9e8 !important;
    border-radius: 12px !important;
    padding: 10px !important; /* Уменьшили padding */
    margin: 0 !important; /* Убираем margin - gap во flex справится */
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 0 15px rgba(5, 217, 232, 0.3) !important;
}

/* 10. КНОПКИ УПРАВЛЕНИЯ */
#sendBtn, #voiceBtn, #openFormulaBtn, #saveButton {
    background: linear-gradient(45deg, #05d9e8, #ff2a6d) !important;
    border: none !important;
    color: #ffffff !important;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 15px rgba(5, 217, 232, 0.3) !important;
    padding: 10px 20px !important;
}

#sendBtn:hover, #voiceBtn:hover, #openFormulaBtn:hover, #saveButton:hover {
    box-shadow: 0 0 25px rgba(5, 217, 232, 0.5) !important;
}

/* Кнопка записи звука в состоянии записи */
#voiceBtn.recording {
    background: linear-gradient(45deg, #ff2a6d, #ff4444) !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(255, 42, 109, 0.6) !important;
    animation: pulse-red 1s infinite !important;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(255, 42, 109, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 42, 109, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 42, 109, 0); }
}

/* 11. НАВИГАЦИОННЫЕ СТРЕЛКИ (адаптивное позиционирование) */
.neon-arrows-container {
    position: fixed !important; /* Возвращаем fixed */
    bottom: 20px !important;
    left: 30% !important; /* Базовое значение для средних экранов */
    transform: translateX(-50%) !important;
    background: rgba(10, 15, 30, 0.9) !important;
    border: 1px solid #05d9e8 !important;
    clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%) !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    backdrop-filter: blur(10px) !important;
    z-index: 10000 !important;
    box-shadow: 0 0 20px rgba(5, 217, 232, 0.3) !important;
}

/* Медиа-запросы для разных размеров экрана */
@media (min-width: 1600px) {
    /* Очень широкие экраны */
    .neon-arrows-container {
        left: 25% !important;
    }
}

@media (max-width: 1599px) and (min-width: 1200px) {
    /* Средние экраны */
    .neon-arrows-container {
        left: 30% !important;
    }
}

@media (max-width: 1199px) and (min-width: 900px) {
    /* Небольшие экраны */
    .neon-arrows-container {
        left: 32% !important;
    }
}

@media (max-width: 899px) {
    /* Маленькие экраны */
    .neon-arrows-container {
        left: 35% !important;
    }
}

.arrow-left, .arrow-right {
    width: 60px !important;
    height: 40px !important;
    background: rgba(15, 25, 45, 0.8) !important;
    border: 1px solid #05d9e8 !important;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important;
    font-size: 18px !important;
    border-radius: 0 !important; /* Убираем круглую форму */
}

/* Добавляем символы стрелок */
.arrow-left::after {
    content: '←' !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

.arrow-right::after {
    content: '→' !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

.arrow-left:hover, .arrow-right:hover {
    background: rgba(5, 217, 232, 0.2) !important;
    box-shadow: 0 0 15px rgba(5, 217, 232, 0.2) !important;
    transform: none !important; /* Убираем scale */
}

.arrow-left:hover::after, .arrow-right:hover::after {
    color: #05d9e8 !important;
}

.arrow-left.active, .arrow-right.active {
    background: linear-gradient(45deg, #05d9e8, #ff2a6d) !important;
    box-shadow: 0 0 15px rgba(5, 217, 232, 0.3) !important;
}

.page-counter {
    background: rgba(15, 25, 45, 0.8) !important;
    border: 1px solid #ff2a6d !important;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%) !important;
    padding: 8px 20px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    margin: 0 15px !important;
    font-family: 'Arial', sans-serif !important;
}

#current-page {
    color: #05d9e8 !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px #05d9e8 !important;
}

/* Убираем старые эффекты */
.arrow-left::before, .arrow-right::before {
    display: none !important;
}

.arrow-left svg, .arrow-right svg {
    display: none !important;
}

/* Отключаем старые анимации */
.arrow-left, .arrow-right {
    animation: none !important;
}

/* 12. АНИМАЦИЯ СВЕЧЕНИЯ */
@keyframes glow {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.7; 
    }
}

/* 13. СТИЛИ ДЛЯ ТЕСТОВ */
#questionText { 
    color: #ffffff !important; 
}

#questionText > div:first-child { 
    color: #05d9e8 !important; 
    font-weight: bold !important;
    text-shadow: 0 0 5px #05d9e8 !important;
}

#questionText > div:nth-child(2) { 
    color: #ffffff !important; 
}

/* ЗАГОЛОВОК ВОПРОСА (Question X of Y) */
.question-header, .test-progress, .question-number,
#questionContainer > div:first-child,
#questionContainer h3, #questionContainer h4 {
    color: #05d9e8 !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px #05d9e8 !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
}

/* СПЕЦИФИЧНЫЙ СЕЛЕКТОР ДЛЯ INLINE СТИЛЕЙ */
#questionContainer div[style*="color: #2c3e50"],
#questionContainer div[style*="margin-bottom: 15px"] {
    color: #05d9e8 !important;
    text-shadow: 0 0 10px #05d9e8 !important;
}

#questionContainer div[style*="color: #2c3e50"] strong,
#questionContainer div[style*="margin-bottom: 15px"] strong {
    color: #05d9e8 !important;
    text-shadow: 0 0 10px #05d9e8 !important;
    font-weight: bold !important;
}

.option-button { 
    background: rgba(15, 25, 45, 0.8) !important;
    color: #ffffff !important;
    border: 1px solid #05d9e8 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 5px 0 !important;
    transition: all 0.3s ease !important;
}

.option-button:hover {
    background: rgba(5, 217, 232, 0.2) !important;
    box-shadow: 0 0 10px rgba(5, 217, 232, 0.3) !important;
}

/* СОСТОЯНИЯ ОТВЕТОВ - ПРАВИЛЬНЫЕ/НЕПРАВИЛЬНЫЕ */
.option-button.correct {
    background: #4CAF50 !important; /* Зеленый для правильного ответа */
    color: #ffffff !important;
    border: 1px solid #4CAF50 !important;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5) !important;
}

.option-button.incorrect {
    background: #f44336 !important; /* Красный для неправильного ответа */
    color: #ffffff !important;
    border: 1px solid #f44336 !important;
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.5) !important;
}

/* Отключаем hover для уже отвеченных кнопок */
.option-button.correct:hover,
.option-button.incorrect:hover {
    background: inherit !important;
    box-shadow: inherit !important;
}

.score-display {
    color: #05d9e8 !important;
    text-shadow: 0 0 5px #05d9e8 !important;
    font-weight: bold !important;
}

/* 14. COMPLETION DIALOG WITH IMAGE SUPPORT */
.completion-container {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 20px !important;
    background: rgba(15, 25, 45, 0.3) !important;
    border: 1px solid !important;
    border-image: linear-gradient(45deg, #ff2a6d, #05d9e8, #ff2a6d) 1 !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
    max-width: 400px !important;
    box-shadow: 0 0 20px rgba(5, 217, 232, 0.3) !important;
    color: #ffffff !important;
}

.completion-container::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important; 
    left: -2px !important; 
    right: -2px !important; 
    bottom: -2px !important;
    background: linear-gradient(45deg, #ff2a6d, #05d9e8, #ff2a6d) !important;
    border-radius: 12px !important;
    z-index: -1 !important;
    filter: blur(4px) !important;
    opacity: 0.3 !important;
    animation: glow 3s ease-in-out infinite !important;
}

/* Image in completion dialog */
.completion-container img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(5, 217, 232, 0.3) !important;
    box-shadow: 0 0 10px rgba(5, 217, 232, 0.2) !important;
}

/* Text inside completion dialog */
.completion-container > div,
.completion-container p,
.completion-container span {
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3) !important;
    margin-top: 10px !important;
}

/* Headers inside dialog */
.completion-container h1,
.completion-container h2,
.completion-container h3,
.completion-container .title {
    color: #05d9e8 !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px #05d9e8 !important;
    margin-bottom: 15px !important;
}

/* Buttons inside completion dialog */
.completion-container button,
.completion-container .btn,
.completion-container input[type="button"] {
    background: linear-gradient(45deg, #05d9e8, #ff2a6d) !important;
    border: none !important;
    color: #ffffff !important;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 15px rgba(5, 217, 232, 0.3) !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    margin-top: 15px !important;
}

.completion-container button:hover,
.completion-container .btn:hover,
.completion-container input[type="button"]:hover {
    box-shadow: 0 0 25px rgba(5, 217, 232, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Alternative selector for specific text styling */
div[style*="color: #2c3e50"] {
    color: #ffffff !important;
    background: rgba(15, 25, 45, 0.3) !important;
    border: 1px solid !important;
    border-image: linear-gradient(45deg, #ff2a6d, #05d9e8, #ff2a6d) 1 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    position: relative !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3) !important;
}

div[style*="color: #2c3e50"]::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important; 
    left: -2px !important; 
    right: -2px !important; 
    bottom: -2px !important;
    background: linear-gradient(45deg, #ff2a6d, #05d9e8, #ff2a6d) !important;
    border-radius: 12px !important;
    z-index: -1 !important;
    filter: blur(4px) !important;
    opacity: 0.3 !important;
    animation: glow 3s ease-in-out infinite !important;
}