1 
  2<div class="container-ia-chat">
  3  <input
  4    type="checkbox"
  5    name="input-voice"
  6    id="input-voice"
  7    class="input-voice"
  8    style="display:none"
  9  />
 10  <input
 11    type="text"
 12    name="input-text"
 13    id="input-text"
 14    placeholder="Ask Anything..."
 15    class="input-text"
 16    required=""
 17    title=""
 18  />
 19  <input
 20    type="checkbox"
 21    name="input-files"
 22    id="input-files"
 23    class="input-files"
 24    style="display:none"
 25  />
 26  <div class="container-upload-files">
 27    <svg
 28      class="upload-file"
 29      xmlns="http://www.w3.org/2000/svg"
 30      width="24"
 31      height="24"
 32      viewBox="0 0 24 24"
 33    >
 34      <g fill="none" stroke="currentColor" stroke-width="2">
 35        <circle cx="12" cy="13" r="3"></circle>
 36        <path
 37          d="M9.778 21h4.444c3.121 0 4.682 0 5.803-.735a4.4 4.4 0 0 0 1.226-1.204c.749-1.1.749-2.633.749-5.697s0-4.597-.749-5.697a4.4 4.4 0 0 0-1.226-1.204c-.72-.473-1.622-.642-3.003-.702c-.659 0-1.226-.49-1.355-1.125A2.064 2.064 0 0 0 13.634 3h-3.268c-.988 0-1.839.685-2.033 1.636c-.129.635-.696 1.125-1.355 1.125c-1.38.06-2.282.23-3.003.702A4.4 4.4 0 0 0 2.75 7.667C2 8.767 2 10.299 2 13.364s0 4.596.749 5.697c.324.476.74.885 1.226 1.204C5.096 21 6.657 21 9.778 21Z"
 38        ></path>
 39      </g>
 40    </svg>
 41    <svg
 42      class="upload-file"
 43      xmlns="http://www.w3.org/2000/svg"
 44      width="24"
 45      height="24"
 46      viewBox="0 0 24 24"
 47    >
 48      <g
 49        fill="none"
 50        stroke="currentColor"
 51        stroke-linecap="round"
 52        stroke-linejoin="round"
 53        stroke-width="2"
 54      >
 55        <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
 56        <circle cx="9" cy="9" r="2"></circle>
 57        <path d="m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
 58      </g>
 59    </svg>
 60    <svg
 61      class="upload-file"
 62      xmlns="http://www.w3.org/2000/svg"
 63      width="24"
 64      height="24"
 65      viewBox="0 0 24 24"
 66    >
 67      <path
 68        fill="none"
 69        stroke="currentColor"
 70        stroke-linecap="round"
 71        stroke-linejoin="round"
 72        stroke-width="2"
 73        d="m6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
 74      ></path>
 75    </svg>
 76  </div>
 77  <label for="input-files" class="label-files">
 78    <svg
 79      xmlns="http://www.w3.org/2000/svg"
 80      width="24"
 81      height="24"
 82      viewBox="0 0 24 24"
 83    >
 84      <path
 85        fill="none"
 86        stroke="currentColor"
 87        stroke-linecap="round"
 88        stroke-linejoin="round"
 89        stroke-width="2"
 90        d="M5 12h14m-7-7v14"
 91      ></path>
 92    </svg>
 93  </label>
 94  <label for="input-voice" class="label-voice">
 95    <svg
 96      class="icon-voice"
 97      xmlns="http://www.w3.org/2000/svg"
 98      width="24"
 99      height="24"
100      viewBox="0 0 24 24"
101    >
102      <path
103        fill="none"
104        stroke="currentColor"
105        stroke-linecap="round"
106        stroke-width="2"
107        d="M12 4v16m4-13v10M8 7v10m12-6v2M4 11v2"
108      ></path>
109    </svg>
110    <div class="ai">
111      <div class="container">
112        <div class="c c4"></div>
113        <div class="c c1"></div>
114        <div class="c c2"></div>
115        <div class="c c3"></div>
116        <div class="rings"></div>
117      </div>
118 
119      <div class="glass"></div>
120    </div>
121    <div class="text-voice">
122      <p>Conversation Started</p>
123      <p>Press to cancel the conversation</p>
124    </div>
125  </label>
126  <label for="input-text" class="label-text">
127    <svg
128      xmlns="http://www.w3.org/2000/svg"
129      width="24"
130      height="24"
131      viewBox="0 0 24 24"
132    >
133      <path
134        fill="none"
135        stroke="currentColor"
136        stroke-linecap="round"
137        stroke-linejoin="round"
138        stroke-width="2"
139        d="m5 12l7-7l7 7m-7 7V5"
140      ></path>
141    </svg>
142  </label>
143</div>          

  1 
  2.container-ia-chat {
  3  position: relative;
  4  display: flex;
  5  align-items: center;
  6  justify-content: end;
  7  width: 300px;
  8}
  9 
 10.container-upload-files {
 11  position: absolute;
 12  left: 0;
 13  display: flex;
 14  color: #aaaaaa;
 15  transition: all 0.5s;
 16 
 17  & .upload-file {
 18    margin: 5px;
 19    padding: 2px;
 20    cursor: pointer;
 21    transition: all 0.5s;
 22 
 23    &:hover {
 24      color: #4c4c4c;
 25      scale: 1.1;
 26    }
 27  }
 28}
 29 
 30.input-text {
 31  max-width: 190px;
 32  width: 100%;
 33  margin-left: 72px;
 34  padding: 0.75rem 1rem;
 35  padding-right: 46px;
 36  border-radius: 50px;
 37  border: none;
 38  outline: none;
 39  background-color: #e9e9e9;
 40  color: #4c4c4c;
 41  font-size: 14px;
 42  line-height: 18px;
 43  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 44  font-weight: 500;
 45  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05);
 46  z-index: 999;
 47 
 48  &::placeholder {
 49    color: #959595;
 50  }
 51 
 52  &:focus-within,
 53  &:valid {
 54    max-width: 250px;
 55    margin-left: 42px;
 56 
 57    & ~ .container-upload-files {
 58      opacity: 0;
 59      visibility: hidden;
 60      pointer-events: none;
 61      filter: blur(5px);
 62    }
 63 
 64    & ~ .label-files {
 65      transform: translateX(0) translateY(-50%) scale(1);
 66      opacity: 1;
 67      visibility: visible;
 68      pointer-events: all;
 69    }
 70  }
 71 
 72  &::selection {
 73    background-color: #4c4c4c;
 74    color: #e9e9e9;
 75  }
 76 
 77  &:valid ~ .label-text {
 78    transform: translateX(0) translateY(-50%) scale(1);
 79    opacity: 1;
 80    visibility: visible;
 81    pointer-events: all;
 82  }
 83 
 84  &:valid ~ .label-voice {
 85    transform: translateX(0) translateY(-50%) scale(0.25);
 86    opacity: 0;
 87    visibility: hidden;
 88    pointer-events: none;
 89  }
 90}
 91 
 92.input-voice {
 93  display: none;
 94 
 95  &:checked ~ .container-upload-files {
 96    opacity: 0;
 97    visibility: hidden;
 98    pointer-events: none;
 99    filter: blur(5px);
100  }
101 
102  &:checked ~ .input-text {
103    opacity: 0;
104    visibility: hidden;
105    pointer-events: none;
106    filter: blur(5px);
107  }
108}
109 
110.label-files {
111  position: absolute;
112  top: 50%;
113  left: 0;
114  transform: translateX(-20px) translateY(-50%) scale(1);
115  display: flex;
116  padding: 0.5rem;
117  color: #959595;
118  background-color: #e9e9e9;
119  border-radius: 50px;
120  cursor: pointer;
121  opacity: 0;
122  visibility: hidden;
123  pointer-events: none;
124  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05);
125 
126  &:focus-visible,
127  &:hover {
128    color: #4c4c4c;
129  }
130}
131 
132.label-voice,
133.label-text {
134  position: absolute;
135  top: 50%;
136  right: 0.25rem;
137  transform: translateX(0) translateY(-50%) scale(1);
138  width: 36px;
139  height: 36px;
140  display: flex;
141  padding: 6px;
142  border: none;
143  outline: none;
144  cursor: pointer;
145  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.05);
146  z-index: 999;
147}
148 
149.input-voice:checked ~ .label-voice {
150  background-color: #e9e9e9;
151  right: 0;
152  width: 300px;
153  height: 300px;
154  border-radius: 3rem;
155  box-shadow:
156    0 10px 40px rgba(0, 0, 60, 0.25),
157    inset 0 0 10px rgba(255, 255, 255, 0.5);
158 
159  & .icon-voice {
160    opacity: 0;
161  }
162 
163  & .text-voice p {
164    opacity: 1;
165  }
166}
167 
168.label-voice {
169  color: #959595;
170  overflow: hidden;
171 
172  &:hover,
173  &:focus-visible {
174    color: #4c4c4c;
175  }
176 
177  &:active svg {
178    scale: 1.1;
179  }
180 
181  & .icon-voice {
182    position: absolute;
183    transition: all 0.3s;
184  }
185 
186  & .text-voice {
187    position: absolute;
188    inset: 1.25rem;
189    display: flex;
190    flex-direction: column;
191    align-items: center;
192    justify-content: space-between;
193 
194    & p {
195      opacity: 0;
196      transition: all 0.3s;
197      text-wrap: nowrap;
198 
199      &:first-child {
200        font-size: 20px;
201        font-weight: 500;
202        color: transparent;
203        background-image: linear-gradient(
204          -40deg,
205          #959595 0% 35%,
206          #e770cd 40%,
207          #ffcef4 50%,
208          #e770cd 60%,
209          #959595 65% 100%
210        );
211        background-clip: text;
212        background-size: 900px;
213        animation: text-light 6s ease infinite;
214      }
215 
216      &:last-child {
217        font-size: 12px;
218        color: #2b2b2b;
219        mix-blend-mode: difference;
220      }
221    }
222  }
223}
224 
225@keyframes text-light {
226  0% {
227    background-position: 0px;
228  }
229 
230  100% {
231    background-position: 900px;
232  }
233}
234 
235.label-text {
236  opacity: 0;
237  visibility: hidden;
238  pointer-events: none;
239  transform: translateY(-50%) scale(0.25);
240  color: #e9e9e9;
241  background: linear-gradient(to top right, #9147ff, #ff4141);
242  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.5);
243  border-radius: 50px;
244 
245  &:hover,
246  &:focus-visible {
247    transform-origin: top center;
248    box-shadow: inset 0 0 6px rgba(255, 255, 255, 1);
249  }
250 
251  &:active {
252    scale: 0.9;
253  }
254}
255 
256.ai {
257  --z: 0;
258  --s: 300px;
259  --p: calc(var(--s) / 4);
260  width: var(--s);
261  aspect-ratio: 1;
262  padding: var(--p);
263  display: grid;
264  place-items: center;
265  position: relative;
266  animation: circle1 5s ease-in-out infinite;
267 
268  &::before,
269  &::after {
270    content: "";
271    position: absolute;
272    top: 50%;
273    left: 50%;
274    width: 50%;
275    height: 50%;
276    border-radius: 50%;
277    border: 2px solid white;
278    box-shadow: 0 0 30px rgba(234, 170, 255, 1);
279    filter: blur(5px);
280    transform: translate(-50%, -50%);
281    animation: wave 1.5s linear infinite;
282  }
283 
284  &::after {
285    animation-delay: 0.4s;
286  }
287}
288 
289@keyframes wave {
290  0% {
291    transform: translate(-50%, -50%) scale(1);
292    opacity: 0;
293    box-shadow: 0 0 50px rgba(234, 170, 255, 0.9);
294  }
295  35% {
296    transform: translate(-50%, -50%) scale(1.3);
297    opacity: 1;
298  }
299  70%,
300  100% {
301    transform: translate(-50%, -50%) scale(1.6);
302    opacity: 0;
303    box-shadow: 0 0 50px rgba(234, 170, 255, 0.3);
304  }
305}
306 
307@keyframes ai1 {
308  0% {
309    transform: rotate(0deg) translate(50%) scale(0.9);
310    opacity: 0;
311  }
312 
313  25% {
314    transform: rotate(90deg) translate(50%) scale(1.8);
315    opacity: 1;
316  }
317 
318  50% {
319    transform: rotate(180deg) translate(50%) scale(0.7);
320    opacity: 0.4;
321  }
322 
323  75% {
324    transform: rotate(270deg) translate(50%) scale(1.2);
325    opacity: 1;
326  }
327 
328  100% {
329    transform: rotate(360deg) translate(50%) scale(0.9);
330    opacity: 0;
331  }
332}
333 
334@keyframes ai2 {
335  0% {
336    transform: rotate(90deg) translate(50%) scale(0.5);
337  }
338 
339  25% {
340    transform: rotate(180deg) translate(50%) scale(1.7);
341    opacity: 0;
342  }
343 
344  50% {
345    transform: rotate(270deg) translate(50%) scale(1);
346    opacity: 0;
347  }
348 
349  75% {
350    transform: rotate(360deg) translate(50%) scale(0.8);
351    opacity: 0;
352  }
353 
354  100% {
355    transform: rotate(450deg) translate(50%) scale(0.5);
356    opacity: 1;
357  }
358}
359 
360@keyframes ai3 {
361  0% {
362    transform: rotate(180deg) translate(50%) scale(0.8);
363    opacity: 0.8;
364  }
365 
366  25% {
367    transform: rotate(270deg) translate(50%) scale(1.5);
368  }
369 
370  50% {
371    transform: rotate(360deg) translate(50%) scale(0.6);
372    opacity: 0.4;
373  }
374 
375  75% {
376    transform: rotate(450deg) translate(50%) scale(1.3);
377    opacity: 0.7;
378  }
379 
380  100% {
381    transform: rotate(540deg) translate(50%) scale(0.8);
382    opacity: 0.8;
383  }
384}
385 
386@keyframes ai4 {
387  0% {
388    transform: rotate(270deg) translate(50%) scale(1);
389    opacity: 1;
390  }
391 
392  25% {
393    transform: rotate(360deg) translate(50%) scale(0.7);
394  }
395 
396  50% {
397    transform: rotate(450deg) translate(50%) scale(1.6);
398    opacity: 0.5;
399  }
400 
401  75% {
402    transform: rotate(540deg) translate(50%) scale(0.9);
403    opacity: 0.8;
404  }
405 
406  100% {
407    transform: rotate(630deg) translate(50%) scale(1);
408    opacity: 1;
409  }
410}
411 
412.c {
413  position: absolute;
414  width: 300px;
415  aspect-ratio: 1;
416  border-radius: 50%;
417}
418 
419.c1 {
420  background: radial-gradient(50% 50% at center, #c979ee, #74bcd6);
421  width: 200px;
422  animation: ai1 5.5s linear infinite;
423}
424 
425.c2 {
426  background: radial-gradient(50% 50% at center, #ef788c, #e7e7fb);
427  width: 100px;
428  animation: ai2 6s linear infinite;
429}
430 
431.c3 {
432  background: radial-gradient(50% 50% at center, #eb7fc6, transparent);
433  width: 150px;
434  opacity: 0.6;
435  animation: ai3 4.8s linear infinite;
436}
437 
438.c4 {
439  background: #6d67c8;
440  animation: ai4 5.2s linear infinite;
441}
442 
443.container {
444  overflow: hidden;
445  background: #b6a9f8;
446  width: 100%;
447  border-radius: 50%;
448  aspect-ratio: 1;
449  position: relative;
450  display: grid;
451  place-items: center;
452}
453 
454.glass {
455  overflow: hidden;
456  position: absolute;
457  inset: calc(var(--p) - 4px);
458  border-radius: 50%;
459  backdrop-filter: blur(10px);
460  box-shadow:
461    0 0 50px rgba(255, 255, 255, 0.3),
462    0 50px 50px rgba(0, 0, 0, 0.3),
463    0 0 25px rgba(255, 255, 255, 1);
464  background: radial-gradient(
465    75px at 70% 30%,
466    rgba(255, 255, 255, 0.7),
467    transparent
468  );
469}
470 
471.rings {
472  aspect-ratio: 1;
473  border-radius: 50%;
474  position: absolute;
475  inset: 0;
476  perspective: 11rem;
477  opacity: 0.9;
478 
479  &:before,
480  &:after {
481    content: "";
482    position: absolute;
483    inset: 0;
484    background: rgba(255, 0, 0, 1);
485    border-radius: 50%;
486    border: 6px solid transparent;
487    mask:
488      linear-gradient(#fff 0 0) padding-box,
489      linear-gradient(#fff 0 0);
490    background: linear-gradient(white, blue, magenta, violet, lightyellow)
491      border-box;
492    mask-composite: exclude;
493  }
494}
495 
496.rings::before {
497  animation: ring180 10s ease-in-out infinite;
498}
499 
500.rings::after {
501  animation: ring90 10s ease-in-out infinite;
502}
503 
504@keyframes ring180 {
505  0% {
506    transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
507  }
508 
509  25% {
510    transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
511  }
512 
513  50% {
514    transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
515  }
516 
517  80% {
518    transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
519  }
520 
521  100% {
522    transform: rotateY(540deg) rotateX(540deg) rotateZ(540deg);
523  }
524}
525 
526@keyframes ring90 {
527  0% {
528    transform: rotateY(90deg) rotateX(90deg) rotateZ(90deg);
529  }
530 
531  25% {
532    transform: rotateY(90deg) rotateX(90deg) rotateZ(90deg) scale(1.1);
533  }
534 
535  50% {
536    transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg);
537  }
538 
539  75% {
540    transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg);
541  }
542 
543  100% {
544    transform: rotateY(450deg) rotateX(450deg) rotateZ(450deg);
545  }
546}
547 
548@keyframes circle1 {
549  0% {
550    transform: scale(0.97);
551  }
552 
553  15% {
554    transform: scale(1);
555  }
556 
557  30% {
558    transform: scale(0.98);
559  }
560 
561  45% {
562    transform: scale(1);
563  }
564 
565  60% {
566    transform: scale(0.97);
567  }
568 
569  85% {
570    transform: scale(1);
571  }
572 
573  100% {
574    transform: scale(0.97);
575  }
576}