.chat-container {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 20px;
}

.chat-header {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.message-content {
    word-wrap: break-word;
}

.name-timestamp {
    font-weight: 600;
}

.chat-messages {
    height: 310px;
    overflow-y: auto;
    padding: 10px;
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .chat-messages {
    height: 310px;
  }
}

/* For large screens (above 1440px) */
@media screen and (min-width: 1440px) {
  .chat-messages {
    height: 450px;
  }
}


.chat-input {
    padding: 10px;
    border-top: 1px solid #ccc;
}

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

.message-user {
    background-color: var(--color-primary);
    color: white !important;
}

.message-other {
    background-color: #f1f1f1;
    margin-left: auto;
}

.char-count {
    font-size: 0.8em;
    color: #666;
}

.attachment-info {
    margin-top: 20px;
    font-size: 0.9em;
}