/* Contenedor Principal */
.wai-widget { 
    position:fixed; right:20px; bottom:90px; width:380px; max-width:90%; height:550px; 
    border-radius:15px; box-shadow:0 10px 40px rgba(0,0,0,0.2); 
    display:none; flex-direction:column; z-index:999999; 
    background:#fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    overflow:hidden; border: 1px solid #eee;
}

/* Header */
.wai-header { padding:15px; display:flex; align-items:center; justify-content:space-between; color:#fff; }
.wai-avatar img { width:42px; height:42px; border-radius:50%; border: 2px solid rgba(255,255,255,0.3); }
.wai-title { font-weight: 600; font-size: 16px; margin-left: 12px; flex-grow: 1; }
#wai-toggle { background:transparent; border:none; color:#fff; font-size:24px; cursor:pointer; }

/* Cuerpo del Chat (Fondo WhatsApp) */
.wai-body { flex:1; overflow-y:auto; background:#e5ddd5; padding:15px; scroll-behavior: smooth; }
.wai-messages { display:flex; flex-direction:column; gap:8px; padding-bottom: 10px; }

/* Burbujas */
.wai-msg { display:flex; width: 100%; animation: wai-fade-in 0.3s ease; }
.wai-msg.user { justify-content:flex-end; }
.wai-msg .bubble { 
    max-width:85%; padding:8px 10px 20px 10px; border-radius:8px; 
    font-size:14px; line-height:1.4; position: relative; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
    word-wrap: break-word;
}
.wai-msg.user .bubble { background:#dcf8c6; color:#333; border-top-right-radius: 0; }
.wai-msg.bot .bubble { background:#fff; color:#333; border-top-left-radius: 0; }

/* Timestamp */
.wai-timestamp { position: absolute; bottom: 3px; right: 6px; font-size: 10px; color: rgba(0,0,0,0.45); white-space: nowrap; }

/* Footer */
.wai-footer { padding:12px; background:#f0f0f0; border-top:1px solid #ddd; }
.wai-footer-main { display:flex; gap:8px; align-items: center; margin-bottom: 8px; }
.wai-footer input { flex:1; padding:10px 15px; border:1px solid #fff; border-radius:20px; outline:none; font-size: 14px; }
.wai-footer button#wai-send { width: 40px; height: 40px; border-radius: 50%; border: none; background: #0088cc; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.2s; }
.wai-footer button#wai-send:hover { background: #0077b3; }

/* Opciones Footer (Carrito + Email) */
.wai-footer-options { display: flex; justify-content: space-between; align-items: center; padding-top: 5px; border-top: 1px solid #e0e0e0; font-size: 12px; color: #555; }
.wai-cart-button { background: #ff9900; color: white; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.wai-cart-button:hover { transform: scale(1.1); }

/* FAB (Botón Flotante) */
.wai-fab { position:fixed; right:20px; bottom:20px; z-index:999998; cursor:pointer; }
.wai-fab-inner { width:65px; height:65px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,0.2); position: relative; border: 2px solid transparent; }
.wai-fab img { width:100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Animación Sonar */
.wai-fab-inner::before, .wai-fab-inner::after { 
    content: ""; position: absolute; left: -6px; top: -6px; right: -6px; bottom: -6px; 
    border: 2px solid #8ddf9a; border-radius: 50%; 
    animation: wai-sonar 2.0s infinite ease-out; opacity: 0; 
}
.wai-fab-inner::after { animation-delay: 1.0s; }

@keyframes wai-sonar { 
    0% { transform: scale(0.95); opacity: 0.8; } 
    100% { transform: scale(1.5); opacity: 0; } 
}

@keyframes wai-fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Elementos multimedia */
.wai-chat-image, .wai-video-container { max-width: 100%; border-radius: 8px; margin-top: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }