/* Conteneur principal du chat */ .chat-container { position: fixed; bottom: 20px; right: 20px; width: 360px; max-height: 600px; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0,0,0,0.2); border-radius: 1rem; overflow: hidden; background: #ffffff; font-family: sans-serif; z-index: 1000; } /* En‑tête en forme de vague */ .chat-header { position: relative; height: 120px; background: #333835; } .chat-header svg { position: absolute; bottom: 0; width: 100%; height: auto; display: block; } /* Corps du chat */ .chat-body { flex: 1; padding: 0.5rem; overflow-y: auto; display: flex; flex-direction: column; } /* Bulles de message */ .user-bubble, .assistant-bubble { padding: 0.5rem 1rem; border-radius: 0.75rem; margin: 0.25rem 0; max-width: 80%; word-wrap: break-word; line-height: 1.4; } .user-bubble { background: #f1f0f0; align-self: flex-end; } .assistant-bubble { background: #e0f7fa; align-self: flex-start; } /* Zone de saisie */ .chat-input-container { padding: 0.5rem; border-top: 1px solid #ececec; } .chat-input { width: 100%; padding: 0.5rem; border: 1px solid #d1d1d1; border-radius: 0.5rem; outline: none; font-size: 1rem; } /* Bouton flottant */ .chat-toggle { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(135deg, #6e8efb, #a777e3); color: #fff; padding: 0.75rem 1rem; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 1001; }