/* chat.css */

body { font-family: 'Plus Jakarta Sans', sans-serif; }

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #475569; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }

/* Chat List Item */
.chat-item { transition: all 0.2s; border-left: 4px solid transparent; }
.chat-item:hover { background-color: #f1f5f9; }
.dark .chat-item:hover { background-color: #1e293b; }

.chat-item.active-chat { background-color: #f0f9ff; border-left: 4px solid #0ea5e9; }
.dark .chat-item.active-chat { background-color: #0c4a6e; border-left: 4px solid #0ea5e9; }

.chat-item.active-chat h4 { color: #0284c7; font-weight: 800; }
.dark .chat-item.active-chat h4 { color: #38bdf8; }

/* Status Colors */
.status-online { background-color: #22c55e; border-color: white; }
.dark .status-online { border-color: #0f172a; }
.status-offline { background-color: #94a3b8; border-color: white; }
.dark .status-offline { border-color: #0f172a; }

/* Message Bubbles */
.msg-bubble {
    position: relative;
    max-width: 75%;
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 14.5px;
    line-height: 1.5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    margin-bottom: 4px;
    word-wrap: break-word;
}

/* Sent (Blue) */
.msg-sent {
    align-self: flex-end;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    border-bottom-right-radius: 4px;
}
.msg-sent a { color: #e0f2fe; text-decoration: underline; }

/* Received (White/Dark) */
.msg-received {
    align-self: flex-start;
    background-color: white;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}
.dark .msg-received {
    background-color: #1e293b; /* Dark Blue-Gray */
    color: #e2e8f0;
    border: 1px solid #334155;
}

/* Metadata */
.msg-meta {
    float: right;
    margin-left: 8px;
    margin-top: 6px;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.msg-sent .msg-meta { color: rgba(255,255,255,0.8); }
.msg-received .msg-meta { color: #94a3b8; }
.dark .msg-received .msg-meta { color: #64748b; }

.tick-read { color: #bef264; }
.tick-sent { color: rgba(255,255,255,0.6); }

/* Animation */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-pop { animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in { animation: fadeIn 0.2s ease-out forwards; }

.flip-x { transform: scaleX(-1); }

/* Pulse Animation */
@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.animate-pulse { animation: pulse-red 1.5s infinite; }

/* Typing Dots */
.typing-dots span { animation-duration: 1.4s; animation-fill-mode: both; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Mobile Logic */
/* PC ve Tablet (Geniş Ekran) Ayarları */
@media (min-width: 769px) {
    #sidebar { 
        position: relative !important; 
        transform: translateX(0) !important; 
        display: flex !important; 
    }
    #chat-sidebar { 
        position: relative !important; 
        display: flex !important; 
        width: 350px !important; 
    }
    #chat-area { 
        position: relative !important; 
        transform: translateX(0) !important; 
        flex: 1 !important; 
    }
    #open-sidebar, #back-btn { 
        display: none !important; /* PC'de hamburger ve geri okunu gizle */
    }
}

/* Mobil Ayarları (Mevcut olanı koru ama çakışmayı önle) */
@media (max-width: 768px) {
    #sidebar { position: fixed; z-index: 100; }
    body.chat-active #chat-sidebar { display: none; }
}
/* Mobilde chat alanı açıkken ekranın tam sığmasını ve geri butonunun aktif kalmasını sağlar */
@media (max-width: 768px) {
    #chat-area { 
        position: fixed; /* absolute yerine fixed kullanarak kaymayı önle */
        inset: 0; 
        width: 100%; 
        height: 100%; 
        z-index: 50; 
        transition: transform 0.3s ease-in-out; 
    }
    /* Chat aktif değilken alanı sağa sakla */
    body:not(.chat-active) #chat-area { transform: translateX(100%); }
    body.chat-active #chat-area { transform: translateX(0%); }
}    body:not(.chat-active) #chat-area { transform: translateX(100%); position: absolute; width: 100%; }