css removal unused lines

app/styles/Login.css

@@ -1,5 +1,3 @@
-
-/* Overlay for popup - full screen and centered */
 .popup-overlay{
     position: fixed; /* Fixed to cover the entire viewport */
     top: 0;          /* Ensure it starts from the top */
@@ -12,8 +10,6 @@
     align-items: center;
     z-index: 10000; /* Higher than the header to cover the screen */
 }
-
-/* Popup content box */
 .popup-content{
     background-color: var(--popup-background-color); /* Use variable for background color */
     color: var(--popup-text-color); /* Use variable for text color */
@@ -24,8 +20,6 @@
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     position: relative; /* For positioning the close button */
 }
-
-/* Input styles */
 .popup-content input{
     width: 100%;
     padding: 10px;
@@ -35,13 +29,10 @@
     font-size: 16px;
     transition: border-color 0.3s;
 }
-
 .popup-content input:focus{
     border-color: var(--input-button-color);
     outline: none; /* Remove default outline */
 }
-
-/* Close button styles */
 .close-popup{
     background: var(--close-button-color); /* Use variable for close button color */
     color: white; /* Use white for text color */
@@ -54,12 +45,9 @@
     right: 10px; /* Distance from the right */
     transition: background 0.3s;
 }
-
 .close-popup:hover{
     background: darkred; /* Optional hover effect */
 }
-
-/* Log In button styles */
 .log-into-account{
     background: green; /* Use variable for login button color */
     color: white;
@@ -69,12 +57,9 @@
     cursor: pointer;
     margin-top: 20px;
 }
-
-/* Footer section for popups */
 .popup-footer{
     margin-top: 15px;
 }
-
 .popup-footer button{
     margin-right: 10px;
     padding: 8px 15px;
@@ -84,21 +69,16 @@
     border-radius: 5px;
     transition: background-color 0.3s;
 }
-
 .popup-footer button:hover{
     background-color: var(--input-button-hover-color);
 }
-
 .popup-footer a{
     color: var(--user-message-color);
     text-decoration: none;
 }
-
 .popup-footer a:hover{
     text-decoration: underline;
 }
-
-/* Paragraph styles within popup */
 .popup-content p{
     color: var(--popup-text-color); /* Use variable for paragraph text color */
     margin: 10px;

app/styles/Settings.css

@@ -10,15 +10,12 @@
     justify-content: center;
     align-items: center;
 }
-
 .settings-main h2 {
     margin-bottom: 1em;
 }
-
 .settings-main p {
     padding-bottom: 7px;
 }
-
 /* Main container for the settings */
 .settings-container {
     display: grid;
@@ -29,7 +26,6 @@
     height: 100%;
     /* Ensure it takes full height */
 }
-
 /* Settings content */
 .settings-content {
     background: var(--history-background-color);
@@ -49,7 +45,6 @@
     flex-direction: column;
     /* Flexbox for vertical stacking */
 }
-
 /* Sidebar styles */
 .sidebar {
     background: var(--settings-background-color);
@@ -66,7 +61,6 @@
     height: 100%;
     /* Ensures sidebar takes full height */
 }
-
 /* Sidebar item styles */
 .sidebar ul {
     list-style-type: none;
@@ -78,7 +72,6 @@
     flex-grow: 1;
     /* Allows the list to take available space */
 }
-
 .sidebar li {
     margin: 10px 0;
     cursor: pointer;
@@ -86,17 +79,14 @@
     border-radius: 5px;
     transition: background 0.3s;
 }
-
 .sidebar li:hover {
     background: var(--input-button-hover-color);
     /* Highlight on hover */
 }
-
 .sidebar li.active {
     background: var(--button-hover-background-color);
     /* Active section highlight */
 }
-
 /* Main settings area */
 .settings-main {
     grid-column: 2;
@@ -110,7 +100,6 @@
     flex-direction: column;
     /* Stack content vertically */
 }
-
 /* Close button positioning */
 .close-popup {
     background: var(--close-button-color);
@@ -129,7 +118,6 @@
     /* Distance from the right */
     transition: background 0.3s;
 }
-
 /* Close button positioning */
 .apply {
     background: var(--apply-button-color);
@@ -148,13 +136,10 @@
     /* Distance from the right */
     transition: background 0.3s;
 }
