@use "settings" as *;
@use "common" as *;

@mixin aichar-color($mode){
    .aichat>legend{border-bottom-color : map-deep-get($color, $mode, "fore")}
}
.anp{

    &[data-forced-gui-mode=default][data-gui-mode=default]{
        @include aichar-color(light);
    }
    @each $key in (dark, light){
        &[data-forced-gui-mode=#{$key}],&[data-forced-gui-mode=default][data-gui-mode=#{$key}]{
            @include aichar-color($key);
        }
    }

    .aichat{

        position : absolute;
        top : 0em;
        left : 0em;
        width : 100%;
        height : 100%;
        border : none;
        box-sizing : border-box;

        &>legend{
            padding-bottom : .1em;
            border-bottom-width : .1em;
            border-bottom-style : solid;
        }

        fieldset{
            position : relative;
            border : none;
        }
        legend{font-weight : 900;}
        form{
            display : flex;
            flex-direction : row;
            position : absolute;
            left : 0em;
            bottom : 0em;
            width : 100%;
            height : 5em;
            box-sizing : border-box;
            &>span{flex-grow : 0;}
            &>button{flex-grow : 0;}
        }
        .messages{
            position : absolute;
            top : 0em;
            left : 0em;
            bottom : 5em;
            width : 100%;
            box-sizing : border-box;
            overflow : auto;
        }

        .message{
            clear : both;
            margin : 2em 0em;
            legend{
                float : left;
                width : 100%;
                padding : 0em;
                margin-bottom : .75em;
            }
            nav{
                position : absolute;
                top : 0em;
                right : 0em;
            }
            pre{
                width : 100%;
                white-space : pre-wrap;
            }
        }

        .message-box{display : none;}
        .view.buttons button{
            opacity : .5;
            [data-icon]::before{margin : 0em;}
            [data-i18n]{display : none;}
        }
        [data-mode=html] .html-content, 
        [data-mode=raw_html] .raw-html-content, 
        [data-mode=md] .md-content{display : block;}
        [data-mode=html] button[data-i18n=html], 
        [data-mode=raw_html] button[data-i18n=raw_html], 
        [data-mode=md] button[data-i18n=md]{opacity : 1;}

        .data{
            position : absolute;
            right : 0em;
            bottom : 0em;
            margin : 0em;
            padding : 0em;
            list-style-type : none;
            opacity : .85;
            li{
                display : inline-block;
                margin : 0em .5em;
                font-size : .75em;
                [data-i18n]{display : none;}
            }
            [data-name=date_from]{display : none;}
        }

    }
    
}