@hellobetterdigitalnz/selwynui 0.0.1-33 → 0.0.1-35

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 (15) hide show
  1. package/dist/Components/DataDisplay/KPIBlock/KPIBlockProps.d.ts +3 -2
  2. package/dist/index.cjs.js +4 -4
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.es.js +875 -813
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/selwynui.css +1 -1
  7. package/package.json +1 -1
  8. package/src/Components/DataDisplay/ChatItenaryBlock/chatItenaryBlock.module.scss +720 -720
  9. package/src/Components/DataDisplay/IntroBlock/introBlock.module.scss +55 -55
  10. package/src/Components/DataDisplay/KPIBlock/KPIBlock.stories.tsx +1 -2
  11. package/src/Components/DataDisplay/KPIBlock/KPIBlock.tsx +20 -7
  12. package/src/Components/DataDisplay/KPIBlock/KPIBlockProps.tsx +4 -2
  13. package/src/Components/DataDisplay/KPIBlock/kpiBlock.module.scss +12 -11
  14. package/src/Components/DataDisplay/PathwayBlock/pathwayBlock.module.scss +1 -1
  15. package/src/Components/Shared/ElementHolder/elementHolder.module.scss +1 -1
package/src/Components/DataDisplay/ChatItenaryBlock/chatItenaryBlock.module.scss CHANGED
@@ -1,720 +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);
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
- //}
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
+ }