Hugging Face's logo

Spaces:
nagasurendra
/
chatcustomer1111
Sleeping

App Files Community
lokesh341 commited on
Commit
a2e8285
·
verified ·
1 Parent(s): a4cbba7

Update templates/chef-bot.html

Browse files
Files changed (1) hide show
  1. templates/chef-bot.html +336 -217
templates/chef-bot.html CHANGED
@@ -5,411 +5,530 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Chef Bot</title>
7
  <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
  margin: 0;
11
  padding: 0;
12
- background-color: #f0f2f5;
 
 
 
 
13
  overflow-x: hidden;
 
14
  }
15
 
16
  .chat-container {
17
  width: 100%;
18
- max-width: 100%;
19
  height: 100vh;
20
- border: 1px solid #ccc;
21
- border-radius: 0;
22
- background-color: white;
 
23
  display: flex;
24
  flex-direction: column;
25
- box-sizing: border-box;
26
  }
27
 
28
  .chat-header {
29
- background-color: #0288d1;
30
- color: white;
31
- padding: 8px;
32
  text-align: center;
33
- font-size: 16px;
 
34
  flex-shrink: 0;
35
  }
36
 
37
  .chat-messages {
38
  flex: 1;
39
  overflow-y: auto;
40
- padding: 5px;
41
- box-sizing: border-box;
42
  scroll-behavior: smooth;
43
  }
44
 
 
 
 
 
 
 
 
 
 
45
  .bot-message {
46
- background-color: #e3f2fd;
47
- padding: 8px;
48
- margin: 5px 0;
49
- border-radius: 5px;
50
- max-width: 85%;
51
- word-wrap: break-word;
52
- font-size: 12px;
53
  }
54
 
55
  .user-message {
56
- background-color: #ffebee;
57
- padding: 8px;
58
- margin: 5px 0;
59
- border-radius: 5px;
60
- max-width: 85%;
61
  margin-left: auto;
62
- text-align: right;
63
- word-wrap: break-word;
64
- font-size: 12px;
65
  }
66
 
67
  .chat-input {
68
  display: flex;
69
- padding: 5px;
70
- border-top: 1px solid #ccc;
 
71
  flex-shrink: 0;
72
- position: fixed;
73
- bottom: 0;
74
- width: 100%;
75
- background-color: white;
76
- box-sizing: border-box;
77
  }
78
 
79
  .chat-input input {
80
  flex: 1;
81
- padding: 6px;
82
  border: 1px solid #ccc;
83
- border-radius: 5px;
84
- font-size: 12px;
85
- min-height: 35px;
86
- box-sizing: border-box;
87
  }
88
 
89
  .chat-input button {
90
- padding: 6px 10px;
91
- margin-left: 5px;
92
- background-color: #ff8f00;
93
- color: white;
94
  border: none;
95
- border-radius: 5px;
96
  cursor: pointer;
97
- font-size: 12px;
98
- min-height: 35px;
99
- min-width: 60px;
100
  }
101
 
102
- .chat-input button:active {
103
- background-color: #f57c00;
104
  }
105
 
106
  .items-grid {
107
  display: flex;
108
  flex-wrap: nowrap;
109
  overflow-x: auto;
110
- padding: 8px;
111
- margin: 5px 0;
112
- background-color: #f9f9f9;
113
- border-radius: 5px;
114
- gap: 8px;
115
  scroll-behavior: smooth;
116
  }
117
 
118
  .item-card {
119
- flex: 0 0 150px;
120
- background-color: white;
121
- border: 1px solid #ddd;
122
- border-radius: 6px;
123
- padding: 8px;
124
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
125
  }
126
 
127
- .item-card:active {
128
- transform: scale(0.98);
129
  }
130
 
131
  .item-image {
132
  width: 100%;
133
- height: 100px;
134
  object-fit: cover;
135
- border-radius: 5px;
136
- margin-bottom: 5px;
137
- }
138
-
139
- .item-content {
140
- width: 100%;
141
  }
142
 
143
  .item-name {
144
- font-size: 12px;
145
- font-weight: bold;
146
  color: #333;
147
- margin-bottom: 3px;
148
  }
149
 
