/**
 * responsive.css - Media Queries e Responsividade
 * BO Inteligente v1.0
 */

/* ============================================ */
/* RESPONSIVIDADE GLOBAL */
/* ============================================ */

/* Header responsivo */
@media (max-width: 480px) {
    header {
        padding: 12px 16px;
    }

    header h1 {
        font-size: 18px;
    }

    header p {
        font-size: 12px;
    }
}

/* Container principal responsivo */
@media (max-width: 768px) {
    main {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    main {
        padding: 8px;
    }
}

/* -------------------------------------------- */
/* PROGRESS STRIP - RESPONSIVIDADE (v0.16.0) */
/* -------------------------------------------- */

@media (max-width: 768px) {
    .progress-strip {
        height: 6px;
    }

    .progress-strip__context {
        height: 32px;
        padding: 0 12px;
    }

    .progress-strip__context-name {
        font-size: 13px;
    }

    .progress-strip__context-count {
        font-size: 12px;
    }

    .progress-strip-container {
        margin-bottom: 8px;
    }

    .progress-strip__drawer-row {
        padding: 8px 10px;
    }

    .progress-strip__drawer-name {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .progress-strip {
        height: 5px;
    }

    .progress-strip__context {
        height: 30px;
        padding: 0 10px;
    }

    .progress-strip__context-emoji {
        font-size: 14px;
    }

    .progress-strip__context-name {
        font-size: 12px;
    }

    .progress-strip__context-count {
        font-size: 11px;
    }

    .progress-strip__drawer-content {
        padding: 12px;
    }

    .progress-strip__drawer-icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}

/* Modo paisagem em mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .progress-strip {
        height: 4px;
    }

    .progress-strip__context {
        height: 28px;
    }

    .progress-strip-container {
        margin-bottom: 4px;
    }
}

/* -------------------------------------------- */
/* SECTION CONTAINER - RESPONSIVIDADE */
/* -------------------------------------------- */

@media (max-width: 768px) {
    .section-container {
        height: calc(100vh - 90px);
        min-height: 350px;
        border-radius: 12px;
    }

    .section-chat {
        padding: 12px;
        gap: 12px;
    }

    .chat-message--bot,
    .chat-message--user {
        max-width: 90%;
    }

    .chat-message__bubble--bot {
        padding: 12px 14px;
        border-radius: 12px 12px 12px 4px;
    }

    .chat-message__bubble--user {
        padding: 12px 28px 12px 14px;
        border-radius: 12px 12px 4px 12px;
    }

    .chat-message.chat-message--editing {
        max-width: 95%;
    }

    .chat-message__text {
        font-size: 14px;
    }

    .chat-message__hint {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .section-container {
        height: calc(100vh - 75px);
        min-height: 300px;
        border-radius: 8px;
    }

    .section-chat {
        padding: 10px;
        gap: 10px;
    }

    .chat-message--bot,
    .chat-message--user {
        max-width: 95%;
    }

    .chat-message__bubble--bot,
    .chat-message__bubble--user {
        padding: 10px 12px;
    }

    .chat-message__text {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Área de texto gerado */
    .section-generated {
        padding: 12px;
    }

    .section-generated__text {
        padding: 12px;
        font-size: 13px;
        max-height: 150px;
    }

    /* Transição */
    .section-transition {
        padding: 12px;
    }

    .section-transition__preview {
        padding: 12px;
    }

    .section-transition__preview-emoji {
        font-size: 24px;
    }

    .section-transition__preview-name {
        font-size: 14px;
    }
}

/* Desktop: Altura maior disponível */
@media (min-width: 1024px) {
    .section-container {
        height: calc(100vh - 180px);
        max-height: 85vh;
    }
}

/* Teclado virtual aberto (viewport reduzido) */
@media (max-height: 400px) {
    .section-container {
        height: calc(100vh - 60px);
        min-height: 200px;
    }

    .section-chat {
        max-height: 150px;
    }
}

/* -------------------------------------------- */
/* INPUTS - RESPONSIVIDADE */
/* -------------------------------------------- */

@media (max-width: 768px) {
    .input-component {
        padding: 12px;
    }

    /* Text Input */
    .text-input {
        flex-direction: column;
        gap: 10px;
    }

    .text-input__field {
        width: 100%; /* Mesma largura do botão */
        box-sizing: border-box; /* Inclui padding e border na largura */
        padding: 14px 16px;
        font-size: 16px; /* Evita zoom no iOS */
        border-radius: 10px;
        min-height: 80px; /* Altura mínima para mobile */
        max-height: 200px; /* Limite antes de scroll */
        overflow-y: auto; /* Scroll quando exceder max-height */
    }

    .text-input__field--date,
    .text-input__field--time {
        min-height: auto;
        max-height: none;
        overflow: visible;
    }

    .text-input__button {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
        min-height: 48px; /* Touch target */
    }

    .text-input__error {
        font-size: 13px;
    }

    /* Single Choice */
    .single-choice {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .single-choice__option {
        max-width: 48%;
        width: auto;
        flex: 1;
        padding: 16px 20px;
        min-height: 44px; /* Touch target */
        font-size: 16px;
    }

    .single-choice__icon {
        font-size: 22px;
    }

    /* Multiple Choice */
    .multiple-choice__option {
        padding: 14px 16px;
        min-height: 52px; /* Touch target */
    }

    .multiple-choice__checkbox {
        width: 26px;
        height: 26px;
    }

    .multiple-choice__label {
        font-size: 15px;
    }

    .multiple-choice__confirm {
        padding: 14px 20px;
        font-size: 16px;
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    .input-component {
        padding: 10px;
    }

    .text-input__field {
        padding: 12px 14px;
    }

    .single-choice__option {
        padding: 14px 16px;
    }

    .multiple-choice__option {
        padding: 12px 14px;
    }

    .multiple-choice__checkbox {
        width: 24px;
        height: 24px;
    }

    .multiple-choice__hint {
        font-size: 12px;
    }
}

/* -------------------------------------------- */
/* LOADING E TOASTS - RESPONSIVIDADE */
/* -------------------------------------------- */

@media (max-width: 480px) {
    #app-loading-overlay .loading-content {
        padding: 20px 24px;
        margin: 0 16px;
        border-radius: 10px;
    }

    #app-loading-overlay .loading-message {
        font-size: 14px;
    }

    .app-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        text-align: center;
    }
}

/* -------------------------------------------- */
/* TELA FINAL - RESPONSIVIDADE COMPLETA */
/* -------------------------------------------- */

@media (max-width: 768px) {
    .final-screen__header {
        padding: 16px 12px;
    }

    .final-screen__icon {
        font-size: 28px;
    }

    .final-screen__title {
        font-size: 18px;
    }

    .final-screen__subtitle {
        font-size: 13px;
    }

    .final-screen__content {
        padding: 16px;
    }

    .final-screen__summary {
        padding: 16px;
    }

    .final-screen__section-item {
        padding: 12px;
    }

    .final-screen__section-name {
        font-size: 13px;
    }

    .final-screen__text-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .final-screen__copy-btn {
        width: 100%;
        justify-content: center;
    }

    .final-screen__text-content {
        max-height: 300px;
        font-size: 13px;
    }

    .final-screen__actions {
        flex-direction: column;
        gap: 12px;
    }

    .final-screen__action-btn {
        padding: 16px 20px;
        font-size: 15px;
        min-height: 52px;
    }

    .final-screen__stats {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .final-screen__header {
        padding: 14px 10px;
    }

    .final-screen__icon {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .final-screen__title {
        font-size: 16px;
    }

    .final-screen__content {
        padding: 12px;
    }

    .final-screen__summary {
        padding: 12px;
        margin-bottom: 16px;
    }

    .final-screen__summary-title {
        font-size: 14px;
    }

    .final-screen__section-item {
        padding: 10px 12px;
        gap: 8px;
    }

    .final-screen__section-icon {
        font-size: 16px;
    }

    .final-screen__section-name {
        font-size: 12px;
    }

    .final-screen__section-status {
        font-size: 10px;
        padding: 3px 6px;
    }

    .final-screen__text-box {
        margin-bottom: 16px;
    }

    .final-screen__text-header {
        padding: 12px;
    }

    .final-screen__text-title {
        font-size: 14px;
    }

    .final-screen__text-content {
        padding: 12px;
        max-height: 250px;
    }

    .final-screen__text-section-title {
        font-size: 13px;
    }

    .final-screen__stat {
        font-size: 13px;
    }
}