Upload 8 files

Dockerfile

@@ -1,29 +1,11 @@
-# Используем легкий образ Python
-FROM python:3.9-slim
-
-# Создаем пользователя 'user' с UID 1000 (Это строгое требование Hugging Face Spaces)
-RUN useradd -m -u 1000 user
-
-# Переключаемся на этого пользователя
-USER user
-# Добавляем путь к локальным бинарникам пользователя в PATH
-ENV PATH="/home/user/.local/bin:$PATH"
-
-# Устанавливаем рабочую директорию
-WORKDIR /app
-
-# Сначала копируем только requirements.txt (для кэширования слоев Docker)
-COPY --chown=user ./requirements.txt requirements.txt
-
-# Устанавливаем зависимости
-RUN pip install --no-cache-dir --upgrade -r requirements.txt
-
-# Теперь копируем весь остальной код (main.py, index.html и др.)
-COPY --chown=user . .
-
-# Hugging Face Spaces ожидают, что приложение будет слушать порт 7860
-EXPOSE 7860
-
-# Запускаем приложение через Uvicorn
-# main:app означает: файл main.py, объект app
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]
+FROM python:3.9-slim
+WORKDIR /app
+RUN useradd -m -u 1000 user
+ENV PYTHONDONTWRITEBYTECODE=1 PYTHONUNBUFFERED=1 HOME=/home/user PATH=/home/user/.local/bin:$PATH
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+RUN python -m textblob.download_corpora
+COPY --chown=user . .
+USER user
+EXPOSE 7860
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

app/main.py

@@ -0,0 +1,95 @@
+from fastapi import FastAPI, UploadFile, File, WebSocket, WebSocketDisconnect
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+from textblob import TextBlob
+from typing import List
+import os
+import json
+import base64
+from google.oauth2.credentials import Credentials
+from googleapiclient.discovery import build
+from googleapiclient.http import MediaIoBaseUpload
+
+app = FastAPI(title="The Zenith Messenger")
+
+# --- CONFIG LOADING ---
+# Пытаемся взять из переменных окружения (HF Spaces), если нет - из локального файла
+SUPABASE_URL = os.getenv("SUPABASE_URL")
+SUPABASE_KEY = os.getenv("SUPABASE_KEY")
+GDRIVE_TOKEN_B64 = os.getenv("GDRIVE_TOKEN_B64")
+
+# Fallback для локального запуска
+if not SUPABASE_URL:
+    try:
+        with open("config.json", "r") as f:
+            data = json.load(f)
+            SUPABASE_URL = data.get("SUPABASE_URL")
+            SUPABASE_KEY = data.get("SUPABASE_KEY")
+            GDRIVE_TOKEN_B64 = data.get("GDRIVE_TOKEN_B64")
+    except: pass
+
+# --- GOOGLE DRIVE ---
+def get_drive_service():
+    try:
+        if not GDRIVE_TOKEN_B64: return None
+        creds_json = base64.b64decode(GDRIVE_TOKEN_B64).decode('utf-8')
+        creds_dict = json.loads(creds_json)
+        creds = Credentials.from_authorized_user_info(creds_dict)
+        return build('drive', 'v3', credentials=creds)
+    except Exception as e:
+        print(f"Drive Error: {e}")
+        return None
+
+# --- MODELS & WEBSOCKET ---
+class MessageInput(BaseModel): text: str
+class MoodResponse(BaseModel): mood_color: str; emoji: str; sentiment: float
+class ConfigResponse(BaseModel): supabase_url: str; supabase_key: str
+
+class ConnectionManager:
+    def __init__(self): self.active_connections: List[WebSocket] = []
+    async def connect(self, websocket: WebSocket): await websocket.accept(); self.active_connections.append(websocket)
+    def disconnect(self, websocket: WebSocket): self.active_connections.remove(websocket)
+    async def broadcast(self, message: str, sender: WebSocket):
+        for connection in self.active_connections:
+            if connection != sender: await connection.send_text(message)
+manager = ConnectionManager()
+
+# --- ROUTES ---
+@app.get("/api/config", response_model=ConfigResponse)
+async def get_config(): return ConfigResponse(supabase_url=SUPABASE_URL or "", supabase_key=SUPABASE_KEY or "")
+
+@app.post("/api/analyze_mood", response_model=MoodResponse)
+async def analyze_mood(msg: MessageInput):
+    blob = TextBlob(msg.text)
+    p = blob.sentiment.polarity
+    if p > 0.5: return MoodResponse(mood_color="#00f2ea", emoji="✨", sentiment=p)
+    elif p > 0: return MoodResponse(mood_color="#4facfe", emoji="😌", sentiment=p)
+    elif p < -0.5: return MoodResponse(mood_color="#ff0055", emoji="🔥", sentiment=p)
+    elif p < 0: return MoodResponse(mood_color="#8e44ad", emoji="🥀", sentiment=p)
+    return MoodResponse(mood_color="#ffffff", emoji="🌫️", sentiment=p)
+
+@app.websocket("/ws/signal")
+async def websocket_endpoint(websocket: WebSocket):
+    await manager.connect(websocket)
+    try:
+        while True:
+            data = await websocket.receive_text()
+            await manager.broadcast(data, websocket)
+    except WebSocketDisconnect: manager.disconnect(websocket)
+
+@app.post("/api/upload_file")
+async def upload_file(file: UploadFile = File(...)):
+    service = get_drive_service()
+    if not service: return {"error": "Google Drive not configured"}
+    try:
+        meta = {'name': file.filename}
+        media = MediaIoBaseUpload(file.file, mimetype=file.content_type, resumable=True)
+        up_file = service.files().create(body=meta, media_body=media, fields='id, webContentLink, webViewLink').execute()
+        service.permissions().create(fileId=up_file.get('id'), body={'type': 'anyone', 'role': 'reader'}).execute()
+        return {"url": up_file.get('webContentLink'), "view_url": up_file.get('webViewLink'), "filename": file.filename, "mime": file.content_type}
+    except Exception as e: return {"error": str(e)}
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+@app.get("/")
+async def read_index(): return FileResponse('static/index.html')

