/* ================================================================
   SNL // CHAT.CSS — DM & Profil Stilleri
   ================================================================
   Satır     : ~400
   Değişiklik:
     - width çift tanım düzeltildi (chat-send-btn, delete-photo-btn)
     - side-close-btn width çift tanım düzeltildi
     - Tüm stiller var() kullanıyor
     - header-btn width düzeltildi
     - [YENİ] Mobil responsive — paneller üst üste, boşluk sorunu giderildi
================================================================ */

/* ================================================================
   MESAJLAR (DM) SAYFASI
================================================================ */

.inbox-container {
    display:       flex;
    height:        calc(100vh - 115px);
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 16px;
    overflow:      hidden;
}

.conversations-panel {
    width:          100%;
    max-width:      320px;
    border-right:   1px solid var(--border);
    display:        flex;
    flex-direction: column;
    background:     var(--bg3);
}

.conversations-header {
    padding:       14px 16px;
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
}

.conversations-header h2 {
    font-family:   var(--font-title);
    font-size:     13px;
    color:         var(--neon);
    margin:        0;
}

.conversations-search {
    padding:       10px 12px;
    border-bottom: 1px solid var(--border);
}

.conversations-search input {
    width:         100%;
    background:    var(--surface);
    border:        1px solid var(--border);
    padding:       8px 12px;
    border-radius: 20px;
    font-size:     13px;
    margin-bottom: 0;
}

.conversations-list { flex: 1; overflow-y: auto; }

.conversation-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       12px 16px;
    cursor:        pointer;
    transition:    0.15s;
    border-bottom: 1px solid var(--border);
    position:      relative;
}

.conversation-item:hover       { background: var(--surface2); }
.conversation-item.active      { background: rgba(168,85,247,0.1); border-left: 3px solid var(--accent); }
.conversation-item.has-unread  { background: rgba(236,72,153,0.05); }

.conv-avatar {
    width:          44px;
    height:         44px;
    border-radius:  50%;
    border:         2px solid var(--border);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-weight:    700;
    color:          var(--neon);
    font-size:      13px;
    background:     var(--surface2);
    overflow:       hidden;
    flex-shrink:    0;
}

