/* ============================================
   PRIVATE CHAT CSS v3.0 - COMPLETE & RESPONSIVE
   ✅ Styles complets + responsive mobile
   ============================================ */

/* Message Attachments (Images + Fichiers) */
.message-attachment {
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
    max-width: 100%;
}

.message-attachment img {
    max-width: 280px;
    max-height: 280px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
    object-fit: contain;
}

.message-attachment img:hover {
    transform: scale(1.02);
}

/* ✅ Fichiers (PDF, Excel, etc.) */
.message-attachment-file {
    background: rgba(0, 0, 0, 0.05);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
}

body.dark-mode .message-attachment-file {
    background: rgba(255, 255, 255, 0.05);
}

.message-attachment-icon {
    font-size: 1.5rem;
    color: var(--msg-primary, #667eea);
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

/* Icônes colorées par type */
.message-attachment-file[data-file-type="pdf"] .message-attachment-icon {
    color: #ef4444;
}

.message-attachment-file[data-file-type="excel"] .message-attachment-icon,
.message-attachment-file[data-file-type="xls"] .message-attachment-icon,
.message-attachment-file[data-file-type="xlsx"] .message-attachment-icon {
    color: #10b981;
}

.message-attachment-file[data-file-type="word"] .message-attachment-icon,
.message-attachment-file[data-file-type="doc"] .message-attachment-icon,
.message-attachment-file[data-file-type="docx"] .message-attachment-icon {
    color: #3b82f6;
}

.message-attachment-file[data-file-type="zip"] .message-attachment-icon,
.message-attachment-file[data-file-type="rar"] .message-attachment-icon {
    color: #f59e0b;
}

.message-attachment-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.message-attachment-name {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
    color: var(--text-primary, #1e293b);
}

body.dark-mode .message-attachment-name {
    color: var(--text-primary, #f8fafc);
}

.message-attachment-size {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

.message-attachment-file a {
    flex-shrink: 0;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.message-attachment-file a:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: scale(1.1);
}

/* ===== SAVED POSTS - SÉPARATEUR DISCRET ===== */

.saved-post-item {
    position: relative;
    margin-bottom: 20px;
}

.saved-post-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(203, 213, 225, 0.4) 20%, 
        rgba(203, 213, 225, 0.4) 80%, 
        transparent 100%
    );
}

body.dark-mode .saved-post-item:not(:last-child)::after {
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(100, 116, 139, 0.3) 20%, 
        rgba(100, 116, 139, 0.3) 80%, 
        transparent 100%
    );
}

/* ============================================
   📱 RESPONSIVE MOBILE - IDENTIQUE À GROUP CHAT
   ============================================ */

@media (max-width: 968px) {
    /* ✅ Zone de chat 100% largeur */
    .chat-panel {
        width: 100% !important;
    }
    
    .chat-active {
        width: 100% !important;
    }
    
    .chat-header {
        width: 100% !important;
    }
    
    /* ✅ Padding réduit */
    .chat-messages {
        padding: 16px 8px !important;
        padding-left: 8px !important;
        gap: 12px;
        width: 100% !important;
    }
    
    .chat-message {
        max-width: 80% !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }
    
    .chat-message-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-width: 2px !important;
    }
    
    .chat-message-content {
        max-width: 80% !important;
    }
    
    .chat-message-bubble {
        font-size: 0.875rem;
        padding: 9px 12px !important;
    }
    
    .message-attachment img {
        max-width: 200px;
        max-height: 200px;
    }
    
    /* ✅ Fichiers sur mobile */
    .message-attachment-file {
        min-width: 180px;
        padding: 10px;
        gap: 10px;
    }
    
    .message-attachment-icon {
        font-size: 1.3rem;
        width: 32px;
    }
    
    .message-attachment-name {
        font-size: 0.85rem;
    }
    
    .message-attachment-size {
        font-size: 0.75rem;
    }
    
    .chat-input-wrapper {
        width: 100% !important;
    }
    
    .chat-input {
        width: 100% !important;
    }
    
    /* ✅ Bouton suppression mobile */
    .message-delete-btn {
        opacity: 0;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        padding: 7px 10px;
        font-size: 0.75rem;
        z-index: 100;
    }
    
    .chat-message.message-active .message-delete-btn {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .chat-message-content {
        max-width: 82% !important;
    }
    
    .shared-post-message .chat-message-content {
        max-width: 90% !important;
        min-width: 280px !important;
    }
    
    .shared-post-bubble-premium {
        max-width: 100% !important;
    }
    
    .shared-post-title-premium {
        font-size: 0.95rem;
    }
    
    .shared-post-excerpt {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }
    
    .shared-post-cover {
        max-height: 160px;
    }
    
    .shared-post-author-avatar {
        width: 36px;
        height: 36px;
    }
    
    .shared-post-stats {
        gap: 12px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    /* ✅ ULTRA COMPACT MOBILE */
    .chat-messages {
        padding: 12px 6px !important;
        padding-left: 6px !important;
    }
    
    .chat-message {
        max-width: 85% !important;
        gap: 5px !important;
        margin-bottom: 8px !important;
    }
    
    .chat-message-avatar {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }
    
    .chat-message-content {
        max-width: 85% !important;
    }
    
    .chat-message-bubble {
        font-size: 0.85rem;
        padding: 8px 11px !important;
    }
    
    .message-attachment img {
        max-width: 160px;
        max-height: 160px;
    }
    
    /* ✅ Fichiers ultra compact */
    .message-attachment-file {
        min-width: 150px;
        padding: 8px;
        gap: 8px;
    }
    
    .message-attachment-icon {
        font-size: 1.2rem;
        width: 28px;
    }
    
    .message-attachment-name {
        font-size: 0.8rem;
    }
    
    .message-attachment-size {
        font-size: 0.7rem;
    }
    
    .chat-message.message-active .message-delete-btn {
        left: 4px;
        padding: 6px 9px;
        font-size: 0.7rem;
    }
    
    .chat-input-wrapper {
        padding: 10px 12px;
    }
    
    .shared-post-message .chat-message-content {
        max-width: 95% !important;
        min-width: 260px !important;
    }
}

console.log('✅ private-chat.css loaded (v3.0 - Complete & Responsive)');