-
 .close-popup:hover {
     background: darkred;
     /* Optional hover effect */
 }
-
-
 /* Additional styles for inputs and options */
 .settings-option {
     margin-bottom: 20px;
@@ -164,14 +149,12 @@
     border-bottom: 1px solid var(--input-border-color);
     /* Optional, creates a separator between options */
 }
-
 .settings-option:last-child {
     margin-bottom: 0;
     /* Removes bottom margin from last option */
     border-bottom: none;
     /* Removes separator from last option */
 }
-
 .settings-option input[type="text"],
 .settings-option input[type="email"],
 .settings-option input[type="password"],
@@ -188,33 +171,28 @@
     margin-bottom: 10px;
     /* Adds spacing between inputs */
 }
-
 /* Optional additional spacing for labels */
 .settings-option label {
     margin-bottom: 5px;
     display: block;
     font-weight: bold;
 }
-
 .export-button {
     background-color: var(--button-hover-background-color);
     padding: 10px;
     margin: 10px;
     border-radius: 10px;
 }
-
 .import-file {
     background-color: var(--button-hover-background-color);
     padding: 10px;
     margin: 10px;
 }
-
 .slider {
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
 }
-
 .slider-option {
     cursor: pointer;
     padding: 10px;
@@ -222,26 +200,22 @@
     border-radius: 5px;
     transition: background-color 0.3s;
 }
-
 .slider-option.active {
     background-color: #007bff;
     /* Change to your active color */
     color: white;
     border-color: #007bff;
 }
-
 input[type="radio"] {
     display: none;
     /* Hide the default radio buttons */
 }
-
 .slider-option.disabled {
     opacity: 0.5;
     /* Make the option appear greyed out */
     pointer-events: none;
     /* Prevent clicks */
 }
-
 .dropdown{
     display: none;
 }

app/styles/container.css

@@ -5,7 +5,6 @@
     height: 90dvh;
     padding-top: 1dvh;
 }
-
 .left-panel{
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
@@ -14,23 +13,17 @@
     margin-left: 0;
     padding-right: 1em;
 }
-
 .left-panel.hidden{
     opacity: 0; /* Fade out when hidden */
     width: 0; /* Collapse width to 0 */
     visibility: hidden; /* Hide visibility while collapsing */
-    
 }
-
 .conversation-container{
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
     border-radius: 1em 0 0 0;
 }
-
-
-
 .conversation-container.collapsed{
     margin-left: 1vw; /* Space for the left panel */
 }

app/styles/credit.css

@@ -2,7 +2,6 @@
 .credits-container{
   padding: 2rem;
 }
-  
 .credits-section{
   max-width: 900px;
   height: 80dvh;
@@ -13,27 +12,23 @@
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   overflow-y: scroll;
 }
-  
 .title{
   font-size: calc(var(--font-size)*2);
   color: var(--doc-title-color); /* Use variable for title color */
   margin-bottom: 1.5rem;
 }
-  
 .subtitle{
   font-size: calc(var(--font-size)*1.5);
   color: var(--doc-subtitle-color); /* Use variable for subtitle color */
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
-  
 .paragraph{
   font-size: calc(var(--font-size));
   color: var(--doc-paragraph-color); /* Use variable for paragraph color */
   margin-bottom: 1.5rem;
   line-height: 1.6;
 }
-  
 /* Styling for the credit buttons */
 .credit-btn{
   display: inline-block;
@@ -45,8 +40,6 @@
   border-radius: 5px;
   transition: background-color 0.3s ease;
 }
-  
 .credit-btn:hover{
   background-color: var(--button-hover-background-color); /* Button hover */
 }
-  

app/styles/doc.css

@@ -1,10 +1,8 @@
 /* styles.css */
-
 /* Styling for the documentation container */
 .documentation-container{
   padding: 2rem;
 }
-
 .documentation-section{
   max-width: 900px;
   height: 80dvh;
@@ -15,27 +13,23 @@
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   overflow-y: scroll;
 }
-
 .title{
   font-size: calc(var(--font-size)*2);
   color: var(--doc-title-color); /* Use variable for title color */
   margin-bottom: 1.5rem;
 }
-
 .subtitle{
   font-size: calc(var(--font-size)*1.5);
   color: var(--doc-subtitle-color); /* Use variable for subtitle color */
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
-
 .subsection-title{
   font-size: calc(var(--font-size)*1.25);
   color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
 }
-
 .paragraph{
   font-size: calc(var(--font-size));
   color: var(--doc-paragraph-color); /* Use variable for paragraph color */

app/styles/faq.css

@@ -6,7 +6,6 @@
     height: 100vh;           /* Full viewport height */
     padding: 0 10px;         /* Optional padding to ensure spacing on small screens */
 }
-
 #faq{
     max-width: 800px;
     width: 90%;
@@ -18,14 +17,12 @@
     margin: 2rem auto;
     height: 80vh;
 }
-
 #faq h2{
     text-align: center;
     color: var(--faq-heading-color); /* Use variable for heading color */
     font-size: 2em;
     margin-bottom: 20px;
 }
