@paymanai/payman-ask-sdk 2.0.6 → 4.0.0

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.
package/dist/styles.css CHANGED
@@ -108,10 +108,10 @@
108
108
  }
109
109
  @keyframes payman-v2-thinking-shimmer {
110
110
  0% {
111
- background-position: 300% 0;
111
+ background-position: 220% 0;
112
112
  }
113
113
  100% {
114
- background-position: -300% 0;
114
+ background-position: -220% 0;
115
115
  }
116
116
  }
117
117
  @keyframes payman-v2-fade-in {
@@ -173,17 +173,17 @@
173
173
  linear-gradient(
174
174
  90deg,
175
175
  var(--payman-v2-thinking-shimmer-dim) 0%,
176
- var(--payman-v2-thinking-shimmer-dim) 32%,
177
- var(--payman-v2-thinking-shimmer-mid) 46%,
176
+ var(--payman-v2-thinking-shimmer-dim) 36%,
177
+ var(--payman-v2-thinking-shimmer-mid) 48%,
178
178
  var(--payman-v2-thinking-shimmer-bright) 50%,
179
- var(--payman-v2-thinking-shimmer-mid) 54%,
180
- var(--payman-v2-thinking-shimmer-dim) 68%,
179
+ var(--payman-v2-thinking-shimmer-mid) 52%,
180
+ var(--payman-v2-thinking-shimmer-dim) 64%,
181
181
  var(--payman-v2-thinking-shimmer-dim) 100%);
182
- background-size: 280% 100%;
182
+ background-size: 220% 100%;
183
183
  -webkit-background-clip: text;
184
184
  -webkit-text-fill-color: transparent;
185
185
  background-clip: text;
186
- animation: payman-v2-thinking-shimmer 1.85s linear infinite;
186
+ animation: payman-v2-thinking-shimmer 2.8s ease-in-out infinite;
187
187
  }
188
188
  .payman-v2-scrollbar::-webkit-scrollbar {
189
189
  width: 6px;
@@ -275,7 +275,7 @@
275
275
  }
276
276
  }
277
277
  .payman-v2-message-scroll-inner > * + * {
278
- margin-top: 1.5rem;
278
+ margin-top: 2.25rem;
279
279
  }
280
280
  .payman-v2-scroll-to-bottom {
281
281
  position: absolute;
@@ -457,7 +457,7 @@
457
457
  flex-direction: column;
458
458
  align-items: flex-start;
459
459
  width: 100%;
460
- min-width: 0;
460
+ padding-bottom: 2rem;
461
461
  }
462
462
  .payman-v2-assistant-msg-thinking-only {
463
463
  font-size: var(--payman-v2-body-font-size);
@@ -479,10 +479,7 @@
479
479
  border-radius: var(--payman-v2-radius-xl);
480
480
  background: var(--payman-v2-error-bg);
481
481
  border: 1px solid var(--payman-v2-error-border);
482
- box-sizing: border-box;
483
- width: 100%;
484
- max-width: min(24rem, 100%);
485
- min-width: 0;
482
+ max-width: 24rem;
486
483
  }
487
484
  .payman-v2-assistant-msg-error-icon {
488
485
  color: rgba(239, 68, 68, 0.7);
@@ -494,13 +491,6 @@
494
491
  color: var(--payman-v2-text-1);
495
492
  line-height: 1.625;
496
493
  margin: 0;
497
- overflow-wrap: anywhere;
498
- word-break: break-word;
499
- }
500
- .payman-v2-assistant-msg-error > div,
501
- .payman-v2-assistant-msg-partial-error > div {
502
- min-width: 0;
503
- flex: 1 1 0%;
504
494
  }
505
495
  .payman-v2-assistant-msg-retry-btn {
506
496
  display: inline-flex;
@@ -560,10 +550,7 @@
560
550
  border-radius: var(--payman-v2-radius-xl);
561
551
  background: var(--payman-v2-error-bg);
562
552
  border: 1px solid var(--payman-v2-error-border);
563
- box-sizing: border-box;
564
- width: 100%;
565
- max-width: min(24rem, 100%);
566
- min-width: 0;
553
+ max-width: 24rem;
567
554
  }
568
555
  .payman-v2-assistant-msg-actions {
569
556
  display: flex;
@@ -598,6 +585,15 @@
598
585
  color: var(--payman-v2-text-1);
599
586
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
600
587
  }
588
+ .payman-v2-assistant-msg-elapsed {
589
+ font-size: var(--payman-v2-small-font-size);
590
+ color: var(--payman-v2-text-4);
591
+ font-variant-numeric: tabular-nums;
592
+ margin-left: 0.25rem;
593
+ -webkit-user-select: none;
594
+ -moz-user-select: none;
595
+ user-select: none;
596
+ }
601
597
  .payman-v2-thinking {
602
598
  margin-bottom: 0.75rem;
603
599
  }
@@ -629,55 +625,6 @@
629
625
  .payman-v2-thinking-chevron-open {
630
626
  transform: rotate(90deg);
631
627
  }
632
- .payman-v2-thinking-header-label {
633
- display: inline-flex;
634
- align-items: center;
635
- gap: 0.5rem;
636
- }
637
- .payman-v2-thinking-seconds {
638
- display: inline-flex;
639
- align-items: center;
640
- gap: 1px;
641
- font-variant-numeric: tabular-nums;
642
- font-feature-settings: "tnum" 1;
643
- }
644
- .payman-v2-thinking-seconds-track {
645
- display: grid;
646
- place-items: center;
647
- min-width: 1.4ch;
648
- overflow: hidden;
649
- }
650
- .payman-v2-thinking-seconds-value {
651
- grid-area: 1 / 1;
652
- display: inline-block;
653
- will-change:
654
- transform,
655
- opacity,
656
- filter;
657
- }
658
- .payman-v2-thinking-seconds-suffix {
659
- display: inline-block;
660
- }
661
- .payman-v2-thinking-timer {
662
- display: inline-flex;
663
- align-items: center;
664
- min-width: 1.75rem;
665
- padding: 1px 7px;
666
- border-radius: 9999px;
667
- background: var(--payman-v2-hover);
668
- color: var(--payman-v2-text-4);
669
- font-size: 10.5px;
670
- font-weight: 500;
671
- letter-spacing: 0.02em;
672
- line-height: 1.4;
673
- transition: color 0.2s ease, background-color 0.2s ease;
674
- }
675
- .payman-v2-thinking-duration {
676
- color: currentColor;
677
- }
678
- .payman-v2-thinking-toggle:hover .payman-v2-thinking-timer {
679
- color: var(--payman-v2-text-3);
680
- }
681
628
  .payman-v2-thinking-content {
682
629
  overflow: hidden;
683
630
  }
