:root{--brai-primary:#0073aa;--brai-primary-dark:#005a87;--brai-primary-light:#e8f4fd;--brai-bg:#fff;--brai-bg2:#f7f8fa;--brai-text:#1a1a2e;--brai-text2:#6b7280;--brai-border:#e5e7eb;--brai-shadow:0 12px 40px rgba(0,0,0,.15);--brai-r:16px;--brai-t:all .3s cubic-bezier(.4,0,.2,1)}
#brai-chat-widget,#brai-chat-widget *{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
#brai-chat-widget{position:fixed;z-index:999999;bottom:20px}
#brai-chat-widget.brai-position-bottom-right{right:20px}
#brai-chat-widget.brai-position-bottom-left{left:20px}

/* Toggle */
#brai-chat-toggle{width:60px;height:60px;border-radius:50%;background:var(--brai-primary);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 20px rgba(0,115,170,.4);transition:var(--brai-t);position:relative}
#brai-chat-toggle:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,115,170,.5)}
#brai-chat-toggle:active{transform:scale(.96)}
#brai-notification-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff;animation:brai-pulse 2s infinite}
@keyframes brai-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* Proactive bubble */
#brai-proactive-bubble{position:absolute;bottom:72px;right:0;background:#fff;border:1px solid var(--brai-border);border-radius:12px;padding:12px 16px;box-shadow:0 4px 20px rgba(0,0,0,.12);font-size:14px;color:var(--brai-text);max-width:260px;animation:brai-slideUp .4s ease;cursor:pointer;line-height:1.4}
#brai-proactive-bubble::after{content:'';position:absolute;bottom:-8px;right:24px;width:16px;height:16px;background:#fff;border-right:1px solid var(--brai-border);border-bottom:1px solid var(--brai-border);transform:rotate(45deg)}
.brai-position-bottom-left #brai-proactive-bubble{right:auto;left:0}
.brai-position-bottom-left #brai-proactive-bubble::after{right:auto;left:24px}

/* Chat Window */
#brai-chat-window{position:absolute;bottom:75px;width:var(--brai-chat-w,500px);max-height:var(--brai-chat-h,720px);background:var(--brai-bg);border-radius:var(--brai-r);box-shadow:var(--brai-shadow);display:flex;flex-direction:column;overflow:hidden;animation:brai-slideUp .35s cubic-bezier(.4,0,.2,1);border:1px solid var(--brai-border)}
.brai-position-bottom-right #brai-chat-window{right:0}
.brai-position-bottom-left #brai-chat-window{left:0}
@keyframes brai-slideUp{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Header */
#brai-chat-header{background:var(--brai-primary);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
#brai-header-info{display:flex;align-items:center;gap:10px}
#brai-header-avatar{width:52px;height:52px;background:rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;position:relative;border:2px solid rgba(255,255,255,.3);transition:all .3s ease}
#brai-header-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#brai-header-avatar.speaking{border-color:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.3);animation:brai-avatarPulse 1.2s ease-in-out infinite}
#brai-header-avatar.speaking::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(52,211,153,.5);animation:brai-avatarRing 1.5s ease-in-out infinite}
@keyframes brai-avatarPulse{
    0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(52,211,153,.3)}
    50%{transform:scale(1.05);box-shadow:0 0 0 6px rgba(52,211,153,.15)}
}
@keyframes brai-avatarRing{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(1.1)}
}
#brai-header-name{font-weight:600;font-size:14px}
#brai-header-status{font-size:12px;opacity:.9;display:flex;align-items:center;gap:5px}
.brai-status-dot{width:8px;height:8px;background:#34d399;border-radius:50%;display:inline-block;animation:brai-pulse 2s infinite}
#brai-minimize{background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;transition:var(--brai-t)}
#brai-minimize:hover{background:rgba(255,255,255,.25)}

/* Messages */
#brai-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:300px;max-height:480px;background:var(--brai-bg2);scroll-behavior:smooth}
#brai-chat-messages::-webkit-scrollbar{width:5px}
#brai-chat-messages::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}
.brai-message{display:flex;gap:8px;animation:brai-fadeIn .3s ease;max-width:88%}
@keyframes brai-fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.brai-message-bot{align-self:flex-start}
.brai-message-user{align-self:flex-end;flex-direction:row-reverse}
.brai-message-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:2px;overflow:hidden}
.brai-message-bot .brai-message-avatar{background:var(--brai-primary-light)}
.brai-message-user .brai-message-avatar{background:#e0e7ff}
.brai-message-bubble{padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word}
.brai-message-bot .brai-message-bubble{background:#fff;color:var(--brai-text);border:1px solid var(--brai-border);border-bottom-left-radius:4px}
.brai-message-user .brai-message-bubble{background:var(--brai-primary);color:#fff;border-bottom-right-radius:4px}
.brai-message-time{font-size:10px;color:var(--brai-text2);margin-top:3px;padding:0 4px}
.brai-message-user .brai-message-time{text-align:right}
.brai-error-bubble{background:#fef2f2!important;color:#991b1b!important;border-color:#fecaca!important}

/* Product Carousel */
.brai-product-carousel{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px 0 4px}
.brai-product-carousel::-webkit-scrollbar{height:4px}
.brai-product-carousel::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}
.brai-product-card{background:#fff;border:1px solid var(--brai-border);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--brai-text);transition:var(--brai-t);font-size:12px}
.brai-product-card:hover{border-color:var(--brai-primary);box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}
.brai-product-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block;background:#f8f8f8;padding:6px}
.brai-product-info{padding:8px 10px}
.brai-product-name{font-weight:600;font-size:11px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.brai-product-price{color:var(--brai-primary);font-weight:700;font-size:13px}
.brai-product-stock{font-size:10px;color:#16a34a;margin-top:2px}
.brai-add-cart-btn{display:block;width:calc(100% - 12px);margin:0 6px 6px;padding:7px 8px;border:none;border-radius:7px;background:var(--brai-primary);color:#fff;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.brai-add-cart-btn:hover:not(:disabled){background:#005a87;transform:scale(1.02)}
.brai-add-cart-btn:disabled{opacity:.5;cursor:not-allowed}
.brai-scroll-arrow{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;margin:8px auto 4px;background:linear-gradient(135deg,var(--brai-primary),#0ea5e9);color:#fff;border-radius:20px;font-size:11.5px;font-weight:600;cursor:pointer;animation:brai-arrowBounce 1s ease-in-out infinite;transition:all .2s;width:fit-content}
.brai-scroll-arrow:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,115,170,.3)}
.brai-scroll-arrow svg{animation:brai-arrowPulse 1s ease-in-out infinite}
@keyframes brai-arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes brai-arrowPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Quick questions */
#brai-quick-questions{padding:8px 14px 10px;background:var(--brai-bg2);border-top:1px solid var(--brai-border);display:flex;flex-wrap:wrap;gap:5px}
.brai-quick-btn{background:#fff;border:1px solid var(--brai-border);border-radius:20px;padding:5px 12px;font-size:11.5px;color:var(--brai-primary);cursor:pointer;transition:var(--brai-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.4}
.brai-quick-btn:hover{background:var(--brai-primary);color:#fff;border-color:var(--brai-primary)}

/* Input */
#brai-chat-input-area{border-top:1px solid var(--brai-border);background:#fff;flex-shrink:0}
#brai-typing-indicator{padding:8px 14px;display:flex;align-items:center;gap:4px}
#brai-typing-indicator span{width:7px;height:7px;background:var(--brai-primary);border-radius:50%;opacity:.4;animation:brai-typ 1.4s infinite}
#brai-typing-indicator span:nth-child(2){animation-delay:.2s}
#brai-typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes brai-typ{0%,60%,100%{opacity:.4;transform:scale(1)}30%{opacity:1;transform:scale(1.2)}}
#brai-chat-form{display:flex;align-items:center;padding:10px 12px;gap:8px}
#brai-chat-input{flex:1;border:1px solid var(--brai-border);border-radius:24px;padding:10px 16px;font-size:14px;outline:none;transition:var(--brai-t);background:var(--brai-bg2);color:var(--brai-text)}
#brai-chat-input:focus{border-color:var(--brai-primary);background:#fff;box-shadow:0 0 0 3px rgba(0,115,170,.1)}
#brai-chat-input::placeholder{color:#9ca3af}
#brai-send-btn{width:40px;height:40px;border-radius:50%;background:var(--brai-primary);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--brai-t);flex-shrink:0}
#brai-send-btn:hover{background:var(--brai-primary-dark);transform:scale(1.05)}
#brai-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
#brai-powered-by{text-align:center;padding:3px 12px 7px;font-size:10.5px;color:var(--brai-text2)}
#brai-powered-by a{color:var(--brai-primary);text-decoration:none}

/* Mobile */
@media(max-width:480px){
    #brai-chat-widget{bottom:10px;right:10px!important;left:10px!important}
    #brai-chat-window{width:calc(100vw - 20px);max-height:calc(100dvh - 100px);bottom:70px;right:0!important;left:0!important;border-radius:14px}
    #brai-chat-toggle{width:54px;height:54px}
    #brai-chat-messages{max-height:calc(100dvh - 320px)}
    .brai-message{max-width:92%}
    .brai-product-carousel{grid-template-columns:repeat(2,1fr)}
    #brai-proactive-bubble{max-width:220px;font-size:13px}
}

/* Mic Button */
#brai-mic-btn{
    background:none;border:none;cursor:pointer;color:var(--brai-text2);
    padding:6px;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
#brai-mic-btn:hover{color:var(--brai-primary);background:var(--brai-primary-light);}
#brai-mic-btn.recording{
    color:#ef4444;background:rgba(239,68,68,0.1);
    animation:brai-micPulse 1s ease-in-out infinite;
}
@keyframes brai-micPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.3)}
    50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}
}

/* Animated Avatar */
.brai-message-bot .brai-message-avatar{transition:all .3s ease;}
.brai-message-bot .brai-message-avatar.speaking{
    animation:brai-avatarSpeak 0.6s ease-in-out infinite;
    box-shadow:0 0 0 3px rgba(0,115,170,0.3);
}
@keyframes brai-avatarSpeak{
    0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(0,115,170,0.2)}
    25%{transform:scale(1.08);box-shadow:0 0 0 5px rgba(0,115,170,0.3)}
    50%{transform:scale(0.95);box-shadow:0 0 0 3px rgba(0,115,170,0.2)}
    75%{transform:scale(1.05);box-shadow:0 0 0 6px rgba(0,115,170,0.35)}
}

/* Header avatar animation when IA is thinking/responding */
#brai-header-avatar.thinking{
    animation:brai-headerThink 1.5s ease-in-out infinite;
}
@keyframes brai-headerThink{
    0%,100%{transform:rotate(0deg) scale(1)}
    25%{transform:rotate(-5deg) scale(1.05)}
    50%{transform:rotate(5deg) scale(1.1)}
    75%{transform:rotate(-3deg) scale(1.05)}
}

/* IA Banner */
#brai-ia-banner{
    background:linear-gradient(135deg,#0073aa 0%,#005a87 50%,#003d5c 100%);
    padding:0;margin:0;position:relative;overflow:hidden;
}
#brai-ia-banner::before{
    content:'';position:absolute;top:-50%;right:-10%;width:300px;height:300px;
    background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);
    border-radius:50%;pointer-events:none;
}
.brai-banner-inner{
    max-width:1200px;margin:0 auto;padding:22px 30px;
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
    position:relative;z-index:1;
}
.brai-banner-badge{
    background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f;
    font-weight:800;font-size:13px;padding:5px 14px;border-radius:20px;
    letter-spacing:.5px;white-space:nowrap;
    box-shadow:0 2px 8px rgba(245,158,11,.3);
    animation:brai-badgePulse 2s ease-in-out infinite;
}
@keyframes brai-badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.brai-banner-text{
    color:#fff;font-size:16px;line-height:1.5;flex:1;min-width:280px;text-align:center;
}
.brai-banner-text strong{color:#7dd3fc;}
.brai-banner-button{
    background:#fff;color:#0073aa;border:none;cursor:pointer;
    padding:12px 28px;border-radius:30px;font-size:15px;font-weight:700;
    white-space:nowrap;transition:all .3s ease;
    box-shadow:0 4px 15px rgba(0,0,0,.2);
    animation:brai-btnGlow 3s ease-in-out infinite;
}
.brai-banner-button:hover{
    background:#0073aa;color:#fff;transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,115,170,.4);
}
@keyframes brai-btnGlow{
    0%,100%{box-shadow:0 4px 15px rgba(0,0,0,.2)}
    50%{box-shadow:0 4px 20px rgba(0,115,170,.4),0 0 30px rgba(0,115,170,.15)}
}