beast-agent 0.19.0 → 0.21.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,9 @@ body {
163
163
 
164
164
  #gearBtn,
165
165
  #themeBtn,
166
- #langBtn {
166
+ #langBtn,
167
+ #storeBtn,
168
+ #ideBtn {
167
169
  background: none;
168
170
  border: none;
169
171
  color: var(--muted);
@@ -176,145 +178,157 @@ body {
176
178
  }
177
179
  #gearBtn:hover,
178
180
  #themeBtn:hover,
179
- #langBtn:hover { background: var(--panel2); color: var(--text); }
181
+ #langBtn:hover,
182
+ #storeBtn:hover,
183
+ #ideBtn:hover { background: var(--panel2); color: var(--text); }
184
+ #gearBtn:focus,
185
+ #themeBtn:focus,
186
+ #langBtn:focus,
187
+ #storeBtn:focus,
188
+ #ideBtn:focus { outline: none; }
180
189
 
181
190
  /* model refresh butonu — çekerken döner */
182
191
  #modelRefreshBtn.spin { opacity: .7; pointer-events: none; }
183
192
  #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
-
193
+ @keyframes beast-spin { to { transform: rotate(360deg); } }
194
+
195
+ /* ---------- cron modülü (ayarlar sekmesi) ---------- */
196
+
197
+ #cronForm {
198
+ display: flex;
199
+ flex-direction: column;
200
+ gap: 8px;
201
+ margin-bottom: 14px;
202
+ }
203
+ #cronName, #cronSchedule, #cronPrompt {
204
+ background: var(--bg);
205
+ border: 1px solid var(--border);
206
+ color: var(--text);
207
+ border-radius: 8px;
208
+ padding: 7px 10px;
209
+ font-size: 13px;
210
+ outline: none;
211
+ font-family: inherit;
212
+ }
213
+ #cronName:focus, #cronSchedule:focus, #cronPrompt:focus { border-color: var(--accent); }
214
+ #cronPrompt { resize: vertical; min-height: 56px; }
215
+ #cronSchedRow { display: flex; gap: 8px; }
216
+ #cronPreset, #cronSchedule { flex: 1; }
217
+ #cronAddBtn {
218
+ align-self: flex-end;
219
+ background: var(--accent-dim);
220
+ color: var(--accent);
221
+ border: 1px solid var(--border);
222
+ border-radius: 8px;
223
+ padding: 6px 14px;
224
+ font-weight: 700;
225
+ cursor: pointer;
226
+ }
227
+ #cronAddBtn:hover { background: rgba(19, 19, 21, 0.14); }
228
+
229
+ #cronList { max-height: 46vh; overflow-y: auto; }
230
+ .cron-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 22px 0; }
231
+ .cron-job {
232
+ display: flex;
233
+ align-items: center;
234
+ justify-content: space-between;
235
+ gap: 10px;
236
+ padding: 9px 10px;
237
+ border-radius: 9px;
238
+ margin-bottom: 3px;
239
+ }
240
+ .cron-job:hover { background: var(--panel2); }
241
+ .cron-job.off .cj-name, .cron-job.off .cj-meta { opacity: 0.45; }
242
+ .cj-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
243
+ .cj-dot {
244
+ flex-shrink: 0;
245
+ width: 9px; height: 9px; border-radius: 50%;
246
+ background: var(--ok, #2e9e5b);
247
+ cursor: pointer;
248
+ }
249
+ .cron-job.off .cj-dot { background: var(--muted); }
250
+ .cj-info { min-width: 0; }
251
+ .cj-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
252
+ .cj-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
253
+ .cj-meta code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
254
+ .cj-btns { display: flex; gap: 4px; flex-shrink: 0; }
255
+ .cj-btns button {
256
+ background: none; border: none; color: var(--muted);
257
+ cursor: pointer; font-size: 12px; padding: 4px 7px; border-radius: 6px;
258
+ }
259
+ .cj-btns button:hover { background: var(--panel); color: var(--text); }
260
+ .cj-btns button:last-child:hover { color: var(--err); }
261
+
262
+ /* ---------- main ---------- */
263
+
264
+ #main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
265
+
266
+ /* dahili tarayıcı açıkken sağ tarafı boşalt */
267
+ body.browser-open #app { margin-right: var(--bw, 480px); }
268
+ body.browser-open #topbar { width: auto; }
269
+
261
270
  #browserBtn.on { background: var(--accent-dim); color: var(--accent); }
271
+
272
+ /* göz ikonu: gizli modda çapraz çizgi + soluk, görünür modda normal */
273
+ #eyeBtn .eye-slash { display: none; }
274
+ #eyeBtn:not(.on) .eye-slash { display: block; }
275
+ #eyeBtn:not(.on) { opacity: 0.55; }
262
276
  #eyeBtn.on { background: var(--accent-dim); color: var(--accent); }
263
277
 
264
278
  /* #19 sağ panel (paralel ajan konsolu) aç/kapa */
265
279
  #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
- }
280
+ body.rail-hidden #rail { display: none; }
281
+
282
+ #browserBar {
283
+ position: fixed;
284
+ top: 0;
285
+ right: 0;
286
+ width: var(--bw, 480px);
287
+ height: 46px;
288
+ display: flex;
289
+ align-items: center;
290
+ gap: 4px;
291
+ padding: 0 148px 0 8px;
292
+ background: var(--panel);
293
+ border-bottom: 1px solid var(--border);
294
+ z-index: 50;
295
+ }
296
+ #browserBar[hidden] { display: none; }
297
+ #browserBar button {
298
+ background: none;
299
+ border: none;
300
+ color: var(--muted);
301
+ font-size: 15px;
302
+ cursor: pointer;
303
+ padding: 3px 7px;
304
+ border-radius: 6px;
305
+ line-height: 1;
306
+ }
307
+ #browserBar button:hover { background: var(--panel2); color: var(--text); }
308
+ #bbUrl {
309
+ flex: 1;
310
+ min-width: 0;
311
+ background: var(--bg);
312
+ border: 1px solid var(--border);
313
+ color: var(--text);
314
+ border-radius: 7px;
315
+ padding: 5px 9px;
316
+ font-size: 12px;
317
+ outline: none;
318
+ }
319
+ #bbUrl:focus { border-color: var(--accent); }
320
+ #bbClose:hover { color: var(--err); }
321
+
322
+ /* sürükle-boyutlandır tutamacı (görünmez) */
323
+ #bbResize {
324
+ position: fixed;
325
+ top: 46px;
326
+ right: var(--bw, 480px);
327
+ width: 8px;
328
+ height: calc(100vh - 46px);
329
+ cursor: col-resize;
330
+ z-index: 60;
331
+ }
318
332
  body.bb-dragging { user-select: none; }
319
333
  body.bb-dragging * { cursor: col-resize !important; }
320
334
 
@@ -442,35 +456,35 @@ body.term-dragging { user-select: none; }
442
456
  body.term-dragging * { cursor: col-resize !important; }
443
457
 
444
458
  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); }
459
+ body.term-open #settingsOverlay { right: var(--tw, 520px); }
460
+
461
+ #topbar {
462
+ height: 46px;
463
+ display: flex;
464
+ align-items: center;
465
+ gap: 8px;
466
+ padding: 0 12px;
467
+ border-bottom: 1px solid var(--border);
468
+ background: var(--bg);
469
+ }
470
+ .drag-spacer { flex: 1; height: 100%; -webkit-app-region: drag; }
471
+
472
+ /* dropdown model picker */
473
+ .dd { position: relative; -webkit-app-region: no-drag; }
474
+ .dd-btn {
475
+ display: flex;
476
+ align-items: center;
477
+ gap: 7px;
478
+ background: var(--panel2);
479
+ color: var(--text);
480
+ border: 1px solid var(--border);
481
+ border-radius: 7px;
482
+ padding: 6px 11px;
483
+ font-size: 12.5px;
484
+ max-width: 360px;
485
+ cursor: pointer;
486
+ }
487
+ .dd-btn:hover { border-color: var(--accent); }
474
488
  #modelBtnLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
475
489
  #thinkMenu { width: 250px; }
476
490
  #thinkMenu .dd-list { overflow-x: hidden; }
@@ -489,1093 +503,2120 @@ body.term-open #settingsOverlay { right: var(--tw, 520px); }
489
503
  overflow: hidden;
490
504
  text-overflow: ellipsis;
491
505
  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); }
914
-
915
- #micBtn {
916
- width: 32px; height: 32px;
917
- border-radius: 9px;
918
- border: none;
506
+ }
507
+ .dd-caret { color: var(--muted); font-size: 10px; }
508
+ .dd-menu {
509
+ position: absolute;
510
+ top: calc(100% + 5px);
511
+ left: 0;
512
+ width: 340px;
513
+ max-width: 80vw;
514
+ background: var(--bg);
515
+ border: 1px solid var(--border);
516
+ border-radius: 10px;
517
+ box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
518
+ padding: 8px;
519
+ z-index: 60;
520
+ }
521
+ .dd-filter {
522
+ width: 100%;
523
+ padding: 7px 10px;
524
+ border: 1px solid var(--border);
525
+ border-radius: 7px;
526
+ background: var(--panel);
527
+ color: var(--text);
528
+ font-size: 13px;
529
+ outline: none;
530
+ margin-bottom: 6px;
531
+ }
532
+ .dd-filter:focus { border-color: var(--accent); }
533
+ .dd-list { max-height: 280px; overflow-y: auto; }
534
+ .dd-item {
535
+ display: flex;
536
+ align-items: center;
537
+ gap: 8px;
538
+ padding: 7px 9px;
539
+ border-radius: 7px;
919
540
  cursor: pointer;
920
- font-size: 17px;
921
- line-height: 1;
922
- flex-shrink: 0;
923
- background: none;
541
+ font-size: 12.5px;
542
+ }
543
+ .dd-item:hover { background: var(--panel2); }
544
+ .dd-item.active { background: var(--accent-dim); }
545
+ .dd-item .dn { font-weight: 700; color: var(--text); flex-shrink: 0; }
546
+ .dd-item .dm { color: var(--muted); font-family: Consolas, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
547
+ .dd-item .ck { margin-left: auto; color: var(--accent); font-weight: 800; visibility: hidden; }
548
+ .dd-item.active .ck { visibility: visible; }
549
+ .dd-empty { color: var(--muted); font-size: 12.5px; padding: 10px; }
550
+
551
+ /* picker yapılandırma popover */
552
+ .dd-icon-btn { width: 34px; justify-content: center; padding: 6px 0; font-size: 15px; }
553
+ .cfg-menu { width: 360px; max-width: 85vw; }
554
+ .cfg-head {
555
+ display: flex;
556
+ align-items: center;
557
+ justify-content: space-between;
558
+ font-size: 12px;
924
559
  color: var(--muted);
560
+ font-weight: 700;
561
+ letter-spacing: 0.5px;
562
+ padding: 2px 4px 8px;
925
563
  }
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);
564
+ .cfg-quick button {
565
+ border: 1px solid var(--border);
566
+ background: var(--panel);
567
+ color: var(--muted);
568
+ border-radius: 6px;
569
+ font-size: 11.5px;
570
+ padding: 3px 9px;
571
+ cursor: pointer;
572
+ margin-left: 5px;
573
+ }
574
+ .cfg-quick button:hover { color: var(--accent); border-color: var(--accent); }
575
+ .cfg-item {
989
576
  display: flex;
990
577
  align-items: center;
991
- justify-content: center;
992
- z-index: 50;
578
+ gap: 8px;
579
+ padding: 6px 9px;
580
+ border-radius: 7px;
581
+ cursor: pointer;
582
+ font-size: 12.5px;
583
+ }
584
+ .cfg-item:hover { background: var(--panel2); }
585
+ .cfg-item input { accent-color: var(--accent); }
586
+ .cfg-item .cn { font-weight: 700; flex-shrink: 0; }
587
+ .cfg-item .cm { color: var(--muted); font-family: Consolas, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
588
+
589
+ /* whatsapp integration */
590
+ .wa-card {
591
+ border: 1px solid var(--border);
592
+ border-radius: 12px;
593
+ background: var(--panel);
594
+ padding: 16px 18px;
595
+ max-width: 560px;
596
+ }
597
+ .wa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
598
+ .wa-logo {
599
+ width: 34px; height: 34px;
600
+ border-radius: 9px;
601
+ background: #131315;
602
+ color: #fff;
603
+ display: flex; align-items: center; justify-content: center;
604
+ font-weight: 900; font-size: 17px;
605
+ }
606
+ .wa-title { font-weight: 800; font-size: 14.5px; }
607
+ .wa-sub { color: var(--muted); font-size: 12px; }
608
+ .wa-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; margin: 10px 0; }
609
+ .wa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
610
+ .wa-dot.on { background: var(--ok); }
611
+ .wa-dot.qr { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
612
+ .wa-actions { display: flex; gap: 8px; margin-top: 4px; }
613
+ #waQr { margin-top: 12px; text-align: center; }
614
+ #waQr img { border-radius: 10px; border: 1px solid var(--border); background: #fff; }
615
+ .wa-user { color: var(--ok); font-size: 12.5px; margin-top: 6px; word-break: break-all; }
616
+ .lock-row {
617
+ display: flex;
618
+ align-items: center;
619
+ gap: 9px;
620
+ cursor: pointer;
621
+ user-select: none;
622
+ }
623
+ .lock-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
624
+ .lock-title { font-weight: 700; font-size: 13.5px; }
625
+
626
+ /* kişi bazlı kısıt düğmesi */
627
+ .chip .lk {
628
+ margin-left: 7px;
629
+ cursor: pointer;
630
+ font-size: 10.5px;
631
+ font-weight: 700;
632
+ letter-spacing: 0.3px;
633
+ padding: 1px 8px;
634
+ border-radius: 999px;
635
+ border: 1px solid var(--border);
636
+ color: var(--muted);
637
+ user-select: none;
638
+ }
639
+ .chip .lk:hover { border-color: var(--accent); color: var(--text); }
640
+ .chip .lk.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
641
+ .chip-locked { opacity: 0.85; }
642
+ .chip .chip-txt { cursor: pointer; }
643
+ .chip .chip-txt:hover { text-decoration: underline; }
644
+ .chip-noname { border-style: dashed; border-color: var(--err); }
645
+ .chip .perm-select {
646
+ margin-left: 7px;
647
+ background: var(--panel2);
648
+ color: var(--text);
649
+ border: 1px solid var(--border);
650
+ border-radius: 999px;
651
+ font-size: 10.5px;
652
+ font-weight: 700;
653
+ padding: 1px 4px;
654
+ cursor: pointer;
655
+ }
656
+ .chip .perm-select:focus { outline: none; border-color: var(--accent); }
657
+
658
+ /* oturum notları */
659
+ .notes-card { max-width: 640px; }
660
+ .notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
661
+ .notes-meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
662
+ .notes-body {
663
+ margin: 8px 0 4px;
664
+ padding: 10px 12px;
665
+ background: var(--panel2);
666
+ border: 1px solid var(--border);
667
+ border-radius: 8px;
668
+ font-family: inherit;
669
+ font-size: 12.5px;
670
+ line-height: 1.55;
671
+ color: var(--text);
672
+ white-space: pre-wrap;
673
+ word-break: break-word;
674
+ max-height: 220px;
675
+ overflow-y: auto;
676
+ }
677
+
678
+ /* ---------- chat ---------- */
679
+
680
+ #chatScroll { flex: 1; overflow-y: auto; scroll-behavior: auto; }
681
+
682
+ #empty {
683
+ height: 100%;
684
+ display: flex;
685
+ flex-direction: column;
686
+ align-items: center;
687
+ justify-content: center;
688
+ gap: 10px;
689
+ }
690
+ #emptyLogo {
691
+ font-size: 44px;
692
+ font-weight: 900;
693
+ letter-spacing: 10px;
694
+ color: var(--accent);
695
+ opacity: 0.9;
696
+ text-shadow: 0 0 30px rgba(19, 19, 21, 0.15);
697
+ }
698
+ #emptyHint { color: var(--muted); }
699
+
700
+ #msgs { max-width: 860px; margin: 0 auto; padding: 20px 24px 30px; }
701
+
702
+ .msg { margin-bottom: 18px; line-height: 1.55; }
703
+ .msg-user {
704
+ background: var(--panel2);
705
+ border: 1px solid var(--border);
706
+ border-radius: 12px;
707
+ padding: 10px 14px;
708
+ white-space: pre-wrap;
709
+ word-wrap: break-word;
710
+ }
711
+ .msg-assistant { word-wrap: break-word; }
712
+ .msg-assistant .who,
713
+ .msg-user .who {
714
+ display: block;
715
+ font-size: 11px;
716
+ color: var(--muted);
717
+ letter-spacing: 1.5px;
718
+ text-transform: uppercase;
719
+ margin-bottom: 5px;
720
+ }
721
+ .msg-assistant .who { color: var(--accent); }
722
+
723
+ .msg-error {
724
+ border: 1px solid rgba(19, 19, 21, 0.3);
725
+ background: rgba(19, 19, 21, 0.05);
726
+ color: var(--err);
727
+ border-radius: 10px;
728
+ padding: 10px 14px;
729
+ }
730
+
731
+ /* markdown */
732
+ .md p { margin: 0 0 8px; }
733
+ .md p:last-child { margin-bottom: 0; }
734
+ .md h1, .md h2, .md h3 { margin: 14px 0 8px; line-height: 1.3; }
735
+ .md h1 { font-size: 20px; } .md h2 { font-size: 17px; } .md h3 { font-size: 15px; }
736
+ .md ul, .md ol { margin: 4px 0 10px 22px; }
737
+ .md li { margin-bottom: 3px; }
738
+ .md code {
739
+ font-family: Consolas, "Cascadia Mono", monospace;
740
+ font-size: 12.5px;
741
+ background: var(--panel2);
742
+ border: 1px solid var(--border);
743
+ border-radius: 5px;
744
+ padding: 1px 5px;
745
+ }
746
+ .md pre {
747
+ background: var(--panel);
748
+ border: 1px solid var(--border);
749
+ border-radius: 9px;
750
+ padding: 12px 14px;
751
+ overflow-x: auto;
752
+ margin: 8px 0 12px;
753
+ }
754
+ .md pre code { background: none; border: none; padding: 0; font-size: 12.5px; line-height: 1.5; }
755
+ .md a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
756
+ .md a:hover { opacity: 0.7; }
757
+ .md strong { font-weight: 700; }
758
+ .cursor-blink::after { content: "▍"; color: var(--accent); animation: blink 1s steps(1) infinite; }
759
+ @keyframes blink { 50% { opacity: 0; } }
760
+
761
+ /* tool cards */
762
+ /* ard arda araç çağrıları tek kutuda toplanır; çalışırken lacivert outline döner */
763
+ .tool-box {
764
+ position: relative;
765
+ margin: 8px 0 12px;
766
+ border: 1px solid var(--border);
767
+ border-radius: 10px;
768
+ background: var(--panel);
769
+ overflow: hidden;
770
+ }
771
+ .tool-box.running {
772
+ border-color: transparent;
773
+ box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
774
+ }
775
+ .tool-box.running::before {
776
+ content: '';
777
+ position: absolute;
778
+ inset: 0;
779
+ border-radius: 10px;
780
+ padding: 3px;
781
+ background: conic-gradient(
782
+ from var(--bc-angle),
783
+ rgba(37, 99, 235, 0) 0deg,
784
+ rgba(37, 99, 235, 0) 220deg,
785
+ #1d4ed8 300deg,
786
+ #2563eb 330deg,
787
+ #60a5fa 350deg,
788
+ rgba(37, 99, 235, 0) 360deg
789
+ );
790
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
791
+ -webkit-mask-composite: xor;
792
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
793
+ mask-composite: exclude;
794
+ animation: bc-ring-spin 2.4s linear infinite;
795
+ pointer-events: none;
796
+ }
797
+ .tool-boxbody {
798
+ max-height: 420px;
799
+ overflow-y: auto;
800
+ }
801
+ .tool-box .tool-card {
802
+ margin: 0;
803
+ border: none;
804
+ border-radius: 0;
805
+ border-bottom: 1px dashed var(--border);
806
+ }
807
+ .tool-box .tool-card:last-child { border-bottom: none; }
808
+ .tool-card {
809
+ border: 1px solid var(--border);
810
+ border-radius: 9px;
811
+ margin: 8px 0 12px;
812
+ background: var(--panel);
813
+ overflow: hidden;
814
+ font-size: 12.5px;
815
+ }
816
+ .tool-head {
817
+ display: flex;
818
+ align-items: center;
819
+ gap: 8px;
820
+ padding: 7px 11px;
821
+ cursor: pointer;
822
+ user-select: none;
823
+ color: var(--muted);
824
+ }
825
+ .tool-head:hover { background: var(--panel2); }
826
+ .tool-icon { color: var(--text); display: inline-flex; align-items: center; }
827
+ .tool-name { font-weight: 700; color: var(--text); }
828
+ .tool-arg {
829
+ flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
830
+ font-family: Consolas, monospace; font-size: 11.5px;
831
+ }
832
+ .tool-state { font-size: 11px; }
833
+ .tool-state.run { color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
834
+ .tool-state.ok { color: var(--ok); }
835
+ .tool-state.err { color: var(--err); }
836
+ @keyframes pulse { 50% { opacity: 0.35; } }
837
+ .tool-body {
838
+ display: none;
839
+ border-top: 1px solid var(--border);
840
+ padding: 9px 12px;
841
+ max-height: 260px;
842
+ overflow-y: auto;
843
+ white-space: pre-wrap;
844
+ font-family: Consolas, monospace;
845
+ font-size: 11.5px;
846
+ color: var(--muted);
847
+ }
848
+ .tool-body.open { display: block; }
849
+ .tool-body.short { white-space: pre-wrap; }
850
+
851
+ /* status pill */
852
+
853
+ /* todo panel */
854
+ #todoPanel {
855
+ border: 1px solid var(--border);
856
+ background: var(--panel);
857
+ border-radius: 10px;
858
+ padding: 8px 12px;
859
+ margin-bottom: 8px;
860
+ font-size: 12px;
861
+ }
862
+ #todoPanel .td-head {
863
+ display: flex;
864
+ justify-content: space-between;
865
+ letter-spacing: 2px;
866
+ font-size: 10px;
867
+ color: var(--muted);
868
+ margin-bottom: 5px;
869
+ }
870
+ #todoPanel .td-count { letter-spacing: 0; font-weight: 700; color: var(--text); }
871
+ #todoPanel .td-row {
872
+ display: flex;
873
+ align-items: baseline;
874
+ gap: 7px;
875
+ padding: 1.5px 0;
876
+ color: var(--text);
877
+ }
878
+ #todoPanel .td-g { flex-shrink: 0; width: 12px; }
879
+ #todoPanel .td-row.active { color: var(--accent); }
880
+ #todoPanel .td-row.active .td-t { font-weight: 600; }
881
+ #todoPanel .td-row.done { color: var(--muted); }
882
+ #todoPanel .td-row.done .td-t { text-decoration: line-through; }
883
+
884
+ #statusPill {
885
+ align-self: flex-start;
886
+ margin-bottom: 6px;
887
+ font-size: 12px;
888
+ color: var(--accent);
889
+ background: var(--accent-dim);
890
+ border: 1px solid var(--accent);
891
+ padding: 3px 10px;
892
+ border-radius: 999px;
893
+ }
894
+ /* ---------- composer ---------- */
895
+
896
+ #composerWrap { padding: 8px 24px 16px; }
897
+
898
+ #composerWrap { display: flex; flex-direction: column; align-items: center; }
899
+
900
+ /* slash komut menüsü (#15) */
901
+ #slashMenu {
902
+ align-self: stretch;
903
+ max-width: 760px;
904
+ width: 100%;
905
+ margin: 0 auto 6px;
906
+ background: var(--panel);
907
+ border: 1px solid var(--border);
908
+ border-radius: 12px;
909
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
910
+ overflow-y: auto;
911
+ max-height: 46vh;
912
+ padding: 4px;
913
+ }
914
+ .slash-item {
915
+ padding: 7px 10px;
916
+ border-radius: 8px;
917
+ cursor: pointer;
918
+ display: flex;
919
+ gap: 10px;
920
+ align-items: baseline;
921
+ }
922
+ .slash-item .s-cmd { font-weight: 800; font-size: 13px; min-width: 92px; color: var(--text); }
923
+ .slash-item .s-desc { color: var(--muted); font-size: 12px; }
924
+ .slash-item:hover, .slash-item.sel { background: rgba(128, 128, 128, 0.14); }
925
+
926
+ #chips {
927
+ width: 100%;
928
+ max-width: 860px;
929
+ display: flex;
930
+ flex-wrap: wrap;
931
+ gap: 6px;
932
+ margin-bottom: 7px;
933
+ }
934
+ #chips[hidden] { display: none; }
935
+ .chip {
936
+ display: inline-flex;
937
+ align-items: center;
938
+ gap: 6px;
939
+ background: var(--panel2);
940
+ border: 1px solid var(--border);
941
+ border-radius: 999px;
942
+ padding: 3px 10px;
943
+ font-size: 12px;
944
+ color: var(--text);
945
+ }
946
+ .chip .x { cursor: pointer; color: var(--muted); font-weight: 700; }
947
+ .chip .x:hover { color: var(--err); }
948
+
949
+ #composer {
950
+ width: 100%;
951
+ max-width: 860px;
952
+ display: flex;
953
+ align-items: center;
954
+ gap: 8px;
955
+ background: var(--panel2);
956
+ border: 1px solid var(--border);
957
+ border-radius: 14px;
958
+ padding: 7px 10px;
959
+ }
960
+ #composer:focus-within { border-color: var(--accent); }
961
+
962
+ #attachBtn {
963
+ width: 32px; height: 32px;
964
+ border-radius: 9px;
965
+ border: none;
966
+ cursor: pointer;
967
+ font-size: 18px;
968
+ line-height: 1;
969
+ flex-shrink: 0;
970
+ background: none;
971
+ color: var(--muted);
972
+ }
973
+ #attachBtn:hover { background: var(--panel); color: var(--accent); }
974
+
975
+ #micBtn {
976
+ width: 32px; height: 32px;
977
+ border-radius: 9px;
978
+ border: none;
979
+ cursor: pointer;
980
+ font-size: 17px;
981
+ line-height: 1;
982
+ flex-shrink: 0;
983
+ background: none;
984
+ color: var(--muted);
985
+ }
986
+ #micBtn:hover { background: var(--panel); color: var(--accent); }
987
+ #micBtn.rec { color: #e5484d; animation: mic-pulse 1.2s ease-in-out infinite; }
988
+ @keyframes mic-pulse { 50% { opacity: .45; } }
989
+
990
+ #input {
991
+ flex: 1;
992
+ background: none;
993
+ border: none;
994
+ outline: none;
995
+ resize: none;
996
+ color: var(--text);
997
+ font-family: inherit;
998
+ font-size: 14px;
999
+ line-height: 1.45;
1000
+ max-height: 180px;
1001
+ padding: 5px 2px;
1002
+ }
1003
+ #input::placeholder { color: var(--muted); }
1004
+
1005
+ #sendBtn, #stopBtn {
1006
+ width: 34px; height: 34px;
1007
+ border-radius: 9px;
1008
+ border: none;
1009
+ cursor: pointer;
1010
+ font-size: 14px;
1011
+ flex-shrink: 0;
1012
+ }
1013
+ #sendBtn { background: var(--accent); color: var(--accent-contrast); font-weight: 800; }
1014
+ #sendBtn:disabled { background: var(--border); color: var(--muted); cursor: default; }
1015
+ #stopBtn { background: rgba(19, 19, 21, 0.06); color: var(--err); border: 1px solid rgba(19, 19, 21, 0.35); }
1016
+
1017
+ ::-webkit-scrollbar { width: 10px; }
1018
+ ::-webkit-scrollbar-thumb { background: #cfc9bf; border-radius: 6px; border: 2px solid var(--bg); }
1019
+ ::-webkit-scrollbar-thumb:hover { background: #b0b0b6; }
1020
+
1021
+ /* ---------- setup wizard ---------- */
1022
+ #setupOverlay {
1023
+ position: fixed;
1024
+ inset: 0;
1025
+ background: rgba(10, 10, 12, 0.55);
1026
+ display: flex;
1027
+ align-items: center;
1028
+ justify-content: center;
1029
+ z-index: 90;
1030
+ }
1031
+ #setupDialog {
1032
+ width: min(460px, 92vw);
1033
+ max-height: 86vh;
1034
+ overflow-y: auto;
1035
+ background: var(--panel);
1036
+ border: 1px solid var(--border);
1037
+ border-radius: 16px;
1038
+ padding: 18px 20px;
1039
+ }
1040
+ .s-step h3 { margin: 14px 0 6px; font-size: 14px; }
1041
+ .s-step .inp { margin: 6px 0; }
1042
+
1043
+ /* ---------- settings ---------- */
1044
+
1045
+ #settingsOverlay {
1046
+ position: fixed;
1047
+ inset: 0;
1048
+ background: rgba(36, 41, 47, 0.45);
1049
+ display: flex;
1050
+ align-items: center;
1051
+ justify-content: center;
1052
+ z-index: 50;
1053
+ }
1054
+
1055
+ /* #22 mini modallar (izleyiciler / cron) — ayarlar modalı tasarımında */
1056
+ .mini-overlay {
1057
+ position: fixed;
1058
+ inset: 0;
1059
+ background: rgba(36, 41, 47, 0.45);
1060
+ display: flex;
1061
+ align-items: center;
1062
+ justify-content: center;
1063
+ z-index: 55;
1064
+ }
1065
+ .mini-overlay[hidden] { display: none; }
1066
+ body.browser-open .mini-overlay { right: var(--bw, 480px); }
1067
+ .mini-dialog {
1068
+ width: min(560px, 90vw);
1069
+ height: min(560px, 84vh);
1070
+ background: var(--bg);
1071
+ border: 1px solid var(--border);
1072
+ border-radius: 14px;
1073
+ display: flex;
1074
+ flex-direction: column;
1075
+ overflow: hidden;
1076
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
1077
+ }
1078
+ .mini-head {
1079
+ display: flex;
1080
+ align-items: center;
1081
+ justify-content: space-between;
1082
+ padding: 12px 16px;
1083
+ border-bottom: 1px solid var(--border);
1084
+ }
1085
+ .mini-title { font-weight: 800; letter-spacing: 0.5px; font-size: 14px; }
1086
+ .mini-close {
1087
+ border: none; background: none; color: var(--muted);
1088
+ font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px;
1089
+ }
1090
+ .mini-close:hover { color: var(--text); background: var(--panel2); }
1091
+ .mini-body { padding: 12px 16px 14px; overflow-y: auto; }
1092
+ .mini-list { display: flex; flex-direction: column; gap: 6px; }
1093
+ .mini-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 18px 0; }
1094
+ .mini-row {
1095
+ display: flex; align-items: center; gap: 10px;
1096
+ background: var(--panel); border: 1px solid var(--border);
1097
+ border-radius: 9px; padding: 8px 10px;
1098
+ }
1099
+ .mini-row:hover { background: var(--panel2); }
1100
+ .mini-row.off .mr-name, .mini-row.off .mr-meta { opacity: 0.45; }
1101
+ .mr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
1102
+ .mini-row.off .mr-dot { background: var(--muted); }
1103
+ .mr-main { flex: 1; min-width: 0; }
1104
+ .mr-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1105
+ .mr-meta { color: var(--muted); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1106
+ .mr-meta b { color: var(--text); font-weight: 600; }
1107
+ .mr-btn {
1108
+ border: none; background: var(--panel2); color: var(--text);
1109
+ font-size: 12px; padding: 4px 8px; border-radius: 7px; cursor: pointer; flex: none;
1110
+ }
1111
+ .mr-btn:hover { color: var(--accent); }
1112
+ .mr-btn.del:hover { color: var(--err); }
1113
+
1114
+ /* #26 ajan dosya kartı */
1115
+ .file-card {
1116
+ display: flex;
1117
+ align-items: center;
1118
+ gap: 10px;
1119
+ background: var(--panel);
1120
+ border: 1px solid var(--border);
1121
+ border-radius: 12px;
1122
+ padding: 10px 12px;
1123
+ margin: 6px 0;
1124
+ max-width: 78%;
1125
+ }
1126
+ .fc-icon { font-size: 22px; flex: none; }
1127
+ .fc-main { flex: 1; min-width: 0; }
1128
+ .fc-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1129
+ .fc-cap { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
1130
+ .fc-btns { display: flex; gap: 6px; flex: none; }
1131
+ #settingsOverlay[hidden] { display: none; }
1132
+
1133
+ /* tarayıcı açıkken diyalogu görünür alana ortala */
1134
+ body.browser-open #settingsOverlay { right: var(--bw, 480px); }
1135
+ body.browser-open #settingsDialog { width: min(70vw, calc(100vw - var(--bw, 480px) - 48px)); }
1136
+ /* toast'ı da görünür alanın ortasına kaydır */
1137
+ body.browser-open #toast { left: calc((100vw - var(--bw, 480px)) / 2); }
1138
+
1139
+ #settingsDialog {
1140
+ width: 70vw;
1141
+ height: 70vh;
1142
+ background: var(--bg);
1143
+ border: 1px solid var(--border);
1144
+ border-radius: 14px;
1145
+ display: flex;
1146
+ overflow: hidden;
1147
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
1148
+ }
1149
+
1150
+ #setTabs {
1151
+ width: 190px;
1152
+ min-width: 190px;
1153
+ background: var(--panel);
1154
+ border-right: 1px solid var(--border);
1155
+ display: flex;
1156
+ flex-direction: column;
1157
+ padding: 16px 10px 12px;
1158
+ }
1159
+ .set-tabs-title {
1160
+ font-size: 11px;
1161
+ letter-spacing: 2px;
1162
+ color: var(--muted);
1163
+ padding: 0 12px 10px;
1164
+ }
1165
+ /* sekme listesi: küçük ekranda taşarsa içeride kayar — alt kısım (Beast Kodu + Kapat) sabit kalır */
1166
+ .set-tabs-list {
1167
+ display: flex;
1168
+ flex-direction: column;
1169
+ align-items: stretch;
1170
+ flex: 1 1 auto;
1171
+ min-height: 0;
1172
+ overflow-y: auto;
1173
+ padding-right: 2px;
1174
+ margin: 0 -2px;
1175
+ scrollbar-width: thin;
1176
+ scrollbar-color: var(--border) transparent;
1177
+ }
1178
+ .set-tabs-list::-webkit-scrollbar { width: 8px; }
1179
+ .set-tabs-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
1180
+ .set-tabs-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }
1181
+ .set-tabs-list::-webkit-scrollbar-track { background: transparent; }
1182
+ @media (max-height: 860px) {
1183
+ #setTabs { padding: 10px 8px; }
1184
+ .set-tabs-title { padding: 0 12px 6px; }
1185
+ #setTabs .tab { padding: 6px 12px; font-size: 12.5px; margin-bottom: 1px; }
1186
+ }
1187
+ #setTabs .tab {
1188
+ text-align: left;
1189
+ padding: 9px 12px;
1190
+ border-radius: 8px;
1191
+ border: none;
1192
+ background: none;
1193
+ color: var(--muted);
1194
+ font-size: 13.5px;
1195
+ cursor: pointer;
1196
+ margin-bottom: 2px;
1197
+ }
1198
+ #setTabs .tab:hover { background: var(--panel2); color: var(--text); }
1199
+ #setTabs .tab.active { background: var(--accent-dim); color: var(--accent); font-weight: 700; }
1200
+ .set-tabs-foot { margin-top: auto; }
1201
+ .beast-code {
1202
+ border: 1px solid var(--border);
1203
+ border-radius: 8px;
1204
+ padding: 4px 8px;
1205
+ margin-bottom: 8px;
1206
+ background: var(--panel2);
1207
+ }
1208
+ .bc-row { display: flex; align-items: center; gap: 6px; }
1209
+ .bc-value {
1210
+ flex: 1;
1211
+ font-family: var(--mono, monospace);
1212
+ font-size: 12px;
1213
+ letter-spacing: 1px;
1214
+ color: var(--muted);
1215
+ user-select: all;
1216
+ overflow: hidden;
1217
+ text-overflow: ellipsis;
1218
+ white-space: nowrap;
1219
+ }
1220
+ .bc-copy {
1221
+ flex: none;
1222
+ padding: 3px 8px;
1223
+ font-size: 11px;
1224
+ border-radius: 6px;
1225
+ border: 1px solid var(--border);
1226
+ background: none;
1227
+ color: var(--muted);
1228
+ cursor: pointer;
1229
+ }
1230
+ .bc-copy:hover { color: var(--text); background: var(--panel); }
1231
+ #setClose {
1232
+ width: 100%;
1233
+ padding: 8px;
1234
+ border-radius: 8px;
1235
+ border: 1px solid var(--border);
1236
+ background: none;
1237
+ color: var(--muted);
1238
+ cursor: pointer;
1239
+ font-size: 13px;
1240
+ }
1241
+ #setClose:hover { color: var(--err); border-color: var(--err); background: rgba(19, 19, 21, 0.05); }
1242
+
1243
+ #setContent { flex: 1; overflow-y: auto; padding: 22px 26px; }
1244
+ .pane {
1245
+ max-width: 620px;
1246
+ margin: 0 auto;
1247
+ display: flex;
1248
+ flex-direction: column;
1249
+ align-items: center;
1250
+ }
1251
+ .pane[hidden] { display: none; }
1252
+ .pane > * { width: 100%; }
1253
+ .pane h2, .pane .sub, .pane .mem-label, .pane .divider { text-align: center; }
1254
+ .pane h2 { font-size: 17px; margin-bottom: 4px; }
1255
+ .pane .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 16px; }
1256
+ .chips-inline { display: flex; flex-wrap: wrap; margin-bottom: 4px; }
1257
+
1258
+ .prov-row {
1259
+ display: flex;
1260
+ align-items: center;
1261
+ gap: 10px;
1262
+ padding: 10px 13px;
1263
+ border: 1px solid var(--border);
1264
+ border-radius: 10px;
1265
+ margin-bottom: 8px;
1266
+ cursor: pointer;
1267
+ background: var(--panel);
1268
+ }
1269
+ .prov-row:hover { border-color: var(--accent); }
1270
+ .prov-row.active { border-color: var(--accent); background: var(--accent-dim); }
1271
+ .prov-name { font-weight: 700; font-size: 13px; }
1272
+ .prov-model { color: var(--muted); font-size: 12px; font-family: Consolas, monospace; }
1273
+ .check { margin-left: auto; color: var(--accent); font-weight: 800; visibility: hidden; }
1274
+ .prov-row.active .check { visibility: visible; }
1275
+
1276
+ .mem-area {
1277
+ width: 100%;
1278
+ min-height: 170px;
1279
+ resize: vertical;
1280
+ background: var(--panel);
1281
+ border: 1px solid var(--border);
1282
+ border-radius: 10px;
1283
+ color: var(--text);
1284
+ font-family: Consolas, "Cascadia Mono", monospace;
1285
+ font-size: 12.5px;
1286
+ line-height: 1.5;
1287
+ padding: 10px 12px;
1288
+ outline: none;
1289
+ }
1290
+ .mem-area:focus { border-color: var(--accent); }
1291
+ .mem-area.soul-area { min-height: 220px; }
1292
+ .mem-label { font-weight: 700; font-size: 13px; margin: 14px 0 6px; display: block; }
1293
+ .btn {
1294
+ padding: 7px 16px;
1295
+ border-radius: 8px;
1296
+ border: none;
1297
+ background: var(--accent);
1298
+ color: var(--accent-contrast);
1299
+ font-weight: 700;
1300
+ cursor: pointer;
1301
+ font-size: 13px;
1302
+ margin-top: 10px;
1303
+ }
1304
+ .btn:hover { filter: brightness(1.08); }
1305
+ .btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
1306
+
1307
+ .inp {
1308
+ width: 100%;
1309
+ padding: 8px 11px;
1310
+ border: 1px solid var(--border);
1311
+ border-radius: 8px;
1312
+ background: var(--panel);
1313
+ color: var(--text);
1314
+ font-size: 13px;
1315
+ outline: none;
1316
+ margin-bottom: 8px;
1317
+ }
1318
+ .inp:focus { border-color: var(--accent); }
1319
+ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
1320
+
1321
+ /* ---------------- ☢ Fallout ---------------- */
1322
+ .fo-toggles {
1323
+ display: flex;
1324
+ align-items: center;
1325
+ justify-content: center;
1326
+ gap: 18px;
1327
+ flex-wrap: wrap;
1328
+ margin-bottom: 16px;
1329
+ }
1330
+ .fo-toggles .lock-row { margin: 0; }
1331
+ .fo-count {
1332
+ color: var(--muted);
1333
+ font-size: 12px;
1334
+ font-weight: 700;
1335
+ border: 1px solid var(--border);
1336
+ border-radius: 999px;
1337
+ padding: 3px 10px;
1338
+ }
1339
+ /* ---------- maliyet (sade) ---------- */
1340
+ .usage-cards {
1341
+ display: grid;
1342
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
1343
+ gap: 8px;
1344
+ margin-top: 10px;
1345
+ }
1346
+ .usage-stat {
1347
+ border: 1px solid var(--border);
1348
+ border-radius: 10px;
1349
+ padding: 10px 12px;
1350
+ }
1351
+ .usage-stat .us-label {
1352
+ color: var(--muted);
1353
+ font-size: 11px;
1354
+ text-transform: uppercase;
1355
+ letter-spacing: 0.04em;
1356
+ margin-bottom: 3px;
1357
+ }
1358
+ .usage-stat .us-value {
1359
+ font-size: 15px;
1360
+ font-weight: 700;
1361
+ }
1362
+ #tab-usage h3 {
1363
+ margin: 14px 0 6px;
1364
+ font-size: 12.5px;
1365
+ color: var(--muted);
1366
+ }
1367
+ .usage-row {
1368
+ display: flex;
1369
+ align-items: baseline;
1370
+ gap: 10px;
1371
+ padding: 6px 0;
1372
+ border-bottom: 1px solid var(--border);
1373
+ }
1374
+ .usage-row .ur-model { font-weight: 700; }
1375
+ .usage-row .ur-meta {
1376
+ color: var(--muted);
1377
+ font-size: 12px;
1378
+ flex: 1;
1379
+ }
1380
+ .usage-row .ur-cost { font-weight: 700; font-size: 12.5px; }
1381
+ .usage-row.dash-active { background: var(--accent-dim); border-radius: 6px; }
1382
+ #tab-dash .usage-row { align-items: center; }
1383
+ #tab-dash .usage-row .ur-meta { flex: none; }
1384
+ .usage-row .sess-code {
1385
+ flex: none;
1386
+ font-size: 11px;
1387
+ color: var(--muted);
1388
+ border: 1px solid var(--border);
1389
+ border-radius: 4px;
1390
+ padding: 1px 5px;
1391
+ }
1392
+ .usage-empty {
1393
+ color: var(--muted);
1394
+ font-size: 12.5px;
1395
+ padding: 8px 0;
1396
+ }
1397
+ .fo-slot {
1398
+ display: grid;
1399
+ grid-template-columns: 34px minmax(110px, 1fr) minmax(140px, 1.3fr) minmax(120px, 1fr) auto auto;
1400
+ gap: 8px;
1401
+ align-items: center;
1402
+ padding: 9px 10px;
1403
+ border: 1px solid var(--border);
1404
+ border-radius: 10px;
1405
+ background: var(--panel);
1406
+ margin-bottom: 7px;
1407
+ }
1408
+ .fo-slot.filled { border-color: var(--accent); }
1409
+ .fo-badge {
1410
+ display: inline-flex;
1411
+ align-items: center;
1412
+ justify-content: center;
1413
+ width: 28px;
1414
+ height: 28px;
1415
+ border-radius: 50%;
1416
+ font-weight: 800;
1417
+ font-size: 12px;
1418
+ background: var(--panel2);
1419
+ border: 1px solid var(--border);
1420
+ color: var(--muted);
1421
+ }
1422
+ .fo-slot.filled .fo-badge {
1423
+ background: var(--accent-dim);
1424
+ border-color: var(--accent);
1425
+ color: var(--accent);
1426
+ }
1427
+ .fo-slot .inp { margin-bottom: 0; }
1428
+ .fo-slot select.inp { cursor: pointer; }
1429
+ .fo-save { margin-top: 0; white-space: nowrap; }
1430
+ .fo-clear {
1431
+ background: none;
1432
+ border: none;
1433
+ color: var(--muted);
1434
+ font-size: 13px;
1435
+ cursor: pointer;
1436
+ padding: 4px 6px;
1437
+ }
1438
+ .fo-clear:hover { color: #e05252; }
1439
+ .model-picks {
1440
+ border: 1px solid var(--border);
1441
+ border-radius: 10px;
1442
+ background: var(--panel);
1443
+ padding: 8px 4px;
1444
+ margin-bottom: 8px;
1445
+ max-height: 180px;
1446
+ overflow-y: auto;
1447
+ }
1448
+ .model-picks label {
1449
+ display: flex;
1450
+ align-items: center;
1451
+ gap: 8px;
1452
+ padding: 5px 10px;
1453
+ border-radius: 6px;
1454
+ font-size: 12.5px;
1455
+ cursor: pointer;
1456
+ font-family: Consolas, monospace;
1457
+ }
1458
+ .model-picks label:hover { background: var(--panel2); }
1459
+ .divider { border-top: 1px solid var(--border); margin: 20px 0 16px; }
1460
+ .prov-del {
1461
+ margin-left: 8px;
1462
+ border: none;
1463
+ background: none;
1464
+ color: var(--muted);
1465
+ cursor: pointer;
1466
+ font-size: 14px;
1467
+ padding: 2px 6px;
1468
+ border-radius: 5px;
1469
+ }
1470
+ .prov-del:hover { color: var(--err); background: rgba(19, 19, 21, 0.07); }
1471
+ .prov-url { color: var(--muted); font-size: 11.5px; font-family: Consolas, monospace; }
1472
+
1473
+ .skill-row {
1474
+ padding: 11px 13px;
1475
+ border: 1px solid var(--border);
1476
+ border-radius: 10px;
1477
+ margin-bottom: 8px;
1478
+ background: var(--panel);
1479
+ }
1480
+ .skill-name { font-weight: 700; font-size: 13.5px; color: var(--accent); }
1481
+ .skill-desc { color: var(--text); font-size: 12.5px; margin: 3px 0; }
1482
+ .skill-path { color: var(--muted); font-size: 11px; font-family: Consolas, monospace; word-break: break-all; }
1483
+
1484
+ /* ---------- rol modelleri ---------- */
1485
+ .role-row {
1486
+ display: flex;
1487
+ align-items: center;
1488
+ gap: 10px;
1489
+ margin-bottom: 10px;
1490
+ }
1491
+ .role-label {
1492
+ min-width: 110px;
1493
+ font-size: 13px;
1494
+ color: var(--text);
1495
+ opacity: 0.9;
1496
+ }
1497
+ .role-select {
1498
+ flex: 1;
1499
+ background: var(--panel2);
1500
+ color: var(--text);
1501
+ border: 1px solid var(--border);
1502
+ padding: 6px 8px;
1503
+ font-size: 13px;
1504
+ border-radius: 4px;
1505
+ }
1506
+ .role-select:focus {
1507
+ outline: none;
1508
+ border-color: var(--accent);
1509
+ }
1510
+
1511
+ #toast {
1512
+ position: fixed;
1513
+ bottom: 28px;
1514
+ left: 50%;
1515
+ transform: translateX(-50%) translateY(16px);
1516
+ opacity: 0;
1517
+ transition: all 0.25s ease;
1518
+ background: var(--text);
1519
+ color: var(--bg);
1520
+ padding: 9px 18px;
1521
+ border-radius: 999px;
1522
+ font-size: 13px;
1523
+ z-index: 99;
1524
+ pointer-events: none;
1525
+ }
1526
+ #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
1527
+
1528
+ /* ---- paralel ajanlar (#14 CEO) ---- */
1529
+ .agent-ceo-row { display: flex; justify-content: center; margin-bottom: 12px; }
1530
+ .agent-ceo-row label { font-size: 12.5px; color: var(--muted); cursor: pointer; }
1531
+ .agent-ceo-row input { accent-color: var(--accent); margin-right: 6px; }
1532
+ .agent-card {
1533
+ background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
1534
+ padding: 10px 12px; margin-bottom: 8px;
1535
+ }
1536
+ .agent-card.st-error { border-color: rgba(255, 90, 90, 0.45); }
1537
+ .agent-card.st-done { opacity: 0.75; }
1538
+ .ag-head { display: flex; align-items: center; gap: 8px; }
1539
+ .ag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
1540
+ .st-running .ag-dot { background: #f0b429; animation: agPulse 1.1s infinite; }
1541
+ .st-done .ag-dot { background: #43c463; }
1542
+ .st-error .ag-dot { background: #ff5a5a; }
1543
+ .st-aborted .ag-dot { background: var(--muted); }
1544
+ .st-queued .ag-dot { background: var(--muted); animation: agPulse 2.2s infinite; }
1545
+ @keyframes agPulse { 50% { opacity: 0.25; } }
1546
+ .ag-title { font-weight: 700; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1547
+ .ag-st { font-size: 11px; color: var(--muted); flex: none; }
1548
+ .ag-time { font-size: 11px; color: var(--muted); flex: none; }
1549
+ .ag-btn {
1550
+ border: none; background: var(--panel2); color: var(--text); font-size: 11px;
1551
+ padding: 3px 9px; border-radius: 7px; cursor: pointer; flex: none;
1552
+ }
1553
+ .ag-btn:hover { color: var(--accent); }
1554
+ .ag-task { margin-top: 6px; font-size: 12px; color: var(--text); word-break: break-word; }
1555
+ .ag-last { margin-top: 6px; font-size: 11.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1556
+ .ag-err { margin-top: 6px; font-size: 11.5px; color: #ff7676; word-break: break-word; }
1557
+ .ag-log {
1558
+ margin-top: 8px; max-height: 260px; overflow: auto; font-size: 11px; line-height: 1.5;
1559
+ background: var(--panel2); border-radius: 8px; padding: 8px; white-space: pre-wrap; word-break: break-word;
1560
+ }
1561
+
1562
+ /* ---------- sağ panel: paralel ajan işleri ---------- */
1563
+
1564
+ #rail {
1565
+ flex: none;
1566
+ width: 250px;
1567
+ min-width: 250px;
1568
+ background: var(--panel);
1569
+ border-left: 1px solid var(--border);
1570
+ display: flex;
1571
+ flex-direction: column;
1572
+ /* pencere kontrolleri (– □ ×) 46px'lik alana oturur; altından başla */
1573
+ padding-top: 46px;
1574
+ }
1575
+
1576
+ #railHead {
1577
+ padding: 12px 16px 10px;
1578
+ font-weight: 800;
1579
+ letter-spacing: 1px;
1580
+ font-size: 13px;
1581
+ color: var(--text);
1582
+ text-align: center;
1583
+ }
1584
+
1585
+ #railList { flex: 1; overflow-y: auto; padding: 4px 8px; }
1586
+
1587
+ .rail-empty {
1588
+ color: var(--muted);
1589
+ font-size: 11.5px;
1590
+ text-align: center;
1591
+ padding: 18px 10px;
1592
+ line-height: 1.5;
1593
+ }
1594
+
1595
+ .rj {
1596
+ display: flex;
1597
+ flex-direction: column;
1598
+ gap: 4px;
1599
+ padding: 7px 9px;
1600
+ border-radius: 7px;
1601
+ cursor: pointer;
1602
+ color: var(--muted);
1603
+ margin-bottom: 2px;
1604
+ }
1605
+ .rj:hover { background: var(--panel2); color: var(--text); }
1606
+ .rj.open { background: var(--panel2); color: var(--text); }
1607
+ .rj-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
1608
+ .rj .sess-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
1609
+ .rj-time { font-size: 10.5px; color: var(--muted); flex: none; }
1610
+ .rj.st-done .rj-time { color: #43c463; font-weight: 700; }
1611
+ .rj-cancel {
1612
+ visibility: hidden;
1613
+ border: none; background: none; color: var(--muted);
1614
+ cursor: pointer; font-size: 13px; padding: 0 3px; border-radius: 4px;
1615
+ }
1616
+ .rj:hover .rj-cancel { visibility: visible; }
1617
+ .rj-cancel:hover { color: var(--err); }
1618
+ .rj-last { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1619
+ .rj-body {
1620
+ display: flex; flex-direction: column; gap: 6px;
1621
+ font-size: 12px; color: var(--text);
1622
+ word-break: break-word;
1623
+ }
1624
+ .rj-chat {
1625
+ max-height: 340px; overflow: auto; font-size: 11px; line-height: 1.55;
1626
+ background: var(--panel2); border-radius: 8px; padding: 8px;
1627
+ white-space: pre-wrap; word-break: break-word;
1628
+ }
1629
+
1630
+ #sideFoot2 {
1631
+ padding: 8px 10px;
1632
+ color: var(--muted);
1633
+ font-size: 11px;
1634
+ border-top: 1px solid var(--border);
1635
+ display: flex;
1636
+ align-items: center;
1637
+ justify-content: center;
1638
+ }
1639
+ .foot-label2 {
1640
+ letter-spacing: 0.5px;
1641
+ }
1642
+
1643
+ /* ---------- BOT SİSTEMİ (sol panel alt bölümü + bot sayfası) ---------- */
1644
+
1645
+ /* üst bardaki aktif bot rozeti */
1646
+ #botChip {
1647
+ flex: none;
1648
+ font-size: 12px;
1649
+ font-weight: 800;
1650
+ letter-spacing: 0.3px;
1651
+ color: var(--text);
1652
+ background: var(--panel2);
1653
+ border: 1px solid var(--border);
1654
+ border-radius: 8px;
1655
+ padding: 4px 10px;
1656
+ margin-right: 4px;
1657
+ cursor: pointer;
1658
+ user-select: none;
1659
+ white-space: nowrap;
1660
+ }
1661
+ #botChip:hover { border-color: var(--accent); }
1662
+
1663
+ #botBar {
1664
+ flex: none;
1665
+ max-height: 45%;
1666
+ display: flex;
1667
+ flex-direction: column;
1668
+ border-top: 1px solid var(--border);
1669
+ padding: 6px 8px 6px;
1670
+ }
1671
+ #botBarHead {
1672
+ display: flex;
1673
+ align-items: center;
1674
+ justify-content: space-between;
1675
+ padding: 2px 2px 6px;
1676
+ font-size: 10.5px;
1677
+ font-weight: 800;
1678
+ letter-spacing: 1.5px;
1679
+ color: var(--muted);
1680
+ }
1681
+ .bot-bar-btns { display: flex; gap: 4px; }
1682
+ .bot-bar-btns button {
1683
+ border: none; background: none; color: var(--muted);
1684
+ font-size: 13px; font-weight: 700; cursor: pointer;
1685
+ padding: 1px 7px; border-radius: 6px; line-height: 1.4;
1686
+ }
1687
+ .bot-bar-btns button:hover { background: var(--panel2); color: var(--text); }
1688
+ #botList { overflow-y: auto; }
1689
+ .bot-card {
1690
+ display: flex;
1691
+ align-items: center;
1692
+ gap: 8px;
1693
+ padding: 6px 8px;
1694
+ border-radius: 8px;
1695
+ cursor: pointer;
1696
+ margin-bottom: 2px;
1697
+ color: var(--muted);
1698
+ }
1699
+ .bot-card:hover { background: var(--panel2); color: var(--text); }
1700
+ .bot-card.active { background: var(--panel2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
1701
+ .bot-card .bot-ico { font-size: 16px; line-height: 1; flex-shrink: 0; }
1702
+ .bot-card .bot-gear {
1703
+ visibility: hidden;
1704
+ color: var(--muted);
1705
+ font-size: 12px;
1706
+ cursor: pointer;
1707
+ padding: 0 3px;
1708
+ border-radius: 4px;
1709
+ flex-shrink: 0;
1710
+ }
1711
+ .bot-card:hover .bot-gear { visibility: visible; }
1712
+ .bot-card .bot-gear:hover { color: var(--text); background: rgba(128, 128, 128, 0.18); }
1713
+ .bot-card .bot-nm {
1714
+ flex: 1;
1715
+ font-size: 13px;
1716
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
1717
+ color: var(--text);
1718
+ }
1719
+ .bot-card .bot-tag {
1720
+ font-size: 9.5px;
1721
+ font-weight: 800;
1722
+ letter-spacing: 0.5px;
1723
+ border: 1px solid var(--border);
1724
+ border-radius: 5px;
1725
+ padding: 1px 5px;
1726
+ color: var(--muted);
1727
+ flex-shrink: 0;
1728
+ }
1729
+
1730
+ /* tek tıkla model (OpenCode Zen) hero butonu */
1731
+ .zen-hero {
1732
+ padding: 10px 12px;
1733
+ border: 1px dashed var(--border);
1734
+ border-radius: 10px;
1735
+ margin-bottom: 12px;
1736
+ background: var(--panel);
1737
+ }
1738
+ .zen-hero .btn { min-width: 220px; }
1739
+
1740
+ /* bot sayfası overlay */
1741
+ #botOverlay {
1742
+ position: fixed;
1743
+ inset: 0;
1744
+ background: rgba(36, 41, 47, 0.45);
1745
+ display: flex;
1746
+ align-items: center;
1747
+ justify-content: center;
1748
+ z-index: 55;
1749
+ }
1750
+ #botOverlay[hidden] { display: none; }
1751
+ body.browser-open #botOverlay { right: var(--bw, 480px); }
1752
+ #botDialog {
1753
+ width: min(1080px, 94vw);
1754
+ height: min(720px, 90vh);
1755
+ background: var(--bg);
1756
+ border: 1px solid var(--border);
1757
+ border-radius: 14px;
1758
+ display: flex;
1759
+ flex-direction: column;
1760
+ overflow: hidden;
1761
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
1762
+ }
1763
+ #botHead {
1764
+ display: flex;
1765
+ align-items: center;
1766
+ gap: 10px;
1767
+ padding: 12px 16px;
1768
+ border-bottom: 1px solid var(--border);
1769
+ }
1770
+ #botHeadIcon { font-size: 22px; line-height: 1; }
1771
+ #botHeadName { font-weight: 800; font-size: 16px; letter-spacing: 0.3px; }
1772
+ #botHeadTag {
1773
+ font-size: 10px;
1774
+ font-weight: 800;
1775
+ letter-spacing: 0.5px;
1776
+ border: 1px solid var(--border);
1777
+ border-radius: 5px;
1778
+ padding: 2px 7px;
1779
+ color: var(--muted);
1780
+ }
1781
+ .bot-head-spacer { flex: 1; }
1782
+ #botBody { flex: 1; display: flex; min-height: 0; }
1783
+
1784
+ /* sol yarı: o botun sohbet geçmişi */
1785
+ #botChatsCol {
1786
+ width: 320px;
1787
+ flex: none;
1788
+ border-right: 1px solid var(--border);
1789
+ display: flex;
1790
+ flex-direction: column;
1791
+ min-height: 0;
1792
+ }
1793
+ #botChatsTitle {
1794
+ padding: 10px 14px 6px;
1795
+ font-size: 10.5px;
1796
+ font-weight: 800;
1797
+ letter-spacing: 1.2px;
1798
+ color: var(--muted);
1799
+ }
1800
+ #botChatList { overflow-y: auto; padding: 0 8px; max-height: 38%; flex: none; }
1801
+ .bot-chat-row {
1802
+ display: flex;
1803
+ align-items: center;
1804
+ gap: 7px;
1805
+ padding: 6px 8px;
1806
+ border-radius: 7px;
1807
+ cursor: pointer;
1808
+ color: var(--muted);
1809
+ font-size: 12.5px;
1810
+ margin-bottom: 2px;
1811
+ }
1812
+ .bot-chat-row:hover { background: var(--panel2); color: var(--text); }
1813
+ .bot-chat-row.active { background: var(--panel2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
1814
+ .bot-chat-row .bt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1815
+ #botChatMsgs { flex: 1; overflow-y: auto; padding: 10px 14px; border-top: 1px solid var(--border); }
1816
+ .bot-msg { margin-bottom: 8px; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
1817
+ .bot-msg .who { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: var(--muted); display: block; }
1818
+ .bot-msg.user .who { color: var(--text); }
1819
+ .bot-msg.user { background: var(--panel); border-radius: 8px; padding: 6px 9px; }
1820
+ .bot-msg.asst { color: var(--text); }
1821
+
1822
+ /* sağ yarı: bot mantığı (sekmeli) */
1823
+ #botManageCol { flex: 1; display: flex; flex-direction: column; min-height: 0; }
1824
+ #botTabs {
1825
+ display: flex;
1826
+ gap: 2px;
1827
+ padding: 8px 12px 0;
1828
+ border-bottom: 1px solid var(--border);
1829
+ flex-wrap: wrap;
1830
+ }
1831
+ .btab {
1832
+ border: none;
1833
+ background: none;
1834
+ color: var(--muted);
1835
+ font-size: 12px;
1836
+ font-weight: 700;
1837
+ padding: 7px 11px;
1838
+ cursor: pointer;
1839
+ border-radius: 7px 7px 0 0;
1840
+ border-bottom: 2px solid transparent;
1841
+ }
1842
+ .btab:hover { color: var(--text); }
1843
+ .btab.active { color: var(--text); border-bottom-color: var(--accent); }
1844
+ #botPane { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }
1845
+ .bot-form label.mem-label { display: block; margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
1846
+ .bot-form label.mem-label:first-child { margin-top: 0; }
1847
+ .bot-form .inp, .bot-form select, .bot-form textarea {
1848
+ width: 100%;
1849
+ background: var(--panel);
1850
+ border: 1px solid var(--border);
1851
+ border-radius: 7px;
1852
+ color: var(--text);
1853
+ padding: 7px 9px;
1854
+ font-size: 13px;
1855
+ font-family: inherit;
1856
+ }
1857
+ .bot-form textarea { resize: vertical; }
1858
+ .bot-form textarea.monospace { font-family: Consolas, monospace; font-size: 12px; }
1859
+ .bot-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
1860
+ .bot-checks label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }
1861
+ .bot-num-row {
1862
+ display: flex;
1863
+ align-items: center;
1864
+ gap: 8px;
1865
+ background: var(--panel);
1866
+ border: 1px solid var(--border);
1867
+ border-radius: 7px;
1868
+ padding: 5px 9px;
1869
+ margin-bottom: 5px;
1870
+ font-size: 12.5px;
1871
+ }
1872
+ .bot-num-row .n { flex: 1; }
1873
+ .bot-num-row .x { cursor: pointer; color: var(--muted); padding: 0 4px; border-radius: 4px; }
1874
+ .bot-num-row .x:hover { color: var(--err); background: var(--panel2); }
1875
+ .icon-pick { display: flex; flex-wrap: wrap; gap: 4px; }
1876
+ .icon-pick button {
1877
+ font-size: 17px;
1878
+ border: 1px solid transparent;
1879
+ background: none;
1880
+ border-radius: 7px;
1881
+ padding: 3px 7px;
1882
+ cursor: pointer;
1883
+ }
1884
+ .icon-pick button:hover { background: var(--panel2); }
1885
+ .icon-pick button.on { border-color: var(--accent); background: var(--panel); }
1886
+ .bot-log { font-family: Consolas, monospace; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; color: var(--muted); }
1887
+ .bot-stat-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
1888
+ .bot-stat {
1889
+ flex: 1 1 130px;
1890
+ background: var(--panel);
1891
+ border: 1px solid var(--border);
1892
+ border-radius: 9px;
1893
+ padding: 10px 12px;
1894
+ }
1895
+ .bot-stat .v { font-size: 20px; font-weight: 800; }
1896
+ .bot-stat .k { font-size: 11px; color: var(--muted); margin-top: 2px; }
1897
+ .bot-plugin-row {
1898
+ display: flex; align-items: center; gap: 8px;
1899
+ background: var(--panel); border: 1px solid var(--border);
1900
+ border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; font-size: 12.5px;
1901
+ }
1902
+ .bot-ov-row {
1903
+ display: flex; align-items: center; gap: 10px;
1904
+ padding: 9px 10px; border: 1px solid var(--border);
1905
+ border-radius: 9px; margin-bottom: 6px; background: var(--panel);
1906
+ cursor: pointer;
1907
+ }
1908
+ .bot-ov-row:hover { background: var(--panel2); }
1909
+ .bot-ov-row .ico { font-size: 18px; }
1910
+ .bot-ov-row .nm { font-weight: 700; flex: 1; }
1911
+ .bot-ov-row .m { font-size: 11.5px; color: var(--muted); }
1912
+ .bot-ov-total {
1913
+ display: flex; gap: 10px; margin-top: 10px; padding-top: 10px;
1914
+ border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--muted); flex-wrap: wrap;
1915
+ }
1916
+
1917
+
1918
+ /* ---------- IDE MODU ---------- */
1919
+
1920
+ #filePanel {
1921
+ display: none;
1922
+ width: 250px;
1923
+ min-width: 250px;
1924
+ background: var(--panel);
1925
+ border-right: 1px solid var(--border);
1926
+ flex-direction: column;
1927
+ overflow: hidden;
1928
+ }
1929
+ /* IDE modunda sol taraf: sohbet geçmişi yerine klasör sistemi */
1930
+ body.ide-mode #newChat,
1931
+ body.ide-mode #sessList,
1932
+ body.ide-mode #botBar { display: none; }
1933
+ body.ide-mode #filePanel {
1934
+ display: flex;
1935
+ flex: 1;
1936
+ width: auto;
1937
+ min-width: 0;
1938
+ border-right: none;
1939
+ }
1940
+ /* IDE modunda sağdaki paralel ajan paneli kapalı */
1941
+ body.ide-mode #rail { display: none; }
1942
+ /* IDE modunda ortadaki sohbet yerine Beast Code paneli */
1943
+ body.ide-mode #chatScroll,
1944
+ body.ide-mode #composerWrap { display: none; }
1945
+ #bcPanel {
1946
+ display: none;
1947
+ flex: 1;
1948
+ min-height: 0;
1949
+ flex-direction: column;
1950
+ overflow: hidden;
1951
+ background: var(--bg);
1952
+ }
1953
+ body.ide-mode #bcPanel { display: flex; }
1954
+ #bcHead {
1955
+ flex: none;
1956
+ display: flex;
1957
+ align-items: center;
1958
+ gap: 8px;
1959
+ padding: 9px 12px;
1960
+ border-bottom: 1px solid var(--border);
1961
+ background: var(--panel);
1962
+ }
1963
+ #bcTitle { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--accent); flex: none; }
1964
+ #bcCwd {
1965
+ color: var(--muted);
1966
+ font-family: Consolas, monospace;
1967
+ font-size: 11px;
1968
+ min-width: 0;
1969
+ overflow: hidden;
1970
+ text-overflow: ellipsis;
1971
+ white-space: nowrap;
1972
+ }
1973
+ #bcHead button {
1974
+ background: none;
1975
+ border: none;
1976
+ color: var(--muted);
1977
+ font-size: 12px;
1978
+ cursor: pointer;
1979
+ padding: 3px 7px;
1980
+ border-radius: 6px;
1981
+ line-height: 1;
1982
+ flex: none;
1983
+ }
1984
+ #bcHead button:hover { background: var(--panel2); color: var(--text); }
1985
+ #bcOut {
1986
+ flex: 1;
1987
+ overflow-y: auto;
1988
+ padding: 10px 14px;
1989
+ font-family: Consolas, "Cascadia Mono", monospace;
1990
+ font-size: 12px;
1991
+ line-height: 1.55;
1992
+ }
1993
+ #bcInputRow {
1994
+ flex: none;
1995
+ display: flex;
1996
+ align-items: center;
1997
+ gap: 6px;
1998
+ padding: 10px 12px;
1999
+ border-top: 1px solid var(--border);
2000
+ background: var(--panel);
2001
+ }
2002
+ #bcPrompt { color: var(--accent); font-family: Consolas, monospace; font-size: 12px; font-weight: 700; flex: none; }
2003
+ #bcInput {
2004
+ flex: 1;
2005
+ min-width: 0;
2006
+ background: var(--bg);
2007
+ border: 1px solid var(--border);
2008
+ color: var(--text);
2009
+ border-radius: 7px;
2010
+ padding: 7px 10px;
2011
+ font-family: Consolas, monospace;
2012
+ font-size: 12.5px;
2013
+ outline: none;
2014
+ }
2015
+ #bcInput:focus { border-color: var(--accent); }
2016
+ #bcStop {
2017
+ flex: none;
2018
+ background: none;
2019
+ border: 1px solid var(--border);
2020
+ color: var(--err);
2021
+ border-radius: 7px;
2022
+ cursor: pointer;
2023
+ font-size: 11px;
2024
+ padding: 4px 8px;
2025
+ line-height: 1;
2026
+ }
2027
+ #bcStop[hidden] { display: none; }
2028
+ #bcStop:hover { border-color: var(--err); }
2029
+
2030
+ /* ---------- Beast Code araç kutuları (read/write/terminal çağrıları) ---------- */
2031
+
2032
+ .bc-toolbox {
2033
+ position: relative;
2034
+ margin: 6px 0;
2035
+ border: 1px solid var(--border);
2036
+ border-radius: 9px;
2037
+ background: var(--panel);
2038
+ overflow: hidden;
2039
+ }
2040
+ /* kutu gövdesi: belli yükseklikte kalır, uzun içerik kutu içinde scroll'lanır */
2041
+ .bc-toolbody {
2042
+ max-height: 420px;
2043
+ overflow-y: auto;
2044
+ }
2045
+ .bc-toolhead {
2046
+ display: flex;
2047
+ align-items: center;
2048
+ gap: 7px;
2049
+ padding: 6px 10px;
2050
+ font-family: Consolas, "Cascadia Mono", monospace;
2051
+ font-size: 11.5px;
2052
+ color: var(--muted);
2053
+ }
2054
+ .bc-toolsection { padding: 2px 0; }
2055
+ .bc-toolsection + .bc-toolsection { border-top: 1px dashed var(--border); }
2056
+ .bc-toolsection.done .bc-toolspin { display: none; }
2057
+ .bc-toolsection.failed .bc-toolname { color: var(--err); }
2058
+ .bc-toolhead .bc-toolname { color: var(--accent); font-weight: 700; flex: none; }
2059
+ .bc-toolhead .bc-toolar {
2060
+ min-width: 0;
2061
+ overflow: hidden;
2062
+ text-overflow: ellipsis;
2063
+ white-space: nowrap;
2064
+ }
2065
+ .bc-toolout {
2066
+ max-height: 180px;
2067
+ overflow-y: auto;
2068
+ border-top: 1px solid var(--border);
2069
+ padding: 7px 10px;
2070
+ font-family: Consolas, "Cascadia Mono", monospace;
2071
+ font-size: 11.5px;
2072
+ line-height: 1.5;
2073
+ white-space: pre-wrap;
2074
+ word-break: break-all;
2075
+ color: var(--text);
2076
+ opacity: 0.92;
993
2077
  }
