.chat-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  height: calc(3 * var(--msg-height, 50px));
  overflow: hidden;
}
.chat-window {
  display: flex;
  flex-direction: column;
    gap: 10px;
  transform: translateY(0);
  transition: transform 0.6s ease-in-out;
}

    .message {
      font-size:12px;
      line-height:17px;
      padding:2px;
      border-radius: 25px;
	  background:white;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.4s ease;
      max-width: 100%;
    }
	img.left-icon,img.right-icon{
		width: 32px;
	}
    .left {align-self: flex-start;}

    .right {align-self: flex-end;}
.msg-txt{padding:0 20px;}
 .message.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .message.flex-left {
  display: flex;
  padding:4px;
  align-items: flex-end; /* Align items at bottom */
}
.message.flex-right{
  display: flex;
  padding:4px;
  align-items: flex-end; /* Align items at bottom */
}

.message.flex-right .msg-txt{padding:0 17px}
.message.flex-left .msg-txt{padding:0 10px}

.chat-container {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  flex-direction: column;  /* stack messages vertically */
  height: 100%;            /* ensure full-height container */
}

.message {
  display: flex;
  align-items: center;     /* vertically center icon + text */
  justify-content: center; /* horizontally center children if needed */
}