*{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}

body{
  background:#e8eef6;
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.chat-box{
  width:360px;
  height:580px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
  display:flex;
  flex-direction:column;
}

/* HEADER */
.chat-header{
  background:#0066ae;
  color:#fff;
  padding:12px;
}
.chat-header .left{
  display:flex;
  align-items:center;
}
.logo{
  width:34px;
  height:34px;
  margin-right:10px;
}
.title{font-weight:bold;font-size:14px}
.status{font-size:11px;opacity:.85}

/* BODY */
.chat-body{
  flex:1;
  background:#f4f7fb;
  padding:12px;
  overflow-y:auto;
}

/* MESSAGE */
.msg{
  max-width:78%;
  padding:8px 10px;
  margin-bottom:10px;
  font-size:13px;
  border-radius:6px;
}
.admin{
  background:#fff;
  border:1px solid #d7dfea;
}
.user{
  background:#0066ae;
  color:#fff;
  margin-left:auto;
}

/* TYPING */
.typing{
  font-size:11px;
  color:#666;
  padding:4px 12px;
  display:none;
}

/* INPUT */
.chat-input{
  display:flex;
  border-top:1px solid #ddd;
}
.chat-input input{
  flex:1;
  border:none;
  padding:12px;
  font-size:13px;
}
.chat-input button{
  background:#0066ae;
  color:#fff;
  border:none;
  padding:0 18px;
}