/* =========================
       STYLING
       ========================= */
.conversejs .message.chat-msg .chat-msg__message .chat-msg__body--wrapper .chat-msg__text {
    color: rgba(232, 240, 255, 1);
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    padding: 0;
}

/* Відео-повідомлення: бульбашка стискається під розмір відео, без зайвого
   простору справа (раніше wrapper/message були width:100% і тягнули бульбашку
   на всю ширину колонки). Обмежуємо ширину відео й даємо контейнерам fit-content. */
.conversejs .chat-msg__message:has(figure video),
.conversejs .chat-msg__message:has(figure video) .chat-msg__body--wrapper,
.conversejs .chat-msg__message:has(figure video) .chat-msg__text {
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 360px;
}
.conversejs .chat-msg__text figure {
    margin: 0;
    width: -moz-fit-content;
    width: fit-content;
}
.conversejs .chat-msg__text figure video {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    border-radius: 10px;
}

.conversejs .modal-content {
    color: #333333 !important;
}
.conversejs .modal-title {
    color: #fff !important;
}

@media (prefers-color-scheme: dark) {
    .conversejs .modal-title {
        color: #005691 !important;
    }
}

.conversejs .close {
    color: #000000 !important;
    text-shadow: none !important;
    opacity: 0.5;
}

.conversejs .btn-primary:hover,
.conversejs .btn-primary:active,
.conversejs .btn-primary:focus {
    background-color: #004471 !important;
    border-color: #004471 !important;
    color: #ffffff !important;
}

.conversejs .btn-primary * {
    color: #ffffff !important;
}

:root {
    --sonata-button-text: #ffffff;
}

.conversejs converse-muc-details-modal div.room-info {
    color: #e8f0ff !important;
}

converse-user-details-modal .btn.btn-danger {
    margin-top: 10px;
}

converse-muc-sidebar {
    min-width: 300px;
}
converse-muc-sidebar .occupant-nick {
    max-width: 170px;
    height: 17px;
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) {
    :root {
        --sonata-button-text: #ffffff;
    }
    .conversejs #controlbox converse-login-form .btn {
        color: var(--sonata-button-text) !important;
    }
}

.conversejs converse-contact-approval-alert .btn-group > :not(.btn-check:first-child) + .btn {
    background: #ac354f !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 5px;
}
@media (prefers-color-scheme: dark) {
    .conversejs converse-accept-contact-request-modal .modal-title,
    .conversejs converse-alert-modal .modal-header,
    .conversejs converse-muc-occupant-modal .modal-title,
    .conversejs converse-alert-modal .modal-title,
    .conversejs converse-confirm-modal .modal-title,
    .conversejs converse-muc-details-modal .modal-header,
    .conversejs converse-muc-details-modal .modal-title,
    .conversejs converse-profile-modal .modal-header,
    .conversejs converse-profile-modal .modal-title,
    .conversejs converse-image-modal .modal-header,
    .conversejs converse-image-modal .modal-title,
    .conversejs converse-muc-nickname-modal .modal-header,
    .conversejs converse-muc-nickname-modal .modal-title {
        color: #e8f0ff !important;
        background-color: #1f3b85 !important;
    }
    .conversejs converse-muc-details-modal .room-info {
        color: #e8f0ff !important;
    }
    .conversejs converse-alert-modal .modal-body {
        color: #e8f0ff !important;
    }

    .conversejs converse-muc-details-modal div.room-info {
        color: #e8f0ff !important;
    }
    .conversejs #converse-modals converse-muc-occupant-modal.modal .modal-body {
        background: #152142;
        margin-bottom: 0;
    }

    .conversejs converse-muc-occupant-modal .text-start,
    .conversejs converse-muc-occupant-modal .text-end {
        color: #e8f0ff !important;
    }
    converse-dropdown button svg {
        fill: #e8f0ff !important;
    }

    .conversejs .badge-info {
        background-color: #1f3b85 !important;
        color: #e8f0ff !important;
    }
    .conversejs converse-image-modal .modal-header {
        justify-content: flex-end;
    }
    .conversejs converse-image-modal .modal-title {
        display: none;
    }

    converse-dropdown .dropdown-item svg {
        fill: darkblue !important;
    }

    .conversejs converse-accept-contact-request-modal .modal-footer .conversejs converse-confirm-modal .modal-footer,
    .conversejs converse-muc-details-modal .modal-footer,
    .conversejs converse-muc-nickname-modal .modal-footer,
    .conversejs converse-alert-modal .modal-footer,
    .conversejs converse-muc-occupant-modal .modal-footer,
    .conversejs converse-profile-modal .modal-footer,
    .conversejs converse-image-modal .modal-footer {
        display: none;
    }

    .conversejs .chat-content__notifications {
        color: rgba(232, 240, 255, 1) !important;
    }

    .conversejs converse-contact-approval-alert .btn-group > :not(.btn-check:first-child) + .btn {
        background: #ac354f !important;
        width: 100% !important;
        height: auto !important;
    }

    .conversejs converse-login-form .alert-danger,
    .conversejs .btn.btn-danger.remove-contact {
        color: #e8f0ff !important;
    }

    .conversejs converse-confirm-modal .modal-header {
        background-color: #1f3b85;
        color: #e8f0ff !important;
    }

    .conversejs .modal-header .btn svg {
        fill: #9ab9ff !important;
    }

    .conversejs .modal-footer .btn-secondary {
        color: var(--Typography-on-surface, #e8f0ff) !important;
        background: var(--Button-secondary, #1d2e5a) !important;
        border: none !important;
        border-radius: var(--Unlim, 999px) !important;
    }
    .conversejs .modal-footer .btn-secondary:hover {
        background: #26397a !important;
    }
}

.conversejs label,
converse-bg label {
    display: inline-block;
    color: #666;
}

:root {
    --sonata-quote-gray: #666666;
}

.conversejs sonata-logout-modal converse-icon {
    display: none !important;
}

.conversejs sonata-logout-modal .modal-content {
    width: 316px;
    height: 206px;
    border-radius: 24px;
}
.conversejs sonata-logout-modal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    column-gap: 2;
    justify-content: center;
    gap: 15px;
    padding: 0;
    border-radius: 24px;
}

