Update application/static/css/style.css

application/static/css/style.css

@@ -1,9 +1,10 @@
+/* application/static/css/style.css */
 ::-webkit-scrollbar {
     width: 12px;
 }
 
 ::-webkit-scrollbar-track {
-    background: transparent; 
+    background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -21,7 +22,7 @@ html,body{
     width: 100vw;
     height: 100vh;
     overflow: hidden;
-    scrollbar-width: thin; 
+    scrollbar-width: thin;
     scrollbar-color: rgb(41, 41, 41) transparent;
     font-family: 'Inter';
 
@@ -99,7 +100,7 @@ nav{
     gap: 1vh;
     position: relative;
     font-size: medium;
-    
+
 }
 .prevChat{
     min-height: 5vh;
@@ -141,8 +142,8 @@ nav{
     z-index: 50;
     top: 8vh;
     display: flex;
-    flex-direction: column; 
-    justify-content: flex-end; 
+    flex-direction: column;
+    justify-content: flex-end;
     z-index: 1;
 }
 
@@ -159,8 +160,8 @@ nav{
     border-top-left-radius: 20px;
     border-bottom-right-radius: 50px;
     font-size: large;
-    position: relative; 
-    margin-top: auto; 
+    position: relative;
+    margin-top: auto;
     align-self: center;
 
 }
@@ -184,11 +185,11 @@ nav{
     height: 6vh;
 }
 .messages {
-    overflow-y: auto; 
+    overflow-y: auto;
     color: white;
     padding: 10px;
     display: flex;
-    flex-direction: column; 
+    flex-direction: column;
     position: relative;
 }
 .user{
@@ -200,7 +201,7 @@ nav{
     font-weight: 300;
     border-radius: 10px;
     line-height: 130%;
-    
+
 }
 .user p{
     color: #b4b4b4;
@@ -216,15 +217,16 @@ nav{
 }
 .ai p {
     opacity: 0.9;
-    font-weight: 300; 
+    font-weight: 300;
     font-size: medium;
     line-height: 1.6;
-    color: #c5c5c5; 
+    color: #c5c5c5;
     background-color: rgba(28, 28, 28, 0.5);
     padding: 20px;
     border-radius: 10px;
     border: 2px solid rgba(255,255,255,0.1);
     font-family: 'Inter';
+    position: relative; /* Added for read-aloud-btn positioning */
 }
 
 .subHeading,.heading{
@@ -285,7 +287,7 @@ code{
     font-family: 'Inter';
     font-weight: 300;
     font-size: 15px;
-    color: #cfcfcf; 
+    color: #cfcfcf;
     opacity: 0.9;
     padding-left: 10px;
 }
@@ -327,6 +329,84 @@ code{
     font-size: x-large;
 }
 
+/* Image Button and Paperclip Icon */
+.image-upload-label {
+    cursor: pointer;
+    font-size: 1.5em; /* Adjust as needed */
+    color: #ddd; /* Light grey, adjust as needed */
+    margin-right: 10px; /* Space it out from other elements */
+}
+
+.image-upload-label:hover {
+    color: #fff; /* Slightly brighter on hover */
+}
+
+#imageInput {
+    display: none; /* Hide the actual file input */
+}
+
+/* Styling for uploaded image preview */
+.uploaded-image-preview {
+    max-width: 100%;  /* Make sure it doesn't overflow its container */
+    max-height: 200px; /* Limit the height */
+    margin-bottom: 10px;
+    border: 1px solid #555;
+    border-radius: 4px;
+}
+.image-caption {
+    color: #aaa;
+    font-size: 0.9em;
+    margin-top: 5px;
+    padding: 5px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+}
+
+/* Read Aloud Button */
+.read-aloud-btn {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    background-color: rgba(100, 100, 255, 0.8); /* Adjust color as needed */
+    color: white;
+    border: none;
+    border-radius: 50%; /* Circular button */
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    display: flex; /* For centering the icon */
+    align-items: center;
+    justify-content: center;
+    font-size: 16px; /* Adjust as needed */
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Subtle shadow */
+    transition: background-color 0.3s ease; /* Smooth transition */
+}
+
+.read-aloud-btn:hover {
+    background-color: rgba(120, 120, 255, 1); /* Slightly brighter on hover */
+}
+
+/* Memory Display */
+.memory-display {
+    margin-top: 10px;
+    padding: 8px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    color: #ccc;
+    font-size: 0.8em;
+}
+
+/* Reasoning Display */
+.reasoning-display {
+    margin-top: 5px;
+    font-size: 0.9em;
+    color: #aaa;
+    padding: 4px;
+    background-color: rgba(255, 165, 0, 0.3); /* Light orange background */
+    border-radius: 4px;
+    display: inline-block; /* Fit content */
+}
+
 @media screen and (max-width: 780px){
     .menu{
     background-color: rgba(20, 20, 20);