/* Base Overrides */

body{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: [BG-base];
    color: [FG-base];
}

code, pre{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    word-wrap: normal;
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: [BG-panel] [BG-base];
}

code{
    background-color: [BG-panel];
}

table{
    border: 1px solid [AC-trim];
}
table th,td{
    padding: 2pt;
}
thead{
    background-color: [BG-panel2];
}
input, button, textarea, select{
    background-color: [BG-base];
    color: [FG-base];
    padding: [DM-margin-q];
    border: 1pt solid [BG-panel2];
}
select, ::picker(select) {
    appearance: base-select;
    background-color: [BG-base];
    color: [FG-base];
}
select option:hover {
    background-color: [BG-panel2];
}

/* Libraries */

.hljs-addition, .hljs-attribute, .hljs-built_in, .hljs-bullet, .hljs-name, .hljs-string, .hljs-symbol, .hljs-template-tag, .hljs-template-variable, .hljs-title, .hljs-type, .hljs-variable {
    color: [AC-trim];
}

.hljs {
    background: [BG-panel];
}

/* Page Structure */

.div-structure-page-container{
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}

.div-structure-header{
    padding: [DM-margin-q] [DM-margin-h];
    background-color: [BG-panel];
    button, select {
        height: 24pt;
        font-size: 11pt;
        line-height: 12pt;
        border: 1pt solid [AC-trim];
        border-radius: [DM-margin-q];
        padding: [DM-margin-q];
    }
    label {
        font-size: 13pt;
        margin-top: 16pt;
    }
}

.div-structure-body{
    display: grid;
    transition: grid-template-columns 0.3s ease-in-out;
}

.div-structure-left-inset{
    display: grid;
    grid-template-rows: 1fr;
    margin: [DM-margin] 0 [DM-margin] [DM-margin];
}

.div-structure-right-inset{
    display: grid;
    grid-template-rows: 1fr;
    margin: [DM-margin];
}

.div-structure-left-index {
    display: grid;
    grid-template-rows: auto 1fr;
}

.div-structure-right-chat{
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.div-structure-index-list{
    background-color: [BG-panel];
    padding: [DM-margin];
}

.div-structure-chat-container{
    margin: 0 [DM-margin] [DM-margin] [DM-margin];
    background-color: [BG-base];
    border: 2pt solid [BG-base];
}

.div-index-container-scroll{
    height: 0;
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: [BG-panel] [BG-base];
    display: grid;
    grid-template-rows: 1fr;
    background-color: [BG-base];
}

.div-chat-container-scroll{
    height: 0;
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: [BG-panel] [BG-base];
    display: grid;
    grid-template-rows: 1fr auto;
}

.div-structure-index-options{
    background-color: [BG-panel];
    margin-bottom: [DM-margin];
    padding: [DM-margin-q] [DM-margin-h];
    button, select {
        height: 18pt;
        font-size: 11pt;
        line-height: 9pt;
        border: 1pt solid [AC-trim];
        border-radius: [DM-margin-q];
        padding: [DM-margin-q];
    }
}

#id-div-list{
    margin: [DM-margin-q] 0 [DM-margin-q] [DM-margin-q];
}

.div-structure-body-left{
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
}

.div-structure-body-right{
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
}

.div-chat-title-bar{
    padding: [DM-margin];
    background-color: [BG-panel];
}

.div-structure-right-inset{
    display: grid;
    grid-template-rows: 1fr;
    margin: [DM-margin];
    background-color: [BG-panel];
}

.div-chat-container{
    padding: [DM-margin-h];
    min-width: 0;
}

.div-chat-prompt-inset{
    margin: 0 [DM-margin] [DM-margin] [DM-margin];
}

#id-prompt{
	box-sizing: border-box;
	min-width: 100%;
	padding: [DM-margin-h];
	margin-bottom: [DM-margin-h];
}

#btn-send{
    float: right;
    min-width: 20%;
}

.div-index-item {
    padding: [DM-margin-q];
    border: 1px solid [AC-trim-l];
    margin-bottom: [DM-margin-q];
}

.div-index-item-selected {
    background-color: [BG-panel2];
}

.hr-chat-response-divider{
    background-color: [BG-panel2];
    border: none;
    padding: 0;
    margin: [DM-margin-q] 0;
}

.div-structure-footer{
    background-color: [BG-panel];
    padding: [DM-margin-q] [DM-margin-h];
}

.div-structure-body-conv-open {
    grid-template-columns: 1fr 2fr 0fr;
}

.div-structure-body-conv-closed {
    grid-template-columns: 0fr 1fr 0fr;
}

@media screen and (max-width: 780px) {

    .div-structure-body-conv-open {
        grid-template-columns: 1fr 0fr 0fr;
    }

    .div-structure-body-conv-closed {
        grid-template-columns: 0fr 1fr 0fr;
    }

    .div-structure-index-options {
        margin: 0;
    }

    .div-structure-left-inset {
        margin: 0;
    }

    .div-structure-right-inset {
        margin: 0;
    }

    .div-structure-index-list {
        padding: 0 [DM-margin-h];
    }

}

@media screen and (max-width: 499px) {
	body {
		font-size: 85%;
	}
}