Greasy Fork is available in English.

YouTube Chat Tints

Make YouTube Chat Tints

/* ==UserStyle==
@name           YouTube Chat Tints
@version        0.4.9
@namespace      github.com/cyfung1031
@license        MIT
@description    Make YouTube Chat Tints
@author         CY Fung
@preprocessor   stylus
@var color      color-sponsor-text               "Sponsor Text Color"                               #71ff8c
@var color      color-moderator-text             "Moderator Text Color"                             #70a7ff
@var color      color-owner-chip-background      "Owner Chip Background Color"                      #ffff3c
@var color      color-general-author             "General Author Color"                             #a3e3e3
@var range      loading-effect-ms                "loading-effect (0ms=disable; 600ms)"              [0, 0, 900, 50, 'ms']
@var checkbox   chat-author-vline-enable         "Enable Chat Author Vline"                         1
@var range      v-transparent                    "Vline Transparency"                               [0.1, 0.01, 0.32, 0.01]
@var range      vline-gap-1                      "Vline Gap 1"                                      [0, -2, 18, 1]
@var range      vline-gap-2                      "Vline Gap 2"                                      [0, -6, 6, 1]
@var checkbox   fade-author-icon-enable          "Enable Fade Author Icon"                          1
@var range      author-icon-transition           "Author Icon Transition"                           [0, 0, 600, 50, 'ms']
@var number     author-icon-opacity              "Author Icon Opacity"                              [0.6, 0.2, 1.0, 0.2]
@var range      author-icon-size                 "Author Icon Size"                                 [24, 12, 36, 2, 'px']
@var range      author-font-ratio                "Author Text Size"                                 [3.6, 2.0, 4.6, 0.2]
@var range      author-line-height               "Author Line Height"                               [0, -4, 10, 1]
@var number     author-chip-default-order        "Author Chip Default Order"                        [0, 0, 80, 5]
@var number     author-chip-pre-badge-order      "Author Chip Pre-Badge Order"                      [0, 0, 80, 5]
@var number     author-chip-author-name-order    "Author Chip Author-Name Order"                    [0, 0, 80, 5]
@var number     author-chip-member-badge-order   "Author Chip Member-Badge Order"                   [0, 0, 80, 5]
@var range      author-chip-member-badge-at      "Author Chip Member-Badge Align Top"               [-1, -1, 4, 1, 'px']
@var range      author-chip-member-badge-mw      "Author Chip Member-Badge Min Width"               [0, 0, 32, 2, 'px']
@var range      author-chip-member-badge-mh      "Author Chip Member-Badge Min Height"              [0, 0, 32, 2, 'px']
@var range      member-icon-font-size            "Member Icon Font Size"                            [1.4, 0.6, 2.6, 0.2, 'rem']
@var range      message-font-ratio               "Message Font Size"                                [4.6, 2.0, 6.6, 0.2]
@var range      message-line-height              "Message Line Height"                              [0, -4, 10, 1]
@var checkbox   emoji-normalize-enable           "Emoji Size Adjust"                                0
@var range      emoji-font-size                  "Emoji Font Size"                                  [2.0, 0.6, 3.4, 0.2, 'rem']
@var number     emoji-vertical-shift             "Emoji Vertical Shift"                             [14, 1, 32, 1]
@var range      emoji-margin                     "Emoji Margin"                                     [2.0, 1.0, 6.0, 1.0, 'px']
@var number     emoji-shadow-size                "emoji-shadow-size (1=disable)"                    [3, 1, 4, 1]
@var color      emoji-shadow                     "emoji-shadow"                                     #b5b4b4

@var range      padding-left-message             "Message Padding Left"                             [0.4, 0.2, 2, 0.2, 'em']
@var range      padding-left-author-icon-x       "Author Icon Padding Left"                         [4, 2, 26, 2, 'px']
@var range      padding-right-author-icon        "Author Icon Padding Right"                        [6, 2, 32, 2, 'px']

@var number     final-message-opacity            "Final Message Opacity"                            [0.8, 0.5, 1.0, 0.1]
@var number     min-content-text-height          "Min Content Text Height (0=disable)"              [0, 0, 18, 1]
@var range      message-opacity-ms               "message-opacity-animation (0ms=disable; 250ms)"   [0, 0, 600, 50, 'ms']

@var checkbox   enable-smaller-super-chat        "enable-smaller-super-chat"                        1
@var number     msg-block-margin-2               "Message Block Margin"                             [20.0, 4.0, 40.0, 4.0, 'px']
@var range      msg-block-margin-rr               "Message Block Margin Right Ratio"                       [0, -0.8, 0.8, 0.2]

==/UserStyle== */
/*

@var checkbox   ruby-font                        "Ruby Font"                                        1
@var checkbox   pw-font                          "Proportional Width Font"                          1
*/
ruby-font=0 // 
pw-font=0 // 

