:root {
    --primary-color: #00C8AD;
    --secondary-color: #f8f9fa;
    --text-color: #000000;
    --heading-color: #212529;
    --white-color: #ffffff;
    --light-text-color: #6c757d;
    --button-hover-color: #007f6e;
    --border-color: #dee2e6;
    --chat-bg-user: #e9f5ff;
    --chat-bg-ai: #f1f3f5;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--white-color);
    /* Sticky footer styles */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes at least full viewport height */
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px; /* Добавлены отступы для мобильных устройств */
}

/* Контейнеры для форм авторизации */
#register .container,
#login .container {
    max-width: 600px;
    padding: 0 20px;
    text-align: center;
}

#register h2,
#login h2 {
    margin-bottom: 2rem;
    text-align: center;
}

/* Стили для сообщений об ошибках в формах */
.auth-form .error-message {
    color: #d32f2f;
    background-color: #ffebee;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #d32f2f;
    margin-bottom: 1.5rem;
    text-align: left;
    font-size: 0.95rem;
}

.auth-form .success-message {
    color: #2e7d32;
    background-color: #e8f5e9;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #2e7d32;
    margin-bottom: 1.5rem;
    text-align: left;
    font-size: 0.95rem;
}

.auth-form .info-message {
    color: #1976d2;
    background-color: #e3f2fd;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #1976d2;
    margin-bottom: 1.5rem;
    text-align: left;
    font-size: 0.95rem;
}

/* Улучшенная адаптивность для контейнеров */
@media (max-width: 576px) {
    .container {
        padding: 0 15px;
    }
}

section {
    padding: 60px 0; /* Увеличен отступ для лучшей визуальной иерархии */
}

/* Специальные отступы для секций с формами */
#register,
#login {
    padding: 80px 0;
}

/* Адаптивные отступы для секций */
@media (max-width: 768px) {
    section {
        padding: 40px 0;
    }
    
    #register,
    #login {
        padding: 50px 0;
    }
    
    form {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    section {
        padding: 30px 0;
    }
    
    #register,
    #login {
        padding: 40px 0;
    }
    
    form {
        padding: 1.25rem;
    }
    
    .container {
        padding: 0 15px;
    }
}

section:nth-of-type(even) {
    background-color: var(--secondary-color);
}

#chat-demo {
    background-color: var(--white-color);
}

h1, h2, h3 {
    color: var(--heading-color);
    margin-bottom: 1rem;
    line-height: 1.3;
    font-weight: 600;
}
h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
}
h2 {
    font-size: 2rem;
    text-align: center;
}
h3 { font-size: 1.3rem; color: var(--primary-color); margin-bottom: 0.75rem; }

p {
    color: var(--text-color);
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}
a:hover {
    color: var(--button-hover-color);
}

.text-center {
    text-align: center;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mt-2 {
    margin-top: 1rem;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    background-color: var(--button-hover-color);
    color: var(--white-color);
    transform: translateY(-2px);
}
.btn:disabled {
    background-color: #adb5bd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

header {
    background-color: var(--white-color);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}


header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Занимает всю ширину header */
    /* max-width: 1140px;  Убираем */
    /* margin: 0 auto;     Убираем */
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--heading-color);
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.02);
    color: var(--primary-color)
}

.logo img {
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
}

/* Navigation styles */
header nav {
    display: flex;
    align-items: center;
    width: auto;         
    margin-left: 30px; /* Добавлено: отступ от логотипа (можно настроить) */
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

header nav ul li {
    margin-left: 30px;
}

header nav ul li:first-child {
    margin-left: 0;
}

header nav ul li a {
    color: var(--text-color);
    font-weight: 500;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
}

header nav ul li a:hover {
    color: var(--primary-color);
}

header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

header nav ul li a:hover::after {
    width: 100%;
}

/* Стили для блока аутентификации (заменяют .nav-right) */
.auth-navigation {
    display: flex;
    align-items: center;
}

.auth-navigation span { /* Стиль для email пользователя */
    margin-right: 15px;
    color: var(--light-text-color);
    font-weight: 500;
}

.auth-navigation a { /* Общие стили для кнопок Вход/Регистрация/Выход */
    margin-left: 10px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Стили для кнопки "Вход" */
.auth-navigation a[href*="/login"] {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background-color: transparent;
}
.auth-navigation a[href*="/login"]:hover {
     background-color: rgba(0, 200, 173, 0.1);
}

/* Стили для кнопок "Регистрация" и "Выход" */
.auth-navigation a[href*="/register"],
.auth-navigation a[href*="/logout"] {
    color: var(--white-color);
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}
.auth-navigation a[href*="/register"]:hover,
.auth-navigation a[href*="/logout"]:hover {
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




/* Адаптивность для навигации */
@media (max-width: 768px) {
    header nav {
        width: auto;
        flex-direction: column;
        align-items: flex-end;
    }
    
    header nav ul {
        margin-bottom: 10px;
    }
    
    header nav ul li { /* <--- Эти стили можно оставить или скорректировать отступы */
        margin-left: 15px;
    }
}

@media (max-width: 576px) {
    header .container {
        flex-direction: column;
        text-align: center;
    }
    
    .logo {
        margin-bottom: 10px;
    }
    
    header nav {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    
    header nav ul {
        margin-bottom: 15px;
    }
    
    header nav ul li {
        margin: 0 10px;
    }
    
}

main {
    flex-grow: 1; /* This makes the main content area expand to fill available space */
}

#hero {
    background-color: var(--secondary-color);
    text-align: center;
    padding: 10px 0;
    min-height: 35vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#hero h1 {
    margin-bottom: 1.5rem;
    max-width: 800px;
}

#hero p {
    font-size: 1.1rem;
    color: var(--light-text-color);
    max-width: 700px;
    margin: 0 auto 2rem auto;
}

#problem .container {
    max-width: 800px;
    text-align: center;
}
#problem p {
    color: var(--light-text-color);
    font-size: 1.1rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
}

.benefit-item {
    background-color: var(--white-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.benefit-item::before {
    content: '💡';
    display: block;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}
.benefit-item:nth-child(1)::before { content: '⏱️'; }
.benefit-item:nth-child(2)::before { content: '✍️'; }
.benefit-item:nth-child(3)::before { content: '🔍'; }
.benefit-item:nth-child(4)::before { content: '🎯'; }

.benefit-item h3 { margin-bottom: 0.5rem; }
.benefit-item p { font-size: 0.95rem; color: var(--light-text-color); }

#chat-demo .container {
    max-width: 80%;
}

.chat-interface {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
}

.chat-interface label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--heading-color);
}

/* Общие стили для всех полей ввода (input, textarea) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--white-color) !important; /* Белый фон для всех полей */
    color: var(--text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 200, 173, 0.1);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
    color: var(--light-text-color);
    opacity: 0.7;
}

/* Стили для форм */
form {
    background-color: var(--white-color);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
}

/* Форма чата должна быть широкой */
#chat-form {
    width: 100%;
    max-width: none;
    padding: 1.5rem 2rem;
    margin: 0;
    box-shadow: none;
    background-color: transparent;
}

/* Стили для меток форм */
label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--heading-color);
    font-size: 0.95rem;
}

/* Стили для групп полей в формах */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.chat-interface textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    min-height: 170px;
    resize: vertical;
    font-family: inherit;
    background-color: var(--white-color) !important;
    color: var(--text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.chat-interface textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 200, 173, 0.1);
}
.chat-interface textarea#requirements {
    min-height: 100px;
}

/* Стили для загрузки файлов */
.file-upload-section {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--secondary-color);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.file-upload-section:hover {
    border-color: var(--primary-color);
    background-color: rgba(0, 200, 173, 0.05);
}

.file-upload-label {
    display: inline-block;
    cursor: pointer;
}

.file-upload-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.file-upload-button:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.file-name {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
}

.remove-file-btn {
    background: none;
    border: none;
    color: #d32f2f;
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.9rem;
    padding: 0;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.remove-file-btn:hover {
    color: #b71c1c;
}

.chat-output {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-height: 350px;
    padding: 20px; /* Увеличен отступ */
    background-color: var(--secondary-color);
    overflow-y: auto;
    max-height: 500px; /* Увеличена максимальная высота */
    scroll-behavior: smooth; /* Плавная прокрутка */
}

/* Кастомный скроллбар для современного вида */
.chat-output::-webkit-scrollbar {
    width: 8px;
}

.chat-output::-webkit-scrollbar-track {
    background: var(--secondary-color);
    border-radius: 4px;
}

.chat-output::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.chat-output::-webkit-scrollbar-thumb:hover {
    background: var(--button-hover-color);
}
.chat-output p {
    margin-bottom: 1.2rem;
    padding: 0;
    border-radius: 0;
    max-width: 100%;
    word-wrap: break-word;
}

/* Контейнер для сообщений с красивым дизайном */
.chat-output .message-wrapper {
    display: flex;
    margin-bottom: 1.2rem;
    animation: fadeIn 0.3s ease-in;
}

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

.chat-output .message-wrapper.user-wrapper {
    justify-content: flex-end;
}

.chat-output .message-wrapper.ai-wrapper {
    justify-content: flex-start;
}

.chat-output .user-message {
    background: linear-gradient(135deg, #00C8AD 0%, #00a693 100%);
    color: #ffffff;
    padding: 14px 18px;
    border-radius: 18px 18px 4px 18px;
    max-width: 75%;
    text-align: left;
    white-space: pre-wrap;
    box-shadow: 0 2px 8px rgba(0, 200, 173, 0.2);
    position: relative;
    word-wrap: break-word;
    line-height: 1.5;
}

.chat-output .user-message::before {
    content: '👤';
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    opacity: 0.7;
}

.chat-output .ai-message {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: var(--text-color);
    padding: 14px 18px;
    border-radius: 18px 18px 18px 4px;
    max-width: 75%;
    text-align: left;
    line-height: 1.6;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 200, 173, 0.1);
    position: relative;
    word-wrap: break-word;
}

.chat-output .ai-message::before {
    content: '🤖';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    opacity: 0.7;
}

/* Адаптивность для иконок */
@media (max-width: 768px) {
    .chat-output .user-message::before,
    .chat-output .ai-message::before {
        display: none;
    }
    
    .chat-output .user-message,
    .chat-output .ai-message {
        max-width: 85%;
    }
}

.chat-output .ai-message strong {
    color: var(--primary-color);
    font-weight: 600;
}

.chat-output .ai-message h1,
.chat-output .ai-message h2,
.chat-output .ai-message h3 {
    margin-top: 0.8em;
    margin-bottom: 0.4em;
}

.chat-output .user-message strong {
    font-weight: 600;
    opacity: 0.95;
}

/* Стили для markdown контента в сообщениях ИИ */
.chat-output .ai-message h1,
.chat-output .ai-message h2,
.chat-output .ai-message h3 {
    color: var(--heading-color);
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.chat-output .ai-message h1 { font-size: 1.5em; }
.chat-output .ai-message h2 { font-size: 1.3em; }
.chat-output .ai-message h3 { font-size: 1.1em; }

.chat-output .ai-message ul,
.chat-output .ai-message ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.chat-output .ai-message li {
    margin: 0.3em 0;
}

.chat-output .ai-message code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.chat-output .ai-message pre {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 0.5em 0;
}

.chat-output .ai-message pre code {
    background-color: transparent;
    padding: 0;
}

.chat-output .ai-message blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 1em;
    margin: 0.5em 0;
    color: var(--light-text-color);
    font-style: italic;
}

.chat-output .ai-message a {
    color: var(--primary-color);
    text-decoration: underline;
}

.chat-output .ai-message a:hover {
    color: var(--button-hover-color);
}
.chat-output .placeholder {
    color: var(--light-text-color);
    text-align: left;
    font-style: italic;
    background-color: transparent;
}

#cta {
    background-color: var(--primary-color);
    color: var(--white-color);
    text-align: center;
    padding-top: 30px; 
    padding-bottom: 30px;
}

