@hellobetterdigitalnz/selwynui 0.0.1-31 → 0.0.1-32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs.js +4 -4
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +801 -839
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/selwynui.css +1 -1
  6. package/package.json +1 -1
  7. package/src/Components/DataDisplay/ChatItenaryBlock/chatItenaryBlock.module.scss +720 -729
package/src/Components/DataDisplay/ChatItenaryBlock/chatItenaryBlock.module.scss CHANGED
@@ -1,729 +1,720 @@
1
- .mainContainer {
2
- position: relative;
3
- z-index: 10;
4
- width: 100%;
5
- }
6
-
7
- .chatItineraryBlock {
8
- transition: all 0.5s ease;
9
-
10
- &.hero {
11
- display: flex;
12
- flex-direction: column;
13
- }
14
-
15
- &.itinerary {
16
- padding: 48px 0 96px;
17
- border-top: 1px solid var(--color-taste);
18
-
19
- @media (max-width: 834px) {
20
- padding: 24px 0 48px;
21
- }
22
- }
23
- }
24
-
25
- .heroBackground {
26
- min-height: calc(100vh - 100px);
27
- position: relative;
28
- border-top: 1px solid var(--color-taste);
29
- display: flex;
30
- overflow: hidden;
31
-
32
- &::after {
33
- content: '';
34
- position: absolute;
35
- right: 0;
36
- top: 0;
37
- bottom: 0;
38
- width: 67%;
39
- background-image: url('https://images.pexels.com/photos/1365425/pexels-photo-1365425.jpeg');
40
- border-radius: 10000px 0 0 0;
41
- background-size: cover;
42
- background-position: center;
43
- z-index: 0;
44
-
45
- @media (max-width: 1024px) {
46
- display: none;
47
- }
48
- }
49
-
50
- @media (max-width: 834px) {
51
- min-height: calc(100vh - 80px);
52
- }
53
- }
54
-
55
- .heroContent {
56
- position: relative;
57
- padding-top: 96px;
58
- z-index: 2;
59
- width: 46%;
60
- min-width: 662px;
61
- display: flex;
62
- flex-direction: column;
63
- justify-content: flex-start;
64
- padding-left: 120px;
65
- padding-right: 24px;
66
-
67
- .titleHeader {
68
- padding-bottom: 72px;
69
- letter-spacing: -2.88px;
70
-
71
- @media (max-width: 834px) {
72
- padding-bottom: 40px;
73
- }
74
- }
75
-
76
- h1 {
77
- font-size: var(--font-size-h3);
78
- font-weight: var(--font-weight-body-regular);
79
- line-height: 1;
80
-
81
- @media (max-width: 834px) {
82
- font-size: var(--font-size-h4);
83
- }
84
-
85
- @media (max-width: 480px) {
86
- font-size: var(--font-size-h5);
87
- }
88
- }
89
-
90
- .highlight {
91
- font-weight: var(--font-weight-h5);
92
- }
93
-
94
- .subtitle {
95
- font-size: var(--font-size-h6);
96
- line-height: var(--line-height-h6);
97
- margin: 0 0 72px 0;
98
-
99
- @media (max-width: 834px) {
100
- font-size: var(--font-size-body-regular);
101
- margin: 0 0 40px 0;
102
- }
103
- }
104
-
105
- @media (max-width: 1024px) {
106
- width: 100%;
107
- min-width: 0;
108
- padding: 96px 24px 0 24px;
109
- }
110
-
111
- @media (max-width: 834px) {
112
- padding: 60px 24px 0 24px;
113
- }
114
-
115
- @media (max-width: 480px) {
116
- padding: 40px 16px 0 16px;
117
- }
118
- }
119
-
120
- .inputWrapper {
121
- width: 100%;
122
- max-width: 600px;
123
-
124
- @media (max-width: 834px) {
125
- max-width: 100%;
126
- }
127
- }
128
-
129
- .inputBox {
130
- background: var(--bg-modal-color);
131
- border-radius: var(--tw-8, 32px);
132
- border: 2px solid var(--color-taste);
133
- padding: 24px 24px 24px 24px;
134
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
135
- width: 100%;
136
- min-height: 200px;
137
- display: flex;
138
- flex-direction: column;
139
-
140
- @media (max-width: 834px) {
141
- padding: 16px;
142
- min-height: 180px;
143
- }
144
-
145
- textarea {
146
- width: 100%;
147
- flex: 1;
148
- border: none;
149
- outline: none;
150
- font-size: 18px;
151
- resize: none;
152
- font-family: inherit;
153
- color: var(--header-bg);
154
- margin-bottom: 16px;
155
-
156
- @media (max-width: 834px) {
157
- font-size: 16px;
158
- }
159
-
160
- &::placeholder {
161
- color: var(--header-bg);
162
-
163
- @media (max-width: 834px) {
164
- font-size: var(--font-size-body-sm);
165
- }
166
- }
167
- }
168
- }
169
-
170
- .inputActions {
171
- display: flex;
172
- flex-direction: row;
173
- justify-content: space-between;
174
- align-items: center;
175
- gap: 12px;
176
-
177
- @media (max-width: 834px) {
178
- gap: 8px;
179
- }
180
- }
181
-
182
- .attachButton {
183
- background: none;
184
- border: 1px solid var(--color-bg);
185
- cursor: pointer;
186
- padding: 12px;
187
- display: flex;
188
- align-items: center;
189
- justify-content: center;
190
- transition: all 0.3s ease;
191
- border-radius: 48px;
192
- width: 88px;
193
- height: 51px;
194
- flex-shrink: 0;
195
-
196
- svg {
197
- width: 24px;
198
- height: 24px;
199
- color: var(--color-bg);
200
- }
201
-
202
- @media (max-width: 834px) {
203
- width: 48px;
204
- height: 48px;
205
- padding: 8px;
206
-
207
- svg {
208
- width: 20px;
209
- height: 20px;
210
- }
211
- }
212
- }
213
-
214
- .planButton {
215
- flex: 1;
216
- display: flex;
217
- justify-content: flex-end;
218
- min-width: 0;
219
-
220
- button {
221
- width: 100%;
222
- max-width: none;
223
- }
224
-
225
- .planButtonDesktop {
226
- display: block;
227
-
228
- @media (max-width: 768px) {
229
- display: none;
230
- }
231
- }
232
-
233
- .planButtonMobile {
234
- background: var(--color-bg);
235
- cursor: pointer;
236
- border: none;
237
- align-items: center;
238
- justify-content: center;
239
- border-radius: 48px;
240
- flex-shrink: 0;
241
- height: 48px;
242
- width: 48px;
243
- display: none;
244
- padding: 0;
245
-
246
- svg {
247
- color: var(--color-taste);
248
- width: 20px;
249
- height: 20px;
250
- }
251
-
252
- @media (max-width: 768px) {
253
- display: flex;
254
- }
255
- }
256
- }
257
-
258
- .itineraryContainer {
259
- position: relative;
260
- min-height: 100vh;
261
- display: flex;
262
- flex-direction: column;
263
- }
264
-
265
- .chatItineraryBlock {
266
- transition: all 0.5s ease;
267
-
268
- &.hero {
269
- display: flex;
270
- flex-direction: column;
271
- }
272
-
273
- &.itinerary {
274
- padding: 48px 0 0;
275
- border-top: 1px solid var(--color-taste);
276
- flex: 1;
277
- display: flex;
278
- flex-direction: column;
279
- overflow: hidden;
280
- height: calc(100vh - 80px); // Adjust based on header height
281
-
282
- @media (max-width: 834px) {
283
- padding: 24px 0 0;
284
- height: calc(100vh - 60px); // Smaller header on mobile
285
- }
286
- }
287
- }
288
-
289
- .itineraryWrapper {
290
- background: var(--color-sand);
291
- border-radius: 16px;
292
- padding: 40px;
293
- position: relative;
294
- animation: fadeIn 0.5s ease;
295
- width: 100%;
296
- overflow-y: auto;
297
- overflow-x: hidden;
298
- max-height: calc(100vh - 380px);
299
-
300
- @media (max-width: 834px) {
301
- padding: 24px 16px;
302
- border-radius: 8px;
303
- max-height: calc(100vh - 320px);
304
- }
305
-
306
- // Optional: Style the scrollbar
307
- &::-webkit-scrollbar {
308
- width: 8px;
309
- }
310
-
311
- &::-webkit-scrollbar-track {
312
- background: rgba(0, 0, 0, 0.05);
313
- border-radius: 4px;
314
- }
315
-
316
- &::-webkit-scrollbar-thumb {
317
- background: rgba(0, 0, 0, 0.2);
318
- border-radius: 4px;
319
-
320
- &:hover {
321
- background: rgba(0, 0, 0, 0.3);
322
- }
323
- }
324
- }
325
-
326
- .bottomSpacer {
327
- //height: 40px; // Reduced since we're scrolling within container
328
- //
329
- //@media (max-width: 834px) {
330
- // height: 20px;
331
- //}
332
- }
333
-
334
- // Keep all other styles the same...
335
- .fixedFooter {
336
- position: fixed;
337
- bottom: 24px;
338
- left: 0;
339
- right: 0;
340
- z-index: 100;
341
-
342
-
343
- @media (max-width: 834px) {
344
- padding: 16px 0;
345
- }
346
- }
347
-
348
- .footerContent {
349
- display: flex;
350
- flex-direction: column;
351
- padding: 24px 24px 24px 24px;
352
- background-color: var(--color-sand);
353
- border-radius: 12px;
354
- gap: 16px;
355
- box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
356
-
357
-
358
- @media (max-width: 834px) {
359
- gap: 12px;
360
- }
361
- }
362
-
363
-
364
- @keyframes fadeIn {
365
- from {
366
- opacity: 0;
367
- transform: translateY(20px);
368
- }
369
- to {
370
- opacity: 1;
371
- transform: translateY(0);
372
- }
373
- }
374
-
375
- .itineraryTitle {
376
- font-size: var(--font-size-h4);
377
- font-weight: var(--font-weight-bold);
378
- line-height: var(--line-height-h3);
379
- letter-spacing: -1.92px;
380
- color: var(--header-bg);
381
- margin: 0 0 72px 0;
382
-
383
- @media (max-width: 834px) {
384
- font-size: var(--font-size-h5);
385
- margin: 0 0 40px 0;
386
- }
387
- }
388
-
389
- .conversation {
390
- margin-bottom: 40px;
391
-
392
- @media (max-width: 834px) {
393
- margin-bottom: 24px;
394
- }
395
- }
396
-
397
- .assistantMessage {
398
- font-size: var(--font-size-label);
399
- line-height: var(--line-height-body-regular);
400
- font-weight: var(--font-weight-h4);
401
- color: var(--header-bg);
402
- margin: 0 0 20px 0;
403
- padding: 16px;
404
- background: var(--color-sand);
405
- border-radius: 24px;
406
-
407
- @media (max-width: 834px) {
408
- font-size: var(--font-size-body-sm);
409
- padding: 12px;
410
- }
411
- }
412
-
413
- .userMessage {
414
- margin: 20px 0;
415
- display: flex;
416
- justify-content: flex-end;
417
-
418
- @media (max-width: 834px) {
419
- margin: 16px 0;
420
- }
421
-
422
- p {
423
- background: var(--bg-modal-color);
424
- padding: 16px;
425
- border-radius: 24px;
426
- max-width: 80%;
427
- margin: 0;
428
- font-size: 16px;
429
- line-height: var(--line-height-body-regular);
430
- font-weight: var(--font-weight-h4);
431
- color: var(--header-bg);
432
-
433
- @media (max-width: 834px) {
434
- font-size: var(--font-size-body-sm);
435
- padding: 12px;
436
- max-width: 90%;
437
- }
438
- }
439
- }
440
-
441
- .daySection {
442
- margin: 40px 0;
443
- padding: 48px 0;
444
-
445
- @media (max-width: 834px) {
446
- margin: 24px 0;
447
- padding: 24px 0;
448
- }
449
- }
450
-
451
- .dayHeader {
452
- display: flex;
453
- justify-content: space-between;
454
- align-items: center;
455
- margin-bottom: 16px;
456
-
457
- h3 {
458
- font-size: var(--font-size-h5);
459
- font-weight: var(--font-weight-bold);
460
- line-height: var(--line-height-h6);
461
- letter-spacing: -0.72px;
462
- margin: 0;
463
-
464
- @media (max-width: 834px) {
465
- font-size: var(--font-size-h6);
466
- }
467
- }
468
- }
469
-
470
- .navigationButtons {
471
- display: flex;
472
- gap: 8px;
473
-
474
- @media (max-width: 834px) {
475
- display: none;
476
- }
477
- }
478
-
479
- .navButtonRight {
480
- width: 40px;
481
- height: 40px;
482
- border-radius: 50%;
483
- background: var(--color-bg);
484
- border: none;
485
- color: var(--bg-modal-color);
486
- cursor: pointer;
487
- display: flex;
488
- align-items: center;
489
- justify-content: center;
490
-
491
- svg {
492
- width: 32px;
493
- height: 32px;
494
- }
495
- }
496
-
497
- .navButtonLeft {
498
- width: 40px;
499
- height: 40px;
500
- border-radius: 50%;
501
- background: none;
502
- border: 1px solid var(--color-bg);
503
- color: var(--color-bg);
504
- cursor: pointer;
505
- display: flex;
506
- align-items: center;
507
- justify-content: center;
508
-
509
- svg {
510
- width: 32px;
511
- height: 32px;
512
- }
513
- }
514
-
515
- .daySubtitle {
516
- font-size: 28px;
517
- font-weight: var(--font-weight-h4);
518
- line-height: var(--line-height-h6);
519
- letter-spacing: -0.56px;
520
- margin: 0 0 12px 0;
521
-
522
- @media (max-width: 834px) {
523
- font-size: var(--font-size-h7);
524
- }
525
- }
526
-
527
- .dayDescription {
528
- font-size: var(--font-size-body-regular);
529
- line-height: var(--line-height-body-regular);
530
- font-weight: var(--font-weight-h4);
531
- margin: 0 0 48px 0;
532
-
533
- @media (max-width: 834px) {
534
- font-size: var(--font-size-body-sm);
535
- margin: 0 0 24px 0;
536
- }
537
- }
538
-
539
- .downloadButton {
540
- padding-bottom: 72px;
541
-
542
- svg {
543
- width: 20px;
544
- height: 20px;
545
- }
546
-
547
- @media (max-width: 834px) {
548
- padding-bottom: 40px;
549
- }
550
- }
551
-
552
- .tags {
553
- display: flex;
554
- gap: 12px;
555
- margin: 0;
556
- flex-wrap: wrap;
557
-
558
- @media (max-width: 834px) {
559
- gap: 8px;
560
- }
561
- }
562
-
563
- .chatInput {
564
- display: flex;
565
- align-items: flex-end;
566
- padding: 16px;
567
- min-height: 162px;
568
- background: var(--bg-modal-color);
569
- border-radius: 12px;
570
- border: 2px solid var(--color-taste);
571
- margin: 0;
572
- width: 100%;
573
- box-sizing: border-box;
574
-
575
- @media (max-width: 834px) {
576
- padding: 12px;
577
- min-height: auto;
578
- }
579
-
580
- .chatInputBox {
581
- display: flex;
582
- flex-direction: row;
583
- justify-content: space-between;
584
- align-items: center;
585
- width: 100%;
586
- gap: 12px;
587
-
588
- @media (max-width: 834px) {
589
- gap: 8px;
590
- }
591
- }
592
-
593
- input {
594
- flex: 1;
595
- border: none;
596
- background: none;
597
- outline: none;
598
- font-size: 16px;
599
- min-width: 0;
600
-
601
- @media (max-width: 834px) {
602
- font-size: 14px;
603
- }
604
-
605
- }
606
- }
607
-
608
- .sendButton {
609
- width: 88px !important;
610
- height: 51px !important;
611
- border-radius: 48px;
612
- background: var(--color-bg);
613
- border: none;
614
- color: var(--bg-modal-color);
615
- cursor: pointer;
616
- display: flex;
617
- align-items: center;
618
- justify-content: center;
619
- transition: background 0.3s ease;
620
- flex-shrink: 0;
621
-
622
- &:hover {
623
- background: var(--color-bg);
624
- }
625
-
626
- svg {
627
- width: 20px;
628
- height: 20px;
629
- }
630
-
631
- @media (max-width: 834px) {
632
- width: 48px;
633
- height: 48px;
634
-
635
- svg {
636
- width: 18px;
637
- height: 18px;
638
- }
639
- }
640
- }
641
-
642
- .itinaryHeader {
643
- border-top: 1px solid var(--color-bg);
644
-
645
- h4 {
646
- font-size: var(--font-size-h4);
647
- color: var(--color-bg);
648
- font-weight: var(--font-weight-bold);
649
- line-height: var(--line-height-h3);
650
- letter-spacing: -1.92px;
651
- margin-top: 72px;
652
-
653
- @media (max-width: 834px) {
654
- font-size: var(--font-size-h5);
655
- margin-top: 40px;
656
- }
657
- }
658
-
659
- p {
660
- font-size: 28px;
661
- font-weight: var(--font-weight-h4);
662
- line-height: var(--line-height-h6);
663
- letter-spacing: -0.56px;
664
- color: var(--color-bg);
665
- margin-top: 48px;
666
-
667
- @media (max-width: 834px) {
668
- font-size: var(--font-size-h7);
669
- margin-top: 24px;
670
- }
671
- }
672
- }
673
-
674
- .heroSvg {
675
- color: var(--color-text);
676
- position: absolute;
677
- z-index: -5;
678
- left: 0;
679
- bottom: 0;
680
- height: 340px;
681
-
682
- @media (max-width: 1024px) {
683
- display: none;
684
- }
685
- }
686
-
687
- .chatButton {
688
- flex: 1;
689
- display: flex;
690
- justify-content: flex-end;
691
- min-width: 0;
692
-
693
- button {
694
- width: 100%;
695
- max-width: none;
696
- }
697
-
698
- .planButtonDesktop {
699
- display: block;
700
-
701
- @media (max-width: 768px) {
702
- display: none;
703
- }
704
- }
705
-
706
- .planButtonMobile {
707
- background: var(--color-bg);
708
- cursor: pointer;
709
- border: none;
710
- align-items: center;
711
- justify-content: center;
712
- border-radius: 48px;
713
- flex-shrink: 0;
714
- height: 48px;
715
- width: 48px;
716
- display: none;
717
- padding: 0;
718
-
719
- svg {
720
- color: var(--color-taste);
721
- width: 20px;
722
- height: 20px;
723
- }
724
-
725
- @media (max-width: 768px) {
726
- display: flex;
727
- }
728
- }
729
- }
1
+ //.mainContainer {
2
+ // position: relative;
3
+ // z-index: 10;
4
+ // width: 100%;
5
+ //}
6
+ //
7
+ //.chatItineraryBlock {
8
+ // transition: all 0.5s ease;
9
+ //
10
+ // &.hero {
11
+ // display: flex;
12
+ // flex-direction: column;
13
+ // }
14
+ //
15
+ // &.itinerary {
16
+ // padding: 48px 0 96px;
17
+ // border-top: 1px solid var(--color-taste);
18
+ //
19
+ // @media (max-width: 834px) {
20
+ // padding: 24px 0 48px;
21
+ // }
22
+ // }
23
+ //}
24
+ //
25
+ //.heroBackground {
26
+ // min-height: calc(100vh - 100px);
27
+ // position: relative;
28
+ // border-top: 1px solid var(--color-taste);
29
+ // display: flex;
30
+ // overflow: hidden;
31
+ //
32
+ // &::after {
33
+ // content: '';
34
+ // position: absolute;
35
+ // right: 0;
36
+ // top: 0;
37
+ // bottom: 0;
38
+ // width: 67%;
39
+ // background-image: url('https://images.pexels.com/photos/1365425/pexels-photo-1365425.jpeg');
40
+ // border-radius: 10000px 0 0 0;
41
+ // background-size: cover;
42
+ // background-position: center;
43
+ // z-index: 0;
44
+ //
45
+ // @media (max-width: 1024px) {
46
+ // display: none;
47
+ // }
48
+ // }
49
+ //
50
+ // @media (max-width: 834px) {
51
+ // min-height: calc(100vh - 80px);
52
+ // }
53
+ //}
54
+ //
55
+ //.heroContent {
56
+ // position: relative;
57
+ // padding-top: 96px;
58
+ // z-index: 2;
59
+ // width: 46%;
60
+ // min-width: 662px;
61
+ // display: flex;
62
+ // flex-direction: column;
63
+ // justify-content: flex-start;
64
+ // padding-left: 120px;
65
+ // padding-right: 24px;
66
+ //
67
+ // .titleHeader {
68
+ // padding-bottom: 72px;
69
+ // letter-spacing: -2.88px;
70
+ //
71
+ // @media (max-width: 834px) {
72
+ // padding-bottom: 40px;
73
+ // }
74
+ // }
75
+ //
76
+ // h1 {
77
+ // font-size: var(--font-size-h3);
78
+ // font-weight: var(--font-weight-body-regular);
79
+ // line-height: 1;
80
+ //
81
+ // @media (max-width: 834px) {
82
+ // font-size: var(--font-size-h4);
83
+ // }
84
+ //
85
+ // @media (max-width: 480px) {
86
+ // font-size: var(--font-size-h5);
87
+ // }
88
+ // }
89
+ //
90
+ // .highlight {
91
+ // font-weight: var(--font-weight-h5);
92
+ // }
93
+ //
94
+ // .subtitle {
95
+ // font-size: var(--font-size-h6);
96
+ // line-height: var(--line-height-h6);
97
+ // margin: 0 0 72px 0;
98
+ //
99
+ // @media (max-width: 834px) {
100
+ // font-size: var(--font-size-body-regular);
101
+ // margin: 0 0 40px 0;
102
+ // }
103
+ // }
104
+ //
105
+ // @media (max-width: 1024px) {
106
+ // width: 100%;
107
+ // min-width: 0;
108
+ // padding: 96px 24px 0 24px;
109
+ // }
110
+ //
111
+ // @media (max-width: 834px) {
112
+ // padding: 60px 24px 0 24px;
113
+ // }
114
+ //
115
+ // @media (max-width: 480px) {
116
+ // padding: 40px 16px 0 16px;
117
+ // }
118
+ //}
119
+ //
120
+ //.inputWrapper {
121
+ // width: 100%;
122
+ // max-width: 600px;
123
+ //
124
+ // @media (max-width: 834px) {
125
+ // max-width: 100%;
126
+ // }
127
+ //}
128
+ //
129
+ //.inputBox {
130
+ // background: var(--bg-modal-color);
131
+ // border-radius: var(--tw-8, 32px);
132
+ // border: 2px solid var(--color-taste);
133
+ // padding: 24px 24px 24px 24px;
134
+ // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
135
+ // width: 100%;
136
+ // min-height: 200px;
137
+ // display: flex;
138
+ // flex-direction: column;
139
+ //
140
+ // @media (max-width: 834px) {
141
+ // padding: 16px;
142
+ // min-height: 180px;
143
+ // }
144
+ //
145
+ // textarea {
146
+ // width: 100%;
147
+ // flex: 1;
148
+ // border: none;
149
+ // outline: none;
150
+ // font-size: 18px;
151
+ // resize: none;
152
+ // font-family: inherit;
153
+ // color: var(--header-bg);
154
+ // margin-bottom: 16px;
155
+ //
156
+ // @media (max-width: 834px) {
157
+ // font-size: 16px;
158
+ // }
159
+ //
160
+ // &::placeholder {
161
+ // color: var(--header-bg);
162
+ //
163
+ // @media (max-width: 834px) {
164
+ // font-size: var(--font-size-body-sm);
165
+ // }
166
+ // }
167
+ // }
168
+ //}
169
+ //
170
+ //.inputActions {
171
+ // display: flex;
172
+ // flex-direction: row;
173
+ // justify-content: space-between;
174
+ // align-items: center;
175
+ // gap: 12px;
176
+ //
177
+ // @media (max-width: 834px) {
178
+ // gap: 8px;
179
+ // }
180
+ //}
181
+ //
182
+ //.attachButton {
183
+ // background: none;
184
+ // border: 1px solid var(--color-bg);
185
+ // cursor: pointer;
186
+ // padding: 12px;
187
+ // display: flex;
188
+ // align-items: center;
189
+ // justify-content: center;
190
+ // transition: all 0.3s ease;
191
+ // border-radius: 48px;
192
+ // width: 88px;
193
+ // height: 51px;
194
+ // flex-shrink: 0;
195
+ //
196
+ // svg {
197
+ // width: 24px;
198
+ // height: 24px;
199
+ // color: var(--color-bg);
200
+ // }
201
+ //
202
+ // @media (max-width: 834px) {
203
+ // width: 48px;
204
+ // height: 48px;
205
+ // padding: 8px;
206
+ //
207
+ // svg {
208
+ // width: 20px;
209
+ // height: 20px;
210
+ // }
211
+ // }
212
+ //}
213
+ //
214
+ //.planButton {
215
+ // flex: 1;
216
+ // display: flex;
217
+ // justify-content: flex-end;
218
+ // min-width: 0;
219
+ //
220
+ // button {
221
+ // width: 100%;
222
+ // max-width: none;
223
+ // }
224
+ //
225
+ // .planButtonDesktop {
226
+ // display: block;
227
+ //
228
+ // @media (max-width: 768px) {
229
+ // display: none;
230
+ // }
231
+ // }
232
+ //
233
+ // .planButtonMobile {
234
+ // background: var(--color-bg);
235
+ // cursor: pointer;
236
+ // border: none;
237
+ // align-items: center;
238
+ // justify-content: center;
239
+ // border-radius: 48px;
240
+ // flex-shrink: 0;
241
+ // height: 48px;
242
+ // width: 48px;
243
+ // display: none;
244
+ // padding: 0;
245
+ //
246
+ // svg {
247
+ // color: var(--color-taste);
248
+ // width: 20px;
249
+ // height: 20px;
250
+ // }
251
+ //
252
+ // @media (max-width: 768px) {
253
+ // display: flex;
254
+ // }
255
+ // }
256
+ //}
257
+ //
258
+ //.itineraryContainer {
259
+ // position: relative;
260
+ // min-height: 100vh;
261
+ // display: flex;
262
+ // flex-direction: column;
263
+ //}
264
+ //
265
+ //.chatItineraryBlock {
266
+ // transition: all 0.5s ease;
267
+ //
268
+ // &.hero {
269
+ // display: flex;
270
+ // flex-direction: column;
271
+ // }
272
+ //
273
+ // &.itinerary {
274
+ // padding: 48px 0 0;
275
+ // border-top: 1px solid var(--color-taste);
276
+ // flex: 1;
277
+ // display: flex;
278
+ // flex-direction: column;
279
+ // overflow: hidden;
280
+ // height: calc(100vh - 80px);
281
+ //
282
+ // @media (max-width: 834px) {
283
+ // padding: 24px 0 0;
284
+ // height: calc(100vh - 60px);
285
+ // }
286
+ // }
287
+ //}
288
+ //
289
+ //.itineraryWrapper {
290
+ // background: var(--color-sand);
291
+ // border-radius: 16px;
292
+ // padding: 40px;
293
+ // position: relative;
294
+ // animation: fadeIn 0.5s ease;
295
+ // width: 100%;
296
+ // overflow-y: auto;
297
+ // overflow-x: hidden;
298
+ // max-height: calc(100vh - 380px);
299
+ //
300
+ // @media (max-width: 834px) {
301
+ // padding: 24px 16px;
302
+ // border-radius: 8px;
303
+ // max-height: calc(100vh - 320px);
304
+ // }
305
+ //
306
+ // // Optional: Style the scrollbar
307
+ // &::-webkit-scrollbar {
308
+ // width: 8px;
309
+ // }
310
+ //
311
+ // &::-webkit-scrollbar-track {
312
+ // background: rgba(0, 0, 0, 0.05);
313
+ // border-radius: 4px;
314
+ // }
315
+ //
316
+ // &::-webkit-scrollbar-thumb {
317
+ // background: rgba(0, 0, 0, 0.2);
318
+ // border-radius: 4px;
319
+ //
320
+ // &:hover {
321
+ // background: rgba(0, 0, 0, 0.3);
322
+ // }
323
+ // }
324
+ //}
325
+ //
326
+ //.fixedFooter {
327
+ // position: fixed;
328
+ // bottom: 24px;
329
+ // left: 0;
330
+ // right: 0;
331
+ // z-index: 100;
332
+ //
333
+ //
334
+ // @media (max-width: 834px) {
335
+ // padding: 16px 0;
336
+ // }
337
+ //}
338
+ //
339
+ //.footerContent {
340
+ // display: flex;
341
+ // flex-direction: column;
342
+ // padding: 24px 24px 24px 24px;
343
+ // background-color: var(--color-sand);
344
+ // border-radius: 12px;
345
+ // gap: 16px;
346
+ // box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
347
+ //
348
+ //
349
+ // @media (max-width: 834px) {
350
+ // gap: 12px;
351
+ // }
352
+ //}
353
+ //
354
+ //
355
+ //@keyframes fadeIn {
356
+ // from {
357
+ // opacity: 0;
358
+ // transform: translateY(20px);
359
+ // }
360
+ // to {
361
+ // opacity: 1;
362
+ // transform: translateY(0);
363
+ // }
364
+ //}
365
+ //
366
+ //.itineraryTitle {
367
+ // font-size: var(--font-size-h4);
368
+ // font-weight: var(--font-weight-bold);
369
+ // line-height: var(--line-height-h3);
370
+ // letter-spacing: -1.92px;
371
+ // color: var(--header-bg);
372
+ // margin: 0 0 72px 0;
373
+ //
374
+ // @media (max-width: 834px) {
375
+ // font-size: var(--font-size-h5);
376
+ // margin: 0 0 40px 0;
377
+ // }
378
+ //}
379
+ //
380
+ //.conversation {
381
+ // margin-bottom: 40px;
382
+ //
383
+ // @media (max-width: 834px) {
384
+ // margin-bottom: 24px;
385
+ // }
386
+ //}
387
+ //
388
+ //.assistantMessage {
389
+ // font-size: var(--font-size-label);
390
+ // line-height: var(--line-height-body-regular);
391
+ // font-weight: var(--font-weight-h4);
392
+ // color: var(--header-bg);
393
+ // margin: 0 0 20px 0;
394
+ // padding: 16px;
395
+ // background: var(--color-sand);
396
+ // border-radius: 24px;
397
+ //
398
+ // @media (max-width: 834px) {
399
+ // font-size: var(--font-size-body-sm);
400
+ // padding: 12px;
401
+ // }
402
+ //}
403
+ //
404
+ //.userMessage {
405
+ // margin: 20px 0;
406
+ // display: flex;
407
+ // justify-content: flex-end;
408
+ //
409
+ // @media (max-width: 834px) {
410
+ // margin: 16px 0;
411
+ // }
412
+ //
413
+ // p {
414
+ // background: var(--bg-modal-color);
415
+ // padding: 16px;
416
+ // border-radius: 24px;
417
+ // max-width: 80%;
418
+ // margin: 0;
419
+ // font-size: 16px;
420
+ // line-height: var(--line-height-body-regular);
421
+ // font-weight: var(--font-weight-h4);
422
+ // color: var(--header-bg);
423
+ //
424
+ // @media (max-width: 834px) {
425
+ // font-size: var(--font-size-body-sm);
426
+ // padding: 12px;
427
+ // max-width: 90%;
428
+ // }
429
+ // }
430
+ //}
431
+ //
432
+ //.daySection {
433
+ // margin: 40px 0;
434
+ // padding: 48px 0;
435
+ //
436
+ // @media (max-width: 834px) {
437
+ // margin: 24px 0;
438
+ // padding: 24px 0;
439
+ // }
440
+ //}
441
+ //
442
+ //.dayHeader {
443
+ // display: flex;
444
+ // justify-content: space-between;
445
+ // align-items: center;
446
+ // margin-bottom: 16px;
447
+ //
448
+ // h3 {
449
+ // font-size: var(--font-size-h5);
450
+ // font-weight: var(--font-weight-bold);
451
+ // line-height: var(--line-height-h6);
452
+ // letter-spacing: -0.72px;
453
+ // margin: 0;
454
+ //
455
+ // @media (max-width: 834px) {
456
+ // font-size: var(--font-size-h6);
457
+ // }
458
+ // }
459
+ //}
460
+ //
461
+ //.navigationButtons {
462
+ // display: flex;
463
+ // gap: 8px;
464
+ //
465
+ // @media (max-width: 834px) {
466
+ // display: none;
467
+ // }
468
+ //}
469
+ //
470
+ //.navButtonRight {
471
+ // width: 40px;
472
+ // height: 40px;
473
+ // border-radius: 50%;
474
+ // background: var(--color-bg);
475
+ // border: none;
476
+ // color: var(--bg-modal-color);
477
+ // cursor: pointer;
478
+ // display: flex;
479
+ // align-items: center;
480
+ // justify-content: center;
481
+ //
482
+ // svg {
483
+ // width: 32px;
484
+ // height: 32px;
485
+ // }
486
+ //}
487
+ //
488
+ //.navButtonLeft {
489
+ // width: 40px;
490
+ // height: 40px;
491
+ // border-radius: 50%;
492
+ // background: none;
493
+ // border: 1px solid var(--color-bg);
494
+ // color: var(--color-bg);
495
+ // cursor: pointer;
496
+ // display: flex;
497
+ // align-items: center;
498
+ // justify-content: center;
499
+ //
500
+ // svg {
501
+ // width: 32px;
502
+ // height: 32px;
503
+ // }
504
+ //}
505
+ //
506
+ //.daySubtitle {
507
+ // font-size: 28px;
508
+ // font-weight: var(--font-weight-h4);
509
+ // line-height: var(--line-height-h6);
510
+ // letter-spacing: -0.56px;
511
+ // margin: 0 0 12px 0;
512
+ //
513
+ // @media (max-width: 834px) {
514
+ // font-size: var(--font-size-h7);
515
+ // }
516
+ //}
517
+ //
518
+ //.dayDescription {
519
+ // font-size: var(--font-size-body-regular);
520
+ // line-height: var(--line-height-body-regular);
521
+ // font-weight: var(--font-weight-h4);
522
+ // margin: 0 0 48px 0;
523
+ //
524
+ // @media (max-width: 834px) {
525
+ // font-size: var(--font-size-body-sm);
526
+ // margin: 0 0 24px 0;
527
+ // }
528
+ //}
529
+ //
530
+ //.downloadButton {
531
+ // padding-bottom: 72px;
532
+ //
533
+ // svg {
534
+ // width: 20px;
535
+ // height: 20px;
536
+ // }
537
+ //
538
+ // @media (max-width: 834px) {
539
+ // padding-bottom: 40px;
540
+ // }
541
+ //}
542
+ //
543
+ //.tags {
544
+ // display: flex;
545
+ // gap: 12px;
546
+ // margin: 0;
547
+ // flex-wrap: wrap;
548
+ //
549
+ // @media (max-width: 834px) {
550
+ // gap: 8px;
551
+ // }
552
+ //}
553
+ //
554
+ //.chatInput {
555
+ // display: flex;
556
+ // align-items: flex-end;
557
+ // padding: 16px;
558
+ // min-height: 162px;
559
+ // background: var(--bg-modal-color);
560
+ // border-radius: 12px;
561
+ // border: 2px solid var(--color-taste);
562
+ // margin: 0;
563
+ // width: 100%;
564
+ // box-sizing: border-box;
565
+ //
566
+ // @media (max-width: 834px) {
567
+ // padding: 12px;
568
+ // min-height: auto;
569
+ // }
570
+ //
571
+ // .chatInputBox {
572
+ // display: flex;
573
+ // flex-direction: row;
574
+ // justify-content: space-between;
575
+ // align-items: center;
576
+ // width: 100%;
577
+ // gap: 12px;
578
+ //
579
+ // @media (max-width: 834px) {
580
+ // gap: 8px;
581
+ // }
582
+ // }
583
+ //
584
+ // input {
585
+ // flex: 1;
586
+ // border: none;
587
+ // background: none;
588
+ // outline: none;
589
+ // font-size: 16px;
590
+ // min-width: 0;
591
+ //
592
+ // @media (max-width: 834px) {
593
+ // font-size: 14px;
594
+ // }
595
+ //
596
+ // }
597
+ //}
598
+ //
599
+ //.sendButton {
600
+ // width: 88px !important;
601
+ // height: 51px !important;
602
+ // border-radius: 48px;
603
+ // background: var(--color-bg);
604
+ // border: none;
605
+ // color: var(--bg-modal-color);
606
+ // cursor: pointer;
607
+ // display: flex;
608
+ // align-items: center;
609
+ // justify-content: center;
610
+ // transition: background 0.3s ease;
611
+ // flex-shrink: 0;
612
+ //
613
+ // &:hover {
614
+ // background: var(--color-bg);
615
+ // }
616
+ //
617
+ // svg {
618
+ // width: 20px;
619
+ // height: 20px;
620
+ // }
621
+ //
622
+ // @media (max-width: 834px) {
623
+ // width: 48px;
624
+ // height: 48px;
625
+ //
626
+ // svg {
627
+ // width: 18px;
628
+ // height: 18px;
629
+ // }
630
+ // }
631
+ //}
632
+ //
633
+ //.itinaryHeader {
634
+ // border-top: 1px solid var(--color-bg);
635
+ //
636
+ // h4 {
637
+ // font-size: var(--font-size-h4);
638
+ // color: var(--color-bg);
639
+ // font-weight: var(--font-weight-bold);
640
+ // line-height: var(--line-height-h3);
641
+ // letter-spacing: -1.92px;
642
+ // margin-top: 72px;
643
+ //
644
+ // @media (max-width: 834px) {
645
+ // font-size: var(--font-size-h5);
646
+ // margin-top: 40px;
647
+ // }
648
+ // }
649
+ //
650
+ // p {
651
+ // font-size: 28px;
652
+ // font-weight: var(--font-weight-h4);
653
+ // line-height: var(--line-height-h6);
654
+ // letter-spacing: -0.56px;
655
+ // color: var(--color-bg);
656
+ // margin-top: 48px;
657
+ //
658
+ // @media (max-width: 834px) {
659
+ // font-size: var(--font-size-h7);
660
+ // margin-top: 24px;
661
+ // }
662
+ // }
663
+ //}
664
+ //
665
+ //.heroSvg {
666
+ // color: var(--color-text);
667
+ // position: absolute;
668
+ // z-index: -5;
669
+ // left: 0;
670
+ // bottom: 0;
671
+ // height: 340px;
672
+ //
673
+ // @media (max-width: 1024px) {
674
+ // display: none;
675
+ // }
676
+ //}
677
+ //
678
+ //.chatButton {
679
+ // flex: 1;
680
+ // display: flex;
681
+ // justify-content: flex-end;
682
+ // min-width: 0;
683
+ //
684
+ // button {
685
+ // width: 100%;
686
+ // max-width: none;
687
+ // }
688
+ //
689
+ // .planButtonDesktop {
690
+ // display: block;
691
+ //
692
+ // @media (max-width: 768px) {
693
+ // display: none;
694
+ // }
695
+ // }
696
+ //
697
+ // .planButtonMobile {
698
+ // background: var(--color-bg);
699
+ // cursor: pointer;
700
+ // border: none;
701
+ // align-items: center;
702
+ // justify-content: center;
703
+ // border-radius: 48px;
704
+ // flex-shrink: 0;
705
+ // height: 48px;
706
+ // width: 48px;
707
+ // display: none;
708
+ // padding: 0;
709
+ //
710
+ // svg {
711
+ // color: var(--color-taste);
712
+ // width: 20px;
713
+ // height: 20px;
714
+ // }
715
+ //
716
+ // @media (max-width: 768px) {
717
+ // display: flex;
718
+ // }
719
+ // }
720
+ //}