#chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

#chat-box {
    width: 300px;
    height: 400px;
    display: none;
    flex-direction: column;
    border-radius: 12px;
}

.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.chat-footer {
    border-top: 1px solid #ccc;
    padding: 10px;
}

.chat-message {
    margin-bottom: 10px;
}

.chat-message.user {
    text-align: right;
}

.chat-message.assistant {
    text-align: left;
}

#chat-toggle {
    background-image: url(/img/elf.png);
    background-size: 92%;
    background-repeat: no-repeat;
    background-position-y: 134%;
    background-position-x: 125%;
    border: 2px solid gold;
}

#chat-widget .btn-close {
    background-color: transparent;
}

#chat-widget .chatInputFields .btn {
    height: 46px;
}

#chat-widget {
    font-family: Arial, Helvetica, sans-serif;
}

#chat-widget .form-control,
#chat-widget .form-control .btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.chat-message.user {
    border-radius: 5px;
    background-color: light-dark(#ddd, #222);
    color: light-dark(#000, #f4f4f4);
    padding: 5px;
}

.chat-message.assistant {
    background-color: light-dark(#f4f4f4, #000);
    color: light-dark(#000, #f4f4f4);
    padding: 5px;
    border-radius: 5px;
}

.chat-footer .disabled {
    opacity: 0.25;
}

.chat-footer .disabled input,
.chat-footer .disabled button {
    cursor: not-allowed;
}

#chatAnimal {
    margin: 1px;
}

.chat-message a {
    text-decoration: underline;
}

.chatSpinner img {
    width: 40px;
}