.octane-friends-spritesheet {
    background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat;

    &.icon-friendbar-visit {
        width: 21px;
        height: 21px;
        background-position: -38px -5px;
    }

    &.icon-heart {
        width: 16px;
        height: 14px;
        background-position: -5px -67px;
    }

    &.icon-new-message {
        width: 14px;
        height: 14px;
        background-position: -96px -53px;
    }

    &.icon-none {
        width: 16px;
        height: 14px;
        background-position: -31px -67px;
    }

    &.icon-profile {
        width: 21px;
        height: 21px;
        background-position: -5px -36px;
    }

    &.icon-profile-sm {
        width: 13px;
        height: 11px;
        background-position: -51px -91px;

        &:hover {
            width: 13px;
            height: 11px;
            background-position: -74px -91px;
        }
    }

    &.icon-smile {
        width: 16px;
        height: 14px;
        background-position: -57px -67px;
    }

    &.icon-warning {
        width: 23px;
        height: 21px;
        background-position: -5px -5px;
    }

    &.icon-accept {
        width: 13px;
        height: 14px;
        background-position: -5px -91px;
    }

    &.icon-add {
        width: 16px;
        height: 15px;
        background-position: -69px -31px;
    }

    &.icon-bobba {
        width: 16px;
        height: 14px;
        background-position: -96px -5px;
    }

    &.icon-chat {
        width: 17px;
        height: 16px;
        background-position: -69px -5px;
    }

    &.icon-deny {
        width: 13px;
        height: 14px;
        background-position: -28px -91px;
    }

    &.icon-follow {
        width: 16px;
        height: 14px;
        background-position: -96px -29px;
    }

    &.icon-friendbar-chat {
        width: 20px;
        height: 21px;
        background-position: -36px -36px;
    }
}

.messenger-notification-icon {
    background: url('@/assets/images/friends/messenger_notification_icon.png') transparent no-repeat;
    width: 25px;
    height: 25px;
}

.octane-friends {
    width: min(332px, calc(100vw - 16px));
    height: 445px;
    min-width: 0;
    min-height: 0;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    resize: none !important;
    font-family: Ubuntu, sans-serif;
    color: #111;

    & span,
    & input,
    & button {
        font-family: Ubuntu, sans-serif !important;
    }

    & .octane-card-content-shell {
        padding: 0 !important;
        gap: 0 !important;
        background: #f3f3ef;
    }

    & .octane-card-accordion-set {
        background: transparent;
        border: 0;
    }

    & .octane-card-accordion-set-header {
        min-height: 24px;
        padding: 3px 7px !important;
        color: #111;
        font-size: 12px;
        font-weight: 700;
        border: 0 !important;
    }

    & .octane-card-accordion-set-header span {
        font-size: 12px;
        color: #111 !important;
    }

    & .octane-card-accordion-set-header .fa-icon {
        width: 10px;
        height: 10px;
        color: #000;
    }

    & .octane-card-accordion-set.active {
        min-height: 0;
        border: 0 !important;
    }

    & .octane-card-accordion-set-content {
        overflow-y: auto !important;
    }

    & .friends-list-item {
        min-height: 34px;
        padding: 0 4px !important;
        color: #111;
        font-size: 13px;
        background: #f7f7f7;
        border: 0 !important;
        gap: 3px !important;
    }

    & .friends-list-toolbar {
        min-height: 22px;
        font-size: 12px;
        background: #efefef;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
    }

    & .friends-list-toolbar-link {
        color: #111;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: underline;
    }

    & .friends-list-item:nth-child(even) {
        background: #e6e6e6;
    }

    & .friends-list-item.selected {
        color: #000 !important;
        background: #bfe7f6 !important;
    }

    & .friends-list-user {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 3px;
    }

    & .friends-list-user > div:nth-child(2) {
        margin-left: 3px;
    }

    & .friends-list-avatar {
        position: relative;
        width: 22px;
        height: 34px;
        flex-shrink: 0;
        overflow: visible;
    }

    & .friends-list-avatar .avatar-image {
        position: absolute;
        left: 50%;
        top: -24px;
        width: 90px;
        height: 130px;
        margin: 0;
        transform: translateX(-50%);
        background-position: center -8px !important;
    }

    & .friends-list-name {
        min-width: 0;
        margin-left: 3px;
        overflow: hidden;
        color: #111;
        font-size: 13px;
        line-height: 1.15;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & .friends-list-actions {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 3px;
    }

    & .octane-friends-spritesheet.icon-follow {
        width: 15px;
        height: 14px;
    }

    & .octane-friends-spritesheet.icon-chat {
        width: 17px;
        height: 16px;
    }

    & .search-input {
        min-height: 28px;
        padding: 5px 8px;
        color: #111 !important;
        font-size: 13px !important;
        line-height: 1.2;
        background: #fff;
        border: 1px solid #79858c;
        border-radius: 2px;
        box-shadow: inset 1px 1px 0 #ececec;
        outline: none;

        &::placeholder {
            color: #666;
            opacity: 1;
        }
    }
}

.octane-friends-room-invite {
    width: min(270px, calc(100vw - 16px));
    height: min(225px, calc(100vh - 16px));
    min-width: 0;
    min-height: 0;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    resize: none !important;

    & .octane-card-content-shell {
        padding: 10px !important;
        gap: 8px !important;
    }
}

.octane-friends-room-invite-content {
    height: 100%;
}

/* room_invite_confirm invite_summary / invite_note: Volter 9, text_color 0 (style 0 frame). */
.octane-friends-room-invite-summary {
    padding: 6px 8px;
    color: #000;
    font-size: 9px;
    line-height: 12px;
    font-weight: 400;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .35);
    border-radius: 8px;
}

.octane-friends-room-invite-textarea {
    width: 100%;
    height: 92px;
    padding: 7px 8px;
    color: #000;
    font-size: 9px;
    line-height: 12px;
    background: #fff;
    border: 1px solid #888;
    border-radius: 2px;
    resize: none;
    outline: none;

    &::placeholder {
        color: #666;
        opacity: 1;
    }
}

.octane-friends-room-invite-note {
    padding: 4px 6px;
    color: #000 !important;
    font-size: 9px !important;
    line-height: 12px;
    background: rgba(255, 255, 255, .75);
    border-radius: 8px;
}

.octane-friends-room-invite-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.octane-friends-remove-confirmation {
    width: min(160px, calc(100vw - 16px));
    height: min(200px, calc(100vh - 16px));
    min-width: 0;
    min-height: 0;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    resize: none !important;
}

/* friend_remove_confirm remove_info: Volter 9, word-wrapped, inside a 150 x 143 border. */
.octane-friends-remove-confirmation-text {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px;
    overflow: auto;
    border: 1px solid #b6b6b6;
    border-radius: 4px;
    background: #fff;
    color: #000;
    font-family: Volter, monospace;
    font-size: 9px;
    line-height: 12px;
    overflow-wrap: anywhere;
}

.octane-friends-remove-confirmation-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
}

.octane-friends-remove-confirmation-actions {
    display: flex;
    justify-content: space-between;
}

.octane-friends-remove-confirmation-actions button {
    width: 60px;
    min-width: 60px;
    height: 21px;
}

.friend-bar {
    height: 36px;
    max-height: 36px;
    font-family: Ubuntu, sans-serif;

    & .friend-bar-item {
        pointer-events: all;
        min-height: 34px;
        border: 1px solid rgba(0, 0, 0, 0.55);
        border-radius: 7px;
        background: rgba(46, 45, 44, 0.76);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.13),
            inset 0 -1px 0 rgba(0, 0, 0, 0.35),
            0 2px 0 rgba(0, 0, 0, 0.22);
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.95);
        color: rgba(255, 255, 255, 0.92);

        &:hover {
            background: rgba(59, 58, 55, 0.82);
        }

        &.friend-bar-search-item-active {
            background: rgba(46, 45, 44, 0.76);
            border: 1px solid rgba(0, 0, 0, 0.55);

            & .search-content {
                font-size: 12px;
            }
        }

        &.find-friends-active {
            background: rgba(46, 45, 44, 0.76);
        }

        &.friend-bar-request,
        &.friend-bar-empty {
            padding-left: 10px;
            padding-right: 10px;
        }

        & .friend-bar-item-head {
            pointer-events: none;
        }

        & .friend-bar-text {
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
        }
    }

    & .friend-bar-search-icon {
        filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
    }

    & .friend-bar-button {
        position: relative;
        pointer-events: all;
        width: 29px;
        height: 31px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        image-rendering: var(--octane-pixel-art, pixelated);

        &:hover:not(.is-disabled):not(:disabled) .friend-bar-browse-arrow {
            filter: brightness(1.15);
        }

        &.is-disabled,
        &:disabled {
            opacity: 0.2;
            cursor: not-allowed;
            filter: none;
        }
    }

    & .friend-bar-browse-bg,
    & .friend-bar-browse-arrow {
        position: absolute;
        pointer-events: none;
        image-rendering: var(--octane-pixel-art, pixelated);
    }

    & .friend-bar-browse-bg {
        left: 0;
        top: 0;
        width: 29px;
        height: 31px;
    }

    & .friend-bar-button.left .friend-bar-browse-bg {
        transform: scaleX(-1);
    }

    & .friend-bar-button.left .friend-bar-browse-arrow {
        left: 12px;
        top: 11px;
        width: 5px;
        height: 10px;
    }

    & .friend-bar-button.right .friend-bar-browse-arrow {
        left: 11px;
        top: 10px;
        width: 5px;
        height: 10px;
    }
}

