.message-input {
    width: 100%;
    border: 1px solid var(--ion-color-medium);
    border-radius: 6px;
    resize: none;
    margin-top: 0px;
    --padding-start: 10px;
}

@keyframes slide-top {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0%);
    }
  }
  
  .slide-top {
      animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }
  
  
  
 
.message {
    padding: 10px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    white-space: pre-wrap;
    
}
 
.my-message {
    background: var(--ion-color-tertiary);
    color: #fff;
    animation-name: slide-top;
    animation-duration: 0.5s;
}
 
.other-message {
    background: var(--ion-color-secondary);
    color: #fff;
    animation-name: slide-top;
    animation-duration: 0.6s;
}
 
.time {
    color: #dfdfdf;
    float: right;
    font-size: small;
}

ion-skeleton-text {
    --background: rgba(0, 98, 255, 0.259);
  }
  
.message-list {
    padding: 10px;
}

.message {
    margin-bottom: 10px;
    display: flex;
}

.my-message {
    justify-content: flex-end;
}

.other-message {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 70%;
    padding: 10px;
    border-radius: 10px;
}

.my-message .message-bubble {
    background-color: #dcf8c6;
}

.other-message .message-bubble {
    background-color: #ffffff;
}

.message-text {
    margin: 0;
}

.message-time {
    font-size: 0.8em;
    color: #888;
    text-align: right;
    margin-top: 5px;
}

.no-messages {
    text-align: center;
    color: #888;
    padding: 20px;
}
