/* ==========================================
   CHAT BACKGROUND - PAPER TEXTURE MIT PARALLAX
   Füge dies in styles.css ein
   ========================================== */

/* Chat Messages Container - Paper Background mit Parallax */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    /* Paper Background - KLEIN und gekachelt */
    background-image: url('/images/paper.jpg');
    background-size: 300px 300px; /* Viel kleinere Kacheln */
    background-position: center;
    background-repeat: repeat; /* Gekachelt über gesamten Bereich */
    
    /* Parallax-Effekt */
    background-attachment: fixed;
    
    /* Optional: Leichtes Overlay für bessere Lesbarkeit */
    position: relative;
}

/* Optional: Subtiles Overlay für bessere Lesbarkeit der Nachrichten */
.chat-messages::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 0;
}

/* Stelle sicher, dass Nachrichten über dem Background sind */
.message-wrapper {
    position: relative;
    z-index: 1;
}

/* GPU-Beschleunigung für smoothes Scrollen mit Parallax */
.chat-messages {
    will-change: scroll-position;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ==========================================
   MOBILE ANPASSUNGEN
   ========================================== */

@media (max-width: 767px) {
    .chat-messages {
        padding: 16px;
        padding-bottom: 100px;
        
        /* Noch kleinere Kacheln auf Mobile */
        background-size: 200px 200px;
        
        /* Auf Mobile: local statt fixed (bessere Performance) */
        background-attachment: local;
    }
}

/* ==========================================
   ALTERNATIVE GRÖßEN
   Kommentiere die gewünschte Größe ein
   ========================================== */

/* Extra Klein (150x150) */
/*
.chat-messages {
    background-size: 150px 150px;
}
*/

/* Klein (300x300) - AKTIV */
.chat-messages {
    background-size: 300px 300px;
}

/* Mittel (400x400) */
/*
.chat-messages {
    background-size: 400px 400px;
}
*/

/* ==========================================
   ALTERNATIVE: Animierter Parallax-Effekt
   Für extra smooth Parallax beim Scrollen
   ========================================== */

/* Optional: Smooth Parallax mit JavaScript */
/*
.chat-messages {
    background-attachment: scroll;
    transition: background-position 0.05s ease-out;
}
*/

/* ==========================================
   ANPASSUNG: Nachrichten-Bubble Styling
   Leicht transparente Bubbles für Paper-Effekt
   ========================================== */

/* Leicht transparente Message-Bubbles */
.message.own {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.95) 0%, rgba(139, 92, 246, 0.95) 100%);
    backdrop-filter: blur(10px);
}

.message.other {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.message.system {
    background: rgba(254, 243, 199, 0.95);
    backdrop-filter: blur(10px);
}

/* ==========================================
   BONUS: JavaScript für erweiterten Parallax-Effekt
   Optional für noch stärkeren Parallax
   ========================================== */

/*
// Füge dieses JavaScript in chat.js oder eine separate Datei ein:

function initChatParallax() {
    const chatMessages = document.getElementById('chat-messages');
    if (!chatMessages) return;
    
    // Nur auf Desktop aktivieren
    if (window.innerWidth > 767) {
        chatMessages.addEventListener('scroll', function() {
            const scrolled = this.scrollTop;
            const parallaxSpeed = 0.5; // Geschwindigkeit des Parallax-Effekts
            
            this.style.backgroundPositionY = `${scrolled * parallaxSpeed}px`;
        });
    }
}

// Nach dem Rendern des Chats aufrufen
window.addEventListener('DOMContentLoaded', initChatParallax);
*/

/* ==========================================
   PERFORMANCE-OPTIMIERUNGEN
   ========================================== */

.chat-messages {
    /* Verbesserte Scroll-Performance */
    contain: layout style paint;
    
    /* Hardware-Beschleunigung */
    transform: translate3d(0, 0, 0);
}

/* Reduziere Repaints bei Nachrichten */
.message-wrapper {
    contain: layout style;
    transform: translateZ(0);
}

/* ==========================================
   VARIANTEN: Verschiedene Parallax-Stärken
   ========================================== */

/* Subtiler Parallax */
/*
.chat-messages {
    background-attachment: fixed;
    background-size: 300px 300px;
}
*/

/* Mittlerer Parallax - AKTIV */
.chat-messages {
    background-attachment: fixed;
    background-size: 300px 300px;
}

/* Starker Parallax (mit kleineren Kacheln) */
/*
.chat-messages {
    background-attachment: fixed;
    background-size: 200px 200px;
}
*/

/* ==========================================
   DEBUGGING
   Zum Testen ohne Overlay
   ========================================== */

/*
.chat-messages::before {
    display: none;
}
*/