/* Correcciones responsivas para Pedro Chat Desktop */

.chat-input {
    position: sticky;
    bottom: 0;
    width: 100%;
    background: white;
    z-index: 100;
    padding: 15px;
}

.input-container {
    max-width: 100%;
    width: 100%;
}

.message-input {
    width: 100%;
    min-height: 40px;
    max-height: 120px;
    resize: none;
    overflow-y: auto;
}

.message-content {
    word-break: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 1024px) {
     html, body {
         height: auto;
         min-height: 100%;
         overflow-y: auto;
         overflow-x: hidden;
         -webkit-overflow-scrolling: touch;
     }

     .pedro-chat-container {
         height: auto;
         min-height: 100vh;
         min-height: 100dvh;
         min-height: calc(var(--vvh, 1vh) * 100);
     }

     .contenedor {
         height: auto;
         min-height: calc(var(--vvh, 1vh) * 100);
         max-height: none;
         overflow: visible;
     }

     .chat-section {
         height: auto;
         min-height: 0;
         max-height: none;
     }

     .important-disclaimer,
     .evolve-credits-desktop {
         position: static;
         left: auto;
         bottom: auto;
         transform: none;
         margin: 8px auto 10px auto;
     }
}

@media (max-width: 768px) {
     html, body {
         height: auto;
         min-height: 100%;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
     }

     .pedro-chat-container {
         height: auto;
         min-height: 100vh;
         min-height: 100dvh;
         min-height: calc(var(--vvh, 1vh) * 100);
     }

    .contenedor {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .products-section,
    .products-section.has-products {
        display: none !important;
    }

    .products-header {
        padding: 10px 12px !important;
    }

    .products-header .header-logo,
    .products-header .sodimac-logo {
        height: 26px !important;
    }

    .products-header h2 {
        font-size: 1rem !important;
    }

    .products-header p {
        font-size: 0.75rem !important;
    }

    #products-container {
        padding: 10px !important;
    }

    .chat-section {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100dvh !important;
        height: 100svh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        position: relative !important;
        flex: none !important;
    }

    .chat-header {
        position: relative !important;
        flex-shrink: 0 !important;
    }

    .chat-section::before {
        display: none !important;
    }

    .chat-messages-container {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }

    .chat-messages {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px !important;
        padding-bottom: 10px !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        word-wrap: break-word !important;
    }

    .product-card {
        min-width: 130px !important;
        max-width: 130px !important;
    }

    #chat-suggestions-wrapper .suggestion-pills {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 4px 8px 8px !important;
        align-items: center !important;
    }

    #chat-suggestions-wrapper .suggestion-pills::-webkit-scrollbar {
        display: none !important;
    }

    #chat-suggestions-wrapper .pill-btn {
        flex-shrink: 0 !important;
    }

    .chat-messages > * {
        flex-shrink: 0 !important;
        min-height: auto !important;
    }

    .product-inline-mobile {
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
        margin: 8px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .product-inline-mobile > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .chat-input {
        flex-shrink: 0 !important;
        position: relative !important;
        bottom: auto !important;
        padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
        z-index: 10 !important;
    }

    .message-input {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .important-disclaimer,
    .evolve-credits-desktop {
        position: static !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 6px auto 8px auto !important;
    }

    .input-container {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .input-buttons {
        display: flex !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    .chat-input {
        padding: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .input-container {
        padding: 5px 8px;
    }

    .message-input {
        padding: 8px;
        min-height: 36px;
        font-size: 16px;
    }

    .input-buttons {
        gap: 5px;
    }

    .input-btn {
        width: 32px;
        height: 32px;
    }

    .input-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (min-width: 769px) {
    .contenedor {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }

    .products-section {
        flex: 0 0 70%;
    }

    .chat-section {
        flex: 0 0 30%;
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 24px;
        padding-bottom: 15px;
        background: linear-gradient(180deg, #fafbfc 0%, #f8f9fa 100%);
        display: flex;
        flex-direction: column;
        gap: 18px;
        position: relative;
        min-height: 0;
        word-wrap: break-word;
        height: auto;
    }

    .message {
        max-width: 85%;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        width: fit-content;
        min-width: 120px;
        margin-bottom: 12px;
        flex-shrink: 0;
    }

    .message-content {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .user-message {
        align-self: flex-end;
        display: flex;
        flex-direction: column;
        width: fit-content;
        max-width: 85%;
        margin-left: auto;
        margin-right: 0;
    }

    .bot-message {
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        width: fit-content;
        max-width: 85%;
        margin-left: 0;
        margin-right: auto;
    }
}