/* ============================================================
   HSE AVATAR ASISTENTE VIRTUAL – ESTILOS v2.0
   HSE Colombia SAS
   ============================================================ */

:root {
  --hse-primary:      #E8363D;
  --hse-primary-dark: #c02a30;
  --hse-primary-light:#fde8e9;
  --hse-dark:         #1a1a2e;
  --hse-gray:         #f4f6f8;
  --hse-border:       #e0e4ea;
  --hse-text:         #2d3748;
  --hse-text-light:   #718096;
  --hse-white:        #ffffff;
  --hse-shadow:       0 8px 32px rgba(0,0,0,0.18);
  --hse-radius:       18px;
  --hse-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hse-anim-speed:   0.3s;
  --hse-z:            99999;
}

/* ── CONTENEDOR ────────────────────────────────────────── */
#hse-avatar-wrapper {
  position:   fixed;
  z-index:    var(--hse-z);
  font-family:var(--hse-font);
  line-height:1.5;
}
#hse-avatar-wrapper.hse-bottom-right { bottom:24px; right:24px; }
#hse-avatar-wrapper.hse-bottom-left  { bottom:24px; left:24px; }

/* ── BOTÓN FLOTANTE ────────────────────────────────────── */
#hse-avatar-toggle {
  background:    none;
  border:        none;
  cursor:        pointer;
  padding:       0;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           6px;
  transition:    transform var(--hse-anim-speed) ease;
  outline:       none;
}
#hse-avatar-toggle:hover            { transform: scale(1.06) translateY(-2px); }
#hse-avatar-toggle:focus-visible    { outline:3px solid var(--hse-primary); outline-offset:4px; border-radius:50%; }

.hse-avatar-bubble {
  position:      relative;
  width:         68px;
  height:        68px;
  border-radius: 50%;
  background:    var(--hse-white);
  box-shadow:    0 4px 20px rgba(232,54,61,0.4), var(--hse-shadow);
  padding:       3px;
  animation:     hse-pulse 3s ease-in-out infinite;
}
.hse-avatar-bubble img {
  width:100%; height:100%;
  border-radius:50%; object-fit:cover;
  border:3px solid var(--hse-primary);
  display:block;
}
.hse-avatar-label {
  background:    var(--hse-primary);
  color:         var(--hse-white);
  font-size:     11px;
  font-weight:   600;
  padding:       4px 10px;
  border-radius: 20px;
  white-space:   nowrap;
  box-shadow:    0 2px 8px rgba(232,54,61,0.35);
  letter-spacing:0.3px;
}
.hse-avatar-badge {
  position:absolute; top:2px; right:2px;
  background:#FF4444; color:var(--hse-white);
  font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--hse-white);
  animation:hse-badge-bounce 1s ease-in-out infinite;
}
.hse-avatar-badge.hse-hidden { display:none; }

/* ── PANEL DEL CHAT ────────────────────────────────────── */
#hse-chat-panel {
  position:       absolute;
  bottom:         90px;
  width:          360px;
  max-height:     570px;
  background:     var(--hse-white);
  border-radius:  var(--hse-radius);
  box-shadow:     var(--hse-shadow);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  opacity:        0;
  transform:      translateY(20px) scale(0.95);
  pointer-events: none;
  transition:     opacity var(--hse-anim-speed) ease,
                  transform var(--hse-anim-speed) ease;
  border:         1px solid var(--hse-border);
}
#hse-avatar-wrapper.hse-bottom-right #hse-chat-panel { right:0; }
#hse-avatar-wrapper.hse-bottom-left  #hse-chat-panel { left:0; }

#hse-chat-panel.hse-open {
  opacity:1; transform:translateY(0) scale(1); pointer-events:all;
}

