.nlux-comp-chatItem {
    display: flex;
    margin-bottom: 0.5em;
    gap: 0.5em;

    > .nlux-comp-message {
        display: flex;
        overflow: hidden;
        align-items: flex-start;
        flex: 1;
        flex-direction: column;
        flex-shrink: initial;
        min-width: 80px;
        min-height: 22px;
        margin: 0;
        text-align: left;
        border-radius: 0.25em;
        outline: 0;
        gap: var(--nlux-chItm-msg--gap);
    }

    > .nlux-comp-chatItem-participantInfo {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        padding: var(--nlux-comp-chatItem-participantInfo--pdng);
        gap: var(--nlux-comp-chatItem-participantInfo--gap);

        > .nlux-comp-chatItem-participantName {
            font-size: var(--nlux-prtInfo-prtNm--ftSz);
            font-weight: var(--nlux-prtInfo-prtNm--ftWg);
            color: var(--nlux-prtInfo-prtNm--clr);
        }
    }
}

/** OUT Chat item */
.nlux-comp-chatItem.nlux-comp-chatItem--sent {
    > .nlux-comp-chatItem-participantInfo > .nlux-comp-avatar {
        border-color: var(--nlux-hmMsg--brdClr);

        > .nlux-comp-avatarContainer > .nlux-comp-avatarPicture {
            background-color: var(--nlux-hmMsg--bgClr);
        }
    }
}

/** IN Chat item */
.nlux-comp-chatItem.nlux-comp-chatItem--received {
    > .nlux-comp-chatItem-participantInfo > .nlux-comp-avatar {
        border-color: var(--nlux-aiMsg--brdClr);

        > .nlux-comp-avatarContainer > .nlux-comp-avatarPicture {
            background-color: var(--nlux-aiMsg--bgClr);
        }
    }
}