/* =============================================
   MOBILE VIEW STYLES - COMPLETE REWRITE
   ============================================= */

/* ===== HEADER BUTONLARI - GENEL STİLLER ===== */
/* Online sayaç ve indir butonu aynı stil */
.online-count, .online-users-count, .online-users-counter, .install-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: 2px solid;
    border-radius: 50%;
    white-space: nowrap;
    margin-right: 6px;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Online sayaç özel stilleri */
.online-count, .online-users-count, .online-users-counter {
    background: #1a1a1a;
    border-color: #333;
    color: #00ff41;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
}

/* PWA Yeniden Yükleme butonu - Yeni renk */
.install-icon {
    background: rgba(255, 193, 7, 0.1);
    border-color: #ffc107;
    color: #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
    display: flex !important; /* Her zaman görünür */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hover efektleri */
.online-count:hover, .online-users-count:hover, .online-users-counter:hover {
    transform: scale(1.05);
}

.install-icon:hover {
    transform: scale(1.05);
    background: rgba(255, 193, 7, 0.2);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
}

/* Tooltip kaldırıldı - artık kullanılmıyor */

.online-count .count, .online-users-count .count, .counter-number {
    font-weight: 700;
    color: #00ff41;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.9);
    line-height: 1;
}

.online-count .icon, .online-users-count .icon {
    display: none; /* İkonları gizle, sadece sayı göster */
}

.counter-circle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Genel mobil ayarları - Tüm mobil cihazlar için */
@media (max-width: 767px) {
    /* Ana sayfa kanal listesi görünümü için özel durum */
    body.channel-list-page,
    html.channel-list-page {
        height: auto !important;
        overflow: auto !important;
        min-height: 100vh !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .container.channel-list-page, 
    .main-content.channel-list-page {
        height: auto !important;
        overflow: visible !important;
        min-height: 100vh !important;
        display: block !important;
        flex-direction: unset !important;
        position: relative !important;
    }

    /* Normal kanal görünümü için eski ayarlar */
    html:not(.channel-list-page), 
    body:not(.channel-list-page) {
        height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: #f5f5f5;
        touch-action: manipulation;
    }

    .container:not(.channel-list-page), 
    .main-content:not(.channel-list-page) {
        height: calc(var(--vh, 1vh) * 100);
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
    }

    /* Ana sayfa kanal listesi görünümü için özel durum */
    body.channel-list-page {
        overflow: auto !important;
        height: auto !important;
    }

    .container, .main-content {
        height: calc(var(--vh, 1vh) * 100);
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
    }

    /* Ana sayfa kanal listesi görünümü için özel durum */
    .container.channel-list-page, .main-content.channel-list-page {
        height: auto !important;
        overflow: auto !important;
        min-height: 100vh;
    }

    /* Header yüksekliğini kontrol et */
    header {
        flex-shrink: 0; /* Header küçülmesin */
        width: 100%;
        height: auto;
        min-height: 34px; /* %20 daha küçültüldü: 42px -> 34px */
        overflow: visible; /* İçerik taşmasına izin ver */
        position: relative; /* Sticky yerine relative */
        z-index: 1000; /* Z-index artır */
        background: #fff; /* Background ekle */
        border-bottom: 1px solid #e0e0e0;
        display: block;
    }

    .channel-header-bar {
        padding: 7px; /* %20 daha küçültüldü: 9px -> 7px */
        min-height: 34px; /* %20 daha küçültüldü: 42px -> 34px */
        flex-wrap: nowrap;
        gap: 5px; /* %20 daha küçültüldü: 6px -> 5px */
        align-items: center;
        justify-content: space-between;
        background: #fff;
        box-sizing: border-box; /* border-bottom çakışmasını önle */
        display: flex;
        width: 100%;
    }

    /* YOUTUBE MOBIL LAYOUT - TAM EKSİLSİZ UYUM */
    .mobile-view {
        display: flex !important;
        flex-direction: column;
        height: calc(calc(var(--vh, 1vh) * 100) - 43px); /* %20 daha küçültüldü: 54px -> 43px */
        overflow: hidden;
        /* Debug border - remove in production */
        /* border: 2px solid red; */
    }

    .web-view {
        display: none !important;
    }

    /* YouTube benzeri player container - tam genişlik */
    .player-container {
        flex-shrink: 0; /* Player size should never shrink */
        width: 100vw;
        height: 56.25vw; /* 16:9 aspect ratio kesin hesap */
        max-height: 35vh; /* Viewport'un maximum %35'i - daha kompakt */
        margin: 0;
        padding: 0;
        border-radius: 0;
        position: relative;
        background: #000;
        order: 1; /* Player first in order */
    }

    .player-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    /* YouTube benzeri chat container - SADECE MOBİL GÖRÜNÜM - İYİLEŞTİRİLMİŞ */
    .mobile-view .chat-container,
    .mobile-chat-container,
    #mobile-chat-container {
        flex: 1 !important; /* Kalan tüm alanı doldur */
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        overflow: hidden !important;
        order: 2 !important; /* Chat second in order */
        min-height: 250px !important; /* CRITICAL: Minimum yükseklik belirt - azaltıldı */
        height: 100% !important; /* Tam yükseklik */
        /* Scroll container için özel ayarlar */
        position: relative !important;
    }

    /* Mobil chat container'da replyBox'ın doğru sırada görünmesi için */
    .mobile-chat-container .chat-messages {
        order: 1; /* Mesajlar birinci sırada */
    }

    .mobile-chat-container #replyBox {
        order: 2; /* ReplyBox ikinci sırada (mesajlardan sonra, input'tan önce) */
    }

    .mobile-chat-container .chat-input {
        order: 3; /* Input son sırada */
    }

    /* YouTube benzeri chat messages - SADECE MOBİL GÖRÜNÜM - İYİLEŞTİRİLMİŞ */
    .mobile-view .chat-messages,
    .mobile-chat-container .chat-messages,
    #mobile-chat-container .chat-messages {
        flex: 1 !important; /* Kalan alanı tam olarak doldur */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 4px 8px 45px 8px !important; /* Alt padding daha da azaltıldı - input'a çok yakın */
        margin: 0 !important;
        background: #fff !important;
        /* Modern smooth scroll - GÜÇLENDİRİLMİŞ */
        scroll-behavior: smooth !important;
        min-height: 300px !important; /* CRITICAL: Minimum yükseklik belirt */
        height: 100% !important; /* Tam yükseklik */
        /* Scroll performansı için */
        will-change: scroll-position !important;
        transform: translateZ(0) !important; /* Hardware acceleration */
        /* Scroll bar styling sadece webkit ile - daha geniş uyumluluk */
        /* Scroll iyileştirmeleri */
        -webkit-overflow-scrolling: touch !important; /* iOS için smooth scroll */
        overscroll-behavior: contain !important; /* Scroll bounce'u engelle */
    }

    /* Modern scrollbar özellikleri - sadece destekleyen tarayıcılar için */
    @supports (scrollbar-width: thin) {
        .mobile-view .chat-messages,
        .mobile-chat-container .chat-messages {
            scrollbar-width: thin;
            scrollbar-color: #ccc transparent;
        }
    }

    /* Modern overscroll davranışı - sadece destekleyen tarayıcılar için */
    @supports (overscroll-behavior: contain) {
        .mobile-view .chat-messages,
        .mobile-chat-container .chat-messages {
            overscroll-behavior: contain;
        }
        
        .unified-emoji-picker,
        .unified-gif-picker {
            overscroll-behavior: contain !important;
        }
        
        .web-view .chat-messages {
            overscroll-behavior: contain;
        }
    }

    /* Webkit scrollbar styling for mobile */
    .mobile-view .chat-messages::-webkit-scrollbar,
    .mobile-chat-container .chat-messages::-webkit-scrollbar {
        width: 4px;
    }

    .mobile-view .chat-messages::-webkit-scrollbar-track,
    .mobile-chat-container .chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }

    .mobile-view .chat-messages::-webkit-scrollbar-thumb,
    .mobile-chat-container .chat-messages::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }

    /* YouTube benzeri chat input - SADECE MOBİL GÖRÜNÜM - İYİLEŞTİRİLMİŞ */
    .mobile-view .chat-input,
    .mobile-chat-container .chat-input,
    #mobile-chat-container .chat-input {
        flex-shrink: 0 !important; /* Input should never shrink */
        padding: 8px !important; /* %25 daha küçültüldü: 10px -> 8px */
        background: #fff !important;
        border-top: 1px solid #e0e0e0 !important;
        display: flex !important;
        gap: 8px !important; /* Butonlar büyüdüğü için gap artırıldı: 6px -> 8px */
        align-items: center !important;
        /* Safe area + shadow */
        padding-bottom: 0 !important; /* SIFIR boşluk - tam ekran altına */
        margin-bottom: 0 !important; /* SIFIR margin */
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important;
        /* Klavye açılması için özel ayarlar */
        position: fixed !important; /* Fixed position - ekranın altında sabit */
        bottom: 0 !important; /* Alt kenarında kalır */
        left: 0 !important; /* Sol kenarda */
        right: 0 !important; /* Sağ kenarda */
        width: 100% !important; /* Tam genişlik */
        z-index: 10 !important;
    }

    /* MOBIL input wrapper - İYİLEŞTİRİLMİŞ - DENGELI BOYUT */
    .mobile-view .chat-input .input-wrapper,
    .mobile-chat-container .chat-input .input-wrapper {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        max-width: calc(100% - 120px);
        min-width: 200px;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* YouTube benzeri modern input - SADECE MOBİL - İYİLEŞTİRİLMİŞ */
    .mobile-view .chat-input input[type="text"],
    .mobile-chat-container .chat-input input[type="text"] {
        width: 100%;
        padding: 8px 30px 8px 10px; /* Padding normale döndü: 40px -> 30px (karakter sayacı artık dışarıda) */
        border: 1px solid #d0d0d0;
        border-radius: 14px; /* %25 daha küçültüldü: 19px -> 14px */
        font-size: 16px; /* Prevent iOS zoom */
        outline: none;
        box-sizing: border-box;
        background: #f8f8f8;
        transition: border-color 0.2s ease, background-color 0.2s ease;
        /* Touch optimizasyonu */
        touch-action: manipulation;
    }

    .mobile-view .chat-input input[type="text"]:focus,
    .mobile-chat-container .chat-input input[type="text"]:focus {
        border-color: #1976d2;
        background: #fff;
    }

    /* Character count mobil için düzeltme - Badge stili */
    .mobile-view .chat-input #characterCount,
    .mobile-chat-container .chat-input #characterCount {
        position: absolute;
        right: 10px !important; /* Gönder butonunun üst hizasına kadar: 6px -> 10px */
        top: -6px !important; /* Input'un üst kenarından yukarıda */
        font-size: 8px !important; /* %50 büyütüldü: 5px -> 8px */
        color: #fff !important;
        background: #1976d2 !important;
        padding: 2px 5px !important; /* %50 büyütüldü: 1px 3px -> 2px 5px */
        border-radius: 8px !important; /* %50 büyütüldü: 6px -> 8px */
        border: 1px solid #fff !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
        font-weight: bold !important;
        min-width: 20px !important; /* %50 büyütüldü: 14px -> 20px */
        text-align: center !important;
        line-height: 1.2 !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }

    /* YouTube benzeri modern butonlar - SADECE MOBİL - BÜYÜTÜLMÜŞ */
    .mobile-view .chat-input button,
    .mobile-chat-container .chat-input button {
        width: 36px; /* Büyütüldü: 26px -> 36px */
        height: 36px; /* Büyütüldü: 26px -> 36px */
        border: none;
        border-radius: 50%;
        background: #1976d2;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px; /* İçerik tam boyutta - sıfır boşluk */
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        /* Touch optimizasyonu */
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        /* İçeriği tam ortala - sıfır boşluk */
        padding: 0;
        margin: 0;
        line-height: 1;
        overflow: hidden;
        /* SVG görüntü tutarlılığı için */
        position: relative;
    }

    /* Button active states - SADECE MOBİL - İYİLEŞTİRİLMİŞ */
    .mobile-view .chat-input button:active,
    .mobile-chat-container .chat-input button:active {
        transform: scale(0.95);
        background: #1565c0;
    }

    /* Emoji ve GIF butonları - SADECE MOBİL - BÜYÜTÜLMÜŞ */
    .mobile-view .chat-input button#emojiButton,
    .mobile-view .chat-input button#gifButton,
    .mobile-chat-container .chat-input button#emojiButton,
    .mobile-chat-container .chat-input button#gifButton {
        width: 36px; /* Büyütüldü: 26px -> 36px */
        height: 36px; /* Büyütüldü: 26px -> 36px */
        background: #f0f0f0;
        color: #333;
        font-size: 24px; /* Emoji/GIF büyütüldü: 20px -> 24px (SVG ile aynı görsel boyut) */
        border-radius: 50%;
        /* İçeriği tam ortala - sıfır boşluk */
        padding: 0;
        margin: 0;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /* SVG görüntü tutarlılığı için */
        position: relative;
        /* Emoji karakterlerinin tutarlı görünmesi için */
        font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Mozilla", "Twemoji Mozilla", "Segoe UI Symbol", Arial, sans-serif;
    }

    .mobile-view .chat-input button#emojiButton:active,
    .mobile-view .chat-input button#gifButton:active,
    .mobile-chat-container .chat-input button#emojiButton:active,
    .mobile-chat-container .chat-input button#gifButton:active {
        background: #e0e0e0;
        transform: scale(0.95);
    }

    /* Gönder butonu özel ayarları - BÜYÜTÜLMÜŞ */
    .mobile-view .chat-input button[type="submit"],
    .mobile-view .chat-input button#sendButton,
    .mobile-chat-container .chat-input button[type="submit"],
    .mobile-chat-container .chat-input button#sendButton {
        width: 36px; /* Büyütüldü: 26px -> 36px */
        height: 36px; /* Büyütüldü: 26px -> 36px */
        background: #1976d2;
        color: white; /* SVG için beyaz renk */
        font-size: 24px; /* İkon tam boyutta - sıfır boşluk */
        border-radius: 50%;
        /* İçeriği tam ortala - sıfır boşluk */
        padding: 0;
        margin: 0;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /* SVG görüntü tutarlılığı için */
        position: relative;
    }

    /* Gönder butonu SVG ikonları için özel stil - BASİTLEŞTİRİLMİŞ */
    .mobile-view .chat-input button#sendButton svg,
    .mobile-chat-container .chat-input button#sendButton svg {
        stroke: currentColor !important; /* Butonun color değerini kullan (white) */
        fill: none !important;
        width: 20px !important; /* SVG boyutunu büyüt */
        height: 20px !important; /* SVG boyutunu büyüt */
        /* SVG görüntü tutarlılığı için */
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
        /* SVG'nin bozulmaması için */
        transform: none !important;
        transition: none !important;
    }

    /* Reply box mobil için - web benzeri */
    /* Mobil görünüm reply box düzenlemesi */
    .mobile-view #replyBox,
    .mobile-chat-container #replyBox {
        display: none;
        align-items: center;
        gap: 6px; /* Azaltıldı: 8px -> 6px */
        background: #f1f1f1;
        border-left: 3px solid #007bff; /* Azaltıldı: 4px -> 3px */
        padding: 6px 10px; /* Azaltıldı: 8px 12px -> 6px 10px */
        margin: 4px 8px 4px 8px; /* Azaltıldı: 8px 12px 6px 12px -> 4px 8px 4px 8px */
        border-radius: 5px; /* Azaltıldı: 6px -> 5px */
        position: relative;
        font-size: 12px; /* Azaltıldı: 14px -> 12px */
        order: -1; /* Chat input'tan önce görünmesi için */
        flex-shrink: 0; /* Küçülmemesi için */
    }

    .mobile-view #replyBox span,
    .mobile-chat-container #replyBox span {
        font-size: 12px; /* Azaltıldı: 14px -> 12px */
        line-height: 1.2;
    }

    .mobile-view #replyBoxUser,
    .mobile-chat-container #replyBoxUser {
        font-weight: bold;
        color: #007bff;
        font-size: 12px;
    }

    .mobile-view #replyBoxMessage,
    .mobile-chat-container #replyBoxMessage {
        color: #333;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px; /* Mobilde maksimum genişlik */
    }

    /* Web benzeri chat message styling - MOBİL İÇİN KOMPAKT TEK SATIR DÜZEN */
    .mobile-view .chat-message,
    .mobile-chat-container .chat-message {
        display: block;
        margin-bottom: 3px; /* Daha az boşluk: 6px -> 3px */
        padding: 6px 8px; /* Daha az padding: 8px 10px -> 6px 8px */
        border-radius: 12px; /* Daha yuvarlak: 3px -> 12px */
        transition: all 0.2s ease;
        cursor: pointer;
        line-height: 1.3; /* Daha kompakt: 1.4 -> 1.3 */
        background: rgba(248, 250, 252, 0.6); /* Hafif arka plan */
        border: 1px solid rgba(226, 232, 240, 0.8); /* Hafif border */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Hafif gölge */
    }

    .mobile-view .chat-message:hover,
    .mobile-chat-container .chat-message:hover {
        background: rgba(239, 246, 255, 0.8); /* Mavi ton hover */
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px); /* Hafif yükselme efekti */
    }

    /* Avatar web benzeri - float left - %15 küçültüldü - kullanıcı adı ile hizalı */
    .mobile-view .message-avatar,
    .mobile-chat-container .message-avatar {
        float: left;
        margin-right: 8px; /* Web ile aynı */
        width: 27px; /* %15 küçültüldü: 32px -> 27px */
        height: 27px; /* %15 küçültüldü: 32px -> 27px */
        border-radius: 50%;
        overflow: hidden;
        margin-top: -2px; /* Kullanıcı adı ile hizalama için yukarıya taşı */
        vertical-align: top; /* Dikey hizalama */
        position: relative; /* Pozisyon ayarı için */
        display: flex; /* Flexbox ile ortalama */
        align-items: center; /* Dikey ortalama */
        justify-content: center; /* Yatay ortalama */
    }

    .mobile-view .message-avatar img,
    .mobile-chat-container .message-avatar img {
        width: 100% !important; /* Container'ı tam doldur */
        height: 100% !important; /* Container'ı tam doldur */
        object-fit: cover !important;
        border-radius: 50% !important;
        display: block !important;
        margin: 0 !important; /* Margin'i sıfırla */
        aspect-ratio: 1/1 !important;
        flex-shrink: 0 !important; /* Küçülmeyi engelle */
    }

    /* Message content - Geliştirilmiş okunabilirlik */
    .mobile-view .message-content,
    .mobile-chat-container .message-content {
        overflow: hidden;
        font-size: 14px; /* Daha okunabilir: 13px -> 14px */
        line-height: 1.3; /* Daha kompakt: 1.4 -> 1.3 */
        margin-top: 0;
        padding-top: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Modern font stack */
        letter-spacing: 0.3px; /* Hafif harf aralığı */
    }

    /* Username - Daha belirgin ve okunabilir */
    .mobile-view .message-content .message-username,
    .mobile-chat-container .message-content .message-username,
    .mobile-view .message-content .username-clickable,
    .mobile-chat-container .message-content .username-clickable {
        display: inline;
        font-weight: 600; /* Daha belirgin: bold -> 600 */
        font-size: 14px; /* Daha okunabilir: 13px -> 14px */
        margin-right: 4px; /* Daha az boşluk: 8px -> 4px */
        vertical-align: baseline;
        line-height: 1.3; /* Daha kompakt: 1.4 -> 1.3 */
        text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Hafif gölge için netlik */
    }

    /* Sadece rol emojilerinin boyutunu %25 küçült */
    .mobile-view .message-content .username-clickable,
    .mobile-chat-container .message-content .username-clickable {
        font-size: 14px; /* Kullanıcı adı normal boyutta */
    }
    
    /* Sadece emoji karakterlerini küçült - Unicode emoji aralığı */
    .mobile-view .message-content .username-clickable,
    .mobile-chat-container .message-content .username-clickable {
        font-size: 14px; /* Kullanıcı adı normal boyutta */
    }
    
    /* Sadece emoji karakterlerini küçült - Unicode emoji aralığı */
    .mobile-view .message-content .username-clickable,
    .mobile-chat-container .message-content .username-clickable {
        font-size: 14px; /* Kullanıcı adı normal boyutta */
    }
    
    /* Emoji karakterlerini hedefle - Unicode emoji aralığı */
    .mobile-view .message-content .username-clickable:has(span),
    .mobile-chat-container .message-content .username-clickable:has(span) {
        font-size: 14px; /* Kullanıcı adı normal boyutta */
    }
    
    /* Kullanıcı adı normal boyutta kalacak */
    .mobile-view .message-content .username-clickable,
    .mobile-chat-container .message-content .username-clickable {
        font-size: 14px; /* Kullanıcı adı normal boyutta */
    }
    
    /* Emoji karakterleri için özel sınıf */
    .role-emoji-small {
        font-size: 10.5px !important; /* %25 küçültüldü */
        vertical-align: middle !important; /* Orta hizada göster */
        line-height: 1 !important; /* Satır yüksekliğini düzelt */
        display: inline-block !important; /* Inline-block yap */
    }
    
    /* Süper admin emojisi için özel düzeltme */
    .role-emoji-small.superadmin-emoji {
        vertical-align: middle !important; /* Süper admin emojisi de aynı hizalama */
        position: relative !important;
        top: -1px !important; /* Hafif yukarı çek */
    }

    .mobile-view .message-content .message-text,
    .mobile-chat-container .message-content .message-text {
        display: inline;
        font-size: 14px; /* Daha okunabilir: 13px -> 14px */
        word-wrap: break-word;
        color: #2c3e50; /* Daha koyu ve okunabilir renk: #333 -> #2c3e50 */
        font-weight: 400; /* Normal ağırlık */
        line-height: 1.3; /* Daha kompakt: 1.4 -> 1.3 */
    }

    .mobile-view .message-content .message-time,
    .mobile-chat-container .message-content .message-time {
        float: right; /* Sağa hizala */
        font-size: 11px; /* Daha okunabilir: 10px -> 11px */
        color: #6b7280; /* Daha okunabilir gri renk: #888 -> #6b7280 */
        margin-left: 8px; /* Daha fazla boşluk: 6px -> 8px */
        margin-top: 2px; /* Üstten küçük boşluk */
        clear: right; /* Float temizleme */
        font-weight: 500; /* Hafif kalın */
        background: rgba(255, 255, 255, 0.8); /* Hafif arka plan */
        padding: 1px 4px; /* Küçük padding */
        border-radius: 8px; /* Yuvarlak köşeler */
    }

    /* Clear float */
    .mobile-view .chat-message::after,
    .mobile-chat-container .chat-message::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Reply preview mobil için - web benzeri */
    .mobile-view .reply-preview,
    .mobile-chat-container .reply-preview {
        background: #f6f6f6;
        border-left: 2px solid #007bff; /* Azaltıldı: 3px -> 2px */
        padding: 2px 6px; /* Azaltıldı: 4px 8px -> 2px 6px */
        margin-bottom: 2px; /* Azaltıldı: 4px -> 2px */
        border-radius: 3px; /* Azaltıldı: 4px -> 3px */
        font-size: 11px; /* Azaltıldı: 12px -> 11px */
        clear: both;
    }

    .mobile-view .reply-preview span,
    .mobile-chat-container .reply-preview span {
        font-size: 11px; /* Azaltıldı: 12px -> 11px */
    }

    /* Channel info responsive */
    .channel-info {
        flex: 1;
        min-width: 0; /* Flexbox overflow fix */
        display: flex;
        align-items: center;
        gap: 8px;
        overflow: hidden;
    }

    .channel-title-clickable {
        display: flex;
        align-items: center; /* Ortala */
        justify-content: center; /* Yatayda ortala */
        min-width: 0;
        max-width: 150px; /* Limit maximum width */
        min-height: 24px; /* Minimum yükseklik */
        padding: 4px 8px; /* İç boşluk artır */
        border-radius: 8px; /* Yuvarlak köşeler */
        position: relative; /* Overlay için */
        overflow: hidden; /* Taşan içeriği gizle */
    }

    /* Background overlay için pseudo element */
    .channel-title-clickable::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4); /* Koyu overlay */
        z-index: 1;
    }

    .channel-title {
        font-size: 12px; /* Küçült: 14px -> 12px */
        white-space: normal; /* Çok satırlı metin için */
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        line-height: 1.1; /* Satır yüksekliği */
        word-break: break-word; /* Uzun kelimeleri böl */
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Maksimum 3 satır */
        -webkit-box-orient: vertical;
        max-height: calc(1.1em * 3); /* 3 satır için maksimum yükseklik */
        color: white; /* Beyaz metin */
        text-shadow: 0 0 8px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.8); /* Güçlü gölge */
        font-weight: bold; /* Kalın yazı */
        text-align: center; /* Ortala */
        position: relative; /* Overlay üstünde */
        z-index: 2;
        width: 100%; /* Tam genişlik */
    }

    .channels-button {
        font-size: 12px; /* Kanal butonu ile aynı font boyutu */
        padding: 4px 8px; /* Kanal butonu ile aynı padding */
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 24px; /* Kanal butonu ile aynı yükseklik */
        border-radius: 8px; /* Kanal butonu ile aynı border-radius */
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold; /* Kanal butonu ile aynı font-weight */
    }

    /* Header Butonları Grubu - Mobil */
    .header-buttons-group {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        order: 3;
        margin-left: auto;
        margin-right: 4px;
    }

    /* User info container */
    .user-info-container {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        order: 5;
        margin-left: 0;
    }

    /* Mobil header butonları boyutları - %15 küçültüldü */
.online-users-counter, .online-count, .online-users-count, .install-icon {
    font-size: 12px; /* %15 küçültüldü: 14px -> 12px */
    margin-right: 4px;
    width: 25px; /* %15 küçültüldü: 29px -> 25px */
    height: 25px; /* %15 küçültüldü: 29px -> 25px */
    min-width: 25px;
    min-height: 25px;
}

    .counter-number {
        font-size: 12px; /* %15 küçültüldü: 14px -> 12px */
    }

    .install-icon i {
        font-size: 12px; /* İkon boyutu da uyumlu */
    }

    .counter-label {
        display: none; /* Hide "online" text on mobile */
    }

    /* PWA Yeniden Yükleme butonu mobil konumu */
    .install-icon {
        order: 3; /* Bildirim ikonundan sonra */
        margin-left: 0;
        flex-shrink: 0;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Bildirim ikonu mobil konumu */
    .notification-icon, .notification-bell, .notification-btn {
        order: 2; /* Uygulama ismi butonundan sonra */
        margin-right: 6px;
        margin-left: 0;
        flex-shrink: 0;
        position: relative;
        background: transparent;
        border: none;
        padding: 4px;
        cursor: pointer;
        border-radius: 50%;
        transition: background-color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .notification-icon:hover, .notification-bell:hover, .notification-btn:hover {
        background: rgba(0,0,0,0.1);
    }

    .notification-bell .bell-icon, .notification-btn .bell-icon {
        width: 16px;
        height: 16px;
        fill: #666;
    }

    .notification-bell .notification-badge, .notification-btn .notification-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        background: #dc3545;
        color: white;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        font-size: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    /* Online sayaç mobil konumu */
    .online-users-counter {
        order: 4; /* İndirme butonundan sonra */
        margin-right: 6px;
        margin-left: 0;
        flex-shrink: 0;
    }

    /* Kanal arama butonu mobil konumu */
    .channel-search-button {
        order: 6; /* En son */
        margin-right: 6px;
        margin-left: 0;
        flex-shrink: 0;
    }

    /* Uygulama ismi butonu mobil konumu */
    .app-title-button {
        order: 1; /* En başta */
        margin-right: 6px;
        margin-left: 0;
        flex-shrink: 0;
    }

    /* Kanal başlığı mobil konumu */
    .channel-title-clickable {
        order: 1; /* En başta */
        margin-right: 6px;
        margin-left: 0;
        flex-shrink: 0;
    }

    /* Kanallar butonu mobil konumu */
    .channels-button {
        order: 1; /* En başta */
        margin-right: 6px;
        margin-left: 0;
        flex-shrink: 0;
    }

    /* Kullanıcı bilgileri mobil konumu */
    .user-info-container {
        order: 5; /* Online sayaçtan sonra */
        margin-left: auto; /* Sağa yasla */
        flex-shrink: 0;
    }

    .login-btn {
        font-size: 10px !important; /* Küçültüldü: 12px -> 10px */
        padding: 4px 8px !important; /* Küçültüldü: 6px 10px -> 4px 8px */
        white-space: nowrap !important;
        margin-left: 4px !important; /* Küçültüldü: 8px -> 4px */
        border-radius: 15px !important; /* Küçültüldü: 25px -> 15px */
    }
    
    .login-btn svg {
        width: 12px !important; /* Küçültüldü: 16px -> 12px */
        height: 12px !important; /* Küçültüldü: 16px -> 12px */
        margin-right: 0 !important; /* SVG ile metin arasında boşluk yok */
    }

    /* Scroll fix for iOS */
    .chat-messages::-webkit-scrollbar {
        width: 0;
        background: transparent;
    }

    /* Prevent zoom on input focus */
    input[type="text"], textarea {
        font-size: 16px !important;
    }

    /* Mobil cihazlarda emoji ve GIF butonları için özel CSS */
    #emojiButton, #gifButton, #webEmojiButton, #webGifButton {
        -webkit-tap-highlight-color: rgba(0, 123, 255, 0.3) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 100 !important;
    }
    
    /* Touch feedback */
    #emojiButton:active, #gifButton:active, 
    #webEmojiButton:active, #webGifButton:active {
        transform: scale(0.95) !important;
        background-color: rgba(0, 123, 255, 0.1) !important;
    }

    /* İstek Listesi Konumlandırma Stilleri */

    /* MOBİL GÖRÜNÜM - Sol üst köşe */
    .mobile-request-queue {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 250px;
        max-width: calc(100% - 16px);
        z-index: 10;
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .mobile-request-queue .request-queue-list {
        max-height: 180px; /* Mobilde daha kompakt */
        padding: 6px;
    }

    .mobile-request-queue .request-queue-item {
        padding: 6px;
        gap: 6px;
    }

    .mobile-request-queue .request-avatar {
        width: 18px;
        height: 18px;
    }

    .mobile-request-queue .request-username {
        font-size: 10px;
        max-width: 60px;
    }

    .mobile-request-queue .song-title {
        font-size: 10px;
    }

    .mobile-request-queue .song-duration {
        font-size: 11px;
        color: #007bff !important;
        font-weight: 500;
    }

    .mobile-request-queue .request-number {
        font-size: 10px;
        min-width: 14px;
    }

    /* Player container'a relative position ver */
    .mobile-view .player-container {
        position: relative !important;
    }
    
    /* Mobil buton için ek güvence */
    .mobile-view .mobile-request-button {
        position: absolute !important;
        bottom: 8px !important;
        left: 8px !important;
        z-index: 9999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Web görünümde mobil istek listesini gizle */
    .web-request-queue {
        display: none;
    }

    /* MOBİL GÖRÜNÜM - Sol alt köşe */
    .mobile-request-button {
        position: absolute !important;
        bottom: 8px !important;
        left: 8px !important;
        z-index: 9999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Web butonunu mobilde gizle */
    .web-request-button {
        display: none;
    }

    /* ESKİ MOBİL MÜZİK KONTROLLERİ KALDIRILDI - JavaScript ile dinamik oluşturma kullanılıyor */

    /* Web görünümde yeni mobil stillerini gizle */
    .web-request-queue,
    .web-request-button {
        display: none !important;
    }

    /* Eski mobil stillerini devre dışı bırak */
    .mobile-request-queue,
    .mobile-request-button {
        display: none !important;
    }
}

/* Mobil picker'lar için özel CSS */
.unified-emoji-picker,
.unified-gif-picker {
    /* Modern scroll ve transform optimizasyonu */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
}

/* iOS Safari için özel düzeltmeler */
@supports (-webkit-touch-callout: none) {
    .unified-emoji-picker[style*="display: block"],
    .unified-gif-picker[style*="display: block"] {
        position: fixed !important;
        bottom: 70px !important;
        left: 5px !important;
        right: 5px !important;
        width: auto !important;
        z-index: 999999 !important;
        /* Modern transform optimizasyonu */
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
    }
    
    /* iOS'ta keyboard açılınca pozisyon ayarla */
    @media (max-height: 500px) {
        .unified-emoji-picker[style*="display: block"],
        .unified-gif-picker[style*="display: block"] {
            bottom: 10px !important;
            max-height: 300px !important;
        }
    }
}

/* Android için özel düzeltmeler */
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1) {
    .unified-emoji-picker,
    .unified-gif-picker {
        position: fixed !important;
        z-index: 999999 !important;
        /* Modern 3D transform optimizasyonu */
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Tablet görünüm (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 0;
        height: calc(100vh - 42px); /* Header yüksekliği çıkarıldı */
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 0;
        width: 100%;
    }

    .mobile-view {
        display: none !important;
    }
}

/* Büyük ekran görünüm (1024px+) */
@media (min-width: 1024px) {
    .container {
        padding: 0;
        height: calc(100vh - 42px); /* Header yüksekliği çıkarıldı */
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 0;
        width: 100%;
    }

    .mobile-view {
        display: none !important;
    }
}

/* YouTube benzeri landscape orientation */
@media (max-width: 767px) and (orientation: landscape) {
    .mobile-view {
        height: calc(100vh - 45px); /* %20 daha küçültüldü: 56px -> 45px */
    }
    
    .channel-header-bar {
        min-height: 38px; /* %20 daha küçültüldü: 48px -> 38px */
        padding: 5px 8px; /* %20 daha küçültüldü: 6px 10px -> 5px 8px */
    }
    
    .player-container {
        height: 50vh; /* Landscape'de player yarım ekran */
        max-height: 50vh;
    }
    
    .chat-container {
        flex: 1;
        min-height: calc(50vh - 38px); /* %20 daha küçültüldü: 48px -> 38px */
    }
    
    .chat-messages {
        padding: 5px 8px; /* %20 küçültüldü: 6px 10px -> 5px 8px */
    }
    
    .chat-input {
        padding: 6px 10px; /* %20 küçültüldü: 8px 12px -> 6px 10px */
        padding-bottom: max(6px, env(safe-area-inset-bottom)); /* %20 küçültüldü: 8px -> 6px */
    }
    
    /* Landscape mode için kanal başlık optimizasyonu */
    .channel-title-clickable {
        max-width: 120px !important; /* Landscape'de biraz daha geniş */
        padding: 3px 6px !important;
        border-radius: 7px !important;
        min-height: 22px !important;
    }
    
    .channel-title {
        font-size: 10px !important; /* Landscape için uygun boyut */
        line-height: 1.0 !important;
        max-height: calc(1.0em * 2) !important; /* Landscape'de maksimum 2 satır */
        -webkit-line-clamp: 2 !important;
        text-shadow: 0 0 7px rgba(0,0,0,0.8), 0 0 7px rgba(0,0,0,0.8) !important;
    }
    
    .channel-title-clickable::before {
        background: rgba(0, 0, 0, 0.45) !important; /* Orta koyu overlay */
    }
    
    .channels-button {
        font-size: 10px !important; /* Landscape için uygun boyut */
        padding: 3px 6px !important; /* Kanal butonu ile aynı padding */
        min-height: 22px !important; /* Kanal butonu ile aynı yükseklik */
        border-radius: 7px !important; /* Kanal butonu ile aynı border-radius */
    }
}

/* YouTube benzeri küçük ekran optimizasyonu (iPhone SE) */
@media (max-width: 375px) {
    .channel-header-bar {
        padding: 5px !important; /* %20 daha küçültüldü: 6px -> 5px */
        min-height: 29px !important; /* %20 daha küçültüldü: 36px -> 29px */
        gap: 3px !important; /* %20 daha küçültüldü: 4px -> 3px */
    }
    
    .channel-title {
        font-size: 9px !important; /* Daha da küçült: 10px -> 9px */
        line-height: 1.0 !important; /* Satır yüksekliğini azalt */
        max-height: calc(1.0em * 3) !important; /* 3 satır için maksimum yükseklik */
        text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.9) !important; /* Daha güçlü gölge */
    }
    
    .channel-title-clickable {
        max-width: 90px !important; /* Daha da küçült: 96px -> 90px */
        padding: 2px 4px !important; /* İç boşluğu azalt */
        border-radius: 6px !important; /* Küçük köşeler */
        min-height: 20px !important; /* Küçük ekranlar için daha küçük */
    }
    
    .channel-title-clickable::before {
        background: rgba(0, 0, 0, 0.5) !important; /* Daha koyu overlay */
    }
    
    .channels-button {
        font-size: 9px !important; /* Küçük ekranlar için küçült */
        padding: 2px 4px !important; /* Kanal butonu ile aynı padding */
        min-height: 20px !important; /* Kanal butonu ile aynı yükseklik */
        border-radius: 6px !important; /* Kanal butonu ile aynı border-radius */
    }
    
    .login-btn {
        font-size: 8px !important; /* Daha da küçültüldü: 9px -> 8px */
        padding: 2px 4px !important; /* Daha da küçültüldü: 3px 6px -> 2px 4px */
        margin-left: 2px !important; /* Küçültüldü: 4px -> 2px */
        border-radius: 10px !important; /* Küçültüldü: 15px -> 10px */
    }
    
    .login-btn svg {
        width: 10px !important; /* Daha da küçültüldü: 12px -> 10px */
        height: 10px !important; /* Daha da küçültüldü: 12px -> 10px */
        margin-right: 0 !important; /* SVG ile metin arasında boşluk yok */
    }
    
    .player-container {
        max-height: 32vh; /* Küçük ekranlarda player daha kompakt */
    }
    
    .chat-input {
        padding: 6px !important; /* %25 daha küçültüldü: 8px -> 6px */
        gap: 6px !important; /* Küçük ekranlar için gap azaltıldı */
        padding-bottom: 0 !important; /* SIFIR boşluk - küçük ekranlar için */
        margin-bottom: 0 !important; /* SIFIR margin - küçük ekranlar için */
        position: fixed !important; /* Fixed position - küçük ekranlar için */
        left: 0 !important; /* Sol kenarda */
        right: 0 !important; /* Sağ kenarda */
        width: 100% !important; /* Tam genişlik */
    }
    
    .chat-input input[type="text"],
    .mobile-chat-container .chat-input input[type="text"] {
        padding: 4px 25px 4px 6px !important; /* Sağ padding artırıldı: 18px -> 25px (karakter sayacı için), sol padding normale döndü: 20px -> 6px */
        border-radius: 8px !important; /* %25 daha küçültüldü: 11px -> 8px */
        font-size: 15px !important; /* iOS zoom'u önlemek için minimum 15px */
    }
    
    /* Küçük ekranlar için butonlar - BÜYÜTÜLMÜŞ */
    .mobile-view .chat-input button,
    .mobile-chat-container .chat-input button {
        width: 30px !important; /* Büyütüldü: 20px -> 30px */
        height: 30px !important; /* Büyütüldü: 20px -> 30px */
        font-size: 18px !important; /* İçerik tam boyutta - büyütüldü: 16px -> 18px */
        border: none !important;
        border-radius: 50% !important;
        background: #1976d2 !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-view .chat-input button#emojiButton,
    .mobile-view .chat-input button#gifButton,
    .mobile-chat-container .chat-input button#emojiButton,
    .mobile-chat-container .chat-input button#gifButton {
        width: 30px !important; /* Büyütüldü: 20px -> 30px */
        height: 30px !important; /* Büyütüldü: 20px -> 30px */
        font-size: 22px !important; /* Emoji/GIF büyütüldü: 18px -> 22px (SVG ile aynı görsel boyut) */
        background: #f0f0f0 !important;
        color: #333 !important;
    }

    /* Gönder butonu küçük ekranlar için - BÜYÜTÜLMÜŞ */
    .mobile-view .chat-input button[type="submit"],
    .mobile-view .chat-input button#sendButton,
    .mobile-chat-container .chat-input button[type="submit"],
    .mobile-chat-container .chat-input button#sendButton {
        width: 30px !important; /* Büyütüldü: 20px -> 30px */
        height: 30px !important; /* Büyütüldü: 20px -> 30px */
        font-size: 18px !important; /* İkon tam boyutta - büyütüldü: 16px -> 18px */
        background: #1976d2 !important;
        color: white !important; /* SVG için beyaz renk */
    }

    /* Küçük ekranlar için SVG stil - BASİTLEŞTİRİLMİŞ */
    .mobile-view .chat-input button#sendButton svg,
    .mobile-chat-container .chat-input button#sendButton svg {
        stroke: currentColor !important; /* Butonun color değerini kullan (white) */
        fill: none !important;
        /* HTML'deki boyutları kullan, CSS'te override etme */
    }

    .mobile-view .chat-input #characterCount,
    .mobile-chat-container .chat-input #characterCount {
        right: 6px !important; /* Sağdan sola taşındı: right: 6px -> left: 6px */
        font-size: 8px !important; /* %50 büyütüldü: 5px -> 8px */
    }

    .mobile-view {
        height: calc(calc(var(--vh, 1vh) * 100) - 42px) !important; /* %25 daha küçültüldü: 56px -> 42px */
    }
    
    .mobile-view .message-avatar,
    .mobile-chat-container .message-avatar {
        width: 15px; /* %25 küçültüldü: 20px -> 15px */
        height: 15px; /* %25 küçültüldü: 20px -> 15px */
        margin-right: 6px;
        margin-top: -1px; /* Küçük ekranlarda kullanıcı adı ile hizalama */
        display: flex; /* Flexbox ile ortalama */
        align-items: center; /* Dikey ortalama */
        justify-content: center; /* Yatay ortalama */
        border-radius: 50%;
        overflow: hidden;
    }

    .mobile-view .message-avatar img,
    .mobile-chat-container .message-avatar img {
        width: 100% !important; /* Container'ı tam doldur */
        height: 100% !important; /* Container'ı tam doldur */
        object-fit: cover !important;
        border-radius: 50% !important;
        display: block !important;
        margin: 0 !important; /* Margin'i sıfırla */
        aspect-ratio: 1/1 !important;
        flex-shrink: 0 !important; /* Küçülmeyi engelle */
    }

    .mobile-view .message-content,
    .mobile-chat-container .message-content {
        font-size: 12px;
    }

    .mobile-view .message-content .message-username,
    .mobile-chat-container .message-content .message-username {
        font-size: 12px;
    }

    .mobile-view .message-content .message-text,
    .mobile-chat-container .message-content .message-text {
        font-size: 12px;
    }
}

