/* =========================================================
   CHAT WIDGET (rule-based FAQ assistant)
   Uses the same design tokens as the rest of the site
   (assets/css/design-system.css: --store-*, --space-*, --text-*)
   so it looks native rather than bolted on.
========================================================= */

#maeChatRoot{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:2000;
    font-family:var(--font-body, 'Public Sans', sans-serif);
}

.mae-chat-bubble{
    width:58px;
    height:58px;
    border-radius:50%;
    border:none;
    background:linear-gradient(135deg, var(--store-primary, #3D7A82), var(--store-dark, #1B4954));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(15,32,39,.25);
    transition:transform .15s ease;
}
.mae-chat-bubble:hover{ transform:translateY(-2px); }
.mae-chat-bubble svg{ width:26px; height:26px; }

.mae-chat-panel{
    position:absolute;
    right:0;
    bottom:74px;
    width:360px;
    max-width:calc(100vw - 32px);
    height:520px;
    max-height:calc(100vh - 120px);
    background:#fff;
    border-radius:16px;
    box-shadow:0 20px 48px rgba(15,32,39,.28);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px) scale(.98);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.mae-chat-panel.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.mae-chat-header{
    background:linear-gradient(135deg, var(--store-primary, #3D7A82), var(--store-dark, #1B4954));
    color:#fff;
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
}
.mae-chat-header-title{
    font-size:14.5px;
    font-weight:700;
}
.mae-chat-header-sub{
    font-size:11.5px;
    color:#d6e7e5;
    margin-top:2px;
}
.mae-chat-close{
    background:rgba(255,255,255,.15);
    border:none;
    color:#fff;
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.mae-chat-close svg{ width:15px; height:15px; }

.mae-chat-messages{
    flex:1;
    overflow-y:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:var(--store-bg, #F4F6F7);
}

.mae-chat-msg{
    max-width:82%;
    padding:10px 13px;
    border-radius:12px;
    font-size:13.5px;
    line-height:1.55;
    white-space:pre-line;
}
.mae-chat-msg.bot{
    align-self:flex-start;
    background:#fff;
    border:1px solid var(--store-border, #DCE2E5);
    color:var(--store-text, #0F2027);
    border-bottom-left-radius:4px;
}
.mae-chat-msg.user{
    align-self:flex-end;
    background:var(--store-primary, #3D7A82);
    color:#fff;
    border-bottom-right-radius:4px;
}
.mae-chat-msg.typing{
    align-self:flex-start;
    display:flex;
    gap:4px;
    padding:12px 14px;
}
.mae-chat-msg.typing span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--store-muted, #5B6A70);
    opacity:.4;
    animation:mae-chat-dot 1.1s infinite ease-in-out;
}
.mae-chat-msg.typing span:nth-child(2){ animation-delay:.15s; }
.mae-chat-msg.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes mae-chat-dot{
    0%, 60%, 100%{ opacity:.35; transform:translateY(0); }
    30%{ opacity:1; transform:translateY(-3px); }
}

.mae-chat-quick-replies{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:0 16px 12px;
    flex-shrink:0;
    background:var(--store-bg, #F4F6F7);
}
.mae-chat-quick-replies button{
    border:1px solid var(--store-primary, #3D7A82);
    color:var(--store-primary, #3D7A82);
    background:#fff;
    border-radius:999px;
    padding:6px 12px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:.15s ease;
}
.mae-chat-quick-replies button:hover{
    background:var(--store-primary, #3D7A82);
    color:#fff;
}

.mae-chat-input-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px;
    border-top:1px solid var(--store-border, #DCE2E5);
    background:#fff;
    flex-shrink:0;
}
.mae-chat-input-row input{
    flex:1;
    border:1px solid var(--store-border, #DCE2E5);
    border-radius:10px;
    padding:10px 13px;
    font-size:13.5px;
    outline:none;
    font-family:inherit;
}
.mae-chat-input-row input:focus{
    border-color:var(--store-primary, #3D7A82);
}
.mae-chat-input-row button{
    width:38px;
    height:38px;
    flex-shrink:0;
    border:none;
    border-radius:10px;
    background:var(--store-primary, #3D7A82);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.mae-chat-input-row button:disabled{
    opacity:.5;
    cursor:default;
}
.mae-chat-input-row button svg{ width:17px; height:17px; }

@media(max-width:480px){
    #maeChatRoot{ right:14px; bottom:14px; }
    .mae-chat-panel{
        width:calc(100vw - 24px);
        height:calc(100vh - 110px);
        bottom:72px;
    }
}

/* =========================================================
   PRODUCT CARDS (rendered inside chat replies)
========================================================= */
.mae-chat-products{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-self:flex-start;
    max-width:92%;
}

.mae-chat-product-card{
    display:flex;
    gap:10px;
    background:#fff;
    border:1px solid var(--store-border, #DCE2E5);
    border-radius:12px;
    padding:10px;
}

.mae-chat-product-img{
    width:56px;
    height:56px;
    flex-shrink:0;
    object-fit:cover;
    border-radius:8px;
    background:#f0f2f3;
}

.mae-chat-product-info{
    flex:1;
    min-width:0;
}

.mae-chat-product-name{
    font-size:13px;
    font-weight:700;
    color:var(--store-text, #0F2027);
    line-height:1.35;
    margin-bottom:2px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.mae-chat-product-price{
    font-size:12px;
    color:var(--store-muted, #5B6A70);
    margin-bottom:8px;
}

.mae-chat-product-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.mae-chat-product-link{
    font-size:12px;
    font-weight:700;
    color:var(--store-primary, #3D7A82);
    text-decoration:none;
    border:1px solid var(--store-primary, #3D7A82);
    border-radius:8px;
    padding:6px 10px;
    white-space:nowrap;
}
.mae-chat-product-link:hover{
    background:var(--store-primary, #3D7A82);
    color:#fff;
}

.mae-chat-product-add{
    font-size:12px;
    font-weight:700;
    color:#fff;
    background:var(--store-primary, #3D7A82);
    border:1px solid var(--store-primary, #3D7A82);
    border-radius:8px;
    padding:6px 10px;
    cursor:pointer;
    white-space:nowrap;
}
.mae-chat-product-add:hover{
    background:var(--store-dark, #1B4954);
    border-color:var(--store-dark, #1B4954);
}
.mae-chat-product-add:disabled{
    opacity:.75;
    cursor:default;
}

/* =========================================================
   WHATSAPP BUBBLE — bottom-left, independent of the chat
   widget (which lives bottom-right). Always visible, links
   straight out to WhatsApp — no panel, no state.
========================================================= */
.mae-whatsapp-bubble{
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:1999;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 24px rgba(15,32,39,.25);
    transition:transform .15s ease;
    text-decoration:none;
}
.mae-whatsapp-bubble:hover{
    transform:translateY(-2px);
    color:#fff;
}

@media(max-width:480px){
    .mae-whatsapp-bubble{ left:14px; bottom:14px; width:52px; height:52px; }
}