/* Message Style Override - Minimal Green Background and Status System */

/* Override sent message background to minimal green - WhatsApp style */
.message.sent,
.message.sent .message-bubble,
.message-bubble.sent,
.sent .message-bubble,
.message.sent > .message-bubble,
div.message.sent,
.chat-messages .message.sent {
    background: #dcf8c6 !important;
    color: #000 !important;
}

/* Message status positioning */
.message.sent {
    position: relative;
    padding-bottom: 20px !important;
}

.message-status {
    position: absolute !important;
    bottom: 4px !important;
    right: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* Single tick - message sent to server */
.message-status.sent::after {
    content: '✓' !important;
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Double tick - message delivered to receiver */
.message-status.delivered::after {
    content: '✓✓' !important;
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Blue double tick - message read */
.message-status.read::after {
    content: '✓✓' !important;
    color: #4fc3f7 !important;
}

/* Adjust message time positioning to make room for status */
.message.sent .message-time {
    margin-right: 20px !important;
}

/* Ensure message bubble has proper padding for status */
.message.sent .message-bubble {
    background: #dcf8c6 !important;
    color: #000 !important;
    padding-bottom: 20px !important;
    position: relative !important;
}

/* WhatsApp-style image messages - minimal green background */
.message.sent.media,
.message.sent .media-container {
    background: transparent !important;
    padding: 0 !important;
}

.message.sent .media-content {
    background: #dcf8c6 !important;
    border-radius: 8px !important;
    padding: 3px !important;
    display: inline-block !important;
    max-width: fit-content !important;
    position: relative !important;
}

.message.sent .media-content img,
.message.sent .media-content video {
    border-radius: 6px !important;
    display: block !important;
    max-width: 250px !important;
    cursor: pointer !important;
}

/* Hide any "Open Full Size" text */
.message .open-full-size,
.message .full-size-link,
.media-overlay-text,
.message a[href*="full"],
.message *:contains("🔗 Open Full Size"),
.message *:contains("Open Full Size") {
    display: none !important;
}

/* Image message time and status positioning */
.message.sent.media .message-time {
    position: absolute !important;
    bottom: 8px !important;
    right: 12px !important;
    background: rgba(0,0,0,0.5) !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
}

.message.sent.media .message-status {
    position: absolute !important;
    bottom: 8px !important;
    right: 45px !important;
    background: rgba(0,0,0,0.5) !important;
    padding: 2px 4px !important;
    border-radius: 8px !important;
}

.message.sent.media .message-status::after {
    color: white !important;
}