@paymanai/payman-ask-sdk 1.2.2 → 1.2.4

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
@@ -1,30 +1,407 @@
1
1
  /* src/styles.css */
2
- .payman-chat {
3
- --primary: 222.2 47.4% 11.2%;
4
- --primary-foreground: 210 40% 98%;
5
- --card: 0 0% 100%;
6
- --card-foreground: 222.2 84% 4.9%;
7
- --border: 214.3 31.8% 91.4%;
8
- --input: 214.3 31.8% 91.4%;
9
- --muted: 210 40% 96.1%;
10
- --muted-foreground: 215.4 16.3% 46.9%;
11
- --foreground: 222.2 84% 4.9%;
12
- --destructive: 0 84.2% 60.2%;
13
- --highlight: 217.2 91.2% 59.8%;
14
- }
15
- .markdown-content {
16
- line-height: 1.6;
17
- }
18
- .markdown-content > *:first-child {
2
+ .payman-chat-root {
3
+ --color-primary: var(--payman-primary, #18181b);
4
+ --color-primary-foreground: var(--payman-primary-foreground, #fafafa);
5
+ --color-background: var(--payman-background, #ffffff);
6
+ --color-foreground: var(--payman-foreground, #18181b);
7
+ --color-card: var(--payman-card, #ffffff);
8
+ --color-card-foreground: var(--payman-card-foreground, #18181b);
9
+ --color-muted: var(--payman-muted, #f4f4f5);
10
+ --color-muted-foreground: var(--payman-muted-foreground, #71717a);
11
+ --color-border: var(--payman-border, #e4e4e7);
12
+ --color-input: var(--payman-input, #e4e4e7);
13
+ --color-ring: var(--payman-ring, var(--payman-primary, #18181b));
14
+ --color-destructive: var(--payman-destructive, #ef4444);
15
+ --color-destructive-foreground: var(--payman-destructive-foreground, #ef4444);
16
+ --color-secondary: var(--payman-secondary, #f4f4f5);
17
+ --color-secondary-foreground: var(--payman-secondary-foreground, #18181b);
18
+ --color-accent: var(--payman-accent, #f4f4f5);
19
+ --color-accent-foreground: var(--payman-accent-foreground, #18181b);
20
+ --color-popover: var(--payman-popover, #ffffff);
21
+ --color-popover-foreground: var(--payman-popover-foreground, #18181b);
22
+ --primary: var(--payman-primary, #18181b);
23
+ --primary-foreground: var(--payman-primary-foreground, #fafafa);
24
+ --background: var(--payman-background, #ffffff);
25
+ --foreground: var(--payman-foreground, #18181b);
26
+ --card: var(--payman-card, #ffffff);
27
+ --card-foreground: var(--payman-card-foreground, #18181b);
28
+ --muted: var(--payman-muted, #f4f4f5);
29
+ --muted-foreground: var(--payman-muted-foreground, #71717a);
30
+ --border: var(--payman-border, #e4e4e7);
31
+ --input: var(--payman-input, #e4e4e7);
32
+ --ring: var(--payman-ring, var(--payman-primary, #18181b));
33
+ --destructive: var(--payman-destructive, #ef4444);
34
+ --destructive-foreground: var(--payman-destructive-foreground, #ef4444);
35
+ --secondary: var(--payman-secondary, #f4f4f5);
36
+ --secondary-foreground: var(--payman-secondary-foreground, #18181b);
37
+ --accent: var(--payman-accent, #f4f4f5);
38
+ --accent-foreground: var(--payman-accent-foreground, #18181b);
39
+ --popover: var(--payman-popover, #ffffff);
40
+ --popover-foreground: var(--payman-popover-foreground, #18181b);
41
+ --radius: var(--payman-radius, 0.625rem);
42
+ --radius-sm: calc(var(--payman-radius, 0.625rem) - 4px);
43
+ --radius-md: calc(var(--payman-radius, 0.625rem) - 2px);
44
+ --radius-lg: var(--payman-radius, 0.625rem);
45
+ --radius-xl: calc(var(--payman-radius, 0.625rem) + 4px);
46
+ --payman-input-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 50%, transparent );
47
+ --payman-input-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 60%, transparent );
48
+ --payman-input-border-focus: var(--payman-border, #e4e4e7);
49
+ --payman-input-text: var(--payman-foreground, #18181b);
50
+ --payman-input-placeholder: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 60%, transparent );
51
+ --payman-input-disabled-opacity: 0.4;
52
+ --payman-input-btn-send-bg: var(--payman-foreground, #18181b);
53
+ --payman-input-btn-send-fg: var(--payman-background, #ffffff);
54
+ --payman-input-btn-send-disabled-bg: var(--payman-muted, #f4f4f5);
55
+ --payman-input-btn-send-disabled-fg: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 40%, transparent );
56
+ --payman-input-btn-voice-fg: var(--payman-muted-foreground, #71717a);
57
+ --payman-input-btn-voice-hover-fg: var(--payman-foreground, #18181b);
58
+ --payman-input-btn-voice-hover-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 80%, transparent );
59
+ --payman-input-btn-voice-recording-bg: var(--payman-destructive, #ef4444);
60
+ --payman-input-btn-voice-recording-fg: var( --payman-destructive-foreground, #fafafa );
61
+ --payman-input-btn-voice-recording-ring: var(--payman-destructive, #ef4444);
62
+ --payman-input-btn-voice-recording-shadow: color-mix( in srgb, var(--payman-destructive, #ef4444) 30%, transparent );
63
+ --payman-input-btn-pause-bg: var(--payman-foreground, #18181b);
64
+ --payman-input-btn-pause-fg: var(--payman-background, #ffffff);
65
+ --payman-agent-bubble-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 60%, transparent );
66
+ --payman-agent-bubble-border: var(--payman-border, #e4e4e7);
67
+ --payman-agent-bubble-border-streaming: var(--payman-border, #e4e4e7);
68
+ --payman-agent-bubble-border-error: color-mix( in srgb, var(--payman-destructive, #ef4444) 30%, transparent );
69
+ --payman-agent-bubble-error-bg: color-mix( in srgb, var(--payman-destructive, #ef4444) 5%, transparent );
70
+ --payman-agent-bubble-error-border: color-mix( in srgb, var(--payman-destructive, #ef4444) 20%, transparent );
71
+ --payman-agent-bubble-card-bg: var(--payman-card, #ffffff);
72
+ --payman-agent-thinking-spinner: color-mix( in srgb, var(--payman-primary, #18181b) 70%, transparent );
73
+ --payman-agent-thinking-text: var(--payman-muted-foreground, #71717a);
74
+ --payman-agent-step-toggle-fg: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 50%, transparent );
75
+ --payman-agent-step-toggle-hover-fg: var(--payman-muted-foreground, #71717a);
76
+ --payman-agent-step-icon-active: var(--payman-primary, #18181b);
77
+ --payman-agent-step-icon-success: var(--payman-success, #10b981);
78
+ --payman-agent-step-icon-success-dim: color-mix( in srgb, var(--payman-primary, #18181b) 70%, transparent );
79
+ --payman-agent-step-icon-error: var(--payman-destructive, #ef4444);
80
+ --payman-agent-step-icon-pending: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 30%, transparent );
81
+ --payman-agent-step-icon-pending-dim: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 20%, transparent );
82
+ --payman-agent-step-icon-in-progress-dim: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 40%, transparent );
83
+ --payman-agent-step-text-error: var(--payman-destructive, #ef4444);
84
+ --payman-agent-step-text-success: var(--payman-success-dark, #059669);
85
+ --payman-agent-step-text-completed: var(--payman-muted-foreground, #71717a);
86
+ --payman-agent-step-text-pending: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 40%, transparent );
87
+ --payman-agent-step-text-in-progress: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 60%, transparent );
88
+ --payman-agent-step-time-bg: var(--payman-muted, #f4f4f5);
89
+ --payman-agent-step-time-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 40%, transparent );
90
+ --payman-agent-step-time-fg: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 60%, transparent );
91
+ --payman-agent-avatar-bg: var(--payman-muted, #f4f4f5);
92
+ --payman-agent-avatar-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 50%, transparent );
93
+ --payman-agent-avatar-icon: var(--payman-muted-foreground, #71717a);
94
+ --payman-agent-avatar-dot: var(--payman-primary, #18181b);
95
+ --payman-agent-avatar-dot-ping: color-mix( in srgb, var(--payman-primary, #18181b) 50%, transparent );
96
+ --payman-agent-approved-bg: var(--payman-success-light, #ecfdf5);
97
+ --payman-agent-approved-text: var(--payman-success-dark, #047857);
98
+ --payman-agent-approved-border: color-mix( in srgb, var(--payman-success, #10b981) 60%, transparent );
99
+ --payman-agent-rejected-bg: var(--payman-error-light, #fef2f2);
100
+ --payman-agent-rejected-text: var(--payman-error-dark, #b91c1c);
101
+ --payman-agent-rejected-border: color-mix( in srgb, var(--payman-destructive, #ef4444) 60%, transparent );
102
+ --payman-agent-trace-bg: color-mix( in srgb, var(--payman-card, #ffffff) 50%, transparent );
103
+ --payman-agent-trace-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 40%, transparent );
104
+ --payman-agent-trace-hover-bg: var(--payman-muted, #f4f4f5);
105
+ --payman-agent-trace-hover-border: var(--payman-border, #e4e4e7);
106
+ --payman-agent-trace-icon: var(--payman-muted-foreground, #71717a);
107
+ --payman-agent-name-fg: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 70%, transparent );
108
+ --payman-agent-content-text: var(--payman-foreground, #18181b);
109
+ --payman-agent-content-text-error: var(--payman-destructive, #ef4444);
110
+ --payman-agent-content-code-bg: var(--payman-muted, #f4f4f5);
111
+ --payman-agent-content-code-bg-error: color-mix( in srgb, var(--payman-destructive, #ef4444) 10%, transparent );
112
+ --payman-agent-content-code-bg-block: color-mix( in srgb, var(--payman-background, #ffffff) 80%, transparent );
113
+ --payman-agent-content-link: var(--payman-primary, #18181b);
114
+ --payman-agent-content-link-hover: color-mix( in srgb, var(--payman-primary, #18181b) 80%, transparent );
115
+ --payman-agent-content-link-error: var(--payman-destructive, #ef4444);
116
+ --payman-agent-content-link-error-hover: color-mix( in srgb, var(--payman-destructive, #ef4444) 80%, transparent );
117
+ --payman-agent-content-blockquote-border: var(--payman-border, #e4e4e7);
118
+ --payman-agent-content-blockquote-text: var( --payman-muted-foreground, #71717a );
119
+ --payman-agent-content-table-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 50%, transparent );
120
+ --payman-agent-content-thead-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 40%, transparent );
121
+ --payman-agent-content-row-hover: color-mix( in srgb, var(--payman-muted, #f4f4f5) 30%, transparent );
122
+ --payman-agent-content-row-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 30%, transparent );
123
+ --payman-agent-content-th-fg: var(--payman-foreground, #18181b);
124
+ --payman-agent-content-td-fg: var(--payman-foreground, #18181b);
125
+ --payman-agent-cancelled-icon: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 60%, transparent );
126
+ --payman-agent-cancelled-text: var(--payman-muted-foreground, #71717a);
127
+ --payman-streaming-bubble-bg: var(--payman-agent-bubble-bg);
128
+ --payman-streaming-bubble-error-bg: var(--payman-agent-bubble-error-bg);
129
+ --payman-streaming-bubble-error-border: var( --payman-agent-bubble-error-border );
130
+ --payman-streaming-thinking-spinner: var(--payman-agent-thinking-spinner);
131
+ --payman-streaming-thinking-text: var(--payman-agent-thinking-text);
132
+ --payman-empty-icon-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 50%, transparent );
133
+ --payman-empty-icon-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 50%, transparent );
134
+ --payman-empty-icon-fg: color-mix( in srgb, var(--payman-muted-foreground, #71717a) 75%, transparent );
135
+ --payman-empty-title-fg: var(--payman-foreground, #18181b);
136
+ --payman-empty-subtitle-fg: var(--payman-muted-foreground, #71717a);
137
+ --color-emerald-50: var(--payman-success-light, #ecfdf5);
138
+ --color-emerald-500: var(--payman-success, #10b981);
139
+ --color-emerald-600: var(--payman-success-dark, #059669);
140
+ --color-emerald-700: var(--payman-success-dark, #047857);
141
+ --color-red-50: var(--payman-error-light, #fef2f2);
142
+ --color-red-200: var(--payman-error-light, #fecaca);
143
+ --color-red-700: var(--payman-error-dark, #b91c1c);
144
+ color: var(--payman-foreground, #18181b);
145
+ width: 100%;
146
+ max-width: 100%;
147
+ overflow-x: hidden;
148
+ overflow-y: hidden;
149
+ contain: layout style;
150
+ }
151
+ .dark .payman-chat-root,
152
+ .payman-chat-root.dark {
153
+ --color-primary: var(--payman-primary, #fafafa);
154
+ --color-primary-foreground: var(--payman-primary-foreground, #18181b);
155
+ --color-background: var(--payman-background, #18181b);
156
+ --color-foreground: var(--payman-foreground, #fafafa);
157
+ --color-card: var(--payman-card, #18181b);
158
+ --color-card-foreground: var(--payman-card-foreground, #fafafa);
159
+ --color-muted: var(--payman-muted, #27272a);
160
+ --color-muted-foreground: var(--payman-muted-foreground, #a1a1aa);
161
+ --color-border: var(--payman-border, #27272a);
162
+ --color-input: var(--payman-input, #27272a);
163
+ --color-ring: var(--payman-ring, #52525b);
164
+ --color-destructive: var(--payman-destructive, #7f1d1d);
165
+ --color-destructive-foreground: var(--payman-destructive-foreground, #fca5a5);
166
+ --color-secondary: var(--payman-secondary, #27272a);
167
+ --color-secondary-foreground: var(--payman-secondary-foreground, #fafafa);
168
+ --color-accent: var(--payman-accent, #27272a);
169
+ --color-accent-foreground: var(--payman-accent-foreground, #fafafa);
170
+ --primary: var(--payman-primary, #fafafa);
171
+ --primary-foreground: var(--payman-primary-foreground, #18181b);
172
+ --background: var(--payman-background, #18181b);
173
+ --foreground: var(--payman-foreground, #fafafa);
174
+ --card: var(--payman-card, #18181b);
175
+ --card-foreground: var(--payman-card-foreground, #fafafa);
176
+ --muted: var(--payman-muted, #27272a);
177
+ --muted-foreground: var(--payman-muted-foreground, #a1a1aa);
178
+ --border: var(--payman-border, #27272a);
179
+ --input: var(--payman-input, #27272a);
180
+ --ring: var(--payman-ring, #52525b);
181
+ --destructive: var(--payman-destructive, #7f1d1d);
182
+ --destructive-foreground: var(--payman-destructive-foreground, #fca5a5);
183
+ color: var(--payman-foreground, #fafafa);
184
+ }
185
+ .payman-chat-root *,
186
+ .payman-chat-root *::before,
187
+ .payman-chat-root *::after {
188
+ border-color: var(--payman-border, #e4e4e7);
189
+ }
190
+ .payman-modal-backdrop {
191
+ --color-primary: var(--payman-primary, #18181b);
192
+ --color-primary-foreground: var(--payman-primary-foreground, #fafafa);
193
+ --color-card: var(--payman-card, #ffffff);
194
+ --color-card-foreground: var(--payman-card-foreground, #18181b);
195
+ --color-border: var(--payman-border, #e4e4e7);
196
+ --color-foreground: var(--payman-foreground, #18181b);
197
+ --color-muted: var(--payman-muted, #f4f4f5);
198
+ --color-muted-foreground: var(--payman-muted-foreground, #71717a);
199
+ --color-destructive: var(--payman-destructive, #ef4444);
200
+ --color-destructive-foreground: var(--payman-destructive-foreground, #ef4444);
201
+ --primary: var(--payman-primary, #18181b);
202
+ --primary-foreground: var(--payman-primary-foreground, #fafafa);
203
+ --card: var(--payman-card, #ffffff);
204
+ --card-foreground: var(--payman-card-foreground, #18181b);
205
+ --border: var(--payman-border, #e4e4e7);
206
+ --foreground: var(--payman-foreground, #18181b);
207
+ --muted: var(--payman-muted, #f4f4f5);
208
+ --muted-foreground: var(--payman-muted-foreground, #71717a);
209
+ --destructive: var(--payman-destructive, #ef4444);
210
+ --destructive-foreground: var(--payman-destructive-foreground, #ef4444);
211
+ color: var(--payman-foreground, #18181b);
212
+ --payman-modal-backdrop-bg: color-mix(in srgb, #000 40%, transparent);
213
+ --payman-modal-dialog-bg: var(--payman-card, #ffffff);
214
+ --payman-modal-dialog-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 50%, transparent );
215
+ --payman-modal-icon-bg: color-mix( in srgb, var(--payman-primary, #18181b) 10%, transparent );
216
+ --payman-modal-icon-border: color-mix( in srgb, var(--payman-primary, #18181b) 20%, transparent );
217
+ --payman-modal-icon-fg: var(--payman-primary, #18181b);
218
+ --payman-modal-title-fg: var(--payman-foreground, #18181b);
219
+ --payman-modal-desc-fg: var(--payman-muted-foreground, #71717a);
220
+ --payman-modal-btn-approve-bg: var(--payman-primary, #18181b);
221
+ --payman-modal-btn-approve-fg: var(--payman-primary-foreground, #fafafa);
222
+ --payman-modal-btn-approve-hover: color-mix( in srgb, var(--payman-primary, #18181b) 90%, transparent );
223
+ --payman-modal-btn-reject-bg: color-mix( in srgb, var(--payman-destructive, #ef4444) 10%, transparent );
224
+ --payman-modal-btn-reject-fg: var(--payman-destructive, #ef4444);
225
+ --payman-modal-btn-reject-hover-bg: color-mix( in srgb, var(--payman-destructive, #ef4444) 20%, transparent );
226
+ --payman-modal-btn-resend-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 60%, transparent );
227
+ --payman-modal-btn-resend-fg: var(--payman-muted-foreground, #71717a);
228
+ --payman-modal-btn-resend-hover-fg: var(--payman-foreground, #18181b);
229
+ --payman-modal-btn-resend-hover-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 50%, transparent );
230
+ --payman-modal-btn-disabled-opacity: 0.4;
231
+ --payman-otp-bg: var(--payman-card, #ffffff);
232
+ --payman-otp-border: var(--payman-border, #e4e4e7);
233
+ --payman-otp-fg: var(--payman-foreground, #18181b);
234
+ --payman-otp-focus-border: var(--payman-primary, #18181b);
235
+ --payman-otp-focus-ring: color-mix( in srgb, var(--payman-primary, #18181b) 20%, transparent );
236
+ --payman-otp-disabled-bg: color-mix( in srgb, var(--payman-muted, #f4f4f5) 50%, transparent );
237
+ --payman-otp-disabled-opacity: 0.5;
238
+ --payman-otp-hover-border: color-mix( in srgb, var(--payman-border, #e4e4e7) 80%, transparent );
239
+ }
240
+ .payman-modal-backdrop-overlay {
241
+ background: var(--payman-modal-backdrop-bg);
242
+ }
243
+ .payman-modal-dialog {
244
+ background: var(--payman-modal-dialog-bg);
245
+ border: 1px solid var(--payman-modal-dialog-border);
246
+ }
247
+ .payman-modal-icon-wrap {
248
+ background: var(--payman-modal-icon-bg);
249
+ border: 1px solid var(--payman-modal-icon-border);
250
+ }
251
+ .payman-modal-icon {
252
+ color: var(--payman-modal-icon-fg);
253
+ }
254
+ .payman-modal-title {
255
+ color: var(--payman-modal-title-fg);
256
+ }
257
+ .payman-modal-backdrop .payman-modal-desc {
258
+ color: var(--payman-modal-desc-fg) !important;
259
+ font-size: 0.875rem !important;
260
+ line-height: 1.625 !important;
261
+ text-align: center !important;
262
+ }
263
+ .payman-modal-btn-approve {
264
+ background: var(--payman-modal-btn-approve-bg);
265
+ color: var(--payman-modal-btn-approve-fg);
266
+ }
267
+ .payman-modal-btn-approve:hover:not(:disabled) {
268
+ background: var(--payman-modal-btn-approve-hover);
269
+ }
270
+ .payman-modal-btn-approve:disabled {
271
+ opacity: var(--payman-modal-btn-disabled-opacity);
272
+ }
273
+ .payman-modal-btn-reject {
274
+ background: var(--payman-modal-btn-reject-bg);
275
+ color: var(--payman-modal-btn-reject-fg);
276
+ }
277
+ .payman-modal-btn-reject:hover:not(:disabled) {
278
+ background: var(--payman-modal-btn-reject-hover-bg);
279
+ }
280
+ .payman-modal-btn-reject:disabled {
281
+ opacity: var(--payman-modal-btn-disabled-opacity);
282
+ }
283
+ .payman-modal-btn-resend {
284
+ border: 1px solid var(--payman-modal-btn-resend-border);
285
+ color: var(--payman-modal-btn-resend-fg);
286
+ }
287
+ .payman-modal-btn-resend:hover:not(:disabled) {
288
+ color: var(--payman-modal-btn-resend-hover-fg);
289
+ background: var(--payman-modal-btn-resend-hover-bg);
290
+ }
291
+ .payman-modal-btn-resend:disabled {
292
+ opacity: var(--payman-modal-btn-disabled-opacity);
293
+ }
294
+ .payman-otp-input {
295
+ background: var(--payman-otp-bg);
296
+ border: 1px solid var(--payman-otp-border);
297
+ color: var(--payman-otp-fg);
298
+ }
299
+ .payman-otp-input:hover:not(:disabled) {
300
+ border-color: var(--payman-otp-hover-border);
301
+ }
302
+ .payman-otp-input:focus {
303
+ border-color: var(--payman-otp-focus-border);
304
+ outline: none;
305
+ box-shadow: 0 0 0 2px var(--payman-otp-focus-ring);
306
+ }
307
+ .payman-otp-input:disabled {
308
+ background: var(--payman-otp-disabled-bg);
309
+ opacity: var(--payman-otp-disabled-opacity);
310
+ }
311
+ .payman-scrollbar::-webkit-scrollbar {
312
+ width: 6px;
313
+ }
314
+ .payman-scrollbar::-webkit-scrollbar-track {
315
+ background: transparent;
316
+ }
317
+ .payman-scrollbar::-webkit-scrollbar-thumb {
318
+ background: color-mix(in srgb, var(--payman-muted-foreground, #71717a) 20%, transparent);
319
+ border-radius: 9999px;
320
+ }
321
+ .payman-scrollbar::-webkit-scrollbar-thumb:hover {
322
+ background: color-mix(in srgb, var(--payman-muted-foreground, #71717a) 35%, transparent);
323
+ }
324
+ .payman-scrollbar {
325
+ scrollbar-width: thin;
326
+ scrollbar-color: color-mix(in srgb, var(--payman-muted-foreground, #71717a) 20%, transparent) transparent;
327
+ }
328
+ @keyframes shimmer {
329
+ 0% {
330
+ background-position: 200% 0;
331
+ }
332
+ 100% {
333
+ background-position: -200% 0;
334
+ }
335
+ }
336
+ .shimmer-text {
337
+ background:
338
+ linear-gradient(
339
+ 90deg,
340
+ var(--payman-shimmer-muted, #9ca3af) 0%,
341
+ var(--payman-shimmer-muted, #9ca3af) 35%,
342
+ var(--payman-shimmer-primary, #3b82f6) 50%,
343
+ var(--payman-shimmer-muted, #9ca3af) 65%,
344
+ var(--payman-shimmer-muted, #9ca3af) 100%);
345
+ background-size: 200% 100%;
346
+ background-clip: text;
347
+ -webkit-background-clip: text;
348
+ -webkit-text-fill-color: transparent;
349
+ animation: shimmer 3.5s linear infinite;
350
+ }
351
+ @keyframes skeleton-pulse {
352
+ 0%, 100% {
353
+ opacity: 0.5;
354
+ }
355
+ 50% {
356
+ opacity: 0.8;
357
+ }
358
+ }
359
+ .skeleton-pulse {
360
+ animation: skeleton-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
361
+ }
362
+ @keyframes cursor-blink {
363
+ 0%, 100% {
364
+ opacity: 1;
365
+ }
366
+ 50% {
367
+ opacity: 0;
368
+ }
369
+ }
370
+ .streaming-cursor::after {
371
+ content: "\258d";
372
+ animation: cursor-blink 1s step-end infinite;
373
+ color: var(--payman-primary, #18181b);
374
+ margin-left: 1px;
375
+ }
376
+ @keyframes fade-in-up {
377
+ from {
378
+ opacity: 0;
379
+ transform: translateY(12px) scale(0.96);
380
+ }
381
+ to {
382
+ opacity: 1;
383
+ transform: translateY(0) scale(1);
384
+ }
385
+ }
386
+ .animate-fade-in-up {
387
+ animation: fade-in-up 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
388
+ }
389
+ .payman-markdown {
390
+ line-height: 1.65;
391
+ word-break: break-word;
392
+ overflow-wrap: anywhere;
393
+ }
394
+ .payman-markdown > *:first-child {
19
395
  margin-top: 0;
20
396
  }
21
- .markdown-content > *:last-child {
397
+ .payman-markdown > *:last-child {
22
398
  margin-bottom: 0;
23
399
  }
24
- .markdown-content pre {
400
+ .payman-markdown pre {
25
401
  overflow-x: auto;
402
+ max-width: 100%;
26
403
  }
27
- .markdown-content code {
404
+ .payman-markdown code {
28
405
  font-family:
29
406
  ui-monospace,
30
407
  SFMono-Regular,
@@ -35,52 +412,326 @@
35
412
  "Courier New",
36
413
  monospace;
37
414
  }
38
- @keyframes spin {
39
- from {
40
- transform: rotate(0deg);
41
- }
42
- to {
43
- transform: rotate(360deg);
44
- }
415
+ .payman-chat-input {
416
+ background: var(--payman-input-bg);
417
+ border: 1px solid var(--payman-input-border);
418
+ border-radius: 22px;
419
+ min-height: 52px;
420
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
421
+ transition: border-color 0.2s, box-shadow 0.2s;
45
422
  }
46
- .animate-spin {
47
- animation: spin 1s linear infinite;
423
+ .payman-chat-input:focus-within {
424
+ border-color: var(--payman-input-border-focus);
425
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
48
426
  }
49
- @keyframes pulse {
50
- 0%, 100% {
51
- opacity: 1;
52
- }
53
- 50% {
54
- opacity: 0.5;
55
- }
427
+ .payman-chat-input-field {
428
+ background: transparent;
429
+ color: var(--payman-input-text);
430
+ font-size: 0.875rem;
56
431
  }
57
- .animate-pulse {
58
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
432
+ .payman-chat-input-field::-moz-placeholder {
433
+ color: var(--payman-input-placeholder);
59
434
  }
60
- @keyframes ping {
61
- 75%, 100% {
62
- transform: scale(2);
63
- opacity: 0;
64
- }
435
+ .payman-chat-input-field::placeholder {
436
+ color: var(--payman-input-placeholder);
437
+ }
438
+ .payman-chat-input-field:disabled {
439
+ opacity: var(--payman-input-disabled-opacity);
440
+ cursor: not-allowed;
441
+ }
442
+ .payman-chat-input-btn-send {
443
+ background: var(--payman-input-btn-send-bg);
444
+ color: var(--payman-input-btn-send-fg);
445
+ }
446
+ .payman-chat-input-btn-send:hover:not(:disabled) {
447
+ opacity: 0.9;
448
+ }
449
+ .payman-chat-input-btn-send:disabled {
450
+ background: var(--payman-input-btn-send-disabled-bg);
451
+ color: var(--payman-input-btn-send-disabled-fg);
452
+ cursor: not-allowed;
453
+ }
454
+ .payman-chat-input-btn-voice {
455
+ color: var(--payman-input-btn-voice-fg);
456
+ }
457
+ .payman-chat-input-btn-voice:hover:not(:disabled) {
458
+ color: var(--payman-input-btn-voice-hover-fg);
459
+ background: var(--payman-input-btn-voice-hover-bg);
460
+ }
461
+ .payman-chat-input-btn-voice:disabled {
462
+ opacity: 0.3;
463
+ cursor: not-allowed;
65
464
  }
66
- .animate-ping {
67
- animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
465
+ .payman-chat-input-btn-voice.recording {
466
+ background: var(--payman-input-btn-voice-recording-bg);
467
+ color: var(--payman-input-btn-voice-recording-fg);
468
+ box-shadow: 0 1px 2px 0 var(--payman-input-btn-voice-recording-shadow);
68
469
  }
69
- @keyframes thinking {
70
- 0%, 60%, 100% {
470
+ .payman-chat-input-btn-pause {
471
+ background: var(--payman-input-btn-pause-bg);
472
+ color: var(--payman-input-btn-pause-fg);
473
+ }
474
+ .payman-agent-bubble {
475
+ background: var(--payman-agent-bubble-bg);
476
+ }
477
+ .payman-agent-bubble--centered {
478
+ background: var(--payman-agent-bubble-card-bg);
479
+ border: 1px solid var(--payman-agent-bubble-border);
480
+ }
481
+ .payman-agent-bubble--centered.streaming {
482
+ border-color: var(--payman-agent-bubble-border-streaming);
483
+ }
484
+ .payman-agent-bubble--centered.error {
485
+ border-color: var(--payman-agent-bubble-border-error);
486
+ }
487
+ .payman-agent-bubble--error {
488
+ background: var(--payman-agent-bubble-error-bg);
489
+ border: 1px solid var(--payman-agent-bubble-error-border);
490
+ }
491
+ .payman-agent-thinking-spinner {
492
+ color: var(--payman-agent-thinking-spinner);
493
+ }
494
+ .payman-agent-thinking-text {
495
+ color: var(--payman-agent-thinking-text);
496
+ }
497
+ .payman-agent-step-toggle {
498
+ color: var(--payman-agent-step-toggle-fg);
499
+ }
500
+ .payman-agent-step-toggle:hover {
501
+ color: var(--payman-agent-step-toggle-hover-fg);
502
+ }
503
+ .payman-agent-step-icon--active {
504
+ color: var(--payman-agent-step-icon-active);
505
+ }
506
+ .payman-agent-step-icon--success {
507
+ color: var(--payman-agent-step-icon-success);
508
+ }
509
+ .payman-agent-step-icon--success-dim {
510
+ color: var(--payman-agent-step-icon-success-dim);
511
+ }
512
+ .payman-agent-step-icon--error {
513
+ color: var(--payman-agent-step-icon-error);
514
+ }
515
+ .payman-agent-step-icon--pending {
516
+ background: var(--payman-agent-step-icon-pending);
517
+ }
518
+ .payman-agent-step-icon--pending-dim {
519
+ background: var(--payman-agent-step-icon-pending-dim);
520
+ }
521
+ .payman-agent-step-icon--in-progress-dim {
522
+ color: var(--payman-agent-step-icon-in-progress-dim);
523
+ }
524
+ .payman-agent-step-text--error {
525
+ color: var(--payman-agent-step-text-error);
526
+ }
527
+ .payman-agent-step-text--success {
528
+ color: var(--payman-agent-step-text-success);
529
+ }
530
+ .payman-agent-step-text--completed {
531
+ color: var(--payman-agent-step-text-completed);
532
+ }
533
+ .payman-agent-step-text--pending {
534
+ color: var(--payman-agent-step-text-pending);
535
+ }
536
+ .payman-agent-step-text--in-progress {
537
+ color: var(--payman-agent-step-text-in-progress);
538
+ }
539
+ .payman-agent-step-time {
540
+ background: var(--payman-agent-step-time-bg);
541
+ border: 1px solid var(--payman-agent-step-time-border);
542
+ color: var(--payman-agent-step-time-fg);
543
+ }
544
+ .payman-agent-step-time-icon {
545
+ color: var(--payman-agent-step-time-fg);
546
+ }
547
+ .payman-agent-avatar {
548
+ background: var(--payman-agent-avatar-bg);
549
+ border: 1px solid var(--payman-agent-avatar-border);
550
+ }
551
+ .payman-agent-avatar-icon {
552
+ color: var(--payman-agent-avatar-icon);
553
+ }
554
+ .payman-agent-avatar-dot {
555
+ background: var(--payman-agent-avatar-dot);
556
+ }
557
+ .payman-agent-avatar-dot-ping {
558
+ background: var(--payman-agent-avatar-dot-ping);
559
+ }
560
+ .payman-agent-approved {
561
+ background: var(--payman-agent-approved-bg) !important;
562
+ color: var(--payman-agent-approved-text) !important;
563
+ border: 1px solid var(--payman-agent-approved-border) !important;
564
+ }
565
+ .payman-agent-approved svg {
566
+ color: inherit !important;
567
+ }
568
+ .payman-agent-rejected {
569
+ background: var(--payman-agent-rejected-bg) !important;
570
+ color: var(--payman-agent-rejected-text) !important;
571
+ border: 1px solid var(--payman-agent-rejected-border) !important;
572
+ }
573
+ .payman-agent-rejected svg {
574
+ color: inherit !important;
575
+ }
576
+ .payman-agent-trace {
577
+ background: var(--payman-agent-trace-bg);
578
+ border: 1px solid var(--payman-agent-trace-border);
579
+ }
580
+ .payman-agent-trace:hover {
581
+ background: var(--payman-agent-trace-hover-bg);
582
+ border-color: var(--payman-agent-trace-hover-border);
583
+ }
584
+ .payman-agent-trace-icon {
585
+ color: var(--payman-agent-trace-icon);
586
+ }
587
+ .payman-agent-name {
588
+ color: var(--payman-agent-name-fg);
589
+ }
590
+ .payman-agent-cancelled-icon {
591
+ color: var(--payman-agent-cancelled-icon);
592
+ }
593
+ .payman-agent-cancelled-text {
594
+ color: var(--payman-agent-cancelled-text);
595
+ }
596
+ .payman-streaming-bubble {
597
+ background: var(--payman-streaming-bubble-bg);
598
+ }
599
+ .payman-streaming-bubble--error {
600
+ background: var(--payman-streaming-bubble-error-bg);
601
+ border: 1px solid var(--payman-streaming-bubble-error-border);
602
+ }
603
+ .payman-streaming-thinking-spinner {
604
+ color: var(--payman-streaming-thinking-spinner);
605
+ }
606
+ .payman-streaming-thinking-text {
607
+ color: var(--payman-streaming-thinking-text);
608
+ }
609
+ .payman-empty-root {
610
+ display: flex;
611
+ flex: 1;
612
+ flex-direction: column;
613
+ align-items: center;
614
+ justify-content: center;
615
+ text-align: center;
616
+ min-height: 0;
617
+ overflow-y: auto;
618
+ }
619
+ .payman-empty-content {
620
+ display: flex;
621
+ flex-direction: column;
622
+ align-items: center;
623
+ gap: 1.25rem;
624
+ max-width: 22rem;
625
+ }
626
+ .payman-empty-icon-wrap {
627
+ display: flex;
628
+ align-items: center;
629
+ justify-content: center;
630
+ width: 4.5rem;
631
+ height: 4.5rem;
632
+ border-radius: 1.25rem;
633
+ background: var(--payman-empty-icon-bg);
634
+ border: 1px solid var(--payman-empty-icon-border);
635
+ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04);
636
+ }
637
+ .payman-empty-icon {
638
+ color: var(--payman-empty-icon-fg);
639
+ }
640
+ .payman-empty-title {
641
+ color: var(--payman-empty-title-fg);
642
+ font-size: 1.25rem;
643
+ font-weight: 600;
644
+ line-height: 1.4;
645
+ letter-spacing: -0.02em;
646
+ }
647
+ .payman-empty-subtitle {
648
+ color: var(--payman-empty-subtitle-fg);
649
+ font-size: 0.875rem;
650
+ line-height: 1.5;
651
+ }
652
+ .payman-agent-markdown {
653
+ color: var(--payman-agent-content-text);
654
+ }
655
+ .payman-agent-markdown.payman-agent-markdown--error {
656
+ color: var(--payman-agent-content-text-error);
657
+ }
658
+ .payman-agent-markdown code:not([class*=language-]) {
659
+ background: var(--payman-agent-content-code-bg);
660
+ }
661
+ .payman-agent-markdown.payman-agent-markdown--error code:not([class*=language-]) {
662
+ background: var(--payman-agent-content-code-bg-error);
663
+ color: var(--payman-agent-content-text-error);
664
+ }
665
+ .payman-agent-markdown pre code {
666
+ background: var(--payman-agent-content-code-bg-block);
667
+ }
668
+ .payman-agent-markdown.payman-agent-markdown--error pre code {
669
+ background: var(--payman-agent-content-code-bg-error);
670
+ color: var(--payman-agent-content-text-error);
671
+ }
672
+ .payman-agent-markdown a {
673
+ color: var(--payman-agent-content-link);
674
+ }
675
+ .payman-agent-markdown a:hover {
676
+ color: var(--payman-agent-content-link-hover);
677
+ }
678
+ .payman-agent-markdown.payman-agent-markdown--error a {
679
+ color: var(--payman-agent-content-link-error);
680
+ }
681
+ .payman-agent-markdown.payman-agent-markdown--error a:hover {
682
+ color: var(--payman-agent-content-link-error-hover);
683
+ }
684
+ .payman-agent-markdown blockquote {
685
+ border-left: 3px solid var(--payman-agent-content-blockquote-border);
686
+ color: var(--payman-agent-content-blockquote-text);
687
+ }
688
+ .payman-agent-markdown hr {
689
+ border-color: var(--payman-agent-content-table-border);
690
+ }
691
+ .payman-agent-markdown table {
692
+ border-color: var(--payman-agent-content-table-border);
693
+ }
694
+ .payman-agent-markdown thead {
695
+ background: var(--payman-agent-content-thead-bg);
696
+ }
697
+ .payman-agent-markdown tr {
698
+ border-bottom-color: var(--payman-agent-content-row-border);
699
+ }
700
+ .payman-agent-markdown tr:hover {
701
+ background: var(--payman-agent-content-row-hover);
702
+ }
703
+ .payman-agent-markdown th {
704
+ color: var(--payman-agent-content-th-fg);
705
+ }
706
+ .payman-agent-markdown td {
707
+ color: var(--payman-agent-content-td-fg);
708
+ }
709
+ .otp-input:focus-visible {
710
+ outline: 2px solid var(--payman-primary, #18181b);
711
+ outline-offset: -1px;
712
+ }
713
+ @keyframes payman-modal-fadeIn {
714
+ from {
71
715
  opacity: 0;
72
716
  }
73
- 30% {
717
+ to {
74
718
  opacity: 1;
75
719
  }
76
720
  }
77
- .thinking-dot {
78
- animation: thinking 1.4s ease-in-out infinite;
721
+ @keyframes payman-modal-fadeInUp {
722
+ from {
723
+ opacity: 0;
724
+ transform: translateY(10px) scale(0.98);
725
+ }
726
+ to {
727
+ opacity: 1;
728
+ transform: translateY(0) scale(1);
729
+ }
79
730
  }
80
- .thinking-dot:nth-child(2) {
81
- animation-delay: 0.2s;
731
+ .payman-modal-backdrop-overlay.payman-modal-animate {
732
+ animation: payman-modal-fadeIn 0.2s ease;
82
733
  }
83
- .thinking-dot:nth-child(3) {
84
- animation-delay: 0.4s;
734
+ .payman-modal-dialog.payman-modal-animate {
735
+ animation: payman-modal-fadeInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
85
736
  }
86
737
  /*# sourceMappingURL=styles.css.map */