html, body {
    height: 100%;
}
/* Add background color to the body */
body {
    background-color: rgba(68, 70, 84, 1.0);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
}

select {
    max-width: 100%;
    text-overflow: ellipsis;
}

/* Remove border color from the response list container */
#response-list {
    border: none;
    overflow-y: auto;
    flex: 1;
}

/* Style for each response element in the list */
#response-list .response-container {
    margin-bottom: 10px;
    color: white;
    font-size: 1rem;
    display: flex;
    word-break: break-word;
}

#response-list .response-container, #bottom-container {
    padding: 15px 10%;
}

@media (pointer:none), (pointer:coarse) {
    #response-list .response-container, #bottom-container {
        padding: 15px;
    }
    .ai-image {
        max-width: 100%;
    }
}
#response-list .response-container .avatar-image {
    width: 30px;
    height: 30px;
    margin-right: 15px;
}

#response-list .response-container .response-content {
    display: flex;
    flex-direction: column;
}

#response-list .response-container pre {
    max-width: 100%;
    margin: 0 !important;
    white-space: break-spaces;
}

#response-list .response-container .prompt-content {
    background: transparent !important;
    color: white;
    padding: 0 !important;
    margin-top: 5px;
    white-space: pre-wrap;
}

#response-list .response-container .prompt-content p:first-child {
    margin-top: 0;
}

.chatgpt-response {
    background-color: rgba(68, 70, 84, 1);
}

.my-question {
    background-color: rgba(52, 53, 65, 1);
}
/* Change background color of the input container */
#input-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: rgba(64, 65, 79, 1);
    border-color: rgba(32,33,35,.5);
    border-radius: 5px;
    margin-top: 10px;
}

/* Style for the prompt input */
#prompt-input {
    flex-grow: 1;
    padding: 10px;
    border-radius: 5px;
    min-height: 20px;
    color: white;
    overflow: auto;
}

#prompt-input:focus {
    outline: none !important;
}

/* Remove background color and add an SVG background for the submit button */
#submit-button {
    background: transparent url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='white' d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/></svg>") no-repeat center center;
    color: white;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#regenerate-button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10px;
}

#regenerate-response-button {
    display: none;
    color: white;
    border: none;
    background: #10A37F;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
}

.loading {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#model-select-container {
    color: white;
}

#model-select-container select {
    background: transparent;
    border: none;
    outline: none;
    color: white;
}

#model-select-container select option:not(:checked) {
    background: rgba(32,33,35,.8);
}

#model-select-container select option {
    background: rgba(32,33,35,.5);
}

.ai-image {
    width: 500px;
    height: auto;
}

/* Override hljs to match for chatgpt */
.hljs {
    background: rgb(0,0,0) !important;
    color: white !important;
}

.hljs-section, .hljs-title {
    color: #f22c3d !important;
}

.hljs-deletion, .hljs-number, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type {
    color: #df3079 !important;
}

.hljs-addition, .hljs-built_in, .hljs-bullet, .hljs-code {
    color: #e9950c !important;
}

.hljs-link, .hljs-operator, .hljs-regexp, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-symbol, .hljs-template-variable, .hljs-variable {
    color: white !important;
}