/* =============================================
   WEB VIEW STYLES - TEMIZ VE DÜZGün LAYOUT
   ============================================= */

/* Ana container - Web görünüm */
.web-view {
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 48px); /* Header küçülmesine göre güncellendi: 64px -> 48px */
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: #f5f5f5;
}

/* Web görünümü için kanal başlığı stili */
@media (min-width: 768px) {
    .channel-title {
        color: white !important;
        text-shadow: 0 0 5px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.8) !important;
        font-weight: bold !important;
    }
}

/* Web header düzeltmesi - Tek katman, tam genişlik */
@media (min-width: 768px) {
    header {
        height: 42px; /* Ana header yüksekliği */
        min-height: 42px;
        max-height: 42px;
        background: transparent; /* Şeffaf - channel-header-bar'da stil var */
        border-bottom: none; /* Border yok - channel-header-bar'da var */
        position: relative;
        z-index: 100;
        box-shadow: none; /* Gölge yok - channel-header-bar'da var */
        display: flex;
        align-items: center;
        width: 100vw; /* Tam pencere genişliği */
        margin: 0;
        padding: 0;
    }

    /* Web görünümü butonları %20 küçültme */
    .channel-title-clickable {
        font-size: 0.8rem !important; /* %20 küçültüldü: 1rem -> 0.8rem */
        padding: 6px 10px !important; /* %20 küçültüldü: 8px 12px -> 6px 10px */
        min-height: 32px !important; /* %20 küçültüldü: 40px -> 32px */
        border-radius: 6px !important; /* %20 küçültüldü: 8px -> 6px */
    }

    .channels-button {
        font-size: 0.8rem !important; /* %20 küçültüldü: 1rem -> 0.8rem */
        padding: 6px 10px !important; /* %20 küçültüldü: 8px 12px -> 6px 10px */
        min-height: 32px !important; /* %20 küçültüldü: 40px -> 32px */
        border-radius: 6px !important; /* %20 küçültüldü: 8px -> 6px */
    }

    .channel-title {
        font-size: 0.8rem !important; /* %20 küçültüldü: 1rem -> 0.8rem */
    }

    /* Web görünümü mesaj saati düzenlemesi */
    .web-view .message-content .message-time {
        float: right !important; /* Sağa hizala */
        font-size: 11px !important;
        color: #6b7280 !important; /* Daha okunabilir gri renk */
        margin-left: 8px !important;
        margin-top: 2px !important; /* Üstten küçük boşluk */
        clear: right !important; /* Float temizleme */
        font-weight: 500 !important; /* Hafif kalın */
        background: rgba(255, 255, 255, 0.8) !important; /* Hafif arka plan */
        padding: 1px 4px !important; /* Küçük padding */
        border-radius: 8px !important; /* Yuvarlak köşeler */
    }

    /* Web görünümü avatar hizalama düzeltmesi - %25 küçültüldü */
    .web-view .message-avatar {
        float: left !important;
        margin-right: 8px !important;
        width: 17px !important; /* %25 küçültüldü: 23px -> 17px */
        height: 17px !important; /* %25 küçültüldü: 23px -> 17px */
        border-radius: 50% !important;
        overflow: hidden !important;
        margin-top: -1px !important; /* %15 yukarı kaydırma: 30px * 0.15 ≈ 4.5px, -3px kullanıyoruz */
        vertical-align: top !important; /* Dikey hizalama */
        position: relative !important; /* Pozisyon ayarı için */
    }

    .web-view .message-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }

    /* Web görünümü message content hizalama */
    .web-view .message-content {
        overflow: hidden !important;
        margin-top: 0 !important; /* Üst margin sıfırla */
        padding-top: 0 !important; /* Üst padding sıfırla */
        line-height: 1.3 !important; /* Web için uygun satır yüksekliği */
    }

    /* Web görünümü username hizalama */
    .web-view .message-content .message-username,
    .web-view .message-content .username-clickable {
        vertical-align: baseline !important; /* Baseline hizalama */
        line-height: 1.3 !important; /* Satır yüksekliği */
        display: inline !important;
        font-weight: bold !important;
    }

    .channel-header-bar {
        height: 100%;
        min-height: 42px; /* Header ile aynı yükseklik */
        padding: 8px 12px; /* Tek katman için uygun padding */
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100vw; /* Tam pencere genişliği */
        background: #fff; /* Ana header arka planı */
        border-bottom: 1px solid #e0e0e0; /* Ana header border'ı */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ana header gölgesi */
        margin: 0;
        position: relative;
        left: 0;
    }

    /* Header Butonları Grubu - Web */
    .header-buttons-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-left: auto;
        margin-right: 8px;
    }

    /* Web görünümü için header butonları boyutları - %15 küçültüldü */
    .user-info-container .online-count, 
    .user-info-container .online-users-count,
    .header-buttons-group .online-users-counter,
    .header-buttons-group .install-icon {
        font-size: 13px; /* %15 küçültüldü: 15px -> 13px */
        margin-right: 6px;
        width: 27px; /* %15 küçültüldü: 32px -> 27px */
        height: 27px; /* %15 küçültüldü: 32px -> 27px */
        min-width: 27px;
        min-height: 27px;
    }

    .user-info-container .online-count .count,
    .user-info-container .online-users-count .count,
    .header-buttons-group .counter-number {
        font-size: 13px; /* %15 küçültüldü: 15px -> 13px */
    }

    .header-buttons-group .install-icon i {
        font-size: 13px; /* Web ikonu boyutu */
    }
    
    /* Web görünümünde PWA yeniden yükleme butonu her zaman görünür */
    .header-buttons-group .install-icon {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Web görünümü için bildirim zili */
    .user-info-container .notification-bell,
    .user-info-container .notification-btn {
        position: relative;
        background: transparent;
        border: none;
        padding: 6px;
        cursor: pointer;
        border-radius: 50%;
        transition: background-color 0.2s;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-info-container .notification-bell:hover,
    .user-info-container .notification-btn:hover {
        background: rgba(0,0,0,0.1);
    }

    .user-info-container .notification-bell .bell-icon,
    .user-info-container .notification-btn .bell-icon {
        width: 18px;
        height: 18px;
        fill: #666;
    }

    .user-info-container .notification-bell .notification-badge,
    .user-info-container .notification-btn .notification-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        background: #dc3545;
        color: white;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        font-size: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
}

/* Ana content row */
.web-view .yt-main-row {
    display: flex;
    flex: 1;
    gap: 20px;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

/* Video column */
.web-view .yt-video-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative; /* Pozisyon ekle */
}

/* Player box */
.web-view .yt-player-box {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.web-view .yt-player-box iframe,
.web-view .yt-player-box .youtube-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* Chat column - Responsive.css'de mobil stil override ediliyor */
.web-view .yt-chat-col {
    flex: 0 0 246px; /* %25 daha küçültüldü: 328px -> 246px */
    width: 246px; /* %25 daha küçültüldü: 328px -> 246px */
    height: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat container */
.web-view .chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
}

/* Chat messages */
.web-view .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: #fff;
    scroll-behavior: smooth;
    /* Scroll iyileştirmeleri */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    will-change: scroll-position;
    transform: translateZ(0);
}

/* Web view mesaj okunabilirlik iyileştirmeleri */
.web-view .chat-message {
    margin-bottom: 4px; /* Daha az boşluk: 8px -> 4px */
    padding: 8px 10px; /* Daha az padding: 10px 12px -> 8px 10px */
    border-radius: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
    background: rgba(248, 250, 252, 0.6);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.web-view .chat-message:hover {
    background: rgba(239, 246, 255, 0.8);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.web-view .message-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.3px;
    line-height: 1.3; /* Daha kompakt: 1.4 -> 1.3 */
    font-size: 14px;
}

.web-view .message-content .message-username,
.web-view .message-content .username-clickable {
    font-weight: 600;
    font-size: 14px;
    margin-right: 4px; /* Daha az boşluk: 8px -> 4px */
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Sadece rol emojilerinin boyutunu %25 küçült */
.web-view .message-content .username-clickable {
    font-size: 14px; /* Kullanıcı adı normal boyutta */
}

/* Kullanıcı adı normal boyutta kalacak */
.web-view .message-content .username-clickable {
    font-size: 14px; /* Kullanıcı adı normal boyutta */
}

.web-view .message-content .message-text {
    color: #2c3e50;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3; /* Daha kompakt: 1.4 -> 1.3 */
}

/* Chat input - NET GÖRÜNÜM */
.web-view .chat-input,
.web-view #webChatInput {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 9px; /* %25 daha küçültüldü: 12px -> 9px */
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    gap: 6px; /* %25 daha küçültüldü: 8px -> 6px */
    height: 48px; /* %25 daha küçültüldü: 64px -> 48px */
    min-height: 48px; /* %25 daha küçültüldü: 64px -> 48px */
    max-height: 48px; /* %25 daha küçültüldü: 64px -> 48px */
    box-sizing: border-box;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.web-view .chat-input .input-wrapper,
.web-view #webChatInput .input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.web-view .chat-input input[type="text"],
.web-view #webMessageInput {
    width: 100%;
    padding: 8px 30px 8px 9px; /* %25 daha küçültüldü: 10px 40px 10px 12px -> 8px 30px 8px 9px */
    border: 1px solid #ddd;
    border-radius: 15px; /* %25 daha küçültüldü: 20px -> 15px */
    font-size: 14px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.web-view .chat-input input[type="text"]:focus,
.web-view #webMessageInput:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.web-view .chat-input button,
.web-view #webChatInput button {
    width: 26px; /* %25 daha küçültüldü: 35px -> 26px */
    height: 26px; /* %25 daha küçültüldü: 35px -> 26px */
    border: none;
    border-radius: 50%;
    background: #007bff;
    color: white; /* SVG için beyaz renk */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px; /* %25 daha küçültüldü: 13px -> 10px */
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* SVG görüntü tutarlılığı için */
    position: relative;
    padding: 0;
    margin: 0;
    line-height: 1;
    overflow: hidden;
}

.web-view .chat-input button:hover,
.web-view #webChatInput button:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* Web gönder butonu SVG ikonları için özel stil - BASİTLEŞTİRİLMİŞ */
.web-view .chat-input button#webSendButton svg,
.web-view #webChatInput button#webSendButton svg {
    stroke: currentColor; /* Butonun color değerini kullan (white) */
    fill: none;
    /* HTML'deki boyutları kullan, CSS'te override etme */
    /* SVG görüntü tutarlılığı için */
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    /* SVG'nin bozulmaması için */
    transform: none !important;
    transition: none !important;
    /* SVG boyutunu %20 büyüt ve tam ortalı yap */
    width: 14.4px !important; /* 12px'den %20 büyütüldü: 12px * 1.2 = 14.4px */
    height: 14.4px !important; /* 12px'den %20 büyütüldü: 12px * 1.2 = 14.4px */
    /* Tam ortalı yapmak için */
    margin: auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Web emoji ve GIF butonları için özel stiller */
.web-view .chat-input button#webEmojiButton,
.web-view .chat-input button#webGifButton,
.web-view #webChatInput button#webEmojiButton,
.web-view #webChatInput button#webGifButton {
    background: #f0f0f0;
    color: #333;
    /* Emoji karakterlerinin tutarlı görünmesi için */
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Mozilla", "Twemoji Mozilla", "Segoe UI Symbol", Arial, sans-serif;
    /* SVG görüntü tutarlılığı için */
    position: relative;
    padding: 0;
    margin: 0;
    line-height: 1;
    overflow: hidden;
    /* Emoji boyutunu %50 büyüt */
    font-size: 15px !important; /* 10px'den %50 büyütüldü: 10px * 1.5 = 15px */
}

/* Karakter sayısı */
.web-view #webCharacterCount {
    position: absolute;
    right: 9px; /* %25 daha küçültüldü: 12px -> 9px */
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px; /* %25 daha küçültüldü: 10px -> 8px */
    color: #888;
    pointer-events: none;
    background: rgba(255,255,255,0.9);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Tablet görünüm için responsive */
@media (min-width: 768px) and (max-width: 1023px) {
    .web-view .yt-main-row {
        gap: 15px;
        padding: 15px;
    }
    
    .web-view .yt-chat-col {
        flex: 0 0 196px; /* %25 daha küçültüldü: 262px -> 196px */
        width: 196px; /* %25 daha küçültüldü: 262px -> 196px */
    }
    
    /* Tablet için web-all-controls düzenleme */
    .web-view .yt-video-col .web-all-controls {
        gap: 6px;
        padding: 8px;
        max-width: 800px;
    }
    
    /* Tablet için online users sidebar düzenleme */
    .online-users-sidebar {
        width: 240px;
        margin-left: 15px;
    }
    
    .online-users-header {
        padding: 12px 15px;
    }
    
    .online-users-header h3 {
        font-size: 14px;
    }
    
    .online-users-list .user-item {
        padding: 10px 15px;
    }
    
    .online-users-list .user-avatar {
        width: 28px;
        height: 28px;
        margin-right: 10px;
    }
    
    .online-users-list .user-name {
        font-size: 13px;
    }
    
    .online-users-list .user-role {
        font-size: 11px;
    }
    
    .online-users-list .channel-badge,
    .online-users-list .role-badge {
        font-size: 9px;
        padding: 1px 4px;
    }
}

/* Büyük ekran için responsive */
@media (min-width: 1024px) {
    .web-view .yt-main-row {
        gap: 25px;
        padding: 25px;
    }
    
    .web-view .yt-chat-col {
        flex: 0 0 281px; /* %25 daha küçültüldü: 375px -> 281px */
        width: 281px; /* %25 daha küçültüldü: 375px -> 281px */
    }
    
    /* Büyük ekran için web-all-controls düzenleme */
    .web-view .yt-video-col .web-all-controls {
        gap: 8px;
        padding: 10px;
        max-width: 1000px;
    }
    
    /* Büyük ekran için online users sidebar düzenleme */
    .online-users-sidebar {
        width: 320px;
        margin-left: 25px;
    }
    
    .online-users-header {
        padding: 18px 25px;
    }
    
    .online-users-header h3 {
        font-size: 18px;
    }
    
    .online-users-list .user-item {
        padding: 15px 25px;
    }
    
    .online-users-list .user-avatar {
        width: 36px;
        height: 36px;
        margin-right: 15px;
    }
    
    .online-users-list .user-name {
        font-size: 15px;
    }
    
    .online-users-list .user-role {
        font-size: 13px;
    }
    
    .online-users-list .channel-badge,
    .online-users-list .role-badge {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* Mobil görünümde web-view gizle */
@media (max-width: 767px) {
    .web-view {
        display: none !important;
    }
}

/* Input alanı görünürlük iyileştirmeleri - SADECE WEB GÖRÜNÜM */
@media (min-width: 768px) {
    #messageInput {
        background: #ffffff !important;
        border: 2px solid #007bff !important;
        color: #000000 !important;
        font-size: 16px !important;
        padding: 12px !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        outline: none !important;
    }

    #messageInput:focus {
        border-color: #0056b3 !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
    }
}

/* Mobil görünümde input alanı - mavi çerçeve yok */
@media (max-width: 767px) {
    #messageInput {
        background: #f8f8f8 !important;
        border: 1px solid #d0d0d0 !important;
        color: #000000 !important;
        font-size: 16px !important;
        padding: 8px 30px 8px 10px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        outline: none !important;
    }

    #messageInput:focus {
        border-color: #1976d2 !important;
        background: #fff !important;
        box-shadow: none !important;
    }
}

/* Chat input container görünürlük */
.chat-input {
    background: #f8f9fa !important;
    border-top: 2px solid #dee2e6 !important;
    padding: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 100 !important;
}

/* Mobile chat input özel stilleri */
.mobile-chat-container .chat-input {
    position: sticky !important;
    bottom: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

/* Web chat input özel stilleri */
.yt-chat-col .chat-input {
    background: #ffffff !important;
    border-top: 2px solid #28a745 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

/* Landscape mode optimizasyonu */
@media (max-height: 500px) and (orientation: landscape) {
    header {
        min-height: 24px !important; /* %20 daha küçültüldü: 30px -> 24px */
    }

    .channel-header-bar {
        padding: 3px 5px !important; /* %20 daha küçültüldü: 4px 6px -> 3px 5px */
        min-height: 24px !important; /* %20 daha küçültüldü: 30px -> 24px */
        gap: 2px !important; /* %20 daha küçültüldü: 3px -> 2px */
    }

    .mobile-view {
        height: calc(100vh - 29px) !important; /* %20 daha küçültüldü: 36px -> 29px */
    }

    .mobile-view .chat-input,
    .mobile-chat-container .chat-input,
    #mobile-chat-container .chat-input {
        padding: 4px !important; /* %25 daha küçültüldü: 6px -> 4px */
        gap: 3px !important; /* %25 daha küçültüldü: 4px -> 3px */
        min-height: 30px !important; /* %25 daha küçültüldü: 40px -> 30px */
        margin-bottom: 0 !important; /* SIFIR margin - landscape için */
        position: fixed !important; /* Fixed position - landscape için */
        left: 0 !important; /* Sol kenarda */
        right: 0 !important; /* Sağ kenarda */
        width: 100% !important; /* Tam genişlik */
    }

    .mobile-view .chat-input input[type="text"],
    .mobile-chat-container .chat-input input[type="text"] {
        padding: 4px 18px 4px 20px !important; /* Sol padding artırıldı: 6px -> 20px (karakter sayacı için) */
        border-radius: 8px !important; /* %25 daha küçültüldü: 11px -> 8px */
        font-size: 15px !important; /* iOS zoom'u önlemek için minimum 15px */
    }

    .mobile-view .chat-input button,
    .mobile-chat-container .chat-input button {
        width: 28px !important; /* Büyütüldü: 15px -> 28px */
        height: 28px !important; /* Büyütüldü: 15px -> 28px */
        font-size: 14px !important; /* Büyütüldü: 6px -> 14px */
    }

    .mobile-view .chat-input #characterCount,
    .mobile-chat-container .chat-input #characterCount {
        right: 6px !important; /* Sağdan sola taşındı: right: 6px -> left: 6px */
        font-size: 8px !important; /* %50 büyütüldü: 5px -> 8px */
    }
}

