:root {
    color-scheme: dark;
}

html,
body,
body.converse-fullscreen {
    background: #050806 !important;
    color: #d6e2dc !important;
    font-family: Menlo, Monaco, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
}

body.converse-fullscreen::before {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    content: "";
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.012) 0,
        rgba(255, 255, 255, 0.012) 1px,
        transparent 1px,
        transparent 4px
    );
}

.conversejs,
.conversejs[data-converse-theme],
.conversejs[data-bs-theme],
.conversejs-bg,
#conversejs-bg,
converse-bg,
converse-bg[data-converse-theme],
converse-bg[data-bs-theme] {
    --background-color: #080c0a;
    --background-color-rgb: 8, 12, 10;
    --background-color-lighter: #101914;
    --foreground-color: #00ff41;
    --primary-color: #00ff41 !important;
    --primary-rgb: 0, 255, 65;
    --primary-color-hover: #75ff98 !important;
    --secondary-color: #8abf98 !important;
    --secondary-rgb: 138, 191, 152;
    --secondary-color-hover: #b5efc4 !important;
    --success-color: #00ff41;
    --success-color-rgb: 0, 255, 65;
    --danger-color: #ffd84a;
    --danger-color-rgb: 255, 216, 74;
    --warning-color: #ffd84a;
    --info-color: #9dffb5;
    --info-color-rgb: 157, 255, 181;
    --link-color: #00ff41;
    --link-color-hover: #75ff98;
    --chat-color: #00ff41;
    --chat-rgb: 0, 255, 65;
    --muc-color: #00e83b;
    --muc-rgb: 0, 232, 59;
    --controlbox-color: #00ff41;
    --heading-color: #f2f5f3;
    --brand-heading-color: #00ff41;
    --global-background-color: #050806;
    --highlight-color: #14241c;
    --highlight-color-hover: #1a3025;
    --selection-color: #14241c;
    --subdued-color: #6fa77b;
    --disabled-color: #55735e;
    --focus-color: #00d77f;
    --chat-header-bg-color: #0b120e;
    --chat-header-fg-color: #00ff41;
    --muc-header-bg-color: #0b120e;
    --muc-header-fg-color: #00ff41;
    --headlines-header-bg-color: #0b120e;
    --headlines-header-fg-color: #00ff41;
    --normal-font: Menlo, Monaco, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --heading-font: Menlo, Monaco, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --branding-font: Menlo, Monaco, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --chat-textarea-height: 140px;
    --fullpage-max-chat-textarea-height: 220px;
    --message-font-size: 15px;
    --button-border-radius: 3px;
    --chatbox-border-radius: 0;
    --converse-body-bg: #080c0a;
    --converse-body-bg-rgb: 8, 12, 10;
    --converse-body-color: #00ff41 !important;
    --converse-body-color-rgb: 0, 255, 65;
    --converse-border-color: #1d3027;
    --converse-primary: #00ff41;
    --converse-primary-rgb: 0, 255, 65;
    --converse-secondary: #8abf98;
    --converse-link-color: #00ff41 !important;
    --converse-link-hover-color: #75ff98 !important;
    --converse-border-radius: 0.2rem;
    --converse-border-radius-sm: 0.15rem;
    --converse-border-radius-lg: 0.25rem;
    --converse-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.conversejs *,
converse-bg * {
    scrollbar-color: #244437 #080c0a;
}

.conversejs converse-controlbox-navbar,
.conversejs converse-footer {
    display: none !important;
}

.conversejs converse-brand-logo {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: clamp(3rem, 10vh, 7rem) 0 2.25rem;
    text-align: center;
}

.conversejs converse-brand-logo .brand-heading {
    display: none !important;
}

.conversejs converse-brand-logo::before {
    color: #8affcb;
    content: "HUSTLE AND FLOW";
    font-size: clamp(2rem, 5vw, 4.75rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.conversejs converse-brand-logo::after {
    margin-top: 0.85rem;
    color: #5e7d6e;
    content: "PRIVATE XMPP // AUTHORIZED ACCESS ONLY";
    font-size: clamp(0.65rem, 1vw, 0.85rem);
    letter-spacing: 0.18em;
}

.converse-fullscreen .conversejs #controlbox converse-login-form {
    width: min(92vw, 390px) !important;
    padding: 1.5rem 1.5rem 1.1rem !important;
    background: #080c0a !important;
    border: 1px solid #28483a !important;
    border-radius: 3px !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.65) !important;
}

.converse-fullscreen .conversejs #controlbox converse-login-form::before {
    display: block;
    margin-bottom: 1.3rem;
    color: #80ffc0;
    content: "> ACCESS_GATE";
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.conversejs converse-login-form label {
    color: #9fb2a8 !important;
    font-size: 0.78rem;
    letter-spacing: 0.035em;
}

.conversejs converse-login-form .input-group-text,
.conversejs converse-login-form .addon {
    background: #101914 !important;
    border-color: #29463a !important;
    color: #789486 !important;
}

.conversejs converse-login-form .login-trusted__desc {
    color: #81958a !important;
}

.conversejs converse-login-form .form-check-input {
    background-color: #070b09 !important;
    border-color: #436653 !important;
}

.conversejs converse-login-form .form-check-input:checked {
    background-color: #00c875 !important;
    border-color: #00e087 !important;
}

.conversejs converse-login-form .btn-primary {
    min-width: 11rem;
    padding: 0.65rem 1.5rem;
    text-transform: uppercase;
}

.conversejs .chatbox,
.conversejs .chatroom-body,
.conversejs .chat-content,
.conversejs .controlbox-pane,
.conversejs .controlbox-padded,
.conversejs #controlbox,
.conversejs .modal-content,
.conversejs .dropdown-menu,
.conversejs .popover,
.conversejs .list-group-item {
    background-color: #080c0a !important;
    color: #d6e2dc !important;
}

.conversejs .chat-head,
.conversejs .controlbox-head,
.conversejs .sidebar,
.conversejs .navbar,
.conversejs .modal-header,
.conversejs .popover-header {
    background: #0b120e !important;
    color: #b6f8d5 !important;
    border-color: #1d3027 !important;
    box-shadow: none !important;
}

.conversejs #converse-modals .modal .modal-content,
.conversejs .modal-content {
    background: #080c0a !important;
    color: #f2f5f3 !important;
    border: 1px solid #29463a !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.68) !important;
}

.conversejs #converse-modals .modal .modal-header,
.conversejs .modal-content .modal-header {
    background: #0b120e !important;
    color: #f2f5f3 !important;
    border-bottom: 1px solid #29463a !important;
    box-shadow: none !important;
}

.conversejs #converse-modals .modal .modal-header .modal-title,
.conversejs #converse-modals .modal .modal-header .modal-title *,
.conversejs .modal-content .modal-header .modal-title,
.conversejs .modal-content .modal-header .modal-title * {
    color: #f2f5f3 !important;
    font-family: "Avenir Next Condensed", "Arial Narrow", Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.055em;
    text-shadow: none !important;
}

.conversejs #converse-modals .modal .modal-header .btn,
.conversejs #converse-modals .modal .modal-header .close {
    color: #ffd84a !important;
}

