Update static/styles.css

static/styles.css

@@ -135,7 +135,7 @@ body {
     color: #333;
 }
 
-.show-desc-button, .add-button {
+.show-desc-button {
     padding: 5px 10px;
     margin-top: 5px;
     background-color: #4caf50;
@@ -147,7 +147,7 @@ body {
     width: 100%;
 }
 
-.show-desc-button:hover, .add-button:hover {
+.show-desc-button:hover {
     background-color: #45a049;
 }
 
@@ -268,16 +268,6 @@ body {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.popup-content ul {
-    text-align: left;
-    margin: 10px 0;
-}
-
-.popup-content ul li {
-    margin: 5px 0;
-    font-size: 12px;
-}
-
 .popup-image {
     width: 80px;
     height: 80px;
@@ -286,6 +276,12 @@ body {
     margin-bottom: 10px;
 }
 
+.menu-item-field {
+    margin: 5px 0;
+    font-size: 12px;
+    text-align: left;
+}
+
 .button-container {
     display: flex;
     justify-content: center;
@@ -319,7 +315,21 @@ body {
     background-color: #b71c1c;
 }
 
-/* Mobile Responsiveness */
+.dietary-button {
+    padding: 5px 10px;
+    margin-right: 5px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 12px;
+    color: white;
+}
+
+.dietary-button.green { background-color: #4caf50; }
+.dietary-button.red { background-color: #d32f2f; }
+.dietary-button.gray { background-color: #616161; }
+.dietary-button:hover { opacity: 0.9; }
+
 @media (max-width: 768px) {
     .chat-container {
         height: 100vh;
@@ -346,7 +356,7 @@ body {
     .ingredient-name {
         font-size: 10px;
     }
-    .show-desc-button, .add-button {
+    .show-desc-button {
         font-size: 8px;
         padding: 3px 6px;
     }
@@ -354,9 +364,6 @@ body {
         max-width: 85%;
         padding: 10px;
     }
-    .popup-content ul li {
-        font-size: 10px;
-    }
     .popup-image {
         width: 60px;
         height: 60px;
@@ -365,6 +372,9 @@ body {
         padding: 4px 8px;
         font-size: 10px;
     }
+    .menu-item-field {
+        font-size: 10px;
+    }
     .selection-box {
         gap: 5px;
     }