@bitbaum/chatkit 0.21.1 → 0.21.2
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/README.md +7 -0
- package/package.json +7 -5
- package/styles/chat.css +1986 -0
- package/styles.css +9 -4
package/styles/chat.css
ADDED
|
@@ -0,0 +1,1986 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @bitbaum/chatkit — the look of the one chat.
|
|
3
|
+
*
|
|
4
|
+
* Every colour, radius and face is a --ck-* variable. By default they read
|
|
5
|
+
* @bitbaum/design-tokens' HSL-triplet variables, so apps on those tokens match
|
|
6
|
+
* without doing anything. An app whose variables are full colours (loki's are
|
|
7
|
+
* OKLCH under the same names) maps them once — `:root { --ck-bg:
|
|
8
|
+
* var(--surface-base); … }` — and any other app sets --ck-* to keep its own
|
|
9
|
+
* look. The BEHAVIOUR is what is shared, and it is not configurable.
|
|
10
|
+
*
|
|
11
|
+
* Non-negotiable, and why:
|
|
12
|
+
* - 16px text in the input and the messages: under 16px iOS zooms the whole
|
|
13
|
+
* page when the input is focused (loki globals.css).
|
|
14
|
+
* - 44px touch targets on every control (WCAG 2.5.8, loki's audit).
|
|
15
|
+
* - Nothing wider than its container at 320px (min-width: 0 on flex rows —
|
|
16
|
+
* heidi composer.tsx).
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
:where(:root) {
|
|
20
|
+
/* Defaults at ZERO specificity on the root: an app's own :root (or any
|
|
21
|
+
container) rule setting a --ck-* variable always wins. Declaring these on
|
|
22
|
+
the chat's elements instead would silently override the app. */
|
|
23
|
+
--ck-page: hsl(var(--surface-page, 0 0% 99%));
|
|
24
|
+
--ck-bg: hsl(var(--surface-base, 0 0% 100%));
|
|
25
|
+
--ck-raised: hsl(var(--surface-raised, 0 0% 96%));
|
|
26
|
+
--ck-overlay: hsl(var(--surface-overlay, 0 0% 98%));
|
|
27
|
+
--ck-fg: hsl(var(--text-primary, 0 0% 10%));
|
|
28
|
+
--ck-fg-2: hsl(var(--text-secondary, 0 0% 30%));
|
|
29
|
+
--ck-fg-3: hsl(var(--text-tertiary, 0 0% 42%));
|
|
30
|
+
--ck-muted: hsl(var(--text-muted, 0 0% 50%));
|
|
31
|
+
--ck-line: hsl(var(--border-subtle, 0 0% 90%));
|
|
32
|
+
--ck-line-2: hsl(var(--border-default, 0 0% 82%));
|
|
33
|
+
--ck-accent: var(--accent-primary, #ff5c00);
|
|
34
|
+
--ck-on-accent: hsl(var(--on-accent, 0 0% 8%));
|
|
35
|
+
--ck-accent-soft: color-mix(in srgb, var(--ck-accent) 14%, transparent);
|
|
36
|
+
--ck-danger: hsl(var(--status-negative, 0 65% 50%));
|
|
37
|
+
--ck-danger-soft: color-mix(in srgb, var(--ck-danger) 12%, transparent);
|
|
38
|
+
--ck-on-danger: #fff;
|
|
39
|
+
--ck-warning: hsl(var(--status-warning, 38 92% 45%));
|
|
40
|
+
--ck-radius: 1rem;
|
|
41
|
+
--ck-radius-sm: var(--radius-control, 0.5rem);
|
|
42
|
+
--ck-font: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
|
|
43
|
+
--ck-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
|
|
44
|
+
--ck-text: 1rem;
|
|
45
|
+
--ck-leading: 1.6;
|
|
46
|
+
--ck-target: 2.75rem;
|
|
47
|
+
/* ChatScreen: the reading column, and the margin it keeps from the edge. */
|
|
48
|
+
--ck-measure: 48rem;
|
|
49
|
+
--ck-gutter: 1rem;
|
|
50
|
+
/* ChatScreen measures the floating header and dock into these; with no
|
|
51
|
+
ChatScreen they are 0. --ck-viewport-height is set by useViewportHeight. */
|
|
52
|
+
--ck-top-inset: 0px;
|
|
53
|
+
--ck-bottom-inset: 0px;
|
|
54
|
+
--ck-viewport-height: 100dvh;
|
|
55
|
+
/* The person's own words. Neutral, not the accent: the accent is for the
|
|
56
|
+
one thing to press, and a column of tinted pills spent it on every turn. */
|
|
57
|
+
--ck-bubble: var(--ck-raised);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.ck-screen,
|
|
61
|
+
.ck-composer-wrap,
|
|
62
|
+
.ck-thread-wrap,
|
|
63
|
+
.ck-starters,
|
|
64
|
+
.ck-replies {
|
|
65
|
+
font-family: var(--ck-font);
|
|
66
|
+
color: var(--ck-fg);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.ck-screen *,
|
|
70
|
+
.ck-composer-wrap *,
|
|
71
|
+
.ck-thread-wrap *,
|
|
72
|
+
.ck-starters *,
|
|
73
|
+
.ck-replies * {
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* ── composer ───────────────────────────────────────────────────────────── */
|
|
78
|
+
.ck-composer-wrap {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
gap: 0.5rem;
|
|
82
|
+
min-width: 0;
|
|
83
|
+
}
|
|
84
|
+
.ck-composer-frame {
|
|
85
|
+
position: relative;
|
|
86
|
+
min-width: 0;
|
|
87
|
+
}
|
|
88
|
+
.ck-composer {
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
gap: 0.5rem;
|
|
92
|
+
min-width: 0;
|
|
93
|
+
padding: 0.75rem 0.75rem 0.625rem;
|
|
94
|
+
border: 1px solid var(--ck-line);
|
|
95
|
+
border-radius: var(--ck-radius);
|
|
96
|
+
background: var(--ck-bg);
|
|
97
|
+
transition: border-color 0.15s ease;
|
|
98
|
+
}
|
|
99
|
+
.ck-composer:focus-within {
|
|
100
|
+
border-color: var(--ck-line-2);
|
|
101
|
+
}
|
|
102
|
+
.ck-composer-compact {
|
|
103
|
+
gap: 0.375rem;
|
|
104
|
+
padding: 0.5rem;
|
|
105
|
+
border-radius: calc(var(--ck-radius) * 0.75);
|
|
106
|
+
}
|
|
107
|
+
.ck-input {
|
|
108
|
+
display: block;
|
|
109
|
+
width: 100%;
|
|
110
|
+
min-height: 2.5rem;
|
|
111
|
+
max-height: 15rem;
|
|
112
|
+
resize: none;
|
|
113
|
+
overflow-y: auto;
|
|
114
|
+
padding: 0.375rem 0.25rem;
|
|
115
|
+
border: 0;
|
|
116
|
+
outline: none;
|
|
117
|
+
background: transparent;
|
|
118
|
+
color: var(--ck-fg);
|
|
119
|
+
font: inherit;
|
|
120
|
+
font-size: max(16px, var(--ck-text));
|
|
121
|
+
line-height: var(--ck-leading);
|
|
122
|
+
}
|
|
123
|
+
.ck-input::placeholder {
|
|
124
|
+
color: var(--ck-muted);
|
|
125
|
+
/* One line, always: an empty box is one row high on every phone, and a
|
|
126
|
+
long placeholder is cut at the edge rather than wrapped into a second
|
|
127
|
+
line that the box then clips in half (320px, 2026-10-21). */
|
|
128
|
+
white-space: nowrap;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
text-overflow: ellipsis;
|
|
131
|
+
}
|
|
132
|
+
.ck-input:placeholder-shown {
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
}
|
|
135
|
+
.ck-actions {
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
justify-content: space-between;
|
|
139
|
+
gap: 0.5rem;
|
|
140
|
+
min-width: 0;
|
|
141
|
+
}
|
|
142
|
+
.ck-tools {
|
|
143
|
+
display: flex;
|
|
144
|
+
flex-wrap: wrap;
|
|
145
|
+
align-items: center;
|
|
146
|
+
gap: 0.375rem;
|
|
147
|
+
min-width: 0;
|
|
148
|
+
}
|
|
149
|
+
.ck-submit {
|
|
150
|
+
display: flex;
|
|
151
|
+
align-items: center;
|
|
152
|
+
gap: 0.5rem;
|
|
153
|
+
flex-shrink: 0;
|
|
154
|
+
}
|
|
155
|
+
.ck-hint {
|
|
156
|
+
min-width: 0;
|
|
157
|
+
overflow: hidden;
|
|
158
|
+
text-overflow: ellipsis;
|
|
159
|
+
white-space: nowrap;
|
|
160
|
+
color: var(--ck-muted);
|
|
161
|
+
font-size: 0.8125rem;
|
|
162
|
+
}
|
|
163
|
+
@media (max-width: 480px) {
|
|
164
|
+
.ck-hint {
|
|
165
|
+
display: none;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
.ck-icon-btn,
|
|
169
|
+
.ck-send {
|
|
170
|
+
display: inline-flex;
|
|
171
|
+
align-items: center;
|
|
172
|
+
justify-content: center;
|
|
173
|
+
flex-shrink: 0;
|
|
174
|
+
min-width: var(--ck-target);
|
|
175
|
+
min-height: var(--ck-target);
|
|
176
|
+
padding: 0;
|
|
177
|
+
border-radius: 999px;
|
|
178
|
+
font-size: 1.125rem;
|
|
179
|
+
cursor: pointer;
|
|
180
|
+
transition:
|
|
181
|
+
background 0.15s ease,
|
|
182
|
+
color 0.15s ease,
|
|
183
|
+
border-color 0.15s ease,
|
|
184
|
+
opacity 0.15s ease;
|
|
185
|
+
}
|
|
186
|
+
.ck-icon-btn {
|
|
187
|
+
border: 1px solid var(--ck-line);
|
|
188
|
+
background: var(--ck-raised);
|
|
189
|
+
color: var(--ck-fg-2);
|
|
190
|
+
}
|
|
191
|
+
.ck-icon-btn:hover:not(:disabled) {
|
|
192
|
+
border-color: var(--ck-line-2);
|
|
193
|
+
color: var(--ck-fg);
|
|
194
|
+
}
|
|
195
|
+
.ck-mic-on {
|
|
196
|
+
border-color: var(--ck-danger);
|
|
197
|
+
background: var(--ck-danger-soft);
|
|
198
|
+
color: var(--ck-danger);
|
|
199
|
+
}
|
|
200
|
+
.ck-send {
|
|
201
|
+
border: 0;
|
|
202
|
+
background: var(--ck-accent);
|
|
203
|
+
color: var(--ck-on-accent);
|
|
204
|
+
}
|
|
205
|
+
.ck-send:hover:not(:disabled) {
|
|
206
|
+
opacity: 0.9;
|
|
207
|
+
}
|
|
208
|
+
.ck-send:disabled,
|
|
209
|
+
.ck-icon-btn:disabled {
|
|
210
|
+
cursor: not-allowed;
|
|
211
|
+
opacity: 0.45;
|
|
212
|
+
}
|
|
213
|
+
.ck-send:disabled {
|
|
214
|
+
background: var(--ck-raised);
|
|
215
|
+
color: var(--ck-muted);
|
|
216
|
+
opacity: 1;
|
|
217
|
+
}
|
|
218
|
+
.ck-send-stop {
|
|
219
|
+
background: var(--ck-raised);
|
|
220
|
+
color: var(--ck-fg);
|
|
221
|
+
border: 1px solid var(--ck-line-2);
|
|
222
|
+
}
|
|
223
|
+
:where(.ck-composer-wrap, .ck-thread-wrap, .ck-starters, .ck-replies) button:focus-visible,
|
|
224
|
+
.ck-input:focus-visible {
|
|
225
|
+
outline: 2px solid var(--ck-accent);
|
|
226
|
+
outline-offset: 2px;
|
|
227
|
+
}
|
|
228
|
+
.ck-input:focus-visible {
|
|
229
|
+
outline: none;
|
|
230
|
+
}
|
|
231
|
+
.ck-modes {
|
|
232
|
+
display: flex;
|
|
233
|
+
flex-wrap: wrap;
|
|
234
|
+
gap: 0.25rem;
|
|
235
|
+
}
|
|
236
|
+
.ck-mode {
|
|
237
|
+
min-height: 2rem;
|
|
238
|
+
padding: 0 0.75rem;
|
|
239
|
+
border: 1px solid var(--ck-line);
|
|
240
|
+
border-radius: 999px;
|
|
241
|
+
background: transparent;
|
|
242
|
+
color: var(--ck-fg-2);
|
|
243
|
+
font: inherit;
|
|
244
|
+
font-size: 0.875rem;
|
|
245
|
+
cursor: pointer;
|
|
246
|
+
}
|
|
247
|
+
.ck-mode[aria-pressed="true"] {
|
|
248
|
+
border-color: var(--ck-accent);
|
|
249
|
+
background: var(--ck-accent-soft);
|
|
250
|
+
color: var(--ck-fg);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* voice: the bar covers the box while a take is live, so what is happening —
|
|
254
|
+
and how to keep or throw it away — is unmissable */
|
|
255
|
+
.ck-voice-bar {
|
|
256
|
+
position: absolute;
|
|
257
|
+
inset: 0;
|
|
258
|
+
z-index: 2;
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
gap: 0.75rem;
|
|
262
|
+
padding: 0 0.75rem;
|
|
263
|
+
border: 1px solid var(--ck-line-2);
|
|
264
|
+
border-radius: var(--ck-radius);
|
|
265
|
+
background: var(--ck-bg);
|
|
266
|
+
color: var(--ck-fg-2);
|
|
267
|
+
}
|
|
268
|
+
.ck-voice-dot {
|
|
269
|
+
width: 0.625rem;
|
|
270
|
+
height: 0.625rem;
|
|
271
|
+
flex-shrink: 0;
|
|
272
|
+
border-radius: 999px;
|
|
273
|
+
background: var(--ck-danger);
|
|
274
|
+
animation: ck-pulse 1.2s ease-in-out infinite;
|
|
275
|
+
}
|
|
276
|
+
.ck-voice-wave {
|
|
277
|
+
display: flex;
|
|
278
|
+
flex: 1;
|
|
279
|
+
align-items: center;
|
|
280
|
+
justify-content: center;
|
|
281
|
+
gap: 0.25rem;
|
|
282
|
+
height: 1.75rem;
|
|
283
|
+
min-width: 0;
|
|
284
|
+
overflow: hidden;
|
|
285
|
+
}
|
|
286
|
+
.ck-voice-wave > span {
|
|
287
|
+
width: 0.25rem;
|
|
288
|
+
height: 100%;
|
|
289
|
+
border-radius: 999px;
|
|
290
|
+
background: var(--ck-accent);
|
|
291
|
+
transform: scaleY(0.3);
|
|
292
|
+
animation: ck-wave 1s ease-in-out infinite;
|
|
293
|
+
}
|
|
294
|
+
.ck-voice-wave > span:nth-child(2n) {
|
|
295
|
+
animation-delay: -0.3s;
|
|
296
|
+
}
|
|
297
|
+
.ck-voice-wave > span:nth-child(3n) {
|
|
298
|
+
animation-delay: -0.6s;
|
|
299
|
+
}
|
|
300
|
+
.ck-voice-wave > span:nth-child(5n) {
|
|
301
|
+
animation-delay: -0.8s;
|
|
302
|
+
}
|
|
303
|
+
/* the words as they are heard: one line, its end always in view, the start
|
|
304
|
+
fading out — the person reads the newest words, not the oldest */
|
|
305
|
+
.ck-voice-live {
|
|
306
|
+
flex: 1;
|
|
307
|
+
min-width: 0;
|
|
308
|
+
overflow: hidden;
|
|
309
|
+
white-space: nowrap;
|
|
310
|
+
font-size: 0.9375rem;
|
|
311
|
+
line-height: 1.4;
|
|
312
|
+
color: var(--ck-fg);
|
|
313
|
+
-webkit-mask-image: linear-gradient(to right, transparent, #000 1.75rem);
|
|
314
|
+
mask-image: linear-gradient(to right, transparent, #000 1.75rem);
|
|
315
|
+
}
|
|
316
|
+
.ck-voice-live-dim {
|
|
317
|
+
color: var(--ck-fg-3);
|
|
318
|
+
}
|
|
319
|
+
.ck-voice-timer {
|
|
320
|
+
flex-shrink: 0;
|
|
321
|
+
font-size: 0.9375rem;
|
|
322
|
+
font-variant-numeric: tabular-nums;
|
|
323
|
+
}
|
|
324
|
+
.ck-voice-confirm {
|
|
325
|
+
display: inline-flex;
|
|
326
|
+
align-items: center;
|
|
327
|
+
justify-content: center;
|
|
328
|
+
min-width: var(--ck-target);
|
|
329
|
+
min-height: var(--ck-target);
|
|
330
|
+
border: 0;
|
|
331
|
+
border-radius: 999px;
|
|
332
|
+
background: var(--ck-danger);
|
|
333
|
+
color: var(--ck-on-danger);
|
|
334
|
+
font-size: 1.125rem;
|
|
335
|
+
cursor: pointer;
|
|
336
|
+
}
|
|
337
|
+
.ck-problem {
|
|
338
|
+
display: flex;
|
|
339
|
+
align-items: flex-start;
|
|
340
|
+
gap: 0.5rem;
|
|
341
|
+
margin: 0;
|
|
342
|
+
padding: 0.5rem 0.625rem;
|
|
343
|
+
border: 1px solid color-mix(in srgb, var(--ck-warning) 40%, transparent);
|
|
344
|
+
border-radius: var(--ck-radius-sm);
|
|
345
|
+
color: var(--ck-fg-2);
|
|
346
|
+
font-size: 0.9375rem;
|
|
347
|
+
line-height: 1.45;
|
|
348
|
+
}
|
|
349
|
+
.ck-problem > span {
|
|
350
|
+
flex: 1;
|
|
351
|
+
min-width: 0;
|
|
352
|
+
}
|
|
353
|
+
.ck-problem-detail {
|
|
354
|
+
color: var(--ck-muted);
|
|
355
|
+
}
|
|
356
|
+
.ck-problem-retry {
|
|
357
|
+
flex-shrink: 0;
|
|
358
|
+
min-height: 2rem;
|
|
359
|
+
padding: 0 0.75rem;
|
|
360
|
+
border: 1px solid var(--ck-line-2);
|
|
361
|
+
border-radius: 999px;
|
|
362
|
+
background: transparent;
|
|
363
|
+
color: var(--ck-fg);
|
|
364
|
+
font: inherit;
|
|
365
|
+
font-size: 0.875rem;
|
|
366
|
+
cursor: pointer;
|
|
367
|
+
}
|
|
368
|
+
.ck-problem-retry:disabled {
|
|
369
|
+
opacity: 0.5;
|
|
370
|
+
cursor: default;
|
|
371
|
+
}
|
|
372
|
+
.ck-problem-x {
|
|
373
|
+
display: inline-flex;
|
|
374
|
+
flex-shrink: 0;
|
|
375
|
+
padding: 0.125rem;
|
|
376
|
+
border: 0;
|
|
377
|
+
background: transparent;
|
|
378
|
+
color: var(--ck-muted);
|
|
379
|
+
cursor: pointer;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* attachments */
|
|
383
|
+
.ck-attach-strip {
|
|
384
|
+
display: flex;
|
|
385
|
+
flex-wrap: wrap;
|
|
386
|
+
align-items: center;
|
|
387
|
+
gap: 0.5rem;
|
|
388
|
+
}
|
|
389
|
+
.ck-attach-item {
|
|
390
|
+
position: relative;
|
|
391
|
+
}
|
|
392
|
+
.ck-attach-thumb {
|
|
393
|
+
display: block;
|
|
394
|
+
width: 3.5rem;
|
|
395
|
+
height: 3.5rem;
|
|
396
|
+
object-fit: cover;
|
|
397
|
+
border: 1px solid var(--ck-line);
|
|
398
|
+
border-radius: var(--ck-radius-sm);
|
|
399
|
+
}
|
|
400
|
+
.ck-attach-file {
|
|
401
|
+
display: flex;
|
|
402
|
+
align-items: center;
|
|
403
|
+
gap: 0.375rem;
|
|
404
|
+
max-width: 11rem;
|
|
405
|
+
height: 3.5rem;
|
|
406
|
+
padding: 0 0.5rem;
|
|
407
|
+
border: 1px solid var(--ck-line);
|
|
408
|
+
border-radius: var(--ck-radius-sm);
|
|
409
|
+
background: var(--ck-raised);
|
|
410
|
+
color: var(--ck-fg-2);
|
|
411
|
+
font-size: 0.8125rem;
|
|
412
|
+
}
|
|
413
|
+
.ck-attach-remove {
|
|
414
|
+
position: absolute;
|
|
415
|
+
top: -0.5rem;
|
|
416
|
+
right: -0.5rem;
|
|
417
|
+
display: inline-flex;
|
|
418
|
+
align-items: center;
|
|
419
|
+
justify-content: center;
|
|
420
|
+
width: 1.5rem;
|
|
421
|
+
height: 1.5rem;
|
|
422
|
+
border: 1px solid var(--ck-line-2);
|
|
423
|
+
border-radius: 999px;
|
|
424
|
+
background: var(--ck-overlay);
|
|
425
|
+
color: var(--ck-fg-2);
|
|
426
|
+
font-size: 0.75rem;
|
|
427
|
+
cursor: pointer;
|
|
428
|
+
}
|
|
429
|
+
.ck-attach-remove::after {
|
|
430
|
+
content: "";
|
|
431
|
+
position: absolute;
|
|
432
|
+
inset: -0.625rem;
|
|
433
|
+
}
|
|
434
|
+
.ck-note {
|
|
435
|
+
border: 0;
|
|
436
|
+
background: transparent;
|
|
437
|
+
color: var(--ck-warning);
|
|
438
|
+
font: inherit;
|
|
439
|
+
font-size: 0.8125rem;
|
|
440
|
+
text-align: left;
|
|
441
|
+
cursor: pointer;
|
|
442
|
+
}
|
|
443
|
+
.ck-truncate {
|
|
444
|
+
min-width: 0;
|
|
445
|
+
overflow: hidden;
|
|
446
|
+
text-overflow: ellipsis;
|
|
447
|
+
white-space: nowrap;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
/* ── thread ─────────────────────────────────────────────────────────────── */
|
|
451
|
+
.ck-thread-wrap {
|
|
452
|
+
position: relative;
|
|
453
|
+
display: flex;
|
|
454
|
+
flex: 1;
|
|
455
|
+
flex-direction: column;
|
|
456
|
+
min-height: 0;
|
|
457
|
+
min-width: 0;
|
|
458
|
+
}
|
|
459
|
+
.ck-thread {
|
|
460
|
+
display: flex;
|
|
461
|
+
flex: 1;
|
|
462
|
+
flex-direction: column;
|
|
463
|
+
min-height: 0;
|
|
464
|
+
overflow-y: auto;
|
|
465
|
+
/* Embedded threads must allow gestures to reach the page scroll owner. */
|
|
466
|
+
overscroll-behavior: auto;
|
|
467
|
+
padding: 0.5rem 0;
|
|
468
|
+
}
|
|
469
|
+
.ck-thread-inner {
|
|
470
|
+
display: flex;
|
|
471
|
+
flex-direction: column;
|
|
472
|
+
gap: 1.25rem;
|
|
473
|
+
margin-top: auto;
|
|
474
|
+
min-width: 0;
|
|
475
|
+
}
|
|
476
|
+
.ck-thread-loading {
|
|
477
|
+
display: flex;
|
|
478
|
+
flex: 1;
|
|
479
|
+
align-items: center;
|
|
480
|
+
justify-content: center;
|
|
481
|
+
color: var(--ck-muted);
|
|
482
|
+
}
|
|
483
|
+
.ck-turn {
|
|
484
|
+
display: flex;
|
|
485
|
+
flex-direction: column;
|
|
486
|
+
min-width: 0;
|
|
487
|
+
}
|
|
488
|
+
.ck-turn-user {
|
|
489
|
+
align-items: flex-end;
|
|
490
|
+
}
|
|
491
|
+
.ck-bubble {
|
|
492
|
+
max-width: min(85%, 42rem);
|
|
493
|
+
padding: 0.625rem 1rem;
|
|
494
|
+
border-radius: calc(var(--ck-radius) * 1.25);
|
|
495
|
+
background: var(--ck-bubble);
|
|
496
|
+
color: var(--ck-fg);
|
|
497
|
+
font-size: var(--ck-text);
|
|
498
|
+
line-height: var(--ck-leading);
|
|
499
|
+
white-space: pre-wrap;
|
|
500
|
+
overflow-wrap: anywhere;
|
|
501
|
+
}
|
|
502
|
+
.ck-speaker {
|
|
503
|
+
margin-bottom: 0.25rem;
|
|
504
|
+
color: var(--ck-fg-3);
|
|
505
|
+
font-family: var(--ck-mono);
|
|
506
|
+
font-size: 0.75rem;
|
|
507
|
+
letter-spacing: 0.08em;
|
|
508
|
+
text-transform: uppercase;
|
|
509
|
+
}
|
|
510
|
+
.ck-turn-actions {
|
|
511
|
+
display: flex;
|
|
512
|
+
flex-wrap: wrap;
|
|
513
|
+
gap: 0.25rem;
|
|
514
|
+
margin-top: 0.25rem;
|
|
515
|
+
}
|
|
516
|
+
/* Each action is one word on one line and a full-size target: "Nochmals
|
|
517
|
+
versuchen" broke across two lines at 390px, and the row sat at 36px while
|
|
518
|
+
every other control in the chat is 44. */
|
|
519
|
+
.ck-action {
|
|
520
|
+
display: inline-flex;
|
|
521
|
+
align-items: center;
|
|
522
|
+
gap: 0.375rem;
|
|
523
|
+
min-width: var(--ck-target);
|
|
524
|
+
min-height: var(--ck-target);
|
|
525
|
+
justify-content: center;
|
|
526
|
+
padding: 0 0.5rem;
|
|
527
|
+
white-space: nowrap;
|
|
528
|
+
border: 0;
|
|
529
|
+
border-radius: var(--ck-radius-sm);
|
|
530
|
+
background: transparent;
|
|
531
|
+
color: var(--ck-muted);
|
|
532
|
+
font: inherit;
|
|
533
|
+
font-size: 0.875rem;
|
|
534
|
+
cursor: pointer;
|
|
535
|
+
}
|
|
536
|
+
.ck-action:hover {
|
|
537
|
+
background: var(--ck-raised);
|
|
538
|
+
color: var(--ck-fg-2);
|
|
539
|
+
}
|
|
540
|
+
@media (hover: hover) {
|
|
541
|
+
.ck-turn-answer .ck-turn-actions {
|
|
542
|
+
opacity: 0;
|
|
543
|
+
transition: opacity 0.15s ease;
|
|
544
|
+
}
|
|
545
|
+
.ck-turn-answer:hover .ck-turn-actions,
|
|
546
|
+
.ck-turn-answer:focus-within .ck-turn-actions,
|
|
547
|
+
.ck-turn-pinned .ck-turn-actions {
|
|
548
|
+
opacity: 1;
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
.ck-failed {
|
|
552
|
+
margin: 0;
|
|
553
|
+
padding: 0.625rem 0.875rem;
|
|
554
|
+
border: 1px solid color-mix(in srgb, var(--ck-danger) 35%, transparent);
|
|
555
|
+
border-radius: var(--ck-radius-sm);
|
|
556
|
+
background: var(--ck-danger-soft);
|
|
557
|
+
color: var(--ck-fg);
|
|
558
|
+
font-size: var(--ck-text);
|
|
559
|
+
}
|
|
560
|
+
.ck-live {
|
|
561
|
+
display: flex;
|
|
562
|
+
align-items: center;
|
|
563
|
+
gap: 0.5rem;
|
|
564
|
+
margin: 0;
|
|
565
|
+
color: var(--ck-fg-3);
|
|
566
|
+
font-size: var(--ck-text);
|
|
567
|
+
}
|
|
568
|
+
.ck-dots {
|
|
569
|
+
display: inline-flex;
|
|
570
|
+
gap: 0.25rem;
|
|
571
|
+
}
|
|
572
|
+
.ck-dots > span {
|
|
573
|
+
width: 0.375rem;
|
|
574
|
+
height: 0.375rem;
|
|
575
|
+
border-radius: 999px;
|
|
576
|
+
background: var(--ck-muted);
|
|
577
|
+
animation: ck-dot 1.2s ease-in-out infinite;
|
|
578
|
+
}
|
|
579
|
+
.ck-dots > span:nth-child(2) {
|
|
580
|
+
animation-delay: 0.15s;
|
|
581
|
+
}
|
|
582
|
+
.ck-dots > span:nth-child(3) {
|
|
583
|
+
animation-delay: 0.3s;
|
|
584
|
+
}
|
|
585
|
+
.ck-stop {
|
|
586
|
+
display: inline-flex;
|
|
587
|
+
align-items: center;
|
|
588
|
+
gap: 0.375rem;
|
|
589
|
+
align-self: flex-start;
|
|
590
|
+
min-height: var(--ck-target);
|
|
591
|
+
margin-top: 0.5rem;
|
|
592
|
+
padding: 0 0.875rem;
|
|
593
|
+
border: 1px solid var(--ck-line);
|
|
594
|
+
border-radius: 999px;
|
|
595
|
+
background: transparent;
|
|
596
|
+
color: var(--ck-fg-3);
|
|
597
|
+
font: inherit;
|
|
598
|
+
font-size: 0.875rem;
|
|
599
|
+
cursor: pointer;
|
|
600
|
+
}
|
|
601
|
+
.ck-stopped {
|
|
602
|
+
margin: 0;
|
|
603
|
+
color: var(--ck-muted);
|
|
604
|
+
}
|
|
605
|
+
.ck-jump {
|
|
606
|
+
position: absolute;
|
|
607
|
+
bottom: 0.75rem;
|
|
608
|
+
left: 50%;
|
|
609
|
+
transform: translateX(-50%);
|
|
610
|
+
display: inline-flex;
|
|
611
|
+
align-items: center;
|
|
612
|
+
justify-content: center;
|
|
613
|
+
width: var(--ck-target);
|
|
614
|
+
height: var(--ck-target);
|
|
615
|
+
border: 1px solid var(--ck-line-2);
|
|
616
|
+
border-radius: 999px;
|
|
617
|
+
background: var(--ck-overlay);
|
|
618
|
+
color: var(--ck-fg-2);
|
|
619
|
+
font-size: 1.125rem;
|
|
620
|
+
cursor: pointer;
|
|
621
|
+
box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.35);
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
/* ── screen ─────────────────────────────────────────────────────────────
|
|
625
|
+
The whole display is the conversation; header and composer float over it.
|
|
626
|
+
--ck-top-inset / --ck-bottom-inset are measured by ChatScreen. */
|
|
627
|
+
.ck-screen {
|
|
628
|
+
position: relative;
|
|
629
|
+
display: flex;
|
|
630
|
+
flex-direction: column;
|
|
631
|
+
height: 100%;
|
|
632
|
+
min-height: 0;
|
|
633
|
+
min-width: 0;
|
|
634
|
+
overflow: hidden;
|
|
635
|
+
background: var(--ck-page);
|
|
636
|
+
}
|
|
637
|
+
.ck-screen-viewport {
|
|
638
|
+
height: var(--ck-viewport-height, 100dvh);
|
|
639
|
+
}
|
|
640
|
+
.ck-screen-body {
|
|
641
|
+
position: relative;
|
|
642
|
+
display: flex;
|
|
643
|
+
flex: 1;
|
|
644
|
+
flex-direction: column;
|
|
645
|
+
min-height: 0;
|
|
646
|
+
min-width: 0;
|
|
647
|
+
}
|
|
648
|
+
/* Words pass under the header and fade as they do: the page colour at the
|
|
649
|
+
very top, nothing by the bottom of the row. No bar, no border. */
|
|
650
|
+
.ck-screen-header {
|
|
651
|
+
position: absolute;
|
|
652
|
+
inset: 0 0 auto;
|
|
653
|
+
z-index: 3;
|
|
654
|
+
/* Mostly page behind the row itself, so a title in it stays one line of
|
|
655
|
+
text and not two on top of each other; the words only show through
|
|
656
|
+
dimly, and the fade runs out in the strip below the row. */
|
|
657
|
+
padding: env(safe-area-inset-top, 0px) var(--ck-gutter) 0.75rem;
|
|
658
|
+
background: linear-gradient(
|
|
659
|
+
to bottom,
|
|
660
|
+
var(--ck-page) 0%,
|
|
661
|
+
color-mix(in srgb, var(--ck-page) 88%, transparent) 55%,
|
|
662
|
+
color-mix(in srgb, var(--ck-page) 55%, transparent) 80%,
|
|
663
|
+
transparent 100%
|
|
664
|
+
);
|
|
665
|
+
pointer-events: none;
|
|
666
|
+
}
|
|
667
|
+
.ck-screen-header-row {
|
|
668
|
+
display: flex;
|
|
669
|
+
align-items: center;
|
|
670
|
+
gap: 0.5rem;
|
|
671
|
+
min-width: 0;
|
|
672
|
+
min-height: 3.5rem;
|
|
673
|
+
padding-block: 0.375rem;
|
|
674
|
+
}
|
|
675
|
+
.ck-screen-header-row > * {
|
|
676
|
+
pointer-events: auto;
|
|
677
|
+
}
|
|
678
|
+
.ck-screen-dock {
|
|
679
|
+
position: absolute;
|
|
680
|
+
inset: auto 0 0;
|
|
681
|
+
z-index: 3;
|
|
682
|
+
padding: 1.5rem var(--ck-gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px));
|
|
683
|
+
background: linear-gradient(to top, var(--ck-page) 0%, var(--ck-page) 40%, transparent 100%);
|
|
684
|
+
pointer-events: none;
|
|
685
|
+
}
|
|
686
|
+
.ck-screen-column {
|
|
687
|
+
display: flex;
|
|
688
|
+
flex-direction: column;
|
|
689
|
+
gap: 0.5rem;
|
|
690
|
+
width: 100%;
|
|
691
|
+
max-width: var(--ck-measure);
|
|
692
|
+
margin-inline: auto;
|
|
693
|
+
pointer-events: auto;
|
|
694
|
+
}
|
|
695
|
+
.ck-screen-footnote {
|
|
696
|
+
margin: 0;
|
|
697
|
+
color: var(--ck-muted);
|
|
698
|
+
font-size: 0.75rem;
|
|
699
|
+
line-height: 1.4;
|
|
700
|
+
text-align: center;
|
|
701
|
+
}
|
|
702
|
+
/* The composer as a floating pill: see-through enough to show the words
|
|
703
|
+
passing under it, solid enough to type on. */
|
|
704
|
+
.ck-screen-dock .ck-composer {
|
|
705
|
+
border-color: color-mix(in srgb, var(--ck-line-2) 70%, transparent);
|
|
706
|
+
border-radius: 1.75rem;
|
|
707
|
+
background: color-mix(in srgb, var(--ck-bg) 86%, transparent);
|
|
708
|
+
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
|
709
|
+
backdrop-filter: blur(20px) saturate(1.4);
|
|
710
|
+
box-shadow: 0 6px 28px -12px rgb(0 0 0 / 0.28);
|
|
711
|
+
}
|
|
712
|
+
.ck-screen-dock .ck-voice-bar {
|
|
713
|
+
border-radius: 1.75rem;
|
|
714
|
+
}
|
|
715
|
+
/* With no header, the words still fade at the top edge instead of being cut
|
|
716
|
+
off mid-line. */
|
|
717
|
+
.ck-screen:not(:has(> .ck-screen-header)) .ck-thread {
|
|
718
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
|
|
719
|
+
mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
|
|
720
|
+
}
|
|
721
|
+
/* The thread scrolls the full width (the scrollbar sits at the screen's
|
|
722
|
+
edge, and a swipe anywhere moves it); its column keeps a reading measure. */
|
|
723
|
+
.ck-screen .ck-thread {
|
|
724
|
+
overscroll-behavior: contain;
|
|
725
|
+
padding: var(--ck-top-inset, 0px) var(--ck-gutter) calc(var(--ck-bottom-inset, 0px) + 0.75rem);
|
|
726
|
+
scroll-padding-top: var(--ck-top-inset, 0px);
|
|
727
|
+
scroll-padding-bottom: var(--ck-bottom-inset, 0px);
|
|
728
|
+
}
|
|
729
|
+
.ck-screen .ck-thread-inner {
|
|
730
|
+
width: 100%;
|
|
731
|
+
max-width: var(--ck-measure);
|
|
732
|
+
margin-inline: auto;
|
|
733
|
+
}
|
|
734
|
+
.ck-screen .ck-jump {
|
|
735
|
+
bottom: calc(var(--ck-bottom-inset, 0px) + 0.5rem);
|
|
736
|
+
z-index: 4;
|
|
737
|
+
}
|
|
738
|
+
.ck-screen-body > .ck-starters,
|
|
739
|
+
.ck-screen-body > .ck-thread-loading {
|
|
740
|
+
flex: 1;
|
|
741
|
+
justify-content: center;
|
|
742
|
+
width: 100%;
|
|
743
|
+
max-width: calc(var(--ck-measure) + 2 * var(--ck-gutter));
|
|
744
|
+
margin-inline: auto;
|
|
745
|
+
padding: var(--ck-top-inset, 0px) var(--ck-gutter) var(--ck-bottom-inset, 0px);
|
|
746
|
+
overflow-y: auto;
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
/* A control floating over the conversation: a frosted pill, the way the
|
|
750
|
+
header buttons sit over the words in the ChatGPT app. For an app's own
|
|
751
|
+
header buttons inside ChatScreen. */
|
|
752
|
+
.ck-glass {
|
|
753
|
+
display: inline-flex;
|
|
754
|
+
align-items: center;
|
|
755
|
+
justify-content: center;
|
|
756
|
+
gap: 0.375rem;
|
|
757
|
+
min-width: var(--ck-target);
|
|
758
|
+
min-height: var(--ck-target);
|
|
759
|
+
padding: 0 0.75rem;
|
|
760
|
+
border: 1px solid color-mix(in srgb, var(--ck-line-2) 60%, transparent);
|
|
761
|
+
border-radius: 999px;
|
|
762
|
+
background: color-mix(in srgb, var(--ck-bg) 70%, transparent);
|
|
763
|
+
-webkit-backdrop-filter: blur(16px) saturate(1.4);
|
|
764
|
+
backdrop-filter: blur(16px) saturate(1.4);
|
|
765
|
+
box-shadow: 0 2px 10px -4px rgb(0 0 0 / 0.18);
|
|
766
|
+
color: var(--ck-fg);
|
|
767
|
+
font: inherit;
|
|
768
|
+
font-size: 0.9375rem;
|
|
769
|
+
cursor: pointer;
|
|
770
|
+
}
|
|
771
|
+
.ck-glass:hover {
|
|
772
|
+
background: color-mix(in srgb, var(--ck-bg) 88%, transparent);
|
|
773
|
+
}
|
|
774
|
+
.ck-glass:focus-visible {
|
|
775
|
+
outline: 2px solid var(--ck-accent);
|
|
776
|
+
outline-offset: 2px;
|
|
777
|
+
}
|
|
778
|
+
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
|
779
|
+
.ck-glass,
|
|
780
|
+
.ck-screen-dock .ck-composer {
|
|
781
|
+
background: var(--ck-bg);
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
/* markdown: 16px, readable measure, no leaked ** or > */
|
|
786
|
+
.ck-md {
|
|
787
|
+
min-width: 0;
|
|
788
|
+
color: var(--ck-fg);
|
|
789
|
+
font-size: var(--ck-text);
|
|
790
|
+
line-height: var(--ck-leading);
|
|
791
|
+
overflow-wrap: anywhere;
|
|
792
|
+
}
|
|
793
|
+
.ck-md > * {
|
|
794
|
+
margin: 0;
|
|
795
|
+
}
|
|
796
|
+
.ck-md > * + * {
|
|
797
|
+
margin-top: 0.75em;
|
|
798
|
+
}
|
|
799
|
+
.ck-md ul,
|
|
800
|
+
.ck-md ol {
|
|
801
|
+
padding-left: 1.25em;
|
|
802
|
+
}
|
|
803
|
+
.ck-md li + li {
|
|
804
|
+
margin-top: 0.25em;
|
|
805
|
+
}
|
|
806
|
+
.ck-md-h {
|
|
807
|
+
margin: 0;
|
|
808
|
+
font-weight: 650;
|
|
809
|
+
line-height: 1.3;
|
|
810
|
+
}
|
|
811
|
+
.ck-md > .ck-md-h + * {
|
|
812
|
+
margin-top: 0.5em;
|
|
813
|
+
}
|
|
814
|
+
/* Headings with air above them, large enough to be the signposts of a long
|
|
815
|
+
answer — the ChatGPT app's "4. The complete architecture" is a heading you
|
|
816
|
+
can find again while scrolling, not a bold line. */
|
|
817
|
+
.ck-md > * + .ck-md-h {
|
|
818
|
+
margin-top: 1.75em;
|
|
819
|
+
}
|
|
820
|
+
.ck-md-h1 {
|
|
821
|
+
font-size: 1.5em;
|
|
822
|
+
letter-spacing: -0.01em;
|
|
823
|
+
}
|
|
824
|
+
.ck-md-h2 {
|
|
825
|
+
font-size: 1.375em;
|
|
826
|
+
letter-spacing: -0.01em;
|
|
827
|
+
}
|
|
828
|
+
.ck-md-h3 {
|
|
829
|
+
font-size: 1.125em;
|
|
830
|
+
}
|
|
831
|
+
.ck-md > p + p {
|
|
832
|
+
margin-top: 0.9em;
|
|
833
|
+
}
|
|
834
|
+
.ck-md ul ul,
|
|
835
|
+
.ck-md ol ul {
|
|
836
|
+
margin-top: 0.25em;
|
|
837
|
+
}
|
|
838
|
+
.ck-task {
|
|
839
|
+
list-style: none;
|
|
840
|
+
margin-left: -1.25em;
|
|
841
|
+
}
|
|
842
|
+
.ck-task > input {
|
|
843
|
+
margin: 0 0.5em 0 0;
|
|
844
|
+
vertical-align: -0.1em;
|
|
845
|
+
accent-color: var(--ck-accent);
|
|
846
|
+
pointer-events: none;
|
|
847
|
+
}
|
|
848
|
+
.ck-hr {
|
|
849
|
+
height: 1px;
|
|
850
|
+
margin: 1.25em 0;
|
|
851
|
+
border: 0;
|
|
852
|
+
background: var(--ck-line);
|
|
853
|
+
}
|
|
854
|
+
.ck-img {
|
|
855
|
+
display: block;
|
|
856
|
+
max-width: 100%;
|
|
857
|
+
height: auto;
|
|
858
|
+
margin: 0.25em 0;
|
|
859
|
+
border: 1px solid var(--ck-line);
|
|
860
|
+
border-radius: var(--ck-radius-sm);
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
/* A list of named things, as cards: a badge, the name, the body. The row is
|
|
864
|
+
a grid so a long name wraps under itself, never under the badge. */
|
|
865
|
+
.ck-cards {
|
|
866
|
+
display: flex;
|
|
867
|
+
flex-direction: column;
|
|
868
|
+
margin: 0;
|
|
869
|
+
padding: 0;
|
|
870
|
+
list-style: none;
|
|
871
|
+
}
|
|
872
|
+
/* Each option is its own card: a hairline between them, room around each,
|
|
873
|
+
the badge the size of a tile and the name a size up — the ChatGPT app's
|
|
874
|
+
option list, which reads as three things to choose from, not a list. */
|
|
875
|
+
.ck-card {
|
|
876
|
+
display: grid;
|
|
877
|
+
grid-template-columns: 2.75em minmax(0, 1fr);
|
|
878
|
+
gap: 0.875em;
|
|
879
|
+
align-items: start;
|
|
880
|
+
padding: 1em 0;
|
|
881
|
+
}
|
|
882
|
+
.ck-card + .ck-card {
|
|
883
|
+
border-top: 1px solid var(--ck-line);
|
|
884
|
+
}
|
|
885
|
+
.ck-cards > .ck-card:first-child {
|
|
886
|
+
padding-top: 0.25em;
|
|
887
|
+
}
|
|
888
|
+
.ck-card-badge {
|
|
889
|
+
display: flex;
|
|
890
|
+
align-items: center;
|
|
891
|
+
justify-content: center;
|
|
892
|
+
width: 2.75em;
|
|
893
|
+
height: 2.75em;
|
|
894
|
+
border-radius: 0.75em;
|
|
895
|
+
background: var(--ck-raised);
|
|
896
|
+
color: var(--ck-fg);
|
|
897
|
+
font-size: 1em;
|
|
898
|
+
font-weight: 600;
|
|
899
|
+
font-variant-numeric: tabular-nums;
|
|
900
|
+
}
|
|
901
|
+
.ck-card-tag {
|
|
902
|
+
display: inline-block;
|
|
903
|
+
margin-top: 0.4em;
|
|
904
|
+
padding: 0.15em 0.6em;
|
|
905
|
+
border-radius: 999px;
|
|
906
|
+
background: color-mix(in srgb, var(--ck-accent) 14%, transparent);
|
|
907
|
+
color: var(--ck-fg);
|
|
908
|
+
font-size: 0.8125em;
|
|
909
|
+
font-weight: 550;
|
|
910
|
+
line-height: 1.5;
|
|
911
|
+
}
|
|
912
|
+
.ck-cards:not(.ck-cards-numbered) .ck-card-badge:not(.ck-card-icon) {
|
|
913
|
+
font-size: 1.5em;
|
|
914
|
+
line-height: 1;
|
|
915
|
+
}
|
|
916
|
+
.ck-card-icon {
|
|
917
|
+
font-size: 1.25em;
|
|
918
|
+
}
|
|
919
|
+
.ck-card-body {
|
|
920
|
+
min-width: 0;
|
|
921
|
+
padding-top: 0.2em;
|
|
922
|
+
}
|
|
923
|
+
.ck-card-title {
|
|
924
|
+
font-size: 1.125em;
|
|
925
|
+
font-weight: 650;
|
|
926
|
+
line-height: 1.3;
|
|
927
|
+
}
|
|
928
|
+
.ck-card-text {
|
|
929
|
+
margin-top: 0.4em;
|
|
930
|
+
color: var(--ck-fg);
|
|
931
|
+
}
|
|
932
|
+
.ck-card-body > ul {
|
|
933
|
+
margin-top: 0.375em;
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
/* A table that scrolls sideways on a phone instead of breaking the page, and
|
|
937
|
+
never breaks a word to fit. `.ck-md` sets overflow-wrap: anywhere so a long
|
|
938
|
+
URL cannot push the thread wider, but `anywhere` also lowers a cell's
|
|
939
|
+
minimum width to ONE LETTER, so a three-column answer squeezed its first
|
|
940
|
+
column into "Di / re / ct / or / y" (Substrata at 390px, 2026-10-22).
|
|
941
|
+
Inside a table a word is the smallest thing a column can be: columns share
|
|
942
|
+
the width by wrapping at spaces, and when even the words do not fit the
|
|
943
|
+
wrapper scrolls, with a shadow on the edge that has more. */
|
|
944
|
+
.ck-table-wrap {
|
|
945
|
+
max-width: 100%;
|
|
946
|
+
overflow-x: auto;
|
|
947
|
+
-webkit-overflow-scrolling: touch;
|
|
948
|
+
background:
|
|
949
|
+
linear-gradient(to right, var(--ck-bg) 30%, transparent) left center / 1.5rem 100% no-repeat
|
|
950
|
+
local,
|
|
951
|
+
linear-gradient(to left, var(--ck-bg) 30%, transparent) right center / 1.5rem 100% no-repeat
|
|
952
|
+
local,
|
|
953
|
+
radial-gradient(
|
|
954
|
+
farthest-side at 0 50%,
|
|
955
|
+
color-mix(in srgb, var(--ck-fg) 14%, transparent),
|
|
956
|
+
transparent
|
|
957
|
+
)
|
|
958
|
+
left center / 0.625rem 100% no-repeat scroll,
|
|
959
|
+
radial-gradient(
|
|
960
|
+
farthest-side at 100% 50%,
|
|
961
|
+
color-mix(in srgb, var(--ck-fg) 14%, transparent),
|
|
962
|
+
transparent
|
|
963
|
+
)
|
|
964
|
+
right center / 0.625rem 100% no-repeat scroll;
|
|
965
|
+
}
|
|
966
|
+
.ck-table {
|
|
967
|
+
width: 100%;
|
|
968
|
+
border-collapse: collapse;
|
|
969
|
+
font-size: 0.9375em;
|
|
970
|
+
line-height: 1.45;
|
|
971
|
+
overflow-wrap: normal;
|
|
972
|
+
word-break: normal;
|
|
973
|
+
hyphens: manual;
|
|
974
|
+
}
|
|
975
|
+
.ck-table th,
|
|
976
|
+
.ck-table td {
|
|
977
|
+
min-width: 4.5rem;
|
|
978
|
+
padding: 0.5em 0.75em 0.5em 0;
|
|
979
|
+
border-bottom: 1px solid var(--ck-line);
|
|
980
|
+
text-align: left;
|
|
981
|
+
vertical-align: top;
|
|
982
|
+
}
|
|
983
|
+
.ck-table th {
|
|
984
|
+
color: var(--ck-fg);
|
|
985
|
+
font-weight: 650;
|
|
986
|
+
}
|
|
987
|
+
.ck-table td {
|
|
988
|
+
color: var(--ck-fg);
|
|
989
|
+
}
|
|
990
|
+
.ck-table tr:last-child td {
|
|
991
|
+
border-bottom: 0;
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
/* The sources an answer cites, once, under it: a label and a chip each. */
|
|
995
|
+
.ck-sources {
|
|
996
|
+
display: flex;
|
|
997
|
+
flex-wrap: wrap;
|
|
998
|
+
align-items: center;
|
|
999
|
+
gap: 0.375rem;
|
|
1000
|
+
margin-top: 1em;
|
|
1001
|
+
}
|
|
1002
|
+
.ck-sources-label {
|
|
1003
|
+
margin-right: 0.25rem;
|
|
1004
|
+
color: var(--ck-muted);
|
|
1005
|
+
font-size: 0.8125rem;
|
|
1006
|
+
}
|
|
1007
|
+
.ck-source {
|
|
1008
|
+
display: inline-flex;
|
|
1009
|
+
align-items: center;
|
|
1010
|
+
gap: 0.375em;
|
|
1011
|
+
max-width: 100%;
|
|
1012
|
+
min-height: 2rem;
|
|
1013
|
+
padding: 0 0.625rem;
|
|
1014
|
+
border: 1px solid var(--ck-line);
|
|
1015
|
+
border-radius: 999px;
|
|
1016
|
+
background: var(--ck-raised);
|
|
1017
|
+
color: var(--ck-fg-2);
|
|
1018
|
+
font-size: 0.8125rem;
|
|
1019
|
+
text-decoration: none;
|
|
1020
|
+
}
|
|
1021
|
+
a.ck-source:hover {
|
|
1022
|
+
border-color: var(--ck-line-2);
|
|
1023
|
+
color: var(--ck-fg);
|
|
1024
|
+
}
|
|
1025
|
+
.ck-source-id {
|
|
1026
|
+
font-family: var(--ck-mono);
|
|
1027
|
+
font-size: 0.75em;
|
|
1028
|
+
color: var(--ck-muted);
|
|
1029
|
+
}
|
|
1030
|
+
.ck-source-label {
|
|
1031
|
+
overflow: hidden;
|
|
1032
|
+
text-overflow: ellipsis;
|
|
1033
|
+
white-space: nowrap;
|
|
1034
|
+
}
|
|
1035
|
+
.ck-md blockquote {
|
|
1036
|
+
padding-left: 0.875em;
|
|
1037
|
+
border-left: 3px solid var(--ck-line-2);
|
|
1038
|
+
color: var(--ck-fg-2);
|
|
1039
|
+
}
|
|
1040
|
+
/* A callout (`> [!CAUTION]`): a quiet panel, the word above it. Only warning
|
|
1041
|
+
and caution take a status colour, and only on the rule and the word. */
|
|
1042
|
+
.ck-md .ck-alert {
|
|
1043
|
+
display: grid;
|
|
1044
|
+
gap: 0.25em;
|
|
1045
|
+
padding: 0.75em 0.875em;
|
|
1046
|
+
border-left: 3px solid var(--ck-line-2);
|
|
1047
|
+
border-radius: 0 var(--ck-radius-sm) var(--ck-radius-sm) 0;
|
|
1048
|
+
background: var(--ck-raised);
|
|
1049
|
+
}
|
|
1050
|
+
.ck-md .ck-alert p {
|
|
1051
|
+
margin: 0;
|
|
1052
|
+
}
|
|
1053
|
+
.ck-md .ck-alert-label {
|
|
1054
|
+
font-size: 0.8125em;
|
|
1055
|
+
font-weight: 650;
|
|
1056
|
+
color: var(--ck-fg-2);
|
|
1057
|
+
}
|
|
1058
|
+
.ck-md .ck-alert-warning {
|
|
1059
|
+
border-left-color: var(--ck-warning);
|
|
1060
|
+
}
|
|
1061
|
+
.ck-md .ck-alert-warning .ck-alert-label {
|
|
1062
|
+
color: var(--ck-warning);
|
|
1063
|
+
}
|
|
1064
|
+
.ck-md .ck-alert-caution {
|
|
1065
|
+
border-left-color: var(--ck-danger);
|
|
1066
|
+
}
|
|
1067
|
+
.ck-md .ck-alert-caution .ck-alert-label {
|
|
1068
|
+
color: var(--ck-danger);
|
|
1069
|
+
}
|
|
1070
|
+
.ck-md strong {
|
|
1071
|
+
font-weight: 650;
|
|
1072
|
+
}
|
|
1073
|
+
.ck-code {
|
|
1074
|
+
padding: 0.1em 0.35em;
|
|
1075
|
+
border-radius: 0.3em;
|
|
1076
|
+
background: var(--ck-raised);
|
|
1077
|
+
font-family: var(--ck-mono);
|
|
1078
|
+
font-size: 0.875em;
|
|
1079
|
+
}
|
|
1080
|
+
.ck-pre {
|
|
1081
|
+
overflow-x: auto;
|
|
1082
|
+
padding: 0.75rem 0.875rem;
|
|
1083
|
+
border: 1px solid var(--ck-line);
|
|
1084
|
+
border-radius: var(--ck-radius-sm);
|
|
1085
|
+
background: var(--ck-raised);
|
|
1086
|
+
font-family: var(--ck-mono);
|
|
1087
|
+
font-size: 0.875rem;
|
|
1088
|
+
line-height: 1.55;
|
|
1089
|
+
}
|
|
1090
|
+
.ck-pre code {
|
|
1091
|
+
white-space: pre;
|
|
1092
|
+
}
|
|
1093
|
+
.ck-link {
|
|
1094
|
+
color: inherit;
|
|
1095
|
+
text-decoration: underline;
|
|
1096
|
+
text-decoration-color: var(--ck-accent);
|
|
1097
|
+
text-underline-offset: 0.18em;
|
|
1098
|
+
}
|
|
1099
|
+
.ck-link-out {
|
|
1100
|
+
text-decoration-style: dotted;
|
|
1101
|
+
}
|
|
1102
|
+
.ck-link-arrow {
|
|
1103
|
+
margin-left: 0.15em;
|
|
1104
|
+
font-size: 0.8em;
|
|
1105
|
+
color: var(--ck-fg-3);
|
|
1106
|
+
}
|
|
1107
|
+
/* The citation as a chip after the sentence: the first source's name and how
|
|
1108
|
+
many more stand behind it ("NVIDIA De… +3"). */
|
|
1109
|
+
.ck-cite {
|
|
1110
|
+
display: inline-flex;
|
|
1111
|
+
align-items: center;
|
|
1112
|
+
gap: 0.3em;
|
|
1113
|
+
max-width: 11em;
|
|
1114
|
+
margin-left: 0.3em;
|
|
1115
|
+
padding: 0.1em 0.55em;
|
|
1116
|
+
border-radius: 999px;
|
|
1117
|
+
background: var(--ck-raised);
|
|
1118
|
+
color: var(--ck-fg-2);
|
|
1119
|
+
font-size: 0.8125em;
|
|
1120
|
+
line-height: 1.5;
|
|
1121
|
+
text-decoration: none;
|
|
1122
|
+
vertical-align: 0.1em;
|
|
1123
|
+
cursor: help;
|
|
1124
|
+
}
|
|
1125
|
+
a.ck-cite:hover {
|
|
1126
|
+
color: var(--ck-fg);
|
|
1127
|
+
}
|
|
1128
|
+
.ck-cite-label {
|
|
1129
|
+
overflow: hidden;
|
|
1130
|
+
text-overflow: ellipsis;
|
|
1131
|
+
white-space: nowrap;
|
|
1132
|
+
}
|
|
1133
|
+
.ck-cite-more {
|
|
1134
|
+
flex: none;
|
|
1135
|
+
color: var(--ck-fg-3);
|
|
1136
|
+
}
|
|
1137
|
+
|
|
1138
|
+
/* starters */
|
|
1139
|
+
.ck-starters {
|
|
1140
|
+
display: flex;
|
|
1141
|
+
flex-direction: column;
|
|
1142
|
+
gap: 0.75rem;
|
|
1143
|
+
min-width: 0;
|
|
1144
|
+
}
|
|
1145
|
+
.ck-starters-title {
|
|
1146
|
+
color: var(--ck-fg-2);
|
|
1147
|
+
font-size: var(--ck-text);
|
|
1148
|
+
}
|
|
1149
|
+
.ck-starters-list {
|
|
1150
|
+
display: flex;
|
|
1151
|
+
flex-wrap: wrap;
|
|
1152
|
+
gap: 0.5rem;
|
|
1153
|
+
}
|
|
1154
|
+
.ck-starter {
|
|
1155
|
+
min-height: var(--ck-target);
|
|
1156
|
+
padding: 0.5rem 0.875rem;
|
|
1157
|
+
border: 1px solid var(--ck-line);
|
|
1158
|
+
border-radius: calc(var(--ck-radius) * 0.75);
|
|
1159
|
+
background: var(--ck-bg);
|
|
1160
|
+
color: var(--ck-fg-2);
|
|
1161
|
+
font: inherit;
|
|
1162
|
+
font-size: 0.9375rem;
|
|
1163
|
+
text-align: left;
|
|
1164
|
+
cursor: pointer;
|
|
1165
|
+
}
|
|
1166
|
+
.ck-starter:hover {
|
|
1167
|
+
border-color: var(--ck-accent);
|
|
1168
|
+
color: var(--ck-fg);
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
/* suggested replies — under the latest answer, one tap sends */
|
|
1172
|
+
.ck-replies {
|
|
1173
|
+
display: flex;
|
|
1174
|
+
flex-wrap: wrap;
|
|
1175
|
+
gap: 0.5rem;
|
|
1176
|
+
min-width: 0;
|
|
1177
|
+
margin-top: 0.75rem;
|
|
1178
|
+
}
|
|
1179
|
+
.ck-reply {
|
|
1180
|
+
min-width: var(--ck-target);
|
|
1181
|
+
min-height: var(--ck-target);
|
|
1182
|
+
max-width: 100%;
|
|
1183
|
+
padding: 0.5rem 0.875rem;
|
|
1184
|
+
border: 1px solid var(--ck-line);
|
|
1185
|
+
border-radius: 999px;
|
|
1186
|
+
background: var(--ck-bg);
|
|
1187
|
+
color: var(--ck-fg);
|
|
1188
|
+
font: inherit;
|
|
1189
|
+
font-size: 0.9375rem;
|
|
1190
|
+
line-height: 1.25;
|
|
1191
|
+
text-align: left;
|
|
1192
|
+
overflow-wrap: anywhere;
|
|
1193
|
+
cursor: pointer;
|
|
1194
|
+
}
|
|
1195
|
+
.ck-reply:hover {
|
|
1196
|
+
border-color: var(--ck-accent);
|
|
1197
|
+
}
|
|
1198
|
+
/* The first reply is the recommended next step: the same pill, drawn as the
|
|
1199
|
+
lead — a firmer line and the reading colour — so the eye lands on it. */
|
|
1200
|
+
.ck-reply-lead {
|
|
1201
|
+
border-color: var(--ck-line-2);
|
|
1202
|
+
background: var(--ck-raised);
|
|
1203
|
+
font-weight: 500;
|
|
1204
|
+
}
|
|
1205
|
+
.ck-reply:disabled {
|
|
1206
|
+
opacity: 0.5;
|
|
1207
|
+
cursor: default;
|
|
1208
|
+
}
|
|
1209
|
+
/* On a phone the replies are ONE row that scrolls sideways, with a fade
|
|
1210
|
+
where it runs on, never a box of pills that wraps into "two and an orphan"
|
|
1211
|
+
wherever the words run out. The lead reply is first, so it is always on
|
|
1212
|
+
screen. From 40rem up there is room for all of them on a line or two. */
|
|
1213
|
+
@media (max-width: 40rem) {
|
|
1214
|
+
.ck-replies {
|
|
1215
|
+
flex-wrap: nowrap;
|
|
1216
|
+
overflow-x: auto;
|
|
1217
|
+
scrollbar-width: none;
|
|
1218
|
+
padding-inline-end: 2.5rem;
|
|
1219
|
+
scroll-padding-inline: 0.5rem;
|
|
1220
|
+
-webkit-overflow-scrolling: touch;
|
|
1221
|
+
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
|
|
1222
|
+
mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
|
|
1223
|
+
}
|
|
1224
|
+
.ck-replies::-webkit-scrollbar {
|
|
1225
|
+
display: none;
|
|
1226
|
+
}
|
|
1227
|
+
.ck-reply {
|
|
1228
|
+
flex: 0 0 auto;
|
|
1229
|
+
max-width: 85vw;
|
|
1230
|
+
overflow: hidden;
|
|
1231
|
+
white-space: nowrap;
|
|
1232
|
+
text-overflow: ellipsis;
|
|
1233
|
+
}
|
|
1234
|
+
}
|
|
1235
|
+
|
|
1236
|
+
.ck-spin {
|
|
1237
|
+
animation: ck-spin 0.9s linear infinite;
|
|
1238
|
+
}
|
|
1239
|
+
@keyframes ck-spin {
|
|
1240
|
+
to {
|
|
1241
|
+
transform: rotate(360deg);
|
|
1242
|
+
}
|
|
1243
|
+
}
|
|
1244
|
+
@keyframes ck-pulse {
|
|
1245
|
+
50% {
|
|
1246
|
+
opacity: 0.35;
|
|
1247
|
+
}
|
|
1248
|
+
}
|
|
1249
|
+
@keyframes ck-wave {
|
|
1250
|
+
50% {
|
|
1251
|
+
transform: scaleY(1);
|
|
1252
|
+
}
|
|
1253
|
+
}
|
|
1254
|
+
@keyframes ck-dot {
|
|
1255
|
+
0%,
|
|
1256
|
+
80%,
|
|
1257
|
+
100% {
|
|
1258
|
+
opacity: 0.3;
|
|
1259
|
+
}
|
|
1260
|
+
40% {
|
|
1261
|
+
opacity: 1;
|
|
1262
|
+
}
|
|
1263
|
+
}
|
|
1264
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1265
|
+
.ck-spin,
|
|
1266
|
+
.ck-voice-dot,
|
|
1267
|
+
.ck-voice-wave > span,
|
|
1268
|
+
.ck-dots > span {
|
|
1269
|
+
animation: none;
|
|
1270
|
+
}
|
|
1271
|
+
}
|
|
1272
|
+
|
|
1273
|
+
/* attach sheet: Camera / Photos / Files, from the bottom edge on a phone —
|
|
1274
|
+
where the thumb already is after tapping the paperclip. A native <dialog>
|
|
1275
|
+
in the top layer, so no panel around the composer can clip it. */
|
|
1276
|
+
.ck-sheet {
|
|
1277
|
+
width: 100%;
|
|
1278
|
+
max-width: 32rem;
|
|
1279
|
+
max-height: none;
|
|
1280
|
+
margin: auto auto 0;
|
|
1281
|
+
padding: 0;
|
|
1282
|
+
border: 0;
|
|
1283
|
+
background: transparent;
|
|
1284
|
+
color: var(--ck-fg);
|
|
1285
|
+
font-family: var(--ck-font);
|
|
1286
|
+
}
|
|
1287
|
+
.ck-sheet::backdrop {
|
|
1288
|
+
background: color-mix(in srgb, #000 40%, transparent);
|
|
1289
|
+
}
|
|
1290
|
+
.ck-sheet[open] .ck-sheet-panel {
|
|
1291
|
+
animation: ck-rise 0.18s ease-out;
|
|
1292
|
+
}
|
|
1293
|
+
.ck-sheet-panel {
|
|
1294
|
+
padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
|
|
1295
|
+
border: 1px solid var(--ck-line);
|
|
1296
|
+
border-bottom: 0;
|
|
1297
|
+
border-radius: var(--ck-radius) var(--ck-radius) 0 0;
|
|
1298
|
+
background: var(--ck-bg);
|
|
1299
|
+
}
|
|
1300
|
+
.ck-sheet-head {
|
|
1301
|
+
display: flex;
|
|
1302
|
+
align-items: center;
|
|
1303
|
+
justify-content: space-between;
|
|
1304
|
+
gap: 0.5rem;
|
|
1305
|
+
margin-bottom: 0.75rem;
|
|
1306
|
+
}
|
|
1307
|
+
.ck-sheet-title {
|
|
1308
|
+
font-size: 1rem;
|
|
1309
|
+
font-weight: 600;
|
|
1310
|
+
}
|
|
1311
|
+
.ck-sheet-close {
|
|
1312
|
+
border-color: transparent;
|
|
1313
|
+
background: transparent;
|
|
1314
|
+
}
|
|
1315
|
+
.ck-attach-sources {
|
|
1316
|
+
display: grid;
|
|
1317
|
+
grid-auto-flow: column;
|
|
1318
|
+
grid-auto-columns: minmax(0, 1fr);
|
|
1319
|
+
gap: 0.5rem;
|
|
1320
|
+
}
|
|
1321
|
+
.ck-attach-source {
|
|
1322
|
+
display: flex;
|
|
1323
|
+
flex-direction: column;
|
|
1324
|
+
align-items: center;
|
|
1325
|
+
justify-content: center;
|
|
1326
|
+
gap: 0.375rem;
|
|
1327
|
+
min-height: 5rem;
|
|
1328
|
+
padding: 0.75rem 0.25rem;
|
|
1329
|
+
border: 1px solid var(--ck-line);
|
|
1330
|
+
border-radius: var(--ck-radius-sm);
|
|
1331
|
+
background: var(--ck-raised);
|
|
1332
|
+
color: var(--ck-fg);
|
|
1333
|
+
font: inherit;
|
|
1334
|
+
font-size: 0.9375rem;
|
|
1335
|
+
cursor: pointer;
|
|
1336
|
+
}
|
|
1337
|
+
.ck-attach-source > svg {
|
|
1338
|
+
font-size: 1.375rem;
|
|
1339
|
+
color: var(--ck-fg-2);
|
|
1340
|
+
}
|
|
1341
|
+
.ck-attach-source:hover {
|
|
1342
|
+
border-color: var(--ck-line-2);
|
|
1343
|
+
}
|
|
1344
|
+
.ck-attach-source:focus-visible,
|
|
1345
|
+
.ck-sheet-close:focus-visible {
|
|
1346
|
+
outline: 2px solid var(--ck-accent);
|
|
1347
|
+
outline-offset: 2px;
|
|
1348
|
+
}
|
|
1349
|
+
.ck-attach-trigger {
|
|
1350
|
+
display: inline-flex;
|
|
1351
|
+
align-items: center;
|
|
1352
|
+
justify-content: center;
|
|
1353
|
+
gap: 0.375rem;
|
|
1354
|
+
min-height: var(--ck-target);
|
|
1355
|
+
padding: 0 1rem;
|
|
1356
|
+
border: 1px solid var(--ck-line);
|
|
1357
|
+
border-radius: 999px;
|
|
1358
|
+
background: var(--ck-raised);
|
|
1359
|
+
color: var(--ck-fg);
|
|
1360
|
+
font: inherit;
|
|
1361
|
+
font-size: 0.9375rem;
|
|
1362
|
+
cursor: pointer;
|
|
1363
|
+
}
|
|
1364
|
+
.ck-attach-trigger:disabled {
|
|
1365
|
+
cursor: not-allowed;
|
|
1366
|
+
opacity: 0.45;
|
|
1367
|
+
}
|
|
1368
|
+
/* An app's own rows under Camera · Photos · Files in the attach sheet. */
|
|
1369
|
+
.ck-sheet-extra {
|
|
1370
|
+
display: flex;
|
|
1371
|
+
flex-direction: column;
|
|
1372
|
+
gap: 0.125rem;
|
|
1373
|
+
margin-top: 0.75rem;
|
|
1374
|
+
padding-top: 0.75rem;
|
|
1375
|
+
border-top: 1px solid var(--ck-line);
|
|
1376
|
+
}
|
|
1377
|
+
|
|
1378
|
+
.ck-sheet-only {
|
|
1379
|
+
margin-top: 0;
|
|
1380
|
+
padding-top: 0;
|
|
1381
|
+
border-top: 0;
|
|
1382
|
+
}
|
|
1383
|
+
/* One anatomy for every app row: icon, what it adds, an optional second line. */
|
|
1384
|
+
.ck-attach-extra {
|
|
1385
|
+
display: flex;
|
|
1386
|
+
align-items: center;
|
|
1387
|
+
gap: 0.75rem;
|
|
1388
|
+
width: 100%;
|
|
1389
|
+
min-height: var(--ck-target);
|
|
1390
|
+
padding: 0.375rem 0.5rem;
|
|
1391
|
+
border: 0;
|
|
1392
|
+
border-radius: var(--ck-radius-sm);
|
|
1393
|
+
background: transparent;
|
|
1394
|
+
color: var(--ck-fg);
|
|
1395
|
+
font: inherit;
|
|
1396
|
+
font-size: 0.9375rem;
|
|
1397
|
+
text-align: left;
|
|
1398
|
+
cursor: pointer;
|
|
1399
|
+
}
|
|
1400
|
+
.ck-attach-extra:hover {
|
|
1401
|
+
background: var(--ck-raised);
|
|
1402
|
+
}
|
|
1403
|
+
.ck-attach-extra:focus-visible {
|
|
1404
|
+
outline: 2px solid var(--ck-accent);
|
|
1405
|
+
outline-offset: 2px;
|
|
1406
|
+
}
|
|
1407
|
+
.ck-attach-extra-icon {
|
|
1408
|
+
display: inline-flex;
|
|
1409
|
+
flex: none;
|
|
1410
|
+
font-size: 1.25rem;
|
|
1411
|
+
color: var(--ck-fg-2);
|
|
1412
|
+
}
|
|
1413
|
+
.ck-attach-extra-text {
|
|
1414
|
+
display: flex;
|
|
1415
|
+
flex: 1;
|
|
1416
|
+
flex-direction: column;
|
|
1417
|
+
min-width: 0;
|
|
1418
|
+
}
|
|
1419
|
+
.ck-attach-extra-text small {
|
|
1420
|
+
color: var(--ck-muted);
|
|
1421
|
+
font-size: 0.8125rem;
|
|
1422
|
+
}
|
|
1423
|
+
|
|
1424
|
+
/* while an answer is read aloud: Stop, a quiet wave, the time so far */
|
|
1425
|
+
.ck-player {
|
|
1426
|
+
align-items: center;
|
|
1427
|
+
}
|
|
1428
|
+
.ck-action-stop {
|
|
1429
|
+
color: var(--ck-fg);
|
|
1430
|
+
}
|
|
1431
|
+
.ck-player-wave {
|
|
1432
|
+
display: inline-flex;
|
|
1433
|
+
align-items: center;
|
|
1434
|
+
gap: 2px;
|
|
1435
|
+
height: 1rem;
|
|
1436
|
+
}
|
|
1437
|
+
.ck-player-wave > span {
|
|
1438
|
+
display: block;
|
|
1439
|
+
width: 2px;
|
|
1440
|
+
height: 0.375rem;
|
|
1441
|
+
border-radius: 1px;
|
|
1442
|
+
background: var(--ck-fg-2);
|
|
1443
|
+
animation: ck-wave 1s ease-in-out infinite;
|
|
1444
|
+
}
|
|
1445
|
+
.ck-player-wave > span:nth-child(2n) {
|
|
1446
|
+
animation-delay: 0.15s;
|
|
1447
|
+
}
|
|
1448
|
+
.ck-player-wave > span:nth-child(3n) {
|
|
1449
|
+
animation-delay: 0.3s;
|
|
1450
|
+
}
|
|
1451
|
+
@keyframes ck-wave {
|
|
1452
|
+
50% {
|
|
1453
|
+
height: 1rem;
|
|
1454
|
+
}
|
|
1455
|
+
}
|
|
1456
|
+
.ck-player-time {
|
|
1457
|
+
font-size: 0.8125rem;
|
|
1458
|
+
font-variant-numeric: tabular-nums;
|
|
1459
|
+
color: var(--ck-fg-2);
|
|
1460
|
+
}
|
|
1461
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1462
|
+
.ck-player-wave > span {
|
|
1463
|
+
animation: none;
|
|
1464
|
+
height: 0.75rem;
|
|
1465
|
+
}
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1468
|
+
/* the sources sheet on a touch screen: one row per record */
|
|
1469
|
+
.ck-sources-open {
|
|
1470
|
+
cursor: pointer;
|
|
1471
|
+
font: inherit;
|
|
1472
|
+
}
|
|
1473
|
+
.ck-sources-open > svg {
|
|
1474
|
+
font-size: 1rem;
|
|
1475
|
+
}
|
|
1476
|
+
.ck-source-list {
|
|
1477
|
+
display: flex;
|
|
1478
|
+
flex-direction: column;
|
|
1479
|
+
margin: 0;
|
|
1480
|
+
padding: 0;
|
|
1481
|
+
list-style: none;
|
|
1482
|
+
}
|
|
1483
|
+
.ck-source-row {
|
|
1484
|
+
display: flex;
|
|
1485
|
+
align-items: flex-start;
|
|
1486
|
+
gap: 0.75rem;
|
|
1487
|
+
min-height: var(--ck-target);
|
|
1488
|
+
padding: 0.625rem 0.25rem;
|
|
1489
|
+
border-top: 1px solid var(--ck-line);
|
|
1490
|
+
color: var(--ck-fg);
|
|
1491
|
+
text-decoration: none;
|
|
1492
|
+
}
|
|
1493
|
+
.ck-source-list > li:first-child .ck-source-row {
|
|
1494
|
+
border-top: 0;
|
|
1495
|
+
}
|
|
1496
|
+
.ck-source-row .ck-source-id {
|
|
1497
|
+
margin-top: 0.125rem;
|
|
1498
|
+
}
|
|
1499
|
+
.ck-source-body {
|
|
1500
|
+
display: flex;
|
|
1501
|
+
min-width: 0;
|
|
1502
|
+
flex-direction: column;
|
|
1503
|
+
gap: 0.125rem;
|
|
1504
|
+
}
|
|
1505
|
+
.ck-source-title {
|
|
1506
|
+
font-weight: 500;
|
|
1507
|
+
overflow-wrap: anywhere;
|
|
1508
|
+
}
|
|
1509
|
+
.ck-source-detail {
|
|
1510
|
+
font-size: 0.8125rem;
|
|
1511
|
+
color: var(--ck-fg-2);
|
|
1512
|
+
overflow-wrap: anywhere;
|
|
1513
|
+
}
|
|
1514
|
+
a.ck-source-row:hover .ck-source-title {
|
|
1515
|
+
text-decoration: underline;
|
|
1516
|
+
}
|
|
1517
|
+
|
|
1518
|
+
@keyframes ck-rise {
|
|
1519
|
+
from {
|
|
1520
|
+
transform: translateY(1.5rem);
|
|
1521
|
+
opacity: 0;
|
|
1522
|
+
}
|
|
1523
|
+
}
|
|
1524
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1525
|
+
.ck-sheet[open] .ck-sheet-panel {
|
|
1526
|
+
animation: none;
|
|
1527
|
+
}
|
|
1528
|
+
}
|
|
1529
|
+
|
|
1530
|
+
/* Visual answers share the app's palette, with a quiet editorial hierarchy. */
|
|
1531
|
+
.ck-rich {
|
|
1532
|
+
box-sizing: border-box;
|
|
1533
|
+
min-width: 0;
|
|
1534
|
+
margin: 1.5rem 0;
|
|
1535
|
+
color: var(--ck-fg);
|
|
1536
|
+
overflow-wrap: anywhere;
|
|
1537
|
+
}
|
|
1538
|
+
.ck-rich * {
|
|
1539
|
+
box-sizing: border-box;
|
|
1540
|
+
min-width: 0;
|
|
1541
|
+
}
|
|
1542
|
+
.ck-rich-title {
|
|
1543
|
+
display: block;
|
|
1544
|
+
font-size: 1.05em;
|
|
1545
|
+
font-weight: 650;
|
|
1546
|
+
line-height: 1.4;
|
|
1547
|
+
margin-bottom: 1rem;
|
|
1548
|
+
}
|
|
1549
|
+
.ck-gallery-grid {
|
|
1550
|
+
display: grid;
|
|
1551
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1552
|
+
gap: 0.75rem;
|
|
1553
|
+
}
|
|
1554
|
+
.ck-gallery-grid figure {
|
|
1555
|
+
margin: 0;
|
|
1556
|
+
}
|
|
1557
|
+
.ck-photo {
|
|
1558
|
+
display: flex;
|
|
1559
|
+
flex-direction: column;
|
|
1560
|
+
width: 100%;
|
|
1561
|
+
min-height: var(--ck-target);
|
|
1562
|
+
padding: 0;
|
|
1563
|
+
overflow: hidden;
|
|
1564
|
+
border: 1px solid var(--ck-line);
|
|
1565
|
+
border-radius: var(--ck-radius);
|
|
1566
|
+
background: var(--ck-raised);
|
|
1567
|
+
color: var(--ck-fg);
|
|
1568
|
+
cursor: zoom-in;
|
|
1569
|
+
font: inherit;
|
|
1570
|
+
text-align: start;
|
|
1571
|
+
}
|
|
1572
|
+
.ck-photo img {
|
|
1573
|
+
display: block;
|
|
1574
|
+
width: 100%;
|
|
1575
|
+
aspect-ratio: 1;
|
|
1576
|
+
object-fit: cover;
|
|
1577
|
+
}
|
|
1578
|
+
.ck-photo-label {
|
|
1579
|
+
padding: 0.5rem 0.75rem;
|
|
1580
|
+
font-size: 0.875em;
|
|
1581
|
+
}
|
|
1582
|
+
.ck-gallery-grid figcaption {
|
|
1583
|
+
padding: 0.5rem 0;
|
|
1584
|
+
font-size: 0.875em;
|
|
1585
|
+
color: var(--ck-fg-2);
|
|
1586
|
+
}
|
|
1587
|
+
.ck-photo-full {
|
|
1588
|
+
display: block;
|
|
1589
|
+
max-width: 100%;
|
|
1590
|
+
max-height: 70dvh;
|
|
1591
|
+
object-fit: contain;
|
|
1592
|
+
margin: auto;
|
|
1593
|
+
}
|
|
1594
|
+
.ck-callout {
|
|
1595
|
+
padding: 1.25rem;
|
|
1596
|
+
border-inline-start: 3px solid var(--ck-fg);
|
|
1597
|
+
background: var(--ck-raised);
|
|
1598
|
+
border-radius: 0 var(--ck-radius-sm) var(--ck-radius-sm) 0;
|
|
1599
|
+
}
|
|
1600
|
+
.ck-callout .ck-rich-title {
|
|
1601
|
+
margin-bottom: 0.5rem;
|
|
1602
|
+
}
|
|
1603
|
+
.ck-rich p {
|
|
1604
|
+
margin: 0.25rem 0 0;
|
|
1605
|
+
}
|
|
1606
|
+
.ck-diagram {
|
|
1607
|
+
padding: 1.25rem;
|
|
1608
|
+
border: 1px solid var(--ck-line);
|
|
1609
|
+
border-radius: var(--ck-radius);
|
|
1610
|
+
background: var(--ck-raised);
|
|
1611
|
+
}
|
|
1612
|
+
.ck-md .ck-diagram-nodes {
|
|
1613
|
+
display: grid;
|
|
1614
|
+
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
|
|
1615
|
+
gap: 0.75rem;
|
|
1616
|
+
padding: 0;
|
|
1617
|
+
list-style: none;
|
|
1618
|
+
margin: 0;
|
|
1619
|
+
}
|
|
1620
|
+
.ck-diagram-nodes li {
|
|
1621
|
+
display: flex;
|
|
1622
|
+
align-items: start;
|
|
1623
|
+
gap: 0.75rem;
|
|
1624
|
+
padding: 1rem;
|
|
1625
|
+
background: var(--ck-bg);
|
|
1626
|
+
border: 1px solid var(--ck-line);
|
|
1627
|
+
border-radius: var(--ck-radius-sm);
|
|
1628
|
+
}
|
|
1629
|
+
.ck-diagram-number {
|
|
1630
|
+
display: grid;
|
|
1631
|
+
place-items: center;
|
|
1632
|
+
flex: 0 0 1.75rem;
|
|
1633
|
+
height: 1.75rem;
|
|
1634
|
+
border-radius: 50%;
|
|
1635
|
+
background: var(--ck-fg);
|
|
1636
|
+
color: var(--ck-bg);
|
|
1637
|
+
font-size: 0.875em;
|
|
1638
|
+
}
|
|
1639
|
+
.ck-diagram-nodes p {
|
|
1640
|
+
font-size: 0.875em;
|
|
1641
|
+
color: var(--ck-fg-2);
|
|
1642
|
+
}
|
|
1643
|
+
.ck-md .ck-diagram-edges {
|
|
1644
|
+
padding: 0.75rem 0 0;
|
|
1645
|
+
margin: 0;
|
|
1646
|
+
list-style: none;
|
|
1647
|
+
}
|
|
1648
|
+
.ck-diagram-edges li {
|
|
1649
|
+
display: flex;
|
|
1650
|
+
align-items: center;
|
|
1651
|
+
gap: 0.5rem;
|
|
1652
|
+
flex-wrap: wrap;
|
|
1653
|
+
border-top: 1px solid var(--ck-line);
|
|
1654
|
+
padding: 0.75rem 0;
|
|
1655
|
+
}
|
|
1656
|
+
.ck-diagram-arrow {
|
|
1657
|
+
color: var(--ck-fg-3);
|
|
1658
|
+
}
|
|
1659
|
+
.ck-diagram-edges small {
|
|
1660
|
+
flex-basis: 100%;
|
|
1661
|
+
color: var(--ck-fg-2);
|
|
1662
|
+
}
|
|
1663
|
+
.ck-choice fieldset {
|
|
1664
|
+
border: 0;
|
|
1665
|
+
margin: 0;
|
|
1666
|
+
padding: 0;
|
|
1667
|
+
}
|
|
1668
|
+
.ck-choice legend {
|
|
1669
|
+
padding: 0;
|
|
1670
|
+
}
|
|
1671
|
+
.ck-choice-option {
|
|
1672
|
+
display: flex;
|
|
1673
|
+
align-items: center;
|
|
1674
|
+
gap: 0.75rem;
|
|
1675
|
+
min-height: var(--ck-target);
|
|
1676
|
+
padding: 0.75rem;
|
|
1677
|
+
border: 1px solid var(--ck-line);
|
|
1678
|
+
border-radius: var(--ck-radius-sm);
|
|
1679
|
+
margin-bottom: 0.5rem;
|
|
1680
|
+
cursor: pointer;
|
|
1681
|
+
}
|
|
1682
|
+
.ck-choice-option:has(:checked) {
|
|
1683
|
+
border-color: var(--ck-fg);
|
|
1684
|
+
background: var(--ck-raised);
|
|
1685
|
+
}
|
|
1686
|
+
.ck-choice-option input {
|
|
1687
|
+
flex: 0 0 auto;
|
|
1688
|
+
width: 1.25rem;
|
|
1689
|
+
height: 1.25rem;
|
|
1690
|
+
accent-color: var(--ck-fg);
|
|
1691
|
+
}
|
|
1692
|
+
.ck-choice-submit {
|
|
1693
|
+
display: flex;
|
|
1694
|
+
justify-content: center;
|
|
1695
|
+
align-items: center;
|
|
1696
|
+
gap: 1rem;
|
|
1697
|
+
width: 100%;
|
|
1698
|
+
min-height: var(--ck-target);
|
|
1699
|
+
border: 0;
|
|
1700
|
+
border-radius: var(--ck-radius);
|
|
1701
|
+
background: var(--ck-fg);
|
|
1702
|
+
color: var(--ck-bg);
|
|
1703
|
+
padding: 0.75rem 1rem;
|
|
1704
|
+
font: inherit;
|
|
1705
|
+
font-weight: 600;
|
|
1706
|
+
cursor: pointer;
|
|
1707
|
+
}
|
|
1708
|
+
.ck-choice-submit:disabled {
|
|
1709
|
+
opacity: 0.45;
|
|
1710
|
+
cursor: default;
|
|
1711
|
+
}
|
|
1712
|
+
/* A layered figure: boxes stacked top to bottom in one bordered card, a
|
|
1713
|
+
row of tiles where a layer has parts, and the words that cross each arrow. */
|
|
1714
|
+
.ck-stack {
|
|
1715
|
+
padding: 1rem;
|
|
1716
|
+
border: 1px solid var(--ck-line);
|
|
1717
|
+
border-radius: var(--ck-radius);
|
|
1718
|
+
background: var(--ck-bg);
|
|
1719
|
+
}
|
|
1720
|
+
.ck-stack-layers {
|
|
1721
|
+
display: flex;
|
|
1722
|
+
flex-direction: column;
|
|
1723
|
+
}
|
|
1724
|
+
/* Tiles share a row, and a row wraps rather than cut a word: each tile asks
|
|
1725
|
+
for its share of the width (--ck-n tiles) but never less than its longest
|
|
1726
|
+
word, so on a narrow screen "3 across" becomes "2 and 1" or one under the
|
|
1727
|
+
other. The old grid forced N equal columns and cut "Manufacture" into
|
|
1728
|
+
pieces at 320px (2026-10-22). */
|
|
1729
|
+
.ck-stack-row {
|
|
1730
|
+
display: flex;
|
|
1731
|
+
flex-wrap: wrap;
|
|
1732
|
+
gap: 0.625rem;
|
|
1733
|
+
}
|
|
1734
|
+
.ck-stack-node {
|
|
1735
|
+
display: flex;
|
|
1736
|
+
flex: 1 1 calc((100% - (var(--ck-n, 1) - 1) * 0.625rem) / var(--ck-n, 1));
|
|
1737
|
+
flex-direction: column;
|
|
1738
|
+
align-items: center;
|
|
1739
|
+
gap: 0.25rem;
|
|
1740
|
+
min-width: min-content;
|
|
1741
|
+
padding: 1rem 0.75rem;
|
|
1742
|
+
border: 1px solid var(--ck-line);
|
|
1743
|
+
border-radius: calc(var(--ck-radius) * 0.75);
|
|
1744
|
+
background: var(--ck-raised);
|
|
1745
|
+
text-align: center;
|
|
1746
|
+
overflow-wrap: normal;
|
|
1747
|
+
word-break: normal;
|
|
1748
|
+
}
|
|
1749
|
+
.ck-stack-accent {
|
|
1750
|
+
border-color: color-mix(in srgb, var(--ck-accent) 35%, var(--ck-line));
|
|
1751
|
+
background: color-mix(in srgb, var(--ck-accent) 9%, var(--ck-bg));
|
|
1752
|
+
}
|
|
1753
|
+
.ck-stack-icon {
|
|
1754
|
+
width: 1.5em;
|
|
1755
|
+
height: 1.5em;
|
|
1756
|
+
margin-bottom: 0.25rem;
|
|
1757
|
+
color: var(--ck-fg);
|
|
1758
|
+
}
|
|
1759
|
+
.ck-stack-kicker {
|
|
1760
|
+
color: var(--ck-fg-2);
|
|
1761
|
+
font-size: 0.75em;
|
|
1762
|
+
font-weight: 600;
|
|
1763
|
+
letter-spacing: 0.08em;
|
|
1764
|
+
text-transform: uppercase;
|
|
1765
|
+
}
|
|
1766
|
+
.ck-stack-label {
|
|
1767
|
+
font-size: 1.0625em;
|
|
1768
|
+
font-weight: 650;
|
|
1769
|
+
line-height: 1.3;
|
|
1770
|
+
}
|
|
1771
|
+
/* Tiles in a row share the width: tighter padding and smaller words, so
|
|
1772
|
+
"Manufacture, move, inspect" fits three across on a 390px phone. */
|
|
1773
|
+
.ck-stack-row:not([data-n="1"]) .ck-stack-node {
|
|
1774
|
+
padding: 0.875rem 0.5rem;
|
|
1775
|
+
}
|
|
1776
|
+
.ck-stack-row:not([data-n="1"]) .ck-stack-label {
|
|
1777
|
+
font-size: 1em;
|
|
1778
|
+
}
|
|
1779
|
+
.ck-stack-row:not([data-n="1"]) .ck-stack-detail {
|
|
1780
|
+
font-size: 0.8125em;
|
|
1781
|
+
}
|
|
1782
|
+
.ck-stack-detail {
|
|
1783
|
+
color: var(--ck-fg-2);
|
|
1784
|
+
font-size: 0.875em;
|
|
1785
|
+
line-height: 1.4;
|
|
1786
|
+
}
|
|
1787
|
+
.ck-stack-link {
|
|
1788
|
+
display: flex;
|
|
1789
|
+
flex-direction: column;
|
|
1790
|
+
align-items: center;
|
|
1791
|
+
gap: 0.125rem;
|
|
1792
|
+
padding: 0.5rem 0;
|
|
1793
|
+
color: var(--ck-fg-2);
|
|
1794
|
+
font-size: 0.875em;
|
|
1795
|
+
text-align: center;
|
|
1796
|
+
}
|
|
1797
|
+
.ck-stack-arrow {
|
|
1798
|
+
font-size: 1.25em;
|
|
1799
|
+
line-height: 1;
|
|
1800
|
+
color: var(--ck-fg-3);
|
|
1801
|
+
}
|
|
1802
|
+
.ck-stack-caption {
|
|
1803
|
+
margin: 0.875rem 0 0;
|
|
1804
|
+
color: var(--ck-fg-2);
|
|
1805
|
+
font-size: 0.875em;
|
|
1806
|
+
text-align: center;
|
|
1807
|
+
}
|
|
1808
|
+
|
|
1809
|
+
/* A chart in an answer (0.15). The drawing is the app's (an injected
|
|
1810
|
+
renderer); chatkit gives it the same place in the column as the stack
|
|
1811
|
+
figure, and draws the fallback — the caption and a table of the data —
|
|
1812
|
+
itself. Numbers are right-aligned tabular figures that never wrap. */
|
|
1813
|
+
.ck-chart {
|
|
1814
|
+
max-width: 100%;
|
|
1815
|
+
}
|
|
1816
|
+
.ck-chart > * {
|
|
1817
|
+
max-width: 100%;
|
|
1818
|
+
}
|
|
1819
|
+
.ck-chart-table .ck-table-wrap {
|
|
1820
|
+
margin: 0;
|
|
1821
|
+
}
|
|
1822
|
+
.ck-chart-num {
|
|
1823
|
+
text-align: right;
|
|
1824
|
+
font-variant-numeric: tabular-nums;
|
|
1825
|
+
white-space: nowrap;
|
|
1826
|
+
}
|
|
1827
|
+
.ck-chart-table .ck-table th:last-child,
|
|
1828
|
+
.ck-chart-table .ck-table td:last-child {
|
|
1829
|
+
padding-right: 0;
|
|
1830
|
+
}
|
|
1831
|
+
.ck-chart-link {
|
|
1832
|
+
color: inherit;
|
|
1833
|
+
text-decoration: underline;
|
|
1834
|
+
text-decoration-color: color-mix(in srgb, var(--ck-accent) 60%, transparent);
|
|
1835
|
+
text-underline-offset: 0.15em;
|
|
1836
|
+
}
|
|
1837
|
+
.ck-chart-caption {
|
|
1838
|
+
margin: 0.875rem 0 0;
|
|
1839
|
+
color: var(--ck-fg-2);
|
|
1840
|
+
font-size: 0.875em;
|
|
1841
|
+
text-align: center;
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
/* Thumbs under an answer, and the sheet that asks why. */
|
|
1845
|
+
.ck-action-on {
|
|
1846
|
+
color: var(--ck-fg);
|
|
1847
|
+
background: var(--ck-raised);
|
|
1848
|
+
}
|
|
1849
|
+
.ck-feedback-thanks {
|
|
1850
|
+
align-self: center;
|
|
1851
|
+
color: var(--ck-fg-2);
|
|
1852
|
+
font-size: 0.875em;
|
|
1853
|
+
}
|
|
1854
|
+
.ck-feedback {
|
|
1855
|
+
display: flex;
|
|
1856
|
+
flex-direction: column;
|
|
1857
|
+
gap: 0.5rem;
|
|
1858
|
+
}
|
|
1859
|
+
.ck-feedback-reason {
|
|
1860
|
+
min-height: var(--ck-target);
|
|
1861
|
+
padding: 0.5rem 0.875rem;
|
|
1862
|
+
border: 1px solid var(--ck-line);
|
|
1863
|
+
border-radius: calc(var(--ck-radius) * 0.75);
|
|
1864
|
+
background: var(--ck-bg);
|
|
1865
|
+
color: var(--ck-fg);
|
|
1866
|
+
font: inherit;
|
|
1867
|
+
text-align: left;
|
|
1868
|
+
cursor: pointer;
|
|
1869
|
+
}
|
|
1870
|
+
.ck-feedback-reason-on {
|
|
1871
|
+
border-color: var(--ck-fg);
|
|
1872
|
+
background: var(--ck-raised);
|
|
1873
|
+
}
|
|
1874
|
+
.ck-feedback-more {
|
|
1875
|
+
min-height: var(--ck-target);
|
|
1876
|
+
padding: 0.625rem 0.875rem;
|
|
1877
|
+
border: 1px solid var(--ck-line);
|
|
1878
|
+
border-radius: calc(var(--ck-radius) * 0.75);
|
|
1879
|
+
background: var(--ck-bg);
|
|
1880
|
+
color: var(--ck-fg);
|
|
1881
|
+
font: inherit;
|
|
1882
|
+
font-size: max(16px, var(--ck-text));
|
|
1883
|
+
resize: vertical;
|
|
1884
|
+
}
|
|
1885
|
+
.ck-feedback-send {
|
|
1886
|
+
min-height: var(--ck-target);
|
|
1887
|
+
padding: 0 1rem;
|
|
1888
|
+
border: 0;
|
|
1889
|
+
border-radius: 999px;
|
|
1890
|
+
background: var(--ck-accent);
|
|
1891
|
+
color: var(--ck-on-accent);
|
|
1892
|
+
font: inherit;
|
|
1893
|
+
font-weight: 600;
|
|
1894
|
+
cursor: pointer;
|
|
1895
|
+
}
|
|
1896
|
+
|
|
1897
|
+
/* "Thought for 3m 38s ›": one quiet line above the answer, opening to the
|
|
1898
|
+
steps; open and ticking while the turn runs. */
|
|
1899
|
+
.ck-thinking {
|
|
1900
|
+
margin: 0 0 0.75em;
|
|
1901
|
+
color: var(--ck-fg-2);
|
|
1902
|
+
font-size: 0.9375em;
|
|
1903
|
+
}
|
|
1904
|
+
.ck-thinking-title {
|
|
1905
|
+
display: inline-flex;
|
|
1906
|
+
align-items: center;
|
|
1907
|
+
gap: 0.35em;
|
|
1908
|
+
min-height: 2rem;
|
|
1909
|
+
cursor: default;
|
|
1910
|
+
list-style: none;
|
|
1911
|
+
}
|
|
1912
|
+
details.ck-thinking > summary {
|
|
1913
|
+
min-height: var(--ck-target);
|
|
1914
|
+
cursor: pointer;
|
|
1915
|
+
}
|
|
1916
|
+
details.ck-thinking > summary::-webkit-details-marker {
|
|
1917
|
+
display: none;
|
|
1918
|
+
}
|
|
1919
|
+
details.ck-thinking > summary svg {
|
|
1920
|
+
transition: transform 0.15s ease;
|
|
1921
|
+
}
|
|
1922
|
+
details.ck-thinking[open] > summary svg {
|
|
1923
|
+
transform: rotate(90deg);
|
|
1924
|
+
}
|
|
1925
|
+
.ck-thinking-body {
|
|
1926
|
+
padding: 0.25em 0 0.5em 0.75em;
|
|
1927
|
+
border-left: 2px solid var(--ck-line);
|
|
1928
|
+
}
|
|
1929
|
+
.ck-thinking-body p {
|
|
1930
|
+
margin: 0 0 0.5em;
|
|
1931
|
+
}
|
|
1932
|
+
.ck-thinking-steps {
|
|
1933
|
+
margin: 0;
|
|
1934
|
+
padding: 0;
|
|
1935
|
+
list-style: none;
|
|
1936
|
+
}
|
|
1937
|
+
.ck-thinking-steps li {
|
|
1938
|
+
display: flex;
|
|
1939
|
+
flex-direction: column;
|
|
1940
|
+
padding: 0.2em 0;
|
|
1941
|
+
}
|
|
1942
|
+
.ck-thinking-steps small {
|
|
1943
|
+
color: var(--ck-fg-3);
|
|
1944
|
+
}
|
|
1945
|
+
.ck-thinking-now {
|
|
1946
|
+
color: var(--ck-fg);
|
|
1947
|
+
}
|
|
1948
|
+
.ck-thinking-live .ck-dots {
|
|
1949
|
+
margin-right: 0.25em;
|
|
1950
|
+
}
|
|
1951
|
+
|
|
1952
|
+
.ck-rich button:focus-visible,
|
|
1953
|
+
.ck-rich input:focus-visible {
|
|
1954
|
+
outline: 2px solid var(--ck-fg);
|
|
1955
|
+
outline-offset: 3px;
|
|
1956
|
+
}
|
|
1957
|
+
@media (max-width: 480px) {
|
|
1958
|
+
.ck-gallery-grid {
|
|
1959
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1960
|
+
}
|
|
1961
|
+
}
|
|
1962
|
+
|
|
1963
|
+
.ck-audio audio {
|
|
1964
|
+
display: block;
|
|
1965
|
+
width: 100%;
|
|
1966
|
+
max-width: 100%;
|
|
1967
|
+
margin: 12px 0;
|
|
1968
|
+
}
|
|
1969
|
+
.ck-audio p {
|
|
1970
|
+
margin: 6px 0;
|
|
1971
|
+
color: var(--ck-muted);
|
|
1972
|
+
}
|
|
1973
|
+
.ck-audio a {
|
|
1974
|
+
display: inline-flex;
|
|
1975
|
+
align-items: center;
|
|
1976
|
+
min-height: 44px;
|
|
1977
|
+
overflow-wrap: anywhere;
|
|
1978
|
+
}
|
|
1979
|
+
|
|
1980
|
+
/* Embedded page threads keep the return-to-latest action in the viewport. */
|
|
1981
|
+
.ck-jump-page {
|
|
1982
|
+
position: fixed;
|
|
1983
|
+
right: 1rem;
|
|
1984
|
+
bottom: 1rem;
|
|
1985
|
+
z-index: 10;
|
|
1986
|
+
}
|