File size: 1,732 Bytes
dc22afe | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | /* 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;
}
|