-
 .faq-item{
     margin-bottom: 20px;
     padding: 10px;
@@ -33,19 +30,16 @@
     background-color: var(--faq-item-background-color); /* Use variable for item background */
     transition: background-color 0.3s ease-in-out;
 }
-
 .faq-item h3{
     color: var(--faq-item-heading-color); /* Use variable for item heading color */
     margin-bottom: 10px;
     font-size: 1.5em;
 }
-
 .faq-item p{
     color: var(--faq-item-text-color); /* Use variable for item text color */
     font-size: 1.1em;
     line-height: 1.5;
 }
-
 .faq-item:hover{
     background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */
 }

app/styles/fonts.css

@@ -2,67 +2,54 @@
     font-family: 'Inconsolata';
     src: url('/fonts/serious/Inconsolata/Inconsolata-VariableFont_wdth,wght.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Merriweather';
     src: url('/fonts/serious/Merriweather/Merriweather-Regular.tff') format('truetype');
 }
-
 @font-face{
     font-family: 'Noto Sans';
     src: url('/fonts/serious/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Noto Serif';
     src: url('/fonts/serious/Noto_Serif/NotoSerif-VariableFont_wdth\,wght.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Playfair Display';
     src: url('/fonts/serious/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Poppins';
     src: url('/fonts/serious/Poppins/Poppins-Regular.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Roboto';
     src: url('/fonts/serious/Roboto/Roboto-Regular.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Ubuntu';
     src: url('/fonts/serious/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Bangers';
     src: url('/fonts/comic-sans-but-better/Bangers/Bangers-Regular.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Caveat';
     src: url('/fonts/comic-sans-but-better/Caveat/Caveat-VariableFont_wght.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Frederika the Great';
     src: url('/fonts/comic-sans-but-better/Fredericka_the_Great/FrederickatheGreat-Regular.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Rock Salt';
     src: url('/fonts/RockSalt.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Sofadi One';
     src: url('/fonts/comic-sans-but-better/Sofadi_One/SofadiOne-Regular.ttf') format('truetype');
 }
-
 @font-face{
     font-family: 'Zilla Slab Highlight';
     src: url('/fonts/comic-sans-but-better/Zilla_Slab_Highlight/ZillaSlabHighlight-Regular.ttf') format('truetype');

app/styles/global.css

@@ -3,77 +3,57 @@ body {
     overflow: hidden;
     position: relative;
 }
-
 /* Chrome, Edge, and Safari */
 ::-webkit-scrollbar{
-    width: 12px;
+    width: 12px; /* Adjust width for horizontal and vertical scrollbars */
-    /* Adjust width for horizontal and vertical scrollbars */
 }
-
 ::-webkit-scrollbar-track{
-    background: #f0f0f0;
+    background: #f0f0f0; /* Background of the scrollbar track */
-    /* Background of the scrollbar track */
 }
-
 ::-webkit-scrollbar-thumb{
-    background-color: #888;
+    background-color: #888; /* Color of the draggable part (thumb) */
-    /* Color of the draggable part (thumb) */
+    border-radius: 10px; /* Rounded corners */
-    border-radius: 10px;
+    border: 2px solid #f0f0f0; /* Space around the thumb */
-    /* Rounded corners */
-    border: 2px solid #f0f0f0;
-    /* Space around the thumb */
 }
-
 ::-webkit-scrollbar-thumb:hover{
-    background-color: #555;
+    background-color: #555; /* Thumb color on hover */
-    /* Thumb color on hover */
 }
-
 body{
     background-color: var(--background-color);
     color: var(--text-color);
     font-family: var(--font-family);
     font-size: var(--font-size);
 }
-
-
 header{
     background-color: var(--header-background-color);
     color: var(--header-text-color);
 }
-
 button{
     background-color: var(--button-background-color);
     color: var(--text-color);
     border: 1px solid var(--input-border-color);
     transition: background-color 0.3s ease;
 }
-
 button:hover{
     background-color: var(--button-hover-background-color);
 }
-
 input{
     background-color: var(--input-background-color);
     border: 1px solid var(--input-border-color);
     color: var(--text-color);
 }
-
 input:hover{
     border-color: var(--button-hover-background-color);
 }
-
 select{
     background-color: var(--input-background-color);
 }
-
 h1, h2, h3, h4, p{
     color: var(--text-color);
     font-family: var(--font-family);
     font-weight: 500;
 }
-
 p{
     font-weight: 400;
-    font-size: var(--font-size)
+    font-size: var(--font-size);
 }

app/styles/header.css

@@ -9,7 +9,6 @@ header {
     font-size: 1em;
     z-index: 999;
 }
-
 /* Hamburger button styles */
 .hamburger{
     position: absolute;
@@ -18,7 +17,6 @@ header {
     flex-direction: column;
     cursor: pointer;
 }
-
 .hamburger span{
     width: 25px;
     height: 3px;
@@ -26,7 +24,6 @@ header {
     margin: 4px;
     transition: 0.3s;
 }
-
 .hamburger.open span:nth-child(1){
     transform: rotate(45deg) translate(5px, 10px);
 }
@@ -36,7 +33,6 @@ header {
 .hamburger.open span:nth-child(3){
     transform: rotate(-45deg) translate(5px, -10px);
 }
-
 /* Navigation links (hidden in header, shown in dropdown) */
 .nav-links{
     display: none; /* Default hidden */
@@ -51,12 +47,10 @@ header {
     padding: 10px auto;
     margin: auto;
 }
-
 .nav-links.active{
     display: flex; /* Show when active */
     height: fit-content;
 }
-
 .nav-btn{
     background-color: var(--input-button-color);
     border: none;
@@ -69,11 +63,9 @@ header {
     text-align: center; /* Center text */
     margin: 4px auto;
 }
-
 .nav-btn:hover{
     background-color: var(--input-button-hover-color);
 }
-
 /* Logo styles */
 .header-logo{
     width: 250px;
@@ -85,7 +77,6 @@ header {
     background-color: transparent;
     border: none;
 }
-
 /* Login button styles */
 .login-button-container{
     position: absolute;
@@ -95,7 +86,6 @@ header {
     display: flex;
     align-items: center;
 }
-
 .header-login-button{
     height: 100%;
     width: max-content;
@@ -112,11 +102,9 @@ header {
     justify-content: center;
     align-items: center;
 }
-
 .header-login-button:hover{
     background-color: var(--input-button-hover-color);
 }
-
 .show-hide-btn{
     display: flex;
     align-items: center;

app/styles/history.css

@@ -9,23 +9,19 @@
     margin-right: 0;
     border-radius: 1em;
 }
-
 .history{
     height: 100%;
     overflow-y: scroll;
     padding-right: 10px;
 }
-
 .history ul{
     list-style: none;
 }
-
 .history ul li{
     padding: 10px 0;
     border-bottom: 1px solid var(--text-color);
     width: 100%;
 }
-
 .history ul li a{
     display: block;
     text-decoration: none;
@@ -33,11 +29,9 @@
     width: 100%;
     padding: 5px;
 }
-
 .history ul li a:hover{
     background-color: var(--input-button-hover-color);
 }
-
 .history-models{
     position: relative;
     height: 86dvh;

app/styles/input.css

@@ -1,15 +1,11 @@
-/* Input Section */
 .input{
     border-radius: 8px;
     background-color: var(--input-background-color);
-    padding: 1em;
+    padding: 1em 0 1em 0.5em;
-    padding-left: 0.5em;
-    padding-right: 0;
     margin: 0 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: auto;
     height: 10dvh;
     position: absolute;
     left: 0.25vw;
@@ -18,7 +14,6 @@
     box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
     z-index: 600;
 }
-
 .input input{
     flex-grow: 1;
     padding: 5px;
@@ -32,20 +27,16 @@
     transition: border-color 0.3s ease-in-out;
     height: 7vh;
 }
-
 .textInputField::placeholder{
     color: var(--text-color); /* Change to desired placeholder color */
     opacity: 1;  /* Ensures full opacity (optional) */
 }
-
 .input input:focus{
     border-color: var(--input-button-hover-color);
 }
-
 .input button{
     padding: 5px;
-    margin: 5px;
+    margin: 5px 5px 5px 0;
-    margin-left: 0;
     background-color: var(--input-button-color);
     color: var(--user-message-text-color); /* Use variable for button text color */
     border: none;
@@ -61,28 +52,22 @@
     position: relative;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
-
 .input button img{
     height: 20px;
 }
-
 .input button:hover{
     background-color: var(--input-button-hover-color);
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
 }
-
 .microphone-button.red{
     background-color: var(--close-button-color);
 }
-
 .microphone-button.green{
     background-color: var(--button-background-color);
 }
-
 .microphone-button.red:hover{
     background-color: var(--close-button-hover-color);
 }
-
 .microphone-button.green:hover{
     background-color: var(--input-button-hover-color);
 }

app/styles/models.css

@@ -13,7 +13,6 @@
     border-radius: 1em;
     height: 45dvh;
 }
-
 .models {
     display: flex;
     flex-direction: column;
@@ -21,7 +20,6 @@
     overflow: hidden;
     overflow-y: scroll;
 }
-
 .models .title {
     display: flex;
     justify-content: center;
@@ -29,24 +27,20 @@
     font-size: 1.5em;
     margin-bottom: 0;
 }
-
 .model-dropdown {
     display: flex;
     justify-content: center;
     margin-bottom: 1em; /* Space between dropdown and models */
 }
-
 .model-dropdown label {
     margin-right: 0.5em; /* Space between label and dropdown */
 }
-
 .grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5vh;
     width: 100%; /* Ensure grid takes full width */
 }
-
 .model-box {
     display: flex;
     align-items: center;
@@ -59,12 +53,10 @@
     width: 18vh;
     margin: auto; /* Center each model box in the grid cell */
 }
-
 .model-box.selected {
     box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */
     border-color: var(--apply-button-hover-color);
 }
-
 .overlay {
     position: absolute;
     left: 0;
@@ -81,7 +73,6 @@
     opacity: 0;
     border-radius: 5%;
 }
-
 .overlay img {
     align-self: flex-end;
     justify-self: end;
@@ -91,18 +82,15 @@
     right: 15px;
     bottom: 15px;
 }
-
 .model-box:hover .overlay {
     opacity: 1;
 }
-
 /* Model background styles */
 .code-model {
     background-image: url(/img/code.jpg);
     background-repeat: no-repeat;
     background-size: cover;
 }
-
 .math-model {
     background-image: url(/img/math.jpg);
     background-color: var(--background-color);
@@ -110,7 +98,6 @@
     background-repeat: no-repeat;
     background-size: contain;
 }
-
 .language-model {
     background-image: url(/img/language.jpg);
     background-color: #72cce4;
@@ -118,8 +105,6 @@
     background-size: contain;
     background-position: center;
 }
-
-
 .weather-model {
     background-image: url(/img/weather.jpg);
     background-color: #72cce4;
@@ -127,7 +112,6 @@
     background-size: contain;
     background-position: center;
 }
-
 .custom1-model,
 .custom2-model {
     background-image: url(/img/default.jpg);
@@ -135,20 +119,17 @@
     background-size: cover;
     background-position: center;
 }
-
 .model-dropdown {
     display: flex;
     flex-direction: column; /* Stack label and dropdown */
     align-items: center; /* Center the content */
     margin-bottom: 1em; /* Space between dropdown and models */
 }
-
 .model-dropdown label {
     margin-bottom: 0.5em; /* Space between label and dropdown */
     font-size: large; /* Increase font size for visibility */
     color: var(--text-color); /* Use variable for text color */
 }
-
 #model-select {
     padding: 0.5em; /* Padding for better touch targets */
     border-radius: 5px; /* Rounded corners */

app/styles/output.css

@@ -16,7 +16,6 @@
     height: 85dvh;
     position: relative;
 }
-
 #conversation {
     display: flex;
     flex-direction: column;
@@ -27,7 +26,6 @@
     border-radius: 10px;
     scroll-behavior: smooth;
 }
-
 /* Message Bubbles */
 .user-message, .ai-message {
     padding: 10px;
@@ -37,23 +35,19 @@
     word-wrap: break-word;
     overflow-wrap: break-word;
 }
-
 .user-message {
     background-color: var(--user-message-background-color);
     align-self: flex-end;
     color: var(--user-message-text-color);
 }
-
 .ai-message {
     background-color: var(--ai-message-background-color);
     align-self: flex-start;
     color: var(--ai-message-text-color);
 }
-
 .ai-message a {
     color: var(--text-color);
 }
-
 .ai-message table {
     display: block; /* Treat the table as a block element */
     position: relative;
@@ -67,31 +61,24 @@
     border-radius: 4px; /* Optional: Add border radius similar to pre/code */
     margin-top: 5px;
 }
-
-
 .ai-message th {
     background-color: var(--user-message-background-color);
     align-items: center;
     padding: 5px;
 }
-
 .ai-message td {
     align-items: center;
     padding: 5px;
 }
-
 .ai-message img {
     max-width: 80%;
 }
-
 .ai-message a:hover {
     filter: brightness(70%);
 }
-
 .ai-message li {
     margin-left: 1em;
 }
-
 .ai-message code, .ai-message pre {
     overflow-x: auto;
     white-space: pre;
@@ -101,12 +88,10 @@
     background-color: var(--code-background-color);
     border-radius: 4px;
 }
-
 /* Button Container */
 .button-container {
     display: flex;
 }
-
 .button-container button {
     background: none;
     border: none;
@@ -117,18 +102,15 @@
     height: 40px;
     width: 40px;
 }
-
 .button-container button:hover {
     background-color: var(--button-hover-background-color);
 }
-
 .tooltip {
     position: relative;
     display: inline-block;
     cursor: pointer;
     z-index: 900;
 }
-
 .tooltip .tooltiptext {
     visibility: hidden;
     background-color: var(--user-message-background-color);
@@ -137,17 +119,14 @@
     padding: 5px;
     border-radius: 4px;
     font-size: calc(var(--font-size) * 0.8);
-
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     white-space: nowrap;
-
     opacity: 0;
     transition: all 0.3s;
 }
-
 .tooltip .tooltiptext::after {
     content: "";
     position: absolute;
@@ -158,19 +137,16 @@
     border-style: solid;
     border-color: transparent transparent var(--user-message-background-color) transparent;
 }
-
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
 }
-
 #copiedText {
     margin-top: 1em;
     cursor: default;
     pointer-events: none;
     user-select: none;
 }
-
 #scrollToBottom {
     scroll-behavior: smooth;
     visibility: hidden;

app/styles/responsive.css

@@ -5,7 +5,6 @@
     padding: 0;
     border-radius: none;
   }
-  
   /* Header styles */
   header {
     top: 0;
@@ -14,7 +13,6 @@
     padding-top: 0;
     width: 100%;
   }
- 
   /* Container styles */
   .container {
     display: flex;
@@ -24,26 +22,22 @@
     margin: 0;
     padding: 1dvh 0 0 0;
   }
-
   /* Left panel styles */
   .left-panel {
     display: hidden; /* Initially hidden */
     min-width: 100%; /* Takes full width when visible */
     margin: 0;
   }
-
   .left-panel.visible {
     display: block;
     height: min-content;
   }
-
   /* Conversation container styles */
   .conversation-container {
     min-width: 100%;
     height: 100%;
     border-radius: 0;
   }
-
   .conversation-container.collapsed {
     width: 0;
     padding: 0;
@@ -51,25 +45,21 @@
     overflow: hidden;
     display: hidden;
   }
-
   .conversation-container.expanded {
     min-width: 100%;
     margin-left: 0;
     border-radius: none;
     height: 10vh;
   }
-
   /* Grid styles */
   .grid {
     grid-template-columns: 1fr; /* One item per line */
   }
-
   /* Model box styles */
   .model-box {
     max-width: none; /* Remove max-width */
     margin: 0 auto; /* Center each model-box */
   }
-
   /* Input styles */
   .input {
     grid-column: 1 / -1;
@@ -82,7 +72,6 @@
     left: 2vw;
     justify-content: flex-start;
   }
-
   .input input {
     font-size: 1em; /* Adjust font size */
     max-width: 70%;
@@ -90,7 +79,6 @@
     border-color: var(--input-border-color); /* Use variable for input border */
     color: var(--text-color); /* Use variable for text color */
   }
-
   .input button {
     height: 100%; /* Adjust button height */
     width: 15%; /* Adjust button width */
@@ -99,16 +87,13 @@
     color: var(--user-message-text-color); /* Use variable for button text color */
     margin: 0;
   }
-
   .header-logo {
     position: relative;
   }
-
   .hamburger.open {
     margin-top: 0.5vh;
     padding-left: 1vw;
   }
-
   .nav-links {
     display: none; /* Hidden by default */
     position: absolute;
@@ -121,12 +106,10 @@
     padding: 10px;
     height: fit-content;
   }
-
   .nav-links.active {
     display: flex; /* Show when active */
     height: fit-content;
   }
-
   .nav-btn {
     width: 100%;
     text-align: center;
@@ -137,40 +120,32 @@
     font-size: 0.9em;
     border-radius: 5px;
   }
-
   .nav-btn:hover {
     background-color: var(--input-button-hover-color);
   }
-
   .hamburger {
     display: flex; /* Always show hamburger button */
   }
-
   .header-login-button {
     right: 5vh; /* Keep login button visible */
   }
-
   .show-hide-btn{
     width: fit-content;
     left: 20vw;
   }
-
   .header-logo {
     background-image: url(../../public/img/logo-small.png);
     width: 4em;
   }
-
   .sidebar{
     width: 0%;
     display: none;
   }
-
   .settings-main {
     width: 80vw; /* Full width for main content */
     margin: auto;
     padding: auto;
   }
-
   .dropdown{
     display: flex;
     position: relative;

app/styles/scrollbar.css

@@ -2,16 +2,13 @@
 .scrollbar {
   overflow-y: scroll;
 }
-
 .scrollbar::-webkit-scrollbar {
   width: 8px;
 }
-
 .scrollbar::-webkit-scrollbar-thumb {
   background-color: var(--input-border-color); /* Use variable for thumb color */
   border-radius: 4px;
 }
-
 .scrollbar::-webkit-scrollbar-track {
   background-color: var(--history-background-color); /* Use variable for track color */
 }

app/styles/user-ai-messages.css

@@ -9,7 +9,6 @@
     display: block;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 }
-
 .user-message {
     background-color: var(--user-message-background-color);
     color: var(--text-color);
@@ -18,7 +17,6 @@
     text-align: left;
     margin-right: 1.5vw;
 }
-
 .ai-message {
     background-color: var(--ai-message-background-color);
     color: var(--text-color);
@@ -26,7 +24,6 @@
     margin-right: auto;
     text-align: left;
 }
-
 .ai-container{
     position: relative;
     height: min-content;

app/styles/variables.css

@@ -24,7 +24,6 @@
     --apply-button-hover-color:#6b7c2b;
     --burger-menu-background-color: #79832e;  /*NEW*/
     --overlay-text-color:white; /*NEW*/  
-    
     /* FAQ Colors */
     --faq-background-color: #474D22; /* Background color for FAQ section */
     --faq-heading-color: #8B9635; /* Heading color for FAQ section */
@@ -32,7 +31,6 @@
     --faq-item-heading-color: #474D22; /* Heading color for FAQ items */
     --faq-item-text-color: #333; /* Text color for FAQ items */
     --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
-
     --popup-background-color: #8B9635;
     --pop-up-text: #000; /* Text color for pop-ups */
     --input-border-color: #8B9635; /* Input border color */