.conversejs #converse-modals .modal .modal-header .btn svg,
.conversejs #converse-modals .modal .modal-header .close svg,
.conversejs #converse-modals .modal .modal-header .fa-times svg {
    color: #ffd84a !important;
    fill: #ffd84a !important;
}

.conversejs #converse-modals .modal .modal-body,
.conversejs #converse-modals .modal .modal-body p,
.conversejs #converse-modals .modal .modal-body .form-label,
.conversejs #converse-modals .modal .modal-body label {
    color: #f2f5f3 !important;
}

.conversejs #converse-modals .modal .subdued,
.conversejs #converse-modals .modal .form-help,
.conversejs #converse-modals .modal .text-muted,
.conversejs #converse-modals .modal converse-profile-modal .profile-property label {
    color: #6fa77b !important;
}

.conversejs #converse-modals .modal .nav,
.conversejs #converse-modals .modal .nav-tabs {
    border-color: #29463a !important;
}

.conversejs #converse-modals .modal .nav-item .nav-link,
.conversejs #converse-modals .modal .nav-pills .nav-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #9dffb5 !important;
    font-family: "Avenir Next Condensed", "Arial Narrow", Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.035em;
    box-shadow: none !important;
}

.conversejs #converse-modals .modal .nav-item .nav-link:hover,
.conversejs #converse-modals .modal .nav-pills .nav-link:hover,
.conversejs #converse-modals .modal .nav-item .nav-link:focus,
.conversejs #converse-modals .modal .nav-pills .nav-link:focus {
    background: #101914 !important;
    border-color: #527562 !important;
    color: #f2f5f3 !important;
}

