/* JF Modern Stack Consulting LLC — Chat widget. Usa los tokens de style.css (--bg, --accent, etc). */

.jfmchat{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  font-family: Inter, system-ui, sans-serif;
  color:#f5f5f5;
}

/* Burbuja */
.jfmchat__bubble{
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg, #ffffff 0%, #b3b3b3 55%, #6b6b6b 100%);
  color:#0a0a0a;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:0;
  box-shadow: 0 10px 25px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.jfmchat__bubble:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.4); }
.jfmchat__bubble svg{ width:26px; height:26px; }
.jfmchat__bubble--unread::after{
  content:""; position:absolute; top:12px; right:12px;
  width:10px; height:10px; border-radius:50%;
  background:#ef4444; border:2px solid #0a0a0a;
}

/* Panel */
.jfmchat__panel{
  position:absolute; right:0; bottom:72px;
  width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 120px);
  display:none; flex-direction:column;
  background: #141414; border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
  opacity:0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.jfmchat--open .jfmchat__panel{ display:flex; opacity:1; transform: translateY(0); }

.jfmchat__head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(179,179,179,.08));
}
.jfmchat__dot{ width:10px; height:10px; border-radius:50%; background:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,.15); }
.jfmchat__title{ font-family:"Space Grotesk", Inter, sans-serif; font-weight:600; font-size:15px; }
.jfmchat__sub{ color:#a3a3a3; font-size:12px; }
.jfmchat__close{ margin-left:auto; color:#a3a3a3; background:transparent; border:0; cursor:pointer; padding:6px; border-radius:8px; }
.jfmchat__close:hover{ color:#f5f5f5; background:rgba(255,255,255,.05); }

.jfmchat__log{
  flex:1 1 auto; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}
.jfmchat__log::-webkit-scrollbar{ width:6px; }
.jfmchat__log::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:3px; }

.jfmchat__msg{
  max-width:85%; padding:10px 12px; border-radius:12px; font-size:14px; line-height:1.5;
  white-space:pre-wrap; word-wrap:break-word;
}
.jfmchat__msg--bot{
  align-self:flex-start;
  background:#1c1c1c; border:1px solid rgba(255,255,255,.06);
  border-top-left-radius:4px;
}
.jfmchat__msg--user{
  align-self:flex-end;
  background: linear-gradient(135deg, #ffffff, #b3b3b3);
  color:#0a0a0a; font-weight:500;
  border-top-right-radius:4px;
}
.jfmchat__msg--err{ color:#fca5a5; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); }

.jfmchat__typing{ display:inline-flex; gap:4px; padding:12px; }
.jfmchat__typing span{ width:6px; height:6px; border-radius:50%; background:#a3a3a3; animation:jfmchat-bounce 1.2s infinite; }
.jfmchat__typing span:nth-child(2){ animation-delay:.15s; }
.jfmchat__typing span:nth-child(3){ animation-delay:.3s; }
@keyframes jfmchat-bounce{ 0%,60%,100%{transform:translateY(0); opacity:.5} 30%{transform:translateY(-4px); opacity:1} }

.jfmchat__form{
  display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,.08);
  background:#0a0a0a;
}
.jfmchat__input{
  flex:1; min-width:0; resize:none; max-height:96px;
  background:#141414; border:1px solid rgba(255,255,255,.08);
  color:#f5f5f5; border-radius:10px; padding:10px 12px;
  font-family:inherit; font-size:14px; line-height:1.4; outline:none;
}
.jfmchat__input::placeholder{ color:#737373; }
.jfmchat__input:focus{ border-color:#ffffff; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.jfmchat__send{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px;
  background: linear-gradient(135deg, #ffffff, #b3b3b3);
  color:#0a0a0a; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .15s ease;
}
.jfmchat__send:hover{ opacity:.92; }
.jfmchat__send:disabled{ opacity:.45; cursor:not-allowed; }
.jfmchat__send svg{ width:18px; height:18px; }

.jfmchat__hint{ text-align:center; color:#737373; font-size:11px; padding:6px 0 4px; }

@media (prefers-reduced-motion: reduce){
  .jfmchat__bubble, .jfmchat__panel{ transition: none; }
  .jfmchat__typing span{ animation: none; }
}

@media (max-width: 480px){
  .jfmchat{ right:12px; bottom:12px; }
  .jfmchat__panel{ width:calc(100vw - 24px); height:calc(100vh - 96px); bottom:66px; }
}