/* Gönder butonu küçük ekranlar için */
.mobile-view .chat-input button[type="submit"],
.mobile-view .chat-input button#sendButton,
.mobile-chat-container .chat-input button[type="submit"],
.mobile-chat-container .chat-input button#sendButton {
    width: 36px !important; /* Diğer butonlarla aynı boyut - büyütüldü */
    height: 36px !important; /* Diğer butonlarla aynı boyut - büyütüldü */
    font-size: 20px !important; /* İkon tam boyutta - büyütüldü */
    /* İçeriği tam ortala - sıfır boşluk */
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #1976d2 !important;
    color: white !important; /* SVG için beyaz renk */
}

/* Küçük ekranlar için SVG stil - BASİTLEŞTİRİLMİŞ */
.mobile-view .chat-input button#sendButton svg,
.mobile-chat-container .chat-input button#sendButton svg {
    stroke: currentColor !important; /* Butonun color değerini kullan (white) */
    fill: none !important;
        width: 18px !important; /* SVG boyutunu büyüt */
        height: 18px !important; /* SVG boyutunu büyüt */
}

/* YouTube Oynatıcı Kilitli Mod Stilleri - Responsive */
.youtube-player {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
}

.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
}

/* Mobil cihazlarda YouTube kontrolleri */
@media (max-width: 767px) {
    .youtube-player {
        -webkit-touch-callout: auto !important;
        -webkit-tap-highlight-color: auto !important;
        touch-action: auto !important;
    }
    
    .youtube-player iframe {
        pointer-events: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
    }
}