994
2078
 
995
- /* #22 mini modallar (izleyiciler / cron) — ayarlar modalı tasarımında */
996
- .mini-overlay {
997
- position: fixed;
2079
+ /* çalışırken kutunun etrafında FOSFORLU AÇIK MAVİ dönen outline */
2080
+ @property --bc-angle {
2081
+ syntax: '<angle>';
2082
+ initial-value: 0deg;
2083
+ inherits: false;
2084
+ }
2085
+ @keyframes bc-ring-spin {
2086
+ to { --bc-angle: 360deg; }
2087
+ }
2088
+ @keyframes bc-spin {
2089
+ to { transform: rotate(360deg); }
2090
+ }
2091
+ .bc-toolbox.running {
2092
+ border-color: transparent;
2093
+ box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
2094
+ }
2095
+ .bc-toolbox.running::before {
2096
+ content: '';
2097
+ position: absolute;
998
2098
  inset: 0;
999
- background: rgba(36, 41, 47, 0.45);
2099
+ border-radius: 9px;
2100
+ padding: 3px;
2101
+ background: conic-gradient(
2102
+ from var(--bc-angle),
2103
+ rgba(37, 99, 235, 0) 0deg,
2104
+ rgba(37, 99, 235, 0) 220deg,
2105
+ #1d4ed8 300deg,
2106
+ #2563eb 330deg,
2107
+ #60a5fa 350deg,
2108
+ rgba(37, 99, 235, 0) 360deg
2109
+ );
2110
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
2111
+ -webkit-mask-composite: xor;
2112
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
2113
+ mask-composite: exclude;
2114
+ animation: bc-ring-spin 2.4s linear infinite;
2115
+ pointer-events: none;
2116
+ }
2117
+ .bc-toolhead .bc-toolspin {
2118
+ flex: none;
2119
+ width: 11px;
2120
+ height: 11px;
2121
+ border-radius: 50%;
2122
+ border: 2px solid var(--border);
2123
+ border-top-color: #2563eb;
2124
+ animation: bc-spin 0.8s linear infinite;
2125
+ }
2126
+ .bc-toolbox:not(.running) .bc-toolspin { display: none; }
2127
+
2128
+ /* kutu içi ara yazı notu (iş turları arasındaki asistan yorumları) */
2129
+ .bc-toolnote {
2130
+ padding: 5px 12px;
2131
+ font-size: 11.5px;
2132
+ font-style: italic;
2133
+ color: var(--muted);
2134
+ white-space: pre-wrap;
2135
+ word-break: break-word;
2136
+ border-top: 1px dashed var(--border);
2137
+ }
2138
+
2139
+ /* ---------- Beast Code todo kartı (inputun hemen üstünde, ortalı kare) ---------- */
2140
+ #bcTodoWrap {
2141
+ flex: none;
1000
2142
  display: flex;
1001
- align-items: center;
1002
2143
  justify-content: center;
1003
- z-index: 55;
2144
+ padding: 0 12px;
2145
+ margin-top: -16px; /* kartı 1-2 satır yukarı al */
2146
+ position: relative;
2147
+ z-index: 2;
1004
2148
  }
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);
1010
- background: var(--bg);
1011
- border: 1px solid var(--border);
1012
- border-radius: 14px;
1013
- display: flex;
1014
- flex-direction: column;
2149
+ #bcTodoWrap[hidden] { display: none; }
2150
+ .bc-todobox {
2151
+ width: fit-content;
2152
+ min-width: 240px;
2153
+ max-width: min(420px, 92%);
2154
+ border: 1px solid var(--accent-dim);
2155
+ border-radius: 10px;
2156
+ background: var(--panel);
1015
2157
  overflow: hidden;
1016
- box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
2158
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
1017
2159
  }