/* ── HEADER ────────────────────────────────────────────── */
.hse-chat-header {
  background:  linear-gradient(135deg, var(--hse-primary) 0%, var(--hse-primary-dark) 100%);
  padding:     14px 16px;
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-shrink: 0;
}
.hse-header-avatar { position:relative; flex-shrink:0; }
.hse-header-avatar img {
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,0.7);
  transition:transform 0.2s ease;
}
.hse-header-avatar img.hse-talking {
  animation:hse-avatar-talk 0.4s ease-in-out infinite alternate;
}
.hse-status-dot {
  position:absolute; bottom:2px; right:2px;
  width:10px; height:10px; background:#44cc77;
  border-radius:50%; border:2px solid var(--hse-primary);
  animation:hse-status-pulse 2s ease-in-out infinite;
}
.hse-header-info { flex:1; min-width:0; }
.hse-header-info strong {
  display:block; color:var(--hse-white); font-size:14px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hse-header-info small { color:rgba(255,255,255,0.82); font-size:11px; }
.hse-header-actions { display:flex; gap:4px; flex-shrink:0; }
.hse-header-actions button {
  background:rgba(255,255,255,0.2); border:none; color:var(--hse-white);
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease; line-height:1;
}
.hse-header-actions button:hover { background:rgba(255,255,255,0.35); }

/* ── MENSAJES ──────────────────────────────────────────── */
#hse-messages {
  flex:1; overflow-y:auto;
  padding:16px; display:flex; flex-direction:column;
  gap:12px; background:#f9fafb; scroll-behavior:smooth;
}
#hse-messages::-webkit-scrollbar { width:4px; }
#hse-messages::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; }

.hse-msg { display:flex; gap:8px; max-width:85%; animation:hse-msg-in 0.3s ease-out; }
.hse-msg.hse-bot  { align-self:flex-start; }
.hse-msg.hse-user { align-self:flex-end; flex-direction:row-reverse; }

.hse-msg-avatar {
  width:32px; height:32px; border-radius:50%;
  object-fit:cover; flex-shrink:0; align-self:flex-end;
  border:2px solid var(--hse-primary-light);
}
.hse-msg-content { display:flex; flex-direction:column; gap:4px; }
.hse-msg-bubble {
  padding:10px 14px; border-radius:14px;
  font-size:13.5px; color:var(--hse-text); line-height:1.55; word-break:break-word;
}
.hse-msg.hse-bot .hse-msg-bubble {
  background:var(--hse-white); border:1px solid var(--hse-border);
  border-bottom-left-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.hse-msg.hse-user .hse-msg-bubble {
  background:var(--hse-primary); color:var(--hse-white);
  border-bottom-right-radius:4px; box-shadow:0 2px 8px rgba(232,54,61,0.3);
}
.hse-msg-time { font-size:10px; color:var(--hse-text-light); padding:0 4px; }
.hse-msg.hse-user .hse-msg-time { text-align:right; }
.hse-msg-bubble a { color:var(--hse-primary); text-decoration:underline; font-weight:600; }
.hse-msg.hse-user .hse-msg-bubble a { color:rgba(255,255,255,0.9); }
.hse-action-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.hse-action-link {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--hse-primary); color:var(--hse-white) !important;
  text-decoration:none !important; padding:6px 12px; border-radius:20px;
  font-size:12px; font-weight:600;
  transition:background 0.2s ease,transform 0.15s ease;
}
.hse-action-link:hover { background:var(--hse-primary-dark); transform:translateY(-1px); }

/* ── TYPING ────────────────────────────────────────────── */
.hse-typing-indicator {
  display:flex; align-items:center; gap:4px;
  padding:10px 14px; background:var(--hse-white);
  border:1px solid var(--hse-border); border-radius:14px;
  border-bottom-left-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,0.06);
  width:fit-content;
}
.hse-typing-dot {
  width:7px; height:7px; background:var(--hse-primary);
  border-radius:50%; animation:hse-typing 1.2s ease-in-out infinite;
}
.hse-typing-dot:nth-child(2) { animation-delay:0.2s; }
.hse-typing-dot:nth-child(3) { animation-delay:0.4s; }

