/* =========================================================
   VOXLY FRIENDS + FIND PEOPLE v0.18.15
   ========================================================= */

.voxly-social-toolbar {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 5px;

    padding:
        4px 4px 9px;

    margin-bottom:
        5px;

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


.voxly-social-toolbar-button {
    min-width: 0;

    padding:
        6px 4px;

    border:
        1px solid
        var(--border);

    border-radius:
        5px;

    background:
        var(--panel-2);

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;
}


.voxly-social-toolbar-button:hover {
    color:
        var(--text);

    border-color:
        var(--accent);
}


.voxly-social-modal {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;
}


.voxly-social-modal.hidden {
    display:
        none !important;
}


.voxly-social-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            .68
        );
}


.voxly-social-card {
    position: relative;

    width:
        min(
            680px,
            calc(
                100vw - 32px
            )
        );

    max-height:
        min(
            720px,
            calc(
                100vh - 40px
            )
        );

    display: flex;
    flex-direction: column;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--panel);

    box-shadow:
        0 24px 80px
        rgba(
            0,
            0,
            0,
            .5
        );

    overflow:
        hidden;
}


.voxly-social-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        18px 20px;

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


.voxly-social-header h2 {
    margin: 0;

    color:
        var(--text);

    font-size:
        20px;
}


.voxly-social-header p {
    margin:
        4px 0 0;

    color:
        var(--muted);

    font-size:
        12px;
}


.voxly-social-close {
    width: 34px;
    height: 34px;

    border: 0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        24px;

    cursor:
        pointer;
}


.voxly-social-close:hover {
    background:
        var(--panel-2);

    color:
        var(--text);
}


.voxly-social-tabs {
    display: flex;

    gap: 5px;

    padding:
        10px 14px;

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


.voxly-social-tab {
    padding:
        7px 11px;

    border: 0;

    border-radius:
        6px;

    background:
        transparent;

    color:
        var(--muted);

    font-weight:
        700;

    cursor:
        pointer;
}


.voxly-social-tab:hover {
    color:
        var(--text);

    background:
        var(--panel-2);
}


.voxly-social-tab.active {
    color:
        white;

    background:
        var(--accent);
}


.voxly-social-body {
    min-height:
        280px;

    padding:
        14px;

    overflow-y:
        auto;
}


.voxly-social-user-row {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        10px;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--border)
            70%,
            transparent
        );
}


.voxly-social-user-row:last-child {
    border-bottom: 0;
}


.voxly-social-avatar {
    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

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

    overflow: hidden;

    border-radius:
        50%;

    background:
        var(--panel-3);

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        800;
}


.voxly-social-avatar img {
    width: 100%;
    height: 100%;

    object-fit:
        cover;
}


.voxly-social-identity {
    min-width: 0;
    flex: 1;
}


