Update static/styles.css

static/styles.css

@@ -55,8 +55,33 @@ body {
 .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); }
+.user-tag {
+    font-size: 0.6rem; /* Маленький шрифт */
+    font-weight: 700;  /* Жирный */
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    
+    /* Делаем "нормальную" кнопку */
+    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; /* Скругление */
+    
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    display: inline-block;
+    margin-top: 6px;
+}
+
+.user-tag:hover {
+    /* При наведении - яркая вспышка */
+    background: var(--accent); /* Голубой фон */
+    color: black; /* Черный текст для контраста */
+    border-color: var(--accent);
+    box-shadow: 0 0 15px rgba(0, 242, 234, 0.5); /* Неоновое свечение */
+    transform: translateY(-1px);
+}
 
 /* Main Chat */
 .chat-area { display: flex; flex-direction: column; position: relative; }