/* ============================================================
 * RAPSERVICE AI - RAPÍN CHAT WIDGET
 * Versión 20260827-01
 *
 * OBJETIVO:
 * - Mantener toda la funcionalidad actual.
 * - Incorporar identidad visual RAPÍN.
 * - Ampliar la experiencia en escritorio.
 * - Mantener pantalla completa en móvil.
 * - Mantener un único scroll de conversación.
 * - Mantener footer siempre disponible.
 * - Preparar tarjetas para imágenes de productos.
 * ============================================================ */


/* ============================================================
 * RESET
 * ============================================================ */

*{
    box-sizing:border-box;
}

body{
    margin:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:#f7f7f8;
    color:#1f2937;
}

button,
textarea,
input,
select{
    font-family:inherit;
}


/* ============================================================
 * PÁGINA DE PRUEBA
 * ============================================================ */

.rap-ai-demo-page{
    max-width:900px;

    margin:60px auto;

    padding:24px;
}


/* ============================================================
 * VARIABLES VISUALES RAPÍN
 * ============================================================ */

.rap-ai-widget{

    --rap-burdeos:#7b3144;

    --rap-burdeos-claro:#8f5061;

    --rap-rosa:#e9c4cf;

    --rap-rosa-suave:#f9edf1;

    --rap-crema:#fffaf7;

    --rap-verde:#166534;

    --rap-borde:#e5e7eb;

    --rap-texto:#1f2937;

    --rap-muted:#6b7280;
}


/* ============================================================
 * LAUNCHER
 * ============================================================ */

.rap-ai-launcher{
    position:fixed;

    right:24px;

    /*
     * RAPBot 20260827-01:
     * se eleva el launcher para no superponerse
     * con el carrito flotante de WooCommerce.
     */
    bottom:96px;

    z-index:99998;

    display:flex;
    align-items:center;

    gap:10px;

    min-height:58px;

    border:0;

    border-radius:999px;

    padding:
        7px
        18px
        7px
        7px;

    background:#7b3144;

    color:#fff;

    font-weight:800;
    font-size:14px;

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.20);

    cursor:pointer;

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease;
}


.rap-ai-launcher:hover{
    filter:brightness(.97);

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 38px
        rgba(0,0,0,.24);
}


/* ============================================================
 * AVATAR LAUNCHER
 * ============================================================ */

.rap-ai-launcher-avatar{
    width:44px;
    height:44px;

    flex:
        0
        0
        44px;

    display:block;

    object-fit:cover;

    object-position:
        center
        20%;

    border-radius:50%;

    border:
        2px solid
        rgba(255,255,255,.92);

    background:#fff;
}


/* ============================================================
 * PANEL PRINCIPAL
 * ============================================================ */

.rap-ai-widget{
    position:fixed;

    right:24px;
    bottom:94px;

    z-index:99999;

    /*
     * Experiencia ampliada.
     *
     * El ancho máximo deja de sentirse como
     * un pequeño chat de soporte.
     */
    width:min(
        700px,
        calc(100vw - 48px)
    );

    /*
     * Aprovecha prácticamente toda la altura
     * disponible sin tocar launcher.
     */
    height:min(
        860px,
        calc(100vh - 120px)
    );

    display:none;

    flex-direction:column;

    background:#fff;

    border:
        1px solid
        var(--rap-borde);

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.24);

    isolation:isolate;
}


.rap-ai-widget.is-open{
    display:flex;
}


/* ============================================================
 * HEADER
 * ============================================================ */

.rap-ai-header{
    flex:
        0
        0
        auto;

    min-height:82px;

    display:flex;

    justify-content:
        space-between;

    align-items:center;

    gap:16px;

    padding:
        12px
        18px;

    background:
        linear-gradient(
            100deg,
            #7b3144 0%,
            #8f5061 100%
        );

    color:#fff;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.08);
}


/* ============================================================
 * BRAND
 * ============================================================ */

.rap-ai-brand{
    display:flex;

    align-items:center;

    gap:13px;

    min-width:0;
}


.rap-ai-brand-copy{
    min-width:0;
}


.rap-ai-brand strong{
    display:block;

    margin:0;

    font-size:20px;

    font-weight:900;

    line-height:1.05;

    letter-spacing:.3px;
}


