/* Custom styles for Math Arena */
html,
body {
    height: 100%;
    overflow: hidden; /* Предотвращаем главную полосу прокрутки, если все рассчитано верно */
}

body {
    font-family: sans-serif;
    background-color: #f4f7f6; /* Очень светлый фон для всей страницы */
    /* padding-top: 56px; /* Отступ для fixed-top navbar. Будет применен ниже, если есть .navbar.fixed-top */
}

.page-content-wrapper {
    height: 100%; /* Занимает всю высоту body */
    overflow-y: auto; /* Добавляем прокрутку по умолчанию */
    /* padding-top для fixed-top navbar обрабатывается ниже */
}

/* Отступ для основного контента, если используется fixed-top navbar */
body > .navbar.fixed-top ~ .page-content-wrapper,
body > .navbar.fixed-top ~ .solve-task-page-layout { /* Добавлено и для прямого наследника, если page-content-wrapper уберут */
    padding-top: 56px; /* Высота стандартного навбара Bootstrap. */
    height: calc(100% - 56px); /* Уменьшаем высоту на высоту навбара */
}

/* Стили для страницы решения задачи (solve_task.html) - НОВЫЙ МАКЕТ */
.solve-task-page-layout {
    display: flex;
    flex-direction: column;
    height: 100%; /* Занимает всю высоту родителя (.page-content-wrapper) */
    background-color: #f0f0f0; /* Фон страницы задачи, можно изменить */
    overflow: hidden; /* Переопределяем, чтобы этот макет сам управлял прокруткой своих частей */
}

.task-header-fixed {
    flex-shrink: 0; /* Не сжиматься */
    position: sticky;
    top: 0; /* Прилипает к верху solve-task-page-layout */
    background-color: white;
    z-index: 100; /* Над контентом, но под главным навбаром, если бы он был sticky */
    border-bottom: 1px solid #dee2e6;
    width: 100%; /* Фон на всю ширину */
}

.task-content-scrollable {
    flex-grow: 1; /* Занимает все доступное пространство */
    overflow-y: auto;
    background-color: transparent; /* Фон берется от solve-task-page-layout или body */
    /* padding для внутреннего .container будет в HTML */
}

/* Убираем собственную прокрутку и ограничения высоты для области сообщений */
#chat-messages-area {
    min-height: auto; 
    max-height: none; 
    overflow-y: visible; 
    background-color: #ffffff; 
    padding: 15px;
    border: 1px solid #dee2e6; /* Возвращаем рамку, т.к. карточка убрана */
    border-radius: .25rem;
}

.chat-input-fixed-bottom {
    flex-shrink: 0; /* Не сжиматься */
    position: sticky;
    bottom: 0; /* Прилипает к низу solve-task-page-layout */
    background-color: white;
    z-index: 100;
    border-top: 1px solid #dee2e6;
    width: 100%; /* Фон на всю ширину */
}

/* Убираем рамку и фон у #chat-input-area, так как они теперь у родителя .chat-input-fixed-bottom */
#chat-input-area.card {
    border: none;
    background-color: transparent;
}
#chat-input-area {
    /* padding: 1rem; py-3 уже есть в HTML */
}


/* --- СТАРЫЕ СТИЛИ ЧАТА (оставляем то, что касается внешнего вида сообщений) --- */

.message-bubble {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    max-width: 90%; 
}

.message-content {
    padding: 0.3rem 0; 
    word-wrap: break-word;
    line-height: 1.5;
}

.user-message {
    align-items: flex-start; 
}

.user-message .message-content {}

.user-message .message-time {
    text-align: left; 
    font-size: 0.75rem; 
    color: #adb5bd;   
    margin-top: 3px;
}

.ai-message {
    margin-left: 20%; 
    max-width: calc(80% - 15px); 
}

.ai-message .message-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    width: 100%; 
}

.ai-message .message-content {
    background-color: #e0f0ff; 
    border-radius: 10px; 
    color: #004085; 
    padding: 0.5rem 0.75rem; 
    width: 100%; 
}

.ai-message .message-time {
    font-size: 0.75rem; 
    color: #adb5bd; 
    margin-top: 4px;
    padding-left: 0.25rem; 
}

.system-message .message-content {
    background-color: #fff3cd; 
    border-radius: 8px;
    padding: 0.3rem 0.75rem;
}

/* Убираем лишние отступы у группы радио-кнопок, если они есть от Bootstrap */
#chat-input-area .form-group > div:first-child .form-check:first-child {
    margin-left: 0;
}

/* Стили для страницы просмотра диалога администратором (view_dialog.html) */
.admin-view-card-green .card-body {
    background-color: #e6ffed; 
}
.admin-view-card-green .card-header {
    background-color: #c3e6cb; 
    color: #155724;
}

.admin-view-card-blue .card-body {
    background-color: #e0f0ff; 
}
.admin-view-card-blue .card-header {
    background-color: #b8daff; 
    color: #004085;
}

.text-ai-response-admin {
    color: #004085; 
}

/* Новый стиль для фона сообщений ИИ в логе администратора */
.admin-ai-message-background {
    background-color: #e0f0ff; /* Бледно-синий, такой же как у .ai-message .message-content и .admin-view-card-blue .card-body */
    border-radius: 0.25rem;    /* Стандартное скругление Bootstrap */
    /* Добавляем внутренние отступы для контента внутри блока с фоном */
    /* Класс pb-2 уже обеспечивает отступ снизу (0.5rem !important) */
    padding-top: 0.5rem;
    padding-left: 0.75rem;   /* Немного больше отступа по бокам, как у .message-content в чате пользователя */
    padding-right: 0.75rem;
}

/* Стили для плашек типов сообщений в админке */
.badge.badge-danger.badge-pill, .badge.bg-danger.rounded-pill {
    background-color: #dc3545 !important; 
    color: white;
}

.badge.badge-info.badge-pill, .badge.bg-info.rounded-pill {
    background-color: #17a2b8 !important; 
    color: white;
}

/* Удаленные стили для .solve-task-container, .sticky-task-header, .scrollable-task-content, так как они переопределены выше */

/* Стили для панели групповых сообщений */
#group-users-panel {
    border: 1px solid #c7d8f2;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background-color: #f5f9ff;
}

#group-users-panel .card-header {
    background-color: #dae5f7;
    border-bottom: 1px solid #c7d8f2;
    color: #2c5aa0;
}

#group-panel-header {
    cursor: pointer;
    user-select: none;
}

#group-panel-header:hover {
    background-color: #c9dbf5;
}

.toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.2s;
}

#group-panel-header .card-title {
    font-weight: 600;
}

#group-users-messages .list-group-item {
    border-left: none;
    border-right: none;
    padding: 0.75rem 1rem;
    background-color: #f5f9ff;
}

#group-users-messages .list-group-item:first-child {
    border-top: none;
}

.group-message-text {
    word-break: break-word;
}

/* Стили для индикации типов сообщений в панели групповых сообщений */
#group-users-messages .badge-danger {
    background-color: #dc3545;
}

#group-users-messages .badge-info {
    background-color: #17a2b8;
}

#group-users-messages .badge-secondary {
    background-color: #6c757d;
}