.messages {
    height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 10px;
    background: #f9f9f9;
}

.message {
    margin-bottom: 12px;
    max-width: 70%;
}

.message.sent {
    text-align: right;
    margin-left: auto;
}

.message.received {
    text-align: left;
    margin-right: auto;
}

.bubble {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 12px;
    background: #e0f7fa;
}

.message.sent .bubble {
    background: #c8e6c9;
}

.timestamp {
    font-size: 0.75rem;
    color: #666;
    margin-top: 4px;
}



img, video {
    margin-top: 6px;
    border: 1px solid #ccc;
    max-height: 300px;
}

.contact-card {
    background: #f1f8e9;
    border-left: 4px solid #8bc34a;
    padding: 10px;
    border-radius: 6px;
}














.message-media {
    max-width: 100%;
    margin: 5px 0;
    border-radius: 5px;
}

.message-item .bubble {
    background: #f1f0f0;
    padding: 10px;
    border-radius: 8px;
    margin: 5px;
    position: relative;
}

.message-item.incoming .bubble {
    background: #d1e7dd;
    align-self: flex-start;
}

.message-item.outgoing .bubble {
    background: #e2e3e5;
    align-self: flex-end;
}

.timestamp {
    font-size: 0.8em;
    color: #777;
    display: block;
    margin-top: 5px;
    text-align: right;
}