Nitro-V3/src/css/friends/FriendsView.css

/* ── Friends spritesheet icons ── */
.nitro-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;
}

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

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

    & .nitro-card-title {
        font-family: UbuntuCondensed, Ubuntu, sans-serif !important;
        font-size: 15px !important;
    }

    & .nitro-card-header {
        border-bottom: 1px solid rgba(0, 0, 0, .18);
    }

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

    & .nitro-card-accordion-set-content,
    & .nitro-card-content-shell {
        scrollbar-width: thin;
        scrollbar-color: #6d7b84 #cdd4d8;
    }

    & .nitro-card-accordion-set-content::-webkit-scrollbar,
    & .nitro-card-content-shell::-webkit-scrollbar {
        width: 13px;
        height: 13px;
    }

    & .nitro-card-accordion-set-content::-webkit-scrollbar-track,
    & .nitro-card-content-shell::-webkit-scrollbar-track {
        background: linear-gradient(180deg, #e1e5e8 0%, #cad1d5 100%);
        border-left: 1px solid #818a8f;
    }

    & .nitro-card-accordion-set-content::-webkit-scrollbar-thumb,
    & .nitro-card-content-shell::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #93b6c6 0%, #688fa2 100%);
        border: 1px solid #476a7a;
        border-radius: 2px;
    }

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

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

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

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

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

    & .nitro-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;
    }

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

    & .nitro-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;
        }
    }
}

.nitro-friends-room-invite {
    width: 270px;
    height: 225px;
    min-width: 270px;
    min-height: 225px;
    max-width: 270px;
    max-height: 225px;
    resize: none !important;

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

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

.nitro-friends-room-invite-summary {
    padding: 6px 8px;
    color: #111;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .35);
    border-radius: 8px;
}

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

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

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

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

.nitro-friends-remove-confirmation {
    width: 270px;
    height: 225px;
    min-width: 270px;
    min-height: 225px;
    max-width: 270px;
    max-height: 225px;
    resize: none !important;
}

.nitro-friends-remove-confirmation-text {
    color: #111;
    font-size: 13px;
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.nitro-friends-remove-confirmation-content {
    height: 100%;
}

.nitro-friends-remove-confirmation-names {
    margin-top: 4px;
}

.nitro-friends-remove-confirmation-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.friend-bar {
    & .friend-bar-item {
        pointer-events: all;

        &.friend-bar-search-item-active {
            background-color: #b69b83;
            border: 2px solid #e2c1a3;

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

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

.messenger-card {
    width: 332px;
    min-width: 332px;
    max-width: 332px;
    height: 445px;
    min-height: 445px;
    max-height: 445px;
    resize: none;
    pointer-events: all;
}

@media (max-width: 380px), (max-height: 470px) {
    .messenger-card {
        width: 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);
    }
}

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

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

    & .nitro-card-content-shell,
    & .chat-messages {
        scrollbar-width: thin;
        scrollbar-color: #6d7b84 #cdd4d8;
    }

    & .nitro-card-content-shell::-webkit-scrollbar,
    & .chat-messages::-webkit-scrollbar {
        width: 13px;
        height: 13px;
    }

    & .nitro-card-content-shell::-webkit-scrollbar-track,
    & .chat-messages::-webkit-scrollbar-track {
        background: linear-gradient(180deg, #e1e5e8 0%, #cad1d5 100%);
        border-left: 1px solid #818a8f;
    }

    & .nitro-card-content-shell::-webkit-scrollbar-thumb,
    & .chat-messages::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #93b6c6 0%, #688fa2 100%);
        border: 1px solid #476a7a;
        border-radius: 2px;
    }

    & .nitro-card-header {
        border-bottom: 1px solid rgba(0, 0, 0, .18);
    }

    & .nitro-card-title {
        font-family: UbuntuCondensed, Ubuntu, sans-serif !important;
        font-size: 15px !important;
    }

    & .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);
        scrollbar-width: none;
    }

    & .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;
            left: 50% !important;
            top: -31px !important;
            width: 90px !important;
            height: 130px !important;
            margin: 0 !important;
            background-position: center -8px !important;
            transform: translateX(-50%) !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: visible;
            width: 36px;
            height: 36px;

            & .avatar-image {
            position: absolute;
            left: 50%;
                top: 56%;
                width: 54px;
                height: 54px;
                margin: 0;
                background-position: center center !important;
                transform: translate(-50%, -50%) scale(.95);
            }
        }

        & .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-chips-scroll::-webkit-scrollbar {
    height: 4px;
}

.friends-group-chips-scroll::-webkit-scrollbar-thumb {
    background: #c0c0b8;
    border-radius: 2px;
}

.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 {
    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 */
.nitro-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-status {
    margin-top: 1px;
    font-size: 10px;
    line-height: 10px;
    text-align: right;
    opacity: 0.6;
}
.messenger-message-status.read {
    color: #4fc3f7;
    opacity: 1;
}

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