.chat-has-messages {
    background-color: var(--bs-success);
}

.chat-page-header {
    text-align: center;
}

.chat-root-messages {
    display: flex;
    flex: 1;
    padding: 0 4px 0 4px;
}

#room {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;

    .messages {
        display: flex;
        flex-direction: column;
        flex: 1;
        /* Take remaining space */
        height: auto;
        /* Desktop: fill screen minus headers */
        max-height: calc(100vh - 170px);
        margin-bottom: 2px;
        overflow-y: auto;
        overflow-x: hidden;

        /* Alert about empty chat */
        .empty-chat-message {
            font-size: 20;
            color: gray;
            margin: 40px 0 40px 0;
            text-align: center;
        }

        .date-banner {
            text-align: center;
            margin-top: .1rem;
            margin-bottom: .3rem;
        }

        /* Message container */
        .message {
            display: flex;
            margin-right: 6%;
            margin-bottom: .8rem;
            margin-left: .3rem;
            box-shadow: 3px 3px 5px 2px darkgray;

            &.own {
                justify-content: flex-end;
                margin-left: 6%;
                margin-right: .6rem;
            }

            &.msg-highlight {
                box-shadow: 0 0 10px 2px var(--bs-info);
                transition: box-shadow 5s ease;
            }
        }
    }
}

.message .message-content {
    min-width: 100%;
    padding: .2rem;

    /* Header of message containing username and additional data/actions */
    .message-header {
        padding-left: .1rem;
        margin-bottom: .1rem;
        display: flex;
        justify-content: space-between;

        .username {
            color: var(--bs-yellow);
            font-weight: bold;
        }

        /* Additional information/actions for message */
        .message-info {
            display: flex;
            margin-left: 1rem;
            align-items: center;


            /* Additional actions for message */
            .show-history,
            .edit-message {
                cursor: pointer;
                text-decoration: underline;
                font-size: smaller;
                margin-right: 5px;
            }
        }
    }

    .msg-body {
        margin-bottom: .2rem;
        display: flex;
        flex-direction: column;

        /* Container for attached images inside message */
        .attachment-image-container {
            cursor: pointer;
            width: fit-content;

            /* Attached image inside message */
            .attached-image {
                max-height: 15dvh;
                height: auto;
                max-width: 30dvh;
                width: auto;
                object-fit: contain;
            }
        }

        .msg-text {
            overflow-wrap: break-word;
        }
    }

    /* Container for vote buttons */
    .msg-vote {
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: var(--bs-warning);
        border-radius: 5px;
        padding: 0 3px 0 3px;
        margin-right: .2rem;

        i,
        div {
            padding: .2rem;
            color: black;
        }

        &.active {
            font-weight: bold;

            /* Style own upvote */
            .fa-check {
                color: var(--bs-teal);
            }

            /* Style own downvote */
            .fa-times {
                color: var(--bs-danger);
            }
        }
    }
}

/* Preview images before sending */
#room .image-preview-container {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .3rem 0;

    .preview-images .image-preview {
        width: 50px;
        height: 50px;
        margin: .3rem;
        object-fit: cover;
    }
}

#room .chat-controls {
    display: block;
    margin-bottom: .1rem;

    &>div {
        display: flex;
        gap: .1rem;
    }

    input[type="file"] {
        display: none;
    }

    /* Style label for disabled file input */
    input[type="file"]:disabled+label,
    input[type="file"]:disabled+label:hover {
        background-color: #8d8d8d;
        border: 1px solid #555555;
        color: #d9d9d9;
    }

    .chat-control {
        font-size: 1.25rem;
    }

    .chat-controls-row {
        display: flex;
        flex: 1;
        gap: .1rem;

        #message-input {
            border: 1px solid #444;
            border-radius: .3rem;
            background-color: #303030;
            color: #fff;
            flex: 1;

            /* x at editing overlay */
            /* .stop-editing {
                    top: 0;
                    right: 0;
                } */
        }
    }
}

.room-list {
    flex: 0 0 auto;
    margin: 0 0 0 0;
    padding: 0 4px 0 4px;
    max-height: calc(100vh - 170px);
    overflow-x: hidden;

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .col-scrollable {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

#content-pub-rooms-active,
#content-pub-rooms-archive,
#content-tasks-active,
#content-tasks-archive,
#content-votes-active,
#content-votes-archive,
#content-prv-active,
#content-prv-archive {
    display: none;
}

.accordion {
    padding-left: 4px;
}

.accordion:before {
    font-family: "Times New Roman";
    content: '\25BA';
    float: left;
    margin-right: 4px;
}

.activated:before {
    content: "\25BC";
}

.list-of-rooms,
.list-of-pms {
    display: flex;
    flex-direction: column;
    padding-right: 1px;
}

.room-link {
    border: 2px solid var(--bs-light);
    cursor: pointer;
    display: flex;
    font-family: 'Noto Sans Mono', monospace;
    font-size: 0.9rem;
    margin: .1rem;
    padding: .1rem .2rem .2rem .2rem;
    width: 100%;

    &.online {
        color: var(--bs-yellow);
    }

    /* &.offline {
        color: var(--bs-gray-600);
    } */

    &.joined {
        border: 2px solid var(--bs-info);
        background: #3399f3;
        color: var(--bs-dark);
    }

    &.room-not-seen {
        border: 2px solid var(--bs-info);
        color: var(--bs-success);
    }

    /* &[data-room-type="public"] {
        text-transform: uppercase !important;
    } */

    .room-name {
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-right: .25rem;
    }

    .room-controls {
        display: flex;
        align-items: center;
        gap: .15rem;
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.messages,
.room-list {
    scrollbar-color: var(--bs-light) var(--bs-body-bg);
}

.checkbox-container {
    align-items: center;
    padding: 4px;
}

.copy-link-btn {
    position: relative;
    color: var(--bs-light);
}

.copy-feedback {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    font-size: 0.65rem;
    z-index: 2;
}

input[type='checkbox'] {
    width: 1.2rem;
    height: 1.2rem;
}

.btn:focus-visible {
    border-color: white;
}

/* PC/Tablet only */
@media (min-width: 768px) {
    .sticky-bottom {
        position: fixed;
        right: 0;
        left: 0;
    }
}

/* Mobile only */
@media (max-width: 767px) {
    #room .messages {
        min-height: 45dvh;
        max-height: 70dvh;
    }

    .room-list {
        min-height: 15dvh;
        max-height: 45dvh;
    }
}

/* Below non chat related */

/* Make table rows clickable */
td a {
    display: block;
    text-decoration: none;
    color: var(--bs-white);
}

/* Overwrite bootstrap - borders */
.list-group-item+.list-group-item {
    border-top-width: 2;
}

.list-group-item {
    color: #00bc8c !important;
}

/* For Board and TinyMCE. Makes pictures responsive */
img {
    max-width: 100%;
    height: auto;
}

.board {
    border: 1px solid gray;
    border-radius: 10px;
    margin: 10;
    padding: 10;
}

/* Hide Google Translation icon */
#gtx-trans {
    display: none !important;
}