Update static/styles.css

static/styles.css

@@ -1,124 +1,316 @@
+/* =========================================
+   1. VARIABLES & BASE SETUP
+   ========================================= */
 :root {
+    /* Colors */
     --bg-primary: #0f0c29;
+    --accent-cyan: #00f2ea;
+    --accent-blue: #4facfe;
+    --accent-red: #ff0055;
+    --accent-green: #22c55e;
+    
+    /* Glass Effect */
     --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;
+    --glass-highlight: rgba(255, 255, 255, 0.1);
+    
+    /* Layout */
+    --nav-width: 70px;
+    --sidebar-width: 260px;
+}
+
+* {
+    box-sizing: border-box;
 }
 
 body {
     background: var(--bg-primary);
     font-family: 'Inter', sans-serif;
     color: white;
-    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    overflow: hidden; /* App-like feel */
+    height: 100vh;
+    width: 100vw;
+}
+
+/* =========================================
+   2. BACKGROUND ANIMATIONS
+   ========================================= */
+.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: 500px;
+    height: 500px;
+    background: var(--accent-blue);
+    top: -100px;
+    left: -100px;
 }
 
-/* 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; }
+.blob-2 {
+    width: 400px;
+    height: 400px;
+    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); } }
+@keyframes float {
+    0% { transform: translate(0, 0); }
+    50% { transform: translate(30px, -30px); }
+    100% { transform: translate(0, 0); }
+}
 
-/* Layout Grid */
+/* =========================================
+   3. LAYOUT GRID
+   ========================================= */
 .app-grid {
-    display: grid;
-    grid-template-columns: var(--sidebar-w) 1fr;
-    height: 100vh;
-    width: 100vw;
+    display: flex;
+    height: 100%;
+    width: 100%;
 }
 
-/* Sidebar */
-.sidebar {
-    background: rgba(0, 0, 0, 0.3);
+/* =========================================
+   4. NAVIGATION RAIL (Leftmost Strip)
+   ========================================= */
+nav {
+    width: var(--nav-width);
+    background: rgba(0, 0, 0, 0.4);
+    border-right: 1px solid var(--glass-border);
     backdrop-filter: blur(20px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 20px;
+    gap: 15px;
+    z-index: 20;
+}
+
+.nav-btn {
+    width: 48px;
+    height: 48px;
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.4);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    border: none;
+    background: transparent;
+}
+
+.nav-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.nav-btn.active {
+    background: var(--accent-cyan);
+    color: #000;
+    box-shadow: 0 0 20px rgba(0, 242, 234, 0.4);
+}
+
+/* =========================================
+   5. SIDEBAR (Channels / Friends)
+   ========================================= */
+.sidebar {
+    width: var(--sidebar-width);
+    background: rgba(0, 0, 0, 0.2);
     border-right: 1px solid var(--glass-border);
     display: flex;
     flex-direction: column;
+    transition: width 0.3s ease;
+}
+
+.channel-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
 }
 
-.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;
+    padding: 10px 12px;
+    margin-bottom: 4px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.95rem;
 }
-.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 */
+.channel-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: white;
+}
+
+.channel-item.active {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border-left: 3px solid var(--accent-cyan);
+}
+
+/* User Profile Panel (Bottom of Sidebar) */
 .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;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.3);
+    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-info {
+    flex: 1;
+    overflow: hidden;
+}
+
+/* === ADMIN ACCESS BUTTON (The "Chip") === */
 .user-tag {
-    font-size: 0.6rem; /* Маленький шрифт */
-    font-weight: 700;  /* Жирный */
-    letter-spacing: 1px;
+    font-size: 0.6rem;
+    font-weight: 800;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
     
-    /* Делаем "нормальную" кнопку */
+    /* Visuals */
     color: rgba(255, 255, 255, 0.9);
-    background: rgba(0, 0, 0, 0.3); /* Темный фон */
-    border: 1px solid rgba(255, 255, 255, 0.2); /* Четкая рамка */
-    padding: 4px 8px; /* Отступы внутри */
-    border-radius: 4px; /* Скругление */
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 4px 8px;
+    border-radius: 6px;
     
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     display: inline-block;
-    margin-top: 6px;
+    margin-top: 4px;
+    user-select: none;
 }
 
 .user-tag:hover {
-    /* При наведении - яркая вспышка */
-    background: var(--accent); /* Голубой фон */
-    color: black; /* Черный текст для контраста */
-    border-color: var(--accent);
-    box-shadow: 0 0 15px rgba(0, 242, 234, 0.5); /* Неоновое свечение */
+    background: var(--accent-cyan);
+    color: #000;
+    border-color: var(--accent-cyan);
+    box-shadow: 0 0 15px rgba(0, 242, 234, 0.6);
     transform: translateY(-1px);
 }
 
-/* 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);
+/* =========================================
+   6. MAIN CHAT AREA
+   ========================================= */
+.chat-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background: rgba(0, 0, 0, 0.1);
 }
 
-.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; }
+.chat-header {
+    height: 64px;
+    border-bottom: 1px solid var(--glass-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    background: rgba(255, 255, 255, 0.02);
+    backdrop-filter: blur(10px);
+}
 
-@keyframes slideIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 24px;
+    display: flex;
+    flex-direction: column;
+}
 
-/* Modals */
+/* =========================================
+   7. MODALS (Login, Admin, Settings)
+   ========================================= */
 .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;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(12px);
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
 }
-.modal-overlay.open { opacity: 1; pointer-events: all; }
+
+.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; } }
+    background: #151520;
+    border: 1px solid var(--glass-border);
+    padding: 2.5rem;
+    border-radius: 20px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+    transform: scale(0.95);
+    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.modal-overlay.open .modal-box {
+    transform: scale(1);
+}
+
+/* Admin Specifics */
+#admin-modal .modal-box {
+    border-color: rgba(255, 0, 85, 0.3);
+    box-shadow: 0 0 30px rgba(255, 0, 85, 0.1);
+}
+
+/* =========================================
+   8. UTILITIES & ANIMATIONS
+   ========================================= */
+
+/* Voice Status Dots */
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #666;
+}
+.status-dot.connecting { background: #fbbf24; animation: pulse 1s infinite; }
+.status-dot.connected { background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }
+@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
+
+/* Custom Scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* Input Focus Glow */
+input:focus {
+    box-shadow: 0 0 0 2px rgba(0, 242, 234, 0.2);
+}