/* ================================================================
   MOBILE CHAT - CIEMNY MOTYW
   Wysuwany z lewej strony na mobile
   Zgodny ze stylem tos.css
   ================================================================ */

/* ================================================================
   MOBILE CHAT TAB - Języczek przyklejony do chatu
   ================================================================ */

#mobile-chat-tab {
    display: none; /* Ukryty na desktop */
    position: fixed;
    left: 0;
    bottom: 50px; /* Najniżej - nad footerem */
    width: 50px;
    height: 80px;
    background: linear-gradient(135deg, #449d44 0%, #398439 100%) !important;
    color: white;
    border: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.6) !important;
    z-index: 10001; /* Wyżej niż chat (9999) */
    cursor: pointer;
    transition: left 0.3s ease-in-out, background 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 0;
}

#mobile-chat-tab:active {
    background: linear-gradient(135deg, #398439 0%, #255625 100%) !important;
}

/* Ikona czatu w języczku */
#mobile-chat-tab .chat-icon {
    font-size: 24px;
    transition: all 0.3s ease;
    color: #fff !important;
}

/* Tekst "CHAT" pionowo */
#mobile-chat-tab .chat-text {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #fff !important;
}

/* Badge z liczbą wiadomości */
#mobile-chat-tab .chat-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #d9534f !important;
    color: #fff !important;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Gdy chat otwarty - przesuń tab razem z chatem */
#pullout.mobile-visible ~ #mobile-chat-tab {
    left: 350px; /* Szerokość chatu */
    background: linear-gradient(135deg, #c9302c 0%, #ac2925 100%) !important;
}

/* Gdy chat otwarty - zamień ikonę na X */
#pullout.mobile-visible ~ #mobile-chat-tab .chat-icon {
    transform: rotate(90deg);
}

#pullout.mobile-visible ~ #mobile-chat-tab .chat-icon::before {
    content: "\f00d"; /* Font Awesome X icon */
}

#pullout.mobile-visible ~ #mobile-chat-tab .chat-text {
    display: none; /* Ukryj "CHAT" gdy otwarty */
}

/* Small mobile - mniejszy tab */
@media (max-width: 480px) {
    #mobile-chat-tab {
        width: 45px;
        height: 70px;
        font-size: 20px;
    }
    
    #pullout.mobile-visible ~ #mobile-chat-tab {
        left: 300px; /* Mniejsza szerokość chatu na small mobile */
    }
}

/* Chat overlay - przyciemnienie tła */
#mobile-chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75) !important; /* Ciemniejsze overlay */
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: none; /* Ukryty na desktop */
}

#mobile-chat-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS - CIEMNY MOTYW
   ================================================================ */

