/* Мобильная оптимизация интервью и модальных окон */
@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 {
        width: 44px;
        height: 44px;
        padding: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        overflow: hidden;
    }

    .send-btn-text { display: none; }
    .send-btn-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }

    /* Сообщения */
    .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;
    }

}

/* Исправление для 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;
}

/* ── Fullscreen interview on mobile ── */
@media (max-width: 768px) {
    #interviewModal.active {
        align-items: flex-end;
        padding: 0;
    }

    #interviewModal .modal-container {
        width: 100%;
        max-width: 100%;
        height: 96dvh;          /* dynamic viewport height — учитывает браузерный chrome */
        height: 96vh;
        border-radius: 20px 20px 0 0;
        margin: 0;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
    }

    #interviewModal .modal-header {
        padding: 14px 20px 10px;
        position: relative;
    }

    /* Drag handle */
    #interviewModal .modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(0,0,0,0.1);
    }

    #interviewModal .chat-area {
        flex: 1;
        min-height: 0;
    }

    #interviewModal .input-area {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .interview-privacy-note {
        font-size: 10px;
        padding-bottom: 4px;
    }
}