/* ==========================================================
   Hiper AI v4.0
========================================================== */

:root{

    --hiper-red:#e30613;
    --hiper-red-hover:#c60011;

    --bg:#f5f7fb;
    --white:#ffffff;

    --border:#e7e7e7;

    --text:#232323;
    --text-light:#6b7280;

    --shadow:
        0 18px 60px rgba(0,0,0,.16);

    --radius:22px;

}

/* ==========================================================
   WIDGET
========================================================== */

#mm-ai-widget{

    position:fixed;

    right:24px;
    bottom:24px;

    z-index:999999;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        sans-serif;

}

/* ==========================================================
   FLOATING BUTTON
========================================================== */

#mm-ai-floating-button{

    position:fixed;

    right:24px;
    bottom:24px;

    width:64px;
    height:64px;

    border:none;
    outline:none;

    border-radius:50%;

    background:var(--hiper-red);

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:.22s;

}

#mm-ai-floating-button:hover{

    transform:scale(1.05);

}

#mm-ai-floating-button img{

    width:64px;
    height:64px;

    display:block;

    pointer-events:none;

}

/* ==========================================================
   BUBBLE
========================================================== */

#mm-ai-bubble{

    position:fixed;

    right:102px;
    bottom:36px;

    background:#fff;

    color:#333;

    padding:14px 18px;

    border-radius:16px;

    font-size:14px;

    line-height:1.45;

    box-shadow:

        0 8px 28px rgba(0,0,0,.12);

    animation:mmBubble .4s ease;

    z-index:999998;

}

#mm-ai-bubble:after{

    content:"";

    position:absolute;

    right:-7px;
    bottom:18px;

    width:14px;
    height:14px;

    background:#fff;

    transform:rotate(45deg);

}

@keyframes mmBubble{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   CHAT
========================================================== */

#mm-ai-window{

    position:fixed;

    right:24px;
    bottom:24px;

    width:390px;
    height:620px;

    display:none;

    flex-direction:column;

    overflow:hidden;

    background:#fff;

    border-radius:22px;

    box-shadow:var(--shadow);

}

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

#mm-ai-header{

    height:70px;

    background:var(--hiper-red);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    color:#fff;

}

.mm-ai-header-left{

    display:flex;

    align-items:center;

}

.mm-ai-logo{

    width:42px;
    height:42px;

    border-radius:50%;

    background:#fff;

    margin-right:12px;

    object-fit:contain;

}

.mm-ai-title{

    font-size:18px;

    font-weight:700;

    line-height:1;

}

.mm-ai-status{

    margin-top:5px;

    display:flex;

    align-items:center;

    font-size:13px;

    color:#fff;

}

.mm-ai-online{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#38d26b;

    margin-right:6px;

}

#mm-ai-close{

    width:38px;
    height:38px;

    border:none;

    background:none;

    color:#fff;

    font-size:28px;

    cursor:pointer;

    transition:.2s;

}

#mm-ai-close:hover{

    transform:rotate(90deg);

}

/* ==========================================================
   CONVERSA
========================================================== */

#mm-ai-messages{

    flex:1;

    overflow-y:auto;

    padding:20px;

    background:var(--bg);

}

#mm-ai-messages::-webkit-scrollbar{

    width:6px;

}

#mm-ai-messages::-webkit-scrollbar-thumb{

    background:#d8d8d8;

    border-radius:30px;

}

/* ==========================================================
   MENSAGENS
========================================================== */

.mm-ai-message{

    display:flex;

    width:100%;

    margin-bottom:18px;

}

.mm-ai-message.ai{

    justify-content:flex-start;

}

.mm-ai-message.user{

    justify-content:flex-end;

}

.mm-ai-bubble{

    max-width:82%;

    padding:14px 16px;

    border-radius:18px;

    line-height:1.7;

    font-size:15px;

    word-break:break-word;

    overflow-wrap:anywhere;

}

.mm-ai-message.ai .mm-ai-bubble{

    background:#fff;

    color:#222;

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

    border-bottom-left-radius:8px;

}

.mm-ai-message.user .mm-ai-bubble{

    background:var(--hiper-red);

    color:#fff;

    border-bottom-right-radius:8px;

}

.mm-ai-bubble strong{

    font-weight:700;

}

.mm-ai-bubble em{

    font-style:italic;

}

.mm-ai-bubble code{

    background:#f1f1f1;

    padding:2px 5px;

    border-radius:5px;

    font-size:13px;

}

/* ==========================================================
   TYPING
========================================================== */

#mm-ai-typing{

    display:none;

    padding:0 20px 16px;

    background:var(--bg);

}

#mm-ai-typing .mm-ai-message{

    margin-bottom:0;

}

.mm-dot{

    display:inline-block;

    width:7px;
    height:7px;

    margin-right:4px;

    border-radius:50%;

    background:var(--hiper-red);

    animation:mmTyping .9s infinite alternate;

}

.mm-dot:nth-child(2){

    animation-delay:.2s;

}

.mm-dot:nth-child(3){

    animation-delay:.4s;

}

@keyframes mmTyping{

    from{

        opacity:.25;
        transform:translateY(0);

    }

    to{

        opacity:1;
        transform:translateY(-3px);

    }

}

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

#mm-ai-footer{

    display:flex;

    align-items:flex-end;

    gap:12px;

    padding:14px;

    background:#fff;

    border-top:1px solid var(--border);

}

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

#mm-ai-message{

    flex:1;

    min-height:44px;

    max-height:82px;

    height:44px;

    resize:none;

    overflow-y:auto;

    padding:11px 16px;

    border:1px solid #d8d8d8;

    border-radius:24px;

    outline:none;

    background:#fff;

    color:var(--text);

    font-size:15px;

    line-height:20px;

    font-family:inherit;

    box-sizing:border-box;

    transition:.20s;

    scrollbar-width:none;

}

#mm-ai-message::-webkit-scrollbar{

    display:none;

}

#mm-ai-message:focus{

    border-color:var(--hiper-red);

}

#mm-ai-message::placeholder{

    color:#888;

}

/* ==========================================================
   BOTÃO
========================================================== */

#mm-ai-send{

    width:96px;

    height:44px;

    flex-shrink:0;

    border:none;

    border-radius:22px;

    background:var(--hiper-red);

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.20s;

}

#mm-ai-send:hover{

    background:var(--hiper-red-hover);

    transform:translateY(-1px);

}

#mm-ai-send:active{

    transform:scale(.98);

}

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

.mm-ai-bubble a{

    color:var(--hiper-red);

    text-decoration:none;

    font-weight:600;

}

.mm-ai-bubble a:hover{

    text-decoration:underline;

}

/* ==========================================================
   LISTAS
========================================================== */

.mm-ai-bubble ul,
.mm-ai-bubble ol{

    margin:10px 0 10px 22px;

}

.mm-ai-bubble li{

    margin-bottom:6px;

}

/* ==========================================================
   TABELAS
========================================================== */

.mm-ai-bubble table{

    width:100%;

    border-collapse:collapse;

    margin-top:12px;

    font-size:14px;

}

.mm-ai-bubble th,
.mm-ai-bubble td{

    border:1px solid #e5e5e5;

    padding:8px;

    text-align:left;

}

.mm-ai-bubble th{

    background:#f5f5f5;

}

/* ==========================================================
   IMAGENS
========================================================== */

.mm-ai-bubble img{

    max-width:100%;

    border-radius:10px;

}

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

@media(max-width:768px){

    #mm-ai-window{

        width:calc(100vw - 20px);

        height:calc(100vh - 95px);

        right:10px;

        bottom:86px;

        border-radius:18px;

    }

    #mm-ai-header{

        height:64px;

    }

    .mm-ai-logo{

        width:38px;
        height:38px;

    }

    .mm-ai-title{

        font-size:17px;

    }

    #mm-ai-floating-button{

        width:64px;
        height:64px;

        right:16px;
        bottom:16px;

    }

    #mm-ai-floating-button img{

        width:64px;
        height:64px;

    }

    #mm-ai-bubble{

        right:92px;

        bottom:30px;

        max-width:220px;

        font-size:13px;

    }

    #mm-ai-footer{

        padding:12px;

        gap:10px;

    }

    #mm-ai-send{

        width:86px;

    }

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

.mm-ai-message{

    animation:mmFade .18s ease;

}

@keyframes mmFade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================================
   PRODUTOS HIPER AI
========================================================== */

.mm-ai-products{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin:18px 0;

}

.mm-ai-product-card{

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:18px;

    overflow:hidden;

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

    transition:.25s;

}

.mm-ai-product-card:hover{

    transform:translateY(-2px);

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

}

.mm-ai-product-image{

    display:block;

    width:100%;

    height:210px;

    object-fit:contain;

    background:#fff;

    padding:20px;

    box-sizing:border-box;

}

.mm-ai-product-name{

    padding:0 18px;

    margin-top:4px;

    font-size:17px;

    font-weight:700;

    color:#222;

    line-height:1.4;

}

.mm-ai-product-badge{

    display:inline-block;

    margin:14px 18px 0;

    padding:6px 12px;

    border-radius:30px;

    background:#e30613;

    color:#fff;

    font-size:13px;

    font-weight:600;

}

.mm-ai-product-badge.alternative{

    background:#28a745;

}

.mm-ai-product-buttons{

    display:flex;

    gap:10px;

    padding:18px;

    flex-wrap:wrap;

}
/* ==========================================================
   BOTÕES DOS PRODUTOS
========================================================== */

.mm-ai-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:1;

    min-width:140px;

    height:46px;

    border-radius:10px;

    background:#e30613;

    color:#fff !important;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.mm-ai-btn:hover{

    background:#bf0510;

    color:#fff !important;

    transform:translateY(-1px);

}

.mm-ai-btn.secondary{

    background:#f4f4f4;

    color:#333 !important;

    border:1px solid #ddd;

}

.mm-ai-btn.secondary:hover{

    background:#e9e9e9;

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

.mm-ai-product-card{

    animation:mmProductFade .35s ease;

}

@keyframes mmProductFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media(max-width:768px){

    .mm-ai-product-image{

        height:170px;

    }

    .mm-ai-product-name{

        font-size:15px;

    }

    .mm-ai-product-buttons{

        flex-direction:column;

    }

    .mm-ai-btn{

        width:100%;

    }

}

/* ==========================================================
   DARK HOVER (preparado para futuro)
========================================================== */

.mm-ai-product-card:hover .mm-ai-product-name{

    color:#e30613;

}
/* Ações do pedido de orçamento */
.mm-ai-actions{
    margin:10px 14px 18px 54px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.mm-ai-actions button{
    border:0;
    border-radius:8px;
    padding:10px 12px;
    font-weight:600;
    cursor:pointer;
    background:#e31e24;
    color:#fff;
}
.mm-ai-actions button.mm-ai-btn-pdf{
    background:#202020;
}
.mm-ai-actions button:disabled{
    opacity:.65;
    cursor:not-allowed;
}
.mm-ai-action-status{
    width:100%;
    font-size:12px;
    line-height:1.4;
    color:#555;
}
.mm-ai-action-status a{
    font-weight:700;
    color:#e31e24;
    text-decoration:none;
}


.mm-ai-product-name{
    display:block;
    text-decoration:none;
    color:inherit;
}
.mm-ai-product-image-link{
    display:block;
    text-decoration:none;
}