/* Attached Time Stamps to Message Bubbles */

/* ==================== MESSAGE CONTAINER ADJUSTMENTS ==================== */

/* Reset default time positioning */
.tk-list .tk-time {
    position: absolute !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    color: #868e96 !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    z-index: 1;
}

/* Show time on hover of message */
.tk-list > div:hover .tk-time {
    opacity: 1 !important;
}

/* Always show time for last message */
.tk-list > div:last-child .tk-time {
    opacity: 0.7 !important;
}

/* ==================== RECEIVED MESSAGES (LEFT SIDE) ==================== */

.tk-list > div:not(.tk-right):not(.tk-label-date) {
    position: relative !important;
    padding-bottom: 0 !important;
    margin-bottom: 3px !important;
}

.tk-list > div:not(.tk-right):not(.tk-label-date) .tk-time {
    bottom: 0px !important;
    left: calc(100% + 8px) !important;
    right: auto !important;
    color: #6c757d !important;
}

/* Alternative: Time below message */
.tk-list > div:not(.tk-right):not(.tk-label-date).time-below .tk-time {
    bottom: -18px !important;
    left: 12px !important;
    font-size: 9px !important;
}

/* ==================== SENT MESSAGES (RIGHT SIDE) ==================== */

.tk-list > div.tk-right {
    position: relative !important;
    padding-bottom: 0 !important;
    margin-bottom: 3px !important;
}

.tk-list > div.tk-right .tk-time {
    bottom: 0px !important;
    right: calc(100% + 8px) !important;
    left: auto !important;
    color: #6c757d !important;
}

/* Alternative: Time below message */
.tk-list > div.tk-right.time-below .tk-time {
    bottom: -18px !important;
    right: 12px !important;
    left: auto !important;
    font-size: 9px !important;
}

/* ==================== INLINE TIME STYLE (ATTACHED TO BUBBLE) ==================== */

/* Time tag attached to message bubble corner */
.tk-list > div:not(.tk-label-date) .tk-message {
    position: relative !important;
}

/* Inline time - bottom right corner of received messages */
.tk-list > div:not(.tk-right):not(.tk-label-date) .tk-time.inline {
    position: absolute !important;
    bottom: 2px !important;
    right: 8px !important;
    left: auto !important;
    font-size: 9px !important;
    color: rgba(108, 117, 125, 0.7) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    opacity: 1 !important;
}

/* Inline time - bottom left corner of sent messages */
.tk-list > div.tk-right .tk-time.inline {
    position: absolute !important;
    bottom: 2px !important;
    left: 8px !important;
    right: auto !important;
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(0, 0, 0, 0.1) !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    opacity: 1 !important;
}

/* ==================== FLOATING TIME TAG STYLE ==================== */

