/* ==========================================================================
   COMPUNET99 — Widget de chat
   ========================================================================== */

.chat-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--verde, #98c840); color: #fff; box-shadow: 0 8px 26px rgba(152,200,64,.45);
  display: grid; place-items: center; transition: .28s cubic-bezier(.4,0,.2,1);
}
.chat-btn:hover { transform: scale(1.08); background: #7ba62f; }
.chat-btn svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; }
.chat-btn .cerrar { display: none; }
.chat-btn.abierto .abrir { display: none; }
.chat-btn.abierto .cerrar { display: block; }

.chat-panel {
  position: fixed; right: 22px; bottom: 94px; z-index: 901;
  width: 370px; max-width: calc(100vw - 44px); height: 520px; max-height: calc(100vh - 140px);
  background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(20,20,20,.28);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
  transition: .25s cubic-bezier(.4,0,.2,1);
}
.chat-panel.abierto { opacity: 1; visibility: visible; transform: none; }

.chat-head {
  background: linear-gradient(135deg, #303030, #3c4430); color: #fff;
  padding: 16px 18px; display: flex; align-items: center; gap: 12px;
}
.chat-head .avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #98c840;
  display: grid; place-items: center; font-weight: 800; font-size: .78rem; color: #fff; flex: 0 0 40px;
}
.chat-head strong { display: block; font-size: .98rem; }
.chat-head span { font-size: .78rem; color: #c3ccb4; display: flex; align-items: center; gap: 6px; }
.chat-head .punto { width: 7px; height: 7px; border-radius: 50%; background: #98c840; }

.chat-cuerpo { flex: 1; overflow-y: auto; padding: 18px; background: #f7f9f4; display: flex; flex-direction: column; gap: 12px; }
.chat-cuerpo::-webkit-scrollbar { width: 7px; }
.chat-cuerpo::-webkit-scrollbar-thumb { background: #d5dcc7; border-radius: 8px; }

.msg { max-width: 85%; padding: 11px 15px; border-radius: 14px; font-size: .9rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.msg.bot { background: #fff; border: 1px solid #e8ebe4; border-bottom-left-radius: 4px; color: #303030; align-self: flex-start; }
.msg.user { background: #98c840; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg.typing { color: #6b7280; font-style: italic; }
.msg .li { display: block; padding-left: 6px; margin: 3px 0; }
.msg strong { font-weight: 700; }
.msg.user strong { font-weight: 700; }

.chat-sugerencias { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 12px; background: #f7f9f4; }
.chat-sugerencias button {
  border: 1px solid #d5dcc7; background: #fff; color: #4a4a4a; font-size: .78rem;
  padding: 7px 12px; border-radius: 60px; cursor: pointer; font-family: inherit; transition: .2s;
}
.chat-sugerencias button:hover { border-color: #98c840; color: #7ba62f; }

.chat-pie { display: flex; gap: 9px; padding: 13px 15px; border-top: 1px solid #e8ebe4; background: #fff; }
.chat-pie input {
  flex: 1; padding: 11px 14px; border: 1.5px solid #e8ebe4; border-radius: 60px;
  font-family: inherit; font-size: .9rem; outline: none; transition: .2s;
}
.chat-pie input:focus { border-color: #98c840; box-shadow: 0 0 0 3px rgba(152,200,64,.16); }
.chat-pie button {
  width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: #98c840; color: #fff; display: grid; place-items: center; transition: .2s;
}
.chat-pie button:hover { background: #7ba62f; }
.chat-pie button:disabled { opacity: .45; cursor: not-allowed; }
.chat-pie svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }

@media (max-width: 480px) {
  .chat-panel { right: 12px; left: 12px; bottom: 88px; width: auto; }
  .chat-btn { right: 16px; bottom: 16px; }
}