CSS box-shadow with transparent background and pseudo elements

Question

I have a div that i would like to look like a speech bubble with a box shadow around. Currently it looks like this:

problem is i cannot figure out how to add the shadow to the psuedo element "tail". Is this even possible? If i add box-shadow to the pseudo element, it looks like this which is certainly not i want:

I would really appreciate any guidance on this. Thanks

JS Fiddle

Code:

#container {
  height: 500px;
  background-color: #Febb68;
  padding: 30px;
}
#bubble {
  height: 200px;
  width: 200px;
  padding: 50px 60px 0;
  position: relative;
  z-index: 10;
  border-radius: 30px 0;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 10px 1px #944;
  margin-bottom: 55px;
}
#bubble:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: 85px solid rgba(255, 255, 255, 0.85);
  border-right: 85px solid transparent;
  border-left: 0px solid transparent;
}

<div id='container'>
  <div id='bubble'>
    ABC
  </div>
</div>

Edit: This question is different from CSS Speech Bubble with Box Shadow as the background in this case is transparent( this cannot be changed as the final background is an image and not a solid color) and the pointer slopes on one side only. This is how the solution to that question looks like with transparent background: http://jsfiddle.net/mek5Z/2140/

Answer 1

I have successfully got this result, but it needs to be optimized:

<div id='bubble' class="filter-drop-shadow">

.filter-drop-shadow {
    -webkit-filter: drop-shadow( 0 10px 1px #944);
    -moz-filter: drop-shadow(0 10px 1px #944);
    filter: drop-shadow(0 10px 1px #944);
    }

fiddle