body{
    padding:0pt;
    margin:0pt;
}

#login-modal{
    position:absolute;
    padding:10pt;
    background-color:lightgray;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

#login-modal label{
    font-size:60%;
}

#login-modal input[type="button"]{
    width:100%;
    text-align: center;
}

page-wrapper{
    position:fixed;
    left:0pt;
    top:0pt;
    height:100%;
    width:100%;
    display:flex;
    flex-direction: row;
    max-height:98vh;

}

sidebar{
    display:flex;
    flex-direction: column;
    flex:0;
    width:200pt;
    background-color:#3f3f3f;
    row-gap:5pt;
    padding:5pt;
    height:100%;
}

sidebar button{
    width:100%;
    flex:0;
}

sidebar leads button{
    margin-bottom:5pt;
}

page{
    flex:1;
    overflow-y:auto;
    position:relative;
    display:flex;
    padding:20pt 10pt;
    flex-direction:column;
}

chat-wrapper{
    display: flex;
    flex-direction: column;
    flex: 1;
    row-gap:2pt;
}
chat-meta{
    flex:0;
}
chat-meta h2{
    margin: 0pt;
    text-shadow: 2px 2px 2px #55555590;
    font-family: sans-serif;
    flex:1;
}
chat-meta-toolbar{
    flex:1;
    text-align:right;
}

chat-dialog{
    flex:1;
    display:flex;
    flex-direction:column;
}

chat-meta{
    background-color: gray;
    color:white;
    border: 1pt solid gray;
    padding: 5pt;
    border-radius: 5pt;
    display:flex;
}

chat-dialog{
    background-color: #eeeeee50;
    border: 1pt solid gray;
    padding: 5pt;
    border-radius: 5pt;
}

chat-messages{
    flex:1;
    padding:5pt;
}

message,code{
    display:flex;
    margin-top:1.5rem;
    margin-bottom:1.5rem;
    padding:15pt;;
    border:1pt solid blue;
    border-radius:4pt;
    position:relative;
    white-space:pre-wrap;
}

code-wrapper{
    position:relative;
}

code{
    background-color:#333;
    color:white;
    position:relative;
}

message[data-source="user"]{
    margin-left:25%;
}

:is(message)[data-source="bot"]{
    margin-right:25%;
}

message[data-source="user"]::before{
    content: "User";
    position: absolute;
    right: 0pt;
    top: -1.25rem;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 70%;
    font-weight: bolder;
    color: #333;
}

:is(message,code)[data-source="bot"]::before{
    content: "Bot";
    position: absolute;
    left: 0pt;
    top: -1.25rem;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 70%;
    font-weight: bolder;
    color: #333;
}

code-wrapper toolbar{
    display:flex;
    column-gap:2pt;
    position:absolute;
    bottom:2pt;
    right:2pt;
}

#preview-pane:not([src*="/preview/"]){display:none;}
#preview-pane[src*="/preview/"]{width:100%;height:100vh;}