@consilioweb/payload-support 0.11.0 → 0.13.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.
|
@@ -1,313 +1,413 @@
|
|
|
1
|
-
// TicketDetail —
|
|
2
|
-
//
|
|
1
|
+
// TicketDetail — Payload Support refonte v2 (alignement maquette designer)
|
|
2
|
+
// Tokens : --theme-* + --s-* + --t-* + --r-* via tokens.css du plugin
|
|
3
|
+
// Aucune valeur hex hardcodée hors fallbacks tokens.
|
|
3
4
|
|
|
4
5
|
.page {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
font-family: -
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
min-height: 0;
|
|
9
|
+
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
10
|
+
background: var(--theme-bg);
|
|
9
11
|
}
|
|
10
12
|
|
|
11
|
-
// ───
|
|
13
|
+
// ─── HEADER (detail__header maquette) ───
|
|
14
|
+
// Layout : back-btn 32x32 | title-wrap (ID/cat/source meta + h1 title) | quick-actions
|
|
12
15
|
.topBar {
|
|
13
16
|
display: flex;
|
|
14
|
-
align-items:
|
|
15
|
-
gap:
|
|
16
|
-
padding:
|
|
17
|
-
border-bottom: 1px solid var(--theme-elevation-150,
|
|
18
|
-
|
|
17
|
+
align-items: flex-start;
|
|
18
|
+
gap: 16px;
|
|
19
|
+
padding: 20px 24px;
|
|
20
|
+
border-bottom: 1px solid var(--theme-elevation-150, var(--theme-input-border));
|
|
21
|
+
background: var(--theme-bg);
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
.backLink {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
width: 32px;
|
|
26
|
+
height: 32px;
|
|
27
|
+
border-radius: 4px;
|
|
28
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
29
|
+
background: var(--theme-elevation-0, #fff);
|
|
30
|
+
color: var(--theme-text);
|
|
31
|
+
font-size: 14px;
|
|
25
32
|
line-height: 1;
|
|
26
|
-
display: flex;
|
|
33
|
+
display: inline-flex;
|
|
27
34
|
align-items: center;
|
|
28
|
-
|
|
29
|
-
|
|
35
|
+
justify-content: center;
|
|
36
|
+
text-decoration: none;
|
|
37
|
+
flex-shrink: 0;
|
|
38
|
+
transition: background 80ms ease;
|
|
39
|
+
&:hover { background: var(--theme-elevation-100); }
|
|
30
40
|
}
|
|
31
41
|
|
|
32
42
|
.ticketMeta {
|
|
33
43
|
display: flex;
|
|
34
44
|
flex-direction: column;
|
|
35
|
-
gap:
|
|
45
|
+
gap: 4px;
|
|
36
46
|
flex: 1;
|
|
37
47
|
min-width: 0;
|
|
38
48
|
}
|
|
39
49
|
|
|
50
|
+
// detail__id (maquette) : ID mono · category · source email
|
|
40
51
|
.ticketNumber {
|
|
52
|
+
font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
|
|
41
53
|
font-size: 12px;
|
|
42
|
-
font-weight:
|
|
43
|
-
color: var(--theme-elevation-500);
|
|
44
|
-
|
|
45
|
-
|
|
54
|
+
font-weight: 400;
|
|
55
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
gap: 8px;
|
|
59
|
+
letter-spacing: 0.01em;
|
|
60
|
+
|
|
61
|
+
> .ticketNumberSep {
|
|
62
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-400));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
> .ticketNumberCat,
|
|
66
|
+
> .ticketNumberSource {
|
|
67
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
68
|
+
display: inline-flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
gap: 4px;
|
|
71
|
+
}
|
|
46
72
|
}
|
|
47
73
|
|
|
74
|
+
// detail__title (maquette) : h1 20px/1.3, 600, text-wrap: pretty
|
|
75
|
+
// Multi-ligne autorisee, on tronque a 2 lignes via line-clamp pour eviter de pousser le header
|
|
48
76
|
.ticketSubject {
|
|
49
|
-
font-size:
|
|
50
|
-
font-weight:
|
|
77
|
+
font-size: 20px;
|
|
78
|
+
font-weight: 600;
|
|
79
|
+
line-height: 1.3;
|
|
51
80
|
color: var(--theme-text);
|
|
81
|
+
margin: 0;
|
|
82
|
+
text-wrap: pretty;
|
|
83
|
+
display: -webkit-box;
|
|
84
|
+
-webkit-line-clamp: 2;
|
|
85
|
+
-webkit-box-orient: vertical;
|
|
52
86
|
overflow: hidden;
|
|
53
|
-
text-overflow: ellipsis;
|
|
54
|
-
white-space: nowrap;
|
|
55
|
-
line-height: 1.3;
|
|
56
87
|
}
|
|
57
88
|
|
|
58
89
|
.topBarRight {
|
|
59
90
|
display: flex;
|
|
60
91
|
align-items: center;
|
|
61
|
-
gap:
|
|
92
|
+
gap: 8px;
|
|
62
93
|
flex-shrink: 0;
|
|
63
94
|
}
|
|
64
95
|
|
|
96
|
+
// Status pill (select) — pilule arrondie, padding et chevron alignés
|
|
65
97
|
.statusChip {
|
|
66
|
-
padding:
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
font-
|
|
98
|
+
padding: 0 26px 0 12px;
|
|
99
|
+
height: 22px;
|
|
100
|
+
border-radius: 999px;
|
|
101
|
+
font-size: 11px;
|
|
102
|
+
font-weight: 500;
|
|
103
|
+
line-height: 1;
|
|
70
104
|
border: 1px solid transparent;
|
|
71
105
|
cursor: pointer;
|
|
72
|
-
transition:
|
|
106
|
+
transition: box-shadow 100ms;
|
|
73
107
|
appearance: none;
|
|
74
108
|
-webkit-appearance: none;
|
|
75
|
-
|
|
109
|
+
letter-spacing: 0.01em;
|
|
110
|
+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
|
|
76
111
|
background-repeat: no-repeat;
|
|
77
|
-
background-position: right
|
|
112
|
+
background-position: right 9px center;
|
|
78
113
|
|
|
79
114
|
&:hover {
|
|
80
|
-
box-shadow: 0 0 0 2px
|
|
115
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent);
|
|
81
116
|
}
|
|
82
117
|
}
|
|
83
118
|
|
|
84
119
|
.sentimentBadge {
|
|
85
|
-
font-size:
|
|
86
|
-
font-weight:
|
|
120
|
+
font-size: 11px;
|
|
121
|
+
font-weight: 500;
|
|
87
122
|
display: inline-flex;
|
|
88
123
|
align-items: center;
|
|
89
124
|
gap: 4px;
|
|
90
|
-
padding:
|
|
91
|
-
|
|
125
|
+
padding: 0 8px;
|
|
126
|
+
height: 22px;
|
|
127
|
+
border-radius: 999px;
|
|
92
128
|
}
|
|
93
129
|
|
|
130
|
+
// Bouton "more" : 32x32 carré aligné sur btn--icon de la maquette
|
|
94
131
|
.moreBtn {
|
|
95
|
-
width:
|
|
96
|
-
height:
|
|
97
|
-
border-radius:
|
|
98
|
-
border: 1px solid var(--theme-elevation-200);
|
|
99
|
-
background:
|
|
132
|
+
width: 32px;
|
|
133
|
+
height: 32px;
|
|
134
|
+
border-radius: 4px;
|
|
135
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
136
|
+
background: var(--theme-elevation-0, #fff);
|
|
100
137
|
cursor: pointer;
|
|
101
|
-
font-size:
|
|
102
|
-
|
|
138
|
+
font-size: 14px;
|
|
139
|
+
font-weight: 700;
|
|
140
|
+
color: var(--theme-text);
|
|
103
141
|
display: flex;
|
|
104
142
|
align-items: center;
|
|
105
143
|
justify-content: center;
|
|
106
|
-
transition:
|
|
107
|
-
&:hover { background: var(--theme-elevation-100);
|
|
144
|
+
transition: background 80ms ease;
|
|
145
|
+
&:hover { background: var(--theme-elevation-100); }
|
|
108
146
|
}
|
|
109
147
|
|
|
110
|
-
// ─── LAYOUT ───
|
|
148
|
+
// ─── LAYOUT (detail grid maquette) ───
|
|
149
|
+
// Maquette : grid-template-columns: 1fr 360px, full bleed, pas de gap/border-radius
|
|
111
150
|
.layout {
|
|
112
151
|
display: grid;
|
|
113
|
-
grid-template-columns: 1fr
|
|
114
|
-
|
|
115
|
-
|
|
152
|
+
grid-template-columns: 1fr 360px;
|
|
153
|
+
align-items: stretch;
|
|
154
|
+
min-height: 0;
|
|
155
|
+
flex: 1;
|
|
116
156
|
@media (max-width: 1060px) { grid-template-columns: 1fr; }
|
|
117
157
|
}
|
|
118
158
|
|
|
119
159
|
.conversationCol {
|
|
160
|
+
display: flex;
|
|
161
|
+
flex-direction: column;
|
|
120
162
|
min-width: 0;
|
|
163
|
+
min-height: 0;
|
|
164
|
+
border-right: 1px solid var(--theme-elevation-150, var(--theme-input-border));
|
|
121
165
|
}
|
|
122
166
|
|
|
167
|
+
// Sidebar (sidepanel maquette) : pas de card, full-bleed, scroll vertical
|
|
123
168
|
.sidebar {
|
|
124
|
-
|
|
125
|
-
border-
|
|
126
|
-
overflow:
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
169
|
+
background: var(--theme-elevation-50);
|
|
170
|
+
border-left: 1px solid var(--theme-elevation-150, var(--theme-input-border));
|
|
171
|
+
overflow-y: auto;
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-direction: column;
|
|
174
|
+
min-width: 0;
|
|
175
|
+
@media (max-width: 1060px) {
|
|
176
|
+
border-left: 0;
|
|
177
|
+
border-top: 1px solid var(--theme-elevation-150, var(--theme-input-border));
|
|
178
|
+
}
|
|
130
179
|
}
|
|
131
180
|
|
|
132
|
-
// ─── SIDEBAR SECTIONS ───
|
|
181
|
+
// ─── SIDEBAR SECTIONS (sp__sect maquette) ───
|
|
182
|
+
// Sections : fond bg (pas elevation-50), border-bottom 1px, padding 16px
|
|
133
183
|
.sideSection {
|
|
134
184
|
padding: 16px;
|
|
135
|
-
|
|
185
|
+
background: var(--theme-bg);
|
|
186
|
+
border-bottom: 1px solid var(--theme-elevation-150, var(--theme-input-border));
|
|
136
187
|
&:last-child { border-bottom: none; }
|
|
137
188
|
}
|
|
138
189
|
|
|
190
|
+
// Section title : t-micro uppercase letter-spaced + flex space-between
|
|
139
191
|
.sideSectionTitle {
|
|
140
|
-
font-size:
|
|
141
|
-
font-weight:
|
|
192
|
+
font-size: 11px;
|
|
193
|
+
font-weight: 500;
|
|
142
194
|
text-transform: uppercase;
|
|
143
|
-
letter-spacing: 0.
|
|
144
|
-
|
|
195
|
+
letter-spacing: 0.08em;
|
|
196
|
+
line-height: 1.3;
|
|
197
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
145
198
|
margin: 0 0 12px;
|
|
146
199
|
display: flex;
|
|
147
200
|
justify-content: space-between;
|
|
148
201
|
align-items: center;
|
|
149
202
|
}
|
|
150
203
|
|
|
204
|
+
// dl/dt/dd (kv maquette) — grid 100px 1fr, label aligné gauche, value étirée
|
|
151
205
|
.sideField {
|
|
152
|
-
display:
|
|
153
|
-
|
|
206
|
+
display: grid;
|
|
207
|
+
grid-template-columns: 100px 1fr;
|
|
154
208
|
align-items: center;
|
|
209
|
+
gap: 8px 12px;
|
|
155
210
|
padding: 4px 0;
|
|
156
211
|
font-size: 13px;
|
|
212
|
+
line-height: 1.5;
|
|
157
213
|
}
|
|
158
214
|
|
|
159
|
-
.sideLabel {
|
|
160
|
-
|
|
215
|
+
.sideLabel {
|
|
216
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
217
|
+
font-weight: 400;
|
|
218
|
+
}
|
|
219
|
+
.sideValue {
|
|
220
|
+
color: var(--theme-text);
|
|
221
|
+
font-weight: 400;
|
|
222
|
+
display: flex;
|
|
223
|
+
align-items: center;
|
|
224
|
+
gap: 8px;
|
|
225
|
+
min-width: 0;
|
|
226
|
+
}
|
|
161
227
|
|
|
162
|
-
// Inline select for sidebar editable fields (
|
|
228
|
+
// Inline select for sidebar editable fields (kv__edit maquette)
|
|
229
|
+
// Left-aligned dans la grid (la valeur s'aligne au début de la colonne 2)
|
|
163
230
|
.sideSelect {
|
|
164
|
-
padding: 2px
|
|
165
|
-
|
|
231
|
+
padding: 2px 8px;
|
|
232
|
+
margin: -2px -8px -2px 0;
|
|
233
|
+
border-radius: 4px;
|
|
166
234
|
border: 1px solid transparent;
|
|
167
|
-
background:
|
|
235
|
+
background: transparent;
|
|
168
236
|
font-size: 13px;
|
|
169
|
-
font-weight:
|
|
237
|
+
font-weight: 400;
|
|
170
238
|
color: var(--theme-text);
|
|
171
239
|
cursor: pointer;
|
|
172
|
-
transition:
|
|
173
|
-
text-align:
|
|
174
|
-
max-width:
|
|
240
|
+
transition: background 80ms ease;
|
|
241
|
+
text-align: left;
|
|
242
|
+
max-width: 100%;
|
|
243
|
+
width: 100%;
|
|
244
|
+
justify-self: start;
|
|
175
245
|
|
|
176
|
-
&:hover {
|
|
177
|
-
&:focus {
|
|
246
|
+
&:hover { background: var(--theme-elevation-100); }
|
|
247
|
+
&:focus {
|
|
248
|
+
border-color: var(--theme-info-500, #2a6bd8);
|
|
249
|
+
outline: none;
|
|
250
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
|
|
251
|
+
}
|
|
178
252
|
}
|
|
179
253
|
|
|
180
|
-
// Client card
|
|
254
|
+
// Client card (sp__customer maquette)
|
|
181
255
|
.clientCard {
|
|
182
256
|
display: flex;
|
|
183
257
|
align-items: center;
|
|
184
258
|
gap: 12px;
|
|
259
|
+
margin-bottom: 12px;
|
|
185
260
|
}
|
|
186
261
|
|
|
262
|
+
// Avatar 36×36 client = warning (warm), support = info — pas de gradient
|
|
187
263
|
.clientAvatar {
|
|
188
|
-
width:
|
|
189
|
-
height:
|
|
264
|
+
width: 36px;
|
|
265
|
+
height: 36px;
|
|
190
266
|
border-radius: 50%;
|
|
191
|
-
background:
|
|
267
|
+
background: var(--theme-warning-500, #c97a0a);
|
|
192
268
|
display: flex;
|
|
193
269
|
align-items: center;
|
|
194
270
|
justify-content: center;
|
|
195
|
-
font-size:
|
|
196
|
-
font-weight:
|
|
197
|
-
color: #
|
|
271
|
+
font-size: 13px;
|
|
272
|
+
font-weight: 600;
|
|
273
|
+
color: #fff;
|
|
198
274
|
flex-shrink: 0;
|
|
199
275
|
}
|
|
200
276
|
|
|
201
277
|
.clientInfo { flex: 1; min-width: 0; }
|
|
202
|
-
.clientName {
|
|
203
|
-
|
|
278
|
+
.clientName {
|
|
279
|
+
font-size: 14px;
|
|
280
|
+
font-weight: 600;
|
|
281
|
+
line-height: 1.4;
|
|
282
|
+
color: var(--theme-text);
|
|
283
|
+
margin: 0;
|
|
284
|
+
}
|
|
285
|
+
.clientCompany {
|
|
286
|
+
font-size: 13px;
|
|
287
|
+
line-height: 1.5;
|
|
288
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
289
|
+
margin: 0;
|
|
290
|
+
}
|
|
204
291
|
|
|
205
292
|
.clientEmail {
|
|
206
|
-
font-size:
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
293
|
+
font-size: 13px;
|
|
294
|
+
line-height: 1.5;
|
|
295
|
+
color: var(--theme-info-500, #2a6bd8);
|
|
296
|
+
text-decoration: underline;
|
|
297
|
+
word-break: break-all;
|
|
210
298
|
display: block;
|
|
211
299
|
&:hover { text-decoration: underline; }
|
|
212
300
|
}
|
|
213
301
|
|
|
302
|
+
// "Fiche client" / "Portail" : 2 boutons flex 1, maquette
|
|
214
303
|
.clientActions {
|
|
215
304
|
display: flex;
|
|
216
|
-
gap:
|
|
217
|
-
margin-top: 10px;
|
|
305
|
+
gap: 8px;
|
|
218
306
|
}
|
|
219
307
|
|
|
220
308
|
.smallBtn {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
309
|
+
flex: 1;
|
|
310
|
+
display: inline-flex;
|
|
311
|
+
align-items: center;
|
|
312
|
+
justify-content: center;
|
|
313
|
+
height: 26px;
|
|
314
|
+
padding: 0 8px;
|
|
315
|
+
border-radius: 4px;
|
|
316
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
317
|
+
background: var(--theme-elevation-0, #fff);
|
|
225
318
|
font-size: 11px;
|
|
226
|
-
font-weight:
|
|
227
|
-
color: var(--theme-
|
|
319
|
+
font-weight: 500;
|
|
320
|
+
color: var(--theme-text);
|
|
228
321
|
cursor: pointer;
|
|
229
322
|
text-decoration: none;
|
|
230
|
-
transition:
|
|
231
|
-
&:hover { background: var(--theme-elevation-100);
|
|
323
|
+
transition: background 80ms ease;
|
|
324
|
+
&:hover { background: var(--theme-elevation-100); }
|
|
232
325
|
}
|
|
233
326
|
|
|
234
|
-
// ───
|
|
327
|
+
// ─── THREAD (conversation timeline maquette) ───
|
|
235
328
|
.thread {
|
|
329
|
+
flex: 1;
|
|
330
|
+
overflow: auto;
|
|
331
|
+
padding: 16px 24px 12px;
|
|
236
332
|
display: flex;
|
|
237
333
|
flex-direction: column;
|
|
238
334
|
gap: 0;
|
|
239
|
-
|
|
335
|
+
background: var(--theme-bg);
|
|
240
336
|
}
|
|
241
337
|
|
|
338
|
+
// Day separator (day-sep maquette) : lignes horizontales + label uppercase micro
|
|
242
339
|
.dateSeparator {
|
|
243
340
|
display: flex;
|
|
244
341
|
align-items: center;
|
|
245
|
-
gap:
|
|
246
|
-
|
|
342
|
+
gap: 12px;
|
|
343
|
+
margin: 16px 0 12px;
|
|
247
344
|
&::before, &::after {
|
|
248
345
|
content: '';
|
|
249
346
|
flex: 1;
|
|
250
347
|
height: 1px;
|
|
251
|
-
background: var(--theme-elevation-150,
|
|
348
|
+
background: var(--theme-elevation-150, var(--theme-input-border));
|
|
252
349
|
}
|
|
253
350
|
}
|
|
254
351
|
|
|
255
352
|
.dateSeparatorText {
|
|
256
353
|
font-size: 11px;
|
|
257
|
-
font-weight:
|
|
258
|
-
|
|
354
|
+
font-weight: 500;
|
|
355
|
+
line-height: 1.3;
|
|
356
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
259
357
|
white-space: nowrap;
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
// #4 — Message separation
|
|
266
|
-
.message + .message {
|
|
267
|
-
border-top: 1px solid var(--theme-elevation-100);
|
|
358
|
+
text-transform: uppercase;
|
|
359
|
+
letter-spacing: 0.08em;
|
|
360
|
+
padding: 0;
|
|
361
|
+
background: transparent;
|
|
362
|
+
border-radius: 0;
|
|
268
363
|
}
|
|
269
364
|
|
|
365
|
+
// Message (msg maquette) : grid 32px 1fr, padding vertical 12px
|
|
270
366
|
.message {
|
|
271
|
-
display:
|
|
367
|
+
display: grid;
|
|
368
|
+
grid-template-columns: 32px 1fr;
|
|
272
369
|
gap: 12px;
|
|
273
|
-
padding:
|
|
274
|
-
border-radius: 10px;
|
|
370
|
+
padding: 12px 0;
|
|
275
371
|
position: relative;
|
|
276
|
-
transition:
|
|
372
|
+
transition: none;
|
|
373
|
+
background: transparent;
|
|
277
374
|
|
|
278
|
-
|
|
375
|
+
// Plus de border-top entre messages : la séparation vient du body bubble
|
|
376
|
+
&:hover { background: transparent; }
|
|
279
377
|
}
|
|
280
378
|
|
|
281
|
-
// Client bubble
|
|
379
|
+
// Client bubble warm tint via msg__body, pas de border-left sur le wrap
|
|
282
380
|
.messageClient {
|
|
283
|
-
background:
|
|
284
|
-
|
|
381
|
+
background: transparent;
|
|
382
|
+
&:hover { background: transparent; }
|
|
285
383
|
|
|
286
|
-
|
|
287
|
-
background: color-mix(in srgb, var(--theme-warning-500, #c97a0a)
|
|
384
|
+
.messageBody {
|
|
385
|
+
background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 6%, var(--theme-bg));
|
|
386
|
+
border-color: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 18%, var(--theme-input-border));
|
|
288
387
|
}
|
|
289
388
|
}
|
|
290
389
|
|
|
291
|
-
// Admin/support bubble —
|
|
390
|
+
// Admin/support bubble — neutre (elevation-0)
|
|
292
391
|
.messageAdmin {
|
|
293
|
-
background:
|
|
294
|
-
|
|
392
|
+
background: transparent;
|
|
393
|
+
&:hover { background: transparent; }
|
|
295
394
|
|
|
296
|
-
|
|
297
|
-
background: var(--theme-elevation-
|
|
395
|
+
.messageBody {
|
|
396
|
+
background: var(--theme-elevation-0, #fff);
|
|
397
|
+
border-color: var(--theme-elevation-200, var(--theme-input-border));
|
|
298
398
|
}
|
|
299
399
|
}
|
|
300
400
|
|
|
301
|
-
// Internal note —
|
|
401
|
+
// Internal note — warming + dashed border (visible agents only)
|
|
302
402
|
.messageInternal {
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 18%, transparent) !important;
|
|
403
|
+
.messageBody {
|
|
404
|
+
background: var(--theme-warning-50, color-mix(in srgb, var(--theme-warning-500, #c97a0a) 10%, var(--theme-bg))) !important;
|
|
405
|
+
border-style: dashed !important;
|
|
406
|
+
border-color: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 35%, transparent) !important;
|
|
308
407
|
}
|
|
309
408
|
}
|
|
310
409
|
|
|
410
|
+
// Avatar (msg__avatar maquette) : 32x32, padding-top 2px pour aligner avec head
|
|
311
411
|
.avatar {
|
|
312
412
|
flex-shrink: 0;
|
|
313
413
|
width: 32px;
|
|
@@ -317,78 +417,109 @@
|
|
|
317
417
|
align-items: center;
|
|
318
418
|
justify-content: center;
|
|
319
419
|
font-size: 11px;
|
|
320
|
-
font-weight:
|
|
420
|
+
font-weight: 600;
|
|
321
421
|
color: #fff;
|
|
322
422
|
margin-top: 2px;
|
|
323
423
|
}
|
|
324
424
|
|
|
325
|
-
.messageContent {
|
|
425
|
+
.messageContent {
|
|
426
|
+
flex: 1;
|
|
427
|
+
min-width: 0;
|
|
428
|
+
display: flex;
|
|
429
|
+
flex-direction: column;
|
|
430
|
+
gap: 4px;
|
|
431
|
+
}
|
|
326
432
|
|
|
433
|
+
// Head : author + role + channel + time (baseline aligned)
|
|
327
434
|
.messageHeader {
|
|
328
435
|
display: flex;
|
|
329
|
-
align-items:
|
|
436
|
+
align-items: baseline;
|
|
330
437
|
gap: 8px;
|
|
331
|
-
margin-bottom:
|
|
438
|
+
margin-bottom: 0;
|
|
332
439
|
flex-wrap: wrap;
|
|
333
440
|
}
|
|
334
441
|
|
|
335
|
-
.messageAuthor {
|
|
442
|
+
.messageAuthor {
|
|
443
|
+
font-size: 13px;
|
|
444
|
+
font-weight: 600;
|
|
445
|
+
line-height: 1.5;
|
|
446
|
+
color: var(--theme-text);
|
|
447
|
+
}
|
|
336
448
|
|
|
337
449
|
.messageTime {
|
|
338
450
|
font-size: 11px;
|
|
339
|
-
color: var(--theme-elevation-500);
|
|
340
451
|
font-weight: 500;
|
|
452
|
+
line-height: 1.3;
|
|
453
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
341
454
|
}
|
|
342
455
|
|
|
456
|
+
// Pills "Interne" / "Solution" — pill style, 22px height
|
|
343
457
|
.badge {
|
|
344
458
|
display: inline-flex;
|
|
345
459
|
align-items: center;
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
font-
|
|
350
|
-
|
|
460
|
+
height: 18px;
|
|
461
|
+
padding: 0 8px;
|
|
462
|
+
border-radius: 999px;
|
|
463
|
+
font-size: 11px;
|
|
464
|
+
font-weight: 500;
|
|
465
|
+
letter-spacing: 0.01em;
|
|
466
|
+
line-height: 1;
|
|
351
467
|
}
|
|
352
468
|
|
|
353
469
|
.messageMeta {
|
|
354
470
|
margin-left: auto;
|
|
355
|
-
display: flex;
|
|
356
|
-
gap:
|
|
471
|
+
display: inline-flex;
|
|
472
|
+
gap: 4px;
|
|
357
473
|
align-items: center;
|
|
358
|
-
font-size:
|
|
359
|
-
font-weight:
|
|
474
|
+
font-size: 11px;
|
|
475
|
+
font-weight: 500;
|
|
360
476
|
}
|
|
361
477
|
|
|
362
|
-
//
|
|
478
|
+
// Body bubble : t-body 14px/1.55, padding 12px 16px, border 1px elevation-200
|
|
363
479
|
.messageBody {
|
|
364
480
|
font-size: 14px;
|
|
365
|
-
line-height: 1.
|
|
481
|
+
line-height: 1.55;
|
|
366
482
|
color: var(--theme-text);
|
|
483
|
+
background: var(--theme-elevation-0, #fff);
|
|
484
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
485
|
+
border-radius: 6px;
|
|
486
|
+
padding: 12px 16px;
|
|
367
487
|
white-space: pre-wrap;
|
|
368
488
|
word-break: break-word;
|
|
489
|
+
max-width: 720px;
|
|
490
|
+
margin-top: 4px;
|
|
369
491
|
}
|
|
370
492
|
|
|
493
|
+
// Actions hover (msg__actions maquette) : ghost links micro, opacity 0 -> 1
|
|
371
494
|
.messageActions {
|
|
372
495
|
display: flex;
|
|
373
|
-
gap:
|
|
374
|
-
margin-top:
|
|
496
|
+
gap: 12px;
|
|
497
|
+
margin-top: 4px;
|
|
498
|
+
font-size: 11px;
|
|
499
|
+
font-weight: 500;
|
|
500
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
501
|
+
opacity: 0;
|
|
502
|
+
transition: opacity 80ms ease;
|
|
375
503
|
}
|
|
376
504
|
|
|
505
|
+
.message:hover .messageActions { opacity: 1; }
|
|
506
|
+
|
|
377
507
|
.actionIcon {
|
|
378
|
-
width: 28px;
|
|
379
|
-
height: 28px;
|
|
380
508
|
border: none;
|
|
381
509
|
background: none;
|
|
382
510
|
cursor: pointer;
|
|
383
|
-
|
|
384
|
-
font-size:
|
|
385
|
-
|
|
386
|
-
|
|
511
|
+
padding: 0;
|
|
512
|
+
font-size: 11px;
|
|
513
|
+
font-weight: 500;
|
|
514
|
+
line-height: 1.3;
|
|
515
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
516
|
+
display: inline-flex;
|
|
387
517
|
align-items: center;
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
518
|
+
height: auto;
|
|
519
|
+
width: auto;
|
|
520
|
+
transition: color 80ms ease;
|
|
521
|
+
&:hover { color: var(--theme-text); background: transparent; }
|
|
522
|
+
&.danger:hover { color: var(--theme-error-500, #c4392c); }
|
|
392
523
|
}
|
|
393
524
|
|
|
394
525
|
// ─── TYPING ───
|
|
@@ -418,232 +549,246 @@
|
|
|
418
549
|
30% { transform: translateY(-4px); }
|
|
419
550
|
}
|
|
420
551
|
|
|
421
|
-
// ─── COMPOSER ───
|
|
552
|
+
// ─── COMPOSER (maquette : assist-row + box + footer) ───
|
|
553
|
+
// Le composer maquette englobe : un assist row au-dessus, une box avec toolbar+editor,
|
|
554
|
+
// puis un footer séparé. Pas de border-radius global, fond elevation-bg.
|
|
422
555
|
.composer {
|
|
423
|
-
border: 1px solid var(--theme-elevation-
|
|
424
|
-
|
|
425
|
-
|
|
556
|
+
border-top: 1px solid var(--theme-elevation-150, var(--theme-input-border));
|
|
557
|
+
background: var(--theme-bg);
|
|
558
|
+
padding: 12px 24px 16px;
|
|
559
|
+
flex-shrink: 0;
|
|
426
560
|
position: relative;
|
|
427
|
-
|
|
428
|
-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
|
429
|
-
transition: border-color 150ms, box-shadow 150ms, background 150ms;
|
|
430
|
-
|
|
431
|
-
&:focus-within {
|
|
432
|
-
border-color: var(--theme-info-500, #2a6bd8);
|
|
433
|
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
|
|
434
|
-
}
|
|
561
|
+
transition: background 150ms;
|
|
435
562
|
}
|
|
436
563
|
|
|
564
|
+
// Mode note interne : fond warning-50 sur tout le composer
|
|
437
565
|
.composerInternal {
|
|
438
|
-
background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 8%, var(--theme-
|
|
439
|
-
border-color: var(--theme-warning-500, #c97a0a);
|
|
440
|
-
border-style: dashed;
|
|
441
|
-
|
|
442
|
-
&:focus-within {
|
|
443
|
-
border-color: var(--theme-warning-500, #c97a0a);
|
|
444
|
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-warning-500, #c97a0a) 18%, transparent);
|
|
445
|
-
}
|
|
566
|
+
background: color-mix(in srgb, var(--theme-warning-500, #c97a0a) 8%, var(--theme-bg));
|
|
446
567
|
}
|
|
447
568
|
|
|
448
|
-
//
|
|
569
|
+
// Drag & drop : surbrillance info
|
|
449
570
|
.composerDragOver {
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
|
|
571
|
+
background: color-mix(in srgb, var(--theme-info-500, #2a6bd8) 6%, var(--theme-bg));
|
|
572
|
+
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 30%, transparent);
|
|
453
573
|
}
|
|
454
574
|
|
|
575
|
+
// Assist row (composer__assist maquette) : ligne au-dessus de la box
|
|
576
|
+
// Boutons type "pill" : IA / Reformuler / Templates / Code / Fichier
|
|
455
577
|
.composerToolbar {
|
|
456
578
|
display: flex;
|
|
457
|
-
gap:
|
|
458
|
-
padding: 8px
|
|
459
|
-
border-bottom: 1px solid var(--theme-elevation-100, #f8fafc);
|
|
579
|
+
gap: 8px;
|
|
580
|
+
padding: 0 0 8px;
|
|
460
581
|
align-items: center;
|
|
582
|
+
flex-wrap: wrap;
|
|
583
|
+
border-bottom: 0;
|
|
461
584
|
}
|
|
462
585
|
|
|
586
|
+
// Toolbar buttons (assist-btn maquette) : pill 26px, micro typo
|
|
463
587
|
.toolbarBtn {
|
|
464
|
-
|
|
465
|
-
height: 32px;
|
|
466
|
-
border-radius: 6px;
|
|
467
|
-
border: none;
|
|
468
|
-
background: none;
|
|
469
|
-
cursor: pointer;
|
|
470
|
-
font-size: 15px;
|
|
471
|
-
color: var(--theme-elevation-500);
|
|
472
|
-
display: flex;
|
|
588
|
+
display: inline-flex;
|
|
473
589
|
align-items: center;
|
|
474
|
-
|
|
475
|
-
|
|
590
|
+
gap: 6px;
|
|
591
|
+
height: 26px;
|
|
592
|
+
padding: 0 8px;
|
|
593
|
+
border-radius: 4px;
|
|
594
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
595
|
+
background: var(--theme-bg);
|
|
596
|
+
cursor: pointer;
|
|
597
|
+
font-size: 11px;
|
|
598
|
+
font-weight: 500;
|
|
599
|
+
line-height: 1;
|
|
600
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
601
|
+
transition: background 80ms ease, color 80ms ease;
|
|
476
602
|
position: relative;
|
|
603
|
+
width: auto;
|
|
477
604
|
|
|
478
605
|
&:hover {
|
|
479
|
-
background: var(--theme-elevation-
|
|
606
|
+
background: var(--theme-elevation-50);
|
|
480
607
|
color: var(--theme-text);
|
|
481
608
|
}
|
|
482
609
|
|
|
483
|
-
&:disabled { opacity: 0.
|
|
610
|
+
&:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
484
611
|
}
|
|
485
612
|
|
|
486
|
-
//
|
|
613
|
+
// Bouton IA — accent purple, pill style
|
|
487
614
|
.toolbarBtnAi {
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
padding: 0 10px;
|
|
491
|
-
font-size: 11px;
|
|
492
|
-
font-weight: 600;
|
|
493
|
-
background: color-mix(in srgb, var(--theme-accent-500, #6b46e8) 12%, transparent);
|
|
494
|
-
border: 1px solid color-mix(in srgb, var(--theme-accent-500, #6b46e8) 30%, transparent);
|
|
615
|
+
background: var(--theme-accent-50, color-mix(in srgb, var(--theme-accent-500, #6b46e8) 10%, transparent));
|
|
616
|
+
border-color: color-mix(in srgb, var(--theme-accent-500, #6b46e8) 25%, transparent);
|
|
495
617
|
color: var(--theme-accent-500, #6b46e8);
|
|
496
|
-
gap: 4px;
|
|
497
618
|
|
|
498
619
|
&:hover:not(:disabled) {
|
|
499
|
-
background: color-mix(in srgb, var(--theme-accent-500, #6b46e8)
|
|
620
|
+
background: color-mix(in srgb, var(--theme-accent-500, #6b46e8) 12%, var(--theme-bg));
|
|
500
621
|
color: var(--theme-accent-500, #6b46e8);
|
|
501
622
|
}
|
|
502
623
|
}
|
|
503
624
|
|
|
625
|
+
// Tooltip sur toolbarBtn (data-tooltip)
|
|
504
626
|
.toolbarBtn {
|
|
505
|
-
|
|
506
|
-
// Tooltip
|
|
507
627
|
&::after {
|
|
508
628
|
content: attr(data-tooltip);
|
|
509
629
|
position: absolute;
|
|
510
|
-
bottom: -
|
|
630
|
+
bottom: -26px;
|
|
511
631
|
left: 50%;
|
|
512
632
|
transform: translateX(-50%);
|
|
513
633
|
padding: 3px 8px;
|
|
514
634
|
border-radius: 4px;
|
|
515
635
|
background: var(--theme-text);
|
|
516
|
-
color: var(--theme-
|
|
636
|
+
color: var(--theme-bg, #fff);
|
|
517
637
|
font-size: 10px;
|
|
518
|
-
font-weight:
|
|
638
|
+
font-weight: 500;
|
|
519
639
|
white-space: nowrap;
|
|
520
640
|
opacity: 0;
|
|
521
641
|
pointer-events: none;
|
|
522
642
|
transition: opacity 100ms;
|
|
643
|
+
z-index: 10;
|
|
523
644
|
}
|
|
524
645
|
&:hover::after { opacity: 1; }
|
|
525
646
|
}
|
|
526
647
|
|
|
648
|
+
// Séparateur dans assist row : line vertical 16px
|
|
527
649
|
.toolbarDivider {
|
|
528
650
|
width: 1px;
|
|
529
|
-
height:
|
|
530
|
-
background: var(--theme-elevation-200);
|
|
651
|
+
height: 16px;
|
|
652
|
+
background: var(--theme-elevation-200, var(--theme-input-border));
|
|
531
653
|
margin: 0 4px;
|
|
532
654
|
}
|
|
533
655
|
|
|
656
|
+
// Réponses types / macros select : aligné sur les pills assist
|
|
534
657
|
.cannedSelect {
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
658
|
+
display: inline-flex;
|
|
659
|
+
align-items: center;
|
|
660
|
+
height: 26px;
|
|
661
|
+
padding: 0 8px;
|
|
662
|
+
border-radius: 4px;
|
|
663
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
664
|
+
background: var(--theme-bg);
|
|
539
665
|
font-size: 11px;
|
|
540
|
-
font-weight:
|
|
541
|
-
color: var(--theme-elevation-
|
|
666
|
+
font-weight: 500;
|
|
667
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
542
668
|
cursor: pointer;
|
|
543
669
|
margin-left: auto;
|
|
544
|
-
&:hover { background: var(--theme-elevation-
|
|
670
|
+
&:hover { background: var(--theme-elevation-50); }
|
|
545
671
|
}
|
|
546
672
|
|
|
673
|
+
// Composer footer (maquette) : ligne séparée avec selects + toggles + send
|
|
547
674
|
.composerFooter {
|
|
548
675
|
display: flex;
|
|
549
|
-
justify-content:
|
|
676
|
+
justify-content: flex-start;
|
|
550
677
|
align-items: center;
|
|
551
|
-
|
|
552
|
-
|
|
678
|
+
gap: 12px;
|
|
679
|
+
padding: 8px 0 0;
|
|
680
|
+
border-top: 0;
|
|
553
681
|
}
|
|
554
682
|
|
|
555
683
|
.composerOptions {
|
|
556
684
|
display: flex;
|
|
557
|
-
gap:
|
|
685
|
+
gap: 12px;
|
|
558
686
|
align-items: center;
|
|
559
687
|
font-size: 12px;
|
|
560
|
-
|
|
688
|
+
font-weight: 500;
|
|
689
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
561
690
|
|
|
562
691
|
label {
|
|
563
|
-
display: flex;
|
|
692
|
+
display: inline-flex;
|
|
564
693
|
align-items: center;
|
|
565
|
-
gap:
|
|
694
|
+
gap: 8px;
|
|
566
695
|
cursor: pointer;
|
|
567
696
|
font-weight: 500;
|
|
568
697
|
user-select: none;
|
|
698
|
+
transition: color 120ms ease;
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
// Note interne (1er label) : warning quand cochee
|
|
702
|
+
// Notifier (2e label) : info quand cochee
|
|
703
|
+
// Approximation via :has() — supportee Chrome/Safari/FF >= 121
|
|
704
|
+
> label:nth-of-type(1):has(input:checked) {
|
|
705
|
+
color: var(--theme-warning-500, #c97a0a);
|
|
706
|
+
input[type="checkbox"]:checked { background: var(--theme-warning-500, #c97a0a); }
|
|
707
|
+
}
|
|
708
|
+
> label:nth-of-type(2):has(input:checked) {
|
|
709
|
+
color: var(--theme-info-500, #2a6bd8);
|
|
569
710
|
}
|
|
570
711
|
|
|
571
|
-
//
|
|
712
|
+
// Toggle switch (toggle__sw maquette) : 28×16, info-500 quand checked
|
|
572
713
|
input[type="checkbox"] {
|
|
573
714
|
appearance: none;
|
|
574
715
|
-webkit-appearance: none;
|
|
575
|
-
width:
|
|
576
|
-
height:
|
|
577
|
-
border-radius:
|
|
578
|
-
background: var(--theme-elevation-
|
|
716
|
+
width: 28px;
|
|
717
|
+
height: 16px;
|
|
718
|
+
border-radius: 999px;
|
|
719
|
+
background: var(--theme-elevation-200, var(--theme-input-border));
|
|
579
720
|
position: relative;
|
|
580
721
|
cursor: pointer;
|
|
581
|
-
transition: background
|
|
722
|
+
transition: background 120ms ease;
|
|
723
|
+
margin: 0;
|
|
582
724
|
|
|
583
725
|
&::after {
|
|
584
726
|
content: '';
|
|
585
727
|
position: absolute;
|
|
586
728
|
top: 2px;
|
|
587
729
|
left: 2px;
|
|
588
|
-
width:
|
|
589
|
-
height:
|
|
730
|
+
width: 12px;
|
|
731
|
+
height: 12px;
|
|
590
732
|
border-radius: 50%;
|
|
591
|
-
background: #fff;
|
|
592
|
-
|
|
593
|
-
|
|
733
|
+
background: var(--theme-bg, #fff);
|
|
734
|
+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
|
|
735
|
+
transition: left 120ms ease;
|
|
594
736
|
}
|
|
595
737
|
|
|
596
738
|
&:checked {
|
|
597
|
-
background: #
|
|
598
|
-
&::after {
|
|
739
|
+
background: var(--theme-info-500, #2a6bd8);
|
|
740
|
+
&::after { left: 14px; }
|
|
599
741
|
}
|
|
600
742
|
}
|
|
601
743
|
}
|
|
602
744
|
|
|
745
|
+
// Raccourci clavier : kbd style maquette (1px 5px)
|
|
603
746
|
.sendShortcut {
|
|
604
747
|
display: inline-flex;
|
|
605
748
|
align-items: center;
|
|
606
|
-
gap:
|
|
607
|
-
color: var(--theme-elevation-
|
|
749
|
+
gap: 4px;
|
|
750
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
608
751
|
font-size: 11px;
|
|
609
|
-
|
|
752
|
+
font-weight: 500;
|
|
753
|
+
margin-left: auto;
|
|
610
754
|
|
|
611
755
|
kbd {
|
|
612
756
|
display: inline-flex;
|
|
613
757
|
align-items: center;
|
|
614
758
|
justify-content: center;
|
|
615
|
-
|
|
616
|
-
height: 18px;
|
|
617
|
-
padding: 0 4px;
|
|
759
|
+
padding: 1px 5px;
|
|
618
760
|
border-radius: 3px;
|
|
619
761
|
background: var(--theme-elevation-100);
|
|
620
|
-
border: 1px solid var(--theme-elevation-200);
|
|
762
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
621
763
|
font-family: inherit;
|
|
622
|
-
font-size:
|
|
623
|
-
font-weight:
|
|
624
|
-
|
|
764
|
+
font-size: 11px;
|
|
765
|
+
font-weight: 500;
|
|
766
|
+
line-height: 1.3;
|
|
767
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
625
768
|
}
|
|
626
769
|
}
|
|
627
770
|
|
|
771
|
+
// Send button (btn--primary maquette) : fond theme-text, color theme-bg
|
|
628
772
|
.sendBtn {
|
|
629
|
-
|
|
630
|
-
|
|
773
|
+
display: inline-flex;
|
|
774
|
+
align-items: center;
|
|
775
|
+
gap: 8px;
|
|
776
|
+
height: 32px;
|
|
777
|
+
padding: 0 12px;
|
|
778
|
+
border-radius: 4px;
|
|
631
779
|
border: 1px solid var(--theme-text);
|
|
632
780
|
background: var(--theme-text);
|
|
633
781
|
color: var(--theme-bg, #fff);
|
|
634
|
-
font-size:
|
|
635
|
-
font-weight:
|
|
782
|
+
font-size: 12px;
|
|
783
|
+
font-weight: 500;
|
|
636
784
|
cursor: pointer;
|
|
637
|
-
transition: background
|
|
638
|
-
display: flex;
|
|
639
|
-
align-items: center;
|
|
640
|
-
gap: 6px;
|
|
785
|
+
transition: background 80ms ease, border-color 80ms ease;
|
|
641
786
|
|
|
642
787
|
&:hover {
|
|
643
788
|
background: var(--theme-elevation-800);
|
|
644
789
|
border-color: var(--theme-elevation-800);
|
|
645
790
|
}
|
|
646
|
-
&:disabled { opacity: 0.
|
|
791
|
+
&:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
647
792
|
}
|
|
648
793
|
|
|
649
794
|
.sendBtnInternal {
|
|
@@ -692,33 +837,70 @@
|
|
|
692
837
|
&:hover { background: var(--theme-elevation-100); }
|
|
693
838
|
}
|
|
694
839
|
|
|
695
|
-
//
|
|
840
|
+
// ─── Time tracker (tt maquette) ───
|
|
841
|
+
// Maquette : grid 1fr auto (display + sub | go-btn), display monospace 22px 600
|
|
696
842
|
.timer {
|
|
697
|
-
display:
|
|
843
|
+
display: grid;
|
|
844
|
+
grid-template-columns: 1fr auto;
|
|
698
845
|
align-items: center;
|
|
699
|
-
gap:
|
|
846
|
+
gap: 12px;
|
|
700
847
|
}
|
|
701
848
|
|
|
702
849
|
.timerDisplay {
|
|
703
|
-
font-family: 'SF Mono', '
|
|
704
|
-
font-size:
|
|
705
|
-
font-weight:
|
|
850
|
+
font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
|
|
851
|
+
font-size: 22px;
|
|
852
|
+
font-weight: 600;
|
|
853
|
+
line-height: 1.3;
|
|
706
854
|
color: var(--theme-text);
|
|
707
855
|
letter-spacing: 0.02em;
|
|
856
|
+
font-variant-numeric: tabular-nums;
|
|
708
857
|
|
|
709
|
-
&.timerActive { color: #
|
|
858
|
+
&.timerActive { color: var(--theme-error-500, #c4392c); }
|
|
710
859
|
}
|
|
711
860
|
|
|
861
|
+
// Bouton Go / Pause / Save (tt__go maquette) :
|
|
862
|
+
// - "paused" (Go) : bg theme-text, color theme-bg (carré sombre, contrasté)
|
|
863
|
+
// - "running" (Pause) : bg error-500, color white (stop visible)
|
|
864
|
+
// - "save" (💾) : ghost neutre theme-bg + border elevation-200
|
|
865
|
+
// Approximation : on neutralise par défaut, et les classes appellantes appliquent le style.
|
|
712
866
|
.timerBtn {
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
867
|
+
display: inline-flex;
|
|
868
|
+
align-items: center;
|
|
869
|
+
justify-content: center;
|
|
870
|
+
gap: 6px;
|
|
871
|
+
height: 30px;
|
|
872
|
+
padding: 0 12px;
|
|
873
|
+
border-radius: 4px;
|
|
874
|
+
border: 1px solid var(--theme-text);
|
|
875
|
+
background: var(--theme-text);
|
|
876
|
+
color: var(--theme-bg, #fff);
|
|
717
877
|
font-size: 12px;
|
|
718
|
-
font-weight:
|
|
878
|
+
font-weight: 600;
|
|
719
879
|
cursor: pointer;
|
|
720
|
-
transition:
|
|
721
|
-
|
|
880
|
+
transition: background 80ms ease, border-color 80ms ease;
|
|
881
|
+
white-space: nowrap;
|
|
882
|
+
&:hover { background: var(--theme-elevation-800); border-color: var(--theme-elevation-800); }
|
|
883
|
+
&:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
// Variante running (tt__go--running maquette) : bg error-500 quand le timer tourne
|
|
887
|
+
.timerBtnRunning {
|
|
888
|
+
background: var(--theme-error-500, #c4392c);
|
|
889
|
+
border-color: var(--theme-error-500, #c4392c);
|
|
890
|
+
color: #fff;
|
|
891
|
+
&:hover {
|
|
892
|
+
background: color-mix(in srgb, var(--theme-error-500, #c4392c) 85%, black);
|
|
893
|
+
border-color: color-mix(in srgb, var(--theme-error-500, #c4392c) 85%, black);
|
|
894
|
+
}
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
// Variante "ghost" pour les boutons secondaires (Save / + Ajouter) : neutre, evite le carre noir partout
|
|
898
|
+
.timerBtnGhost {
|
|
899
|
+
background: var(--theme-bg);
|
|
900
|
+
border-color: var(--theme-elevation-200, var(--theme-input-border));
|
|
901
|
+
color: var(--theme-text);
|
|
902
|
+
font-weight: 500;
|
|
903
|
+
&:hover { background: var(--theme-elevation-100); border-color: var(--theme-elevation-200, var(--theme-input-border)); }
|
|
722
904
|
}
|
|
723
905
|
|
|
724
906
|
// Activity in sidebar
|
|
@@ -932,63 +1114,80 @@
|
|
|
932
1114
|
to { opacity: 1; }
|
|
933
1115
|
}
|
|
934
1116
|
|
|
935
|
-
// ─── TAGS (
|
|
1117
|
+
// ─── TAGS (.tag maquette) ───
|
|
1118
|
+
// Maquette : tag 20px height, padding 8px, bg elevation-100, border input-border
|
|
936
1119
|
.tagsWrap {
|
|
937
1120
|
display: flex;
|
|
938
1121
|
flex-wrap: wrap;
|
|
939
1122
|
gap: 6px;
|
|
940
|
-
margin-top:
|
|
1123
|
+
margin-top: 0;
|
|
941
1124
|
}
|
|
942
1125
|
|
|
943
1126
|
.tagChip {
|
|
944
1127
|
display: inline-flex;
|
|
945
1128
|
align-items: center;
|
|
946
1129
|
gap: 4px;
|
|
947
|
-
|
|
948
|
-
|
|
1130
|
+
height: 20px;
|
|
1131
|
+
padding: 0 4px 0 8px;
|
|
1132
|
+
border-radius: 4px;
|
|
949
1133
|
background: var(--theme-elevation-100);
|
|
1134
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
950
1135
|
font-size: 11px;
|
|
951
|
-
font-weight:
|
|
952
|
-
|
|
1136
|
+
font-weight: 500;
|
|
1137
|
+
line-height: 1;
|
|
1138
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
953
1139
|
}
|
|
954
1140
|
|
|
955
1141
|
.tagRemove {
|
|
956
|
-
background:
|
|
1142
|
+
background: transparent;
|
|
957
1143
|
border: none;
|
|
958
1144
|
cursor: pointer;
|
|
959
|
-
font-size:
|
|
1145
|
+
font-size: 11px;
|
|
960
1146
|
line-height: 1;
|
|
961
|
-
color: var(--theme-elevation-
|
|
1147
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
962
1148
|
padding: 0;
|
|
963
|
-
display: flex;
|
|
1149
|
+
display: inline-flex;
|
|
964
1150
|
align-items: center;
|
|
965
|
-
transition: color 80ms;
|
|
966
|
-
&:hover { color: #
|
|
1151
|
+
transition: color 80ms ease;
|
|
1152
|
+
&:hover { color: var(--theme-error-500, #c4392c); }
|
|
967
1153
|
}
|
|
968
1154
|
|
|
1155
|
+
// Bouton "+ Ajouter" : dashed border, micro typo, tertiary color
|
|
969
1156
|
.tagAddBtn {
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
1157
|
+
display: inline-flex;
|
|
1158
|
+
align-items: center;
|
|
1159
|
+
gap: 4px;
|
|
1160
|
+
height: 20px;
|
|
1161
|
+
padding: 0 8px;
|
|
1162
|
+
border-radius: 4px;
|
|
1163
|
+
border: 1px dashed var(--theme-elevation-300, var(--theme-input-border));
|
|
1164
|
+
background: transparent;
|
|
974
1165
|
font-size: 11px;
|
|
975
|
-
font-weight:
|
|
976
|
-
|
|
1166
|
+
font-weight: 500;
|
|
1167
|
+
line-height: 1;
|
|
1168
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
977
1169
|
cursor: pointer;
|
|
978
|
-
transition:
|
|
979
|
-
&:hover {
|
|
1170
|
+
transition: border-color 80ms ease, color 80ms ease;
|
|
1171
|
+
&:hover {
|
|
1172
|
+
border-color: var(--theme-info-500, #2a6bd8);
|
|
1173
|
+
color: var(--theme-info-500, #2a6bd8);
|
|
1174
|
+
}
|
|
980
1175
|
}
|
|
981
1176
|
|
|
982
1177
|
.tagInput {
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
border:
|
|
1178
|
+
height: 20px;
|
|
1179
|
+
padding: 0 8px;
|
|
1180
|
+
border-radius: 4px;
|
|
1181
|
+
border: 1px solid var(--theme-info-500, #2a6bd8);
|
|
986
1182
|
font-size: 11px;
|
|
987
|
-
font-weight:
|
|
1183
|
+
font-weight: 500;
|
|
988
1184
|
color: var(--theme-text);
|
|
989
|
-
background: var(--theme-
|
|
1185
|
+
background: var(--theme-bg);
|
|
990
1186
|
width: 100px;
|
|
991
|
-
&:focus {
|
|
1187
|
+
&:focus {
|
|
1188
|
+
outline: none;
|
|
1189
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
|
|
1190
|
+
}
|
|
992
1191
|
}
|
|
993
1192
|
|
|
994
1193
|
// ─── FILE UPLOAD PREVIEW (#5) ───
|
|
@@ -1133,28 +1332,30 @@
|
|
|
1133
1332
|
}
|
|
1134
1333
|
}
|
|
1135
1334
|
|
|
1136
|
-
// ─── SLA BREACH BANNER ───
|
|
1137
|
-
//
|
|
1138
|
-
//
|
|
1335
|
+
// ─── SLA BREACH BANNER (sla-banner maquette) ───
|
|
1336
|
+
// Maquette : background error-50, border error-500 25%, icon rond bg blanc,
|
|
1337
|
+
// body avec strong rouge, CTA "Escalader" pill style avec icône arrow-up
|
|
1139
1338
|
.slaBanner {
|
|
1140
1339
|
display: flex;
|
|
1141
1340
|
align-items: center;
|
|
1142
1341
|
gap: 12px;
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
border-radius:
|
|
1146
|
-
background: color-mix(in srgb, var(--theme-error-500, #c4392c) 8%,
|
|
1147
|
-
border: 1px solid color-mix(in srgb, var(--theme-error-500, #c4392c)
|
|
1342
|
+
margin: 12px 24px 0;
|
|
1343
|
+
padding: 12px 16px;
|
|
1344
|
+
border-radius: 6px;
|
|
1345
|
+
background: var(--theme-error-50, color-mix(in srgb, var(--theme-error-500, #c4392c) 8%, var(--theme-bg)));
|
|
1346
|
+
border: 1px solid color-mix(in srgb, var(--theme-error-500, #c4392c) 25%, transparent);
|
|
1148
1347
|
color: var(--theme-error-500, #c4392c);
|
|
1149
1348
|
font-size: 13px;
|
|
1150
|
-
|
|
1349
|
+
font-weight: 400;
|
|
1350
|
+
line-height: 1.5;
|
|
1151
1351
|
}
|
|
1152
1352
|
|
|
1353
|
+
// Icône cercle blanc (sla-banner__icon maquette) : 28×28 bg = theme-bg
|
|
1153
1354
|
.slaBannerIcon {
|
|
1154
1355
|
width: 28px;
|
|
1155
1356
|
height: 28px;
|
|
1156
1357
|
border-radius: 50%;
|
|
1157
|
-
background: var(--theme-
|
|
1358
|
+
background: var(--theme-bg);
|
|
1158
1359
|
color: var(--theme-error-500, #c4392c);
|
|
1159
1360
|
display: inline-flex;
|
|
1160
1361
|
align-items: center;
|
|
@@ -1164,45 +1365,52 @@
|
|
|
1164
1365
|
|
|
1165
1366
|
.slaBannerBody {
|
|
1166
1367
|
flex: 1;
|
|
1167
|
-
display: flex;
|
|
1368
|
+
display: inline-flex;
|
|
1168
1369
|
align-items: baseline;
|
|
1169
1370
|
flex-wrap: wrap;
|
|
1170
|
-
gap:
|
|
1371
|
+
gap: 4px;
|
|
1372
|
+
font-size: 13px;
|
|
1373
|
+
line-height: 1.5;
|
|
1171
1374
|
color: var(--theme-text);
|
|
1172
1375
|
|
|
1173
1376
|
strong {
|
|
1174
1377
|
color: var(--theme-error-500, #c4392c);
|
|
1175
|
-
font-weight:
|
|
1378
|
+
font-weight: 600;
|
|
1176
1379
|
}
|
|
1177
1380
|
}
|
|
1178
1381
|
|
|
1179
1382
|
.slaBannerSep {
|
|
1180
|
-
color: var(--theme-elevation-400);
|
|
1383
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-400));
|
|
1384
|
+
margin: 0 2px;
|
|
1181
1385
|
}
|
|
1182
1386
|
|
|
1183
1387
|
.slaBannerTarget {
|
|
1184
|
-
color: var(--theme-elevation-
|
|
1388
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
1185
1389
|
font-weight: 400;
|
|
1390
|
+
margin-left: 6px;
|
|
1186
1391
|
}
|
|
1187
1392
|
|
|
1393
|
+
// CTA Escalader (btn--sm maquette) : pill ghost avec icon arrow-up
|
|
1188
1394
|
.slaBannerCta {
|
|
1189
1395
|
display: inline-flex;
|
|
1190
1396
|
align-items: center;
|
|
1191
|
-
gap:
|
|
1192
|
-
|
|
1193
|
-
|
|
1397
|
+
gap: 6px;
|
|
1398
|
+
height: 26px;
|
|
1399
|
+
padding: 0 8px;
|
|
1400
|
+
border-radius: 4px;
|
|
1194
1401
|
border: 1px solid var(--theme-error-500, #c4392c);
|
|
1195
|
-
background: var(--theme-
|
|
1402
|
+
background: var(--theme-bg);
|
|
1196
1403
|
color: var(--theme-error-500, #c4392c);
|
|
1197
|
-
font-size:
|
|
1198
|
-
font-weight:
|
|
1404
|
+
font-size: 11px;
|
|
1405
|
+
font-weight: 500;
|
|
1199
1406
|
cursor: pointer;
|
|
1200
1407
|
white-space: nowrap;
|
|
1201
|
-
|
|
1408
|
+
margin-left: auto;
|
|
1409
|
+
transition: background 80ms ease;
|
|
1202
1410
|
|
|
1203
1411
|
&:hover {
|
|
1204
1412
|
background: var(--theme-error-500, #c4392c);
|
|
1205
|
-
color: var(--theme-
|
|
1413
|
+
color: var(--theme-bg);
|
|
1206
1414
|
}
|
|
1207
1415
|
|
|
1208
1416
|
&:focus-visible {
|
|
@@ -1211,70 +1419,76 @@
|
|
|
1211
1419
|
}
|
|
1212
1420
|
}
|
|
1213
1421
|
|
|
1214
|
-
// ─── AI SYNTHESIS CARD (promoted top of sidebar) ───
|
|
1422
|
+
// ─── AI SYNTHESIS CARD (ai-card maquette, promoted top of sidebar) ───
|
|
1423
|
+
// Gradient accent-50 → bg de 0% à 70%, bordure accent-25%, paddings 16px
|
|
1215
1424
|
.aiCard {
|
|
1216
1425
|
background: linear-gradient(180deg,
|
|
1217
|
-
color-mix(in srgb, var(--theme-accent-500, #6b46e8) 10%, transparent) 0%,
|
|
1218
|
-
var(--theme-
|
|
1426
|
+
var(--theme-accent-50, color-mix(in srgb, var(--theme-accent-500, #6b46e8) 10%, transparent)) 0%,
|
|
1427
|
+
var(--theme-bg) 70%) !important;
|
|
1219
1428
|
border: 1px solid color-mix(in srgb, var(--theme-accent-500, #6b46e8) 25%, transparent);
|
|
1429
|
+
border-bottom-color: color-mix(in srgb, var(--theme-accent-500, #6b46e8) 18%, transparent);
|
|
1220
1430
|
}
|
|
1221
1431
|
|
|
1432
|
+
// Title : t-micro uppercase accent-500
|
|
1222
1433
|
.aiCardTitle {
|
|
1223
1434
|
display: flex;
|
|
1224
1435
|
align-items: center;
|
|
1225
1436
|
gap: 6px;
|
|
1226
1437
|
font-size: 11px;
|
|
1227
|
-
font-weight:
|
|
1438
|
+
font-weight: 500;
|
|
1228
1439
|
text-transform: uppercase;
|
|
1229
|
-
letter-spacing: 0.
|
|
1440
|
+
letter-spacing: 0.08em;
|
|
1441
|
+
line-height: 1.3;
|
|
1230
1442
|
color: var(--theme-accent-500, #6b46e8);
|
|
1231
|
-
margin
|
|
1443
|
+
margin: 0 0 12px;
|
|
1232
1444
|
}
|
|
1233
1445
|
|
|
1446
|
+
// Icone sparkles — pas de fond, juste glyph (maquette : icon name="sparkles" size=11)
|
|
1234
1447
|
.aiCardIcon {
|
|
1235
1448
|
display: inline-flex;
|
|
1236
1449
|
align-items: center;
|
|
1237
1450
|
justify-content: center;
|
|
1238
|
-
width:
|
|
1239
|
-
height:
|
|
1240
|
-
border-radius: 50%;
|
|
1241
|
-
background: var(--theme-accent-500, #6b46e8);
|
|
1242
|
-
color: #fff;
|
|
1451
|
+
width: 14px;
|
|
1452
|
+
height: 14px;
|
|
1243
1453
|
font-size: 11px;
|
|
1244
|
-
|
|
1454
|
+
background: transparent;
|
|
1455
|
+
color: var(--theme-accent-500, #6b46e8);
|
|
1245
1456
|
}
|
|
1246
1457
|
|
|
1247
1458
|
.aiCardLead {
|
|
1248
|
-
font-size:
|
|
1249
|
-
line-height: 1.
|
|
1459
|
+
font-size: 13px;
|
|
1460
|
+
line-height: 1.5;
|
|
1250
1461
|
color: var(--theme-text);
|
|
1251
|
-
margin: 0 0
|
|
1462
|
+
margin: 0 0 12px;
|
|
1252
1463
|
text-wrap: pretty;
|
|
1253
1464
|
}
|
|
1254
1465
|
|
|
1255
1466
|
.aiCardChips {
|
|
1256
1467
|
display: flex;
|
|
1257
1468
|
flex-wrap: wrap;
|
|
1258
|
-
gap:
|
|
1259
|
-
margin-bottom:
|
|
1469
|
+
gap: 6px;
|
|
1470
|
+
margin-bottom: 12px;
|
|
1260
1471
|
}
|
|
1261
1472
|
|
|
1473
|
+
// AI chip : pill plein arrondi avec bg theme-bg + border, t-micro
|
|
1262
1474
|
.aiChip {
|
|
1263
1475
|
display: inline-flex;
|
|
1264
1476
|
align-items: center;
|
|
1265
|
-
|
|
1477
|
+
height: 18px;
|
|
1478
|
+
padding: 0 8px;
|
|
1266
1479
|
border-radius: 999px;
|
|
1267
|
-
font-size:
|
|
1268
|
-
font-weight:
|
|
1480
|
+
font-size: 11px;
|
|
1481
|
+
font-weight: 500;
|
|
1482
|
+
line-height: 1;
|
|
1269
1483
|
color: var(--theme-text);
|
|
1270
|
-
background: var(--theme-
|
|
1271
|
-
border: 1px solid var(--theme-elevation-200);
|
|
1484
|
+
background: var(--theme-bg);
|
|
1485
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
1272
1486
|
}
|
|
1273
1487
|
|
|
1274
1488
|
.aiCardFacts {
|
|
1275
1489
|
list-style: none;
|
|
1276
1490
|
padding: 0;
|
|
1277
|
-
margin: 0;
|
|
1491
|
+
margin: 0 0 12px;
|
|
1278
1492
|
display: flex;
|
|
1279
1493
|
flex-direction: column;
|
|
1280
1494
|
gap: 6px;
|
|
@@ -1283,12 +1497,13 @@
|
|
|
1283
1497
|
.aiCardFact {
|
|
1284
1498
|
display: flex;
|
|
1285
1499
|
align-items: flex-start;
|
|
1286
|
-
gap:
|
|
1287
|
-
font-size:
|
|
1500
|
+
gap: 8px;
|
|
1501
|
+
font-size: 13px;
|
|
1288
1502
|
line-height: 1.5;
|
|
1289
1503
|
color: var(--theme-text);
|
|
1290
1504
|
}
|
|
1291
1505
|
|
|
1506
|
+
// Dot par défaut accent — voir aiCardDotOpen/Resolved/Risk pour variants
|
|
1292
1507
|
.aiCardDot {
|
|
1293
1508
|
display: inline-block;
|
|
1294
1509
|
width: 6px;
|
|
@@ -1299,19 +1514,18 @@
|
|
|
1299
1514
|
flex-shrink: 0;
|
|
1300
1515
|
}
|
|
1301
1516
|
|
|
1302
|
-
// ─── SIDEBAR TABS (
|
|
1303
|
-
//
|
|
1304
|
-
//
|
|
1305
|
-
// text color and lift to primary on hover. All colors come from
|
|
1306
|
-
// --theme-* tokens to stay coherent with light/dark themes.
|
|
1517
|
+
// ─── SIDEBAR TABS (sp__tabs maquette) ───
|
|
1518
|
+
// Maquette : sticky top:0, padding horizontal 12px, gap 4px,
|
|
1519
|
+
// onglet actif souligné 2px theme-text, tabs label maquette
|
|
1307
1520
|
.sidebarTabs {
|
|
1308
1521
|
position: sticky;
|
|
1309
1522
|
top: 0;
|
|
1310
1523
|
z-index: 2;
|
|
1311
1524
|
display: flex;
|
|
1312
|
-
gap:
|
|
1525
|
+
gap: 4px;
|
|
1526
|
+
padding: 0 12px;
|
|
1313
1527
|
background: var(--theme-bg);
|
|
1314
|
-
border-bottom: 1px solid var(--theme-elevation-150,
|
|
1528
|
+
border-bottom: 1px solid var(--theme-elevation-150, var(--theme-input-border));
|
|
1315
1529
|
}
|
|
1316
1530
|
|
|
1317
1531
|
.sidebarTab {
|
|
@@ -1320,22 +1534,23 @@
|
|
|
1320
1534
|
background: transparent;
|
|
1321
1535
|
border: 0;
|
|
1322
1536
|
border-bottom: 2px solid transparent;
|
|
1323
|
-
padding:
|
|
1537
|
+
padding: 12px 8px;
|
|
1324
1538
|
font-size: 12px;
|
|
1325
|
-
font-weight:
|
|
1326
|
-
|
|
1539
|
+
font-weight: 500;
|
|
1540
|
+
line-height: 1.4;
|
|
1541
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
1327
1542
|
cursor: pointer;
|
|
1328
1543
|
transition: color 120ms ease, border-color 120ms ease;
|
|
1329
1544
|
text-align: center;
|
|
1330
|
-
line-height: 1.2;
|
|
1331
1545
|
|
|
1332
1546
|
&:hover {
|
|
1333
1547
|
color: var(--theme-text);
|
|
1334
1548
|
}
|
|
1335
1549
|
|
|
1336
1550
|
&:focus-visible {
|
|
1337
|
-
outline:
|
|
1338
|
-
|
|
1551
|
+
outline: 0;
|
|
1552
|
+
box-shadow: 0 0 0 2px var(--theme-bg), 0 0 0 4px var(--theme-info-500, #2a6bd8);
|
|
1553
|
+
border-radius: 4px;
|
|
1339
1554
|
}
|
|
1340
1555
|
}
|
|
1341
1556
|
|
|
@@ -1411,15 +1626,18 @@
|
|
|
1411
1626
|
padding: 8px 0;
|
|
1412
1627
|
}
|
|
1413
1628
|
|
|
1414
|
-
// AI
|
|
1629
|
+
// ─── AI SUGGESTION preview (ai-suggest maquette) ───
|
|
1630
|
+
// Bandeau placé au-dessus du composer, grid auto 1fr auto (icon | body | actions)
|
|
1415
1631
|
.aiSuggestionPreview {
|
|
1416
|
-
margin
|
|
1632
|
+
margin: 0 24px 12px;
|
|
1633
|
+
border: 1px solid color-mix(in srgb, var(--theme-accent-500, #6b46e8) 25%, transparent);
|
|
1634
|
+
border-radius: 6px;
|
|
1635
|
+
background: var(--theme-accent-50, color-mix(in srgb, var(--theme-accent-500, #6b46e8) 10%, transparent));
|
|
1417
1636
|
padding: 12px 16px;
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
border: 1px solid color-mix(in srgb, var(--theme-accent-500, #6b46e8) 30%, transparent);
|
|
1637
|
+
display: grid;
|
|
1638
|
+
grid-template-columns: auto 1fr auto;
|
|
1639
|
+
gap: 12px;
|
|
1640
|
+
align-items: center;
|
|
1423
1641
|
animation: ai-suggest-in 200ms ease-out;
|
|
1424
1642
|
}
|
|
1425
1643
|
|
|
@@ -1428,80 +1646,80 @@
|
|
|
1428
1646
|
to { opacity: 1; transform: translateY(0); }
|
|
1429
1647
|
}
|
|
1430
1648
|
|
|
1649
|
+
// Le header n'est plus séparé : icon → label/body en colonne dans la grid
|
|
1431
1650
|
.aiSuggestionPreviewHeader {
|
|
1432
|
-
display:
|
|
1433
|
-
align-items: center;
|
|
1434
|
-
gap: 8px;
|
|
1435
|
-
margin-bottom: 8px;
|
|
1651
|
+
display: contents;
|
|
1436
1652
|
}
|
|
1437
1653
|
|
|
1654
|
+
// Icon ronde 28×28 avec sparkles, full accent
|
|
1438
1655
|
.aiSuggestionIcon {
|
|
1439
|
-
width:
|
|
1440
|
-
height:
|
|
1656
|
+
width: 28px;
|
|
1657
|
+
height: 28px;
|
|
1441
1658
|
border-radius: 50%;
|
|
1442
1659
|
background: var(--theme-accent-500, #6b46e8);
|
|
1443
1660
|
color: #fff;
|
|
1444
1661
|
display: inline-flex;
|
|
1445
1662
|
align-items: center;
|
|
1446
1663
|
justify-content: center;
|
|
1447
|
-
font-size:
|
|
1664
|
+
font-size: 13px;
|
|
1448
1665
|
font-weight: 700;
|
|
1666
|
+
grid-row: 1 / span 2;
|
|
1449
1667
|
}
|
|
1450
1668
|
|
|
1669
|
+
// Label uppercase + ellipsis ; appliqué au bloc central via colonne 2
|
|
1451
1670
|
.aiSuggestionLabel {
|
|
1671
|
+
grid-column: 2;
|
|
1452
1672
|
font-size: 11px;
|
|
1453
|
-
font-weight:
|
|
1673
|
+
font-weight: 500;
|
|
1454
1674
|
text-transform: uppercase;
|
|
1455
|
-
letter-spacing: 0.
|
|
1675
|
+
letter-spacing: 0.08em;
|
|
1676
|
+
line-height: 1.3;
|
|
1456
1677
|
color: var(--theme-accent-500, #6b46e8);
|
|
1457
|
-
flex: 1;
|
|
1458
1678
|
}
|
|
1459
1679
|
|
|
1460
1680
|
.aiSuggestionDismiss {
|
|
1461
|
-
|
|
1462
|
-
height: 24px;
|
|
1463
|
-
border-radius: 6px;
|
|
1464
|
-
border: 0;
|
|
1465
|
-
background: none;
|
|
1466
|
-
cursor: pointer;
|
|
1467
|
-
color: var(--theme-text-tertiary);
|
|
1468
|
-
font-size: 18px;
|
|
1469
|
-
line-height: 1;
|
|
1470
|
-
|
|
1471
|
-
&:hover {
|
|
1472
|
-
background: var(--theme-elevation-100);
|
|
1473
|
-
color: var(--theme-text);
|
|
1474
|
-
}
|
|
1681
|
+
display: none; // dismiss via les boutons d'action — pas de croix en plus
|
|
1475
1682
|
}
|
|
1476
1683
|
|
|
1684
|
+
// Body : 3-line clamp, t-body-sm
|
|
1477
1685
|
.aiSuggestionBody {
|
|
1686
|
+
grid-column: 2;
|
|
1478
1687
|
font-size: 13px;
|
|
1479
|
-
line-height: 1.
|
|
1688
|
+
line-height: 1.5;
|
|
1480
1689
|
color: var(--theme-text);
|
|
1481
1690
|
white-space: pre-wrap;
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1691
|
+
display: -webkit-box;
|
|
1692
|
+
-webkit-line-clamp: 3;
|
|
1693
|
+
-webkit-box-orient: vertical;
|
|
1694
|
+
overflow: hidden;
|
|
1695
|
+
text-overflow: ellipsis;
|
|
1696
|
+
max-height: 64px;
|
|
1697
|
+
margin: 0;
|
|
1698
|
+
padding: 0;
|
|
1699
|
+
background: transparent;
|
|
1700
|
+
border: 0;
|
|
1489
1701
|
}
|
|
1490
1702
|
|
|
1703
|
+
// Actions à droite : Ignorer / Insérer
|
|
1491
1704
|
.aiSuggestionActions {
|
|
1705
|
+
grid-column: 3;
|
|
1706
|
+
grid-row: 1 / span 2;
|
|
1492
1707
|
display: flex;
|
|
1493
|
-
justify-content: flex-end;
|
|
1494
1708
|
gap: 8px;
|
|
1709
|
+
align-items: center;
|
|
1495
1710
|
}
|
|
1496
1711
|
|
|
1497
1712
|
.aiSuggestionIgnore {
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1713
|
+
display: inline-flex;
|
|
1714
|
+
align-items: center;
|
|
1715
|
+
height: 26px;
|
|
1716
|
+
padding: 0 8px;
|
|
1717
|
+
border-radius: 4px;
|
|
1718
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
1501
1719
|
background: var(--theme-elevation-0, #fff);
|
|
1502
|
-
color: var(--theme-text-secondary);
|
|
1503
|
-
font-size:
|
|
1504
|
-
font-weight:
|
|
1720
|
+
color: var(--theme-text-secondary, var(--theme-elevation-600));
|
|
1721
|
+
font-size: 11px;
|
|
1722
|
+
font-weight: 500;
|
|
1505
1723
|
cursor: pointer;
|
|
1506
1724
|
|
|
1507
1725
|
&:hover {
|
|
@@ -1511,78 +1729,100 @@
|
|
|
1511
1729
|
}
|
|
1512
1730
|
|
|
1513
1731
|
.aiSuggestionInsert {
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1732
|
+
display: inline-flex;
|
|
1733
|
+
align-items: center;
|
|
1734
|
+
height: 26px;
|
|
1735
|
+
padding: 0 8px;
|
|
1736
|
+
border-radius: 4px;
|
|
1737
|
+
border: 1px solid var(--theme-text);
|
|
1738
|
+
background: var(--theme-text);
|
|
1739
|
+
color: var(--theme-bg, #fff);
|
|
1740
|
+
font-size: 11px;
|
|
1741
|
+
font-weight: 500;
|
|
1521
1742
|
cursor: pointer;
|
|
1522
1743
|
|
|
1523
1744
|
&:hover {
|
|
1524
|
-
background:
|
|
1745
|
+
background: var(--theme-elevation-800);
|
|
1746
|
+
border-color: var(--theme-elevation-800);
|
|
1525
1747
|
}
|
|
1526
1748
|
}
|
|
1527
1749
|
|
|
1750
|
+
// ai-card__next-title (maquette) : t-micro uppercase tertiary
|
|
1528
1751
|
.aiCardNextTitle {
|
|
1529
|
-
font-size:
|
|
1530
|
-
font-weight:
|
|
1752
|
+
font-size: 11px;
|
|
1753
|
+
font-weight: 500;
|
|
1531
1754
|
text-transform: uppercase;
|
|
1532
|
-
letter-spacing: 0.
|
|
1533
|
-
|
|
1534
|
-
|
|
1755
|
+
letter-spacing: 0.08em;
|
|
1756
|
+
line-height: 1.3;
|
|
1757
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
1758
|
+
margin: 12px 0 8px;
|
|
1535
1759
|
}
|
|
1536
1760
|
.aiCardNextActions {
|
|
1537
1761
|
list-style: none; padding: 0; margin: 0;
|
|
1538
|
-
display: flex; flex-direction: column; gap:
|
|
1762
|
+
display: flex; flex-direction: column; gap: 6px;
|
|
1539
1763
|
}
|
|
1764
|
+
|
|
1765
|
+
// next-action (maquette) : card bg + border, padding 8px 12px, t-body-sm
|
|
1540
1766
|
.aiCardNextAction {
|
|
1541
|
-
display: flex;
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
border:
|
|
1546
|
-
|
|
1767
|
+
display: flex;
|
|
1768
|
+
align-items: center;
|
|
1769
|
+
gap: 8px;
|
|
1770
|
+
padding: 8px 12px;
|
|
1771
|
+
border-radius: 4px;
|
|
1772
|
+
background: var(--theme-bg);
|
|
1773
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
1774
|
+
font-size: 13px;
|
|
1775
|
+
line-height: 1.5;
|
|
1547
1776
|
}
|
|
1777
|
+
|
|
1778
|
+
// Check 16×16 carré radius 4px, done = success-500 (maquette next-action__check)
|
|
1548
1779
|
.aiCardNextCheck {
|
|
1549
1780
|
width: 16px; height: 16px;
|
|
1550
1781
|
border-radius: 4px;
|
|
1551
|
-
border: 1.5px solid var(--theme-elevation-300);
|
|
1552
|
-
background: var(--theme-
|
|
1782
|
+
border: 1.5px solid var(--theme-elevation-300, var(--theme-input-border));
|
|
1783
|
+
background: var(--theme-bg);
|
|
1553
1784
|
display: inline-flex; align-items: center; justify-content: center;
|
|
1554
1785
|
flex-shrink: 0;
|
|
1555
1786
|
cursor: pointer;
|
|
1556
|
-
font-size:
|
|
1787
|
+
font-size: 11px; font-weight: 700;
|
|
1557
1788
|
color: transparent;
|
|
1558
|
-
transition:
|
|
1559
|
-
&:hover { border-color: var(--theme-
|
|
1789
|
+
transition: background 100ms ease, border-color 100ms ease;
|
|
1790
|
+
&:hover { border-color: var(--theme-success-500, #128a5e); }
|
|
1560
1791
|
&:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
1561
1792
|
}
|
|
1562
1793
|
.aiCardNextCheckDone {
|
|
1563
|
-
background: var(--theme-
|
|
1564
|
-
border-color: var(--theme-
|
|
1794
|
+
background: var(--theme-success-500, #128a5e);
|
|
1795
|
+
border-color: var(--theme-success-500, #128a5e);
|
|
1565
1796
|
color: #fff;
|
|
1566
1797
|
}
|
|
1567
|
-
|
|
1798
|
+
|
|
1799
|
+
.aiCardNextLabel {
|
|
1800
|
+
flex: 1;
|
|
1801
|
+
font-size: 13px;
|
|
1802
|
+
line-height: 1.5;
|
|
1803
|
+
color: var(--theme-text);
|
|
1804
|
+
}
|
|
1568
1805
|
.aiCardNextLabelDone {
|
|
1569
1806
|
text-decoration: line-through;
|
|
1570
|
-
color: var(--theme-text-tertiary);
|
|
1807
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
1571
1808
|
}
|
|
1572
1809
|
.aiCardNextWhen {
|
|
1573
|
-
font-size:
|
|
1574
|
-
|
|
1575
|
-
|
|
1810
|
+
font-size: 11px;
|
|
1811
|
+
font-weight: 500;
|
|
1812
|
+
line-height: 1.3;
|
|
1813
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
1576
1814
|
flex-shrink: 0;
|
|
1577
1815
|
}
|
|
1578
1816
|
|
|
1817
|
+
// Composer alias select : aligné sur composer__as / select maquette
|
|
1579
1818
|
.composerAliasSelect {
|
|
1580
1819
|
height: 28px;
|
|
1581
1820
|
padding: 0 8px;
|
|
1582
|
-
font-size: 12px;
|
|
1583
|
-
|
|
1584
|
-
border:
|
|
1585
|
-
|
|
1821
|
+
font-size: 12px;
|
|
1822
|
+
font-weight: 500;
|
|
1823
|
+
border-radius: 4px;
|
|
1824
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
1825
|
+
background: var(--theme-bg);
|
|
1586
1826
|
color: var(--theme-text);
|
|
1587
1827
|
cursor: pointer;
|
|
1588
1828
|
&:hover { background: var(--theme-elevation-50); }
|
|
@@ -1592,3 +1832,61 @@
|
|
|
1592
1832
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
|
|
1593
1833
|
}
|
|
1594
1834
|
}
|
|
1835
|
+
|
|
1836
|
+
// ─── COMPOSER BOX (composer__box maquette) ───
|
|
1837
|
+
// Wrapper englobant toolbar + editor avec border-radius et focus ring
|
|
1838
|
+
.composerBox {
|
|
1839
|
+
border: 1px solid var(--theme-elevation-200, var(--theme-input-border));
|
|
1840
|
+
border-radius: 6px;
|
|
1841
|
+
background: var(--theme-bg);
|
|
1842
|
+
overflow: hidden;
|
|
1843
|
+
transition: border-color 80ms ease, box-shadow 80ms ease;
|
|
1844
|
+
margin-bottom: 0;
|
|
1845
|
+
|
|
1846
|
+
&:focus-within {
|
|
1847
|
+
border-color: var(--theme-info-500, #2a6bd8);
|
|
1848
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
|
|
1849
|
+
}
|
|
1850
|
+
}
|
|
1851
|
+
|
|
1852
|
+
// ─── HEADER ID META INLINE (detail__id span variants) ───
|
|
1853
|
+
.ticketNumberSep {
|
|
1854
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-400));
|
|
1855
|
+
margin: 0 2px;
|
|
1856
|
+
}
|
|
1857
|
+
.ticketNumberCat {
|
|
1858
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
1859
|
+
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
1860
|
+
font-weight: 400;
|
|
1861
|
+
}
|
|
1862
|
+
.ticketNumberSource {
|
|
1863
|
+
color: var(--theme-text-tertiary, var(--theme-elevation-500));
|
|
1864
|
+
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
1865
|
+
display: inline-flex;
|
|
1866
|
+
align-items: center;
|
|
1867
|
+
gap: 4px;
|
|
1868
|
+
}
|
|
1869
|
+
|
|
1870
|
+
// ─── PROGRESS BAR (tt__bar maquette) ───
|
|
1871
|
+
.timerBar {
|
|
1872
|
+
height: 6px;
|
|
1873
|
+
border-radius: 3px;
|
|
1874
|
+
background: var(--theme-elevation-100);
|
|
1875
|
+
overflow: hidden;
|
|
1876
|
+
margin-top: 12px;
|
|
1877
|
+
}
|
|
1878
|
+
|
|
1879
|
+
.timerBarFill {
|
|
1880
|
+
height: 100%;
|
|
1881
|
+
background: linear-gradient(90deg,
|
|
1882
|
+
var(--theme-success-500, #128a5e) 0%,
|
|
1883
|
+
var(--theme-info-500, #2a6bd8) 100%);
|
|
1884
|
+
border-radius: 3px;
|
|
1885
|
+
transition: width 200ms ease;
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1888
|
+
// ─── AI CARD HISTORY DOT VARIANTS ───
|
|
1889
|
+
// Cohérence avec maquette ai-card__hist .h-dot--open/resolved/risk
|
|
1890
|
+
.aiCardDotOpen { background: var(--theme-warning-500, #c97a0a) !important; }
|
|
1891
|
+
.aiCardDotResolved { background: var(--theme-success-500, #128a5e) !important; }
|
|
1892
|
+
.aiCardDotRisk { background: var(--theme-error-500, #c4392c) !important; }
|