.conversejs sonata-logout-modal .btn-danger,
.conversejs sonata-logout-modal .btn-secondary {
    display: flex;
    height: 54px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 252px;
    flex: 1 0 0;
    border-radius: var(--Unlim, 999px);
    background: var(--Bg-negative, #f15b50);
    border: none;
}

.conversejs converse-add-contact-modal .btn-primary {
    border-radius: var(--Unlim, 999px);
    background: var(--Button-primary, #3a6de0);
}
.conversejs converse-add-contact-modal form.converse-form,
.conversejs converse-user-details-modal form.converse-form {
    border: none !important;
    background: var(--Bg-secondary, #152142) !important;
}
.conversejs converse-add-contact-modal form.converse-form input,
.conversejs converse-user-details-modal form.converse-form input {
    background: var(--Bg-text_field, #18264a);
    border: none;
    color: var(--Typography-on-surface, #e8f0ff);
}
.conversejs converse-add-contact-modal form.converse-form input:focus,
.conversejs converse-user-details-modal form.converse-form input:focus {
    background: var(--Bg-text_field, #18264a);
    border: none;
}

.conversejs sonata-logout-modal .btn-secondary {
    border-radius: var(--Unlim, 999px);
    background: var(--Button-secondary, #1d2e5a);
}

.conversejs sonata-logout-modal .modal-header {
    border-radius: 24px;
}
.conversejs converse-add-muc-modal .search-wrapper svg {
    margin: 10px;
}
.conversejs .bg-dark converse-add-muc-modal textarea,
.conversejs #converse-modals converse-add-muc-modal textarea {
    background-color: #18264a !important;
}

.conversejs converse-add-muc-modal .modal-content .modal-body button {
    background-color: var(--Button-primary, #3a6de0) !important;
    color: var(--Typography-on-surface, #e8f0ff);
    font-size: var(--Size-Callout, 16px);
    font-style: normal;
    text-transform: none !important;
    font-weight: 500;
    line-height: var(--Line-height-lg, 24px); /* 150% */
    letter-spacing: var(--Letter-spacing-Callout, 0);
}

.conversejs converse-add-muc-modal .alphabet-separator {
    color: var(--Typography-secondary, #b0cbff) !important;
    background-color: transparent;
    font-size: var(--Size-Subheadline, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-sm, 20px); /* 142.857% */
    letter-spacing: var(--Letter-spacing-Subheadline, 0);
}
.conversejs converse-add-muc-modal input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    background-color: #9ab9ff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-right: 12px;
    cursor: pointer;
}
.conversejs converse-add-muc-modal .modal-content {
    width: 404px;
}
.conversejs converse-add-muc-modal .contacts-list,
.sonata-muc-invite .contacts-list {
    scrollbar-width: thin;
    /* Перший колір - повзунок, другий - доріжка */
    scrollbar-color: #3a528f rgba(21, 33, 66, 1);
}

.conversejs converse-add-muc-modal .contacts-list::-webkit-scrollbar,
.sonata-muc-invite .contacts-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.conversejs converse-add-muc-modal .contacts-list::-webkit-scrollbar-track,
.sonata-muc-invite .contacts-list::-webkit-scrollbar-track {
    background: rgba(21, 33, 66, 1);
    border-radius: 10px;
}

.conversejs converse-add-muc-modal .contacts-list::-webkit-scrollbar-thumb,
.sonata-muc-invite .contacts-list::webkit-scrollbar-thumb {
    background: #3a528f; /* Зроби його світлішим за track, щоб бачити */
    border-radius: 10px;
}
.conversejs converse-add-muc-modal .contacts-list::-webkit-scrollbar-thumb:hover {
    background: #4e6bb3;
}

.conversejs #converse-modals converse-add-muc-modal .modal-content .modal-body {
    margin-bottom: 0;
}

.conversejs #converse-modals converse-add-muc-modal .avatar-initials {
    font-size: 18px !important;
}
.conversejs #converse-modals converse-add-muc-modal input {
    display: flex;
    height: 36px;
    padding: 8px 4px 8px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 999px;
    background-color: var(--Bg-text_field, #18264a) !important;
}

.conversejs #converse-modals converse-add-muc-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: normal;
}

.conversejs #converse-modals converse-add-muc-modal .overflow-hidden {
    color: var(--Typography-primary, #e8f0ff);
    font-size: var(--Size-Body, 15px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-sm, 20px); /* 133.333% */
    letter-spacing: var(--Letter-spacing-Body, 0);
}
.conversejs #converse-modals converse-add-muc-modal .modal-title {
    order: 2;
    margin-left: 24%;
}

.conversejs #converse-modals converse-add-muc-modal .modal-header button {
    order: 1;
}

converse-forward-modal .forward-modal-content input[type='search'] {
    background-color: #1c2b54 !important;
    border: 1px solid #2a4b8d !important;
    border-radius: 12px !important;
    color: white !important;
}

/* Стилизация плейсхолдера для этого конкретного инпута */
converse-forward-modal .forward-modal-content input[type='search']::placeholder {
    color: white !important;
    opacity: 1;
}

.conversejs #converse-modals converse-add-muc-modal input::placeholder {
    color: var(--Typography-tetriary, #7c96d6);
    font-size: var(--Size-Subheadline, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-sm, 20px); /* 142.857% */
    letter-spacing: var(--Letter-spacing-Subheadline, 0);
}

.conversejs #converse-modals .modal-header,
.conversejs #converse-modals .modal-content {
    background: #152142;
}

.conversejs sonata-logout-modal .modal-header,
.conversejs sonata-logout-modal form.converse-form,
.conversejs sonata-logout-modal .modal-title,
.conversejs sonata-logout-modal .modal-content {
    background-color: var(--bg-surface-alert, #253e75) !important;
    font-size: 18px;
    justify-content: center;
    border: none !important;
    color: var(--Typography-primary, #e8f0ff);
}

@media (prefers-color-scheme: dark) {
    :root {
        --sonata-quote-gray: #a0a0a0;
    }
}

.conversejs .message blockquote {
    border-left: 0.3em solid rgba(232, 240, 255, 1);
    color: rgba(232, 240, 255, 1) !important;
    /* border-left-color: var(--sonata-quote-gray) !important; */
    display: block !important;
    margin: 5px 0 !important;
}

.conversejs #controlbox converse-login-form .btn {
    color: var(--sonata-button-text) !important;
}

:root {
    --sonata-author-color: #2d3991;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sonata-author-color: #4a5edb;
    }
}

.conversejs .message .show-msg-author-modal {
    align-self: flex-start;
    color: var(--sonata-author-color) !important;
    font-family: Helvetica, Arial, sans-serif;
}

.conversejs .message.chat-info.chat-error,
.conversejs .chat-error {
    color: #d93025 !important;
    font-weight: 700;
    text-align: center;
    padding: 5px;
}

@media (prefers-color-scheme: dark) {
    .conversejs .message.chat-info.chat-error,
    .conversejs .chat-error {
        color: #ff6b6b !important;
    }
    .conversejs .chat-info {
        color: #adb5bd !important;
    }
}

div.chat-info__message {
    text-align: center;
}

#conversejs-bg {
    pointer-events: none;
}

/* Login & Loader */
#conversejs converse-login-form,
#conversejs .converse-login-form,
#conversejs #controlbox #converse-login-form,
#conversejs converse-brand-logo {
    display: none !important;
}

