Upload 109 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/assets/sounds/music.mp3 filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,24 @@
+# Use official Python runtime as base image
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first to leverage Docker cache
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+ENV PORT=7860
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# Command to run the application
+CMD ["python", "app.py"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Johnny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,24 @@
 ---
-title: TextToSurvive
-emoji: 🌍
-colorFrom: yellow
-colorTo: indigo
-sdk: docker
+title: The Last Message
+emoji: 📱
+colorFrom: gray
+colorTo: red
+sdk: gradio
+sdk_version: "3.50.2"
+app_file: app.py
 pinned: false
-license: apache-2.0
-short_description: Text to Survie (Team 9)
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# The Last Message - Horror Escape Game
+
+An interactive horror escape game where your messages determine the fate of others.
+
+### Docker
+
+# Build the image
+
+docker build -t p5js-game .
+
+# Run the container
+
+docker run -p 8000:8000 p5js-game

app.py

@@ -0,0 +1,58 @@
+from flask import Flask, request, jsonify, render_template, send_from_directory
+import requests
+import os
+from flask_cors import CORS
+import logging
+
+app = Flask(__name__)
+CORS(app)  # Enable CORS for development
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+@app.route('/mistral-proxy', methods=['POST'])
+def proxy_to_mistral():
+    MISTRAL_API_KEY = os.getenv('MISTRAL_API_KEY')
+    MISTRAL_API_URL = "https://api.mistral.ai/v1/chat/completions"
+    
+    if not MISTRAL_API_KEY:
+        logger.error("MISTRAL_API_KEY not configured")
+        return jsonify({"error": "MISTRAL_API_KEY not configured"}), 500
+    
+    headers = {
+        'Authorization': f'Bearer {MISTRAL_API_KEY}',
+        'Content-Type': 'application/json'
+    }
+    
+    try:
+        # Log incoming request (excluding sensitive data)
+        logger.info(f"Received request for Mistral API")
+        
+        response = requests.post(MISTRAL_API_URL, 
+                               headers=headers,
+                               json=request.json)
+        
+        # Check if the response was successful
+        response.raise_for_status()
+        
+        return jsonify(response.json())
+    except requests.exceptions.RequestException as e:
+        logger.error(f"Error calling Mistral API: {str(e)}")
+        return jsonify({"error": f"Error calling Mistral API: {str(e)}"}), 500
+    except Exception as e:
+        logger.error(f"Unexpected error: {str(e)}")
+        return jsonify({"error": str(e)}), 500
+
+# Serve static files
+@app.route('/')
+def index():
+    return send_from_directory('static', 'index.html')
+
+# Add this if you want to serve other static files
+@app.route('/<path:path>')
+def serve_static(path):
+    return send_from_directory('static', path)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860) 

requirements.txt

@@ -0,0 +1,4 @@
+flask==3.0.0
+requests==2.31.0
+flask-cors==4.0.0
+python-dotenv==1.0.0

static/assets/css/game-style.css

