.full-height {
    height: 100%;
}

.full-height-v {
    height: auto;
}

.full-width {
    width: 100%;
}

.full-width-h {
    width: auto;
}

.flex, .flex-v, .panes, .panes-v {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-h);
}

.flex-v, .panes-v {
    flex-direction: column;
    gap: var(--gap-v);
    flex-wrap: nowrap;
}

.no-wrap {
    flex-wrap: nowrap;
    overflow: hidden;
}

.flex-grow {
    flex-grow: 1;
}

.panes, .panes-v {
    gap: 0;
}

.pane {
    border: var(--input-border-width) solid var(--bg-4);
}

.padded {
    padding: var(--gap-h);
}

.no-gap {
    gap: 0;
}

.small-gap {
    gap: var(--gap-h);
}

.bold {
    font-weight: bold;
}

.round {
    border-radius: 50%;
}

.icon {
    width: 1em;
    height: 1em;
    transition: transform var(--animation-time) ease;
}

.highlight {
    background-color: var(--bg-3);
}

.error {
    color: var(--red);
    max-width: 200px;
    font-size: 0.8em;
}

.warning {
    color: var(--yellow);
    max-width: 200px;
    font-size: 0.8em;
}

.centered-content {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.spinner {
    --spinner-size: 1em;
    --translation-size: calc(var(--spinner-size) / 2 - var(--spinner-size) / 10);
    height: var(--spinner-size);
    width: var(--spinner-size);
    position: relative;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner > div {
    box-sizing: border-box;
    position: absolute;
    width: 20%; /*This size will affect the distance of the dots from the center.*/
    height: 20%; /*Should be the same as the width.*/
    border-radius: 50%;
    background-color: var(--text);
    animation: spinning-circle 1.4s linear infinite;
}

@keyframes spinning-circle {
    0% {
        transform: rotate(0deg) translate(var(--translation-size)) rotate(0deg) scale(0.5);
    }
    50% {
        transform: rotate(240deg) translate(var(--translation-size)) rotate(-240deg) scale(1);
    }
    100% {
        transform: rotate(360deg) translate(var(--translation-size)) rotate(-360deg) scale(0.5);
    }
}

.spinner > div::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: var(--text);
    border-radius: 100%;
}

.instance {
    padding: var(--gap-h) var(--gap-v);
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--bg-4);
    background: var(--blue);
    color: var(--bg);
    font-size: 0.8em;
    font-weight: bold;
}

.pill {
    padding: 0.5em 1em;
    border-radius: 9999px;
    background: var(--text-3);
    color: var(--bg);
    font-size: 0.8em;
}

.circle {
    border-radius: 50%;
    width: 0.8em;
    height: 0.8em;
    background: var(--bg-3);
}

.align-center {
    align-items: center;
}

.self-end {
    align-self: end;
}

.card, .main-card, .small-card {
    padding: calc(var(--gap-v) * 2);
    background: var(--bg-2);
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--bg-4);
}

.main-card {
    width: min(100%, 800px);
    justify-content: space-between;
}

.small-card {
    padding: var(--gap-v);
}

.space-between {
    justify-content: space-between;
}

.channel {
    padding: var(--gap-h) var(--gap-v);
    width: 100%;
    background: var(--bg);
    border-bottom: var(--input-border-width) solid var(--bg-4);
    color: var(--text);
    font-size: 1.2em;
    cursor: pointer;
}

.channel.active {
    background: var(--bg-2);
    border-right: 10px solid var(--blue);
}

.text-small {
    font-size: 0.8em;
}

.text-tiny {
    font-size: 0.6em;
}

.chat-content {
    height: 100%;
}

.chat-input {
    padding: var(--gap-v);
}

.chat-messages {
    padding: var(--gap-v);
    flex-grow: 1;
    border-left: 1px solid var(--bg-4);
    overflow-y: auto;
}

.chat-user {
    margin-top: var(--gap-v);
    position: relative;
    z-index: 1;
}

.rounded-max {
    border-radius: 9999px;
}

.message-username {
    padding-left: var(--message-padding-left);
    cursor: pointer;
}

.message-username:hover {
    text-decoration: underline;
}

.message-text {
    padding-left: calc(var(--message-padding-left) - 0.25em);
    max-width: calc(100% - 200px);
}

