*{
  margin:0;
  padding:0;
}

.botSt {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  border: 5px solid gold;
  border-radius: 25%;
  outline: none;
  background-image: url(img/rem.png);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 13px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.8s ease-in-out;
}
.botSt:hover{
  background-size: 90%;
  border: 5px solid navy;

}

.bot {
  position:fixed;
  left: -11px;
  top: -25px;
  width:90px;
  height:90px;
  border-radius:50%;
  /**/
  border: solid #d6dd07;
  background:url(img/YousefFace.jpg);
  background-size:100%;
  margin:10px;

  animation: mov 1.5s linear backwards;
}

.SpR {
  position: fixed;
  bottom: 11px;
  left: 480px;
  width: 60px;
  height: 60px;
  border: solid #1c1f46;
  border-radius: 50%;
  background:url(img/Mic.jpg);
  background-size:100%;
  font-size:18px;
  outline: none;
  box-shadow: 0 13px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.8s ease-in-out;
}

.SpR:hover{
  font-size: 14px;
}
 
::-webkit-scrollbar
{
  display: none; /* OR  width: 0px; to remove scrollbars */
}

#main{
  position: fixed;
  display: block;
  left: 50%;
  margin:0;
  top: 5vh;
  height:90vh;
  width:100vw;
  max-width:540px;  
  background: lightblue ;
  box-shadow: inset 0 0 10px 4px navy;
  transition-duration: 2s;
  transform: translateY(110%);
  /*
  animation: mov 0.8s ease-in-out backwards;
  */
}

@keyframes mov {
 /*   */
    0%   {top: 100%;  }
    25%  {top: 70%; }
    50%  {top: 30%; }
    75%  {top: 10%; }
    100% {top: 0%; }  
     
}


.header{
  text-align:center;
  background:#1c1f46;
  padding:8px;
  font-family:sans-serif;
  color:#fff;
  text-shadow:1px 1px 4px #111;
  box-shadow:0 4px 8px #000a;
  margin-bottom:8px;
}

h3{
  font-family:monospace;
  font-size:20px;
}
#robot{
  display:flex;
  align-items:center;
}

#msg_send{
  outline:none;
  font-size:20px;
  padding:0 16px;
  border-radius:32px 0 32px 32px;
  background:#ececee;
  color:#333;
  border:solid 1px #777;
  border-right:none;
}

.input{
  height:7%;
  background:linear-gradient(#ececee 50%, #1c1f46 50%);
  display:grid;
  grid-template-columns:70% 30%;
  border-radius:32px;
  margin:8px 16px;
  min-height:42px;
  box-shadow:inset 0 1px 0 #777;
}
.send{
  outline:none;
  font-size:20px;
  border:none;
  /* 
  background-image: url(/img/SEND.jpg);
  background-repeat: no-repeat;
  background-size:auto;*/
  background:#1c1f46; 
  border-radius:32px;
  color:#eee;
  transition-duration:0.2s;
}
.send:active{
  font-size:16px;
}

.left, .right{
  font-size:18px;
  display:inline-block;
  padding:14px;
  width:auto;
  max-width:60%;
  margin:8px 16px;
  font-family:monospace;
  word-wrap:break-word;
}

.left{
  float:left;
  color:#000;
  background: lightgoldenrodyellow;
  border-radius:0 16px 16px 16px;
}

.right{
  float:right;
  color:white;
  background:#1c1f46;
  border-radius:16px 16px 0 16px;
}

#msg{
  overflow-y:scroll;
  height:82%;
  padding:0 12px;
  scroll-behavior:smooth;
}