/* Floating time tag outside message */
.tk-list > div:not(.tk-right):not(.tk-label-date) .tk-time.floating {
    position: absolute !important;
    bottom: 2px !important;
    left: calc(100% + 5px) !important;
    right: auto !important;
    background: #f1f3f5 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    opacity: 0.8 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.tk-list > div.tk-right .tk-time.floating {
    position: absolute !important;
    bottom: 2px !important;
    right: calc(100% + 5px) !important;
    left: auto !important;
    background: #f1f3f5 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    opacity: 0.8 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ==================== COMPACT BUBBLE TIME ==================== */

/* Time as small tag at message tail */
.tk-list > div:not(.tk-right):not(.tk-label-date) .tk-time.compact {
    position: absolute !important;
    bottom: 4px !important;
    left: 100% !important;
    right: auto !important;
    background: transparent !important;
    padding: 0 0 0 4px !important;
    font-size: 9px !important;
    color: #868e96 !important;
    opacity: 0.7 !important;
}

.tk-list > div.tk-right .tk-time.compact {
    position: absolute !important;
    bottom: 4px !important;
    right: 100% !important;
    left: auto !important;
    background: transparent !important;
    padding: 0 4px 0 0 !important;
    font-size: 9px !important;
    color: #868e96 !important;
    opacity: 0.7 !important;
}

/* ==================== WHATSAPP STYLE TIME ==================== */

/* Time inside message with padding adjustment */
.tk-list > div:not(.tk-right):not(.tk-label-date) .tk-time.whatsapp {
    position: relative !important;
    display: inline-block !important;
    float: right !important;
    margin: 0 0 -2px 8px !important;
    padding: 0 !important;
    font-size: 10px !important;
    color: rgba(0, 0, 0, 0.45) !important;
    background: transparent !important;
    opacity: 1 !important;
}

.tk-list > div.tk-right .tk-time.whatsapp {
    position: relative !important;
    display: inline-block !important;
    float: right !important;
    margin: 0 0 -2px 8px !important;
    padding: 0 !important;
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* Add padding to message to accommodate WhatsApp style time */
.tk-list > div .tk-message:has(.tk-time.whatsapp) {
    padding-right: 60px !important;
    min-width: 100px !important;
}

/* ==================== STATUS ICONS WITH TIME ==================== */

/* Time with status icons (delivered, read) */
.tk-list .tk-time > i {
    font-size: 10px !important;
    margin-left: 3px !important;
    opacity: 0.8 !important;
}

.tk-list .tk-time .tk-icon-check {
    color: #868e96 !important;
}

.tk-list .tk-time .tk-icon-check-double {
    color: #4fc3f7 !important;
}

/* ==================== GROUPED MESSAGES ==================== */

/* Hide time for grouped messages except last */
.tk-list > div.tk-grouped:not(:last-of-type) .tk-time {
    display: none !important;
}

/* Show time only for last message in group */
.tk-list > div.tk-grouped:last-of-type .tk-time {
    opacity: 0.7 !important;
}

/* ==================== RTL SUPPORT (ARABIC) ==================== */

[dir="rtl"] .tk-list > div:not(.tk-right):not(.tk-label-date) .tk-time {
    left: auto !important;
    right: calc(100% + 8px) !important;
}

[dir="rtl"] .tk-list > div.tk-right .tk-time {
    right: auto !important;
    left: calc(100% + 8px) !important;
}

[dir="rtl"] .tk-list > div:not(.tk-right):not(.tk-label-date) .tk-time.inline {
    right: auto !important;
    left: 8px !important;
}

[dir="rtl"] .tk-list > div.tk-right .tk-time.inline {
    left: auto !important;
    right: 8px !important;
}

[dir="rtl"] .tk-list .tk-time > i {
    margin-left: 0 !important;
    margin-right: 3px !important;
}

/* ==================== HOVER EFFECTS ==================== */

/* Subtle hover effect */
.tk-list > div:hover .tk-time {
    opacity: 1 !important;
    transform: scale(1.05);
}

/* Highlight time on message hover */
.tk-list > div:hover .tk-time.floating {
    background: #e9ecef !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ==================== MOBILE RESPONSIVE ==================== */

@media (max-width: 768px) {
    /* Smaller time stamps on mobile */
    .tk-list .tk-time {
        font-size: 9px !important;
    }
    
    .tk-list .tk-time.inline,
    .tk-list .tk-time.whatsapp {
        font-size: 8px !important;
    }
    
    /* Always show time on mobile (no hover) */
    .tk-list > div .tk-time {
        opacity: 0.6 !important;
    }
    
    /* Adjust positioning for mobile */
    .tk-list > div:not(.tk-right):not(.tk-label-date) .tk-time.floating,
    .tk-list > div.tk-right .tk-time.floating {
        display: none !important;
    }
    
    /* Use inline style on mobile */
    .tk-list > div .tk-time {
        position: absolute !important;
        bottom: -16px !important;
        font-size: 8px !important;
    }
}

/* ==================== DARK MODE ==================== */

.tk-dark-mode .tk-list .tk-time {
    color: #a0a0a0 !important;
}

.tk-dark-mode .tk-list > div:not(.tk-right):not(.tk-label-date) .tk-time.inline {
    background: rgba(0, 0, 0, 0.3) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.tk-dark-mode .tk-list > div.tk-right .tk-time.inline {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.tk-dark-mode .tk-list .tk-time.floating {
    background: #2d3748 !important;
    color: #a0aec0 !important;
}

/* ==================== SPECIAL FORMATTING ==================== */

/* Today indicator */
.tk-list .tk-time[data-today="true"] {
    color: #28a745 !important;
    font-weight: 500 !important;
}

/* Recent message (within 5 minutes) */
.tk-list .tk-time[data-recent="true"] {
    color: #007bff !important;
    opacity: 1 !important;
}

/* ==================== ANIMATION ==================== */

/* Fade in animation for new messages */
.tk-list > div:last-child .tk-time {
    animation: fadeInTime 0.3s ease-out;
}

@keyframes fadeInTime {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 0.7;
        transform: translateY(0);
    }
}