.chat-wrapper{
  width:360px;
  height:550px;
  background:white;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  overflow:hidden;
  transition: all 0.3s ease;
  cursor:default;
  position:fixed;
  bottom:25px;
  right:25px;
  z-index:999;
}

/* ESTADO MINIMIZADO */
.chat-wrapper.minimized{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  cursor:pointer;
}

/* ESCONDE TODO O CHAT */
.chat-wrapper.minimized .chat-header,
.chat-wrapper.minimized .chat-messages,
.chat-wrapper.minimized .chat-input{
  display:none;
}

/* MOSTRA ÍCONE */
.chat-wrapper.minimized::after{
  content:"💬";
  font-size:28px;
}

/* HEADER */
.chat-header{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:white;
  padding:16px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.chat-header span{
  background:white;
  color:var(--primary);
  padding:3px 10px;
  border-radius:10px;
  font-size:12px;
}

.toggle-chat{
  background: rgba(255,255,255,0.2);
  border:none;
  color:white;
  font-weight:bold;
  padding:2px 8px;
  border-radius:5px;
  cursor:pointer;
  margin-left:10px;
}

/* MENSAGENS */
.chat-messages{
  flex:1;
  background:var(--bg);
  padding:15px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.message{
  padding:10px 14px;
  border-radius:14px;
  max-width:70%;
  font-size:14px;
  animation:fade .2s ease;
  word-wrap: break-word;
}

.bot{
  background:var(--bot-bg);
  color:var(--bot-text);
  align-self:flex-start;
}

.user{
  background:var(--primary);
  color:white;
  align-self:flex-end;
}

/* INPUT */
.chat-input{
  display:flex;
  padding:10px;
  background:white;
  border-top:1px solid #eee;
}

.chat-input input{
  flex:1;
  border:none;
  outline:none;
  padding:10px;
  border-radius:10px;
  background:#f1f3f7;
}

.chat-input button{
  border:none;
  margin-left:8px;
  padding:10px 15px;
  border-radius:10px;
  background:var(--primary);
  color:white;
  cursor:pointer;
  font-weight:bold;
}

.chat-input button:hover{
  background:#3a8ee6;
}

/* DIGITANDO */
.typing{
  font-style:italic;
  opacity:.7;
}

/* ANIMAÇÃO */
@keyframes fade{
  from{
    opacity:0;
    transform:translateY(10px);
  }
}

/* RESPONSIVO */
@media(max-width:768px){
  .chat-wrapper{
    width:95vw;
    height:75vh;
    right:2.5vw;
    bottom:10px;
  }

  .chat-wrapper.minimized{
    width:55px;
    height:55px;
    right:15px;
    bottom:15px;
  }
}