/* ── SUGERENCIAS ───────────────────────────────────────── */
/* ── SUGGESTION BUTTONS – estilo v1 (pill grande, outlined) ── */
#hse-suggestions {
  padding:10px 14px 12px; display:flex; flex-direction:column; gap:7px;
  background:var(--hse-white); border-top:1px solid var(--hse-border);
}
#hse-suggestions:empty { padding:0; border:none; }
.hse-suggestion-btn {
  background: transparent;
  border: 2px solid var(--hse-primary);
  color: var(--hse-primary);
  padding: 9px 16px;
  border-radius: 24px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  font-family: var(--hse-font);
  text-align: left;
  width: 100%;
}
.hse-suggestion-btn:hover {
  background: var(--hse-primary);
  color: var(--hse-white);
  box-shadow: 0 3px 10px rgba(232,54,61,0.35);
  /* SIN transform para no desplazar el botón */
}

/* ── INPUT ─────────────────────────────────────────────── */
.hse-chat-input-area {
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; background:var(--hse-white);
  border-top:1px solid var(--hse-border); flex-shrink:0;
}
#hse-user-input {
  flex:1; border:1.5px solid var(--hse-border); border-radius:24px;
  padding:9px 16px; font-size:13.5px; font-family:var(--hse-font);
  color:var(--hse-text); outline:none;
  transition:border-color 0.2s ease,box-shadow 0.2s ease;
  background:var(--hse-gray);
}
#hse-user-input:focus {
  border-color:var(--hse-primary);
  box-shadow:0 0 0 3px var(--hse-primary-light);
  background:var(--hse-white);
}
#hse-user-input:disabled { opacity:0.6; cursor:not-allowed; }
#hse-send-btn {
  background:var(--hse-primary); border:none; color:var(--hse-white);
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background 0.2s ease,transform 0.15s ease;
  box-shadow:0 2px 8px rgba(232,54,61,0.35);
}
#hse-send-btn:hover    { background:var(--hse-primary-dark); transform:scale(1.05); }
#hse-send-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

/* ── FOOTER ────────────────────────────────────────────── */
.hse-chat-footer { text-align:center; padding:6px 12px 8px; background:var(--hse-white); border-top:1px solid var(--hse-border); }
.hse-chat-footer a { color:var(--hse-text-light); font-size:10px; text-decoration:none; }
.hse-chat-footer a:hover { color:var(--hse-primary); }

/* ── ERROR ─────────────────────────────────────────────── */
.hse-msg-error .hse-msg-bubble { background:#fff5f5; border-color:#ffc5c5; color:#c53030; }

/* ═══════════════════════════════════════════════════════════
   MENÚ DE SERVICIOS EN CÍRCULOS
═══════════════════════════════════════════════════════════ */
#hse-services-overlay {
  position:   absolute;
  top:        0; left:0; right:0; bottom:0;
  background: rgba(255,255,255,0.97);
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index:    10;
  opacity:    0;
  transition: opacity 0.3s ease;
  overflow:   hidden;
}
#hse-services-overlay.hse-svc-visible { opacity:1; }

.hse-svc-wrap {
  position: relative;
  width:    280px;
  height:   280px;
  display:  flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Avatar central */
.hse-svc-center {
  position:       relative;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
}
.hse-svc-center img {
  width:         72px;
  height:        72px;
  border-radius: 50%;
  object-fit:    cover;
  border:        4px solid var(--hse-primary);
  box-shadow:    0 4px 16px rgba(232,54,61,0.35);
}
.hse-svc-center span {
  font-size:   11px;
  font-weight: 700;
  color:       var(--hse-primary);
}

/* Nodos de servicio */
.hse-svc-node {
  position:         absolute;
  top:              50%;
  left:             50%;
  width:            64px;
  height:           64px;
  margin-top:       -32px;
  margin-left:      -32px;
  border-radius:    50%;
  background:       var(--hse-white);
  border:           2px solid var(--hse-primary);
  box-shadow:       0 3px 12px rgba(232,54,61,0.2);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  text-decoration:  none;
  cursor:           pointer;
  transition:       background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  animation:        hse-node-in 0.4s ease-out both;
  gap:              2px;
  padding:          4px;
}
.hse-svc-node:hover {
  background:   var(--hse-primary);
  box-shadow:   0 0 0 4px rgba(232,54,61,0.25), 0 6px 18px rgba(232,54,61,0.4);
  /* NO transform/translate — para no mover el nodo e impedir el clic */
}
.hse-svc-node:hover .hse-svc-icon,
.hse-svc-node:hover .hse-svc-label { color: var(--hse-white); }

/* Stagger delay para los 8 nodos */
.hse-svc-node:nth-child(2)  { animation-delay: 0.05s; }
.hse-svc-node:nth-child(3)  { animation-delay: 0.10s; }
.hse-svc-node:nth-child(4)  { animation-delay: 0.15s; }
.hse-svc-node:nth-child(5)  { animation-delay: 0.20s; }
.hse-svc-node:nth-child(6)  { animation-delay: 0.25s; }
.hse-svc-node:nth-child(7)  { animation-delay: 0.30s; }
.hse-svc-node:nth-child(8)  { animation-delay: 0.35s; }
.hse-svc-node:nth-child(9)  { animation-delay: 0.40s; }

.hse-svc-icon  { font-size:20px; line-height:1; }
.hse-svc-label { font-size:7.5px; font-weight:700; color:var(--hse-text); text-align:center; line-height:1.2; }

/* Líneas decorativas desde el centro */
.hse-svc-wrap::before {
  content:      '';
  position:     absolute;
  top:          50%; left:50%;
  width:        220px; height:220px;
  margin-top:   -110px; margin-left:-110px;
  border:       1.5px dashed rgba(232,54,61,0.2);
  border-radius:50%;
  pointer-events:none;
}

/* Botón cerrar servicios */
#hse-svc-close {
  margin-top:   12px;
  background:   transparent;
  border:       1.5px solid var(--hse-border);
  color:        var(--hse-text-light);
  padding:      6px 16px;
  border-radius:20px;
  cursor:       pointer;
  font-size:    12px;
  transition:   all 0.2s ease;
  flex-shrink:  0;
}
#hse-svc-close:hover { border-color:var(--hse-primary); color:var(--hse-primary); }

/* ── GUÍA VISUAL – resaltado de menú ───────────────────── */
a.hse-nav-highlight {
  outline:        3px solid var(--hse-primary) !important;
  outline-offset: 4px !important;
  border-radius:  4px !important;
  animation:      hse-nav-glow 0.8s ease-in-out infinite alternate !important;
  position:       relative !important;
  z-index:        99998 !important;
}

.hse-nav-tooltip {
  position:     fixed;
  background:   var(--hse-primary);
  color:         #fff;
  font-family:  var(--hse-font);
  font-size:    13px;
  font-weight:  700;
  padding:      8px 14px;
  border-radius:24px;
  box-shadow:   0 4px 16px rgba(232,54,61,0.45);
  z-index:      99998;
  pointer-events:all;
  white-space:  nowrap;
  display:      flex;
  align-items:  center;
  gap:          8px;
  animation:    hse-msg-in 0.3s ease-out;
}
.hse-nav-tooltip::before {
  content:      '';
  position:     absolute;
  top:          -7px; left:50%;
  transform:    translateX(-50%);
  border:       7px solid transparent;
  border-bottom-color: var(--hse-primary);
  border-top:   none;
}
.hse-nav-tooltip-close {
  cursor:      pointer;
  opacity:     0.7;
  font-size:   11px;
  line-height: 1;
  transition:  opacity 0.2s;
}
.hse-nav-tooltip-close:hover { opacity:1; }

@keyframes hse-nav-glow {
  from { outline-color: var(--hse-primary);      box-shadow: none; }
  to   { outline-color: var(--hse-primary-dark); box-shadow: 0 0 12px rgba(232,54,61,0.5); }
}

/* ── ANIMACIONES ───────────────────────────────────────── */
@keyframes hse-pulse {
  0%,100% { box-shadow:0 4px 20px rgba(232,54,61,0.4),0 8px 32px rgba(0,0,0,0.18); }
  50%      { box-shadow:0 6px 28px rgba(232,54,61,0.65),0 8px 32px rgba(0,0,0,0.18); }
}
@keyframes hse-badge-bounce {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.2); }
}
@keyframes hse-typing {
  0%,100% { transform:translateY(0);    opacity:0.4; }
  50%      { transform:translateY(-5px); opacity:1; }
}
@keyframes hse-msg-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes hse-avatar-talk {
  from { transform:scale(1);    filter:brightness(1);    }
  to   { transform:scale(1.04); filter:brightness(1.05); }
}
@keyframes hse-status-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(68,204,119,0.6); }
  50%      { box-shadow:0 0 0 4px rgba(68,204,119,0);  }
}
@keyframes hse-node-in {
  from { opacity:0; transform:translate(0,0) scale(0.5) !important; }
  to   { opacity:1; }
}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 480px) {
  #hse-avatar-wrapper.hse-bottom-right,
  #hse-avatar-wrapper.hse-bottom-left {
    bottom:12px; right:12px; left:auto;
  }
  #hse-chat-panel {
    width:calc(100vw - 24px); max-height:72vh;
    right:0 !important; left:auto !important; bottom:80px;
  }
  .hse-svc-wrap { width:240px; height:240px; }
  .hse-svc-node { width:54px; height:54px; margin-top:-27px; margin-left:-27px; }
}


/* Variables CSS */
:root {
  --hse-primary:      #E8363D;
  --hse-primary-dark: #c02a30;
  --hse-primary-light:#fde8e9;
  --hse-dark:         #1a1a2e;
  --hse-gray:         #f4f6f8;
  --hse-border:       #e0e4ea;
  --hse-text:         #2d3748;
  --hse-text-light:   #718096;
  --hse-white:        #ffffff;
  --hse-shadow:       0 8px 32px rgba(0,0,0,0.18);
  --hse-radius:       18px;
  --hse-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hse-anim-speed:   0.3s;
  --hse-z:            99999;
}

/* ──────────────────────────────────────────────────────────
   CONTENEDOR PRINCIPAL
────────────────────────────────────────────────────────── */
#hse-avatar-wrapper {
  position: fixed;
  z-index: var(--hse-z);
  font-family: var(--hse-font);
  line-height: 1.5;
}

#hse-avatar-wrapper.hse-bottom-right {
  bottom: 24px;
  right:  24px;
}

#hse-avatar-wrapper.hse-bottom-left {
  bottom: 24px;
  left:   24px;
}

/* ──────────────────────────────────────────────────────────
   BOTÓN FLOTANTE
────────────────────────────────────────────────────────── */
#hse-avatar-toggle {
  background:    none;
  border:        none;
  cursor:        pointer;
  padding:       0;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           6px;
  transition:    transform var(--hse-anim-speed) ease;
  outline:       none;
}

#hse-avatar-toggle:hover {
  transform: scale(1.06) translateY(-2px);
}

#hse-avatar-toggle:focus-visible {
  outline: 3px solid var(--hse-primary);
  outline-offset: 4px;
  border-radius: 50%;
}

.hse-avatar-bubble {
  position:      relative;
  width:         68px;
  height:        68px;
  border-radius: 50%;
  background:    var(--hse-white);
  box-shadow:    0 4px 20px rgba(232,54,61,0.4), var(--hse-shadow);
  padding:       3px;
  animation:     hse-pulse 3s ease-in-out infinite;
}

.hse-avatar-bubble img {
  width:         100%;
  height:        100%;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--hse-primary);
  display:       block;
}

.hse-avatar-label {
  background:    var(--hse-primary);
  color:         var(--hse-white);
  font-size:     11px;
  font-weight:   600;
  padding:       4px 10px;
  border-radius: 20px;
  white-space:   nowrap;
  box-shadow:    0 2px 8px rgba(232,54,61,0.35);
  letter-spacing:0.3px;
}

/* Punto de notificación */
.hse-avatar-badge {
  position:      absolute;
  top:           2px;
  right:         2px;
  background:    #FF4444;
  color:         var(--hse-white);
  font-size:     10px;
  font-weight:   700;
  width:         18px;
  height:        18px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content:center;
  border:        2px solid var(--hse-white);
  animation:     hse-badge-bounce 1s ease-in-out infinite;
}

.hse-avatar-badge.hse-hidden {
  display: none;
}

/* ──────────────────────────────────────────────────────────
   PANEL DEL CHAT
────────────────────────────────────────────────────────── */
#hse-chat-panel {
  position:       absolute;
  bottom:         90px;
  width:          360px;
  max-height:     560px;
  background:     var(--hse-white);
  border-radius:  var(--hse-radius);
  box-shadow:     var(--hse-shadow);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  opacity:        0;
  transform:      translateY(20px) scale(0.95);
  pointer-events: none;
  transition:     opacity var(--hse-anim-speed) ease,
                  transform var(--hse-anim-speed) ease;
  border:         1px solid var(--hse-border);
}

/* Posicionamiento según lado */
#hse-avatar-wrapper.hse-bottom-right #hse-chat-panel {
  right: 0;
}

#hse-avatar-wrapper.hse-bottom-left #hse-chat-panel {
  left: 0;
}

#hse-chat-panel.hse-open {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: all;
}

/* ──────────────────────────────────────────────────────────
   ENCABEZADO DEL CHAT
────────────────────────────────────────────────────────── */
.hse-chat-header {
  background:     linear-gradient(135deg, var(--hse-primary) 0%, var(--hse-primary-dark) 100%);
  padding:        14px 16px;
  display:        flex;
  align-items:    center;
  gap:            12px;
  flex-shrink:    0;
}

.hse-header-avatar {
  position:       relative;
  flex-shrink:    0;
}

.hse-header-avatar img {
  width:          44px;
  height:         44px;
  border-radius:  50%;
  object-fit:     cover;
  border:         2px solid rgba(255,255,255,0.7);
  transition:     transform 0.2s ease;
}

/* Avatar hablando */
.hse-header-avatar img.hse-talking {
  animation: hse-avatar-talk 0.4s ease-in-out infinite alternate;
}

.hse-status-dot {
  position:       absolute;
  bottom:         2px;
  right:          2px;
  width:          10px;
  height:         10px;
  background:     #44cc77;
  border-radius:  50%;
  border:         2px solid var(--hse-primary);
  animation:      hse-status-pulse 2s ease-in-out infinite;
}

.hse-header-info {
  flex:           1;
  min-width:      0;
}

.hse-header-info strong {
  display:        block;
  color:          var(--hse-white);
  font-size:      14px;
  font-weight:    700;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.hse-header-info small {
  color:          rgba(255,255,255,0.82);
  font-size:      11px;
}

.hse-header-actions {
  display:        flex;
  gap:            4px;
  flex-shrink:    0;
}

.hse-header-actions button {
  background:     rgba(255,255,255,0.2);
  border:         none;
  color:          var(--hse-white);
  width:          30px;
  height:         30px;
  border-radius:  50%;
  cursor:         pointer;
  font-size:      14px;
  display:        flex;
  align-items:    center;
  justify-content:center;
  transition:     background 0.2s ease;
  line-height:    1;
}

.hse-header-actions button:hover {
  background: rgba(255,255,255,0.35);
}

/* ──────────────────────────────────────────────────────────
   ÁREA DE MENSAJES
────────────────────────────────────────────────────────── */
#hse-messages {
  flex:           1;
  overflow-y:     auto;
  padding:        16px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
  background:     #f9fafb;
  scroll-behavior:smooth;
}

#hse-messages::-webkit-scrollbar {
  width: 4px;
}
#hse-messages::-webkit-scrollbar-track {
  background: transparent;
}
#hse-messages::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}

/* Burbuja de mensaje */
.hse-msg {
  display:        flex;
  gap:            8px;
  max-width:      85%;
  animation:      hse-msg-in 0.3s ease-out;
}

.hse-msg.hse-bot {
  align-self:     flex-start;
}

.hse-msg.hse-user {
  align-self:     flex-end;
  flex-direction: row-reverse;
}

.hse-msg-avatar {
  width:          32px;
  height:         32px;
  border-radius:  50%;
  object-fit:     cover;
  flex-shrink:    0;
  align-self:     flex-end;
  border:         2px solid var(--hse-primary-light);
}

.hse-msg-content {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.hse-msg-bubble {
  padding:        10px 14px;
  border-radius:  14px;
  font-size:      13.5px;
  color:          var(--hse-text);
  line-height:    1.55;
  word-break:     break-word;
}

.hse-msg.hse-bot .hse-msg-bubble {
  background:     var(--hse-white);
  border:         1px solid var(--hse-border);
  border-bottom-left-radius: 4px;
  box-shadow:     0 1px 4px rgba(0,0,0,0.06);
}

.hse-msg.hse-user .hse-msg-bubble {
  background:     var(--hse-primary);
  color:          var(--hse-white);
  border-bottom-right-radius: 4px;
  box-shadow:     0 2px 8px rgba(232,54,61,0.3);
}

.hse-msg-time {
  font-size:      10px;
  color:          var(--hse-text-light);
  padding:        0 4px;
}

.hse-msg.hse-user .hse-msg-time {
  text-align: right;
}

/* Links dentro de mensajes */
.hse-msg-bubble a {
  color:          var(--hse-primary);
  text-decoration:underline;
  font-weight:    600;
}

.hse-msg.hse-user .hse-msg-bubble a {
  color: rgba(255,255,255,0.9);
}

/* Botones de acción dentro de mensajes */
.hse-action-links {
  display:        flex;
  flex-wrap:      wrap;
  gap:            6px;
  margin-top:     8px;
}

.hse-action-link {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  background:     var(--hse-primary);
  color:          var(--hse-white) !important;
  text-decoration:none !important;
  padding:        6px 12px;
  border-radius:  20px;
  font-size:      12px;
  font-weight:    600;
  transition:     background 0.2s ease, transform 0.15s ease;
  border:         none;
  cursor:         pointer;
}

.hse-action-link:hover {
  background:     var(--hse-primary-dark);
  transform:      translateY(-1px);
}

/* ──────────────────────────────────────────────────────────
   INDICADOR "ESCRIBIENDO..."
────────────────────────────────────────────────────────── */
.hse-typing-indicator {
  display:        flex;
  align-items:    center;
  gap:            4px;
  padding:        10px 14px;
  background:     var(--hse-white);
  border:         1px solid var(--hse-border);
  border-radius:  14px;
  border-bottom-left-radius: 4px;
  box-shadow:     0 1px 4px rgba(0,0,0,0.06);
  width:          fit-content;
}

.hse-typing-dot {
  width:          7px;
  height:         7px;
  background:     var(--hse-primary);
  border-radius:  50%;
  animation:      hse-typing 1.2s ease-in-out infinite;
}

.hse-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.hse-typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* ──────────────────────────────────────────────────────────
   SUGERENCIAS RÁPIDAS
────────────────────────────────────────────────────────── */
#hse-suggestions {
  padding:        8px 12px;
  display:        flex;
  flex-wrap:      wrap;
  gap:            6px;
  background:     var(--hse-white);
  border-top:     1px solid var(--hse-border);
  min-height:     0;
  transition:     min-height 0.2s ease;
}

#hse-suggestions:empty {
  padding:  0;
  border:   none;
}

.hse-suggestion-btn {
  background:     transparent;
  border:         1.5px solid var(--hse-primary);
  color:          var(--hse-primary);
  padding:        5px 12px;
  border-radius:  20px;
  font-size:      12px;
  font-weight:    600;
  cursor:         pointer;
  transition:     all 0.2s ease;
  white-space:    nowrap;
  font-family:    var(--hse-font);
}

.hse-suggestion-btn:hover {
  background:     var(--hse-primary);
  color:          var(--hse-white);
  transform:      translateY(-1px);
}

/* ──────────────────────────────────────────────────────────
   ÁREA DE INPUT
────────────────────────────────────────────────────────── */
.hse-chat-input-area {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        12px 14px;
  background:     var(--hse-white);
  border-top:     1px solid var(--hse-border);
  flex-shrink:    0;
}

#hse-user-input {
  flex:           1;
  border:         1.5px solid var(--hse-border);
  border-radius:  24px;
  padding:        9px 16px;
  font-size:      13.5px;
  font-family:    var(--hse-font);
  color:          var(--hse-text);
  outline:        none;
  transition:     border-color 0.2s ease, box-shadow 0.2s ease;
  background:     var(--hse-gray);
}

#hse-user-input:focus {
  border-color: var(--hse-primary);
  box-shadow:   0 0 0 3px var(--hse-primary-light);
  background:   var(--hse-white);
}

#hse-user-input::placeholder {
  color: var(--hse-text-light);
}

#hse-user-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#hse-send-btn {
  background:     var(--hse-primary);
  border:         none;
  color:          var(--hse-white);
  width:          40px;
  height:         40px;
  border-radius:  50%;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content:center;
  flex-shrink:    0;
  transition:     background 0.2s ease, transform 0.15s ease;
  box-shadow:     0 2px 8px rgba(232,54,61,0.35);
}

#hse-send-btn:hover {
  background:   var(--hse-primary-dark);
  transform:    scale(1.05);
}

#hse-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ──────────────────────────────────────────────────────────
   PIE DEL CHAT
────────────────────────────────────────────────────────── */
.hse-chat-footer {
  text-align:     center;
  padding:        6px 12px 8px;
  background:     var(--hse-white);
  border-top:     1px solid var(--hse-border);
}

.hse-chat-footer a {
  color:          var(--hse-text-light);
  font-size:      10px;
  text-decoration:none;
  letter-spacing: 0.3px;
}

.hse-chat-footer a:hover {
  color: var(--hse-primary);
}

/* ──────────────────────────────────────────────────────────
   MENSAJE DE ERROR
────────────────────────────────────────────────────────── */
.hse-msg-error .hse-msg-bubble {
  background:  #fff5f5;
  border-color:#ffc5c5;
  color:       #c53030;
}

/* ──────────────────────────────────────────────────────────
   ANIMACIONES
────────────────────────────────────────────────────────── */
@keyframes hse-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(232,54,61,0.4), 0 8px 32px rgba(0,0,0,0.18); }
  50%       { box-shadow: 0 6px 28px rgba(232,54,61,0.65), 0 8px 32px rgba(0,0,0,0.18); }
}

@keyframes hse-badge-bounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

@keyframes hse-typing {
  0%, 100% { transform: translateY(0);    opacity: 0.4; }
  50%       { transform: translateY(-5px); opacity: 1;   }
}

@keyframes hse-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes hse-avatar-talk {
  from { transform: scale(1);    filter: brightness(1);   }
  to   { transform: scale(1.04); filter: brightness(1.05); }
}

@keyframes hse-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(68,204,119,0.6); }
  50%       { box-shadow: 0 0 0 4px rgba(68,204,119,0);  }
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE – MÓVILES
────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #hse-avatar-wrapper.hse-bottom-right,
  #hse-avatar-wrapper.hse-bottom-left {
    bottom: 12px;
    right:  12px;
    left:   auto;
  }

  #hse-chat-panel {
    width:      calc(100vw - 24px);
    max-height: 70vh;
    right:      0 !important;
    left:       auto !important;
    bottom:     80px;
  }
}