.voxly-social-name {
    overflow: hidden;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.voxly-social-username {
    margin-top:
        2px;

    overflow: hidden;

    color:
        var(--muted);

    font-size:
        11px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.voxly-social-actions {
    display: flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        6px;
}


.voxly-social-action {
    padding:
        6px 9px;

    border:
        1px solid
        var(--border);

    border-radius:
        6px;

    background:
        var(--panel-2);

    color:
        var(--text);

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;
}


.voxly-social-action:hover:not(:disabled) {
    border-color:
        var(--accent);
}


.voxly-social-action.primary {
    border-color:
        var(--accent);

    background:
        var(--accent);

    color:
        white;
}


.voxly-social-action:disabled {
    opacity: .55;

    cursor:
        default;
}


.voxly-social-section-title {
    padding:
        7px 9px;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.voxly-user-search-input {
    width: 100%;

    box-sizing:
        border-box;

    padding:
        10px 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        7px;

    outline: none;

    background:
        var(--bg);

    color:
        var(--text);
}


.voxly-user-search-input:focus {
    border-color:
        var(--accent);
}


.voxly-user-search-results {
    margin-top:
        12px;
}


.voxly-social-loading,
.voxly-social-error,
.voxly-social-empty {
    padding:
        24px 12px;

    text-align:
        center;

    color:
        var(--muted);

    font-size:
        12px;
}


.voxly-social-empty {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.voxly-social-empty strong {
    color:
        var(--text);

    font-size:
        14px;
}


.voxly-social-empty.compact {
    padding:
        18px 8px;
}


.voxly-social-error {
    color:
        #ff7777;
}


@media (max-width: 600px) {

    .voxly-social-user-row {
        align-items:
            flex-start;
    }


    .voxly-social-actions {
        flex-direction:
            column;
    }


    .voxly-social-toolbar {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   VOXLY FRIEND REQUEST TOAST v0.18.17.1
   ========================================================= */

.voxly-friend-request-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20000;

    width: min(
        340px,
        calc(100vw - 40px)
    );

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    padding: 15px 17px;

    border:
        1px solid
        rgba(255, 255, 255, .11);

    border-radius: 12px;

    background: #1d2028;
    color: #f3f5f8;

    box-shadow:
        0 16px 45px
        rgba(0, 0, 0, .48);

    text-align: left;
    cursor: pointer;

    animation:
        voxlyFriendToastIn
        .18s ease-out;
}

.voxly-friend-request-toast:hover {
    background: #242833;
}

.voxly-friend-request-toast strong {
    font-size: 14px;
    color: #ffffff;
}

.voxly-friend-request-toast span {
    font-size: 13px;
    color: rgba(255, 255, 255, .70);
}

@keyframes voxlyFriendToastIn {

    from {
        opacity: 0;
        transform:
            translateY(-10px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}

html.voxly-reduced-motion
.voxly-friend-request-toast {
    animation: none;
}


/* =========================================================
   VOXLY FRIEND TOAST ISOLATION v0.18.17.2
   ========================================================= */

body > button.voxly-friend-request-toast {
    position: fixed !important;

    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;

    width: 340px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 40px) !important;

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

    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;

    align-self: auto !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    margin: 0 !important;

    padding: 15px 17px !important;

    overflow: visible !important;
}

@media (max-width: 600px) {

    body > button.voxly-friend-request-toast {
        top: 12px !important;
        right: 12px !important;

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


/* =========================================================
   VOXLY FRIEND TOAST ACTIONS v0.18.17.3
   ========================================================= */

body > .voxly-friend-request-toast {
    position: fixed !important;

    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;

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

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

    flex: none !important;
    align-self: auto !important;

    box-sizing: border-box !important;

    display: block !important;

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

    border:
        1px solid
        rgba(255, 255, 255, .11) !important;

    border-left:
        4px solid
        #6574ff !important;

    border-radius:
        12px !important;

    background:
        #1d2028 !important;

    color:
        #f3f5f8 !important;

    box-shadow:
        0 16px 45px
        rgba(0, 0, 0, .48) !important;

    overflow:
        hidden !important;

    cursor:
        pointer !important;
}


.voxly-friend-toast-top {
    display: grid;
    grid-template-columns:
        42px minmax(0, 1fr);

    gap: 11px;
    align-items: center;
}


.voxly-friend-toast-avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;
    overflow: hidden;

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

    background: #303646;
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
}


.voxly-friend-toast-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.voxly-friend-toast-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}


.voxly-friend-toast-copy strong {
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
}


.voxly-friend-toast-copy span {
    color:
        rgba(255, 255, 255, .68);

    font-size: 13px;
    line-height: 1.35;
}


.voxly-friend-toast-actions {
    display: flex;

    gap: 8px;

    margin-top: 12px;
    margin-left: 53px;
}


button.voxly-friend-toast-action {
    appearance: none;

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

    flex: 0 0 auto !important;

    padding:
        7px 13px !important;

    margin: 0 !important;

    border-radius:
        7px !important;

    font: inherit;

    font-size: 12px !important;
    font-weight: 800 !important;

    cursor: pointer;
}


button.voxly-friend-toast-action.accept {
    border:
        1px solid
        #6574ff !important;

    background:
        #6574ff !important;

    color:
        #ffffff !important;
}


button.voxly-friend-toast-action.accept:hover {
    filter: brightness(1.08);
}


button.voxly-friend-toast-action.decline {
    border:
        1px solid
        rgba(255, 255, 255, .13) !important;

    background:
        rgba(255, 255, 255, .055) !important;

    color:
        rgba(255, 255, 255, .82) !important;
}


button.voxly-friend-toast-action.decline:hover {
    background:
        rgba(255, 255, 255, .10) !important;
}


button.voxly-friend-toast-action:disabled {
    opacity: .55 !important;
    cursor: wait !important;
}


@media (max-width: 600px) {

    body > .voxly-friend-request-toast {
        top: 12px !important;
        right: 12px !important;

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

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