Update static/styles.css

static/styles.css

@@ -1,18 +1,99 @@
-: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; }
+:root {
+    --bg-primary: #0f0c29;
+    --glass-bg: rgba(20, 20, 35, 0.6);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --accent: #00f2ea;
+    --danger: #ff0055;
+    --warning: #f1c40f; /* Yellow Beta */
+    --sidebar-w: 280px;
+}
+
+body {
+    background: var(--bg-primary);
+    font-family: 'Inter', sans-serif;
+    color: white;
+    overflow: hidden;
+}
+
+/* Background Animation */
+.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; z-index: -1; animation: float 10s infinite ease-in-out; }
+.blob-1 { width: 400px; height: 400px; background: #4facfe; top: -100px; left: -100px; }
+.blob-2 { width: 300px; height: 300px; background: #764ba2; bottom: -50px; right: -50px; animation-delay: 2s; }
+
+@keyframes float { 0% { transform: translate(0,0); } 50% { transform: translate(30px, -30px); } 100% { transform: translate(0,0); } }
+
+/* Layout Grid */
+.app-grid {
+    display: grid;
+    grid-template-columns: var(--sidebar-w) 1fr;
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Sidebar */
+.sidebar {
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(20px);
+    border-right: 1px solid var(--glass-border);
+    display: flex;
+    flex-direction: column;
+}
+
+.channel-list { flex: 1; overflow-y: auto; padding: 1rem; }
+.channel-item {
+    padding: 10px; margin-bottom: 5px; border-radius: 8px; cursor: pointer;
+    transition: 0.2s; display: flex; align-items: center; gap: 10px;
+}
+.channel-item:hover, .channel-item.active { background: rgba(255,255,255,0.1); }
+.channel-item.active { border-left: 3px solid var(--accent); }
+
+/* User Mini Profile */
+.user-panel {
+    padding: 1rem; background: rgba(0,0,0,0.4); border-top: 1px solid var(--glass-border);
+    display: flex; align-items: center; gap: 10px;
+}
+.avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #4facfe, #00f2ea); }
+.user-info { flex: 1; }
+.username { font-weight: bold; font-size: 0.9rem; }
+.user-tag { font-size: 0.7rem; color: rgba(255,255,255,0.5); cursor: pointer; transition: 0.3s; }
+.user-tag:hover { color: var(--accent); text-shadow: 0 0 8px var(--accent); }
+
+/* Main Chat */
+.chat-area { display: flex; flex-direction: column; position: relative; }
+.chat-header {
+    height: 60px; border-bottom: 1px solid var(--glass-border); display: flex; 
+    align-items: center; padding: 0 1.5rem; justify-content: space-between;
+    background: rgba(255,255,255,0.02);
+}
+
+.messages-container { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
+
+/* Messages */
+.message { display: flex; gap: 1rem; animation: slideIn 0.2s ease; max-width: 90%; }
+.message-content { background: rgba(255,255,255,0.05); padding: 10px 15px; border-radius: 0 12px 12px 12px; border: 1px solid rgba(255,255,255,0.05); }
+.message.system { align-self: center; opacity: 0.7; font-size: 0.8rem; border: 1px solid var(--danger); background: rgba(255, 0, 85, 0.1); border-radius: 8px; padding: 5px 10px; }
+.badge-beta { background: var(--warning); color: black; font-size: 0.6rem; padding: 1px 4px; border-radius: 4px; font-weight: bold; margin-left: 5px; vertical-align: middle; }
+
+@keyframes slideIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+
+/* Modals */
+.modal-overlay {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px);
+    z-index: 100; display: flex; justify-content: center; align-items: center;
+    opacity: 0; pointer-events: none; transition: 0.3s;
+}
+.modal-overlay.open { opacity: 1; pointer-events: all; }
+.modal-box {
+    background: #1a1a2e; border: 1px solid var(--glass-border); padding: 2rem;
+    border-radius: 16px; width: 400px; box-shadow: 0 0 30px rgba(0,242,234,0.1);
+    transform: scale(0.9); transition: 0.3s;
+}
+.modal-overlay.open .modal-box { transform: scale(1); }
+
+/* Voice Status */
+.voice-status { font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }
+.status-dot { width: 8px; height: 8px; border-radius: 50%; background: gray; }
+.status-dot.connecting { background: yellow; animation: pulse 1s infinite; }
+.status-dot.connected { background: #00f2ea; box-shadow: 0 0 10px #00f2ea; }
+.status-dot.error { background: var(--danger); }
+@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }