/**
 * the styling of the simplechat web frontend
 * by Humans for All
 */

#fullbody {
    height: 98vh;
}

.heading {
    background: linear-gradient(135deg, lightblue 0%, white 100%);
}

.session-selected {
    background-color: lightblue;
}

.role-system {
    background-color: lightblue;
}
.role-user {
    background-color: lightgray;
}
.role-assistant {
    text-align: initial;
}
.role-tool {
    /* background-color: cornsilk; */
    background-color: lightyellow;
}
.role-trim {
    background-color: lightpink;
}

#UsageNote {
    margin: 0.0vmin;
}

.chat-message {
    border-style: solid;
    border-color: grey;
    border-width: thin;
    border-radius: 2px;
    display: flex;
    margin-bottom: 2vh;
    /* box-shadow: 1px 1px 4px lightslategray; */
}
.chat-message:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chat-message-role {
    border-style: dotted;
    border-color: black;
    border-width: thin;
    border-radius: 4px;
    writing-mode: vertical-lr;
    padding-inline: 1vmin;
}
.chat-message-reasoning {
    border-block-style: dashed;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.chat-message-toolcall {
    border-style: solid;
    border-color: grey;
    border-width: thin;
    border-radius: 2px;
}
.chat-message-toolcall-arg {
    border-style: solid;
    border-color: grey;
    border-width: thin;
    border-radius: 2px;
}
.chat-message-content {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.chat-message-content-live {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.chat-message-img {
    max-width: fit-content;
    max-height: 20vh;
}
.user-in-img {
    max-width: 20vmin;
    max-height: 20vmin;
}


.gridx2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom-style: dotted;
    border-bottom-width: thin;
    border-bottom-color: lightblue;
}

.flex-grow {
    flex-grow: 1;
}
.flex-nogrow {
    flex-grow: 0;
}
.float-right {
    float: right;
}

#chat-div {
    overflow-y: auto;
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 40vh;
}
#user-in[data-role="TOOL.TEMP"] {
    background-color: lightyellow;
}
button {
    padding-inline: 2vmin;
}

.sameline {
    display: flex;
    flex-direction: row;
}
.samecolumn {
    display: flex;
    flex-direction: column;
}

.ul1 {
    padding-inline-start: 2vw;
}
.ul2 {
    padding-inline-start: 2vw;
}


.DivObjPropsInfoL0 {
    margin: 0%;
}
[class^=SectionObjPropsInfoL] {
    margin-left: 2vmin;
}


* {
    margin: 0.6vmin;
}


@media print {


    #fullbody {
        height: auto;
    }

    .chat-message {
        border-style: solid;
        border-color: grey;
        border-width: thin;
        border-radius: 2px;
        display:inherit;
    }
    .chat-message-role {
        border-style: dotted;
        border-color: black;
        border-width: thin;
        border-radius: 4px;
        writing-mode:inherit;
        padding-inline: 1vmin;
    }


}