@sphoro/bugcatch-web-sdk 0.18.0 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -3
- package/dist/bugcatch-call.es.js +201 -200
- package/dist/bugcatch-call.es.js.map +1 -1
- package/dist/bugcatch-call.umd.js +1 -1
- package/dist/bugcatch-call.umd.js.map +1 -1
- package/dist/bugcatch-core.es.js +1085 -1007
- package/dist/bugcatch-core.es.js.map +1 -1
- package/dist/bugcatch-panel.es.js +1337 -1067
- package/dist/bugcatch-panel.es.js.map +1 -1
- package/dist/bugcatch-panel.umd.js +427 -315
- package/dist/bugcatch-panel.umd.js.map +1 -1
- package/dist/bugcatch.standalone.umd.js +553 -429
- package/dist/bugcatch.standalone.umd.js.map +1 -1
- package/dist/bugcatch.umd.js +132 -120
- package/dist/bugcatch.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/accent.js +38 -0
- package/src/incoming-call.js +17 -15
- package/src/index.d.ts +52 -2
- package/src/index.js +26 -7
- package/src/panel/call.js +3 -2
- package/src/panel/compose.js +7 -3
- package/src/panel/icons.js +2 -0
- package/src/panel/index.js +26 -3
- package/src/panel/messages.js +2 -2
- package/src/panel/picks.js +6 -2
- package/src/panel/rate-due.js +155 -0
- package/src/panel/rating.js +87 -0
- package/src/panel/refs.js +1 -1
- package/src/panel/render.js +11 -3
- package/src/panel/signin.js +1 -1
- package/src/panel/styles.js +270 -186
- package/src/panel/thread.js +48 -7
- package/src/updates.js +77 -27
- package/src/widget.js +160 -141
package/src/panel/styles.js
CHANGED
|
@@ -24,9 +24,12 @@ export const PANEL_CSS = `
|
|
|
24
24
|
@keyframes bc-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
|
|
25
25
|
|
|
26
26
|
/* ---------- scrim + panel ---------- */
|
|
27
|
+
/* Still modal — focus stays in the panel and a click outside closes it — but
|
|
28
|
+
the host's page only dims enough to say so. It is their product, and the
|
|
29
|
+
visitor is reporting something about what is on it. */
|
|
27
30
|
.scrim {
|
|
28
31
|
position: fixed; inset: 0; z-index: 2147483001;
|
|
29
|
-
background: rgba(
|
|
32
|
+
background: rgba(14,14,16,.14);
|
|
30
33
|
animation: bc-fade-in 200ms ease both;
|
|
31
34
|
}
|
|
32
35
|
.scrim.closing { animation: bc-fade-out 170ms ease both; }
|
|
@@ -38,12 +41,11 @@ export const PANEL_CSS = `
|
|
|
38
41
|
.panel {
|
|
39
42
|
position: fixed;
|
|
40
43
|
display: flex; flex-direction: column;
|
|
41
|
-
width: calc(100vw - 40px); max-width:
|
|
44
|
+
width: calc(100vw - 40px); max-width: 400px;
|
|
42
45
|
max-height: calc(100vh - var(--bc-dock-h, 84px) - 52px);
|
|
43
46
|
overflow: hidden;
|
|
44
47
|
background: var(--bc-bg); color: var(--bc-fg);
|
|
45
48
|
border-radius: var(--bc-r-xl); box-shadow: var(--bc-shadow);
|
|
46
|
-
border: 1px solid color-mix(in srgb, var(--bc-border) 70%, transparent);
|
|
47
49
|
animation: bc-panel-in 340ms var(--bc-ease) both;
|
|
48
50
|
}
|
|
49
51
|
/* A conversation wants a height of its own, so the thread fills the panel
|
|
@@ -58,57 +60,58 @@ export const PANEL_CSS = `
|
|
|
58
60
|
/* ---------- header ---------- */
|
|
59
61
|
.head {
|
|
60
62
|
flex: none; position: relative;
|
|
61
|
-
display: flex; align-items: center; gap:
|
|
62
|
-
padding:
|
|
63
|
-
background:
|
|
63
|
+
display: flex; align-items: center; gap: 11px;
|
|
64
|
+
padding: 14px 10px 13px var(--bc-pad);
|
|
65
|
+
background: var(--bc-bg);
|
|
64
66
|
border-bottom: 1px solid var(--bc-border);
|
|
65
67
|
}
|
|
66
|
-
.head .mark
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
|
|
70
|
-
color: var(--bc-on-accent); font-size: 19px;
|
|
71
|
-
box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-accent) 30%, transparent);
|
|
72
|
-
}
|
|
73
|
-
/* The little "online" dot says someone — or something — is on the other end. */
|
|
74
|
-
.head .mark::after {
|
|
75
|
-
content: ''; position: absolute; right: -1px; bottom: -1px;
|
|
76
|
-
width: 11px; height: 11px; border-radius: 50%;
|
|
77
|
-
background: #22c55e; border: 2px solid var(--bc-bg);
|
|
78
|
-
}
|
|
68
|
+
.head .mark { width: 32px; }
|
|
69
|
+
/* The assistant asking its one follow-up wears the same orb, smaller. */
|
|
70
|
+
.avatar.orb { width: 26px; }
|
|
79
71
|
.head .titles { flex: 1; min-width: 0; }
|
|
80
72
|
.head h2 {
|
|
81
|
-
margin: 0 0
|
|
73
|
+
margin: 0 0 1px; font-size: var(--bc-fs-lg); font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
|
|
74
|
+
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
75
|
+
}
|
|
76
|
+
.head p {
|
|
77
|
+
margin: 0; font-size: var(--bc-fs-sm); line-height: 1.4; color: var(--bc-muted);
|
|
82
78
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
83
79
|
}
|
|
84
|
-
.head p { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted); }
|
|
85
80
|
.icon-btn {
|
|
86
81
|
flex: none; display: grid; place-items: center;
|
|
87
82
|
width: 32px; height: 32px; padding: 0; font-size: 16px;
|
|
88
|
-
border: none; border-radius:
|
|
83
|
+
border: none; border-radius: 999px; background: none; color: var(--bc-muted);
|
|
89
84
|
cursor: pointer; transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
|
|
90
85
|
}
|
|
91
86
|
.icon-btn:hover { background: color-mix(in srgb, var(--bc-fg) 7%, transparent); color: var(--bc-fg); }
|
|
92
87
|
.icon-btn:active { transform: scale(.92); }
|
|
93
88
|
.icon-btn.back { margin: 0 -6px 0 -8px; }
|
|
89
|
+
/* The theme button holds all three glyphs; the host's class picks one. */
|
|
90
|
+
.icon-btn.theme { font-size: 15px; margin-right: -4px; }
|
|
91
|
+
.icon-btn.theme > span { display: none; }
|
|
92
|
+
:host(.bc-light) .icon-btn.theme .m-light,
|
|
93
|
+
:host(.bc-dark) .icon-btn.theme .m-dark,
|
|
94
|
+
:host(.bc-auto) .icon-btn.theme .m-auto { display: block; }
|
|
94
95
|
|
|
95
96
|
.body {
|
|
96
97
|
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
|
|
97
|
-
padding:
|
|
98
|
+
padding: 14px var(--bc-pad) 4px;
|
|
98
99
|
}
|
|
99
100
|
|
|
100
|
-
label { display: block; font-size:
|
|
101
|
+
label { display: block; font-size: 13px; font-weight: 560; color: var(--bc-fg); margin-bottom: 6px; letter-spacing: -.005em; }
|
|
101
102
|
label .opt { font-weight: 450; color: var(--bc-faint); }
|
|
103
|
+
/* Fields are stone wells that turn white when you are in them, the way the
|
|
104
|
+
rest of the product's forms do. */
|
|
102
105
|
input[type=text], input[type=email], textarea {
|
|
103
|
-
width: 100%; padding:
|
|
104
|
-
color: var(--bc-fg); background: var(--bc-
|
|
105
|
-
border: 1px solid
|
|
106
|
+
width: 100%; padding: 10px 12px; font-size: var(--bc-fs-md); line-height: 1.45;
|
|
107
|
+
color: var(--bc-fg); background: var(--bc-stone);
|
|
108
|
+
border: 1px solid transparent; border-radius: var(--bc-r-md);
|
|
106
109
|
transition: border-color 160ms, box-shadow 160ms, background 160ms;
|
|
107
110
|
}
|
|
108
111
|
input[type=text]::placeholder, input[type=email]::placeholder, textarea::placeholder { color: var(--bc-faint); }
|
|
109
|
-
input[type=text]:hover, input[type=email]:hover, textarea:hover { border-color:
|
|
112
|
+
input[type=text]:hover, input[type=email]:hover, textarea:hover { border-color: var(--bc-border); }
|
|
110
113
|
input[type=text]:focus, input[type=email]:focus, textarea:focus {
|
|
111
|
-
outline: none; border-color: var(--bc-accent); box-shadow: var(--bc-ring);
|
|
114
|
+
outline: none; background: var(--bc-bg); border-color: var(--bc-accent); box-shadow: var(--bc-ring);
|
|
112
115
|
}
|
|
113
116
|
input.invalid, input.invalid:focus, textarea.invalid {
|
|
114
117
|
border-color: var(--bc-danger); animation: bc-nudge 240ms ease;
|
|
@@ -120,8 +123,8 @@ input.invalid, input.invalid:focus, textarea.invalid {
|
|
|
120
123
|
animation: bc-rise 200ms var(--bc-ease) both;
|
|
121
124
|
}
|
|
122
125
|
.field-err svg { font-size: 13px; flex: none; }
|
|
123
|
-
textarea { min-height:
|
|
124
|
-
.field { margin-bottom:
|
|
126
|
+
textarea { min-height: 76px; resize: vertical; }
|
|
127
|
+
.field { margin-bottom: 14px; }
|
|
125
128
|
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
|
|
126
129
|
.field-head .count { font-size: var(--bc-fs-xs); color: var(--bc-faint); font-variant-numeric: tabular-nums; }
|
|
127
130
|
|
|
@@ -131,15 +134,15 @@ textarea { min-height: 88px; resize: vertical; }
|
|
|
131
134
|
.compose > .note:has(button) {
|
|
132
135
|
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
|
|
133
136
|
margin: 0 0 14px; padding: 10px 12px; border-radius: var(--bc-r-md);
|
|
134
|
-
background: var(--bc-
|
|
137
|
+
background: var(--bc-subtle); border: 1px solid var(--bc-border);
|
|
135
138
|
font-size: var(--bc-fs-sm); color: var(--bc-fg);
|
|
136
139
|
}
|
|
137
140
|
.compose > .note button {
|
|
138
|
-
padding: 5px 11px; font: inherit; font-size: var(--bc-fs-xs); font-weight:
|
|
141
|
+
padding: 5px 11px; font: inherit; font-size: var(--bc-fs-xs); font-weight: 600;
|
|
139
142
|
border-radius: 999px; cursor: pointer;
|
|
140
143
|
border: 1px solid var(--bc-accent); background: var(--bc-accent); color: var(--bc-on-accent);
|
|
141
144
|
}
|
|
142
|
-
.compose > .note button[data-discard] { background:
|
|
145
|
+
.compose > .note button[data-discard] { background: var(--bc-bg); color: var(--bc-fg); border-color: var(--bc-border); }
|
|
143
146
|
|
|
144
147
|
/* ---------- what is already known ----------
|
|
145
148
|
A help surface in front of the form, not a step in it. Everything here is
|
|
@@ -147,58 +150,57 @@ textarea { min-height: 88px; resize: vertical; }
|
|
|
147
150
|
leave, tap "this is happening to me too" and leave, or type straight past all
|
|
148
151
|
of it and file the report they came to file. Nothing is ever in their way,
|
|
149
152
|
because a reporter who feels handled rather than helped stops reporting. */
|
|
150
|
-
|
|
151
|
-
.known .known-h {
|
|
152
|
-
margin: 0 0
|
|
153
|
+
/* One small eyebrow style for every group above the form. */
|
|
154
|
+
.known .known-h, .picks .picks-h {
|
|
155
|
+
margin: 0 0 7px; font-size: 11px; font-weight: 600; letter-spacing: .07em;
|
|
153
156
|
text-transform: uppercase; color: var(--bc-faint);
|
|
154
157
|
}
|
|
158
|
+
.known { margin-bottom: 14px; }
|
|
159
|
+
/* Hairline rows on the panel's own white, so they read as a list to scan
|
|
160
|
+
rather than more coloured cards to wade through. */
|
|
155
161
|
.known .issue {
|
|
156
162
|
display: flex; align-items: center; gap: 10px;
|
|
157
|
-
padding:
|
|
158
|
-
background: var(--bc-
|
|
163
|
+
padding: 8px 8px 8px 12px; margin-bottom: 6px;
|
|
164
|
+
background: var(--bc-bg); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
|
|
159
165
|
animation: bc-rise 240ms var(--bc-ease) both;
|
|
160
166
|
}
|
|
161
|
-
.known .issue.is-joined {
|
|
167
|
+
.known .issue.is-joined { background: color-mix(in srgb, var(--bc-ok) 6%, var(--bc-bg)); }
|
|
162
168
|
.known .issue .who { flex: 1; min-width: 0; }
|
|
163
169
|
.known .issue .t {
|
|
164
|
-
display: block; font-size: 13px; font-weight:
|
|
170
|
+
display: block; font-size: 13px; font-weight: 560; line-height: 1.4;
|
|
165
171
|
color: var(--bc-fg); overflow-wrap: anywhere;
|
|
166
172
|
}
|
|
167
173
|
.known .issue .meta {
|
|
168
|
-
display: block; margin-top:
|
|
174
|
+
display: block; margin-top: 2px; font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted);
|
|
169
175
|
}
|
|
170
176
|
.known .issue .join {
|
|
171
|
-
flex: none; padding:
|
|
172
|
-
color: var(--bc-
|
|
173
|
-
border:
|
|
174
|
-
transition: background 160ms,
|
|
177
|
+
flex: none; height: 30px; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 560;
|
|
178
|
+
color: var(--bc-fg); background: var(--bc-stone);
|
|
179
|
+
border: 0; border-radius: 999px; cursor: pointer;
|
|
180
|
+
transition: background 160ms, color 160ms;
|
|
175
181
|
}
|
|
176
|
-
.known .issue .join:hover {
|
|
177
|
-
.known .issue .join:disabled { color: var(--bc-ok);
|
|
182
|
+
.known .issue .join:hover { background: color-mix(in srgb, var(--bc-fg) 12%, var(--bc-stone)); }
|
|
183
|
+
.known .issue .join:disabled { color: var(--bc-ok); background: transparent; cursor: default; opacity: 1; }
|
|
178
184
|
.known .ask { display: flex; gap: 8px; margin: 2px 0 8px; }
|
|
179
185
|
.known .ask input { flex: 1; min-width: 0; }
|
|
180
186
|
.known .ask button { flex: none; }
|
|
181
187
|
.known .err { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-danger); }
|
|
182
188
|
|
|
183
189
|
/* ---------- questions the assistant answers by itself ---------- */
|
|
184
|
-
.picks { margin-bottom:
|
|
185
|
-
.picks .picks-
|
|
186
|
-
margin: 0 0 8px; font-size: 11px; font-weight: 680; letter-spacing: .06em;
|
|
187
|
-
text-transform: uppercase; color: var(--bc-faint);
|
|
188
|
-
}
|
|
189
|
-
.picks .picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
|
|
190
|
+
.picks { margin-bottom: 14px; }
|
|
191
|
+
.picks .picks-grid { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
190
192
|
.picks .pick {
|
|
191
|
-
display: flex;
|
|
192
|
-
padding:
|
|
193
|
-
color: var(--bc-fg); background: var(--bc-
|
|
194
|
-
border: 1px solid
|
|
195
|
-
transition: background 160ms, border-color 160ms, transform 160ms;
|
|
193
|
+
display: inline-flex; align-items: center; max-width: 100%;
|
|
194
|
+
min-height: 32px; padding: 6px 13px; text-align: left; cursor: pointer; font: inherit;
|
|
195
|
+
color: var(--bc-fg); background: var(--bc-stone);
|
|
196
|
+
border: 1px solid transparent; border-radius: 999px;
|
|
197
|
+
transition: background 160ms, border-color 160ms, color 160ms, transform 160ms var(--bc-ease);
|
|
196
198
|
animation: bc-rise 240ms var(--bc-ease) both;
|
|
197
199
|
}
|
|
198
|
-
.picks .pick:hover {
|
|
199
|
-
.picks .pick
|
|
200
|
-
.picks .pick
|
|
201
|
-
.picks .pick .
|
|
200
|
+
.picks .pick:hover { background: color-mix(in srgb, var(--bc-fg) 10%, var(--bc-stone)); }
|
|
201
|
+
.picks .pick:active { transform: scale(.97); }
|
|
202
|
+
.picks .pick[aria-pressed="true"] { background: var(--bc-accent); color: var(--bc-on-accent); }
|
|
203
|
+
.picks .pick .t { font-size: 13px; font-weight: 520; line-height: 1.35; overflow-wrap: anywhere; }
|
|
202
204
|
.picks .picks-note {
|
|
203
205
|
display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0;
|
|
204
206
|
font-size: 12px; line-height: 1.45; color: var(--bc-muted);
|
|
@@ -212,18 +214,21 @@ textarea { min-height: 88px; resize: vertical; }
|
|
|
212
214
|
strip is the whole panel. */
|
|
213
215
|
.whoami {
|
|
214
216
|
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
|
215
|
-
margin-bottom:
|
|
217
|
+
margin-bottom: 14px; padding: 9px 12px;
|
|
216
218
|
font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
|
|
217
219
|
background: var(--bc-subtle); border: 1px solid var(--bc-border); border-radius: var(--bc-r-md);
|
|
218
220
|
}
|
|
219
221
|
.whoami.asking { display: block; padding: 14px; }
|
|
222
|
+
.whoami.asking .row input { background: var(--bc-bg); border-color: var(--bc-border); }
|
|
220
223
|
.whoami .who { flex: 1; min-width: 0; }
|
|
221
224
|
.whoami .who strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
|
|
222
225
|
.link {
|
|
223
|
-
padding: 0; font: inherit; font-size: var(--bc-fs-sm); font-weight:
|
|
224
|
-
color: var(--bc-
|
|
226
|
+
padding: 0; font: inherit; font-size: var(--bc-fs-sm); font-weight: 560; line-height: 1.45;
|
|
227
|
+
color: var(--bc-fg); background: none; border: none; cursor: pointer; border-radius: 4px;
|
|
228
|
+
text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bc-fg) 30%, transparent);
|
|
229
|
+
text-underline-offset: 3px;
|
|
225
230
|
}
|
|
226
|
-
.link:hover { text-decoration
|
|
231
|
+
.link:hover { text-decoration-color: currentColor; }
|
|
227
232
|
.link:disabled { color: var(--bc-faint); cursor: default; text-decoration: none; }
|
|
228
233
|
.whoami .why { margin: 0 0 10px; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
|
|
229
234
|
.whoami .why strong { color: var(--bc-fg); font-weight: 620; word-break: break-all; }
|
|
@@ -240,18 +245,17 @@ textarea { min-height: 88px; resize: vertical; }
|
|
|
240
245
|
assistant asking one friendly follow-up, not as a form field that appeared. */
|
|
241
246
|
.refs {
|
|
242
247
|
position: relative;
|
|
243
|
-
margin-bottom:
|
|
248
|
+
margin-bottom: 14px; padding: 14px;
|
|
244
249
|
font-size: var(--bc-fs-sm); line-height: 1.45; color: var(--bc-muted);
|
|
245
|
-
background: var(--bc-
|
|
246
|
-
border: 1px solid var(--bc-
|
|
250
|
+
background: var(--bc-subtle);
|
|
251
|
+
border: 1px solid var(--bc-border); border-radius: var(--bc-r-lg);
|
|
247
252
|
animation: bc-item-in 280ms var(--bc-ease) both;
|
|
248
253
|
}
|
|
249
254
|
.refs .ask-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
|
|
250
|
-
.refs .ask-head
|
|
251
|
-
.refs .ask-head strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--bc-fg); margin-bottom: 1px; }
|
|
255
|
+
.refs .ask-head strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--bc-fg); margin-bottom: 1px; }
|
|
252
256
|
.refs .why { margin: 0; font-size: var(--bc-fs-sm); line-height: 1.5; color: var(--bc-muted); }
|
|
253
257
|
.refs .row { display: flex; gap: 8px; align-items: stretch; }
|
|
254
|
-
.refs .row input { flex: 1; min-width: 0; background: var(--bc-bg); }
|
|
258
|
+
.refs .row input { flex: 1; min-width: 0; background: var(--bc-bg); border-color: var(--bc-border); }
|
|
255
259
|
.refs select {
|
|
256
260
|
flex: none; max-width: 45%; padding: 10px 10px; font-size: 13px;
|
|
257
261
|
color: var(--bc-fg); background: var(--bc-bg);
|
|
@@ -279,40 +283,44 @@ textarea { min-height: 88px; resize: vertical; }
|
|
|
279
283
|
.ref-found svg { width: 14px; height: 14px; flex: none; color: var(--bc-ok); }
|
|
280
284
|
.ref-found b { font-weight: 600; color: var(--bc-fg); }
|
|
281
285
|
|
|
282
|
-
/* ---------- severity ----------
|
|
283
|
-
|
|
286
|
+
/* ---------- severity ----------
|
|
287
|
+
The segmented control from the product: a stone track, the choice lifted out
|
|
288
|
+
of it on white. */
|
|
289
|
+
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; background: var(--bc-stone); border-radius: 999px; }
|
|
284
290
|
.seg button {
|
|
285
291
|
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
|
286
|
-
padding:
|
|
287
|
-
color: var(--bc-muted); background: none; border: none; border-radius:
|
|
292
|
+
height: 30px; padding: 0 4px; font: inherit; font-size: var(--bc-fs-sm); font-weight: 520; line-height: 1;
|
|
293
|
+
color: var(--bc-muted); background: none; border: none; border-radius: 999px;
|
|
288
294
|
cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms;
|
|
289
295
|
}
|
|
290
|
-
.seg button::before { content: ''; width:
|
|
291
|
-
.seg button[data-prio="LOW"] { --sev:
|
|
292
|
-
.seg button[data-prio="MEDIUM"] { --sev:
|
|
293
|
-
.seg button[data-prio="HIGH"] { --sev:
|
|
294
|
-
.seg button[data-prio="CRITICAL"] { --sev:
|
|
296
|
+
.seg button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sev, var(--bc-faint)); opacity: .5; transition: opacity 180ms; }
|
|
297
|
+
.seg button[data-prio="LOW"] { --sev: var(--bc-ok); }
|
|
298
|
+
.seg button[data-prio="MEDIUM"] { --sev: var(--bc-info); }
|
|
299
|
+
.seg button[data-prio="HIGH"] { --sev: var(--bc-warn); }
|
|
300
|
+
.seg button[data-prio="CRITICAL"] { --sev: var(--bc-danger); }
|
|
295
301
|
.seg button:hover { color: var(--bc-fg); }
|
|
296
302
|
.seg button[aria-pressed=true] {
|
|
297
|
-
background: var(--bc-raised); color: var(--bc-fg); font-weight:
|
|
298
|
-
box-shadow: 0 1px
|
|
303
|
+
background: var(--bc-raised); color: var(--bc-fg); font-weight: 600;
|
|
304
|
+
box-shadow: 0 1px 2px rgba(20,18,14,.10), 0 0 0 .5px rgba(20,18,14,.08);
|
|
299
305
|
}
|
|
300
306
|
.seg button[aria-pressed=true]::before { opacity: 1; }
|
|
301
307
|
.seg button:focus-visible { outline-offset: -2px; }
|
|
302
308
|
|
|
303
|
-
/* ---------- attachments ----------
|
|
304
|
-
|
|
309
|
+
/* ---------- attachments ----------
|
|
310
|
+
Three ring pills in a row: optional, so they take one line, not a band of
|
|
311
|
+
dashed drop zones. */
|
|
312
|
+
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
305
313
|
.tool {
|
|
306
|
-
display: inline-flex;
|
|
307
|
-
padding:
|
|
308
|
-
color: var(--bc-fg); background: var(--bc-
|
|
309
|
-
border: 1px
|
|
314
|
+
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
|
315
|
+
height: 32px; padding: 0 11px 0 9px; font: inherit; font-size: 12.5px; font-weight: 520; line-height: 1; white-space: nowrap;
|
|
316
|
+
color: var(--bc-fg); background: var(--bc-bg);
|
|
317
|
+
border: 1px solid var(--bc-border); border-radius: 999px; cursor: pointer;
|
|
310
318
|
transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--bc-ease);
|
|
311
319
|
}
|
|
312
|
-
.tool svg { font-size:
|
|
313
|
-
.tool:hover:not(:disabled) {
|
|
314
|
-
.tool:hover:not(:disabled) svg { color: var(--bc-
|
|
315
|
-
.tool:active:not(:disabled) { transform:
|
|
320
|
+
.tool svg { font-size: 15px; color: var(--bc-muted); transition: color 160ms; }
|
|
321
|
+
.tool:hover:not(:disabled) { background: var(--bc-subtle); border-color: color-mix(in srgb, var(--bc-fg) 20%, var(--bc-border)); }
|
|
322
|
+
.tool:hover:not(:disabled) svg { color: var(--bc-fg); }
|
|
323
|
+
.tool:active:not(:disabled) { transform: scale(.97); }
|
|
316
324
|
.tool:disabled { opacity: .45; cursor: not-allowed; }
|
|
317
325
|
.attach-hint { margin: 8px 0 0; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
|
|
318
326
|
|
|
@@ -363,7 +371,7 @@ textarea { min-height: 88px; resize: vertical; }
|
|
|
363
371
|
.foot {
|
|
364
372
|
flex: none;
|
|
365
373
|
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
|
366
|
-
padding: 12px var(--bc-pad); border-top: 1px solid var(--bc-border);
|
|
374
|
+
padding: 12px 14px 12px var(--bc-pad); border-top: 1px solid var(--bc-border);
|
|
367
375
|
background: var(--bc-bg);
|
|
368
376
|
}
|
|
369
377
|
.foot .spacer { flex: 1; }
|
|
@@ -376,36 +384,39 @@ textarea { min-height: 88px; resize: vertical; }
|
|
|
376
384
|
size, and dimming it on top of that left it as a smudge in both themes. */
|
|
377
385
|
.powered {
|
|
378
386
|
flex: none; display: flex; align-items: center; justify-content: center; gap: 6px;
|
|
379
|
-
padding:
|
|
380
|
-
background: var(--bc-
|
|
387
|
+
padding: 0 var(--bc-pad) 10px; font-size: 10.5px; color: var(--bc-faint);
|
|
388
|
+
background: var(--bc-bg);
|
|
381
389
|
}
|
|
382
390
|
.brand-credit { display: flex; align-items: center; transition: color 0.15s; border-radius: 4px; }
|
|
383
|
-
.bc-brand { height:
|
|
391
|
+
.bc-brand { height: 15px; width: auto; display: block; color: var(--bc-brand-ink); }
|
|
384
392
|
.brand-credit:hover .bc-brand { color: var(--bc-fg); }
|
|
393
|
+
/* The product's two pills: ink for the one thing to do, a white ring for the
|
|
394
|
+
alternative. Flat — no glow, no lift. */
|
|
385
395
|
button.ghost, button.primary {
|
|
386
396
|
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
|
|
387
|
-
height: 38px; padding: 0 15px; font: inherit; font-size:
|
|
397
|
+
height: 38px; padding: 0 15px; font: inherit; font-size: 13.5px; font-weight: 560; line-height: 1;
|
|
388
398
|
border-radius: 999px; cursor: pointer; white-space: nowrap;
|
|
389
399
|
transition: transform 160ms var(--bc-ease), filter 160ms, background 160ms, border-color 160ms, color 160ms, box-shadow 160ms;
|
|
390
400
|
}
|
|
391
|
-
button.ghost { background: var(--bc-bg); border:
|
|
392
|
-
button.ghost:hover:not(:disabled) { background: var(--bc-subtle);
|
|
401
|
+
button.ghost { background: var(--bc-bg); border: 0; color: var(--bc-fg); box-shadow: 0 0 0 1px var(--bc-border), 0 1px 2px rgba(20,18,14,.05); }
|
|
402
|
+
button.ghost:hover:not(:disabled) { background: var(--bc-subtle); }
|
|
393
403
|
button.ghost svg, button.primary svg { font-size: 15px; }
|
|
394
404
|
button.primary {
|
|
395
405
|
padding: 0 18px;
|
|
396
|
-
background: var(--bc-accent); border:
|
|
397
|
-
box-shadow: 0
|
|
406
|
+
background: var(--bc-accent); border: 0; color: var(--bc-on-accent);
|
|
407
|
+
box-shadow: 0 1px 2px rgba(0,0,0,.14);
|
|
398
408
|
}
|
|
399
|
-
button.primary:hover:not(:disabled) {
|
|
400
|
-
button.primary:active:not(:disabled) { transform:
|
|
401
|
-
button:disabled { opacity: .
|
|
409
|
+
button.primary:hover:not(:disabled) { filter: brightness(1.12) contrast(.96); }
|
|
410
|
+
button.primary:active:not(:disabled) { transform: scale(.98); }
|
|
411
|
+
button:disabled { opacity: .45; cursor: not-allowed; }
|
|
402
412
|
button.primary:disabled { box-shadow: none; }
|
|
403
|
-
button.primary .spinner { border-color:
|
|
413
|
+
button.primary .spinner { border-color: color-mix(in srgb, var(--bc-on-accent) 40%, transparent); border-top-color: var(--bc-on-accent); width: 14px; height: 14px; }
|
|
404
414
|
button.quiet {
|
|
405
|
-
padding: 0 4px; height: 38px; font: inherit; font-size: 13px; font-weight:
|
|
415
|
+
padding: 0 4px; height: 38px; font: inherit; font-size: 13px; font-weight: 520;
|
|
406
416
|
border: none; background: none; color: var(--bc-muted); cursor: pointer; border-radius: 8px;
|
|
417
|
+
text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
|
|
407
418
|
}
|
|
408
|
-
button.quiet:hover { color: var(--bc-
|
|
419
|
+
button.quiet:hover { color: var(--bc-fg); text-decoration-color: color-mix(in srgb, var(--bc-fg) 35%, transparent); }
|
|
409
420
|
|
|
410
421
|
/* ---------- your reports ---------- */
|
|
411
422
|
.history {
|
|
@@ -425,13 +436,13 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
425
436
|
.history .row:last-child { border-bottom: 0; }
|
|
426
437
|
.history .who { flex: 1; min-width: 0; }
|
|
427
438
|
.history .ttl {
|
|
428
|
-
display: block; font-size: 13.5px; font-weight:
|
|
439
|
+
display: block; font-size: 13.5px; font-weight: 560; color: var(--bc-fg);
|
|
429
440
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
430
441
|
}
|
|
431
442
|
.history .sub { display: block; margin-top: 3px; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
|
|
432
443
|
.history .row-ico {
|
|
433
444
|
flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
|
|
434
|
-
background: var(--bc-
|
|
445
|
+
background: var(--bc-stone); color: var(--bc-muted); font-size: 16px;
|
|
435
446
|
}
|
|
436
447
|
.history .chev { flex: none; color: var(--bc-faint); font-size: 15px; transition: transform 160ms var(--bc-ease), color 160ms; }
|
|
437
448
|
.empty {
|
|
@@ -440,7 +451,7 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
440
451
|
}
|
|
441
452
|
.empty .empty-ico {
|
|
442
453
|
display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
|
|
443
|
-
background: var(--bc-
|
|
454
|
+
background: var(--bc-stone); color: var(--bc-fg); font-size: 20px;
|
|
444
455
|
}
|
|
445
456
|
.skel {
|
|
446
457
|
display: block; height: 12px; border-radius: 6px; margin: 6px 0;
|
|
@@ -456,7 +467,7 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
456
467
|
animation: bc-rise 260ms var(--bc-ease) both;
|
|
457
468
|
}
|
|
458
469
|
.history button.row:hover { background: var(--bc-subtle); }
|
|
459
|
-
.history button.row:hover .chev { transform: translateX(2px); color: var(--bc-
|
|
470
|
+
.history button.row:hover .chev { transform: translateX(2px); color: var(--bc-fg); }
|
|
460
471
|
.history button.row:focus-visible { outline-offset: -2px; }
|
|
461
472
|
|
|
462
473
|
/* ---------- one report, and what happened to it ---------- */
|
|
@@ -466,7 +477,7 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
466
477
|
padding: 10px var(--bc-pad); border-bottom: 1px solid var(--bc-border);
|
|
467
478
|
background: var(--bc-bg);
|
|
468
479
|
}
|
|
469
|
-
.report-head .ttl { font-size:
|
|
480
|
+
.report-head .ttl { font-size: 13.5px; font-weight: 600; color: var(--bc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
470
481
|
.report-head .sub { font-size: var(--bc-fs-xs); color: var(--bc-faint); }
|
|
471
482
|
.report-head .pill { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
|
|
472
483
|
|
|
@@ -500,9 +511,9 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
500
511
|
border-radius: 50%; background: var(--bc-muted); vertical-align: middle;
|
|
501
512
|
}
|
|
502
513
|
.sys .t { color: var(--bc-faint); }
|
|
503
|
-
.sys.k-status .dot { background:
|
|
504
|
-
.sys.k-severity .dot { background:
|
|
505
|
-
.sys.k-assignment .dot { background:
|
|
514
|
+
.sys.k-status .dot { background: var(--bc-info); }
|
|
515
|
+
.sys.k-severity .dot { background: var(--bc-warn); }
|
|
516
|
+
.sys.k-assignment .dot { background: var(--bc-brand-mark); }
|
|
506
517
|
.sys.k-filed .dot { background: var(--bc-faint); }
|
|
507
518
|
|
|
508
519
|
/* ---------- the conversation ----------
|
|
@@ -535,24 +546,21 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
535
546
|
.msg-row.mine > * { grid-column: 1; }
|
|
536
547
|
.av {
|
|
537
548
|
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
|
|
538
|
-
font-size: 11px; font-weight:
|
|
539
|
-
background:
|
|
549
|
+
font-size: 11px; font-weight: 650; letter-spacing: .02em;
|
|
550
|
+
background: var(--bc-stone); color: var(--bc-fg);
|
|
540
551
|
}
|
|
541
|
-
.av.bot {
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
}
|
|
545
|
-
.msg-who { font-size: var(--bc-fs-xs); font-weight: 620; color: var(--bc-muted); padding: 0 4px 4px; }
|
|
546
|
-
.msg-who.auto { color: var(--bc-accent); display: inline-flex; align-items: center; gap: 5px; }
|
|
552
|
+
.av.bot { width: 28px; }
|
|
553
|
+
.msg-who { font-size: var(--bc-fs-xs); font-weight: 560; color: var(--bc-muted); padding: 0 4px 4px; }
|
|
554
|
+
.msg-who.auto { color: var(--bc-fg); display: inline-flex; align-items: center; gap: 5px; }
|
|
547
555
|
.msg-who .tag {
|
|
548
|
-
padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight:
|
|
549
|
-
text-transform: uppercase; background: var(--bc-
|
|
556
|
+
padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 650; letter-spacing: .05em;
|
|
557
|
+
text-transform: uppercase; background: var(--bc-stone); color: var(--bc-muted);
|
|
550
558
|
}
|
|
551
559
|
.bubble {
|
|
552
560
|
justify-self: start; max-width: 100%;
|
|
553
561
|
padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.5;
|
|
554
|
-
background: var(--bc-
|
|
555
|
-
border: 1px solid
|
|
562
|
+
background: var(--bc-stone); color: var(--bc-fg);
|
|
563
|
+
border: 1px solid transparent;
|
|
556
564
|
border-bottom-left-radius: 6px;
|
|
557
565
|
}
|
|
558
566
|
/* pre-wrap belongs to the text, not the box — on the box it would also render
|
|
@@ -565,9 +573,10 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
565
573
|
}
|
|
566
574
|
.msg-row.cont.theirs .bubble { border-top-left-radius: 6px; }
|
|
567
575
|
.msg-row.cont.mine .bubble { border-top-right-radius: 6px; }
|
|
568
|
-
/* A reply nobody wrote:
|
|
569
|
-
it, so it reads the same to someone who cannot
|
|
570
|
-
|
|
576
|
+
/* A reply nobody wrote: drawn on white with a hairline, beside the orb and
|
|
577
|
+
labelled "Assistant" above it, so it reads the same to someone who cannot
|
|
578
|
+
see the difference at all. */
|
|
579
|
+
.msg-row.auto .bubble { background: var(--bc-bg); border-color: var(--bc-border); }
|
|
571
580
|
/* An attachment-only message has no text to wrap, so the bubble would be an
|
|
572
581
|
empty coloured box around it. */
|
|
573
582
|
.bubble.silent { padding: 0; background: none !important; border: 0; }
|
|
@@ -581,7 +590,7 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
581
590
|
/* The assistant, thinking. Three dots in a bubble where its next message will be. */
|
|
582
591
|
.typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; justify-self: start; }
|
|
583
592
|
.typing i {
|
|
584
|
-
width:
|
|
593
|
+
width: 6px; height: 6px; border-radius: 50%; background: var(--bc-muted); opacity: .45;
|
|
585
594
|
animation: bc-typing 1.2s ease-in-out infinite;
|
|
586
595
|
}
|
|
587
596
|
.typing i:nth-child(2) { animation-delay: .15s; }
|
|
@@ -617,30 +626,29 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
617
626
|
background: var(--bc-subtle);
|
|
618
627
|
transition: background 400ms ease, border-color 400ms ease;
|
|
619
628
|
}
|
|
620
|
-
.assistant.
|
|
621
|
-
background: var(--bc-accent-soft); border-color: var(--bc-accent-line);
|
|
622
|
-
}
|
|
623
|
-
.assistant.resolved { background: color-mix(in srgb, var(--bc-ok) 9%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 35%, var(--bc-border)); }
|
|
629
|
+
.assistant.resolved { background: color-mix(in srgb, var(--bc-ok) 7%, var(--bc-bg)); border-color: color-mix(in srgb, var(--bc-ok) 30%, var(--bc-border)); }
|
|
624
630
|
/* On a call: the call's own card is what they are watching. This one states
|
|
625
|
-
what is happening and stops moving — no
|
|
631
|
+
what is happening and stops moving — no breathing orb, no travelling bar. */
|
|
626
632
|
.assistant.calling { background: var(--bc-bg); }
|
|
627
633
|
.assistant.calling .as-progress i { transition: none; }
|
|
628
634
|
.as-body.entering { animation: bc-rise 360ms var(--bc-ease) both; }
|
|
629
635
|
.as-top { display: flex; gap: 11px; align-items: center; }
|
|
636
|
+
/* The orb, while the assistant is at work; a plain disc with a glyph once it
|
|
637
|
+
is on a call or has finished. */
|
|
630
638
|
.as-orb {
|
|
631
639
|
flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
|
|
632
|
-
color: var(--bc-on-accent); font-size: 15px;
|
|
633
|
-
background: linear-gradient(140deg, var(--bc-accent), color-mix(in srgb, var(--bc-accent) 60%, #fff));
|
|
640
|
+
color: var(--bc-on-accent); font-size: 15px; background: var(--bc-accent);
|
|
634
641
|
}
|
|
635
|
-
.
|
|
636
|
-
.assistant.
|
|
637
|
-
|
|
638
|
-
|
|
642
|
+
.as-orb.orb { background: var(--bc-o2); }
|
|
643
|
+
.assistant.analyzing .as-orb.orb { animation: as-breathe 2.4s ease-in-out infinite; }
|
|
644
|
+
@keyframes as-breathe { 50% { transform: scale(.88); } }
|
|
645
|
+
.assistant.resolved .as-orb { background: var(--bc-ok); color: #fff; }
|
|
646
|
+
.assistant.reviewing .as-orb.orb { filter: saturate(.35); }
|
|
639
647
|
.as-text { min-width: 0; flex: 1; }
|
|
640
|
-
.as-title { font-weight:
|
|
648
|
+
.as-title { font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; color: var(--bc-fg); }
|
|
641
649
|
.as-detail { font-size: 12px; line-height: 1.45; color: var(--bc-muted); margin-top: 2px; }
|
|
642
650
|
.as-progress {
|
|
643
|
-
height:
|
|
651
|
+
height: 3px; margin: 12px 0 0; border-radius: 999px; overflow: hidden;
|
|
644
652
|
background: color-mix(in srgb, var(--bc-fg) 9%, transparent);
|
|
645
653
|
}
|
|
646
654
|
.as-progress i {
|
|
@@ -649,39 +657,42 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
649
657
|
}
|
|
650
658
|
.assistant.resolved .as-progress i { background: var(--bc-ok); }
|
|
651
659
|
.assistant.analyzing .as-progress i {
|
|
652
|
-
background: linear-gradient(90deg, var(--bc-accent) 0%, color-mix(in srgb, var(--bc-accent)
|
|
660
|
+
background: linear-gradient(90deg, var(--bc-accent) 0%, color-mix(in srgb, var(--bc-accent) 35%, var(--bc-bg)) 50%, var(--bc-accent) 100%);
|
|
653
661
|
background-size: 200% 100%; animation: bc-shimmer 1.6s linear infinite;
|
|
654
662
|
}
|
|
663
|
+
/* Four short labels under the bar. Allowed to wrap rather than be cut: at this
|
|
664
|
+
width "Report received" ellipsised to "Report recei…". */
|
|
655
665
|
.as-steps {
|
|
656
|
-
list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
|
|
657
|
-
margin: 8px 0 0; padding: 0; font-size: 10.5px; color: var(--bc-faint);
|
|
666
|
+
list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 6px;
|
|
667
|
+
margin: 8px 0 0; padding: 0; font-size: 10.5px; line-height: 1.3; color: var(--bc-faint);
|
|
658
668
|
}
|
|
659
|
-
.as-steps li { display: flex; align-items:
|
|
660
|
-
.as-steps li .lbl { min-width: 0; overflow
|
|
661
|
-
.as-steps li .dot { flex: none; width:
|
|
669
|
+
.as-steps li { display: flex; align-items: flex-start; gap: 5px; min-width: 0; }
|
|
670
|
+
.as-steps li .lbl { min-width: 0; overflow-wrap: anywhere; }
|
|
671
|
+
.as-steps li .dot { flex: none; width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; border: 1.5px solid currentColor; }
|
|
662
672
|
.as-steps li.done { color: var(--bc-muted); }
|
|
663
673
|
.as-steps li.done .dot { background: var(--bc-accent); border-color: var(--bc-accent); }
|
|
664
674
|
.assistant.resolved .as-steps li.done .dot { background: var(--bc-ok); border-color: var(--bc-ok); }
|
|
665
|
-
.as-steps li.active { color: var(--bc-fg); font-weight:
|
|
675
|
+
.as-steps li.active { color: var(--bc-fg); font-weight: 600; }
|
|
666
676
|
.as-steps li.active .dot { border-color: var(--bc-accent); background: var(--bc-bg); animation: as-pulse 1.2s ease-in-out infinite; }
|
|
667
|
-
@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent)
|
|
668
|
-
@media (prefers-reduced-motion: reduce) { .as-
|
|
677
|
+
@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc-accent) 18%, transparent); } }
|
|
678
|
+
@media (prefers-reduced-motion: reduce) { .as-orb, .as-steps li.active .dot, .assistant.analyzing .as-progress i, .typing i { animation: none; } }
|
|
669
679
|
|
|
670
680
|
/* Quick answers under the confirm question — only on the latest message. */
|
|
671
681
|
.msg-row .quick { display: none; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
|
|
672
682
|
.msg-row:last-child .quick { display: flex; }
|
|
673
683
|
.quick button {
|
|
674
684
|
display: inline-flex; align-items: center; gap: 6px;
|
|
675
|
-
font: inherit; font-size: 13px; font-weight:
|
|
676
|
-
border:
|
|
685
|
+
font: inherit; font-size: 13px; font-weight: 560; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
|
|
686
|
+
border: 0; background: var(--bc-bg); color: var(--bc-fg); box-shadow: 0 0 0 1px var(--bc-border);
|
|
677
687
|
transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
|
|
678
688
|
animation: bc-item-in 300ms var(--bc-ease) both;
|
|
679
689
|
}
|
|
680
|
-
.quick button:first-child { background: var(--bc-accent); color: var(--bc-on-accent); }
|
|
690
|
+
.quick button:first-child { background: var(--bc-accent); color: var(--bc-on-accent); box-shadow: none; }
|
|
681
691
|
.quick button:nth-child(2) { animation-delay: 60ms; }
|
|
682
692
|
.quick button svg { font-size: 13px; }
|
|
683
|
-
.quick button:hover {
|
|
684
|
-
.quick button:first-child:hover { background: var(--bc-accent); filter: brightness(1.
|
|
693
|
+
.quick button:hover { background: var(--bc-subtle); }
|
|
694
|
+
.quick button:first-child:hover { background: var(--bc-accent); filter: brightness(1.12) contrast(.96); }
|
|
695
|
+
.quick button:active { transform: scale(.97); }
|
|
685
696
|
|
|
686
697
|
/* ---------- the composer ---------- */
|
|
687
698
|
.composer {
|
|
@@ -698,10 +709,10 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
698
709
|
.composer .row {
|
|
699
710
|
display: flex; align-items: flex-end; gap: 4px;
|
|
700
711
|
padding: 5px; border-radius: 22px;
|
|
701
|
-
background: var(--bc-
|
|
702
|
-
transition: border-color 160ms, box-shadow 160ms;
|
|
712
|
+
background: var(--bc-stone); border: 1px solid transparent;
|
|
713
|
+
transition: border-color 160ms, box-shadow 160ms, background 160ms;
|
|
703
714
|
}
|
|
704
|
-
.composer .row:focus-within { border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
|
|
715
|
+
.composer .row:focus-within { background: var(--bc-bg); border-color: var(--bc-accent); box-shadow: var(--bc-ring); }
|
|
705
716
|
.composer textarea {
|
|
706
717
|
flex: 1; min-width: 0; min-height: 34px; max-height: 120px; resize: none; padding: 7px 6px;
|
|
707
718
|
font: inherit; font-size: 13.5px; line-height: 1.45;
|
|
@@ -726,8 +737,8 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
726
737
|
display: grid; place-items: center;
|
|
727
738
|
transition: transform 160ms var(--bc-ease), opacity 160ms, filter 160ms;
|
|
728
739
|
}
|
|
729
|
-
.composer .send:hover:not(:disabled) { filter: brightness(1.
|
|
730
|
-
.composer .send:disabled { opacity: .
|
|
740
|
+
.composer .send:hover:not(:disabled) { filter: brightness(1.12) contrast(.96); transform: scale(1.04); }
|
|
741
|
+
.composer .send:disabled { opacity: .3; cursor: default; background: var(--bc-faint); }
|
|
731
742
|
.composer .staged { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
|
|
732
743
|
.composer .chip {
|
|
733
744
|
display: flex; align-items: center; gap: 6px; max-width: 200px;
|
|
@@ -750,23 +761,16 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
750
761
|
lands on — which is what someone opening this screen came to check. */
|
|
751
762
|
.pill {
|
|
752
763
|
flex: none; display: inline-flex; align-items: center; gap: 5px;
|
|
753
|
-
font-size: 11px; font-weight:
|
|
764
|
+
font-size: 11px; font-weight: 600;
|
|
754
765
|
padding: 3px 9px; border-radius: 999px;
|
|
755
|
-
color: var(--bc-muted); background: var(--bc-
|
|
766
|
+
color: var(--bc-muted); background: var(--bc-stone);
|
|
756
767
|
}
|
|
757
768
|
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
758
|
-
|
|
759
|
-
.pill.
|
|
760
|
-
.pill.
|
|
769
|
+
/* The theme's own status colours, which already have a dark cut. */
|
|
770
|
+
.pill.open { color: var(--bc-warn); background: color-mix(in srgb, var(--bc-warn) 12%, var(--bc-bg)); }
|
|
771
|
+
.pill.in_progress { color: var(--bc-info); background: color-mix(in srgb, var(--bc-info) 12%, var(--bc-bg)); }
|
|
772
|
+
.pill.resolved { color: var(--bc-ok); background: color-mix(in srgb, var(--bc-ok) 12%, var(--bc-bg)); }
|
|
761
773
|
.pill.closed { color: var(--bc-muted); }
|
|
762
|
-
:host(.bc-dark) .pill.open { color: #fbbf24; }
|
|
763
|
-
:host(.bc-dark) .pill.in_progress { color: #7cb8ff; }
|
|
764
|
-
:host(.bc-dark) .pill.resolved { color: #4ade9a; }
|
|
765
|
-
@media (prefers-color-scheme: dark) {
|
|
766
|
-
:host(.bc-auto) .pill.open { color: #fbbf24; }
|
|
767
|
-
:host(.bc-auto) .pill.in_progress { color: #7cb8ff; }
|
|
768
|
-
:host(.bc-auto) .pill.resolved { color: #4ade9a; }
|
|
769
|
-
}
|
|
770
774
|
|
|
771
775
|
/* ---------- does the fix work ---------- */
|
|
772
776
|
.fix-verification {
|
|
@@ -786,6 +790,75 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
786
790
|
.fix-verification .feedback-status { margin: 6px 0 0; font-weight: 450; color: var(--bc-danger); font-size: var(--bc-fs-xs); }
|
|
787
791
|
.fix-verification .feedback-status:empty { display: none; }
|
|
788
792
|
|
|
793
|
+
/* ---------- how did we do ----------
|
|
794
|
+
Quieter than the card above it: that one asks whether the fix works, which
|
|
795
|
+
the team acts on; this asks how it felt, which they learn from. The stars
|
|
796
|
+
carry the only colour, so the one thing to do here is the thing you see. */
|
|
797
|
+
.fix-rating {
|
|
798
|
+
--bc-star: #f0a81c;
|
|
799
|
+
flex: none; margin: 10px 12px 0; padding: 12px 14px;
|
|
800
|
+
border-radius: var(--bc-r-lg); border: 1px solid var(--bc-border); background: var(--bc-bg);
|
|
801
|
+
font-size: var(--bc-fs-sm); color: var(--bc-fg);
|
|
802
|
+
animation: bc-rise 280ms var(--bc-ease) both;
|
|
803
|
+
}
|
|
804
|
+
.fix-rating .fr-q { margin: 0 0 6px; font-weight: 620; }
|
|
805
|
+
.fix-rating .stars { display: flex; gap: 2px; margin: 0 0 2px -4px; }
|
|
806
|
+
.fix-rating .stars button {
|
|
807
|
+
display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
|
|
808
|
+
border: 0; border-radius: 8px; background: transparent; cursor: pointer;
|
|
809
|
+
color: color-mix(in srgb, var(--bc-fg) 18%, transparent);
|
|
810
|
+
transition: color 120ms ease, transform 120ms var(--bc-ease);
|
|
811
|
+
}
|
|
812
|
+
.fix-rating .stars button svg { width: 24px; height: 24px; }
|
|
813
|
+
.fix-rating .stars button.on { color: var(--bc-star); }
|
|
814
|
+
.fix-rating .stars button:hover:not(:disabled) { transform: scale(1.08); }
|
|
815
|
+
.fix-rating .stars button:focus-visible { outline: none; box-shadow: var(--bc-ring); }
|
|
816
|
+
.fix-rating .stars button:disabled { cursor: default; }
|
|
817
|
+
.fix-rating .fr-hint { margin: 2px 0 0; font-size: var(--bc-fs-xs); color: var(--bc-faint); }
|
|
818
|
+
.fix-rating .fr-said { margin: 6px 0 0; font-size: 13px; color: var(--bc-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
819
|
+
.fix-rating .fr-note { margin-top: 8px; }
|
|
820
|
+
.fix-rating .fr-note textarea { min-height: 52px; margin-bottom: 8px; font-size: 13px; }
|
|
821
|
+
.fix-rating .fr-note button {
|
|
822
|
+
padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 620; border-radius: 999px; cursor: pointer;
|
|
823
|
+
border: 1px solid var(--bc-border); background: var(--bc-bg); color: var(--bc-fg);
|
|
824
|
+
}
|
|
825
|
+
.fix-rating .feedback-status { margin: 6px 0 0; color: var(--bc-danger); font-size: var(--bc-fs-xs); }
|
|
826
|
+
.fix-rating .feedback-status:empty { display: none; }
|
|
827
|
+
@media (prefers-reduced-motion: reduce) { .fix-rating .stars button { transition: none; } .fix-rating .stars button:hover { transform: none; } }
|
|
828
|
+
|
|
829
|
+
/* The rating on a history row: the score given, or a nudge to give one. */
|
|
830
|
+
.history .sub .rated { display: inline-flex; align-items: center; gap: 2px; color: var(--bc-muted); font-weight: 600; }
|
|
831
|
+
.history .sub .rated svg { width: 11px; height: 11px; color: #f0a81c; }
|
|
832
|
+
.history .sub .rate-ask { color: var(--bc-fg); font-weight: 600; }
|
|
833
|
+
|
|
834
|
+
/* ---------- a settled report waiting for its rating ----------
|
|
835
|
+
Above the form on the first screen: the same stars as under a report's
|
|
836
|
+
conversation, with the report they are about named on top. */
|
|
837
|
+
.rate-due { margin: 0 0 14px; }
|
|
838
|
+
.rate-due:focus { outline: none; }
|
|
839
|
+
.rate-due:focus-visible { box-shadow: var(--bc-ring); }
|
|
840
|
+
.rate-due .rd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
|
|
841
|
+
.rate-due .rd-eyebrow {
|
|
842
|
+
font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--bc-faint);
|
|
843
|
+
}
|
|
844
|
+
.rate-due.is-required .rd-eyebrow { color: var(--bc-fg); }
|
|
845
|
+
.rate-due .rd-later { font-size: var(--bc-fs-xs); color: var(--bc-muted); }
|
|
846
|
+
.rate-due .rd-report {
|
|
847
|
+
display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center;
|
|
848
|
+
margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--bc-border);
|
|
849
|
+
}
|
|
850
|
+
.rate-due .rd-ico {
|
|
851
|
+
grid-row: span 2; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
|
|
852
|
+
background: color-mix(in srgb, var(--bc-ok) 14%, transparent); color: var(--bc-ok);
|
|
853
|
+
}
|
|
854
|
+
.rate-due .rd-ico svg { width: 13px; height: 13px; }
|
|
855
|
+
.rate-due .rd-ttl { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
856
|
+
.rate-due .rd-sub { font-size: var(--bc-fs-xs); color: var(--bc-muted); }
|
|
857
|
+
|
|
858
|
+
/* What a required rating is holding: still in sight, plainly not yet. */
|
|
859
|
+
.held { opacity: .42; transition: opacity 200ms ease; }
|
|
860
|
+
@media (prefers-reduced-motion: reduce) { .held { transition: none; } }
|
|
861
|
+
|
|
789
862
|
/* A call in progress, in place of the form.
|
|
790
863
|
---------------------------------------------------------------------------
|
|
791
864
|
Deliberately not styled as a chat. Nothing arrives here to read — the
|
|
@@ -835,13 +908,13 @@ button.quiet:hover { color: var(--bc-accent); }
|
|
|
835
908
|
and this screen's padding was landing on every one of them. */
|
|
836
909
|
div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 240ms ease both; }
|
|
837
910
|
.done .tick {
|
|
838
|
-
width:
|
|
839
|
-
display: grid; place-items: center; font-size:
|
|
840
|
-
background:
|
|
841
|
-
box-shadow: 0 0 0
|
|
911
|
+
width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
|
|
912
|
+
display: grid; place-items: center; font-size: 24px;
|
|
913
|
+
background: var(--bc-ok); color: #fff;
|
|
914
|
+
box-shadow: 0 0 0 7px color-mix(in srgb, var(--bc-ok) 12%, transparent);
|
|
842
915
|
animation: bc-pop 420ms var(--bc-ease) both;
|
|
843
916
|
}
|
|
844
|
-
.done h3 { margin: 0 0 6px; font-size:
|
|
917
|
+
.done h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
|
|
845
918
|
.done p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bc-muted); }
|
|
846
919
|
.done code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--bc-subtle); color: var(--bc-fg); }
|
|
847
920
|
/* The likely wait. Set apart from the reference line above it by a rule rather
|
|
@@ -905,7 +978,7 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
|
|
|
905
978
|
is open — the sheet has its own close button, and a launcher floating over
|
|
906
979
|
the send button would be in the way of the one thing that matters. */
|
|
907
980
|
@media (max-width: 480px) {
|
|
908
|
-
.scrim { background: rgba(
|
|
981
|
+
.scrim { background: rgba(14,14,16,.4); }
|
|
909
982
|
.panel, .scrim.at-right .panel, .scrim.at-left .panel, .scrim.at-bottom .panel, .scrim.at-top .panel {
|
|
910
983
|
inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
|
|
911
984
|
border-radius: 0; border: 0;
|
|
@@ -920,6 +993,16 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
|
|
|
920
993
|
.foot:has(+ .powered) { padding-bottom: 12px; }
|
|
921
994
|
.recbar .hint { display: none; }
|
|
922
995
|
.msg-row, .typing-row { max-width: 92%; }
|
|
996
|
+
/* The question chips are one row that scrolls sideways, edge to edge, rather
|
|
997
|
+
than three stacked rows pushing the form down the screen. */
|
|
998
|
+
.picks .picks-grid {
|
|
999
|
+
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
|
|
1000
|
+
margin: 0 calc(var(--bc-pad) * -1); padding: 0 var(--bc-pad) 2px;
|
|
1001
|
+
scroll-snap-type: x proximity; scroll-padding: 0 var(--bc-pad);
|
|
1002
|
+
}
|
|
1003
|
+
.picks .picks-grid::-webkit-scrollbar { display: none; }
|
|
1004
|
+
.picks .pick { flex: none; scroll-snap-align: start; }
|
|
1005
|
+
.picks .pick .t { white-space: nowrap; }
|
|
923
1006
|
}
|
|
924
1007
|
|
|
925
1008
|
@media (pointer: coarse) {
|
|
@@ -934,7 +1017,8 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
|
|
|
934
1017
|
under it, on the one surface in the product designed for someone who is
|
|
935
1018
|
not an operator and gets no second attempt. */
|
|
936
1019
|
.seg button { min-height: 44px; }
|
|
937
|
-
.tool { min-height:
|
|
1020
|
+
.tool, .known .issue .join { min-height: 44px; }
|
|
1021
|
+
.picks .pick { min-height: 40px; }
|
|
938
1022
|
button.primary, button.ghost { height: 44px; }
|
|
939
1023
|
.composer .send, .composer .tool { width: 40px; height: 40px; min-height: 0; }
|
|
940
1024
|
textarea { min-height: 104px; }
|
|
@@ -943,7 +1027,7 @@ div.done { padding: 44px 26px 44px; text-align: center; animation: bc-fade-in 24
|
|
|
943
1027
|
/* The close button and the thumbnails' remove buttons are small glyphs whose
|
|
944
1028
|
boxes cannot grow without moving what is beside them, so each keeps its
|
|
945
1029
|
size and gets an invisible target drawn around it instead. The theme
|
|
946
|
-
|
|
1030
|
+
button in the header is one of these. */
|
|
947
1031
|
.head .icon-btn, .thumb .drop, .brand-credit { position: relative; }
|
|
948
1032
|
.thumb .drop { position: absolute; opacity: 1; }
|
|
949
1033
|
.head .icon-btn::after, .thumb .drop::after, .brand-credit::after {
|