config.json

@@ -0,0 +1,5 @@
+{
+  "SUPABASE_URL": "https://ilbswgrxtjsssuqrehqv.supabase.co",
+  "SUPABASE_KEY": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImlsYnN3Z3J4dGpzc3N1cXJlaHF2Iiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc2NDM5MjMxNywiZXhwIjoyMDc5OTY4MzE3fQ.7KDvpUH2Isu9b-lh2scSn6w-RGzi-Mlpvl6Xl67sAnc",
+  "GDRIVE_TOKEN_B64": "eyJ0b2tlbiI6ICJ5YTI5LmEwQWE3cENBOGZZNC1hUjRWa1pQT2dnZWgyT2RBVGtqSnd6MkNmejBzVW5CLU45NWtHS2Y4b0VZbkVuVndsdlpIYVpqR2JRZDlwWUpLZVJ3dEtaOVlVdndINWFycWVsaHFwTlZBTlRyakdENEduT3BnTUtkTmlUM0RpSXREMW5LSzJTWGlkMldzWnJuT2FkRUFGZV9odkh6Yl94MWV1c0pRdk4zR1VzV3FFcUpTVENZaVZaeEIxRjRKWmVRODdrWVpZV24wUVR2NGFDZ1lLQWNjU0FSUVNGUUhHWDJNaWJDNFcwM3ppY1B6d25tSUNVUUFvaXcwMjA2IiwgInJlZnJlc2hfdG9rZW4iOiAiMS8vMGNKc095c3kwYUdhLUNnWUlBUkFBR0F3U053Ri1MOUlyWnBYZ2IxUnd5RkhzV1U3VXJsSldXa21OUjlkTUhmZFRsOGc3TWhLZW5VOHdId3V6cVpFejNRWnh2dVJ1RlVCdFNDWSIsICJ0b2tlbl91cmkiOiAiaHR0cHM6Ly9vYXV0aDIuZ29vZ2xlYXBpcy5jb20vdG9rZW4iLCAiY2xpZW50X2lkIjogIjU4MTA1NDA1NTYwNi1vaTJlcHZiN280YzRoZjA0dWJmYzBwbmxhbDNyYzkydi5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbSIsICJjbGllbnRfc2VjcmV0IjogIkdPQ1NQWC1aTlNjQnJLaXBtWjh2SkJDNFNtVkNuVHJYbk13IiwgInNjb3BlcyI6IFsiaHR0cHM6Ly93d3cuZ29vZ2xlYXBpcy5jb20vYXV0aC9kcml2ZS5maWxlIl0sICJ1bml2ZXJzZV9kb21haW4iOiAiZ29vZ2xlYXBpcy5jb20iLCAiYWNjb3VudCI6ICIiLCAiZXhwaXJ5IjogIjIwMjUtMTItMTNUMTA6MzQ6MTZaIn0="
+}

requirements.txt

@@ -1,7 +1,8 @@
-streamlit 
-supabase
-pandas
-plotly
-fastapi
-uvicorn
-pydantic
+fastapi==0.109.0
+uvicorn==0.27.0
+textblob==0.17.1
+pydantic==2.5.3
+python-multipart
+google-api-python-client
+google-auth
+google-auth-oauthlib

static/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The Zenith Messenger</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body class="h-screen w-full overflow-hidden text-white">
+    <div class="background-container">
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+        <div class="blob blob-3"></div>
+    </div>
+    <canvas id="particle-canvas"></canvas>
+    <div class="relative z-10 flex flex-col h-full max-w-4xl mx-auto p-4 md:p-8">
+        <header class="glass-panel mb-4 p-4 flex justify-between items-center rounded-2xl">
+            <h1 class="text-2xl font-bold tracking-wider uppercase">Zenith</h1>
+            <div class="flex items-center gap-4">
+                <button id="voice-btn" class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all border border-white/10 relative group">
+                    <svg id="mic-icon-off" class="w-6 h-6 text-white/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" /></svg>
+                    <svg id="mic-icon-on" class="w-6 h-6 hidden animate-pulse" fill="none" viewBox="0 0 24 24" stroke="#00f2ea" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" /></svg>
+                </button>
+                <div id="mood-indicator" class="text-2xl transition-transform duration-500 hover:scale-110">✨</div>
+            </div>
+        </header>
+        <div id="chat-window" class="glass-panel flex-1 overflow-y-auto p-6 rounded-2xl mb-4 space-y-4 custom-scrollbar">
+            <div class="text-center text-white/50 text-sm mt-10">Добро пожаловать в Zenith. Эфир чист.</div>
+        </div>
+        <form id="message-form" class="glass-panel p-2 rounded-2xl flex items-center gap-2 relative">
+            <label class="cursor-pointer p-3 rounded-xl hover:bg-white/10 transition-all text-white/70 hover:text-white">
+                <input type="file" id="file-input" class="hidden">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg>
+            </label>
+            <div id="upload-status" class="absolute -top-8 left-4 text-xs bg-black/80 px-2 py-1 rounded hidden">Uploading...</div>
+            <input type="text" id="message-input" autocomplete="off" class="bg-transparent flex-1 p-3 outline-none text-white placeholder-white/50" placeholder="Транслируй свои мысли...">
+            <button type="submit" class="bg-white/10 hover:bg-white/20 transition-all text-white p-3 rounded-xl backdrop-blur-md border border-white/10">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
+            </button>
+        </form>
+    </div>
+    <audio id="pop-sound" src="/static/pop.mp3" preload="auto"></audio>
+    <script src="/static/script.js"></script>
+</body>
+</html>

static/script.js

