/* Chatbot de Dani Rizos Nail's — widget flotante (vanilla, sin dependencias).
 * La burbuja va APILADA ENCIMA del FAB de WhatsApp del sitio
 * (.wa-fab: bottom 1.5rem, 60px de alto) para no taparlo. */
#drn-chat-bubble {
  position: fixed; right: 1.5rem; bottom: 6rem; z-index: 9998;
  width: 58px; height: 58px; border-radius: 50%;
  background: #c88069; color: #fff; border: none; cursor: pointer;
  font-size: 26px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
#drn-chat-bubble:hover { background: #8a4d5b; }
#drn-chat-panel {
  position: fixed; right: 1.5rem; bottom: 10.5rem; z-index: 9999;
  width: 340px; max-width: calc(100vw - 3rem); height: 480px;
  max-height: calc(100vh - 13rem);
  background: #f8f2ed; border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  display: none; flex-direction: column;
  font-family: inherit;
}
#drn-chat-panel.open { display: flex; }
#drn-chat-head {
  background: #5f373f; color: #f8f2ed; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
#drn-chat-head b { font-size: 15px; }
#drn-chat-head small { display: block; font-weight: normal; opacity: .75; font-size: 11px; }
#drn-chat-close { background: none; border: none; color: #f8f2ed; font-size: 20px; cursor: pointer; }
#drn-chat-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.drn-msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.drn-msg.bot { background: #fff; color: #3b2a2f; align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.drn-msg.user { background: #c88069; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.drn-msg.typing { font-style: italic; color: #8a4d5b; }
.drn-typing { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: middle; }
.drn-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #c88069; opacity: .3;
  animation: drn-tbounce 1.2s infinite;
}
.drn-typing span:nth-child(2) { animation-delay: .2s; }
.drn-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes drn-tbounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}
.drn-msg a { color: #25d366; }
#drn-chat-chips { display: flex; gap: 6px; padding: 0 12px 8px; flex-wrap: wrap; }
.drn-chip {
  background: #fff; border: 1px solid #c88069; color: #8a4d5b;
  border-radius: 20px; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.drn-chip:hover { background: #c88069; color: #fff; }
#drn-chat-form { display: flex; padding: 10px; gap: 8px; background: #fff; border-top: 1px solid #f4ece7; }
#drn-chat-input {
  flex: 1; border: 1px solid #f4ece7; border-radius: 20px;
  padding: 9px 14px; font-size: 14px; outline: none; background: #f8f2ed;
}
#drn-chat-input:focus { border-color: #c88069; }
#drn-chat-send {
  background: #c88069; color: #fff; border: none; border-radius: 50%;
  width: 40px; height: 40px; font-size: 17px; cursor: pointer; flex-shrink: 0;
}
#drn-chat-send:hover { background: #8a4d5b; }
#drn-chat-send:disabled { opacity: .5; cursor: default; }

/* Responsive: en móvil el panel ocupa casi todo el ancho */
@media (max-width: 480px) {
  #drn-chat-bubble { right: 1rem; bottom: 5.5rem; width: 52px; height: 52px; font-size: 23px; }
  #drn-chat-panel {
    right: 0.75rem; left: 0.75rem; width: auto;
    bottom: 9.75rem; height: 62vh; max-height: calc(100vh - 11rem);
  }
  .drn-msg { font-size: 13.5px; }
}