Update static/styles.css

static/styles.css

@@ -183,6 +183,67 @@ body {
     word-wrap: break-word;
 }
 
+/* Menu items list */
+.menu-items-list {
+    max-height: 200px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    padding: 10px;
+    margin: 10px 0;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+    display: flex;
+    gap: 10px;
+}
+
+.menu-items-list .menu-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 15px;
+}
+
+.menu-items-list img {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 5px;
+}
+
+.menu-items-list button {
+    padding: 5px 10px;
+    margin-top: 5px;
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.menu-items-list button:hover {
+    background-color: #45a049;
+}
+
+/* Customization input box */
+.customization-input {
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f0f0f0;
+}
+
+.customization-input textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 14px;
+    min-height: 60px;
+}
+
 /* Media Queries */
 @media (max-width: 768px) {
     .chat-container {
@@ -212,11 +273,13 @@ body {
         min-width: 90px;
     }
 
-    .ingredients-list {
+    .ingredients-list,
+    .menu-items-list {
         max-height: 150px;
     }
 
-    .ingredients-list img {
+    .ingredients-list img,
+    .menu-items-list img {
         width: 60px;
         height: 60px;
     }
@@ -251,11 +314,13 @@ body {
         min-width: 120px;
     }
 
-    .ingredients-list {
+    .ingredients-list,
+    .menu-items-list {
         max-height: 250px;
     }
 
-    .ingredients-list img {
+    .ingredients-list img,
+    .menu-items-list img {
         width: 100px;
         height: 100px;
     }