:root{
        --g-color-text-ui: #747474;
        --g-color-msg-block-recv: #fff;
        --g-color-msg-block-send: #92ED6A;
    }

    /* 聊天界面-基础 */
    ul.chat-container{
        --chat-container-padding-v: 1.5em;
        --chat-container-padding-h: 1em;

        max-width: 64em;
        margin: 1em auto;

        position: relative;
        box-sizing: border-box;

        padding: var(--chat-container-padding-v) var(--chat-container-padding-h);
        background-color: #EDEDED;
        
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    ul.chat-container>li{
        display: block;
        position: relative;
    }

    /* 聊天界面-名称 */
    ul.chat-container[name]{
        --chat-container-header-padding-v-val-em: 1;
        --chat-container-header-padding-v: calc(var(--chat-container-header-padding-v-val-em) * 1em);
        --chat-container-header-font-size-val-em: 1.2;
        padding-top: calc((2 * var(--chat-container-header-padding-v-val-em) + 1) * var(--chat-container-header-font-size-val-em) * 1em + var(--chat-container-padding-v));
    }
    ul.chat-container[name]::before{
        content:attr(name);
        display: block;
        
        position: absolute;
        top: 0;

        width: 100%;

        text-align: center;
        font-size: calc(var(--chat-container-header-font-size-val-em) * 1em);
        font-weight: bold;

        padding: var(--chat-container-header-padding-v) 0;

        background-color: transparent;
    }

    /* 聊天消息 */
    ul.chat-container>li.chat-msg{
        --chat-msg-name-spacing: .2em;

        --chat-msg-tail-width: .5em;
        --chat-msg-tail-height: .5em;

        --chat-msg-padding-v: .5em;

        --chat-msg-padding-offset-bottom: 1.2;

        max-width: min(max(60%, 32em), 85%);
        padding: var(--chat-msg-padding-v) 1em calc(var(--chat-msg-padding-v) * var(--chat-msg-padding-offset-bottom));
        margin: .5em 0;
        border-radius: .2em;

    }
    ul.chat-container>li.chat-msg.chat-msg-recv{
        margin-right: auto;
        margin-left: var(--chat-msg-tail-width);
        border-top-left-radius: 0;
        background-color: var(--g-color-msg-block-recv);
    }
    ul.chat-container>li.chat-msg.chat-msg-send{
        margin-left: auto;
        margin-right: var(--chat-msg-tail-width);
        border-top-right-radius: 0;
        background-color: var(--g-color-msg-block-send);
    }

    /* 聊天消息-小箭头 */
    ul.chat-container>li.chat-msg::before{
        content: "";
        display: block;
        width: var(--chat-msg-tail-width);
        height: var(--chat-msg-tail-height);
        position: absolute;
        top:0;
    }
    ul.chat-container>li.chat-msg.chat-msg-recv::before{
        left: calc(-1 * var(--chat-msg-tail-width) + 1px);
        clip-path: polygon(0 0, 100% 100%, 100% 0%);
        background-color: var(--g-color-msg-block-recv);
    }
    ul.chat-container>li.chat-msg.chat-msg-send::before{
        right: calc(-1 * var(--chat-msg-tail-width) + 1px);
        clip-path: polygon(0 0, 0% 100%, 100% 0%);
        background-color: var(--g-color-msg-block-send);
    }

    /* 聊天消息-显示名称 */
    ul.chat-container>li.chat-msg[name]{
        --chat-msg-name-position-top: -1.5em;
        margin-top: 1.3em;
    }
    ul.chat-container>li.chat-msg[name]::after{
        content: attr(name);
        font-size: .9em;
        position: absolute;
        top: var(--chat-msg-name-position-top);
        color: var(--g-color-text-ui);
    }
    ul.chat-container>li.chat-msg.chat-msg-recv[name]::after{
        left: var(--chat-msg-name-spacing);
    }
    ul.chat-container>li.chat-msg.chat-msg-send[name]::after{
        right: var(--chat-msg-name-spacing);
    }
    
    /* 聊天消息-头像 */
    ul.chat-container:has(li.chat-msg>avatar){
        --chat-msg-avatar-size: 2.5em;
        --chat-msg-avatar-spacing: .5em;

        --chat-container-padding-has-avatar: calc(var(--chat-container-padding-h) + var(--chat-msg-avatar-size) + var(--chat-msg-avatar-spacing));

        padding-left: var(--chat-container-padding-has-avatar);
        padding-right: var(--chat-container-padding-has-avatar);
    }
    ul.chat-container>li.chat-msg>avatar:not(:first-of-type){
        /* 除了第一个头像以外不显示 */
        display: none;
    }
    ul.chat-container>li.chat-msg>avatar{
        --chat-msg-avatar-position: calc(-1 * (var(--chat-msg-avatar-size) + var(--chat-msg-avatar-spacing) + var(--chat-msg-tail-width)));

        display: block;
        position: absolute;
        top: min(0px, calc(calc(((1 + var(--chat-msg-padding-offset-bottom)) / 2) * var(--chat-msg-padding-v) + .5em) - (var(--chat-msg-avatar-size) / 2)));
        width: var(--chat-msg-avatar-size);
        height: var(--chat-msg-avatar-size);
        border-radius: 10%;

        background-color: #747474;
        overflow: hidden;
    }
    ul.chat-container>li.chat-msg.chat-msg-recv>avatar{
        left: var(--chat-msg-avatar-position);
    }
    ul.chat-container>li.chat-msg.chat-msg-send>avatar{
        right: var(--chat-msg-avatar-position);
    }
    
    /* 聊天消息-头像-带名字的消息 */
    ul.chat-container>li.chat-msg[name]>avatar{
        top: calc(-1 * (var(--chat-msg-avatar-size) / 2));
    }
    
    /* 聊天消息-头像-图片 */
    ul.chat-container>li.chat-msg>avatar:has(>img){
        background-color: transparent;
        background-image: none;
    }
    ul.chat-container>li.chat-msg>avatar>:is(>:not(img), >img:not(:first-of-type)){
        display: none;
    }
    ul.chat-container>li.chat-msg>avatar>img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
    }

    /* 系统消息 */
    ul.chat-container>li.chat-inf{
        max-width: min(max(50%, 16em), 80%);
        font-size: .9em;
        text-align: center;
        color: var(--g-color-text-ui);
        margin: 1em;
    }
    ul.chat-container>li.chat-inf.chat-inf-syst{
        background-color: rgba(16,16,16,.1);
        padding: .12em 1.5em .2em;
        border-radius: .8em;
    }