#cta h2 { color: var(--white-color); }
#cta p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 650px;
    margin: 0 auto 2.5rem auto;
    font-size: 1.1rem;
    font-weight: bold;
}

.cta-form {
    max-width: 500px;
    margin: 30px auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.cta-form input[type="email"] {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    background-color: var(--white-color);
    color: var(--text-color);
}
.cta-form input[type="email"]::placeholder { color: var(--light-text-color); }

.cta-form button {
    background-color: var(--white-color);
    color: var(--primary-color);
    width: 100%;
    font-weight: bold;
    padding: 15px 30px;
}

.cta-form button:hover {
    background-color: #eee;
    color: var(--button-hover-color);
    transform: translateY(0);
}

#verify-code-section {
    display: none; /* Скрываем секцию по умолчанию */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeIn 0.3s ease-in-out;
}

#verify-code-section h2 {
     color: var(--primary-color); /* Цвет заголовка */
     margin-bottom: 1rem;
}

#verify-code-section p {
     color: var(--text-color); /* Цвет текста */
     margin-bottom: 1rem;
}

#verify-code-section strong {
     color: var(--heading-color); /* Цвет выделенного текста (email) */
}


/* Стили для формы внутри секции ввода кода */
#verify-form-inline {
    max-width: 500px; /* Унаследует от родителя, но явно указываем */
    margin-top: 20px; /* Отступ от параграфа */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Отступы между элементами формы */
}

/* Стили для поля email в форме подтверждения (только для чтения) */
#verify-form-inline input[type="email"] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
    background-color: var(--white-color) !important; /* Белый фон */
    color: var(--text-color);
    cursor: default;
    opacity: 0.9; /* Легкая прозрачность для поля только для чтения */
}

/* Стили для поля ввода кода подтверждения */
#verify-form-inline input[type="text"]#verify-code-input {
    width: 100%; /* Ширина на всю доступную ширину контейнера */
    padding: 15px 20px; /* Отступы как у кнопки Участвую */
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1.2rem; /* Чуть крупнее шрифт для кода */
    text-align: center; /* Центрируем код */
    color: var(--text-color);
    /* Можно добавить specific max-width if desired, e.g., max-width: 150px; */
    /* Но width: 100% внутри flex-контейнера с max-width 500px тоже будет хорошо выглядеть */
}

/* Стили для кнопки "Подтвердить" (унаследует от .btn) */
#verify-form-inline button.btn {
     width: 100%; /* Кнопка на всю ширину формы */
     padding: 15px 30px;
     /* Можете переопределить цвета, если нужно */
     background-color: var(--primary-color);
     color: var(--white-color);
}
#verify-form-inline button.btn:hover {
    background-color: var(--button-hover-color);
    color: var(--white-color);
    transform: translateY(-2px);
}


/* Стили для сообщений об ошибке/успехе под формой */
#verify-message-inline {
    margin-top: 1.5rem;
    color: green; /* Цвет для успешных сообщений */
    font-weight: 500;
}
#verify-error-inline {
    margin-top: 1.5rem;
    color: red; /* Цвет для сообщений об ошибке */
    font-weight: 500;
}


/* Стили для секции успешного подтверждения */
#verification-success-message {
    display: none; /* Скрываем секцию по умолчанию */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeIn 0.3s ease-in-out;
}

#verification-success-message h2 {
    color: green; /* Цвет заголовка успеха */
    margin-bottom: 1rem;
}

#verification-success-message p {
    color: var(--text-color); /* Цвет текста */
    font-size: 1.1rem;
    margin-bottom: 1rem; /* Отступ между параграфами */
}

#verification-success-message p:last-child {
    margin-bottom: 0; /* Убираем нижний отступ у последнего параграфа */
}

/* Стили для кнопки "Вернуться на главную" (унаследует от .btn) */
#verification-success-message .btn {
     margin-top: 2rem; /* Отступ сверху */
}

