/* static/css/chat_widget.css */
/* ======= Chat widget flutuante ======= */
.chat-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 1030;
  border-radius: 999px; width: 56px; height: 56px;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.chat-panel {
  position: fixed; right: 24px; bottom: 90px; z-index: 1030;
  width: 360px; max-height: 70vh; display: flex; flex-direction: column;
  overflow: hidden; border-radius: 16px;
}

@media (max-width: 575.98px){
  .chat-panel{ right: 12px; left: 12px; width: auto; }
  .chat-fab{ right: 12px; bottom: 12px; }
}

.chat-messages {
  background: #0f0f14; overflow-y: auto; gap: .5rem;
  display: flex; flex-direction: column;
}

.msg { max-width: 85%; padding: .6rem .8rem; border-radius: 12px; line-height: 1.25; }
.msg.bot { align-self: flex-start; background: #1b1b23; border: 1px solid var(--vinha-border); color: var(--vinha-text); }
.msg.user { align-self: flex-end; background: var(--vinha-primary); color: #fff; }

.chat-input textarea {
  resize: none; height: 42px; background: #0f0f14;
  color: var(--vinha-text); border: 1px solid var(--vinha-border);
}
.chat-input textarea:focus { border-color: var(--vinha-primary); box-shadow: 0 0 0 .2rem rgba(139,92,246,.25); }

.typing { display:inline-block; }
.typing .dot{
  width:6px; height:6px; background:#cfcfe6;
  display:inline-block; border-radius:999px; margin-right:4px;
  animation: blink 1.2s infinite;
}
.typing .dot:nth-child(2){ animation-delay: .15s }
.typing .dot:nth-child(3){ animation-delay: .3s }
@keyframes blink { 0%, 80%, 100% { opacity: .2 } 40% { opacity: 1 } }