/* LOGIN DIV - HIDDEN BY DEFAULT A SPRÁVNA POZÍCIA */
.loginDiv {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #666666 !important;
    z-index: 1000;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 400px !important;
    padding: 20px !important;
    border-radius: 10px;
    display: none !important;
    box-sizing: border-box !important;
}

    .loginDiv[style*="visible"],
    .loginDiv[style*="visibility: visible"] {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

/* PWD DIV - HIDDEN BY DEFAULT */
.pwdDiv {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #666666 !important;
    z-index: 1000;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 400px !important;
    padding: 20px !important;
    border-radius: 10px;
    display: none !important;
    box-sizing: border-box !important;
}

    .pwdDiv[style*="visible"],
    .pwdDiv[style*="visibility: visible"] {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

/* TOP DIV - HEADER S FORMULÁROM */
.topDiv {
    background-color: #0a0a0a !important;
    border-bottom: 2px solid #333333 !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* CONTAINER BODY - TELO CHATU */
.containerBodyChannelDiv {
    background-color: #000000 !important;
    flex: 1;
    overflow: auto;
    border-top: 1px solid #333333 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* TEXT MES DIV - NEPRERUSOVANÝ RIADOK */
.textMesDiv {
    color: #ffffff !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

/* FORMULÁR V HEADERI - INLINE ELEMENTY */
#formMessage {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

    #formMessage table {
        width: 100% !important;
        height: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    #formMessage tr {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #formMessage td {
        vertical-align: middle !important;
        padding: 0 5px !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

/* INPUT POLIA - INLINE */
#message {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 5px !important;
    flex: 1 !important;
    min-width: 150px !important;
    box-sizing: border-box !important;
}

#replyQuid {
    display: none !important;
}

/* SUBMIT TLAČIDLO */
#formMessage input[type="submit"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 5px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* MOBILNÁ VERZIA */
@media screen and (max-width: 999px) {
    .topDiv {
        height: 70px !important;
        padding: 0 8px !important;
    }

    .textMesDiv {
        font-size: 14px !important;
        margin-right: 8px !important;
        min-width: 100px !important;
    }

    #message {
        min-width: 120px !important;
        height: 35px !important;
        font-size: 14px !important;
    }

    #formMessage input[type="submit"] {
        height: 35px !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        min-width: 50px !important;
    }

    #formMessage td {
        padding: 0 3px !important;
    }

    /* Login a password dialógy pre mobil */
    .loginDiv, .pwdDiv {
        width: 95% !important;
        max-width: 350px !important;
        padding: 15px !important;
    }
}

/* EXTRA MALÉ MOBILY */
@media screen and (max-width: 480px) {
    .textMesDiv {
        font-size: 12px !important;
        min-width: 80px !important;
        margin-right: 5px !important;
    }

    #message {
        min-width: 80px !important;
        height: 32px !important;
        font-size: 14px !important;
        padding: 5px !important;
    }

    #formMessage input[type="submit"] {
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        min-width: 40px !important;
    }

    .loginDiv, .pwdDiv {
        width: 98% !important;
        max-width: 320px !important;
        padding: 12px !important;
    }

        .loginDiv input[type="text"],
        .loginDiv input[type="password"],
        .pwdDiv input[type="password"] {
            font-size: 16px !important; /* Zabraňuje zoomovaniu na iOS */
        }
}

/* VEĽMI MALÉ DISPLEJE */
@media screen and (max-width: 320px) {
    .textMesDiv {
        display: none !important;
    }

    #message {
        margin-left: 0 !important;
        min-width: 60px !important;
    }
}

/* DESKTOP VERZIA */
@media (min-width: 1000px) {
    .topDiv {
        height: 60px !important;
        padding: 0 15px !important;
    }

    .textMesDiv {
        font-size: 16px !important;
        margin-right: 12px !important;
        min-width: 120px !important;
    }

    #message {
        min-width: 200px !important;
        height: 30px !important;
        font-size: 16px !important;
    }

    #formMessage input[type="submit"] {
        height: 30px !important;
        padding: 0 15px !important;
        font-size: 16px !important;
        min-width: 60px !important;
    }

    #formMessage td {
        padding: 0 8px !important;
    }
}