.conversejs #converse-modals .modal .nav-item .nav-link.active,
.conversejs #converse-modals .modal .nav-item:hover .nav-link.active,
.conversejs #converse-modals .modal .nav-pills .nav-link.active,
.conversejs #converse-modals .modal .nav-pills .show > .nav-link {
    background: #111a16 !important;
    border-color: #ffd84a !important;
    color: #ffd84a !important;
    text-shadow: 0 0 6px rgba(255, 216, 74, 0.16);
}

.conversejs #converse-modals .modal .modal-footer {
    background: #0b120e !important;
    border-top: 1px solid #29463a !important;
}

.conversejs .dropdown-menu,
.conversejs .popover,
.conversejs .toast {
    background: #0b120e !important;
    color: #f2f5f3 !important;
    border: 1px solid #29463a !important;
}

.conversejs .dropdown-item,
.conversejs .popover-body,
.conversejs .toast-body {
    color: #9dffb5 !important;
}

.conversejs .dropdown-item:hover,
.conversejs .dropdown-item:focus {
    background: #14241c !important;
    color: #f2f5f3 !important;
}

.conversejs .controlbox-heading,
.conversejs .sidebar-heading,
.conversejs .chatbox-title,
.conversejs .chatbox-title__text {
    color: #80ffc0 !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em;
    text-shadow: none !important;
}

.conversejs .controlbox-heading::before,
.conversejs .sidebar-heading::before {
    color: #00d77f;
    content: "> ";
}

.conversejs a,
.conversejs .list-item-link,
.conversejs .chatbox-btn,
.conversejs .list-item-action {
    color: #3af0a0 !important;
}

.conversejs a:hover,
.conversejs .list-item-link:hover,
.conversejs .chatbox-btn:hover,
.conversejs .list-item-action:hover {
    color: #8affcb !important;
}

.conversejs .list-item,
.conversejs .message,
.conversejs .form-control,
.conversejs input,
.conversejs textarea,
.conversejs select {
    border-color: #1d3027 !important;
}

.conversejs .list-item:hover,
.conversejs .list-item.open,
.conversejs .message:hover {
    background-color: #101914 !important;
}

.conversejs input,
.conversejs textarea,
.conversejs select,
.conversejs .form-control {
    background: #070b09 !important;
    color: #e2eee8 !important;
    border: 1px solid #29463a !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    caret-color: #00d77f;
}

.conversejs input:focus,
.conversejs textarea:focus,
.conversejs select:focus,
.conversejs .form-control:focus {
    background: #0a100d !important;
    border-color: #00d77f !important;
    box-shadow: 0 0 0 2px rgba(0, 215, 127, 0.14) !important;
    outline: none !important;
}

.conversejs input::placeholder,
.conversejs textarea::placeholder {
    color: #667a70 !important;
    opacity: 1 !important;
}

.conversejs converse-login-form converse-popover,
.conversejs converse-login-form .fa-info-circle {
    color: #3af0a0 !important;
}

.conversejs .btn,
.conversejs button {
    border-radius: 3px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em;
    box-shadow: none !important;
}

.conversejs .btn-primary,
.conversejs .btn-success,
.conversejs button[type="submit"] {
    background: #00c875 !important;
    border-color: #00e087 !important;
    color: #03100a !important;
}

.conversejs .btn-primary:hover,
.conversejs .btn-success:hover,
.conversejs button[type="submit"]:hover {
    background: #48f5a9 !important;
    border-color: #80ffc0 !important;
    color: #020806 !important;
}

.conversejs .btn-secondary,
.conversejs .btn-outline-secondary,
.conversejs .btn-light {
    background: #111a16 !important;
    border-color: #29463a !important;
    color: #b6c8bf !important;
}

.conversejs .btn-danger,
.conversejs .btn-outline-danger {
    background: #111a16 !important;
    border-color: #ffd84a !important;
    color: #ffd84a !important;
}

.conversejs .btn-danger:hover,
.conversejs .btn-outline-danger:hover {
    background: #ffd84a !important;
    border-color: #ffe782 !important;
    color: #050806 !important;
}

.conversejs .badge,
.conversejs .list-item-badge {
    background: #00c875 !important;
    color: #03100a !important;
}

.conversejs .message.chat-msg--highlighted,
.conversejs .message.chat-msg--action {
    background: #102019 !important;
}

