1 files changed, 26 insertions, 8 deletions

diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css
index 3e2d6d6f..59464272 100644
--- a/g4f/gui/client/css/style.css
+++ b/g4f/gui/client/css/style.css
@@ -217,7 +217,6 @@ body {
 }
 
 .message {
-
     width: 100%;
     overflow-wrap: break-word;
     display: flex;
@@ -302,10 +301,14 @@ body {
     line-height: 1.3;
     color: var(--colour-3);
 }
-.message .content pre {
+.message .content pre{
     white-space: pre-wrap;
 }
 
+.message .content img{
+    max-width: 400px;
+}
+
 .message .user i {
     position: absolute;
     bottom: -6px;
@@ -401,13 +404,28 @@ body {
     display: none;
 }
 
-input[type="checkbox"] {
+#image {
+    display: none;
+}
+
+label[for="image"]:has(> input:valid){
+    color: var(--accent);
+}
+
+label[for="image"] {
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+.buttons input[type="checkbox"] {
     height: 0;
     width: 0;
     display: none;
 }
 
-label {
+.buttons label {
     cursor: pointer;
     text-indent: -9999px;
     width: 50px;
@@ -424,7 +442,7 @@ label {
     transition: 0.33s;
 }
 
-label:after {
+.buttons label:after {
     content: "";
     position: absolute;
     top: 50%;
@@ -437,11 +455,11 @@ label:after {
     transition: 0.33s;
 }
 
-input:checked+label {
-    background: var(--blur-border);
+.buttons input:checked+label {
+    background: var(--accent);
 }
 
-input:checked+label:after {
+.buttons input:checked+label:after {
     left: calc(100% - 5px - 20px);
 }