.textarea-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 500px;
  }
  
  textarea.textarea-wrapper {
    width: 100%;
    padding: 10px;
    /* Add extra padding at bottom to prevent text from overlapping the counter */
    padding-bottom: 30px; 
    box-sizing: border-box;
    resize: vertical;
  }
  
  .counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: #666;
    background: white; /* Optional: ensures readability over text */
    padding: 0 4px;
  }

  .counter2 {
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: #666;
    background: white; /* Optional: ensures readability over text */
    padding: 0 4px;
  }
  
  .max-reached {
    color: red;
    font-weight: bold;
  }
  
.whatsapp-body {
    background-image: url('https://shane.radar.sh/assets/app/img/Radar_doodle.jpg');

    height: 400px;
    width: 300px;
    /* The magic property */
    background-size: cover; 
    
    /* Optional: Center the image and prevent tiling */
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
}
.whatsapp-message-body {
    border-radius: .5rem;
    background-color: #FFF;
    margin-right: 20px;
    font-size: 13px;
    margin-bottom: 1px;
}

.whatsapp-message-wrapper {
    padding: 10px;
    position: relative;
}

.whatsapp-message-header {
    font-weight: bold;
}

.whatsapp-message-content {
    margin-top: 10px;
    overflow-wrap: break-word; /* Modern standard */
    word-wrap: break-word;     /* For legacy browser support */
    margin-bottom: 5px;
    margin-right: 20px;
}

.whatsapp-message-footer {
    margin-top: 10px;
    color: gray;
}

.whatsapp-delivery-time {
    bottom: 3px;
    color: rgba(0, 0, 0, 0.4);
    direction: ltr;
    font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
    font-size: 11px;
    height: 15px;
    line-height: 15px;
    position: absolute;
    right: 7px;
}

.whatsapp-button {
    align-items: center;
    color: #1b8755;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    border-top: 1px gray solid;
}

.drag-button {
  cursor: grab;
}

.drag-button:active {
  cursor: grabbing;
}