/*
 * ============================================================
 * QARKOMIR CHAT UI STABLE v4.0
 * Converse.js 14
 *
 * Production baseline.
 *
 * Desktop:
 *   768-1199px : sidebar 260px
 *   >=1200px   : sidebar 300px
 *
 * Mobile:
 *   Converse owns geometry.
 *   Qarkomir only suppresses controlbox rendering while
 *   converse-chat exists.
 * ============================================================
 */


/* ============================================================
   00. PALETTE / TYPOGRAPHY
   ============================================================ */

#conversejs {
    --q-bg: #1c2028;
    --q-sidebar: #12151b;
    --q-hover: #1d222b;
    --q-selected: #242a34;
    --q-border: #292f39;

    --q-text: #f1f3f5;
    --q-text-soft: #b4bbc6;
    --q-text-muted: #838c99;

    --q-accent: #d2a342;
    --q-online: #40c982;

    --chat-color: var(--q-accent) !important;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif !important;

    font-size: 14px !important;
}


#conversejs input,
#conversejs textarea,
#conversejs button,
#conversejs select,
#conversejs a,
#conversejs span,
#conversejs p,
#conversejs time {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
}


#conversejs .avatar-initials {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-weight: 600 !important;
}


/* ============================================================
   10. VIEWPORT
   ============================================================ */

html,
body {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #11161e !important;

    overflow-x: hidden !important;
    box-sizing: border-box !important;
}


#conversejs,
converse-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #11161e !important;

    box-sizing: border-box !important;
}


converse-root {
    display: block !important;
}


/* ============================================================
   20. CONTROLBOX / SIDEBAR
   ============================================================ */

#controlbox {
    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    align-self: stretch !important;

    background: var(--q-sidebar) !important;

    border-right:
        1px solid var(--q-border) !important;
}


#controlbox > .box-flyout,
#controlbox .controlbox-pane {
    width: 100% !important;
    max-width: none !important;
}


#controlbox .box-flyout,
#controlbox .controlbox-pane,
#converse-roster,
#chatrooms {
    background: var(--q-sidebar) !important;
}


/* ============================================================
   30. CURRENT USER PROFILE
   ============================================================ */

#controlbox .userinfo {
    background: var(--q-sidebar) !important;

    border-bottom:
        1px solid var(--q-border) !important;
}


#controlbox:not(.logged-out)
converse-user-profile
.show-profile {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    min-width: 0 !important;

    text-decoration: none !important;
}


#controlbox:not(.logged-out)
converse-user-profile
.show-profile
converse-avatar {
    flex: 0 0 40px !important;
}


#controlbox .userinfo .username {
    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    color: var(--q-text) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}


#controlbox .userinfo .xmpp-status,
#controlbox .userinfo .status-message {
    color: var(--q-text-muted) !important;

    font-size: 12px !important;
}


/* ============================================================
   40. CONTROLBOX HEADERS / MENUS
   ============================================================ */

#chatrooms
.controlbox-heading--groupchats
> .open-rooms-toggle,

#converse-roster
.controlbox-heading--contacts
> .open-contacts-toggle {
    color: var(--q-text-soft) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 36px !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}


#converse-roster
.controlbox-heading--contacts
.open-contacts-toggle
converse-icon svg {
    fill: var(--q-text-muted) !important;
}


#chatrooms .dropdown-toggle svg,
#converse-roster .dropdown-toggle svg,
#controlbox .controlbox-heading__btn svg {
    fill: var(--q-text-muted) !important;
    color: var(--q-text-muted) !important;
}


#chatrooms .dropdown-toggle:hover svg,
#converse-roster .dropdown-toggle:hover svg,
#controlbox .controlbox-heading__btn:hover svg {
    fill: var(--q-text) !important;
}


/* ============================================================
   50. ROSTER GROUP
   ============================================================ */