/* Web görünümde YouTube kontrolleri */
@media (min-width: 768px) {
    .web-view .youtube-player {
        pointer-events: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
    }
    
    .web-view .youtube-player iframe {
        pointer-events: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
    }
}

/* İstek Listesi Konumlandırma Stilleri */

/* WEB GÖRÜNÜM - YouTube altında */
@media (min-width: 768px) {
    .web-request-queue {
        margin-top: 15px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        overflow: hidden;
        position: relative;
        height: auto;
        min-height: 256px; /* 240px liste + 16px padding */
        max-height: 256px; /* Sabit yükseklik */
    }

    .web-request-queue .request-queue-list {
        max-height: 240px !important; /* 6 şarkı için sabit yükseklik */
        min-height: 240px !important; /* Sabit yükseklik garanti et */
        padding: 8px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scroll-behavior: smooth !important;
        display: block !important;
    }

    .web-request-queue .request-queue-item {
        padding: 6px 8px;
        border-radius: 4px;
        margin-bottom: 2px;
        border-bottom: 1px solid #f0f0f0;
    }

    .web-request-queue .request-queue-item:last-child {
        margin-bottom: 0;
        border-bottom: none;
    }

    .web-request-queue .request-queue-item:hover {
        background-color: #f8f9fa;
        border-color: #e9ecef;
    }

    .web-request-queue .request-avatar {
        width: 24px;
        height: 24px;
    }

    .web-request-queue .request-username {
        font-size: 14.4px !important; /* %20 büyütüldü: 12px -> 14.4px */
        max-width: none !important; /* Genişlik sınırını kaldır */
        white-space: nowrap !important; /* Tek satırda göster */
        overflow: visible !important; /* Taşma görünsün */
        text-overflow: none !important; /* ... ile kesmeyi iptal et */
        width: auto !important; /* Genişlik otomatik */
    }

    .web-request-queue .song-title {
        font-size: 12px;
    }

    .web-request-queue .song-duration {
        font-size: 11px;
        color: #007bff !important;
        font-weight: 500;
    }

    .web-request-queue .request-number {
        font-size: 13px;
        min-width: 18px;
    }

    /* Mobil görünümde web istek listesini gizle */
    .mobile-request-queue {
        display: none;
    }
}

/* Scrollbar Stilleri - İstek Listesi */
.request-queue-list::-webkit-scrollbar {
    width: 6px;
}

.request-queue-list::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 3px;
    margin: 4px 0;
}

.request-queue-list::-webkit-scrollbar-thumb {
    background: #17a2b8;
    border-radius: 3px;
    transition: background 0.2s ease;
}

.request-queue-list::-webkit-scrollbar-thumb:hover {
    background: #138496;
}

/* Web görünümü için özel scrollbar stilleri */
@media (min-width: 768px) {
    .web-request-queue .request-queue-list::-webkit-scrollbar {
        width: 8px;
    }

    .web-request-queue .request-queue-list::-webkit-scrollbar-track {
        background: #f1f3f4;
        border-radius: 4px;
        margin: 2px 0;
    }

    .web-request-queue .request-queue-list::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #17a2b8, #138496);
        border-radius: 4px;
        border: 1px solid rgba(255,255,255,0.1);
    }

    .web-request-queue .request-queue-list::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #138496, #117a8b);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}

/* Şarkı İsteme Butonları Konumlandırma */