.rap-ai-brand small{
    display:block;

    margin-top:4px;

    opacity:.93;

    font-size:12px;

    font-weight:600;

    line-height:1.2;
}


/* ============================================================
 * AVATAR HEADER RAPÍN
 * ============================================================ */

.rap-ai-avatar{
    width:58px;
    height:58px;

    flex:
        0
        0
        58px;

    display:block;

    overflow:hidden;

    background:#fff;

    border-radius:50%;

    border:
        2px solid
        rgba(255,255,255,.92);

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.14);
}


.rap-ai-avatar-img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    /*
     * Priorizamos cabeza/rostro.
     * No mostramos todo el cuerpo.
     */
    object-position:
        center
        16%;

    transform:
        scale(1.14);

    background:#fff;
}


/* ============================================================
 * CERRAR
 * ============================================================ */

.rap-ai-icon-btn{
    width:38px;
    height:38px;

    flex:
        0
        0
        38px;

    display:grid;

    place-items:center;

    border:0;

    border-radius:50%;

    background:
        rgba(255,255,255,.08);

    color:#fff;

    font-size:27px;

    line-height:1;

    cursor:pointer;

    transition:
        background .15s ease;
}


.rap-ai-icon-btn:hover{
    background:
        rgba(255,255,255,.17);
}


/* ============================================================
 * CONVERSACIÓN
 * ============================================================ */

.rap-ai-messages{
    /*
     * ÚNICO SCROLL DEL CHAT.
     */

    flex:
        1
        1
        auto;

    min-height:0;

    overflow-y:auto;
    overflow-x:hidden;

    padding:
        22px
        22px
        26px;

    background:
        linear-gradient(
            180deg,
            #fbfcfd 0%,
            #f8fafc 100%
        );

    scrollbar-width:thin;

    scrollbar-color:
        #c5c9cf
        transparent;

    scroll-behavior:smooth;

    overscroll-behavior:
        contain;
}


.rap-ai-messages::-webkit-scrollbar{
    width:7px;
}


.rap-ai-messages::-webkit-scrollbar-track{
    background:
        transparent;
}


.rap-ai-messages::-webkit-scrollbar-thumb{
    background:#c5c9cf;

    border-radius:999px;
}


/* ============================================================
 * FILAS DE CONVERSACIÓN
 * ============================================================ */

.rap-ai-row{
    display:flex;

    width:100%;

    margin:
        7px
        0
        14px;
}


.rap-ai-row.user{
    justify-content:flex-end;
}


.rap-ai-row.bot{
    justify-content:flex-start;
}


/* ============================================================
 * BURBUJAS
 * ============================================================ */

.rap-ai-bubble{
    max-width:76%;

    padding:
        12px
        15px;

    border-radius:16px;

    font-size:14px;

    line-height:1.5;

    white-space:pre-wrap;

    word-break:break-word;
}


.rap-ai-row.bot .rap-ai-bubble{
    background:#fff;

    border:
        1px solid
        #e6e8ec;

    border-bottom-left-radius:
        5px;

    color:
        var(--rap-texto);

    box-shadow:
        0 3px 10px
        rgba(15,23,42,.04);
}


.rap-ai-row.user .rap-ai-bubble{
    background:
        #f5dfe5;

    color:#392028;

    border:
        1px solid
        #efd3db;

    border-bottom-right-radius:
        5px;

    box-shadow:
        0 2px 6px
        rgba(123,49,68,.05);
}


.rap-ai-typing{
    opacity:.7;

    font-size:13px;
}


/* ============================================================
 * QUICK ACTIONS
 * ============================================================ */

.rap-ai-quick-actions{
    /*
     * Forma parte físicamente del hilo.
     */

    display:block;

    width:100%;

    max-height:none;

    overflow:visible;

    padding:
        2px
        0
        10px;

    margin:0;

    background:
        transparent;
}


.rap-ai-quick-actions:empty{
    display:none;
}


.rap-ai-quick-actions::-webkit-scrollbar{
    display:none;
}


/* ============================================================
 * GRID DE TARJETAS
 * ============================================================ */

.rap-ai-card-grid{
    display:grid;

    /*
     * Todavía permite tarjetas de ancho completo.
     *
     * Cuando chat.js incorpore las imágenes,
     * podremos aprovechar 2 columnas cuando haya
     * varias alternativas.
     */
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:14px;

    width:100%;

    margin:
        6px
        0;
}