1018
- .mini-head {
2160
+ .bc-todotitle {
1019
2161
  display: flex;
1020
2162
  align-items: center;
1021
2163
  justify-content: space-between;
1022
- padding: 12px 16px;
2164
+ padding: 6px 10px;
2165
+ font-size: 10.5px;
2166
+ font-weight: 800;
2167
+ letter-spacing: 2px;
2168
+ color: var(--accent);
1023
2169
  border-bottom: 1px solid var(--border);
1024
2170
  }
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;
2171
+ .bc-todocount { color: var(--muted); letter-spacing: 0; font-weight: 700; }
2172
+ .bc-todoitems { padding: 4px 0; }
2173
+ .bc-todoitem {
2174
+ display: flex;
2175
+ align-items: baseline;
2176
+ gap: 8px;
2177
+ padding: 3px 12px;
2178
+ font-size: 12px;
2179
+ color: var(--text);
1050
2180
  }
1051
- .mr-btn:hover { color: var(--accent); }
1052
- .mr-btn.del:hover { color: var(--err); }
1053
-
1054
- /* #26 ajan dosya kartı */
1055
- .file-card {
2181
+ .bc-todoitem .bc-todocheck { flex: none; width: 14px; text-align: center; color: var(--muted); }
2182
+ .bc-todoitem.active { color: var(--accent); font-weight: 600; }
2183
+ .bc-todoitem.active .bc-todocheck { color: var(--accent); }
2184
+ .bc-todoitem.done { color: var(--muted); }
2185
+ .bc-todoitem.done .bc-todocheck { color: var(--ok, var(--accent)); }
2186
+ .bc-todoitem.done .bc-todotext { text-decoration: line-through; }
2187
+ #filePanelHead {
1056
2188
  display: flex;
1057
2189
  align-items: center;
1058
- gap: 10px;
1059
- background: var(--panel);
2190
+ gap: 6px;
2191
+ padding: 10px 10px;
2192
+ border-bottom: 1px solid var(--border);
2193
+ }
2194
+ #filePanelTitle { font-size: 11px; letter-spacing: 2px; color: var(--muted); font-weight: 800; }
2195
+ .file-spacer { flex: 1; }
2196
+ #filePanelHead button {
2197
+ background: none;
1060
2198
  border: 1px solid var(--border);
1061
- border-radius: 12px;
1062
- padding: 10px 12px;
1063
- margin: 6px 0;
1064
- max-width: 78%;
2199
+ border-radius: 7px;
2200
+ color: var(--muted);
2201
+ cursor: pointer;
2202
+ font-size: 11.5px;
2203
+ padding: 3px 8px;
2204
+ line-height: 1.4;
1065
2205
  }
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;
2206
+ #filePanelHead button:hover { color: var(--text); background: var(--panel2); }
2207
+ #filePreview { border-color: var(--accent); color: var(--accent); font-weight: 700; }
2208
+ #filePanelPath {
2209
+ font-family: var(--mono, monospace);
2210
+ font-size: 10px;
1102
2211
  color: var(--muted);
