@danieltmn/tamnora 0.9.5 → 0.9.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/harness/packages/cli/src/commands/autostart.js +5 -1
  3. package/harness/packages/server/public/app.js +122 -16
  4. package/harness/packages/server/public/favicon.ico +0 -0
  5. package/harness/packages/server/public/icons/icon-128x128.png +0 -0
  6. package/harness/packages/server/public/icons/icon-144x144.png +0 -0
  7. package/harness/packages/server/public/icons/icon-152x152.png +0 -0
  8. package/harness/packages/server/public/icons/icon-192x192.png +0 -0
  9. package/harness/packages/server/public/icons/icon-384x384.png +0 -0
  10. package/harness/packages/server/public/icons/icon-512x512.png +0 -0
  11. package/harness/packages/server/public/icons/icon-72x72.png +0 -0
  12. package/harness/packages/server/public/icons/icon-96x96.png +0 -0
  13. package/harness/packages/server/public/icons/logo.png +0 -0
  14. package/harness/packages/server/public/icons/tamnora.ico +0 -0
  15. package/harness/packages/server/public/index.html +63 -28
  16. package/harness/packages/server/public/landing/index.html +8 -4
  17. package/harness/packages/server/public/logo.png +0 -0
  18. package/harness/packages/server/public/manifest.webmanifest +20 -0
  19. package/harness/packages/server/public/styles.css +1772 -1667
  20. package/harness/packages/server/src/static.js +1 -0
  21. package/package.json +1 -1
