/* ========================================================
   💻 MASAÜSTÜ (PC) VARYASYONU - GENEL YERLEŞİM
   ======================================================== */
.chat-box-container { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    z-index: 10000; 
    width: 360px; 
    transition: all 0.3s ease-in-out; 
}

.chat-card { 
    border-radius: 12px !important; 
    overflow: hidden; 
    display: none; 
    box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
    border: 1px solid #e2e4e7;
}

.chat-messages { 
    height: 320px; 
    overflow-y: auto; 
    font-size: 14px; 
    background: #ffffff; 
    padding: 15px; 
}

.msg-client { background: #e2f0d9; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; text-align: right; margin-left: auto; max-width: 85%; color: #333; }
.msg-admin { background: #f1f1f1; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; text-align: left; margin-right: auto; max-width: 85%; color: #333; }
.chat-header-bg { background: #0f7ae5 !important; cursor: pointer; }

.chat-minibar {
    background: #0f7ae5;
    color: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(15, 122, 229, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    transition: transform 0.2s ease;
}
.chat-minibar:hover { transform: scale(1.05); }


/* ========================================================
   📱 MOBİL VE F12 MODU İÇİN GERÇEKÇİ, OKUNAKLI VE TOK TASARIM
   ======================================================== */
@media (max-width: 768px) {
    /* Ekran kenarlarına kibar bir boşlukla tam uyum */
    .chat-box-container { 
        right: 12px !important; 
        left: 12px !important; 
        bottom: 12px !important; 
        width: auto !important; 
    }
    
    .chat-card {
        width: 100% !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 35px rgba(0,0,0,0.16) !important;
    }
    
    .chat-messages { 
        height: 52vh !important; 
        max-height: 380px !important; 
        padding: 16px !important;
        background: #fcfdfd !important; /* Gözü yormayan kırık beyaz background */
        
        /* Butonların taşmasını önleyen ve alt alta dikey sıralayan flex düzeni */
        display: flex !important;
        flex-direction: column !important;
    }

    /* 👁️ MESAJ METİNLERİ: Net, tok, kabak gibi okunan gerçekçi ayar */
    .chat-messages, 
    .chat-messages p, 
    .chat-messages div, 
    .chat-messages span {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 17px !important;       /* Tok ve okunaklı ideal mobil font boyutu */
        font-weight: 700 !important;       /* Kalın ve belirgin (Bold) */
        color: #1a1a1a !important;       /* Çiğ siyah yerine çok koyu premium gri/siyah */
        line-height: 1.6 !important;       /* Satırlar ferah ve okunması kolay */
        letter-spacing: 0.3px !important;
    }
    
    /* Mesajı atan kişinin başlığı (Siz/Temsilci) */
    .chat-messages b,
    .chat-messages strong {
        font-weight: 800 !important;       
        color: #0f7ae5 !important;         /* Kurumsal mavi vurgu */
        display: block !important;
        margin-bottom: 4px !important;
        font-size: 16px !important;
    }

    /* Saat yazıları */
    .chat-messages small {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #666666 !important;         /* Saati hafifçe arkaya ittik */
        display: block !important;
        margin-top: 4px !important;
    }

    /* 🟢 KULLANICI MESAJ BALONU (Sağda - Pastel Yeşil) */
    .msg-client { 
        background: #dbf2db !important;    
        padding: 10px 14px !important; 
        border-radius: 14px 14px 0px 14px !important; /* WhatsApp stili köşe */
        max-width: 88% !important;
        margin-bottom: 12px !important;
        border: 1px solid #c8e6c9 !important;
    }
    
    /* ⚪ TEMSİLCİ MESAJ BALONU (Solda - Açık Gri) */
    .msg-admin { 
        background: #f0f2f5 !important;    
        padding: 10px 14px !important; 
        border-radius: 14px 14px 14px 0px !important;
        max-width: 88% !important;
        margin-bottom: 12px !important;
        border: 1px solid #e4e6eb !important;
    }

    /* 📋 FORM İÇİNDEKİ INPUT VE TEXTAREA ALANLARI */
    .form-control, .uk-input, .uk-textarea {
        font-size: 17px !important; 
        font-weight: 700 !important;
        color: #1a1a1a !important;
        padding: 12px !important;
        height: 48px !important; /* Yükseklik sabitlendi, kayma engellendi */
        border: 2px solid #b0b5b9 !important; /* Net ama kibar çerçeve */
        border-radius: 8px !important;
        background: #ffffff !important;
        position: relative !important;
        z-index: 5 !important;