@@ -0,0 +1,566 @@
+  /* Layout */
+  body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    display: flex;
+    background-color: #220a0a;
+    height: 100vh;
+    position: relative;
+    overflow: hidden;
+}
+* {
+    opacity: 0.98;
+}
+#gameContainer {
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    overflow: auto;
+    position: relative;
+    z-index: 1;
+    align-items: center;
+}
+
+#mapSection {
+    flex: 1;
+    min-width: 600px;
+    width: fit-content;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: auto;
+    z-index: 2;
+    padding: 20px;
+}
+
+/* We'll place the P5 canvas in here */
+.map-wrapper {
+    margin: 20px;
+    transform-origin: center center;
+    min-width: min-content;
+}
+
+#chatSection {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #000000;
+    border-radius: 38px;
+    overflow: hidden;
+}
+
+#chatHistory {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    background: #f8f8fa;
+}
+
+/* Style moderne pour la barre de scroll */
+#chatHistory::-webkit-scrollbar {
+    width: 6px;
+}
+
+#chatHistory::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+#chatHistory::-webkit-scrollbar-thumb {
+    background: #d1d1d6;
+    border-radius: 3px;
+}
+
+#chatControls {
+    padding: 16px;
+    background: #ffffff;
+    display: flex;
+    gap: 12px;
+    border-top: 1px solid #f1f1f5;
+}
+
+.chat-message {
+    padding: 12px 16px;
+    margin: 6px 0;
+    border-radius: 20px;
+    max-width: 75%;
+    font-size: 0.95em;
+    line-height: 1.4;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.user-message {
+    background: #007aff;
+    color: white;
+    margin-left: auto;
+    border-radius: 20px 20px 4px 20px;
+}
+
+.assistant-message {
+    background: #f1f1f5;
+    color: #000000;
+    margin-right: auto;
+    border-radius: 20px 20px 20px 4px;
+}
+
+input {
+    flex: 1;
+    padding: 12px 16px;
+    border: none;
+    border-radius: 20px;
+    font-family: inherit;
+    font-size: 0.95em;
+    background: #f1f1f5;
+    transition: background 0.2s;
+}
+
+input:focus {
+    outline: none;
+    background: #e5e5ea;
+}
+
+input::placeholder {
+    color: #8e8e93;
+}
+
+button {
+    padding: 8px;
+    width: 40px;
+    height: 40px;
+    background: #007aff;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s, background 0.2s;
+}
+
+button:hover {
+    background: #0056b3;
+    transform: scale(1.05);
+}
+
+/* Style moderne pour l'indicateur de chargement */
+.loading-dots {
+    display: inline-flex;
+    gap: 4px;
+    padding: 8px 12px;
+    background: #f1f1f5;
+    border-radius: 16px;
+}
+
+.dot {
+    width: 6px;
+    height: 6px;
+    background: #8e8e93;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out;
+}
+
+.dot:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+
+    0%,
+    80%,
+    100% {
+        transform: scale(0);
+    }
+
+    40% {
+        transform: scale(1);
+    }
+}
+
+/* Modal for API key (if needed) */
+#apiKeyModal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 300px;
+}
+
+#apiKey {
+    width: 100%;
+    margin: 10px 0;
+    padding: 8px;
+}
+
+/* Modifier les styles du chat et du mockup */
+.phone-mockup {
+    position: relative;
+    width: 400px;
+    height: 800px;
+    background: url("/static/assets/img/phone.png") no-repeat center;
+    background-size: contain;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    padding: 35px 0;
+    flex-shrink: 0;
+    z-index: 2;
+}
+
+.phone-screen {
+    width: 90%;
+    height: 96.5%;
+    position: relative;
+    overflow: hidden;
+    margin: 0;
+    border-radius: 40px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Update media queries for better responsiveness */
+@media (max-height: 900px) {
+    .phone-mockup {
+        width: 350px;
+        height: 700px;
+    }
+}
+
+@media (max-height: 700px) {
+    .phone-mockup {
+        width: 300px;
+        height: 600px;
+    }
+}
+
+@media (max-width: 1200px) {
+    #mapSection {
+        flex: none;
+        width: fit-content;
+    }
+}
+
+@media (max-width: 900px) {
+    #mapSection {
+        flex: none;
+        width: fit-content;
+    }
+    .phone-mockup {
+        min-width: 280px;
+    }
+}
+
+/* Ajouter les nouveaux styles pour l'en-tête du chat */
+#chatHeader {
+    padding: 16px;
+    justify-content: center;
+    background: #ffffff;
+    border-bottom: 1px solid #f1f1f5;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.profile-picture {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #f1f1f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.chat-name {
+    font-size: 1.1em;
+    font-weight: 600;
+    color: #000000;
+}
+
+/* LED Bar */
+.led-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg,
+            transparent 0%,
+            rgba(255, 0, 0, 0.4) 20%,
+            rgba(255, 0, 0, 0.8) 35%,
+            rgba(255, 50, 50, 1) 50%,
+            rgba(255, 0, 0, 0.8) 65%,
+            rgba(255, 0, 0, 0.4) 80%,
+            transparent 100%);
+    z-index: 100;
+    animation: ledFlicker 4s infinite, ledPulse 10s infinite;
+    box-shadow: 0 0 20px rgba(255, 0, 0, 0.7),
+        0 0 35px rgba(255, 0, 0, 0.5),
+        0 0 50px rgba(255, 0, 0, 0.4),
+        0 0 70px rgba(155, 0, 0, 0.3);
+    filter: blur(0.6px);
+}
+
+.light-beam {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 250px;
+    background: linear-gradient(180deg,
+            rgba(255, 0, 0, 0.3) 0%,
+            rgba(255, 0, 0, 0.2) 20%,
+            rgba(255, 0, 0, 0.15) 30%,
+            rgba(155, 0, 0, 0.08) 60%,
+            transparent 100%);
+    animation: beamFlicker 4s infinite;
+    pointer-events: none;
+    filter: blur(2px);
+}
+
+@keyframes ledFlicker {
+    0% {
+        opacity: 1;
+    }
+
+    95% {
+        opacity: 1;
+    }
+
+    96% {
+        opacity: 0.3;
+    }
+
+    97% {
+        opacity: 1;
+    }
+
+    98% {
+        opacity: 0.2;
+    }
+
+    99% {
+        opacity: 0.9;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes ledPulse {
+    0% {
+        filter: brightness(1) blur(0.6px);
+    }
+
+    50% {
+        filter: brightness(1.3) blur(0.4px);
+    }
+
+    100% {
+        filter: brightness(1) blur(0.6px);
+    }
+}
+
+@keyframes beamFlicker {
+    0% {
+        opacity: 0.7;
+    }
+
+    95% {
+        opacity: 0.7;
+    }
+
+    96% {
+        opacity: 0.2;
+    }
+
+    97% {
+        opacity: 0.7;
+    }
+
+    98% {
+        opacity: 0.1;
+    }
+
+    99% {
+        opacity: 0.6;
+    }
+
+    100% {
+        opacity: 0.7;
+    }
+}
+
+/* Background Elements */
+.background-elements {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.blood {
+    position: absolute;
+    top: 94%;
+    opacity: 0.6;
+    transform: rotate(20deg);
+    right: 10%;
+}
+
+.blood-top-left {
+    top: 0;
+    left: 0;
+    width: 300px;
+}
+
+.blood-top-right {
+    top: 0;
+    right: 0;
+    width: 200px;
+    transform: rotate(20deg);
+}
+
+.splatter {
+    bottom: 20%;
+    left: 10%;
+    width: 200px;
+}
+
+.blood-bottom-right {
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    top: 90%;
+    left: 90%;
+    width: 200px;
+}
+
+/* Sound button styles */
+.sound-button {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    width: 100px;
+    height: 100px;
+    cursor: pointer;
+    z-index: 1000;
+    transition: transform 0.2s ease;
+}
+
+.sound-button:hover {
+    transform: scale(1.1);
+}
+
+.sound-button img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+/* Update button styles */
+button {
+    padding: 8px;
+    width: 40px;
+    height: 40px;
+    background: #007aff;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s, background 0.2s;
+}
+
+button img {
+    width: 15px;
+    height: 15px;
+    color: #ffffff;
+}
+
+.numpad-overlay {
+    position: fixed;
+    top: 50%;
+    right: 52%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.9);
+    padding: 20px;
+    border-radius: 10px;
+    z-index: 1000;
+}
+
+.hidden {
+    display: none;
+}
+
+.toggle-numpad {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 10px 15px;
+    font-size: 20px;
+    background: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    z-index: 1001;
+}
+
+.numpad-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    max-width: 300px;
+    margin: 10px auto;
+}
+
+.numpad-key {
+    padding: 25px;
+    font-size: 27px;
+    border: 1px solid #444;
+    background: #333;
+    color: white;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.numpad-key:hover {
+    background: #444;
+}
+
+.numpad-display {
+    text-align: center;
+    font-size: 24px;
+    margin: 10px;
+    letter-spacing: 5px;
+    color: white;
+}
+
+/* Update input styles */
+input {
+    border-radius: 10px;
+}

static/assets/css/how-to-play.css

@@ -0,0 +1,431 @@
+/* Styles généraux pour toutes les pages How to Play */
+.content {
+  color: #fff;
+  text-align: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+* {
+  opacity: 0.98;
+}
+.content h1 {
+  font-family: "HorrorBrush", cursive;
+  font-size: 64px;
+  color: #9b0000;
+  position: relative;
+  margin-bottom: 30px;
+  letter-spacing: 4px;
+}
+
+/* Styles pour la première page */
+.game-description p {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  color: #fff;
+}
+
+.gf-image {
+  width: 400px;
+  height: auto;
+  margin-top: 50px;
+}
+
+/* Styles pour la deuxième page */
+.objects-container {
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+  margin: 50px 0 30px 0;
+  width: 100%;
+}
+
+.object-type {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+}
+
+.object-title {
+  font-family: "HorrorBrush", cursive;
+  font-size: 2.5rem;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.sub-text {
+  font-size: 2rem;
+  color: #ffffff;
+  margin-bottom: 20px;
+}
+
+.image-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+/* Styles pour les images tutorielles */
+.tutorial-image {
+  width: 250px;
+  height: 250px;
+  object-fit: contain;
+}
+
+/* Styles de navigation */
+.navigation-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 50px;
+  margin-top: 30px;
+  width: 100%;
+  height: auto;
+}
+
+.navigation-buttons .back-button,
+.navigation-buttons .next-button {
+  display: inline-block;
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  background-color: rgba(155, 0, 0, 0.3);
+  padding: 10px 30px;
+  border: 2px solid #9b0000;
+  border-radius: 5px;
+  line-height: 1;
+  margin: 0;
+}
+
+.navigation-buttons .back-button {
+  position: static;
+  transform: none;
+  bottom: auto;
+  left: auto;
+}
+
+.navigation-buttons .next-button:hover,
+.navigation-buttons .back-button:hover {
+  color: #9b0000;
+  background-color: rgba(155, 0, 0, 0.1);
+  box-shadow: 0 0 15px rgba(155, 0, 0, 0.5);
+}
+
+/* Style spécifique pour le bouton Back to Menu */
+.back-to-menu {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Styles pour la deuxième page */
+.object-type.green .object-title {
+  color: #20bb43;
+}
+
+.object-type.red .object-title {
+  color: #d25658;
+}
+
+.object-type.white .object-title {
+  color: white;
+}
+
+/* Media Queries pour la responsivité */
+@media screen and (max-width: 1200px) {
+  .content {
+    max-width: 95%;
+    padding: 15px;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .objects-container {
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    margin: 50px 0 30px 0;
+  }
+
+  .object-type {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .tutorial-image {
+    width: 200px;
+    height: 200px;
+  }
+
+  .content h1 {
+    font-size: 48px;
+  }
+
+  .object-title {
+    font-size: 2rem;
+  }
+
+  .sub-text {
+    font-size: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .gf-image {
+    width: 90%;
+    max-width: 300px;
+  }
+
+  .content h1 {
+    font-size: 36px;
+  }
+
+  .game-description p {
+    font-size: 1.8rem;
+  }
+
+  .navigation-buttons {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 28px;
+    padding: 8px 20px;
+  }
+
+  .object-title {
+    font-size: 1.8rem;
+  }
+
+  .sub-text {
+    font-size: 1.2rem;
+  }
+
+  .tutorial-image {
+    width: 180px;
+    height: 180px;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .content h1 {
+    font-size: 32px;
+  }
+
+  .game-description p {
+    font-size: 1.5rem;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 24px;
+    padding: 6px 16px;
+  }
+}
+
+@media screen and (max-height: 800px) {
+  .content {
+    margin-top: 10px;
+  }
+
+  .content h1 {
+    font-size: 48px;
+    margin-bottom: 20px;
+  }
+
+  .game-description p {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .gf-image {
+    width: 300px;
+    margin-top: 30px;
+  }
+
+  .objects-container {
+    margin: 50px 0 20px 0;
+  }
+
+  .object-type {
+    width: 250px;
+  }
+
+  .tutorial-image {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .content {
+    margin-top: 5px;
+  }
+
+  .content h1 {
+    font-size: 36px;
+    margin-bottom: 15px;
+  }
+
+  .game-description p {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+  }
+
+  .gf-image {
+    width: 250px;
+    margin-top: 20px;
+  }
+
+  .objects-container {
+    margin: 30px 0 15px 0;
+  }
+
+  .object-type {
+    width: 200px;
+  }
+
+  .tutorial-image {
+    width: 180px;
+    height: 180px;
+  }
+
+  .navigation-buttons {
+    margin-top: 30px;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 28px;
+    padding: 8px 20px;
+  }
+}
+
+@media screen and (max-height: 500px) {
+  .content h1 {
+    font-size: 32px;
+    margin-bottom: 10px;
+  }
+
+  .game-description p {
+    font-size: 1.5rem;
+  }
+
+  .gf-image {
+    width: 200px;
+    margin-top: 15px;
+  }
+
+  .objects-container {
+    margin: 20px 0 10px 0;
+  }
+
+  .object-type {
+    width: 180px;
+  }
+
+  .tutorial-image {
+    width: 130px;
+    height: 130px;
+  }
+
+  .navigation-buttons {
+    margin-top: 20px;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 24px;
+    padding: 6px 16px;
+  }
+}
+
+/* Styles pour la page 3 */
+.main-description {
+  font-size: 2.5rem;
+  color: #fff;
+  font-family: "HorrorBrush", cursive;
+}
+
+.object-type.yellow .object-title {
+  color: #ffd700;
+}
+
+/* Ajustement pour deux objets au lieu de trois */
+.objects-container.two-items {
+  justify-content: center;
+  gap: 100px; /* Plus d'espace entre deux éléments */
+}
+
+/* Media queries pour la page 3 */
+@media screen and (max-width: 900px) {
+  .main-description {
+    font-size: 2rem;
+    margin: 20px 0;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .main-description {
+    font-size: 1.8rem;
+    margin: 15px 0;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .main-description {
+    font-size: 1.8rem;
+    margin: 10px 0;
+  }
+}
+
+/* Styles pour la page 4 */
+.video-container {
+  margin-top: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.tutorial-video {
+  max-width: 200px;
+  width: 100%;
+  border-radius: 30px;
+}
+
+/* Media queries pour la page 4 */
+@media screen and (max-width: 900px) {
+  .tutorial-video {
+    max-width: 350px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .tutorial-video {
+    max-width: 300px;
+  }
+}
+
+@media screen and (max-height: 800px) {
+  .video-container {
+    margin: 30px 0;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .video-container {
+    margin: 20px 0;
+  }
+}

static/assets/css/index-style.css

@@ -0,0 +1,491 @@
+@font-face {
+  font-family: "HorrorBrush";
+  src: url("/static/assets/fonts/horrorbrush.ttf") format("truetype");
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  opacity: 0.98;
+}
+body {
+  background-color: #000000;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.background-elements {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.blood {
+  position: absolute;
+}
+
+.blood-top-left {
+  top: 0;
+  left: 0;
+  width: 350px;
+  opacity: 50%;
+}
+
+.blood-bottom-right {
+  bottom: 0;
+  right: 0;
+  width: 250px;
+  position: absolute;
+  bottom: -120px;
+  right: -50px;
+  opacity: 40%;
+}
+
+.blood-top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 250px;
+  margin: 20px 20px 0px 0px;
+  transform: rotate(30deg);
+}
+
+.splatter {
+  position: absolute;
+  opacity: 60%;
+  bottom: 240px;
+  left: 30%;
+  transform: translateX(-50%);
+  transform: rotate(20deg);
+  width: 400px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 100px;
+  z-index: 1;
+}
+
+.logo {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  animation: flicker 4s linear infinite;
+}
+
+.logo img {
+  width: 400px;
+  height: auto;
+}
+
+.subtitle {
+  font-family: "HorrorBrush", cursive;
+  color: #fff;
+  font-size: 24px;
+  text-align: center;
+  margin-top: 10px;
+  letter-spacing: 2px;
+}
+
+.menu {
+  display: flex;
+  margin-top: 250px;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+  position: relative;
+}
+
+.menu::after {
+  content: "";
+  position: absolute;
+  width: 800px;
+  height: 800px;
+  background: radial-gradient(
+    circle,
+    rgba(155, 0, 0, 0.35) 0%,
+    rgba(0, 0, 0, 0) 70%
+  );
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.menu-item {
+  font-family: "HorrorBrush", cursive;
+  font-size: 48px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+}
+
+.new-game {
+  color: #9b0000;
+}
+
+.menu-item:hover {
+  color: #9b0000;
+}
+
+.how-to-play:hover {
+  color: #9b0000;
+}
+
+.level-maker:hover {
+  color: #9b0000;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+  }
+  5% {
+    opacity: 0.9;
+  }
+  10% {
+    opacity: 1;
+  }
+  15% {
+    opacity: 0.4;
+  }
+  16% {
+    opacity: 1;
+  }
+  17% {
+    opacity: 0.4;
+  }
+  18% {
+    opacity: 1;
+  }
+  35% {
+    opacity: 1;
+  }
+  36% {
+    opacity: 0.3;
+  }
+  37% {
+    opacity: 1;
+  }
+  38% {
+    opacity: 0.5;
+  }
+  39% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0.7;
+  }
+  52% {
+    opacity: 1;
+  }
+  53% {
+    opacity: 0.4;
+  }
+  54% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  86% {
+    opacity: 0.6;
+  }
+  87% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0.4;
+  }
+  89% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.led-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 0, 0, 0.4) 20%,
+    rgba(255, 0, 0, 0.8) 35%,
+    rgba(255, 50, 50, 1) 50%,
+    rgba(255, 0, 0, 0.8) 65%,
+    rgba(255, 0, 0, 0.4) 80%,
+    transparent 100%
+  );
+  z-index: 100;
+  animation: ledFlicker 4s infinite, ledPulse 10s infinite;
+  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 35px rgba(255, 0, 0, 0.5),
+    0 0 50px rgba(255, 0, 0, 0.4), 0 0 70px rgba(155, 0, 0, 0.3);
+  filter: blur(0.6px);
+}
+
+.light-beam {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 250px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 0, 0, 0.3) 0%,
+    rgba(255, 0, 0, 0.2) 20%,
+    rgba(255, 0, 0, 0.15) 30%,
+    rgba(155, 0, 0, 0.08) 60%,
+    transparent 100%
+  );
+  animation: beamFlicker 4s infinite;
+  pointer-events: none;
+  filter: blur(2px);
+}
+
+@keyframes ledFlicker {
+  0% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  96% {
+    opacity: 0.3;
+  }
+  97% {
+    opacity: 1;
+  }
+  98% {
+    opacity: 0.2;
+  }
+  99% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ledPulse {
+  0% {
+    filter: brightness(1) blur(0.6px);
+  }
+  50% {
+    filter: brightness(1.3) blur(0.4px);
+  }
+  100% {
+    filter: brightness(1) blur(0.6px);
+  }
+}
+
+@keyframes beamFlicker {
+  0% {
+    opacity: 0.7;
+  }
+  95% {
+    opacity: 0.7;
+  }
+  96% {
+    opacity: 0.2;
+  }
+  97% {
+    opacity: 0.7;
+  }
+  98% {
+    opacity: 0.1;
+  }
+  99% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+
+/* How to Play Page Styles */
+.content {
+  color: #fff;
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 0px;
+}
+
+.content h1 {
+  font-family: "HorrorBrush", cursive;
+  font-size: 64px;
+  color: #9b0000;
+  position: relative;
+  margin-bottom: 30px;
+  letter-spacing: 4px;
+}
+
+.game-description p {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  color: #fff;
+}
+
+.back-button {
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.back-button:hover {
+  color: #9b0000;
+}
+
+.character {
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  animation: characterFlicker 6s infinite;
+}
+
+.character img {
+  width: 550px;
+  height: auto;
+}
+
+@keyframes characterFlicker {
+  0% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  42% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  43% {
+    opacity: 0.8;
+    filter: brightness(1.2);
+  }
+  44% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  45% {
+    opacity: 0.6;
+    filter: brightness(1.3);
+  }
+  46% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  47% {
+    opacity: 0.2;
+    filter: brightness(1.5);
+  }
+  48% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  49% {
+    opacity: 0.4;
+    filter: brightness(1.2);
+  }
+  50% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  80% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  81% {
+    opacity: 0.5;
+    filter: brightness(1.3);
+  }
+  82% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  100% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+}
+
+/* Modifier les styles pour le bouton son */
+.sound-button {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  z-index: 1000;
+  transition: transform 0.2s ease;
+}
+
+.sound-button:hover {
+  transform: scale(1.1);
+}
+
+.sound-button img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.gf-image {
+  width: 400px;
+  height: auto;
+  margin-top: 50px;
+}
+
+.next-button {
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  display: block;
+  margin-top: 50px;
+  background-color: rgba(155, 0, 0, 0.3);
+  padding: 10px 30px;
+  border: 2px solid #9b0000;
+  border-radius: 5px;
+}
+
+.next-button:hover {
+  color: #9b0000;
+  background-color: rgba(155, 0, 0, 0.1);
+  box-shadow: 0 0 15px rgba(155, 0, 0, 0.5);
+}

static/assets/css/popup.css

@@ -0,0 +1,236 @@
+@font-face {
+  font-family: "HorrorBrush";
+  src: url("/static/assets/fonts/horrorbrush.ttf") format("truetype");
+}
+
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.202);
+  backdrop-filter: blur(8px);
+  z-index: 1000;
+  display: block;
+}
+
+.popup-loser {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px;
+  height: 500px;
+  background-color: #141313;
+  border-radius: 20px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+  z-index: 1001;
+  display: none;
+  overflow: hidden;
+}
+
+.popup-loser .clown {
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  width: 300px;
+  height: auto;
+  z-index: 1002;
+}
+
+.popup-loser .blood-top {
+  position: absolute;
+  top: -100px;
+  left: -100px;
+  width: 300px;
+  height: auto;
+  z-index: 1002;
+}
+
+.popup-loser .blood-bottom {
+  position: absolute;
+  bottom: -100px;
+  right: -100px;
+  width: 300px;
+  height: auto;
+  transform: rotate(180deg);
+  z-index: 1001;
+}
+
+.popup-loser .title {
+  position: absolute;
+  left: 40%;
+  transform: translateX(-50%);
+  font-size: 120px;
+  font-weight: bold;
+  color: #9b0000;
+  text-shadow: 10px 10px 4px #4d0000;
+  font-family: "HorrorBrush", cursive;
+  z-index: 1003;
+}
+
+.popup-loser .title-glow {
+  position: absolute;
+  top: 50%;
+  left: 40%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(
+    circle,
+    rgba(155, 0, 0, 0.2) 0%,
+    rgba(0, 0, 0, 0) 90%
+  );
+  z-index: 1002;
+  pointer-events: none;
+}
+
+.popup-loser .play-again {
+  position: absolute;
+  bottom: 130px;
+  left: 40%;
+  transform: translateX(-50%);
+  padding: 15px 40px;
+  min-width: 230px;
+  font-size: 42px;
+  font-family: "HorrorBrush", cursive;
+  color: #ffffff;
+  background-color: #9b0000;
+  border-radius: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 15px rgba(155, 0, 0, 0.4);
+  z-index: 1003;
+  letter-spacing: 2px;
+  line-height: 1;
+  white-space: nowrap;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup-loser .play-again:hover {
+  background-color: #cc0000;
+  transform: translateX(-50%) scale(1.05);
+  box-shadow: 0 8px 20px rgba(155, 0, 0, 0.6);
+}
+
+/* Popup Winner */
+.popup-winner {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px;
+  height: 500px;
+  border-radius: 20px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+  z-index: 1001;
+  display: block;
+  overflow: hidden;
+  background-image: url("/static/assets/img/popup/background.jpg");
+  background-size: cover;
+  background-position: center;
+}
+
+.popup-winner .win-text {
+  position: absolute;
+  top: 35%;
+  left: 35%;
+  transform: translate(-50%, -50%);
+  width: 60%;
+  height: auto;
+  z-index: 1003;
+}
+
+.popup-winner .fuck {
+  position: absolute;
+  bottom: -10px;
+  right: -10px;
+  width: 350px;
+  height: auto;
+  z-index: 1004;
+}
+
+.popup-winner .stars1 {
+  position: absolute;
+  right: 40px;
+  left: 80%;
+  top: 0%;
+  width: 200px;
+  height: auto;
+  z-index: 1002;
+}
+
+.popup-winner .stars2 {
+  position: absolute;
+  bottom: -10px;
+  right: 40px;
+  width: 500px;
+  height: auto;
+  z-index: 1002;
+}
+
+.popup-winner .play-again {
+  position: absolute;
+  bottom: 40px;
+  left: 27%;
+  top: auto;
+  transform: translateX(-50%);
+  padding: 20px 60px;
+  min-width: 350px;
+  height: 80px;
+  font-size: 30px;
+  font-family: "Comic Sans MS", cursive;
+  color: #ffffff;
+  background: linear-gradient(45deg, #ff69b4, #ff1493);
+  border: 3px solid #fff;
+  border-radius: 40px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 20px rgba(255, 105, 180, 0.6),
+    inset 0 0 20px rgba(255, 255, 255, 0.4);
+  z-index: 1003;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  animation: sparkle 2s infinite;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.popup-winner .play-again:hover {
+  transform: translateX(-50%) scale(1.05);
+  background: linear-gradient(45deg, #ff1493, #ff69b4);
+  box-shadow: 0 8px 25px rgba(255, 105, 180, 0.8),
+    inset 0 0 30px rgba(255, 255, 255, 0.6);
+  letter-spacing: 3px;
+}
+
+.popup-winner .play-again::before {
+  content: "✨";
+  position: absolute;
+  left: 25px;
+}
+
+.popup-winner .play-again::after {
+  content: "✨";
+  position: absolute;
+  right: 25px;
+}
+
+@keyframes sparkle {
+  0% {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff69b4;
+  }
+  50% {
+    text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1493;
+  }
+  100% {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff69b4;
+  }
+}

static/assets/css/stress-animations.css

@@ -0,0 +1,235 @@
+/* Classes de base pour la photo de profil */
+#chatSection .profile-picture {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 10px;
+}
+
+#chatSection .profile-picture img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* État: No Stress */
+#chatSection.no-stress .profile-picture {
+  border: 2px solid #607ab1;
+}
+
+#chatSection.no-stress .chat-name {
+  color: #333;
+}
+
+/* État: Low Stress - Animation de pulsation modérée */
+#chatSection.low-stress .profile-picture {
+  border: 2px solid #ffa500;
+  animation: lowStressPulse 1.5s infinite;
+  box-shadow: 0 0 5px rgba(255, 165, 0, 0.3);
+}
+
+#chatSection.low-stress .chat-name {
+  animation: lowStressTextPulse 1.5s infinite;
+}
+
+#chatSection.low-stress #chatHistory .ai-message {
+  background-color: #ffa500;
+  color: #ffffff;
+  animation: lowStressMessagePulse 2s infinite,
+    lowStressMessageScale 1.5s infinite;
+  border: 1px solid #ffa500;
+}
+
+@keyframes lowStressPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.3);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 10px 3px rgba(255, 165, 0, 0.5);
+    transform: scale(1.03);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0);
+    transform: scale(1);
+  }
+}
+
+@keyframes lowStressTextPulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lowStressMessagePulse {
+  0% {
+    background-color: #ffa500;
+    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.3);
+  }
+  50% {
+    background-color: #ffb733;
+    box-shadow: 0 0 8px 0 rgba(255, 165, 0, 0.4);
+  }
+  100% {
+    background-color: #ffa500;
+    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.3);
+  }
+}
+
+@keyframes lowStressMessageScale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* État: Very Stress - Animation de pulsation intense */
+#chatSection.very-stress {
+  background-color: #1a1a1a;
+  transition: background-color 0.3s ease;
+}
+
+#chatSection.very-stress #chatHeader {
+  background-color: #1a1a1a;
+  transition: background-color 0.3s ease;
+}
+
+#chatSection.very-stress .profile-picture {
+  border: 3px solid #ff0000;
+  animation: veryStressPulse 0.8s infinite;
+  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
+}
+
+#chatSection.very-stress .chat-name {
+  color: #ff0000;
+  animation: veryStressTextPulse 0.8s infinite;
+  font-weight: bold;
+  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+}
+
+#chatSection.very-stress #chatHistory {
+  background-color: #1a1a1a;
+  color: #ffffff;
+}
+
+#chatSection.very-stress #chatHistory .ai-message {
+  background-color: #e92626;
+  color: #ffffff;
+  animation: messageShake 0.8s infinite ease-in-out, messageRedPulse 1.5s infinite;
+  border: 2px solid #ff0000;
+  box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
+  transform-origin: center;
+}
+
+#chatSection.very-stress #chatHistory .assistant-message {
+  background-color: #2d2d2d;
+  color: #ff9999;
+  border: 1px solid #ff0000;
+  animation: assistantMessageShake 1.5s infinite ease-in-out;
+  transform-origin: center;
+}
+
+#chatSection.very-stress #chatControls {
+  background-color: #1a1a1a;
+}
+
+#chatSection.very-stress #prompt {
+  background-color: #2d2d2d;
+  color: #ffffff;
+  border: 1px solid #ffffff;
+}
+
+#chatSection.very-stress .chat-name::after {
+  content: "💀💀";
+}
+
+#chatSection.very-stress .chat-name span {
+  display: none;
+}
+
+@keyframes veryStressPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.7);
+    transform: scale(1.05);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
+    transform: scale(1);
+  }
+}
+
+@keyframes veryStressTextPulse {
+  0% {
+    text-shadow: 0 0 0 rgba(255, 0, 0, 0);
+    transform: scale(1);
+  }
+  50% {
+    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+    transform: scale(1.08);
+  }
+  100% {
+    text-shadow: 0 0 0 rgba(255, 0, 0, 0);
+    transform: scale(1);
+  }
+}
+
+@keyframes messageShake {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(-2px, 1px) rotate(-0.5deg);
+  }
+  50% {
+    transform: translate(0, -1px) rotate(0.5deg);
+  }
+  75% {
+    transform: translate(2px, 1px) rotate(-0.25deg);
+  }
+}
+
+@keyframes messageRedPulse {
+  0% {
+    background-color: #e92626;
+    box-shadow: 0 0 0 0 rgba(233, 38, 38, 0.4);
+  }
+  50% {
+    background-color: #ff3333;
+    box-shadow: 0 0 10px 0 rgba(233, 38, 38, 0.6);
+  }
+  100% {
+    background-color: #e92626;
+    box-shadow: 0 0 0 0 rgba(233, 38, 38, 0.4);
+  }
+}
+
+@keyframes assistantMessageShake {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(-1px, 0.5px) rotate(-0.25deg);
+  }
+  50% {
+    transform: translate(0, -0.5px) rotate(0.25deg);
+  }
+  75% {
+    transform: translate(1px, 0.5px) rotate(-0.125deg);
+  }
+}