#converse-roster
.roster-group
> .group-toggle {
    min-height: 28px !important;

    padding-left: 13px !important;

    color: #9099a6 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 28px !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}


#converse-roster
.roster-group
> .group-toggle
converse-icon svg {
    fill: var(--q-text-muted) !important;
}


/* ============================================================
   60. ROSTER CONTACTS
   Final Converse 14 geometry from v3.4.4
   ============================================================ */

#converse-roster
.roster-group-contacts
> li.list-item {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    width: calc(100% - 12px) !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 2px 6px !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 7px !important;

    background: transparent !important;

    transition:
        background-color .12s ease !important;
}


#converse-roster
.roster-group-contacts
> li.list-item
> converse-roster-contact {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


#converse-roster
.roster-group-contacts
a.list-item-link {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    flex: 1 1 auto !important;

    gap: 10px !important;

    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 9px !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    line-height: normal !important;

    color: var(--q-text) !important;

    background: transparent !important;

    text-decoration: none !important;
}


/* Avatar/presence container */

#converse-roster
.roster-group-contacts
a.list-item-link
> span:first-child {
    position: relative !important;

    display: block !important;

    flex: 0 0 30px !important;

    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;

    height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    line-height: 30px !important;

    top: 0 !important;
}


#converse-roster
.roster-group-contacts
a.list-item-link
> span:first-child
converse-avatar {
    display: block !important;

    width: 30px !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;
}


#converse-roster
.roster-group-contacts
.avatar-initials {
    display: block !important;

    width: 30px !important;
    height: 30px !important;

    margin: 0 !important;

    line-height: 30px !important;
}


/* Presence */

#converse-roster
.roster-group-contacts
a.list-item-link
.chat-status--avatar {
    position: absolute !important;

    right: -2px !important;
    bottom: -1px !important;

    width: 10px !important;
    height: 10px !important;

    margin: 0 !important;

    line-height: 10px !important;

    z-index: 3 !important;
}


#converse-roster
.roster-group-contacts
a.list-item-link
.chat-status--avatar
svg {
    display: block !important;

    width: 10px !important;
    height: 10px !important;
}


/* Contact name */

#converse-roster
.roster-group-contacts
a.list-item-link
> span.contact-name {
    position: static !important;

    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    color: #e7e9ed !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;

    top: 0 !important;
}


#converse-roster
.roster-group-contacts
.contact-name--offline {
    opacity: 1 !important;
}


/* Action menu */

#converse-roster
.roster-group-contacts
.contact-actions {
    align-self: center !important;

    flex: 0 0 auto !important;

    margin: 0 3px 0 0 !important;

    line-height: normal !important;
}


/* Hover/current */

#converse-roster
.roster-group-contacts
> li.list-item:hover {
    background: var(--q-hover) !important;
}


#converse-roster
.roster-group-contacts
> li.current-xmpp-contact {
    background: var(--q-selected) !important;

    box-shadow:
        inset 3px 0 0
        var(--q-accent) !important;
}


#converse-roster
.roster-group-contacts
> li.current-xmpp-contact
a.list-item-link {
    background: transparent !important;
}


/* ============================================================
   70. PRESENCE
   ============================================================ */

#conversejs .online,
#conversejs .presence-online {
    color: var(--q-online) !important;
}


/* ============================================================
   80. CHAT HEADER
   ============================================================ */

#conversejs
.chatbox:not(#controlbox)
.chat-head {
    min-height: 64px !important;

    background: var(--q-sidebar) !important;

    border-bottom:
        1px solid var(--q-border) !important;
}


#conversejs
.chatbox:not(#controlbox)
.chat-head
.chat-title,

#conversejs
.chatbox:not(#controlbox)
.chat-head
.chat-title a,

#conversejs
.chatbox:not(#controlbox)
.chat-head
.fullname {
    color: var(--q-text) !important;

    font-size: 17px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}


/* ============================================================
   90. CHAT BODY / MESSAGES
   ============================================================ */

#conversejs
.chatbox:not(#controlbox)
.chat-content,

#conversejs
.chatbox:not(#controlbox)
.chatbox-content {
    background: var(--q-bg) !important;

    color: var(--q-text) !important;
}


#conversejs .chat-msg,
#conversejs .chat-msg-content,
#conversejs .message,
#conversejs .message-body {
    color: var(--q-text) !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}


#conversejs .chat-msg__author,
#conversejs .message-author {
    font-weight: 600 !important;
}


#conversejs .chat-msg__time,
#conversejs time {
    color: var(--q-text-muted) !important;

    font-size: 11px !important;
}


#conversejs .chat-content a {
    color: #dfb85f !important;
}


/* ============================================================
   100. COMPOSER / INPUTS
   ============================================================ */

#conversejs textarea,
#conversejs input[type="text"],
#conversejs input[type="search"] {
    background: #222731 !important;

    color: var(--q-text) !important;

    border:
        1px solid #353c48 !important;

    border-radius: 8px !important;

    box-shadow: none !important;
}


#conversejs textarea:focus,
#conversejs input[type="text"]:focus,
#conversejs input[type="search"]:focus {
    border-color: #8d7544 !important;

    outline: none !important;

    box-shadow: none !important;
}


/* ============================================================
   110. DROPDOWNS
   ============================================================ */

#conversejs .dropdown-menu {
    background: #20252e !important;

    border:
        1px solid var(--q-border) !important;

    border-radius: 8px !important;
}