.conv-avatar img  { width: 100%; height: 100%; object-fit: cover; }
.conv-avatar.online { border-color: var(--success); box-shadow: 0 0 8px rgba(34,197,94,0.3); }
.conv-info        { flex: 1; min-width: 0; }
.conv-name        { font-weight: 700; font-size: 14px; color: var(--text); }
.conv-preview     { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-meta        { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.conv-time        { font-size: 11px; color: var(--muted); }

.conv-unread-badge {
    background:    var(--pink);
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    min-width:     20px;
    height:        20px;
    border-radius: 10px;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.chat-panel       { flex: 1; display: flex; flex-direction: column; background: var(--bg); }
.chat-panel.empty { align-items: center; justify-content: center; }
.chat-empty-state { text-align: center; color: var(--muted); }
.chat-empty-state .icon { font-size: 60px; margin-bottom: 12px; }
.chat-empty-state h3    { font-family: var(--font-title); color: var(--border); font-size: 14px; }

.chat-header {
    padding:       12px 16px;
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    gap:           12px;
    background:    var(--bg3);
}

.chat-header-back {
    display:    none;
    background: none;
    border:     none;
    color:      var(--neon);
    font-size:  20px;
    cursor:     pointer;
    padding:    4px 8px;
    width:      auto;
}

.chat-header-avatar {
    width:          36px;
    height:         36px;
    border-radius:  50%;
    border:         2px solid var(--accent);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-weight:    700;
    color:          var(--neon);
    font-size:      11px;
    background:     var(--surface2);
    overflow:       hidden;
}

.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-header-info       { flex: 1; }
.chat-header-name       { font-weight: 700; font-size: 14px; color: var(--text); }
.chat-header-status     { font-size: 11px; color: var(--success); }

.chat-messages {
    flex:           1;
    overflow-y:     auto;
    padding:        16px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.chat-bubble {
    max-width:     75%;
    padding:       10px 14px;
    border-radius: 16px;
    font-size:     14px;
    line-height:   1.4;
    word-break:    break-word;
    animation:     bubbleIn 0.2s ease-out;
}

@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-bubble.sent {
    align-self:          flex-end;
    background:          var(--gradient);
    color:               #fff;
    border-bottom-right-radius: 4px;
}

.chat-bubble.received {
    align-self:         flex-start;
    background:         var(--surface);
    border:             1px solid var(--border);
    color:              var(--text);
    border-bottom-left-radius: 4px;
}

.bubble-sender { font-size: 11px; font-weight: 700; color: var(--neon); margin-bottom: 3px; }
.bubble-time   { font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 4px; text-align: right; }
.chat-bubble.received .bubble-time { color: var(--muted); }
.read-tick     { color: rgba(255,255,255,0.8); }

.chat-input-area {
    padding:     12px 16px;
    border-top:  1px solid var(--border);
    display:     flex;
    gap:         10px;
    align-items: flex-end;
    background:  var(--bg3);
}

.chat-input-wrapper { flex: 1; }

.chat-input-wrapper textarea {
    width:         100%;
    background:    var(--surface);
    border:        1px solid var(--border);
    color:         var(--text);
    padding:       10px 14px;
    border-radius: 20px;
    font-size:     14px;
    resize:        none;
    max-height:    100px;
    min-height:    40px;
    margin-bottom: 0;
}

/* ✅ Düzeltildi — width tek kez */
.chat-send-btn {
    height:          42px;
    border-radius:   50%;
    background:      var(--gradient);
    color:           #fff;
    border:          none;
    font-size:       18px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    padding:         0 14px;
    width:           auto;
}

/* ================================================================
   [YENİ] MOBİL RESPONSIVE — Paneller üst üste, boşluk giderildi
   ================================================================
   Telefonda iki panel yan yana sığmıyordu (boşluk sorunu).
   dm.js şu class'ları kullanıyor:
     - openConversation()   → conversationsPanel'e 'hidden-mobile' ekler,
                               chatPanel'den 'hidden-mobile' kaldırır
     - backToConversations()→ tam tersi
   Bu CSS o class'ları mobilde anlamlı hale getirir.
================================================================ */
@media (max-width: 768px) {

    /* Konuşma listesi mobilde tam genişlik */
    .conversations-panel {
        max-width:    100%;
        width:        100%;
        border-right: none;
    }

    /* Inbox dikey ve tam yükseklik, kenar boşlukları sıfır */
    .inbox-container {
        height:        calc(100vh - 110px);
        border-radius: 0;
        border:        none;
    }

    /* Sohbet paneli mobilde de tam ekran kaplasın */
    .chat-panel {
        width:    100%;
        flex:     1;
    }

    /* dm.js bu class'ı ekleyince ilgili panel gizlenir.
       Böylece aynı anda ya liste ya sohbet görünür — boşluk kalmaz. */
    .hidden-mobile {
        display: none !important;
    }

    /* Mobilde sohbet başlığındaki geri oku görünür olsun */
    .chat-header-back {
        display: inline-flex;
    }

    /* Boş durum (hiç konuşma seçilmemişken sağ panel) mobilde gizli —
       çift boş-ekran sorununu önler. Liste zaten kendi boş mesajını gösteriyor. */
    .chat-panel.empty {
        display: none;
    }
}

/* ================================================================
   PROFİL SAYFASI
================================================================ */

.profile-avatar-lg {
    width:          80px;
    height:         80px;
    border-radius:  50%;
    border:         3px solid var(--accent);
    box-shadow:     var(--glow);
    margin:         0 auto 10px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      24px;
    font-weight:    700;
    color:          var(--neon);
    overflow:       hidden;
    background:     var(--surface2);
}

.profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

.profile-bio {
    font-size:     13px;
    color:         var(--muted);
    background:    var(--surface2);
    padding:       8px;
    border-radius: 8px;
    margin:        10px 0;
    border:        1px solid var(--border);
    font-style:    italic;
}

.profile-photo-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3px;
    border-radius:         8px;
    overflow:              hidden;
}

.profile-photo-item {
    aspect-ratio: 1;
    overflow:     hidden;
    cursor:       pointer;
    position:     relative;
}

.profile-photo-item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.profile-photo-item:hover img { transform: scale(1.05); }

/* ✅ Düzeltildi — width tek kez */
.profile-photo-item .delete-photo-btn {
    position:        absolute;
    top:             4px;
    right:           4px;
    background:      rgba(239,68,68,0.8);
    color:           #fff;
    border:          none;
    width:           22px;
    height:          22px;
    border-radius:   50%;
    font-size:       11px;
    cursor:          pointer;
    display:         none;
    align-items:     center;
    justify-content: center;
    padding:         0;
}

.profile-photo-item:hover .delete-photo-btn { display: flex; }