150
  .item-field {
151
- font-size: 10px;
152
- margin: 2px 0;
153
  color: #555;
 
154
  }
155
 
156
  .item-field strong {
157
- color: #0288d1;
158
  }
159
 
160
  .item-description {
161
- font-size: 10px;
 
162
  margin: 5px 0;
163
- color: #555;
164
  }
165
 
166
  .button-container {
167
  display: flex;
168
- gap: 5px;
169
- margin-top: 5px;
170
  }
171
 
172
- .show-button {
173
- padding: 4px;
174
- background-color: #0288d1;
175
- color: white;
176
  border: none;
177
- border-radius: 5px;
178
  cursor: pointer;
179
- font-size: 10px;
180
  flex: 1;
181
- min-width: 40px;
182
  }
183
 
184
- .show-button:active {
185
- background-color: #0277bd;
 
 
 
 
 
186
  }
187
 
188
  .add-button {
189
- padding: 4px;
190
- background-color: #4caf50;
191
- color: white;
192
- border: none;
193
- border-radius: 5px;
194
- cursor: pointer;
195
- font-size: 10px;
196
- flex: 1;
197
- min-width: 40px;
198
  }
199
 
200
- .add-button:active {
201
- background-color: #45a049;
202
  }
203
 
204
  .options-container {
205
  display: flex;
206
  flex-wrap: wrap;
207
- gap: 5px;
208
- margin: 5px 0;
209
  }
210
 
211
  .option-button {
212
- padding: 6px 10px;
213
- margin: 3px;
214
- background-color: #7b1fa2;
215
- color: white;
216
  border: none;
217
- border-radius: 5px;
218
  cursor: pointer;
219
- font-size: 12px;
220
- min-width: 60px;
221
  }
222
 