msg-block-margin-1 = 48px //

vline-gap-1-px = vline-gap-1 * 1px //
vline-gap-2-px = vline-gap-2 * 2px //
padding-right-author-icon-diff = padding-right-author-icon - 6px //
author-icon-size-diff =  author-icon-size - 24px + vline-gap-1-px //
cb-w = 78px + author-icon-size-diff + vline-gap-1-px //
cb-ml = -( 48px + cb-w + author-icon-size-diff + padding-right-author-icon-diff + vline-gap-2-px + vline-gap-1-px )   //
padding-left-author-icon = padding-left-author-icon-x + vline-gap-1-px //
ds-w = 14px + vline-gap-2-px + vline-gap-1-px //

if chat-author-vline-enable == 0 //
    ds-w = 0px //

author-icon-mr = padding-right-author-icon + ds-w  //

final-message-opacity-0 = final-message-opacity * 0.2 //
final-message-opacity-10 = final-message-opacity * 0.45 //


message-font-size = message-font-ratio * 0.4rem //
author-font-size-2=author-font-ratio * 0.4rem //


sl-3a = (emoji-vertical-shift - 4) * 0.5px //
emoji-vertical-shift-px = sl-3a //

dummy()
    // dummy
    border: 0;



cc(colorCode)
    transparentify(colorCode, v-transparent)


myChars = (A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9)


gen1()

    for c1, i in myChars
        d1 = '&:has(#img[src*="m/%s"])' % c1
        {d1} //
            --author-color-1 'var(--vline-color-%s)' % (i+1+1000) //

    for c1, i in myChars
        d1 = '&:has(#img[src*="%s="])' % c1
        {d1} //
            --author-color-1 'var(--vline-color-%s)' % (i+1+1000) //

    for c1, i in myChars
        d1 = '&:has(.yt-live-chat-author-badge-renderer[src*="m/%s"])' % c1
        {d1} //
            --author-color-2 'var(--vline-color-%s)' % (i+1+1000) //


authorNameColor()
    
   --yt-live-chat-sponsor-color: color-sponsor-text; //
   --yt-live-chat-secondary-text-color: #ddd; //
   --yt-live-chat-author-chip-owner-background-color: color-owner-chip-background; //    --yt-live-chat-moderator-color: #5e84f1;
   --yt-live-chat-moderator-color: color-moderator-text; //

   #author-name {
       --yt-live-chat-secondary-text-color: color-general-author;
       word-break: break-word;
       display: inline;
       vertical-align: middle;
   }
