:root {
    --chat-body-pattern: url('/images/chat-pattern-2.jpeg');
}
[data-bs-theme="dark"] {
    --chat-body-pattern: url('/images/chat-pattern-1.jpg');
}

/* template
----------------------------------------------------------------------------------------------------------------------*/
body {
}
main {
}
footer {
}

/* chat
----------------------------------------------------------------------------------------------------------------------*/
.chat {
}
.chat .chats-container .tab-pane {
    position: relative;
}
.chat .chats-container .tab-pane .loader {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: all .15s;
}
.chat .chats-container .tab-pane.loading .loader {
    visibility: visible;
    opacity: 1;
}
.chat .chats-container .tab-pane > div {
    background: var(--chat-body-pattern) no-repeat center center;
    background-size: cover;
}
.chat .chat-message .chat-message-content {
    font-size: 14px;
}
.chat .chat-message .sent-message-content:not(.chat .chat-message .sent-message-content.gallery):after {
    border-color: transparent transparent var(--phoenix-success-bg-subtle) transparent;
    box-shadow: 0 3px 0 var(--phoenix-tertiary-bg);
}
.chat .chat-message .received-message-content:not(.chat .chat-message .received-message-content.gallery):before {
    border: none;
}
.chat .chat-message .chat-message-content > .received-message-content {
    box-shadow: 0 3px 0 var(--phoenix-tertiary-bg);
}
.chat .chat-message .chat-message-content > .sent-message-content {
    box-shadow: 0 3px 0 var(--phoenix-tertiary-bg);
}
.chat .chat-message .chat-message-content > .sent-message-content:has(img),
.chat .chat-message .chat-message-content > .received-message-content:has(img),
.chat .chat-message .chat-message-content > .sent-message-content:has(audio),
.chat .chat-message .chat-message-content > .received-message-content:has(audio),
.chat .chat-message .chat-message-content > .sent-message-content:has(video),
.chat .chat-message .chat-message-content > .received-message-content:has(video) {
    padding: 0 !important;
}
.chat .chat-message .chat-message-content > .sent-message-content:has(img):not(:has(.caption)),
.chat .chat-message .chat-message-content > .received-message-content:has(img):not(:has(.caption)),
.chat .chat-message .chat-message-content > .sent-message-content:has(audio):not(:has(.caption)),
.chat .chat-message .chat-message-content > .received-message-content:has(audio):not(:has(.caption)),
.chat .chat-message .chat-message-content > .sent-message-content:has(video):not(:has(.caption)),
.chat .chat-message .chat-message-content > .received-message-content:has(video):not(:has(.caption)) {
    background-color: inherit !important;
    box-shadow: none !important;
}
.chat .chat-message .chat-message-content > .sent-message-content:has(img):not(:has(.caption)):after,
.chat .chat-message .chat-message-content > .received-message-content:has(img):before,
.chat .chat-message .chat-message-content > .received-message-content:has(img):after,
.chat .chat-message .chat-message-content > .sent-message-content:has(audio):not(:has(.caption)):after,
.chat .chat-message .chat-message-content > .received-message-content:has(audio):before,
.chat .chat-message .chat-message-content > .received-message-content:has(audio):after,
.chat .chat-message .chat-message-content > .sent-message-content:has(video):not(:has(.caption)):after,
.chat .chat-message .chat-message-content > .received-message-content:has(video):before,
.chat .chat-message .chat-message-content > .received-message-content:has(video):after {
    display: none;
}
.chat .chat-message .chat-message-content img {
    max-width: 300px;
}
.chat .chat-message .chat-message-content video {
    max-width: 300px;
}
.chat .chats-container form .chat-message-form-button {
    padding: 0;
    background: none;
    border: none;
    line-height: 1;
}
.chat .chats-container form .chat-message-form-button:after {
    display: none;
}

.chat-iframe-audio-controls {
    min-height: var(--phoenix-navbar-top-height);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
    position: absolute;
    right: 4rem;
    top: var(--phoenix-navbar-top-height);
}
.chat-iframe-audio-controls .btn {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-iframe-audio-controls .btn > * {
    font-size: 20px;
}