/* Медиа-запросы для адаптивности (если нужно подправить что-то для этих секций на маленьких экранах) */
@media (max-width: 576px) {
    #verify-code-section,
    #verification-success-message {
        padding: 15px; /* Уменьшаем отступы на маленьких экранах */
    }
    #verify-form-inline input[type="email"],
    #verify-form-inline input[type="text"]#verify-code-input,
     #verify-form-inline button.btn {
         width: 100%; /* Убеждаемся, что поля и кнопка занимают всю ширину */
     }
}


.form-note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 15px;
}

/* Стили для сообщения обратной связи при подписке */
#subscribe-feedback-message {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Цвета для разных типов сообщений */
#subscribe-feedback-message.success {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

#subscribe-feedback-message.error {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

footer {
    background-color: var(--heading-color);
    color: #ccc;
    text-align: center;
    padding: 25px 0;
    font-size: 0.9rem;
    /* margin-top removed as flex-grow handles spacing */
    /* margin-top: 40px; */
}
footer p { margin-bottom: 0; color: rgba(255, 255, 255, 0.7); }


/* Cookie Consent Banner Styles */
#cookie-banner {
    display: none; /* Изначально скрываем, пока не проверим localStorage */
    position: fixed; /* Фиксированное положение относительно окна браузера */
    bottom: 20px; /* Отступ снизу */
    left: 20px; /* Отступ слева */
    /* Удаляем right: 0; чтобы ширина определялась свойством width */
    width: 25%; /* Ширина 25% от ширины видимой части окна браузера */
    max-width: 700px; /* Опционально: максимальная ширина, чтобы не был слишком большим на широких экранах */
    min-width: 550px; /* Опционально: минимальная ширина, чтобы текст не сильно сжимался на узких экранах */
    background-color: rgba(0, 0, 0, 0.85); /* Полупрозрачный темный фон */
    color: var(--white-color); /* Белый текст */
    padding: 15px; /* Внутренние отступы со всех сторон */
    text-align: left; /* Выравнивание текста по левому краю внутри баннера */
    z-index: 10000; /* Поверх всех остальных элементов */
    font-size: 0.95rem;
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Более выраженная тень */
}

#cookie-banner .container {
    /* Убираем центрирование, оставляем flexbox для выравнивания текста и кнопки */
    display: flex;
    align-items: center; /* Выравниваем элементы по центру по вертикали */
    justify-content: space-between; /* Распределяем пространство между текстом и кнопкой */
    flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку */
    gap: 10px; /* Уменьшаем расстояние между элементами */
    padding: 0; /* Убираем внутренние отступы контейнера, так как они уже есть у родителя #cookie-banner */
}

#cookie-banner p {
    margin-bottom: 0;
    color: var(--white-color);
    flex-grow: 1;
    /* max-width: calc(100% - 120px); Может потребоваться корректировка или удаление,
       если flex-grow и line-clamp уже достаточно управляют размером */
}
#cookie-banner a {
    color: var(--secondary-color);
    text-decoration: underline;
    font-weight: 500;
}

#cookie-banner a:hover {
    color: var(--white-color);
}

#cookie-banner button.btn {
    flex-shrink: 0;
    padding: 6px 15px; /* Уменьшаем отступы кнопки */
    background-color: var(--white-color);
    color: var(--primary-color);
    font-size: 0.85rem; /* Чуть меньше шрифт кнопки */
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#cookie-banner button.btn:hover {
    background-color: #eee;
    color: var(--button-hover-color);
}

/* Медиа-запрос для адаптивности: на маленьких экранах делаем баннер шире или на всю ширину */
@media (max-width: 768px) {
    #cookie-banner {
        left: 10px; /* Уменьшаем отступ слева */
        bottom: 10px; /* Уменьшаем отступ снизу */
        width: calc(100% - 20px); /* Ширина почти на весь экран с небольшими отступами */
        max-width: none; /* Убираем ограничение максимальной ширины */
        min-width: 0; /* Убираем минимальную ширину */
    }

    #cookie-banner .container {
        flex-direction: column; /* Элементы в столбец */
        gap: 10px;
    }

    #cookie-banner p {
        max-width: 100%; /* Параграф занимает всю ширину */
        text-align: center; /* Центрируем текст на маленьких экранах */
    }

    #cookie-banner button.btn {
        width: 100%; /* Кнопка на всю ширину контейнера баннера */
        max-width: 250px; /* Ограничиваем максимальную ширину кнопки */
    }
}


#cookie-banner .container {
    display: flex; /* Используем flexbox для размещения текста и кнопки в ряд */
    align-items: center; /* Выравниваем элементы по центру по вертикали */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку на маленьких экранах */
    gap: 15px; /* Расстояние между элементами (текст и кнопка) */
}

#cookie-banner p {
    margin-bottom: 0; /* Убираем нижний отступ у параграфа */
    color: var(--white-color); /* Цвет текста */
    flex-grow: 1; /* Позволяет параграфу занять доступное пространство */
    max-width: calc(100% - 120px); /* Ограничиваем максимальную ширину, оставляя место для кнопки */
}

#cookie-banner a {
    color: var(--secondary-color); /* Светлый цвет для ссылки */
    text-decoration: underline; /* Подчеркивание ссылки */
    font-weight: 500;
}

#cookie-banner a:hover {
    color: var(--white-color); /* Белый цвет при наведении */
}

#cookie-banner button.btn {
    /* Стили для кнопки "Окей" */
    flex-shrink: 0; /* Кнопка не будет сжиматься */
    padding: 8px 20px; /* Меньшие отступы, чем у основных кнопок */
    background-color: var(--white-color); /* Белый фон */
    color: var(--primary-color); /* Цвет текста кнопки - основной цвет сайта */
    font-size: 0.9rem;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#cookie-banner button.btn:hover {
    background-color: #eee; /* Легкое затемнение при наведении */
    color: var(--button-hover-color);
}

