/* ====== Contenedor base ====== */
#ufw-root{
  position:fixed; z-index:999999; bottom:20px; right:20px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
}
#ufw-root.ufw-left{ left:20px; right:auto; }

/* ====== Botón (pill) rojo con pulso ====== */
.ufw-pill{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  background:#e10600;   /* rojo principal */
  color:#fff; border-radius:999px; padding:12px 16px;
  box-shadow:0 12px 28px rgba(225,6,0,.35);
  cursor:pointer; user-select:none;
  overflow:visible;
}
.ufw-pill .ufw-logo{ width:28px; height:28px; border-radius:50%; background:#fff; object-fit:cover; }
.ufw-pill .ufw-label{ font-weight:800; font-size:14px; letter-spacing:.1px; }

/* Efecto de onda / pulse */
.ufw-pill::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:rgba(225,6,0,.35);
  transform:scale(1); opacity:.8; pointer-events:none;
  animation:ufw-pulse 2s ease-out infinite;
}
@keyframes ufw-pulse{
  0%{ transform:scale(1); opacity:.6; }
  70%{ transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1.7); opacity:0; }
}

/* ====== Panel / Tarjeta ====== */
.ufw-card{
  position:absolute; bottom:74px; right:0; width:320px;
  background:#fff; color:#111; border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  overflow:hidden; transform:translateY(10px); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#ufw-root.ufw-left .ufw-card{ left:0; right:auto; }
.ufw-card.open{ opacity:1; transform:translateY(0); pointer-events:auto; }

.ufw-card-header{
  padding:10px 12px; background:#0b0b0b; color:#fff;
  display:flex; align-items:center; justify-content:space-between;
}
.ufw-card-header .ufw-badge{
  background:#1a73e8; color:#fff; font-weight:800; font-size:12px;
  padding:4px 8px; border-radius:6px;
}
.ufw-card-header .ufw-close{ cursor:pointer; opacity:.9; font-weight:700; }

.ufw-card-body{ padding:14px 14px 6px 14px; font-size:14px; line-height:1.45; }
.ufw-card-greeting{ margin:6px 0 12px; color:#222; font-weight:600; }

/* Opción de agente */
.ufw-agent{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin-bottom:10px; border-radius:10px;
  border:1px solid #eee; cursor:pointer;
  transition:box-shadow .15s ease, transform .05s ease;
}
.ufw-agent:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
.ufw-agent:active{ transform:scale(.99); }

.ufw-agent .avatar{ width:40px; height:40px; border-radius:50%; overflow:hidden; background:#f3f3f3; display:grid; place-items:center; }
.ufw-agent .avatar img{ width:100%; height:100%; object-fit:cover; }
.ufw-agent .meta{ display:flex; flex-direction:column; }
.ufw-agent .name{ font-weight:700; font-size:14px; }
.ufw-agent .role{ font-size:12px; color:#666; }

/* Resaltado del que atiende en esta vista */
.ufw-agent.featured{ outline:2px solid #e10600; }

/* Responsive */
@media (max-width:420px){ .ufw-card{ width:92vw; } }