@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{

  background:
  linear-gradient(
    135deg,
    #07111f,
    #0d1b2a,
    #07111f
  );

  color:white;

  height:100vh;

  overflow:hidden;

}

/* HOME */

.home-container{

  width:100%;
  height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:20px;

}

.home-box{

  width:100%;
  max-width:430px;

  padding:35px;

  border-radius:30px;

  background:
  rgba(255,255,255,0.06);

  backdrop-filter:blur(20px);

  border:
  1px solid rgba(255,255,255,0.08);

  text-align:center;

  box-shadow:
  0 0 40px rgba(0,0,0,0.35);

}

.home-box h1{

  font-size:42px;

  margin-bottom:12px;

  background:
  linear-gradient(
    90deg,
    #00ffd5,
    #00aaff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

}

.home-box p{

  color:#c9d1d9;

  font-size:17px;

  margin-bottom:30px;

}

.home-box button{

  width:100%;
  height:58px;

  border:none;

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #00c896,
    #00a884
  );

  color:white;

  font-size:19px;
  font-weight:600;

}

/* AUTH */

.auth-container{

  width:100%;
  height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:20px;

}

.auth-box{

  width:100%;
  max-width:420px;

  padding:30px;

  border-radius:28px;

  background:
  rgba(255,255,255,0.06);

  backdrop-filter:blur(18px);

  border:
  1px solid rgba(255,255,255,0.08);

  display:flex;
  flex-direction:column;

  gap:18px;

}

.auth-box h1{

  text-align:center;

  font-size:38px;

  background:
  linear-gradient(
    90deg,
    #00ffd5,
    #00aaff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

}

.auth-box input{

  width:100%;
  height:55px;

  border:none;
  outline:none;

  border-radius:16px;

  padding-left:18px;

  background:
  rgba(255,255,255,0.08);

  color:white;

  font-size:16px;

}

.auth-box input::placeholder{

  color:#b8c1cc;

}

.auth-box button{

  width:100%;
  height:55px;

  border:none;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    #00c896,
    #00a884
  );

  color:white;

  font-size:18px;
  font-weight:600;

}

/* CHAT */

.chat-container{

  width:100%;
  height:100vh;

  display:flex;
  flex-direction:column;

}

/* TOP BAR */

.top-bar{

  width:100%;
  min-height:85px;

  padding:15px 18px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  background:
  rgba(10,20,30,0.7);

  backdrop-filter:blur(20px);

  border-bottom:
  1px solid rgba(255,255,255,0.06);

}

.top-bar h2{

  font-size:30px;

  background:
  linear-gradient(
    90deg,
    #00ffd5,
    #00aaff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

}

.logout-btn{

  width:120px;
  height:50px;

  border:none;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    #ff4d6d,
    #ff006e
  );

  color:white;

  font-size:16px;
  font-weight:600;

}

/* MESSAGES */

.messages{

  flex:1;

  overflow-y:auto;

  padding:18px;

  padding-bottom:110px;

  display:flex;
  flex-direction:column;

  gap:15px;

}

/* MESSAGE */

.message{

  max-width:80%;

  padding:15px 18px;

  border-radius:22px;

  line-height:1.5;

  font-size:16px;

  word-wrap:break-word;

}

/* USER */

.user-message{

  margin-left:auto;

  background:
  linear-gradient(
    135deg,
    #00b894,
    #00897b
  );

  color:white;

  border-bottom-right-radius:6px;

}

/* ADMIN */

.admin-message{

  margin-right:auto;

  background:
  rgba(255,255,255,0.08);

  backdrop-filter:blur(15px);

  border:
  1px solid rgba(255,255,255,0.05);

  color:white;

  border-bottom-left-radius:6px;

}

/* BOTTOM BAR */

.bottom-bar{

  width:100%;

  position:fixed;

  bottom:15px;

  left:0;

  z-index:9999;

  padding:10px;

  display:flex;
  align-items:center;

  gap:10px;

}

/* INPUT */

#messageInput{

  width:calc(100% - 100px);

  height:58px;

  border:none;
  outline:none;

  border-radius:20px;

  padding:0 18px;

  background:
  rgba(25,35,50,0.95);

  color:white;

  font-size:18px;

}

#messageInput::placeholder{

  color:#b8c1cc;

}

/* SEND BUTTON */

.send-btn{

  width:85px;

  min-width:85px;

  height:58px;

  border:none;

  border-radius:20px;

  background:
  linear-gradient(
    135deg,
    #00f5d4,
    #00c896
  );

  color:white;

  font-size:17px;
  font-weight:700;

}

/* SCROLLBAR */

::-webkit-scrollbar{
  width:5px;
}

::-webkit-scrollbar-thumb{
  background:#00c896;
  border-radius:20px;
}

/* MOBILE */

@media(max-width:600px){

  .top-bar h2{
    font-size:24px;
  }

  .logout-btn{

    width:95px;
    height:45px;

    font-size:15px;

  }

  .message{

    max-width:88%;
    font-size:15px;

  }

  .send-btn{

    width:82px;

  }

}