#conversejs .dropdown-item {
    color: var(--q-text-soft) !important;
}


#conversejs .dropdown-item:hover {
    background: var(--q-hover) !important;

    color: #ffffff !important;
}


/* ============================================================
   120. SCROLLBAR
   ============================================================ */

#conversejs * {
    scrollbar-width: thin;

    scrollbar-color:
        #3a414d transparent;
}


#conversejs *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}


#conversejs *::-webkit-scrollbar-thumb {
    background: #3a414d;

    border-radius: 10px;
}


#conversejs *::-webkit-scrollbar-track {
    background: transparent;
}


/* ============================================================
   130. CORPORATE LOGIN
   ============================================================ */

#conversejs #controlbox.logged-out {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;

    height: 100vh !important;
    min-height: 100dvh !important;

    flex: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 24px !important;

    background: #0f1218 !important;

    border: 0 !important;

    box-shadow: none !important;

    overflow: auto !important;
}


#conversejs
#controlbox.logged-out
> .box-flyout
> converse-controlbox-buttons {
    display: none !important;
}


#conversejs
#controlbox.logged-out
.controlbox-pane
> * {
    display: none !important;
}


#conversejs
#controlbox.logged-out
.controlbox-pane
> converse-login-form {
    display: block !important;
}


#conversejs
#controlbox.logged-out
> .box-flyout {
    position: static !important;

    display: block !important;

    width:
        min(420px, calc(100vw - 32px)) !important;

    min-width: 0 !important;
    max-width: 420px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}


#conversejs
#controlbox.logged-out
.controlbox-pane {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


#conversejs
#controlbox.logged-out
converse-login-form {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 32px !important;

    background: #181c24 !important;

    border:
        1px solid #2d3440 !important;

    border-radius: 14px !important;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .35) !important;
}


#conversejs
#controlbox.logged-out
#converse-login {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


#conversejs
#controlbox.logged-out
#converse-login::before {
    content: "Qarkomir Chat";

    display: block;

    margin:
        0 0 28px 0;

    color: var(--q-accent);

    font-size: 26px;
    line-height: 1.15;
    font-weight: 650;

    letter-spacing: -.025em;
}


#conversejs
#controlbox.logged-out
#converse-login
.mb-3 {
    width: 100% !important;

    margin-bottom: 18px !important;
}


#conversejs
#controlbox.logged-out
#converse-login
.form-label {
    display: block !important;

    width: 100% !important;

    margin:
        0 0 7px 0 !important;

    color: #aeb6c2 !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}


#conversejs
#controlbox.logged-out
#converse-login
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    min-width: 0 !important;
}


#conversejs
#controlbox.logged-out
#converse-login-jid {
    box-sizing: border-box !important;

    flex: 1 1 auto !important;

    width: 1% !important;
    min-width: 0 !important;

    height: 44px !important;

    padding: 0 12px !important;

    background: #202630 !important;

    color: #f2f3f5 !important;

    border:
        1px solid #38404d !important;

    border-right: 0 !important;

    border-radius:
        7px 0 0 7px !important;

    font-size: 14px !important;

    box-shadow: none !important;
}


#conversejs
#controlbox.logged-out
#basic-addon2 {
    box-sizing: border-box !important;

    flex: 0 0 auto !important;

    display: flex !important;
    align-items: center !important;

    height: 44px !important;

    padding: 0 12px !important;

    white-space: nowrap !important;

    background: #151920 !important;

    color: #8d96a4 !important;

    border:
        1px solid #38404d !important;

    border-radius:
        0 7px 7px 0 !important;

    font-size: 12px !important;
}


#conversejs
#controlbox.logged-out
#converse-login-password {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 44px !important;

    padding: 0 12px !important;

    background: #202630 !important;

    color: #f2f3f5 !important;

    border:
        1px solid #38404d !important;

    border-radius: 7px !important;

    font-size: 14px !important;

    box-shadow: none !important;
}


#conversejs
#controlbox.logged-out
#converse-login-jid:focus,