#conversejs {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

#conversejs.converse-ready {
    opacity: 1;
    pointer-events: auto;
    background-color: #152142;
}

#sonata-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0d1428;
    /* Visible by default (not display:none) so it's the first thing painted --
       the JS that would otherwise show it only runs on window 'load', which
       fires after converse.min.js (2MB+) and every other page resource has
       finished downloading. Waiting for JS to flip this on left a genuinely
       blank white screen for that whole stretch. The one place that decides
       "no session, show the login form instead" (sonata-auth.js) explicitly
       hides this now instead of relying on it already being hidden. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    transition: opacity 0.4s ease-out;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top: 4px solid #4a7dfa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

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

#sonata-auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0d1428;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    font-family: sans-serif;
}

.sonata-brand-header {
    position: absolute;
    top: 32px;
    left: 40px;
    line-height: 0;
}

.sonata-brand-header img {
    height: 24px;
    width: auto;
}

.auth-box {
    background: transparent;
    padding: 0;
    width: 400px;
    max-width: calc(100vw - 40px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-box h2 {
    color: #e8f0ff;
    margin-bottom: 8px;
    margin-top: 0;
    font-size: 26px;
    font-weight: 700;
}

.auth-subtitle {
    color: #9ab9ff;
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 24px;
}

.auth-hint {
    color: #7086b8;
    font-size: 12px;
    line-height: 1.4;
    margin: 8px 0 0;
}

.auth-divider {
    width: 100%;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 24px 0;
}

.auth-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    margin-bottom: 20px;
    object-fit: cover;
}

.auth-box input,
.auth-box select {
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 14px;
    border: none;
    border-radius: 27px;
    box-sizing: border-box;
    background: #1d2e5a;
    color: #e8f0ff;
    font-size: 15px;
}

.auth-box select {
    /* Strip the native combobox chrome (its own inner button/arrow/border
       rendering varies by OS and doesn't fully respect border-radius) so
       the closed select is 100% our CSS, then draw our own arrow. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%239AB9FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    /* The open dropdown popup itself is native OS/browser chrome that CSS
       can't reach directly -- this tells Chromium/Electron to paint it
       using its built-in dark palette instead of the default light one. */
    color-scheme: dark;
}

