/* ═══ TRIGGER BUTTON ═══ */
.bot-trigger{
  position:fixed;
  bottom:32px;right:32px;
  width:54px;height:54px;
  background:transparent;
  border:1.5px solid rgba(191,241,244,0.25);
  border-radius:4px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
  transition:border-color 0.2s,box-shadow 0.2s;
  box-shadow:0 4px 24px rgba(2,23,50,0.5);
}
.bot-trigger:hover{
  background:#060a0e;
  border-color:#bff1f4;
  box-shadow:0 4px 32px rgba(191,241,244,0.2);
}
.bot-trigger-label{
  font-size:15px;font-weight:500;
  color:#bff1f4;
  letter-spacing:0.02em;
  line-height:1;
  user-select:none;
}
.bot-trigger-dot{
  position:absolute;
  top:-3px;right:-3px;
  width:9px;height:9px;
  border-radius:50%;
  background:#7ab88a;
  border:2px solid #021732;
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(122,184,138,0.5)}
  50%{box-shadow:0 0 0 5px rgba(122,184,138,0)}
}

/* ═══ VENTANA DEL BOT ═══ */
.bot-window{
  position:fixed;
  bottom:100px;right:32px;
  width:380px;
  background:#060a0e;
  border:1.5px solid rgba(191,241,244,0.2);
  border-radius:4px;
  display:flex;flex-direction:column;
  overflow:hidden;
  z-index:999;
  box-shadow:0 8px 48px rgba(2,23,50,0.7);
  transform:translateY(16px) scale(0.97);
  opacity:0;
  pointer-events:none;
  transition:transform 0.25s ease,opacity 0.25s ease;
}
.bot-window.open{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:all;
}

/* Header */
.bot-header{
  background:#030507;
  border-bottom:1px solid rgba(191,241,244,0.12);
  padding:12px 16px;
  display:flex;align-items:center;
  flex-shrink:0;
}
.bot-header-title{
  flex:1;text-align:left;
  font-size:10px;font-weight:400;
  color:rgba(191,241,244,0.6);
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.bot-header-status{
  font-size:9px;color:#7ab88a;
  letter-spacing:0.06em;
}

/* Mensajes */
.bot-messages{
  flex:1;
  overflow-y:auto;
  padding:20px 16px;
  display:flex;flex-direction:column;
  gap:14px;
  min-height:320px;
  max-height:400px;
  background:#060a0e;
  scrollbar-width:thin;
  scrollbar-color:rgba(191,241,244,0.15) transparent;
}
.bot-messages::-webkit-scrollbar{width:3px}
.bot-messages::-webkit-scrollbar-thumb{background:rgba(191,241,244,0.15);border-radius:2px}

.msg-row{display:flex;gap:8px;align-items:flex-start}
.msg-row.user{flex-direction:row-reverse}
.msg-avatar{
  width:26px;height:26px;flex-shrink:0;
  border-radius:2px;
  background:#041228;
  border:1px solid rgba(191,241,244,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:#48acd6;
  letter-spacing:0.02em;
  margin-top:2px;
}
.msg-row.user .msg-avatar{
  background:#041a10;
  border-color:rgba(122,184,138,0.3);
  color:#7ab88a;
}
.msg-bubble{
  max-width:270px;
  padding:10px 13px;
  border-radius:2px;
  font-size:14px;font-weight:300;
  line-height:1.75;
}
.msg-row.bot .msg-bubble{
  background:#0a0f16;
  border:1px solid rgba(191,241,244,0.12);
  color:rgba(191,241,244,0.88);
  border-radius:0 4px 4px 4px;
}
.msg-row.user .msg-bubble{
  background:#071a10;
  border:1px solid rgba(122,184,138,0.2);
  color:rgba(191,241,244,0.8);
  border-radius:4px 0 4px 4px;
}
.msg-bubble code{
  background:rgba(72,172,214,0.15);
  color:#bff1f4;
  padding:1px 5px;
  border-radius:2px;
  font-size:10px;
}
.msg-bubble pre{
  background:#030507;
  border:1px solid rgba(191,241,244,0.1);
  border-left:2px solid #48acd6;
  padding:8px 10px;
  margin-top:8px;
  border-radius:0 2px 2px 0;
  overflow-x:auto;
  font-size:10px;
  color:#9ab8d4;
  line-height:1.6;
}
.msg-bubble pre .kw{color:#9ab8d4}
.msg-bubble pre .at{color:#7ab88a}
.msg-bubble pre .st{color:#b89878}
.msg-bubble pre .cm{color:#2a5a6a}
.msg-time{
  font-size:9px;color:rgba(191,241,244,0.2);
  margin-top:4px;
  padding:0 2px;
  align-self:flex-end;
}

/* Typing indicator */
.typing-indicator{
  display:flex;gap:4px;align-items:center;
  padding:10px 13px;
  background:#0a0f16;
  border:1px solid rgba(191,241,244,0.12);
  border-radius:0 4px 4px 4px;
  width:fit-content;
}
.typing-dot{
  width:5px;height:5px;border-radius:50%;
  background:#48acd6;
  animation:tdot 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2){animation-delay:0.2s}
.typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes tdot{
  0%,60%,100%{transform:translateY(0);opacity:0.4}
  30%{transform:translateY(-4px);opacity:1}
}

/* Quick replies */
.quick-replies{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 0 4px;
}
.quick-btn{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:300;
  color:#48acd6;
  background:transparent;
  border:1px solid rgba(72,172,214,0.35);
  border-radius:2px;
  padding:5px 10px;
  cursor:pointer;
  letter-spacing:0.04em;
  transition:background 0.15s,border-color 0.15s,color 0.15s;
  white-space:nowrap;
}
.quick-btn:hover{
  background:rgba(72,172,214,0.1);
  border-color:#48acd6;
  color:#bff1f4;
}

/* Input */
.bot-input-wrap{
  border-top:1px solid rgba(191,241,244,0.1);
  padding:12px 14px;
  display:flex;align-items:center;gap:10px;
  background:#030507;
  flex-shrink:0;
}
.bot-prompt{
  font-size:12px;color:#48acd6;
  flex-shrink:0;
}
.bot-input{
  flex:1;
  background:transparent;
  border:none;outline:none;
  font-family:'JetBrains Mono',monospace;
  font-size:14px;font-weight:300;
  color:rgba(191,241,244,0.88);
  caret-color:#bff1f4;
}
.bot-input::placeholder{color:rgba(191,241,244,0.2)}
.bot-send{
  background:none;border:none;cursor:pointer;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;color:#48acd6;
  padding:3px 6px;
  border:1px solid rgba(72,172,214,0.3);
  border-radius:2px;
  transition:all 0.15s;
  letter-spacing:0.04em;
}
.bot-send:hover{
  background:rgba(72,172,214,0.1);
  border-color:#48acd6;
  color:#bff1f4;
}

/* Mobile */
@media(max-width:500px){
  .bot-window{
    right:0;left:0;bottom:0;
    width:100%;
    border-radius:12px 12px 0 0;
    border-left:none;border-right:none;border-bottom:none;
  }
  .bot-trigger{bottom:24px;right:24px}
}