body{


color:white;
text-align:center;

 
        font-family: Arial, Helvetica, sans-serif;
		min-height: 100vh;
        background: radial-gradient(circle at top left, #7c3aed, transparent 45%),
                    radial-gradient(circle at bottom right, #06b6d4, transparent 45%),
                    linear-gradient(135deg, #0b1020, #060712);
        margin: 0;
        padding: 0;
    
}

header{
background:#1e293b;
padding:15px;
font-size:22px;
}

.online{
font-size:14px;
color:#22c55e;
}

#chat{
width:650px;
max-width:95%;
height:500px;
background:#111827;
margin:20px auto;
padding:15px;
overflow-y:auto;
border-radius:10px;
text-align:left;
}

.msg{
background:#1f2937;
padding:20px;
margin:8px 0;
border-radius:10px;
}

input{
padding:20px;
margin:5px;
border:none;
border-radius:6px;
}

button{
padding:20px;
margin:5px;
background:#22c55e;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
}

.emoji button{
background:#374151;
}

footer p {
    color: #94a3b8;
    font-size: 14px;
}

    .particle {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      opacity: 0.35;
      filter: blur(0.5px);
      animation: float 10s infinite ease-in-out;
    }
	
	    @keyframes float {
      0%, 100% { transform: translateY(0) translateX(0) scale(1); }
      50% { transform: translateY(-40px) translateX(20px) scale(1.2); }
    }