/**
 * Date Separators (WhatsApp/Messenger Style)
 * Message Status Ticks (WhatsApp Style)
 */

/* ============================================
   Date Separator
   ============================================ */

.date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
}

.date-separator-line {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.date-separator-text {
    padding: 6px 16px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    margin: 0 12px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-transform: capitalize;
}

/* Sticky date separator (optional - makes dates stick to top when scrolling) */
.date-separator.sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    padding: 8px 0;
    margin: 0;
}

/* ============================================
   Message Status Ticks (WhatsApp Style)
   ============================================ */

.message-status {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}

.message-status-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
}

/* Single Tick - Sent (Gray) */
.message-status-icon.sent {
    color: #9ca3af;
}

.message-status-icon.sent svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Double Tick - Delivered (Gray) */
.message-status-icon.delivered {
    color: #9ca3af;
}

.message-status-icon.delivered svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Double Tick - Read (Blue) */
.message-status-icon.read {
    color: #3b82f6;
}

.message-status-icon.read svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Clock icon - Sending */
.message-status-icon.sending {
    color: #d1d5db;
    animation: rotate 1s linear infinite;
}

.message-status-icon.sending svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Failed status - Red X */
.message-status-icon.failed {
    color: #ef4444;
}

.message-status-icon.failed svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Status in message bubble */
.message.sent .message-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-item.vendor .message-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================
   Mobile Responsive
   ============================================ */

@media (max-width: 480px) {
    .date-separator {
        margin: 16px 0;
    }
    
    .date-separator-text {
        font-size: 11px;
        padding: 5px 12px;
    }
    
    .message-status-icon {
        width: 14px;
        height: 14px;
    }
    
    .message-status-icon svg {
        width: 14px;
        height: 14px;
    }
}

/* ============================================
   Dark Mode Support
   ============================================ */

@media (prefers-color-scheme: dark) {
    .date-separator-line {
        background: #374151;
    }
    
    .date-separator-text {
        background: #1f2937;
        color: #d1d5db;
    }
    
    .date-separator.sticky {
        background: #111827;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .date-separator {
        margin: 10px 0;
    }
    
    .date-separator-line {
        display: none;
    }
    
    .date-separator-text {
        background: transparent;
        color: #000;
        box-shadow: none;
    }
    
    .message-status {
        display: none;
    }
}

/* ============================================
   Accessibility
   ============================================ */

.message-status-icon[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 4px;
}

.message-status-icon[aria-label]:hover::after {
    opacity: 1;
}

/* Screen reader only text */
.sr-only-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}