/* wwwroot/css/chat.css */
.chat-wrapper {
    width: auto; /* Full width of the container */
    aspect-ratio: 3 / 4; /* Extra široký (např. pro kinofilm look) */
}

@media (max-width: 768px) {
    .chat-wrapper {
        width: auto; /* Full width of the container */
        aspect-ratio: 3 / 4; /* Extra široký (např. pro kinofilm look) */
    }

}




    .avatar {
        width: 30px;
        height: 30px;
        margin: 0 10px;
    }

        .avatar img {
            border-radius: 50%;
        }

    .message-container {
        display: flex;
        flex-direction: column;
        max-width: 90%;
    }

    .nickname {
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 3px;
    }

.comment-bubble2 {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 8px 12px;
    display: inline-block;
    border: 2px solid transparent;
    margin-top: 10px;
    color: white;
    word-wrap: break-word;
}

        .comment-bubble2.mine {
            border-radius: 20px 0 20px 20px;
            background-color: #ff007f;
            text-align: left;
        }

        .comment-bubble2.others {
            border-radius: 0 20px 20px 20px;
            background-color: darkgray;
        }

    .message-time {
        font-size: 10px;
        opacity: 0.7;
        display: block;
    }

.messageContainer {
    width: 100%;
    aspect-ratio: 3 / 4; /* Extra široký (např. pro kinofilm look) */
    overflow-y: auto;
    border-left: 2px solid #ccc; /* Šedý rámeček vlevo */
    border-right: 2px solid #ccc; /* Šedý rámeček vpravo */
    padding: 10px;
    background-color: #f9f9f9; /* Světle šedé pozadí */
}

    /* Pro mobilní zařízení (šířka do 768px) */
    @media (max-width: 768px) {
        .messageContainer {
            width: 100%;
            aspect-ratio: 3 / 4; /* Extra široký (např. pro kinofilm look) */
            overflow-y: auto;
            border-left: 2px solid #ccc; /* Šedý rámeček vlevo */
            border-right: 2px solid #ccc; /* Šedý rámeček vpravo */
            padding: 10px;
            background-color: #f9f9f9; /* Světle šedé pozadí */
        }
    }



    .message-input-container {
        display: flex;
        align-items: center;
        width: 100%;
    }

        .message-input-container input {
            flex: 1; /* Vyplní dostupný prostor */
            min-width: 0; /* Zabrání roztažení přes tlačítko */
            padding: 8px;
            border: 1px solid gray;
            border-radius: 8px;
        }

        .message-input-container button {
            flex-shrink: 0; /* Zabrání zmenšování tlačítka */
            padding: 8px 16px; /* Udrží konzistentní velikost */
            background-color: #ff007f;
            color: white;
            border: 1px solid gray;
            border-radius: 8px;
            white-space: nowrap; /* Zabrání zalomení textu */
        }

    .chat-message {
        display: flex;
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .chat-message.mine {
        flex-direction: row-reverse;
        text-align: right;
    }

    .chat-message.others {
        justify-content: flex-start;
        text-align: left;
        border-radius: 0 20px 20px 20px;
    }


.messageContainer2 {
    width: 100%;
    height: 100%; /* 50 % výšky viewportu */
    max-height: 300px;
    min-height: 300px;
    overflow-y: auto;
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
}


    /* Pruh s nápisem "chat" */
    .chat-header {
        background-color: #ff007f; /* ruzovy pruh */
        color: white;
        text-align: center;
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
        border-radius: 12px 12px 0 0; /* Zaoblené horní rohy */
    }


    /* Pruh s nápisem pro zadávání zpráv */
    .message-input-header {
        color: white;
        text-align: center;
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
        border-radius: 0 0 12px 12px; /* Zaoblené dolní rohy */
        margin-bottom: 10px;
        border-left: 2px solid #ccc; /* Růžový border vlevo */
        border-right: 2px solid #ccc; /* Růžový border vpravo */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stín dole */
    }