@-moz-document url-prefix("https://www.youtube.com/live_chat") {

    msg-line-height-o = (message-line-height + 4) * 0.15rem
    msg-line-height-d = message-font-size + msg-line-height-o
    msg-min-height = msg-line-height-d * 1.08

    line-height-message = msg-line-height-d
    line-height-author-name = author-font-size-2 + (author-line-height + 4) * 0.15rem
    line-height-min = 0

    if message-font-size >0 and author-font-size-2 > 0 {
        line-height-min = line-height-message + line-height-author-name
    }

    html{
        --final-message-opacity-0: final-message-opacity-0;
        --final-message-opacity-10: final-message-opacity-10;
        --final-message-opacity: final-message-opacity;
        --emoji-vertical-shift-px: emoji-vertical-shift-px;
        --author-chip-display: !invalid;
        --author-chip-mt: !invalid;
        --author-chip-mb: !invalid;

    }

    yt-live-chat-author-chip {
        display: var(--author-chip-display);
        margin-top: var( --author-chip-mt);
        margin-bottom: var( --author-chip-mb);
    }

    makeBoxShadow(){


        contain: strict;
        content-visibility: auto;

        position: absolute;
        box-shadow-w1 = 32px + author-icon-size-diff + vline-gap-1-px
        box-shadow-w2 = box-shadow-w1 + 12px + vline-gap-2-px
        --box-shadow-w1: box-shadow-w1;
        --box-shadow-w2: box-shadow-w2;
        box-shadow: var(--box-shadow-w1) 0px 0px 0px var(--author-color-1), var(--box-shadow-w1) 0px 0px 0px #ddd, var(--box-shadow-w2) 0px 0px 0px var(--author-color-2), var(--box-shadow-w2) 0px 0px 0px #888;
        content: '';
        width: cb-w;
        border-radius: 0;
        display: block;
        pointer-events: none;
        touch-action: none;
        user-select: none;
        z-index: 0;
        bottom: 1px;
        top: 1px;

    }


    #menu.style-scope.yt-live-chat-paid-message-renderer {
        z-index: 77;
        pointer-events: all;
    }


    /* */
    @keyframes yt-live-chat-text-message-renderer-animation3 {

        0% {
            opacity: var(--final-message-opacity-0); /* */
        }


        100% {
            opacity: var(--final-message-opacity); /* */
        }

    }
    /* */

    @keyframes yt-live-chat-text-message-renderer-animation2 {
        0% {
            left: 48px;

            height: 6px;
            width: 32px;
            opacity: 0.9;
        }

        50% {
            left: 48px;

            height: 3.2px;

            width: calc(100% - 72px);
            opacity: 0.8;
        }

        51% {
            left: 48px;

            height: 3.2px;

            width: calc(100% - 72px);
            opacity: 0.4;
        }

        100% {
            left: 48px;

            height: 3.2px;

            width: calc(100% - 72px);
            opacity: 0.0;
        }
    }

    /* */


    yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip,
    yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer,
    yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image,
    yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
        contain: layout style;
        display: inline-flex;
        vertical-align: middle;
    }



    sl-1 = 0px

    if emoji-shadow-size > 1 {

        sl=(emoji-shadow-size - 1) * 0.5px //
        sr=-1 * sl //
        sl-1 = sl //

    }

    sl-2 = sl-1 + emoji-margin
    sl-3 = sl-1

    .emoji{
        --emoji-margin-left: sl-2;
    }
    .emoji + .emoji {
        --emoji-margin-left: sl-1;
    }


    #message.yt-live-chat-text-message-renderer .emoji.yt-live-chat-text-message-renderer {
        contain: layout paint style;

        display: inline-block;


        if emoji-shadow-size > 1 {

            filter: drop-shadow(0px sl 0px emoji-shadow) drop-shadow(sl 0px 0px emoji-shadow) drop-shadow(sr 0px 0px emoji-shadow) drop-shadow(0px sr 0px emoji-shadow); 

        }


        margin-left: var(--emoji-margin-left);
        margin-right: sl-2;
        margin-top: sl-3;
        margin-bottom: sl-1;
        border-bottom: var(--emoji-vertical-shift-px) solid transparent;

        if emoji-normalize-enable {

            --emoji-font-size: emoji-font-size;

            height: calc(var(--emoji-font-size) * 1.12);
            width: auto;
            object-fit: contain;
        }
    }
    
    yt-live-chat-pinned-message-renderer#pinned-message #message.yt-live-chat-pinned-message-renderer #card #message .emoji {
        
        if emoji-shadow-size > 1 {

            filter: drop-shadow(0px sl 0px emoji-shadow) drop-shadow(sl 0px 0px emoji-shadow) drop-shadow(sr 0px 0px emoji-shadow) drop-shadow(0px sr 0px emoji-shadow); 

        }
    }

    body yt-img-shadow#author-photo.style-scope.yt-live-chat-text-message-renderer {
        contain-intrinsic-size: author-icon-size author-icon-size;
    }



    yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
        align-items: center;
        display: inline-flex;
        flex-direction: row;
        margin: 0;

        font-size: author-font-size-2;
        line-height: line-height-author-name; /* 120% */
    }

    yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer yt-live-chat-author-chip.yt-live-chat-paid-message-renderer {
        align-items: center;
        display: inline-flex;
        flex-direction: row;

        font-size: author-font-size-2;
        line-height: line-height-author-name; /* 120% */
    }



    #items yt-live-chat-text-message-renderer { // weak selector
    contain: layout style;
} //
    xfont-variant-east-asian=unset // ;
    if ruby-font { //
        xfont-variant-east-asian=ruby //
    } //
    if pw-font { //
        xfont-variant-east-asian=proportional-width //
    } //
    if ruby-font and pw-font { //
        xfont-variant-east-asian=ruby proportional-width //
    } //
    //


    yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
        overflow-y: scroll;
        padding-right: 0;
    }
    
    yt-live-chat-message-input-renderer {
        
        authorNameColor()
        
    }

    #items.style-scope.yt-live-chat-item-list-renderer {

        if chat-author-vline-enable {

            paid-msg-pl = msg-block-margin-2 + author-icon-size-diff + vline-gap-2-px 
            paid-msg-vline-padding = paid-msg-pl + msg-block-margin-1
            paid-msg-vline-ml = -120px - paid-msg-pl - author-icon-size-diff + padding-left-author-icon - 2 * vline-gap-1-px - 10px


            & > yt-live-chat-paid-message-renderer, & > yt-live-chat-membership-item-renderer, & > yt-live-chat-paid-sticker-renderer {

                --paid-msg-vline-ml: paid-msg-vline-ml;
                --paid-msg-vline-padding-l: paid-msg-vline-padding;
                --paid-msg-vline-padding-r: '%s' % (paid-msg-vline-padding * (msg-block-margin-rr + 1.0));
                    padding: 4px var(--paid-msg-vline-padding-r) 4px var(--paid-msg-vline-padding-l);
                position: relative !important;


                &::before {

                    makeBoxShadow()
                    margin-left:  var(--paid-msg-vline-ml);
                }

            }


            .yt-live-chat-paid-message-renderer, .yt-live-chat-membership-item-renderer, .yt-live-chat-paid-sticker-renderer {




            &#author-photo.style-scope.no-transition {
                    position:fixed;
                    left:0px;

                    align-self: center;
                    display: flex;
                    padding: 0;
                    margin: 0;
                    z-index: 1;

                    margin: 0 0 0 padding-left-author-icon;

                    &,
                    & img[src] {

                        height: author-icon-size;
                        object-fit: contain;
                        width: auto;
                    }

                }


                &#header {

                    padding: 8px 14px 8px 14px;
                }



                if fade-author-icon-enable {


                    &#author-photo {
                        opacity: author-icon-opacity;
                        if author-icon-transition && (author-icon-transition > 0) {
                            transition: 'opacity %s' % author-icon-transition;
                        }

                        &:hover {
                            opacity: 1;

                        }
                    }

                }



                &#menu.style-scope yt-icon-button {
                    position:fixed;
                    right:0;
                }
            }


        } else {



        }



        & > .yt-live-chat-item-list-renderer #card #header:has(#overlay-image) {

            min-height: 48px;


        }


        authorNameColor()
        
        & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #message.yt-live-chat-text-message-renderer {
            padding: 0px 0px;
            margin-left: padding-left-message;
            display: block;
            align-items: center;
            font-size: message-font-size;
            line-height: normal; /* 120% */
            min-height: msg-min-height;
            line-height: msg-line-height-d;
            --padding-v: 'calc( 4px + %s )' % ((msg-line-height-d - message-font-size)/2);
                padding-top: var(--padding-v) !important;
            padding-bottom: var(--padding-v) !important;
            /*
            margin-left:2px;
            margin-right:2px;
            */

            font-variant-east-asian: xfont-variant-east-asian;
            letter-spacing: 0px !important;

            line-break: auto;
            text-align:justify;
            word-break: break-word;
            white-space: pre-line;
            overflow-wrap: break-word;
            -ms-word-break: break-word;
            word-break: break-word;
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            hyphens: auto;
        }


        & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #message.yt-live-chat-text-message-renderer a {
            color: inherit !important;
            font-variant-east-asian: revert;
        }



        yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
            --author-chip-display: inline-block;
            --author-chip-mt: 4px;
            --author-chip-mb: 2px;
        }

        #author-photo.yt-live-chat-text-message-renderer {
            align-self: center;
            display: flex;
            padding: 0;
            margin-top: 0 
            margin-right: author-icon-mr !important; /* important for Kaitei */
            margin-bottom:0;
            margin-left: padding-left-author-icon;
            z-index: 1;
        }

        #author-photo.yt-live-chat-text-message-renderer img[src] {
            height: author-icon-size;
            object-fit: contain;
            width: auto;
        }

        img.yt-live-chat-author-badge-renderer {
            height: member-icon-font-size;
            width: auto;
        }


        #chat-badges.style-scope.yt-live-chat-author-chip {
            /*        display: inline;*/
            flex-direction: row;
            align-items: center;
            justify-items: center;
        }


        & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
            padding: 0;
            margin: 0;
            padding-right: 28px;
            margin-right: 4px;


            if fade-author-icon-enable {


                #author-photo.yt-live-chat-text-message-renderer {
                    opacity: author-icon-opacity;
                    if author-icon-transition > 0 {
                        transition: 'opacity %s' % author-icon-transition;
                    }
                }

                #author-photo.yt-live-chat-text-message-renderer:hover {
                    opacity: 1;
                }
            }
        }

        if loading-effect-ms > 0 {


            & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer::before {
                content: '';
                display: block;
                position: absolute;
                background: rgba(77, 77, 77, 0.5);
                animation: yt-live-chat-text-message-renderer-animation2 loading-effect-ms linear 0ms 1 normal forwards;

                pointer-events: none;
                touch-action: none;
                user-select: none;
                transform-origin: 50% 50%;

                width: 32px;
                bottom: 0;
                height: 16px;
                border-radius: 32px;
                z-index: 1;
            }
        }


        & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer:hover #content {
            opacity: 1.0 !important;
        }

        & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #content {
            transform-origin: 0 50%;
            opacity: final-message-opacity;

            if line-height-min > 0 and min-content-text-height > 0 {
                --line-height-min: line-height-min;
                --line-height-adjust: (min-content-text-height * 2px);
                    min-height: calc(var(--line-height-min) + var(--line-height-adjust));
                }
            }


        if message-opacity-ms > 0 {

            & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #content {
                animation: yt-live-chat-text-message-renderer-animation3 message-opacity-ms ease-in 0s 1 normal forwards;
            }
        }

        if chat-author-vline-enable {


            & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #content::before {

                makeBoxShadow()
                margin-left:  cb-ml;
            }
        }

        --vline-color-1001: cc(#696969);
        --vline-color-1002: cc(#a9a9a9);
        --vline-color-1003: cc(#dcdcdc);
        --vline-color-1004: cc(#2f4f4f);
        --vline-color-1005: cc(#556b2f);
        --vline-color-1006: cc(#6b8e23);
        --vline-color-1007: cc(#a0522d);
        --vline-color-1008: cc(#228b22);
        --vline-color-1009: cc(#800000);
        --vline-color-1010: cc(#191970);
        --vline-color-1011: cc(#483d8b);
        --vline-color-1012: cc(#3cb371);
        --vline-color-1013: cc(#bc8f8f);
        --vline-color-1014: cc(#663399);
        --vline-color-1015: cc(#008080);
        --vline-color-1016: cc(#b8860b);
        --vline-color-1017: cc(#bdb76b);
        --vline-color-1018: cc(#4682b4);
        --vline-color-1019: cc(#000080);
        --vline-color-1020: cc(#d2691e);
        --vline-color-1021: cc(#9acd32);
        --vline-color-1022: cc(#20b2aa);
        --vline-color-1023: cc(#cd5c5c);
        --vline-color-1024: cc(#32cd32);
        --vline-color-1025: cc(#8fbc8f);
        --vline-color-1026: cc(#8b008b);
        --vline-color-1027: cc(#b03060);
        --vline-color-1028: cc(#d2b48c);
        --vline-color-1029: cc(#66cdaa);
        --vline-color-1030: cc(#ff0000);
        --vline-color-1031: cc(#ffa500);
        --vline-color-1032: cc(#ffd700);
        --vline-color-1033: cc(#ffff00);
        --vline-color-1034: cc(#c71585);
        --vline-color-1035: cc(#0000cd);
        --vline-color-1036: cc(#7fff00);
        --vline-color-1037: cc(#00ff00);
        --vline-color-1038: cc(#ba55d3);
        --vline-color-1039: cc(#00fa9a);
        --vline-color-1040: cc(#4169e1);
        --vline-color-1041: cc(#e9967a);
        --vline-color-1042: cc(#dc143c);
        --vline-color-1043: cc(#00ffff);
        --vline-color-1044: cc(#00bfff);
        --vline-color-1045: cc(#f4a460);
        --vline-color-1046: cc(#9370db);
        --vline-color-1047: cc(#0000ff);
        --vline-color-1048: cc(#a020f0);
        --vline-color-1049: cc(#ff6347);
        --vline-color-1050: cc(#d8bfd8);
        --vline-color-1051: cc(#ff00ff);
        --vline-color-1052: cc(#db7093);
        --vline-color-1053: cc(#f0e68c);
        --vline-color-1054: cc(#6495ed);
        --vline-color-1055: cc(#dda0dd);
        --vline-color-1056: cc(#87ceeb);
        --vline-color-1057: cc(#ff1493);
        --vline-color-1058: cc(#afeeee);
        --vline-color-1059: cc(#ee82ee);
        --vline-color-1060: cc(#98fb98);
        --vline-color-1061: cc(#7fffd4);
        --vline-color-1062: cc(#ff69b4);
        --vline-color-1063: cc(#ffe4c4);
        --vline-color-1064: cc(#ffb6c1);



        --author-color-1-default: var(--vline-color-1064);

        & > .yt-live-chat-item-list-renderer {




            & {
                --author-color-1: var(--author-color-1-default);
                --author-color-2: var(--author-color-1-default);
            }

            gen1()
        }

    }



  @supports (contain: layout paint style) {

    /*
    contain: layout paint style;
    // #item-offset uses transform, it is buggy in Opera 93.0 with contain: layout & paint
    */

    #items.style-scope.yt-live-chat-item-list-renderer{
        contain: layout paint style;
    }

    #item-offset.style-scope.yt-live-chat-item-list-renderer {
        contain: style;
    }

    #item-scroller.style-scope.yt-live-chat-item-list-renderer {
        contain: size style;
    }

    #contents.style-scope.yt-live-chat-item-list-renderer,
    #chat.style-scope.yt-live-chat-renderer,
    img.style-scope.yt-img-shadow[width][height] {
        contain: size layout paint style;
    }

    .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label],
    .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label]>#container {
        contain: layout paint style;
    }


    yt-img-shadow#author-photo.style-scope {
        contain: layout paint style;
        content-visibility: auto;
        contain-intrinsic-size: 24px 24px;
    }

    yt-live-chat-text-message-renderer:not([author-is-owner]) #author-photo.style-scope.yt-live-chat-text-message-renderer,
    yt-live-chat-text-message-renderer:not([author-is-owner]) yt-live-chat-author-chip.style-scope.yt-live-chat-text-message-renderer {
        pointer-events: var(--tabview-msg-pointer-events);
    }

    yt-live-chat-text-message-renderer:not([author-is-owner]) span#message.style-scope.yt-live-chat-text-message-renderer>img.emoji.yt-formatted-string.style-scope.yt-live-chat-text-message-renderer {
        cursor: var(--tabview-msg-cursor);
    }


    yt-live-chat-text-message-renderer:not([author-is-owner]) span#message.style-scope.yt-live-chat-text-message-renderer,
    yt-live-chat-paid-message-renderer #message.yt-live-chat-paid-message-renderer,
    yt-live-chat-text-message-renderer:not([author-is-owner]) #timestamp.style-scope.yt-live-chat-text-message-renderer,
    yt-live-chat-membership-item-renderer #header-content.style-scope.yt-live-chat-membership-item-renderer,
    yt-live-chat-membership-item-renderer #timestamp.style-scope.yt-live-chat-membership-item-renderer,
    yt-live-chat-paid-message-renderer #header-content.yt-live-chat-paid-message-renderer,
    yt-live-chat-paid-message-renderer #timestamp.style-scope.yt-live-chat-paid-message-renderer,
    yt-live-chat-paid-sticker-renderer #content.style-scope.yt-live-chat-paid-sticker-renderer,
    yt-live-chat-paid-sticker-renderer #timestamp.style-scope.yt-live-chat-paid-sticker-renderer {
        cursor: var(--tabview-msg-cursor);
        pointer-events: var(--tabview-msg-pointer-events);
    }

    yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer,
    yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer,
    yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer,
    yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
        contain: layout style;
    }

    tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
        contain: layout paint style;
    }

}

  #item-offset.style-scope.yt-live-chat-item-list-renderer {

      position: relative !important;
      height: auto !important;

  }

  #item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
      position: static !important;
  }


      #sticker #img[width][height] {

          max-width: var( --sticker-width);
          max-height: var( --sticker-height);

      }


  if enable-smaller-super-chat {

      yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer #sticker.yt-live-chat-paid-sticker-renderer #img[width="144"][height="144"] {

          /* two row height */
          --sticker-width: 8em;
          --sticker-height: 8em; 

      }

  }

  html {
      --author-chip-child-order: author-chip-default-order;
  }

  #prepend-chat-badges {
      --author-chip-child-order: author-chip-pre-badge-order;
  }

  #author-name {
      --author-chip-child-order: author-chip-author-name-order;
  }
  #chat-badges {
      --author-chip-child-order: author-chip-member-badge-order;
  }

  yt-live-chat-author-chip.yt-live-chat-text-message-renderer > .yt-live-chat-author-chip {
      order: var(--author-chip-child-order);
  }


  if ( author-chip-member-badge-at > -1px ) {

      yt-live-chat-author-chip.yt-live-chat-text-message-renderer > #chat-badges.yt-live-chat-author-chip:not(:empty) {
           align-self: flex-start;
           padding-top: author-chip-member-badge-at;
           display: inline-block;
       }

   }

  if ( author-chip-member-badge-order < max(author-chip-pre-badge-order, author-chip-author-name-order, author-chip-default-order) ) {

      yt-live-chat-author-chip.yt-live-chat-text-message-renderer > yt-live-chat-author-badge-renderer.yt-live-chat-author-chip {
          margin: 0 0 0 0;
      }

      yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
          column-gap: 2px;
      }

  }

  if ( author-chip-member-badge-mw > 0px) {

      yt-live-chat-author-chip.yt-live-chat-text-message-renderer > #chat-badges {
          min-width: author-chip-member-badge-mw;
          text-align: center;
      }

      yt-live-chat-author-chip.yt-live-chat-text-message-renderer > #author-name.owner ~ #chat-badges:empty {
          min-width: initial;
      }

  }


  if ( author-chip-member-badge-mh > 0px) {

      #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
          min-height: author-chip-member-badge-mh;
      }

  }

}