beast-agent 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,77 +1,77 @@
1
- /* Beast Agent — monokrom tema: siyah + füme + beyaz */
2
-
3
- :root {
4
- --bg: #f7f7f8;
5
- --panel: #f0f0f2;
6
- --panel2: #e8e8ea;
7
- --border: #d8d8dc;
8
- --text: #131315;
9
- --muted: #707078;
10
- --accent: #131315;
11
- --accent-dim: rgba(19, 19, 21, 0.07);
12
- --ok: #4a4a52;
13
- --err: #26262a;
14
- --accent-contrast: #ffffff;
15
- }
16
-
17
- /* koyu tema — aynı 3 renk felsefesi */
18
- body.dark {
19
- --bg: #0d0d0f;
20
- --panel: #161618;
21
- --panel2: #1e1e21;
22
- --border: #2c2c30;
23
- --text: #e8e8ea;
24
- --muted: #8a8a92;
25
- --accent: #e8e8ea;
26
- --accent-dim: rgba(232, 232, 234, 0.08);
27
- --ok: #b4b4ba;
28
- --err: #d4d4d8;
29
- --accent-contrast: #131315;
30
- }
31
-
32
- /* ---------- rol modelleri ---------- */
33
- .role-row {
34
- display: flex;
35
- align-items: center;
36
- gap: 10px;
37
- margin-bottom: 10px;
38
- }
39
- .role-label {
40
- min-width: 110px;
41
- font-size: 13px;
42
- color: var(--text);
43
- opacity: 0.9;
44
- }
45
- .role-select {
46
- flex: 1;
47
- background: var(--panel2);
48
- color: var(--text);
49
- border: 1px solid var(--border);
50
- padding: 6px 8px;
51
- font-size: 13px;
52
- border-radius: 4px;
53
- }
54
- .role-select:focus {
55
- outline: none;
56
- border-color: var(--accent);
57
- }
58
-
59
- * { box-sizing: border-box; margin: 0; padding: 0; }
60
-
61
- html, body { height: 100%; }
62
-
63
- body {
64
- font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
65
- background: var(--bg);
66
- color: var(--text);
67
- font-size: 14px;
68
- overflow: hidden;
69
- }
70
-
71
- #app { display: flex; height: 100vh; }
72
-
73
- /* ---------- sidebar ---------- */
74
-
1
+ /* Beast Agent — monokrom tema: siyah + füme + beyaz */
2
+
3
+ :root {
4
+ --bg: #f7f7f8;
5
+ --panel: #f0f0f2;
6
+ --panel2: #e8e8ea;
7
+ --border: #d8d8dc;
8
+ --text: #131315;
9
+ --muted: #707078;
10
+ --accent: #131315;
11
+ --accent-dim: rgba(19, 19, 21, 0.07);
12
+ --ok: #4a4a52;
13
+ --err: #26262a;
14
+ --accent-contrast: #ffffff;
15
+ }
16
+
17
+ /* koyu tema — aynı 3 renk felsefesi */
18
+ body.dark {
19
+ --bg: #0d0d0f;
20
+ --panel: #161618;
21
+ --panel2: #1e1e21;
22
+ --border: #2c2c30;
23
+ --text: #e8e8ea;
24
+ --muted: #8a8a92;
25
+ --accent: #e8e8ea;
26
+ --accent-dim: rgba(232, 232, 234, 0.08);
27
+ --ok: #b4b4ba;
28
+ --err: #d4d4d8;
29
+ --accent-contrast: #131315;
30
+ }
31
+
32
+ /* ---------- rol modelleri ---------- */
33
+ .role-row {
34
+ display: flex;
35
+ align-items: center;
36
+ gap: 10px;
37
+ margin-bottom: 10px;
38
+ }
39
+ .role-label {
40
+ min-width: 110px;
41
+ font-size: 13px;
42
+ color: var(--text);
43
+ opacity: 0.9;
44
+ }
45
+ .role-select {
46
+ flex: 1;
47
+ background: var(--panel2);
48
+ color: var(--text);
49
+ border: 1px solid var(--border);
50
+ padding: 6px 8px;
51
+ font-size: 13px;
52
+ border-radius: 4px;
53
+ }
54
+ .role-select:focus {
55
+ outline: none;
56
+ border-color: var(--accent);
57
+ }
58
+
59
+ * { box-sizing: border-box; margin: 0; padding: 0; }
60
+
61
+ html, body { height: 100%; }
62
+
63
+ body {
64
+ font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
65
+ background: var(--bg);
66
+ color: var(--text);
67
+ font-size: 14px;
68
+ overflow: hidden;
69
+ }
70
+
71
+ #app { display: flex; height: 100vh; }
72
+
73
+ /* ---------- sidebar ---------- */
74
+
75
75
  #sidebar {
76
76
  flex: none;
77
77
  width: 250px;
@@ -80,76 +80,76 @@ body {
80
80
  border-right: 1px solid var(--border);
81
81
  display: flex;
82
82
  flex-direction: column;
83
- }
84
-
85
- #brand {
86
- padding: 18px 16px 12px;
87
- letter-spacing: 3px;
88
- font-weight: 800;
89
- text-align: center;
90
- -webkit-app-region: drag;
91
- }
92
- .brand-beast { color: var(--accent); font-size: 17px; }
93
- .brand-sub { color: var(--muted); font-size: 11px; margin-left: 6px; letter-spacing: 2px; }
94
-
95
- #newChat {
96
- margin: 4px 12px 10px;
97
- padding: 8px 10px;
98
- background: var(--accent-dim);
99
- color: var(--accent);
100
- border: 1px solid rgba(19, 19, 21, 0.35);
101
- border-radius: 8px;
102
- cursor: pointer;
103
- font-weight: 600;
104
- transition: background 0.15s;
105
- }
106
- #newChat:hover { background: rgba(19, 19, 21, 0.14); }
107
-
108
- #sessList { flex: 1; overflow-y: auto; padding: 4px 8px; }
109
-
110
- .sess {
111
- display: flex;
112
- align-items: center;
113
- gap: 6px;
114
- padding: 7px 9px;
115
- border-radius: 7px;
116
- cursor: pointer;
117
- color: var(--muted);
118
- margin-bottom: 2px;
119
- }
120
- .sess:hover { background: var(--panel2); color: var(--text); }
121
- .sess.active { background: var(--panel2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
122
- .sess-wa {
123
- width: 15px;
124
- height: 15px;
125
- border-radius: 4px;
126
- background: #131315;
127
- color: #fff;
128
- font-size: 10px;
129
- font-weight: 800;
130
- display: flex;
131
- align-items: center;
132
- justify-content: center;
133
- flex-shrink: 0;
134
- }
135
- .sess-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
136
- .sess-code {
137
- color: var(--muted);
138
- font-size: 10.5px;
139
- font-weight: 700;
140
- letter-spacing: 0.04em;
141
- border: 1px solid var(--border);
142
- border-radius: 6px;
143
- padding: 1px 5px;
144
- }
145
- .sess-del {
146
- visibility: hidden;
147
- border: none; background: none; color: var(--muted);
148
- cursor: pointer; font-size: 13px; padding: 0 3px; border-radius: 4px;
149
- }
83
+ }
84
+
85
+ #brand {
86
+ padding: 18px 16px 12px;
87
+ letter-spacing: 3px;
88
+ font-weight: 800;
89
+ text-align: center;
90
+ -webkit-app-region: drag;
91
+ }
92
+ .brand-beast { color: var(--accent); font-size: 17px; }
93
+ .brand-sub { color: var(--muted); font-size: 11px; margin-left: 6px; letter-spacing: 2px; }
94
+
95
+ #newChat {
96
+ margin: 4px 12px 10px;
97
+ padding: 8px 10px;
98
+ background: var(--accent-dim);
99
+ color: var(--accent);
100
+ border: 1px solid rgba(19, 19, 21, 0.35);
101
+ border-radius: 8px;
102
+ cursor: pointer;
103
+ font-weight: 600;
104
+ transition: background 0.15s;
105
+ }
106
+ #newChat:hover { background: rgba(19, 19, 21, 0.14); }
107
+
108
+ #sessList { flex: 1; overflow-y: auto; padding: 4px 8px; }
109
+
110
+ .sess {
111
+ display: flex;
112
+ align-items: center;
113
+ gap: 6px;
114
+ padding: 7px 9px;
115
+ border-radius: 7px;
116
+ cursor: pointer;
117
+ color: var(--muted);
118
+ margin-bottom: 2px;
119
+ }
120
+ .sess:hover { background: var(--panel2); color: var(--text); }
121
+ .sess.active { background: var(--panel2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
122
+ .sess-wa {
123
+ width: 15px;
124
+ height: 15px;
125
+ border-radius: 4px;
126
+ background: #131315;
127
+ color: #fff;
128
+ font-size: 10px;
129
+ font-weight: 800;
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: center;
133
+ flex-shrink: 0;
134
+ }
135
+ .sess-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
136
+ .sess-code {
137
+ color: var(--muted);
138
+ font-size: 10.5px;
139
+ font-weight: 700;
140
+ letter-spacing: 0.04em;
141
+ border: 1px solid var(--border);
142
+ border-radius: 6px;
143
+ padding: 1px 5px;
144
+ }
145
+ .sess-del {
146
+ visibility: hidden;
147
+ border: none; background: none; color: var(--muted);
148
+ cursor: pointer; font-size: 13px; padding: 0 3px; border-radius: 4px;
149
+ }
150
150
  .sess:hover .sess-del { visibility: visible; }
151
- .sess-del:hover { color: var(--err); background: rgba(19, 19, 21, 0.08); }
152
-
151
+ .sess-del:hover { color: var(--err); background: rgba(19, 19, 21, 0.08); }
152
+
153
153
  #sideFoot {
154
154
  padding: 4px 6px;
155
155
  color: var(--muted);
@@ -163,7 +163,8 @@ body {
163
163
 
164
164
  #gearBtn,
165
165
  #themeBtn,
166
- #langBtn {
166
+ #langBtn,
167
+ #storeBtn {
167
168
  background: none;
168
169
  border: none;
169
170
  color: var(--muted);
@@ -176,145 +177,146 @@ body {
176
177
  }
177
178
  #gearBtn:hover,
178
179
  #themeBtn:hover,
179
- #langBtn:hover { background: var(--panel2); color: var(--text); }
180
+ #langBtn:hover,
181
+ #storeBtn:hover { background: var(--panel2); color: var(--text); }
180
182
 
181
183
  /* model refresh butonu — çekerken döner */
182
184
  #modelRefreshBtn.spin { opacity: .7; pointer-events: none; }
183
185
  #modelRefreshBtn.spin { animation: beast-spin 0.9s linear infinite; }
184
- @keyframes beast-spin { to { transform: rotate(360deg); } }
185
-
186
- /* ---------- cron modülü (ayarlar sekmesi) ---------- */
187
-
188
- #cronForm {
189
- display: flex;
190
- flex-direction: column;
191
- gap: 8px;
192
- margin-bottom: 14px;
193
- }
194
- #cronName, #cronSchedule, #cronPrompt {
195
- background: var(--bg);
196
- border: 1px solid var(--border);
197
- color: var(--text);
198
- border-radius: 8px;
199
- padding: 7px 10px;
200
- font-size: 13px;
201
- outline: none;
202
- font-family: inherit;
203
- }
204
- #cronName:focus, #cronSchedule:focus, #cronPrompt:focus { border-color: var(--accent); }
205
- #cronPrompt { resize: vertical; min-height: 56px; }
206
- #cronSchedRow { display: flex; gap: 8px; }
207
- #cronPreset, #cronSchedule { flex: 1; }
208
- #cronAddBtn {
209
- align-self: flex-end;
210
- background: var(--accent-dim);
211
- color: var(--accent);
212
- border: 1px solid var(--border);
213
- border-radius: 8px;
214
- padding: 6px 14px;
215
- font-weight: 700;
216
- cursor: pointer;
217
- }
218
- #cronAddBtn:hover { background: rgba(19, 19, 21, 0.14); }
219
-
220
- #cronList { max-height: 46vh; overflow-y: auto; }
221
- .cron-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 22px 0; }
222
- .cron-job {
223
- display: flex;
224
- align-items: center;
225
- justify-content: space-between;
226
- gap: 10px;
227
- padding: 9px 10px;
228
- border-radius: 9px;
229
- margin-bottom: 3px;
230
- }
231
- .cron-job:hover { background: var(--panel2); }
232
- .cron-job.off .cj-name, .cron-job.off .cj-meta { opacity: 0.45; }
233
- .cj-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
234
- .cj-dot {
235
- flex-shrink: 0;
236
- width: 9px; height: 9px; border-radius: 50%;
237
- background: var(--ok, #2e9e5b);
238
- cursor: pointer;
239
- }
240
- .cron-job.off .cj-dot { background: var(--muted); }
241
- .cj-info { min-width: 0; }
242
- .cj-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
243
- .cj-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
244
- .cj-meta code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
245
- .cj-btns { display: flex; gap: 4px; flex-shrink: 0; }
246
- .cj-btns button {
247
- background: none; border: none; color: var(--muted);
248
- cursor: pointer; font-size: 12px; padding: 4px 7px; border-radius: 6px;
249
- }
250
- .cj-btns button:hover { background: var(--panel); color: var(--text); }
251
- .cj-btns button:last-child:hover { color: var(--err); }
252
-
253
- /* ---------- main ---------- */
254
-
255
- #main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
256
-
257
- /* dahili tarayıcı açıkken sağ tarafı boşalt */
258
- body.browser-open #app { margin-right: var(--bw, 480px); }
259
- body.browser-open #topbar { width: auto; }
260
-
186
+ @keyframes beast-spin { to { transform: rotate(360deg); } }
187
+
188
+ /* ---------- cron modülü (ayarlar sekmesi) ---------- */
189
+
190
+ #cronForm {
191
+ display: flex;
192
+ flex-direction: column;
193
+ gap: 8px;
194
+ margin-bottom: 14px;
195
+ }
196
+ #cronName, #cronSchedule, #cronPrompt {
197
+ background: var(--bg);
198
+ border: 1px solid var(--border);
199
+ color: var(--text);
200
+ border-radius: 8px;
201
+ padding: 7px 10px;
202
+ font-size: 13px;
203
+ outline: none;
204
+ font-family: inherit;
205
+ }
206
+ #cronName:focus, #cronSchedule:focus, #cronPrompt:focus { border-color: var(--accent); }
207
+ #cronPrompt { resize: vertical; min-height: 56px; }
208
+ #cronSchedRow { display: flex; gap: 8px; }
209
+ #cronPreset, #cronSchedule { flex: 1; }
210
+ #cronAddBtn {
211
+ align-self: flex-end;
212
+ background: var(--accent-dim);
213
+ color: var(--accent);
214
+ border: 1px solid var(--border);
215
+ border-radius: 8px;
216
+ padding: 6px 14px;
217
+ font-weight: 700;
218
+ cursor: pointer;
219
+ }
220
+ #cronAddBtn:hover { background: rgba(19, 19, 21, 0.14); }
221
+
222
+ #cronList { max-height: 46vh; overflow-y: auto; }
223
+ .cron-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 22px 0; }
224
+ .cron-job {
225
+ display: flex;
226
+ align-items: center;
227
+ justify-content: space-between;
228
+ gap: 10px;
229
+ padding: 9px 10px;
230
+ border-radius: 9px;
231
+ margin-bottom: 3px;
232
+ }
233
+ .cron-job:hover { background: var(--panel2); }
234
+ .cron-job.off .cj-name, .cron-job.off .cj-meta { opacity: 0.45; }
235
+ .cj-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
236
+ .cj-dot {
237
+ flex-shrink: 0;
238
+ width: 9px; height: 9px; border-radius: 50%;
239
+ background: var(--ok, #2e9e5b);
240
+ cursor: pointer;
241
+ }
242
+ .cron-job.off .cj-dot { background: var(--muted); }
243
+ .cj-info { min-width: 0; }
244
+ .cj-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
245
+ .cj-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
246
+ .cj-meta code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
247
+ .cj-btns { display: flex; gap: 4px; flex-shrink: 0; }
248
+ .cj-btns button {
249
+ background: none; border: none; color: var(--muted);
250
+ cursor: pointer; font-size: 12px; padding: 4px 7px; border-radius: 6px;
251
+ }
252
+ .cj-btns button:hover { background: var(--panel); color: var(--text); }
253
+ .cj-btns button:last-child:hover { color: var(--err); }
254
+
255
+ /* ---------- main ---------- */
256
+
257
+ #main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
258
+
259
+ /* dahili tarayıcı açıkken sağ tarafı boşalt */
260
+ body.browser-open #app { margin-right: var(--bw, 480px); }
261
+ body.browser-open #topbar { width: auto; }
262
+
261
263
  #browserBtn.on { background: var(--accent-dim); color: var(--accent); }
262
264
  #eyeBtn.on { background: var(--accent-dim); color: var(--accent); }
263
265
 
264
266
  /* #19 sağ panel (paralel ajan konsolu) aç/kapa */
265
267
  #railBtn.on { background: var(--accent-dim); color: var(--accent); }
266
- body.rail-hidden #rail { display: none; }
267
-
268
- #browserBar {
269
- position: fixed;
270
- top: 0;
271
- right: 0;
272
- width: var(--bw, 480px);
273
- height: 46px;
274
- display: flex;
275
- align-items: center;
276
- gap: 4px;
277
- padding: 0 148px 0 8px;
278
- background: var(--panel);
279
- border-bottom: 1px solid var(--border);
280
- z-index: 50;
281
- }
282
- #browserBar[hidden] { display: none; }
283
- #browserBar button {
284
- background: none;
285
- border: none;
286
- color: var(--muted);
287
- font-size: 15px;
288
- cursor: pointer;
289
- padding: 3px 7px;
290
- border-radius: 6px;
291
- line-height: 1;
292
- }
293
- #browserBar button:hover { background: var(--panel2); color: var(--text); }
294
- #bbUrl {
295
- flex: 1;
296
- min-width: 0;
297
- background: var(--bg);
298
- border: 1px solid var(--border);
299
- color: var(--text);
300
- border-radius: 7px;
301
- padding: 5px 9px;
302
- font-size: 12px;
303
- outline: none;
304
- }
305
- #bbUrl:focus { border-color: var(--accent); }
306
- #bbClose:hover { color: var(--err); }
307
-
308
- /* sürükle-boyutlandır tutamacı (görünmez) */
309
- #bbResize {
310
- position: fixed;
311
- top: 46px;
312
- right: var(--bw, 480px);
313
- width: 8px;
314
- height: calc(100vh - 46px);
315
- cursor: col-resize;
316
- z-index: 60;
317
- }
268
+ body.rail-hidden #rail { display: none; }
269
+
270
+ #browserBar {
271
+ position: fixed;
272
+ top: 0;
273
+ right: 0;
274
+ width: var(--bw, 480px);
275
+ height: 46px;
276
+ display: flex;
277
+ align-items: center;
278
+ gap: 4px;
279
+ padding: 0 148px 0 8px;
280
+ background: var(--panel);
281
+ border-bottom: 1px solid var(--border);
282
+ z-index: 50;
283
+ }
284
+ #browserBar[hidden] { display: none; }
285
+ #browserBar button {
286
+ background: none;
287
+ border: none;
288
+ color: var(--muted);
289
+ font-size: 15px;
290
+ cursor: pointer;
291
+ padding: 3px 7px;
292
+ border-radius: 6px;
293
+ line-height: 1;
294
+ }
295
+ #browserBar button:hover { background: var(--panel2); color: var(--text); }
296
+ #bbUrl {
297
+ flex: 1;
298
+ min-width: 0;
299
+ background: var(--bg);
300
+ border: 1px solid var(--border);
301
+ color: var(--text);
302
+ border-radius: 7px;
303
+ padding: 5px 9px;
304
+ font-size: 12px;
305
+ outline: none;
306
+ }
307
+ #bbUrl:focus { border-color: var(--accent); }
308
+ #bbClose:hover { color: var(--err); }
309
+
310
+ /* sürükle-boyutlandır tutamacı (görünmez) */
311
+ #bbResize {
312
+ position: fixed;
313
+ top: 46px;
314
+ right: var(--bw, 480px);
315
+ width: 8px;
316
+ height: calc(100vh - 46px);
317
+ cursor: col-resize;
318
+ z-index: 60;
319
+ }
318
320
  body.bb-dragging { user-select: none; }