/* DESKTOP (> 1170px) - wszystko jak było */
@media (min-width: 1171px) {
    /* Sidebar widoczny */
    #sidebar {
        display: block !important;
        background-color: #151515 !important;
        border-right: 1px solid #121212 !important;
    }
    
    /* Ukryj mobile elementy */
    #mobile-chat-tab,
    #mobile-chat-overlay {
        display: none !important;
    }
}
/* MOBILE (< 1170px) - wysuwany chat */
@media (max-width: 1170px) {
    
    /* Ukryj sidebar na mobile */
    #sidebar {
        display: none !important;
    }
    
    /* Chat ukryty domyślnie - wysuwa się z lewej */
    #pullout {
        position: fixed;
        left: -400px !important; /* Ukryty za lewą krawędzią */
        top: 50px !important;
        bottom: 40px !important; /* Miejsce na footer */
        width: 100% !important;
        max-width: 350px;
        background-color: #1e1e1e !important;
        border-right: 1px solid #121212 !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.6) !important;
        z-index: 9999 !important;
        transition: left 0.3s ease-in-out;
    }
    
    /* Chat widoczny gdy aktywny */
    #pullout.mobile-visible {
        left: 0 !important;
    }
    
    /* Dostosuj szerokość chatu */
    .divchat {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 250px) !important;
        overflow-x: hidden !important; /* Blokuj horizontal scroll */
        background-color: #1e1e1e !important;
        border-color: #121212 !important;
        padding: 0 !important;
    }
    
    /* Chat messages - nie mogą wychodzić poza chat */
    .divchat .chat-message {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Chat area wewnątrz */
    #chatArea {
        width: 100% !important;
        max-width: 100% !important;
        background-color: transparent !important;
    }
    
    /* Chat messages alternating colors */
    #chatArea > div:nth-child(odd) {
        background-color: #333333 !important;
        box-shadow: rgba(255,255,255,0.0392157) 0px 1px 0px 0px inset;
        border-bottom: 1px solid #000000 !important;
    }
    
    #chatArea > div:nth-child(even) {
        background-color: #2B2B2B !important;
        box-shadow: rgba(255,255,255,0.0392157) 0px 1px 0px 0px inset;
        border-bottom: 1px solid #000000 !important;
    }
    
    /* Układ wiadomości - flexbox */
    #chatArea > div > div {
        display: flex !important;
        align-items: flex-start !important;
        padding: 5px 5px 5px 8px !important;
        border-left: 3px solid #333333 !important;
    }
    
    /* Avatar w czacie mobile */
    #chatArea .chat-img {
        flex-shrink: 0 !important;
        width: 24px !important;
        height: 24px !important;
        margin-right: 8px !important;
        margin-top: 2px !important;
        border-radius: 4px !important;
        border: 1px solid #121212 !important;
    }
    
    /* Wrapper treści wiadomości */
    .chat-content-wrapper {
        flex: 1 !important;
        min-width: 0 !important;
        word-break: break-word !important;
        line-height: 1.35 !important;
        margin-top: 3px !important;
    }
    
    /* Tekst wiadomości */
    .chat-message-text { 
        color: #d0d0d0 !important; 
        margin-left: 3px !important;
        font-size: 13px !important;
    }
    
    .chat-message-text img { 
        max-height: 19px !important;
        vertical-align: middle !important;
    }
    
    /* Main page na całą szerokość */
    #mainpage {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 5px !important;
        width: 100% !important;
        background-color: #111 !important;
    }
    
    /* Pokaż mobile tab */
    #mobile-chat-tab {
        display: flex !important;
    }
    
    #mobile-chat-overlay {
        display: block !important;
    }
    
    /* Dostosuj select roomów */
    #tab1 {
        width: 100% !important;
        max-width: 100% !important;
        background-color: #151515 !important;
        border-color: #121212 !important;
    }
    
    #tab1 > div:first-child {
        padding: 5px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #1e1e1e !important;
    }
    
    #lang {
        font-size: 14px;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #080808 !important;
        border-color: #121212 !important;
        color: #ededed !important;
    }
    
    #lang option {
        background-color: #1e1e1e !important;
        color: #ededed !important;
    }
    
    /* Chat form */
    #chatForm {
        padding: 8px;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #151515 !important;
        border-top: 1px solid #121212 !important;
    }
    
    #chatForm > div {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #chatMessage {
        font-size: 15px !important; /* Zapobiega zoom na iOS */
        width: 100% !important;
        background-color: #262626 !important;
        border-color: #121212 !important;
        color: #ededed !important;
    }
    
    #chatMessage::placeholder {
        color: #656565 !important;
    }
    
    #chatMessage:focus {
        background-color: #2a2a2a !important;
        border-color: #31708f !important;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(49,112,143,.6) !important;
    }
    
    .input-group {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .input-group-addon {
        background-color: #1e1e1e !important;
        border-color: #121212 !important;
        color: #656565 !important;
    }
    
    /* Przycisk emotek na mobile */
    #emoteToggle {
        height: 34px !important;
        padding: 6px 12px !important;
        line-height: 1.42857143 !important;
        background-color: #1e1e1e !important;
        border-color: #121212 !important;
        color: #999 !important;
    }
    
    /* Smiles panel */
    #Smiles {
        background-color: #111 !important;
        border-color: #121212 !important;
        color: #656565 !important;
    }
    
    /* Chat links */
    .chat-link,
    .chat-link:hover,
    .chat-link:active {
        color: #4e7ba9 !important;
        font-weight: bold !important;
    }
    
    /* Kolory rang - MOBILE */
    #chatArea > div > div.chat-mod {
        border-color: #FF2A00 !important;
    }
    #chatArea > div > div.chat-mod a.chat-link {
        color: #FF2A00 !important;
    }
    
    #chatArea > div > div.chat-pmod {
        border-color: #00C0FF !important;
    }
    #chatArea > div > div.chat-pmod a.chat-link {
        color: #00C0FF !important;
    }
    
    #chatArea > div > div.chat-streamer {
        border-color: #9B66FF !important;
    }
    #chatArea > div > div.chat-streamer a.chat-link {
        color: #9B66FF !important;
    }
    
    #chatArea > div > div.chat-veteran {
        border-color: #FF9000 !important;
    }
    #chatArea > div > div.chat-veteran a.chat-link {
        color: #FF9000 !important;
    }
    
    #chatArea > div > div.chat-youtuber {
        border-color: #CC181E !important;
    }
    #chatArea > div > div.chat-youtuber a.chat-link {
        color: #CC181E !important;
    }
    
    #chatArea > div > div.chat-pro {
        border-color: #101010 !important;
    }
    #chatArea > div > div.chat-pro a.chat-link {
        color: #4e7ba9 !important;
    }
    
    /* Scrollbar dla chatu na mobile */
    .divchat::-webkit-scrollbar {
        width: 8px;
        background-color: #111;
    }
    
    .divchat::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #111;
    }
    
    .divchat::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }
    
    .divchat::-webkit-scrollbar-thumb:hover {
        background-color: #777;
    }
}

/* SMALL MOBILE (< 480px) */
@media (max-width: 480px) {
    #pullout {
        max-width: 300px;
        background-color: #1e1e1e !important;
    }
    
    #mobile-chat-button {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 55px;
        left: 10px;
        background: linear-gradient(135deg, #449d44 0%, #398439 100%) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    }
    
    .divchat {
        font-size: 13px !important;
    }
    
    #chatMessage {
        font-size: 16px !important; /* Większy na very small screens */
    }
}

