/**
 * Telegram-style bubble tail. Сливается с фоном bubble и отбрасывает ту же
 * тень. Используем filter: drop-shadow на родителе, чтобы тень повторяла
 * силуэт bubble+tail без разрыва на стыке.
 */
const TelegramBubbleTail = ({ isOut }: { isOut: boolean }) => {
  const fill = isOut ? 'var(--tg-bubble-out)' : 'var(--tg-bubble-in)';
  const d = isOut
    ? 'M0 0 L11 0 C11 9, 7 16, 0 17 Z'
    : 'M11 0 L0 0 C0 9, 4 16, 11 17 Z';
  return (
    <svg
      className={`absolute -bottom-px pointer-events-none ${
        isOut ? '-right-[10px]' : '-left-[10px]'
      }`}
      width="11"
      height="17"
      viewBox="0 0 11 17"
      aria-hidden
    >
      <path d={d} fill={fill} />
    </svg>
  );
};

export default TelegramBubbleTail;
