Upload 25 files

assets/css/animation/style.css

@@ -0,0 +1,1628 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.loading {
+  display: inline-block;
+  width: 1.1rem;
+  height: 1.1rem;
+  border: 2px solid #999;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.pulse-animation {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+  }
+}
+
+.floating-animation {
+  animation: floating 3s ease-in-out infinite;
+}
+
+@keyframes floating {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+.gradient-text {
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.typing-animation::after {
+  content: "|";
+  animation: blink 1s infinite;
+  margin-left: 2px;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.shine-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.shine-effect::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: 0.5s;
+}
+
+.shine-effect:hover::before {
+  left: 100%;
+}
+
+.bounce-in {
+  animation: bounceIn 0.6s ease-out;
+}
+
+@keyframes bounceIn {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.slide-in-left {
+  animation: slideInLeft 0.5s ease-out;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-right {
+  animation: slideInRight 0.5s ease-out;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.zoom-in {
+  animation: zoomIn 0.4s ease-out;
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.flip-in {
+  animation: flipIn 0.6s ease-out;
+}
+
+@keyframes flipIn {
+  from {
+    transform: rotateY(90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.fade-in-down {
+  animation: fadeInDown 0.5s ease-out;
+}
+
+@keyframes fadeInDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.rotate-in {
+  animation: rotateIn 0.6s ease-out;
+}
+
+@keyframes rotateIn {
+  from {
+    transform: rotate(15deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.scale-pulse {
+  animation: scalePulse 1.5s infinite;
+}
+
+@keyframes scalePulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.wave-animation {
+  animation: wave 2s infinite linear;
+}
+
+@keyframes wave {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+.glow-effect {
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
+  transition: box-shadow 0.3s ease;
+}
+
+.glow-effect:hover {
+  box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
+}
+
+.neon-glow {
+  text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6;
+  animation: neonPulse 2s infinite alternate;
+}
+
+@keyframes neonPulse {
+  from {
+    text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6;
+  }
+  to {
+    text-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6, 0 0 30px #3b82f6, 0 0 40px #3b82f6;
+  }
+}
+
+.rainbow-text {
+  background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: rainbow 3s linear infinite;
+}
+
+@keyframes rainbow {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
+
+.hologram-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.hologram-effect::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent);
+  background-size: 20px 20px;
+  animation: hologram 1s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes hologram {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 20px 20px;
+  }
+}
+
+.matrix-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.matrix-effect::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(rgba(0, 255, 0, 0.1) 50%, transparent 50%);
+  background-size: 100% 4px;
+  animation: matrix 0.5s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes matrix {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 4px;
+  }
+}
+
+.glass-effect {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.card-hover {
+  transition: all 0.3s ease;
+  transform: translateY(0);
+}
+
+.card-hover:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.text-glow {
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+  transition: text-shadow 0.3s ease;
+}
+
+.text-glow:hover {
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+}
+
+.border-glow {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: border-color 0.3s ease;
+}
+
+.border-glow:hover {
+  border-color: rgba(59, 130, 246, 0.5);
+}
+
+.shadow-glow {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease;
+}
+
+.shadow-glow:hover {
+  box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3);
+}
+
+.pulse-glow {
+  animation: pulseGlow 2s infinite;
+}
+
+@keyframes pulseGlow {
+  0% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+  }
+}
+
+.floating-glow {
+  animation: floatingGlow 3s ease-in-out infinite;
+}
+
+@keyframes floatingGlow {
+  0% {
+    transform: translateY(0);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  50% {
+    transform: translateY(-10px);
+    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
+  }
+  100% {
+    transform: translateY(0);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.rotate-glow {
+  animation: rotateGlow 4s linear infinite;
+}
+
+@keyframes rotateGlow {
+  0% {
+    transform: rotate(0deg);
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
+  }
+  25% {
+    box-shadow: 5px 0 5px rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 -5px 5px rgba(59, 130, 246, 0.5);
+  }
+  75% {
+    box-shadow: -5px 0 5px rgba(59, 130, 246, 0.5);
+  }
+  100% {
+    transform: rotate(360deg);
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
+  }
+}
+
+.wave-glow {
+  position: relative;
+  overflow: hidden;
+}
+
+.wave-glow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
+  animation: waveGlow 2s linear infinite;
+}
+
+@keyframes waveGlow {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.sparkle {
+  position: relative;
+}
+
+.sparkle::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 6px;
+  height: 6px;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
+  animation: sparkle 1.5s infinite;
+}
+
+@keyframes sparkle {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.shimmer {
+  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.ripple::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  transform: translate(-50%, -50%);
+  opacity: 0;
+}
+
+.ripple:active::after {
+  width: 200px;
+  height: 200px;
+  opacity: 1;
+  transition: width 0.3s, height 0.3s, opacity 0.3s;
+}
+
+.morph {
+  transition: all 0.3s ease;
+  border-radius: 10px;
+}
+
+.morph:hover {
+  border-radius: 20px;
+}
+
+.tilt {
+  transition: transform 0.3s ease;
+  transform-style: preserve-3d;
+}
+
+.tilt:hover {
+  transform: rotateY(10deg) rotateX(10deg);
+}
+
+.pop {
+  transition: all 0.2s ease;
+}
+
+.pop:active {
+  transform: scale(0.95);
+}
+
+.skew {
+  transition: transform 0.3s ease;
+}
+
+.skew:hover {
+  transform: skew(-5deg);
+}
+
+.stretch {
+  transition: all 0.3s ease;
+}
+
+.stretch:hover {
+  transform: scaleX(1.05);
+}
+
+.compress {
+  transition: all 0.3s ease;
+}
+
+.compress:hover {
+  transform: scaleY(0.95);
+}
+
+.swing {
+  transition: transform 0.3s ease;
+  transform-origin: top center;
+}
+
+.swing:hover {
+  transform: rotate(5deg);
+}
+
+.wobble {
+  animation: wobble 1s ease-in-out;
+}
+
+@keyframes wobble {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-10px);
+  }
+  75% {
+    transform: translateX(10px);
+  }
+}
+
+.jello {
+  animation: jello 0.6s ease;
+}
+
+@keyframes jello {
+  0%, 100% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(1.1, 0.9);
+  }
+  50% {
+    transform: scale(0.9, 1.1);
+  }
+  75% {
+    transform: scale(1.05, 0.95);
+  }
+}
+
+.heartbeat {
+  animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+@keyframes heartbeat {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+.bounce {
+  animation: bounce 1s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.flip {
+  animation: flip 1s ease;
+}
+
+@keyframes flip {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+.roll {
+  animation: roll 1s ease;
+}
+
+@keyframes roll {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.rubberBand {
+  animation: rubberBand 1s ease;
+}
+
+@keyframes rubberBand {
+  0%, 100% {
+    transform: scale(1, 1);
+  }
+  30% {
+    transform: scaleX(1.25) scaleY(0.75);
+  }
+  40% {
+    transform: scaleX(0.75) scaleY(1.25);
+  }
+  60% {
+    transform: scaleX(1.15) scaleY(0.85);
+  }
+}
+
+.shake {
+  animation: shake 0.5s ease;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+.tada {
+  animation: tada 1s ease;
+}
+
+@keyframes tada {
+  0%, 100% {
+    transform: scale(1);
+  }
+  10%, 20% {
+    transform: scale(0.9) rotate(-3deg);
+  }
+  30%, 50%, 70%, 90% {
+    transform: scale(1.1) rotate(3deg);
+  }
+  40%, 60%, 80% {
+    transform: scale(1.1) rotate(-3deg);
+  }
+}
+
+.lightSpeedIn {
+  animation: lightSpeedIn 0.5s ease-out;
+}
+
+@keyframes lightSpeedIn {
+  0% {
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+  60% {
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+  80% {
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+.lightSpeedOut {
+  animation: lightSpeedOut 0.5s ease-in;
+}
+
+@keyframes lightSpeedOut {
+  0% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+.rotateInDownLeft {
+  animation: rotateInDownLeft 0.6s ease-out;
+}
+
+@keyframes rotateInDownLeft {
+  0% {
+    transform-origin: left bottom;
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: left bottom;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  animation: rotateInDownRight 0.6s ease-out;
+}
+
+@keyframes rotateInDownRight {
+  0% {
+    transform-origin: right bottom;
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: right bottom;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  animation: rotateInUpLeft 0.6s ease-out;
+}
+
+@keyframes rotateInUpLeft {
+  0% {
+    transform-origin: left bottom;
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: left bottom;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  animation: rotateInUpRight 0.6s ease-out;
+}
+
+@keyframes rotateInUpRight {
+  0% {
+    transform-origin: right bottom;
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: right bottom;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.hinge {
+  animation: hinge 2s ease;
+}
+
+@keyframes hinge {
+  0% {
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+  }
+  20%, 60% {
+    transform: rotate(80deg);
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+  }
+  40%, 80% {
+    transform: rotate(60deg);
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+.jackInTheBox {
+  animation: jackInTheBox 0.7s ease;
+}
+
+@keyframes jackInTheBox {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) rotate(30deg);
+    transform-origin: center bottom;
+  }
+  50% {
+    transform: rotate(-10deg);
+  }
+  70% {
+    transform: rotate(3deg);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.rollIn {
+  animation: rollIn 0.7s ease;
+}
+
+@keyframes rollIn {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%) rotate(-120deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) rotate(0deg);
+  }
+}
+
+.rollOut {
+  animation: rollOut 0.7s ease;
+}
+
+@keyframes rollOut {
+  0% {
+    opacity: 1;
+    transform: translateX(0) rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+.zoomInDown {
+  animation: zoomInDown 0.6s ease;
+}
+
+@keyframes zoomInDown {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) translateY(-1000px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(0.475) translateY(60px);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInLeft {
+  animation: zoomInLeft 0.6s ease;
+}
+
+@keyframes zoomInLeft {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) translateX(-1000px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(0.475) translateX(10px);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInRight {
+  animation: zoomInRight 0.6s ease;
+}
+
+@keyframes zoomInRight {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) translateX(1000px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(0.475) translateX(-10px);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInUp {
+  animation: zoomInUp 0.6s ease;
+}
+
+@keyframes zoomInUp {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) translateY(1000px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(0.475) translateY(-60px);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOut {
+  animation: zoomOut 0.6s ease;
+}
+
+@keyframes zoomOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.zoomOutDown {
+  animation: zoomOutDown 0.6s ease;
+}
+
+@keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    transform: scale(0.475) translateY(-60px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.1) translateY(2000px);
+    transform-origin: center bottom;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOutLeft {
+  animation: zoomOutLeft 0.6s ease;
+}
+
+@keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    transform: scale(0.475) translateX(42px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.1) translateX(-2000px);
+    transform-origin: left center;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOutRight {
+  animation: zoomOutRight 0.6s ease;
+}
+
+@keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    transform: scale(0.475) translateX(-42px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.1) translateX(2000px);
+    transform-origin: right center;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOutUp {
+  animation: zoomOutUp 0.6s ease;
+}
+
+@keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    transform: scale(0.475) translateY(60px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.1) translateY(-2000px);
+    transform-origin: center top;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.slideInDown {
+  animation: slideInDown 0.5s ease-out;
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slideInLeft {
+  animation: slideInLeft 0.5s ease-out;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slideInRight {
+  animation: slideInRight 0.5s ease-out;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slideInUp {
+  animation: slideInUp 0.5s ease-out;
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slideOutDown {
+  animation: slideOutDown 0.5s ease-out;
+}
+
+@keyframes slideOutDown {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+.slideOutLeft {
+  animation: slideOutLeft 0.5s ease-out;
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slideOutRight {
+  animation: slideOutRight 0.5s ease-out;
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+.slideOutUp {
+  animation: slideOutUp 0.5s ease-out;
+}
+
+@keyframes slideOutUp {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+.fadeIn {
+  animation: fadeIn 0.5s ease-out;
+}
+
+.fadeOut {
+  animation: fadeOut 0.5s ease-out;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeInDown {
+  animation: fadeInDown 0.5s ease-out;
+}
+
+.fadeOutDown {
+  animation: fadeOutDown 0.5s ease-out;
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+.fadeInDownBig {
+  animation: fadeInDownBig 0.5s ease-out;
+}
+
+@keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    transform: translateY(-2000px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fadeOutDownBig {
+  animation: fadeOutDownBig 0.5s ease-out;
+}
+
+@keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(2000px);
+  }
+}
+
+.fadeInLeft {
+  animation: fadeInLeft 0.5s ease-out;
+}
+
+.fadeOutLeft {
+  animation: fadeOutLeft 0.5s ease-out;
+}
+
+@keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+.fadeInLeftBig {
+  animation: fadeInLeftBig 0.5s ease-out;
+}
+
+@keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    transform: translateX(-2000px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.fadeOutLeftBig {
+  animation: fadeOutLeftBig 0.5s ease-out;
+}
+
+@keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-2000px);
+  }
+}
+
+.fadeInRight {
+  animation: fadeInRight 0.5s ease-out;
+}
+
+.fadeOutRight {
+  animation: fadeOutRight 0.5s ease-out;
+}
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+.fadeInRightBig {
+  animation: fadeInRightBig 0.5s ease-out;
+}
+
+@keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    transform: translateX(2000px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.fadeOutRightBig {
+  animation: fadeOutRightBig 0.5s ease-out;
+}
+
+@keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(2000px);
+  }
+}
+
+.fadeInUp {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.fadeOutUp {
+  animation: fadeOutUp 0.5s ease-out;
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+.fadeInUpBig {
+  animation: fadeInUpBig 0.5s ease-out;
+}
+
+@keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    transform: translateY(2000px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fadeOutUpBig {
+  animation: fadeOutUpBig 0.5s ease-out;
+}
+
+@keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-2000px);
+  }
+}
+
+.flipInX {
+  animation: flipInX 0.6s ease;
+}
+
+@keyframes flipInX {
+  0% {
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+  40% {
+    transform: perspective(400px) rotateX(-10deg);
+  }
+  70% {
+    transform: perspective(400px) rotateX(10deg);
+  }
+  100% {
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInY {
+  animation: flipInY 0.6s ease;
+}
+
+@keyframes flipInY {
+  0% {
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+  40% {
+    transform: perspective(400px) rotateY(-10deg);
+  }
+  70% {
+    transform: perspective(400px) rotateY(10deg);
+  }
+  100% {
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.flipOutX {
+  animation: flipOutX 0.6s ease;
+}
+
+@keyframes flipOutX {
+  0% {
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  animation: flipOutY 0.6s ease;
+}
+
+@keyframes flipOutY {
+  0% {
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedInRight {
+  animation: lightSpeedInRight 0.5s ease-out;
+}
+
+@keyframes lightSpeedInRight {
+  0% {
+    transform: translateX(-100%) skewX(30deg);
+    opacity: 0;
+  }
+  60% {
+    transform: translateX(20%) skewX(-30deg);
+    opacity: 1;
+  }
+  80% {
+    transform: translateX(0%) skewX(15deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+.lightSpeedOutLeft {
+  animation: lightSpeedOutLeft 0.5s ease-in;
+}
+
+@keyframes lightSpeedOutLeft {
+  0% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-100%) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOutRight {
+  animation: lightSpeedOutRight 0.5s ease-in;
+}
+
+@keyframes lightSpeedOutRight {
+  0% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  animation: rotateOut 0.6s ease;
+}
+
+@keyframes rotateOut {
+  0% {
+    transform-origin: center;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: center;
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  animation: rotateOutDownLeft 0.6s ease;
+}
+
+@keyframes rotateOutDownLeft {
+  0% {
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: left bottom;
+    transform: rotate(45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  animation: rotateOutDownRight 0.6s ease;
+}
+
+@keyframes rotateOutDownRight {
+  0% {
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: right bottom;
+    transform: rotate(-45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  animation: rotateOutUpLeft 0.6s ease;
+}
+
+@keyframes rotateOutUpLeft {
+  0% {
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: left bottom;
+    transform: rotate(-45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  animation: rotateOutUpRight 0.6s ease;
+}
+
+@keyframes rotateOutUpRight {
+  0% {
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: right bottom;
+    transform: rotate(45deg);
+    opacity: 0;
+  }
+}

assets/css/button.css

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+#sendBtn, #stopBtn {
+  width: 2.75rem;
+  height: 2.75rem;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+#sendBtn {
+  background: linear-gradient(135deg, var(--color-primary), #2563eb);
+  color: white;
+}
+
+#sendBtn:hover:not(:disabled) {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+}
+
+#sendBtn:active:not(:disabled) {
+  transform: translateY(0) scale(0.98);
+}
+
+#sendBtn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: scale(0.96);
+}
+
+#stopBtn {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
+  display: none;
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
+}
+
+#stopBtn:hover {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
+}
+
+#stopBtn:active {
+  transform: translateY(0) scale(0.98);
+}
+
+#sendIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+  stroke: #fff;
+  transition: transform 0.2s ease;
+}
+
+#sendBtn:hover:not(:disabled) #sendIcon {
+  transform: translateX(2px);
+}

assets/css/chat/bubble.css

@@ -0,0 +1,56 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.bubble {
+  display: block;
+  align-self: flex-start;
+  background: #1f1f1f;
+  color: #e8e8e8;
+  border-radius: var(--bubble-radius);
+  line-height: 1.5;
+  white-space: normal;
+  font-family: 'Inter', sans-serif;
+  font-size: 0.95rem;
+  position: relative;
+  opacity: 0;
+  animation: bubbleAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  margin: 0.75rem 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  vertical-align: middle;
+  padding: 1rem 1rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  transition: all 0.3s ease;
+}
+
+.bubble:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+@keyframes bubbleAppear {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.bubble-user {
+  align-self: flex-end;
+  background: #2b2b2b;
+  color: #fff;
+  border-bottom-right-radius: 0.5rem;
+  box-shadow: none;
+}
+
+.bubble-assist {
+  align-self: flex-start;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}

assets/css/chat/markdown.css

@@ -0,0 +1,163 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.md-content {
+  color: inherit;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.md-content p {
+  margin: 0.5rem 0;
+}
+
+.md-content pre {
+  overflow: auto;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  margin: 0.75rem 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.md-content code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
+  font-size: 0.85em;
+  word-break: break-word;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 0.2em 0.4em;
+  border-radius: 0.3rem;
+}
+
+.md-content pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.md-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75rem 0;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+.table-wrapper {
+  overflow: auto;
+  border-radius: 0.6rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin: 0.5rem 0;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.md-content th, .md-content td {
+  padding: 0.6rem 0.8rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+  vertical-align: top;
+  word-break: break-word;
+  max-width: 200px;
+}
+
+.md-content th, tbody tr:nth-child(odd) td {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.md-content ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.md-content ul ul {
+  list-style-type: none;
+  padding-left: 2em;
+}
+
+.md-content ul ul ul {
+  list-style-type: none;
+  padding-left: 2em;
+}
+
+.md-content ol {
+  list-style-type: none;
+  padding-left: 0;
+  counter-reset: list-counter;
+}
+
+.md-content ol ol {
+  list-style-type: none;
+  padding-left: 2em;
+}
+
+.md-content ol ol ol {
+  list-style-type: none;
+  padding-left: 2em;
+}
+
+.md-content ul > li, .md-content ol > li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  position: relative;
+  padding-left: 2.8em;
+}
+
+.md-content ul > li::before {
+  content: "•";
+  position: absolute;
+  left: 1em;
+  top: 0;
+  font-size: 1.2em;
+}
+
+.md-content ol > li {
+  counter-increment: list-counter;
+}
+
+.md-content ol > li::before {
+  content: counter(list-counter) ".";
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-width: 2.5em;
+  text-align: right;
+  padding-right: 0.5em;
+  font-weight: 500;
+}
+
+.md-content hr {
+  border: 0;
+  height: 2px;
+  background: #ffffff;
+  margin: 1.2rem 0;
+  border-radius: 2px;
+}
+
+.md-content blockquote {
+  border-left: 4px solid rgba(59, 130, 246, 0.5);
+  padding: 0.75rem 1rem;
+  margin: 0.75rem 0;
+  color: rgba(255, 255, 255, 0.9);
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: 0.5rem;
+  overflow-wrap: break-word;
+}
+
+.md-content img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0.75rem auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.md-content table td pre, .md-content table th pre {
+  overflow: auto;
+}

assets/css/chat/style.css

@@ -0,0 +1,58 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.chat-title {
+  font-weight: 700;
+  font-size: 1rem;
+  color: #e6eefc;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chat-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+#chatArea {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+}
+
+#chatBox {
+  display: none;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: 0.75rem 0.75rem calc(var(--footer-height) + 1rem) 1rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}

assets/css/footer.css

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+#footerForm {
+  display: flex;
+  gap: 0.75rem;
+  background-color: transparent;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 5rem;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  animation: slideInUp 0.3s ease-out forwards;
+  height: 0;
+}

assets/css/header.css

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.main-header, .chat-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
+  height: var(--header-height);
+  background-color: rgba(15, 15, 15, 0.85);
+}
+
+.main-header {
+  justify-content: space-between;
+}
+
+.chat-header {
+  justify-content: space-between;
+  display: none;
+}

assets/css/icon.css

@@ -0,0 +1,83 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.icon-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: #dbe3ff;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.icon-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.icon-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  color: #9ca3af;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.prompt-item:hover .icon {
+  transform: scale(1.1);
+}
+
+#leftIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.2rem;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+#leftIcon:hover {
+  color: var(--color-primary);
+  transform: scale(1.1);
+}
+
+#rightIconGroup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.2rem;
+  gap: 0.5rem;
+}
+
+.linkedin {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23dbe3ff' class='bi bi-linkedin' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transition: transform 0.2s ease;
+}
+
+.icon-btn:hover .linkedin {
+  transform: scale(1.1);
+}

assets/css/input.css

@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+#inputContainer {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  background: linear-gradient(145deg, #1a1a1a, #141414);
+  border-radius: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 0.25rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: 100%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#inputContainer:focus-within {
+  border-color: var(--color-primary);
+  background: linear-gradient(145deg, #1f1f1f, #1a1a1a);
+  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
+  transform: translateY(-1px);
+}
+
+#userInput {
+  flex: 1;
+  padding: 0.75rem 0.75rem;
+  border-radius: 2rem;
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: #e0e0e0;
+  font-size: 1rem;
+  outline: none;
+  transition: border-color 0.2s, background-color 0.2s;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+  min-width: 0;
+  font-family: 'Inter', sans-serif;
+}

assets/css/logo.css

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.logo {
+  font-weight: 800;
+  font-size: 1.125rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #eaeef8;
+  word-break: break-word;
+  transition: transform 0.2s ease;
+  height: 100%;
+}
+
+.logo:hover {
+  transform: scale(1.05);
+}

assets/css/prompts.css

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.prompts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.prompt-item {
+  background: linear-gradient(145deg, #1a1a1a, #141414);
+  padding: 1rem 1.25rem;
+  border-radius: var(--prompt-radius);
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  word-break: break-word;
+  overflow-wrap: break-word;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  animation: fadeIn 0.5s ease-out forwards;
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.prompt-item:nth-child(1) { animation-delay: 0.1s; }
+.prompt-item:nth-child(2) { animation-delay: 0.2s; }
+.prompt-item:nth-child(3) { animation-delay: 0.3s; }
+.prompt-item:nth-child(4) { animation-delay: 0.4s; }
+
+.prompt-item:hover {
+  background: linear-gradient(145deg, #1f1f1f, #1a1a1a);
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+}
+
+.prompt-item:active {
+  transform: translateY(0) scale(0.98);
+}

assets/css/screen/1200.css

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (min-width: 1200px) {
+  .prompts {
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    max-width: 1200px;
+  }
+
+  .title {
+    font-size: clamp(2rem, 3vw, 3rem);
+  }
+}

assets/css/screen/2000.css

@@ -0,0 +1,50 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (min-width: 2000px) {
+  :root {
+    --header-height: 4.5rem;
+    --footer-height: 6rem;
+    --border-radius: 1.25rem;
+    --bubble-radius: 1.25rem;
+    --prompt-radius: 1.25rem;
+    font-size: 1.1rem;
+  }
+
+  .title {
+    font-size: clamp(2.5rem, 2.5vw, 3.5rem);
+  }
+
+  .prompts {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    max-width: 1600px;
+  }
+
+  .prompt-item {
+    padding: 1.25rem 1.5rem;
+    border-radius: 1.25rem;
+  }
+
+  .bubble {
+    padding: 1.25rem 1.5rem;
+    font-size: 1.1rem;
+    border-radius: 1.25rem;
+  }
+
+  #userInput {
+    padding: 1rem 1.25rem;
+    font-size: 1.1rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 3.25rem;
+    height: 3.25rem;
+  }
+
+  .icon-btn {
+    width: 3rem;
+    height: 3rem;
+  }
+}

assets/css/screen/320.css

@@ -0,0 +1,82 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (max-width: 320px) {
+  :root {
+    --header-height: 2.25rem;
+    --footer-height: 3.5rem;
+    --border-radius: 0.5rem;
+    --bubble-radius: 0.5rem;
+    --prompt-radius: 0.5rem;
+  }
+
+  .main-header, .chat-header {
+    padding: 0.3rem 0.4rem;
+  }
+
+  #chatBox {
+    padding: 0.3rem 0.4rem calc(var(--footer-height) + 0.4rem) 0.4rem;
+  }
+
+  #footerForm {
+    padding: 0.3rem 0.4rem;
+  }
+
+  #userInput {
+    padding: 0.4rem 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .title {
+    font-size: clamp(1rem, 5vw, 1.4rem);
+    margin-bottom: 0.7rem;
+  }
+
+  .prompts {
+    gap: 0.4rem;
+    margin-bottom: 0.7rem;
+  }
+
+  .prompt-item {
+    padding: 0.5rem 0.7rem;
+    gap: 0.4rem;
+  }
+
+  .icon {
+    width: 0.8rem;
+    height: 0.8rem;
+  }
+
+  .system {
+    font-size: 0.6rem;
+    margin-top: 0.7rem;
+  }
+
+  .bubble {
+    padding: 0.5rem 0.7rem;
+    font-size: 0.75rem;
+    border-radius: 0.5rem;
+    margin: 0.3rem 0;
+  }
+
+  .chat-title {
+    font-size: 0.8rem;
+  }
+
+  .icon-btn {
+    padding: 0.25rem;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .logo {
+    font-size: 0.85rem;
+  }
+}

assets/css/screen/360.css

@@ -0,0 +1,82 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (max-width: 360px) {
+  :root {
+    --header-height: 2.5rem;
+    --footer-height: 3.75rem;
+    --border-radius: 0.625rem;
+    --bubble-radius: 0.625rem;
+    --prompt-radius: 0.625rem;
+  }
+
+  .main-header, .chat-header {
+    padding: 0.35rem 0.5rem;
+  }
+
+  #chatBox {
+    padding: 0.4rem 0.5rem calc(var(--footer-height) + 0.5rem) 0.5rem;
+  }
+
+  #footerForm {
+    padding: 0.4rem 0.5rem;
+  }
+
+  #userInput {
+    padding: 0.45rem 0.6rem;
+    font-size: 0.85rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .title {
+    font-size: clamp(1.1rem, 5vw, 1.6rem);
+    margin-bottom: 0.8rem;
+  }
+
+  .prompts {
+    gap: 0.5rem;
+    margin-bottom: 0.8rem;
+  }
+
+  .prompt-item {
+    padding: 0.6rem 0.8rem;
+    gap: 0.5rem;
+  }
+
+  .icon {
+    width: 0.9rem;
+    height: 0.9rem;
+  }
+
+  .system {
+    font-size: 0.65rem;
+    margin-top: 0.8rem;
+  }
+
+  .bubble {
+    padding: 0.6rem 0.8rem;
+    font-size: 0.8rem;
+    border-radius: 0.625rem;
+    margin: 0.4rem 0;
+  }
+
+  .chat-title {
+    font-size: 0.85rem;
+  }
+
+  .icon-btn {
+    padding: 0.3rem;
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .logo {
+    font-size: 0.9rem;
+  }
+}

assets/css/screen/3840.css

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (min-width: 3840px) {
+  :root {
+    --header-height: 5.5rem;
+    --footer-height: 7rem;
+    --border-radius: 1.5rem;
+    --bubble-radius: 1.5rem;
+    --prompt-radius: 1.5rem;
+    font-size: 1.3rem;
+  }
+
+  .title {
+    font-size: clamp(3rem, 2vw, 5rem);
+  }
+
+  .prompts {
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    max-width: 2000px;
+    gap: 1.5rem;
+  }
+
+  .prompt-item {
+    padding: 1.5rem 1.75rem;
+    border-radius: 1.5rem;
+  }
+
+  .bubble {
+    padding: 1.5rem 1.75rem;
+    font-size: 1.2rem;
+    border-radius: 1.5rem;
+  }
+
+  #userInput {
+    padding: 1.25rem 1.5rem;
+    font-size: 1.2rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 3.75rem;
+    height: 3.75rem;
+  }
+
+  .icon-btn {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+}

assets/css/screen/480.css

@@ -0,0 +1,78 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (max-width: 480px) {
+  :root {
+    --header-height: 2.75rem;
+    --footer-height: 4rem;
+    --border-radius: 0.75rem;
+    --bubble-radius: 0.75rem;
+    --prompt-radius: 0.75rem;
+  }
+
+  .main-header, .chat-header {
+    padding: 0.4rem 0.6rem;
+  }
+
+  #chatBox {
+    padding: 0.5rem 0.6rem calc(var(--footer-height) + 0.6rem) 0.6rem;
+  }
+
+  #footerForm {
+    padding: 0.5rem 0.6rem;
+  }
+
+  #userInput {
+    padding: 0.5rem 0.7rem;
+    font-size: 0.9rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .title {
+    font-size: clamp(1.2rem, 5vw, 1.8rem);
+    margin-bottom: 1rem;
+  }
+
+  .prompts {
+    gap: 0.6rem;
+    margin-bottom: 1rem;
+  }
+
+  .prompt-item {
+    padding: 0.7rem 0.9rem;
+    gap: 0.6rem;
+  }
+
+  .icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .system {
+    font-size: 0.7rem;
+    margin-top: 1rem;
+  }
+
+  .bubble {
+    padding: 0.7rem 0.9rem;
+    font-size: 0.85rem;
+    border-radius: 0.75rem;
+    margin: 0.5rem 0;
+  }
+
+  .chat-title {
+    font-size: 0.9rem;
+  }
+
+  .icon-btn {
+    padding: 0.35rem;
+    width: 2rem;
+    height: 2rem;
+  }
+}

assets/css/screen/720.css

@@ -0,0 +1,88 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (max-width: 767px) {
+  :root {
+    --header-height: 3rem;
+    --footer-height: 4.5rem;
+    --border-radius: 0.875rem;
+    --bubble-radius: 0.875rem;
+    --prompt-radius: 0.875rem;
+  }
+
+  .main-header, .chat-header {
+    padding: 0.5rem 0.75rem;
+  }
+
+  #chatBox {
+    padding: 0.6rem 0.75rem calc(var(--footer-height) + 0.75rem) 0.75rem;
+  }
+
+  #footerForm {
+    padding: 0.6rem 0.75rem;
+  }
+
+  #inputContainer {
+    padding: 0.2rem;
+  }
+
+  #userInput {
+    padding: 0.6rem 0.8rem;
+    font-size: 0.95rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .title {
+    font-size: clamp(1.3rem, 5vw, 2rem);
+    margin-bottom: 1.2rem;
+  }
+
+  .prompts {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+    margin-bottom: 1.2rem;
+  }
+
+  .prompt-item {
+    padding: 0.8rem 1rem;
+    gap: 0.7rem;
+  }
+
+  .icon {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+
+  .system {
+    font-size: 0.75rem;
+    margin-top: 1.2rem;
+    line-height: 1.5;
+  }
+
+  .bubble {
+    padding: 0.8rem 1rem;
+    font-size: 0.9rem;
+    border-radius: 0.875rem;
+    margin: 0.6rem 0;
+  }
+
+  .chat-title {
+    font-size: 0.95rem;
+  }
+
+  .chat-controls {
+    gap: 0.4rem;
+  }
+
+  .icon-btn {
+    padding: 0.4rem;
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+}

assets/css/screen/7680.css

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (min-width: 7680px) {
+  :root {
+    --header-height: 7rem;
+    --footer-height: 9rem;
+    --border-radius: 2rem;
+    --bubble-radius: 2rem;
+    --prompt-radius: 2rem;
+    font-size: 1.6rem;
+  }
+
+  .title {
+    font-size: clamp(4rem, 1.5vw, 7rem);
+  }
+
+  .prompts {
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    max-width: 3000px;
+    gap: 2rem;
+  }
+
+  .prompt-item {
+    padding: 2rem 2.25rem;
+    border-radius: 2rem;
+  }
+
+  .bubble {
+    padding: 2rem 2.25rem;
+    font-size: 1.4rem;
+    border-radius: 2rem;
+  }
+
+  #userInput {
+    padding: 1.5rem 2rem;
+    font-size: 1.4rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+
+  .icon-btn {
+    width: 4rem;
+    height: 4rem;
+  }
+}

assets/css/screen/common.css

@@ -0,0 +1,66 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.max-w-screen-xl {
+  max-width: min(1280px, 100%);
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  box-sizing: border-box;
+}
+
+@media (min-width: 640px) {
+  .max-w-screen-xl {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .max-w-screen-xl {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .max-w-screen-xl {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .max-w-screen-xl {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+
+@media (min-width: 2000px) {
+  .max-w-screen-xl {
+    max-width: 1600px;
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+}
+
+@media (min-width: 3840px) {
+  .max-w-screen-xl {
+    max-width: 2400px;
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+}
+
+@media (min-width: 7680px) {
+  .max-w-screen-xl {
+    max-width: 4000px;
+    padding-left: 8rem;
+    padding-right: 8rem;
+  }
+}

assets/css/style.css

@@ -0,0 +1,94 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  font-family: 'Inter', sans-serif;
+  font-size: 1rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-dark);
+  color: var(--text-dark);
+  overflow: hidden;
+  word-wrap: break-word;
+}
+
+:root {
+  --color-primary: #3b82f6;
+  --background-dark: #0f0f0f;
+  --background-light: #fff;
+  --text-dark: #e5e7eb;
+  --text-light: #111;
+  --white-line-color: #ffffff;
+  --header-height: 3.5rem;
+  --footer-height: 5rem;
+  --transition-speed: 0.3s;
+  --border-radius: 1rem;
+  --bubble-radius: 1rem;
+  --prompt-radius: 1rem;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--header-height);
+  height: calc(100vh - var(--header-height));
+  overflow: hidden;
+}
+
+#initialContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  padding: 1.5rem 1rem;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  animation: fadeIn 0.8s ease-out forwards;
+}
+
+.title {
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
+  font-weight: 800;
+  color: #eaeef8;
+  margin-bottom: 1.5rem;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  animation: slideInUp 0.6s ease-out forwards;
+}
+
+.system {
+  text-align: center;
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+  font-size: 0.7rem;
+  color: #9ca3af;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 600px;
+  line-height: 1.6;
+  animation: fadeIn 1s ease-out 0.6s forwards;
+  opacity: 0;
+}

assets/css/webkit.css

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(59, 130, 246, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(59, 130, 246, 0.7);
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+}

assets/plugins/loader.js

@@ -0,0 +1,315 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Prism.
+Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';
+
+// WebSocket URL helper.
+function createWebSocket() {
+  return new WebSocket((window.location.protocol === "https:" ? "wss" : "ws") + "//" + window.location.host);
+}
+
+// UI elements.
+const chatArea = document.getElementById('chatArea');
+const chatBox = document.getElementById('chatBox');
+const initialContent = document.getElementById('initialContent');
+const form = document.getElementById('footerForm');
+const input = document.getElementById('userInput');
+const btn = document.getElementById('sendBtn');
+const stopBtn = document.getElementById('stopBtn');
+const promptItems = document.querySelectorAll('.prompt-item');
+const mainHeader = document.getElementById('mainHeader');
+const chatHeader = document.getElementById('chatHeader');
+const homeBtn = document.getElementById('homeBtn');
+const clearBtn = document.getElementById('clearBtn');
+
+// Track state.
+let socket = null;
+let streamMsg = null;
+let conversationHistory = [];
+let currentAssistantText = "";
+let isRequestActive = false;
+let abortController = null;
+
+// Render markdown content.
+function renderMarkdown(el) {
+  const raw = el.dataset.text || "";
+  const html = marked.parse(raw, {
+    gfm: true,
+    breaks: true,
+    smartLists: true,
+    smartypants: false,
+    headerIds: false
+  });
+  el.innerHTML = '<div class="md-content">' + html + '</div>';
+  const wrapper = el.querySelector('.md-content');
+
+  // Wrap tables.
+  const tables = wrapper.querySelectorAll('table');
+  tables.forEach(t => {
+    if (t.parentNode && t.parentNode.classList && t.parentNode.classList.contains('table-wrapper')) return;
+    const div = document.createElement('div');
+    div.className = 'table-wrapper';
+    t.parentNode.insertBefore(div, t);
+    div.appendChild(t);
+  });
+
+  // Style horizontal rules.
+  const hrs = wrapper.querySelectorAll('hr');
+  hrs.forEach(h => {
+    if (!h.classList.contains('styled-hr')) {
+      h.classList.add('styled-hr');
+    }
+  });
+
+  // Highlight code.
+  Prism.highlightAllUnder(wrapper);
+}
+
+// Chat view.
+function enterChatView() {
+  mainHeader.style.display = 'none';
+  chatHeader.style.display = 'flex';
+  chatHeader.setAttribute('aria-hidden', 'false');
+  chatBox.style.display = 'flex';
+  initialContent.style.display = 'none';
+}
+
+// Home view.
+function leaveChatView() {
+  mainHeader.style.display = 'flex';
+  chatHeader.style.display = 'none';
+  chatHeader.setAttribute('aria-hidden', 'true');
+  chatBox.style.display = 'none';
+  initialContent.style.display = 'flex';
+}
+
+// Chat bubble.
+function addMsg(who, text) {
+  const div = document.createElement('div');
+  div.className = 'bubble ' + (who === 'user' ? 'bubble-user' : 'bubble-assist');
+  div.dataset.text = text;
+  renderMarkdown(div);
+  chatBox.appendChild(div);
+  chatBox.style.display = 'flex';
+  chatBox.scrollTop = chatBox.scrollHeight;
+  return div;
+}
+
+// Clear all chat.
+function clearAllMessages() {
+  stopStream(true);
+  conversationHistory = [];
+  currentAssistantText = "";
+  if (streamMsg) {
+    const loadingEl = streamMsg.querySelector('.loading');
+    if (loadingEl) loadingEl.remove();
+    streamMsg = null;
+  }
+  chatBox.innerHTML = "";
+  input.value = "";
+  btn.disabled = true;
+  stopBtn.style.display = 'none';
+  btn.style.display = 'inline-flex';
+  enterChatView();
+}
+
+// Reconnect WebSocket.
+let reconnectAttempts = 0;
+function setupWebSocket() {
+  if (socket) {
+    socket.onopen = null;
+    socket.onclose = null;
+    socket.onmessage = null;
+    socket.onerror = null;
+    socket.close();
+    socket = null;
+  }
+
+  socket = createWebSocket();
+
+  socket.onopen = () => {
+    reconnectAttempts = 0;
+  };
+
+  socket.onclose = () => {
+    reconnectAttempts++;
+    // Try reconnecting.
+    const delay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts));  // 30 seconds.
+    setTimeout(setupWebSocket, delay);
+  };
+
+  socket.onmessage = handleSocketMessage;
+
+  socket.onerror = () => {
+    socket.close();
+  };
+}
+
+// Handle incoming socket messages.
+function handleSocketMessage(e) {
+  const data = JSON.parse(e.data);
+  if (data.type === 'chunk') {
+    if (streamMsg) {
+      const loadingEl = streamMsg.querySelector('.loading');
+      if (loadingEl) loadingEl.remove();
+      streamMsg.dataset.text += data.chunk;
+      currentAssistantText = streamMsg.dataset.text || "";
+      renderMarkdown(streamMsg);
+      chatBox.scrollTop = chatBox.scrollHeight;
+    }
+  } else if (data.type === 'end' || data.type === 'error') {
+    if (streamMsg) {
+      const loadingEl = streamMsg.querySelector('.loading');
+      if (loadingEl) loadingEl.remove();
+      streamMsg.dataset.done = '1';
+      if (data.type === 'error') {
+        streamMsg.dataset.text = data.error || 'An error occurred during the request.';
+        renderMarkdown(streamMsg);
+      } else {
+        conversationHistory.push({ role: 'assistant', content: streamMsg.dataset.text });
+      }
+      streamMsg = null;
+      isRequestActive = false;
+      abortController = null;
+    }
+    btn.style.display = 'inline-flex';
+    stopBtn.style.display = 'none';
+    stopBtn.style.pointerEvents = 'auto';
+  }
+}
+
+// Send user message.
+async function submitMessage() {
+  const message = input.value.trim();
+  if (!message || isRequestActive) return;
+  enterChatView();
+  addMsg('user', message);
+  conversationHistory.push({ role: 'user', content: message });
+  streamMsg = addMsg('assistant', '');
+  const loadingEl = document.createElement('span');
+  loadingEl.className = 'loading';
+  streamMsg.appendChild(loadingEl);
+  stopBtn.style.display = 'inline-flex';
+  btn.style.display = 'none';
+  input.value = '';
+  btn.disabled = true;
+
+  isRequestActive = true;
+
+  // Stopping request.
+  abortController = new AbortController();
+  try {
+    socket.send(JSON.stringify({
+      type: 'ask',
+      message,
+      history: conversationHistory,
+      abortSignal: true
+    }));
+  } catch (error) {
+    if (streamMsg) {
+      const loadingEl = streamMsg.querySelector('.loading');
+      if (loadingEl) loadingEl.remove();
+      streamMsg.dataset.text = error.message || 'An error occurred during the request.';
+      renderMarkdown(streamMsg);
+      streamMsg.dataset.done = '1';
+      streamMsg = null;
+      isRequestActive = false;
+      abortController = null;
+    }
+    btn.style.display = 'inline-flex';
+    stopBtn.style.display = 'none';
+  }
+}
+
+// Stop streaming and cancel the ongoing request.
+function stopStream(forceCancel = false) {
+  if (!isRequestActive) return;
+
+  isRequestActive = false;
+
+  if (abortController) {
+    abortController.abort();
+    abortController = null;
+  }
+
+  // Notify server to stop sending streams / processing.
+  try {
+    socket.send(JSON.stringify({ type: 'stop' }));
+  } catch {}
+
+  if (streamMsg && !forceCancel) {
+    const loadingEl = streamMsg.querySelector('.loading');
+    if (loadingEl) loadingEl.remove();
+    streamMsg.dataset.text += '';
+    renderMarkdown(streamMsg);
+    streamMsg.dataset.done = '1';
+    streamMsg = null;
+  }
+
+  stopBtn.style.display = 'none';
+  btn.style.display = 'inline-flex';
+  stopBtn.style.pointerEvents = 'auto';
+}
+
+// Wait for socket ready.
+function sendWhenReady(msgFn) {
+  if (socket.readyState === WebSocket.OPEN) {
+    msgFn();
+  } else {
+    socket.addEventListener('open', function handler() {
+      msgFn();
+      socket.removeEventListener('open', handler);
+    });
+  }
+}
+
+// Prompts.
+promptItems.forEach(p => {
+  p.addEventListener('click', () => {
+    input.value = p.dataset.prompt;
+    sendWhenReady(submitMessage);
+  });
+});
+
+// Submit.
+form.addEventListener('submit', e => {
+  e.preventDefault();
+  submitMessage();
+});
+
+// Stop.
+stopBtn.addEventListener('click', () => {
+  stopBtn.style.pointerEvents = 'none';
+  stopStream();
+});
+
+// Home.
+homeBtn.addEventListener('click', () => {
+  leaveChatView();
+});
+
+// Clear messages.
+clearBtn.addEventListener('click', () => {
+  clearAllMessages();
+});
+
+// Enable send button only if input has text.
+input.addEventListener('input', () => {
+  btn.disabled = input.value.trim() === '';
+});
+
+// Animations.
+document.addEventListener('DOMContentLoaded', function () {
+  AOS.init({
+    duration: 800,
+    easing: 'ease-out-cubic',
+    once: true,
+    offset: 50
+  });
+});
+
+// Initialize WebSocket connection.
+setupWebSocket();