/* WEB GÖRÜNÜM - İstek listesi üstünde */
@media (min-width: 768px) {
    .web-request-button {
        margin-top: 8px;
        margin-bottom: 8px;
        padding: 0 8px;
        gap: 8px;
    }

    .web-request-button button {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.15);
        color: black;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        min-width: 110px;
        height: 36px;
        flex: 1;
        max-width: 140px;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }

    .web-request-button button:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .web-request-button button:active {
        transform: translateY(0);
        box-shadow: 0 1px 4px rgba(23,162,184,0.2);
    }

    .web-request-button button span:first-child {
        font-size: 12px;
    }

    .web-request-button button span:last-child {
        font-weight: 500;
    }

    .web-request-button .request-queue-list {
        max-height: 240px !important; /* 6 şarkı için sabit yükseklik */
        min-height: 240px !important; /* Sabit yükseklik garanti et */
        padding: 8px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scroll-behavior: smooth !important;
        display: block !important;
    }

    .web-request-button .request-queue-item {
        padding: 6px 8px;
        border-radius: 4px;
        margin-bottom: 2px;
        border-bottom: 1px solid #f0f0f0;
    }

    .web-request-button .request-queue-item:last-child {
        margin-bottom: 0;
        border-bottom: none;
    }

    .web-request-button .request-queue-item:hover {
        background-color: #f8f9fa;
        border-color: #e9ecef;
    }

    .web-request-button .request-avatar {
        width: 24px;
        height: 24px;
    }

    .web-request-button .request-username {
        font-size: 14.4px !important; /* %20 büyütüldü: 12px -> 14.4px */
        max-width: none !important; /* Genişlik sınırını kaldır */
        white-space: nowrap !important; /* Tek satırda göster */
        overflow: visible !important; /* Taşma görünsün */
        text-overflow: none !important; /* ... ile kesmeyi iptal et */
        width: auto !important; /* Genişlik otomatik */
    }

    .web-request-button .song-title {
        font-size: 12px;
    }

    .web-request-button .song-duration {
        font-size: 11px;
        color: #007bff !important;
        font-weight: 500;
    }

    .web-request-button .request-number {
        font-size: 13px;
        min-width: 18px;
    }

    /* Mobil görünümde web istek listesini gizle */
    .mobile-request-queue {
        display: none;
    }
}

/* Mobil görünümde web istek listesini gizle */
.mobile-request-queue {
    display: none;
}

/* Web görünümde mobil benzeri istek listesi */
@media (min-width: 768px) {
    .mobile-music-controls,
    .mobile-request-queue-new,
    .mobile-request-button-new {
        display: none !important;
    }

    /* Eski mobil stillerini de gizle */
    .mobile-request-queue,
    .mobile-request-button {
        display: none !important;
    }
}

/* Web İstek Listesi Container - Basit */
@media (min-width: 768px) {
    .web-request-queue-container {
        margin-top: 15px;
    }
    
    .web-request-queue-container .song-title {
        color: #000 !important;
    }
}