/*
 * Si sólo existe una tarjeta,
 * ocupa todo el ancho.
 */
.rap-ai-card-grid > :only-child{
    grid-column:
        1
        /
        -1;
}


/* ============================================================
 * TARJETAS
 * ============================================================ */

.rap-ai-card{
    width:100%;

    background:#fff;

    border:
        1px solid
        #e4e7ec;

    border-radius:15px;

    padding:15px;

    margin:
        7px
        0;

    box-shadow:
        0 4px 14px
        rgba(15,23,42,.055);

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


.rap-ai-card:hover{
    border-color:
        #d7dbe2;

    box-shadow:
        0 7px 20px
        rgba(15,23,42,.075);
}


.rap-ai-card h4{
    margin:
        0
        0
        8px;

    font-size:15px;

    line-height:1.35;

    color:#111827;
}


.rap-ai-meta{
    margin-top:3px;

    font-size:12px;

    color:#4b5563;

    line-height:1.5;
}


.rap-ai-price{
    margin-top:9px;

    font-size:20px;

    font-weight:900;

    color:#111827;
}


.rap-ai-total{
    margin-top:12px;

    padding-top:11px;

    border-top:
        1px solid
        #e5e7eb;

    font-size:18px;

    font-weight:900;

    color:#111827;
}


/* ============================================================
 * TARJETA SELECCIONADA
 * ============================================================ */

.rap-ai-card.selected{
    border:
        2px solid
        #166534;

    background:
        #ecfdf5;

    box-shadow:
        0 4px 14px
        rgba(22,101,52,.08);
}


/* ============================================================
 * PRODUCTOS - PREPARACIÓN PARA IMÁGENES
 *
 * Estas clases serán utilizadas en el próximo cambio de chat.js.
 * No afectan la lógica actual.
 * ============================================================ */

.rap-ai-product-card{
    display:grid;

    grid-template-columns:
        92px
        minmax(0,1fr);

    gap:14px;

    align-items:start;
}


.rap-ai-product-image-wrap{
    width:92px;
    height:92px;

    overflow:hidden;

    border-radius:12px;

    border:
        1px solid
        #edf0f4;

    background:#fff;
}


.rap-ai-product-image{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    padding:4px;
}


.rap-ai-product-info{
    min-width:0;
}


.rap-ai-product-name{
    font-size:14px;

    font-weight:800;

    line-height:1.35;

    color:#111827;
}


/* ============================================================
 * PROPUESTA / RESUMEN
 * ============================================================ */

.rap-ai-proposal{
    grid-column:
        1
        /
        -1;
}


/* ============================================================
 * BOTONES DE ACCIÓN
 * ============================================================ */

.rap-ai-action-btn{
    width:100%;

    min-height:42px;

    border:0;

    border-radius:10px;

    padding:
        10px
        13px;

    margin-top:10px;

    background:
        var(--rap-burdeos);

    color:#fff;

    font-weight:800;

    font-size:13px;

    cursor:pointer;

    transition:
        filter .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}


.rap-ai-action-btn:hover{
    filter:
        brightness(.96);

    box-shadow:
        0 3px 10px
        rgba(123,49,68,.18);
}


.rap-ai-action-btn:active{
    transform:
        scale(.99);
}


.rap-ai-action-btn.alt{
    background:#374151;
}


.rap-ai-action-btn.good{
    background:#166534;
}


.rap-ai-action-btn:disabled{
    opacity:.55;

    cursor:not-allowed;

    box-shadow:none;
}


/* ============================================================
 * LINKS
 * ============================================================ */

.rap-ai-link-btn{
    display:block;

    width:100%;

    min-height:42px;

    text-align:center;

    text-decoration:none;

    padding:
        11px
        13px;

    margin-top:10px;

    border-radius:10px;

    background:
        var(--rap-burdeos);

    color:#fff;

    font-weight:800;

    font-size:13px;
}


.rap-ai-link-btn:hover{
    filter:
        brightness(.95);
}


.rap-ai-link-btn.alt{
    background:#374151;
}


/* ============================================================
 * FOOTER
 * ============================================================ */

.rap-ai-footer{
    flex:
        0
        0
        auto;

    display:flex;

    align-items:flex-end;

    gap:10px;

    padding:
        12px
        16px;

    background:#fff;

    border-top:
        1px solid
        #e5e7eb;

    box-shadow:
        0 -3px 12px
        rgba(15,23,42,.035);
}


/* ============================================================
 * INPUT
 * ============================================================ */

.rap-ai-footer textarea{
    flex:1;

    resize:none;

    min-height:46px;

    max-height:120px;

    padding:
        12px
        14px;

    border:
        1px solid
        #d1d5db;

    border-radius:14px;

    outline:none;

    font:inherit;

    font-size:14px;

    line-height:1.4;

    background:#fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.rap-ai-footer textarea::placeholder{
    color:#8b919c;
}


.rap-ai-footer textarea:focus{
    border-color:
        var(--rap-burdeos);

    box-shadow:
        0 0 0 3px
        rgba(123,49,68,.10);
}


/* ============================================================
 * BOTÓN ENVIAR
 * ============================================================ */

.rap-ai-send{
    width:46px;
    height:46px;

    flex:
        0
        0
        46px;

    border:0;

    border-radius:50%;

    background:
        var(--rap-burdeos);

    color:#fff;

    display:grid;

    place-items:center;

    font-size:19px;

    cursor:pointer;

    box-shadow:
        0 4px 11px
        rgba(123,49,68,.20);

    transition:
        transform .15s ease,
        filter .15s ease;
}


.rap-ai-send:hover{
    filter:
        brightness(.95);

    transform:
        translateY(-1px);
}


.rap-ai-send:disabled{
    opacity:.55;

    cursor:not-allowed;

    transform:none;
}


/* ============================================================
 * FOOTER TOOLS
 * ============================================================ */

.rap-ai-footer-tools{
    flex:
        0
        0
        auto;

    min-height:38px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:8px;

    padding:
        5px
        16px
        10px;

    background:#fff;

    font-size:11px;

    color:
        var(--rap-muted);
}


.rap-ai-text-btn{
    border:0;

    padding:0;

    background:
        transparent;

    color:
        var(--rap-burdeos);

    font-weight:800;

    cursor:pointer;
}


/* ============================================================
 * DESKTOP GRANDE
 * ============================================================ */

@media (min-width:1200px){

    .rap-ai-widget{

        width:min(
            760px,
            calc(100vw - 60px)
        );

        height:min(
            900px,
            calc(100vh - 118px)
        );
    }

}


/* ============================================================
 * MONITORES BAJOS
 * ============================================================ */

@media (
    min-width:601px
)
and (
    max-height:780px
){

    .rap-ai-widget{

        top:14px;

        bottom:auto;

        height:
            calc(
                100vh - 28px
            );
    }

}


/* ============================================================
 * TABLET
 * ============================================================ */

@media (
    min-width:601px
)
and (
    max-width:850px
){

    .rap-ai-widget{

        right:12px;

        width:
            calc(
                100vw - 24px
            );

        height:
            calc(
                100vh - 112px
            );
    }


    .rap-ai-card-grid{

        grid-template-columns:
            1fr;
    }

}


/* ============================================================
 * MOBILE
 * ============================================================ */

@media (max-width:600px){

    .rap-ai-launcher{

        right:12px;

        /*
         * Evita superposición con el botón del carrito
         * y con la barra inferior del dispositivo.
         */
        bottom:max(
            92px,
            calc(
                76px + env(safe-area-inset-bottom)
            )
        );

        width:58px;

        height:58px;

        min-height:58px;

        justify-content:center;

        padding:5px;
    }


    .rap-ai-launcher span{
        display:none;
    }


    .rap-ai-launcher-avatar{

        width:48px;

        height:48px;

        flex:
            0
            0
            48px;
    }


    .rap-ai-widget{

        right:0;

        bottom:0;

        top:auto;

        width:100vw;

        height:100dvh;

        max-width:none;

        max-height:none;

        border-radius:0;

        border:0;
    }


    .rap-ai-header{

        min-height:74px;

        padding:
            max(
                9px,
                env(
                    safe-area-inset-top
                )
            )
            13px
            9px;
    }


    .rap-ai-avatar{

        width:50px;

        height:50px;

        flex:
            0
            0
            50px;
    }


    .rap-ai-brand{

        gap:9px;
    }


    .rap-ai-brand strong{

        font-size:18px;
    }


    .rap-ai-brand small{

        font-size:11px;
    }


    .rap-ai-messages{

        padding:
            14px
            12px
            18px;
    }


    .rap-ai-bubble{

        max-width:88%;

        font-size:14px;
    }


    /*
     * Una tarjeta por línea en móvil.
     */
    .rap-ai-card-grid{

        grid-template-columns:
            1fr;

        gap:9px;
    }


    .rap-ai-card{

        padding:13px;
    }


    /*
     * Imagen de producto algo más pequeña
     * para aprovechar el ancho disponible.
     */
    .rap-ai-product-card{

        grid-template-columns:
            82px
            minmax(0,1fr);

        gap:11px;
    }


    .rap-ai-product-image-wrap{

        width:82px;

        height:82px;
    }


    .rap-ai-footer{

        padding:
            9px
            10px;
    }


    .rap-ai-footer textarea{

        min-height:44px;

        padding:
            11px
            12px;
    }


    .rap-ai-send{

        width:44px;

        height:44px;

        flex:
            0
            0
            44px;
    }


    .rap-ai-footer-tools{

        padding:
            4px
            10px
            max(
                9px,
                env(
                    safe-area-inset-bottom
                )
            );
    }

}


/* ============================================================
 * MOBILE MUY PEQUEÑO
 * ============================================================ */

@media (max-width:380px){

    .rap-ai-bubble{

        max-width:92%;
    }


    .rap-ai-product-card{

        grid-template-columns:
            72px
            minmax(0,1fr);
    }


    .rap-ai-product-image-wrap{

        width:72px;

        height:72px;
    }

}

/* ============================================================
 * RAPÍN - CONTEXTO DE COMUNA
 * Versión 20260825-05
 * ============================================================ */

.rap-ai-location{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    min-height:48px;

    padding:8px 16px;

    background:#fff7f8;

    border-bottom:1px solid #eadde1;

    color:#374151;
}

.rap-ai-location-main{
    display:flex;
    align-items:center;
    gap:8px;

    min-width:0;
}

.rap-ai-location-pin{
    flex:0 0 auto;

    font-size:16px;
    line-height:1;
}

.rap-ai-location-copy{
    display:flex;
    align-items:baseline;
    gap:5px;

    min-width:0;

    font-size:13px;
    line-height:1.25;
}

.rap-ai-location-copy span{
    color:#6b7280;
    white-space:nowrap;
}

.rap-ai-location-copy strong{
    color:#7b3144;
    font-size:14px;
    font-weight:800;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.rap-ai-location-badge{
    flex:0 0 auto;

    display:inline-flex;
    align-items:center;
    gap:4px;

    padding:5px 9px;

    border-radius:999px;

    background:#ecfdf5;
    color:#166534;

    border:1px solid #bbf7d0;

    font-size:11px;
    font-weight:800;

    white-space:nowrap;
}


/* Fazt */

.rap-ai-location-badge.fazt{
    background:#ecfdf5;
    color:#166534;
    border-color:#bbf7d0;
}


/* Rapservice programado */

.rap-ai-location-badge.rapservice{
    background:#fff7ed;
    color:#9a3412;
    border-color:#fed7aa;
}


/* Despacho nacional */

.rap-ai-location-badge.nacional{
    background:#eff6ff;
    color:#1d4ed8;
    border-color:#bfdbfe;
}


/* ============================================================
 * MOBILE
 * ============================================================ */

@media (max-width:600px){

    .rap-ai-location{
        min-height:44px;

        padding:7px 12px;

        gap:7px;
    }

    .rap-ai-location-main{
        gap:5px;
    }

    .rap-ai-location-copy{
        display:block;

        font-size:11px;
        line-height:1.15;
    }

    .rap-ai-location-copy span{
        display:block;
    }

    .rap-ai-location-copy strong{
        display:block;

        margin-top:2px;

        font-size:13px;
    }

    .rap-ai-location-badge{
        padding:4px 7px;

        font-size:10px;
    }

}

/* ============================================================
 * RAPBOT - POSICION FINAL FORZADA
 * TEST 20260827
 * ============================================================ */

@media (max-width:600px){

    body .rap-ai-launcher{
        position:fixed !important;
        right:12px !important;
        bottom:160px !important;
        top:auto !important;
        left:auto !important;
        z-index:9999999 !important;
    }

}