.conversejs .message.chat-msg .chat-msg__text,
.conversejs converse-chat-message-body,
.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea {
    color: #00ff41 !important;
    font-family: Menlo, Monaco, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.18);
}

.conversejs .message.chat-msg .chat-msg__author,
.conversejs .message.chat-msg .show-msg-author-modal,
.conversejs .message.chat-msg .show-msg-author-modal .chat-msg__author {
    color: #ffd84a !important;
    font-family: Menlo, Monaco, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
    text-shadow: 0 0 6px rgba(255, 216, 74, 0.2);
}

.conversejs #controlbox .controlbox-section .controlbox-heading--groupchats,
.conversejs #controlbox .controlbox-section .controlbox-heading--contacts,
.conversejs #controlbox .controlbox-section .controlbox-heading--groupchats *,
.conversejs #controlbox .controlbox-section .controlbox-heading--contacts * {
    color: #ffd84a !important;
    font-family: "Avenir Next Condensed", "Arial Narrow", Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.065em;
    text-shadow: 0 0 6px rgba(255, 216, 74, 0.16);
}

.conversejs #controlbox .controlbox-section .controlbox-heading--groupchats::before,
.conversejs #controlbox .controlbox-section .controlbox-heading--contacts::before {
    color: #ffd84a !important;
}

.conversejs #controlbox .controlbox-section .controlbox-heading--groupchats svg,
.conversejs #controlbox .controlbox-section .controlbox-heading--contacts svg {
    fill: #ffd84a !important;
}

.conversejs .chatbox .chat-head.chat-head-chatbox .chatbox-title__text,
.conversejs .chatbox .chat-head.chat-head-chatbox .chatbox-title__text *,
.conversejs .chatbox .chat-head.chat-head-chatbox .show-msg-author-modal {
    color: #00ff41 !important;
}

.conversejs .message.chat-msg .chat-msg__time,
.conversejs .message.date-separator {
    color: #5f936d !important;
    font-family: Menlo, Monaco, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
}

.conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea {
    box-sizing: border-box;
    min-height: 140px !important;
    max-height: 220px !important;
    padding: 0.75rem !important;
}

.conversejs hr,
.conversejs .dropdown-divider {
    border-color: #1d3027 !important;
    opacity: 1;
}

.conversejs ::selection {
    background: #00d77f;
    color: #03100a;
}

/* Compact text presence next to every regular roster contact. Converse keeps
   the contact-name--* class in sync with XMPP presence, so this is display-only. */
.conversejs #converse-roster converse-roster-contact
    .open-chat .contact-name[class*="contact-name--"] {
    display: inline-block !important;
    max-width: calc(100% - 48px) !important;
    overflow: hidden;
    vertical-align: middle;
}

.conversejs #converse-roster converse-roster-contact
    .contact-name[class*="contact-name--"]::after {
    margin-inline-start: 0.5em;
    font-family: Menlo, Monaco, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: none;
}

.conversejs #converse-roster .contact-name--online::after,
.conversejs #converse-roster .contact-name--chat::after {
    content: "● в сети";
    color: #00ff41;
}

.conversejs #converse-roster .contact-name--away::after {
    content: "● отошёл";
    color: #ffd84a;
}

.conversejs #converse-roster .contact-name--xa::after {
    content: "● давно нет";
    color: #d6b842;
}

.conversejs #converse-roster .contact-name--dnd::after {
    content: "● занят";
    color: #ff5c68;
}

.conversejs #converse-roster .contact-name--offline::after,
.conversejs #converse-roster .contact-name--unavailable::after {
    content: "● не в сети";
    color: #70857a;
}

@media (max-width: 768px) {
    body.converse-fullscreen::before {
        display: none;
    }

    .conversejs converse-brand-logo {
        margin: 2.5rem 0 1.75rem;
    }

    .conversejs converse-brand-logo::before {
        font-size: clamp(1.45rem, 8vw, 2.4rem);
        letter-spacing: 0.09em;
    }

    .conversejs converse-brand-logo::after {
        max-width: 90vw;
        line-height: 1.6;
    }

    .conversejs,
    .conversejs[data-converse-theme],
    .conversejs[data-bs-theme] {
        --chat-textarea-height: 132px;
        --fullpage-max-chat-textarea-height: 190px;
    }

    .conversejs .chatbox .bottom-panel .chat-message-form .chat-textarea {
        min-height: 132px !important;
        max-height: 190px !important;
    }
}