/* OSTATNÉ ŠTÝLY */
.containerBodyChannelDiv {
    background-color: #000000 !important;
    flex: 1;
    overflow: auto;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bottomChannelDiv {
    background-color: #0a0a0a !important;
    border-top: 1px solid #333333 !important;
    color: #ffffff !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-shrink: 0;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
}

.messageLoginDiv {
    color: #ffffff !important;
    box-sizing: border-box !important;
}

.messageMessageDiv {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
}

.myMessageMessageDiv {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
}

.createdDiv {
    color: #cccccc !important;
    box-sizing: border-box !important;
}

.inputField {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    box-sizing: border-box !important;
}

button {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    box-sizing: border-box !important;
}

/* VEĽKÉ OBRAZOVKY (1200px a viac) */
@media screen and (min-width: 1200px) {
    .infoBox {
        width: 320px !important;
        max-width: 320px !important;
        display: inline-block !important;
        vertical-align: top !important;
        margin: 10px !important;
        box-sizing: border-box !important;
    }
}

/* TABLETY (768px - 1199px) - 2 VEDĽA SEBA */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .infoBox {
        width: calc(50% - 20px) !important;
        max-width: 320px !important;
        min-width: 280px !important;
        box-sizing: border-box !important;
    }
}

/* MOBILY (do 767px) - 1 POD SEBOU */
@media screen and (max-width: 767px) {
    .infoBox {
        width: 95% !important;
        max-width: 320px !important;
        margin: 10px auto !important;
        display: block !important;
        min-height: auto !important;
        box-sizing: border-box !important;
    }
}

/* FOOTER - MENEJ VÝRAZNÝ ŠEDIVÝ STYL */
.bottomDiv {
    background-color: #0f0f0f !important;
    border-top: 1px solid #2a2a2a !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-shrink: 0;
    width: 100% !important;
    box-sizing: border-box !important;
}

    .bottomDiv span,
    .bottomDiv a {
        color: #888888 !important;
        font-size: 12px !important;
        text-decoration: none !important;
    }

        .bottomDiv a:hover {
            color: #aaaaaa !important;
            text-decoration: underline !important;
        }

.bottomDiv {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .bottomDiv table {
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .bottomDiv td {
        text-align: center !important;
        vertical-align: middle !important;
    }

/* MOBILNÁ VERZIA FOOTERA */
@media screen and (max-width: 999px) {
    .bottomDiv {
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
    }

        .bottomDiv span,
        .bottomDiv a {
            font-size: 11px !important;
        }

    .bottomChannelDiv {
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
        padding: 0 10px !important;
    }
}

/* DESKTOP VERZIA FOOTERA */
@media (min-width: 1000px) {
    .bottomDiv {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

        .bottomDiv span,
        .bottomDiv a {
            font-size: 12px !important;
        }
}

hr {
    border: 0;
    height: 1px;
    background: rgba(150, 150, 150, 0.3);
    margin: 20px auto;
    width: 80%;
    box-sizing: border-box !important;
}

/* ŠPECIFICKÉ ÚPRAVY PRE iOS */
@supports (-webkit-touch-callout: none) {
    .containerDiv {
        height: -webkit-fill-available !important;
        min-height: -webkit-fill-available !important;
    }

    .loginDiv input[type="text"],
    .loginDiv input[type="password"],
    .pwdDiv input[type="password"],
    #message {
        font-size: 16px !important; /* Zabraňuje zoomovaniu na iOS */
    }
}

/* ZABEZPEČENIE RESPONZÍVNEHO SPRÁVANIA */
* {
    box-sizing: border-box !important;
}

html, body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* ODSTRANENÉ: overflow: hidden !important; */
    /* ODSTRANENÉ: position: fixed !important; */
    /* ODSTRANENÉ: top: 0 !important; */
    /* ODSTRANENÉ: left: 0 !important; */
    /* ODSTRANENÉ: right: 0 !important; */
    /* ODSTRANENÉ: bottom: 0 !important; */
}

/* JEDINÁ ZMENA: Oprava výšky containerBodyDiv */
.containerDiv {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important; /* Zmenené na min-height */
    width: 100% !important;
}

.containerBodyDiv {
    flex: 1; /* Zaberie dostupný priestor */
    overflow-y: auto !important; /* Povolí scrollovanie */
    width: 100% !important;
    box-sizing: border-box !important;
}