html * {
    box-sizing: border-box;
}
body {
    font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Helvetica,Apple Color Emoji,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
    background-color: #f4f4f9;
    color: rgb(13,13,13);
    margin: 0;
    padding: 3.25rem 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#intro {
    padding:0 1.5rem;
    max-width:600px;
    margin-top:-3.25rem;
}

.w-100 {
    width: 100%;
}

strong {
    font-weight:600;
}

.chat-container {
    width: 900px;
    height:100vh;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow-y: auto;
    position:relative;
    scroll-behavior: smooth;
}
.chat-messages {
    padding: 1.5rem;
    overflow-y: auto;
}

.chat-messages > div {
    margin-bottom:1em;
    line-height:2;
}

#input_container {
    padding:1.5rem;
}

.input-area {
    position: relative;
    display: flex;
    padding: 1rem;
    background: white;
    border-radius: 100px;
}
#scrollBtn {
    position: absolute;
    top:-3rem;
    left:50%;
    transform: translate(-50%, -50%);
    border-radius:100px;
    height:2.5rem;
    width:2.5rem;
    padding:0;
}

.hidden {
    display: none !important;
}

input {
    flex: 1;
    width: 500px;
    padding: .5rem;
    border: none;
    font-size: 1rem;
}

input:focus {
    outline:none;
}

button {
    background-color: #ffcf51;
    color: black;
    border: none;
    cursor: pointer;
    font-size: .875rem;
    padding: .5rem 1rem;
    border-radius: .375rem;
}

button:hover {
    background-color: #444;
    color:white;
}

button#sendButton
{
    padding: .493rem .75rem;
    border-radius: 1000px;
}

button#sendButton:before {
    content: '\27A4';
    font-size: 1.5rem;
}

button#backButton {
    padding: 0.501rem 0.609rem;
    border-radius:1000px;
}

button#backButton:before {
    content: '\2BAA';
    font-size: 2rem;
    line-height:1;
}

.text-end {
    text-align:right;
}

.mb-3 {
    margin-bottom:1rem;
}

.user-message {
    background:#f0f0f0;
    line-height:1.5;
    padding:.625rem 2rem;
    border-radius:30px;
    max-width:80%;
    margin-left:auto;
    display:inline-block;
}

#researching {
    display:none;
    padding:0 20px 10px;
    color: gray;
    font-style: italic;
}

.show {
    display:block !important;
}

.hide {
    display:none !important;
}

li {
    margin:0.5em 0;
}

.flex {
    display:flex;
}

.flex-grow {
    flex-grow: 1;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.align-items-center {
    align-items: center;
}

.gap-4 {
    gap: 1rem;
}

p:first-child {
    margin-top:0;
}

hr {
    border-style: solid;
    border-color: #eee;
    border-width: 1px 0 0 0;
    margin: 1rem 0;
}

@media (max-width:900px) {
    .chat-container {
        width:100%;
    }

    #input_container {
        width:100%;
    }

    .input-area input {
        width:100%;
    }
}

@media (max-width:600px) {
    body {
        padding-left:0;
        padding-right:0;
    }

    .chat-container {
        border-radius:0;
    }

    ul {
        padding-inline-start:1rem;
    }
    .user-message {
        max-width:100%;
    }

    .assistant-message {
        display:block !important;
    }
}