319
321
  body.bb-dragging * { cursor: col-resize !important; }
320
322
 
@@ -442,36 +444,36 @@ body.term-dragging { user-select: none; }
442
444
  body.term-dragging * { cursor: col-resize !important; }
443
445
 
444
446
  body.term-open .mini-overlay { right: var(--tw, 520px); }
445
- body.term-open #settingsOverlay { right: var(--tw, 520px); }
446
-
447
- #topbar {
448
- height: 46px;
449
- display: flex;
450
- align-items: center;
451
- gap: 8px;
452
- padding: 0 12px;
453
- border-bottom: 1px solid var(--border);
454
- background: var(--bg);
455
- }
456
- .drag-spacer { flex: 1; height: 100%; -webkit-app-region: drag; }
457
-
458
- /* dropdown model picker */
459
- .dd { position: relative; -webkit-app-region: no-drag; }
460
- .dd-btn {
461
- display: flex;
462
- align-items: center;
463
- gap: 7px;
464
- background: var(--panel2);
465
- color: var(--text);
466
- border: 1px solid var(--border);
467
- border-radius: 7px;
468
- padding: 6px 11px;
469
- font-size: 12.5px;
470
- max-width: 360px;
471
- cursor: pointer;
472
- }
473
- .dd-btn:hover { border-color: var(--accent); }
474
- #modelBtnLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
447
+ body.term-open #settingsOverlay { right: var(--tw, 520px); }
448
+
449
+ #topbar {
450
+ height: 46px;
451
+ display: flex;
452
+ align-items: center;
453
+ gap: 8px;
454
+ padding: 0 12px;
455
+ border-bottom: 1px solid var(--border);
456
+ background: var(--bg);
457
+ }
458
+ .drag-spacer { flex: 1; height: 100%; -webkit-app-region: drag; }
459
+
460
+ /* dropdown model picker */
461
+ .dd { position: relative; -webkit-app-region: no-drag; }
462
+ .dd-btn {
463
+ display: flex;
464
+ align-items: center;
465
+ gap: 7px;
466
+ background: var(--panel2);
467
+ color: var(--text);
468
+ border: 1px solid var(--border);
469
+ border-radius: 7px;
470
+ padding: 6px 11px;
471
+ font-size: 12.5px;
472
+ max-width: 360px;
473
+ cursor: pointer;
474
+ }
475
+ .dd-btn:hover { border-color: var(--accent); }
476
+ #modelBtnLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
475
477
  #thinkMenu { width: 250px; }
476
478
  #thinkMenu .dd-list { overflow-x: hidden; }
477
479
  #thinkMenu .dd-item { overflow: hidden; }
@@ -489,511 +491,1196 @@ body.term-open #settingsOverlay { right: var(--tw, 520px); }
489
491
  overflow: hidden;
490
492
  text-overflow: ellipsis;
491
493
  min-width: 0;
