/* ================= GLOBAL ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, sans-serif;
  background:#0f172a;
  width:100%;
  overflow-x:hidden;
}

/* ================= HEADER ================= */
.header{
  background:#1d4ed8;
  color:white;
  padding:12px 15px;
  position:fixed;
  width:100%;
  top:0;
  z-index:1000;
}

/* HEADER INNER (FULL WIDTH) */
.header-inner{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* LOGO */
.logo{
  font-weight:bold;
  font-size:18px;
}

/* BACK BUTTON */
.back-btn{
  background:white;
  color:#1d4ed8;
  padding:8px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
  transition:0.3s;
}

.back-btn:hover{
  background:#facc15;
  color:black;
  transform:scale(1.05);
}

/* ================= CHAT WRAPPER ================= */
.chat-wrapper{
  margin-top:65px;
  width:100%;
  height:calc(100vh - 65px);
  display:flex;
  flex-direction:column;
  background:#111827;
}

/* ================= CHAT BOX ================= */
.chat-box{
  flex:1;
  padding:15px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  scroll-behavior:smooth;
}

/* ================= MESSAGES ================= */
.user-msg{
  align-self:flex-end;
  background:#2563eb;
  color:white;
  padding:10px 14px;
  border-radius:15px 15px 0 15px;
  max-width:75%;
  word-wrap:break-word;
}

.bot-msg{
  align-self:flex-start;
  background:#e5e7eb;
  color:black;
  padding:10px 14px;
  border-radius:15px 15px 15px 0;
  max-width:75%;
  word-wrap:break-word;
}

/* ================= INPUT AREA ================= */
.input-area{
  display:flex;
  padding:10px;
  background:#0b1220;
  border-top:1px solid #1f2937;
  width:100%;
}

/* INPUT */
.input-area input{
  flex:1;
  padding:12px;
  border:none;
  outline:none;
  border-radius:10px;
  background:#1f2937;
  color:white;
  font-size:14px;
}

/* BUTTON */
.input-area button{
  margin-left:10px;
  padding:12px 18px;
  background:#2563eb;
  color:white;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:0.3s;
}

.input-area button:hover{
  transform:scale(1.05);
  background:#1d4ed8;
}

/* ================= SCROLLBAR ================= */
.chat-box::-webkit-scrollbar{
  width:6px;
}

.chat-box::-webkit-scrollbar-thumb{
  background:#374151;
  border-radius:10px;
}

/* ================= RESPONSIVE ================= */

/* Small Mobile */
@media (max-width:480px){

  .logo{
    font-size:14px;
  }

  .back-btn{
    padding:6px 10px;
    font-size:12px;
  }

  .chat-box{
    padding:10px;
  }

  .user-msg, .bot-msg{
    max-width:90%;
    font-size:13px;
  }

  .input-area input{
    padding:10px;
    font-size:13px;
  }

  .input-area button{
    padding:10px 12px;
    font-size:12px;
  }
}

/* Tablet */
@media (max-width:768px){

  .user-msg, .bot-msg{
    max-width:85%;
  }

  .logo{
    font-size:16px;
  }
}

/* Large Screens */
@media (min-width:1024px){

  .user-msg, .bot-msg{
    max-width:60%;
  }

}