.messenger-card {
    width: min(440px, calc(100vw - 16px));
    min-width: 0;
    max-width: calc(100vw - 16px);
    height: min(445px, calc(100vh - 16px));
    min-height: 0;
    max-height: calc(100vh - 16px);
    resize: none;
    pointer-events: all;
}

@media (max-width: 520px), (max-height: 470px) {
    .octane-friends {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: min(445px, calc(100vh - 16px)) !important;
        max-height: calc(100vh - 16px) !important;
    }

    .messenger-card {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: min(445px, calc(100vh - 16px)) !important;
        max-height: calc(100vh - 16px) !important;
    }
}

.messenger-card {
    & span,
    & input,
    & button {
        box-sizing: border-box;
        font-family: Ubuntu, sans-serif !important;
    }

    & .octane-card-content-shell {
        padding: 0 !important;
        gap: 0 !important;
        background: #f3f3ef;
    }

    & .messenger-card-body {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    & .messenger-avatar-bar {
        display: flex;
        gap: 4px;
        align-items: center;
        flex-shrink: 0;
        overflow: hidden;
        padding: 6px 8px;
        background: #efefef;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
    }

    & .messenger-avatar-tab {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        flex-shrink: 0;
        overflow: hidden;
        cursor: pointer;
        background: #d7d7d7;
        border: 0;
        border-radius: 4px;
        padding: 0;

        &.active {
            background: #bfe7f6;
        }

        &.unread {
            background: #7dca73;
        }

        & .avatar-image {
            position: absolute !important;
            inset: 50% auto auto 50% !important;
            width: 36px !important;
            height: 36px !important;
            margin: 0 !important;
            background-size: 36px 36px !important;
            background-position: center !important;
            transform: translate(-50%, -50%) !important;
            image-rendering: auto !important;
        }
    }

    & .messenger-thread-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 4px 8px;
        background: #efefef;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
    }

    & .messenger-thread-name {
        color: #111 !important;
        font-size: 13px !important;
        font-weight: 700;
    }

    & .messenger-actions {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    & .messenger-btn {
        min-height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 7px;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        background: #2f84aa;
        border: 0;
        border-radius: 3px;

        &.danger {
            background: #a81a12;
            border-color: #a81a12;
        }

        &.close-btn {
            width: 22px;
            padding: 0 5px;
            color: #000 !important;
            font-size: 13px;
            background: #d7d7d7;
        }

        &.icon-btn {
            width: 22px;
            padding: 0;
        }

        &.send {
            background: #00800b;
            border-color: #00800b;
        }
    }

    & .chat-messages {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-y: auto;
        padding: 8px;
        background:
            linear-gradient(#f7f7f7, #f7f7f7) padding-box,
            repeating-linear-gradient(180deg, #f7f7f7 0 34px, #ececec 34px 68px);

        & .messenger-message-row {
            display: flex;
            gap: 6px;
            align-items: flex-start;

            &.own > .message-avatar:first-child {
                display: none;
            }
        }

        & .message-avatar {
            position: relative;
            flex-shrink: 0;
            overflow: hidden;
            width: 36px;
            height: 36px;

            & .avatar-image {
                position: absolute;
                inset: 50% auto auto 50%;
                width: 30px;
                height: 30px;
                margin: 0;
                background-size: 30px 30px !important;
                background-position: center !important;
                transform: translate(-50%, -50%);
                image-rendering: auto !important;
            }
        }

        & .messenger-message-body {
            display: flex;
            flex-direction: column;
            gap: 2px;
            max-width: 200px;
        }

        & .messenger-message-name {
            color: #111 !important;
            font-size: 12px !important;
            font-weight: 700;
        }

        & .messenger-message-bubble {
            position: relative;
            padding: 4px 7px;
            color: #111 !important;
            font-size: 13px !important;
            line-height: 1.35;
            max-width: 200px;
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: pre-wrap;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 3px;
            box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7);
        }

        & .messenger-message-bubble .text-break {
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: pre-wrap;
        }

        & .messenger-translation-block {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        & .messenger-translation-row {
            display: flex;
            align-items: flex-start;
            gap: 4px;
            line-height: 1.2;
        }

        & .messenger-translation-label {
            min-width: 48px;
            flex-shrink: 0;
            opacity: .7;
            font-size: 12px;
            font-weight: 700;
        }

        & .messenger-message-time {
            color: #666 !important;
            font-size: 11px !important;
        }

        & .messenger-message-row.own .messenger-message-time {
            text-align: right;
        }

        & .messages-group-left {
            position: relative;

            &:before {
                position: absolute;
                content: ' ';
                width: 0;
                height: 0;
                border-right: 8px solid #fff;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                top: 10px;
                left: -8px;
            }

            &:after {
                position: absolute;
                content: ' ';
                width: 0;
                height: 0;
                border-right: 7px solid #fff;
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
                top: 11px;
                left: -6px;
            }
        }

        & .messages-group-right {
            position: relative;

            &:before {
                position: absolute;
                content: ' ';
                width: 0;
                height: 0;
                border-left: 8px solid #fff;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                top: 10px;
                right: -8px;
            }

            &:after {
                position: absolute;
                content: ' ';
                width: 0;
                height: 0;
                border-left: 7px solid #fff;
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
                top: 11px;
                right: -6px;
            }
        }
    }

    & .messenger-input-row {
        display: flex;
        gap: 5px;
        align-items: center;
        flex-shrink: 0;
        padding: 6px 8px;
        background: #efefef;
        border-top: 1px solid rgba(0, 0, 0, .12);

        & input {
            flex: 1;
            min-height: 28px;
            padding: 0 8px;
            color: #111 !important;
            font-size: 13px !important;
            line-height: 1.2;
            background: #fff;
            border: 1px solid #888;
            border-radius: 3px;
            outline: none;

            &::placeholder {
                color: #666;
                opacity: 1;
            }
        }
    }
}

/* Friend group chip filter row */
.friends-group-chips {
    border-bottom: 1px solid #e6e6e6;
}

.friends-group-chips-scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    min-width: 0;
}

.friends-group-chip {
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px solid #d0d0c8;
    border-radius: 10px;
    background: #f3f3ef;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.friends-group-chip:hover {
    background: #efefef;
}

.friends-group-chip.active {
    background: #bfe7f6;
    border-color: #7fb9d6;
}

.friends-group-chip-manage {
    flex: 0 0 auto;
    padding: 1px 6px;
}

/* Per-friend assign-to-group dropdown */
.friends-list-group-assign {
    position: relative;
    display: inline-flex;
}

.friends-list-group-toggle {
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    user-select: none;
}

.friends-list-group-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    min-width: 120px;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #c0c0b8;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.friends-list-group-menu-item {
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.friends-list-group-menu-item:hover {
    background: #efefef;
}

.friends-list-group-menu-item.active {
    background: #bfe7f6;
}

/* Category manager: keep the list scrollable */
.octane-friends-category-manager {
    width: min(270px, calc(100vw - 16px));
    min-width: 0;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    resize: none !important;
}

.octane-friends-category-manager .octane-card-content-shell {
    color: #000;
    background: #f3f3ef;
}

.octane-friends-category-manager :where(input, select, .octane-select-trigger, textarea),
.octane-friends-room-invite :where(input, select, .octane-select-trigger, textarea),
.octane-friends-remove-confirmation :where(input, select, .octane-select-trigger, textarea) {
    min-height: 22px;
    border: 1px solid #858585 !important;
    border-radius: 3px !important;
    background: #fffdf4 !important;
    color: #111111 !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
    font-size: 11px !important;
}

.octane-friends-category-manager :where(.text-muted, .text-dark),
.octane-friends-room-invite :where(.text-muted, .text-dark),
.octane-friends-remove-confirmation :where(.text-muted, .text-dark) {
    color: #565656 !important;
}

.octane-friends-category-manager .friends-category-list {
    max-height: 220px;
    overflow-y: auto;
}

.messenger-offline-tag {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-style: italic;
    opacity: 0.6;
}

.messenger-message-meta {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 11px;
}

.messenger-message-meta.own {
    justify-content: flex-end;
}

.messenger-message-status {
    position: relative;
    display: inline-block;
    width: 13px;
    height: 11px;
    color: #7a858b;
}
.messenger-message-status.read {
    color: #34b7f1;
}

.messenger-status-check {
    position: absolute;
    top: 1px;
    left: 0;
    width: 9px;
    height: 9px;
    stroke-width: 1;
}

.messenger-status-check.second {
    left: 4px;
}

.messenger-typing-indicator {
    padding: 2px 8px;
    font-size: 11px;
    font-style: italic;
    opacity: 0.7;
}

.octane-friends .friends-list-avatar {
    position: relative !important;
    width: 23px;
    height: 23px;
    flex-shrink: 0;
    overflow: hidden;
}

.octane-friends .friends-list-avatar .avatar-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background-size: 23px 23px !important;
    background-position: center !important;
    transform: none !important;
    image-rendering: auto !important;
}

.octane-friends .octane-card-accordion-set-header > div,
.octane-friends .octane-card-accordion-set-header span {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}
/* BEGIN HOBBA_FRIENDBAR_EXACT */
.friend-bar-icons{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAABHCAMAAACgXu6pAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGBQTFRFAAAAAAAAVpv9Vqn9WLD9Vrz9P4DjPJDmAAAAAAAAAAAAAAAAMGCnLm6w////IkFvIEx6RDMaeVQ0nn5O5LwNgtJN3fOaVaQyN2qPQX6p0j0yJJODGmle5ubdR8m0K6yZa2ZXBQAAACB0Uk5TAP/////////yTf3+///////////////////////////8q0vzAAACxElEQVR4nK2WbW/aMBCAz2FD6aSRQSs6lZL//7vSUq3bCp0qFBZIvDu/5c42HR9qCXAePz4uh22igDcFoCHTRq4ENTyZoaAAGCxX0qaRXqc2vU6a+d6msaNObXrvtPe5zf3yb8F4V7bGk/bof1EHwbsSWjSVt6fQcV8VEbc+6SbGtIChG33SLVegu+Crz3AqzDdKX00Dj/3BJpj4nkt/1ub9qj3jwz7vB/5Bvq+bK08Vc9Rz8X314/ikp/4xLFzpd2B0iPIZl47MxwRHXfhYv6yP3CYD3D/CbF9k/A6qfUGlsRjUjDjljT22V1RFnPI+VPvT6Nst4Deb2CrYTN4H+mxHeKZduc/W9P7v2wmt613gZ5oSHxCfPwl3+/2b3cN4+LzyCSlXDntL8QkZ7nx4dRx73E948DXInr8yPwAcuK9A+OGWDS9bwel+ruGF3SNd2ZEcJ39evCwC3l4PO+envKTzar6DOYuDVzvjZ3hJ8ecUawshlAbnp9z5eNPbm9+LxE94aQ9bajfq14L7WU7+cvDlcwPOz3Hjj7+PHfB+hhs/4J9zxf0MZ/kvPY7yF9zXE6u79JjXM+asnuBxVE/BRx902ErCl5z5Y5O+4KX7L40b/yfnrXzvfLjKwUvOq0v9fPzMjOjJhXOlbpMB/UwDea7U9+j5qAD9g/wcx/3o+TO93aa+4Gy93dEZ9sQSzXHyv1bYeVzh/B4H7vHizxv5Oc58jLGGYZP4gnufcA39Zq2ae+7HPPh1U5PTrDbSj3jw757qftJPmjqKH/Exf6hppTcQ5y958PGb+81qQlGEH3EWfzXBJ9tNGl/wkD8WgCLU+kHmH3HnP66xBDUAFQMHgp9w7+NNwcNqg8PQcD/mwTcRTDTpR9z7tKw+4RM74MLifsxZfLsm0/iCGx/grW58nLqha+Nn+Jnz59z+Ld89Hz7i/Gn/AV53K5jzs3RHAAAAAElFTkSuQmCC) transparent no-repeat}

.friend-bar-icons.icon-friendbar-visit{width:23px;height:21px;background-position:0px -24px}

.friend-bar-icons.icon-friendbar-visit:hover{background-position:-24px -24px;height:23px}

.friend-bar-icons.icon-profile{width:23px;height:21px;background-position:0px -48px}

.friend-bar-icons.icon-profile:hover{background-position:-24px -48px;height:23px}

.friend-bar-icons.icon-friendbar-chat{width:22px;height:21px;background-position:0px 0px}

.friend-bar-icons.icon-friendbar-chat:hover{background-position:-24px 0px;height:23px}

.friend-bar{height:40px;max-height:40px}

.friend-bar .friend-bar-button{height:31px;width:29px;z-index:2;border:none;padding:0;background:transparent}

.friend-bar .friend-bar-button.left{margin-right:-4px}

.friend-bar .friend-bar-button.left:disabled{opacity:.2}

.friend-bar .friend-bar-button.right{margin-left:-4px}

.friend-bar .friend-bar-button.right:disabled{opacity:.2}

.friend-bar .friend-bar-item{width:127px;margin:0;z-index:0;position:relative;padding-left:42px;text-align:left;min-height:36px}

.friend-bar .friend-bar-item .activity-vip{background-color:#00000040;margin:0 0 0 -11px;padding:5px 10px;width:128px}

.friend-bar .friend-bar-item.friend-bar-item-active{position:relative}

.friend-bar .friend-bar-item.find-friends{border-image-source:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAAkCAYAAACg9OUnAAAACXBIWXMAABYlAAAWJQFJUiTwAAAGn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuYjBmOGJlOTAsIDIwMjEvMTIvMTUtMjE6MjU6MTUgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMy4yIChNYWNpbnRvc2gpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMi0wMy0yM1QxMTowMjoxNyswMTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0wNC0yNlQxNTozMDoxMSswMjowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjItMDQtMjZUMTU6MzA6MTErMDI6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZGIxZDAxNjgtNDBmMi00OGQyLWFjMjItNTc3MTQwZDVkM2Y2IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZGE0NWVjOGEtNzU5Ny1mOTRmLWFhOGEtNGNhMTBkZTgwMjFlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NWVhMzg4OGItNTgxYy00YzczLWIzYmEtOTgyYzY4ZTE0OWYxIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NWVhMzg4OGItNTgxYy00YzczLWIzYmEtOTgyYzY4ZTE0OWYxIiBzdEV2dDp3aGVuPSIyMDIyLTAzLTIzVDExOjAyOjE3KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjMuMiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZDc4NzFhOTYtYmM2ZS00OWMxLWI2MWQtZWM5YTg1YmU3ODQ5IiBzdEV2dDp3aGVuPSIyMDIyLTAzLTIzVDExOjAyOjE3KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjMuMiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZGIxZDAxNjgtNDBmMi00OGQyLWFjMjItNTc3MTQwZDVkM2Y2IiBzdEV2dDp3aGVuPSIyMDIyLTA0LTI2VDE1OjMwOjExKzAyOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjMuMiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ey+M5AAAA/klEQVR4nO3csY3CQBRF0fctWsGiAyScUNK6EiiJhJXoAEExn4A1GhtDBivNuyfzeAJLd+zsOzJTpYgYL6AamRnl9UKS9r9X9V2bkrQ7Xv7jufAFw4u9O17iZ7NUZKYiIonuo+9aZWYs5m6eT4cvPw4+bbXePq2FpNFbT/h6lQeg71o15U3C123at5nfBgfEN0Z8Y8Q3RnxjxDdGfGPEN0Z8Y8Q3RnxjxDdGfGPEN0Z8Y8Q3RnxjxDdGfGPEN0Z8Y8Q3RnxjxDc2ij830oN6TPs20n1059UG1GE6qiX9jWi/24h6PUa0hwVGtetVfuEzM57iw8Mj/oBDUL/y1yw3TgtG6hpFz20AAAAASUVORK5CYII=);border-image-slice:17 17 17 17 fill;border-image-width:17px 17px 17px 17px;border-image-repeat:repeat repeat;color:#fff}

.friend-bar .friend-bar-item.find-friends:hover{border-image-source:url(data:image/png;base64,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Y0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAABp9pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmIwZjhiZTkwLCAyMDIxLzEyLzE1LTIxOjI1OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuMiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDMtMjNUMTE6MDI6MTcrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDQtMjZUMTU6Mjg6NDArMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTA0LTI2VDE1OjI4OjQwKzAyOjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk3NjkyYmQ3LTIzNjMtNDljMS1iZmYzLTVmYmZmNmE2NmU2YSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmE3MTU2OGMxLTQzMjItYWE0Ny1hYTkwLTVlNWUxYTY1MjIzYyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjVlYTM4ODhiLTU4MWMtNGM3My1iM2JhLTk4MmM2OGUxNDlmMSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjVlYTM4ODhiLTU4MWMtNGM3My1iM2JhLTk4MmM2OGUxNDlmMSIgc3RFdnQ6d2hlbj0iMjAyMi0wMy0yM1QxMTowMjoxNyswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjIgKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmQ3ODcxYTk2LWJjNmUtNDljMS1iNjFkLWVjOWE4NWJlNzg0OSIgc3RFdnQ6d2hlbj0iMjAyMi0wMy0yM1QxMTowMjoxNyswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjIgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjk3NjkyYmQ3LTIzNjMtNDljMS1iZmYzLTVmYmZmNmE2NmU2YSIgc3RFdnQ6d2hlbj0iMjAyMi0wNC0yNlQxNToyODo0MCswMjowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjIgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+za5dswAAAQBJREFUeJzt3LFRw0AURdH3NY5QFSinBlKaQMWZJkipgdxUYdJHAPKsZJsMM7PvnkyrDTRzV8q+yrZaVbVeQDdsV3u9k6SXj0/N02hJ2h+O//FcuIHlxd4fjvV8f6eyraoy0XPM0yjbtbt08/3t9dbPgz/28Ph0tlaSVm894fvVHoB5GjW0Nwnft23f4co+BCB+MOIHI34w4gcjfjDiByN+MOIHI34w4gcjfjDiByN+MOIHI34w4gcjfjDiByN+MOIHI34w4gcjfrBV/EsjPejHtu8gfY/uXNuAPmxHtaSfEe3fNqJfpxHtZYFR7X61X3jbdRYfGU7xFxyC/rW/ZvkC4PhG4qBMkwsAAAAASUVORK5CYII=)}

.friend-bar .friend-bar-item .friend-bar-text{overflow:hidden;font-size:13px;line-height:1;color:#fff;font-family:Ubuntu,Arial,sans-serif;font-weight:700}

.friend-bar .friend-bar-item.find-friends-active{border-image-source:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAAkCAYAAACg9OUnAAAACXBIWXMAABYlAAAWJQFJUiTwAAAF0GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuYjBmOGJlOTAsIDIwMjEvMTIvMTUtMjE6MjU6MTUgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMy4yIChNYWNpbnRvc2gpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMi0wMy0yM1QxMTowMjo1OCswMTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0wMy0yM1QxMTowMjo1OCswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjItMDMtMjNUMTE6MDI6NTgrMDE6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MmY4ZGUwY2QtMDc4ZS00ZjYwLWI3ZTctYmU0YWVjMThiOWZiIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZWI2ZjI0M2QtZjk4NS03MDQ2LTkzZDMtZTZkZGM1YmE1ZWU2IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NzI1OGQwZGEtMDczNi00YWEzLTg2ODQtNTVhYzdjZGM5ZjU5IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NzI1OGQwZGEtMDczNi00YWEzLTg2ODQtNTVhYzdjZGM5ZjU5IiBzdEV2dDp3aGVuPSIyMDIyLTAzLTIzVDExOjAyOjU4KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjMuMiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MmY4ZGUwY2QtMDc4ZS00ZjYwLWI3ZTctYmU0YWVjMThiOWZiIiBzdEV2dDp3aGVuPSIyMDIyLTAzLTIzVDExOjAyOjU4KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjMuMiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4/UFR0AAABAUlEQVR4nO3csVHDQBRF0fc1roISKIAcdWFSVJZJURcmpwBKoI1HAPKsZJsMM7PvnkyrDTRzV8q+yrZaVbVeQDdsV3u9k6SXtydN42xJOhz3//FcuIHlxT4c9/X8+Kqyraoy0XNM4yzbtbt08+P989bPgz92/3B3tlaSVm894fvVHoBpnDW0Nwnft23f4co+BCB+MOIHI34w4gcjfjDiByN+MOIHI34w4gcjfjDiByN+MOIHI34w4gcjfjDiByN+MOIHI34w4gcjfrBV/EsjPejHtu8gfY/uXNuAPmxHtaSfEe3fNqJfpxHtZYFR7X61X3jbdRYfGU7xFxyC/rW/ZvkC59NG9qeKzZgAAAAASUVORK5CYII=);border-image-slice:17 17 17 17 fill;border-image-width:17px 17px 17px 17px;border-image-repeat:repeat repeat;min-height:36px}

.friend-bar .friend-bar-item.find-friends-active.group{border-image-source:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAAkAgMAAADdmg20AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAxQTFRFAAAAAAAA////rKysyPzlBQAAAAR0Uk5TAP///7MtQIgAAABfSURBVHicY2QIZcAD/q9hZF2KV8F0RqkJ+BQwPGOUWuqAR/73NMasqXitWMaYPQWvFUtHFYwqGFWARQHBnBWV6oBHwe9ZjFEBeK14xSiK34rljKL4bADawcgYglfBagDAnD+ZcLOBjwAAAABJRU5ErkJggg==)}

.friend-bar .friend-bar-item.find-friends-active.group:hover{border-image-source:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAAkAgMAAADdmg20AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAxQTFRFAAAAAAAA////mZmZHt7E6wAAAAR0Uk5TAP///7MtQIgAAABfSURBVHicY2QIZcAD/q9hZF2KV8F0RqkJ+BQwPGOUWuqAR/73NMasqXitWMaYPQWvFUtHFYwqGFWARQHBnBWV6oBHwe9ZjFEBeK14xSiK34rljKL4bADawcgYglfBagDAnD+ZcLOBjwAAAABJRU5ErkJggg==)}

.friend-bar .friend-bar-item.find-friends-active:hover{border-image-source:url(data:image/png;base64,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Y0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAABp9pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmIwZjhiZTkwLCAyMDIxLzEyLzE1LTIxOjI1OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuMiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDMtMjNUMTE6MDI6NTgrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDQtMjZUMTU6Mjc6NDYrMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTA0LTI2VDE1OjI3OjQ2KzAyOjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI5Mzc1MDEzLWYyYWMtNDVlYi05MzU4LTM2MjczOTYxYTZmOSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmU1ZjNiYmY0LTdkM2QtMDU0Mi05ZjE5LTg5ZjQ1YmY0MzU5MyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjcyNThkMGRhLTA3MzYtNGFhMy04Njg0LTU1YWM3Y2RjOWY1OSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyNThkMGRhLTA3MzYtNGFhMy04Njg0LTU1YWM3Y2RjOWY1OSIgc3RFdnQ6d2hlbj0iMjAyMi0wMy0yM1QxMTowMjo1OCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjIgKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjJmOGRlMGNkLTA3OGUtNGY2MC1iN2U3LWJlNGFlYzE4YjlmYiIgc3RFdnQ6d2hlbj0iMjAyMi0wMy0yM1QxMTowMjo1OCswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjIgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjI5Mzc1MDEzLWYyYWMtNDVlYi05MzU4LTM2MjczOTYxYTZmOSIgc3RFdnQ6d2hlbj0iMjAyMi0wNC0yNlQxNToyNzo0NiswMjowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjIgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+QD39pwAAAQBJREFUeJzt3LFRw0AURdH3NY5QHyijAWIKQYWZQohpgMz0YdJHAPKsZJsMM7PvnkyrDTRzV8q+yrZaVbVeQDdsV3u9k6SPzxdN42xJOhz3//FcuIHlxT4c93V/96yyraoy0XNM4yzbtbt08+31/dbPgz/2+PRwtlaSVm894fvVHoBpnDW0Nwnft23f4co+BCB+MOIHI34w4gcjfjDiByN+MOIHI34w4gcjfjDiByN+MOIHI34w4gcjfjDiByN+MOIHI34w4gcjfrBV/EsjPejHtu8gfY/uXNuAPmxHtaSfEe3fNqJfpxHtZYFR7X61X3jbdRYfGU7xFxyC/rW/ZvkCrGtG2apNN2cAAAAASUVORK5CYII=)}

.friend-bar .friend-bar-item.find-friends-active .friend-bar-text{padding-top:4px}

.friend-bar .friend-bar-item .friend-bar-item-head{pointer-events:none}

.friend-bar .friend-bar-item .friend-bar-item-head.avatar{top:-31px;left:-23px}

.friend-bar .friend-bar-item .friend-bar-item-head.group{top:-5px;left:-5px}

.friend-bar .friend-bar-item.friend-bar-search .friend-bar-item-head{top:-2px;left:6px;width:31px;height:34px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAiCAYAAACnSgJKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFzmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjEtMDctMDNUMTk6MjQ6MTktMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDctMDNUMTk6MjQ6MTktMDQ6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTA3LTAzVDE5OjI0OjE5LTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhlOThlNTNiLTU3OGMtNDlkMS05ZWM0LWI4ZmE0YTA1OWVhZiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjU1YWEzMTg3LTM4ZDktM2U0Zi04MGMwLWVkZDhmYWU0Y2FlNyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjY0MWY0Y2ZkLTcxM2QtNGNlOC04ZWZlLWE1YmIyYzU5ZTA2MyIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjY0MWY0Y2ZkLTcxM2QtNGNlOC04ZWZlLWE1YmIyYzU5ZTA2MyIgc3RFdnQ6d2hlbj0iMjAyMS0wNy0wM1QxOToyNDoxOS0wNDowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjhlOThlNTNiLTU3OGMtNDlkMS05ZWM0LWI4ZmE0YTA1OWVhZiIgc3RFdnQ6d2hlbj0iMjAyMS0wNy0wM1QxOToyNDoxOS0wNDowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+oOH7fQAAAn1JREFUWIWVWEuWgkAM5BLjCWYhJ9CtD5d6F+dszBVwiXgiZhpIdyWpAC7y5KNdqVQlDVbjOFZr8fV9HH3U6nxrjSg2Qc/X+xSn620KOT8vx+lanFy9mlgIjIAUtCnX9f27upbWqiaYFXApHwLbhfGavn9TiZbflARC8FSexGT6NAtbVul7jCE7xhApCPiRMlKlbZCNT8pXy8tjq1Ah2zXGruyN98FanIgEE2ubncocgObPSF9vvMg3kkBmHi3AmEZeYCTWDFixXqYJyOKkxXDxLUN65g2UseHaRyX11YmlyDjNnEB1EMM1Vkfr8rvT2/oDo30O4+/zPbbd/KnvL+CT4SKzQaaY3FpJ03ECE+Ac/8nolqtn5siQM7s7w6WRaUOAM+vlWAIrkJkz8/D2K6VLYD+vyxz9ZTpHkMzeXFMz34JbfSO9M3hfwD3oW+kuzGW3U30elpw4VoG/FuadZs0qgNtsNhy63A6Fc6BxAn30c7D7wh7L7sYr603rctT4sbBV532pAlaimE+YA7jsaqrcCyD+UBnMAoPxlAzgelmHg5OxycClzCwRDDFgK9EFzJE9lj33aDdQTTERqnnnW28V3A4b1qPp2MqgmRqtOzRc7cHVEw1MM2wVNI5ibvpcGNskQuY2AWkx0QuNk5n3njkmiN+nfR49OqP+xa1ls2Aa2wrZ6RYaDsNuNmxY4G7F2NokNjV37Btkr5mEm0g3hMnSR+c4gfLaMy/6XnygF7WDpDXlLiWv94NjFZBRkWLwUkD5rSwfMUcPWB2xDZ3LO+909tK4+3V2Ym+0tPOfb6HH8RC8re4GxwQQBKeeLfHWu/tH4GLCA0T0p8Getf4AtWGS7WEg8JMAAAAASUVORK5CYII=)}
/* END HOBBA_FRIENDBAR_EXACT */

/* BEGIN SWF_FRIENDS_EXACT_DOM */
.swf-friends-window {
    font-family: Ubuntu, Arial, sans-serif;
    color: #000;
    image-rendering: var(--octane-pixel-art, pixelated);
    text-shadow: none;
}

.swf-friends-window *:not(.avatar-image) {
    box-sizing: border-box;
}

.swf-friends-window button {
    font-family: Ubuntu, Arial, sans-serif;
    cursor: pointer;
}

.swf-friends-window {
    position: relative;
    width: 240px;
    height: 400px;
    overflow: hidden;
    border: 1px solid #1a5d74;
    border-radius: 5px;
    background: #3f9fc1;
    box-shadow: inset 0 1px 0 #76d3ec;
}

.swf-friends-titlebar {
    position: relative;
    height: 24px;
    cursor: move;
    border-bottom: 1px solid #1b6a86;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.26) 0 1px, transparent 1px 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 2px),
        linear-gradient(#55b5d5, #3297be);
}

.swf-friends-titlebar-grip,
.swf-friends-titlebar::after {
    content: "";
    position: absolute;
    top: 4px;
    width: 85px;
    height: 16px;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.30) 0 1px, transparent 1px 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 1px, transparent 1px 2px);
}

.swf-friends-titlebar-grip { left: 5px; }
.swf-friends-titlebar::after { right: 22px; width: 77px; }

.swf-friends-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 24px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 23px;
    text-shadow: 1px 1px 0 #1d657d;
}

.swf-friends-close {
    position: absolute;
    right: 3px;
    top: 4px;
    width: 17px;
    height: 17px;
    padding: 0;
    border: 0;
    background: transparent;
}

.swf-friends-close::before,
.swf-friends-close::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 2px;
    width: 2px;
    height: 13px;
    background: #bfeefa;
}

.swf-friends-close::before { transform: rotate(45deg); }
.swf-friends-close::after { transform: rotate(-45deg); }

.swf-friends-category {
    height: 17px;
    border-top: 1px solid #7eddf4;
    border-bottom: 1px solid #1c6d87;
    background: #56c5ee;
}

.swf-friends-category .friends-group-chips {
    height: 16px !important;
    padding: 0 5px !important;
    border: 0 !important;
    background: transparent !important;
}

.swf-friends-category .friends-group-chips-scroll { overflow: hidden; }
.swf-friends-category .friends-group-chip { display: none; }

.swf-friends-category .friends-group-chip.active {
    display: block;
    height: 16px;
    padding: 0 11px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 15px;
}

.swf-friends-category .friends-group-chip.active::after {
    content: "";
    display: inline-block;
    margin-left: 3px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #000;
    vertical-align: middle;
}

.swf-friends-category .friends-group-chip-manage { display: none !important; }

.swf-friends-body {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 42px;
    bottom: 68px;
    overflow: hidden;
    background: #f2f2ee;
}

.swf-friends-section-header {
    position: relative;
    height: 19px;
    padding: 2px 4px 0;
    background: #fff;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
}

button.swf-friends-section-header {
    width: 100%;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.swf-friends-category button.friends-group-chip {
    border: 0;
    cursor: pointer;
    text-align: left;
}

.swf-friends-section-header span::after {
    content: "";
    display: inline-block;
    margin-left: 4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #000;
    vertical-align: middle;
}

.swf-friends-section-header.collapsed span::after {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid #000;
    border-right: 0;
}

.swf-friends-select-all {
    position: absolute;
    right: 6px;
    top: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 10px;
    line-height: 14px;
    text-decoration: underline;
}

.swf-friends-section-list {
    max-height: 250px;
    overflow: hidden;
}

.swf-friends-offline-list {
    max-height: 152px;
    overflow-y: auto;
}

.swf-friends-search-results {
    display: block;
    height: 100%;
    overflow-y: auto;
    background: #f2f2ee;
}

.swf-friends-search-results > .search-input {
    width: calc(100% - 8px);
    height: 22px;
    min-height: 22px;
    margin: 4px;
    padding: 2px 5px;
    border: 1px solid #8e8e88;
    border-radius: 2px;
    font-size: 10px !important;
}

.swf-friends-window .friends-list-item {
    width: 100%;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 3px !important;
    border: 0 !important;
    background: #eeeeea !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.swf-friends-window .friends-list-item:nth-child(even) { background: #fff !important; }
.swf-friends-window .friends-list-item:hover,
.swf-friends-window .friends-list-item.selected { background: #d9edf4 !important; }

.swf-friends-window .friends-list-user {
    height: 20px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.swf-friends-window .friends-list-avatar {
    position: relative;
    width: 18px !important;
    min-width: 18px !important;
    height: 20px !important;
    overflow: hidden !important;
}

.swf-friends-window .friends-list-avatar .avatar-image {
    position: absolute;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background-size: 42px auto !important;
    background-position: -10px -12px !important;
    transform: none !important;
    image-rendering: var(--octane-pixel-art, pixelated) !important;
}

.swf-friends-window .friends-list-name {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 400;
    line-height: 20px;
}

.swf-friends-window .friends-list-actions {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.swf-friends-window .octane-friends-spritesheet.icon-follow {
    width: 16px;
    height: 14px;
    background: url("@/assets/images/friends/swf/follow_friend.png") center center / auto no-repeat !important;
}

.swf-friends-window .octane-friends-spritesheet.icon-chat {
    width: 17px;
    height: 16px;
    background: url("@/assets/images/friends/swf/friendlist_chat.png") center center / auto no-repeat !important;
}

.swf-friends-window .friends-list-group-toggle {
    width: 10px;
    height: 10px;
    overflow: hidden;
    color: transparent;
}

.swf-friends-window .friends-list-group-toggle::before {
    content: "";
    display: block;
    margin-top: 3px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #000;
}

.swf-friends-window .octane-friends-spritesheet.icon-heart,
.swf-friends-window .octane-friends-spritesheet.icon-smile,
.swf-friends-window .octane-friends-spritesheet.icon-bobba,
.swf-friends-window .octane-friends-spritesheet.icon-none {
    width: 16px;
    height: 14px;
}

.swf-friends-footer {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 35px;
    height: 34px;
    padding: 4px;
    background: #deded9;
    border: 1px solid #777771;
    display: flex;
    align-items: center;
    gap: 4px;
}

.swf-friends-footer-button {
    width: 27px;
    height: 22px;
    padding: 0;
    border: 3px solid transparent;
    border-image-source: var(--habbo-skin-button);
    border-image-slice: 3 fill;
    border-image-width: 3px;
    background: transparent;
}

.swf-friends-footer-button.invite::before,
.swf-friends-footer-button.home::before,
.swf-friends-footer-button.search::before,
.swf-friends-footer-button.delete::before {
    content: "";
    display: block;
    margin: 1px auto 0;
    background-position: center center;
    background-size: auto;
    background-repeat: no-repeat;
}

.swf-friends-footer-button.invite::before { width: 19px; height: 13px; background-image: url("@/assets/images/friends/swf/room_invite.png"); }
.swf-friends-footer-button.home::before { width: 13px; height: 11px; margin-top: 2px; background-image: url("@/assets/images/friends/swf/open_homepage.png"); }
.swf-friends-footer-button.search { margin-left: auto; }
.swf-friends-footer-button.search::before { width: 13px; height: 13px; background-image: url("@/assets/images/friends/swf/search.png"); }
.swf-friends-footer-button.delete::before { width: 13px; height: 13px; background-image: url("@/assets/images/friends/swf/remove_friend_bin.png"); }
.swf-friends-footer-button:disabled { opacity: .55; }

.swf-friends-search-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 17px;
    padding: 1px 0 0 5px;
    border-top: 1px solid #1f5f78;
    border-bottom: 1px solid #1f5f78;
    background: #6f6f6f;
    color: #fff;
    font-size: 10px;
    line-height: 13px;
    text-shadow: 1px 1px 0 #333;
}

.swf-friends-search-strip {
    cursor: pointer;
    text-align: left;
}

.swf-friends-search-strip::after {
    content: "";
    position: absolute;
    left: 41px;
    top: 5px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #fff;
}
/* END SWF_FRIENDS_EXACT_DOM */

/* The friend list and messenger deliberately avoid generic Octane cards. The
 * original SWF used fixed, pixel-aligned rows and nested plain containers. */
.swf-friends-window .friends-list-profile {
    display: block;
    width: 15px;
    min-width: 15px;
    height: 11px;
    overflow: hidden;
}

.swf-friends-window .friends-list-profile > * {
    width: 15px !important;
    height: 11px !important;
    min-width: 15px !important;
    min-height: 11px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.swf-friends-window .swf-friend-action,
.swf-friends-window .swf-friend-relationship,
.swf-friends-window .swf-friend-category-toggle {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    box-shadow: none;
}

.swf-friends-window .swf-friend-action.follow { background-image: url("@/assets/images/friends/swf/follow_friend.png"); }
.swf-friends-window .swf-friend-action.chat { background-image: url("@/assets/images/friends/swf/friendlist_chat.png"); }
.swf-friends-window .swf-friend-action.add { background-image: url("@/assets/images/friends/swf/plus_friend_icon.png"); }
.swf-friends-window .swf-friend-category-toggle::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: 5px auto 0;
    border-top: 5px solid #111;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.swf-friends-window .swf-friend-relationship {
    position: relative;
    width: 26px;
    min-width: 26px;
    background-image: url("@/assets/images/friends/friends-spritesheet.png");
    background-repeat: no-repeat;
}
.swf-friends-window .swf-friend-relationship.heart { background-position: -5px -67px; }
.swf-friends-window .swf-friend-relationship.smile { background-position: -57px -67px; }
.swf-friends-window .swf-friend-relationship.bobba { background-position: -96px -5px; }
.swf-friends-window .swf-friend-relationship.none { background-position: -31px -67px; }
.swf-friends-window .swf-friend-relationship::after {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    width: 0;
    height: 0;
    border-top: 4px solid #111;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
}

.swf-relationship-chooser {
    position: fixed;
    z-index: 10000;
    width: 30px;
    height: 68px;
    padding: 2px;
    border: 1px solid #777;
    background: #fff;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .45);
}
.swf-relationship-chooser button {
    display: block;
    width: 25px;
    height: 15px;
    padding: 0;
    border: 0;
    background-color: #ececec;
    background-image: url("@/assets/images/friends/friends-spritesheet.png");
    background-repeat: no-repeat;
}
.swf-relationship-chooser button:nth-child(even) { background-color: #fff; }
.swf-relationship-chooser button:hover { background-color: #cdebf6; }
.swf-relationship-chooser button.none { background-position: -31px -67px; }
.swf-relationship-chooser button.heart { background-position: -5px -67px; }
.swf-relationship-chooser button.smile { background-position: -57px -67px; }
.swf-relationship-chooser button.bobba { background-position: -96px -5px; }

.swf-friends-window .friends-list-group-assign { position: relative; }
.swf-friends-window .friends-list-group-menu {
    position: absolute;
    right: 0;
    top: 17px;
    z-index: 10;
    min-width: 105px;
    padding: 2px;
    border: 1px solid #555;
    background: #f4f4ef;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .45);
}
.swf-friends-window .friends-list-group-menu button {
    display: block;
    width: 100%;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: #000;
    font-size: 10px;
    text-align: left;
}
.swf-friends-window .friends-list-group-menu button:hover,
.swf-friends-window .friends-list-group-menu button.active { background: #63c4e7; }

.swf-friends-search-results {
    position: relative;
    box-sizing: border-box;
    padding: 3px;
}
.swf-friends-search-input {
    display: block;
    width: 100%;
    height: 20px;
    margin: 0 0 4px;
    padding: 2px 5px;
    border: 1px solid #8e8e88;
    border-radius: 2px;
    background: #fff;
    color: #000;
    font-size: 10px;
}
.swf-friends-search-results .swf-search-section { margin: 0 0 4px; }
.swf-friends-search-results .swf-search-section h4 {
    height: 18px;
    margin: 0;
    padding: 3px 3px 0;
    background: #fff;
    color: #000;
    font-size: 10px;
    font-weight: 700;
}

/* Illumina messenger header: fixed SWF pixel coordinates. */

/* Assets and nine-slice regions match the Illumina-light SWF frame. */

/* Friend bar: original SWF tab measurements and attached “find friends” state. */
.friend-bar .friend-bar-find-friends {
    position: relative;
    z-index: 20;
    flex: 0 0 127px;
    width: 127px;
    height: 36px;
}

.friend-bar .friend-bar-find-friends .friend-bar-item,
.friend-bar > * .friend-bar-item:not(.friend-bar-request):not(.friend-bar-empty) {
    box-sizing: border-box;
    width: 127px;
    min-width: 127px;
    height: 36px;
    min-height: 36px;
}

.friend-bar .friend-bar-find-friends .friend-bar-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 9px 0 38px;
    cursor: pointer;
}

.friend-bar .friend-bar-find-friends .friend-bar-search-icon {
    position: absolute;
    top: 1px;
    left: 6px;
    display: block;
    width: auto;
    height: auto;
    max-width: 29px;
    max-height: 33px;
    pointer-events: none;
}

.friend-bar .friend-bar-find-friends .friend-bar-text {
    display: block;
    overflow: hidden;
    width: 100%;
    padding-top: 0;
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-bar .friend-bar-find-friends-panel {
    position: absolute;
    bottom: 34px;
    left: 0;
    z-index: 100;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 127px;
    min-height: 164px;
    padding: 6px 7px 8px;
    border: 1px solid #74dbfa;
    border-radius: 4px 4px 0 0;
    background: #4f8e38;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.45);
    color: #fff;
}

.friend-bar:has(.friend-bar-find-friends.is-selected) .friend-bar-friend.is-selected .friend-bar-actions {
    display: none;
}

.friend-bar .friend-bar-find-friends-header {
    display: flex;
    align-items: center;
    min-height: 30px;
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.friend-bar .friend-bar-find-friends-header img {
    display: block;
    width: auto;
    height: auto;
    max-width: 31px;
    max-height: 34px;
    margin: -4px 4px -2px -3px;
}

.friend-bar .friend-bar-find-friends-copy {
    min-height: 62px;
    padding: 3px 2px;
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 12px;
    line-height: 14px;
}

.friend-bar .friend-bar-find-friends-button {
    width: 111px;
    min-height: 32px;
    margin: auto auto 0;
    border: 2px solid #000;
    border-radius: 4px;
    background: linear-gradient(#fff, #d5d5d5);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
    color: #000;
    cursor: pointer;
    font-family: Ubuntu, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.friend-bar .friend-bar-find-friends-button:hover {
    background: linear-gradient(#fff, #ececec);
}

.friend-bar .friend-bar-actions {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 110px;
    padding: 7px 8px;
    border: 1px solid #000;
    border-radius: 4px;
    background: #4f8e38;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    transform: translateX(-50%);
}

.friend-bar .friend-bar-actions-name {
    max-width: 120px;
    overflow: hidden;
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 1px 1px #000;
    white-space: nowrap;
}

.friend-bar .friend-bar-actions-buttons {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 5px;
}

/* Selected tabs follow the original SWF geometry instead of generic popovers. */
.friend-bar .friend-bar-find-friends-panel {
    bottom: 0;
    width: 127px;
    height: 164px;
    min-height: 164px;
    padding: 4px 5px 7px;
    border: 2px solid #122329;
    border-radius: 4px;
    background: #5f9fad;
    box-shadow: inset 0 0 0 1px #a7e8f3, 1px 2px 0 rgba(0, 0, 0, 0.42);
}

.friend-bar .friend-bar-find-friends-header {
    min-height: 30px;
    padding: 0 3px;
    border-bottom: 1px solid rgba(7, 34, 40, 0.45);
    color: #fff;
    font-size: 12px;
    text-shadow: 1px 1px #1d5560;
}

.friend-bar .friend-bar-find-friends-header img {
    margin: -4px 4px -2px -4px;
}

.friend-bar .friend-bar-find-friends-copy {
    box-sizing: border-box;
    min-height: 76px;
    padding: 7px 4px 3px;
    color: #000; /* add_friends_tab text: Ubuntu 12, no text_color (black) */
    font-size: 12px;
    line-height: 13px;
}

.friend-bar .friend-bar-find-friends-button {
    width: 109px;
    min-height: 30px;
    margin: auto 2px 0;
    border: 2px solid #000;
    border-radius: 2px;
    background: linear-gradient(#fff, #d9d9d9);
    box-shadow: inset 0 1px rgba(255, 255, 255, 1);
    font-size: 12px;
}

.friend-bar .friend-bar-friend {
    position: relative;
    z-index: 20;
    flex: 0 0 127px;
    width: 127px;
    height: 36px;
}

.friend-bar .friend-bar-friend.is-selected {
    z-index: 30;
}

.friend-bar .friend-bar-friend:not(.is-selected) .friend-bar-actions {
    /* AnimatePresence retains the panel briefly while it exits, after the
       parent has already lost is-selected. Hide that stale closing frame. */
    display: none;
}

.friend-bar .friend-bar-friend .friend-bar-actions-name {
    max-width: 166px;
    min-height: 30px;
    padding-top: 5px;
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 13px;
    line-height: 16px;
    text-align: left;
    text-shadow: 1px 1px #000;
}

.friend-bar .friend-bar-friend .friend-bar-actions-buttons {
    position: absolute;
    bottom: 7px;
    left: 40px;
    gap: 4px;
    margin: 0;
}

.friend-bar .friend-bar-friend .friend-bar-actions-buttons .tbme-icon {
    width: 23px;
    height: 21px;
    border: 1px solid #050505;
    border-radius: 2px;
    background-color: #30342a;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.14);
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-item-head.avatar {
    z-index: 90;
}

/* In the SWF the expanded controls stay on the left while the selected tab
   (name and avatar) docks to the right edge of that control strip. */
.friend-bar .friend-bar-friend.is-selected .friend-bar-tab {
    position: absolute;
    right: auto;
    bottom: 0;
    left: 135px;
    z-index: 91;
    padding-left: 35px;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-item-head.avatar {
    top: -27px !important;
    right: auto;
    bottom: auto;
    left: 218px !important;
    width: 37px;
    height: 66px;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions-name {
    display: none;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions-buttons {
    bottom: 8px;
    left: 38px;
}

/* Selected friends expand into the same compact vertical tab used by the SWF. */
.friend-bar .friend-bar-friend.is-selected .friend-bar-actions {
    bottom: 0;
    left: 3px;
    width: 127px;
    min-height: 70px;
    padding: 0;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-tab {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    z-index: 92;
    width: 127px;
    height: 35px;
    min-height: 35px;
    padding-left: 42px;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-tab .friend-bar-text {
    padding-top: 0;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    text-shadow: 1px 1px #1a2111;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-item-head.avatar {
    top: -47px !important;
    right: auto;
    bottom: auto;
    left: -23px !important;
    z-index: 93;
    width: 37px;
    height: 66px;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions-name {
    position: absolute;
    top: 8px;
    left: 41px;
    display: block;
    max-width: 77px;
    min-height: 18px;
    overflow: hidden;
    padding: 0;
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    text-overflow: ellipsis;
    text-shadow: 1px 1px #1a2111;
    white-space: nowrap;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions-buttons {
    bottom: 7px;
    left: 31px;
    z-index: 94;
}

/* Clear the old friend-bar skin from selected entities before applying the
   compact SWF state above. */
.friend-bar .friend-bar-friend.is-selected .friend-bar-tab {
    position: absolute;
    top: -70px;
    left: 0;
    z-index: 92;
    box-sizing: border-box;
    display: block;
    width: 127px;
    height: 35px;
    padding-left: 42px;
    cursor: pointer;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-tab .friend-bar-text {
    display: block;
    overflow: hidden;
    padding-top: 8px;
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-overflow: ellipsis;
    text-shadow: 1px 1px #1a2111;
    white-space: nowrap;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-item-head.avatar {
    position: absolute !important;
    top: -47px !important;
    left: -23px !important;
    z-index: 93;
    display: block;
    width: 54px;
    height: 62px;
    overflow: visible;
}

/* SWF selected friend tab: keep a single label and a compact head preview. */
.friend-bar .friend-bar-friend.is-selected .friend-bar-actions {
    position: absolute;
    right: auto;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 80;
    box-sizing: border-box;
    display: block;
    width: 127px;
    height: 70px;
    min-height: 70px;
    padding: 0;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-tab {
    position: absolute;
    top: -34px;
    right: auto;
    bottom: auto;
    left: 0;
    z-index: 92;
    box-sizing: border-box;
    display: block;
    width: 127px;
    height: 35px;
    padding-left: 44px;
    cursor: pointer;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-tab .friend-bar-text {
    display: block;
    width: 75px;
    overflow: hidden;
    padding-top: 8px;
    color: #fff;
    font-family: Ubuntu, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    text-overflow: ellipsis;
    text-shadow: 1px 1px #1a2111;
    white-space: nowrap;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-item-head.avatar {
    position: absolute !important;
    top: -39px !important;
    right: auto;
    bottom: auto;
    left: -3px !important;
    z-index: 93;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-item-head.avatar > * {
    width: 40px !important;
    height: 40px !important;
    filter: none !important;
    box-shadow: none !important;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions-buttons {
    position: absolute;
    right: auto;
    bottom: 7px;
    left: 50%;
    z-index: 94;
    display: flex;
    gap: 4px;
    margin: 0;
    transform: translateX(-50%);
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions-buttons .tbme-icon {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions {
    border-radius: 4px !important;
    overflow: hidden;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-tab {
    border-radius: 2px 2px 0 0 !important;
}

/* `new_friend_entity_xml` + `new_controls_xml`: 127 x 70 selected SWF tab. */
.friend-bar .friend-bar-friend.is-selected .friend-bar-actions {
    right: auto;
    bottom: 0;
    left: 3px;
    width: 127px;
    height: 70px;
    min-height: 70px;
    padding: 0;
    border-radius: 4px !important;
    background: #72883f !important;
    box-shadow: none;
    transform: none !important;
    overflow: hidden;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-tab {
    top: -34px;
    width: 127px;
    height: 35px;
    margin: 0 3px;
    padding-left: 0;
    border: 0;
    border-image-source: none !important;
    border-radius: 2px 2px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-tab .friend-bar-text {
    width: 127px;
    padding-top: 2px;
    line-height: 18px;
    text-align: center;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-item-head.avatar {
    left: 0 !important;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-item-head.avatar .avatar-image {
    background-size: auto !important;
    background-position: -25px -38px !important;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions-buttons {
    top: 35px;
    right: auto;
    bottom: auto;
    left: 30px;
    gap: 4px;
    transform: none;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions-buttons .friend-bar-icons {
    flex: 0 0 25px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background-color: transparent !important;
    box-shadow: none;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-action-icon {
    display: flex;
    width: 23px;
    height: 21px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-action-icon img {
    display: block;
    width: auto;
    height: auto;
    max-width: 23px;
    max-height: 21px;
    pointer-events: none;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-actions-buttons {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.friend-bar .friend-bar-friend.is-selected .friend-bar-icons:hover {
    height: 21px;
    transform: none !important;
}

.friend-bar .friend-bar-friend.is-selected .icon-friendbar-chat:hover {
    background-position: 0 0;
}

.friend-bar .friend-bar-friend.is-selected .icon-friendbar-visit:hover {
    background-position: 0 -24px;
}

.friend-bar .friend-bar-friend.is-selected .icon-profile:hover {
    background-position: 0 -48px;
}

.swf-friends-window .swf-friends-titlebar {
    background-color: #418db0;
    background-image: url("@/assets/images/habbo-skin/2249_habbo_skin_blue_png$87fbbf84559e7bad0222a9c697b1104d-1406111769.png");
    background-position: -393px 0;
    background-repeat: repeat-x;
    background-size: auto;
}

.swf-friends-window .swf-friends-close {
    width: 15px;
    height: 15px;
    right: 4px;
    top: 4px;
    background-image: url("@/assets/images/habbo-skin/2249_habbo_skin_blue_png$87fbbf84559e7bad0222a9c697b1104d-1406111769.png");
    background-position: -377px -216px;
    background-repeat: no-repeat;
}

.swf-friends-window .swf-friends-close::before,
.swf-friends-window .swf-friends-close::after {
    display: none;
}

.swf-friends-window {
    width: 240px;
    height: 400px;
    overflow: hidden;
    border: 1px solid #1a5d74;
    border-radius: 5px;
    background: #3f9fc1;
    box-shadow: inset 0 1px 0 #76d3ec;
}

.swf-friends-window .swf-friends-titlebar {
    height: 24px;
}

.swf-friends-window .swf-friends-category {
    height: 17px;
}

.swf-friends-window .swf-friends-body {
    top: 42px;
    right: 4px;
    bottom: 68px;
    left: 4px;
    overflow: hidden;
    background: #f2f2ee;
}

.swf-friends-window .swf-friends-section-header {
    height: 19px;
    padding: 2px 4px 0;
    line-height: 14px;
}

.swf-friends-window .swf-friends-section-list {
    max-height: 250px;
}

.swf-friends-window .swf-friends-offline-list {
    max-height: 152px;
    overflow-y: auto;
}

.swf-friends-window .friends-list-item {
    display: flex;
    align-items: center;
    min-height: 20px;
    height: 20px;
    padding: 0 3px;
}

.swf-friends-window .friends-list-user {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: 20px;
}

.swf-friends-window .friends-list-avatar {
    display: block;
    flex: 0 0 20px;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    overflow: hidden;
}

.swf-friends-window .friends-list-avatar .avatar-image {
    position: absolute;
    inset: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    transform: none !important;
    background-position: -11px -12px !important;
    background-size: 42px auto !important;
}

.swf-friends-window .friends-list-profile {
    display: flex;
    flex: 0 0 15px;
    align-items: center;
    justify-content: center;
    width: 15px;
    min-width: 15px;
    height: 11px;
    margin-left: 1px;
}

.swf-friends-window .friends-list-name {
    min-width: 0;
    margin-left: 3px;
    overflow: hidden;
    color: #111;
    font-size: 10px;
    font-weight: normal;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swf-friends-window .friends-list-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 20px;
    gap: 0;
}

.swf-friends-window .friends-list-group-assign {
    display: none;
}

.swf-friends-window .swf-friend-action,
.swf-friends-window .swf-friend-relationship {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    padding: 0;
}

.swf-friends-window .friends-list-item.online .swf-friend-relationship {
    order: 1;
}

.swf-friends-window .friends-list-item.online .swf-friend-action.follow {
    order: 2;
}

.swf-friends-window .friends-list-item.online .swf-friend-action.chat {
    order: 3;
}

.swf-friends-window .friends-list-item.offline .friends-list-actions {
    display: none;
}

.swf-friends-window {
    height: 350px;
    min-height: 300px;
    max-height: calc(100vh - 16px);
    resize: vertical;
}

.swf-friends-window .swf-friends-body {
    bottom: 68px;
    background: #fff;
}

.swf-friends-window .swf-friends-section-header {
    background: #fff;
}

.swf-friends-window .friends-list-item {
    position: relative;
    justify-content: initial;
    background: #fff !important;
}

.swf-friends-window .friends-list-item:nth-child(even) {
    background: #fff !important;
}

.swf-friends-window .friends-list-item.selected,
.swf-friends-window .friends-list-item:hover {
    background: #cbeefb !important;
}

.swf-friends-window .friends-list-user {
    gap: 0;
}

.swf-friends-window .friends-list-avatar {
    position: relative;
    align-self: center;
}

.swf-friends-window .friends-list-actions {
    margin-left: auto;
}

.swf-friends-window .swf-friend-relationship {
    width: 16px;
    min-width: 16px;
}

.swf-friends-window .swf-relationship-chooser {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 30;
}

.habbicon-selector-sections {
    overflow-x: hidden !important;
}

.swf-friends-window .swf-friends-titlebar {
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .26) 0 1px, transparent 1px 2px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 2px),
        linear-gradient(#55b5d5, #3297be);
}

.swf-friends-window .swf-friends-close {
    width: 17px;
    height: 17px;
    right: 3px;
    top: 4px;
    background: transparent;
}

.swf-friends-window .swf-friends-close::before,
.swf-friends-window .swf-friends-close::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 2px;
    display: block;
    width: 2px;
    height: 13px;
    background: #bfeefa;
}

.swf-friends-window .swf-friends-close::before { transform: rotate(45deg); }
.swf-friends-window .swf-friends-close::after { transform: rotate(-45deg); }

.swf-friends-window .swf-friends-titlebar {
    background-color: #418db0;
    background-image: url("@/assets/images/friends/swf/friends-blue-header.png");
    background-position: left top;
    background-repeat: repeat-x;
}

.swf-friends-window .swf-friends-close {
    width: 15px;
    height: 15px;
    right: 4px;
    background: url("@/assets/images/friends/swf/friends-blue-close-default.png") center / 15px 15px no-repeat;
}

.swf-friends-window .swf-friends-close:hover {
    background-image: url("@/assets/images/friends/swf/friends-blue-close-hover.png");
}

.swf-friends-window .swf-friends-close:active {
    background-image: url("@/assets/images/friends/swf/friends-blue-close-pressed.png");
}

.swf-friends-window .swf-friends-close::before,
.swf-friends-window .swf-friends-close::after {
    display: none;
}

/*
 * AIR friend bar tiles: skin border style 6 (habbo_skin_ubuntu, 80,10 20x20) tinted by the tab colour. The skin is a
 * 1px black outline (2px at the bottom), a 2px white ring and a #bab8b4 fill, so the ring takes the tab colour and the
 * fill takes the colour multiplied by #bab8b4. Colours from the tabs: friend (FriendEntityTab) 0x9dbf5a / 0xd3f794
 * when exposed, find friends (add_friends_tab) 0x7fc8de / 0x91e1f9, friend requests (FriendRequestsTab) 0xfac919 /
 * 0xffd966.
 */
.friend-bar {
    --air-tab-friend-ring: #9dbf5a;
    --air-tab-friend-fill: #72893f;
    --air-tab-friend-ring-exposed: #d3f794;
    --air-tab-friend-fill-exposed: #99b268;
    --air-tab-find-ring: #7fc8de;
    --air-tab-find-fill: #5c909c;
    --air-tab-find-ring-exposed: #91e1f9;
    --air-tab-find-fill-exposed: #6aa2b0;
    --air-tab-request-ring: #fac919;
    --air-tab-request-fill: #b69112;
    --air-tab-request-ring-exposed: #ffd966;
    --air-tab-request-fill-exposed: #ba9d48;
}

.friend-bar .friend-bar-find-friends .friend-bar-item.friend-bar-search.find-friends,
.friend-bar .friend-bar-friend:not(.is-selected) .friend-bar-item.friend-bar-tab.find-friends-active,
.friend-bar .friend-bar-item.friend-bar-request.find-friends-active.find-friends-active {
    --air-tab-ring: var(--air-tab-friend-ring);
    --air-tab-fill: var(--air-tab-friend-fill);
    --air-tab-ring-exposed: var(--air-tab-friend-ring-exposed);
    --air-tab-fill-exposed: var(--air-tab-friend-fill-exposed);
    border: 1px solid #000;
    border-bottom-width: 2px;
    border-image-source: none;
    border-radius: 4px;
    background: var(--air-tab-fill);
    box-shadow: inset 0 0 0 2px var(--air-tab-ring);
    text-shadow: none;
}

.friend-bar .friend-bar-find-friends .friend-bar-item.friend-bar-search.find-friends {
    --air-tab-ring: var(--air-tab-find-ring);
    --air-tab-fill: var(--air-tab-find-fill);
    --air-tab-ring-exposed: var(--air-tab-find-ring-exposed);
    --air-tab-fill-exposed: var(--air-tab-find-fill-exposed);
}

.friend-bar .friend-bar-item.friend-bar-request.find-friends-active.find-friends-active {
    --air-tab-ring: var(--air-tab-request-ring);
    --air-tab-fill: var(--air-tab-request-fill);
    --air-tab-ring-exposed: var(--air-tab-request-ring-exposed);
    --air-tab-fill-exposed: var(--air-tab-request-fill-exposed);
}

.friend-bar .friend-bar-find-friends .friend-bar-item.friend-bar-search.find-friends:hover,
.friend-bar .friend-bar-find-friends.is-selected .friend-bar-item.friend-bar-search.find-friends,
.friend-bar .friend-bar-friend:not(.is-selected) .friend-bar-item.friend-bar-tab.find-friends-active:hover,
.friend-bar .friend-bar-item.friend-bar-request.find-friends-active.find-friends-active:hover {
    border-image-source: none;
    background: var(--air-tab-fill-exposed);
    box-shadow: inset 0 0 0 2px var(--air-tab-ring-exposed);
}

/* add_friends_tab title: 77 x 30, so a long caption wraps onto a second line instead of being cut off. */
.friend-bar .friend-bar-find-friends .friend-bar-item.friend-bar-search.find-friends .friend-bar-text {
    display: -webkit-box;
    overflow: hidden;
    line-height: 13px;
    white-space: normal;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/*
 * Text as AIR draws the friend windows (Octane's `Ubuntu` face is the condensed cut; AIR's is the regular one).
 *
 * room_invite_confirm / friend_remove_confirm are style 0 frames: Volter 9 black, the OK is a style 0 button_thick
 * and Cancel a style 0 button, both the grey classic skin (the components pass variant="secondary").
 */
.octane-friends-room-invite .octane-card-content-shell,
.octane-friends-remove-confirmation .octane-card-content-shell {
    color: #000;
    font-family: Volter, monospace;
    font-size: 9px;
    line-height: 12px;
}

/* The category manager is Octane's own: AIR conventions, regular Ubuntu u_regular 12 black. */
.octane-friends-category-manager .octane-card-content-shell {
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
    font-size: 12px;
    line-height: 15px;
}

.octane-friends-category-manager .text-sm {
    font-size: 12px;
}

/* new_bar / new_friend_entity / add_friends_tab / friend_request(s)_tab: regular Ubuntu throughout. */
.friend-bar {
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
}

/* add_friends_tab button: button_thick style 3, the grey habbo_skin_button_shiny_thick, 12 px bold black. */
.friend-bar .friend-bar-find-friends .friend-bar-find-friends-button {
    border: 5px solid transparent;
    border-radius: 0;
    border-image-source: var(--habbo-skin-shiny-thick);
    border-image-slice: 5 fill;
    border-image-width: 5px;
    border-image-repeat: stretch;
    background: transparent;
    box-shadow: none;
    color: #000;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.friend-bar .friend-bar-find-friends .friend-bar-find-friends-button:hover {
    border-image-source: var(--habbo-skin-shiny-thick-hover);
    background: transparent;
}

.friend-bar .friend-bar-find-friends .friend-bar-find-friends-button:active {
    border-image-source: var(--habbo-skin-shiny-thick-pressed);
}

@layer base {
    .friend-bar :where(*):not(svg, svg *),
    .octane-friends-category-manager .octane-card-content-shell :where(*):not(svg, svg *) {
        font-family: HabboAirUbuntu, UbuntuRegular, sans-serif !important;
    }

    .octane-friends-room-invite .octane-card-content-shell :where(*):not(svg, svg *),
    .octane-friends-remove-confirmation .octane-card-content-shell :where(*):not(svg, svg *) {
        font-family: Volter, monospace !important;
    }

    /* Button's size is an important utility (12.6 px); the style 0 buttons are Volter 9. */
    .octane-friends-room-invite .octane-card-content-shell :where(.habbo-btn-secondary),
    .octane-friends-remove-confirmation .octane-card-content-shell :where(.habbo-btn-secondary) {
        color: #000 !important;
        font-size: 9px !important;
        font-weight: 400 !important;
    }

    /* Friend names and tab titles: u_bold 12 white (new_friend_entity name, friend_requests_tab label, the
       add_friends_tab title is Ubuntu 12 bold). Octane had 13 px. */
    .friend-bar :where(.friend-bar-text, .friend-bar-actions-name) {
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    /* Category manager buttons: AIR's grey button_thick (habbo_skin_button_shiny_thick), 12 px bold black. */
    .octane-friends-category-manager .octane-card-content-shell .habbo-btn-primary {
        border-image-source: var(--habbo-skin-shiny-thick) !important;
        color: #000 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-shadow: none !important;
    }

    .octane-friends-category-manager .octane-card-content-shell .habbo-btn-primary:hover {
        border-image-source: var(--habbo-skin-shiny-thick-hover) !important;
    }

    .octane-friends-category-manager .octane-card-content-shell .habbo-btn-primary:active {
        border-image-source: var(--habbo-skin-shiny-thick-pressed) !important;
    }

    .octane-friends-category-manager .octane-card-content-shell .habbo-btn-primary:disabled,
    .octane-friends-category-manager .octane-card-content-shell .habbo-btn-primary.pointer-events-none {
        border-image-source: var(--habbo-skin-shiny-thick-disabled) !important;
        color: #777 !important;
    }
}