/* Медиа-запрос для маленьких экранов: ставим текст и кнопку друг под другом */
@media (max-width: 576px) {
    #cookie-banner .container {
        flex-direction: column; /* Элементы в столбец */
        gap: 10px; /* Уменьшаем расстояние */
    }
    #cookie-banner p {
        max-width: 100%; /* Параграф занимает всю ширину */
        margin-bottom: 5px; /* Отступ между параграфом и кнопкой */
    }
     #cookie-banner button.btn {
         width: 100%; /* Кнопка на всю ширину контейнера */
         max-width: 200px; /* Ограничиваем максимальную ширину кнопки */
     }
}


/* Styling for the About Project content */
#about-project .container {
     max-width: 900px;
     padding-top: 0px; /* Add padding-top to separate from header */
}

#about-project h2 {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--primary-color); /* Make main heading color primary */
}

#about-project .project-info-block {
    background-color: var(--secondary-color); /* Light background for info blocks */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px; /* Space between blocks */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    border-left: 5px solid var(--primary-color); /* Colored left border */
}

/* --- Стили для секции "Миссия, Видение, Ценности" на странице About --- */
.mission-vision-values {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Расстояние между блоками миссии/видения/ценностей */
    margin-top: 40px;
    padding: 20px;
    background-color: var(--secondary-color); /* Светлый фон для секции */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.mvv-block {
    padding: 25px;
    background-color: var(--white-color);
    border-left: 5px solid var(--primary-color); /* Акцентная полоса слева */
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.mvv-title {
    font-size: 1.8rem;
    color: var(--heading-color);
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.mvv-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
}

.mvv-block p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-color);
}

.values-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.values-list li {
    display: flex; /* Используем flexbox для выравнивания иконки и текста */
    align-items: flex-start; /* Выравнивание иконки по верхней части текста */
    margin-bottom: 20px; /* Отступ между пунктами ценностей */
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1.7; /* Улучшает читаемость многострочного текста */
}

.values-list li:last-child {
    margin-bottom: 0;
}

.value-icon-wrapper {
    width: 35px; /* Фиксированная ширина для контейнера иконки. Настройте по необходимости. */
    text-align: center; /* Центрируем иконку внутри контейнера */
    flex-shrink: 0; /* Контейнер не будет сжиматься */
    margin-right: 15px; /* Отступ справа от контейнера иконки до текста */
    display: flex; /* Используем flexbox внутри, чтобы выровнять иконку */
    align-items: flex-start; /* Выравниваем иконку по верхнему краю */
    justify-content: center; /* Центрируем иконку горизонтально */
    line-height: 0;
    /* Возможно, потребуется небольшая корректировка вертикального выравнивания.
       Если иконка слишком высоко, можно добавить padding-top или margin-top к .value-icon */
}

.fas {
    line-height: 2;
}

.value-icon {
    color: var(--primary-color);
    font-size: 1.5rem; /* Размер иконки */
    /* margin-right: 15px; - этот отступ теперь у .value-icon-wrapper */
    /* flex-shrink: 0; - это теперь у .value-icon-wrapper */
    /* margin-top: 3px; - если нужен, можно оставить, но лучше сначала проверить без него */
}

.values-list li span { /* Оборачиваем весь текстовый контент в span */
    flex-grow: 1; /* Позволяет текстовому блоку занимать все доступное пространство */
    white-space: normal; /* Разрешает обычный перенос текста */
    word-break: break-word; /* Позволяет переносить длинные слова */
}

.values-list li strong {
    color: var(--heading-color);
    font-weight: 600;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767.98px) {
    .values-list li {
        margin-bottom: 15px;
        font-size: 1rem;
    }

    .value-icon-wrapper {
        width: 30px; /* Немного уменьшим ширину на мобильных */
        margin-right: 10px;
    }

    .value-icon {
        font-size: 1.3rem;
    }
}

/* Дополнительные корректировки для общей секции intro, если нужно */
#about-project .about-header-intro {
    margin-bottom: 0px; /* Увеличим отступ после заголовка и перед новым блоком */
}


#about-project .project-info-block h3 {
    margin-top: 0; /* Remove top margin for h3 within block */
    color: var(--heading-color); /* Keep heading color */
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color); /* Separator line */
    padding-bottom: 5px;
}

#about-project .project-info-block p {
    margin-bottom: 0.5rem; /* Smaller margin for paragraphs within blocks */
    color: var(--text-color);
}

#about-project .project-info-block p:last-child {
    margin-bottom: 0; /* Remove bottom margin for last paragraph in block */
}

#about-project .market-assessment-link {
    display: inline-block; /* Make the link block-level for margin */
    margin-top: 15px; /* Space above the link */
}

#about-project a {
    color: var(--primary-color);
    text-decoration: underline;
}

#about-project a:hover {
    color: var(--button-hover-color);
}


/* Media Queries */
@media (min-width: 768px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }

    .benefits-grid { grid-template-columns: repeat(2, 1fr); }

    .cta-form { flex-direction: row; gap: 10px; }
    .cta-form input[type="email"] { flex-grow: 1; }
    .cta-form button { width: auto; }

    #about-project .project-info-block {
        padding: 20px; /* Ensure padding is adequate on larger screens */
    }
}