1103
- padding: 0 12px 10px;
2212
+ padding: 5px 10px;
2213
+ border-bottom: 1px solid var(--border);
2214
+ white-space: nowrap;
2215
+ overflow: hidden;
2216
+ text-overflow: ellipsis;
1104
2217
  }
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 {
2218
+ #fileTree { flex: 1; overflow-y: auto; padding: 6px 4px; }
2219
+ .file-row {
1107
2220
  display: flex;
2221
+ align-items: center;
2222
+ gap: 6px;
2223
+ padding: 4px 6px;
2224
+ border-radius: 6px;
2225
+ cursor: pointer;
2226
+ font-size: 12.5px;
2227
+ white-space: nowrap;
2228
+ overflow: hidden;
2229
+ }
2230
+ .file-row:hover { background: var(--panel2); }
2231
+ .f-ico { flex: none; font-size: 13px; filter: grayscale(1); opacity: 0.72; }
2232
+ .f-nm { overflow: hidden; text-overflow: ellipsis; }
2233
+ .f-sz { margin-left: auto; font-size: 10px; color: var(--muted); flex: none; }
2234
+ .file-empty { color: var(--muted); font-size: 12px; padding: 12px; }
2235
+
2236
+ /* ---------- IDE MODU: sekmeli kod editörü (VS Code düzeni) ---------- */
2237
+
2238
+ /* IDE modunda ortam: [dosya ağacı | kod sekmeleri | Beast Code] */
2239
+ #ideRow { display: none; flex: 1; min-height: 0; }
2240
+ body.ide-mode #ideRow { display: flex; flex-direction: row; }
2241
+ #codePane {
2242
+ flex: 1;
2243
+ min-width: 0;
2244
+ display: none;
1108
2245
  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;
2246
+ background: var(--bg);
1117
2247
  }
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);
2248
+ body.ide-mode #codePane { display: flex; }
2249
+ #ideRow #bcPanel {
2250
+ display: flex;
2251
+ flex: 0 0 var(--ideSplit, 420px);
2252
+ min-width: 280px;
2253
+ border-left: none;
1147
2254
  }
