:root{
    --bl:60px;--bs:calc(var(--bl) - 20px);--bm:calc(var(--bl) + 20px);--bx:calc(var(--bl) + 40px);--bxl:calc(var(--bl) * 2);
    --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;
    --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{&[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);}&[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);}}
html,body{overscroll-behavior-y:contain;}
@keyframes spin{0%{transform:rotateZ(0deg);}100%{transform:rotateZ(-360deg);}}
*{box-sizing:border-box;display:block;}
a{color:var(--l1);}
app{
    height:100vh;
    width:100vw;
}
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{
    align-items:center;color:var(--d1);display:flex;flex-direction:row;height:var(--bl);justify-content:space-between;line-height:var(--bl);padding:0 0 0 10px;position:fixed;text-transform:capitalize;top:0;width:100%;z-index:9999;
    &[conn]{background-color:var(--hex-locations);}
    &[you]{background:var(--hex-home);}
}
body{
    background:var(--d2);
    bottom:0;
    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;
    left:0;    
    position:fixed;
    right:0;
    top:0;
    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;}}}}
    svg{pointer-events:none;user-select:none;}
}
chat{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
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);bottom:0;border-top-style:solid;grid-area:menu;left:0;margin:0;padding:0;position:fixed;transition:color 100ms ease-in-out;>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;width:100%;overflow:hidden;
    >*{height:100%;width:100%;}
    chat{
        display:grid;grid-template-areas:'room''msg';grid-template-rows:auto var(--bl);height:100%;margin-bottom:4px;
        >*{width:100%;}
        message{
            display:flex;flex-direction:row;grid-area:msg;height:var(--bl);position:fixed;bottom:83px;
            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:space-evenly;width:100%;>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;max-width:100vw;min-width:100vw;width:100vw;
                            m{
                                display:flex;flex-direction:row;margin:10px 10px 15px;max-width:calc(100% - 15px);width:calc(100% - 15px);overflow-wrap:anywhere;
                                u{
                                    background:var(--d2);border:1px solid var(--d10);border-radius:110px;box-shadow:2px 2px var(--d1);color:var(--d10);flex-grow:0;font-size:10pt;height:40px;min-height:40px;min-width:40px;max-height:40px;max-width:40px;overflow:hidden;padding:0 10px;position:relative;line-height:40px;text-align:center;text-decoration:none;width:40px;z-index:9999;
                                    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 10px;max-height:max-content;min-height:var(--bs);position:relative;width:max-content;t{background:var(--d4);border-radius:10px;box-shadow:2px 2px var(--d1);box-sizing:border-box;font-size:10pt;position:relative;width:100%;span{line-height:16pt;max-width:100%;overflow-x:hidden;width:100%;padding:8px 10px;min-height:40px;}}}
                                &[me]{flex-direction:row-reverse;text-align:right;u{margin:0 5px 0 0;}}
                            }
                        }
                    }
                }
                &[active]{height:100%;summary{background:var(--room-all);}}
            }
        }
    }
}