@media (min-width: 992px) {
    h1 { font-size: 3rem; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }

    section { padding: 40px 0; }
    #hero { padding: 60px 0; min-height: 60vh; }

    .btn { width: 100%; padding: 15px; }
    #hero .btn { margin-bottom: 1rem; }
    .cta-form button { width: 100%; }
    #chat-demo .btn { width: auto; }

    #about-project .project-info-block {
        padding: 15px; /* Adjust padding for smaller screens */
    }

    header nav ul li {
        margin-left: 10px; /* Reduce margin for nav items on small screens */
    }

    header .container {
        flex-direction: column; /* Stack logo and nav vertically on very small screens */
        gap: 10px;
    }
}

#privacy-policy .container {
    max-width: 900px; /* Такой же максимальный контейнер, как для страницы "О проекте" */
    padding-top: 30px; /* Отступ сверху */
    padding-bottom: 30px; /* Отступ снизу */
}

#privacy-policy h1 {
    text-align: center;
    margin-bottom: 3rem; /* Больший отступ после главного заголовка */
    color: var(--heading-color); /* Используем основной цвет заголовков */
    font-size: 2.2rem; /* Чуть меньше, чем главный H1 на Hero секции */
}

#privacy-policy h2 {
    color: var(--primary-color); /* Цвет для заголовков разделов */
    margin-top: 2rem; /* Отступ перед новым разделом */
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color); /* Линия-разделитель */
    padding-bottom: 5px;
    font-size: 1.6rem;
}

#privacy-policy p {
    margin-bottom: 1rem; /* Отступ после параграфа */
    line-height: 1.8; /* Увеличим межстрочный интервал для лучшей читаемости длинного текста */
    color: var(--text-color); /* Обычный цвет текста */
}

/* Стили для ссылок в подвале (если еще нет) */
 footer .container a {
    color: #ccc; /* Цвет ссылки в футере */
    text-decoration: underline;
    transition: color 0.3s ease;
 }

 footer .container a:hover {
    color: var(--white-color); /* Цвет ссылки в футере при наведении */
 }

 /* Медиа-запросы для адаптивности, если нужно */
 @media (max-width: 768px) {
     #privacy-policy h1 {
         font-size: 1.8rem;
     }
     #privacy-policy h2 {
         font-size: 1.4rem;
     }
     footer .container p {
         text-align: center; /* Центрируем текст в подвале на маленьких экранах */
     }
     footer .container p a {
          display: block; /* Ссылка на отдельной строке на маленьких экранах */
          margin-top: 5px;
     }
 }

/* Стили для форм авторизации и регистрации */
.auth-form {
    max-width: 100%;
    text-align: left;
}

.auth-form .btn-submit {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

/* Стили для чекбокса политики конфиденциальности */
.privacy-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

.privacy-checkbox input[type="checkbox"] {
    margin-top: 3px;
    cursor: pointer;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
}

.privacy-checkbox label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
    user-select: none;
    line-height: 1.5;
    margin-bottom: 0;
}

.privacy-checkbox a {
    color: var(--primary-color);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.privacy-checkbox a:hover {
    color: var(--button-hover-color);
}

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

/* Отступ сверху между основным текстом футера и контактами */
footer .contact-info {
    margin-top: 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Ссылки внутри contact-info (email и telegram) */
footer .contact-info a {
    color: #ccc;                /* цвет ссылок в футере */
    text-decoration: underline; /* подчёркнутые ссылки */
    transition: color 0.3s ease;
}

/* При наведении — белый цвет */
footer .contact-info a:hover {
    color: #fff;
}

/* Стили для иконки Telegram */
footer .contact-info img.telegram-icon {
    width: 22px;    /* ширина иконки */
    height: 22px;   /* высота иконки */
    vertical-align: middle; /* выравнивание по базовой линии текста */
    margin-left: 5px;       /* небольшой отступ слева от «|» */
    margin-right: 0; 
}

/* Чтобы весь блок footer оставался тёмным (существующий фон), цвет текста и ссылок установлен выше */

/* ==========================================================
   NEW STYLES FOR ABOUT PAGE (about.html) - Enhancements
   ========================================================== */

#about-project .section-subtitle { /* For H2s within new sections */
    text-align: center;
    font-size: 2.2rem; /* Prominent subtitle */
    color: var(--heading-color);
    margin-bottom: 2rem; 
    font-weight: 600;
    line-height: 1.3;
}

#about-project .column-title {
    font-size: 1.5rem;
    color: var(--heading-color);
    margin-bottom: 1.25rem;
    font-weight: 600;
}
#about-project .primary-accent-title {
    color: var(--heading-color);
}

#about-project .bg-light-shade {
    background-color: var(--secondary-color); /* Light gray background for some sections */
}

/* 1. About Header Intro - Leverages existing .section-title and .about-intro-text */
#about-project .about-header-intro {
    padding-top: 10px; /* Reduced from original to avoid too much space after global .container padding */
    padding-bottom: 0px;
    margin-bottom: 1rem; 
}
/* Existing .section-title and .about-intro-text from your CSS will apply here */


/* 2. Problem Definition Section (#problem-definition) */
#problem-definition .problem-solution-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: stretch; /* Make columns equal height if they have backgrounds */
}