/* LANDSCAPE MODE */
@media (max-width: 1170px) and (orientation: landscape) {
    #pullout {
        max-width: 280px;
        background-color: #1e1e1e !important;
    }
    
    .divchat {
        height: calc(100vh - 200px) !important;
    }
    
    #mobile-chat-button {
        bottom: 50px;
    }
    
    #mobile-chat-tab {
        bottom: 45px;
    }
}

/* ================================================================
   ACCESSIBILITY & TOUCH - CIEMNY MOTYW
   ================================================================ */

@media (max-width: 1170px) {
    /* Większe touch targety */
    #mobile-chat-tab {
        min-width: 50px;
        min-height: 80px;
    }
    
    #chatForm input,
    #chatForm button {
        min-height: 44px;
    }
    
    /* Przyciski w chatForm */
    #chatForm button,
    #chatForm .btn {
        background-color: #1e1e1e !important;
        border-color: #121212 !important;
        color: #999 !important;
    }
    
    #chatForm button:hover,
    #chatForm button:active,
    #chatForm .btn:hover,
    #chatForm .btn:active {
        background-color: #2a2a2a !important;
        color: #fff !important;
    }
    
    /* Send button */
    #chatForm .btn-success {
        background-color: #449d44 !important;
        border-color: #398439 !important;
        color: #fff !important;
    }
    
    #chatForm .btn-success:hover,
    #chatForm .btn-success:active {
        background-color: #398439 !important;
        border-color: #255625 !important;
    }
}

/* Focus states */
#mobile-chat-tab:focus {
    outline: 2px solid #449d44 !important;
    outline-offset: 2px;
}

#chatMessage:focus {
    outline: none !important;
}

/* Active message highlight */
#chatArea > div.active_msg {
    border: 1px solid #FFA500 !important;
    background-color: #2a2a2a !important;
}

#chatArea > div.active_msg > div {
    padding: 4px 4px 5px 7px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #pullout,
    #mobile-chat-overlay,
    #mobile-chat-tab {
        transition: none !important;
    }
}

/* ================================================================
   DODATKOWE ELEMENTY MOBILE CHAT
   ================================================================ */

@media (max-width: 1170px) {
    /* Header chatu na mobile */
    #pullout > div:first-child {
        background-color: #151515 !important;
        border-bottom: 1px solid #121212 !important;
        color: #999 !important;
    }
    
    /* Timestamp w wiadomościach */
    .timestamp {
        color: #888 !important;
        font-size: 11px !important;
    }
    
    /* Emotikony */
    .emoji,
    .emoticon {
        vertical-align: middle;
        max-height: 28px;
        border-radius: 4px;
    }
    
    /* Online users count */
    .online-count {
        background-color: #1e1e1e !important;
        color: #999 !important;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
    
    /* Emote popup na mobile */
    .emote-popup {
        background-color: #1e1e1e !important;
        border: 1px solid #121212 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.3) !important;
    }
    
    .emote-select {
        background-color: transparent !important;
    }
    
    .emote-select:hover {
        background-color: #2a2a2a !important;
    }
}

/* Dark mode dla emoji picker (jeśli używany) */
@media (max-width: 1170px) {
    .emoji-picker,
    .emoticon-panel {
        background-color: #1a1a1a !important;
        border-color: #121212 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    }
    
    .emoji-picker .emoji-item:hover,
    .emoticon-panel .emoji-item:hover {
        background-color: #2a2a2a !important;
    }
}

/* Mobile chat header buttons */
@media (max-width: 1170px) {
    .chat-header-btn {
        background-color: transparent !important;
        border: 1px solid #121212 !important;
        color: #999 !important;
        padding: 4px 8px;
        margin: 0 2px;
    }
    
    .chat-header-btn:hover,
    .chat-header-btn:active {
        background-color: #2a2a2a !important;
        color: #fff !important;
    }
}


/* ================================================================
   NAVBAR FIX - Force centered logo at all breakpoints below 1199px
   ================================================================ */
@media (max-width: 1199px) {
    .navbar > .container-fluid {
        display: block !important;
        position: relative;
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    .navbar-header {
        position: relative !important;
        width: 100% !important;
        display: block !important;
        height: 50px !important;
        float: none !important;
        margin: 0 !important;
    }
    
    .navbar-brand {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        height: auto !important;
        line-height: normal !important;
    }
    
    #mobileMenuToggle {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        float: none !important;
    }
}

/* ================================================================
   GAME AREA - Full width when chat is mobile
   ================================================================ */
@media (max-width: 1170px) {
    #mainpage {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 5px !important;
        width: 100% !important;
    }
    
    .cf-container {
        margin-left: 0 !important;
        padding: 10px 8px !important;
        max-width: 100% !important;
    }
    
    #sidebar {
        display: none !important;
    }
}