@@ -726,16 +673,18 @@
726
673
  .payman-v2-thinking-cursor {
727
674
  display: flex;
728
675
  align-items: center;
729
- gap: 0.5rem;
676
+ gap: 0.375rem;
730
677
  margin-top: 0.25rem;
731
678
  height: 18px;
732
679
  }
733
- .payman-v2-thinking-mark {
734
- width: 16px;
735
- height: 16px;
680
+ .payman-v2-thinking-cursor-bar {
681
+ display: inline-block;
682
+ width: 5px;
683
+ height: 12px;
684
+ background: var(--payman-v2-thinking-cursor-color);
685
+ border-radius: 2px;
736
686
  flex-shrink: 0;
737
- color: var(--payman-v2-thinking-mark-color-override, #7AE5E0);
738
- overflow: visible;
687
+ animation: payman-v2-cursor-blink 1s ease-in-out infinite;
739
688
  }
740
689
  .payman-v2-thinking-cursor-label {
741
690
  font-size: var(--payman-v2-small-font-size);
@@ -744,6 +693,15 @@
744
693
  -moz-user-select: none;
745
694
  user-select: none;
746
695
  }
696
+ .payman-v2-thinking-sticky {
697
+ font-size: var(--payman-v2-small-font-size);
698
+ line-height: 1.5;
699
+ color: var(--payman-v2-thinking-statement-color);
700
+ -webkit-user-select: text;
701
+ -moz-user-select: text;
702
+ user-select: text;
703
+ margin-bottom: 0.125rem;
704
+ }
747
705
  .payman-v2-markdown p {
748
706
  margin-bottom: 1rem;
749
707
  font-size: var(--payman-v2-body-font-size);
@@ -802,31 +760,36 @@
802
760
  padding-left: 0.25rem;
803
761
  }
804
762
  .payman-v2-markdown h1 {
805
- font-size: 1.25rem;
806
- font-weight: 600;
807
- color: var(--payman-v2-text-1);
808
- margin-top: 1.5rem;
809
- margin-bottom: 0.75rem;
763
+ font-size: 0.8125rem !important;
764
+ font-weight: 700 !important;
765
+ line-height: 1.4 !important;
766
+ color: var(--payman-v2-text-1) !important;
767
+ margin-top: 1rem !important;
768
+ margin-bottom: 0.4rem !important;
810
769
  }
811
770
  .payman-v2-markdown h1:first-child {
812
771
  margin-top: 0;
813
772
  }
814
773
  .payman-v2-markdown h2 {
815
- font-size: 1.125rem;
816
- font-weight: 600;
817
- color: var(--payman-v2-text-1);
818
- margin-top: 1.5rem;
819
- margin-bottom: 0.75rem;
774
+ font-size: 0.8125rem !important;
775
+ font-weight: 700 !important;
776
+ line-height: 1.4 !important;
777
+ color: var(--payman-v2-text-1) !important;
778
+ text-decoration: none !important;
779
+ margin-top: 0.875rem !important;
780
+ margin-bottom: 0.35rem !important;
820
781
  }
821
782
  .payman-v2-markdown h2:first-child {
822
783
  margin-top: 0;
823
784
  }
824
785
  .payman-v2-markdown h3 {
825
- font-size: 1rem;
826
- font-weight: 600;
827
- color: var(--payman-v2-text-1);
828
- margin-top: 1.25rem;
829
- margin-bottom: 0.5rem;
786
+ font-size: 0.8125rem !important;
787
+ font-weight: 700 !important;
788
+ line-height: 1.4 !important;
789
+ color: var(--payman-v2-text-1) !important;
790
+ text-decoration: none !important;
791
+ margin-top: 0.75rem !important;
792
+ margin-bottom: 0.3rem !important;
830
793
  }
831
794
  .payman-v2-markdown h3:first-child {
832
795
  margin-top: 0;
@@ -864,8 +827,8 @@
864
827
  margin: 1rem 0;
865
828
  width: 100%;
866
829
  overflow-x: auto;
867
- border-radius: var(--payman-v2-radius-xl);
868
- border: 1px solid var(--payman-v2-code-border);
830
+ border-radius: var(--payman-v2-radius-sm);
831
+ border: 1px solid color-mix(in srgb, var(--payman-v2-code-border) 40%, transparent) !important;
869
832
  }
870
833
  .payman-v2-markdown-table {
871
834
  min-width: 100%;
@@ -889,10 +852,40 @@
889
852
  }
890
853
  .payman-v2-markdown-td {
891
854
  padding: 0.75rem 1rem;
892
- font-size: 0.875rem;
855
+ font-size: 0.8125rem !important;
893
856
  color: var(--payman-v2-text-1);
894
857
  white-space: nowrap;
895
858
  }
859
+ .payman-v2-streaming-indicator {
860
+ display: flex;
861
+ justify-content: flex-start;
862
+ align-items: center;
863
+ gap: 0.5rem;
864
+ width: 100%;
865
+ max-width: var(--payman-v2-max-content-width);
866
+ margin: 0 auto;
867
+ padding: 0.125rem 1rem 0.375rem;
868
+ pointer-events: none;
869
+ }
870
+ @media (min-width: 640px) {
871
+ .payman-v2-streaming-indicator {
872
+ padding-left: 1.25rem;
873
+ padding-right: 1.25rem;
874
+ }
875
+ }
876
+ .payman-v2-streaming-indicator-glyph {
877
+ display: flex;
878
+ align-items: center;
879
+ justify-content: center;
880
+ }
881
+ .payman-v2-streaming-indicator-elapsed {
882
+ font-size: var(--payman-v2-small-font-size);
883
+ color: var(--payman-v2-text-3);
884
+ font-variant-numeric: tabular-nums;
885
+ -webkit-user-select: none;
886
+ -moz-user-select: none;
887
+ user-select: none;
888
+ }
896
889
  .payman-v2-input-container {
897
890
  width: 100%;
898
891
  max-width: var(--payman-v2-max-content-width);
@@ -1074,6 +1067,12 @@
1074
1067
  opacity: 1;
1075
1068
  transform: translateX(-50%) translateY(0);
1076
1069
  }
1070
+ .payman-v2-input-mode-toggle[data-mode=deep] {
1071
+ color: var(--payman-v2-accent, #2F81F7);
1072
+ }
1073
+ .payman-v2-input-mode-toggle[data-mode=deep]:hover:not(:disabled) {
1074
+ background: color-mix(in srgb, var(--payman-v2-accent, #2F81F7) 12%, transparent);
1075
+ }
1077
1076
  .payman-v2-input-attach-btn {
1078
1077
  padding: 0.375rem;
1079
1078
  border-radius: var(--payman-v2-radius-full);
@@ -1243,218 +1242,6 @@
1243
1242
  .payman-v2-input-file-input {
1244
1243
  display: none;
1245
1244
  }
1246
- .payman-v2-prompt-root {
1247
- display: flex;
1248
- flex-direction: column;
1249
- align-items: center;
1250
- gap: 1rem;
1251
- width: 100%;
1252
- max-width: var(--payman-v2-max-content-width);
1253
- padding: 0 1rem;
1254
- }
1255
- .payman-v2-prompt-title {
1256
- margin: 0 0 0.25rem;
1257
- font-size: 16px;
1258
- font-weight: 500;
1259
- line-height: 1.5;
1260
- color: var(--payman-v2-text-1);
1261
- text-align: center;
1262
- white-space: pre-wrap;
1263
- }
1264
- .payman-v2-prompt-category {
1265
- width: min(100%, 37.5rem);
1266
- overflow: hidden;
1267
- border: 1px solid var(--payman-v2-border-1);
1268
- border-radius: 1rem;
1269
- background: var(--payman-v2-bg-secondary);
1270
- box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
1271
- }
1272
- .payman-v2-prompt-category-row {
1273
- display: flex;
1274
- flex-wrap: wrap;
1275
- justify-content: center;
1276
- gap: 0.5rem;
1277
- width: 100%;
1278
- max-width: 100%;
1279
- }
1280
- .payman-v2-prompt-category-bubble {
1281
- display: inline-flex;
1282
- align-items: center;
1283
- justify-content: center;
1284
- gap: 0.35rem;
1285
- max-width: 100%;
1286
- min-height: 1.875rem;
1287
- padding: 0.375rem 0.75rem;
1288
- border: 1px solid var(--payman-v2-border-1);
1289
- border-radius: var(--payman-v2-radius-full);
1290
- background: var(--payman-v2-bg-secondary);
1291
- color: var(--payman-v2-text-2);
1292
- font-family: inherit;
1293
- font-size: 11px;
1294
- font-weight: 600;
1295
- line-height: 1.35;
1296
- white-space: nowrap;
1297
- cursor: pointer;
1298
- transition:
1299
- background 0.15s ease,
1300
- border-color 0.15s ease,
1301
- color 0.15s ease,
1302
- box-shadow 0.15s ease,
1303
- transform 0.15s ease;
1304
- }
1305
- .payman-v2-prompt-category-bubble:hover {
1306
- background: var(--payman-v2-hover);
1307
- transform: translateY(-1px);
1308
- }
1309
- .payman-v2-prompt-category-bubble:focus-visible {
1310
- outline: 2px solid var(--payman-v2-text-1);
1311
- outline-offset: 2px;
1312
- }
1313
- .payman-v2-prompt-category-bubble[data-active=true] {
1314
- border-color: transparent;
1315
- background: var(--payman-v2-btn-primary);
1316
- color: var(--payman-v2-btn-primary-text);
1317
- box-shadow: 0 10px 24px rgba(10, 59, 68, 0.14);
1318
- }
1319
- .payman-v2-prompt-category-icon,
1320
- .payman-v2-prompt-option-arrow {
1321
- display: inline-flex;
1322
- align-items: center;
1323
- justify-content: center;
1324
- flex: 0 0 auto;
1325
- color: currentColor;
1326
- }
1327
- .payman-v2-prompt-category-icon svg {
1328
- width: 0.8125rem;
1329
- height: 0.8125rem;
1330
- }
1331
- .payman-v2-prompt-category-icon svg,
1332
- .payman-v2-prompt-option-arrow svg {
1333
- fill: none;
1334
- stroke: currentColor;
1335
- stroke-width: 2;
1336
- stroke-linecap: round;
1337
- stroke-linejoin: round;
1338
- }
1339
- .payman-v2-prompt-row {
1340
- display: flex;
1341
- flex-direction: column;
1342
- }
1343
- .payman-v2-prompt-bubble {
1344
- display: flex;
1345
- align-items: center;
1346
- justify-content: space-between;
1347
- gap: 1rem;
1348
- width: 100%;
1349
- max-width: 100%;
1350
- min-height: 3.25rem;
1351
- padding: 0.75rem 1rem;
1352
- border: 0;
1353
- border-radius: 0;
1354
- background: transparent;
1355
- color: var(--payman-v2-text-2);
1356
- font-family: inherit;
1357
- font-size: 13px;
1358
- line-height: 1.4;
1359
- text-align: left;
1360
- white-space: normal;
1361
- word-break: break-word;
1362
- overflow-wrap: anywhere;
1363
- cursor: pointer;
1364
- transition: background 0.15s ease, border-color 0.15s ease;
1365
- }
1366
- .payman-v2-prompt-bubble + .payman-v2-prompt-bubble {
1367
- border-top: 1px solid var(--payman-v2-border-1);
1368
- }
1369
- .payman-v2-prompt-bubble:hover:not(:disabled) {
1370
- background: var(--payman-v2-hover);
1371
- color: var(--payman-v2-text-1);
1372
- }
1373
- .payman-v2-prompt-bubble:focus-visible {
1374
- outline: 2px solid var(--payman-v2-text-1);
1375
- outline-offset: 2px;
1376
- }
1377
- .payman-v2-prompt-bubble:disabled {
1378
- opacity: 0.5;
1379
- cursor: not-allowed;
1380
- }
1381
- .payman-v2-prompt-option-arrow {
1382
- opacity: 0.7;
1383
- transition: opacity 0.15s ease, transform 0.15s ease;
1384
- }
1385
- .payman-v2-prompt-option-arrow svg {
1386
- width: 1rem;
1387
- height: 1rem;
1388
- }
1389
- .payman-v2-prompt-bubble:hover:not(:disabled) .payman-v2-prompt-option-arrow {
1390
- opacity: 1;
1391
- transform: translate(2px, -2px);
1392
- }
1393
- @media (max-width: 640px) {
1394
- .payman-v2-prompt-root {
1395
- gap: 0.875rem;
1396
- max-width: 100%;
1397
- padding: 0;
1398
- }
1399
- .payman-v2-prompt-title {
1400
- margin-bottom: 0.25rem;
1401
- padding: 0 1rem;
1402
- font-size: 16px;
1403
- line-height: 1.5;
1404
- }
1405
- .payman-v2-prompt-category-row {
1406
- justify-content: flex-start;
1407
- flex-wrap: nowrap;
1408
- gap: 0.5rem;
1409
- width: 100vw;
1410
- margin-inline: calc(50% - 50vw);
1411
- padding: 0.125rem max(1rem, env(safe-area-inset-left)) 0.625rem;
1412
- overflow-x: auto;
1413
- overflow-y: hidden;
1414
- overscroll-behavior-x: contain;
1415
- scroll-padding-inline: max(1rem, env(safe-area-inset-left));
1416
- scrollbar-width: none;
1417
- -webkit-overflow-scrolling: touch;
1418
- }
1419
- .payman-v2-prompt-category-row::-webkit-scrollbar {
1420
- display: none;
1421
- }
1422
- .payman-v2-prompt-category-bubble {
1423
- flex: 0 0 auto;
1424
- min-height: 1.875rem;
1425
- padding: 0.375rem 0.6875rem;
1426
- font-size: 11px;
1427
- }
1428
- .payman-v2-prompt-category {
1429
- width: calc(100% - 2rem);
1430
- border-radius: 0.875rem;
1431
- }
1432
- .payman-v2-prompt-bubble {
1433
- min-height: 3.125rem;
1434
- padding: 0.75rem 0.875rem;
1435
- font-size: 13px;
1436
- }
1437
- }
1438
- @media (max-width: 380px) {
1439
- .payman-v2-prompt-category-bubble {
1440
- padding-inline: 0.625rem;
1441
- }
1442
- .payman-v2-prompt-category-icon svg {
1443
- width: 0.75rem;
1444
- height: 0.75rem;
1445
- }
1446
- .payman-v2-prompt-bubble {
1447
- gap: 0.75rem;
1448
- }
1449
- }
1450
- @media (prefers-reduced-motion: reduce) {
1451
- .payman-v2-prompt-root,
1452
- .payman-v2-prompt-category-bubble,
1453
- .payman-v2-prompt-bubble {
1454
- animation: none !important;
1455
- transition: none !important;
1456
- }
1457
- }
1458
1245
  .payman-v2-verification {
1459
1246
  max-width: 17.5rem;
1460
1247
  }
@@ -1463,20 +1250,6 @@
1463
1250
  border: 1px solid var(--payman-v2-verification-border);
1464
1251
  background: var(--payman-v2-verification-bg);
1465
1252
  overflow: hidden;
1466
- position: relative;
1467
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
1468
- }
1469
- .payman-v2-verification-card-busy {
1470
- animation: payman-v2-verification-card-pulse 1.25s ease-in-out infinite;
1471
- border-color: rgba(10, 59, 68, 0.42);
1472
- }
1473
- @keyframes payman-v2-verification-card-pulse {
1474
- 0%, 100% {
1475
- box-shadow: 0 0 0 0 rgba(10, 59, 68, 0.08), 0 8px 20px rgba(0, 0, 0, 0.04);
1476
- }
1477
- 50% {
1478
- box-shadow: 0 0 0 4px rgba(10, 59, 68, 0.12), 0 12px 28px rgba(0, 0, 0, 0.07);
1479
- }
1480
1253
  }
1481
1254
  .payman-v2-verification-header {
1482
1255
  padding: 0.875rem 1rem 0.75rem;
@@ -1520,18 +1293,29 @@
1520
1293
  line-height: 1.4;
1521
1294
  margin: 0 0 0.75rem;
1522
1295
  }
1296
+ .payman-v2-verification-submitting {
1297
+ display: flex;
1298
+ align-items: center;
1299
+ justify-content: center;
1300
+ gap: 0.375rem;
1301
+ margin-top: 0.5rem;
1302
+ }
1303
+ .payman-v2-verification-submitting-text {
1304
+ font-size: 11px;
1305
+ color: var(--payman-v2-text-3);
1306
+ }
1523
1307
  .payman-v2-verification-actions {
1524
1308
  display: flex;
1525
- align-items: stretch;
1309
+ align-items: center;
1526
1310
  border-top: 1px solid var(--payman-v2-verification-border);
1527
1311
  }
1312
+ .payman-v2-verification-resend-btn,
1528
1313
  .payman-v2-verification-cancel-btn {
1529
1314
  flex: 1;
1530
1315
  display: flex;
1531
1316
  align-items: center;
1532
1317
  justify-content: center;
1533
1318
  gap: 0.25rem;
1534
- width: 100%;
1535
1319
  padding: 0.5rem;
1536
1320
  font-size: 11px;
1537
1321
  font-weight: 500;
@@ -1540,38 +1324,27 @@
1540
1324
  cursor: pointer;
1541
1325
  transition: color 0.15s, background-color 0.15s;
1542
1326
  font-family: inherit;
1327
+ }
1328
+ .payman-v2-verification-resend-btn {
1329
+ color: var(--payman-v2-text-3);
1330
+ border-right: 1px solid var(--payman-v2-verification-border);
1331
+ }
1332
+ .payman-v2-verification-resend-btn:hover {
1333
+ color: var(--payman-v2-text-2);
1334
+ background: var(--payman-v2-hover);
1335
+ }
1336
+ .payman-v2-verification-cancel-btn {
1543
1337
  color: rgba(239, 68, 68, 0.7);
1544
1338
  }
1545
1339
  .payman-v2-verification-cancel-btn:hover {
1546
1340
  color: var(--payman-v2-error-color);
1547
1341
  background: var(--payman-v2-error-bg);
1548
1342
  }
1343
+ .payman-v2-verification-resend-btn:disabled,
1549
1344
  .payman-v2-verification-cancel-btn:disabled {
1550
1345
  opacity: 0.4;
1551
1346
  cursor: not-allowed;
1552
1347
  }
1553
- .payman-v2-verification-resend-link {
1554
- display: block;
1555
- width: 100%;
1556
- margin-top: 0.5rem;
1557
- padding: 0;
1558
- font-size: 11px;
1559
- font-weight: 500;
1560
- font-family: inherit;
1561
- text-align: center;
1562
- color: var(--payman-v2-text-3);
1563
- background: none;
1564
- border: none;
1565
- cursor: pointer;
1566
- transition: color 0.15s;
1567
- }
1568
- .payman-v2-verification-resend-link:hover:not(:disabled) {
1569
- color: var(--payman-v2-text-2);
1570
- }
1571
- .payman-v2-verification-resend-link:disabled {
1572
- opacity: 0.4;
1573
- cursor: not-allowed;
1574
- }
1575
1348
  .payman-v2-otp {
1576
1349
  display: flex;
1577
1350
  justify-content: center;
@@ -1945,7 +1718,6 @@
1945
1718
  align-items: center;
1946
1719
  justify-content: center;
1947
1720
  gap: 0.5rem;
1948
- pointer-events: none;
1949
1721
  }
1950
1722
  .payman-v2-md-image-placeholder {
1951
1723
  display: flex;
@@ -2144,31 +1916,22 @@
2144
1916
  .payman-v2-toast-inner {
2145
1917
  display: inline-flex;
2146
1918
  align-items: center;
2147
- gap: 0.5rem;
1919
+ gap: 0.375rem;
2148
1920
  border-radius: 9999px;
2149
- border: none;
2150
- padding: 0.5rem 1rem;
2151
- font-size: 0.875rem;
2152
- backdrop-filter: blur(12px);
2153
- box-shadow: var(--payman-v2-shadow-input);
1921
+ border: 1px solid;
1922
+ padding: 0.375rem 0.75rem;
1923
+ font-size: 0.75rem;
1924
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.06);
2154
1925
  }
2155
1926
  .payman-v2-toast-success {
2156
- background: rgba(255, 255, 255, 0.95);
2157
- color: var(--payman-v2-text-1);
1927
+ border-color: rgba(5, 150, 105, 0.3);
1928
+ background: rgba(33, 33, 33, 1);
1929
+ color: rgba(255, 255, 255, 0.9);
2158
1930
  }
2159
1931
  .payman-v2-toast-error {
2160
- background: rgba(255, 255, 255, 0.95);
2161
- color: var(--payman-v2-text-1);
2162
- }
2163
- @media (prefers-color-scheme: dark) {
2164
- .payman-v2-root:not(.payman-v2-light) .payman-v2-toast-success,
2165
- .payman-v2-root:not(.payman-v2-light) .payman-v2-toast-error {
2166
- background: rgba(33, 33, 33, 0.95);
2167
- }
2168
- }
2169
- .payman-v2-root.payman-v2-dark .payman-v2-toast-success,
2170
- .payman-v2-root.payman-v2-dark .payman-v2-toast-error {
2171
- background: rgba(33, 33, 33, 0.95);
1932
+ border-color: rgba(239, 68, 68, 0.3);
1933
+ background: rgba(33, 33, 33, 1);
1934
+ color: rgba(255, 255, 255, 0.9);
2172
1935
  }
2173
1936
  .payman-v2-response-files {
2174
1937
  display: flex;
@@ -2176,451 +1939,6 @@
2176
1939
  gap: 0.5rem;
2177
1940
  width: 100%;
2178
1941
  }
2179
- .payman-sidebar {
2180
- position: relative;
2181
- min-height: 0;
2182
- background:
2183
- linear-gradient(
2184
- 180deg,
2185
- color-mix(in srgb, var(--payman-v2-bg-secondary) 62%, transparent),
2186
- var(--payman-v2-bg));
2187
- color: var(--payman-v2-text-1);
2188
- }
2189
- .payman-sidebar-desktop {
2190
- flex: 0 0 auto;
2191
- border-right: 1px solid var(--payman-v2-border-1);
2192
- }
2193
- .payman-sidebar-popover {
2194
- border: 1px solid var(--payman-v2-border-1);
2195
- border-radius: var(--payman-v2-radius-xl);
2196
- background: color-mix(in srgb, var(--payman-v2-bg) 96%, transparent);
2197
- backdrop-filter: blur(18px);
2198
- box-shadow: 0 20px 40px -28px rgba(15, 23, 42, 0.35);
2199
- }
2200
- .payman-sidebar-topbar {
2201
- display: flex;
2202
- flex-direction: column;
2203
- align-items: stretch;
2204
- border-bottom: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 85%, transparent);
2205
- color: var(--payman-v2-text-2);
2206
- }
2207
- .payman-sidebar-header {
2208
- display: flex;
2209
- align-items: center;
2210
- justify-content: space-between;
2211
- gap: 0.5rem;
2212
- padding: 0.45rem 0.5rem 0.4rem;
2213
- border-bottom: none;
2214
- font-size: 1rem;
2215
- font-weight: 600;
2216
- letter-spacing: 0.01em;
2217
- color: inherit;
2218
- text-transform: none;
2219
- }
2220
- .payman-sidebar-header-title {
2221
- text-transform: none;
2222
- letter-spacing: 0.02em;
2223
- font-size: 0.875rem;
2224
- }
2225
- .payman-sidebar-topbar.has-new-session .payman-sidebar-header {
2226
- padding-bottom: 0.25rem;
2227
- }
2228
- .payman-sidebar-header-icon-button,
2229
- .payman-sidebar-collapsed-button {
2230
- display: inline-flex;
2231
- align-items: center;
2232
- justify-content: center;
2233
- width: 1.45rem;
2234
- height: 1.45rem;
2235
- border: 1px solid transparent;
2236
- border-radius: var(--payman-v2-radius-full);
2237
- background: transparent;
2238
- color: var(--payman-v2-text-3);
2239
- cursor: pointer;
2240
- transition:
2241
- background-color 0.16s ease,
2242
- border-color 0.16s ease,
2243
- color 0.16s ease,
2244
- transform 0.16s ease;
2245
- }
2246
- .payman-sidebar-header-icon-button:hover,
2247
- .payman-sidebar-collapsed-button:hover {
2248
- background: var(--payman-v2-hover);
2249
- border-color: color-mix(in srgb, var(--payman-v2-border-1) 88%, transparent);
2250
- color: var(--payman-v2-text-1);
2251
- }
2252
- .payman-sidebar-header-icon-button:active,
2253
- .payman-sidebar-collapsed-button:active {
2254
- transform: scale(0.96);
2255
- }
2256
- .payman-sidebar-new-session-wrap {
2257
- display: flex;
2258
- padding: 0.375rem 0.5rem 0.5rem;
2259
- }
2260
- .payman-sidebar-new-session-button {
2261
- -webkit-appearance: none;
2262
- -moz-appearance: none;
2263
- appearance: none;
2264
- box-sizing: border-box;
2265
- flex: 0 0 auto;
2266
- align-self: stretch;
2267
- display: inline-flex;
2268
- align-items: center;
2269
- justify-content: center;
2270
- gap: 0.3rem;
2271
- width: 100%;
2272
- min-width: 0;
2273
- height: auto;
2274
- min-height: 1.75rem;
2275
- padding: 0 0.55rem;
2276
- border: 1px solid var(--payman-v2-btn-primary);
2277
- border-radius: var(--payman-v2-radius-md);
2278
- background: var(--payman-v2-btn-primary);
2279
- color: var(--payman-v2-btn-primary-text);
2280
- cursor: pointer;
2281
- font: inherit;
2282
- font-size: 0.7rem;
2283
- font-weight: 600;
2284
- line-height: 1;
2285
- white-space: nowrap;
2286
- box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
2287
- transition:
2288
- background-color 0.16s ease,
2289
- border-color 0.16s ease,
2290
- opacity 0.16s ease,
2291
- transform 0.16s ease;
2292
- }
2293
- .payman-sidebar-new-session-button span {
2294
- min-width: 0;
2295
- overflow: hidden;
2296
- text-overflow: ellipsis;
2297
- }
2298
- .payman-sidebar-new-session-button:hover:not(:disabled) {
2299
- background: color-mix(in srgb, var(--payman-v2-btn-primary) 88%, white);
2300
- border-color: color-mix(in srgb, var(--payman-v2-btn-primary) 88%, white);
2301
- }
2302
- .payman-sidebar-new-session-button:active:not(:disabled) {
2303
- transform: scale(0.98);
2304
- }
2305
- .payman-sidebar-new-session-button:disabled {
2306
- cursor: not-allowed;
2307
- opacity: 0.48;
2308
- }
2309
- .payman-sidebar-mobile-trigger,
2310
- .payman-sidebar-collapsed {
2311
- position: relative;
2312
- z-index: 3;
2313
- }
2314
- .payman-sidebar-mobile-trigger {
2315
- display: flex;
2316
- width: 100%;
2317
- flex-shrink: 0;
2318
- align-items: center;
2319
- justify-content: flex-start;
2320
- padding: 0.35rem 0.5rem 0.1rem;
2321
- }
2322
- .payman-sidebar-mobile-trigger-button {
2323
- width: 1.75rem;
2324
- height: 1.75rem;
2325
- border-color: color-mix(in srgb, var(--payman-v2-border-1) 88%, transparent);
2326
- background: color-mix(in srgb, var(--payman-v2-bg) 92%, transparent);
2327
- box-shadow: 0 10px 25px -18px rgba(15, 23, 42, 0.45);
2328
- }
2329
- .payman-sidebar-collapsed {
2330
- padding: 0.5rem 0 0 0.5rem;
2331
- }
2332
- .payman-sidebar-collapsed-mount {
2333
- overflow: visible;
2334
- }
2335
- .payman-sidebar-list {
2336
- --payman-sidebar-list-padding-x: 0.375rem;
2337
- --payman-sidebar-row-padding-x: 0.5rem;
2338
- display: flex;
2339
- flex-direction: column;
2340
- gap: 0.35rem;
2341
- padding: 0.25rem var(--payman-sidebar-list-padding-x) 0.5rem;
2342
- box-shadow: inset -22px 0 26px -12px color-mix(in srgb, var(--payman-v2-bg) 72%, transparent), inset -10px 0 18px -6px color-mix(in srgb, var(--payman-v2-btn-primary) 14%, transparent);
2343
- }
2344
- .payman-sidebar-group {
2345
- display: flex;
2346
- flex-direction: column;
2347
- gap: 0.15rem;
2348
- }
2349
- .payman-sidebar-group + .payman-sidebar-group {
2350
- position: relative;
2351
- padding-top: 0.35rem;
2352
- }
2353
- .payman-sidebar-group + .payman-sidebar-group::before {
2354
- content: "";
2355
- position: absolute;
2356
- top: 0;
2357
- left: calc(var(--payman-sidebar-list-padding-x) * -1);
2358
- right: calc(var(--payman-sidebar-list-padding-x) * -1);
2359
- height: 1px;
2360
- background: color-mix(in srgb, var(--payman-v2-border-1) 78%, transparent);
2361
- }
2362
- .payman-sidebar-group-label {
2363
- position: sticky;
2364
- top: 0;
2365
- z-index: 1;
2366
- margin: 0 calc(var(--payman-sidebar-list-padding-x) * -1);
2367
- padding: 0.3rem calc(var(--payman-sidebar-list-padding-x) + var(--payman-sidebar-row-padding-x)) 0.15rem;
2368
- font-size: 0.6rem;
2369
- font-weight: 700;
2370
- letter-spacing: 0.02em;
2371
- color: var(--payman-v2-text-3);
2372
- background:
2373
- linear-gradient(
2374
- 180deg,
2375
- color-mix(in srgb, var(--payman-v2-bg) 96%, transparent),
2376
- color-mix(in srgb, var(--payman-v2-bg) 84%, transparent));
2377
- backdrop-filter: blur(4px);
2378
- }
2379
- .payman-sidebar-group-items {
2380
- display: flex;
2381
- flex-direction: column;
2382
- gap: 0.075rem;
2383
- }
2384
- .payman-sidebar-row {
2385
- display: flex;
2386
- width: 100%;
2387
- flex-direction: column;
2388
- align-items: flex-start;
2389
- gap: 0;
2390
- padding: 0.35rem var(--payman-sidebar-row-padding-x);
2391
- border: 1px solid transparent;
2392
- border-radius: var(--payman-v2-radius-md);
2393
- background: transparent;
2394
- color: inherit;
2395
- cursor: pointer;
2396
- text-align: left;
2397
- transition:
2398
- background-color 0.16s ease,
2399
- border-color 0.16s ease,
2400
- transform 0.16s ease,
2401
- box-shadow 0.16s ease;
2402
- }
2403
- .payman-sidebar-row:hover {
2404
- background: color-mix(in srgb, var(--payman-v2-hover) 90%, var(--payman-v2-bg));
2405
- border-color: color-mix(in srgb, var(--payman-v2-border-1) 88%, transparent);
2406
- }
2407
- .payman-sidebar-row.is-active {
2408
- background: color-mix(in srgb, var(--payman-v2-bg-secondary) 88%, var(--payman-v2-bg));
2409
- border-color: transparent;
2410
- }
2411
- .payman-sidebar-row-main {
2412
- display: flex;
2413
- align-items: center;
2414
- width: 100%;
2415
- gap: 0.5rem;
2416
- min-width: 0;
2417
- }
2418
- .payman-sidebar-row-title {
2419
- flex: 1 1 auto;
2420
- min-width: 0;
2421
- overflow: hidden;
2422
- text-overflow: ellipsis;
2423
- white-space: nowrap;
2424
- font-size: 0.75rem;
2425
- font-weight: 500;
2426
- color: var(--payman-v2-text-1);
2427
- }
2428
- .payman-sidebar-row-spinner {
2429
- flex: 0 0 auto;
2430
- width: 12px;
2431
- height: 12px;
2432
- border-radius: 50%;
2433
- border: 1.5px solid var(--payman-v2-border-1);
2434
- border-top-color: var(--payman-v2-text-2);
2435
- animation: payman-v2-spin 0.7s linear infinite;
2436
- display: inline-block;
2437
- }
2438
- .payman-sidebar-row-status {
2439
- flex: 0 0 auto;
2440
- box-sizing: border-box;
2441
- display: inline-flex;
2442
- align-items: center;
2443
- justify-content: center;
2444
- width: 14px;
2445
- height: 14px;
2446
- opacity: 0.85;
2447
- transition:
2448
- opacity 200ms ease,
2449
- color 200ms ease,
2450
- transform 200ms ease;
2451
- }
2452
- .payman-sidebar-row-status-done {
2453
- color: var(--payman-v2-text-3);
2454
- animation: payman-v2-status-pop 220ms ease-out both;
2455
- }
2456
- @keyframes payman-v2-status-pop {
2457
- 0% {
2458
- opacity: 0;
2459
- transform: scale(0.7);
2460
- }
2461
- 100% {
2462
- opacity: 0.85;
2463
- transform: scale(1);
2464
- }
2465
- }
2466
- .payman-v2-message-list-loading {
2467
- display: flex;
2468
- align-items: center;
2469
- justify-content: center;
2470
- width: 100%;
2471
- min-height: 120px;
2472
- flex: 1 1 auto;
2473
- padding: 2rem 1rem;
2474
- }
2475
- .payman-v2-message-list-spinner {
2476
- width: 22px;
2477
- height: 22px;
2478
- border-radius: 50%;
2479
- border: 2px solid var(--payman-v2-border-1);
2480
- border-top-color: var(--payman-v2-text-2);
2481
- animation: payman-v2-spin 0.7s linear infinite;
2482
- display: inline-block;
2483
- }
2484
- .payman-sidebar-row-meta {
2485
- font-size: 0.75rem;
2486
- line-height: 1.3;
2487
- color: var(--payman-v2-text-3);
2488
- }
2489
- .payman-sidebar-loading,
2490
- .payman-sidebar-empty,
2491
- .payman-sidebar-error,
2492
- .payman-sidebar-notice {
2493
- display: flex;
2494
- flex-direction: column;
2495
- align-items: center;
2496
- justify-content: center;
2497
- gap: 0.5rem;
2498
- padding: 1rem 0.75rem;
2499
- text-align: center;
2500
- }
2501
- .payman-sidebar-loading {
2502
- min-height: 6.5rem;
2503
- }
2504
- .payman-sidebar-empty,
2505
- .payman-sidebar-error,
2506
- .payman-sidebar-notice {
2507
- border: 1px dashed color-mix(in srgb, var(--payman-v2-border-1) 85%, transparent);
2508
- border-radius: var(--payman-v2-radius-xl);
2509
- background: color-mix(in srgb, var(--payman-v2-bg-secondary) 52%, var(--payman-v2-bg));
2510
- }
2511
- .payman-sidebar-notice-shell {
2512
- flex: 1 1 0%;
2513
- min-height: 0;
2514
- display: flex;
2515
- flex-direction: column;
2516
- padding: 0.55rem 0.45rem 0.65rem;
2517
- box-sizing: border-box;
2518
- }
2519
- .payman-sidebar-notice-shell .payman-sidebar-notice {
2520
- flex: 1 1 auto;
2521
- min-height: 0;
2522
- width: 100%;
2523
- box-sizing: border-box;
2524
- }
2525
- .payman-sidebar-empty-icon,
2526
- .payman-sidebar-error-icon {
2527
- display: inline-flex;
2528
- align-items: center;
2529
- justify-content: center;
2530
- width: 2rem;
2531
- height: 2rem;
2532
- border-radius: var(--payman-v2-radius-full);
2533
- background: color-mix(in srgb, var(--payman-v2-bg-secondary) 90%, transparent);
2534
- color: var(--payman-v2-text-2);
2535
- }
2536
- .payman-sidebar-empty-title,
2537
- .payman-sidebar-error-title {
2538
- font-size: 0.8125rem;
2539
- font-weight: 600;
2540
- color: var(--payman-v2-text-1);
2541
- }
2542
- .payman-sidebar-empty-desc,
2543
- .payman-sidebar-error-desc,
2544
- .payman-sidebar-notice {
2545
- font-size: 0.76rem;
2546
- line-height: 1.45;
2547
- color: var(--payman-v2-text-2);
2548
- }
2549
- .payman-sidebar-load-more {
2550
- display: inline-flex;
2551
- align-items: center;
2552
- justify-content: center;
2553
- gap: 0.35rem;
2554
- align-self: center;
2555
- min-height: 2rem;
2556
- margin-top: 0.125rem;
2557
- padding: 0.45rem 0.75rem;
2558
- border: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 92%, transparent);
2559
- border-radius: var(--payman-v2-radius-full);
2560
- background: color-mix(in srgb, var(--payman-v2-bg) 94%, transparent);
2561
- color: var(--payman-v2-text-2);
2562
- font-size: 0.74rem;
2563
- font-weight: 500;
2564
- cursor: pointer;
2565
- transition:
2566
- background-color 0.16s ease,
2567
- border-color 0.16s ease,
2568
- color 0.16s ease;
2569
- }
2570
- .payman-sidebar-load-more:hover:not(:disabled) {
2571
- background: var(--payman-v2-bg-secondary);
2572
- color: var(--payman-v2-text-1);
2573
- }
2574
- .payman-sidebar-load-more:disabled {
2575
- cursor: not-allowed;
2576
- opacity: 0.65;
2577
- }
2578
- .payman-sidebar-backdrop {
2579
- position: fixed;
2580
- inset: 0;
2581
- z-index: 80;
2582
- display: flex;
2583
- align-items: flex-end;
2584
- justify-content: stretch;
2585
- background: color-mix(in srgb, #000 32%, transparent);
2586
- backdrop-filter: blur(8px);
2587
- }
2588
- .payman-sidebar-sheet {
2589
- position: relative;
2590
- width: 100%;
2591
- height: min(78vh, 40rem);
2592
- max-height: calc(100dvh - 0.5rem);
2593
- display: flex;
2594
- flex-direction: column;
2595
- overflow: hidden;
2596
- border: 1px solid color-mix(in srgb, var(--payman-v2-border-1) 92%, transparent);
2597
- border-bottom: none;
2598
- border-radius: calc(var(--payman-v2-radius-xl) + 6px) calc(var(--payman-v2-radius-xl) + 6px) 0 0;
2599
- background:
2600
- linear-gradient(
2601
- 180deg,
2602
- color-mix(in srgb, var(--payman-v2-bg-secondary) 62%, var(--payman-v2-bg)),
2603
- var(--payman-v2-bg));
2604
- box-shadow: 0 -18px 50px -28px rgba(15, 23, 42, 0.45);
2605
- padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
2606
- }
2607
- .payman-sidebar-sheet .payman-sidebar-topbar,
2608
- .payman-sidebar-sheet .payman-sidebar-header,
2609
- .payman-sidebar-sheet .payman-sidebar-group-label {
2610
- background:
2611
- linear-gradient(
2612
- 180deg,
2613
- color-mix(in srgb, var(--payman-v2-bg-secondary) 62%, var(--payman-v2-bg)),
2614
- var(--payman-v2-bg));
2615
- backdrop-filter: none;
2616
- }
2617
- .payman-sidebar-sheet-grabber {
2618
- width: 2.5rem;
2619
- height: 0.24rem;
2620
- margin: 0.5rem auto 0;
2621
- border-radius: var(--payman-v2-radius-full);
2622
- background: color-mix(in srgb, var(--payman-v2-text-4) 70%, transparent);
2623
- }
2624
1942
 
2625
1943
  /* src/styles.css */
2626
1944
  .payman-chat-root {