@media (min-width: 768px) {
    #problem-definition .problem-solution-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

#problem-definition .problem-list-column,
#problem-definition .solution-text-column {
    background-color: var(--white-color);
    padding: 30px;
    border-radius: 10px; /* Softer radius */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    border-left: 4px solid var(--primary-color); /* Accent border */
}

#problem-definition .solution-text-column {
    border-left-color: var(--primary-color); /* Different accent for solution */
}

#problem-definition .problem-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

#problem-definition .problem-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.7;
}

#problem-definition .problem-list li:last-child {
    margin-bottom: 0;
}

#problem-definition .problem-icon {
    color: var(--primary-color);
    margin-right: 15px;
    font-size: 1.3em;
    margin-top: 3px;
    min-width: 22px; 
}

#problem-definition .solution-text-column p {
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 0;
}


/* 3. Problem Research Section (#problem-research) */
#problem-research .research-intro {
    font-size: 1.4rem;
    color: var(--light-text-color);
    margin-bottom: 2.5rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

#problem-research .research-cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px; /* Increased gap */
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    #problem-research .research-cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

#problem-research .research-card {
    background-color: var(--white-color);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: center;
    /* Using the existing card-style's top border */
    border-top: 4px solid var(--primary-color); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#problem-research .research-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

#problem-research .research-card-icon {
    display: block;
    font-size: 3rem; /* Larger Unicode icons */
    color: var(--primary-color);
    margin-bottom: 1rem;
}

#problem-research .research-card p {
    color: var(--text-color);
    font-size: 1rem; /* Slightly larger text */
    line-height: 1.7;
    margin-bottom: 0;
}

#problem-research .research-card p strong {
    color: var(--heading-color);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem; /* Slightly larger strong text */
}

#problem-research .survey-map-container {
    margin-top: 2rem; /* Space before map container */
}
#problem-research .survey-map-image {
    max-width: 100%; /* Ensure it's responsive */
    max-height: 450px; /* Optional: constrain height */
    width: auto; /* Maintain aspect ratio if height is constrained */
    height: auto;
    border-radius: 10px;
    margin-top: 10px; 
}
#problem-research .image-caption {
    font-size: 0.9rem;
    color: var(--light-text-color);
    margin-top: 0.75rem;
}
/* Ensure .img-fluid is defined if not from a framework */
.img-fluid { 
    max-width: 100%;
    height: auto;
}
.mt-4 { margin-top: 1.5rem !important; } /* if not from Bootstrap */


/* 4. How It Works Section (#how-it-works-about) */
#how-it-works-about .how-it-works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px; /* Increased gap */
}

@media (min-width: 576px) {
    #how-it-works-about .how-it-works-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    #how-it-works-about .how-it-works-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#how-it-works-about .how-it-works-step {
    background-color: var(--white-color);
    padding: 10px 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#how-it-works-about .how-it-works-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

#how-it-works-about .step-icon-container {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: var(--primary-color); 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 200, 173, 0.3);
}

#how-it-works-about .step-icon {
    font-size: 2.2rem; 
    color: var(--white-color); /* Icon color white on primary bg */
}

#how-it-works-about .how-it-works-step h5 {
    color: var(--heading-color);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

#how-it-works-about .how-it-works-step p {
    color: var(--text-color); /* Darker than light-text-color for better readability */
    font-size: 0.95rem;
    line-height: 1.7;
    flex-grow: 1;
    margin-bottom:0;
}

/* 5. Market Assessment Section (#market-assessment-detailed) */
#market-assessment-detailed .market-assessment-block {
    /* background-color: var(--white-color); Is applied by default as section has bg-light-shade */
    padding: 10px;
    border-radius: 10px;
    /* No shadow needed if section has a background and this block is white */
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.07); */
    max-width: 750px; 
    margin-left: auto;
    margin-right: auto;
}

#market-assessment-detailed .market-assessment-block h3 { /* section-subtitle is already styled */
    margin-bottom: 1.25rem; /* More space for subtitle */
}

#market-assessment-detailed .market-assessment-block p {
    color: var(--text-color);
    margin-bottom: 2rem; /* More space before button */
    font-size: 1.1rem; /* Slightly larger text */
    line-height: 1.8;
}

/* Using existing .btn.btn-outline and adding specific primary color variant if needed */
/* Ensure .btn.btn-outline is styled well in your main CSS. This is an example of extension. */
#about-project .btn.btn-primary-outline { 
    border-color: var(--primary-color);
    color: var(--heading-color);
    padding: 12px 30px; /* Match main button size */
    font-weight: 600; /* Bolder text */
}

#about-project .btn.btn-primary-outline:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-3px); /* Lift effect */
    box-shadow: 0 4px 12px rgba(0, 200, 173, 0.4); /* More pronounced shadow */
}

/* Ensure .doc-icon is styled as in your provided CSS */
#about-project .doc-icon {
    margin-right: 10px; /* More space for icon */
    font-size: 1.2em; 
    line-height: 1; 
}


/* Responsive adjustments */
@media (max-width: 991.98px) {
    #about-project .section-subtitle {
        font-size: 2rem;
    }
     #how-it-works-about .how-it-works-grid { /* 2 columns on tablet */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    #about-project .section-subtitle {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
    #problem-definition .problem-list-column,
    #problem-definition .solution-text-column {
        padding: 20px;
        border-left-width: 3px;
    }
    #problem-research .research-cards-container {
        /* grid-template-columns: 1fr; is default, but can be explicit */
         grid-template-columns: 1fr;
    }
     /* For small landscape, if you want 2 research cards: */
     @media (min-width: 576px) and (max-width: 767.98px) {
        #problem-research .research-cards-container {
             grid-template-columns: repeat(2, 1fr);
        }
    }

    #how-it-works-about .step-icon-container {
        width: 65px;
        height: 65px;
    }
    #how-it-works-about .step-icon {
        font-size: 1.9rem;
    }
    #how-it-works-about .how-it-works-step h5 {
        font-size: 1.15rem;
    }
}

