body{
background:black;
color:#00ff9c;
font-family:monospace;
margin:0;
}

.app{
display:flex;
flex-direction:column;
height:100vh;
}

.top{
padding:15px;
border-bottom:1px solid #00ff9c33;
display:flex;
justify-content:space-between;
color: #00ff9c;
text-shadow: 0 0 6px #00ff9c, 0 0 12px #00ff9c33;
}

/* Room code in center */
#roomCode {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    color: #00ff9c;
    text-shadow: 0 0 6px #00ff9c, 0 0 12px #00ff9c33;
}



.logo{
font-weight:bold;
letter-spacing:2px;
}

#messages{
flex:1;
padding:20px;
overflow-y:auto;
}

.input{
display:flex;
border-top:1px solid #00ff9c33;
}

input{
flex:1;
background:black;
border:none;
color:#00ff9c;
padding:15px;
outline:none;
}

button{
background:black;
border:none;
color:#00ff9c;
padding:15px;
cursor:pointer;
border-left:1px solid #00ff9c33;
}

button:hover{
background:#001a12;
}

.login{
padding:20px;
display:flex;
gap:10px;
flex-wrap: wrap;
}

.login input {
  flex: 1;
  min-width: 150px; /* prevents shrinking too much */
  padding: 10px;
}

.login button {
  padding: 10px 15px;
  white-space: nowrap;
}

.chat{
display:none;
flex-direction:column;
height:100%;
}

.leave-btn {
  position: fixed;
  bottom: 50px;   /* moved up by increasing from 15px to 50px */
  right: 15px;
  padding: 10px 15px;
  background: red;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}

/* Chat page Go Back link styling */
.back-link {
    display: inline-block;
    background: #00ff9c;
    color: #000;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    text-decoration: none;
    margin: 10px auto 15px auto; /* centered below top bar */
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,255,156,0.3);
}

.back-link:hover {
    background: #00e68a;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,255,156,0.4);
}

@media (max-width: 600px) {
  .login {
    flex-direction: column; /* stack vertically */
  }

  .login input,
  .login button {
    width: 100%; /* full width on mobile */
  }
}