#conversejs
#controlbox.logged-out
#converse-login-password:focus {
    border-color: #a78643 !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px
        rgba(210, 163, 66, .10) !important;
}


#conversejs
#controlbox.logged-out
.login-trusted {
    width: 100% !important;

    margin:
        6px 0 22px 0 !important;

    padding-left:
        1.6em !important;
}


#conversejs
#controlbox.logged-out
.login-trusted__desc {
    color: #aeb6c2 !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
}


#conversejs
#controlbox.logged-out
.form-check-input {
    accent-color: var(--q-accent);
}


#conversejs
#controlbox.logged-out
.login-trusted
converse-popover {
    margin-left: 6px !important;
}


#conversejs
#controlbox.logged-out
#converse-login
button[type="submit"],

#conversejs
#controlbox.logged-out
#converse-login
input[type="submit"] {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    background: var(--q-accent) !important;

    color: #15171c !important;

    border: 0 !important;
    border-radius: 7px !important;

    font-size: 14px !important;
    font-weight: 650 !important;

    box-shadow: none !important;
}


#conversejs
#controlbox.logged-out
#converse-login
button[type="submit"]:hover {
    background: #ddb252 !important;
}


#conversejs
#controlbox.logged-out
.conn-feedback {
    width: 100% !important;

    font-size: 13px !important;
}


/* Login mobile */

@media (max-width: 520px) {

    #conversejs
    #controlbox.logged-out {
        padding: 16px !important;
    }


    #conversejs
    #controlbox.logged-out
    > .box-flyout {
        width: 100% !important;
        max-width: 390px !important;
    }


    #conversejs
    #controlbox.logged-out
    converse-login-form {
        padding:
            26px 20px !important;

        border-radius: 12px !important;
    }


    #conversejs
    #controlbox.logged-out
    #converse-login::before {
        margin-bottom: 24px;

        font-size: 23px;
    }


    #conversejs
    #controlbox.logged-out
    #basic-addon2 {
        padding:
            0 9px !important;

        font-size: 11px !important;
    }
}


/* ============================================================
   140. MODALS
   ============================================================ */

#conversejs .modal-content {
    background: #1b2028 !important;

    color: #f1f3f5 !important;

    border:
        1px solid #303743 !important;

    border-radius: 12px !important;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .45) !important;
}


#conversejs .modal-header {
    background: #171b22 !important;

    border-bottom:
        1px solid #303743 !important;

    border-radius:
        12px 12px 0 0 !important;
}


#conversejs .modal-title {
    color: #f1f3f5 !important;

    font-size: 18px !important;
    font-weight: 600 !important;
}


#conversejs .modal-body {
    background: #1b2028 !important;

    color: #d8dce2 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}


#conversejs .modal-footer {
    background: #1b2028 !important;

    border-top:
        1px solid #303743 !important;

    border-radius:
        0 0 12px 12px !important;
}


#conversejs .modal .btn-primary {
    background: var(--q-accent) !important;

    color: #15171c !important;

    border:
        1px solid var(--q-accent) !important;

    border-radius: 7px !important;

    font-weight: 600 !important;

    box-shadow: none !important;
}


#conversejs .modal .btn-primary:hover,
#conversejs .modal .btn-primary:focus {
    background: #ddb253 !important;

    border-color: #ddb253 !important;

    color: #15171c !important;
}


#conversejs .modal .btn-secondary {
    background: #2a303a !important;

    color: #d7dbe1 !important;

    border:
        1px solid #3a424f !important;

    border-radius: 7px !important;

    font-weight: 500 !important;

    box-shadow: none !important;
}


#conversejs .modal .btn-secondary:hover,
#conversejs .modal .btn-secondary:focus {
    background: #343b47 !important;

    border-color: #46505f !important;

    color: #ffffff !important;
}


#conversejs .modal .btn-close,
#conversejs .modal-header .close {
    color: #9ca5b1 !important;

    opacity: .85 !important;

    filter: none !important;
}


#conversejs .modal .btn-close:hover,
#conversejs .modal-header .close:hover {
    color: #ffffff !important;

    opacity: 1 !important;
}


#conversejs
.modal-header
converse-icon svg {
    fill: #9ca5b1 !important;
}


#conversejs
.modal-header
converse-icon:hover svg {
    fill: #ffffff !important;
}