1148
- .bc-row { display: flex; align-items: center; gap: 6px; }
1149
- .bc-value {
2255
+ #ideSplit {
2256
+ flex: none;
2257
+ width: 6px;
2258
+ cursor: col-resize;
2259
+ background: var(--border);
2260
+ opacity: 0.55;
2261
+ }
2262
+ #codeTabsBar {
2263
+ flex: none;
2264
+ display: flex;
2265
+ align-items: center;
2266
+ gap: 8px;
2267
+ padding: 0 8px;
2268
+ min-height: 38px;
2269
+ border-bottom: 1px solid var(--border);
2270
+ background: var(--panel);
2271
+ }
2272
+ #codeTabs {
2273
+ display: flex;
2274
+ overflow-x: auto;
1150
2275
  flex: 1;
1151
- font-family: var(--mono, monospace);
2276
+ min-width: 0;
2277
+ }
2278
+ .code-tab {
2279
+ display: flex;
2280
+ align-items: center;
2281
+ gap: 6px;
2282
+ padding: 7px 10px;
1152
2283
  font-size: 12px;
1153
- letter-spacing: 1px;
2284
+ font-family: Consolas, monospace;
1154
2285
  color: var(--muted);
1155
- user-select: all;
2286
+ cursor: pointer;
2287
+ white-space: nowrap;
2288
+ border-bottom: 2px solid transparent;
2289
+ }
2290
+ .code-tab:hover { background: var(--panel2); }
2291
+ .code-tab.active {
2292
+ color: var(--text);
2293
+ background: var(--bg);
2294
+ border-bottom-color: var(--accent);
2295
+ }
2296
+ .code-tab .code-tab-x {
2297
+ border: none;
2298
+ background: none;
2299
+ color: var(--muted);
2300
+ cursor: pointer;
2301
+ font-size: 12px;
2302
+ padding: 0 2px;
2303
+ line-height: 1;
2304
+ }
2305
+ .code-tab .code-tab-x:hover { color: var(--err); }
2306
+ .code-tab.dirty .code-tab-name::after { content: ' \25CF'; color: var(--accent); font-size: 10px; }
2307
+ #codePath {
2308
+ flex: none;
2309
+ max-width: 240px;
1156
2310
  overflow: hidden;
