/* Define vars */
body {
    --sb-track-color: rgba(0, 0, 0, 0);
    --sb-thumb-color: rgba(0, 0, 0, 0.25);
    --sb-size: 10px;
}

/* Improve chat box scrollbar */
#chat-box ::-webkit-scrollbar {
    width: var(--sb-size)
}

#chat-box ::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 10px;
}

#chat-box ::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 10px;

}

@supports not selector(::-webkit-scrollbar) {
    #chat-box {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

/* Chat box style */
#chat-box {
    height: calc(100vh - 72px - 60px);
    /* height: calc(100vh - 72px - 48px); */
}

#chat-box header {
    height: 65px;
    flex-shrink: 0;
    z-index: 0;
}

#chat-box textarea {
    border-left: none;
    border-bottom: none;
    border-radius: 0;
    resize: none;
}

#chat-box input:focus, #chat-box textarea:focus {
    box-shadow: inset 0 0 0 .25rem rgba(13, 110, 253, .25);
}

#chat-box input::placeholder {
    font-size: 0.9rem;
    color: #999;
}