:root{
    --bl:60px;
    --bs:calc(var(--bl) - 20px);
    --bm:calc(var(--bl) + 20px);
    --bx:calc(var(--bl) + 40px);
    --bxl:calc(var(--bl) * 2);
    /* Dark */ --dark1:rgb(0,0,0);--dark2:rgb(12,12,12);--dark3:rgb(18,18,18);--dark4:rgb(24,24,24);--dark5:rgb(30,30,30);--dark6:rgb(36,36,36);--dark7:rgb(42,42,42);--dark8:rgb(48,48,48);--dark9:rgb(54,54,54);--dark10:rgb(60,60,60);--dark11:rgb(66,66,66);--dark12:rgb(72,72,72);--dark13:rgb(78,78,78);--dark14:rgb(84,84,84);--dark15:rgb(90,90,90);--dark16:rgb(96,96,96);
    --hex-home:#49B100;
    --hex-properties:#F6FF00;
    --hex-locations:#FF7700;
    --hex-settings:#FFFFFF;
    --hex-staff:#0051FF;
    --room-all:#0040ff;
    --user-me:#ffbb00;
    /* Light */ --light1:rgb(255,255,255);--light2:rgb(245,245,245);--light3:rgb(235,235,235);--light4:rgb(225,225,225);--light5:rgb(215,215,215);--light6:rgb(205,205,205);--light7:rgb(195,195,195);--light8:rgb(185,185,185);--light9:rgb(175,175,175);--light10:rgb(165,165,165);--light11:rgb(155,155,155);--light12:rgb(145,145,145);--light13:rgb(135,135,135);--light14:rgb(125,125,125);--light15:rgb(115,115,115);--light16:rgb(105,105,105);   
}
html{
    /* Dark Mode */ &[theme="0"]{
        --d1:var(--dark1);
        --d2:var(--dark2);
        --d3:var(--dark3);
        --d4:var(--dark4);
        --d5:var(--dark5);
        --d6:var(--dark6);
        --d7:var(--dark7);
        --d8:var(--dark8);
        --d9:var(--dark9);
        --d10:var(--dark10);
        --d11:var(--dark11);
        --d12:var(--dark12);
        --d13:var(--dark13);
        --d14:var(--dark14);
        --d15:var(--dark15);
        --d16:var(--dark16);
        --l1:var(--light1);
        --l2:var(--light2);
        --l3:var(--light3);
        --l4:var(--light4);
        --l5:var(--light5);
        --l6:var(--light6);
        --l7:var(--light7);
        --l8:var(--light8);
        --l9:var(--light9);
        --l10:var(--light10);
        --l11:var(--light11);
        --l12:var(--light12);
        --l13:var(--light13);
        --l14:var(--light14);
        --l15:var(--light15);
        --l16:var(--light16);
    }
    /* Light Mode */ &[theme="1"]{
        --d1:var(--light1);
        --d2:var(--light2);
        --d3:var(--light3);
        --d4:var(--light4);
        --d5:var(--light5);
        --d6:var(--light6);
        --d7:var(--light7);
        --d8:var(--light8);
        --d9:var(--light9);
        --d10:var(--light10);
        --d11:var(--light11);
        --d12:var(--light12);
        --d13:var(--light13);
        --d14:var(--light14);
        --d15:var(--light15);
        --d16:var(--light16);
        --l1:var(--dark1);
        --l2:var(--dark2);
        --l3:var(--dark3);
        --l4:var(--dark4);
        --l5:var(--dark5);
        --l6:var(--dark6);
        --l7:var(--dark7);
        --l8:var(--dark8);
        --l9:var(--dark9);
        --l10:var(--dark10);
        --l11:var(--dark11);
        --l12:var(--dark12);
        --l13:var(--dark13);
        --l14:var(--dark14);
        --l15:var(--dark15);
        --l16:var(--dark16);
    }
}
@keyframes spin{0%{transform:rotateZ(0deg);}100%{transform:rotateZ(-360deg);}}
*{box-sizing:border-box;display:block;}
a{color:var(--l1);}
auth{
    display:flex;
    flex-direction:column;
    z-index:999;
    align-items:center;
    position:fixed;
    width:100vw;
    background:var(--d2);
    height:100vh;
    justify-content:center;
    form{
        height:40vw;
        width:50vw;
        button{
            background:var(--d5);
            border-radius:10px;
            color:var(--l16);
            height:40px;
            line-height:40px;
            margin-top:20px;
            width:100%;

        }
        label{
            width:100%;
            input{
                background:var(--d2);
                border:1px solid var(--l16);
                border-radius:10px;
                color:var(--l9);
                height:var(--bs);
                outline:none;
                padding:0 10px;
                width:100%;
                &[error]{
                    border:1px solid red;
                    background:rgba(45, 0, 0);
                }
            }
            span{
                color:var(--l12);
                display:none;
                font-size:10pt;
                height:30px;
                line-height:30px;
                width:100%;
            }
            &:first-child{margin-bottom:20px;}
        }
    }
}
banner{
    padding:0 0 0 10px;
    position:fixed;
    top:0;
    width:100%;
    line-height:var(--bl);
    height:var(--bl);
    color:var(--d1);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    z-index:9999;
    &[you]{background:var(--hex-home);}
}
body{
    background:var(--d2);
    color:var(--l1);
    display:grid;
    grid-template-rows:calc(100vh - var(--bm)) var(--bm );
    grid-template-areas:'view''menu';
    font-family:Arial;height:100vh;margin:0;overflow:hidden;width:100vw;
    menu>inner button[logout]{display:none;}
    &[install]{
        menu>inner>button[logout]{display:flex;}
    }
}
button{
    background:transparent;
    border:0;
    margin:0;
    outline:0;
    padding:0;
    user-select:none;
    &[close]{
        height:var(--bl);
        margin:0;
        padding:0;
        position:relative;
        width:var(--bl);
        >i{
            align-items:center;
            display:flex;
            flex-direction:column;
            height:100%;
            justify-content:center;
            pointer-events:none;
            width:100%;
            >i{
                background:var(--d1);
                height:2px;
                pointer-events:none;
                position:absolute;
                width:18px;
                &:first-child{
                    rotate:-45deg;
                }
                &:last-child{
                    rotate:45deg;
                    
                }
            }
        }
    }
}
loader{
    align-self:center;
    animation:spin calc(167ms * 10) linear reverse infinite;
    border:4px dotted var(--l1);
    border-radius:90px;
    display:block;
    overflow:hidden;
    position:absolute;
    left:calc(50vw - 30px);
    top:calc(50vh - 30px);
    z-index:99999;
}
menu{
    background:var(--d2);
    grid-area:menu;
    >inner{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        fill:var(--l9);
        button{
            align-items:center;
            display:flex;
            flex-direction:column;
            height:var(--bl);
            justify-content:center;
            width:calc(100vw / 8);
            &[close]>i>i{background:var(--l9);}
        }
    }
}
view{
    background:var(--d3);
    grid-area:view;
    height:calc(100vh - var(--bm));
    width:100%;
    >*{height:100%;width:100%;}
    chat{
        display:grid;
        grid-template-areas:'room''msg';
        grid-template-rows:calc(calc(100% - 4px) - var(--bl)) var(--bl);
        height:100%;
        margin-bottom:4px;
        >*{width:100%;}
        message{
            display:flex;
            flex-direction:row;
            grid-area:msg;
            height:var(--bl);
            button{
                flex-grow:0;
                height:var(--bl);
                padding:20px 10px;
                width:var(--bs);
                >i{
                    align-items:center;
                    display:flex;
                    flex-direction:column;
                    pointer-events:none;
                    height:100%;
                    justify-content:center;
                    width:100%;
                    justify-content:space-evenly;
                    >i{
                        background:var(--l9);
                        height:2px;
                        width:2px;
                    }
                }
            }
            label{
                flex-grow:1;
                padding:10px 10px 10px 0;
                width:50%;
                input{
                    background:transparent;
                    border:1px solid var(--d10);
                    border-radius:5px;
                    color:var(--l9);
                    font-size:12pt;
                    height:var(--bs);
                    outline:0;
                    padding:0 10px;
                    width:100%;
                    &::placeholder{
                        color:var(--l16);
                    }
                    &[to='all']{
                        border:1px solid var(--room-all);
                    }
                }

            }
        }
        rooms{
            grid-area:room;
            height:100%;
            room{
                width:100%;
                height:50px;
                line-height:50px;
                details{
                    summary{
                        background:var(--d6);
                        padding:0 10px;
                    }
                    &[open]{
                        display:flex;
                        flex-direction:column;
                        height:100%;
                        messages{
                            flex-grow:1;
                            height:calc(100vh - 199px);
                            overflow-x:hidden;
                            overflow-y:auto;
                            width:100%;
                            m{
                                display:flex;
                                flex-direction:row;
                                margin:10px 10px 30px;
                                u{
                                    background:var(--d1);
                                    border-radius:90px;
                                    flex-grow:0;
                                    overflow:hidden;
                                    width:var(--bs);
                                    img{
                                        display:flex;
                                        flex-direction:column;
                                        height:var(--bs);
                                        line-height:var(--bs);
                                        max-height:var(--bs);
                                        max-width:var(--bs);
                                        min-height:var(--bs);
                                        min-width:var(--bs);
                                        position:relative;
                                        text-align:center;
                                        width:var(--bs);
                                        &::before{
                                            background:var(--d1);
                                            color:var(--l9);
                                            content:'?';
                                            display:block;
                                            height:var(--bs);
                                            position:absolute;
                                            width:var(--bs);
                                        }
                                    }
                                }
                                w{
                                    flex-grow:0;
                                    margin:0 0 0 10px;
                                    max-height:max-content;
                                    min-height:var(--bs);
                                    position:relative;
                                    width:max-content;
                                    t{
                                        background:var(--d8);
                                        border-radius:10px;
                                        padding:0 10px;
                                        position:relative;
                                        box-sizing:border-box;
                                        width:100%;
                                        d{
                                            display:inline;
                                            font-size:10px;
                                            height:20px;
                                            line-height:20px;
                                            margin-top:3px;
                                            position:absolute;
                                            right:10px;
                                        }
                                        span {
                                            line-height:20pt;
                                            max-width:100%;
                                            overflow-x:hidden;
                                            width:100%;
                                            padding:10px;
                                        }
                                    }
                                }
                                &[me]{                                
                                    flex-direction:row-reverse;
                                    d{
                                        left:10px;
                                        right:0;
                                    }
                                    >w{
                                        margin:0 10px 0 0;
                                    }
                                }
                            }
                        }
                    }
                }
                &[active]{
                    height:100%;
                    summary{
                        background:var(--room-all);
                    }
                }
            }
        }
    }
}



