@echothink-ui/inbox 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.
Files changed (52) hide show
  1. package/README.md +5 -0
  2. package/dist/components/AgentDraftReviewPanel.d.ts +18 -0
  3. package/dist/components/ApprovalToSendPanel.d.ts +11 -0
  4. package/dist/components/AttachmentList.d.ts +8 -0
  5. package/dist/components/AttachmentPreview.d.ts +7 -0
  6. package/dist/components/EmailAutomationRulePanel.d.ts +8 -0
  7. package/dist/components/InboxShell.d.ts +10 -0
  8. package/dist/components/LabelManager.d.ts +9 -0
  9. package/dist/components/MailboxFolderList.d.ts +8 -0
  10. package/dist/components/MessageComposer.d.ts +13 -0
  11. package/dist/components/MessageFilterBar.d.ts +13 -0
  12. package/dist/components/MessageList.d.ts +8 -0
  13. package/dist/components/MessagePreview.d.ts +9 -0
  14. package/dist/components/MessageSearch.d.ts +11 -0
  15. package/dist/components/MessageThread.d.ts +22 -0
  16. package/dist/components/PriorityInboxView.d.ts +14 -0
  17. package/dist/components/RecipientPicker.d.ts +10 -0
  18. package/dist/components/ThreadSummaryPanel.d.ts +9 -0
  19. package/dist/index.cjs +1699 -0
  20. package/dist/index.cjs.map +1 -0
  21. package/dist/index.css +2155 -0
  22. package/dist/index.css.map +1 -0
  23. package/dist/index.d.ts +21 -0
  24. package/dist/index.js +1645 -0
  25. package/dist/index.js.map +1 -0
  26. package/dist/types.d.ts +75 -0
  27. package/dist/utils.d.ts +5 -0
  28. package/package.json +44 -0
  29. package/src/components/AgentDraftReviewPanel.tsx +128 -0
  30. package/src/components/ApprovalToSendPanel.tsx +118 -0
  31. package/src/components/AttachmentList.tsx +85 -0
  32. package/src/components/AttachmentPreview.tsx +207 -0
  33. package/src/components/EmailAutomationRulePanel.tsx +100 -0
  34. package/src/components/InboxShell.tsx +62 -0
  35. package/src/components/LabelManager.tsx +147 -0
  36. package/src/components/MailboxFolderList.tsx +66 -0
  37. package/src/components/MessageComposer.tsx +160 -0
  38. package/src/components/MessageFilterBar.test.tsx +34 -0
  39. package/src/components/MessageFilterBar.tsx +69 -0
  40. package/src/components/MessageList.tsx +101 -0
  41. package/src/components/MessagePreview.test.tsx +48 -0
  42. package/src/components/MessagePreview.tsx +84 -0
  43. package/src/components/MessageSearch.tsx +96 -0
  44. package/src/components/MessageThread.tsx +173 -0
  45. package/src/components/PriorityInboxView.tsx +74 -0
  46. package/src/components/RecipientPicker.tsx +181 -0
  47. package/src/components/ThreadSummaryPanel.tsx +107 -0
  48. package/src/index.test.tsx +276 -0
  49. package/src/index.tsx +60 -0
  50. package/src/styles.css +2523 -0
  51. package/src/types.ts +85 -0
  52. package/src/utils.ts +33 -0