#conversejs .modal input[type="text"],
#conversejs .modal input[type="password"],
#conversejs .modal input[type="email"],
#conversejs .modal input[type="search"],
#conversejs .modal textarea,
#conversejs .modal select {
    background: #202630 !important;

    color: #f1f3f5 !important;

    border:
        1px solid #38404d !important;

    border-radius: 7px !important;

    box-shadow: none !important;
}


#conversejs .modal input:focus,
#conversejs .modal textarea:focus,
#conversejs .modal select:focus {
    border-color: #a78643 !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px
        rgba(210, 163, 66, .10) !important;
}


#conversejs .modal label {
    color: #b9c0ca !important;
}


.modal-backdrop.show {
    opacity: .60 !important;
}


/* ============================================================
   150. DESKTOP/TABLET GEOMETRY
   ============================================================ */

/*
 * 768 - 1199:
 * sidebar = 260px
 */

@media
    (min-width: 768px)
    and
    (max-width: 1199.98px) {

    #controlbox {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;

        flex:
            0 0 260px !important;
    }


    #controlbox > .box-flyout,
    #controlbox .controlbox-pane,
    #controlbox .userinfo,
    #converse-roster,
    #chatrooms {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;

        background:
            var(--q-sidebar) !important;
    }


    #conversejs
    .chatbox:not(#controlbox),

    .conversejs
    .chatbox:not(#controlbox) {
        width:
            calc(100vw - 260px) !important;

        max-width:
            calc(100vw - 260px) !important;

        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }
}


/*
 * >=1200:
 * sidebar = 300px
 */

@media (min-width: 1200px) {

    #controlbox {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;

        flex:
            0 0 300px !important;
    }


    #controlbox > .box-flyout,
    #controlbox .controlbox-pane,
    #controlbox .userinfo,
    #converse-roster,
    #chatrooms {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;

        background:
            var(--q-sidebar) !important;
    }


    #conversejs
    .chatbox:not(#controlbox),

    .conversejs
    .chatbox:not(#controlbox) {
        width:
            calc(100vw - 300px) !important;

        max-width:
            calc(100vw - 300px) !important;

        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }
}


/*
 * Common desktop/tablet chat internals.
 */

@media (min-width: 768px) {

    #conversejs
    .chatbox:not(#controlbox)
    > .flyout.box-flyout,

    .conversejs
    .chatbox:not(#controlbox)
    > .flyout.box-flyout {
        width: inherit !important;
        max-width: inherit !important;
        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }


    #conversejs
    .chatbox:not(#controlbox)
    > .flyout.box-flyout
    > .chat-body,

    .conversejs
    .chatbox:not(#controlbox)
    > .flyout.box-flyout
    > .chat-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }


    #conversejs
    .chatbox:not(#controlbox)
    converse-chat-bottom-panel.bottom-panel,

    #conversejs
    .chatbox:not(#controlbox)
    converse-message-form,

    #conversejs
    .chatbox:not(#controlbox)
    form.chat-message-form,

    #conversejs
    .chatbox:not(#controlbox)
    converse-chat-toolbar.chat-toolbar,

    #conversejs
    .chatbox:not(#controlbox)
    textarea.chat-textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing:
            border-box !important;
    }


    #conversejs
    .chatbox:not(#controlbox)
    converse-message-form {
        display: block !important;
    }


    #conversejs
    .chatbox:not(#controlbox)
    converse-chat-toolbar
    > span:not(.toolbar-buttons):has(> button.send-button) {
        margin-left: auto !important;

        flex-grow: 0 !important;
        flex-shrink: 0 !important;

        min-width: 42px !important;
    }


    #conversejs
    .chatbox:not(#controlbox)
    button.send-button {
        flex-shrink: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* ============================================================
   160. MOBILE STATE
   <768px

   Verified Converse 14 behaviour:

   roster:
       #controlbox exists
       converse-chat does not exist

   conversation:
       #controlbox exists
       converse-chat exists

   Do NOT override mobile geometry.
   ============================================================ */

@media (max-width: 767.98px) {

    #conversejs
    converse-chats:has(> converse-chat.chatbox)
    > #controlbox
    > .flyout.box-flyout {
        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;

        transition: none !important;
    }


    #conversejs
    converse-chats:has(> converse-chat.chatbox)
    > converse-chat.chatbox
    > .flyout.box-flyout {
        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;
    }
}


/*
 * ============================================================
 * END QARKOMIR CHAT UI STABLE v4.0
 * ============================================================
 */