@@ -0,0 +1,172 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    let supabase;
+    let userId = 'user_' + Math.random().toString(36).substr(2, 9);
+    try {
+        const configRes = await fetch('/api/config');
+        const config = await configRes.json();
+        if (config.supabase_url) supabase = window.supabase.createClient(config.supabase_url, config.supabase_key);
+    } catch (e) { console.error("Config Error", e); }
+    const chatWindow = document.getElementById('chat-window');
+    const form = document.getElementById('message-form');
+    const input = document.getElementById('message-input');
+    const fileInput = document.getElementById('file-input');
+    const uploadStatus = document.getElementById('upload-status');
+    const moodIndicator = document.getElementById('mood-indicator');
+    const popSound = document.getElementById('pop-sound');
+    if (supabase) {
+        supabase.channel('room1').on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, payload => {
+            renderMessage(payload.new);
+            playPopSound();
+        }).subscribe();
+    }
+    let currentAttachment = null;
+    fileInput.addEventListener('change', async (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        uploadStatus.classList.remove('hidden');
+        uploadStatus.textContent = `Загрузка ${file.name}...`;
+        const formData = new FormData();
+        formData.append('file', file);
+        try {
+            const res = await fetch('/api/upload_file', { method: 'POST', body: formData });
+            const data = await res.json();
+            if (data.error) throw new Error(data.error);
+            currentAttachment = data;
+            uploadStatus.textContent = "Файл прикреплен!";
+            uploadStatus.style.color = "#00f2ea";
+            input.placeholder = `Прикреплен: ${file.name}. Напиши сообщение...`;
+            input.focus();
+        } catch (err) {
+            console.error(err);
+            uploadStatus.textContent = "Ошибка загрузки";
+            uploadStatus.style.color = "#ff0055";
+        }
+    });
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const text = input.value.trim();
+        if (!text && !currentAttachment) return;
+        input.value = '';
+        input.placeholder = "Транслируй свои мысли...";
+        uploadStatus.classList.add('hidden');
+        let moodData = { mood_color: '#ffffff', emoji: '🌫️' };
+        if (text) {
+            try {
+                const res = await fetch('/api/analyze_mood', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text }) });
+                moodData = await res.json();
+                updateTheme(moodData.mood_color, moodData.emoji);
+            } catch (err) { console.error(err); }
+        }
+        if (supabase) {
+            const payload = { content: text, user_id: userId, mood_color: moodData.mood_color, attachment_url: currentAttachment ? currentAttachment.url : null, attachment_type: currentAttachment ? currentAttachment.mime : null };
+            const { error } = await supabase.from('messages').insert(payload);
+            if (error) console.error(error);
+        }
+        currentAttachment = null;
+        fileInput.value = '';
+    });
+    
+    // Voice / WebRTC (Audio Only)
+    const voiceBtn = document.getElementById('voice-btn');
+    const micOff = document.getElementById('mic-icon-off');
+    const micOn = document.getElementById('mic-icon-on');
+    let localStream, remoteStream, peerConnection, audioContext, analyser, dataArray, ws, isVoiceActive = false;
+    const rtcConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
+    voiceBtn.addEventListener('click', toggleVoiceMode);
+    async function toggleVoiceMode() { if (isVoiceActive) stopVoice(); else await startVoice(); }
+    async function startVoice() {
+        try {
+            localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+            setupAudioVisualizer(localStream);
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            ws = new WebSocket(`${protocol}//${window.location.host}/ws/signal`);
+            ws.onmessage = async (event) => {
+                const data = JSON.parse(event.data);
+                if (!peerConnection) createPeerConnection();
+                if (data.type === 'offer') {
+                    await peerConnection.setRemoteDescription(new RTCSessionDescription(data));
+                    const answer = await peerConnection.createAnswer();
+                    await peerConnection.setLocalDescription(answer);
+                    ws.send(JSON.stringify({ type: 'answer', sdp: answer.sdp }));
+                } else if (data.type === 'answer') { await peerConnection.setRemoteDescription(new RTCSessionDescription(data));
+                } else if (data.type === 'candidate') { if (data.candidate) await peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate)); }
+            };
+            ws.onopen = () => { createPeerConnection(); createOffer(); };
+            micOff.classList.add('hidden'); micOn.classList.remove('hidden'); voiceBtn.classList.add('border-cyan-400', 'shadow-[0_0_15px_rgba(0,242,234,0.5)]'); isVoiceActive = true;
+        } catch (err) { console.error("Voice Error", err); alert("Microphone access denied"); }
+    }
+    function stopVoice() {
+        if (peerConnection) peerConnection.close();
+        if (localStream) localStream.getTracks().forEach(t => t.stop());
+        if (ws) ws.close();
+        peerConnection = null; localStream = null;
+        micOff.classList.remove('hidden'); micOn.classList.add('hidden'); voiceBtn.classList.remove('border-cyan-400', 'shadow-[0_0_15px_rgba(0,242,234,0.5)]'); isVoiceActive = false;
+    }
+    function createPeerConnection() {
+        peerConnection = new RTCPeerConnection(rtcConfig);
+        localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
+        peerConnection.ontrack = (event) => { const remoteAudio = new Audio(); remoteAudio.srcObject = event.streams[0]; remoteAudio.autoplay = true; };
+        peerConnection.onicecandidate = (event) => { if (event.candidate) ws.send(JSON.stringify({ type: 'candidate', candidate: event.candidate })); };
+    }
+    async function createOffer() { const offer = await peerConnection.createOffer(); await peerConnection.setLocalDescription(offer); ws.send(JSON.stringify({ type: 'offer', sdp: offer.sdp })); }
+    function setupAudioVisualizer(stream) {
+        if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        const source = audioContext.createMediaStreamSource(stream);
+        analyser = audioContext.createAnalyser();
+        analyser.fftSize = 64;
+        source.connect(analyser);
+        dataArray = new Uint8Array(analyser.frequencyBinCount);
+    }
+    
+    function renderMessage(msg) {
+        const div = document.createElement('div');
+        const isOwn = msg.user_id === userId;
+        div.className = `message ${isOwn ? 'own' : 'other'}`;
+        div.style.boxShadow = `0 0 15px ${msg.mood_color || '#fff'}40`;
+        let html = `<div>${msg.content || ''}</div>`;
+        if (msg.attachment_url) {
+            if (msg.attachment_type && msg.attachment_type.startsWith('image/')) { html += `<img src="${msg.attachment_url}" alt="Image">`; } 
+            else { html += `<a href="${msg.attachment_url}" target="_blank" class="file-link">📎 Скачать файл</a>`; }
+        }
+        div.innerHTML = html;
+        chatWindow.appendChild(div);
+        chatWindow.scrollTop = chatWindow.scrollHeight;
+    }
+    function updateTheme(color, emoji) {
+        document.documentElement.style.setProperty('--dynamic-bg-color', color);
+        moodIndicator.textContent = emoji;
+    }
+    function playPopSound() { if(popSound) { popSound.currentTime = 0; popSound.play().catch(e=>{}); } }
+    
+    // --- Visuals ---
+    const canvas = document.getElementById('particle-canvas');
+    const ctx = canvas.getContext('2d');
+    let particles = [];
+    function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
+    window.addEventListener('resize', resize); resize();
+    class Particle {
+        constructor() { this.reset(); }
+        reset() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 2; this.speedX = Math.random() * 0.5 - 0.25; this.speedY = Math.random() * 0.5 - 0.25; this.opacity = Math.random() * 0.5; }
+        update() { this.x += this.speedX; this.y += this.speedY; if(this.x<0 || this.x>canvas.width) this.speedX*=-1; if(this.y<0 || this.y>canvas.height) this.speedY*=-1; }
+        draw() { ctx.fillStyle = `rgba(255,255,255,${this.opacity})`; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI*2); ctx.fill(); }
+    }
+    for(let i=0; i<50; i++) particles.push(new Particle());
+    function animate() { 
+        ctx.clearRect(0,0,canvas.width,canvas.height);
+        let audioFactor = 0;
+        if (isVoiceActive && analyser && dataArray) {
+            analyser.getByteFrequencyData(dataArray);
+            audioFactor = (dataArray.reduce((a, b) => a + b) / dataArray.length) / 50;
+        }
+        particles.forEach(p => { 
+            if(isVoiceActive) {
+                p.x += p.speedX * (1+audioFactor); p.y += p.speedY * (1+audioFactor);
+                let ps = p.size + (audioFactor*2);
+                ctx.fillStyle = `rgba(255,255,255,${p.opacity})`; ctx.beginPath(); ctx.arc(p.x, p.y, ps>0?ps:0, 0, Math.PI*2); ctx.fill();
+            } else { p.update(); p.draw(); }
+            if(p.x<0 || p.x>canvas.width) p.speedX*=-1; if(p.y<0 || p.y>canvas.height) p.speedY*=-1;
+        }); 
+        requestAnimationFrame(animate); 
+    }
+    animate();
+});

