/* Мобильная оптимизация интервью и модальных окон */
@media (max-width: 768px) {
    /* Улучшенная структура модального окна для мобильных устройств */
    .modal-container {
        display: flex;
        flex-direction: column;
        max-height: 100vh;
        height: 100vh;
    }

    .modal-header {
        padding: 16px 20px;
        flex-shrink: 0;
    }

    .modal-title {
        font-size: 16px;
    }

    .close-modal {
        width: 28px;
        height: 28px;
    }

    .progress-section {
        padding: 12px 20px;
        flex-shrink: 0;
    }

    /* Чат-зона с правильной прокруткой */
    .chat-area {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px 20px;
        min-height: 0; /* Важно для flex */
        max-height: calc(100vh - 200px); /* Ограничиваем высоту */
    }

    /* Область ввода прижата к низу */
    .input-area {
        padding: 12px 20px;
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
    }

    .input-form {
        gap: 8px;
        display: flex;
        align-items: center;
    }

    .input-field {
        padding: 10px 14px;
        font-size: 14px;
        flex: 1;
    }

    .send-button {
        padding: 10px 20px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* Сообщения */
    .message {
        margin-bottom: 16px;
    }

    .message-text {
        font-size: 14px;
        padding: 12px 16px;
        max-width: 85%;
    }

    /* Кнопки выбора */
    .choices-container {
        gap: 8px;
        flex-direction: column;
    }

    .choice-button {
        padding: 10px 16px;
        font-size: 14px;
        width: 100%;
        text-align: left;
    }

    /* Модальное окно регистрации */
    .registration-modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        height: auto;
        max-height: 100vh;
        overflow-y: auto;
    }

    .modal-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }

    /* Модальное окно входа */
    .login-modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }
}

/* Дополнительная оптимизация для очень маленьких экранов */
@media (max-width: 480px) {
    .modal-header {
        padding: 12px 16px;
    }

    .modal-title {
        font-size: 15px;
    }

    .chat-area {
        padding: 12px 16px;
    }

    .input-area {
        padding: 10px 16px;
    }

    .message-text {
        font-size: 13px;
        padding: 10px 14px;
    }

    .choice-button {
        font-size: 13px;
        padding: 9px 14px;
    }

    .input-field {
        font-size: 13px;
        padding: 9px 12px;
    }

    .send-button {
        font-size: 13px;
        padding: 9px 16px;
    }
}

/* Исправление для iOS - предотвращаем масштабирование при фокусе на input */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        font-size: 16px !important; /* iOS не будет зум если >= 16px */
    }
}

/* Улучшенная прокрутка для iOS */
.chat-area,
.modal-container {
    -webkit-overflow-scrolling: touch;
}