.auth-box input::placeholder {
    color: #7086b8;
}

.auth-box input:focus,
.auth-box select:focus {
    outline: 2px solid #4a7dfa;
}

.auth-box select option {
    background: #1d2e5a;
    color: #e8f0ff;
}

.auth-box select option:checked,
.auth-box select option:hover {
    background: #4a7dfa;
    color: #ffffff;
}

.auth-box button {
    width: 100%;
    padding: 16px;
    margin-bottom: 14px;
    background: #4a7dfa;
    color: white;
    border: none;
    border-radius: 27px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
}

.auth-box button:disabled {
    opacity: 0.6;
    cursor: default;
}

.auth-box button.auth-btn-outline {
    background: #1d2e5a;
    color: #e8f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-box button.auth-btn-svg {
    padding: 0;
    background: transparent;
    margin-bottom: 14px;
}

.auth-box button.auth-btn-svg svg {
    display: block;
    width: 100%;
    height: auto;
}

.auth-warning {
    color: #ff8a80;
    font-size: 0.9em;
    margin: 0 0 10px;
}

.auth-box--status .auth-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    margin-bottom: 24px;
}

.auth-status-icon--success {
    background: #2ecc71;
}

.auth-status-icon--error {
    background: #e74c3c;
}

.auth-qr-canvas {
    background: white;
    padding: 12px;
    border-radius: 12px;
    margin: 8px 0 24px;
}

#auth-msg-container {
    min-height: 40px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#auth-msg {
    color: #ff8a80;
    font-size: 13px;
    text-align: center;
    line-height: 1.2;
}

.auth-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top: 2px solid #4a7dfa;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
    margin-bottom: 5px;
}

.is-loading .auth-spinner {
    display: block;
}
.is-loading #auth-msg {
    display: none;
}