package/dist/index.css ADDED
@@ -0,0 +1,2155 @@
1
+ @import "@echothink-ui/core/styles.css";
2
+
3
+ /* src/styles.css */
4
+ .eth-inbox-shell {
5
+ background: var(--eth-color-background);
6
+ container-type: inline-size;
7
+ color: var(--eth-color-text-primary);
8
+ display: grid;
9
+ grid-template-rows: auto minmax(0, 1fr);
10
+ min-block-size: 0;
11
+ }
12
+ .eth-inbox-shell__header {
13
+ align-items: center;
14
+ background: var(--eth-color-layer-01);
15
+ border-bottom: 1px solid var(--eth-color-border-subtle);
16
+ display: flex;
17
+ gap: var(--eth-space-lg);
18
+ justify-content: space-between;
19
+ padding: var(--eth-space-lg);
20
+ }
21
+ .eth-inbox-shell__header h2,
22
+ .eth-inbox-shell__header p {
23
+ margin: 0;
24
+ }
25
+ .eth-inbox-shell__header p {
26
+ color: var(--eth-color-text-secondary);
27
+ margin-block-start: var(--eth-space-xs);
28
+ }
29
+ .eth-inbox-shell__toolbar {
30
+ align-items: center;
31
+ display: flex;
32
+ flex-wrap: wrap;
33
+ gap: var(--eth-space-sm);
34
+ }
35
+ .eth-inbox-shell__layout {
36
+ display: grid;
37
+ grid-template-columns: minmax(8rem, 0.6fr) minmax(16rem, 1fr) minmax(24rem, 2.2fr);
38
+ min-block-size: 0;
39
+ }
40
+ .eth-inbox-shell__layout--has-inspector {
41
+ grid-template-columns: minmax(8rem, 0.55fr) minmax(15rem, 0.95fr) minmax(22rem, 2.1fr) minmax(13rem, 0.8fr);
42
+ }
43
+ .eth-inbox-shell__folders,
44
+ .eth-inbox-shell__list,
45
+ .eth-inbox-shell__thread,
46
+ .eth-inbox-shell__inspector {
47
+ min-block-size: 0;
48
+ min-width: 0;
49
+ overflow: auto;
50
+ }
51
+ .eth-inbox-shell__folders,
52
+ .eth-inbox-shell__list,
53
+ .eth-inbox-shell__thread {
54
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
55
+ }
56
+ .eth-inbox-shell__thread {
57
+ background: var(--eth-color-background);
58
+ }
59
+ .eth-inbox-shell__inspector {
60
+ background: var(--eth-color-layer-01);
61
+ padding: var(--eth-space-lg);
62
+ }
63
+ .eth-inbox-folder-list,
64
+ .eth-inbox-folders {
65
+ background: var(--eth-color-layer-01);
66
+ block-size: 100%;
67
+ color: var(--eth-color-text-primary);
68
+ inline-size: 100%;
69
+ min-inline-size: 0;
70
+ }
71
+ .eth-inbox-folder-list__list,
72
+ .eth-inbox-folders__list {
73
+ display: grid;
74
+ gap: 0;
75
+ list-style: none;
76
+ margin: 0;
77
+ padding: var(--eth-space-sm) 0;
78
+ }
79
+ .eth-inbox-folder-list__item,
80
+ .eth-inbox-folders__item {
81
+ align-items: center;
82
+ background: transparent;
83
+ border: 0;
84
+ border-inline-start: 3px solid transparent;
85
+ color: var(--eth-color-text-primary);
86
+ cursor: pointer;
87
+ display: flex;
88
+ font: inherit;
89
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
90
+ gap: var(--eth-space-sm);
91
+ inline-size: 100%;
92
+ justify-content: flex-start;
93
+ line-height: 1.2857;
94
+ min-block-size: var(--eth-space-3xl);
95
+ min-inline-size: 0;
96
+ padding: var(--eth-space-sm) var(--eth-space-md);
97
+ text-align: start;
98
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
99
+ }
100
+ .eth-inbox-folder-list__item:hover,
101
+ .eth-inbox-folders__item:hover {
102
+ background: var(--eth-color-layer-hover);
103
+ }
104
+ .eth-inbox-folder-list__item--active,
105
+ .eth-inbox-folders__item--active {
106
+ background: var(--eth-color-layer-selected);
107
+ border-inline-start-color: var(--eth-color-interactive-primary);
108
+ font-weight: 600;
109
+ }
110
+ .eth-inbox-folder-list__item--active .eth-inbox-folders__icon,
111
+ .eth-inbox-folders__item--active .eth-inbox-folders__icon {
112
+ color: var(--eth-color-text-primary);
113
+ }
114
+ .eth-inbox-folder-list__item:focus-visible,
115
+ .eth-inbox-folders__item:focus-visible,
116
+ .eth-inbox-message-list__row:focus-visible,
117
+ .eth-inbox-filter-bar__chip:focus-visible,
118
+ .eth-inbox-recipient-picker__suggestions button:focus-visible {
119
+ outline: 2px solid var(--eth-color-focus);
120
+ outline-offset: -2px;
121
+ }
122
+ .eth-inbox-folders__icon {
123
+ align-items: center;
124
+ block-size: 1rem;
125
+ color: var(--eth-color-text-secondary);
126
+ display: inline-flex;
127
+ flex: 0 0 auto;
128
+ inline-size: 1rem;
129
+ justify-content: center;
130
+ }
131
+ .eth-inbox-folders__icon svg {
132
+ block-size: 1rem;
133
+ inline-size: 1rem;
134
+ }
135
+ .eth-inbox-folders__item--smart .eth-inbox-folders__icon {
136
+ color: var(--eth-color-link);
137
+ }
138
+ .eth-inbox-folders__label {
139
+ flex: 1 1 auto;
140
+ min-inline-size: 0;
141
+ overflow: hidden;
142
+ text-overflow: ellipsis;
143
+ white-space: nowrap;
144
+ }
145
+ .eth-inbox-folders__count {
146
+ flex: 0 0 auto;
147
+ margin-inline-start: auto;
148
+ }
149
+ .eth-inbox-message-list {
150
+ background: var(--eth-color-layer-01);
151
+ border: 1px solid var(--eth-color-border-subtle);
152
+ color: var(--eth-color-text-primary);
153
+ container-type: inline-size;
154
+ display: grid;
155
+ gap: 0;
156
+ inline-size: 100%;
157
+ min-inline-size: 0;
158
+ overflow: hidden;
159
+ }
160
+ .eth-inbox-message-list__row {
161
+ background: var(--eth-color-layer-01);
162
+ border: 0;
163
+ border-bottom: 1px solid var(--eth-color-border-subtle);
164
+ color: var(--eth-color-text-primary);
165
+ cursor: pointer;
166
+ display: grid;
167
+ font: inherit;
168
+ grid-template-columns: 0.25rem minmax(0, 1fr);
169
+ inline-size: 100%;
170
+ min-block-size: 5.5rem;
171
+ padding: 0;
172
+ text-align: start;
173
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
174
+ }
175
+ .eth-inbox-message-list__row:last-of-type {
176
+ border-bottom: 0;
177
+ }
178
+ .eth-inbox-message-list__row:hover {
179
+ background: var(--eth-color-layer-hover);
180
+ }
181
+ .eth-inbox-message-list__row[aria-selected=true] {
182
+ background: var(--eth-color-layer-selected);
183
+ }
184
+ .eth-inbox-message-list__row[aria-selected=true]:hover {
185
+ background: var(--eth-color-layer-selected);
186
+ }
187
+ .eth-inbox-message-list__selection {
188
+ background: transparent;
189
+ block-size: 100%;
190
+ grid-column: 1;
191
+ grid-row: 1;
192
+ }
193
+ .eth-inbox-message-list__row[aria-selected=true] .eth-inbox-message-list__selection {
194
+ background: var(--eth-color-interactive-primary);
195
+ }
196
+ .eth-inbox-message-list__content {
197
+ display: grid;
198
+ gap: var(--eth-space-xs);
199
+ grid-column: 2;
200
+ min-inline-size: 0;
201
+ padding: var(--eth-space-md) var(--eth-space-lg);
202
+ }
203
+ .eth-inbox-message-list__header {
204
+ align-items: baseline;
205
+ display: flex;
206
+ gap: var(--eth-space-md);
207
+ justify-content: space-between;
208
+ min-inline-size: 0;
209
+ }
210
+ .eth-inbox-message-list__from-group {
211
+ align-items: center;
212
+ display: inline-flex;
213
+ flex: 1 1 auto;
214
+ gap: var(--eth-space-xs);
215
+ min-inline-size: 0;
216
+ overflow: hidden;
217
+ }
218
+ .eth-inbox-message-list__unread {
219
+ background: transparent;
220
+ border-radius: 50%;
221
+ block-size: 0.5rem;
222
+ flex: 0 0 0.5rem;
223
+ inline-size: 0.5rem;
224
+ }
225
+ .eth-inbox-message-list__row--unread .eth-inbox-message-list__unread {
226
+ background: var(--eth-color-interactive-primary);
227
+ }
228
+ .eth-inbox-message-list__row--unread .eth-inbox-message-list__subject,
229
+ .eth-inbox-message-list__row--unread .eth-inbox-message-list__from {
230
+ font-weight: 600;
231
+ }
232
+ .eth-inbox-message-list__from,
233
+ .eth-inbox-message-list__subject,
234
+ .eth-inbox-message-list__preview {
235
+ min-width: 0;
236
+ overflow: hidden;
237
+ text-overflow: ellipsis;
238
+ white-space: nowrap;
239
+ }
240
+ .eth-inbox-message-list__from {
241
+ flex: 1 1 auto;
242
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
243
+ line-height: 1.2857;
244
+ }
245
+ .eth-inbox-message-list__subject {
246
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
247
+ line-height: 1.2857;
248
+ }
249
+ .eth-inbox-message-list__preview {
250
+ line-height: 1.2857;
251
+ }
252
+ .eth-inbox-message-list__preview,
253
+ .eth-inbox-message-list__date {
254
+ color: var(--eth-color-text-secondary);
255
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
256
+ line-height: 1.2857;
257
+ }
258
+ .eth-inbox-message-list__date {
259
+ flex: 0 0 auto;
260
+ justify-self: end;
261
+ white-space: nowrap;
262
+ }
263
+ .eth-inbox-message-list__meta {
264
+ align-items: center;
265
+ display: flex;
266
+ flex-wrap: wrap;
267
+ gap: var(--eth-space-xs);
268
+ margin-block-start: var(--eth-space-2xs);
269
+ min-inline-size: 0;
270
+ }
271
+ .eth-inbox-message-list__empty {
272
+ align-items: center;
273
+ color: var(--eth-color-text-secondary);
274
+ display: flex;
275
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
276
+ justify-content: center;
277
+ line-height: 1.2857;
278
+ min-block-size: 8rem;
279
+ padding: var(--eth-space-xl);
280
+ text-align: center;
281
+ }
282
+ @container (inline-size <= 30rem) {
283
+ .eth-inbox-message-list__content {
284
+ padding-inline: var(--eth-space-md);
285
+ }
286
+ .eth-inbox-message-list__header {
287
+ align-items: flex-start;
288
+ display: grid;
289
+ gap: var(--eth-space-2xs);
290
+ }
291
+ .eth-inbox-message-list__date {
292
+ justify-self: start;
293
+ }
294
+ }
295
+ .eth-inbox-message-thread,
296
+ .eth-inbox-thread {
297
+ max-inline-size: 56rem;
298
+ }
299
+ .eth-inbox-message-preview {
300
+ background: var(--eth-color-layer-01);
301
+ border: 1px solid var(--eth-color-border-subtle);
302
+ border-radius: 0;
303
+ display: grid;
304
+ gap: var(--eth-space-lg);
305
+ inline-size: min(100%, 52rem);
306
+ max-inline-size: 100%;
307
+ min-inline-size: 0;
308
+ padding: var(--eth-space-lg);
309
+ }
310
+ .eth-inbox-message-preview__header,
311
+ .eth-inbox-thread__header,
312
+ .eth-inbox-attachment-preview__header {
313
+ align-items: flex-start;
314
+ display: flex;
315
+ gap: var(--eth-space-md);
316
+ justify-content: space-between;
317
+ }
318
+ .eth-inbox-message-preview__heading,
319
+ .eth-inbox-thread__heading {
320
+ display: grid;
321
+ min-inline-size: 0;
322
+ }
323
+ .eth-inbox-message-preview__heading {
324
+ gap: var(--eth-space-sm);
325
+ }
326
+ .eth-inbox-thread__heading {
327
+ gap: var(--eth-space-xs);
328
+ }
329
+ .eth-inbox-message-preview__header h3,
330
+ .eth-inbox-thread__header h2 {
331
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
332
+ font-weight: 600;
333
+ line-height: 1.4;
334
+ margin: 0;
335
+ overflow-wrap: anywhere;
336
+ }
337
+ .eth-inbox-message-preview__header time,
338
+ .eth-inbox-attachment-preview__summary span,
339
+ .eth-inbox-thread__updated {
340
+ color: var(--eth-color-text-secondary);
341
+ }
342
+ .eth-inbox-message-preview__header time,
343
+ .eth-inbox-thread__updated {
344
+ flex: 0 0 auto;
345
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
346
+ line-height: 1.2857;
347
+ white-space: nowrap;
348
+ }
349
+ .eth-inbox-message-preview__header time {
350
+ padding-block-start: var(--eth-space-2xs);
351
+ }
352
+ .eth-inbox-message-preview__recipients {
353
+ align-items: center;
354
+ color: var(--eth-color-text-secondary);
355
+ display: flex;
356
+ flex-wrap: wrap;
357
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
358
+ gap: var(--eth-space-xs) var(--eth-space-lg);
359
+ line-height: 1.2857;
360
+ margin: 0;
361
+ min-inline-size: 0;
362
+ }
363
+ .eth-inbox-message-preview__recipients div {
364
+ display: flex;
365
+ gap: var(--eth-space-xs);
366
+ min-inline-size: 0;
367
+ }
368
+ .eth-inbox-message-preview__recipients dt {
369
+ color: var(--eth-color-text-secondary);
370
+ font-weight: 600;
371
+ }
372
+ .eth-inbox-message-preview__recipients dd {
373
+ color: var(--eth-color-text-primary);
374
+ margin: 0;
375
+ min-inline-size: 0;
376
+ overflow-wrap: anywhere;
377
+ }
378
+ .eth-inbox-message-preview__body,
379
+ .eth-inbox-thread {
380
+ line-height: 1.5;
381
+ }
382
+ .eth-inbox-message-preview__body {
383
+ color: var(--eth-color-text-primary);
384
+ font-size: calc(1rem * var(--eth-text-scale, 1));
385
+ line-height: 1.5;
386
+ }
387
+ .eth-inbox-message-preview__body p {
388
+ margin: 0;
389
+ max-inline-size: 72ch;
390
+ overflow-wrap: anywhere;
391
+ white-space: pre-wrap;
392
+ }
393
+ .eth-inbox-message-preview__attachments {
394
+ display: grid;
395
+ gap: var(--eth-space-sm);
396
+ min-inline-size: 0;
397
+ }
398
+ .eth-inbox-message-preview__attachments h4 {
399
+ color: var(--eth-color-text-secondary);
400
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
401
+ font-weight: 600;
402
+ line-height: 1.3333;
403
+ margin: 0;
404
+ text-transform: uppercase;
405
+ }
406
+ .eth-inbox-message-preview__attachments .eth-inbox-attachments {
407
+ inline-size: 100%;
408
+ }
409
+ .eth-inbox-thread {
410
+ background: var(--eth-color-layer-01);
411
+ border: 1px solid var(--eth-color-border-subtle);
412
+ display: grid;
413
+ gap: 0;
414
+ inline-size: min(100%, 56rem);
415
+ margin-inline: auto;
416
+ padding: 0;
417
+ }
418
+ .eth-inbox-thread__header {
419
+ background: var(--eth-color-layer-02);
420
+ border-block-end: 1px solid var(--eth-color-border-subtle);
421
+ padding: var(--eth-space-lg);
422
+ }
423
+ .eth-inbox-thread__eyebrow,
424
+ .eth-inbox-thread__summary-label {
425
+ color: var(--eth-color-text-secondary);
426
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
427
+ font-weight: 600;
428
+ line-height: 1.3333;
429
+ }
430
+ .eth-inbox-thread__meta,
431
+ .eth-inbox-thread__actions {
432
+ align-items: center;
433
+ display: flex;
434
+ flex-wrap: wrap;
435
+ gap: var(--eth-space-sm);
436
+ }
437
+ .eth-inbox-thread__meta {
438
+ list-style: none;
439
+ margin: 0;
440
+ padding: 0;
441
+ }
442
+ .eth-inbox-thread__meta li {
443
+ align-items: center;
444
+ display: inline-flex;
445
+ min-inline-size: 0;
446
+ }
447
+ .eth-inbox-thread__actions {
448
+ justify-content: flex-end;
449
+ margin-inline-start: auto;
450
+ }
451
+ .eth-inbox-thread__summary {
452
+ background: var(--eth-color-layer-01);
453
+ border-block-end: 1px solid var(--eth-color-border-subtle);
454
+ display: grid;
455
+ gap: var(--eth-space-sm);
456
+ padding: var(--eth-space-md) var(--eth-space-lg);
457
+ }
458
+ .eth-inbox-thread__summary-body {
459
+ color: var(--eth-color-text-primary);
460
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
461
+ line-height: 1.2857;
462
+ }
463
+ .eth-inbox-thread__summary-body > :first-child {
464
+ margin-block-start: 0;
465
+ }
466
+ .eth-inbox-thread__summary-body > :last-child {
467
+ margin-block-end: 0;
468
+ }
469
+ .eth-inbox-thread__empty {
470
+ background: var(--eth-color-layer-01);
471
+ color: var(--eth-color-text-secondary);
472
+ display: grid;
473
+ gap: var(--eth-space-xs);
474
+ padding: var(--eth-space-2xl);
475
+ }
476
+ .eth-inbox-thread__empty strong {
477
+ color: var(--eth-color-text-primary);
478
+ }
479
+ .eth-inbox-thread__messages,
480
+ .eth-inbox-thread__older {
481
+ display: grid;
482
+ gap: 0;
483
+ }
484
+ .eth-inbox-thread__older {
485
+ border-block-end: 1px solid var(--eth-color-border-subtle);
486
+ }
487
+ .eth-inbox-thread__older summary {
488
+ align-items: center;
489
+ background: var(--eth-color-layer-01);
490
+ color: var(--eth-color-text-secondary);
491
+ cursor: pointer;
492
+ display: flex;
493
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
494
+ font-weight: 600;
495
+ line-height: 1.2857;
496
+ min-block-size: var(--eth-space-3xl);
497
+ padding: var(--eth-space-sm) var(--eth-space-lg);
498
+ }
499
+ .eth-inbox-thread__older summary:hover {
500
+ background: var(--eth-color-layer-hover);
501
+ color: var(--eth-color-text-primary);
502
+ }
503
+ .eth-inbox-thread__older summary:focus-visible {
504
+ outline: 2px solid var(--eth-color-focus);
505
+ outline-offset: -2px;
506
+ }
507
+ .eth-inbox-thread__messages .eth-inbox-message-preview,
508
+ .eth-inbox-thread__older .eth-inbox-message-preview {
509
+ border: 0;
510
+ border-block-end: 1px solid var(--eth-color-border-subtle);
511
+ inline-size: 100%;
512
+ max-inline-size: none;
513
+ padding: var(--eth-space-lg);
514
+ }
515
+ .eth-inbox-thread__messages .eth-inbox-message-preview:last-child,
516
+ .eth-inbox-thread__older .eth-inbox-message-preview:last-child {
517
+ border-block-end: 0;
518
+ }
519
+ .eth-inbox-message-composer,
520
+ .eth-inbox-composer {
521
+ background: var(--eth-color-layer-01);
522
+ border: 1px solid var(--eth-color-border-subtle);
523
+ border-radius: 0;
524
+ display: grid;
525
+ gap: 0;
526
+ inline-size: min(100%, 58rem);
527
+ margin-inline: auto;
528
+ overflow: hidden;
529
+ padding: 0;
530
+ }
531
+ .eth-inbox-composer__fields,
532
+ .eth-inbox-composer__address-fields {
533
+ display: grid;
534
+ gap: 0;
535
+ }
536
+ .eth-inbox-composer__field.eth-form-field {
537
+ align-items: center;
538
+ border-block-end: 1px solid var(--eth-color-border-subtle);
539
+ column-gap: var(--eth-space-md);
540
+ display: grid;
541
+ grid-template-columns: minmax(4rem, 5rem) minmax(0, 1fr);
542
+ min-inline-size: 0;
543
+ padding: var(--eth-space-sm) var(--eth-space-lg);
544
+ }
545
+ .eth-inbox-composer__field.eth-form-field .cds--label {
546
+ margin: 0;
547
+ }
548
+ .eth-inbox-composer__field .cds--text-input-wrapper,
549
+ .eth-inbox-composer__field .cds--text-area__wrapper,
550
+ .eth-inbox-composer__field .cds--text-input,
551
+ .eth-inbox-composer__field .cds--text-area {
552
+ inline-size: 100%;
553
+ max-inline-size: none;
554
+ min-inline-size: 0;
555
+ }
556
+ .eth-inbox-composer__field--address .cds--text-input,
557
+ .eth-inbox-composer__field--subject .cds--text-input {
558
+ background: transparent;
559
+ border-block-end-color: transparent;
560
+ padding-inline: 0;
561
+ }
562
+ .eth-inbox-composer__field--address .cds--text-input:focus,
563
+ .eth-inbox-composer__field--subject .cds--text-input:focus {
564
+ outline: 2px solid var(--eth-color-focus);
565
+ outline-offset: -2px;
566
+ }
567
+ .eth-inbox-composer__field--body.eth-form-field {
568
+ align-items: stretch;
569
+ gap: var(--eth-space-sm);
570
+ grid-template-columns: minmax(0, 1fr);
571
+ padding-block: var(--eth-space-md);
572
+ }
573
+ .eth-inbox-composer__field--body .cds--text-area {
574
+ min-block-size: 14rem;
575
+ resize: vertical;
576
+ }
577
+ .eth-inbox-composer__attachments {
578
+ border-block-end: 1px solid var(--eth-color-border-subtle);
579
+ display: grid;
580
+ gap: 0;
581
+ }
582
+ .eth-inbox-composer__attachments-header {
583
+ align-items: center;
584
+ background: var(--eth-color-layer-02);
585
+ border-block-end: 1px solid var(--eth-color-border-subtle);
586
+ color: var(--eth-color-text-primary);
587
+ display: flex;
588
+ flex-wrap: wrap;
589
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
590
+ font-weight: 600;
591
+ gap: var(--eth-space-sm);
592
+ justify-content: space-between;
593
+ line-height: 1.2857;
594
+ min-block-size: var(--eth-space-3xl);
595
+ padding: var(--eth-space-sm) var(--eth-space-lg);
596
+ }
597
+ .eth-inbox-composer__attachments .eth-inbox-attachments {
598
+ border: 0;
599
+ }
600
+ .eth-inbox-composer__empty-attachments,
601
+ .eth-inbox-composer__status {
602
+ color: var(--eth-color-text-secondary);
603
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
604
+ line-height: 1.3333;
605
+ margin: 0;
606
+ }
607
+ .eth-inbox-composer__empty-attachments {
608
+ padding: var(--eth-space-md) var(--eth-space-lg);
609
+ }
610
+ .eth-inbox-composer__footer {
611
+ align-items: center;
612
+ background: var(--eth-color-layer-02);
613
+ display: flex;
614
+ flex-wrap: wrap;
615
+ gap: var(--eth-space-md);
616
+ justify-content: space-between;
617
+ min-block-size: 2.5rem;
618
+ padding: var(--eth-space-md) var(--eth-space-lg);
619
+ }
620
+ .eth-inbox-composer__actions,
621
+ .eth-inbox-send-approval__actions,
622
+ .eth-inbox-agent-draft__actions,
623
+ .eth-inbox-attachments__actions {
624
+ align-items: center;
625
+ display: flex;
626
+ flex-wrap: wrap;
627
+ gap: var(--eth-space-sm);
628
+ }
629
+ .eth-inbox-composer__actions {
630
+ margin-inline-start: auto;
631
+ }
632
+ .eth-inbox-message-filter-bar,
633
+ .eth-inbox-filter-bar {
634
+ align-items: center;
635
+ background: var(--eth-color-layer-01);
636
+ border: 1px solid var(--eth-color-border-subtle);
637
+ display: flex;
638
+ flex-wrap: wrap;
639
+ gap: var(--eth-space-xs);
640
+ inline-size: fit-content;
641
+ max-inline-size: 100%;
642
+ min-inline-size: 0;
643
+ padding: var(--eth-space-xs);
644
+ }
645
+ .eth-inbox-filter-bar__chip {
646
+ align-items: center;
647
+ appearance: none;
648
+ background: var(--eth-color-layer-02);
649
+ border: 1px solid var(--eth-color-border-subtle);
650
+ border-radius: 0;
651
+ color: var(--eth-color-text-primary);
652
+ cursor: pointer;
653
+ display: inline-flex;
654
+ font: inherit;
655
+ gap: var(--eth-space-sm);
656
+ min-block-size: var(--eth-space-2xl);
657
+ min-inline-size: 0;
658
+ padding: 0 var(--eth-space-md);
659
+ text-align: start;
660
+ transition:
661
+ background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
662
+ border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
663
+ box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
664
+ }
665
+ .eth-inbox-filter-bar__chip:hover {
666
+ background: var(--eth-color-layer-hover);
667
+ }
668
+ .eth-inbox-filter-bar__chip--active {
669
+ background: var(--eth-color-layer-selected);
670
+ border-color: var(--eth-color-interactive-primary);
671
+ box-shadow: inset 0 -2px 0 var(--eth-color-interactive-primary);
672
+ }
673
+ .eth-inbox-filter-bar__chip--active:hover {
674
+ background: var(--eth-color-layer-selected);
675
+ }
676
+ .eth-inbox-filter-bar__chip:disabled,
677
+ .eth-inbox-filter-bar__chip--disabled {
678
+ color: #8d8d8d;
679
+ cursor: not-allowed;
680
+ }
681
+ .eth-inbox-filter-bar__chip:disabled {
682
+ background: var(--eth-color-layer-01);
683
+ border-color: var(--eth-color-border-subtle);
684
+ box-shadow: none;
685
+ }
686
+ .eth-inbox-filter-bar__kind {
687
+ color: var(--eth-color-text-secondary);
688
+ flex: 0 0 auto;
689
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
690
+ font-weight: 600;
691
+ line-height: 1.3333;
692
+ white-space: nowrap;
693
+ }
694
+ .eth-inbox-filter-bar__chip--active .eth-inbox-filter-bar__kind {
695
+ color: var(--eth-color-link);
696
+ }
697
+ .eth-inbox-filter-bar__chip:disabled .eth-inbox-filter-bar__kind,
698
+ .eth-inbox-filter-bar__chip--disabled .eth-inbox-filter-bar__kind {
699
+ color: inherit;
700
+ }
701
+ .eth-inbox-filter-bar__label {
702
+ flex: 1 1 auto;
703
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
704
+ line-height: 1.2857;
705
+ min-inline-size: 0;
706
+ overflow: hidden;
707
+ text-overflow: ellipsis;
708
+ white-space: nowrap;
709
+ }
710
+ .eth-inbox-filter-bar__chip--active .eth-inbox-filter-bar__label {
711
+ font-weight: 600;
712
+ }
713
+ .eth-inbox-recipient-picker {
714
+ background: var(--eth-color-layer-01);
715
+ border: 1px solid var(--eth-color-border-subtle);
716
+ border-radius: 0;
717
+ display: grid;
718
+ gap: 0;
719
+ inline-size: min(100%, 46rem);
720
+ margin-inline: auto;
721
+ overflow: hidden;
722
+ padding: 0;
723
+ }
724
+ .eth-inbox-recipient-picker__selected {
725
+ align-items: center;
726
+ border-block-end: 1px solid var(--eth-color-border-subtle);
727
+ column-gap: var(--eth-space-md);
728
+ display: grid;
729
+ grid-template-columns: minmax(2.5rem, auto) minmax(0, 1fr);
730
+ min-block-size: 2.5rem;
731
+ min-inline-size: 0;
732
+ padding: var(--eth-space-sm) var(--eth-space-lg);
733
+ }
734
+ .eth-inbox-recipient-picker__label {
735
+ color: var(--eth-color-text-secondary);
736
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
737
+ font-weight: 600;
738
+ line-height: 1.3333;
739
+ }
740
+ .eth-inbox-recipient-picker__chips {
741
+ align-items: center;
742
+ display: flex;
743
+ flex-wrap: wrap;
744
+ gap: var(--eth-space-xs);
745
+ min-inline-size: 0;
746
+ }
747
+ .eth-inbox-recipient-picker__placeholder {
748
+ color: var(--eth-color-text-secondary);
749
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
750
+ line-height: 1.2857;
751
+ }
752
+ .eth-inbox-recipient-picker__search {
753
+ border-block-end: 1px solid var(--eth-color-border-subtle);
754
+ }
755
+ .eth-inbox-recipient-picker__manual {
756
+ align-items: end;
757
+ background: var(--eth-color-layer-02);
758
+ border-block-end: 1px solid var(--eth-color-border-subtle);
759
+ display: grid;
760
+ gap: var(--eth-space-sm);
761
+ grid-template-columns: minmax(12rem, 1fr) auto;
762
+ min-inline-size: 0;
763
+ padding: var(--eth-space-md) var(--eth-space-lg);
764
+ }
765
+ .eth-inbox-recipient-picker__manual-input,
766
+ .eth-inbox-recipient-picker__manual-input .cds--text-input-wrapper,
767
+ .eth-inbox-recipient-picker__manual-input .cds--text-input {
768
+ inline-size: 100%;
769
+ max-inline-size: none;
770
+ min-inline-size: 0;
771
+ }
772
+ .eth-inbox-recipient-picker__suggestions {
773
+ background: var(--eth-color-layer-01);
774
+ border: 0;
775
+ border-radius: 0;
776
+ display: grid;
777
+ gap: 0;
778
+ min-inline-size: 0;
779
+ }
780
+ .eth-inbox-recipient-picker__suggestions-header {
781
+ align-items: center;
782
+ background: var(--eth-color-layer-02);
783
+ border-block-end: 1px solid var(--eth-color-border-subtle);
784
+ color: var(--eth-color-text-secondary);
785
+ display: flex;
786
+ flex-wrap: wrap;
787
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
788
+ gap: var(--eth-space-sm);
789
+ justify-content: space-between;
790
+ line-height: 1.3333;
791
+ min-block-size: var(--eth-space-2xl);
792
+ padding: var(--eth-space-sm) var(--eth-space-lg);
793
+ }
794
+ .eth-inbox-recipient-picker__suggestions-header strong {
795
+ color: var(--eth-color-text-primary);
796
+ font-weight: 600;
797
+ }
798
+ .eth-inbox-recipient-picker__suggestions-list {
799
+ list-style: none;
800
+ margin: 0;
801
+ max-block-size: 14rem;
802
+ overflow: auto;
803
+ padding: 0;
804
+ }
805
+ .eth-inbox-recipient-picker__suggestions-list li {
806
+ margin: 0;
807
+ }
808
+ .eth-inbox-recipient-picker__suggestions button {
809
+ background: transparent;
810
+ border: 0;
811
+ border-block-end: 1px solid var(--eth-color-border-subtle);
812
+ color: var(--eth-color-text-primary);
813
+ cursor: pointer;
814
+ display: grid;
815
+ gap: var(--eth-space-md);
816
+ grid-template-columns: minmax(0, 1fr) auto;
817
+ inline-size: 100%;
818
+ min-block-size: 2.5rem;
819
+ padding: var(--eth-space-sm) var(--eth-space-lg);
820
+ text-align: start;
821
+ }
822
+ .eth-inbox-recipient-picker__suggestions li:last-child button {
823
+ border-block-end: 0;
824
+ }
825
+ .eth-inbox-recipient-picker__suggestions button:hover {
826
+ background: var(--eth-color-layer-hover);
827
+ }
828
+ .eth-inbox-recipient-picker__suggestions button[aria-selected=true] {
829
+ background: var(--eth-color-layer-selected);
830
+ box-shadow: inset 3px 0 0 var(--eth-color-interactive-primary);
831
+ }
832
+ .eth-inbox-recipient-picker__suggestions button[aria-disabled=true] {
833
+ cursor: default;
834
+ }
835
+ .eth-inbox-recipient-picker__suggestion-copy {
836
+ display: grid;
837
+ gap: var(--eth-space-2xs);
838
+ min-inline-size: 0;
839
+ }
840
+ .eth-inbox-recipient-picker__suggestion-copy strong {
841
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
842
+ font-weight: 600;
843
+ line-height: 1.2857;
844
+ min-inline-size: 0;
845
+ overflow: hidden;
846
+ text-overflow: ellipsis;
847
+ white-space: nowrap;
848
+ }
849
+ .eth-inbox-recipient-picker__suggestion-copy span,
850
+ .eth-inbox-recipient-picker__suggestion-status,
851
+ .eth-inbox-recipient-picker__empty,
852
+ .eth-inbox-attachments__meta {
853
+ color: var(--eth-color-text-secondary);
854
+ }
855
+ .eth-inbox-recipient-picker__suggestion-status {
856
+ align-self: center;
857
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
858
+ font-weight: 600;
859
+ line-height: 1.3333;
860
+ }
861
+ .eth-inbox-recipient-picker__empty {
862
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
863
+ line-height: 1.2857;
864
+ margin: 0;
865
+ padding: var(--eth-space-md) var(--eth-space-lg);
866
+ }
867
+ .eth-inbox-attachment-list,
868
+ .eth-inbox-attachments {
869
+ background: var(--eth-color-layer-01);
870
+ border: 1px solid var(--eth-color-border-subtle);
871
+ display: grid;
872
+ gap: 0;
873
+ }
874
+ .eth-inbox-attachments__tile {
875
+ align-items: center;
876
+ background: var(--eth-color-layer-01);
877
+ border-block-end: 1px solid var(--eth-color-border-subtle);
878
+ border-radius: 0;
879
+ display: grid;
880
+ gap: var(--eth-space-md);
881
+ grid-template-columns: auto minmax(0, 1fr) auto;
882
+ min-block-size: 4rem;
883
+ padding: var(--eth-space-md);
884
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
885
+ }
886
+ .eth-inbox-attachments__tile:last-child {
887
+ border-block-end: 0;
888
+ }
889
+ .eth-inbox-attachments__tile:hover {
890
+ background: var(--eth-color-layer-hover);
891
+ }
892
+ .eth-inbox-attachments__icon {
893
+ align-items: center;
894
+ background: var(--eth-color-layer-02);
895
+ border: 1px solid var(--eth-color-border-subtle);
896
+ color: var(--eth-color-text-secondary);
897
+ display: inline-flex;
898
+ justify-content: center;
899
+ block-size: 2.5rem;
900
+ inline-size: 2.5rem;
901
+ }
902
+ .eth-inbox-attachments__content {
903
+ display: grid;
904
+ gap: var(--eth-space-2xs);
905
+ min-width: 0;
906
+ }
907
+ .eth-inbox-attachments__content strong {
908
+ color: var(--eth-color-text-primary);
909
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
910
+ font-weight: 600;
911
+ line-height: 1.2857;
912
+ min-width: 0;
913
+ overflow: hidden;
914
+ text-overflow: ellipsis;
915
+ white-space: nowrap;
916
+ }
917
+ .eth-inbox-attachments__meta {
918
+ align-items: center;
919
+ display: flex;
920
+ flex-wrap: wrap;
921
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
922
+ gap: var(--eth-space-sm);
923
+ line-height: 1.3333;
924
+ min-width: 0;
925
+ }
926
+ .eth-inbox-attachments__type {
927
+ border: 1px solid var(--eth-color-border-subtle);
928
+ color: var(--eth-color-text-primary);
929
+ font-weight: 600;
930
+ line-height: 1rem;
931
+ padding-inline: var(--eth-space-xs);
932
+ }
933
+ .eth-inbox-attachments__actions {
934
+ gap: var(--eth-space-2xs);
935
+ justify-content: flex-end;
936
+ }
937
+ .eth-inbox-attachment-preview {
938
+ background: var(--eth-color-layer-01);
939
+ border: 1px solid var(--eth-color-border-subtle);
940
+ border-radius: 0;
941
+ display: grid;
942
+ gap: 0;
943
+ inline-size: 100%;
944
+ margin-inline: auto;
945
+ max-inline-size: 56rem;
946
+ min-width: 0;
947
+ overflow: hidden;
948
+ }
949
+ .eth-inbox-attachment-preview__header {
950
+ align-items: center;
951
+ background: var(--eth-color-layer-02);
952
+ border-block-end: 1px solid var(--eth-color-border-subtle);
953
+ flex-wrap: wrap;
954
+ padding: var(--eth-space-md);
955
+ }
956
+ .eth-inbox-attachment-preview__file {
957
+ align-items: center;
958
+ display: grid;
959
+ flex: 1 1 16rem;
960
+ gap: var(--eth-space-sm);
961
+ grid-template-columns: auto minmax(0, 1fr);
962
+ min-width: 0;
963
+ }
964
+ .eth-inbox-attachment-preview__glyph {
965
+ align-items: end;
966
+ background: var(--eth-color-layer-01);
967
+ block-size: 2.75rem;
968
+ border: 1px solid var(--eth-color-border-subtle);
969
+ border-block-end: 3px solid var(--eth-color-text-secondary);
970
+ color: var(--eth-color-text-secondary);
971
+ display: inline-flex;
972
+ font-size: calc(0.625rem * var(--eth-text-scale, 1));
973
+ font-weight: 600;
974
+ inline-size: 2.25rem;
975
+ justify-content: center;
976
+ line-height: 1;
977
+ padding: 0 0 var(--eth-space-xs);
978
+ position: relative;
979
+ }
980
+ .eth-inbox-attachment-preview__glyph::after {
981
+ border-block-start: 0.625rem solid var(--eth-color-layer-02);
982
+ border-inline-start: 0.625rem solid var(--eth-color-border-subtle);
983
+ content: "";
984
+ inset-block-start: -1px;
985
+ inset-inline-end: -1px;
986
+ position: absolute;
987
+ }
988
+ .eth-inbox-attachment-preview__glyph[data-kind=pdf] {
989
+ border-block-end-color: var(--eth-color-danger);
990
+ color: var(--eth-color-danger);
991
+ }
992
+ .eth-inbox-attachment-preview__glyph[data-kind=image],
993
+ .eth-inbox-attachment-preview__glyph[data-kind=text] {
994
+ border-block-end-color: var(--eth-color-info);
995
+ color: var(--eth-color-info);
996
+ }
997
+ .eth-inbox-attachment-preview__glyph[data-kind=spreadsheet] {
998
+ border-block-end-color: var(--eth-color-success);
999
+ color: var(--eth-color-success);
1000
+ }
1001
+ .eth-inbox-attachment-preview__summary {
1002
+ display: grid;
1003
+ gap: var(--eth-space-2xs);
1004
+ min-width: 0;
1005
+ }
1006
+ .eth-inbox-attachment-preview__summary strong {
1007
+ line-height: 1.375;
1008
+ min-width: 0;
1009
+ overflow: hidden;
1010
+ text-overflow: ellipsis;
1011
+ white-space: nowrap;
1012
+ }
1013
+ .eth-inbox-attachment-preview__summary span {
1014
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1015
+ line-height: 1.2857;
1016
+ overflow-wrap: anywhere;
1017
+ }
1018
+ .eth-inbox-attachment-preview__state {
1019
+ background: var(--eth-color-layer-01);
1020
+ border: 1px solid var(--eth-color-border-subtle);
1021
+ color: var(--eth-color-text-secondary);
1022
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1023
+ font-weight: 600;
1024
+ line-height: 1.333;
1025
+ padding: var(--eth-space-xs) var(--eth-space-sm);
1026
+ white-space: nowrap;
1027
+ }
1028
+ .eth-inbox-attachment-preview__body {
1029
+ background: var(--eth-color-background);
1030
+ color: var(--eth-color-text-primary);
1031
+ display: grid;
1032
+ min-block-size: 18rem;
1033
+ overflow: auto;
1034
+ padding: var(--eth-space-lg);
1035
+ place-items: center;
1036
+ }
1037
+ .eth-inbox-attachment-preview__body--archive,
1038
+ .eth-inbox-attachment-preview__body--empty,
1039
+ .eth-inbox-attachment-preview__body--file {
1040
+ min-block-size: 9rem;
1041
+ }
1042
+ .eth-inbox-attachment-preview__image {
1043
+ block-size: auto;
1044
+ max-block-size: 28rem;
1045
+ max-inline-size: 100%;
1046
+ object-fit: contain;
1047
+ }
1048
+ .eth-inbox-attachment-preview__image-frame {
1049
+ aspect-ratio: 16 / 9;
1050
+ background:
1051
+ linear-gradient(
1052
+ 135deg,
1053
+ rgba(15, 98, 254, 0.08),
1054
+ transparent 52%),
1055
+ linear-gradient(
1056
+ 0deg,
1057
+ var(--eth-color-layer-02),
1058
+ var(--eth-color-layer-02));
1059
+ border: 1px solid var(--eth-color-border-subtle);
1060
+ inline-size: min(100%, 34rem);
1061
+ overflow: hidden;
1062
+ position: relative;
1063
+ }
1064
+ .eth-inbox-attachment-preview__image-frame span:first-child {
1065
+ background: var(--eth-color-layer-01);
1066
+ block-size: 52%;
1067
+ border: 1px solid var(--eth-color-border-subtle);
1068
+ inline-size: 42%;
1069
+ inset-block-start: 18%;
1070
+ inset-inline-start: 12%;
1071
+ position: absolute;
1072
+ }
1073
+ .eth-inbox-attachment-preview__image-frame span:last-child {
1074
+ background: var(--eth-color-border-subtle);
1075
+ block-size: 38%;
1076
+ clip-path: polygon(0 100%, 42% 35%, 64% 62%, 82% 28%, 100% 100%);
1077
+ inline-size: 76%;
1078
+ inset-block-end: 12%;
1079
+ inset-inline-start: 12%;
1080
+ position: absolute;
1081
+ }
1082
+ .eth-inbox-attachment-preview__document {
1083
+ background: var(--eth-color-layer-01);
1084
+ border: 1px solid var(--eth-color-border-subtle);
1085
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
1086
+ display: grid;
1087
+ grid-template-rows: auto minmax(0, 1fr);
1088
+ inline-size: min(100%, 40rem);
1089
+ min-block-size: 15rem;
1090
+ }
1091
+ .eth-inbox-attachment-preview__document-bar {
1092
+ align-items: center;
1093
+ background: var(--eth-color-layer-02);
1094
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1095
+ color: var(--eth-color-text-secondary);
1096
+ display: flex;
1097
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1098
+ justify-content: space-between;
1099
+ line-height: 1.333;
1100
+ padding: var(--eth-space-sm) var(--eth-space-md);
1101
+ }
1102
+ .eth-inbox-attachment-preview__page {
1103
+ align-content: start;
1104
+ background: #ffffff;
1105
+ border: 1px solid #e0e0e0;
1106
+ color: #161616;
1107
+ display: grid;
1108
+ gap: var(--eth-space-sm);
1109
+ inline-size: min(100%, 26rem);
1110
+ margin: var(--eth-space-lg) auto;
1111
+ min-block-size: 12rem;
1112
+ padding: var(--eth-space-lg);
1113
+ }
1114
+ .eth-inbox-attachment-preview__page strong {
1115
+ font-size: calc(1rem * var(--eth-text-scale, 1));
1116
+ line-height: 1.375;
1117
+ min-width: 0;
1118
+ overflow: hidden;
1119
+ text-overflow: ellipsis;
1120
+ white-space: nowrap;
1121
+ }
1122
+ .eth-inbox-attachment-preview__page span,
1123
+ .eth-inbox-attachment-preview__text span {
1124
+ background: var(--eth-color-border-subtle);
1125
+ block-size: 0.625rem;
1126
+ display: block;
1127
+ }
1128
+ .eth-inbox-attachment-preview__page span:nth-child(2) {
1129
+ inline-size: 92%;
1130
+ }
1131
+ .eth-inbox-attachment-preview__page span:nth-child(3) {
1132
+ inline-size: 76%;
1133
+ }
1134
+ .eth-inbox-attachment-preview__page span:nth-child(4) {
1135
+ inline-size: 88%;
1136
+ }
1137
+ .eth-inbox-attachment-preview__page span:nth-child(5) {
1138
+ inline-size: 64%;
1139
+ }
1140
+ .eth-inbox-attachment-preview__page span:nth-child(6) {
1141
+ inline-size: 82%;
1142
+ }
1143
+ .eth-inbox-attachment-preview__text {
1144
+ background: var(--eth-color-layer-01);
1145
+ border: 1px solid var(--eth-color-border-subtle);
1146
+ display: grid;
1147
+ gap: var(--eth-space-sm);
1148
+ inline-size: min(100%, 36rem);
1149
+ padding: var(--eth-space-lg);
1150
+ }
1151
+ .eth-inbox-attachment-preview__text span:nth-child(1),
1152
+ .eth-inbox-attachment-preview__text span:nth-child(5) {
1153
+ inline-size: 88%;
1154
+ }
1155
+ .eth-inbox-attachment-preview__text span:nth-child(2),
1156
+ .eth-inbox-attachment-preview__text span:nth-child(7) {
1157
+ inline-size: 72%;
1158
+ }
1159
+ .eth-inbox-attachment-preview__text span:nth-child(3),
1160
+ .eth-inbox-attachment-preview__text span:nth-child(6) {
1161
+ inline-size: 95%;
1162
+ }
1163
+ .eth-inbox-attachment-preview__text span:nth-child(4),
1164
+ .eth-inbox-attachment-preview__text span:nth-child(8),
1165
+ .eth-inbox-attachment-preview__text span:nth-child(9) {
1166
+ inline-size: 58%;
1167
+ }
1168
+ .eth-inbox-attachment-preview__sheet {
1169
+ background: var(--eth-color-layer-01);
1170
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1171
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1172
+ display: grid;
1173
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1174
+ inline-size: min(100%, 38rem);
1175
+ }
1176
+ .eth-inbox-attachment-preview__sheet span {
1177
+ background: var(--eth-color-layer-01);
1178
+ block-size: 2rem;
1179
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1180
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
1181
+ }
1182
+ .eth-inbox-attachment-preview__sheet span:nth-child(-n+5) {
1183
+ background: var(--eth-color-layer-02);
1184
+ }
1185
+ .eth-inbox-attachment-preview__sheet span:nth-child(7),
1186
+ .eth-inbox-attachment-preview__sheet span:nth-child(13),
1187
+ .eth-inbox-attachment-preview__sheet span:nth-child(19) {
1188
+ background: rgba(36, 161, 72, 0.1);
1189
+ }
1190
+ .eth-inbox-attachment-preview__empty {
1191
+ color: var(--eth-color-text-secondary);
1192
+ display: grid;
1193
+ gap: var(--eth-space-xs);
1194
+ max-inline-size: 28rem;
1195
+ text-align: center;
1196
+ }
1197
+ .eth-inbox-attachment-preview__empty strong {
1198
+ color: var(--eth-color-text-primary);
1199
+ }
1200
+ .eth-inbox-label-manager__list,
1201
+ .eth-inbox-rules__list,
1202
+ .eth-inbox-priority {
1203
+ display: grid;
1204
+ gap: var(--eth-space-sm);
1205
+ }
1206
+ .eth-inbox-label-manager {
1207
+ background: var(--eth-color-layer-01);
1208
+ border: 1px solid var(--eth-color-border-subtle);
1209
+ border-radius: 0;
1210
+ gap: 0;
1211
+ inline-size: 100%;
1212
+ max-inline-size: 64rem;
1213
+ }
1214
+ .eth-inbox-label-manager > .eth-panel__header {
1215
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1216
+ padding: var(--eth-space-lg);
1217
+ }
1218
+ .eth-inbox-label-manager > .eth-panel__header h3 {
1219
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
1220
+ line-height: 1.4;
1221
+ }
1222
+ .eth-inbox-label-manager > .eth-panel__body {
1223
+ display: grid;
1224
+ gap: var(--eth-space-lg);
1225
+ min-width: 0;
1226
+ padding: var(--eth-space-lg);
1227
+ }
1228
+ .eth-inbox-label-manager__list {
1229
+ border: 1px solid var(--eth-color-border-subtle);
1230
+ gap: 0;
1231
+ min-width: 0;
1232
+ }
1233
+ .eth-inbox-label-manager__table-head,
1234
+ .eth-inbox-label-manager__row {
1235
+ display: grid;
1236
+ gap: var(--eth-space-md);
1237
+ grid-template-columns: minmax(14rem, 1fr) minmax(7rem, 9rem) minmax(12rem, max-content);
1238
+ min-width: 0;
1239
+ }
1240
+ .eth-inbox-label-manager__table-head {
1241
+ background: var(--eth-color-layer-02);
1242
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1243
+ color: var(--eth-color-text-secondary);
1244
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1245
+ font-weight: 600;
1246
+ line-height: 1.333;
1247
+ padding: var(--eth-space-sm) var(--eth-space-md);
1248
+ }
1249
+ .eth-inbox-label-manager__table-head span:last-child {
1250
+ justify-self: end;
1251
+ }
1252
+ .eth-inbox-label-manager__row {
1253
+ align-items: center;
1254
+ background: var(--eth-color-layer-01);
1255
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1256
+ min-block-size: 4rem;
1257
+ padding: var(--eth-space-sm) var(--eth-space-md);
1258
+ }
1259
+ .eth-inbox-label-manager__row:last-child {
1260
+ border-block-end: 0;
1261
+ }
1262
+ .eth-inbox-label-manager__row:hover {
1263
+ background: var(--eth-color-layer-hover);
1264
+ }
1265
+ .eth-inbox-label-manager__name-cell,
1266
+ .eth-inbox-label-manager__count-cell {
1267
+ min-width: 0;
1268
+ }
1269
+ .eth-inbox-label-manager__name-cell .cds--form-item {
1270
+ margin: 0;
1271
+ }
1272
+ .eth-inbox-label-manager__count-cell {
1273
+ align-items: baseline;
1274
+ color: var(--eth-color-text-secondary);
1275
+ display: flex;
1276
+ gap: var(--eth-space-xs);
1277
+ white-space: nowrap;
1278
+ }
1279
+ .eth-inbox-label-manager__count-cell strong {
1280
+ color: var(--eth-color-text-primary);
1281
+ font-size: calc(1rem * var(--eth-text-scale, 1));
1282
+ font-weight: 600;
1283
+ line-height: 1.375;
1284
+ }
1285
+ .eth-inbox-label-manager__count-cell span,
1286
+ .eth-inbox-label-manager__count-muted {
1287
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1288
+ line-height: 1.333;
1289
+ }
1290
+ .eth-inbox-label-manager__actions {
1291
+ align-items: center;
1292
+ display: flex;
1293
+ flex-wrap: wrap;
1294
+ gap: var(--eth-space-sm);
1295
+ justify-content: flex-end;
1296
+ min-width: 0;
1297
+ }
1298
+ .eth-inbox-label-manager__empty {
1299
+ background: var(--eth-color-layer-02);
1300
+ border: 1px dashed var(--eth-color-border-subtle);
1301
+ color: var(--eth-color-text-secondary);
1302
+ margin: 0;
1303
+ padding: var(--eth-space-lg);
1304
+ }
1305
+ .eth-inbox-label-manager__create {
1306
+ align-items: end;
1307
+ background: var(--eth-color-layer-02);
1308
+ border: 1px solid var(--eth-color-border-subtle);
1309
+ display: grid;
1310
+ gap: var(--eth-space-md);
1311
+ grid-template-columns: minmax(14rem, 24rem) auto;
1312
+ justify-content: start;
1313
+ padding: var(--eth-space-md);
1314
+ }
1315
+ .eth-inbox-label-manager__create .eth-form-field {
1316
+ margin: 0;
1317
+ }
1318
+ .eth-inbox-priority-view,
1319
+ .eth-inbox-priority {
1320
+ container-type: inline-size;
1321
+ display: grid;
1322
+ gap: var(--eth-space-lg);
1323
+ inline-size: min(100%, 72rem);
1324
+ min-inline-size: 0;
1325
+ }
1326
+ .eth-inbox-priority__group {
1327
+ background: var(--eth-color-layer-01);
1328
+ border: 1px solid var(--eth-color-border-subtle);
1329
+ border-radius: 0;
1330
+ min-inline-size: 0;
1331
+ overflow: hidden;
1332
+ }
1333
+ .eth-inbox-priority__group-header {
1334
+ align-items: center;
1335
+ background: var(--eth-color-layer-02);
1336
+ border-bottom: 1px solid var(--eth-color-border-subtle);
1337
+ display: grid;
1338
+ gap: var(--eth-space-md);
1339
+ grid-template-columns: minmax(0, 1fr) max-content;
1340
+ min-block-size: var(--eth-space-3xl);
1341
+ padding: var(--eth-space-md) var(--eth-space-lg);
1342
+ }
1343
+ .eth-inbox-priority__heading {
1344
+ display: grid;
1345
+ gap: var(--eth-space-2xs);
1346
+ min-inline-size: 0;
1347
+ }
1348
+ .eth-inbox-priority__group h3 {
1349
+ color: var(--eth-color-text-primary);
1350
+ font-size: calc(1rem * var(--eth-text-scale, 1));
1351
+ font-weight: 600;
1352
+ line-height: 1.375;
1353
+ margin: 0;
1354
+ min-inline-size: 0;
1355
+ overflow-wrap: anywhere;
1356
+ }
1357
+ .eth-inbox-priority__description {
1358
+ color: var(--eth-color-text-secondary);
1359
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1360
+ line-height: 1.333;
1361
+ margin: 0;
1362
+ }
1363
+ .eth-inbox-priority__count {
1364
+ align-items: center;
1365
+ background: var(--eth-color-layer-01);
1366
+ border: 1px solid var(--eth-color-border-subtle);
1367
+ color: var(--eth-color-text-secondary);
1368
+ display: inline-flex;
1369
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1370
+ font-variant-numeric: tabular-nums;
1371
+ font-weight: 600;
1372
+ justify-content: center;
1373
+ line-height: 1.333;
1374
+ min-block-size: 1.5rem;
1375
+ padding: 0 var(--eth-space-sm);
1376
+ white-space: nowrap;
1377
+ }
1378
+ .eth-inbox-priority__group .eth-inbox-message-list {
1379
+ border: 0;
1380
+ }
1381
+ .eth-inbox-priority__group .eth-inbox-message-list__row {
1382
+ min-block-size: 5rem;
1383
+ }
1384
+ .eth-inbox-priority__empty {
1385
+ align-items: center;
1386
+ background: var(--eth-color-layer-02);
1387
+ border: 1px dashed var(--eth-color-border-subtle);
1388
+ color: var(--eth-color-text-secondary);
1389
+ display: flex;
1390
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1391
+ justify-content: center;
1392
+ line-height: 1.2857;
1393
+ min-block-size: 7rem;
1394
+ padding: var(--eth-space-xl);
1395
+ text-align: center;
1396
+ }
1397
+ @container (inline-size <= 34rem) {
1398
+ .eth-inbox-priority__group-header {
1399
+ align-items: start;
1400
+ grid-template-columns: minmax(0, 1fr);
1401
+ }
1402
+ .eth-inbox-priority__count {
1403
+ justify-self: start;
1404
+ }
1405
+ }
1406
+ .eth-inbox-email-automation,
1407
+ .eth-inbox-rules {
1408
+ display: grid;
1409
+ gap: var(--eth-space-md);
1410
+ }
1411
+ .eth-inbox-rules {
1412
+ background: var(--eth-color-layer-01);
1413
+ border: 1px solid var(--eth-color-border-subtle);
1414
+ gap: 0;
1415
+ max-inline-size: 64rem;
1416
+ padding: 0;
1417
+ }
1418
+ .eth-inbox-rules > .eth-panel__header {
1419
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1420
+ padding: var(--eth-space-lg);
1421
+ }
1422
+ .eth-inbox-rules > .eth-panel__header h3 {
1423
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
1424
+ line-height: 1.4;
1425
+ }
1426
+ .eth-inbox-rules > .eth-panel__body {
1427
+ display: grid;
1428
+ gap: var(--eth-space-md);
1429
+ padding: var(--eth-space-lg);
1430
+ }
1431
+ .eth-inbox-rules__list {
1432
+ border: 1px solid var(--eth-color-border-subtle);
1433
+ gap: 0;
1434
+ }
1435
+ .eth-inbox-rules__item {
1436
+ --eth-inbox-rule-accent: var(--eth-color-border-strong);
1437
+ align-items: start;
1438
+ background: var(--eth-color-layer-01);
1439
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1440
+ border-inline-start: 3px solid var(--eth-inbox-rule-accent);
1441
+ border-radius: 0;
1442
+ display: grid;
1443
+ gap: var(--eth-space-lg);
1444
+ grid-template-columns: minmax(0, 1fr) auto;
1445
+ padding: var(--eth-space-lg);
1446
+ }
1447
+ .eth-inbox-rules__item:last-child {
1448
+ border-block-end: 0;
1449
+ }
1450
+ .eth-inbox-rules__item--enabled {
1451
+ --eth-inbox-rule-accent: var(--eth-color-interactive-primary);
1452
+ }
1453
+ .eth-inbox-rules__item--paused {
1454
+ --eth-inbox-rule-accent: var(--eth-color-border-strong);
1455
+ background: var(--eth-color-layer-02);
1456
+ }
1457
+ .eth-inbox-rules__content,
1458
+ .eth-inbox-rules__definition > div {
1459
+ display: grid;
1460
+ gap: var(--eth-space-sm);
1461
+ min-width: 0;
1462
+ }
1463
+ .eth-inbox-rules__item-header,
1464
+ .eth-inbox-rules__controls {
1465
+ align-items: center;
1466
+ display: flex;
1467
+ flex-wrap: wrap;
1468
+ gap: var(--eth-space-sm);
1469
+ }
1470
+ .eth-inbox-rules__item-header h4 {
1471
+ font-size: calc(1rem * var(--eth-text-scale, 1));
1472
+ font-weight: 600;
1473
+ line-height: 1.375;
1474
+ margin: 0;
1475
+ }
1476
+ .eth-inbox-rules__definition {
1477
+ background: var(--eth-color-layer-01);
1478
+ border: 1px solid var(--eth-color-border-subtle);
1479
+ display: grid;
1480
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1481
+ margin: 0;
1482
+ min-width: 0;
1483
+ }
1484
+ .eth-inbox-rules__definition > div {
1485
+ padding: var(--eth-space-md);
1486
+ }
1487
+ .eth-inbox-rules__definition > div:not(:last-child) {
1488
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
1489
+ }
1490
+ .eth-inbox-rules__definition dt {
1491
+ color: var(--eth-color-text-secondary);
1492
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1493
+ font-weight: 600;
1494
+ line-height: 1.333;
1495
+ }
1496
+ .eth-inbox-rules__definition dd {
1497
+ line-height: 1.4286;
1498
+ margin: 0;
1499
+ min-width: 0;
1500
+ overflow-wrap: anywhere;
1501
+ }
1502
+ .eth-inbox-rules__definition code {
1503
+ background: var(--eth-color-layer-02);
1504
+ border: 1px solid var(--eth-color-border-subtle);
1505
+ color: var(--eth-color-text-primary);
1506
+ font-family: var(--eth-font-mono);
1507
+ font-size: 0.875em;
1508
+ padding: 0 var(--eth-space-xs);
1509
+ }
1510
+ .eth-inbox-rules__controls {
1511
+ justify-content: flex-end;
1512
+ min-inline-size: 13rem;
1513
+ }
1514
+ .eth-inbox-rules__toggle {
1515
+ flex: 0 0 auto;
1516
+ }
1517
+ .eth-inbox-rules__empty {
1518
+ background: var(--eth-color-layer-02);
1519
+ border: 1px dashed var(--eth-color-border-subtle);
1520
+ color: var(--eth-color-text-secondary);
1521
+ margin: 0;
1522
+ padding: var(--eth-space-lg);
1523
+ }
1524
+ .eth-inbox-message-search,
1525
+ .eth-inbox-search {
1526
+ align-items: stretch;
1527
+ background: var(--eth-color-layer-01);
1528
+ border: 1px solid var(--eth-color-border-subtle);
1529
+ border-radius: 0;
1530
+ display: grid;
1531
+ grid-template-columns: minmax(12rem, 1fr) auto;
1532
+ inline-size: min(100%, 48rem);
1533
+ min-inline-size: 0;
1534
+ overflow: hidden;
1535
+ }
1536
+ .eth-inbox-search__input {
1537
+ min-inline-size: 0;
1538
+ }
1539
+ .eth-inbox-search__control,
1540
+ .eth-inbox-search__input .cds--search,
1541
+ .eth-inbox-search__input .cds--search-input {
1542
+ inline-size: 100%;
1543
+ min-inline-size: 0;
1544
+ }
1545
+ .eth-inbox-search__input .cds--search-input {
1546
+ background: var(--eth-color-layer-01);
1547
+ border-block-end: 0;
1548
+ }
1549
+ .eth-inbox-search__input:focus-within {
1550
+ outline: 2px solid var(--eth-color-focus);
1551
+ outline-offset: -2px;
1552
+ }
1553
+ .eth-inbox-search__input input:focus {
1554
+ outline: 0;
1555
+ }
1556
+ .eth-inbox-search__results {
1557
+ align-items: center;
1558
+ background: var(--eth-color-layer-02);
1559
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1560
+ display: flex;
1561
+ min-inline-size: max-content;
1562
+ }
1563
+ .eth-inbox-search__count {
1564
+ color: var(--eth-color-text-secondary);
1565
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1566
+ line-height: 1.2857;
1567
+ padding-inline: var(--eth-space-md);
1568
+ white-space: nowrap;
1569
+ }
1570
+ .eth-inbox-search__nav {
1571
+ align-items: center;
1572
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1573
+ display: flex;
1574
+ }
1575
+ .eth-inbox-search__nav-button.eth-icon-button {
1576
+ block-size: var(--eth-space-3xl);
1577
+ inline-size: var(--eth-space-3xl);
1578
+ min-block-size: var(--eth-space-3xl);
1579
+ min-inline-size: var(--eth-space-3xl);
1580
+ }
1581
+ .eth-inbox-search__nav-button + .eth-inbox-search__nav-button {
1582
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1583
+ }
1584
+ .eth-inbox-search__nav-button--previous svg {
1585
+ transform: rotate(180deg);
1586
+ }
1587
+ .eth-inbox-approval-to-send,
1588
+ .eth-inbox-send-approval,
1589
+ .eth-inbox-agent-draft-review,
1590
+ .eth-inbox-agent-draft,
1591
+ .eth-inbox-thread-summary {
1592
+ background: var(--eth-color-layer-01);
1593
+ border: 1px solid var(--eth-color-border-subtle);
1594
+ border-radius: 0;
1595
+ display: grid;
1596
+ gap: var(--eth-space-md);
1597
+ padding: var(--eth-space-lg);
1598
+ }
1599
+ .eth-inbox-thread-summary {
1600
+ gap: 0;
1601
+ inline-size: 100%;
1602
+ max-inline-size: 48rem;
1603
+ padding: 0;
1604
+ }
1605
+ .eth-inbox-thread-summary > .eth-panel__header {
1606
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1607
+ padding: var(--eth-space-lg) var(--eth-space-lg) var(--eth-space-md);
1608
+ }
1609
+ .eth-inbox-thread-summary > .eth-panel__header h3 {
1610
+ font-size: calc(1rem * var(--eth-text-scale, 1));
1611
+ font-weight: 600;
1612
+ line-height: 1.375;
1613
+ }
1614
+ .eth-inbox-thread-summary > .eth-panel__header p {
1615
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1616
+ line-height: 1.2857;
1617
+ max-inline-size: 34rem;
1618
+ }
1619
+ .eth-inbox-thread-summary > .eth-panel__body {
1620
+ display: grid;
1621
+ min-width: 0;
1622
+ padding: var(--eth-space-lg);
1623
+ }
1624
+ .eth-inbox-thread-summary__content {
1625
+ display: grid;
1626
+ gap: var(--eth-space-md);
1627
+ min-width: 0;
1628
+ }
1629
+ .eth-inbox-thread-summary__metadata {
1630
+ align-items: center;
1631
+ color: var(--eth-color-text-secondary);
1632
+ display: flex;
1633
+ flex-wrap: wrap;
1634
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1635
+ gap: var(--eth-space-sm);
1636
+ line-height: 1.2857;
1637
+ min-width: 0;
1638
+ }
1639
+ .eth-inbox-thread-summary__summary,
1640
+ .eth-inbox-thread-summary__empty,
1641
+ .eth-inbox-thread-summary__no-sources {
1642
+ background: var(--eth-color-layer-02);
1643
+ border: 1px solid var(--eth-color-border-subtle);
1644
+ display: grid;
1645
+ gap: var(--eth-space-sm);
1646
+ min-width: 0;
1647
+ padding: var(--eth-space-md);
1648
+ }
1649
+ .eth-inbox-thread-summary__summary {
1650
+ border-inline-start: 4px solid var(--eth-color-info);
1651
+ }
1652
+ .eth-inbox-thread-summary__section-label {
1653
+ color: var(--eth-color-text-secondary);
1654
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1655
+ font-weight: 600;
1656
+ line-height: 1.333;
1657
+ }
1658
+ .eth-inbox-thread-summary__summary-body {
1659
+ color: var(--eth-color-text-primary);
1660
+ line-height: 1.5;
1661
+ max-inline-size: 56rem;
1662
+ min-width: 0;
1663
+ }
1664
+ .eth-inbox-thread-summary__summary-body > :first-child {
1665
+ margin-block-start: 0;
1666
+ }
1667
+ .eth-inbox-thread-summary__summary-body > :last-child {
1668
+ margin-block-end: 0;
1669
+ }
1670
+ .eth-inbox-thread-summary__sources {
1671
+ display: grid;
1672
+ gap: var(--eth-space-xs);
1673
+ min-width: 0;
1674
+ }
1675
+ .eth-inbox-thread-summary__source-list {
1676
+ align-items: center;
1677
+ display: flex;
1678
+ flex-wrap: wrap;
1679
+ gap: var(--eth-space-xs);
1680
+ list-style: none;
1681
+ margin: 0;
1682
+ min-width: 0;
1683
+ padding: 0;
1684
+ }
1685
+ .eth-inbox-thread-summary__source-item {
1686
+ display: flex;
1687
+ min-width: 0;
1688
+ }
1689
+ .eth-inbox-thread-summary__source-link {
1690
+ max-inline-size: 100%;
1691
+ text-decoration: none;
1692
+ }
1693
+ .eth-inbox-thread-summary__source-link:focus-visible {
1694
+ outline: 2px solid var(--eth-color-focus);
1695
+ outline-offset: 2px;
1696
+ }
1697
+ .eth-inbox-thread-summary__source-link:hover .eth-inbox-thread-summary__source-token {
1698
+ background: var(--eth-color-layer-hover);
1699
+ }
1700
+ .eth-inbox-thread-summary__source-reference {
1701
+ max-inline-size: 100%;
1702
+ }
1703
+ .eth-inbox-thread-summary__no-sources {
1704
+ border-style: dashed;
1705
+ color: var(--eth-color-text-secondary);
1706
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1707
+ line-height: 1.2857;
1708
+ }
1709
+ .eth-inbox-thread-summary__empty {
1710
+ border-style: dashed;
1711
+ }
1712
+ .eth-inbox-thread-summary__empty strong {
1713
+ color: var(--eth-color-text-primary);
1714
+ }
1715
+ .eth-inbox-thread-summary__empty p {
1716
+ color: var(--eth-color-text-secondary);
1717
+ margin: 0;
1718
+ max-inline-size: 34rem;
1719
+ }
1720
+ .eth-inbox-send-approval {
1721
+ --eth-inbox-send-approval-accent: var(--eth-color-info);
1722
+ border-inline-start: 4px solid var(--eth-inbox-send-approval-accent);
1723
+ gap: 0;
1724
+ max-inline-size: 64rem;
1725
+ padding: 0;
1726
+ }
1727
+ .eth-inbox-send-approval > .eth-panel__header {
1728
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1729
+ padding: var(--eth-space-lg);
1730
+ }
1731
+ .eth-inbox-send-approval > .eth-panel__body {
1732
+ display: grid;
1733
+ gap: var(--eth-space-lg);
1734
+ padding: var(--eth-space-lg);
1735
+ }
1736
+ .eth-inbox-send-approval--low {
1737
+ --eth-inbox-send-approval-accent: var(--eth-color-info);
1738
+ }
1739
+ .eth-inbox-send-approval--medium {
1740
+ --eth-inbox-send-approval-accent: var(--eth-color-warning);
1741
+ }
1742
+ .eth-inbox-send-approval--high,
1743
+ .eth-inbox-send-approval--critical {
1744
+ --eth-inbox-send-approval-accent: var(--eth-color-danger);
1745
+ }
1746
+ .eth-inbox-send-approval__status {
1747
+ align-items: center;
1748
+ background: var(--eth-color-layer-02);
1749
+ border: 1px solid var(--eth-color-border-subtle);
1750
+ display: flex;
1751
+ flex-wrap: wrap;
1752
+ gap: var(--eth-space-sm);
1753
+ justify-content: space-between;
1754
+ padding: var(--eth-space-md);
1755
+ }
1756
+ .eth-inbox-send-approval__summary,
1757
+ .eth-inbox-agent-draft__evidence-list {
1758
+ align-items: center;
1759
+ display: flex;
1760
+ flex-wrap: wrap;
1761
+ gap: var(--eth-space-sm);
1762
+ }
1763
+ .eth-inbox-send-approval__policy {
1764
+ color: var(--eth-color-text-secondary);
1765
+ font-family: var(--eth-font-mono);
1766
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1767
+ line-height: 1.2857;
1768
+ }
1769
+ .eth-inbox-send-approval__state {
1770
+ color: var(--eth-color-text-secondary);
1771
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1772
+ line-height: 1.2857;
1773
+ }
1774
+ .eth-inbox-send-approval__message {
1775
+ background: var(--eth-color-layer-01);
1776
+ border: 1px solid var(--eth-color-border-subtle);
1777
+ display: grid;
1778
+ min-width: 0;
1779
+ }
1780
+ .eth-inbox-send-approval__message-header {
1781
+ align-items: flex-start;
1782
+ background: var(--eth-color-layer-02);
1783
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1784
+ display: flex;
1785
+ gap: var(--eth-space-md);
1786
+ justify-content: space-between;
1787
+ padding: var(--eth-space-md);
1788
+ }
1789
+ .eth-inbox-send-approval__message-header h4,
1790
+ .eth-inbox-send-approval__message-header p,
1791
+ .eth-inbox-send-approval__message-body p {
1792
+ margin: 0;
1793
+ }
1794
+ .eth-inbox-send-approval__message-header h4 {
1795
+ font-size: calc(1rem * var(--eth-text-scale, 1));
1796
+ font-weight: 600;
1797
+ line-height: 1.375;
1798
+ }
1799
+ .eth-inbox-send-approval__message-header p {
1800
+ color: var(--eth-color-text-secondary);
1801
+ margin-block-start: var(--eth-space-xs);
1802
+ }
1803
+ .eth-inbox-send-approval__meta {
1804
+ display: grid;
1805
+ margin: 0;
1806
+ }
1807
+ .eth-inbox-send-approval__meta > div {
1808
+ border-bottom: 1px solid var(--eth-color-border-subtle);
1809
+ display: grid;
1810
+ gap: var(--eth-space-sm);
1811
+ grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
1812
+ padding: var(--eth-space-sm);
1813
+ }
1814
+ .eth-inbox-send-approval__meta > div:last-child {
1815
+ border-bottom: 0;
1816
+ }
1817
+ .eth-inbox-send-approval__meta dt {
1818
+ color: var(--eth-color-text-secondary);
1819
+ font-weight: 600;
1820
+ }
1821
+ .eth-inbox-send-approval__meta dd {
1822
+ margin: 0;
1823
+ min-width: 0;
1824
+ overflow-wrap: anywhere;
1825
+ }
1826
+ .eth-inbox-send-approval__message-body {
1827
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1828
+ display: grid;
1829
+ gap: var(--eth-space-sm);
1830
+ line-height: 1.5;
1831
+ min-block-size: 7rem;
1832
+ padding: var(--eth-space-md);
1833
+ white-space: pre-wrap;
1834
+ }
1835
+ .eth-inbox-send-approval__message-body span {
1836
+ color: var(--eth-color-text-secondary);
1837
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1838
+ font-weight: 600;
1839
+ line-height: 1.333;
1840
+ }
1841
+ .eth-inbox-send-approval__decision {
1842
+ display: grid;
1843
+ gap: var(--eth-space-sm);
1844
+ }
1845
+ .eth-inbox-send-approval__decision .cds--form-item,
1846
+ .eth-inbox-send-approval__decision .cds--text-area__wrapper {
1847
+ max-inline-size: none;
1848
+ }
1849
+ .eth-inbox-send-approval__decision .cds--text-area {
1850
+ min-block-size: 6rem;
1851
+ }
1852
+ .eth-inbox-send-approval__actions {
1853
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1854
+ justify-content: flex-end;
1855
+ padding-block-start: var(--eth-space-lg);
1856
+ }
1857
+ .eth-inbox-agent-draft {
1858
+ grid-template-columns: minmax(0, 1fr);
1859
+ max-inline-size: 58rem;
1860
+ }
1861
+ .eth-inbox-agent-draft > .eth-panel__body {
1862
+ display: grid;
1863
+ gap: var(--eth-space-lg);
1864
+ }
1865
+ .eth-inbox-agent-draft .eth-panel__header {
1866
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1867
+ padding-block-end: var(--eth-space-md);
1868
+ }
1869
+ .eth-inbox-agent-draft__content {
1870
+ display: grid;
1871
+ gap: var(--eth-space-lg);
1872
+ }
1873
+ .eth-inbox-agent-draft__status {
1874
+ align-items: center;
1875
+ color: var(--eth-color-text-secondary);
1876
+ display: flex;
1877
+ flex-wrap: wrap;
1878
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1879
+ gap: var(--eth-space-sm);
1880
+ line-height: 1.2857;
1881
+ }
1882
+ .eth-inbox-agent-draft__status time {
1883
+ color: var(--eth-color-text-secondary);
1884
+ }
1885
+ .eth-inbox-agent-draft__meta {
1886
+ background: var(--eth-color-layer-01);
1887
+ border: 1px solid var(--eth-color-border-subtle);
1888
+ display: grid;
1889
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1890
+ margin: 0;
1891
+ }
1892
+ .eth-inbox-agent-draft__meta > div {
1893
+ display: grid;
1894
+ gap: var(--eth-space-xs);
1895
+ min-width: 0;
1896
+ padding: var(--eth-space-sm) var(--eth-space-md);
1897
+ }
1898
+ .eth-inbox-agent-draft__meta > div:not(:last-child) {
1899
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
1900
+ }
1901
+ .eth-inbox-agent-draft__meta dt,
1902
+ .eth-inbox-agent-draft__section-header,
1903
+ .eth-inbox-agent-draft__rationale > span,
1904
+ .eth-inbox-agent-draft__evidence > span {
1905
+ color: var(--eth-color-text-secondary);
1906
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1907
+ font-weight: 600;
1908
+ line-height: 1.333;
1909
+ }
1910
+ .eth-inbox-agent-draft__meta dd {
1911
+ color: var(--eth-color-text-primary);
1912
+ margin: 0;
1913
+ min-width: 0;
1914
+ overflow: hidden;
1915
+ text-overflow: ellipsis;
1916
+ white-space: nowrap;
1917
+ }
1918
+ .eth-inbox-agent-draft__section,
1919
+ .eth-inbox-agent-draft__evidence {
1920
+ display: grid;
1921
+ gap: var(--eth-space-sm);
1922
+ }
1923
+ .eth-inbox-agent-draft__section-header {
1924
+ align-items: center;
1925
+ display: flex;
1926
+ justify-content: space-between;
1927
+ }
1928
+ .eth-inbox-agent-draft__body {
1929
+ background: var(--eth-color-layer-02);
1930
+ border: 1px solid var(--eth-color-border-subtle);
1931
+ border-inline-start: 4px solid var(--eth-color-interactive-primary);
1932
+ color: var(--eth-color-text-primary);
1933
+ line-height: 1.5;
1934
+ padding: var(--eth-space-md);
1935
+ white-space: pre-wrap;
1936
+ }
1937
+ .eth-inbox-agent-draft__rationale {
1938
+ background: var(--eth-color-layer-02);
1939
+ border: 1px solid var(--eth-color-border-subtle);
1940
+ display: grid;
1941
+ gap: var(--eth-space-xs);
1942
+ padding: var(--eth-space-md);
1943
+ }
1944
+ .eth-inbox-agent-draft__rationale-body {
1945
+ color: var(--eth-color-text-primary);
1946
+ line-height: 1.5;
1947
+ margin: 0;
1948
+ }
1949
+ .eth-inbox-agent-draft__rationale-body > :first-child {
1950
+ margin-block-start: 0;
1951
+ }
1952
+ .eth-inbox-agent-draft__rationale-body > :last-child {
1953
+ margin-block-end: 0;
1954
+ }
1955
+ .eth-inbox-agent-draft__evidence-list a {
1956
+ text-decoration: none;
1957
+ }
1958
+ .eth-inbox-agent-draft__evidence-list a:focus-visible {
1959
+ outline: 2px solid var(--eth-color-focus);
1960
+ outline-offset: 2px;
1961
+ }
1962
+ .eth-inbox-agent-draft__empty {
1963
+ background: var(--eth-color-layer-02);
1964
+ border: 1px dashed var(--eth-color-border-subtle);
1965
+ display: grid;
1966
+ gap: var(--eth-space-xs);
1967
+ padding: var(--eth-space-lg);
1968
+ }
1969
+ .eth-inbox-agent-draft__empty strong {
1970
+ color: var(--eth-color-text-primary);
1971
+ }
1972
+ .eth-inbox-agent-draft__empty p {
1973
+ color: var(--eth-color-text-secondary);
1974
+ margin: 0;
1975
+ }
1976
+ .eth-inbox-agent-draft__actions {
1977
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1978
+ justify-content: flex-end;
1979
+ padding-block-start: var(--eth-space-lg);
1980
+ }
1981
+ .eth-inbox-thread-summary p {
1982
+ margin: 0;
1983
+ }
1984
+ @media (width <= 72rem) {
1985
+ .eth-inbox-shell__layout {
1986
+ grid-template-columns: minmax(8rem, 0.6fr) minmax(15rem, 1fr) minmax(22rem, 2fr);
1987
+ }
1988
+ .eth-inbox-shell__inspector {
1989
+ border-top: 1px solid var(--eth-color-border-subtle);
1990
+ grid-column: 1 / -1;
1991
+ }
1992
+ }
1993
+ @container (inline-size <= 72rem) {
1994
+ .eth-inbox-shell__layout {
1995
+ grid-template-columns: minmax(8rem, 0.6fr) minmax(15rem, 1fr) minmax(22rem, 2fr);
1996
+ }
1997
+ .eth-inbox-shell__inspector {
1998
+ border-top: 1px solid var(--eth-color-border-subtle);
1999
+ grid-column: 1 / -1;
2000
+ }
2001
+ }
2002
+ @container (inline-size <= 54rem) {
2003
+ .eth-inbox-shell__layout,
2004
+ .eth-inbox-shell__layout--has-inspector {
2005
+ grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
2006
+ }
2007
+ .eth-inbox-shell__thread,
2008
+ .eth-inbox-shell__inspector {
2009
+ border-top: 1px solid var(--eth-color-border-subtle);
2010
+ grid-column: 1 / -1;
2011
+ }
2012
+ }
2013
+ @container (inline-size <= 42rem) {
2014
+ .eth-inbox-shell__layout,
2015
+ .eth-inbox-shell__layout--has-inspector {
2016
+ grid-template-columns: 1fr;
2017
+ }
2018
+ .eth-inbox-shell__folders,
2019
+ .eth-inbox-shell__list,
2020
+ .eth-inbox-shell__thread {
2021
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2022
+ border-inline-end: 0;
2023
+ }
2024
+ }
2025
+ @media (width <= 48rem) {
2026
+ .eth-inbox-shell__layout,
2027
+ .eth-inbox-label-manager__row,
2028
+ .eth-inbox-label-manager__create,
2029
+ .eth-inbox-recipient-picker__selected,
2030
+ .eth-inbox-recipient-picker__manual,
2031
+ .eth-inbox-recipient-picker__suggestions button,
2032
+ .eth-inbox-rules__item,
2033
+ .eth-inbox-rules__definition,
2034
+ .eth-inbox-message-search,
2035
+ .eth-inbox-search,
2036
+ .eth-inbox-composer__field.eth-form-field,
2037
+ .eth-inbox-attachments__tile,
2038
+ .eth-inbox-agent-draft__meta,
2039
+ .eth-inbox-send-approval__meta > div {
2040
+ grid-template-columns: 1fr;
2041
+ }
2042
+ .eth-inbox-composer {
2043
+ inline-size: 100%;
2044
+ }
2045
+ .eth-inbox-recipient-picker__selected,
2046
+ .eth-inbox-recipient-picker__manual,
2047
+ .eth-inbox-recipient-picker__suggestions button {
2048
+ gap: var(--eth-space-xs);
2049
+ padding-inline: var(--eth-space-md);
2050
+ }
2051
+ .eth-inbox-recipient-picker__manual {
2052
+ align-items: stretch;
2053
+ }
2054
+ .eth-inbox-recipient-picker__manual .eth-button {
2055
+ inline-size: 100%;
2056
+ max-inline-size: none;
2057
+ }
2058
+ .eth-inbox-recipient-picker__suggestion-status {
2059
+ justify-self: start;
2060
+ }
2061
+ .eth-inbox-composer__field.eth-form-field {
2062
+ align-items: stretch;
2063
+ gap: var(--eth-space-xs);
2064
+ }
2065
+ .eth-inbox-search__results {
2066
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2067
+ border-inline-start: 0;
2068
+ justify-content: space-between;
2069
+ }
2070
+ .eth-inbox-composer__footer {
2071
+ align-items: stretch;
2072
+ flex-direction: column;
2073
+ }
2074
+ .eth-inbox-composer__actions {
2075
+ margin-inline-start: 0;
2076
+ }
2077
+ .eth-inbox-composer__actions .eth-button {
2078
+ inline-size: 100%;
2079
+ max-inline-size: none;
2080
+ }
2081
+ .eth-inbox-label-manager__table-head {
2082
+ display: none;
2083
+ }
2084
+ .eth-inbox-label-manager__row {
2085
+ align-items: start;
2086
+ }
2087
+ .eth-inbox-label-manager__count-cell,
2088
+ .eth-inbox-label-manager__actions {
2089
+ justify-content: flex-start;
2090
+ }
2091
+ .eth-inbox-agent-draft__meta > div:not(:last-child) {
2092
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2093
+ border-inline-end: 0;
2094
+ }
2095
+ .eth-inbox-rules__definition > div:not(:last-child) {
2096
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2097
+ border-inline-end: 0;
2098
+ }
2099
+ .eth-inbox-rules__controls {
2100
+ justify-content: flex-start;
2101
+ min-inline-size: 0;
2102
+ }
2103
+ .eth-inbox-send-approval__status,
2104
+ .eth-inbox-send-approval__actions,
2105
+ .eth-inbox-thread__header {
2106
+ align-items: stretch;
2107
+ flex-direction: column;
2108
+ }
2109
+ .eth-inbox-thread__actions {
2110
+ justify-content: flex-start;
2111
+ margin-inline-start: 0;
2112
+ }
2113
+ .eth-inbox-thread__actions .eth-button {
2114
+ inline-size: 100%;
2115
+ max-inline-size: none;
2116
+ }
2117
+ .eth-inbox-message-preview__header {
2118
+ align-items: flex-start;
2119
+ flex-direction: column;
2120
+ }
2121
+ .eth-inbox-attachments__tile {
2122
+ align-items: start;
2123
+ grid-template-columns: auto minmax(0, 1fr);
2124
+ }
2125
+ .eth-inbox-attachments__actions {
2126
+ grid-column: 2;
2127
+ justify-content: flex-start;
2128
+ }
2129
+ .eth-inbox-send-approval__actions .eth-button {
2130
+ inline-size: 100%;
2131
+ max-inline-size: none;
2132
+ }
2133
+ .eth-inbox-message-preview {
2134
+ inline-size: 100%;
2135
+ padding: var(--eth-space-md);
2136
+ }
2137
+ .eth-inbox-message-preview__header {
2138
+ display: grid;
2139
+ }
2140
+ .eth-inbox-message-preview__header time {
2141
+ justify-self: start;
2142
+ padding-block-start: 0;
2143
+ }
2144
+ .eth-inbox-message-preview__recipients {
2145
+ align-items: start;
2146
+ display: grid;
2147
+ }
2148
+ .eth-inbox-shell__folders,
2149
+ .eth-inbox-shell__list,
2150
+ .eth-inbox-shell__thread {
2151
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2152
+ border-inline-end: 0;
2153
+ }
2154
+ }
2155
+ /*# sourceMappingURL=index.css.map */