/* ===================================================================
 * YILDIZLI MESAJLAR (ROMANTİK TEMA)
 * (PartialProductCategory.cshtml stilleri)
 * =================================================================== */

/* Ana bölüm başlığı (Yıldızlı Mesajlar) */
.chat-section-bg .section-title h2 {
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem;
    color: #9B5C5C;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

.chat-section-bg .section-title p {
    font-family: 'Lora', serif;
    font-style: italic;
    color: #777;
}

/* O beyaz ana kutuyu (chat-container) eziyoruz */
.chat-container {
    background: none; /* Beyaz arkaplanı kaldır */
    border: none;
    box-shadow: none;
    max-width: 800px; /* Çok yayılmasın */
    margin: 0 auto;
    padding: 0;
}

/* Sohbet başlığı (HATCİK AND...) */
.chat-header {
    background: #FFFBFB; /* Yumuşak krem zemin */
    border-bottom: 1px solid #F0E0E2;
    border-radius: 10px 10px 0 0;
    padding: 15px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    /* --- YENİ Z-INDEX AYARI (Başlığın arkaplanın önünde kalması için) --- */
    position: relative;
    z-index: 2;
    text-align: center;
}

/* YENİ KURAL: Başlığı ve alt başlığı tutan info kutusunu ortalıyoruz */
.chat-header-info {
    text-align: center;
    /* Avatar gizlendiği için bu kutu %100 genişlesin */
    width: 100%;
}

.chat-header h5 {
    font-family: 'Playfair Display', serif; /* Şık font */
    color: #6D435A; /* Koyu şarap rengi */
    font-size: 1.3rem;
    font-weight: 700;
}

.chat-header p {
    font-family: 'Lora', serif;
    font-style: italic;
    color: #9B5C5C;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.chat-header-avatar {
    display: none; /* O boş avatarı gizle */
}

/* Mesajların olduğu alan */
.chat-messages {
    background-color: #FFFBFB; /* "background" "background-color" ile değişti */
    background-image: url('https://i.ibb.co/MyxpkqTW/htc.jpg');
    background-blend-mode: soft-light; /* 'overlay' veya 'soft-light' dene */

    /* 4. Resim ayarları */
    background-size: cover;
    background-position: center center;

    /* 5. SİHİRLİ SATIR: Resim sabit kalsın, mesajlar kaysın! */
    background-attachment: fixed;
    padding: 20px;
    border-radius: 0 0 10px 10px;
    height: 60vh; /* Sabit bir yükseklik verelim */
    overflow-y: auto; /* Dikey kaydırma çubuğu olsun (GÜZEL) */
    overflow-x: hidden;
    position: relative; /* Bu zaten vardı, harika! */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    /* --- YENİ EKLENEN ARKA PLAN (Resmin kutudan taşmasını engeller) --- */
    
}




/* Tarih Damgası (12 Ocak 1900) */
.date-chip {
    background: #D8B2B2; /* Açık gül kurusu */
    color: #fff;
    font-family: 'Lora', serif;
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 15px;
    margin: 15px auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* --- YENİ Z-INDEX AYARI (Tarihin resmin ÖNÜNDE kalması için) --- */
    position: relative;
    z-index: 1;
}

/* Gelen Mesaj (Ondan) */
.message-received-container {
    justify-content: flex-start;
    /* --- YENİ Z-INDEX AYARI (Mesajın resmin ÖNÜNDE kalması için) --- */
    position: relative;
    z-index: 1;
}

.message-received {
    background: #ffffff; /* Gelen mesajlar beyaz kalsın */
    color: #444;
    border: 1px solid #F0E0E2;
    border-radius: 20px 20px 20px 5px; /* Şekli güzelleştirelim */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* Giden Mesaj (Benden) */
.message-sent-container {
    justify-content: flex-end;
    /* --- YENİ Z-INDEX AYARI (Mesajın resmin ÖNÜNDE kalması için) --- */
    position: relative;
    z-index: 1;
}

.message-sent {
    /* O parlak yeşil GİTTİ, asil şarap GELDİ */
    background: #6D435A;
    color: #FFF5E1; /* Krem yazı */
    border-radius: 20px 20px 5px 20px; /* Şekli güzelleştirelim */
    box-shadow: 0 3px 10px rgba(109, 67, 90, 0.2);
}

/* Tüm mesajlar için ortak ayarlar */
.message {
    padding: 12px 18px;
    max-width: 75%;
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    line-height: 1.6;
}

.message-text {
    margin-bottom: 5px;
}

.message-meta {
    text-align: right;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* YENİ BLOK: Giden mesajdaki (koyu) yazıların rengini düzeltir */
.message-sent .message-text,
.message-sent .message-text p {
    color: #FFF5E1; /* Yazıyı krem rengi yap */
}

.message-sent .message-meta {
    color: #FFF5E1; /* Saati de krem rengi yap */
  .chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #FFFBFB;
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: #D8B2B2; /* Açık gül kurusu */
    border-radius: 10px;
    border: 2px solid #FFFBFB;
}

    .chat-messages::-webkit-scrollbar-thumb:hover {
        background-color: #9B5C5C; /* Koyu gül rengi */
    }