.message-timestamp {
    color: var(--neutral);
    font-size: 0.6em !important;
    padding-left: calc(var(--message-padding-left) + 2em);
    position: absolute;
    bottom: 0;
    left: 0;
    width: max-content;
    transform: translateX(-50%) translateY(150%);
}

.message-note {
    font-style: italic;
    color: var(--text-3);
    font-size: 0.8em;
    padding-left: 1.2em;
}

.message-content {
    padding: 0.25em;
    border-radius: var(--input-border-radius);
    word-wrap: anywhere;
}

.message-menu {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.5em;
    background: var(--bg-3);
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--bg-4);
    z-index: 999;
    width: max-content;
}

.message-menu.no-content {
    padding: 0;
}

.message-content:hover {
    background: var(--bg-2);
}

.reaction-trigger {
    position: absolute;
    left: calc(var(--message-padding-left) - 1.75em);
    bottom: 1px;
    z-index: 666;
    max-width: max-content;
}

.reaction-button {
    display: none;
    border-radius: 999px;
    background: var(--bg-3);
    border: var(--input-border-width) solid var(--text-4);
    padding: 0.2em;
    height: max-content;
    box-sizing: border-box;
    align-self: center;
}

.reaction-button .material-symbols-outlined {
    font-size: 0.8em !important;
}

.message-content:hover .reaction-button {
    display: flex;
}

.reaction-icons {
    max-width: 400px;
    max-height: 300px;
    overflow-y: auto;
    width: max-content;
}

.reaction-icon {
    cursor: pointer;
    --size: 1.7em;
    font-size: var(--size);
    width: var(--size);
    text-align: center;
}

.reaction-icon:hover {
    transform: scale(1.25);
}

.reaction-display {
    font-size: 0.8em;
    background: var(--bg-3);
    border: var(--input-border-width) solid var(--bg-4);
    padding: 0.3em 0.4em;
    color: var(--text-3);
    height: max-content;
    cursor: pointer;
}

.reaction-display.active {
    border: var(--input-border-width) solid var(--text-4);
}

.reaction-menu {
    position: absolute;
    top: calc(100% + var(--gap-h));
}

.reaction-particle {
    position: absolute;
    font-size: 1.5em;
    animation-duration: 1s;
    animation-direction: normal;
    animation-iteration-count: 1;
    z-index: 999;
    pointer-events: none;
    --reaction-size: 2em;
    opacity: 0;
}

@keyframes reaction-top {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(calc(-1 * var(--reaction-size)));
        opacity: 0;
    }
}

@keyframes reaction-top-right {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(calc(-1 * var(--reaction-size))) translateX(calc(var(--reaction-size)));
        opacity: 0;
    }
}

@keyframes reaction-right {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(var(--reaction-size));
        opacity: 0;
    }
}

@keyframes reaction-bottom-right {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(var(--reaction-size)) translateX(var(--reaction-size));
        opacity: 0;
    }
}

@keyframes reaction-bottom {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(var(--reaction-size));
        opacity: 0;
    }
}

@keyframes reaction-bottom-left {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(var(--reaction-size)) translateX(calc(-1 * var(--reaction-size)));
        opacity: 0;
    }
}

@keyframes reaction-left {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(calc(-1 * var(--reaction-size)));
        opacity: 0;
    }
}

@keyframes reaction-top-left {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(calc(-1 * var(--reaction-size))) translateX(calc(-1 * var(--reaction-size)));
        opacity: 0;
    }
}

.close-button {
    align-self: end;
}

.relative {
    position: relative;
}

.resizable {
    position: relative;
}

.resize-indicator {
    position: absolute;
}

.resize-indicator.v {
    height: 100%;
    width: 10px;
    right: 0;
    cursor: ew-resize;
}

.resize-indicator:hover {
    background: rgba(150, 150, 150, 0.2);
}

.one-line {
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.big-avatar, .channel-avatar, .message-avatar, .small-avatar {
    align-self: center;
    border-radius: 50%;
    border: var(--avatar-border-width) solid var(--bg-4);
}

.big-avatar {
    width: 200px;
    height: 200px;
}

.channel-avatar {
    --size: 38px;
    width: var(--size);
    height: var(--size);
}

.message-avatar {
    --size: 2em;
    width: var(--size);
    height: var(--size);
    position: absolute;
    top: 0;
    left: calc(var(--message-padding-left) - 2.5em);
}

.small-avatar {
    --size: 1em;
    width: var(--size);
    height: var(--size);
}

.max800 {
    max-width: 800px;
}

.circle-toggle {
    cursor: pointer;
    border-radius: var(--input-border-radius);
}

.circle-toggle:hover {
    background: var(--bg-3);
}

.collapsible-header {
    cursor: pointer;
}

.collapsible {
    background: var(--bg-2);
    padding: var(--gap-v);
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--bg-4);
}

.fixed {
    position: fixed;
}

.hidden {
    display: none;
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--animation-time) ease-out;
}

.rot0 {
    transform: rotate(0deg);
}

.rot90 {
    transform: rotate(90deg);
}

.rot180 {
    transform: rotate(180deg);
}

.rot270 {
    transform: rotate(270deg);
}

.nav-margin {
    margin-top: 43px;
}

.notification {
    animation: fade-out var(--animation-time) forwards;
    transition: transform var(--animation-time) ease;
    cursor: pointer;
    max-width: max-content;
    align-self: end;
}

.notification:hover {
    transform: translateX(-3px);
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.notification-image {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    border: var(--input-border-width) solid var(--bg-4);
}

.notification-content {
    max-width: 200px;
}

.notification-title, .notification-subtitle, .notification-message {
    word-wrap: anywhere;
}

.notification-subtitle, .notification-message {
    font-size: 0.8em;
}

.profile-card {
    padding: var(--gap-v);
    background: var(--bg-2);
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--bg-4);
    position: absolute;
    top: 3em;
    left: var(--gap-v);
    z-index: 999;
}

.attachment-preview {
    padding-top: calc(var(--gap-v) * 2);
    padding-left: var(--gap-v);
    padding-right: var(--gap-v);
    background: var(--bg-2);
    border-top: var(--input-border-width) solid var(--bg-4);
    gap: calc(var(--gap-v) * 2);
    align-items: end;
}

.attachment-preview-image, .attachment-preview-video {
    height: 4em;
    width: auto;
    border-radius: var(--input-border-radius);
}

.small-icon-button {
    cursor: pointer;
    border-radius: 999px;
    background: var(--bg-3);
    border: var(--input-border-width) solid var(--text-4);
    padding: 0.2em;
    height: max-content;
    box-sizing: border-box;
    align-self: center;
    align-items: center;
}

.small-icon-button .material-symbols-outlined {
    font-size: 0.8em !important;
}

.attachment-remove-button {
    color: var(--red);
    border-color: var(--red);
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(50%) translateY(-50%);
}

.attachments {
    padding-left: calc(var(--message-padding-left) - 0.25em);
    align-items: end;
}

.attachment-image {
    max-height: 200px;
    max-width: 200px;
    height: auto;
    width: auto;
    border-radius: var(--input-border-radius);
    cursor: zoom-in;
}

.attachment-image:hover {
    transform: scale(1.02);
}

.full-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-out;
    z-index: 999;
    background: var(--bg);
}

.attachment-video, .attachment-audio {
    max-height: 200px;
    height: auto;
    width: auto;
    border: 1px solid var(--bg-4);
    border-radius: var(--input-border-radius);
}

.icon-button {
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: .4em;
}

.icon-button:hover {
    background: var(--bg-3);
}

.attachment.pdf {
    width: 100%;
    height: 300px;
}

.attachment.text code {
    width: 100%;
    height: 200px;
    overflow: auto;
    padding: 1em;
    background: var(--bg-3);
    border-radius: var(--input-border-radius);
    box-sizing: border-box;
    font-family: monospace;
    font-size: 0.8em;
    white-space: preserve;
}

.attachment.text {
    width: 100%;
}

.attachment-floating-buttons {
    position: absolute;
    top: var(--gap-v);
    right: var(--gap-v);
}

.attachment-preview-file {
    height: 4em;
    width: auto;
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--bg-4);
    background: var(--bg-4);
    color: var(--text-3);
    font-size: 0.8em;
    font-weight: bold;
    padding: var(--gap-v);
    word-break: break-all;
}

.recording-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 999px;
    pointer-events: none;
}

.recording-indicator.recording {
    border: 2px dashed var(--green);
    animation: rotate 8s infinite linear;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.message-text span {
    line-height: 1.3;
}