1157
2311
  text-overflow: ellipsis;
1158
2312
  white-space: nowrap;
2313
+ font-family: Consolas, monospace;
2314
+ font-size: 11px;
2315
+ color: var(--muted);
1159
2316
  }
1160
- .bc-copy {
2317
+ #codeSave {
1161
2318
  flex: none;
1162
- padding: 3px 8px;
1163
- font-size: 11px;
1164
- border-radius: 6px;
1165
- border: 1px solid var(--border);
1166
2319
  background: none;
2320
+ border: 1px solid var(--border);
2321
+ border-radius: 7px;
1167
2322
  color: var(--muted);
1168
2323
  cursor: pointer;
2324
+ font-size: 11.5px;
2325
+ padding: 4px 10px;
2326
+ line-height: 1.4;
1169
2327
  }
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; }
1215
-
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
-
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; }
2328
+ #codeSave:hover { color: var(--accent); border-color: var(--accent); background: var(--panel2); }
2329
+ #codeTa {
2330
+ flex: 1;
2331
+ resize: none;
2332
+ border: none;
2333
+ outline: none;
2334
+ background: var(--bg);
2335
+ color: var(--text);
2336
+ padding: 12px 14px;
2337
+ font-family: Consolas, "Cascadia Mono", monospace;
2338
+ font-size: 12.5px;
2339
+ line-height: 1.55;
2340
+ }
2341
+ /* dikey scrollbar hep görünür, tutulabilir ve imleç değişsin */
2342
+ #codeTa::-webkit-scrollbar {
2343
+ width: 12px;
2344
+ cursor: pointer;
2345
+ }
2346
+ #codeTa::-webkit-scrollbar-track {
2347
+ background: transparent;
2348
+ cursor: pointer;
2349
+ }
2350
+ #codeTa::-webkit-scrollbar-thumb {
2351
+ background: var(--muted);
2352
+ border-radius: 6px;
2353
+ border: 3px solid var(--bg);
2354
+ cursor: pointer;
2355
+ }
2356
+ #codeTa::-webkit-scrollbar-thumb:hover {
2357
+ background: var(--text);
2358
+ }
2359
+
2360
+ /* ---------- dosya ağacı sağ tık menüsü ---------- */
2361
+ #fileCtxMenu {
2362
+ position: fixed;
2363
+ z-index: 70;
2364
+ min-width: 150px;
2365
+ background: var(--panel);
2366
+ border: 1px solid var(--border);
2367
+ border-radius: 9px;
2368
+ padding: 4px;
2369
+ box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
2370
+ }
2371
+ #fileCtxMenu[hidden] { display: none; }
2372
+ .ctx-item {
2373
+ padding: 7px 12px;
2374
+ font-size: 12.5px;
2375
+ color: var(--text);
2376
+ cursor: pointer;
2377
+ border-radius: 6px;
2378
+ }
2379
+ .ctx-item:hover { background: var(--panel2); }
2380
+ .ctx-item.danger { color: var(--err); }
2381
+
2382
+ /* ---------- SKILLS STORE ---------- */
1260
2383
 