menu{
    background:var(--d2);
    bottom:0;
    border-top-style:solid;
    left:0;
    margin:0;
    padding:0;
    position:fixed;
    transition:color 100ms ease-in-out;

}


staffy{
    align-items:center;
    display:flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    width:100vw;
    menu{
        inner{
            align-items:center;
            display:flex;
            flex-direction:row;
            justify-content:space-around;
            padding:0 10px;
            width:100%;
            button{
                align-items:center;
                background:transparent;
                border:0;
                display:flex;
                flex-direction:column;
                height:var(--bl);
                icon{align-items:center;display:flex;flex-direction:column;fill:var(--l2);justify-content:center;padding:0;pointer-events:none;width:var(--bs);>svg{height:26px;pointer-events:none;transition:fill 100ms ease-in-out,scale 100ms ease-in-out;}}
                name{color:var(--l2);margin-top:10px;pointer-events:none;}

            }
        }
    }
    view{
        height:calc(100vh - 100px);
        overflow-x:auto;
        overflow-y:hidden;
        width:100%;
        >*{
            display:none;
            background:var(--d4);
            height:max-content;
            max-height:100%;
            min-height:100%;
            overflow-x:hidden;
            overflow-y:auto;
            width:100vw;
        }
    }
    &[v=properties]>view>properties{display:block;}
    &[v=staff]{
        >view{
            >staff{
                display:block;
                padding:0;
                inner{
                    display:grid;
                    grid-template-areas:'fl''li';
                    grid-template-columns:100%;
                    grid-template-rows:var(--bm) auto;
                    position:sticky;
                    top:0;
                    filter{
                        background:var(--d5);
                        position:sticky;
                        top:0;
                        width:100%;
                        height:var(--bm);
                        display:flex;
                        flex-direction:row;
                        z-index:99999;
                    }
                    list{
                        height:max-content;
                        max-height:calc(100% - var(--bm));
                        position:sticky;
                        top:var(--bm);
                        top{
                            background:var(--d6);
                            position:sticky;
                            top:0;

                        }
                    }
                }
            }
        }
    }
    &[v=home]>view>home{
        display:flex;
        flex-direction:column;
        height:100%;
        overflow:hidden;
        width:100%;
        message{
            align-items:center;
            display:flex;
            flex-direction:row;
            height:var(--bl);
            justify-content:flex-end;
            padding:10px 10px 10px 0;
            width:100%;
            }
            form{
                align-items:center;
                display:flex;
                flex-direction:row;
                justify-content:flex-start;
                flex-grow:1;
                width:80%;
                label{
                    flex-grow:1;
                    width:50%;
                    input{
                        background:transparent;
                        border:1px solid var(--d10);
                        border-radius:5px;
                        color:var(--l2);
                        font-size:12pt;
                        height:var(--bs);
                        outline:0;
                        padding:0 10px;
                        width:100%;
                        ::placeholder{
                            color:var(--l9);
                        }
                    }
                }
            }
        }
        rooms{
            flex-grow:1;
            height:60%;
            room{

            }
        }
    }
    &[v=locations]>view>locations{display:block;}
    &[v=settings]{
        >view{
            >settings{
                display:block;
                padding:20px;
                choice{
                    >*{pointer-events:none;}
                    &[theme='1']>*:first-child{display:none;}
                    &[theme='0']>*:last-child{display:none;}
                }
            }
        }
    }
}