@media (max-width: 575.98px) { /* Extra small screens */
    #about-project .about-section {
        padding: 35px 0;
    }
    #about-project .section-subtitle {
        font-size: 1.65rem;
    }
    /* All grids will naturally stack to 1 column due to grid-template-columns: 1fr; as base */
     #how-it-works-about .how-it-works-grid,
     #problem-research .research-cards-container,
     #problem-definition .problem-solution-grid {
        grid-template-columns: 1fr;
    }
}


/* app/static/css/style.css */

/* --- Стили для системы чатов --- */
#chat-layout {
    display: flex;
    gap: 20px;
    height: 112vh; /* Ограничиваем высоту для скролла */
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Важно, чтобы дочерние элементы не выходили за рамки */
}

#dialogs-panel {
    flex: 0 0 300px; /* Фиксированная ширина панели диалогов */
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background-color: var(--secondary-color);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.panel-header h2 {
    font-size: 1.4rem;
    margin-bottom: 0;
}

.btn-new-chat {
    width: 36px;
    height: 36px;
    font-size: 24px;
    font-weight: bold;
    color: var(--white-color);
    background-color: var(--primary-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    line-height: 36px; /* Для вертикального центрирования "+" */
    text-align: center;
}

.btn-new-chat:hover {
    background-color: var(--button-hover-color);
    transform: scale(1.1);
}

#dialogs-list {
    overflow-y: auto;
    flex-grow: 1;
    padding: 10px;
}

#no-chats-placeholder {
    padding: 20px;
    text-align: center;
    color: var(--light-text-color);
}

.dialog-item {
    padding: 15px;
    margin-bottom: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid transparent;
}

.dialog-item:hover {
    background-color: #e9ecef;
}

.dialog-item.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--button-hover-color);
}

.dialog-title {
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog-item.active .dialog-title {
    color: var(--white-color);
}

.dialog-date {
    font-size: 0.8rem;
    color: var(--light-text-color);
}

.dialog-item.active .dialog-date {
    color: rgba(255, 255, 255, 0.8);
}

#chat-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-placeholder-screen {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--light-text-color);
}

.placeholder-content {
    max-width: 730px;
}

.placeholder-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    opacity: 0.5;
}

/* Переопределяем старый .chat-interface, чтобы он вписался в новую структуру */
.chat-interface {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 40px;
    border: none;
    box-shadow: none;
    margin-top: 0;
    max-width: none;
}

.hidden {
    display: none !important; /* !important гарантирует, что элемент будет скрыт */
}

.chat-interface.hidden {
    display: none;
}

#chat-form {
    margin-top: 10px; /* Прижимает форму к низу */
    padding-top: 15px;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--border-color);
    width: 100%;
    max-width: none;
}



/* CSS для анимации многоточия */
.loading-dots span {
    animation: blink-animation 1.4s infinite;
    opacity: 0;
}

.loading-dots span:nth-child(1) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.4s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes blink-animation {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}



/* Обёртка */
#chat-wrapper {
  display: flex;
  position: relative;
}
/* Бургер‑кнопка */
.burger {
  display: none;
  /*position: absolute; */
  top: 10px; left: 10px;
  font-size: 1.5rem;
  background: none;
  border: none;
  z-index: 2000;
}
/* Панель диалогов */
#dialogs-panel {
  width: 280px;
  flex-shrink: 0;
  background: var(--secondary-color);
  border-right: 1px solid var(--border-color);
  transition: transform .3s ease;
}
/* Контейнер чата */
#chat-container {
  flex-grow: 1;
  position: relative;
}


/* Делает панель диалогов колонкой, а список — скроллируемым */
#dialogs-panel {
  display: flex;
  flex-direction: column;
  height: 100vh; /* чтобы занять всю высоту экрана */
}

#dialogs-list {
  flex: 1;            /* занять всё оставшееся место под заголовком */
  overflow-y: auto;   /* вертикальный скролл при переполнении */
  padding-right: 0.5rem; /* немного отступа справа, чтобы не «прилипали» скролл‑бар и текст */
}


/* Скрываем панель на мобилках */
@media (max-width: 768px) {
  .burger {
    display: block;
  }


  #dialogs-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    z-index: 1500;
  }
  /* когда открыт */
  #chat-wrapper.show-panel #dialogs-panel {
    transform: translateX(0);
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
  }
  /* затемнённый фон */
  #chat-wrapper.show-panel::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1400;
  }
}


/* В конец style.css */
@media (max-width: 768px) {
  /* Когда панель показана — прячем бургер */
  #chat-wrapper.show-panel .burger {
    display: none;
  }
}

.rename-dialog-btn {
    margin-left: 10px;
    font-size: 0.85em;
    background: none;
    border: none;
    color: #4a90e2;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.rename-dialog-btn:hover {
    color: #357ab8;
}

.dialog-title-input {
    font-size: 1em;
    padding: 2px 6px;
    border: 1px solid #4a90e2;
    border-radius: 4px;
    outline: none;
}