@convokitapp/react-ui 0.1.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/index.css ADDED
@@ -0,0 +1,476 @@
1
+ /* src/styles.css */
2
+ .ckui-theme,
3
+ .ckui {
4
+ --ckui-background: #f7f9f8;
5
+ --ckui-surface: #fff;
6
+ --ckui-primary: #148f78;
7
+ --ckui-text: #17211f;
8
+ --ckui-muted: #66736f;
9
+ --ckui-border: #dde5e2;
10
+ --ckui-error: #ba1a1a;
11
+ --ckui-incoming: #fff;
12
+ --ckui-outgoing: #148f78;
13
+ --ckui-outgoing-text: #fff;
14
+ --ckui-radius: 16px;
15
+ --ckui-avatar-size: 44px;
16
+ --ckui-font:
17
+ Inter,
18
+ ui-sans-serif,
19
+ system-ui,
20
+ -apple-system,
21
+ BlinkMacSystemFont,
22
+ "Segoe UI",
23
+ sans-serif;
24
+ }
25
+ .ckui-theme .ckui {
26
+ --ckui-background: inherit;
27
+ --ckui-surface: inherit;
28
+ --ckui-primary: inherit;
29
+ --ckui-text: inherit;
30
+ --ckui-muted: inherit;
31
+ --ckui-border: inherit;
32
+ --ckui-error: inherit;
33
+ --ckui-incoming: inherit;
34
+ --ckui-outgoing: inherit;
35
+ --ckui-outgoing-text: inherit;
36
+ --ckui-radius: inherit;
37
+ --ckui-avatar-size: inherit;
38
+ --ckui-font: inherit;
39
+ }
40
+ .ckui,
41
+ .ckui *,
42
+ .ckui *::before,
43
+ .ckui *::after {
44
+ box-sizing: border-box;
45
+ }
46
+ .ckui {
47
+ color: var(--ckui-text);
48
+ font-family: var(--ckui-font);
49
+ font-size: 14px;
50
+ line-height: 1.45;
51
+ }
52
+ .ckui button,
53
+ .ckui textarea {
54
+ color: inherit;
55
+ font: inherit;
56
+ }
57
+ .ckui button:focus-visible,
58
+ .ckui textarea:focus-visible {
59
+ outline: 2px solid color-mix(in srgb, var(--ckui-primary) 62%, white);
60
+ outline-offset: 2px;
61
+ }
62
+ .ckui-conversation-list,
63
+ .ckui-conversation {
64
+ display: flex;
65
+ min-width: 0;
66
+ min-height: 0;
67
+ height: 100%;
68
+ overflow: hidden;
69
+ border: 1px solid var(--ckui-border);
70
+ border-radius: var(--ckui-radius);
71
+ background: var(--ckui-background);
72
+ }
73
+ .ckui-conversation-list,
74
+ .ckui-conversation {
75
+ flex-direction: column;
76
+ }
77
+ .ckui-scroll-area,
78
+ .ckui-message-list {
79
+ min-height: 0;
80
+ overflow: auto;
81
+ overscroll-behavior: contain;
82
+ scrollbar-gutter: stable;
83
+ }
84
+ .ckui-scroll-area {
85
+ flex: 1;
86
+ padding: 12px;
87
+ }
88
+ .ckui-conversation-list__toolbar {
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: space-between;
92
+ min-height: 50px;
93
+ padding: 9px 12px 9px 16px;
94
+ border-bottom: 1px solid var(--ckui-border);
95
+ background: var(--ckui-surface);
96
+ color: var(--ckui-muted);
97
+ font-size: 11px;
98
+ font-weight: 700;
99
+ letter-spacing: .08em;
100
+ text-transform: uppercase;
101
+ }
102
+ .ckui-conversation-list__items {
103
+ display: grid;
104
+ gap: 8px;
105
+ }
106
+ .ckui-conversation-item {
107
+ display: grid;
108
+ grid-template-columns: auto minmax(0, 1fr) auto;
109
+ gap: 11px;
110
+ align-items: center;
111
+ width: 100%;
112
+ min-height: 64px;
113
+ padding: 9px 11px;
114
+ border: 1px solid var(--ckui-border);
115
+ border-radius: calc(var(--ckui-radius) - 2px);
116
+ background: var(--ckui-surface);
117
+ cursor: pointer;
118
+ text-align: left;
119
+ transition:
120
+ border-color 150ms ease,
121
+ background 150ms ease,
122
+ transform 150ms ease;
123
+ }
124
+ .ckui-conversation-item:hover {
125
+ border-color: color-mix(in srgb, var(--ckui-primary) 35%, var(--ckui-border));
126
+ transform: translateY(-1px);
127
+ }
128
+ .ckui-conversation-item[data-selected] {
129
+ border-color: color-mix(in srgb, var(--ckui-primary) 52%, var(--ckui-border));
130
+ background: color-mix(in srgb, var(--ckui-primary) 9%, var(--ckui-surface));
131
+ }
132
+ .ckui-conversation-item__body {
133
+ display: grid;
134
+ min-width: 0;
135
+ }
136
+ .ckui-conversation-item__body strong,
137
+ .ckui-conversation-item__body span {
138
+ overflow: hidden;
139
+ text-overflow: ellipsis;
140
+ white-space: nowrap;
141
+ }
142
+ .ckui-conversation-item__body strong {
143
+ font-size: 15px;
144
+ font-weight: 700;
145
+ }
146
+ .ckui-conversation-item__body span {
147
+ color: var(--ckui-muted);
148
+ font-size: 12px;
149
+ }
150
+ .ckui-avatar {
151
+ display: inline-grid;
152
+ flex: 0 0 auto;
153
+ width: var(--ckui-avatar-size);
154
+ height: var(--ckui-avatar-size);
155
+ overflow: hidden;
156
+ place-items: center;
157
+ border-radius: 999px;
158
+ background: color-mix(in srgb, var(--ckui-primary) 11%, var(--ckui-surface));
159
+ color: var(--ckui-primary);
160
+ font-size: 13px;
161
+ font-weight: 750;
162
+ }
163
+ .ckui-avatar__image,
164
+ .ckui-avatar__fallback {
165
+ width: 100%;
166
+ height: 100%;
167
+ }
168
+ .ckui-avatar__image {
169
+ object-fit: cover;
170
+ }
171
+ .ckui-avatar__fallback {
172
+ display: grid;
173
+ place-items: center;
174
+ }
175
+ .ckui-separator {
176
+ display: none;
177
+ }
178
+ .ckui-icon-button,
179
+ .ckui-send-button,
180
+ .ckui-link-button {
181
+ border: 0;
182
+ background: transparent;
183
+ cursor: pointer;
184
+ }
185
+ .ckui-icon-button {
186
+ display: inline-grid;
187
+ flex: 0 0 auto;
188
+ width: 36px;
189
+ height: 36px;
190
+ place-items: center;
191
+ border-radius: 999px;
192
+ color: var(--ckui-muted);
193
+ }
194
+ .ckui-icon-button:hover {
195
+ background: color-mix(in srgb, var(--ckui-primary) 8%, transparent);
196
+ color: var(--ckui-primary);
197
+ }
198
+ .ckui-state,
199
+ .ckui-inline-state {
200
+ display: flex;
201
+ align-items: center;
202
+ justify-content: center;
203
+ gap: 8px;
204
+ min-height: 120px;
205
+ padding: 20px;
206
+ color: var(--ckui-muted);
207
+ text-align: center;
208
+ }
209
+ .ckui-inline-state {
210
+ min-height: 52px;
211
+ font-size: 12px;
212
+ }
213
+ .ckui-state--error,
214
+ .ckui-conversation-error {
215
+ color: var(--ckui-error);
216
+ }
217
+ .ckui-link-button {
218
+ color: currentColor;
219
+ font-weight: 700;
220
+ text-decoration: underline;
221
+ text-underline-offset: 3px;
222
+ }
223
+ .ckui-conversation-header {
224
+ display: flex;
225
+ align-items: center;
226
+ gap: 10px;
227
+ min-height: 64px;
228
+ padding: 9px 12px;
229
+ border-bottom: 1px solid var(--ckui-border);
230
+ background: var(--ckui-surface);
231
+ }
232
+ .ckui-conversation-header__body {
233
+ display: grid;
234
+ flex: 1;
235
+ min-width: 0;
236
+ }
237
+ .ckui-conversation-header__body strong {
238
+ overflow: hidden;
239
+ font-size: 16px;
240
+ text-overflow: ellipsis;
241
+ white-space: nowrap;
242
+ }
243
+ .ckui-conversation-header__body span {
244
+ color: var(--ckui-muted);
245
+ font-size: 12px;
246
+ }
247
+ .ckui-conversation-error {
248
+ display: flex;
249
+ align-items: center;
250
+ justify-content: space-between;
251
+ gap: 12px;
252
+ padding: 8px 14px;
253
+ border-bottom: 1px solid color-mix(in srgb, var(--ckui-error) 25%, transparent);
254
+ background: color-mix(in srgb, var(--ckui-error) 7%, var(--ckui-surface));
255
+ font-size: 12px;
256
+ }
257
+ .ckui-message-list {
258
+ display: flex;
259
+ flex: 1;
260
+ flex-direction: column;
261
+ gap: 10px;
262
+ padding: 14px 16px;
263
+ background: var(--ckui-background);
264
+ }
265
+ .ckui-message-row {
266
+ display: flex;
267
+ flex-direction: column;
268
+ align-items: flex-start;
269
+ }
270
+ .ckui-message-row--outgoing {
271
+ align-items: flex-end;
272
+ }
273
+ .ckui-message-bubble {
274
+ max-width: min(76%, 560px);
275
+ padding: 10px 13px 8px;
276
+ border: 1px solid var(--ckui-border);
277
+ border-radius: var(--ckui-radius) var(--ckui-radius) var(--ckui-radius) 5px;
278
+ background: var(--ckui-incoming);
279
+ box-shadow: 0 1px 1px rgba(16, 24, 22, .03);
280
+ }
281
+ .ckui-message-row--outgoing .ckui-message-bubble {
282
+ border-color: transparent;
283
+ border-radius: var(--ckui-radius) var(--ckui-radius) 5px var(--ckui-radius);
284
+ background: var(--ckui-outgoing);
285
+ color: var(--ckui-outgoing-text);
286
+ }
287
+ .ckui-message-sender {
288
+ display: block;
289
+ margin-bottom: 3px;
290
+ color: var(--ckui-primary);
291
+ font-size: 12px;
292
+ }
293
+ .ckui-message-text {
294
+ overflow-wrap: anywhere;
295
+ white-space: pre-wrap;
296
+ }
297
+ .ckui-message-time {
298
+ display: flex;
299
+ align-items: center;
300
+ justify-content: flex-end;
301
+ gap: 3px;
302
+ margin-top: 5px;
303
+ color: color-mix(in srgb, currentColor 68%, transparent);
304
+ font-size: 10px;
305
+ }
306
+ .ckui-read-receipt {
307
+ min-height: 16px;
308
+ padding-top: 3px;
309
+ color: var(--ckui-muted);
310
+ font-size: 10px;
311
+ }
312
+ .ckui-media {
313
+ margin-top: 8px;
314
+ }
315
+ .ckui-media-card {
316
+ display: flex;
317
+ align-items: center;
318
+ gap: 9px;
319
+ width: 100%;
320
+ min-width: 210px;
321
+ padding: 9px;
322
+ overflow: hidden;
323
+ border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
324
+ border-radius: calc(var(--ckui-radius) - 5px);
325
+ background: color-mix(in srgb, var(--ckui-surface) 91%, transparent);
326
+ color: var(--ckui-text);
327
+ text-align: left;
328
+ }
329
+ button.ckui-media-card {
330
+ cursor: pointer;
331
+ }
332
+ .ckui-media-card > span {
333
+ display: grid;
334
+ flex: 1;
335
+ min-width: 0;
336
+ }
337
+ .ckui-media-card strong,
338
+ .ckui-media-card small {
339
+ overflow: hidden;
340
+ text-overflow: ellipsis;
341
+ white-space: nowrap;
342
+ }
343
+ .ckui-media-card small {
344
+ color: var(--ckui-muted);
345
+ }
346
+ .ckui-media-card--image {
347
+ display: grid;
348
+ max-width: 330px;
349
+ padding: 0;
350
+ }
351
+ .ckui-media-card--image img {
352
+ display: block;
353
+ width: 100%;
354
+ max-height: 280px;
355
+ object-fit: cover;
356
+ }
357
+ .ckui-media-name {
358
+ padding: 0 10px 9px;
359
+ font-size: 11px;
360
+ }
361
+ .ckui-media-placeholder {
362
+ min-height: 120px;
363
+ place-items: center;
364
+ padding: 20px;
365
+ }
366
+ .ckui-typing {
367
+ min-height: 26px;
368
+ padding: 5px 16px;
369
+ border-top: 1px solid color-mix(in srgb, var(--ckui-border) 70%, transparent);
370
+ background: var(--ckui-background);
371
+ color: var(--ckui-muted);
372
+ font-size: 11px;
373
+ }
374
+ .ckui-composer {
375
+ display: flex;
376
+ align-items: flex-end;
377
+ gap: 8px;
378
+ padding: 10px 12px;
379
+ border-top: 1px solid var(--ckui-border);
380
+ background: var(--ckui-surface);
381
+ }
382
+ .ckui-composer__input {
383
+ flex: 1;
384
+ min-width: 0;
385
+ min-height: 40px;
386
+ max-height: 132px;
387
+ padding: 10px 13px;
388
+ resize: none;
389
+ border: 1px solid transparent;
390
+ border-radius: 20px;
391
+ outline: 0;
392
+ background: var(--ckui-background);
393
+ }
394
+ .ckui-composer__input:focus {
395
+ border-color: color-mix(in srgb, var(--ckui-primary) 42%, var(--ckui-border));
396
+ }
397
+ .ckui-send-button {
398
+ display: inline-grid;
399
+ flex: 0 0 auto;
400
+ width: 40px;
401
+ height: 40px;
402
+ place-items: center;
403
+ border-radius: 999px;
404
+ background: var(--ckui-primary);
405
+ color: #fff;
406
+ }
407
+ .ckui-send-button:disabled,
408
+ .ckui-icon-button:disabled {
409
+ cursor: not-allowed;
410
+ opacity: .45;
411
+ }
412
+ .ckui[data-density=compact] {
413
+ font-size: 12px;
414
+ }
415
+ .ckui[data-density=compact] .ckui-scroll-area {
416
+ padding: 7px;
417
+ }
418
+ .ckui[data-density=compact] .ckui-conversation-list__items {
419
+ gap: 2px;
420
+ }
421
+ .ckui[data-density=compact] .ckui-conversation-item {
422
+ min-height: 44px;
423
+ padding: 5px 7px;
424
+ border-color: transparent;
425
+ background: transparent;
426
+ }
427
+ .ckui[data-density=compact] .ckui-avatar {
428
+ --ckui-avatar-size: 30px;
429
+ font-size: 10px;
430
+ }
431
+ .ckui[data-density=compact] .ckui-message-list {
432
+ gap: 3px;
433
+ padding: 8px 12px;
434
+ }
435
+ .ckui[data-density=compact] .ckui-message-bubble {
436
+ max-width: 88%;
437
+ padding: 6px 9px;
438
+ }
439
+ .ckui[data-density=compact] .ckui-conversation-header {
440
+ min-height: 50px;
441
+ }
442
+ .ckui[data-density=compact] .ckui-typing {
443
+ min-height: 22px;
444
+ padding-block: 3px;
445
+ }
446
+ .ckui[data-density=compact] .ckui-composer {
447
+ padding: 6px 8px;
448
+ }
449
+ .ckui-spin {
450
+ animation: ckui-spin 900ms linear infinite;
451
+ }
452
+ @keyframes ckui-spin {
453
+ to {
454
+ transform: rotate(360deg);
455
+ }
456
+ }
457
+ @media (prefers-reduced-motion: reduce) {
458
+ .ckui *,
459
+ .ckui *::before,
460
+ .ckui *::after {
461
+ scroll-behavior: auto !important;
462
+ transition-duration: .01ms !important;
463
+ animation-duration: .01ms !important;
464
+ animation-iteration-count: 1 !important;
465
+ }
466
+ }
467
+ @media (max-width: 560px) {
468
+ .ckui-message-bubble {
469
+ max-width: 88%;
470
+ }
471
+ .ckui-scroll-area,
472
+ .ckui-message-list {
473
+ padding-inline: 10px;
474
+ }
475
+ }
476
+ /*# sourceMappingURL=index.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/styles.css"],"sourcesContent":[".ckui-theme,\n.ckui {\n --ckui-background: #f7f9f8;\n --ckui-surface: #fff;\n --ckui-primary: #148f78;\n --ckui-text: #17211f;\n --ckui-muted: #66736f;\n --ckui-border: #dde5e2;\n --ckui-error: #ba1a1a;\n --ckui-incoming: #fff;\n --ckui-outgoing: #148f78;\n --ckui-outgoing-text: #fff;\n --ckui-radius: 16px;\n --ckui-avatar-size: 44px;\n --ckui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n.ckui-theme .ckui {\n --ckui-background: inherit;\n --ckui-surface: inherit;\n --ckui-primary: inherit;\n --ckui-text: inherit;\n --ckui-muted: inherit;\n --ckui-border: inherit;\n --ckui-error: inherit;\n --ckui-incoming: inherit;\n --ckui-outgoing: inherit;\n --ckui-outgoing-text: inherit;\n --ckui-radius: inherit;\n --ckui-avatar-size: inherit;\n --ckui-font: inherit;\n}\n\n.ckui,\n.ckui *,\n.ckui *::before,\n.ckui *::after {\n box-sizing: border-box;\n}\n\n.ckui {\n color: var(--ckui-text);\n font-family: var(--ckui-font);\n font-size: 14px;\n line-height: 1.45;\n}\n\n.ckui button,\n.ckui textarea {\n color: inherit;\n font: inherit;\n}\n\n.ckui button:focus-visible,\n.ckui textarea:focus-visible {\n outline: 2px solid color-mix(in srgb, var(--ckui-primary) 62%, white);\n outline-offset: 2px;\n}\n\n.ckui-conversation-list,\n.ckui-conversation {\n display: flex;\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden;\n border: 1px solid var(--ckui-border);\n border-radius: var(--ckui-radius);\n background: var(--ckui-background);\n}\n\n.ckui-conversation-list,\n.ckui-conversation {\n flex-direction: column;\n}\n\n.ckui-scroll-area,\n.ckui-message-list {\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n scrollbar-gutter: stable;\n}\n\n.ckui-scroll-area {\n flex: 1;\n padding: 12px;\n}\n\n.ckui-conversation-list__toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 50px;\n padding: 9px 12px 9px 16px;\n border-bottom: 1px solid var(--ckui-border);\n background: var(--ckui-surface);\n color: var(--ckui-muted);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: .08em;\n text-transform: uppercase;\n}\n\n.ckui-conversation-list__items {\n display: grid;\n gap: 8px;\n}\n\n.ckui-conversation-item {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n gap: 11px;\n align-items: center;\n width: 100%;\n min-height: 64px;\n padding: 9px 11px;\n border: 1px solid var(--ckui-border);\n border-radius: calc(var(--ckui-radius) - 2px);\n background: var(--ckui-surface);\n cursor: pointer;\n text-align: left;\n transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;\n}\n\n.ckui-conversation-item:hover {\n border-color: color-mix(in srgb, var(--ckui-primary) 35%, var(--ckui-border));\n transform: translateY(-1px);\n}\n\n.ckui-conversation-item[data-selected] {\n border-color: color-mix(in srgb, var(--ckui-primary) 52%, var(--ckui-border));\n background: color-mix(in srgb, var(--ckui-primary) 9%, var(--ckui-surface));\n}\n\n.ckui-conversation-item__body {\n display: grid;\n min-width: 0;\n}\n\n.ckui-conversation-item__body strong,\n.ckui-conversation-item__body span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.ckui-conversation-item__body strong {\n font-size: 15px;\n font-weight: 700;\n}\n\n.ckui-conversation-item__body span {\n color: var(--ckui-muted);\n font-size: 12px;\n}\n\n.ckui-avatar {\n display: inline-grid;\n flex: 0 0 auto;\n width: var(--ckui-avatar-size);\n height: var(--ckui-avatar-size);\n overflow: hidden;\n place-items: center;\n border-radius: 999px;\n background: color-mix(in srgb, var(--ckui-primary) 11%, var(--ckui-surface));\n color: var(--ckui-primary);\n font-size: 13px;\n font-weight: 750;\n}\n\n.ckui-avatar__image,\n.ckui-avatar__fallback {\n width: 100%;\n height: 100%;\n}\n\n.ckui-avatar__image { object-fit: cover; }\n.ckui-avatar__fallback { display: grid; place-items: center; }\n\n.ckui-separator { display: none; }\n\n.ckui-icon-button,\n.ckui-send-button,\n.ckui-link-button {\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.ckui-icon-button {\n display: inline-grid;\n flex: 0 0 auto;\n width: 36px;\n height: 36px;\n place-items: center;\n border-radius: 999px;\n color: var(--ckui-muted);\n}\n\n.ckui-icon-button:hover { background: color-mix(in srgb, var(--ckui-primary) 8%, transparent); color: var(--ckui-primary); }\n\n.ckui-state,\n.ckui-inline-state {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 120px;\n padding: 20px;\n color: var(--ckui-muted);\n text-align: center;\n}\n\n.ckui-inline-state { min-height: 52px; font-size: 12px; }\n.ckui-state--error,\n.ckui-conversation-error { color: var(--ckui-error); }\n.ckui-link-button { color: currentColor; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }\n\n.ckui-conversation-header {\n display: flex;\n align-items: center;\n gap: 10px;\n min-height: 64px;\n padding: 9px 12px;\n border-bottom: 1px solid var(--ckui-border);\n background: var(--ckui-surface);\n}\n\n.ckui-conversation-header__body {\n display: grid;\n flex: 1;\n min-width: 0;\n}\n\n.ckui-conversation-header__body strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }\n.ckui-conversation-header__body span { color: var(--ckui-muted); font-size: 12px; }\n\n.ckui-conversation-error {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 14px;\n border-bottom: 1px solid color-mix(in srgb, var(--ckui-error) 25%, transparent);\n background: color-mix(in srgb, var(--ckui-error) 7%, var(--ckui-surface));\n font-size: 12px;\n}\n\n.ckui-message-list {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 10px;\n padding: 14px 16px;\n background: var(--ckui-background);\n}\n\n.ckui-message-row { display: flex; flex-direction: column; align-items: flex-start; }\n.ckui-message-row--outgoing { align-items: flex-end; }\n\n.ckui-message-bubble {\n max-width: min(76%, 560px);\n padding: 10px 13px 8px;\n border: 1px solid var(--ckui-border);\n border-radius: var(--ckui-radius) var(--ckui-radius) var(--ckui-radius) 5px;\n background: var(--ckui-incoming);\n box-shadow: 0 1px 1px rgba(16, 24, 22, .03);\n}\n\n.ckui-message-row--outgoing .ckui-message-bubble {\n border-color: transparent;\n border-radius: var(--ckui-radius) var(--ckui-radius) 5px var(--ckui-radius);\n background: var(--ckui-outgoing);\n color: var(--ckui-outgoing-text);\n}\n\n.ckui-message-sender {\n display: block;\n margin-bottom: 3px;\n color: var(--ckui-primary);\n font-size: 12px;\n}\n\n.ckui-message-text { overflow-wrap: anywhere; white-space: pre-wrap; }\n\n.ckui-message-time {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 3px;\n margin-top: 5px;\n color: color-mix(in srgb, currentColor 68%, transparent);\n font-size: 10px;\n}\n\n.ckui-read-receipt {\n min-height: 16px;\n padding-top: 3px;\n color: var(--ckui-muted);\n font-size: 10px;\n}\n\n.ckui-media { margin-top: 8px; }\n.ckui-media-card {\n display: flex;\n align-items: center;\n gap: 9px;\n width: 100%;\n min-width: 210px;\n padding: 9px;\n overflow: hidden;\n border: 1px solid color-mix(in srgb, currentColor 16%, transparent);\n border-radius: calc(var(--ckui-radius) - 5px);\n background: color-mix(in srgb, var(--ckui-surface) 91%, transparent);\n color: var(--ckui-text);\n text-align: left;\n}\n\nbutton.ckui-media-card { cursor: pointer; }\n.ckui-media-card > span { display: grid; flex: 1; min-width: 0; }\n.ckui-media-card strong,\n.ckui-media-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ckui-media-card small { color: var(--ckui-muted); }\n\n.ckui-media-card--image {\n display: grid;\n max-width: 330px;\n padding: 0;\n}\n\n.ckui-media-card--image img {\n display: block;\n width: 100%;\n max-height: 280px;\n object-fit: cover;\n}\n\n.ckui-media-name { padding: 0 10px 9px; font-size: 11px; }\n.ckui-media-placeholder { min-height: 120px; place-items: center; padding: 20px; }\n\n.ckui-typing {\n min-height: 26px;\n padding: 5px 16px;\n border-top: 1px solid color-mix(in srgb, var(--ckui-border) 70%, transparent);\n background: var(--ckui-background);\n color: var(--ckui-muted);\n font-size: 11px;\n}\n\n.ckui-composer {\n display: flex;\n align-items: flex-end;\n gap: 8px;\n padding: 10px 12px;\n border-top: 1px solid var(--ckui-border);\n background: var(--ckui-surface);\n}\n\n.ckui-composer__input {\n flex: 1;\n min-width: 0;\n min-height: 40px;\n max-height: 132px;\n padding: 10px 13px;\n resize: none;\n border: 1px solid transparent;\n border-radius: 20px;\n outline: 0;\n background: var(--ckui-background);\n}\n\n.ckui-composer__input:focus { border-color: color-mix(in srgb, var(--ckui-primary) 42%, var(--ckui-border)); }\n\n.ckui-send-button {\n display: inline-grid;\n flex: 0 0 auto;\n width: 40px;\n height: 40px;\n place-items: center;\n border-radius: 999px;\n background: var(--ckui-primary);\n color: #fff;\n}\n\n.ckui-send-button:disabled,\n.ckui-icon-button:disabled { cursor: not-allowed; opacity: .45; }\n\n.ckui[data-density='compact'] { font-size: 12px; }\n.ckui[data-density='compact'] .ckui-scroll-area { padding: 7px; }\n.ckui[data-density='compact'] .ckui-conversation-list__items { gap: 2px; }\n.ckui[data-density='compact'] .ckui-conversation-item { min-height: 44px; padding: 5px 7px; border-color: transparent; background: transparent; }\n.ckui[data-density='compact'] .ckui-avatar { --ckui-avatar-size: 30px; font-size: 10px; }\n.ckui[data-density='compact'] .ckui-message-list { gap: 3px; padding: 8px 12px; }\n.ckui[data-density='compact'] .ckui-message-bubble { max-width: 88%; padding: 6px 9px; }\n.ckui[data-density='compact'] .ckui-conversation-header { min-height: 50px; }\n.ckui[data-density='compact'] .ckui-typing { min-height: 22px; padding-block: 3px; }\n.ckui[data-density='compact'] .ckui-composer { padding: 6px 8px; }\n\n.ckui-spin { animation: ckui-spin 900ms linear infinite; }\n@keyframes ckui-spin { to { transform: rotate(360deg); } }\n\n@media (prefers-reduced-motion: reduce) {\n .ckui *, .ckui *::before, .ckui *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }\n}\n\n@media (max-width: 560px) {\n .ckui-message-bubble { max-width: 88%; }\n .ckui-scroll-area, .ckui-message-list { padding-inline: 10px; }\n}\n"],"mappings":"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","names":[]}