492
- }
493
- .dd-caret { color: var(--muted); font-size: 10px; }
494
- .dd-menu {
495
- position: absolute;
496
- top: calc(100% + 5px);
497
- left: 0;
498
- width: 340px;
499
- max-width: 80vw;
500
- background: var(--bg);
501
- border: 1px solid var(--border);
502
- border-radius: 10px;
503
- box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
504
- padding: 8px;
505
- z-index: 60;
506
- }
507
- .dd-filter {
508
- width: 100%;
509
- padding: 7px 10px;
510
- border: 1px solid var(--border);
511
- border-radius: 7px;
512
- background: var(--panel);
513
- color: var(--text);
514
- font-size: 13px;
515
- outline: none;
516
- margin-bottom: 6px;
517
- }
518
- .dd-filter:focus { border-color: var(--accent); }
519
- .dd-list { max-height: 280px; overflow-y: auto; }
520
- .dd-item {
521
- display: flex;
522
- align-items: center;
523
- gap: 8px;
524
- padding: 7px 9px;
525
- border-radius: 7px;
526
- cursor: pointer;
527
- font-size: 12.5px;
528
- }
529
- .dd-item:hover { background: var(--panel2); }
530
- .dd-item.active { background: var(--accent-dim); }
531
- .dd-item .dn { font-weight: 700; color: var(--text); flex-shrink: 0; }
532
- .dd-item .dm { color: var(--muted); font-family: Consolas, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
533
- .dd-item .ck { margin-left: auto; color: var(--accent); font-weight: 800; visibility: hidden; }
534
- .dd-item.active .ck { visibility: visible; }
535
- .dd-empty { color: var(--muted); font-size: 12.5px; padding: 10px; }
536
-
537
- /* picker yapılandırma popover */
538
- .dd-icon-btn { width: 34px; justify-content: center; padding: 6px 0; font-size: 15px; }
539
- .cfg-menu { width: 360px; max-width: 85vw; }
540
- .cfg-head {
541
- display: flex;
542
- align-items: center;
543
- justify-content: space-between;
544
- font-size: 12px;
545
- color: var(--muted);
546
- font-weight: 700;
547
- letter-spacing: 0.5px;
548
- padding: 2px 4px 8px;
549
- }
550
- .cfg-quick button {
551
- border: 1px solid var(--border);
552
- background: var(--panel);
553
- color: var(--muted);
554
- border-radius: 6px;
555
- font-size: 11.5px;
556
- padding: 3px 9px;
557
- cursor: pointer;
558
- margin-left: 5px;
559
- }
560
- .cfg-quick button:hover { color: var(--accent); border-color: var(--accent); }
561
- .cfg-item {
562
- display: flex;
563
- align-items: center;
564
- gap: 8px;
565
- padding: 6px 9px;
566
- border-radius: 7px;
567
- cursor: pointer;
568
- font-size: 12.5px;
569
- }
570
- .cfg-item:hover { background: var(--panel2); }
571
- .cfg-item input { accent-color: var(--accent); }
572
- .cfg-item .cn { font-weight: 700; flex-shrink: 0; }
573
- .cfg-item .cm { color: var(--muted); font-family: Consolas, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
574
-
575
- /* whatsapp integration */
576
- .wa-card {
577
- border: 1px solid var(--border);
578
- border-radius: 12px;
579
- background: var(--panel);
580
- padding: 16px 18px;
581
- max-width: 560px;
582
- }
583
- .wa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
584
- .wa-logo {
585
- width: 34px; height: 34px;
586
- border-radius: 9px;
587
- background: #131315;
588
- color: #fff;
589
- display: flex; align-items: center; justify-content: center;
590
- font-weight: 900; font-size: 17px;
591
- }
592
- .wa-title { font-weight: 800; font-size: 14.5px; }
593
- .wa-sub { color: var(--muted); font-size: 12px; }
594
- .wa-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; margin: 10px 0; }
595
- .wa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
596
- .wa-dot.on { background: var(--ok); }
597
- .wa-dot.qr { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
598
- .wa-actions { display: flex; gap: 8px; margin-top: 4px; }
599
- #waQr { margin-top: 12px; text-align: center; }
600
- #waQr img { border-radius: 10px; border: 1px solid var(--border); background: #fff; }
601
- .wa-user { color: var(--ok); font-size: 12.5px; margin-top: 6px; word-break: break-all; }
602
- .lock-row {
603
- display: flex;
604
- align-items: center;
605
- gap: 9px;
606
- cursor: pointer;
607
- user-select: none;
608
- }
609
- .lock-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
610
- .lock-title { font-weight: 700; font-size: 13.5px; }
611
-
612
- /* kişi bazlı kısıt düğmesi */
613
- .chip .lk {
614
- margin-left: 7px;
615
- cursor: pointer;
616
- font-size: 10.5px;
617
- font-weight: 700;
618
- letter-spacing: 0.3px;
619
- padding: 1px 8px;
620
- border-radius: 999px;
621
- border: 1px solid var(--border);
622
- color: var(--muted);
623
- user-select: none;
624
- }
625
- .chip .lk:hover { border-color: var(--accent); color: var(--text); }
626
- .chip .lk.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
627
- .chip-locked { opacity: 0.85; }
628
- .chip .chip-txt { cursor: pointer; }
629
- .chip .chip-txt:hover { text-decoration: underline; }
630
- .chip-noname { border-style: dashed; border-color: var(--err); }
631
- .chip .perm-select {
632
- margin-left: 7px;
633
- background: var(--panel2);
634
- color: var(--text);
635
- border: 1px solid var(--border);
636
- border-radius: 999px;
637
- font-size: 10.5px;
638
- font-weight: 700;
639
- padding: 1px 4px;
640
- cursor: pointer;
641
- }
642
- .chip .perm-select:focus { outline: none; border-color: var(--accent); }
643
-
644
- /* oturum notları */
645
- .notes-card { max-width: 640px; }
646
- .notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
647
- .notes-meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
648
- .notes-body {
649
- margin: 8px 0 4px;
650
- padding: 10px 12px;
651
- background: var(--panel2);
652
- border: 1px solid var(--border);
653
- border-radius: 8px;
654
- font-family: inherit;
655
- font-size: 12.5px;
656
- line-height: 1.55;
657
- color: var(--text);
658
- white-space: pre-wrap;
659
- word-break: break-word;
660
- max-height: 220px;
661
- overflow-y: auto;
662
- }
663
-
664
- /* ---------- chat ---------- */
665
-
666
- #chatScroll { flex: 1; overflow-y: auto; scroll-behavior: auto; }
667
-
668
- #empty {
669
- height: 100%;
670
- display: flex;
671
- flex-direction: column;
672
- align-items: center;
673
- justify-content: center;
674
- gap: 10px;
675
- }
676
- #emptyLogo {
677
- font-size: 44px;
678
- font-weight: 900;
679
- letter-spacing: 10px;
680
- color: var(--accent);
681
- opacity: 0.9;
682
- text-shadow: 0 0 30px rgba(19, 19, 21, 0.15);
683
- }
684
- #emptyHint { color: var(--muted); }
685
-
686
- #msgs { max-width: 860px; margin: 0 auto; padding: 20px 24px 30px; }
687
-
688
- .msg { margin-bottom: 18px; line-height: 1.55; }
689
- .msg-user {
690
- background: var(--panel2);
691
- border: 1px solid var(--border);
692
- border-radius: 12px;
693
- padding: 10px 14px;
694
- white-space: pre-wrap;
695
- word-wrap: break-word;
696
- }
697
- .msg-assistant { word-wrap: break-word; }
698
- .msg-assistant .who,
699
- .msg-user .who {
700
- display: block;
701
- font-size: 11px;
702
- color: var(--muted);
703
- letter-spacing: 1.5px;
704
- text-transform: uppercase;
705
- margin-bottom: 5px;
706
- }
707
- .msg-assistant .who { color: var(--accent); }
708
-
709
- .msg-error {
710
- border: 1px solid rgba(19, 19, 21, 0.3);
711
- background: rgba(19, 19, 21, 0.05);
712
- color: var(--err);
713
- border-radius: 10px;
714
- padding: 10px 14px;
715
- }
716
-
717
- /* markdown */
718
- .md p { margin: 0 0 8px; }
719
- .md p:last-child { margin-bottom: 0; }
720
- .md h1, .md h2, .md h3 { margin: 14px 0 8px; line-height: 1.3; }
721
- .md h1 { font-size: 20px; } .md h2 { font-size: 17px; } .md h3 { font-size: 15px; }
722
- .md ul, .md ol { margin: 4px 0 10px 22px; }
723
- .md li { margin-bottom: 3px; }
724
- .md code {
725
- font-family: Consolas, "Cascadia Mono", monospace;
726
- font-size: 12.5px;
727
- background: var(--panel2);
728
- border: 1px solid var(--border);
729
- border-radius: 5px;
730
- padding: 1px 5px;
731
- }
732
- .md pre {
733
- background: var(--panel);
734
- border: 1px solid var(--border);
735
- border-radius: 9px;
736
- padding: 12px 14px;
737
- overflow-x: auto;
738
- margin: 8px 0 12px;
739
- }
740
- .md pre code { background: none; border: none; padding: 0; font-size: 12.5px; line-height: 1.5; }
741
- .md a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
742
- .md a:hover { opacity: 0.7; }
743
- .md strong { font-weight: 700; }
744
- .cursor-blink::after { content: "▍"; color: var(--accent); animation: blink 1s steps(1) infinite; }
745
- @keyframes blink { 50% { opacity: 0; } }
746
-
747
- /* tool cards */
748
- .tool-card {
749
- border: 1px solid var(--border);
750
- border-radius: 9px;
751
- margin: 8px 0 12px;
752
- background: var(--panel);
753
- overflow: hidden;
754
- font-size: 12.5px;
755
- }
756
- .tool-head {
757
- display: flex;
758
- align-items: center;
759
- gap: 8px;
760
- padding: 7px 11px;
761
- cursor: pointer;
762
- user-select: none;
763
- color: var(--muted);
764
- }
765
- .tool-head:hover { background: var(--panel2); }
766
- .tool-icon { color: var(--text); display: inline-flex; align-items: center; }
767
- .tool-name { font-weight: 700; color: var(--text); }
768
- .tool-arg {
769
- flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
770
- font-family: Consolas, monospace; font-size: 11.5px;
771
- }
772
- .tool-state { font-size: 11px; }
773
- .tool-state.run { color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
774
- .tool-state.ok { color: var(--ok); }
775
- .tool-state.err { color: var(--err); }
776
- @keyframes pulse { 50% { opacity: 0.35; } }
777
- .tool-body {
778
- display: none;
779
- border-top: 1px solid var(--border);
780
- padding: 9px 12px;
781
- max-height: 260px;
782
- overflow-y: auto;
783
- white-space: pre-wrap;
784
- font-family: Consolas, monospace;
785
- font-size: 11.5px;
786
- color: var(--muted);
787
- }
788
- .tool-body.open { display: block; }
789
- .tool-body.short { white-space: pre-wrap; }
790
-
791
- /* status pill */
792
-
793
- /* todo panel */
794
- #todoPanel {
795
- border: 1px solid var(--border);
796
- background: var(--panel);
797
- border-radius: 10px;
798
- padding: 8px 12px;
799
- margin-bottom: 8px;
800
- font-size: 12px;
801
- }
802
- #todoPanel .td-head {
803
- display: flex;
804
- justify-content: space-between;
805
- letter-spacing: 2px;
806
- font-size: 10px;
807
- color: var(--muted);
808
- margin-bottom: 5px;
809
- }
810
- #todoPanel .td-count { letter-spacing: 0; font-weight: 700; color: var(--text); }
811
- #todoPanel .td-row {
812
- display: flex;
813
- align-items: baseline;
814
- gap: 7px;
815
- padding: 1.5px 0;
816
- color: var(--text);
817
- }
818
- #todoPanel .td-g { flex-shrink: 0; width: 12px; }
819
- #todoPanel .td-row.active { color: var(--accent); }
820
- #todoPanel .td-row.active .td-t { font-weight: 600; }
821
- #todoPanel .td-row.done { color: var(--muted); }
822
- #todoPanel .td-row.done .td-t { text-decoration: line-through; }
823
-
824
- #statusPill {
825
- align-self: flex-start;
826
- margin-bottom: 6px;
827
- font-size: 12px;
828
- color: var(--accent);
829
- background: var(--accent-dim);
830
- border: 1px solid var(--accent);
831
- padding: 3px 10px;
832
- border-radius: 999px;
833
- }
834
- /* ---------- composer ---------- */
835
-
836
- #composerWrap { padding: 8px 24px 16px; }
837
-
838
- #composerWrap { display: flex; flex-direction: column; align-items: center; }
839
-
840
- /* slash komut menüsü (#15) */
841
- #slashMenu {
842
- align-self: stretch;
843
- max-width: 760px;
844
- width: 100%;
845
- margin: 0 auto 6px;
846
- background: var(--panel);
847
- border: 1px solid var(--border);
848
- border-radius: 12px;
849
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
850
- overflow-y: auto;
851
- max-height: 46vh;
852
- padding: 4px;
853
- }
854
- .slash-item {
855
- padding: 7px 10px;
856
- border-radius: 8px;
857
- cursor: pointer;
858
- display: flex;
859
- gap: 10px;
860
- align-items: baseline;
861
- }
862
- .slash-item .s-cmd { font-weight: 800; font-size: 13px; min-width: 92px; }
863
- .slash-item .s-desc { color: var(--muted); font-size: 12px; }
864
- .slash-item:hover, .slash-item.sel { background: rgba(128, 128, 128, 0.14); }
865
-
866
- #chips {
867
- width: 100%;
868
- max-width: 860px;
869
- display: flex;
870
- flex-wrap: wrap;
871
- gap: 6px;
872
- margin-bottom: 7px;
873
- }
874
- #chips[hidden] { display: none; }
875
- .chip {
876
- display: inline-flex;
877
- align-items: center;
878
- gap: 6px;
879
- background: var(--panel2);
880
- border: 1px solid var(--border);
881
- border-radius: 999px;
882
- padding: 3px 10px;
883
- font-size: 12px;
884
- color: var(--text);
885
- }
886
- .chip .x { cursor: pointer; color: var(--muted); font-weight: 700; }
887
- .chip .x:hover { color: var(--err); }
888
-
889
- #composer {
890
- width: 100%;
891
- max-width: 860px;
892
- display: flex;
893
- align-items: center;
894
- gap: 8px;
895
- background: var(--panel2);
896
- border: 1px solid var(--border);
897
- border-radius: 14px;
898
- padding: 7px 10px;
899
- }
900
- #composer:focus-within { border-color: var(--accent); }
901
-
902
- #attachBtn {
903
- width: 32px; height: 32px;
904
- border-radius: 9px;
905
- border: none;
906
- cursor: pointer;
907
- font-size: 18px;
908
- line-height: 1;
909
- flex-shrink: 0;
910
- background: none;
911
- color: var(--muted);
912
- }
913
- #attachBtn:hover { background: var(--panel); color: var(--accent); }
494
+ }
495
+ .dd-caret { color: var(--muted); font-size: 10px; }
496
+ .dd-menu {
497
+ position: absolute;
498
+ top: calc(100% + 5px);
499
+ left: 0;
500
+ width: 340px;
501
+ max-width: 80vw;
502
+ background: var(--bg);
503
+ border: 1px solid var(--border);
504
+ border-radius: 10px;
505
+ box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
506
+ padding: 8px;
507
+ z-index: 60;
508
+ }
509
+ .dd-filter {
510
+ width: 100%;
511
+ padding: 7px 10px;
512
+ border: 1px solid var(--border);
513
+ border-radius: 7px;
514
+ background: var(--panel);
515
+ color: var(--text);
516
+ font-size: 13px;
517
+ outline: none;
518
+ margin-bottom: 6px;
519
+ }
520
+ .dd-filter:focus { border-color: var(--accent); }
521
+ .dd-list { max-height: 280px; overflow-y: auto; }
522
+ .dd-item {
523
+ display: flex;
524
+ align-items: center;
525
+ gap: 8px;
526
+ padding: 7px 9px;
527
+ border-radius: 7px;
528
+ cursor: pointer;
529
+ font-size: 12.5px;
530
+ }
531
+ .dd-item:hover { background: var(--panel2); }
532
+ .dd-item.active { background: var(--accent-dim); }
533
+ .dd-item .dn { font-weight: 700; color: var(--text); flex-shrink: 0; }
534
+ .dd-item .dm { color: var(--muted); font-family: Consolas, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
535
+ .dd-item .ck { margin-left: auto; color: var(--accent); font-weight: 800; visibility: hidden; }
536
+ .dd-item.active .ck { visibility: visible; }
537
+ .dd-empty { color: var(--muted); font-size: 12.5px; padding: 10px; }
914
538
 
915
- #micBtn {
916
- width: 32px; height: 32px;
539
+ /* picker yapılandırma popover */
540
+ .dd-icon-btn { width: 34px; justify-content: center; padding: 6px 0; font-size: 15px; }
541
+ .cfg-menu { width: 360px; max-width: 85vw; }
542
+ .cfg-head {
543
+ display: flex;
544
+ align-items: center;
545
+ justify-content: space-between;
546
+ font-size: 12px;
547
+ color: var(--muted);
548
+ font-weight: 700;
549
+ letter-spacing: 0.5px;
550
+ padding: 2px 4px 8px;
551
+ }
552
+ .cfg-quick button {
553
+ border: 1px solid var(--border);
554
+ background: var(--panel);
555
+ color: var(--muted);
556
+ border-radius: 6px;
557
+ font-size: 11.5px;
558
+ padding: 3px 9px;
559
+ cursor: pointer;
560
+ margin-left: 5px;
561
+ }
562
+ .cfg-quick button:hover { color: var(--accent); border-color: var(--accent); }
563
+ .cfg-item {
564
+ display: flex;
565
+ align-items: center;
566
+ gap: 8px;
567
+ padding: 6px 9px;
568
+ border-radius: 7px;
569
+ cursor: pointer;
570
+ font-size: 12.5px;
571
+ }
572
+ .cfg-item:hover { background: var(--panel2); }
573
+ .cfg-item input { accent-color: var(--accent); }
574
+ .cfg-item .cn { font-weight: 700; flex-shrink: 0; }
575
+ .cfg-item .cm { color: var(--muted); font-family: Consolas, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
576
+
577
+ /* whatsapp integration */
578
+ .wa-card {
579
+ border: 1px solid var(--border);
580
+ border-radius: 12px;
581
+ background: var(--panel);
582
+ padding: 16px 18px;
583
+ max-width: 560px;
584
+ }
585
+ .wa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
586
+ .wa-logo {
587
+ width: 34px; height: 34px;
917
588
  border-radius: 9px;
918
- border: none;
589
+ background: #131315;
590
+ color: #fff;
591
+ display: flex; align-items: center; justify-content: center;
592
+ font-weight: 900; font-size: 17px;
593
+ }
594
+ .wa-title { font-weight: 800; font-size: 14.5px; }
595
+ .wa-sub { color: var(--muted); font-size: 12px; }
596
+ .wa-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; margin: 10px 0; }
597
+ .wa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
598
+ .wa-dot.on { background: var(--ok); }
599
+ .wa-dot.qr { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
600
+ .wa-actions { display: flex; gap: 8px; margin-top: 4px; }
601
+ #waQr { margin-top: 12px; text-align: center; }
602
+ #waQr img { border-radius: 10px; border: 1px solid var(--border); background: #fff; }
603
+ .wa-user { color: var(--ok); font-size: 12.5px; margin-top: 6px; word-break: break-all; }
604
+ .lock-row {
605
+ display: flex;
606
+ align-items: center;
607
+ gap: 9px;
919
608
  cursor: pointer;
920
- font-size: 17px;
921
- line-height: 1;
922
- flex-shrink: 0;
923
- background: none;
609
+ user-select: none;
610
+ }
611
+ .lock-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
612
+ .lock-title { font-weight: 700; font-size: 13.5px; }
613
+
614
+ /* kişi bazlı kısıt düğmesi */
615
+ .chip .lk {
616
+ margin-left: 7px;
617
+ cursor: pointer;
618
+ font-size: 10.5px;
619
+ font-weight: 700;
620
+ letter-spacing: 0.3px;
621
+ padding: 1px 8px;
622
+ border-radius: 999px;
623
+ border: 1px solid var(--border);
624
+ color: var(--muted);
625
+ user-select: none;
626
+ }
627
+ .chip .lk:hover { border-color: var(--accent); color: var(--text); }
628
+ .chip .lk.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
629
+ .chip-locked { opacity: 0.85; }
630
+ .chip .chip-txt { cursor: pointer; }
631
+ .chip .chip-txt:hover { text-decoration: underline; }
632
+ .chip-noname { border-style: dashed; border-color: var(--err); }
633
+ .chip .perm-select {
634
+ margin-left: 7px;
635
+ background: var(--panel2);
636
+ color: var(--text);
637
+ border: 1px solid var(--border);
638
+ border-radius: 999px;
639
+ font-size: 10.5px;
640
+ font-weight: 700;
641
+ padding: 1px 4px;
642
+ cursor: pointer;
643
+ }
644
+ .chip .perm-select:focus { outline: none; border-color: var(--accent); }
645
+
646
+ /* oturum notları */
647
+ .notes-card { max-width: 640px; }
648
+ .notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
649
+ .notes-meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
650
+ .notes-body {
651
+ margin: 8px 0 4px;
652
+ padding: 10px 12px;
653
+ background: var(--panel2);
654
+ border: 1px solid var(--border);
655
+ border-radius: 8px;
656
+ font-family: inherit;
657
+ font-size: 12.5px;
658
+ line-height: 1.55;
659
+ color: var(--text);
660
+ white-space: pre-wrap;
661
+ word-break: break-word;
662
+ max-height: 220px;
663
+ overflow-y: auto;
664
+ }
665
+
666
+ /* ---------- chat ---------- */
667
+
668
+ #chatScroll { flex: 1; overflow-y: auto; scroll-behavior: auto; }
669
+
670
+ #empty {
671
+ height: 100%;
672
+ display: flex;
673
+ flex-direction: column;
674
+ align-items: center;
675
+ justify-content: center;
676
+ gap: 10px;
677
+ }
678
+ #emptyLogo {
679
+ font-size: 44px;
680
+ font-weight: 900;
681
+ letter-spacing: 10px;
682
+ color: var(--accent);
683
+ opacity: 0.9;
684
+ text-shadow: 0 0 30px rgba(19, 19, 21, 0.15);
685
+ }
686
+ #emptyHint { color: var(--muted); }
687
+
688
+ #msgs { max-width: 860px; margin: 0 auto; padding: 20px 24px 30px; }
689
+
690
+ .msg { margin-bottom: 18px; line-height: 1.55; }
691
+ .msg-user {
692
+ background: var(--panel2);
693
+ border: 1px solid var(--border);
694
+ border-radius: 12px;
695
+ padding: 10px 14px;
696
+ white-space: pre-wrap;
697
+ word-wrap: break-word;
698
+ }
699
+ .msg-assistant { word-wrap: break-word; }
700
+ .msg-assistant .who,
701
+ .msg-user .who {
702
+ display: block;
703
+ font-size: 11px;
704
+ color: var(--muted);
705
+ letter-spacing: 1.5px;
706
+ text-transform: uppercase;
707
+ margin-bottom: 5px;
708
+ }
709
+ .msg-assistant .who { color: var(--accent); }
710
+
711
+ .msg-error {
712
+ border: 1px solid rgba(19, 19, 21, 0.3);
713
+ background: rgba(19, 19, 21, 0.05);
714
+ color: var(--err);
715
+ border-radius: 10px;
716
+ padding: 10px 14px;
717
+ }
718
+
719
+ /* markdown */
720
+ .md p { margin: 0 0 8px; }
721
+ .md p:last-child { margin-bottom: 0; }
722
+ .md h1, .md h2, .md h3 { margin: 14px 0 8px; line-height: 1.3; }
723
+ .md h1 { font-size: 20px; } .md h2 { font-size: 17px; } .md h3 { font-size: 15px; }
724
+ .md ul, .md ol { margin: 4px 0 10px 22px; }
725
+ .md li { margin-bottom: 3px; }
726
+ .md code {
727
+ font-family: Consolas, "Cascadia Mono", monospace;
728
+ font-size: 12.5px;
729
+ background: var(--panel2);
730
+ border: 1px solid var(--border);
731
+ border-radius: 5px;
732
+ padding: 1px 5px;
733
+ }
734
+ .md pre {
735
+ background: var(--panel);
736
+ border: 1px solid var(--border);
737
+ border-radius: 9px;
738
+ padding: 12px 14px;
739
+ overflow-x: auto;
740
+ margin: 8px 0 12px;
741
+ }
742
+ .md pre code { background: none; border: none; padding: 0; font-size: 12.5px; line-height: 1.5; }
743
+ .md a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
744
+ .md a:hover { opacity: 0.7; }
745
+ .md strong { font-weight: 700; }
746
+ .cursor-blink::after { content: "▍"; color: var(--accent); animation: blink 1s steps(1) infinite; }
747
+ @keyframes blink { 50% { opacity: 0; } }
748
+
749
+ /* tool cards */
750
+ .tool-card {
751
+ border: 1px solid var(--border);
752
+ border-radius: 9px;
753
+ margin: 8px 0 12px;
754
+ background: var(--panel);
755
+ overflow: hidden;
756
+ font-size: 12.5px;
757
+ }
758
+ .tool-head {
759
+ display: flex;
760
+ align-items: center;
761
+ gap: 8px;
762
+ padding: 7px 11px;
763
+ cursor: pointer;
764
+ user-select: none;
765
+ color: var(--muted);
766
+ }
767
+ .tool-head:hover { background: var(--panel2); }
768
+ .tool-icon { color: var(--text); display: inline-flex; align-items: center; }
769
+ .tool-name { font-weight: 700; color: var(--text); }
770
+ .tool-arg {
771
+ flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
772
+ font-family: Consolas, monospace; font-size: 11.5px;
773
+ }
774
+ .tool-state { font-size: 11px; }
775
+ .tool-state.run { color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
776
+ .tool-state.ok { color: var(--ok); }
777
+ .tool-state.err { color: var(--err); }
778
+ @keyframes pulse { 50% { opacity: 0.35; } }
779
+ .tool-body {
780
+ display: none;
781
+ border-top: 1px solid var(--border);
782
+ padding: 9px 12px;
783
+ max-height: 260px;
784
+ overflow-y: auto;
785
+ white-space: pre-wrap;
786
+ font-family: Consolas, monospace;
787
+ font-size: 11.5px;
788
+ color: var(--muted);
789
+ }
790
+ .tool-body.open { display: block; }
791
+ .tool-body.short { white-space: pre-wrap; }
792
+
793
+ /* status pill */
794
+
795
+ /* todo panel */
796
+ #todoPanel {
797
+ border: 1px solid var(--border);
798
+ background: var(--panel);
799
+ border-radius: 10px;
800
+ padding: 8px 12px;
801
+ margin-bottom: 8px;
802
+ font-size: 12px;
803
+ }
804
+ #todoPanel .td-head {
805
+ display: flex;
806
+ justify-content: space-between;
807
+ letter-spacing: 2px;
808
+ font-size: 10px;
809
+ color: var(--muted);
810
+ margin-bottom: 5px;
811
+ }
812
+ #todoPanel .td-count { letter-spacing: 0; font-weight: 700; color: var(--text); }
813
+ #todoPanel .td-row {
814
+ display: flex;
815
+ align-items: baseline;
816
+ gap: 7px;
817
+ padding: 1.5px 0;
818
+ color: var(--text);
819
+ }
820
+ #todoPanel .td-g { flex-shrink: 0; width: 12px; }
821
+ #todoPanel .td-row.active { color: var(--accent); }
822
+ #todoPanel .td-row.active .td-t { font-weight: 600; }
823
+ #todoPanel .td-row.done { color: var(--muted); }
824
+ #todoPanel .td-row.done .td-t { text-decoration: line-through; }
825
+
826
+ #statusPill {
827
+ align-self: flex-start;
828
+ margin-bottom: 6px;
829
+ font-size: 12px;
830
+ color: var(--accent);
831
+ background: var(--accent-dim);
832
+ border: 1px solid var(--accent);
833
+ padding: 3px 10px;
834
+ border-radius: 999px;
835
+ }
836
+ /* ---------- composer ---------- */
837
+
838
+ #composerWrap { padding: 8px 24px 16px; }
839
+
840
+ #composerWrap { display: flex; flex-direction: column; align-items: center; }
841
+
842
+ /* slash komut menüsü (#15) */
843
+ #slashMenu {
844
+ align-self: stretch;
845
+ max-width: 760px;
846
+ width: 100%;
847
+ margin: 0 auto 6px;
848
+ background: var(--panel);
849
+ border: 1px solid var(--border);
850
+ border-radius: 12px;
851
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
852
+ overflow-y: auto;
853
+ max-height: 46vh;
854
+ padding: 4px;
855
+ }
856
+ .slash-item {
857
+ padding: 7px 10px;
858
+ border-radius: 8px;
859
+ cursor: pointer;
860
+ display: flex;
861
+ gap: 10px;
862
+ align-items: baseline;
863
+ }
864
+ .slash-item .s-cmd { font-weight: 800; font-size: 13px; min-width: 92px; color: var(--text); }
865
+ .slash-item .s-desc { color: var(--muted); font-size: 12px; }
866
+ .slash-item:hover, .slash-item.sel { background: rgba(128, 128, 128, 0.14); }
867
+
868
+ #chips {
869
+ width: 100%;
870
+ max-width: 860px;
871
+ display: flex;
872
+ flex-wrap: wrap;
873
+ gap: 6px;
874
+ margin-bottom: 7px;
875
+ }
876
+ #chips[hidden] { display: none; }
877
+ .chip {
878
+ display: inline-flex;
879
+ align-items: center;
880
+ gap: 6px;
881
+ background: var(--panel2);
882
+ border: 1px solid var(--border);
883
+ border-radius: 999px;
884
+ padding: 3px 10px;
885
+ font-size: 12px;
886
+ color: var(--text);
887
+ }
888
+ .chip .x { cursor: pointer; color: var(--muted); font-weight: 700; }
889
+ .chip .x:hover { color: var(--err); }
890
+
891
+ #composer {
892
+ width: 100%;
893
+ max-width: 860px;
894
+ display: flex;
895
+ align-items: center;
896
+ gap: 8px;
897
+ background: var(--panel2);
898
+ border: 1px solid var(--border);
899
+ border-radius: 14px;
900
+ padding: 7px 10px;
901
+ }
902
+ #composer:focus-within { border-color: var(--accent); }
903
+
904
+ #attachBtn {
905
+ width: 32px; height: 32px;
906
+ border-radius: 9px;
907
+ border: none;
908
+ cursor: pointer;
909
+ font-size: 18px;
910
+ line-height: 1;
911
+ flex-shrink: 0;
912
+ background: none;
913
+ color: var(--muted);
914
+ }
915
+ #attachBtn:hover { background: var(--panel); color: var(--accent); }
916
+
917
+ #micBtn {
918
+ width: 32px; height: 32px;
919
+ border-radius: 9px;
920
+ border: none;
921
+ cursor: pointer;
922
+ font-size: 17px;
923
+ line-height: 1;
924
+ flex-shrink: 0;
925
+ background: none;
926
+ color: var(--muted);
927
+ }
928
+ #micBtn:hover { background: var(--panel); color: var(--accent); }
929
+ #micBtn.rec { color: #e5484d; animation: mic-pulse 1.2s ease-in-out infinite; }
930
+ @keyframes mic-pulse { 50% { opacity: .45; } }
931
+
932
+ #input {
933
+ flex: 1;
934
+ background: none;
935
+ border: none;
936
+ outline: none;
937
+ resize: none;
938
+ color: var(--text);
939
+ font-family: inherit;
940
+ font-size: 14px;
941
+ line-height: 1.45;
942
+ max-height: 180px;
943
+ padding: 5px 2px;
944
+ }
945
+ #input::placeholder { color: var(--muted); }
946
+
947
+ #sendBtn, #stopBtn {
948
+ width: 34px; height: 34px;
949
+ border-radius: 9px;
950
+ border: none;
951
+ cursor: pointer;
952
+ font-size: 14px;
953
+ flex-shrink: 0;
954
+ }
955
+ #sendBtn { background: var(--accent); color: var(--accent-contrast); font-weight: 800; }
956
+ #sendBtn:disabled { background: var(--border); color: var(--muted); cursor: default; }
957
+ #stopBtn { background: rgba(19, 19, 21, 0.06); color: var(--err); border: 1px solid rgba(19, 19, 21, 0.35); }
958
+
959
+ ::-webkit-scrollbar { width: 10px; }
960
+ ::-webkit-scrollbar-thumb { background: #cfc9bf; border-radius: 6px; border: 2px solid var(--bg); }
961
+ ::-webkit-scrollbar-thumb:hover { background: #b0b0b6; }
962
+
963
+ /* ---------- setup wizard ---------- */
964
+ #setupOverlay {
965
+ position: fixed;
966
+ inset: 0;
967
+ background: rgba(10, 10, 12, 0.55);
968
+ display: flex;
969
+ align-items: center;
970
+ justify-content: center;
971
+ z-index: 90;
972
+ }
973
+ #setupDialog {
974
+ width: min(460px, 92vw);
975
+ max-height: 86vh;
976
+ overflow-y: auto;
977
+ background: var(--panel);
978
+ border: 1px solid var(--border);
979
+ border-radius: 16px;
980
+ padding: 18px 20px;
981
+ }
982
+ .s-step h3 { margin: 14px 0 6px; font-size: 14px; }
983
+ .s-step .inp { margin: 6px 0; }
984
+
985
+ /* ---------- settings ---------- */
986
+
987
+ #settingsOverlay {
988
+ position: fixed;
989
+ inset: 0;
990
+ background: rgba(36, 41, 47, 0.45);
991
+ display: flex;
992
+ align-items: center;
993
+ justify-content: center;
994
+ z-index: 50;
995
+ }
996
+
997
+ /* #22 mini modallar (izleyiciler / cron) — ayarlar modalı tasarımında */
998
+ .mini-overlay {
999
+ position: fixed;
1000
+ inset: 0;
1001
+ background: rgba(36, 41, 47, 0.45);
1002
+ display: flex;
1003
+ align-items: center;
1004
+ justify-content: center;
1005
+ z-index: 55;
1006
+ }
1007
+ .mini-overlay[hidden] { display: none; }
1008
+ body.browser-open .mini-overlay { right: var(--bw, 480px); }
1009
+ .mini-dialog {
1010
+ width: min(560px, 90vw);
1011
+ height: min(560px, 84vh);
1012
+ background: var(--bg);
1013
+ border: 1px solid var(--border);
1014
+ border-radius: 14px;
1015
+ display: flex;
1016
+ flex-direction: column;
1017
+ overflow: hidden;
1018
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
1019
+ }
1020
+ .mini-head {
1021
+ display: flex;
1022
+ align-items: center;
1023
+ justify-content: space-between;
1024
+ padding: 12px 16px;
1025
+ border-bottom: 1px solid var(--border);
1026
+ }
1027
+ .mini-title { font-weight: 800; letter-spacing: 0.5px; font-size: 14px; }
1028
+ .mini-close {
1029
+ border: none; background: none; color: var(--muted);
1030
+ font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px;
1031
+ }
1032
+ .mini-close:hover { color: var(--text); background: var(--panel2); }
1033
+ .mini-body { padding: 12px 16px 14px; overflow-y: auto; }
1034
+ .mini-list { display: flex; flex-direction: column; gap: 6px; }
1035
+ .mini-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 18px 0; }
1036
+ .mini-row {
1037
+ display: flex; align-items: center; gap: 10px;
1038
+ background: var(--panel); border: 1px solid var(--border);
1039
+ border-radius: 9px; padding: 8px 10px;
1040
+ }
1041
+ .mini-row:hover { background: var(--panel2); }
1042
+ .mini-row.off .mr-name, .mini-row.off .mr-meta { opacity: 0.45; }
1043
+ .mr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
1044
+ .mini-row.off .mr-dot { background: var(--muted); }
1045
+ .mr-main { flex: 1; min-width: 0; }
1046
+ .mr-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1047
+ .mr-meta { color: var(--muted); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1048
+ .mr-meta b { color: var(--text); font-weight: 600; }
1049
+ .mr-btn {
1050
+ border: none; background: var(--panel2); color: var(--text);
1051
+ font-size: 12px; padding: 4px 8px; border-radius: 7px; cursor: pointer; flex: none;
1052
+ }
1053
+ .mr-btn:hover { color: var(--accent); }
1054
+ .mr-btn.del:hover { color: var(--err); }
1055
+
1056
+ /* #26 ajan dosya kartı */
1057
+ .file-card {
1058
+ display: flex;
1059
+ align-items: center;
1060
+ gap: 10px;
1061
+ background: var(--panel);
1062
+ border: 1px solid var(--border);
1063
+ border-radius: 12px;
1064
+ padding: 10px 12px;
1065
+ margin: 6px 0;
1066
+ max-width: 78%;
1067
+ }
1068
+ .fc-icon { font-size: 22px; flex: none; }
1069
+ .fc-main { flex: 1; min-width: 0; }
1070
+ .fc-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1071
+ .fc-cap { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
1072
+ .fc-btns { display: flex; gap: 6px; flex: none; }
1073
+ #settingsOverlay[hidden] { display: none; }
1074
+
1075
+ /* tarayıcı açıkken diyalogu görünür alana ortala */
1076
+ body.browser-open #settingsOverlay { right: var(--bw, 480px); }
1077
+ body.browser-open #settingsDialog { width: min(70vw, calc(100vw - var(--bw, 480px) - 48px)); }
1078
+ /* toast'ı da görünür alanın ortasına kaydır */
1079
+ body.browser-open #toast { left: calc((100vw - var(--bw, 480px)) / 2); }
1080
+
1081
+ #settingsDialog {
1082
+ width: 70vw;
1083
+ height: 70vh;
1084
+ background: var(--bg);
1085
+ border: 1px solid var(--border);
1086
+ border-radius: 14px;
1087
+ display: flex;
1088
+ overflow: hidden;
1089
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
1090
+ }
1091
+
1092
+ #setTabs {
1093
+ width: 190px;
1094
+ min-width: 190px;
1095
+ background: var(--panel);
1096
+ border-right: 1px solid var(--border);
1097
+ display: flex;
1098
+ flex-direction: column;
1099
+ padding: 16px 10px 12px;
1100
+ }
1101
+ .set-tabs-title {
1102
+ font-size: 11px;
1103
+ letter-spacing: 2px;
1104
+ color: var(--muted);
1105
+ padding: 0 12px 10px;
1106
+ }
1107
+ /* sekme listesi: küçük ekranda taşarsa içeride kayar — alt kısım (Beast Kodu + Kapat) sabit kalır */
1108
+ .set-tabs-list {
1109
+ display: flex;
1110
+ flex-direction: column;
1111
+ align-items: stretch;
1112
+ flex: 1 1 auto;
1113
+ min-height: 0;
1114
+ overflow-y: auto;
1115
+ padding-right: 2px;
1116
+ margin: 0 -2px;
1117
+ scrollbar-width: thin;
1118
+ scrollbar-color: var(--border) transparent;
1119
+ }
1120
+ .set-tabs-list::-webkit-scrollbar { width: 8px; }
1121
+ .set-tabs-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
1122
+ .set-tabs-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }
1123
+ .set-tabs-list::-webkit-scrollbar-track { background: transparent; }
1124
+ @media (max-height: 860px) {
1125
+ #setTabs { padding: 10px 8px; }
1126
+ .set-tabs-title { padding: 0 12px 6px; }
1127
+ #setTabs .tab { padding: 6px 12px; font-size: 12.5px; margin-bottom: 1px; }
1128
+ }
1129
+ #setTabs .tab {
1130
+ text-align: left;
1131
+ padding: 9px 12px;
1132
+ border-radius: 8px;
1133
+ border: none;
1134
+ background: none;
1135
+ color: var(--muted);
1136
+ font-size: 13.5px;
1137
+ cursor: pointer;
1138
+ margin-bottom: 2px;
1139
+ }
1140
+ #setTabs .tab:hover { background: var(--panel2); color: var(--text); }
1141
+ #setTabs .tab.active { background: var(--accent-dim); color: var(--accent); font-weight: 700; }
1142
+ .set-tabs-foot { margin-top: auto; }
1143
+ .beast-code {
1144
+ border: 1px solid var(--border);
1145
+ border-radius: 8px;
1146
+ padding: 4px 8px;
1147
+ margin-bottom: 8px;
1148
+ background: var(--panel2);
1149
+ }
1150
+ .bc-row { display: flex; align-items: center; gap: 6px; }
1151
+ .bc-value {
1152
+ flex: 1;
1153
+ font-family: var(--mono, monospace);
1154
+ font-size: 12px;
1155
+ letter-spacing: 1px;
1156
+ color: var(--muted);
1157
+ user-select: all;
1158
+ overflow: hidden;
1159
+ text-overflow: ellipsis;
1160
+ white-space: nowrap;
1161
+ }
1162
+ .bc-copy {
1163
+ flex: none;
1164
+ padding: 3px 8px;
1165
+ font-size: 11px;
1166
+ border-radius: 6px;
1167
+ border: 1px solid var(--border);
1168
+ background: none;
1169
+ color: var(--muted);
1170
+ cursor: pointer;
1171
+ }
1172
+ .bc-copy:hover { color: var(--text); background: var(--panel); }
1173
+ #setClose {
1174
+ width: 100%;
1175
+ padding: 8px;
1176
+ border-radius: 8px;
1177
+ border: 1px solid var(--border);
1178
+ background: none;
1179
+ color: var(--muted);
1180
+ cursor: pointer;
1181
+ font-size: 13px;
1182
+ }
1183
+ #setClose:hover { color: var(--err); border-color: var(--err); background: rgba(19, 19, 21, 0.05); }
1184
+
1185
+ #setContent { flex: 1; overflow-y: auto; padding: 22px 26px; }
1186
+ .pane {
1187
+ max-width: 620px;
1188
+ margin: 0 auto;
1189
+ display: flex;
1190
+ flex-direction: column;
1191
+ align-items: center;
1192
+ }
1193
+ .pane[hidden] { display: none; }
1194
+ .pane > * { width: 100%; }
1195
+ .pane h2, .pane .sub, .pane .mem-label, .pane .divider { text-align: center; }
1196
+ .pane h2 { font-size: 17px; margin-bottom: 4px; }
1197
+ .pane .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 16px; }
1198
+ .chips-inline { display: flex; flex-wrap: wrap; margin-bottom: 4px; }
1199
+
1200
+ .prov-row {
1201
+ display: flex;
1202
+ align-items: center;
1203
+ gap: 10px;
1204
+ padding: 10px 13px;
1205
+ border: 1px solid var(--border);
1206
+ border-radius: 10px;
1207
+ margin-bottom: 8px;
1208
+ cursor: pointer;
1209
+ background: var(--panel);
1210
+ }
1211
+ .prov-row:hover { border-color: var(--accent); }
1212
+ .prov-row.active { border-color: var(--accent); background: var(--accent-dim); }
1213
+ .prov-name { font-weight: 700; font-size: 13px; }
1214
+ .prov-model { color: var(--muted); font-size: 12px; font-family: Consolas, monospace; }
1215
+ .check { margin-left: auto; color: var(--accent); font-weight: 800; visibility: hidden; }
1216
+ .prov-row.active .check { visibility: visible; }
1217
+
1218
+ .mem-area {
1219
+ width: 100%;
1220
+ min-height: 170px;
1221
+ resize: vertical;
1222
+ background: var(--panel);
1223
+ border: 1px solid var(--border);
1224
+ border-radius: 10px;
1225
+ color: var(--text);
1226
+ font-family: Consolas, "Cascadia Mono", monospace;
1227
+ font-size: 12.5px;
1228
+ line-height: 1.5;
1229
+ padding: 10px 12px;
1230
+ outline: none;
1231
+ }
1232
+ .mem-area:focus { border-color: var(--accent); }
1233
+ .mem-area.soul-area { min-height: 220px; }
1234
+ .mem-label { font-weight: 700; font-size: 13px; margin: 14px 0 6px; display: block; }
1235
+ .btn {
1236
+ padding: 7px 16px;
1237
+ border-radius: 8px;
1238
+ border: none;
1239
+ background: var(--accent);
1240
+ color: var(--accent-contrast);
1241
+ font-weight: 700;
1242
+ cursor: pointer;
1243
+ font-size: 13px;
1244
+ margin-top: 10px;
1245
+ }
1246
+ .btn:hover { filter: brightness(1.08); }
1247
+ .btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
1248
+
1249
+ .inp {
1250
+ width: 100%;
1251
+ padding: 8px 11px;
1252
+ border: 1px solid var(--border);
1253
+ border-radius: 8px;
1254
+ background: var(--panel);
1255
+ color: var(--text);
1256
+ font-size: 13px;
1257
+ outline: none;
1258
+ margin-bottom: 8px;
1259
+ }
1260
+ .inp:focus { border-color: var(--accent); }
1261
+ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
1262
+
1263
+ /* ---------------- ☢ Fallout ---------------- */
1264
+ .fo-toggles {
1265
+ display: flex;
1266
+ align-items: center;
1267
+ justify-content: center;
1268
+ gap: 18px;
1269
+ flex-wrap: wrap;
1270
+ margin-bottom: 16px;
1271
+ }
1272
+ .fo-toggles .lock-row { margin: 0; }
1273
+ .fo-count {
1274
+ color: var(--muted);
1275
+ font-size: 12px;
1276
+ font-weight: 700;
1277
+ border: 1px solid var(--border);
1278
+ border-radius: 999px;
1279
+ padding: 3px 10px;
1280
+ }
1281
+ /* ---------- maliyet (sade) ---------- */
1282
+ .usage-cards {
1283
+ display: grid;
1284
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
1285
+ gap: 8px;
1286
+ margin-top: 10px;
1287
+ }
1288
+ .usage-stat {
1289
+ border: 1px solid var(--border);
1290
+ border-radius: 10px;
1291
+ padding: 10px 12px;
1292
+ }
1293
+ .usage-stat .us-label {
1294
+ color: var(--muted);
1295
+ font-size: 11px;
1296
+ text-transform: uppercase;
1297
+ letter-spacing: 0.04em;
1298
+ margin-bottom: 3px;
1299
+ }
1300
+ .usage-stat .us-value {
1301
+ font-size: 15px;
1302
+ font-weight: 700;
1303
+ }
1304
+ #tab-usage h3 {
1305
+ margin: 14px 0 6px;
1306
+ font-size: 12.5px;
1307
+ color: var(--muted);
1308
+ }
1309
+ .usage-row {
1310
+ display: flex;
1311
+ align-items: baseline;
1312
+ gap: 10px;
1313
+ padding: 6px 0;
1314
+ border-bottom: 1px solid var(--border);
1315
+ }
1316
+ .usage-row .ur-model { font-weight: 700; }
1317
+ .usage-row .ur-meta {
1318
+ color: var(--muted);
1319
+ font-size: 12px;
1320
+ flex: 1;
1321
+ }
1322
+ .usage-row .ur-cost { font-weight: 700; font-size: 12.5px; }
1323
+ .usage-row.dash-active { background: var(--accent-dim); border-radius: 6px; }
1324
+ #tab-dash .usage-row { align-items: center; }
1325
+ #tab-dash .usage-row .ur-meta { flex: none; }
1326
+ .usage-row .sess-code {
1327
+ flex: none;
1328
+ font-size: 11px;
1329
+ color: var(--muted);
1330
+ border: 1px solid var(--border);
1331
+ border-radius: 4px;
1332
+ padding: 1px 5px;
1333
+ }
1334
+ .usage-empty {
1335
+ color: var(--muted);
1336
+ font-size: 12.5px;
1337
+ padding: 8px 0;
1338
+ }
1339
+ .fo-slot {
1340
+ display: grid;
1341
+ grid-template-columns: 34px minmax(110px, 1fr) minmax(140px, 1.3fr) minmax(120px, 1fr) auto auto;
1342
+ gap: 8px;
1343
+ align-items: center;
1344
+ padding: 9px 10px;
1345
+ border: 1px solid var(--border);
1346
+ border-radius: 10px;
1347
+ background: var(--panel);
1348
+ margin-bottom: 7px;
1349
+ }
1350
+ .fo-slot.filled { border-color: var(--accent); }
1351
+ .fo-badge {
1352
+ display: inline-flex;
1353
+ align-items: center;
1354
+ justify-content: center;
1355
+ width: 28px;
1356
+ height: 28px;
1357
+ border-radius: 50%;
1358
+ font-weight: 800;
1359
+ font-size: 12px;
1360
+ background: var(--panel2);
1361
+ border: 1px solid var(--border);
1362
+ color: var(--muted);
1363
+ }
1364
+ .fo-slot.filled .fo-badge {
1365
+ background: var(--accent-dim);
1366
+ border-color: var(--accent);
1367
+ color: var(--accent);
1368
+ }
1369
+ .fo-slot .inp { margin-bottom: 0; }
1370
+ .fo-slot select.inp { cursor: pointer; }
1371
+ .fo-save { margin-top: 0; white-space: nowrap; }
1372
+ .fo-clear {
1373
+ background: none;
1374
+ border: none;
1375
+ color: var(--muted);
1376
+ font-size: 13px;
1377
+ cursor: pointer;
1378
+ padding: 4px 6px;
1379
+ }
1380
+ .fo-clear:hover { color: #e05252; }
1381
+ .model-picks {
1382
+ border: 1px solid var(--border);
1383
+ border-radius: 10px;
1384
+ background: var(--panel);
1385
+ padding: 8px 4px;
1386
+ margin-bottom: 8px;
1387
+ max-height: 180px;
1388
+ overflow-y: auto;
1389
+ }
1390
+ .model-picks label {
1391
+ display: flex;
1392
+ align-items: center;
1393
+ gap: 8px;
1394
+ padding: 5px 10px;
1395
+ border-radius: 6px;
1396
+ font-size: 12.5px;
1397
+ cursor: pointer;
1398
+ font-family: Consolas, monospace;
1399
+ }
1400
+ .model-picks label:hover { background: var(--panel2); }
1401
+ .divider { border-top: 1px solid var(--border); margin: 20px 0 16px; }
1402
+ .prov-del {
1403
+ margin-left: 8px;
1404
+ border: none;
1405
+ background: none;
1406
+ color: var(--muted);
1407
+ cursor: pointer;
1408
+ font-size: 14px;
1409
+ padding: 2px 6px;
1410
+ border-radius: 5px;
1411
+ }
1412
+ .prov-del:hover { color: var(--err); background: rgba(19, 19, 21, 0.07); }
1413
+ .prov-url { color: var(--muted); font-size: 11.5px; font-family: Consolas, monospace; }
1414
+
1415
+ .skill-row {
1416
+ padding: 11px 13px;
1417
+ border: 1px solid var(--border);
1418
+ border-radius: 10px;
1419
+ margin-bottom: 8px;
1420
+ background: var(--panel);
1421
+ }
1422
+ .skill-name { font-weight: 700; font-size: 13.5px; color: var(--accent); }
1423
+ .skill-desc { color: var(--text); font-size: 12.5px; margin: 3px 0; }
1424
+ .skill-path { color: var(--muted); font-size: 11px; font-family: Consolas, monospace; word-break: break-all; }
1425
+
1426
+ /* ---------- rol modelleri ---------- */
1427
+ .role-row {
1428
+ display: flex;
1429
+ align-items: center;
1430
+ gap: 10px;
1431
+ margin-bottom: 10px;
1432
+ }
1433
+ .role-label {
1434
+ min-width: 110px;
1435
+ font-size: 13px;
1436
+ color: var(--text);
1437
+ opacity: 0.9;
1438
+ }
1439
+ .role-select {
1440
+ flex: 1;
1441
+ background: var(--panel2);
1442
+ color: var(--text);
1443
+ border: 1px solid var(--border);
1444
+ padding: 6px 8px;
1445
+ font-size: 13px;
1446
+ border-radius: 4px;
1447
+ }
1448
+ .role-select:focus {
1449
+ outline: none;
1450
+ border-color: var(--accent);
1451
+ }
1452
+
1453
+ #toast {
1454
+ position: fixed;
1455
+ bottom: 28px;
1456
+ left: 50%;
1457
+ transform: translateX(-50%) translateY(16px);
1458
+ opacity: 0;
1459
+ transition: all 0.25s ease;
1460
+ background: var(--text);
1461
+ color: var(--bg);
1462
+ padding: 9px 18px;
1463
+ border-radius: 999px;
1464
+ font-size: 13px;
1465
+ z-index: 99;
1466
+ pointer-events: none;
1467
+ }
1468
+ #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
1469
+
1470
+ /* ---- paralel ajanlar (#14 CEO) ---- */
1471
+ .agent-ceo-row { display: flex; justify-content: center; margin-bottom: 12px; }
1472
+ .agent-ceo-row label { font-size: 12.5px; color: var(--muted); cursor: pointer; }
1473
+ .agent-ceo-row input { accent-color: var(--accent); margin-right: 6px; }
1474
+ .agent-card {
1475
+ background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
1476
+ padding: 10px 12px; margin-bottom: 8px;
1477
+ }
1478
+ .agent-card.st-error { border-color: rgba(255, 90, 90, 0.45); }
1479
+ .agent-card.st-done { opacity: 0.75; }
1480
+ .ag-head { display: flex; align-items: center; gap: 8px; }
1481
+ .ag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
1482
+ .st-running .ag-dot { background: #f0b429; animation: agPulse 1.1s infinite; }
1483
+ .st-done .ag-dot { background: #43c463; }
1484
+ .st-error .ag-dot { background: #ff5a5a; }
1485
+ .st-aborted .ag-dot { background: var(--muted); }
1486
+ .st-queued .ag-dot { background: var(--muted); animation: agPulse 2.2s infinite; }
1487
+ @keyframes agPulse { 50% { opacity: 0.25; } }
1488
+ .ag-title { font-weight: 700; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1489
+ .ag-st { font-size: 11px; color: var(--muted); flex: none; }
1490
+ .ag-time { font-size: 11px; color: var(--muted); flex: none; }
1491
+ .ag-btn {
1492
+ border: none; background: var(--panel2); color: var(--text); font-size: 11px;
1493
+ padding: 3px 9px; border-radius: 7px; cursor: pointer; flex: none;
1494
+ }
1495
+ .ag-btn:hover { color: var(--accent); }
1496
+ .ag-task { margin-top: 6px; font-size: 12px; color: var(--text); word-break: break-word; }
1497
+ .ag-last { margin-top: 6px; font-size: 11.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1498
+ .ag-err { margin-top: 6px; font-size: 11.5px; color: #ff7676; word-break: break-word; }
1499
+ .ag-log {
1500
+ margin-top: 8px; max-height: 260px; overflow: auto; font-size: 11px; line-height: 1.5;
1501
+ background: var(--panel2); border-radius: 8px; padding: 8px; white-space: pre-wrap; word-break: break-word;
1502
+ }
1503
+
1504
+ /* ---------- sağ panel: paralel ajan işleri ---------- */
1505
+
1506
+ #rail {
1507
+ flex: none;
1508
+ width: 250px;
1509
+ min-width: 250px;
1510
+ background: var(--panel);
1511
+ border-left: 1px solid var(--border);
1512
+ display: flex;
1513
+ flex-direction: column;
1514
+ /* pencere kontrolleri (– □ ×) 46px'lik alana oturur; altından başla */
1515
+ padding-top: 46px;
1516
+ }
1517
+
1518
+ #railHead {
1519
+ padding: 12px 16px 10px;
1520
+ font-weight: 800;
1521
+ letter-spacing: 1px;
1522
+ font-size: 13px;
1523
+ color: var(--text);
1524
+ text-align: center;
1525
+ }
1526
+
1527
+ #railList { flex: 1; overflow-y: auto; padding: 4px 8px; }
1528
+
1529
+ .rail-empty {
1530
+ color: var(--muted);
1531
+ font-size: 11.5px;
1532
+ text-align: center;
1533
+ padding: 18px 10px;
1534
+ line-height: 1.5;
1535
+ }
1536
+
1537
+ .rj {
1538
+ display: flex;
1539
+ flex-direction: column;
1540
+ gap: 4px;
1541
+ padding: 7px 9px;
1542
+ border-radius: 7px;
1543
+ cursor: pointer;
1544
+ color: var(--muted);
1545
+ margin-bottom: 2px;
1546
+ }
1547
+ .rj:hover { background: var(--panel2); color: var(--text); }
1548
+ .rj.open { background: var(--panel2); color: var(--text); }
1549
+ .rj-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
1550
+ .rj .sess-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
1551
+ .rj-time { font-size: 10.5px; color: var(--muted); flex: none; }
1552
+ .rj.st-done .rj-time { color: #43c463; font-weight: 700; }
1553
+ .rj-cancel {
1554
+ visibility: hidden;
1555
+ border: none; background: none; color: var(--muted);
1556
+ cursor: pointer; font-size: 13px; padding: 0 3px; border-radius: 4px;
1557
+ }
1558
+ .rj:hover .rj-cancel { visibility: visible; }
1559
+ .rj-cancel:hover { color: var(--err); }
1560
+ .rj-last { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1561
+ .rj-body {
1562
+ display: flex; flex-direction: column; gap: 6px;
1563
+ font-size: 12px; color: var(--text);
1564
+ word-break: break-word;
1565
+ }
1566
+ .rj-chat {
1567
+ max-height: 340px; overflow: auto; font-size: 11px; line-height: 1.55;
1568
+ background: var(--panel2); border-radius: 8px; padding: 8px;
1569
+ white-space: pre-wrap; word-break: break-word;
1570
+ }
1571
+
1572
+ #sideFoot2 {
1573
+ padding: 8px 10px;
1574
+ color: var(--muted);
1575
+ font-size: 11px;
1576
+ border-top: 1px solid var(--border);
1577
+ display: flex;
1578
+ align-items: center;
1579
+ justify-content: center;
1580
+ }
1581
+ .foot-label2 {
1582
+ letter-spacing: 0.5px;
1583
+ }
1584
+
1585
+ /* ---------- BOT SİSTEMİ (sol panel alt bölümü + bot sayfası) ---------- */
1586
+
1587
+ /* üst bardaki aktif bot rozeti */
1588
+ #botChip {
1589
+ flex: none;
1590
+ font-size: 12px;
1591
+ font-weight: 800;
1592
+ letter-spacing: 0.3px;
1593
+ color: var(--text);
1594
+ background: var(--panel2);
1595
+ border: 1px solid var(--border);
1596
+ border-radius: 8px;
1597
+ padding: 4px 10px;
1598
+ margin-right: 4px;
1599
+ cursor: pointer;
1600
+ user-select: none;
1601
+ white-space: nowrap;
1602
+ }
1603
+ #botChip:hover { border-color: var(--accent); }
1604
+
1605
+ #botBar {
1606
+ flex: none;
1607
+ max-height: 45%;
1608
+ display: flex;
1609
+ flex-direction: column;
1610
+ border-top: 1px solid var(--border);
1611
+ padding: 6px 8px 6px;
1612
+ }
1613
+ #botBarHead {
1614
+ display: flex;
1615
+ align-items: center;
1616
+ justify-content: space-between;
1617
+ padding: 2px 2px 6px;
1618
+ font-size: 10.5px;
1619
+ font-weight: 800;
1620
+ letter-spacing: 1.5px;
924
1621
  color: var(--muted);
925
1622
  }
926
- #micBtn:hover { background: var(--panel); color: var(--accent); }
927
- #micBtn.rec { color: #e5484d; animation: mic-pulse 1.2s ease-in-out infinite; }
928
- @keyframes mic-pulse { 50% { opacity: .45; } }
929
-
930
- #input {
931
- flex: 1;
932
- background: none;
933
- border: none;
934
- outline: none;
935
- resize: none;
936
- color: var(--text);
937
- font-family: inherit;
938
- font-size: 14px;
939
- line-height: 1.45;
940
- max-height: 180px;
941
- padding: 5px 2px;
942
- }
943
- #input::placeholder { color: var(--muted); }
944
-
945
- #sendBtn, #stopBtn {
946
- width: 34px; height: 34px;
947
- border-radius: 9px;
948
- border: none;
949
- cursor: pointer;
950
- font-size: 14px;
951
- flex-shrink: 0;
952
- }
953
- #sendBtn { background: var(--accent); color: var(--accent-contrast); font-weight: 800; }
954
- #sendBtn:disabled { background: var(--border); color: var(--muted); cursor: default; }
955
- #stopBtn { background: rgba(19, 19, 21, 0.06); color: var(--err); border: 1px solid rgba(19, 19, 21, 0.35); }
956
-
957
- ::-webkit-scrollbar { width: 10px; }
958
- ::-webkit-scrollbar-thumb { background: #cfc9bf; border-radius: 6px; border: 2px solid var(--bg); }
959
- ::-webkit-scrollbar-thumb:hover { background: #b0b0b6; }
960
-
961
- /* ---------- setup wizard ---------- */
962
- #setupOverlay {
963
- position: fixed;
964
- inset: 0;
965
- background: rgba(10, 10, 12, 0.55);
966
- display: flex;
967
- align-items: center;
968
- justify-content: center;
969
- z-index: 90;
970
- }
971
- #setupDialog {
972
- width: min(460px, 92vw);
973
- max-height: 86vh;
974
- overflow-y: auto;
975
- background: var(--panel);
976
- border: 1px solid var(--border);
977
- border-radius: 16px;
978
- padding: 18px 20px;
979
- }
980
- .s-step h3 { margin: 14px 0 6px; font-size: 14px; }
981
- .s-step .inp { margin: 6px 0; }
982
-
983
- /* ---------- settings ---------- */
984
-
985
- #settingsOverlay {
986
- position: fixed;
987
- inset: 0;
988
- background: rgba(36, 41, 47, 0.45);
1623
+ .bot-bar-btns { display: flex; gap: 4px; }
1624
+ .bot-bar-btns button {
1625
+ border: none; background: none; color: var(--muted);
1626
+ font-size: 13px; font-weight: 700; cursor: pointer;
1627
+ padding: 1px 7px; border-radius: 6px; line-height: 1.4;
1628
+ }
1629
+ .bot-bar-btns button:hover { background: var(--panel2); color: var(--text); }
1630
+ #botList { overflow-y: auto; }
1631
+ .bot-card {
989
1632
  display: flex;
990
1633
  align-items: center;
991
- justify-content: center;
992
- z-index: 50;
1634
+ gap: 8px;
1635
+ padding: 6px 8px;
1636
+ border-radius: 8px;
1637
+ cursor: pointer;
1638
+ margin-bottom: 2px;
1639
+ color: var(--muted);
1640
+ }
1641
+ .bot-card:hover { background: var(--panel2); color: var(--text); }
1642
+ .bot-card.active { background: var(--panel2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
1643
+ .bot-card .bot-ico { font-size: 16px; line-height: 1; flex-shrink: 0; }
1644
+ .bot-card .bot-gear {
1645
+ visibility: hidden;
1646
+ color: var(--muted);
1647
+ font-size: 12px;
1648
+ cursor: pointer;
1649
+ padding: 0 3px;
1650
+ border-radius: 4px;
1651
+ flex-shrink: 0;
1652
+ }
1653
+ .bot-card:hover .bot-gear { visibility: visible; }
1654
+ .bot-card .bot-gear:hover { color: var(--text); background: rgba(128, 128, 128, 0.18); }
1655
+ .bot-card .bot-nm {
1656
+ flex: 1;
1657
+ font-size: 13px;
1658
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
1659
+ color: var(--text);
1660
+ }
1661
+ .bot-card .bot-tag {
1662
+ font-size: 9.5px;
1663
+ font-weight: 800;
1664
+ letter-spacing: 0.5px;
1665
+ border: 1px solid var(--border);
1666
+ border-radius: 5px;
1667
+ padding: 1px 5px;
1668
+ color: var(--muted);
1669
+ flex-shrink: 0;
993
1670
  }
994
1671
 
995
- /* #22 mini modallar (izleyiciler / cron) — ayarlar modalı tasarımında */
996
- .mini-overlay {
1672
+ /* tek tıkla model (OpenCode Zen) hero butonu */
1673
+ .zen-hero {
1674
+ padding: 10px 12px;
1675
+ border: 1px dashed var(--border);
1676
+ border-radius: 10px;
1677
+ margin-bottom: 12px;
1678
+ background: var(--panel);
1679
+ }
1680
+ .zen-hero .btn { min-width: 220px; }
1681
+
1682
+ /* bot sayfası overlay */
1683
+ #botOverlay {
997
1684
  position: fixed;
998
1685
  inset: 0;
999
1686
  background: rgba(36, 41, 47, 0.45);
@@ -1002,11 +1689,11 @@ body.term-open #settingsOverlay { right: var(--tw, 520px); }
1002
1689
  justify-content: center;
1003
1690
  z-index: 55;
1004
1691
  }
1005
- .mini-overlay[hidden] { display: none; }
1006
- body.browser-open .mini-overlay { right: var(--bw, 480px); }
1007
- .mini-dialog {
1008
- width: min(560px, 90vw);
1009
- height: min(560px, 84vh);
1692
+ #botOverlay[hidden] { display: none; }
1693
+ body.browser-open #botOverlay { right: var(--bw, 480px); }
1694
+ #botDialog {
1695
+ width: min(1080px, 94vw);
1696
+ height: min(720px, 90vh);
1010
1697
  background: var(--bg);
1011
1698
  border: 1px solid var(--border);
1012
1699
  border-radius: 14px;
@@ -1015,567 +1702,399 @@ body.browser-open .mini-overlay { right: var(--bw, 480px); }
1015
1702
  overflow: hidden;
1016
1703
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
1017
1704
  }
1018
- .mini-head {
1705
+ #botHead {
1019
1706
  display: flex;
1020
1707
  align-items: center;
1021
- justify-content: space-between;
1708
+ gap: 10px;
1022
1709
  padding: 12px 16px;
1023
1710
  border-bottom: 1px solid var(--border);
1024
1711
  }
1025
- .mini-title { font-weight: 800; letter-spacing: 0.5px; font-size: 14px; }
1026
- .mini-close {
1027
- border: none; background: none; color: var(--muted);
1028
- font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px;
1029
- }
1030
- .mini-close:hover { color: var(--text); background: var(--panel2); }
1031
- .mini-body { padding: 12px 16px 14px; overflow-y: auto; }
1032
- .mini-list { display: flex; flex-direction: column; gap: 6px; }
1033
- .mini-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 18px 0; }
1034
- .mini-row {
1035
- display: flex; align-items: center; gap: 10px;
1036
- background: var(--panel); border: 1px solid var(--border);
1037
- border-radius: 9px; padding: 8px 10px;
1038
- }
1039
- .mini-row:hover { background: var(--panel2); }
1040
- .mini-row.off .mr-name, .mini-row.off .mr-meta { opacity: 0.45; }
1041
- .mr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
1042
- .mini-row.off .mr-dot { background: var(--muted); }
1043
- .mr-main { flex: 1; min-width: 0; }
1044
- .mr-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1045
- .mr-meta { color: var(--muted); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1046
- .mr-meta b { color: var(--text); font-weight: 600; }
1047
- .mr-btn {
1048
- border: none; background: var(--panel2); color: var(--text);
1049
- font-size: 12px; padding: 4px 8px; border-radius: 7px; cursor: pointer; flex: none;
1712
+ #botHeadIcon { font-size: 22px; line-height: 1; }
1713
+ #botHeadName { font-weight: 800; font-size: 16px; letter-spacing: 0.3px; }
1714
+ #botHeadTag {
1715
+ font-size: 10px;
1716
+ font-weight: 800;
1717
+ letter-spacing: 0.5px;
1718
+ border: 1px solid var(--border);
1719
+ border-radius: 5px;
1720
+ padding: 2px 7px;
1721
+ color: var(--muted);
1050
1722
  }
1051
- .mr-btn:hover { color: var(--accent); }
1052
- .mr-btn.del:hover { color: var(--err); }
1723
+ .bot-head-spacer { flex: 1; }
1724
+ #botBody { flex: 1; display: flex; min-height: 0; }
1053
1725
 
1054
- /* #26 ajan dosya kartı */
1055
- .file-card {
1726
+ /* sol yarı: o botun sohbet geçmişi */
1727
+ #botChatsCol {
1728
+ width: 320px;
1729
+ flex: none;
1730
+ border-right: 1px solid var(--border);
1056
1731
  display: flex;
1057
- align-items: center;
1058
- gap: 10px;
1059
- background: var(--panel);
1060
- border: 1px solid var(--border);
1061
- border-radius: 12px;
1062
- padding: 10px 12px;
1063
- margin: 6px 0;
1064
- max-width: 78%;
1732
+ flex-direction: column;
1733
+ min-height: 0;
1065
1734
  }
1066
- .fc-icon { font-size: 22px; flex: none; }
1067
- .fc-main { flex: 1; min-width: 0; }
1068
- .fc-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1069
- .fc-cap { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
1070
- .fc-btns { display: flex; gap: 6px; flex: none; }
1071
- #settingsOverlay[hidden] { display: none; }
1072
-
1073
- /* tarayıcı açıkken diyalogu görünür alana ortala */
1074
- body.browser-open #settingsOverlay { right: var(--bw, 480px); }
1075
- body.browser-open #settingsDialog { width: min(70vw, calc(100vw - var(--bw, 480px) - 48px)); }
1076
- /* toast'ı da görünür alanın ortasına kaydır */
1077
- body.browser-open #toast { left: calc((100vw - var(--bw, 480px)) / 2); }
1078
-
1079
- #settingsDialog {
1080
- width: 70vw;
1081
- height: 70vh;
1082
- background: var(--bg);
1083
- border: 1px solid var(--border);
1084
- border-radius: 14px;
1085
- display: flex;
1086
- overflow: hidden;
1087
- box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
1088
- }
1089
-
1090
- #setTabs {
1091
- width: 190px;
1092
- min-width: 190px;
1093
- background: var(--panel);
1094
- border-right: 1px solid var(--border);
1095
- display: flex;
1096
- flex-direction: column;
1097
- padding: 16px 10px 12px;
1098
- }
1099
- .set-tabs-title {
1100
- font-size: 11px;
1101
- letter-spacing: 2px;
1735
+ #botChatsTitle {
1736
+ padding: 10px 14px 6px;
1737
+ font-size: 10.5px;
1738
+ font-weight: 800;
1739
+ letter-spacing: 1.2px;
1102
1740
  color: var(--muted);
1103
- padding: 0 12px 10px;
1104
1741
  }
1105
- /* sekme listesi: küçük ekranda taşarsa içeride kayar — alt kısım (Beast Kodu + Kapat) sabit kalır */
1106
- .set-tabs-list {
1742
+ #botChatList { overflow-y: auto; padding: 0 8px; max-height: 38%; flex: none; }
1743
+ .bot-chat-row {
1107
1744
  display: flex;
1108
- flex-direction: column;
1109
- align-items: stretch;
1110
- flex: 1 1 auto;
1111
- min-height: 0;
1112
- overflow-y: auto;
1113
- padding-right: 2px;
1114
- margin: 0 -2px;
1115
- scrollbar-width: thin;
1116
- scrollbar-color: var(--border) transparent;
1745
+ align-items: center;
1746
+ gap: 7px;
1747
+ padding: 6px 8px;
1748
+ border-radius: 7px;
1749
+ cursor: pointer;
1750
+ color: var(--muted);
1751
+ font-size: 12.5px;
1752
+ margin-bottom: 2px;
1117
1753
  }
1118
- .set-tabs-list::-webkit-scrollbar { width: 8px; }
1119
- .set-tabs-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
1120
- .set-tabs-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }
1121
- .set-tabs-list::-webkit-scrollbar-track { background: transparent; }
1122
- @media (max-height: 860px) {
1123
- #setTabs { padding: 10px 8px; }
1124
- .set-tabs-title { padding: 0 12px 6px; }
1125
- #setTabs .tab { padding: 6px 12px; font-size: 12.5px; margin-bottom: 1px; }
1126
- }
1127
- #setTabs .tab {
1128
- text-align: left;
1129
- padding: 9px 12px;
1130
- border-radius: 8px;
1131
- border: none;
1132
- background: none;
1133
- color: var(--muted);
1134
- font-size: 13.5px;
1135
- cursor: pointer;
1136
- margin-bottom: 2px;
1137
- }
1138
- #setTabs .tab:hover { background: var(--panel2); color: var(--text); }
1139
- #setTabs .tab.active { background: var(--accent-dim); color: var(--accent); font-weight: 700; }
1140
- .set-tabs-foot { margin-top: auto; }
1141
- .beast-code {
1142
- border: 1px solid var(--border);
1143
- border-radius: 8px;
1144
- padding: 4px 8px;
1145
- margin-bottom: 8px;
1146
- background: var(--panel2);
1754
+ .bot-chat-row:hover { background: var(--panel2); color: var(--text); }
1755
+ .bot-chat-row.active { background: var(--panel2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
1756
+ .bot-chat-row .bt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1757
+ #botChatMsgs { flex: 1; overflow-y: auto; padding: 10px 14px; border-top: 1px solid var(--border); }
1758
+ .bot-msg { margin-bottom: 8px; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
1759
+ .bot-msg .who { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: var(--muted); display: block; }
1760
+ .bot-msg.user .who { color: var(--text); }
1761
+ .bot-msg.user { background: var(--panel); border-radius: 8px; padding: 6px 9px; }
1762
+ .bot-msg.asst { color: var(--text); }
1763
+
1764
+ /* sağ yarı: bot mantığı (sekmeli) */
1765
+ #botManageCol { flex: 1; display: flex; flex-direction: column; min-height: 0; }
1766
+ #botTabs {
1767
+ display: flex;
1768
+ gap: 2px;
1769
+ padding: 8px 12px 0;
1770
+ border-bottom: 1px solid var(--border);
1771
+ flex-wrap: wrap;
1147
1772
  }
1148
- .bc-row { display: flex; align-items: center; gap: 6px; }
1149
- .bc-value {
1150
- flex: 1;
1151
- font-family: var(--mono, monospace);
1152
- font-size: 12px;
1153
- letter-spacing: 1px;
1773
+ .btab {
1774
+ border: none;
1775
+ background: none;
1154
1776
  color: var(--muted);
1155
- user-select: all;
1156
- overflow: hidden;
1157
- text-overflow: ellipsis;
1158
- white-space: nowrap;
1777
+ font-size: 12px;
1778
+ font-weight: 700;
1779
+ padding: 7px 11px;
1780
+ cursor: pointer;
1781
+ border-radius: 7px 7px 0 0;
1782
+ border-bottom: 2px solid transparent;
1159
1783
  }
1160
- .bc-copy {
1161
- flex: none;
1162
- padding: 3px 8px;
1163
- font-size: 11px;
1164
- border-radius: 6px;
1784
+ .btab:hover { color: var(--text); }
1785
+ .btab.active { color: var(--text); border-bottom-color: var(--accent); }
1786
+ #botPane { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }
1787
+ .bot-form label.mem-label { display: block; margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
1788
+ .bot-form label.mem-label:first-child { margin-top: 0; }
1789
+ .bot-form .inp, .bot-form select, .bot-form textarea {
1790
+ width: 100%;
1791
+ background: var(--panel);
1792
+ border: 1px solid var(--border);
1793
+ border-radius: 7px;
1794
+ color: var(--text);
1795
+ padding: 7px 9px;
1796
+ font-size: 13px;
1797
+ font-family: inherit;
1798
+ }
1799
+ .bot-form textarea { resize: vertical; }
1800
+ .bot-form textarea.monospace { font-family: Consolas, monospace; font-size: 12px; }
1801
+ .bot-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
1802
+ .bot-checks label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }
1803
+ .bot-num-row {
1804
+ display: flex;
1805
+ align-items: center;
1806
+ gap: 8px;
1807
+ background: var(--panel);
1165
1808
  border: 1px solid var(--border);
1809
+ border-radius: 7px;
1810
+ padding: 5px 9px;
1811
+ margin-bottom: 5px;
1812
+ font-size: 12.5px;
1813
+ }
1814
+ .bot-num-row .n { flex: 1; }
1815
+ .bot-num-row .x { cursor: pointer; color: var(--muted); padding: 0 4px; border-radius: 4px; }
1816
+ .bot-num-row .x:hover { color: var(--err); background: var(--panel2); }
1817
+ .icon-pick { display: flex; flex-wrap: wrap; gap: 4px; }
1818
+ .icon-pick button {
1819
+ font-size: 17px;
1820
+ border: 1px solid transparent;
1166
1821
  background: none;
1167
- color: var(--muted);
1822
+ border-radius: 7px;
1823
+ padding: 3px 7px;
1168
1824
  cursor: pointer;
1169
1825
  }
1170
- .bc-copy:hover { color: var(--text); background: var(--panel); }
1171
- #setClose {
1172
- width: 100%;
1173
- padding: 8px;
1174
- border-radius: 8px;
1175
- border: 1px solid var(--border);
1176
- background: none;
1177
- color: var(--muted);
1178
- cursor: pointer;
1179
- font-size: 13px;
1180
- }
1181
- #setClose:hover { color: var(--err); border-color: var(--err); background: rgba(19, 19, 21, 0.05); }
1182
-
1183
- #setContent { flex: 1; overflow-y: auto; padding: 22px 26px; }
1184
- .pane {
1185
- max-width: 620px;
1186
- margin: 0 auto;
1187
- display: flex;
1188
- flex-direction: column;
1189
- align-items: center;
1190
- }
1191
- .pane[hidden] { display: none; }
1192
- .pane > * { width: 100%; }
1193
- .pane h2, .pane .sub, .pane .mem-label, .pane .divider { text-align: center; }
1194
- .pane h2 { font-size: 17px; margin-bottom: 4px; }
1195
- .pane .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 16px; }
1196
- .chips-inline { display: flex; flex-wrap: wrap; margin-bottom: 4px; }
1197
-
1198
- .prov-row {
1199
- display: flex;
1200
- align-items: center;
1201
- gap: 10px;
1202
- padding: 10px 13px;
1203
- border: 1px solid var(--border);
1204
- border-radius: 10px;
1205
- margin-bottom: 8px;
1206
- cursor: pointer;
1207
- background: var(--panel);
1208
- }
1209
- .prov-row:hover { border-color: var(--accent); }
1210
- .prov-row.active { border-color: var(--accent); background: var(--accent-dim); }
1211
- .prov-name { font-weight: 700; font-size: 13px; }
1212
- .prov-model { color: var(--muted); font-size: 12px; font-family: Consolas, monospace; }
1213
- .check { margin-left: auto; color: var(--accent); font-weight: 800; visibility: hidden; }
1214
- .prov-row.active .check { visibility: visible; }
1826
+ .icon-pick button:hover { background: var(--panel2); }
1827
+ .icon-pick button.on { border-color: var(--accent); background: var(--panel); }
1828
+ .bot-log { font-family: Consolas, monospace; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; color: var(--muted); }
1829
+ .bot-stat-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
1830
+ .bot-stat {
1831
+ flex: 1 1 130px;
1832
+ background: var(--panel);
1833
+ border: 1px solid var(--border);
1834
+ border-radius: 9px;
1835
+ padding: 10px 12px;
1836
+ }
1837
+ .bot-stat .v { font-size: 20px; font-weight: 800; }
1838
+ .bot-stat .k { font-size: 11px; color: var(--muted); margin-top: 2px; }
1839
+ .bot-plugin-row {
1840
+ display: flex; align-items: center; gap: 8px;
1841
+ background: var(--panel); border: 1px solid var(--border);
1842
+ border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; font-size: 12.5px;
1843
+ }
1844
+ .bot-ov-row {
1845
+ display: flex; align-items: center; gap: 10px;
1846
+ padding: 9px 10px; border: 1px solid var(--border);
1847
+ border-radius: 9px; margin-bottom: 6px; background: var(--panel);
1848
+ cursor: pointer;
1849
+ }
1850
+ .bot-ov-row:hover { background: var(--panel2); }
1851
+ .bot-ov-row .ico { font-size: 18px; }
1852
+ .bot-ov-row .nm { font-weight: 700; flex: 1; }
1853
+ .bot-ov-row .m { font-size: 11.5px; color: var(--muted); }
1854
+ .bot-ov-total {
1855
+ display: flex; gap: 10px; margin-top: 10px; padding-top: 10px;
1856
+ border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--muted); flex-wrap: wrap;
1857
+ }
1215
1858
 
1216
- .mem-area {
1217
- width: 100%;
1218
- min-height: 170px;
1219
- resize: vertical;
1220
- background: var(--panel);
1221
- border: 1px solid var(--border);
1222
- border-radius: 10px;
1223
- color: var(--text);
1224
- font-family: Consolas, "Cascadia Mono", monospace;
1225
- font-size: 12.5px;
1226
- line-height: 1.5;
1227
- padding: 10px 12px;
1228
- outline: none;
1229
- }
1230
- .mem-area:focus { border-color: var(--accent); }
1231
- .mem-area.soul-area { min-height: 220px; }
1232
- .mem-label { font-weight: 700; font-size: 13px; margin: 14px 0 6px; display: block; }
1233
- .btn {
1234
- padding: 7px 16px;
1235
- border-radius: 8px;
1236
- border: none;
1237
- background: var(--accent);
1238
- color: var(--accent-contrast);
1239
- font-weight: 700;
1240
- cursor: pointer;
1241
- font-size: 13px;
1242
- margin-top: 10px;
1243
- }
1244
- .btn:hover { filter: brightness(1.08); }
1245
- .btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
1246
1859
 
1247
- .inp {
1248
- width: 100%;
1249
- padding: 8px 11px;
1250
- border: 1px solid var(--border);
1251
- border-radius: 8px;
1252
- background: var(--panel);
1253
- color: var(--text);
1254
- font-size: 13px;
1255
- outline: none;
1256
- margin-bottom: 8px;
1257
- }
1258
- .inp:focus { border-color: var(--accent); }
1259
- .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
1860
+ /* ---------- SKILLS STORE ---------- */
1260
1861
 
1261
- /* ---------------- ☢ Fallout ---------------- */
1262
- .fo-toggles {
1862
+ #storeOverlay {
1863
+ position: fixed;
1864
+ inset: 0;
1865
+ background: rgba(36, 41, 47, 0.45);
1263
1866
  display: flex;
1264
1867
  align-items: center;
1265
1868
  justify-content: center;
1266
- gap: 18px;
1267
- flex-wrap: wrap;
1268
- margin-bottom: 16px;
1269
- }
1270
- .fo-toggles .lock-row { margin: 0; }
1271
- .fo-count {
1272
- color: var(--muted);
1273
- font-size: 12px;
1274
- font-weight: 700;
1275
- border: 1px solid var(--border);
1276
- border-radius: 999px;
1277
- padding: 3px 10px;
1278
- }
1279
- /* ---------- maliyet (sade) ---------- */
1280
- .usage-cards {
1281
- display: grid;
1282
- grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
1283
- gap: 8px;
1284
- margin-top: 10px;
1869
+ z-index: 56;
1285
1870
  }
1286
- .usage-stat {
1871
+ #storeOverlay[hidden] { display: none; }
1872
+ body.browser-open #storeOverlay { right: var(--bw, 480px); }
1873
+ #storeDialog {
1874
+ width: 70vw;
1875
+ height: 70vh;
1876
+ background: var(--bg);
1287
1877
  border: 1px solid var(--border);
1288
- border-radius: 10px;
1289
- padding: 10px 12px;
1290
- }
1291
- .usage-stat .us-label {
1292
- color: var(--muted);
1293
- font-size: 11px;
1294
- text-transform: uppercase;
1295
- letter-spacing: 0.04em;
1296
- margin-bottom: 3px;
1297
- }
1298
- .usage-stat .us-value {
1299
- font-size: 15px;
1300
- font-weight: 700;
1301
- }
1302
- #tab-usage h3 {
1303
- margin: 14px 0 6px;
1304
- font-size: 12.5px;
1305
- color: var(--muted);
1878
+ border-radius: 14px;
1879
+ display: flex;
1880
+ flex-direction: column;
1881
+ overflow: hidden;
1882
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
1306
1883
  }
1307
- .usage-row {
1884
+ #storeHead {
1308
1885
  display: flex;
1309
- align-items: baseline;
1886
+ align-items: center;
1310
1887
  gap: 10px;
1311
- padding: 6px 0;
1888
+ padding: 14px 18px;
1312
1889
  border-bottom: 1px solid var(--border);
1313
1890
  }
1314
- .usage-row .ur-model { font-weight: 700; }
1315
- .usage-row .ur-meta {
1891
+ #storeTitle { font-size: 13px; letter-spacing: 2.5px; font-weight: 800; }
1892
+ #storeBeastId {
1893
+ font-family: var(--mono, monospace);
1894
+ font-size: 11px;
1316
1895
  color: var(--muted);
1317
- font-size: 12px;
1318
- flex: 1;
1896
+ border: 1px solid var(--border);
1897
+ border-radius: 6px;
1898
+ padding: 2px 8px;
1899
+ background: var(--panel2);
1900
+ user-select: all;
1319
1901
  }
1320
- .usage-row .ur-cost { font-weight: 700; font-size: 12.5px; }
1321
- .usage-row.dash-active { background: var(--accent-dim); border-radius: 6px; }
1322
- #tab-dash .usage-row { align-items: center; }
1323
- #tab-dash .usage-row .ur-meta { flex: none; }
1324
- .usage-row .sess-code {
1325
- flex: none;
1326
- font-size: 11px;
1902
+ .store-spacer { flex: 1; }
1903
+ #storeTabs {
1904
+ display: flex;
1905
+ padding: 10px 18px 0;
1906
+ border-bottom: 1px solid var(--border);
1907
+ }
1908
+ /* 3 sekme: kalan genişlik tam 3 eşit parçaya bölünür */
1909
+ #storeTabs .stab {
1910
+ flex: 1 1 0;
1911
+ min-width: 0;
1912
+ text-align: center;
1913
+ padding: 8px 0;
1914
+ border: none;
1915
+ border-radius: 9px 9px 0 0;
1916
+ background: none;
1327
1917
  color: var(--muted);
1328
- border: 1px solid var(--border);
1329
- border-radius: 4px;
1330
- padding: 1px 5px;
1331
- }
1332
- .usage-empty {
1333
- color: var(--muted);
1334
- font-size: 12.5px;
1335
- padding: 8px 0;
1918
+ font-size: 13px;
1919
+ cursor: pointer;
1920
+ }
1921
+ #storeTabs .stab:hover { color: var(--text); background: var(--panel2); }
1922
+ #storeTabs .stab.active { background: var(--accent-dim); color: var(--accent); font-weight: 700; }
1923
+ /* tüm sekme içerikleri ortalanır */
1924
+ #storePane {
1925
+ flex: 1;
1926
+ overflow-y: auto;
1927
+ padding: 16px 18px;
1928
+ display: flex;
1929
+ flex-direction: column;
1930
+ align-items: center;
1931
+ }
1932
+ #storePane .store-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; text-align: center; width: 100%; }
1933
+ .store-grid {
1934
+ display: grid;
1935
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
1936
+ gap: 10px;
1937
+ width: 100%;
1938
+ max-width: 980px;
1336
1939
  }
