:root{
    --default-button:darkslategray;
    --default-button-text:white;
}
html{
    font-family: Arial, Helvetica, sans-serif;
}

#chat-wrapper{
    padding:2ch;
    max-width:300pt;
    border:1pt solid darkslategray;
    border-radius:2pt;
    position:relative;
    max-height:100vh;
    padding-bottom:2rem;
    margin-bottom:-2rem;
}
#chat-wrapper :is(.bot-response,.bot-response-form,.user-input)
{
    display:block;
    padding:1ch;
    border-radius:2pt;
    border:1pt solid lightgray;
    width:auto;
    position:relative;
    margin-bottom:1rem;
    background-color:#f5f5f5;
}

#chat-wrapper .user-input::before{
    content:"User";
    top: 0pt;
    left: 0pt;
    font-size: 60%;
    text-transform: uppercase;
    font-family: sans-serif;
    width: 100%;
    display: block;
    background-color: lightgray;
    padding: 1ch;
    margin: 0 -1ch 2ch;
    text-align:right;
    border-radius:2pt;
}

#chat-wrapper .bot-response::before{
    content: "Bot";
    top: 0pt;
    left: 0pt;
    font-size: 60%;
    text-transform: uppercase;
    font-family: sans-serif;
    width: 100%;
    display: block;
    background-color: lightgray;
    padding: 1ch;
    margin: 0 -1ch 2ch;
    border-radius:2pt;
}

#chat-wrapper .submit-form{
    display:flex;
    position:absolute;
    bottom:0pt;
    left:0pt;
    width:100%;
    padding:1ch;
    max-width:100%;
    margin:-1ch;
}
#chat-wrapper .submit-form input{
    flex:1;
    padding:1ch;
    border:1pt solid darkslategray;
}
#chat-wrapper .submit-form a{
    flex:0;
    padding:1ch;
    background-color: darkslategray;
    display:block;
    text-decoration:none;
    color:white;
}

#chat-wrapper .submit-form a[data-disabled]{
    background-color: lightgray;
}

.response-thread{
    max-height:90vh;
    overflow-y:auto;
}

html[sn-chat-current-intro-level="1"] .launch-chat [data-step]:not([data-step="1"]){
    display:none;
}
html[sn-chat-current-intro-level="2"] .launch-chat [data-step]:not([data-step="2"]){
    display:none;
}
html[sn-chat-current-intro-level="3"] .launch-chat [data-step]:not([data-step="3"]){
    display:none;
}
html[sn-chat-current-intro-level="4"] .launch-chat [data-step]:not([data-step="4"]){
    display:none;
}
html[sn-chat-current-intro-level="continue-chat"] .launch-chat [data-step]:not([data-step="continue-chat"]){
    display:none;
}
html[sn-chat-current-intro-level="continue-text"] .launch-chat [data-step]:not([data-step="continue-text"]){
    display:none;
}

html[sn-chat-current-intro-level="chat-online"] .launch-chat [data-step]:not([data-step="chat-online"]){
    display:none;
}

html[sn-chat-current-intro-level="text-message"] .launch-chat [data-step]:not([data-step="text-message"]){
    display:none;
}

.launch-chat label{
    width:100%;
    font-size:60%;
}

.launch-chat :is(input,select){
    width:100%;
    padding:1ch;
    border-radius:2pt;
    -webkit-appearance: none;
}

.launch-chat .buttons{
    display:flex;
    column-gap:1ch;
}
.launch-chat .buttons a{
    flex:1;
    padding:1ch;
    width:auto;
    background-color: var(--default-button);
    color: var(--default-button-text);
    display:block;
    text-decoration:none;
    border-radius:2pt;
}

html:not([sn-chat-current-intro-level="chat-online"]) .response-thread,
html:not([sn-chat-current-intro-level="chat-online"]) .submit-form
{
    display:none !important;
}

.instructions-disclaimer{
    font-size:80%;
}
.instructions-disclaimer a{
    text-decoration: none;
    color:var(--default-button);
    font-weight:bold;
}
.instructions-disclaimer a:visited{
    color:var(--default-button);
}

.launch-chat [data-step] .message-wrapper{
    padding: 1ch;
    border-radius: 2pt;
    background-color: #f5f5f5;
    margin-bottom:1rem;
}