From 905ced06bd27d4a252791c2316d0bb00b8326d35 Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Sat, 16 Mar 2024 10:48:37 +0100
Subject: Serverless webview gui

---
 g4f/gui/client/css/style.css | 1031 ------------------------------------------
 1 file changed, 1031 deletions(-)
 delete mode 100644 g4f/gui/client/css/style.css

(limited to 'g4f/gui/client/css')

diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css
deleted file mode 100644
index ba3f1187..00000000
--- a/g4f/gui/client/css/style.css
+++ /dev/null
@@ -1,1031 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
-.adsbox {
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    background-color: var(--blur-bg);
-    height: 100%;
-    width: 100%;
-    border-radius: var(--border-radius-1);
-    border: 1px solid var(--blur-border);
-}
-
-.ads {
-    align-items: center;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    gap: var(--inner-gap);
-    max-width: 200px;
-    padding: var(--section-gap);
-    overflow: none;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
- 
-@media screen and (max-width: 728px) {
-    .ads {
-        display: none;
-    }
-}
-
-/* :root {
-    --colour-1: #ffffff;
-    --colour-2: #000000;
-    --colour-3: #000000;
-    --colour-4: #000000;
-    --colour-5: #000000;
-    --colour-6: #000000;
-
-    --accent: #ffffff;
-    --blur-bg: #98989866;
-    --blur-border: #00000040;
-    --user-input: #000000;
-    --conversations: #000000;
-} */
-
-:root {
-    --colour-1: #000000;
-    --colour-2: #ccc;
-    --colour-3: #e4d4ff;
-    --colour-4: #f0f0f0;
-    --colour-5: #181818;
-    --colour-6: #242424;
-
-    --accent: #8b3dff;
-    --blur-bg: #16101b66;
-    --blur-border: #84719040;
-    --user-input: #ac87bb;
-    --conversations: #c7a2ff;
-    --conversations-hover: #c7a2ff4d;
-}
-
-:root {
-    --font-1: "Inter", sans-serif;
-    --section-gap: 25px;
-    --inner-gap: 15px;
-    --border-radius-1: 8px;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    position: relative;
-    font-family: var(--font-1);
-}
-
-html,
-body {
-    scroll-behavior: smooth;
-    overflow: hidden;
-}
-
-body {
-    padding: var(--section-gap);
-    background: var(--colour-1);
-    color: var(--colour-3);
-    height: 100vh;
-}
-
-.row {
-    display: flex;
-    gap: var(--section-gap);
-    height: 100%;
-}
-
-.box {
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    background-color: var(--blur-bg);
-    height: 100%;
-    width: 100%;
-    border-radius: var(--border-radius-1);
-    border: 1px solid var(--blur-border);
-}
-
-.hidden {
-    display: none;
-}
-
-.conversations {
-    max-width: 260px;
-    padding: var(--section-gap);
-    overflow: auto;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.conversation {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-}
-
-.conversation #messages {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    overflow-wrap: break-word;
-    padding-bottom: 10px;
-}
-
-.conversation .user-input {
-    max-height: 200px;
-    margin-bottom: 10px;
-}
-
-.conversation .user-input input {
-    font-size: 15px;
-    width: 100%;
-    height: 100%;
-    padding: 12px 15px;
-    background: none;
-    border: none;
-    outline: none;
-    color: var(--colour-3);
-}
-
-.conversation .user-input input::placeholder {
-    color: var(--user-input)
-}
-
-.gradient:nth-child(1) {
-    --top: 0;
-    --right: 0;
-    --size: 70vw;
-    --blur: calc(0.5 * var(--size));
-    --opacity: 0.3;
-    animation: zoom_gradient 6s infinite;
-}
-
-.gradient {
-    position: absolute;
-    z-index: -1;
-    border-radius: calc(0.5 * var(--size));
-    background-color: var(--accent);
-    background: radial-gradient(circle at center, var(--accent), var(--accent));
-    width: 70vw;
-    height: 70vw;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    filter: blur(calc(0.5 * 70vw)) opacity(var(--opacity));
-}
-
-.conversations {
-    display: flex;
-    flex-direction: column;
-    gap: var(--inner-gap);
-    padding: var(--inner-gap);
-}
-
-.conversations .title {
-    font-size: 14px;
-    font-weight: 500;
-}
-
-.conversations .convo {
-    padding: 8px 12px;
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    user-select: none;
-    justify-content: space-between;
-    border: 1px dashed var(--conversations);
-    border-radius: var(--border-radius-1);
-}
-
-.conversations .convo .left {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.conversations .convo .choise {
-    position: absolute;
-    right: 8px;
-    background-color: var(--blur-bg);
-}
-
-.conversations i {
-    color: var(--conversations);
-    cursor: pointer;
-}
-
-.convo-title {
-    color: var(--colour-3);
-    font-size: 14px;
-    text-overflow: ellipsis;
-    overflow: hidden; 
-    white-space: nowrap;
-}
-
-.message {
-    width: 100%;
-    overflow-wrap: break-word;
-    display: flex;
-    gap: var(--section-gap);
-    padding: var(--inner-gap) var(--section-gap);
-    padding-bottom: 0;
-}
-
-.message.regenerate {
-    opacity: 0.75;
-}
-
-.message:last-child {
-    animation: 0.6s show_message;
-}
-
-@keyframes show_message {
-    from {
-        transform: translateY(10px);
-        opacity: 0;
-    }
-}
-
-.message .user {
-    max-width: 48px;
-    max-height: 48px;
-    flex-shrink: 0;
-}
-
-.message .user img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 8px;
-    outline: 1px solid var(--blur-border);
-}
-
-.message .user:after {
-    content: "63";
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: 60%;
-    width: 60%;
-    background: var(--colour-3);
-    filter: blur(10px) opacity(0.5);
-    z-index: 10000;
-}
-
-.message .assistant{
-    max-width: 48px;
-    max-height: 48px;
-    flex-shrink: 0;
-}
-
-.message .assistant img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 8px;
-    outline: 1px solid var(--blur-border);
-}
-
-.message .assistant:after {
-    content: "63";
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: 60%;
-    width: 60%;
-    background: var(--colour-3);
-    filter: blur(10px) opacity(0.5);
-    z-index: 10000;
-}
-
-.message .content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.message .content,
-.message .content a:link,
-.message .content a:visited{
-    font-size: 15px;
-    line-height: 1.3;
-    color: var(--colour-3);
-}
-.message .content pre{
-    white-space: pre-wrap;
-}
-
-.message .content img{
-    max-width: 400px;
-}
-
-.message .user i {
-    position: absolute;
-    bottom: -6px;
-    right: -6px;
-    z-index: 1000;
-}
-
-.message .assistant .fa-phone-arrow-up-right,
-.message .assistant .fa-phone-arrow-down-left {
-    position: absolute;
-    bottom: -6px;
-    right: -6px;
-    z-index: 1000;
-}
-
-.message .assistant .fa-xmark,
-.message .user .fa-xmark {
-    position: absolute;
-    top: -2px;
-    left: 0px;
-    z-index: 1000;
-    display: none;
-    cursor: pointer;
-}
-
-.message .user .fa-xmark {
-    color: var(--colour-1);
-}
-
-.message .assistant:hover .fa-xmark,
-.message .user:hover .fa-xmark {
-    display: block;
-}
-
-.message .content .provider a,
-.message .content .provider {
-    font-size: 12px;
-    text-decoration: none;
-}
-
-.message .content .provider a {
-    font-weight: bold;
-}
-
-.message .content .count {
-    font-size: 12px;
-}
-
-.count_total {
-    font-size: 12px;
-    padding-left: 100px;
-    padding-top: 10px;
-}
-
-.new_convo {
-    padding: 8px 12px;
-    display: flex;
-    gap: 18px;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    background: transparent;
-    border: 1px solid var(--conversations);
-    border-radius: var(--border-radius-1);
-    transition: all 0.2s ease;
-}
-
-.new_convo:hover {
-    box-shadow: inset 0px 0px 20px var(--conversations-hover);
-}
-
-.new_convo span {
-    color: var(--colour-3);
-    font-size: 14px;
-}
-
-.toolbar {
-    position: relative;
-}
-
-#input-count {
-    width: fit-content;
-    font-size: 12px;
-    padding: 6px var(--inner-gap);
-}
-
-.stop_generating, .toolbar .regenerate {
-    position: absolute;
-    z-index: 1000000;
-    top: 0;
-    right: 0;
-}
-
-@media only screen and (min-width: 40em) {
-    .stop_generating, .toolbar .regenerate {
-        left: 50%;
-        transform: translateX(-50%);
-        right: auto;
-    }
-}
-
-.stop_generating button, .toolbar .regenerate button{
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    background-color: var(--blur-bg);
-    border-radius: var(--border-radius-1);
-    border: 1px solid var(--blur-border);
-    padding: 5px var(--inner-gap);
-    color: var(--colour-3);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 12px;
-    cursor: pointer;
-    animation: show_popup 0.4s;
-}
-
-@keyframes show_popup {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-}
-
-@keyframes hide_popup {
-    to {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-}
-
-.stop_generating-hidden #cancelButton, .regenerate-hidden #regenerateButton {
-    animation: hide_popup 0.4s;
-    display: none;
-}
-
-.typing {
-    position: absolute;
-    top: -25px;
-    left: 0;
-    font-size: 14px;
-    animation: show_popup 0.4s;
-}
-
-.typing-hiding {
-    animation: hide_popup 0.4s;
-}
-
-.typing-hidden {
-    display: none;
-}
-
-#image, #file, #camera {
-    display: none;
-}
-
-label[for="image"]:has(> input:valid){
-    color: var(--accent);
-}
-
-label[for="camera"]:has(> input:valid){
-    color: var(--accent);
-}
-
-label[for="file"]:has(> input:valid){
-    color: var(--accent);
-}
-
-label[for="image"], label[for="file"], label[for="camera"] {
-    cursor: pointer;
-    position: absolute;
-    top: 10px;
-    left: 10px;
-}
-
-label[for="image"] {
-    top: 32px;
-}
-
-label[for="camera"] {
-    top: 54px;
-}
-
-label[for="camera"] {
-    display: none;
-}
-
-@media (pointer:none), (pointer:coarse) {
-    label[for="camera"] {
-        display: block;
-    }
-}
-
-.buttons input[type="checkbox"] {
-    height: 0;
-    width: 0;
-    display: none;
-}
-
-.buttons label {
-    cursor: pointer;
-    text-indent: -9999px;
-    width: 50px;
-    height: 30px;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    background-color: var(--blur-bg);
-    border-radius: var(--border-radius-1);
-    border: 1px solid var(--blur-border);
-    display: block;
-    border-radius: 100px;
-    position: relative;
-    overflow: hidden;
-    transition: 0.33s;
-}
-
-.buttons label:after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 5px;
-    width: 20px;
-    height: 20px;
-    background: var(--colour-3);
-    border-radius: 90px;
-    transition: 0.33s;
-}
-
-.buttons input:checked+label {
-    background: var(--accent);
-}
-
-.buttons input:checked+label:after {
-    left: calc(100% - 5px - 20px);
-}
-
-.buttons {
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    width: 100%;
-}
-
-.field {
-    height: fit-content;
-    display: flex;
-    align-items: center;
-    gap: var(--inner-gap);
-}
-
-.field .about {
-    font-size: 14px;
-    color: var(--colour-3);
-}
-
-
-select {
-    -webkit-border-radius: 8px;
-    -moz-border-radius: 8px;
-    border-radius: 8px;
-
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-
-    cursor: pointer;
-    background-color: var(--colour-1);
-    border: 1px solid var(--blur-border);
-    color: var(--colour-3);
-    display: block;
-    position: relative;
-    overflow: hidden;
-    outline: none;
-    padding: 8px 16px;
-
-    appearance: none;
-    width: 160px;
-}
-
-@media only screen and (min-width: 40em) {
-    select {
-        width: 200px;
-    }
-    .field {
-        padding-right: 15px
-    }
-}
-
-.input-box {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-}
-
-.info {
-    padding: 8px 12px;
-    display: flex;
-    gap: 18px;
-    align-items: center;
-    user-select: none;
-    background: transparent;
-    border-radius: var(--border-radius-1);
-    width: 100%;
-    cursor: default;
-    border: 1px dashed var(--conversations)
-}
-
-.bottom_buttons {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.bottom_buttons button {
-    padding: 8px 12px;
-    display: flex;
-    gap: 18px;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    background: transparent;
-    border: 1px solid var(--conversations);
-    border-radius: var(--border-radius-1);
-    width: 100%;
-}
-
-.bottom_buttons button span {
-    color: var(--colour-3);
-    font-size: 14px;
-}
-
-.bottom_buttons button a {
-    color: var(--colour-3);
-    font-weight: 500;
-}
-
-.conversations .top {
-    display: flex;
-    flex-direction: column;
-    gap: var(--inner-gap);
-    overflow: auto;
-}
-
-
-#cursor {
-    line-height: 17px;
-    margin-left: 3px;
-    -webkit-animation: blink 0.8s infinite;
-    animation: blink 0.8s infinite;
-    width: 7px;
-    height: 15px;
-    display: inline-block;
-}
-
-@keyframes blink {
-    0% {
-        background: #ffffff00;
-    }
-
-    50% {
-        background: white;
-    }
-
-    100% {
-        background: #ffffff00;
-    }
-}
-
-@-webkit-keyframes blink {
-    0% {
-        background: #ffffff00;
-    }
-
-    50% {
-        background: white;
-    }
-
-    100% {
-        background: #ffffff00;
-    }
-}
-
-
-ol,
-ul {
-    padding-left: 20px;
-}
-
-
-@keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.spinner:before {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    top: 50%;
-    left: 45%;
-    width: 20px;
-    height: 20px;
-
-    border-radius: 50%;
-    border: 1px solid var(--conversations);
-    border-top-color: white;
-    animation: spinner .6s linear infinite;
-}
-
-.grecaptcha-badge {
-    visibility: hidden;
-}
-
-.mobile-sidebar {
-    display: none !important;
-    position: absolute;
-    z-index: 100000;
-    top: 0;
-    left: 0;
-    margin: 10px;
-    font-size: 20px;
-    cursor: pointer;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    background-color: var(--blur-bg);
-    border-radius: 10px;
-    border: 1px solid var(--blur-border);
-    width: 40px;
-    height: 40px;
-    justify-content: center;
-    align-items: center;
-    transition: 0.33s;
-}
-
-.mobile-sidebar i {
-    transition: 0.33s;
-}
-
-.rotated {
-    transform: rotate(360deg);
-}
-
-@media screen and (max-width: 990px) {
-    .conversations {
-        display: none;
-        width: 100%;
-        max-width: none;
-    }
-
-    .buttons {
-        align-items: flex-start;
-        flex-wrap: wrap;
-        gap: 15px;
-    }
-
-    .field {
-        width: fit-content;
-    }
-
-    .mobile-sidebar {
-        display: flex !important;
-    }
-}
-
-.shown {
-    display: flex;
-}
-
-
-a:-webkit-any-link {
-    color: var(--accent);
-}
-
-.conversation .user-input textarea {
-    font-size: 15px;
-    width: 100%;
-    height: 100%;
-    padding: 12px var(--inner-gap);
-    background: none;
-    border: none;
-    outline: none;
-    color: var(--colour-3);
-
-    resize: vertical;
-    max-height: 150px;
-    min-height: 80px;
-}
-
-/* style for hljs copy */
-.hljs-copy-wrapper {
-    position: relative;
-    overflow: hidden
-}
-
-.hljs-copy-wrapper:hover .hljs-copy-button,
-.hljs-copy-button:focus {
-    transform: translateX(0)
-}
-
-.hljs-copy-button {
-    position: absolute;
-    transform: translateX(calc(100% + 1.125em));
-    top: 1em;
-    right: 1em;
-    width: 2rem;
-    height: 2rem;
-    text-indent: -9999px;
-    color: #fff;
-    border-radius: .25rem;
-    border: 1px solid #ffffff22;
-    background-color: #2d2b57;
-    background-image: url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="white"/></svg>');
-    background-repeat: no-repeat;
-    background-position: center;
-    transition: background-color 200ms ease, transform 200ms ease-out
-}
-
-.hljs-copy-button:hover {
-    border-color: #ffffff44
-}
-
-.hljs-copy-button:active {
-    border-color: #ffffff66
-}
-
-.hljs-copy-button[data-copied="true"] {
-    text-indent: 0;
-    width: auto;
-    background-image: none
-}
-
-@media(prefers-reduced-motion) {
-    .hljs-copy-button {
-        transition: none
-    }
-}
-
-.hljs-copy-alert {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px
-}
-
-.visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-}
-
-
-.color-picker>fieldset {
-    border: 0;
-    display: flex;
-    width: fit-content;
-    background: var(--colour-1);
-    margin-inline: auto;
-    border-radius: 8px;
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-    cursor: pointer;
-    background-color: var(--blur-bg);
-    border: 1px solid var(--blur-border);
-    color: var(--colour-3);
-    display: block;
-    position: relative;
-    overflow: hidden;
-    outline: none;
-    padding: 6px 16px;
-}
-
-.color-picker input[type="radio"]:checked {
-    background-color: var(--radio-color);
-}
-
-.color-picker input[type="radio"]#light {
-    --radio-color: gray;
-}
-
-.color-picker input[type="radio"]#pink {
-    --radio-color: white;
-}
-
-.color-picker input[type="radio"]#blue {
-    --radio-color: blue;
-}
-
-.color-picker input[type="radio"]#green {
-    --radio-color: green;
-}
-
-.color-picker input[type="radio"]#dark {
-    --radio-color: #232323;
-}
-
-.pink {
-    --colour-1: #ffffff;
-    --colour-2: #000000;
-    --colour-3: #000000;
-    --colour-4: #000000;
-    --colour-5: #000000;
-    --colour-6: #000000;
-
-    --accent: #ffffff;
-    --blur-bg: #98989866;
-    --blur-border: #00000040;
-    --user-input: #000000;
-    --conversations: #000000;
-}
-
-.blue {
-    --colour-1: hsl(209 50% 90%);
-    --clr-card-bg: hsl(209 50% 100%);
-    --colour-3: hsl(209 50% 15%);
-    --conversations: hsl(209 50% 25%);
-}
-
-.green {
-    --colour-1: hsl(109 50% 90%);
-    --clr-card-bg: hsl(109 50% 100%);
-    --colour-3: hsl(109 50% 15%);
-    --conversations: hsl(109 50% 25%);
-}
-
-.dark {
-    --colour-1: hsl(209 50% 10%);
-    --clr-card-bg: hsl(209 50% 5%);
-    --colour-3: hsl(209 50% 90%);
-    --conversations: hsl(209 50% 80%);
-}
-
-:root:has(#pink:checked) {
-    --colour-1: #ffffff;
-    --colour-2: #000000;
-    --colour-3: #000000;
-    --colour-4: #000000;
-    --colour-5: #000000;
-    --colour-6: #000000;
-
-    --accent: #ffffff;
-    --blur-bg: #98989866;
-    --blur-border: #00000040;
-    --user-input: #000000;
-    --conversations: #000000;
-}
-
-:root:has(#blue:checked) {
-    --colour-1: hsl(209 50% 90%);
-    --clr-card-bg: hsl(209 50% 100%);
-    --colour-3: hsl(209 50% 15%);
-    --conversations: hsl(209 50% 25%);
-}
-
-:root:has(#green:checked) {
-    --colour-1: hsl(109 50% 90%);
-    --clr-card-bg: hsl(109 50% 100%);
-    --colour-3: hsl(109 50% 15%);
-    --conversations: hsl(109 50% 25%);
-}
-
-:root:has(#dark:checked) {
-    --colour-1: hsl(209 50% 10%);
-    --clr-card-bg: hsl(209 50% 5%);
-    --colour-3: hsl(209 50% 90%);
-    --conversations: hsl(209 50% 80%);
-}
-
-#send-button {
-    border: 1px dashed #e4d4ffa6;
-    border-radius: 4px;
-    cursor: pointer;
-    padding-left: 8px;
-    padding-right: 5px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-}
-
-#send-button:hover {
-    border: 1px solid #e4d4ffc9;
-}
-
-#systemPrompt {
-    font-size: 15px;
-    width: 100%;
-    color: var(--colour-3);
-    min-height: 59px;
-    height: 59px;
-    outline: none;
-    padding: var(--inner-gap) var(--section-gap);
-    resize: vertical;
-}
-- 
cgit v1.2.3