static/styles.css

@@ -0,0 +1,18 @@
+:root { --dynamic-bg-color: #4facfe; --glass-border: rgba(255, 255, 255, 0.1); --glass-bg: rgba(255, 255, 255, 0.05); }
+body { background: #0f0c29; font-family: 'Inter', sans-serif; transition: background 1s ease; }
+.background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; filter: blur(80px); }
+.blob { position: absolute; border-radius: 50%; opacity: 0.6; animation: float 10s infinite ease-in-out; }
+.blob-1 { width: 500px; height: 500px; background: var(--dynamic-bg-color); top: -100px; left: -100px; transition: background 1s ease; }
+.blob-2 { width: 400px; height: 400px; background: #764ba2; bottom: -50px; right: -50px; animation-delay: 2s; }
+.blob-3 { width: 300px; height: 300px; background: #00f2ea; top: 40%; left: 40%; animation-delay: 4s; }
+@keyframes float { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0, 0) scale(1); } }
+#particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
+.glass-panel { background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); }
+.message { padding: 10px 16px; border-radius: 12px; max-width: 80%; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; word-break: break-word; }
+.message img { max-width: 100%; border-radius: 8px; margin-top: 5px; border: 1px solid rgba(255,255,255,0.2); }
+.message a.file-link { display: block; margin-top: 5px; color: #00f2ea; text-decoration: underline; font-size: 0.9em; }
+.message.own { background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05)); align-self: flex-end; margin-left: auto; border: 1px solid rgba(255,255,255,0.2); }
+.message.other { background: rgba(0, 0, 0, 0.2); align-self: flex-start; margin-right: auto; border: 1px solid rgba(255,255,255,0.05); }
+@keyframes popIn { 0% { opacity: 0; transform: scale(0.8) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
+.custom-scrollbar::-webkit-scrollbar { width: 6px; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }