.cfb-morph {
  position: relative;
  display: inline-block;
  height: 52px;
}
.cfb-morph input {
  width: 52px; height: 52px;
  padding: 0 16px 0 48px;
  border: 0; outline: none;
  background: linear-gradient(135deg, #2eb88a, #06b6d4);
  border-radius: 26px;
  color: #fff;
  font: 500 14px/52px system-ui, sans-serif;
  box-shadow: 0 6px 16px rgba(46,184,138,0.35);
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.65,0,0.35,1), padding 0.4s, background 0.3s;
}
.cfb-morph input::placeholder { color: rgba(255,255,255,0.7); }
.cfb-morph:hover input,
.cfb-morph input:focus { width: 240px; cursor: text; }
.cfb-morph-icon {
  position: absolute; top: 50%; left: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.cfb-morph-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }