/* Widget de chat con IA — TotalPep Colombia (Fase 3) */

.chat-fab{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:var(--amber); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(193,105,31,.55);
}
.chat-fab .icon{ width:26px; height:26px; }
.chat-fab.open .icon-chat{ display:none; }
.chat-fab .icon-close{ display:none; }
.chat-fab.open .icon-close{ display:block; }

.chat-panel{
  position:fixed; right:20px; bottom:92px; z-index:60;
  width:min(360px, calc(100vw - 40px)); height:min(520px, calc(100vh - 140px));
  background:#fff; border-radius:16px; box-shadow:0 24px 60px -16px rgba(10,36,64,.45);
  display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line);
}
.chat-panel[hidden]{ display:none; }

.chat-panel-header{
  background:var(--ink); color:#fff; padding:16px 18px; display:flex;
  align-items:center; justify-content:space-between; flex-shrink:0;
}
.chat-panel-header b{ font-family:var(--serif-display); font-size:15px; display:block; }
.chat-panel-header span{ font-family:var(--mono); font-size:10.5px; color:var(--signal-light); }
.chat-panel-header .chat-status-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; margin-right:6px; }

.chat-messages{
  flex-grow:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--cloud);
}
.chat-bubble{ max-width:82%; padding:10px 13px; border-radius:12px; font-size:13.5px; line-height:1.5; }
.chat-bubble.bot{ background:#fff; border:1px solid var(--line); color:var(--text); align-self:flex-start; border-top-left-radius:3px; }
.chat-bubble.user{ background:var(--ink); color:#fff; align-self:flex-end; border-top-right-radius:3px; }
.chat-bubble.system{ background:var(--tint); color:var(--steel); align-self:center; font-size:12.5px; text-align:center; }

.chat-typing{ align-self:flex-start; display:flex; gap:4px; padding:10px 13px; }
.chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-soft); opacity:.5; animation:chatTypingBlink 1s infinite; }
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chatTypingBlink{ 0%,80%,100%{ opacity:.3; } 40%{ opacity:1; } }

.chat-quick{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; border-top:1px solid var(--line); flex-shrink:0; }
.chat-quick-btn{
  border:1px solid var(--line); background:#fff; color:var(--steel); border-radius:999px;
  padding:7px 12px; font-size:12px; font-weight:500; cursor:pointer;
}
.chat-quick-btn:hover{ border-color:var(--signal); }

.chat-advisor-form{ padding:12px 14px; border-top:1px solid var(--line); flex-shrink:0; }
.chat-advisor-form[hidden]{ display:none; }
.chat-advisor-form p{ font-size:12.5px; color:var(--text-soft); margin-bottom:10px; }
.chat-advisor-form input{
  width:100%; padding:10px 12px; border-radius:8px; border:1.5px solid var(--line);
  font-family:var(--sans); font-size:13.5px; margin-bottom:8px; background:var(--cloud);
}
.chat-advisor-form input:focus{ outline:none; border-color:var(--signal); background:#fff; }

.chat-input-row{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); flex-shrink:0; }
.chat-input-row input{
  flex-grow:1; padding:11px 14px; border-radius:999px; border:1.5px solid var(--line);
  font-family:var(--sans); font-size:13.5px; background:var(--cloud);
}
.chat-input-row input:focus{ outline:none; border-color:var(--signal); background:#fff; }
.chat-input-row button{
  width:40px; height:40px; border-radius:50%; border:none; background:var(--amber); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.chat-input-row button .icon{ width:18px; height:18px; }
.chat-input-row button:disabled{ opacity:.5; cursor:default; }

@media (max-width:480px){
  .chat-panel{ right:12px; bottom:84px; width:calc(100vw - 24px); }
  .chat-fab{ right:14px; bottom:14px; }
}