1261
- /* ---------------- ☢ Fallout ---------------- */
1262
- .fo-toggles {
2384
+ #storeOverlay {
2385
+ position: fixed;
2386
+ inset: 0;
2387
+ background: rgba(36, 41, 47, 0.45);
1263
2388
  display: flex;
1264
2389
  align-items: center;
1265
2390
  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;
2391
+ z-index: 56;
1285
2392
  }
1286
- .usage-stat {
2393
+ #storeOverlay[hidden] { display: none; }
2394
+ body.browser-open #storeOverlay { right: var(--bw, 480px); }
2395
+ #storeDialog {
2396
+ width: 70vw;
2397
+ height: 70vh;
2398
+ background: var(--bg);
1287
2399
  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);
2400
+ border-radius: 14px;
2401
+ display: flex;
2402
+ flex-direction: column;
2403
+ overflow: hidden;
2404
+ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
1306
2405
  }
1307
- .usage-row {
2406
+ #storeHead {
1308
2407
  display: flex;
1309
- align-items: baseline;
2408
+ align-items: center;
1310
2409
  gap: 10px;
1311
- padding: 6px 0;
2410
+ padding: 14px 18px;
1312
2411
  border-bottom: 1px solid var(--border);
1313
2412
  }
1314
- .usage-row .ur-model { font-weight: 700; }
1315
- .usage-row .ur-meta {
2413
+ #storeTitle { font-size: 13px; letter-spacing: 2.5px; font-weight: 800; }
2414
+ #storeBeastId {
2415
+ font-family: var(--mono, monospace);
2416
+ font-size: 11px;
1316
2417
  color: var(--muted);
1317
- font-size: 12px;
1318
- flex: 1;
2418
+ border: 1px solid var(--border);
2419
+ border-radius: 6px;
2420
+ padding: 2px 8px;
2421
+ background: var(--panel2);
2422
+ user-select: all;
1319
2423
  }
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;
2424
+ .store-spacer { flex: 1; }
2425
+ #storeTabs {
2426
+ display: flex;
2427
+ padding: 10px 18px 0;
2428
+ border-bottom: 1px solid var(--border);
2429
+ }
2430
+ /* 3 sekme: kalan genişlik tam 3 eşit parçaya bölünür */
2431
+ #storeTabs .stab {
2432
+ flex: 1 1 0;
2433
+ min-width: 0;
2434
+ text-align: center;
2435
+ padding: 8px 0;
2436
+ border: none;
2437
+ border-radius: 9px 9px 0 0;
2438
+ background: none;
1327
2439
  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;
2440
+ font-size: 13px;
2441
+ cursor: pointer;
2442
+ }
2443
+ #storeTabs .stab:hover { color: var(--text); background: var(--panel2); }
2444
+ #storeTabs .stab.active { background: var(--accent-dim); color: var(--accent); font-weight: 700; }
2445
+ /* tüm sekme içerikleri ortalanır */
2446
+ #storePane {
2447
+ flex: 1;
2448
+ overflow-y: auto;
2449
+ padding: 16px 18px;
2450
+ display: flex;
2451
+ flex-direction: column;
2452
+ align-items: center;
2453
+ }
2454
+ #storePane .store-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; text-align: center; width: 100%; }
2455
+ .store-grid {
2456
+ display: grid;
2457
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
2458
+ gap: 10px;
2459
+ width: 100%;
2460
+ max-width: 980px;
1336
2461
  }
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;
2462
+ .store-card {
1343
2463
  border: 1px solid var(--border);
1344
- border-radius: 10px;
2464
+ border-radius: 11px;
1345
2465
  background: var(--panel);
1346
- margin-bottom: 7px;
2466
+ padding: 12px 13px;
2467
+ display: flex;
2468
+ flex-direction: column;
2469
+ gap: 7px;
1347
2470
  }
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;
2471
+ .store-card-top { display: flex; align-items: center; gap: 9px; }
2472
+ .store-avatar {
2473
+ width: 34px; height: 34px; flex: none;
2474
+ display: flex; align-items: center; justify-content: center;
2475
+ font-size: 19px;
2476
+ border-radius: 9px;
1358
2477
  background: var(--panel2);
1359
2478
  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
2479
  }
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;
2480
+ .store-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2481
+ .store-ver { font-size: 10.5px; color: var(--muted); }
2482
+ .store-author { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); min-width: 0; }
2483
+ .store-author .sa-avatar { font-size: 13px; }
2484
+ .store-author .sa-name { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2485
+ .store-author .sa-beast { font-family: var(--mono, monospace); font-size: 10px; }
2486
+ .store-desc {
2487
+ font-size: 12px;
1373
2488
  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;
2489
+ line-height: 1.45;
2490
+ min-height: 34px;
2491
+ display: -webkit-box;
2492
+ -webkit-line-clamp: 2;
2493
+ -webkit-box-orient: vertical;
2494
+ overflow: hidden;
1397
2495
  }
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;
2496
+ .store-tags { display: flex; gap: 5px; flex-wrap: wrap; }
2497
+ .store-tag {
2498
+ font-size: 10px;
1404
2499
  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
2500
  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;
2501
+ border-radius: 20px;
2502
+ padding: 1px 8px;
1439
2503
  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
2504
  }
1446
- .role-select:focus {
1447
- outline: none;
1448
- border-color: var(--accent);
2505
+ .store-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
2506
+ .store-stats { font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; }
2507
+ .store-like {
2508
+ border: none; background: none; cursor: pointer;
2509
+ color: var(--muted); font-size: 12.5px; padding: 2px 6px; border-radius: 6px;
1449
2510
  }
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;
2511
+ .store-like:hover { background: var(--panel2); }
2512
+ .store-like.liked { color: var(--err); }
2513
+ .store-install {
2514
+ margin-left: auto;
2515
+ padding: 6px 14px;
2516
+ border-radius: 8px;
2517
+ border: 1px solid var(--accent);
2518
+ background: var(--accent-dim);
2519
+ color: var(--accent);
2520
+ font-size: 12px;
2521
+ font-weight: 700;
2522
+ cursor: pointer;
1465
2523
  }
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;
2524
+ .store-install:hover { filter: brightness(1.12); }
2525
+ .store-install.done {
2526
+ border-color: var(--border);
2527
+ background: none;
2528
+ color: var(--muted);
2529
+ cursor: default;
2530
+ font-weight: 400;
1475
2531
  }
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;
2532
+ .store-empty {
2533
+ color: var(--muted);
2534
+ font-size: 12.5px;
2535
+ text-align: center;
2536
+ padding: 40px 0;
1492
2537
  }
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;
2538
+ .store-form {
2539
+ display: flex;
2540
+ flex-direction: column;
2541
+ gap: 14px;
2542
+ width: 100%;
2543
+ max-width: 660px;
2544
+ margin: 0 auto;
1500
2545
  }
1501
-
1502
- /* ---------- sağ panel: paralel ajan işleri ---------- */
1503
-
1504
- #rail {
1505
- flex: none;
1506
- width: 250px;
1507
- min-width: 250px;
2546
+ .store-box {
2547
+ border: 1px solid var(--border);
2548
+ border-radius: 11px;
1508
2549
  background: var(--panel);
1509
- border-left: 1px solid var(--border);
2550
+ padding: 13px 15px;
1510
2551
  display: flex;
1511
2552
  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);
2553
+ gap: 9px;
2554
+ width: 100%;
1522
2555
  text-align: center;
1523
2556
  }
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;
2557
+ .store-box h3 { font-size: 12px; letter-spacing: 1.5px; color: var(--muted); margin: 0; }
2558
+ .store-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
2559
+ .store-input {
2560
+ flex: 1;
2561
+ min-width: 160px;
2562
+ padding: 8px 11px;
2563
+ border: 1px solid var(--border);
2564
+ border-radius: 8px;
2565
+ background: var(--bg);
2566
+ color: var(--text);
2567
+ font-size: 13px;
2568
+ text-align: left;
1533
2569
  }
1534
-
1535
- .rj {
1536
- display: flex;
1537
- flex-direction: column;
1538
- gap: 4px;
1539
- padding: 7px 9px;
1540
- border-radius: 7px;
2570
+ .store-input:focus { outline: none; border-color: var(--accent); }
2571
+ .store-picked {
2572
+ font-size: 12px;
2573
+ color: var(--muted);
2574
+ background: var(--bg);
2575
+ border: 1px dashed var(--border);
2576
+ border-radius: 8px;
2577
+ padding: 8px 11px;
2578
+ line-height: 1.5;
2579
+ }
2580
+ .store-btn {
2581
+ align-self: center;
2582
+ padding: 8px 16px;
2583
+ border-radius: 8px;
2584
+ border: 1px solid var(--border);
2585
+ background: var(--panel2);
2586
+ color: var(--text);
2587
+ font-size: 12.5px;
1541
2588
  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
2589
  }
2590
+ .store-btn:hover { border-color: var(--accent); color: var(--accent); }
2591
+ .store-saved-user {
2592
+ font-weight: 700;
2593
+ font-size: 13px;
2594
+ color: var(--accent);
2595
+ background: var(--accent-dim);
2596
+ border: 1px solid var(--accent);
2597
+ border-radius: 8px;
2598
+ padding: 5px 14px;
2599
+ }
2600
+ .store-btn.primary {
2601
+ border-color: var(--accent);
2602
+ background: var(--accent-dim);
2603
+ color: var(--accent);
2604
+ font-weight: 700;
2605
+ }
2606
+ .store-mine { display: flex; flex-direction: column; gap: 6px; }
2607
+ .store-mine-row {
2608
+ display: flex; align-items: center; gap: 8px;
2609
+ border: 1px solid var(--border);
2610
+ border-radius: 9px;
2611
+ background: var(--panel);
2612
+ padding: 8px 11px;
2613
+ font-size: 12.5px;
2614
+ }
2615
+ .store-mine-row .sm-n { font-weight: 700; }
2616
+ .store-mine-row .sm-m { color: var(--muted); font-size: 11.5px; flex: 1; }
2617
+ .store-mine-row button {
2618
+ border: none; background: none; cursor: pointer;
2619
+ color: var(--muted); font-size: 11.5px; padding: 2px 6px; border-radius: 6px;
2620
+ }
2621
+ .store-mine-row button:hover { background: var(--panel2); color: var(--text); }
2622
+ .store-mine-row button.sm-del:hover { color: var(--err); }