223
- .option-button.green { background-color: #4caf50; }
224
- .option-button.red { background-color: #d32f2f; }
225
- .option-button.gray { background-color: #616161; }
226
- .option-button:active { opacity: 0.9; }
227
 
228
- .selection-box {
229
- background-color: #e1f5fe;
230
- padding: 8px;
231
- border: 1px solid #0288d1;
232
- border-radius: 5px;
233
- margin: 5px 0;
234
- font-size: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
235
  display: flex;
236
  flex-wrap: wrap;
237
  align-items: center;
238
- gap: 5px;
239
  }
240
 
241
- .selection-box span {
242
- background-color: #bbdefb;
243
- padding: 3px 8px;
244
- border-radius: 5px;
245
- font-size: 12px;
246
  }
247
 
248
  .selected-item {
249
  display: flex;
250
  align-items: center;
251
- background-color: #bbdefb;
252
- padding: 3px 8px;
253
- border-radius: 5px;
254
- font-size: 11px;
255
  }
256
 
257
  .selected-item-image {
258
- width: 25px;
259
- height: 25px;
260
  object-fit: cover;
261
- border-radius: 5px;
262
- margin-right: 5px;
263
  }
264
 
265
  .submit-button {
266
- padding: 6px 10px;
267
- background-color: #0288d1;
268
- color: white;
269
  border: none;
270
- border-radius: 5px;
271
  cursor: pointer;
272
- font-size: 12px;
273
- min-width: 60px;
274
  }
275
 
276
- .submit-button:active {
277
- background-color: #0277bd;
278
  }
279
 
280
  .remove-button {
281
- padding: 3px 6px;
282
- margin-left: 5px;
283
- background-color: #d32f2f;
284
- color: white;
285
  border: none;
286
- border-radius: 5px;
287
  cursor: pointer;
288
- font-size: 10px;
289
  }
290
 
291
- .remove-button:active {
292
- background-color: #b71c1c;
293
  }
294
 
295
  .manual-input, .custom-input, .submit-input {
296
- padding: 4px;
297
- border: 1px solid #0288d1;
298
- border-radius: 5px;
299
- font-size: 12px;
300
- width: 100px;
 
301
  }
302
 
303
  .quantity-input {
304
- padding: 4px;
305
- border: 1px solid #0288d1;
306
- border-radius: 5px;
307
- font-size: 12px;
308
- width: 50px;
 
309
  }
310
 
311
  .order-name-input {
312
- padding: 4px;
313
- border: 1px solid #0288d1;
314
- border-radius: 5px;
315
- font-size: 12px;
316
- width: 100px;
 
317
  }
318
 
319
  .sector-buttons {
320
  display: flex;
321
- gap: 5px;
322
- margin: 5px 0;
323
  }
324
 
 
325
  @media (max-width: 480px) {
 
 
 
 
 
326
  .chat-header {
327
- font-size: 14px;
328
- padding: 6px;
329
  }
 
330
  .chat-messages {
331
- padding: 3px;
332
  }
 
333
  .bot-message, .user-message {
334
- font-size: 11px;
335
- padding: 6px;
336
- margin: 3px 0;
337
  }
 
338
  .chat-input input {
339
- font-size: 11px;
340
- min-height: 30px;
341
- padding: 5px;
342
  }
 
343
  .chat-input button {
344
- font-size: 11px;
345
- min-height: 30px;
346
- padding: 5px 8px;
347
- min-width: 50px;
348
  }
 
349
  .items-grid {
350
  flex-direction: column;
351
- overflow-x: hidden;
352
- gap: 6px;
353
- padding: 6px;
354
  }
 
355
  .item-card {
356
- width: 100%;
357
  flex: 0 0 auto;
358
- max-width: 120px;
 
359
  }
 
360
  .item-image {
361
- height: 80px;
362
  }
 
363
  .item-name {
364
- font-size: 10px;
365
  }
 
366
  .item-field, .item-description {
367
- font-size: 9px;
368
  }
 
369
  .show-button, .add-button {
370
- font-size: 9px;
371
- padding: 3px;
372
- min-width: 35px;
373
- }
374
- .option-button {
375
  font-size: 11px;
376
- padding: 5px 8px;
377
- min-width: 50px;
378
- }
379
- .selection-box {
380
  padding: 6px;
381
- gap: 3px;
382
  }
383
- .selection-box span {
384
- font-size: 11px;
385
- padding: 2px 6px;
 
 
 
 
 
 
386
  }
 
387
  .selected-item {
388
- font-size: 10px;
389
- padding: 2px 6px;
390
  }
 
391
  .selected-item-image {
392
- width: 20px;
393
- height: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
394
  }
 
395
  .submit-button {
396
- font-size: 11px;
397
- padding: 5px 8px;
398
- min-width: 50px;
399
  }
 
400
  .remove-button {
401
- font-size: 9px;
402
- padding: 2px 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
403
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
404
  .manual-input, .custom-input, .submit-input, .order-name-input {
405
- width: 80px;
406
- font-size: 11px;
407
- padding: 3px;
408
  }
 
409
  .quantity-input {
410
- width: 40px;
411
- font-size: 11px;
412
- padding: 3px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
413
  }
414
  }
415
  </style>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Chef Bot</title>
7
  <style>
8
+ * {
9
+ box-sizing: border-box;
10
  margin: 0;
11
  padding: 0;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Segoe UI', Arial, sans-serif;
16
+ background-color: #f4f7fa;
17
  overflow-x: hidden;
18
+ line-height: 1.5;
19
  }
20
 
21
  .chat-container {
22
  width: 100%;
23
+ max-width: 800px;
24
  height: 100vh;
25
+ margin: 0 auto;
26
+ background-color: #ffffff;
27
+ border-radius: 12px;
28
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
29
  display: flex;
30
  flex-direction: column;
31
+ overflow: hidden;
32
  }
33
 
34
  .chat-header {
35
+ background-color: #0078d4;
36
+ color: #ffffff;
37
+ padding: 12px;
38
  text-align: center;
39
+ font-size: 18px;
40
+ font-weight: 600;
41
  flex-shrink: 0;
42
  }
43
 
44
  .chat-messages {
45
  flex: 1;
46
  overflow-y: auto;
47
+ padding: 15px;
 
48
  scroll-behavior: smooth;
49
  }
50
 
51
+ .bot-message, .user-message {
52
+ padding: 10px 15px;
53
+ margin: 8px 0;
54
+ border-radius: 12px;
55
+ max-width: 80%;
56
+ font-size: 14px;
57
+ line-height: 1.4;
58
+ }
59
+
60
  .bot-message {
61
+ background-color: #e8f0fe;
62
+ color: #333;
 
 
 
 
 
63
  }
64
 
65
  .user-message {
66
+ background-color: #0078d4;
67
+ color: #ffffff;
 
 
 
68
  margin-left: auto;
 
 
 
69
  }
70
 
71
  .chat-input {
72
  display: flex;
73
+ padding: 10px;
74
+ border-top: 1px solid #e0e0e0;
75
+ background-color: #f9f9f9;
76
  flex-shrink: 0;
 
 
 
 
 
77
  }
78
 
79
  .chat-input input {
80
  flex: 1;
81
+ padding: 10px;
82
  border: 1px solid #ccc;
83
+ border-radius: 8px;
84
+ font-size: 14px;
85
+ outline: none;
 
86
  }
87
 
88
  .chat-input button {
89
+ padding: 10px 20px;
90
+ margin-left: 10px;
91
+ background-color: #0078d4;
92
+ color: #ffffff;
93
  border: none;
94
+ border-radius: 8px;
95
  cursor: pointer;
96
+ font-size: 14px;
97
+ transition: background-color 0.2s;
 
98
  }
99
 
100
+ .chat-input button:hover {
101
+ background-color: #005ea2;
102
  }
103
 
104
  .items-grid {
105
  display: flex;
106
  flex-wrap: nowrap;
107
  overflow-x: auto;
108
+ padding: 10px;
109
+ margin: 10px 0;
110
+ background-color: #f5f7fa;
111
+ border-radius: 10px;
112
+ gap: 15px;
113
  scroll-behavior: smooth;
114
  }
115
 
116
  .item-card {
117
+ flex: 0 0 200px;
118
+ background-color: #ffffff;
119
+ border: 1px solid #e0e0e0;
120
+ border-radius: 10px;
121
+ padding: 10px;
122
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
123
+ transition: transform 0.2s;
124
  }
125
 
126
+ .item-card:hover {
127
+ transform: translateY(-2px);
128
  }
129
 
130
  .item-image {
131
  width: 100%;
132
+ height: 120px;
133
  object-fit: cover;
134
+ border-radius: 8px;
135
+ margin-bottom: 8px;
 
 
 
 
136
  }
137
 
138
  .item-name {
139
+ font-size: 14px;
140
+ font-weight: 600;
141
  color: #333;
142
+ margin-bottom: 5px;
143
  }
144
 
145
  .item-field {
146
+ font-size: 12px;
 
147
  color: #555;
148
+ margin: 3px 0;
149
  }
150
 
151
  .item-field strong {
152
+ color: #0078d4;
153
  }
154
 
155
  .item-description {
156
+ font-size: 12px;
157
+ color: #666;
158
  margin: 5px 0;
 
159
  }
160
 
161
  .button-container {
162
  display: flex;
163
+ gap: 8px;
164
+ margin-top: 8px;
165
  }
166
 
167
+ .show-button, .add-button {
168
+ padding: 8px;
 
 
169
  border: none;
170
+ border-radius: 6px;
171
  cursor: pointer;
172
+ font-size: 12px;
173
  flex: 1;
 
174
  }
175
 
176
+ .show-button {
177
+ background-color: #0078d4;
178
+ color: #ffffff;
179
+ }
180
+
181
+ .show-button:hover {
182
+ background-color: #005ea2;
183
  }
184
 
185
  .add-button {
186
+ background-color: #28a745;
187
+ color: #ffffff;
 
 
 
 
 
 
 
188
  }
189
 
190
+ .add-button:hover {
191
+ background-color: #218838;
192
  }
193
 
194
  .options-container {
195
  display: flex;
196
  flex-wrap: wrap;
197
+ gap: 10px;
198
+ margin: 10px 0;
199
  }
200
 
201
  .option-button {
202
+ padding: 10px 20px;
203
+ background-color: #6c757d;
204
+ color: #ffffff;
 
205
  border: none;
206
+ border-radius: 8px;
207
  cursor: pointer;
208
+ font-size: 14px;
209
+ transition: background-color 0.2s;
210
  }
211
 
212
+ .option-button.green {
213
+ background-color: #28a745;
214
+ }
 
215
 
216
+ .option-button.green:hover {
217
+ background-color: #218838;
218
+ }
219
+
220
+ .option-button.red {
221
+ background-color: #dc3545;
222
+ }
223
+
224
+ .option-button.red:hover {
225
+ background-color: #c82333;
226
+ }
227
+
228
+ .selection-box, .custom-box, .submit-box {
229
+ background-color: #f1f8ff;
230
+ padding: 15px;
231
+ border: 1px solid #b3d7ff;
232
+ border-radius: 10px;
233
+ margin: 10px 0;
234
+ font-size: 14px;
235
  display: flex;
236
  flex-wrap: wrap;
237
  align-items: center;
238
+ gap: 10px;
239
  }
240
 
241
+ .selection-box span, .custom-box span, .submit-box span {
242
+ background-color: #d6e9ff;
243
+ padding: 5px 10px;
244
+ border-radius: 6px;
245
+ font-size: 13px;
246
  }
247
 
248
  .selected-item {
249
  display: flex;
250
  align-items: center;
251
+ background-color: #d6e9ff;
252
+ padding: 5px 10px;
253
+ border-radius: 6px;
254
+ font-size: 13px;
255
  }
256
 
257
  .selected-item-image {
258
+ width: 30px;
259
+ height: 30px;
260
  object-fit: cover;
261
+ border-radius: 6px;
262
+ margin-right: 8px;
263
  }
264
 
265
  .submit-button {
266
+ padding: 10px 20px;
267
+ background-color: #0078d4;
268
+ color: #ffffff;
269
  border: none;
270
+ border-radius: 8px;
271
  cursor: pointer;
272
+ font-size: 14px;
273
+ transition: background-color 0.2s;
274
  }
275
 
276
+ .submit-button:hover {
277
+ background-color: #005ea2;
278
  }
279
 
280
  .remove-button {
281
+ padding: 5px 10px;
282
+ margin-left: 8px;
283
+ background-color: #dc3545;
284
+ color: #ffffff;
285
  border: none;
286
+ border-radius: 6px;
287
  cursor: pointer;
288
+ font-size: 12px;
289
  }
290
 
291
+ .remove-button:hover {
292
+ background-color: #c82333;
293
  }
294
 
295
  .manual-input, .custom-input, .submit-input {
296
+ padding: 8px;
297
+ border: 1px solid #b3d7ff;
298
+ border-radius: 6px;
299
+ font-size: 14px;
300
+ width: 150px;
301
+ outline: none;
302
  }
303
 
304
  .quantity-input {
305
+ padding: 8px;
306
+ border: 1px solid #b3d7ff;
307
+ border-radius: 6px;
308
+ font-size: 14px;
309
+ width: 60px;
310
+ outline: none;
311
  }
312
 
313
  .order-name-input {
314
+ padding: 8px;
315
+ border: 1px solid #b3d7ff;
316
+ border-radius: 6px;
317
+ font-size: 14px;
318
+ width: 150px;
319
+ outline: none;
320
  }
321
 
322
  .sector-buttons {
323
  display: flex;
324
+ gap: 10px;
325
+ margin: 10px 0;
326
  }
327
 
328
+ /* Responsive Design */
329
  @media (max-width: 480px) {
330
+ .chat-container {
331
+ border-radius: 0;
332
+ box-shadow: none;
333
+ }
334
+
335
  .chat-header {
336
+ font-size: 16px;
337
+ padding: 10px;
338
  }
339
+
340
  .chat-messages {
341
+ padding: 10px;
342
  }
343
+
344
  .bot-message, .user-message {
345
+ font-size: 13px;
346
+ padding: 8px 12px;
347
+ margin: 5px 0;
348
  }
349
+
350
  .chat-input input {
351
+ font-size: 13px;
352
+ padding: 8px;
 
353
  }
354
+
355
  .chat-input button {
356
+ font-size: 13px;
357
+ padding: 8px 15px;
 
 
358
  }
359
+
360
  .items-grid {
361
  flex-direction: column;
362
+ gap: 10px;
363
+ padding: 8px;
 
364
  }
365
+
366
  .item-card {
 
367
  flex: 0 0 auto;
368
+ width: 100%;
369
+ max-width: 250px;
370
  }
371
+
372
  .item-image {
373
+ height: 100px;
374
  }
375
+
376
  .item-name {
377
+ font-size: 13px;
378
  }
379
+
380
  .item-field, .item-description {
381
+ font-size: 11px;
382
  }
383
+
384
  .show-button, .add-button {
 
 
 
 
 
385
  font-size: 11px;
 
 
 
 
386
  padding: 6px;
 
387
  }
388
+
389
+ .option-button {
390
+ font-size: 13px;
391
+ padding: 8px 15px;
392
+ }
393
+
394
+ .selection-box, .custom-box, .submit-box {
395
+ padding: 10px;
396
+ gap: 8px;
397
  }
398
+
399
  .selected-item {
400
+ font-size: 12px;
401
+ padding: 4px 8px;
402
  }
403
+
404
  .selected-item-image {
405
+ width: 25px;
406
+ height: 25px;
407
+ }
408
+
409
+ .manual-input, .custom-input, .submit-input, .order-name-input {
410
+ width: 120px;
411
+ font-size: 13px;
412
+ padding: 6px;
413
+ }
414
+
415
+ .quantity-input {
416
+ width: 50px;
417
+ font-size: 13px;
418
+ padding: 6px;
419
  }
420
+
421
  .submit-button {
422
+ font-size: 13px;
423
+ padding: 8px 15px;
 
424
  }
425
+
426
  .remove-button {
427
+ font-size: 11px;
428
+ padding: 4px 8px;
429
+ }
430
+ }
431
+
432
+ @media (min-width: 481px) and (max-width: 768px) {
433
+ .chat-container {
434
+ max-width: 600px;
435
+ }
436
+
437
+ .chat-header {
438
+ font-size: 17px;
439
+ padding: 11px;
440
+ }
441
+
442
+ .chat-messages {
443
+ padding: 12px;
444
+ }
445
+
446
+ .bot-message, .user-message {
447
+ font-size: 14px;
448
+ padding: 9px 14px;
449
+ }
450
+
451
+ .chat-input input {
452
+ font-size: 14px;
453
+ padding: 9px;
454
+ }
455
+
456
+ .chat-input button {
457
+ font-size: 14px;
458
+ padding: 9px 18px;
459
  }
460
+
461
+ .items-grid {
462
+ gap: 12px;
463
+ }
464
+
465
+ .item-card {
466
+ flex: 0 0 180px;
467
+ }
468
+
469
+ .item-image {
470
+ height: 110px;
471
+ }
472
+
473
+ .item-name {
474
+ font-size: 14px;
475
+ }
476
+
477
+ .item-field, .item-description {
478
+ font-size: 12px;
479
+ }
480
+
481
+ .show-button, .add-button {
482
+ font-size: 12px;
483
+ padding: 7px;
484
+ }
485
+
486
+ .option-button {
487
+ font-size: 14px;
488
+ padding: 9px 18px;
489
+ }
490
+
491
+ .selection-box, .custom-box, .submit-box {
492
+ padding: 12px;
493
+ gap: 9px;
494
+ }
495
+
496
+ .selected-item {
497
+ font-size: 13px;
498
+ padding: 5px 9px;
499
+ }
500
+
501
+ .selected-item-image {
502
+ width: 28px;
503
+ height: 28px;
504
+ }
505
+
506
  .manual-input, .custom-input, .submit-input, .order-name-input {
507
+ width: 140px;
508
+ font-size: 14px;
509
+ padding: 7px;
510
  }
511
+
512
  .quantity-input {
513
+ width: 55px;
514
+ font-size: 14px;
515
+ padding: 7px;
516
+ }
517
+
518
+ .submit-button {
519
+ font-size: 14px;
520
+ padding: 9px 18px;
521
+ }
522
+
523
+ .remove-button {
524
+ font-size: 12px;
525
+ padding: 5px 9px;
526
+ }
527
+ }
528
+
529
+ @media (min-width: 769px) {
530
+ .chat-container {
531
+ max-width: 800px;
532
  }
533
  }
534
  </style>