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