/* Mobilde web istek listesini gizle */
@media (max-width: 767px) {
    .web-request-queue-container {
        display: none !important;
    }

    /* Web istek listesi için kesin scroll garantisi */
    .web-view .request-queue-list,
    .web-request-queue .request-queue-list,
    .web-request-button .request-queue-list {
        max-height: 240px !important; /* 6 şarkı için sabit yükseklik: (6 × 38px) + 12px padding */
        min-height: 240px !important; /* Sabit yükseklik garanti et */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scroll-behavior: smooth !important;
        display: block !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Container'lara sabit yükseklik */
    .web-request-queue {
        max-height: 256px !important; /* Sabit yükseklik */
        min-height: 256px !important; /* Sabit yükseklik garanti et */
        overflow: hidden !important;
    }
    
    .web-request-button {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* === WEB İSTEK LİSTESİ KULLANICI ADI BÜYÜK GÖSTERİM DÜZELTMESİ === */
@media (min-width: 768px) {
    /* Güçlü override - web istek listesi kullanıcı adları */
    .web-view .request-queue-container .request-username,
    .web-view .web-request-queue .request-username,
    .web-view .web-request-button .request-username,
    .web-view div[id*="requestQueue"] .request-username,
    span.request-username {
        font-size: 14.4px !important; /* %20 büyütüldü: 12px -> 14.4px */
        max-width: none !important; /* Genişlik sınırını kaldır */
        white-space: nowrap !important; /* Tek satırda göster */
        overflow: visible !important; /* Taşma görünsün */
        text-overflow: none !important; /* ... ile kesmeyi iptal et */
        width: auto !important; /* Genişlik otomatik */
        display: inline-block !important; /* Inline block için */
    }
    
    /* İstek listesi öğe genişliğini artır */
    .web-view .request-queue-item {
        min-width: 300px !important; /* Minimum genişlik artır */
        width: auto !important;
    }
    
    /* Request user div'ini de genişlet */
    .web-view .request-user {
        min-width: 150px !important; /* Kullanıcı alanını genişlet */
        flex: 0 0 auto !important;
    }
}

/* Placeholder koruma - JavaScript'in değiştirmesini engelle */
.chat-input input[type="text"]:not([data-user-logged-in="true"]) {
    /* Giriş yapmamış kullanıcılar için placeholder'ı koru */
    color: #888 !important;
}

.chat-input input[type="text"]:not([data-user-logged-in="true"])::placeholder {
    /* Giriş yapmamış kullanıcılar için placeholder'ı zorla koru */
    content: "Giriş Yapmalısınız.." !important;
    color: #888 !important;
    opacity: 1 !important;
}

/* Giriş yapmış kullanıcılar için normal placeholder */
.chat-input input[type="text"][data-user-logged-in="true"]::placeholder {
    color: #999 !important;
}

/* =============================================
   PLACEHOLDER KORUMA SİSTEMİ - GÜÇLENDİRİLMİŞ
   ============================================= */

/* Giriş yapmamış kullanıcılar için placeholder koruması */
.chat-input input[type="text"]:not([data-user-logged-in="true"]) {
    /* Placeholder'ı kesinlikle koru */
    color: #666 !important;
}

.chat-input input[type="text"]:not([data-user-logged-in="true"])::placeholder {
    /* Giriş yapmamış kullanıcılar için sabit placeholder */
    content: "Giriş Yapmalısınız.." !important;
    color: #999 !important;
    opacity: 1 !important;
    font-style: italic !important;
}

/* Giriş yapmış kullanıcılar için normal placeholder */
.chat-input input[type="text"][data-user-logged-in="true"]::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* JavaScript'in placeholder'ı değiştirmesini engelle */
.chat-input input[type="text"] {
    /* Placeholder koruma sistemi */
    -webkit-text-fill-color: inherit !important;
    -webkit-user-modify: read-only !important;
    -moz-user-modify: read-only !important;
    -ms-user-modify: read-only !important;
    user-modify: read-only !important;
}

/* Tüm placeholder değişikliklerini engelle */
.chat-input input[type="text"]::placeholder {
    /* Placeholder'ı PHP'den gelen değerle koru */
    transition: none !important;
    animation: none !important;
}

/* Mobil ve web görünümü için ayrı koruma */
.mobile-view .chat-input input[type="text"]:not([data-user-logged-in="true"])::placeholder,
.web-view .chat-input input[type="text"]:not([data-user-logged-in="true"])::placeholder {
    content: "Giriş Yapmalısınız.." !important;
    color: #999 !important;
    opacity: 1 !important;
    font-style: italic !important;
}

/* JavaScript override'larını engelle */
.chat-input input[type="text"][data-user-logged-in="false"]::placeholder {
    content: "Giriş Yapmalısınız.." !important;
    color: #999 !important;
    opacity: 1 !important;
    font-style: italic !important;
    pointer-events: none !important;
}

/* Son koruma katmanı - tüm placeholder değişikliklerini engelle */
.chat-input input[type="text"] {
    /* Placeholder'ı kesinlikle koru */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Placeholder koruma sistemi - son katman */
.chat-input input[type="text"]:not([data-user-logged-in="true"]) {
    /* Giriş yapmamış kullanıcılar için kesin koruma */
    background-image: none !important;
    background-color: transparent !important;
}

/* JavaScript'in placeholder'ı değiştirmesini tamamen engelle */
.chat-input input[type="text"] {
    /* Placeholder koruma sistemi - maksimum güvenlik */
    -webkit-text-security: none !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* =============================================
   GIF GÖRÜNTÜLEME STİLLERİ
   ============================================= */

/* Sohbet mesajlarında GIF'lerin düzgün görüntülenmesi */
.chat-message img[src*=".gif"] {
    max-width: 80px !important;
    max-height: 60px !important;
    border-radius: 4px !important;
    margin: 2px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

/* Mobil görünümde GIF boyutları */
@media (max-width: 767px) {
    .chat-message img[src*=".gif"] {
        max-width: 60px !important;
        max-height: 45px !important;
    }
}

/* GIF'lerin yüklenmesi sırasında placeholder */
.chat-message img[src*=".gif"]:not([src]) {
    background: #f0f0f0 !important;
    border: 1px dashed #ccc !important;
    min-width: 40px !important;
    min-height: 30px !important;
}

/* GIF'lerin hover efekti */
.chat-message img[src*=".gif"]:hover {
    transform: scale(1.05) !important;
    transition: transform 0.2s ease !important;
    cursor: pointer !important;
}

/* GIF'lerin tıklanabilir olması için */
.chat-message img[src*=".gif"] {
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

/* GIF'lerin responsive olması */
.chat-message img[src*=".gif"] {
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* =============================================
   INPUT ALANINDA GIF GÖRÜNTÜLEME STİLLERİ
   ============================================= */

/* Input wrapper'ın relative pozisyonu */
.chat-input .input-wrapper {
    position: relative !important;
}

/* Input alanındaki GIF container */
.input-gif-container {
    position: absolute !important;
    top: -35px !important;
    left: 0 !important;
    display: flex !important;
    gap: 2px !important;
    z-index: 10 !important;
    pointer-events: none !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 2px !important;
    border-radius: 4px !important;
    border: 1px solid #e0e0e0 !important;
}

/* Input alanındaki GIF preview'ları */
.input-gif-container img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 3px !important;
    object-fit: cover !important;
    border: 1px solid #ddd !important;
    display: block !important;
}

/* Mobil görünümde GIF container pozisyonu */
@media (max-width: 767px) {
    .input-gif-container {
        top: -30px !important;
        left: 0 !important;
    }
    
    .input-gif-container img {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Input alanında GIF varken input padding'i ayarla */
.chat-input input[type="text"]:has(+ .input-gif-container) {
    padding-right: 140px !important;
}

/* GIF container'ın hover efekti */
.input-gif-container:hover {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Web all controls için responsive düzenleme */
.web-view .yt-video-col .web-all-controls {
    position: sticky; /* Sticky pozisyon */
    top: 0; /* Üstten sabitle */
    background: rgba(255, 255, 255, 0.95); /* Arka plan */
    -webkit-backdrop-filter: blur(10px); /* Safari için */
    backdrop-filter: blur(10px); /* Bulanıklık efekti */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 0; /* Margin'i sıfırla */
    border-radius: 0 0 8px 8px; /* Alt köşeleri yuvarla */
    z-index: 100; /* Yüksek z-index */
    flex-shrink: 0; /* Küçülmesini engelle */
}

/* Online Kullanıcılar Sidebar - Web Görünüm */
.online-users-sidebar {
    width: 378px; /* %35 genişletildi: 280px -> 378px */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-left: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.online-users-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.online-users-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.online-count-badge {
    background: #007bff;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.online-users-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.loading-online-users {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.loading-online-users i {
    margin-right: 8px;
    color: #007bff;
}

/* Online kullanıcı öğesi */
.online-users-list .user-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.online-users-list .user-item:hover {
    background-color: #f8f9fa;
}

.online-users-list .user-item:last-child {
    border-bottom: none;
}

.online-users-list .user-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    flex-shrink: 0;
}

.online-users-list .user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.online-users-list .online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #28a745;
    border: 2px solid white;
    border-radius: 50%;
}

.online-users-list .user-info {
    flex: 1;
    min-width: 0;
}

.online-users-list .user-name {
    font-weight: 500;
    color: #333;
    font-size: 14px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-users-list .user-role {
    font-size: 12px;
    color: #666;
    font-weight: 400;
}

/* Kullanıcı detayları */
.online-users-list .user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.online-users-list .channel-badge,
.online-users-list .role-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.online-users-list .channel-badge {
    background: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
    text-decoration: none;
}

.online-users-list .channel-badge:hover {
    background: #bbdefb;
    color: #1565c0;
    text-decoration: none;
}

.online-users-list .role-badge {
    background: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #e1bee7;
}

/* Online kullanıcı butonları */
.online-users-list .user-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
    min-width: 60px;
    justify-content: flex-end;
}

.online-users-list .online-user-kick-btn,
.online-users-list .online-user-ban-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.7;
    flex-shrink: 0;
    padding: 0;
    margin: 0 1px;
}

.online-users-list .online-user-kick-btn {
    background: #e74c3c;
    color: white;
}

.online-users-list .online-user-ban-btn {
    background: #dc3545;
    color: white;
}

.online-users-list .online-user-kick-btn:hover,
.online-users-list .online-user-ban-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.online-users-list .online-user-kick-btn:active,
.online-users-list .online-user-ban-btn:active {
    transform: scale(0.95);
}

/* Rol renkleri */
.online-users-list .user-name.superadmin {
    color: #dc3545;
}

.online-users-list .user-name.globaladmin {
    color: #fd7e14;
}

.online-users-list .user-name.admin {
    color: #007bff;
}

.online-users-list .user-name.mod {
    color: #6f42c1;
}

.online-users-list .user-name.dj {
    color: #28a745;
}

.online-users-list .user-name.uye {
    color: #6c757d;
}

.online-users-list .user-name.guest {
    color: #adb5bd;
    font-style: italic;
}

.online-users-list .user-name.anonim {
    color: #6c757d;
    font-style: italic;
    opacity: 0.8;
}

/* Web görünümünde chat kolonu düzenleme */
.web-view .yt-chat-col {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-grow: 1;
    min-width: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-right: 0; /* Sağ margin'i kaldır */
}

.web-view .chat-container {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Hata ve boş durum mesajları */
.no-online-users,
.error-online-users {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.error-online-users {
    color: #dc3545;
}

.input-gif-container {
    display: none !important;
}

/* Mobil görünümde input-gif-container boyutunu küçült */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
    .input-gif-container {
        max-width: 120px !important;
        max-height: 80px !important;
    }
    
    .input-gif-container img {
        max-width: 120px !important;
        max-height: 80px !important;
        border-radius: 6px !important;
    }
    
    /* Mobil görünümde online kullanıcı butonları */
    .online-users-list .user-actions {
        min-width: 50px;
        gap: 2px;
    }
    
    .online-users-list .online-user-kick-btn,
    .online-users-list .online-user-ban-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
}

/* Kullanıcı bilgileri mobil konumu */
.user-info-container {
    order: 5; /* Online sayaçtan sonra */
    margin-left: auto; /* Sağa yasla */
    flex-shrink: 0;
}

/* Mobil görünümde kullanıcı ismini gizle, sadece avatar göster */
.user-profile .username {
    display: none !important;
}

/* Mobil görünümde kullanıcı avatarını arama butonu ile aynı boyuta getir */
.user-profile .avatar {
    width: 35px !important;
    height: 35px !important;
    border: 2px solid #eee !important;
    margin-left: 2px !important;
}

/* Mobil görünümde user-profile gap'ini azalt */
.user-profile {
    gap: 4px !important;
}

/* Web görünümde kullanıcı adını göster */
@media (min-width: 768px) {
    .user-profile .username {
        display: inline !important;
        font-weight: bold !important;
        font-size: 1.1rem !important;
        /* Rol rengini koru - color: inherit kaldırıldı */
    }
    
    .user-profile .avatar {
        width: 32px !important;
        height: 32px !important;
        border: 2px solid #eee !important;
        margin-left: 0 !important;
    }
    
    .user-profile {
        gap: 8px !important;
    }
}

/* Avatar web benzeri - float left - %25 küçültüldü - kullanıcı adı ile hizalı */
.mobile-view .message-avatar,
.mobile-chat-container .message-avatar {
    float: left;
    margin-right: 8px; /* Web ile aynı */
    width: 20px; /* %25 küçültüldü: 27px -> 20px */
    height: 20px; /* %25 küçültüldü: 27px -> 20px */
    border-radius: 50%;
    overflow: hidden;
    margin-top: -2px; /* Kullanıcı adı ile hizalama için yukarıya taşı */
    vertical-align: top; /* Dikey hizalama */
    position: relative; /* Pozisyon ayarı için */
    display: flex; /* Flexbox ile ortalama */
    align-items: center; /* Dikey ortalama */
    justify-content: center; /* Yatay ortalama */
}

/* Avatar web benzeri - float left - %10 küçültüldü */
.mobile-view .message-avatar,
.mobile-chat-container .message-avatar {
    float: left;
    margin-right: 8px; /* Web ile aynı */
    width: 24px; /* %10 küçültüldü: 27px -> 24px */
    height: 24px; /* %10 küçültüldü: 27px -> 24px */
    border-radius: 50%;
    overflow: hidden;
    margin-top: -2px; /* Kullanıcı adı ile hizalama için yukarıya taşı */
    vertical-align: top; /* Dikey hizalama */
    position: relative; /* Pozisyon ayarı için */
    display: flex; /* Flexbox ile ortalama */
    align-items: center; /* Dikey ortalama */
    justify-content: center; /* Yatay ortalama */
}

.mobile-view .message-avatar img,
.mobile-chat-container .message-avatar img {
    width: 100% !important; /* Container'ı tam doldur */
    height: 100% !important; /* Container'ı tam doldur */
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 !important; /* Margin'i sıfırla */
    aspect-ratio: 1/1 !important;
    flex-shrink: 0 !important; /* Küçülmeyi engelle */
}

/* WEB GÖRÜNÜMÜ İÇİN AVATAR %10 KÜÇÜLTÜLDÜ */
.web-view .message-avatar {
    float: left;
    margin-right: 8px;
    width: 29px; /* %10 küçültüldü: 32px -> 29px */
    height: 29px; /* %10 küçültüldü: 32px -> 29px */
    border-radius: 50%;
    overflow: hidden;
    margin-top: -2px;
    vertical-align: top;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.web-view .message-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 !important;
    aspect-ratio: 1/1 !important;
    flex-shrink: 0 !important;
}

/* Mobilde mesaj içeriği - %10 daha kompakt (ikinci kez) */
.mobile-view .message-content,
.mobile-chat-container .message-content {
    font-size: 11.34px; /* %10 daha küçültüldü: 12.6px -> 11.34px */
    line-height: 1.05; /* %10 daha küçültüldü: 1.17 -> 1.05 */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Webde mesaj içeriği - %10 daha kompakt (ikinci kez) */
.web-view .message-content {
    font-size: 11.34px; /* %10 daha küçültüldü: 12.6px -> 11.34px */
    line-height: 1.05; /* %10 daha küçültüldü: 1.17 -> 1.05 */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* =============================================
   ONLINE COUNTER PULSE ANIMATIONS
   ============================================= */

/* Pulse Animasyonu - Ana Efekt */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
    }
    25% {
        transform: scale(1.15);
        box-shadow: 0 0 20px rgba(0, 255, 65, 0.8);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 25px rgba(0, 255, 65, 1);
    }
    75% {
        transform: scale(1.15);
        box-shadow: 0 0 20px rgba(0, 255, 65, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
    }
}

/* Işık Halkası Animasyonu */
@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Pulse Sınıfı - Animasyonu Tetikler */
.online-users-counter.pulse {
    animation: pulse 0.8s ease-in-out;
}

/* Işık Halkası Efekti */
.online-users-counter.pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid #00ff41;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: pulseRing 0.8s ease-out;
    pointer-events: none;
    z-index: -1;
}

/* İkinci Işık Halkası - Gecikmeli */
.online-users-counter.pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 255, 65, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: pulseRing 0.8s ease-out 0.2s;
    pointer-events: none;
    z-index: -2;
}

/* Kanal Kartlarındaki Badge'ler İçin Pulse */
.online-users-badge.pulse {
    animation: pulse 0.8s ease-in-out;
}

.online-users-badge.pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid currentColor;
    border-radius: 12px;
    transform: translate(-50%, -50%) scale(1);
    animation: pulseRing 0.8s ease-out;
    pointer-events: none;
    z-index: -1;
}

/* Mobil Optimizasyon */
@media (max-width: 767px) {
    .online-users-counter.pulse {
        animation: pulse 0.6s ease-in-out;
    }
    
    .online-users-counter.pulse::before,
    .online-users-counter.pulse::after {
        animation-duration: 0.6s;
    }
    
    .online-users-badge.pulse {
        animation: pulse 0.6s ease-in-out;
    }
    
    .online-users-badge.pulse::before {
        animation-duration: 0.6s;
    }
}

/* Performans Optimizasyonu */
.online-users-counter,
.online-users-badge {
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Emoji Picker Web Görünümü için Özel Stiller */
.web-view emoji-picker {
    position: fixed !important;
    bottom: 120px !important;
    right: 30px !important;
    z-index: 999999 !important;
    display: none !important;
    background: white !important;
    border: 2px solid #007bff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    height: 400px !important;
    width: 350px !important;
    max-width: 90vw !important;
}

.web-view emoji-picker[style*="display: block"] {
    display: block !important;
}

/* Emoji picker fallback için */
.web-view .emoji-picker-fallback {
    position: fixed !important;
    bottom: 120px !important;
    right: 30px !important;
    z-index: 999999 !important;
    display: none !important;
    background: white !important;
    border: 2px solid #007bff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    width: 300px !important;
    height: 400px !important;
    padding: 20px !important;
    text-align: center !important;
}

/* Emoji picker yükleme durumu için */
.web-view emoji-picker[loading]::before {
    content: "Emoji yükleniyor...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: 14px;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.web-view emoji-picker:not([loading])::before {
    display: none;
}

/* Emoji picker yüklenirken arka plan */
.web-view emoji-picker[loading] {
    background: #f8f9fa !important;
}