1337
- .fo-slot {
1338
- display: grid;
1339
- grid-template-columns: 34px minmax(110px, 1fr) minmax(140px, 1.3fr) minmax(120px, 1fr) auto auto;
1340
- gap: 8px;
1341
- align-items: center;
1342
- padding: 9px 10px;
1940
+ .store-card {
1343
1941
  border: 1px solid var(--border);
1344
- border-radius: 10px;
1942
+ border-radius: 11px;
1345
1943
  background: var(--panel);
1346
- margin-bottom: 7px;
1944
+ padding: 12px 13px;
1945
+ display: flex;
1946
+ flex-direction: column;
1947
+ gap: 7px;
1347
1948
  }
1348
- .fo-slot.filled { border-color: var(--accent); }
1349
- .fo-badge {
1350
- display: inline-flex;
1351
- align-items: center;
1352
- justify-content: center;
1353
- width: 28px;
1354
- height: 28px;
1355
- border-radius: 50%;
1356
- font-weight: 800;
1357
- font-size: 12px;
1949
+ .store-card-top { display: flex; align-items: center; gap: 9px; }
1950
+ .store-avatar {
1951
+ width: 34px; height: 34px; flex: none;
1952
+ display: flex; align-items: center; justify-content: center;
1953
+ font-size: 19px;
1954
+ border-radius: 9px;
1358
1955
  background: var(--panel2);
1359
1956
  border: 1px solid var(--border);
1360
- color: var(--muted);
1361
- }
1362
- .fo-slot.filled .fo-badge {
1363
- background: var(--accent-dim);
1364
- border-color: var(--accent);
1365
- color: var(--accent);
1366
1957
  }
1367
- .fo-slot .inp { margin-bottom: 0; }
1368
- .fo-slot select.inp { cursor: pointer; }
1369
- .fo-save { margin-top: 0; white-space: nowrap; }
1370
- .fo-clear {
1371
- background: none;
1372
- border: none;
1958
+ .store-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1959
+ .store-ver { font-size: 10.5px; color: var(--muted); }
1960
+ .store-author { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); min-width: 0; }
1961
+ .store-author .sa-avatar { font-size: 13px; }
1962
+ .store-author .sa-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1963
+ .store-author .sa-beast { font-family: var(--mono, monospace); font-size: 10px; }
1964
+ .store-desc {
1965
+ font-size: 12px;
1373
1966
  color: var(--muted);
1374
- font-size: 13px;
1375
- cursor: pointer;
1376
- padding: 4px 6px;
1377
- }
1378
- .fo-clear:hover { color: #e05252; }
1379
- .model-picks {
1380
- border: 1px solid var(--border);
1381
- border-radius: 10px;
1382
- background: var(--panel);
1383
- padding: 8px 4px;
1384
- margin-bottom: 8px;
1385
- max-height: 180px;
1386
- overflow-y: auto;
1387
- }
1388
- .model-picks label {
1389
- display: flex;
1390
- align-items: center;
1391
- gap: 8px;
1392
- padding: 5px 10px;
1393
- border-radius: 6px;
1394
- font-size: 12.5px;
1395
- cursor: pointer;
1396
- font-family: Consolas, monospace;
1967
+ line-height: 1.45;
1968
+ min-height: 34px;
1969
+ display: -webkit-box;
1970
+ -webkit-line-clamp: 2;
1971
+ -webkit-box-orient: vertical;
1972
+ overflow: hidden;
1397
1973
  }
1398
- .model-picks label:hover { background: var(--panel2); }
1399
- .divider { border-top: 1px solid var(--border); margin: 20px 0 16px; }
1400
- .prov-del {
1401
- margin-left: 8px;
1402
- border: none;
1403
- background: none;
1974
+ .store-tags { display: flex; gap: 5px; flex-wrap: wrap; }
1975
+ .store-tag {
1976
+ font-size: 10px;
1404
1977
  color: var(--muted);
1405
- cursor: pointer;
1406
- font-size: 14px;
1407
- padding: 2px 6px;
1408
- border-radius: 5px;
1409
- }
1410
- .prov-del:hover { color: var(--err); background: rgba(19, 19, 21, 0.07); }
1411
- .prov-url { color: var(--muted); font-size: 11.5px; font-family: Consolas, monospace; }
1412
-
1413
- .skill-row {
1414
- padding: 11px 13px;
1415
1978
  border: 1px solid var(--border);
1416
- border-radius: 10px;
1417
- margin-bottom: 8px;
1418
- background: var(--panel);
1419
- }
1420
- .skill-name { font-weight: 700; font-size: 13.5px; color: var(--accent); }
1421
- .skill-desc { color: var(--text); font-size: 12.5px; margin: 3px 0; }
1422
- .skill-path { color: var(--muted); font-size: 11px; font-family: Consolas, monospace; word-break: break-all; }
1423
-
1424
- /* ---------- rol modelleri ---------- */
1425
- .role-row {
1426
- display: flex;
1427
- align-items: center;
1428
- gap: 10px;
1429
- margin-bottom: 10px;
1430
- }
1431
- .role-label {
1432
- min-width: 110px;
1433
- font-size: 13px;
1434
- color: var(--text);
1435
- opacity: 0.9;
1436
- }
1437
- .role-select {
1438
- flex: 1;
1979
+ border-radius: 20px;
1980
+ padding: 1px 8px;
1439
1981
  background: var(--panel2);
1440
- color: var(--text);
1441
- border: 1px solid var(--border);
1442
- padding: 6px 8px;
1443
- font-size: 13px;
1444
- border-radius: 4px;
1445
1982
  }
1446
- .role-select:focus {
1447
- outline: none;
1448
- border-color: var(--accent);
1983
+ .store-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
1984
+ .store-stats { font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; }
1985
+ .store-like {
1986
+ border: none; background: none; cursor: pointer;
1987
+ color: var(--muted); font-size: 12.5px; padding: 2px 6px; border-radius: 6px;
1449
1988
  }
1450
-
1451
- #toast {
1452
- position: fixed;
1453
- bottom: 28px;
1454
- left: 50%;
1455
- transform: translateX(-50%) translateY(16px);
1456
- opacity: 0;
1457
- transition: all 0.25s ease;
1458
- background: var(--text);
1459
- color: var(--bg);
1460
- padding: 9px 18px;
1461
- border-radius: 999px;
1462
- font-size: 13px;
1463
- z-index: 99;
1464
- pointer-events: none;
1989
+ .store-like:hover { background: var(--panel2); }
1990
+ .store-like.liked { color: var(--err); }
1991
+ .store-install {
1992
+ margin-left: auto;
1993
+ padding: 6px 14px;
1994
+ border-radius: 8px;
1995
+ border: 1px solid var(--accent);
1996
+ background: var(--accent-dim);
1997
+ color: var(--accent);
1998
+ font-size: 12px;
1999
+ font-weight: 700;
2000
+ cursor: pointer;
1465
2001
  }
1466
- #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
1467
-
1468
- /* ---- paralel ajanlar (#14 CEO) ---- */
1469
- .agent-ceo-row { display: flex; justify-content: center; margin-bottom: 12px; }
1470
- .agent-ceo-row label { font-size: 12.5px; color: var(--muted); cursor: pointer; }
1471
- .agent-ceo-row input { accent-color: var(--accent); margin-right: 6px; }
1472
- .agent-card {
1473
- background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
1474
- padding: 10px 12px; margin-bottom: 8px;
2002
+ .store-install:hover { filter: brightness(1.12); }
2003
+ .store-install.done {
2004
+ border-color: var(--border);
2005
+ background: none;
2006
+ color: var(--muted);
2007
+ cursor: default;
2008
+ font-weight: 400;
1475
2009
  }
1476
- .agent-card.st-error { border-color: rgba(255, 90, 90, 0.45); }
1477
- .agent-card.st-done { opacity: 0.75; }
1478
- .ag-head { display: flex; align-items: center; gap: 8px; }
1479
- .ag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
1480
- .st-running .ag-dot { background: #f0b429; animation: agPulse 1.1s infinite; }
1481
- .st-done .ag-dot { background: #43c463; }
1482
- .st-error .ag-dot { background: #ff5a5a; }
1483
- .st-aborted .ag-dot { background: var(--muted); }
1484
- .st-queued .ag-dot { background: var(--muted); animation: agPulse 2.2s infinite; }
1485
- @keyframes agPulse { 50% { opacity: 0.25; } }
1486
- .ag-title { font-weight: 700; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1487
- .ag-st { font-size: 11px; color: var(--muted); flex: none; }
1488
- .ag-time { font-size: 11px; color: var(--muted); flex: none; }
1489
- .ag-btn {
1490
- border: none; background: var(--panel2); color: var(--text); font-size: 11px;
1491
- padding: 3px 9px; border-radius: 7px; cursor: pointer; flex: none;
2010
+ .store-empty {
2011
+ color: var(--muted);
2012
+ font-size: 12.5px;
2013
+ text-align: center;
2014
+ padding: 40px 0;
1492
2015
  }
1493
- .ag-btn:hover { color: var(--accent); }
1494
- .ag-task { margin-top: 6px; font-size: 12px; color: var(--text); word-break: break-word; }
1495
- .ag-last { margin-top: 6px; font-size: 11.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1496
- .ag-err { margin-top: 6px; font-size: 11.5px; color: #ff7676; word-break: break-word; }
1497
- .ag-log {
1498
- margin-top: 8px; max-height: 260px; overflow: auto; font-size: 11px; line-height: 1.5;
1499
- background: var(--panel2); border-radius: 8px; padding: 8px; white-space: pre-wrap; word-break: break-word;
2016
+ .store-form {
2017
+ display: flex;
2018
+ flex-direction: column;
2019
+ gap: 14px;
2020
+ width: 100%;
2021
+ max-width: 660px;
2022
+ margin: 0 auto;
1500
2023
  }
1501
-
1502
- /* ---------- sağ panel: paralel ajan işleri ---------- */
1503
-
1504
- #rail {
1505
- flex: none;
1506
- width: 250px;
1507
- min-width: 250px;
2024
+ .store-box {
2025
+ border: 1px solid var(--border);
2026
+ border-radius: 11px;
1508
2027
  background: var(--panel);
1509
- border-left: 1px solid var(--border);
2028
+ padding: 13px 15px;
1510
2029
  display: flex;
1511
2030
  flex-direction: column;
1512
- /* pencere kontrolleri (– □ ×) 46px'lik alana oturur; altından başla */
1513
- padding-top: 46px;
1514
- }
1515
-
1516
- #railHead {
1517
- padding: 12px 16px 10px;
1518
- font-weight: 800;
1519
- letter-spacing: 1px;
1520
- font-size: 13px;
1521
- color: var(--text);
2031
+ gap: 9px;
2032
+ width: 100%;
1522
2033
  text-align: center;
1523
2034
  }
1524
-
1525
- #railList { flex: 1; overflow-y: auto; padding: 4px 8px; }
1526
-
1527
- .rail-empty {
1528
- color: var(--muted);
1529
- font-size: 11.5px;
1530
- text-align: center;
1531
- padding: 18px 10px;
1532
- line-height: 1.5;
2035
+ .store-box h3 { font-size: 12px; letter-spacing: 1.5px; color: var(--muted); margin: 0; }
2036
+ .store-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
2037
+ .store-input {
2038
+ flex: 1;
2039
+ min-width: 160px;
2040
+ padding: 8px 11px;
2041
+ border: 1px solid var(--border);
2042
+ border-radius: 8px;
2043
+ background: var(--bg);
2044
+ color: var(--text);
2045
+ font-size: 13px;
2046
+ text-align: left;
1533
2047
  }
1534
-
1535
- .rj {
1536
- display: flex;
1537
- flex-direction: column;
1538
- gap: 4px;
1539
- padding: 7px 9px;
1540
- border-radius: 7px;
2048
+ .store-input:focus { outline: none; border-color: var(--accent); }
2049
+ .store-picked {
2050
+ font-size: 12px;
2051
+ color: var(--muted);
2052
+ background: var(--bg);
2053
+ border: 1px dashed var(--border);
2054
+ border-radius: 8px;
2055
+ padding: 8px 11px;
2056
+ line-height: 1.5;
2057
+ }
2058
+ .store-btn {
2059
+ align-self: center;
2060
+ padding: 8px 16px;
2061
+ border-radius: 8px;
2062
+ border: 1px solid var(--border);
2063
+ background: var(--panel2);
2064
+ color: var(--text);
2065
+ font-size: 12.5px;
1541
2066
  cursor: pointer;
1542
- color: var(--muted);
1543
- margin-bottom: 2px;
1544
- }
1545
- .rj:hover { background: var(--panel2); color: var(--text); }
1546
- .rj.open { background: var(--panel2); color: var(--text); }
1547
- .rj-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
1548
- .rj .sess-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
1549
- .rj-time { font-size: 10.5px; color: var(--muted); flex: none; }
1550
- .rj.st-done .rj-time { color: #43c463; font-weight: 700; }
1551
- .rj-cancel {
1552
- visibility: hidden;
1553
- border: none; background: none; color: var(--muted);
1554
- cursor: pointer; font-size: 13px; padding: 0 3px; border-radius: 4px;
1555
- }
1556
- .rj:hover .rj-cancel { visibility: visible; }
1557
- .rj-cancel:hover { color: var(--err); }
1558
- .rj-last { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1559
- .rj-body {
1560
- display: flex; flex-direction: column; gap: 6px;
1561
- font-size: 12px; color: var(--text);
1562
- word-break: break-word;
1563
- }
1564
- .rj-chat {
1565
- max-height: 340px; overflow: auto; font-size: 11px; line-height: 1.55;
1566
- background: var(--panel2); border-radius: 8px; padding: 8px;
1567
- white-space: pre-wrap; word-break: break-word;
1568
- }
1569
-
1570
- #sideFoot2 {
1571
- padding: 8px 10px;
1572
- color: var(--muted);
1573
- font-size: 11px;
1574
- border-top: 1px solid var(--border);
1575
- display: flex;
1576
- align-items: center;
1577
- justify-content: center;
1578
- }
1579
- .foot-label2 {
1580
- letter-spacing: 0.5px;
1581
2067
  }
2068
+ .store-btn:hover { border-color: var(--accent); color: var(--accent); }
2069
+ .store-saved-user {
2070
+ font-weight: 700;
2071
+ font-size: 13px;
2072
+ color: var(--accent);
2073
+ background: var(--accent-dim);
2074
+ border: 1px solid var(--accent);
2075
+ border-radius: 8px;
2076
+ padding: 5px 14px;
2077
+ }
2078
+ .store-btn.primary {
2079
+ border-color: var(--accent);
2080
+ background: var(--accent-dim);
2081
+ color: var(--accent);
2082
+ font-weight: 700;
2083
+ }
2084
+ .store-mine { display: flex; flex-direction: column; gap: 6px; }
2085
+ .store-mine-row {
2086
+ display: flex; align-items: center; gap: 8px;
2087
+ border: 1px solid var(--border);
2088
+ border-radius: 9px;
2089
+ background: var(--panel);
2090
+ padding: 8px 11px;
2091
+ font-size: 12.5px;
2092
+ }
2093
+ .store-mine-row .sm-n { font-weight: 700; }
2094
+ .store-mine-row .sm-m { color: var(--muted); font-size: 11.5px; flex: 1; }
2095
+ .store-mine-row button {
2096
+ border: none; background: none; cursor: pointer;
2097
+ color: var(--muted); font-size: 11.5px; padding: 2px 6px; border-radius: 6px;
2098
+ }
2099
+ .store-mine-row button:hover { background: var(--panel2); color: var(--text); }
2100
+ .store-mine-row button.sm-del:hover { color: var(--err); }