package/harness/packages/server/public/styles.css CHANGED
@@ -1,1670 +1,1775 @@
1
- /* tamnora console — paper / aguada theme (opencode/codex-like) */
2
- :root {
3
- --bg: #101107;
4
- --panel: rgba(21, 22, 16, 0.86);
5
- --rail: rgba(17, 18, 12, 0.82);
6
- --theirs: #1c1d15;
7
- --mine: #d9704a;
8
- --mine-soft: rgba(217, 112, 74, 0.12);
9
- --text: #e9e4d6;
10
- --muted: #9c9789;
11
- --border: rgba(240, 234, 219, 0.13);
12
- --danger: #e0705c;
13
- --accent: #d9704a;
14
- --accent-dark: #b8542f;
15
- --accent-soft: rgba(217, 112, 74, 0.18);
16
- --ok: #8fae7f;
17
- --warn: #d9a441;
18
- --solid: #12130b;
19
- --primary-fg: #fff7ef;
20
- --sans: Manrope, system-ui, "Segoe UI", Arial, sans-serif;
21
- --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
22
- --mono: "DM Mono", ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
23
- --font: var(--sans);
24
- --chat-font: 14.5px;
25
- --page-bg: linear-gradient(rgba(11, 12, 8, 0.96), rgba(11, 12, 8, 0.96)), url("/img/fondo-agentes.webp") center/cover fixed no-repeat;
26
- color-scheme: dark;
27
- }
28
-
29
- html[data-theme='paper'] {
30
- color-scheme: light;
31
- --paper: #f5efe2;
32
- --paper-2: #ebe4d4;
33
- --glass: rgba(247, 242, 230, 0.73);
34
- --bg: #f5efe2;
35
- --panel: rgba(247, 242, 230, 0.73);
36
- --rail: rgba(235, 228, 212, 0.72);
37
- --theirs: #ebe4d4;
38
- --mine: #bd542f;
39
- --mine-soft: rgba(189, 84, 47, 0.09);
40
- --text: #20211d;
41
- --muted: #68685d;
42
- --border: rgba(43, 43, 37, 0.16);
43
- --danger: #934022;
44
- --accent: #bd542f;
45
- --accent-dark: #934022;
46
- --accent-soft: rgba(189, 84, 47, 0.1);
47
- --ok: #66865d;
48
- --warn: #8a5a00;
49
- --solid: #f7f2e6;
50
- --primary-fg: #fbf6ec;
51
- --page-bg: linear-gradient(90deg, rgba(248, 244, 234, 0.9), rgba(244, 238, 224, 0.86)), url("/img/fondo-agentes.webp") center/cover fixed no-repeat;
52
- }
53
- html[data-theme='paper'] .tok-comment { color: #7a7669; }
54
- html[data-theme='paper'] .tok-string { color: #7a4a2c; }
55
- html[data-theme='paper'] .tok-number { color: #8a5a00; }
56
- html[data-theme='paper'] .tok-keyword { color: #a3341f; }
57
- html[data-theme='paper'] .btn.primary { color: #fbf6ec; }
58
-
59
- * { box-sizing: border-box; }
60
- [hidden] { display: none !important; }
61
-
62
- * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
63
- ::-webkit-scrollbar { width: 10px; height: 10px; }
64
- ::-webkit-scrollbar-track { background: transparent; }
65
- ::-webkit-scrollbar-thumb {
66
- background: var(--border);
67
- border-radius: 8px;
68
- border: 2px solid transparent;
69
- background-clip: content-box;
70
- }
71
- ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
72
- ::-webkit-scrollbar-corner { background: transparent; }
73
-
74
- html, body {
75
- margin: 0;
76
- height: 100%;
77
- color: var(--text);
78
- font: 13.5px/1.5 var(--font);
79
- }
80
-
81
- body { display: flex; flex-direction: column; background: var(--page-bg); }
82
- pre, code, kbd, samp { font-family: var(--mono); }
83
- .muted { color: var(--muted); }
84
-
85
- /* topbar ------------------------------------------------------------------ */
86
- .topbar {
87
- position: relative;
88
- z-index: 40;
89
- display: grid;
90
- grid-template-columns: 1fr auto 1fr;
91
- align-items: center;
92
- gap: 16px;
93
- padding: 10px 16px;
94
- border-bottom: 1px solid var(--border);
95
- background: var(--panel);
96
- backdrop-filter: blur(14px);
97
- }
98
- .brand {
99
- grid-column: 1;
100
- justify-self: start;
101
- font-family: var(--serif);
102
- font-weight: 700;
103
- font-size: 15px;
104
- letter-spacing: -0.02em;
105
- display: flex;
106
- align-items: center;
107
- gap: 9px;
108
- }
109
- .brand .logo {
110
- min-width: 26px;
111
- height: 26px;
112
- padding: 0 8px;
113
- border: 1px solid var(--border);
114
- border-radius: 8px;
115
- display: flex;
116
- align-items: center;
117
- justify-content: center;
118
- color: var(--text);
119
- font: 700 14px var(--serif);
120
- letter-spacing: -0.03em;
121
- flex: 0 0 auto;
122
- }
123
- .brand .logo .logo-t { color: var(--text); -webkit-text-stroke: 0.3px var(--text); }
124
- .brand .logo .logo-h { color: var(--accent); -webkit-text-stroke: 0.3px var(--accent); }
125
- .brand .ver { color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.04em; }
126
- .tabs { grid-column: 2; justify-self: center; display: flex; gap: 2px; }
127
- .tab {
128
- background: transparent;
129
- color: var(--muted);
130
- border: 1px solid transparent;
131
- border-radius: 999px;
132
- padding: 6px 14px;
133
- cursor: pointer;
134
- font: 600 12.5px var(--sans);
135
- }
136
- .tab:hover { color: var(--text); }
137
- .tab.active { color: var(--text); background: var(--theirs); border-color: var(--border); }
138
-
139
- .menu { position: relative; display: block; }
140
- #more-tab { display: inline-flex; align-items: center; gap: 6px; }
141
- #more-tab svg { width: 18px; height: 18px; display: block; }
142
- #more-tab-label { display: none; font: 600 12.5px var(--sans); }
143
- @media (min-width: 821px) {
144
- #more-menu button.menu-primary { display: none; }
145
- }
146
-
147
- #theme-toggle .ico-moon { display: none; }
148
- html[data-theme='dark'] #theme-toggle .ico-sun { display: none; }
149
- html[data-theme='dark'] #theme-toggle .ico-moon { display: block; }
150
- .menu-pop {
151
- position: absolute;
152
- top: calc(100% + 4px);
153
- left: 0;
154
- z-index: 60;
155
- min-width: 130px;
156
- display: flex;
157
- flex-direction: column;
158
- gap: 2px;
159
- padding: 4px;
160
- background: var(--solid, var(--panel));
161
- border: 1px solid var(--border);
162
- border-radius: 10px;
163
- box-shadow: 0 14px 34px rgba(20, 18, 12, 0.24);
164
- backdrop-filter: blur(18px);
165
- }
166
- .menu-pop button {
167
- background: transparent;
168
- border: 0;
169
- color: var(--text);
170
- text-align: left;
171
- padding: 7px 10px;
172
- border-radius: 6px;
173
- cursor: pointer;
174
- font: inherit;
175
- }
176
- .menu-pop button:hover { background: var(--theirs); }
177
- .menu-pop button.active { background: var(--theirs); color: var(--accent); }
178
- .settings { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
179
- .settings select { max-width: 220px; }
180
-
181
- /* Nueva sesión en el topbar: texto en desktop, solo el icono en móvil, donde
182
- el ancho es el recurso escaso. */
183
- .topbar-new {
184
- display: inline-flex;
185
- align-items: center;
186
- justify-content: center;
187
- gap: 6px;
188
- height: 34px;
189
- padding: 0 13px;
190
- flex: 0 0 auto;
191
- }
192
- .topbar-new svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
193
- .topbar-new-label { display: none; }
194
- @media (min-width: 821px) {
195
- .topbar-new-label { display: inline; }
196
- }
197
- .check { color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }
198
-
199
- select, input, textarea {
200
- background: var(--bg);
201
- border: 1px solid var(--border);
202
- border-radius: 10px;
203
- color: var(--text);
204
- padding: 7px 10px;
205
- font: inherit;
206
- outline: none;
207
- }
208
- select:focus, input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
209
-
210
- /* layout ------------------------------------------------------------------ */
211
- main { flex: 1; min-height: 0; min-width: 0; display: flex; }
212
- .view { display: none; flex: 1; min-height: 0; min-width: 0; position: relative; }
213
- .view.active { display: flex; min-width: 0; }
214
-
215
- .btn {
216
- background: var(--theirs);
217
- color: var(--text);
218
- border: 1px solid var(--border);
219
- border-radius: 10px;
220
- padding: 7px 13px;
221
- cursor: pointer;
222
- font: 600 12.5px var(--sans);
223
- transition: 0.15s ease;
224
- /* Sin esto, en una fila apretada "denegar" se parte en "den egar". */
225
- white-space: nowrap;
226
- }
227
- .btn:hover { border-color: var(--accent); color: var(--text); }
228
- .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--primary-fg); font-weight: 700; }
229
- .btn.primary:hover { filter: brightness(1.08); }
230
- .btn.block { width: 100%; }
231
- .btn.danger:hover { border-color: var(--danger); color: var(--danger); }
232
- .btn:disabled { opacity: 0.5; cursor: default; }
233
-
234
- /* chat -------------------------------------------------------------------- */
235
- .sidebar {
236
- width: 260px;
237
- flex: 0 0 auto;
238
- border-right: 1px solid var(--border);
239
- background: var(--rail);
240
- backdrop-filter: blur(14px);
241
- padding: 10px;
242
- display: flex;
243
- flex-direction: column;
244
- gap: 8px;
245
- overflow-y: auto;
246
- }
247
- .sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; flex: 1; overflow-y: auto; }
248
- .session-group { list-style: none; }
249
- .group-head {
250
- display: flex;
251
- align-items: center;
252
- gap: 7px;
253
- padding: 5px 7px;
254
- border-radius: 7px;
255
- cursor: pointer;
256
- color: var(--muted);
257
- }
258
- .group-head:hover { background: var(--panel); color: var(--text); }
259
- .group-head .tw { width: 14px; height: 14px; flex: 0 0 auto; display: grid; place-items: center; }
260
- .group-head .fi { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }
261
- .group-head .gname {
262
- flex: 1;
263
- min-width: 0;
264
- overflow: hidden;
265
- text-overflow: ellipsis;
266
- white-space: nowrap;
267
- font: 600 11px var(--sans);
268
- letter-spacing: 0.02em;
269
- }
270
- .group-head .gcount { font: 500 10px var(--mono); opacity: 0.65; }
271
- .group-sessions { list-style: none; margin: 0; padding: 3px 0 0 15px; display: flex; flex-direction: column; gap: 2px; }
272
- .session-item {
273
- display: flex;
274
- align-items: center;
275
- gap: 6px;
276
- padding: 6px 9px;
277
- border-radius: 6px;
278
- cursor: pointer;
279
- color: var(--muted);
280
- white-space: nowrap;
281
- overflow: hidden;
282
- border: 1px solid transparent;
283
- }
284
- .session-item:hover { background: var(--panel); color: var(--text); }
285
- .session-item.active { background: var(--theirs); color: var(--text); border-color: var(--border); }
286
- .session-item .sub { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
287
- .session-item .session-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
288
- .session-live {
289
- flex: none;
290
- width: 6px;
291
- height: 6px;
292
- border-radius: 50%;
293
- background: var(--accent);
294
- animation: live-pulse 1.4s ease-in-out infinite;
295
- }
296
- .session-await {
297
- flex: none;
298
- padding: 0 5px;
299
- height: 14px;
300
- line-height: 14px;
301
- border-radius: 7px;
302
- font-size: 10px;
303
- font-weight: 700;
304
- color: var(--bg);
305
- background: var(--warn);
306
- }
307
- @keyframes live-pulse {
308
- 0%, 100% { opacity: 1; }
309
- 50% { opacity: 0.25; }
310
- }
311
- .session-del,
312
- .group-del {
313
- flex: 0 0 auto;
314
- display: grid;
315
- place-items: center;
316
- padding: 2px;
317
- border: 0;
318
- border-radius: 5px;
319
- background: none;
320
- color: var(--muted);
321
- cursor: pointer;
322
- opacity: 0;
323
- transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
324
- }
325
- .session-item:hover .session-del,
326
- .session-item:focus-within .session-del,
327
- .group-head:hover .group-del,
328
- .group-head:focus-within .group-del { opacity: 1; }
329
- .session-del:hover,
330
- .group-del:hover { color: var(--danger); background: var(--panel); }
331
- @media (hover: none) {
332
- .session-del,
333
- .group-del { opacity: 0.7; }
334
- }
335
- .rail-footer { border-top: 1px solid var(--border); padding-top: 8px; color: var(--muted); font-size: 12px; }
336
- .rail-footer b { color: var(--text); display: block; word-break: break-all; font-weight: 500; }
337
- .rail-exit {
338
- display: inline-block;
339
- margin-top: 9px;
340
- color: var(--muted);
341
- font: 500 11px var(--mono);
342
- letter-spacing: 0.06em;
343
- text-decoration: none;
344
- }
345
- .rail-exit:hover { color: var(--accent); }
346
-
347
- .conversation { flex: 1; display: flex; flex-direction: column; min-width: 0; }.panes { flex: 1; min-height: 0; display: flex; min-width: 0; position: relative; }
348
- .panes > .messages { flex: 1; min-height: 0; min-width: 0; }
349
- .messages { flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 20px; font-size: var(--chat-font); }
350
-
351
- /* resizable gutters -------------------------------------------------------- */
352
- .resizer {
353
- flex: 0 0 auto;
354
- width: 7px;
355
- cursor: col-resize;
356
- background: transparent;
357
- transition: background 0.12s ease;
358
- }
359
- .resizer:hover, .resizer.dragging { background: var(--accent-soft); }
360
- body.resizing { cursor: col-resize; user-select: none; }
361
- body.resizing * { cursor: col-resize !important; }
362
-
363
- /* scroll rápido de la conversación ---------------------------------------- */
364
- .scroll-nav {
365
- position: absolute;
366
- right: 16px;
367
- bottom: 16px;
368
- z-index: 25;
369
- display: flex;
370
- flex-direction: column;
371
- gap: 6px;
372
- }
373
- .scroll-nav[hidden] { display: none; }
374
- .scroll-btn {
375
- display: grid;
376
- place-items: center;
377
- width: 32px;
378
- height: 32px;
379
- padding: 0;
380
- border: 1px solid var(--border);
381
- border-radius: 999px;
382
- background: var(--solid, var(--panel));
383
- color: var(--muted);
384
- cursor: pointer;
385
- backdrop-filter: blur(14px);
386
- box-shadow: 0 6px 18px rgb(20 18 12 / 0.22);
387
- transition: color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
388
- }
389
- .scroll-btn svg { width: 16px; height: 16px; display: block; }
390
- .scroll-btn:hover { color: var(--accent); border-color: var(--accent); }
391
- .scroll-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--border); color: var(--muted); }
392
-
393
- /* session tabs ------------------------------------------------------------- */
394
- .tabbar {
395
- display: flex;
396
- align-items: center;
397
- gap: 5px;
398
- padding: 8px 12px 0;
399
- overflow-x: auto;
400
- flex: 0 0 auto;
401
- }
402
- .session-tab {
403
- display: flex;
404
- align-items: center;
405
- gap: 7px;
406
- max-width: 220px;
407
- padding: 5px 8px 5px 11px;
408
- border: 1px solid var(--border);
409
- border-radius: 999px;
410
- background: transparent;
411
- color: var(--muted);
412
- cursor: pointer;
413
- font: 600 12px var(--sans);
414
- flex: 0 0 auto;
415
- }
416
- .session-tab:hover { color: var(--text); border-color: var(--accent-soft); }
417
- .session-tab.active { color: var(--text); background: var(--theirs); border-color: var(--accent); }
418
- .session-tab .tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
419
- .session-tab .tab-close { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--muted); flex: 0 0 auto; }
420
- .session-tab .tab-close:hover { background: var(--border); color: var(--text); }
421
- .session-tab .tab-close svg { width: 12px; height: 12px; }
422
- .tab-spinner {
423
- width: 12px;
424
- height: 12px;
425
- flex: 0 0 auto;
426
- border: 2px solid var(--accent);
427
- border-right-color: transparent;
428
- border-radius: 50%;
429
- animation: spin 0.7s linear infinite;
430
- }
431
- @keyframes spin { to { transform: rotate(360deg); } }
432
- .empty { color: var(--muted); margin: auto; text-align: center; line-height: 1.8; }
433
- .empty-brand {
434
- display: flex;
435
- flex-direction: column;
436
- align-items: center;
437
- font: 700 clamp(34px, 5.2vw, 58px) / 1.02 var(--serif);
438
- letter-spacing: -0.045em;
439
- color: var(--text);
440
- }
441
- .empty-brand .accent { color: var(--accent); }
442
- .empty-sub { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
443
- .empty-hints { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; max-width: 620px; }
444
- .hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
445
- .hint kbd {
446
- font: 600 11px var(--mono);
447
- background: var(--theirs);
448
- border: 1px solid var(--border);
449
- border-radius: 6px;
450
- padding: 3px 7px;
451
- color: var(--text);
452
- }
453
-
454
- /* transcript style: role label, no bubbles */
455
- .msg { min-width: 0; }
456
- .msg-label {
457
- display: flex;
458
- align-items: center;
459
- gap: 6px;
460
- font: 500 10px var(--mono);
461
- letter-spacing: 0.14em;
462
- text-transform: uppercase;
463
- color: var(--muted);
464
- margin-bottom: 5px;
465
- }
466
- .msg.user .msg-label { color: var(--mine); }
467
- .msg-mode {
468
- font: 500 9px var(--mono);
469
- line-height: 1.5;
470
- letter-spacing: 0.08em;
471
- color: var(--accent);
472
- border: 1px solid var(--border);
473
- border-radius: 999px;
474
- padding: 0 6px;
475
- }
476
- .msg-mode[data-mode='plan'] { color: var(--warn); }
477
- .bubble {
478
- min-width: 0;
479
- padding-left: 12px;
480
- border-left: 2px solid var(--border);
481
- white-space: pre-wrap;
482
- word-break: break-word;
483
- overflow-wrap: anywhere;
484
- }
485
- .msg.user .bubble { border-left-color: var(--mine); color: var(--text); }
486
- .msg-actions { position: relative; display: flex; gap: 6px; margin-top: 7px; }
487
- .msg-menu-btn {
488
- display: inline-grid;
489
- place-items: center;
490
- width: 26px;
491
- height: 24px;
492
- padding: 0;
493
- background: transparent;
494
- border: 1px solid transparent;
495
- border-radius: 7px;
496
- color: var(--muted);
497
- cursor: pointer;
498
- opacity: 0.4;
499
- transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
500
- }
501
- .msg:hover .msg-menu-btn,
502
- .msg:focus-within .msg-menu-btn,
503
- .msg-menu-btn[aria-expanded='true'] { opacity: 1; }
504
- .msg-menu-btn:hover,
505
- .msg-menu-btn[aria-expanded='true'] { color: var(--text); background: var(--theirs); }
506
- .msg-menu {
507
- position: fixed;
508
- top: 0;
509
- left: 0;
510
- z-index: 60;
511
- min-width: 178px;
512
- display: flex;
513
- flex-direction: column;
514
- gap: 1px;
515
- padding: 5px;
516
- border: 1px solid var(--border);
517
- border-radius: 11px;
518
- background: var(--solid, var(--panel));
519
- box-shadow: 0 14px 34px rgb(0 0 0 / 0.24);
520
- backdrop-filter: blur(18px);
521
- }
522
- .msg-menu[hidden] { display: none; }
523
- .msg-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
524
- .msg-menu .msg-act {
525
- width: 100%;
526
- display: flex;
527
- align-items: center;
528
- gap: 8px;
529
- text-align: left;
530
- background: transparent;
531
- border: 0;
532
- border-radius: 7px;
533
- color: var(--text);
534
- font: 500 12.5px var(--sans);
535
- padding: 6px 8px;
536
- cursor: pointer;
537
- }
538
- .msg-act .mi { flex: 0 0 auto; color: var(--muted); }
539
- .msg-act .mlabel { min-width: 0; }
540
- .msg-menu .msg-act:hover { background: var(--theirs); }
541
- .msg-menu .msg-act:hover .mi { color: var(--accent); }
542
- .msg-menu .msg-act.danger { color: var(--danger); }
543
- .msg-menu .msg-act.danger:hover { background: var(--theirs); }
544
- .msg-menu .msg-act.danger:hover .mi { color: var(--danger); }
545
-
546
- /* En PC el menú del mensaje va en linea (una fila), con el mismo lenguaje
547
- visual de la consola. En pantallas chicas queda como lista desplegable. */
548
- @media (min-width: 821px) {
549
- .msg-menu {
550
- flex-direction: row;
551
- align-items: center;
552
- min-width: 0;
553
- gap: 2px;
554
- }
555
- .msg-menu .msg-act { width: auto; white-space: nowrap; }
556
- .msg-menu-sep { width: 1px; height: auto; align-self: stretch; margin: 6px 3px; }
557
- }
558
- .bubble .tools { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
559
-
560
- .tools-actions { display: flex; align-items: center; gap: 8px; }
561
- .tools-actions[hidden] { display: none; }
562
- .tools-count { color: var(--muted); font-size: 12px; }
563
- .tools-toggle {
564
- background: none;
565
- border: none;
566
- color: var(--accent);
567
- cursor: pointer;
568
- font: 600 12px var(--sans);
569
- padding: 2px 0;
570
- }
571
- .tools-toggle:hover { text-decoration: underline; }
572
-
573
- .tool-card { font-size: 12.5px; border-left: 2px solid var(--border); padding-left: 10px; min-width: 0; }
574
- .tool-card > .tool-head {
575
- display: flex;
576
- gap: 8px;
577
- align-items: baseline;
578
- min-width: 0;
579
- cursor: pointer;
580
- list-style: none;
581
- touch-action: manipulation;
582
- }
583
- .tool-card > .tool-head::-webkit-details-marker { display: none; }
584
- .tool-card > .tool-head::before {
585
- content: '▸';
586
- color: var(--muted);
587
- flex: 0 0 auto;
588
- font-size: 10px;
589
- transition: transform 0.12s ease;
590
- }
591
- .tool-card[open] > .tool-head::before { transform: rotate(90deg); }
592
- .tool-card .tool-glyph { color: var(--muted); flex: 0 0 auto; }
593
- .tool-card.running .tool-glyph { color: var(--accent); animation: pulse 1s steps(2, start) infinite; }
594
- .tool-card.done .tool-glyph { color: var(--ok); }
595
- .tool-card.failed .tool-glyph { color: var(--danger); }
596
- .tool-card .tool-name { color: var(--accent); font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
597
- .tool-card .tool-args {
598
- color: var(--muted);
599
- flex: 1 1 auto;
600
- min-width: 0;
601
- overflow: hidden;
602
- text-overflow: ellipsis;
603
- white-space: nowrap;
604
- }
605
- .tool-card > .tool-out {
606
- color: var(--muted);
607
- margin: 4px 0 2px 18px;
608
- padding-left: 10px;
609
- border-left: 1px solid var(--border);
610
- white-space: pre-wrap;
611
- word-break: break-word;
612
- max-height: 320px;
613
- overflow: auto;
614
- }
615
- .tool-card > .tool-out:empty { display: none; }
616
- .tool-card > .tool-audio-btn {
617
- display: inline-flex;
618
- align-items: center;
619
- gap: 6px;
620
- margin: 4px 0 2px 18px;
621
- padding: 4px 10px;
622
- border: 1px solid var(--border);
623
- border-radius: 999px;
624
- background: transparent;
625
- color: var(--accent);
626
- cursor: pointer;
627
- font: 600 12px var(--sans);
628
- }
629
- .tool-card > .tool-audio-btn:hover { background: var(--theirs); }
630
- .tool-card > .tool-shot {
631
- display: block;
632
- max-width: calc(100% - 28px);
633
- max-height: 420px;
634
- width: auto;
635
- margin: 6px 0 4px 18px;
636
- border: 1px solid var(--border);
637
- border-radius: 8px;
638
- cursor: zoom-in;
639
- background: #fff;
640
- }
641
-
642
- /* Reproductor único de audio (narración, speak, resumen): visible y detenible. */
643
- .audio-player {
644
- display: flex;
645
- align-items: center;
646
- gap: 10px;
647
- padding: 7px 10px;
648
- margin-bottom: 6px;
649
- border: 1px solid var(--border);
650
- border-radius: 10px;
651
- background: var(--solid, var(--panel));
652
- box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
653
- }
654
- .audio-player[hidden] { display: none; }
655
- .audio-player .ap-btn {
656
- flex: 0 0 auto;
657
- display: inline-grid;
658
- place-items: center;
659
- width: 28px;
660
- height: 28px;
661
- padding: 0;
662
- border: 1px solid var(--border);
663
- border-radius: 999px;
664
- background: transparent;
665
- color: var(--accent);
666
- cursor: pointer;
667
- }
668
- .audio-player .ap-btn:hover { background: var(--theirs); }
669
- .audio-player .ap-stop { color: var(--danger); }
670
- .audio-player .ap-info { flex: 1 1 auto; min-width: 0; }
671
- .audio-player .ap-label {
672
- display: block;
673
- color: var(--muted);
674
- font: 600 11px var(--sans);
675
- text-transform: uppercase;
676
- letter-spacing: 0.04em;
677
- margin-bottom: 4px;
678
- }
679
- .audio-player .ap-progress {
680
- height: 4px;
681
- border-radius: 999px;
682
- background: var(--border);
683
- overflow: hidden;
684
- }
685
- .audio-player .ap-bar {
686
- width: 0%;
687
- height: 100%;
688
- border-radius: 999px;
689
- background: var(--accent);
690
- transition: width 0.15s linear;
691
- }
692
- .audio-player .ap-queue { flex: 0 0 auto; color: var(--muted); font: 600 11px var(--sans); }
693
- .audio-player .ap-queue[hidden] { display: none; }
694
- .tool-more {
695
- display: inline-block;
696
- margin: 2px 0 2px 18px;
697
- background: none;
698
- border: none;
699
- color: var(--accent);
700
- cursor: pointer;
701
- font: 600 12px var(--sans);
702
- padding: 0;
703
- }
704
- .tool-more[hidden] { display: none; }
705
- .tool-more:hover { text-decoration: underline; }
706
-
707
- .agent-card {
708
- border: 1px solid var(--border);
709
- border-radius: 7px;
710
- padding: 6px 9px;
711
- background: color-mix(in srgb, var(--accent) 4%, transparent);
712
- min-width: 0;
713
- }
714
- .agent-card > .agent-head {
715
- display: flex;
716
- gap: 7px;
717
- align-items: baseline;
718
- cursor: pointer;
719
- list-style: none;
720
- touch-action: manipulation;
721
- }
722
- .agent-card > .agent-head::-webkit-details-marker { display: none; }
723
- .agent-card > .agent-head::before {
724
- content: '▸';
725
- color: var(--muted);
726
- font-size: 10px;
727
- transition: transform 0.12s ease;
728
- }
729
- .agent-card[open] > .agent-head::before { transform: rotate(90deg); }
730
- .agent-card .agent-glyph { color: var(--accent); flex: 0 0 auto; }
731
- .agent-card.running .agent-glyph { animation: pulse 1s steps(2, start) infinite; }
732
- .agent-card.done .agent-glyph { color: var(--ok); }
733
- .agent-card.failed .agent-glyph { color: var(--danger); }
734
- .agent-card .agent-title {
735
- color: var(--text);
736
- font-weight: 700;
737
- flex: 1 1 auto;
738
- min-width: 0;
739
- overflow: hidden;
740
- text-overflow: ellipsis;
741
- white-space: nowrap;
742
- }
743
- .agent-card .agent-status { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
744
- .agent-card > .agent-body {
745
- margin: 6px 0 2px 16px;
746
- border-left: 1px solid var(--border);
747
- padding-left: 10px;
748
- display: flex;
749
- flex-direction: column;
750
- gap: 6px;
751
- }
752
- .agent-card .agent-text:empty { display: none; }
753
- .agent-card .agent-tools { display: flex; flex-direction: column; gap: 6px; }
754
- .agent-card .agent-tools:empty { display: none; }
755
- .tool-out .diff-line { display: block; }
756
- .tool-out .diff-add { color: var(--ok); }
757
- .tool-out .diff-del { color: var(--danger); }
758
- .tool-out .diff-eq { color: var(--muted); }
759
- .tool-out .diff-sep { color: var(--muted); opacity: 0.55; }
760
-
761
- .perm-card {
762
- border: 1px solid var(--warn);
763
- border-radius: 7px;
764
- padding: 9px 11px;
765
- background: rgba(210, 153, 34, 0.06);
766
- }
767
- .perm-card .perm-head { display: flex; gap: 7px; align-items: center; color: var(--warn); font-weight: 700; }
768
- .perm-card .perm-args { color: var(--muted); margin: 5px 0 9px; white-space: pre-wrap; word-break: break-word; max-height: 7.5em; overflow: auto; }
769
- .perm-card .perm-actions { display: flex; align-items: center; gap: 8px; }
770
- .perm-card .spacer { flex: 1; }
771
- .perm-card.approved { border-color: var(--ok); background: rgba(63, 185, 80, 0.06); }
772
- .perm-card.approved .perm-head { color: var(--ok); }
773
- .perm-card.denied { border-color: var(--danger); background: rgba(248, 81, 73, 0.06); }
774
- .perm-card.denied .perm-head { color: var(--danger); }
775
- .perm-card.collapsed { padding: 5px 11px; background: transparent; }
776
- .perm-card.collapsed .perm-args,
777
- .perm-card.collapsed .perm-actions { display: none; }
778
-
779
- /* activity indicators ------------------------------------------------------ */
780
- .activity { display: flex; align-items: center; gap: 9px; margin-top: 10px; color: var(--muted); font-size: 12.5px; }
781
- .activity .loader { color: var(--accent); }
782
- .activity-label { color: var(--muted); }
783
- #sb-rounds.running { color: var(--accent); }
784
- .sb-activity { display: inline-flex; align-items: center; gap: 6px; }
785
- .sb-activity .loader { color: var(--accent); }
786
- .sb-activity .loader-thinking { width: 24px; height: 6px; }
787
- .sb-activity .loader-working { width: 13px; height: 13px; }
788
- .sb-activity .activity-label { color: var(--muted); }
789
-
790
- .loader-thinking {
791
- width: 32px;
792
- height: 8px;
793
- --c: currentColor 92%, transparent;
794
- background:
795
- radial-gradient(circle closest-side, var(--c)) calc(100% / -4) 0,
796
- radial-gradient(circle closest-side, var(--c)) calc(100% / 4) 0;
797
- background-size: calc(100% / 2) 100%;
798
- animation: loader-thinking 1.5s infinite;
799
- }
800
- @keyframes loader-thinking {
801
- 0% { background-position: calc(100% / -4) 0, calc(100% / 4) 0; }
802
- 50% { background-position: calc(100% / -4) -8px, calc(100% / 4) 8px; }
803
- 100% { background-position: calc(100% / 4) -8px, calc(300% / 4) 8px; }
804
- }
805
-
806
- .loader-working {
807
- width: 18px;
808
- height: 18px;
809
- --g: conic-gradient(from -90deg at 3px 3px, currentColor 90deg, transparent 0);
810
- background: var(--g), var(--g), var(--g);
811
- background-size: 50% 50%;
812
- animation: loader-working 1s infinite;
813
- }
814
- @keyframes loader-working {
815
- 0% { background-position: 0 0, 3px 3px, 6px 6px; }
816
- 50% { background-position: 0 6px, 3px 3px, 6px 0; }
817
- 100% { background-position: 6px 6px, 3px 3px, 0 0; }
818
- }
819
-
820
- .chip {
821
- font-size: 12.5px;
822
- color: var(--muted);
823
- border-left: 2px solid var(--warn);
824
- padding: 2px 0 2px 10px;
825
- white-space: pre-wrap;
826
- word-break: break-word;
827
- }
828
- .chip.err { border-left-color: var(--danger); color: var(--danger); }
829
- .chip.ok { border-left-color: var(--ok); color: var(--ok); }
830
- .chip.warn { border-left-color: var(--warn); color: var(--warn); }
831
- details.reasoning { margin-top: 6px; }
832
- details.reasoning > summary { color: var(--muted); cursor: pointer; font-size: 12.5px; }
833
- details.reasoning .body { color: var(--muted); white-space: pre-wrap; margin-top: 4px; border-left: 1px solid var(--border); padding-left: 10px; }
834
-
835
- @keyframes pulse { 50% { opacity: 0.35; } }
836
-
837
- .composer { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(14px); }
838
- .composer.dragging { outline: 1px dashed var(--accent); outline-offset: -4px; }
839
- .composer-row { display: flex; align-items: flex-end; gap: 8px; }
840
- .prompt-mark { color: var(--mine); font-weight: 700; padding-bottom: 8px; }
841
- .composer textarea { flex: 1; resize: none; max-height: 180px; }
842
- .btn.icon {
843
- width: 34px;
844
- height: 34px;
845
- padding: 0;
846
- display: grid;
847
- place-items: center;
848
- flex: 0 0 auto;
849
- line-height: 1;
850
- position: relative;
851
- }
852
- .btn.icon svg { width: 18px; height: 18px; display: block; }
853
- .btn.icon:hover { color: var(--accent); }
854
- /* Dictado activo: verde titilando (cuenta regresiva y grabación). */
855
- .btn.icon.recording { color: #2eb872; border-color: currentColor; animation: live-pulse 1s ease-in-out infinite; }
856
- .btn.icon.busy { opacity: 0.55; }
857
- .btn.icon.mic-counting > svg { visibility: hidden; }
858
- .mic-count {
859
- position: absolute;
860
- inset: 0;
861
- display: grid;
862
- place-items: center;
863
- font: 700 13px var(--mono);
864
- color: #2eb872;
865
- }
866
- .mic-count[hidden] { display: none; }
867
-
868
- .perfil-fields { display: flex; flex-direction: column; gap: 6px; }
869
- .perfil-field { display: flex; gap: 6px; align-items: center; }
870
- .perfil-field .pf-key { flex: 0 0 34%; }
871
- .perfil-field .pf-value { flex: 1; }
872
-
873
- .chat-queue { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 9px; background: var(--theirs); }
874
- .chat-queue[hidden] { display: none; }
875
- .queue-label { color: var(--muted); font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
876
- .queue-item { display: flex; align-items: center; gap: 8px; }
877
- .queue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px var(--sans); }
878
- .queue-remove { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; line-height: 1; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
879
- .queue-remove:hover { color: var(--danger); background: var(--theirs); }
880
- .shell-out { margin: 0; padding: 8px 10px; max-height: 320px; overflow: auto; background: var(--theirs); border: 1px solid var(--border); border-radius: 8px; font: 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; }
881
- .attach-preview { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 2px; }
882
- .sb-channel {
883
- font-size: 11px;
884
- color: var(--warn);
885
- border: 1px solid currentColor;
886
- border-radius: 9px;
887
- padding: 0 6px;
888
- cursor: help;
889
- }
890
- .sb-channel.retrying { animation: live-pulse 1.4s ease-in-out infinite; }
891
- .toasts {
892
- /* Encima del composer, no sobre el: al borde inferior tapaba el banner y los
893
- botones, y cada toast (con `pointer-events: auto`) les robaba los clics. */
894
- position: absolute;
895
- bottom: calc(100% + 6px);
896
- left: 10px;
897
- right: 10px;
898
- display: flex;
899
- flex-direction: column;
900
- gap: 5px;
901
- pointer-events: none;
902
- z-index: 5;
903
- }
904
- .toast {
905
- pointer-events: auto;
906
- cursor: pointer;
907
- padding: 7px 11px;
908
- border: 1px solid var(--border);
909
- border-left: 3px solid var(--warn);
910
- border-radius: 8px;
911
- background: var(--panel);
912
- color: var(--text);
913
- font-size: 12.5px;
914
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
915
- }
916
-
917
- /* Banner de permisos: se decide desde cualquier pestana o sesion, asi que vive
918
- en el composer y no dentro del mensaje de una sesion. */
919
- .perm-banner { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
920
- .perm-banner[hidden] { display: none; }
921
- .perm-banner-row {
922
- display: flex;
923
- flex-direction: column;
924
- gap: 5px;
925
- padding: 9px 11px;
926
- border: 1px solid var(--warn);
927
- border-radius: 9px;
928
- background: rgba(217, 112, 74, 0.08);
929
- }
930
- .perm-banner-label { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
931
- .perm-banner-icon { color: var(--warn); font-weight: 700; }
932
- .perm-banner-title { font-weight: 700; color: var(--text); }
933
- .perm-banner-session { font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; }
934
- .perm-banner-args {
935
- color: var(--muted);
936
- font-family: var(--mono, monospace);
937
- font-size: 11.5px;
938
- /* Recorte limpio: `overflow` a secas cortaba la linea por la mitad y se
939
- leia como texto roto. */
940
- display: -webkit-box;
941
- -webkit-line-clamp: 2;
942
- -webkit-box-orient: vertical;
943
- overflow: hidden;
944
- word-break: break-word;
945
- }
946
- .perm-banner-row > .btn { align-self: flex-start; }
947
- .attach-thumb { position: relative; }
948
- .attach-thumb img { height: 64px; border-radius: 6px; border: 1px solid var(--border); display: block; }
949
- .attach-remove {
950
- position: absolute;
951
- top: -6px;
952
- right: -6px;
953
- width: 20px;
954
- height: 20px;
955
- padding: 0;
956
- line-height: 1;
957
- border-radius: 50%;
958
- background: var(--danger);
959
- color: #fff;
960
- border: 0;
961
- cursor: pointer;
962
- }
963
- .msg-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
964
- .msg-image { max-height: 220px; max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
965
-
966
- /* markdown ----------------------------------------------------------------- */
967
- .text > *:first-child { margin-top: 0; }
968
- .text > *:last-child { margin-bottom: 0; }
969
- .text p { margin: 0 0 10px; }
970
- .text h1, .text h2, .text h3, .text h4, .text h5, .text h6 { margin: 14px 0 8px; line-height: 1.3; }
971
- .text h1 { font-size: 1.35em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
972
- .text h2 { font-size: 1.2em; }
973
- .text h3 { font-size: 1.08em; }
974
- .text ul, .text ol { margin: 0 0 10px; padding-left: 22px; }
975
- .text li { margin: 3px 0; }
976
- .text blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--border); color: var(--muted); }
977
- .text a { color: var(--accent); }
978
- .text hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
979
- .text .table-wrap, .agent-text .table-wrap { overflow-x: auto; margin: 0 0 10px; }
980
- .text table, .agent-text table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
981
- .text th, .text td, .agent-text th, .agent-text td {
982
- border: 1px solid var(--border);
983
- padding: 5px 10px;
984
- text-align: left;
985
- vertical-align: top;
986
- }
987
- .text th, .agent-text th { background: var(--theirs); font-weight: 600; }
988
- .text .table-wrap code, .agent-text .table-wrap code { white-space: nowrap; }
989
- .text code {
990
- background: var(--theirs);
991
- border: 1px solid var(--border);
992
- border-radius: 4px;
993
- padding: 1px 5px;
994
- font-size: 0.92em;
995
- }
996
- .text.notice { color: var(--muted); }
997
- .text.notice.err { color: var(--danger); }
998
-
999
- .code-block { margin: 10px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--solid, var(--panel)); }
1000
- .code-bar { display: flex; justify-content: space-between; align-items: center; padding: 5px 11px; border-bottom: 1px solid var(--border); background: var(--theirs); }
1001
- .code-lang { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
1002
- .code-copy { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; }
1003
- .code-copy:hover { color: var(--text); }
1004
- pre.code { margin: 0; padding: 10px 12px; overflow: auto; max-height: 420px; }
1005
- pre.code code { background: none; border: 0; padding: 0; font-size: 0.92em; }
1006
- .tok-comment { color: #8c8779; font-style: italic; }
1007
- .tok-string { color: #c2a878; }
1008
- .tok-number { color: #e0a05c; }
1009
- .tok-keyword { color: #e0794f; }
1010
-
1011
- .statusbar {
1012
- display: flex;
1013
- gap: 8px;
1014
- align-items: center;
1015
- padding: 5px 14px;
1016
- border-top: 1px solid var(--border);
1017
- background: var(--rail);
1018
- backdrop-filter: blur(14px);
1019
- color: var(--muted);
1020
- font: 500 11px var(--mono);
1021
- letter-spacing: 0.02em;
1022
- }
1023
- .statusbar .dot { opacity: 0.5; }
1024
- .statusbar .spacer { flex: 1; }
1025
- .statusbar[role="button"] { cursor: pointer; }
1026
- .statusbar[role="button"]:hover { color: var(--fg); }
1027
-
1028
- /* menú de comandos "/" en el composer */
1029
- .slash-menu {
1030
- position: absolute;
1031
- left: 14px;
1032
- right: 14px;
1033
- bottom: calc(100% - 6px);
1034
- max-height: min(60vh, 420px);
1035
- overflow-y: auto;
1036
- display: flex;
1037
- flex-direction: column;
1038
- gap: 2px;
1039
- padding: 6px;
1040
- border: 1px solid var(--border);
1041
- border-radius: 12px;
1042
- background: var(--solid, var(--panel));
1043
- box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
1044
- backdrop-filter: blur(18px);
1045
- z-index: 30;
1046
- }
1047
- .slash-menu[hidden] { display: none; }
1048
- .slash-item {
1049
- display: flex;
1050
- align-items: baseline;
1051
- gap: 10px;
1052
- width: 100%;
1053
- padding: 7px 9px;
1054
- border: 0;
1055
- border-radius: 8px;
1056
- background: none;
1057
- color: var(--fg);
1058
- text-align: left;
1059
- cursor: pointer;
1060
- font: 500 13px var(--mono);
1061
- }
1062
- .slash-item.active,
1063
- .slash-item:hover { background: var(--theirs); }
1064
- .slash-cmd { color: var(--accent); font-weight: 700; }
1065
- .slash-desc { color: var(--muted); font: 400 12px var(--serif); }
1066
- .ctx { display: inline-flex; align-items: center; gap: 8px; }
1067
- .ctx-bar { width: 76px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
1068
- .ctx-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: currentColor; transition: width 0.35s ease; }
1069
-
1070
- /* providers / eval / runs ------------------------------------------------- */
1071
- .panel { flex: 1; overflow-y: auto; width: 100%; max-width: 920px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
1072
- .panel h2 { margin: 0; font: 700 20px var(--serif); letter-spacing: -0.02em; }
1073
- .field { display: flex; flex-direction: column; gap: 5px; color: var(--muted); }
1074
- .field.grow { flex: 1; }
1075
- .field > span { font-size: 12px; }
1076
- .panel textarea { width: 100%; }
1077
- .row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
1078
- .row.between { justify-content: space-between; align-items: center; }
1079
- .row input[type="number"] { width: 78px; }
1080
-
1081
- .card { border: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(14px); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
1082
-
1083
- /* ajustes: voz (TTS) -------------------------------------------------------- */
1084
- .voz-announce { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 0; }
1085
-
1086
- /* ajustes: pestañas internas ---------------------------------------------- */
1087
- #view-ajustes.active { display: block; overflow-y: auto; }
1088
- .ajustes-wrap { width: 100%; max-width: 780px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
1089
- .ajustes-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
1090
- .ajustes-tab {
1091
- appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
1092
- padding: 8px 14px; margin-bottom: -1px; color: var(--muted); cursor: pointer;
1093
- font: 600 13px var(--serif); letter-spacing: 0.01em;
1094
- }
1095
- .ajustes-tab:hover { color: var(--fg); }
1096
- .ajustes-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
1097
- .ajustes-panel { display: none; }
1098
- .ajustes-panel.active { display: flex; }
1099
- .ajustes-panel.panel { flex: none; max-width: none; overflow: visible; padding: 6px 2px 18px; }
1100
- .ajustes-panel .verify-line code { font-size: 11px; }
1101
- #agent-settings-controls { display: flex; flex-direction: column; gap: 7px; }
1102
- #agent-settings-controls label { color: var(--muted); font-size: 12px; }
1103
- #agent-settings-controls select { width: 100%; }
1104
- #agent-controls-slot:empty { display: none; }
1105
-
1106
- .providers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
1107
- .providers li {
1108
- display: flex;
1109
- align-items: center;
1110
- gap: 10px;
1111
- padding: 9px 11px;
1112
- border: 1px solid var(--border);
1113
- border-radius: 11px;
1114
- background: var(--panel);
1115
- backdrop-filter: blur(10px);
1116
- cursor: pointer;
1117
- }
1118
- .providers li:hover { border-color: var(--accent); }
1119
- .providers li.active { border-color: var(--mine); }
1120
- .providers .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex: none; }
1121
- .providers .pdot.on { background: var(--ok); }
1122
- .providers .pid { font-weight: 700; }
1123
- .providers .pmeta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1124
- .providers .grow { flex: 1; min-width: 0; }
1125
-
1126
- .summary { color: var(--muted); }
1127
- .summary.ok { color: var(--ok); }
1128
- .summary.err { color: var(--danger); }
1129
-
1130
- .ctx-ok { color: var(--ok); }
1131
- .ctx-mid { color: var(--text); }
1132
- .ctx-warn { color: var(--warn); }
1133
- .ctx-danger { color: var(--danger); }
1134
-
1135
- /* folder picker ------------------------------------------------------------ */
1136
- .folder-modal { width: min(680px, calc(100vw - 40px)); }
1137
- .folder-toolbar { display: flex; align-items: center; gap: 6px; }
1138
- .crumbs {
1139
- display: flex;
1140
- align-items: center;
1141
- gap: 1px;
1142
- flex-wrap: wrap;
1143
- min-width: 0;
1144
- font-size: 12.5px;
1145
- color: var(--muted);
1146
- }
1147
- .crumb { padding: 3px 7px; border-radius: 5px; white-space: nowrap; cursor: pointer; }
1148
- .crumb:hover { background: var(--theirs); color: var(--text); }
1149
- .crumb.current { color: var(--text); font-weight: 600; cursor: default; }
1150
- .crumb.current:hover { background: transparent; }
1151
- .crumb-sep { color: var(--muted); opacity: 0.55; }
1152
-
1153
- .folder-search { display: flex; gap: 8px; }
1154
- .folder-search input { flex: 1; min-width: 0; }
1155
- .folder-create { display: flex; gap: 8px; }
1156
- .folder-create input { flex: 1; min-width: 0; border-color: var(--accent); }
1157
-
1158
- .folders {
1159
- list-style: none;
1160
- margin: 0;
1161
- padding: 2px;
1162
- display: flex;
1163
- flex-direction: column;
1164
- gap: 2px;
1165
- max-height: 42vh;
1166
- overflow-y: auto;
1167
- }
1168
- .folders li {
1169
- /* Sin flex-shrink:0 los items se aplastan en vez de scrollear. El overflow:hidden
1170
- de abajo anula el min-height:auto de flex, asi que sin esto cada fila queda
1171
- mas baja que su texto y se ve cortada. */
1172
- flex: 0 0 auto;
1173
- display: flex;
1174
- align-items: center;
1175
- gap: 9px;
1176
- min-width: 0;
1177
- padding: 8px 10px;
1178
- border-radius: 7px;
1179
- cursor: pointer;
1180
- color: var(--text);
1181
- white-space: nowrap;
1182
- overflow: hidden;
1183
- border: 1px solid transparent;
1184
- }
1185
- .folder-item:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
1186
- .folder-item:hover { background: var(--theirs); border-color: var(--border); }
1187
- .folder-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
1188
- .folder-item:hover .folder-ico, .folder-item:focus-visible .folder-ico { color: var(--accent); }
1189
- .folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
1190
- .folder-enter { color: var(--muted); font-size: 11px; opacity: 0; flex: 0 0 auto; }
1191
- .folder-item:hover .folder-enter, .folder-item:focus-visible .folder-enter { opacity: 1; }
1192
- .folders .folders-empty { color: var(--muted); cursor: default; padding: 10px; }
1193
-
1194
- .folder-footer { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
1195
- .folder-footer .summary { font-size: 12px; }
1196
-
1197
- .results { width: 100%; border-collapse: collapse; font-size: 12.5px; }
1198
- .results th, .results td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
1199
- .results th { color: var(--muted); font-weight: 600; }
1200
- .results .pass { color: var(--ok); font-weight: 700; }
1201
- .results .fail { color: var(--danger); font-weight: 700; }
1202
- .results td.detail { color: var(--muted); }
1203
-
1204
- .runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
1205
- .runs li {
1206
- padding: 8px 11px;
1207
- border: 1px solid var(--border);
1208
- border-radius: 11px;
1209
- background: var(--panel);
1210
- backdrop-filter: blur(10px);
1211
- cursor: pointer;
1212
- display: flex;
1213
- justify-content: space-between;
1214
- gap: 10px;
1215
- }
1216
- .runs li:hover, .runs li.active { border-color: var(--accent); }
1217
-
1218
- /* explorer (right panel) --------------------------------------------------- */
1219
- .explorer {
1220
- width: 300px;
1221
- flex: 0 0 auto;
1222
- display: flex;
1223
- flex-direction: column;
1224
- min-height: 0;
1225
- border-left: 1px solid var(--border);
1226
- background: var(--rail);
1227
- backdrop-filter: blur(14px);
1228
- }
1229
- .explorer-head { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
1230
- .explorer-title { font: 700 14px var(--serif); letter-spacing: -0.02em; }
1231
- .explorer-head .spacer { flex: 1; }
1232
- .explorer-cwd { padding: 9px 12px 0; color: var(--muted); font: 500 11px var(--mono); word-break: break-all; }
1233
- .explorer-cwd:empty { display: none; }
1234
- .explorer-filter { padding: 9px 12px; }
1235
- .explorer-filter input { width: 100%; }
1236
-
1237
- .tree { list-style: none; margin: 0; padding: 2px 8px 12px; overflow-y: auto; flex: 1; min-height: 0; }
1238
- .tree .tree { padding: 0 0 0 13px; overflow: visible; }
1239
- .tree-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
1240
- .tree-row:hover { background: var(--theirs); }
1241
- .tree-row .tw { width: 14px; height: 14px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); }
1242
- .tree-row .fi { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
1243
- .tree-row.dir .fi { color: var(--accent); }
1244
- .tree-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
1245
- .explorer-status { padding: 6px 12px; border-top: 1px solid var(--border); color: var(--muted); font: 500 11px var(--mono); min-height: 27px; }
1246
- .explorer-status.err { color: var(--danger); }
1247
-
1248
- .xtabs { display: flex; gap: 4px; }
1249
- .xtab { border: 0; background: none; color: var(--muted); cursor: pointer; font: 600 12px var(--sans); padding: 4px 7px; border-radius: 7px; }
1250
- .xtab:hover { background: var(--theirs); color: var(--text); }
1251
- .xtab.is-active { background: var(--theirs); color: var(--text); }
1252
- .xp-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
1253
- .xp-bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px; }
1254
- .xp-bar input { flex: 1; min-width: 0; }
1255
- .xp-bar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1256
- .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
1257
- .xchip { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: 4px 10px; font: 500 11px var(--mono); cursor: pointer; }
1258
- .xchip:hover { border-color: var(--accent); color: var(--accent); }
1259
- .preview-tools { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; }
1260
- .preview-tools .spacer { flex: 1; }
1261
- .preview-tools select { flex: 0 0 auto; }
1262
- .preview-stage {
1263
- flex: 1;
1264
- min-height: 0;
1265
- display: flex;
1266
- align-items: stretch;
1267
- justify-content: center;
1268
- overflow: auto;
1269
- background: var(--theirs);
1270
- }
1271
- .preview-frame { border: 0; background: #fff; height: 100%; width: 100%; min-height: 0; }
1272
- .preview-stage[data-device]:not([data-device='auto']) .preview-frame {
1273
- height: 100%;
1274
- border: 1px solid var(--border);
1275
- border-radius: 8px;
1276
- box-shadow: 0 14px 36px rgba(40, 36, 26, 0.18);
1277
- }
1278
- #xp-preview.preview-maximized {
1279
- position: fixed;
1280
- inset: 0;
1281
- z-index: 70;
1282
- padding: 10px;
1283
- background: var(--panel);
1284
- border: 0;
1285
- }
1286
- #xp-preview.preview-maximized .preview-stage { border-radius: 10px; }
1287
- #procs-list { flex: 1; min-height: 0; overflow-y: auto; }
1288
- .procs-log { margin: 0; padding: 8px 12px; height: 150px; overflow: auto; background: var(--theirs); border-top: 1px solid var(--border); font: 500 11px var(--mono); white-space: pre-wrap; word-break: break-word; }
1289
- .git-branch { font: 700 12px var(--mono); color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1290
- .git-list { list-style: none; margin: 0; padding: 0 8px 10px; overflow-y: auto; flex: 1; min-height: 0; }
1291
- .git-group { padding: 8px 6px 3px; color: var(--muted); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: 0.04em; }
1292
- .git-item { border-radius: 7px; }
1293
- .git-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; cursor: pointer; }
1294
- .git-row:hover { background: var(--theirs); }
1295
- .git-badge { flex: 0 0 auto; width: 16px; text-align: center; font: 700 11px var(--mono); }
1296
- .git-badge.mod, .git-badge.ren { color: var(--accent); }
1297
- .git-badge.add, .git-badge.new { color: var(--ok); }
1298
- .git-badge.del, .git-badge.conf { color: var(--danger); }
1299
- .git-badge.ign { color: var(--muted); }
1300
- .git-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font: 500 12px var(--sans); }
1301
- .git-diff { margin: 2px 0 8px; padding: 8px 10px; max-height: 320px; overflow: auto; background: var(--theirs); border-radius: 8px; font: 11px/1.5 var(--mono); white-space: pre; }
1302
- .git-diff.err { color: var(--danger); }
1303
- .git-diff .diff-line { display: block; }
1304
- .git-diff .diff-add { color: var(--ok); }
1305
- .git-diff .diff-del { color: var(--danger); }
1306
- .git-diff .diff-eq { color: var(--muted); }
1307
- .git-diff .diff-sep { color: var(--accent); opacity: 0.8; }
1308
- .git-diff .diff-meta { color: var(--muted); opacity: 0.7; }
1309
- .import-bar { display: flex; gap: 6px; margin: 4px 0 10px; }
1310
- .import-bar input { flex: 1; min-width: 0; }
1311
-
1312
- .file-actions { display: flex; align-items: center; gap: 10px; }
1313
- .file-modal { width: min(880px, calc(100vw - 40px)); }
1314
- .file-preview {
1315
- margin: 0;
1316
- padding: 12px 14px;
1317
- max-height: 62vh;
1318
- overflow: auto;
1319
- background: var(--theirs);
1320
- border: 1px solid var(--border);
1321
- border-radius: 10px;
1322
- font: 12px/1.55 var(--mono);
1323
- white-space: pre;
1324
- }
1325
-
1326
- .file-render {
1327
- margin: 0;
1328
- padding: 14px 16px;
1329
- max-height: 62vh;
1330
- overflow: auto;
1331
- background: var(--panel);
1332
- border: 1px solid var(--border);
1333
- border-radius: 10px;
1334
- line-height: 1.65;
1335
- }
1336
-
1337
- .file-stage {
1338
- height: 62vh;
1339
- display: flex;
1340
- align-items: stretch;
1341
- justify-content: center;
1342
- overflow: auto;
1343
- background: var(--theirs);
1344
- border: 1px solid var(--border);
1345
- border-radius: 10px;
1346
- }
1347
-
1348
- .file-frame { border: 0; background: #fff; height: 100%; width: 100%; }
1349
-
1350
- dialog.file-modal.preview-maximized {
1351
- width: 100vw;
1352
- max-width: 100vw;
1353
- height: 100vh;
1354
- max-height: 100vh;
1355
- margin: 0;
1356
- border: 0;
1357
- border-radius: 0;
1358
- }
1359
- .file-modal.preview-maximized .modal-card { height: 100vh; }
1360
- .file-modal.preview-maximized .file-stage,
1361
- .file-modal.preview-maximized .file-render,
1362
- .file-modal.preview-maximized .file-preview {
1363
- flex: 1;
1364
- height: auto;
1365
- max-height: none;
1366
- }
1367
-
1368
- /* panel heads + collapsed handles ----------------------------------------- */
1369
- .panel-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
1370
- .panel-head-title { flex: 1; font: 700 13px var(--serif); letter-spacing: -0.02em; color: var(--muted); text-transform: lowercase; }
1371
- .panel-handle {
1372
- position: absolute;
1373
- top: 50%;
1374
- transform: translateY(-50%);
1375
- z-index: 30;
1376
- width: 22px;
1377
- height: 54px;
1378
- display: grid;
1379
- place-items: center;
1380
- padding: 0;
1381
- border: 1px solid var(--border);
1382
- background: var(--panel);
1383
- color: var(--muted);
1384
- cursor: pointer;
1385
- transition: color 0.15s ease, background 0.15s ease;
1386
- }
1387
- .panel-handle:hover { color: var(--accent); background: var(--theirs); }
1388
- .panel-handle svg { width: 16px; height: 16px; }
1389
- .panel-handle-left { left: 0; border-left: 0; border-radius: 0 10px 10px 0; }
1390
- .panel-handle-right { right: 0; border-right: 0; border-radius: 10px 0 0 10px; }
1391
-
1392
- .drawer-backdrop {
1393
- position: fixed;
1394
- inset: 0;
1395
- z-index: 44;
1396
- background: rgba(24, 22, 16, 0.45);
1397
- backdrop-filter: blur(2px);
1398
- }
1399
-
1400
-
1401
- /* desktop: los laterales conservan su ancho mínimo (igual que el resizer) */
1402
- @media (min-width: 821px) {
1403
- .sidebar { min-width: 180px; }
1404
- }
1405
- @media (min-width: 901px) {
1406
- .explorer { min-width: 200px; }
1407
- }
1408
-
1409
- @media (max-width: 900px) {
1410
- .explorer {
1411
- position: fixed;
1412
- top: 0;
1413
- right: 0;
1414
- bottom: 0;
1415
- z-index: 45;
1416
- width: min(340px, 86vw) !important;
1417
- box-shadow: -20px 0 50px rgba(40, 36, 26, 0.25);
1418
- }
1419
- }
1420
-
1421
- /* mobile / angosto -------------------------------------------------------- */
1422
- @media (max-width: 820px) {
1423
- .topbar {
1424
- position: relative;
1425
- display: flex;
1426
- /* Una sola fila: con `wrap` los botones de accion caian a una segunda
1427
- linea y empujaban el chat hacia abajo. */
1428
- flex-wrap: nowrap;
1429
- gap: 8px 10px;
1430
- padding: 8px 12px;
1431
- }
1432
- .brand { flex: 0 0 auto; }
1433
- .brand .ver {
1434
- display: none;
1435
- }
1436
- .tabs {
1437
- margin-left: auto;
1438
- max-width: 100%;
1439
- }
1440
- .tabs > .tab[data-tab] {
1441
- display: none;
1442
- }
1443
- #more-tab-label {
1444
- display: inline;
1445
- }
1446
- .menu-pop {
1447
- top: calc(100% + 2px);
1448
- left: auto;
1449
- right: 0;
1450
- min-width: 200px;
1451
- padding: 6px;
1452
- }
1453
- .menu-pop button {
1454
- padding: 11px 12px;
1455
- }
1456
- .settings {
1457
- grid-column: auto;
1458
- margin-left: 0;
1459
- /* Antes `1 1 100%`: eso ocupaba toda la fila y mandaba los botones a una
1460
- segunda linea. Ahora se quedan en la misma linea que TH. */
1461
- flex: 0 0 auto;
1462
- flex-wrap: nowrap;
1463
- gap: 6px;
1464
- }
1465
- .settings .btn.icon {
1466
- flex: 0 0 auto;
1467
- }
1468
- /* Cuadrado como los demas iconos: el texto no entra en un movil angosto. */
1469
- .topbar-new {
1470
- width: 34px;
1471
- padding: 0;
1472
- }
1473
-
1474
- /* sidebar como drawer deslizante */
1475
- .sidebar {
1476
- position: fixed;
1477
- top: 0;
1478
- left: 0;
1479
- bottom: 0;
1480
- z-index: 50;
1481
- width: min(300px, 84vw) !important;
1482
- transform: translateX(-100%);
1483
- transition: transform 0.22s ease;
1484
- box-shadow: 18px 0 44px rgba(40, 36, 26, 0.28);
1485
- will-change: transform;
1486
- }
1487
- .sidebar.open {
1488
- transform: translateX(0);
1489
- }
1490
- .sidebar[hidden] {
1491
- display: flex;
1492
- }
1493
- .resizer {
1494
- display: none;
1495
- }
1496
-
1497
- .messages {
1498
- padding: 16px 14px 22px;
1499
- gap: 16px;
1500
- }
1501
- .composer {
1502
- padding: 10px 12px;
1503
- }
1504
- .composer textarea {
1505
- max-height: 40vh;
1506
- }
1507
- .statusbar {
1508
- flex-wrap: wrap;
1509
- gap: 4px 10px;
1510
- padding: 6px 12px;
1511
- }
1512
- .statusbar .spacer {
1513
- display: none;
1514
- }
1515
- .empty-brand {
1516
- font-size: clamp(30px, 12vw, 46px);
1517
- }
1518
- .empty-hints {
1519
- gap: 8px 12px;
1520
- }
1521
- .tabbar {
1522
- padding: 8px 10px 0;
1523
- }
1524
- .session-tab {
1525
- max-width: 160px;
1526
- }
1527
- }
1528
-
1529
- @media (max-width: 480px) {
1530
- /* Cinco elementos en una fila no entran en un movil angosto: el nombre del
1531
- tab activo es lo unico que sobra, y el menu de puntos ya lo deja claro. */
1532
- .topbar {
1533
- gap: 8px 8px;
1534
- }
1535
- #more-tab-label {
1536
- display: none;
1537
- }
1538
- .settings {
1539
- gap: 5px;
1540
- }
1541
- .settings select {
1542
- flex: 1 1 100%;
1543
- }
1544
- .messages {
1545
- padding: 12px 11px 18px;
1546
- }
1547
- }
1548
-
1549
- /* settings modal ---------------------------------------------------------- */
1550
- .settings-modal { width: min(430px, calc(100vw - 32px)); }
1551
- .settings-modal .modal-card { gap: 7px; }
1552
- .settings-modal label {
1553
- color: var(--muted);
1554
- font: 600 11px var(--mono);
1555
- letter-spacing: 0.06em;
1556
- text-transform: uppercase;
1557
- }
1558
- .settings-modal select { width: 100%; }
1559
- .settings-modal .check {
1560
- display: flex;
1561
- align-items: center;
1562
- gap: 8px;
1563
- margin-top: 6px;
1564
- color: var(--text);
1565
- font: 500 12.5px var(--sans);
1566
- letter-spacing: 0;
1567
- text-transform: none;
1568
- }
1569
- .settings-actions { margin-top: 10px; }
1570
- .default-cwd-row { align-items: center; }
1571
- .default-cwd-row #default-cwd { flex: 1; min-width: 0; }
1572
- .default-cwd-row .btn { flex: 0 0 auto; }
1573
-
1574
- /* command palette --------------------------------------------------------- */
1575
- .palette-modal { width: min(560px, calc(100vw - 24px)); }
1576
- .palette { display: flex; flex-direction: column; }
1577
- .palette-row {
1578
- display: flex;
1579
- align-items: center;
1580
- gap: 10px;
1581
- padding: 12px 14px;
1582
- border-bottom: 1px solid var(--border);
1583
- }
1584
- .palette-ico { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
1585
- .palette-row input {
1586
- flex: 1;
1587
- min-width: 0;
1588
- border: 0;
1589
- background: transparent;
1590
- padding: 4px 0;
1591
- font-size: 15px;
1592
- box-shadow: none;
1593
- }
1594
- .palette-row input:focus { border: 0; box-shadow: none; }
1595
- .palette-hint {
1596
- color: var(--muted);
1597
- font: 500 10px var(--mono);
1598
- border: 1px solid var(--border);
1599
- border-radius: 5px;
1600
- padding: 2px 5px;
1601
- flex: 0 0 auto;
1602
- }
1603
- .palette-list {
1604
- list-style: none;
1605
- margin: 0;
1606
- padding: 6px;
1607
- max-height: min(52vh, 420px);
1608
- overflow-y: auto;
1609
- }
1610
- .palette-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
1611
- .palette-item.active { background: var(--theirs); }
1612
- .palette-item-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
1613
- .palette-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1614
- .palette-item-hint { color: var(--muted); font: 500 11px var(--mono); flex: 0 0 auto; }
1615
- .palette-empty { padding: 14px; color: var(--muted); text-align: center; }
1616
-
1617
- /* provider modal ---------------------------------------------------------- */
1618
- dialog.modal {
1619
- width: min(760px, calc(100vw - 40px));
1620
- max-height: calc(100vh - 60px);
1621
- padding: 0;
1622
- border: 1px solid var(--border);
1623
- border-radius: 18px;
1624
- background: var(--solid, var(--panel));
1625
- color: var(--text);
1626
- font: inherit;
1627
- overflow: auto;
1628
- box-shadow: 0 28px 65px rgba(40, 36, 26, 0.28);
1629
- }
1630
- dialog.modal::backdrop { background: rgba(24, 22, 16, 0.55); backdrop-filter: blur(3px); }
1631
- .modal-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
1632
- .modal-card h3 { margin: 0; font: 700 17px var(--serif); letter-spacing: -0.02em; }
1633
- .row .spacer { flex: 1; }
1634
-
1635
- /* update banner ----------------------------------------------------------- */
1636
- .update-banner {
1637
- display: flex;
1638
- align-items: center;
1639
- gap: 12px;
1640
- padding: 8px 16px;
1641
- background: var(--accent-soft);
1642
- border-bottom: 1px solid var(--border);
1643
- color: var(--text);
1644
- font: 500 13px var(--sans, inherit);
1645
- }
1646
- .update-banner[hidden] { display: none; }
1647
- .update-banner-icon { color: var(--accent); flex: 0 0 auto; }
1648
- .update-banner-text { flex: 1; min-width: 0; }
1649
- .update-banner-actions { display: flex; gap: 8px; flex: 0 0 auto; }
1650
- .update-banner .btn { padding: 4px 12px; font-size: 12px; }
1651
- .brand .ver.has-update { color: var(--accent); cursor: help; }
1
+ /* tamnora console — paper / aguada theme (opencode/codex-like) */
2
+ :root {
3
+ --bg: #101107;
4
+ --panel: rgba(21, 22, 16, 0.86);
5
+ --rail: rgba(17, 18, 12, 0.82);
6
+ --theirs: #1c1d15;
7
+ --mine: #d9704a;
8
+ --mine-soft: rgba(217, 112, 74, 0.12);
9
+ --text: #e9e4d6;
10
+ --muted: #9c9789;
11
+ --border: rgba(240, 234, 219, 0.13);
12
+ --danger: #e0705c;
13
+ --accent: #d9704a;
14
+ --accent-dark: #b8542f;
15
+ --accent-soft: rgba(217, 112, 74, 0.18);
16
+ --ok: #8fae7f;
17
+ --warn: #d9a441;
18
+ --solid: #12130b;
19
+ --primary-fg: #fff7ef;
20
+ --sans: Manrope, system-ui, "Segoe UI", Arial, sans-serif;
21
+ --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
22
+ --mono: "DM Mono", ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
23
+ --font: var(--sans);
24
+ --chat-font: 14.5px;
25
+ --page-bg: linear-gradient(rgba(11, 12, 8, 0.96), rgba(11, 12, 8, 0.96)), url("/img/fondo-agentes.webp") center/cover fixed no-repeat;
26
+ color-scheme: dark;
27
+ }
28
+
29
+ html[data-theme='paper'] {
30
+ color-scheme: light;
31
+ --paper: #f5efe2;
32
+ --paper-2: #ebe4d4;
33
+ --glass: rgba(247, 242, 230, 0.73);
34
+ --bg: #f5efe2;
35
+ --panel: rgba(247, 242, 230, 0.73);
36
+ --rail: rgba(235, 228, 212, 0.72);
37
+ --theirs: #ebe4d4;
38
+ --mine: #bd542f;
39
+ --mine-soft: rgba(189, 84, 47, 0.09);
40
+ --text: #20211d;
41
+ --muted: #68685d;
42
+ --border: rgba(43, 43, 37, 0.16);
43
+ --danger: #934022;
44
+ --accent: #bd542f;
45
+ --accent-dark: #934022;
46
+ --accent-soft: rgba(189, 84, 47, 0.1);
47
+ --ok: #66865d;
48
+ --warn: #8a5a00;
49
+ --solid: #f7f2e6;
50
+ --primary-fg: #fbf6ec;
51
+ --page-bg: linear-gradient(90deg, rgba(248, 244, 234, 0.9), rgba(244, 238, 224, 0.86)), url("/img/fondo-agentes.webp") center/cover fixed no-repeat;
52
+ }
53
+ html[data-theme='paper'] .tok-comment { color: #7a7669; }
54
+ html[data-theme='paper'] .tok-string { color: #7a4a2c; }
55
+ html[data-theme='paper'] .tok-number { color: #8a5a00; }
56
+ html[data-theme='paper'] .tok-keyword { color: #a3341f; }
57
+ html[data-theme='paper'] .btn.primary { color: #fbf6ec; }
58
+
59
+ * { box-sizing: border-box; }
60
+ [hidden] { display: none !important; }
61
+
62
+ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
63
+ ::-webkit-scrollbar { width: 10px; height: 10px; }
64
+ ::-webkit-scrollbar-track { background: transparent; }
65
+ ::-webkit-scrollbar-thumb {
66
+ background: var(--border);
67
+ border-radius: 8px;
68
+ border: 2px solid transparent;
69
+ background-clip: content-box;
70
+ }
71
+ ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
72
+ ::-webkit-scrollbar-corner { background: transparent; }
73
+
74
+ html, body {
75
+ margin: 0;
76
+ height: 100%;
77
+ color: var(--text);
78
+ font: 13.5px/1.5 var(--font);
79
+ }
80
+
81
+ body { display: flex; flex-direction: column; background: var(--page-bg); }
82
+ pre, code, kbd, samp { font-family: var(--mono); }
83
+ .muted { color: var(--muted); }
84
+
85
+ /* topbar ------------------------------------------------------------------ */
86
+ .topbar {
87
+ position: relative;
88
+ z-index: 40;
89
+ display: grid;
90
+ grid-template-columns: 1fr auto 1fr;
91
+ align-items: center;
92
+ gap: 16px;
93
+ padding: 10px 16px;
94
+ border-bottom: 1px solid var(--border);
95
+ background: var(--panel);
96
+ backdrop-filter: blur(14px);
97
+ }
98
+ .brand {
99
+ grid-column: 1;
100
+ justify-self: start;
101
+ font-family: var(--serif);
102
+ font-weight: 700;
103
+ font-size: 15px;
104
+ letter-spacing: -0.02em;
105
+ display: flex;
106
+ align-items: center;
107
+ gap: 9px;
108
+ }
109
+ .brand .logo {
110
+ width: 26px;
111
+ height: 26px;
112
+ border-radius: 7px;
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ overflow: hidden;
117
+ flex: 0 0 auto;
118
+ }
119
+ .brand .logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
120
+ .brand .ver { color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.04em; }
121
+ .tabs { grid-column: 2; justify-self: center; display: flex; gap: 2px; }
122
+ .tab {
123
+ background: transparent;
124
+ color: var(--muted);
125
+ border: 1px solid transparent;
126
+ border-radius: 999px;
127
+ padding: 6px 14px;
128
+ cursor: pointer;
129
+ font: 600 12.5px var(--sans);
130
+ }
131
+ .tab:hover { color: var(--text); }
132
+ .tab.active { color: var(--text); background: var(--theirs); border-color: var(--border); }
133
+
134
+ .menu { position: relative; display: block; }
135
+ #more-tab { display: inline-flex; align-items: center; gap: 6px; }
136
+ #more-tab svg { width: 18px; height: 18px; display: block; }
137
+ #more-tab-label { display: none; font: 600 12.5px var(--sans); }
138
+ @media (min-width: 821px) {
139
+ #more-menu button.menu-primary { display: none; }
140
+ }
141
+
142
+ #theme-toggle .ico-moon { display: none; }
143
+ html[data-theme='dark'] #theme-toggle .ico-sun { display: none; }
144
+ html[data-theme='dark'] #theme-toggle .ico-moon { display: block; }
145
+ .menu-pop {
146
+ position: absolute;
147
+ top: calc(100% + 4px);
148
+ left: 0;
149
+ z-index: 60;
150
+ min-width: 130px;
151
+ display: flex;
152
+ flex-direction: column;
153
+ gap: 2px;
154
+ padding: 4px;
155
+ background: var(--solid, var(--panel));
156
+ border: 1px solid var(--border);
157
+ border-radius: 10px;
158
+ box-shadow: 0 14px 34px rgba(20, 18, 12, 0.24);
159
+ backdrop-filter: blur(18px);
160
+ }
161
+ .menu-pop button {
162
+ background: transparent;
163
+ border: 0;
164
+ color: var(--text);
165
+ text-align: left;
166
+ padding: 7px 10px;
167
+ border-radius: 6px;
168
+ cursor: pointer;
169
+ font: inherit;
170
+ }
171
+ .menu-pop button:hover { background: var(--theirs); }
172
+ .menu-pop button.active { background: var(--theirs); color: var(--accent); }
173
+ .settings { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
174
+ .settings select { max-width: 220px; }
175
+
176
+ /* Nueva sesión en el topbar: texto en desktop, solo el icono en móvil, donde
177
+ el ancho es el recurso escaso. */
178
+ .topbar-new {
179
+ display: inline-flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ gap: 6px;
183
+ height: 34px;
184
+ padding: 0 13px;
185
+ flex: 0 0 auto;
186
+ }
187
+ .topbar-new svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
188
+ .topbar-new-label { display: none; }
189
+ @media (min-width: 821px) {
190
+ .topbar-new-label { display: inline; }
191
+ }
192
+ .check { color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }
193
+
194
+ select, input, textarea {
195
+ background: var(--bg);
196
+ border: 1px solid var(--border);
197
+ border-radius: 10px;
198
+ color: var(--text);
199
+ padding: 7px 10px;
200
+ font: inherit;
201
+ outline: none;
202
+ }
203
+ select:focus, input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
204
+
205
+ /* layout ------------------------------------------------------------------ */
206
+ main { flex: 1; min-height: 0; min-width: 0; display: flex; }
207
+ .view { display: none; flex: 1; min-height: 0; min-width: 0; position: relative; }
208
+ .view.active { display: flex; min-width: 0; }
209
+
210
+ .btn {
211
+ background: var(--theirs);
212
+ color: var(--text);
213
+ border: 1px solid var(--border);
214
+ border-radius: 10px;
215
+ padding: 7px 13px;
216
+ cursor: pointer;
217
+ font: 600 12.5px var(--sans);
218
+ transition: 0.15s ease;
219
+ /* Sin esto, en una fila apretada "denegar" se parte en "den egar". */
220
+ white-space: nowrap;
221
+ }
222
+ .btn:hover { border-color: var(--accent); color: var(--text); }
223
+ .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--primary-fg); font-weight: 700; }
224
+ .btn.primary:hover { filter: brightness(1.08); }
225
+ .btn.block { width: 100%; }
226
+ .btn.danger:hover { border-color: var(--danger); color: var(--danger); }
227
+ .btn:disabled { opacity: 0.5; cursor: default; }
228
+
229
+ /* chat -------------------------------------------------------------------- */
230
+ .sidebar {
231
+ width: 260px;
232
+ flex: 0 0 auto;
233
+ border-right: 1px solid var(--border);
234
+ background: var(--rail);
235
+ backdrop-filter: blur(14px);
236
+ padding: 10px;
237
+ display: flex;
238
+ flex-direction: column;
239
+ gap: 8px;
240
+ overflow-y: auto;
241
+ }
242
+ .sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; flex: 1; overflow-y: auto; }
243
+ .session-group { list-style: none; }
244
+ .group-head {
245
+ display: flex;
246
+ align-items: center;
247
+ gap: 7px;
248
+ padding: 5px 7px;
249
+ border-radius: 7px;
250
+ cursor: pointer;
251
+ color: var(--muted);
252
+ }
253
+ .group-head:hover { background: var(--panel); color: var(--text); }
254
+ .group-head .tw { width: 14px; height: 14px; flex: 0 0 auto; display: grid; place-items: center; }
255
+ .group-head .fi { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }
256
+ .group-head .gname {
257
+ flex: 1;
258
+ min-width: 0;
259
+ overflow: hidden;
260
+ text-overflow: ellipsis;
261
+ white-space: nowrap;
262
+ font: 600 11px var(--sans);
263
+ letter-spacing: 0.02em;
264
+ }
265
+ .group-head .gcount { font: 500 10px var(--mono); opacity: 0.65; }
266
+ .group-sessions { list-style: none; margin: 0; padding: 3px 0 0 15px; display: flex; flex-direction: column; gap: 2px; }
267
+ .session-item {
268
+ display: flex;
269
+ align-items: center;
270
+ gap: 6px;
271
+ padding: 6px 9px;
272
+ border-radius: 6px;
273
+ cursor: pointer;
274
+ color: var(--muted);
275
+ white-space: nowrap;
276
+ overflow: hidden;
277
+ border: 1px solid transparent;
278
+ }
279
+ .session-item:hover { background: var(--panel); color: var(--text); }
280
+ .session-item.active { background: var(--theirs); color: var(--text); border-color: var(--border); }
281
+ .session-item .sub { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
282
+ .session-item .session-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
283
+ .session-live {
284
+ flex: none;
285
+ width: 6px;
286
+ height: 6px;
287
+ border-radius: 50%;
288
+ background: var(--accent);
289
+ animation: live-pulse 1.4s ease-in-out infinite;
290
+ }
291
+ .session-await {
292
+ flex: none;
293
+ padding: 0 5px;
294
+ height: 14px;
295
+ line-height: 14px;
296
+ border-radius: 7px;
297
+ font-size: 10px;
298
+ font-weight: 700;
299
+ color: var(--bg);
300
+ background: var(--warn);
301
+ }
302
+ @keyframes live-pulse {
303
+ 0%, 100% { opacity: 1; }
304
+ 50% { opacity: 0.25; }
305
+ }
306
+ .session-del,
307
+ .group-del {
308
+ flex: 0 0 auto;
309
+ display: grid;
310
+ place-items: center;
311
+ padding: 2px;
312
+ border: 0;
313
+ border-radius: 5px;
314
+ background: none;
315
+ color: var(--muted);
316
+ cursor: pointer;
317
+ opacity: 0;
318
+ transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
319
+ }
320
+ .session-item:hover .session-del,
321
+ .session-item:focus-within .session-del,
322
+ .group-head:hover .group-del,
323
+ .group-head:focus-within .group-del { opacity: 1; }
324
+ .session-del:hover,
325
+ .group-del:hover { color: var(--danger); background: var(--panel); }
326
+ @media (hover: none) {
327
+ .session-del,
328
+ .group-del { opacity: 0.7; }
329
+ }
330
+ .rail-footer { border-top: 1px solid var(--border); padding-top: 8px; color: var(--muted); font-size: 12px; }
331
+ .rail-footer b { color: var(--text); display: block; word-break: break-all; font-weight: 500; }
332
+ .rail-exit {
333
+ display: inline-block;
334
+ margin-top: 9px;
335
+ color: var(--muted);
336
+ font: 500 11px var(--mono);
337
+ letter-spacing: 0.06em;
338
+ text-decoration: none;
339
+ }
340
+ .rail-exit:hover { color: var(--accent); }
341
+
342
+ .conversation { flex: 1; display: flex; flex-direction: column; min-width: 0; }.panes { flex: 1; min-height: 0; display: flex; min-width: 0; position: relative; }
343
+ .panes > .messages { flex: 1; min-height: 0; min-width: 0; }
344
+ .messages { flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 20px; font-size: var(--chat-font); }
345
+
346
+ /* resizable gutters -------------------------------------------------------- */
347
+ .resizer {
348
+ flex: 0 0 auto;
349
+ width: 7px;
350
+ cursor: col-resize;
351
+ background: transparent;
352
+ transition: background 0.12s ease;
353
+ }
354
+ .resizer:hover, .resizer.dragging { background: var(--accent-soft); }
355
+ body.resizing { cursor: col-resize; user-select: none; }
356
+ body.resizing * { cursor: col-resize !important; }
357
+
358
+ /* scroll rápido de la conversación ---------------------------------------- */
359
+ .scroll-nav {
360
+ position: absolute;
361
+ right: 16px;
362
+ bottom: 16px;
363
+ z-index: 25;
364
+ display: flex;
365
+ flex-direction: column;
366
+ gap: 6px;
367
+ }
368
+ .scroll-nav[hidden] { display: none; }
369
+ .scroll-btn {
370
+ display: grid;
371
+ place-items: center;
372
+ width: 32px;
373
+ height: 32px;
374
+ padding: 0;
375
+ border: 1px solid var(--border);
376
+ border-radius: 999px;
377
+ background: var(--solid, var(--panel));
378
+ color: var(--muted);
379
+ cursor: pointer;
380
+ backdrop-filter: blur(14px);
381
+ box-shadow: 0 6px 18px rgb(20 18 12 / 0.22);
382
+ transition: color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
383
+ }
384
+ .scroll-btn svg { width: 16px; height: 16px; display: block; }
385
+ .scroll-btn:hover { color: var(--accent); border-color: var(--accent); }
386
+ .scroll-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--border); color: var(--muted); }
387
+
388
+ /* session tabs ------------------------------------------------------------- */
389
+ .tabbar {
390
+ display: flex;
391
+ align-items: center;
392
+ gap: 5px;
393
+ padding: 8px 12px 10px;
394
+ border-bottom: 1px solid var(--border);
395
+ overflow-x: auto;
396
+ flex: 0 0 auto;
397
+ }
398
+ .session-tab {
399
+ display: flex;
400
+ align-items: center;
401
+ gap: 7px;
402
+ max-width: 220px;
403
+ padding: 5px 8px 5px 11px;
404
+ border: 1px solid var(--border);
405
+ border-radius: 999px;
406
+ background: transparent;
407
+ color: var(--muted);
408
+ cursor: pointer;
409
+ font: 600 12px var(--sans);
410
+ flex: 0 0 auto;
411
+ }
412
+ .session-tab:hover { color: var(--text); border-color: var(--accent-soft); }
413
+ .session-tab.active { color: var(--text); background: var(--theirs); border-color: var(--accent); }
414
+ .session-tab .tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
415
+ .session-tab .tab-close { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--muted); flex: 0 0 auto; }
416
+ .session-tab .tab-close:hover { background: var(--border); color: var(--text); }
417
+ .session-tab .tab-close svg { width: 12px; height: 12px; }
418
+ .tab-spinner {
419
+ width: 12px;
420
+ height: 12px;
421
+ flex: 0 0 auto;
422
+ border: 2px solid var(--accent);
423
+ border-right-color: transparent;
424
+ border-radius: 50%;
425
+ animation: spin 0.7s linear infinite;
426
+ }
427
+ @keyframes spin { to { transform: rotate(360deg); } }
428
+ .empty { color: var(--muted); margin: auto; text-align: center; line-height: 1.8; }
429
+ .empty-brand {
430
+ display: flex;
431
+ flex-direction: column;
432
+ align-items: center;
433
+ font: 700 clamp(34px, 5.2vw, 58px) / 1.02 var(--serif);
434
+ letter-spacing: -0.045em;
435
+ color: var(--text);
436
+ }
437
+ .empty-brand .accent { color: var(--accent); }
438
+ .empty-sub { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
439
+ .empty-hints { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; max-width: 620px; }
440
+ .hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
441
+ .hint kbd {
442
+ font: 600 11px var(--mono);
443
+ background: var(--theirs);
444
+ border: 1px solid var(--border);
445
+ border-radius: 6px;
446
+ padding: 3px 7px;
447
+ color: var(--text);
448
+ }
449
+
450
+ /* transcript style: role label, no bubbles */
451
+ .msg { min-width: 0; }
452
+ .msg-label {
453
+ display: flex;
454
+ align-items: center;
455
+ gap: 6px;
456
+ font: 500 10px var(--mono);
457
+ letter-spacing: 0.14em;
458
+ text-transform: uppercase;
459
+ color: var(--muted);
460
+ margin-bottom: 5px;
461
+ }
462
+ .msg.user .msg-label { color: var(--mine); }
463
+ .msg-mode {
464
+ font: 500 9px var(--mono);
465
+ line-height: 1.5;
466
+ letter-spacing: 0.08em;
467
+ color: var(--accent);
468
+ border: 1px solid var(--border);
469
+ border-radius: 999px;
470
+ padding: 0 6px;
471
+ }
472
+ .msg-mode[data-mode='plan'] { color: var(--warn); }
473
+ .bubble {
474
+ min-width: 0;
475
+ padding-left: 12px;
476
+ border-left: 2px solid var(--border);
477
+ white-space: pre-wrap;
478
+ word-break: break-word;
479
+ overflow-wrap: anywhere;
480
+ }
481
+ .msg.user .bubble { border-left-color: var(--mine); color: var(--text); }
482
+ .msg-actions { position: relative; display: flex; gap: 6px; margin-top: 7px; }
483
+ .msg-menu-btn {
484
+ display: inline-grid;
485
+ place-items: center;
486
+ width: 26px;
487
+ height: 24px;
488
+ padding: 0;
489
+ background: transparent;
490
+ border: 1px solid transparent;
491
+ border-radius: 7px;
492
+ color: var(--muted);
493
+ cursor: pointer;
494
+ opacity: 0.4;
495
+ transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
496
+ }
497
+ .msg:hover .msg-menu-btn,
498
+ .msg:focus-within .msg-menu-btn,
499
+ .msg-menu-btn[aria-expanded='true'] { opacity: 1; }
500
+ .msg-menu-btn:hover,
501
+ .msg-menu-btn[aria-expanded='true'] { color: var(--text); background: var(--theirs); }
502
+ .msg-menu {
503
+ position: fixed;
504
+ top: 0;
505
+ left: 0;
506
+ z-index: 60;
507
+ min-width: 178px;
508
+ display: flex;
509
+ flex-direction: column;
510
+ gap: 1px;
511
+ padding: 5px;
512
+ border: 1px solid var(--border);
513
+ border-radius: 11px;
514
+ background: var(--solid, var(--panel));
515
+ box-shadow: 0 14px 34px rgb(0 0 0 / 0.24);
516
+ backdrop-filter: blur(18px);
517
+ }
518
+ .msg-menu[hidden] { display: none; }
519
+ .msg-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
520
+ .msg-menu .msg-act {
521
+ width: 100%;
522
+ display: flex;
523
+ align-items: center;
524
+ gap: 8px;
525
+ text-align: left;
526
+ background: transparent;
527
+ border: 0;
528
+ border-radius: 7px;
529
+ color: var(--text);
530
+ font: 500 12.5px var(--sans);
531
+ padding: 6px 8px;
532
+ cursor: pointer;
533
+ }
534
+ .msg-act .mi { flex: 0 0 auto; color: var(--muted); }
535
+ .msg-act .mlabel { min-width: 0; }
536
+ .msg-menu .msg-act:hover { background: var(--theirs); }
537
+ .msg-menu .msg-act:hover .mi { color: var(--accent); }
538
+ .msg-menu .msg-act.danger { color: var(--danger); }
539
+ .msg-menu .msg-act.danger:hover { background: var(--theirs); }
540
+ .msg-menu .msg-act.danger:hover .mi { color: var(--danger); }
541
+
542
+ /* En PC el menú del mensaje va en linea (una fila), con el mismo lenguaje
543
+ visual de la consola. En pantallas chicas queda como lista desplegable. */
544
+ @media (min-width: 821px) {
545
+ .msg-menu {
546
+ flex-direction: row;
547
+ align-items: center;
548
+ min-width: 0;
549
+ gap: 2px;
550
+ }
551
+ .msg-menu .msg-act { width: auto; white-space: nowrap; }
552
+ .msg-menu-sep { width: 1px; height: auto; align-self: stretch; margin: 6px 3px; }
553
+ }
554
+ .bubble .tools { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
555
+
556
+ .tools-actions { display: flex; align-items: center; gap: 8px; }
557
+ .tools-actions[hidden] { display: none; }
558
+ .tools-count { color: var(--muted); font-size: 12px; }
559
+ .tools-toggle {
560
+ background: none;
561
+ border: none;
562
+ color: var(--accent);
563
+ cursor: pointer;
564
+ font: 600 12px var(--sans);
565
+ padding: 2px 0;
566
+ }
567
+ .tools-toggle:hover { text-decoration: underline; }
568
+
569
+ .tool-card { font-size: 12.5px; border-left: 2px solid var(--border); padding-left: 10px; min-width: 0; }
570
+ .tool-card > .tool-head {
571
+ display: flex;
572
+ gap: 8px;
573
+ align-items: baseline;
574
+ min-width: 0;
575
+ cursor: pointer;
576
+ list-style: none;
577
+ touch-action: manipulation;
578
+ }
579
+ .tool-card > .tool-head::-webkit-details-marker { display: none; }
580
+ .tool-card > .tool-head::before {
581
+ content: '▸';
582
+ color: var(--muted);
583
+ flex: 0 0 auto;
584
+ font-size: 10px;
585
+ transition: transform 0.12s ease;
586
+ }
587
+ .tool-card[open] > .tool-head::before { transform: rotate(90deg); }
588
+ .tool-card .tool-glyph { color: var(--muted); flex: 0 0 auto; }
589
+ .tool-card.running .tool-glyph { color: var(--accent); animation: pulse 1s steps(2, start) infinite; }
590
+ .tool-card.done .tool-glyph { color: var(--ok); }
591
+ .tool-card.failed .tool-glyph { color: var(--danger); }
592
+ .tool-card .tool-name { color: var(--accent); font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
593
+ .tool-card .tool-args {
594
+ color: var(--muted);
595
+ flex: 1 1 auto;
596
+ min-width: 0;
597
+ overflow: hidden;
598
+ text-overflow: ellipsis;
599
+ white-space: nowrap;
600
+ }
601
+ .tool-card > .tool-out {
602
+ color: var(--muted);
603
+ margin: 4px 0 2px 18px;
604
+ padding-left: 10px;
605
+ border-left: 1px solid var(--border);
606
+ white-space: pre-wrap;
607
+ word-break: break-word;
608
+ max-height: 320px;
609
+ overflow: auto;
610
+ }
611
+ .tool-card > .tool-out:empty { display: none; }
612
+ .tool-card > .tool-audio-btn {
613
+ display: inline-flex;
614
+ align-items: center;
615
+ gap: 6px;
616
+ margin: 4px 0 2px 18px;
617
+ padding: 4px 10px;
618
+ border: 1px solid var(--border);
619
+ border-radius: 999px;
620
+ background: transparent;
621
+ color: var(--accent);
622
+ cursor: pointer;
623
+ font: 600 12px var(--sans);
624
+ }
625
+ .tool-card > .tool-audio-btn:hover { background: var(--theirs); }
626
+ .tool-card > .tool-shot {
627
+ display: block;
628
+ max-width: calc(100% - 28px);
629
+ max-height: 420px;
630
+ width: auto;
631
+ margin: 6px 0 4px 18px;
632
+ border: 1px solid var(--border);
633
+ border-radius: 8px;
634
+ cursor: zoom-in;
635
+ background: #fff;
636
+ }
637
+
638
+ /* Reproductor único de audio (narración, speak, resumen): visible y detenible. */
639
+ .audio-player {
640
+ display: flex;
641
+ align-items: center;
642
+ gap: 10px;
643
+ padding: 7px 10px;
644
+ margin-bottom: 6px;
645
+ border: 1px solid var(--border);
646
+ border-radius: 10px;
647
+ background: var(--solid, var(--panel));
648
+ box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
649
+ }
650
+ .audio-player[hidden] { display: none; }
651
+ .audio-player .ap-btn {
652
+ flex: 0 0 auto;
653
+ display: inline-grid;
654
+ place-items: center;
655
+ width: 28px;
656
+ height: 28px;
657
+ padding: 0;
658
+ border: 1px solid var(--border);
659
+ border-radius: 999px;
660
+ background: transparent;
661
+ color: var(--accent);
662
+ cursor: pointer;
663
+ }
664
+ .audio-player .ap-btn:hover { background: var(--theirs); }
665
+ .audio-player .ap-stop { color: var(--danger); }
666
+ .audio-player .ap-info { flex: 1 1 auto; min-width: 0; }
667
+ .audio-player .ap-label {
668
+ display: block;
669
+ color: var(--muted);
670
+ font: 600 11px var(--sans);
671
+ text-transform: uppercase;
672
+ letter-spacing: 0.04em;
673
+ margin-bottom: 4px;
674
+ }
675
+ .audio-player .ap-progress {
676
+ height: 4px;
677
+ border-radius: 999px;
678
+ background: var(--border);
679
+ overflow: hidden;
680
+ }
681
+ .audio-player .ap-bar {
682
+ width: 0%;
683
+ height: 100%;
684
+ border-radius: 999px;
685
+ background: var(--accent);
686
+ transition: width 0.15s linear;
687
+ }
688
+ .audio-player .ap-queue { flex: 0 0 auto; color: var(--muted); font: 600 11px var(--sans); }
689
+ .audio-player .ap-queue[hidden] { display: none; }
690
+ .tool-more {
691
+ display: inline-block;
692
+ margin: 2px 0 2px 18px;
693
+ background: none;
694
+ border: none;
695
+ color: var(--accent);
696
+ cursor: pointer;
697
+ font: 600 12px var(--sans);
698
+ padding: 0;
699
+ }
700
+ .tool-more[hidden] { display: none; }
701
+ .tool-more:hover { text-decoration: underline; }
702
+
703
+ .agent-card {
704
+ border: 1px solid var(--border);
705
+ border-radius: 7px;
706
+ padding: 6px 9px;
707
+ background: color-mix(in srgb, var(--accent) 4%, transparent);
708
+ min-width: 0;
709
+ }
710
+ .agent-card > .agent-head {
711
+ display: flex;
712
+ gap: 7px;
713
+ align-items: baseline;
714
+ cursor: pointer;
715
+ list-style: none;
716
+ touch-action: manipulation;
717
+ }
718
+ .agent-card > .agent-head::-webkit-details-marker { display: none; }
719
+ .agent-card > .agent-head::before {
720
+ content: '▸';
721
+ color: var(--muted);
722
+ font-size: 10px;
723
+ transition: transform 0.12s ease;
724
+ }
725
+ .agent-card[open] > .agent-head::before { transform: rotate(90deg); }
726
+ .agent-card .agent-glyph { color: var(--accent); flex: 0 0 auto; }
727
+ .agent-card.running .agent-glyph { animation: pulse 1s steps(2, start) infinite; }
728
+ .agent-card.done .agent-glyph { color: var(--ok); }
729
+ .agent-card.failed .agent-glyph { color: var(--danger); }
730
+ .agent-card .agent-title {
731
+ color: var(--text);
732
+ font-weight: 700;
733
+ flex: 1 1 auto;
734
+ min-width: 0;
735
+ overflow: hidden;
736
+ text-overflow: ellipsis;
737
+ white-space: nowrap;
738
+ }
739
+ .agent-card .agent-status { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
740
+ .agent-card > .agent-body {
741
+ margin: 6px 0 2px 16px;
742
+ border-left: 1px solid var(--border);
743
+ padding-left: 10px;
744
+ display: flex;
745
+ flex-direction: column;
746
+ gap: 6px;
747
+ }
748
+ .agent-card .agent-text:empty { display: none; }
749
+ .agent-card .agent-tools { display: flex; flex-direction: column; gap: 6px; }
750
+ .agent-card .agent-tools:empty { display: none; }
751
+ .tool-out .diff-line { display: block; }
752
+ .tool-out .diff-add { color: var(--ok); }
753
+ .tool-out .diff-del { color: var(--danger); }
754
+ .tool-out .diff-eq { color: var(--muted); }
755
+ .tool-out .diff-sep { color: var(--muted); opacity: 0.55; }
756
+
757
+ .perm-card {
758
+ border: 1px solid var(--warn);
759
+ border-radius: 7px;
760
+ padding: 9px 11px;
761
+ background: rgba(210, 153, 34, 0.06);
762
+ }
763
+ .perm-card .perm-head { display: flex; gap: 7px; align-items: center; color: var(--warn); font-weight: 700; }
764
+ .perm-card .perm-args { color: var(--muted); margin: 5px 0 9px; white-space: pre-wrap; word-break: break-word; max-height: 7.5em; overflow: auto; }
765
+ .perm-card .perm-actions { display: flex; align-items: center; gap: 8px; }
766
+ .perm-card .spacer { flex: 1; }
767
+ .perm-card.approved { border-color: var(--ok); background: rgba(63, 185, 80, 0.06); }
768
+ .perm-card.approved .perm-head { color: var(--ok); }
769
+ .perm-card.denied { border-color: var(--danger); background: rgba(248, 81, 73, 0.06); }
770
+ .perm-card.denied .perm-head { color: var(--danger); }
771
+ .perm-card.collapsed { padding: 5px 11px; background: transparent; }
772
+ .perm-card.collapsed .perm-args,
773
+ .perm-card.collapsed .perm-actions { display: none; }
774
+
775
+ /* activity indicators ------------------------------------------------------ */
776
+ .activity { display: flex; align-items: center; gap: 9px; margin-top: 10px; color: var(--muted); font-size: 12.5px; }
777
+ .activity .loader { color: var(--accent); }
778
+ .activity-label { color: var(--muted); }
779
+ #sb-rounds.running { color: var(--accent); }
780
+ .sb-activity { display: inline-flex; align-items: center; gap: 6px; }
781
+ .sb-activity .loader { color: var(--accent); }
782
+ .sb-activity .loader-thinking { width: 24px; height: 6px; }
783
+ .sb-activity .loader-working { width: 13px; height: 13px; }
784
+ .sb-activity .activity-label { color: var(--muted); }
785
+
786
+ .loader-thinking {
787
+ width: 32px;
788
+ height: 8px;
789
+ --c: currentColor 92%, transparent;
790
+ background:
791
+ radial-gradient(circle closest-side, var(--c)) calc(100% / -4) 0,
792
+ radial-gradient(circle closest-side, var(--c)) calc(100% / 4) 0;
793
+ background-size: calc(100% / 2) 100%;
794
+ animation: loader-thinking 1.5s infinite;
795
+ }
796
+ @keyframes loader-thinking {
797
+ 0% { background-position: calc(100% / -4) 0, calc(100% / 4) 0; }
798
+ 50% { background-position: calc(100% / -4) -8px, calc(100% / 4) 8px; }
799
+ 100% { background-position: calc(100% / 4) -8px, calc(300% / 4) 8px; }
800
+ }
801
+
802
+ .loader-working {
803
+ width: 18px;
804
+ height: 18px;
805
+ --g: conic-gradient(from -90deg at 3px 3px, currentColor 90deg, transparent 0);
806
+ background: var(--g), var(--g), var(--g);
807
+ background-size: 50% 50%;
808
+ animation: loader-working 1s infinite;
809
+ }
810
+ @keyframes loader-working {
811
+ 0% { background-position: 0 0, 3px 3px, 6px 6px; }
812
+ 50% { background-position: 0 6px, 3px 3px, 6px 0; }
813
+ 100% { background-position: 6px 6px, 3px 3px, 0 0; }
814
+ }
815
+
816
+ .chip {
817
+ font-size: 12.5px;
818
+ color: var(--muted);
819
+ border-left: 2px solid var(--warn);
820
+ padding: 2px 0 2px 10px;
821
+ white-space: pre-wrap;
822
+ word-break: break-word;
823
+ }
824
+ .chip.err { border-left-color: var(--danger); color: var(--danger); }
825
+ .chip.ok { border-left-color: var(--ok); color: var(--ok); }
826
+ .chip.warn { border-left-color: var(--warn); color: var(--warn); }
827
+ details.reasoning { margin-top: 6px; }
828
+ details.reasoning > summary { color: var(--muted); cursor: pointer; font-size: 12.5px; }
829
+ details.reasoning .body { color: var(--muted); white-space: pre-wrap; margin-top: 4px; border-left: 1px solid var(--border); padding-left: 10px; }
830
+
831
+ @keyframes pulse { 50% { opacity: 0.35; } }
832
+
833
+ .composer {
834
+ position: relative;
835
+ display: flex;
836
+ flex-direction: column;
837
+ gap: 7px;
838
+ margin: 10px 14px 8px;
839
+ padding: 10px 12px;
840
+ border: 1px solid var(--border);
841
+ border-radius: 22px;
842
+ background: var(--panel);
843
+ backdrop-filter: blur(16px);
844
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
845
+ }
846
+ .composer.dragging { outline: 1px dashed var(--accent); outline-offset: -4px; }
847
+ .composer-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
848
+ .composer-row { display: flex; align-items: flex-end; gap: 8px; }
849
+ .ctrl-wrap { position: relative; display: inline-flex; }
850
+ .ctrl-pill {
851
+ display: inline-flex;
852
+ align-items: center;
853
+ gap: 6px;
854
+ height: 30px;
855
+ max-width: 240px;
856
+ padding: 0 10px;
857
+ border: 1px solid var(--border);
858
+ border-radius: 999px;
859
+ background: var(--theirs);
860
+ color: var(--text);
861
+ cursor: pointer;
862
+ font: 600 12px var(--sans);
863
+ transition: 0.15s ease;
864
+ }
865
+ .ctrl-pill:hover { border-color: var(--accent); }
866
+ .ctrl-pill > svg { width: 15px; height: 15px; flex: 0 0 auto; }
867
+ .ctrl-pill .chevron { opacity: 0.55; }
868
+ .ctrl-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
869
+ .model-pill {
870
+ background: transparent;
871
+ border-color: transparent;
872
+ color: var(--muted);
873
+ max-width: min(46vw, 260px);
874
+ }
875
+ .model-pill:hover { color: var(--text); border-color: var(--border); }
876
+ .ctrl-menu {
877
+ position: absolute;
878
+ bottom: calc(100% + 6px);
879
+ left: 0;
880
+ z-index: 60;
881
+ min-width: 210px;
882
+ display: flex;
883
+ flex-direction: column;
884
+ gap: 2px;
885
+ padding: 5px;
886
+ border: 1px solid var(--border);
887
+ border-radius: 12px;
888
+ background: var(--solid, var(--panel));
889
+ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
890
+ backdrop-filter: blur(18px);
891
+ }
892
+ .ctrl-menu[hidden] { display: none; }
893
+ .ctrl-menu-item {
894
+ display: flex;
895
+ align-items: center;
896
+ gap: 9px;
897
+ width: 100%;
898
+ padding: 8px 9px;
899
+ border: 0;
900
+ border-radius: 8px;
901
+ background: none;
902
+ color: var(--text);
903
+ cursor: pointer;
904
+ text-align: left;
905
+ font: 600 12.5px var(--sans);
906
+ }
907
+ .ctrl-menu-item:hover { background: var(--theirs); }
908
+ .ctrl-menu-item > svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.85; }
909
+ .ctrl-menu-item > span { flex: 1; }
910
+ .ctrl-menu-item .ctrl-check { opacity: 0; color: var(--accent); margin-left: auto; }
911
+ .ctrl-menu-item.active .ctrl-check { opacity: 1; }
912
+ .composer textarea {
913
+ flex: 1;
914
+ resize: none;
915
+ max-height: 180px;
916
+ background: transparent;
917
+ border: 0;
918
+ padding: 6px 2px;
919
+ }
920
+ .composer textarea:focus { border: 0; box-shadow: none; }
921
+ .btn.icon {
922
+ width: 34px;
923
+ height: 34px;
924
+ padding: 0;
925
+ display: grid;
926
+ place-items: center;
927
+ flex: 0 0 auto;
928
+ line-height: 1;
929
+ position: relative;
930
+ }
931
+ .btn.icon svg { width: 18px; height: 18px; display: block; }
932
+ .btn.icon:hover { color: var(--accent); }
933
+ .add-btn, .send-btn {
934
+ width: 34px;
935
+ height: 34px;
936
+ padding: 0;
937
+ display: grid;
938
+ place-items: center;
939
+ flex: 0 0 auto;
940
+ line-height: 1;
941
+ position: relative;
942
+ border: 1px solid var(--border);
943
+ border-radius: 50%;
944
+ background: var(--theirs);
945
+ color: var(--text);
946
+ cursor: pointer;
947
+ transition: 0.15s ease;
948
+ }
949
+ .add-btn:hover { color: var(--accent); border-color: var(--accent); }
950
+ .add-btn svg, .send-btn svg { width: 18px; height: 18px; display: block; }
951
+ .send-btn { background: var(--accent); border-color: var(--accent); color: var(--primary-fg); }
952
+ .send-btn:hover { filter: brightness(1.08); }
953
+ .send-btn:disabled { opacity: 0.5; cursor: default; }
954
+ .send-btn[data-working="1"] { background: var(--theirs); color: var(--accent); border-color: var(--accent); }
955
+ /* Dictado activo: verde titilando (cuenta regresiva y grabación). */
956
+ .add-btn.recording { color: #2eb872; border-color: currentColor; animation: live-pulse 1s ease-in-out infinite; }
957
+ .add-btn.busy { opacity: 0.55; }
958
+ .add-btn.mic-counting > svg { visibility: hidden; }
959
+ .mic-count {
960
+ position: absolute;
961
+ inset: 0;
962
+ display: grid;
963
+ place-items: center;
964
+ font: 700 13px var(--mono);
965
+ color: #2eb872;
966
+ }
967
+ .mic-count[hidden] { display: none; }
968
+
969
+ .perfil-fields { display: flex; flex-direction: column; gap: 6px; }
970
+ .perfil-field { display: flex; gap: 6px; align-items: center; }
971
+ .perfil-field .pf-key { flex: 0 0 34%; }
972
+ .perfil-field .pf-value { flex: 1; }
973
+
974
+ .chat-queue { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 9px; background: var(--theirs); }
975
+ .chat-queue[hidden] { display: none; }
976
+ .queue-label { color: var(--muted); font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
977
+ .queue-item { display: flex; align-items: center; gap: 8px; }
978
+ .queue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px var(--sans); }
979
+ .queue-remove { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; line-height: 1; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
980
+ .queue-remove:hover { color: var(--danger); background: var(--theirs); }
981
+ .shell-out { margin: 0; padding: 8px 10px; max-height: 320px; overflow: auto; background: var(--theirs); border: 1px solid var(--border); border-radius: 8px; font: 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; }
982
+ .attach-preview { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 2px; }
983
+ .sb-channel {
984
+ font-size: 11px;
985
+ color: var(--warn);
986
+ border: 1px solid currentColor;
987
+ border-radius: 9px;
988
+ padding: 0 6px;
989
+ cursor: help;
990
+ }
991
+ .sb-channel.retrying { animation: live-pulse 1.4s ease-in-out infinite; }
992
+ .toasts {
993
+ /* Encima del composer, no sobre el: al borde inferior tapaba el banner y los
994
+ botones, y cada toast (con `pointer-events: auto`) les robaba los clics. */
995
+ position: absolute;
996
+ bottom: calc(100% + 6px);
997
+ left: 10px;
998
+ right: 10px;
999
+ display: flex;
1000
+ flex-direction: column;
1001
+ gap: 5px;
1002
+ pointer-events: none;
1003
+ z-index: 5;
1004
+ }
1005
+ .toast {
1006
+ pointer-events: auto;
1007
+ cursor: pointer;
1008
+ padding: 7px 11px;
1009
+ border: 1px solid var(--border);
1010
+ border-left: 3px solid var(--warn);
1011
+ border-radius: 8px;
1012
+ background: var(--panel);
1013
+ color: var(--text);
1014
+ font-size: 12.5px;
1015
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
1016
+ }
1017
+
1018
+ /* Banner de permisos: se decide desde cualquier pestana o sesion, asi que vive
1019
+ en el composer y no dentro del mensaje de una sesion. */
1020
+ .perm-banner { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
1021
+ .perm-banner[hidden] { display: none; }
1022
+ .perm-banner-row {
1023
+ display: flex;
1024
+ flex-direction: column;
1025
+ gap: 5px;
1026
+ padding: 9px 11px;
1027
+ border: 1px solid var(--warn);
1028
+ border-radius: 9px;
1029
+ background: rgba(217, 112, 74, 0.08);
1030
+ }
1031
+ .perm-banner-label { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
1032
+ .perm-banner-icon { color: var(--warn); font-weight: 700; }
1033
+ .perm-banner-title { font-weight: 700; color: var(--text); }
1034
+ .perm-banner-session { font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; }
1035
+ .perm-banner-args {
1036
+ color: var(--muted);
1037
+ font-family: var(--mono, monospace);
1038
+ font-size: 11.5px;
1039
+ /* Recorte limpio: `overflow` a secas cortaba la linea por la mitad y se
1040
+ leia como texto roto. */
1041
+ display: -webkit-box;
1042
+ -webkit-line-clamp: 2;
1043
+ -webkit-box-orient: vertical;
1044
+ overflow: hidden;
1045
+ word-break: break-word;
1046
+ }
1047
+ .perm-banner-row > .btn { align-self: flex-start; }
1048
+ .attach-thumb { position: relative; }
1049
+ .attach-thumb img { height: 64px; border-radius: 6px; border: 1px solid var(--border); display: block; }
1050
+ .attach-remove {
1051
+ position: absolute;
1052
+ top: -6px;
1053
+ right: -6px;
1054
+ width: 20px;
1055
+ height: 20px;
1056
+ padding: 0;
1057
+ line-height: 1;
1058
+ border-radius: 50%;
1059
+ background: var(--danger);
1060
+ color: #fff;
1061
+ border: 0;
1062
+ cursor: pointer;
1063
+ }
1064
+ .msg-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
1065
+ .msg-image { max-height: 220px; max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
1066
+
1067
+ /* markdown ----------------------------------------------------------------- */
1068
+ .text > *:first-child { margin-top: 0; }
1069
+ .text > *:last-child { margin-bottom: 0; }
1070
+ .text p { margin: 0 0 10px; }
1071
+ .text h1, .text h2, .text h3, .text h4, .text h5, .text h6 { margin: 14px 0 8px; line-height: 1.3; }
1072
+ .text h1 { font-size: 1.35em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
1073
+ .text h2 { font-size: 1.2em; }
1074
+ .text h3 { font-size: 1.08em; }
1075
+ .text ul, .text ol { margin: 0 0 10px; padding-left: 22px; }
1076
+ .text li { margin: 3px 0; }
1077
+ .text blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--border); color: var(--muted); }
1078
+ .text a { color: var(--accent); }
1079
+ .text hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
1080
+ .text .table-wrap, .agent-text .table-wrap { overflow-x: auto; margin: 0 0 10px; }
1081
+ .text table, .agent-text table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
1082
+ .text th, .text td, .agent-text th, .agent-text td {
1083
+ border: 1px solid var(--border);
1084
+ padding: 5px 10px;
1085
+ text-align: left;
1086
+ vertical-align: top;
1087
+ }
1088
+ .text th, .agent-text th { background: var(--theirs); font-weight: 600; }
1089
+ .text .table-wrap code, .agent-text .table-wrap code { white-space: nowrap; }
1090
+ .text code {
1091
+ background: var(--theirs);
1092
+ border: 1px solid var(--border);
1093
+ border-radius: 4px;
1094
+ padding: 1px 5px;
1095
+ font-size: 0.92em;
1096
+ }
1097
+ .text.notice { color: var(--muted); }
1098
+ .text.notice.err { color: var(--danger); }
1099
+
1100
+ .code-block { margin: 10px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--solid, var(--panel)); }
1101
+ .code-bar { display: flex; justify-content: space-between; align-items: center; padding: 5px 11px; border-bottom: 1px solid var(--border); background: var(--theirs); }
1102
+ .code-lang { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
1103
+ .code-copy { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; }
1104
+ .code-copy:hover { color: var(--text); }
1105
+ pre.code { margin: 0; padding: 10px 12px; overflow: auto; max-height: 420px; }
1106
+ pre.code code { background: none; border: 0; padding: 0; font-size: 0.92em; }
1107
+ .tok-comment { color: #8c8779; font-style: italic; }
1108
+ .tok-string { color: #c2a878; }
1109
+ .tok-number { color: #e0a05c; }
1110
+ .tok-keyword { color: #e0794f; }
1111
+
1112
+ .composer-status {
1113
+ display: flex;
1114
+ gap: 8px;
1115
+ align-items: center;
1116
+ padding: 1px 4px 0;
1117
+ color: var(--muted);
1118
+ font: 500 11px var(--mono);
1119
+ letter-spacing: 0.02em;
1120
+ min-height: 16px;
1121
+ }
1122
+ .composer-status .spacer { flex: 1; }
1123
+ .composer-status[role="button"] { cursor: pointer; }
1124
+ .composer-status[role="button"]:hover { color: var(--text); }
1125
+
1126
+ /* menú de comandos "/" en el composer */
1127
+ .slash-menu {
1128
+ position: absolute;
1129
+ left: 14px;
1130
+ right: 14px;
1131
+ bottom: calc(100% - 6px);
1132
+ max-height: min(60vh, 420px);
1133
+ overflow-y: auto;
1134
+ display: flex;
1135
+ flex-direction: column;
1136
+ gap: 2px;
1137
+ padding: 6px;
1138
+ border: 1px solid var(--border);
1139
+ border-radius: 12px;
1140
+ background: var(--solid, var(--panel));
1141
+ box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
1142
+ backdrop-filter: blur(18px);
1143
+ z-index: 30;
1144
+ }
1145
+ .slash-menu[hidden] { display: none; }
1146
+ .slash-item {
1147
+ display: flex;
1148
+ align-items: baseline;
1149
+ gap: 10px;
1150
+ width: 100%;
1151
+ padding: 7px 9px;
1152
+ border: 0;
1153
+ border-radius: 8px;
1154
+ background: none;
1155
+ color: var(--fg);
1156
+ text-align: left;
1157
+ cursor: pointer;
1158
+ font: 500 13px var(--mono);
1159
+ }
1160
+ .slash-item.active,
1161
+ .slash-item:hover { background: var(--theirs); }
1162
+ .slash-cmd { color: var(--accent); font-weight: 700; }
1163
+ .slash-desc { color: var(--muted); font: 400 12px var(--serif); }
1164
+ .ctx { display: inline-flex; align-items: center; gap: 8px; }
1165
+ .ctx-bar { width: 76px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
1166
+ .ctx-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: currentColor; transition: width 0.35s ease; }
1167
+
1168
+ /* providers / eval / runs ------------------------------------------------- */
1169
+ .panel { flex: 1; overflow-y: auto; width: 100%; max-width: 920px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
1170
+ .panel h2 { margin: 0; font: 700 20px var(--serif); letter-spacing: -0.02em; }
1171
+ .field { display: flex; flex-direction: column; gap: 5px; color: var(--muted); }
1172
+ .field.grow { flex: 1; }
1173
+ .field > span { font-size: 12px; }
1174
+ .panel textarea { width: 100%; }
1175
+ .row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
1176
+ .row.between { justify-content: space-between; align-items: center; }
1177
+ .row input[type="number"] { width: 78px; }
1178
+
1179
+ .card { border: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(14px); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
1180
+
1181
+ /* ajustes: voz (TTS) -------------------------------------------------------- */
1182
+ .voz-announce { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 0; }
1183
+
1184
+ /* ajustes: pestañas internas ---------------------------------------------- */
1185
+ #view-ajustes.active { display: block; overflow-y: auto; }
1186
+ .ajustes-wrap { width: 100%; max-width: 780px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
1187
+ .ajustes-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
1188
+ .ajustes-tab {
1189
+ appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
1190
+ padding: 8px 14px; margin-bottom: -1px; color: var(--muted); cursor: pointer;
1191
+ font: 600 13px var(--serif); letter-spacing: 0.01em;
1192
+ }
1193
+ .ajustes-tab:hover { color: var(--fg); }
1194
+ .ajustes-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
1195
+ .ajustes-panel { display: none; }
1196
+ .ajustes-panel.active { display: flex; }
1197
+ .ajustes-panel.panel { flex: none; max-width: none; overflow: visible; padding: 6px 2px 18px; }
1198
+ .ajustes-panel .verify-line code { font-size: 11px; }
1199
+ #agent-settings-controls { display: flex; flex-direction: column; gap: 7px; }
1200
+ #agent-settings-controls label { color: var(--muted); font-size: 12px; }
1201
+ #agent-settings-controls select { width: 100%; }
1202
+ #agent-controls-slot:empty { display: none; }
1203
+
1204
+ .providers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
1205
+ .providers li {
1206
+ display: flex;
1207
+ align-items: center;
1208
+ gap: 10px;
1209
+ padding: 9px 11px;
1210
+ border: 1px solid var(--border);
1211
+ border-radius: 11px;
1212
+ background: var(--panel);
1213
+ backdrop-filter: blur(10px);
1214
+ cursor: pointer;
1215
+ }
1216
+ .providers li:hover { border-color: var(--accent); }
1217
+ .providers li.active { border-color: var(--mine); }
1218
+ .providers .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex: none; }
1219
+ .providers .pdot.on { background: var(--ok); }
1220
+ .providers .pid { font-weight: 700; }
1221
+ .providers .pmeta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1222
+ .providers .grow { flex: 1; min-width: 0; }
1223
+
1224
+ .summary { color: var(--muted); }
1225
+ .summary.ok { color: var(--ok); }
1226
+ .summary.err { color: var(--danger); }
1227
+
1228
+ .ctx-ok { color: var(--ok); }
1229
+ .ctx-mid { color: var(--text); }
1230
+ .ctx-warn { color: var(--warn); }
1231
+ .ctx-danger { color: var(--danger); }
1232
+
1233
+ /* folder picker ------------------------------------------------------------ */
1234
+ .folder-modal { width: min(680px, calc(100vw - 40px)); }
1235
+ .folder-toolbar { display: flex; align-items: center; gap: 6px; }
1236
+ .crumbs {
1237
+ display: flex;
1238
+ align-items: center;
1239
+ gap: 1px;
1240
+ flex-wrap: wrap;
1241
+ min-width: 0;
1242
+ font-size: 12.5px;
1243
+ color: var(--muted);
1244
+ }
1245
+ .crumb { padding: 3px 7px; border-radius: 5px; white-space: nowrap; cursor: pointer; }
1246
+ .crumb:hover { background: var(--theirs); color: var(--text); }
1247
+ .crumb.current { color: var(--text); font-weight: 600; cursor: default; }
1248
+ .crumb.current:hover { background: transparent; }
1249
+ .crumb-sep { color: var(--muted); opacity: 0.55; }
1250
+
1251
+ .folder-search { display: flex; gap: 8px; }
1252
+ .folder-search input { flex: 1; min-width: 0; }
1253
+ .folder-create { display: flex; gap: 8px; }
1254
+ .folder-create input { flex: 1; min-width: 0; border-color: var(--accent); }
1255
+
1256
+ .folders {
1257
+ list-style: none;
1258
+ margin: 0;
1259
+ padding: 2px;
1260
+ display: flex;
1261
+ flex-direction: column;
1262
+ gap: 2px;
1263
+ max-height: 42vh;
1264
+ overflow-y: auto;
1265
+ }
1266
+ .folders li {
1267
+ /* Sin flex-shrink:0 los items se aplastan en vez de scrollear. El overflow:hidden
1268
+ de abajo anula el min-height:auto de flex, asi que sin esto cada fila queda
1269
+ mas baja que su texto y se ve cortada. */
1270
+ flex: 0 0 auto;
1271
+ display: flex;
1272
+ align-items: center;
1273
+ gap: 9px;
1274
+ min-width: 0;
1275
+ padding: 8px 10px;
1276
+ border-radius: 7px;
1277
+ cursor: pointer;
1278
+ color: var(--text);
1279
+ white-space: nowrap;
1280
+ overflow: hidden;
1281
+ border: 1px solid transparent;
1282
+ }
1283
+ .folder-item:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
1284
+ .folder-item:hover { background: var(--theirs); border-color: var(--border); }
1285
+ .folder-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
1286
+ .folder-item:hover .folder-ico, .folder-item:focus-visible .folder-ico { color: var(--accent); }
1287
+ .folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
1288
+ .folder-enter { color: var(--muted); font-size: 11px; opacity: 0; flex: 0 0 auto; }
1289
+ .folder-item:hover .folder-enter, .folder-item:focus-visible .folder-enter { opacity: 1; }
1290
+ .folders .folders-empty { color: var(--muted); cursor: default; padding: 10px; }
1291
+
1292
+ .folder-footer { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
1293
+ .folder-footer .summary { font-size: 12px; }
1294
+
1295
+ .results { width: 100%; border-collapse: collapse; font-size: 12.5px; }
1296
+ .results th, .results td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
1297
+ .results th { color: var(--muted); font-weight: 600; }
1298
+ .results .pass { color: var(--ok); font-weight: 700; }
1299
+ .results .fail { color: var(--danger); font-weight: 700; }
1300
+ .results td.detail { color: var(--muted); }
1301
+
1302
+ .runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
1303
+ .runs li {
1304
+ padding: 8px 11px;
1305
+ border: 1px solid var(--border);
1306
+ border-radius: 11px;
1307
+ background: var(--panel);
1308
+ backdrop-filter: blur(10px);
1309
+ cursor: pointer;
1310
+ display: flex;
1311
+ justify-content: space-between;
1312
+ gap: 10px;
1313
+ }
1314
+ .runs li:hover, .runs li.active { border-color: var(--accent); }
1315
+
1316
+ /* explorer (right panel) --------------------------------------------------- */
1317
+ .explorer {
1318
+ width: 300px;
1319
+ flex: 0 0 auto;
1320
+ display: flex;
1321
+ flex-direction: column;
1322
+ min-height: 0;
1323
+ border-left: 1px solid var(--border);
1324
+ background: var(--rail);
1325
+ backdrop-filter: blur(14px);
1326
+ }
1327
+ .explorer-head { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
1328
+ .explorer-title { font: 700 14px var(--serif); letter-spacing: -0.02em; }
1329
+ .explorer-head .spacer { flex: 1; }
1330
+ .explorer-cwd { padding: 9px 12px 0; color: var(--muted); font: 500 11px var(--mono); word-break: break-all; }
1331
+ .explorer-cwd:empty { display: none; }
1332
+ .explorer-filter { padding: 9px 12px; }
1333
+ .explorer-filter input { width: 100%; }
1334
+
1335
+ .tree { list-style: none; margin: 0; padding: 2px 8px 12px; overflow-y: auto; flex: 1; min-height: 0; }
1336
+ .tree .tree { padding: 0 0 0 13px; overflow: visible; }
1337
+ .tree-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
1338
+ .tree-row:hover { background: var(--theirs); }
1339
+ .tree-row .tw { width: 14px; height: 14px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); }
1340
+ .tree-row .fi { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
1341
+ .tree-row.dir .fi { color: var(--accent); }
1342
+ .tree-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
1343
+ .explorer-status { padding: 6px 12px; border-top: 1px solid var(--border); color: var(--muted); font: 500 11px var(--mono); min-height: 27px; }
1344
+ .explorer-status.err { color: var(--danger); }
1345
+
1346
+ .xtabs { display: flex; gap: 4px; }
1347
+ .xtab { border: 0; background: none; color: var(--muted); cursor: pointer; font: 600 12px var(--sans); padding: 4px 7px; border-radius: 7px; }
1348
+ .xtab:hover { background: var(--theirs); color: var(--text); }
1349
+ .xtab.is-active { background: var(--theirs); color: var(--text); }
1350
+ .xp-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
1351
+ .xp-bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px; }
1352
+ .xp-bar input { flex: 1; min-width: 0; }
1353
+ .xp-bar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1354
+ .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
1355
+ .xchip { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: 4px 10px; font: 500 11px var(--mono); cursor: pointer; }
1356
+ .xchip:hover { border-color: var(--accent); color: var(--accent); }
1357
+ .preview-tools { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; }
1358
+ .preview-tools .spacer { flex: 1; }
1359
+ .preview-tools select { flex: 0 0 auto; }
1360
+ .preview-stage {
1361
+ flex: 1;
1362
+ min-height: 0;
1363
+ display: flex;
1364
+ align-items: stretch;
1365
+ justify-content: center;
1366
+ overflow: auto;
1367
+ background: var(--theirs);
1368
+ }
1369
+ .preview-frame { border: 0; background: #fff; height: 100%; width: 100%; min-height: 0; }
1370
+ .preview-stage[data-device]:not([data-device='auto']) .preview-frame {
1371
+ height: 100%;
1372
+ border: 1px solid var(--border);
1373
+ border-radius: 8px;
1374
+ box-shadow: 0 14px 36px rgba(40, 36, 26, 0.18);
1375
+ }
1376
+ #xp-preview.preview-maximized {
1377
+ position: fixed;
1378
+ inset: 0;
1379
+ z-index: 70;
1380
+ padding: 10px;
1381
+ background: var(--panel);
1382
+ border: 0;
1383
+ }
1384
+ #xp-preview.preview-maximized .preview-stage { border-radius: 10px; }
1385
+ #procs-list { flex: 1; min-height: 0; overflow-y: auto; }
1386
+ .procs-log { margin: 0; padding: 8px 12px; height: 150px; overflow: auto; background: var(--theirs); border-top: 1px solid var(--border); font: 500 11px var(--mono); white-space: pre-wrap; word-break: break-word; }
1387
+ .git-branch { font: 700 12px var(--mono); color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1388
+ .git-list { list-style: none; margin: 0; padding: 0 8px 10px; overflow-y: auto; flex: 1; min-height: 0; }
1389
+ .git-group { padding: 8px 6px 3px; color: var(--muted); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: 0.04em; }
1390
+ .git-item { border-radius: 7px; }
1391
+ .git-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; cursor: pointer; }
1392
+ .git-row:hover { background: var(--theirs); }
1393
+ .git-badge { flex: 0 0 auto; width: 16px; text-align: center; font: 700 11px var(--mono); }
1394
+ .git-badge.mod, .git-badge.ren { color: var(--accent); }
1395
+ .git-badge.add, .git-badge.new { color: var(--ok); }
1396
+ .git-badge.del, .git-badge.conf { color: var(--danger); }
1397
+ .git-badge.ign { color: var(--muted); }
1398
+ .git-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font: 500 12px var(--sans); }
1399
+ .git-diff { margin: 2px 0 8px; padding: 8px 10px; max-height: 320px; overflow: auto; background: var(--theirs); border-radius: 8px; font: 11px/1.5 var(--mono); white-space: pre; }
1400
+ .git-diff.err { color: var(--danger); }
1401
+ .git-diff .diff-line { display: block; }
1402
+ .git-diff .diff-add { color: var(--ok); }
1403
+ .git-diff .diff-del { color: var(--danger); }
1404
+ .git-diff .diff-eq { color: var(--muted); }
1405
+ .git-diff .diff-sep { color: var(--accent); opacity: 0.8; }
1406
+ .git-diff .diff-meta { color: var(--muted); opacity: 0.7; }
1407
+ .import-bar { display: flex; gap: 6px; margin: 4px 0 10px; }
1408
+ .import-bar input { flex: 1; min-width: 0; }
1409
+
1410
+ .file-actions { display: flex; align-items: center; gap: 10px; }
1411
+ .file-modal { width: min(880px, calc(100vw - 40px)); }
1412
+ .file-preview {
1413
+ margin: 0;
1414
+ padding: 12px 14px;
1415
+ max-height: 62vh;
1416
+ overflow: auto;
1417
+ background: var(--theirs);
1418
+ border: 1px solid var(--border);
1419
+ border-radius: 10px;
1420
+ font: 12px/1.55 var(--mono);
1421
+ white-space: pre;
1422
+ }
1423
+
1424
+ .file-render {
1425
+ margin: 0;
1426
+ padding: 14px 16px;
1427
+ max-height: 62vh;
1428
+ overflow: auto;
1429
+ background: var(--panel);
1430
+ border: 1px solid var(--border);
1431
+ border-radius: 10px;
1432
+ line-height: 1.65;
1433
+ }
1434
+
1435
+ .file-stage {
1436
+ height: 62vh;
1437
+ display: flex;
1438
+ align-items: stretch;
1439
+ justify-content: center;
1440
+ overflow: auto;
1441
+ background: var(--theirs);
1442
+ border: 1px solid var(--border);
1443
+ border-radius: 10px;
1444
+ }
1445
+
1446
+ .file-frame { border: 0; background: #fff; height: 100%; width: 100%; }
1447
+
1448
+ dialog.file-modal.preview-maximized {
1449
+ width: 100vw;
1450
+ max-width: 100vw;
1451
+ height: 100vh;
1452
+ max-height: 100vh;
1453
+ margin: 0;
1454
+ border: 0;
1455
+ border-radius: 0;
1456
+ }
1457
+ .file-modal.preview-maximized .modal-card { height: 100vh; }
1458
+ .file-modal.preview-maximized .file-stage,
1459
+ .file-modal.preview-maximized .file-render,
1460
+ .file-modal.preview-maximized .file-preview {
1461
+ flex: 1;
1462
+ height: auto;
1463
+ max-height: none;
1464
+ }
1465
+
1466
+ /* panel heads + collapsed handles ----------------------------------------- */
1467
+ .panel-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
1468
+ .panel-head-title { flex: 1; font: 700 13px var(--serif); letter-spacing: -0.02em; color: var(--muted); text-transform: lowercase; }
1469
+ .panel-handle {
1470
+ position: absolute;
1471
+ top: 50%;
1472
+ transform: translateY(-50%);
1473
+ z-index: 30;
1474
+ width: 22px;
1475
+ height: 54px;
1476
+ display: grid;
1477
+ place-items: center;
1478
+ padding: 0;
1479
+ border: 1px solid var(--border);
1480
+ background: var(--panel);
1481
+ color: var(--muted);
1482
+ cursor: pointer;
1483
+ transition: color 0.15s ease, background 0.15s ease;
1484
+ }
1485
+ .panel-handle:hover { color: var(--accent); background: var(--theirs); }
1486
+ .panel-handle svg { width: 16px; height: 16px; }
1487
+ .panel-handle-left { left: 0; border-left: 0; border-radius: 0 10px 10px 0; }
1488
+ .panel-handle-right { right: 0; border-right: 0; border-radius: 10px 0 0 10px; }
1489
+
1490
+ .drawer-backdrop {
1491
+ position: fixed;
1492
+ inset: 0;
1493
+ z-index: 44;
1494
+ background: rgba(24, 22, 16, 0.45);
1495
+ backdrop-filter: blur(2px);
1496
+ }
1497
+
1498
+
1499
+ /* desktop: los laterales conservan su ancho mínimo (igual que el resizer) */
1500
+ @media (min-width: 821px) {
1501
+ .sidebar { min-width: 180px; }
1502
+ }
1503
+ @media (min-width: 901px) {
1504
+ .explorer { min-width: 200px; }
1505
+ }
1506
+
1507
+ @media (max-width: 900px) {
1508
+ .explorer {
1509
+ position: fixed;
1510
+ top: 0;
1511
+ right: 0;
1512
+ bottom: 0;
1513
+ z-index: 45;
1514
+ width: min(340px, 86vw) !important;
1515
+ box-shadow: -20px 0 50px rgba(40, 36, 26, 0.25);
1516
+ }
1517
+ }
1518
+
1519
+ /* mobile / angosto -------------------------------------------------------- */
1520
+ @media (max-width: 820px) {
1521
+ .topbar {
1522
+ position: relative;
1523
+ display: flex;
1524
+ /* Una sola fila: con `wrap` los botones de accion caian a una segunda
1525
+ linea y empujaban el chat hacia abajo. */
1526
+ flex-wrap: nowrap;
1527
+ gap: 8px 10px;
1528
+ padding: 8px 12px;
1529
+ }
1530
+ .brand { flex: 0 0 auto; }
1531
+ .brand .ver {
1532
+ display: none;
1533
+ }
1534
+ .tabs {
1535
+ margin-left: auto;
1536
+ max-width: 100%;
1537
+ }
1538
+ .tabs > .tab[data-tab] {
1539
+ display: none;
1540
+ }
1541
+ #more-tab-label {
1542
+ display: inline;
1543
+ }
1544
+ .menu-pop {
1545
+ top: calc(100% + 2px);
1546
+ left: auto;
1547
+ right: 0;
1548
+ min-width: 200px;
1549
+ padding: 6px;
1550
+ }
1551
+ .menu-pop button {
1552
+ padding: 11px 12px;
1553
+ }
1554
+ .settings {
1555
+ grid-column: auto;
1556
+ margin-left: 0;
1557
+ /* Antes `1 1 100%`: eso ocupaba toda la fila y mandaba los botones a una
1558
+ segunda linea. Ahora se quedan en la misma linea que TH. */
1559
+ flex: 0 0 auto;
1560
+ flex-wrap: nowrap;
1561
+ gap: 6px;
1562
+ }
1563
+ .settings .btn.icon {
1564
+ flex: 0 0 auto;
1565
+ }
1566
+ /* Cuadrado como los demas iconos: el texto no entra en un movil angosto. */
1567
+ .topbar-new {
1568
+ width: 34px;
1569
+ padding: 0;
1570
+ }
1571
+
1572
+ /* sidebar como drawer deslizante */
1573
+ .sidebar {
1574
+ position: fixed;
1575
+ top: 0;
1576
+ left: 0;
1577
+ bottom: 0;
1578
+ z-index: 50;
1579
+ width: min(300px, 84vw) !important;
1580
+ transform: translateX(-100%);
1581
+ transition: transform 0.22s ease;
1582
+ box-shadow: 18px 0 44px rgba(40, 36, 26, 0.28);
1583
+ will-change: transform;
1584
+ }
1585
+ .sidebar.open {
1586
+ transform: translateX(0);
1587
+ }
1588
+ .sidebar[hidden] {
1589
+ display: flex;
1590
+ }
1591
+ .resizer {
1592
+ display: none;
1593
+ }
1594
+
1595
+ .messages {
1596
+ padding: 16px 14px 22px;
1597
+ gap: 16px;
1598
+ }
1599
+ .composer {
1600
+ margin: 8px 10px 6px;
1601
+ padding: 8px 10px;
1602
+ border-radius: 18px;
1603
+ }
1604
+ .composer textarea {
1605
+ max-height: 40vh;
1606
+ }
1607
+ .ctrl-pill {
1608
+ max-width: 46vw;
1609
+ }
1610
+ .model-pill {
1611
+ max-width: 40vw;
1612
+ }
1613
+ .composer-status {
1614
+ flex-wrap: wrap;
1615
+ gap: 4px 10px;
1616
+ }
1617
+ .composer-status .spacer {
1618
+ display: none;
1619
+ }
1620
+ .empty-brand {
1621
+ font-size: clamp(30px, 12vw, 46px);
1622
+ }
1623
+ .empty-hints {
1624
+ gap: 8px 12px;
1625
+ }
1626
+ .tabbar {
1627
+ padding: 8px 10px 10px;
1628
+ }
1629
+ .session-tab {
1630
+ max-width: 160px;
1631
+ }
1632
+ }
1633
+
1634
+ @media (max-width: 480px) {
1635
+ /* Cinco elementos en una fila no entran en un movil angosto: el nombre del
1636
+ tab activo es lo unico que sobra, y el menu de puntos ya lo deja claro. */
1637
+ .topbar {
1638
+ gap: 8px 8px;
1639
+ }
1640
+ #more-tab-label {
1641
+ display: none;
1642
+ }
1643
+ .settings {
1644
+ gap: 5px;
1645
+ }
1646
+ .settings select {
1647
+ flex: 1 1 100%;
1648
+ }
1649
+ .messages {
1650
+ padding: 12px 11px 18px;
1651
+ }
1652
+ }
1653
+
1654
+ /* settings modal ---------------------------------------------------------- */
1655
+ .settings-modal { width: min(430px, calc(100vw - 32px)); }
1656
+ .settings-modal .modal-card { gap: 7px; }
1657
+ .settings-modal label {
1658
+ color: var(--muted);
1659
+ font: 600 11px var(--mono);
1660
+ letter-spacing: 0.06em;
1661
+ text-transform: uppercase;
1662
+ }
1663
+ .settings-modal select { width: 100%; }
1664
+ .settings-modal .check {
1665
+ display: flex;
1666
+ align-items: center;
1667
+ gap: 8px;
1668
+ margin-top: 6px;
1669
+ color: var(--text);
1670
+ font: 500 12.5px var(--sans);
1671
+ letter-spacing: 0;
1672
+ text-transform: none;
1673
+ }
1674
+ .settings-actions { margin-top: 10px; }
1675
+ .default-cwd-row { align-items: center; }
1676
+ .default-cwd-row #default-cwd { flex: 1; min-width: 0; }
1677
+ .default-cwd-row .btn { flex: 0 0 auto; }
1678
+
1679
+ /* command palette --------------------------------------------------------- */
1680
+ .palette-modal { width: min(560px, calc(100vw - 24px)); }
1681
+ .palette { display: flex; flex-direction: column; }
1682
+ .palette-row {
1683
+ display: flex;
1684
+ align-items: center;
1685
+ gap: 10px;
1686
+ padding: 12px 14px;
1687
+ border-bottom: 1px solid var(--border);
1688
+ }
1689
+ .palette-ico { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
1690
+ .palette-row input {
1691
+ flex: 1;
1692
+ min-width: 0;
1693
+ border: 0;
1694
+ background: transparent;
1695
+ padding: 4px 0;
1696
+ font-size: 15px;
1697
+ box-shadow: none;
1698
+ }
1699
+ .palette-row input:focus { border: 0; box-shadow: none; }
1700
+ .palette-hint {
1701
+ color: var(--muted);
1702
+ font: 500 10px var(--mono);
1703
+ border: 1px solid var(--border);
1704
+ border-radius: 5px;
1705
+ padding: 2px 5px;
1706
+ flex: 0 0 auto;
1707
+ }
1708
+ .palette-list {
1709
+ list-style: none;
1710
+ margin: 0;
1711
+ padding: 6px;
1712
+ max-height: min(52vh, 420px);
1713
+ overflow-y: auto;
1714
+ }
1715
+ .palette-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
1716
+ .palette-item.active { background: var(--theirs); }
1717
+ .palette-item-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
1718
+ .palette-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1719
+ .palette-item-hint { color: var(--muted); font: 500 11px var(--mono); flex: 0 0 auto; }
1720
+ .palette-empty { padding: 14px; color: var(--muted); text-align: center; }
1721
+
1722
+ /* provider modal ---------------------------------------------------------- */
1723
+ dialog.modal {
1724
+ width: min(760px, calc(100vw - 40px));
1725
+ max-height: calc(100vh - 60px);
1726
+ padding: 0;
1727
+ border: 1px solid var(--border);
1728
+ border-radius: 18px;
1729
+ background: var(--solid, var(--panel));
1730
+ color: var(--text);
1731
+ font: inherit;
1732
+ overflow: auto;
1733
+ box-shadow: 0 28px 65px rgba(40, 36, 26, 0.28);
1734
+ }
1735
+ dialog.modal::backdrop { background: rgba(24, 22, 16, 0.55); backdrop-filter: blur(3px); }
1736
+ .modal-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
1737
+ .modal-card h3 { margin: 0; font: 700 17px var(--serif); letter-spacing: -0.02em; }
1738
+ .row .spacer { flex: 1; }
1739
+
1740
+ /* update banner ----------------------------------------------------------- */
1741
+ .update-banner {
1742
+ display: flex;
1743
+ align-items: center;
1744
+ gap: 12px;
1745
+ padding: 8px 16px;
1746
+ background: var(--accent-soft);
1747
+ border-bottom: 1px solid var(--border);
1748
+ color: var(--text);
1749
+ font: 500 13px var(--sans, inherit);
1750
+ }
1751
+ .update-banner[hidden] { display: none; }
1752
+ .update-banner-icon { color: var(--accent); flex: 0 0 auto; }
1753
+ .update-banner-text { flex: 1; min-width: 0; }
1754
+ .update-banner-actions { display: flex; gap: 8px; flex: 0 0 auto; }
1755
+ .update-banner .btn { padding: 4px 12px; font-size: 12px; }
1756
+ .brand .ver.has-update { color: var(--accent); cursor: help; }
1652
1757
  .brand .ver.has-update::after { content: " ⬆"; }
1653
-
1654
- /* advisor card ------------------------------------------------------------ */
1655
- .advisor-card {
1656
- margin: 10px 0;
1657
- padding: 10px 14px;
1658
- border-left: 3px solid var(--accent);
1659
- border-radius: 8px;
1660
- background: var(--accent-soft);
1661
- }
1662
- .advisor-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
1663
- .advisor-glyph { color: var(--accent); font-size: 13px; line-height: 1; }
1664
- .advisor-title { font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
1665
- .advisor-text { color: var(--text); line-height: 1.5; }
1666
- .advisor-code { border-left-color: var(--warn); }
1758
+
1759
+ /* advisor card ------------------------------------------------------------ */
1760
+ .advisor-card {
1761
+ margin: 10px 0;
1762
+ padding: 10px 14px;
1763
+ border-left: 3px solid var(--accent);
1764
+ border-radius: 8px;
1765
+ background: var(--accent-soft);
1766
+ }
1767
+ .advisor-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
1768
+ .advisor-glyph { color: var(--accent); font-size: 13px; line-height: 1; }
1769
+ .advisor-title { font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
1770
+ .advisor-text { color: var(--text); line-height: 1.5; }
1771
+ .advisor-code { border-left-color: var(--warn); }
1667
1772
  .advisor-code .advisor-glyph { color: var(--warn); }
1668
-
1669
- .brand .ver.ver-action { cursor: pointer; }
1773
+
1774
+ .brand .ver.ver-action { cursor: pointer; }
1670
1775
  .brand .ver.ver-action:hover { color: var(--accent); }