goto-assistant 0.2.4 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/public/index.html +6 -2
- package/public/setup-chat.js +1 -1
- package/public/setup.html +4 -1
- package/public/style.css +659 -135
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -6,6 +6,9 @@
|
|
|
6
6
|
<meta name="color-scheme" content="light dark">
|
|
7
7
|
<title>goto-assistant</title>
|
|
8
8
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
+
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
|
|
9
12
|
<link rel="stylesheet" href="/style.css">
|
|
10
13
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
11
14
|
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
|
|
@@ -31,6 +34,7 @@
|
|
|
31
34
|
<div class="messages" id="messages">
|
|
32
35
|
<div class="empty-state" id="emptyState">
|
|
33
36
|
<img src="/logo.svg" alt="goto-assistant" class="empty-state-logo">
|
|
37
|
+
<p class="empty-state-text">How can I help you today?</p>
|
|
34
38
|
</div>
|
|
35
39
|
</div>
|
|
36
40
|
|
|
@@ -94,7 +98,7 @@
|
|
|
94
98
|
}
|
|
95
99
|
function clearMessages() {
|
|
96
100
|
const m = document.getElementById('messages');
|
|
97
|
-
m.innerHTML = '<div class="empty-state" id="emptyState"><img src="/logo.svg" alt="goto-assistant" class="empty-state-logo"></div>';
|
|
101
|
+
m.innerHTML = '<div class="empty-state" id="emptyState"><img src="/logo.svg" alt="goto-assistant" class="empty-state-logo"><p class="empty-state-text">How can I help you today?</p></div>';
|
|
98
102
|
}
|
|
99
103
|
|
|
100
104
|
function addMessage(role, content, extraAttachments) {
|
|
@@ -136,7 +140,7 @@
|
|
|
136
140
|
const el = document.createElement('div');
|
|
137
141
|
el.className = 'typing-indicator';
|
|
138
142
|
el.id = 'typing';
|
|
139
|
-
el.
|
|
143
|
+
el.innerHTML = '<span></span><span></span><span></span>';
|
|
140
144
|
document.getElementById('messages').appendChild(el);
|
|
141
145
|
el.scrollIntoView({ behavior: 'smooth' });
|
|
142
146
|
}
|
package/public/setup-chat.js
CHANGED
|
@@ -126,7 +126,7 @@ function addSetupTypingIndicator() {
|
|
|
126
126
|
var el = document.createElement('div');
|
|
127
127
|
el.className = 'typing-indicator';
|
|
128
128
|
el.id = 'setupTyping';
|
|
129
|
-
el.
|
|
129
|
+
el.innerHTML = '<span></span><span></span><span></span>';
|
|
130
130
|
container.appendChild(el);
|
|
131
131
|
container.scrollTop = container.scrollHeight;
|
|
132
132
|
}
|
package/public/setup.html
CHANGED
|
@@ -6,6 +6,9 @@
|
|
|
6
6
|
<meta name="color-scheme" content="light dark">
|
|
7
7
|
<title>goto-assistant — Setup</title>
|
|
8
8
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
+
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
|
|
9
12
|
<link rel="stylesheet" href="/style.css">
|
|
10
13
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
11
14
|
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
|
|
@@ -57,7 +60,7 @@
|
|
|
57
60
|
<!-- Right: chat panel -->
|
|
58
61
|
<div class="setup-chat" id="setupChat">
|
|
59
62
|
<div class="setup-chat-header">
|
|
60
|
-
<h3>Setup
|
|
63
|
+
<h3>Setup Wizard</h3>
|
|
61
64
|
<button class="setup-chat-close" id="chatCloseBtn">×</button>
|
|
62
65
|
</div>
|
|
63
66
|
<div class="setup-chat-messages" id="chatMessages"></div>
|
package/public/style.css
CHANGED
|
@@ -1,10 +1,173 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
1
|
+
/* ============================================
|
|
2
|
+
goto-assistant — Warm Refined Theme
|
|
3
|
+
Built around the brand orange (#f97316)
|
|
4
|
+
============================================ */
|
|
5
|
+
|
|
6
|
+
/* --- Custom Properties: Light --- */
|
|
7
|
+
:root {
|
|
8
|
+
/* Brand */
|
|
9
|
+
--accent: #f97316;
|
|
10
|
+
--accent-hover: #ea580c;
|
|
11
|
+
--accent-subtle: rgba(249, 115, 22, 0.06);
|
|
12
|
+
--accent-glow: rgba(249, 115, 22, 0.18);
|
|
13
|
+
|
|
14
|
+
/* Surfaces — warm whites */
|
|
15
|
+
--surface-0: #faf9f7;
|
|
16
|
+
--surface-1: #f3f1ed;
|
|
17
|
+
--surface-2: #e9e6e0;
|
|
18
|
+
--surface-border: rgba(0, 0, 0, 0.08);
|
|
19
|
+
|
|
20
|
+
/* Text — warm darks */
|
|
21
|
+
--text-primary: #1c1917;
|
|
22
|
+
--text-secondary: #78716c;
|
|
23
|
+
--text-muted: #a8a29e;
|
|
24
|
+
|
|
25
|
+
/* Chat accents */
|
|
26
|
+
--chat-user-bg: #fff7ed;
|
|
27
|
+
--chat-active-bg: rgba(249, 115, 22, 0.07);
|
|
28
|
+
|
|
29
|
+
/* Shadows */
|
|
30
|
+
--shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
|
|
31
|
+
--shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
|
|
32
|
+
--shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
|
|
33
|
+
--shadow-lg: 0 10px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
|
|
34
|
+
|
|
35
|
+
/* Typography */
|
|
36
|
+
--font-body: 'Bricolage Grotesque', system-ui, sans-serif;
|
|
37
|
+
--font-display: 'Instrument Serif', Georgia, serif;
|
|
38
|
+
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/*
|
|
42
|
+
* Pico overrides — must use :root:not([data-theme=dark]) to match
|
|
43
|
+
* Pico v2's own selector specificity, otherwise Pico's blue wins.
|
|
44
|
+
*/
|
|
45
|
+
:root:not([data-theme=dark]) {
|
|
46
|
+
--pico-font-family: var(--font-body);
|
|
47
|
+
--pico-font-size: 100%;
|
|
48
|
+
--pico-border-radius: 10px;
|
|
49
|
+
--pico-background-color: var(--surface-0);
|
|
50
|
+
--pico-card-background-color: var(--surface-1);
|
|
51
|
+
--pico-card-sectioning-background-color: var(--surface-1);
|
|
52
|
+
--pico-muted-border-color: var(--surface-border);
|
|
53
|
+
--pico-color: var(--text-primary);
|
|
54
|
+
--pico-muted-color: var(--text-secondary);
|
|
55
|
+
--pico-primary: var(--accent);
|
|
56
|
+
--pico-primary-hover: var(--accent-hover);
|
|
57
|
+
--pico-primary-background: var(--accent);
|
|
58
|
+
--pico-primary-border: var(--accent);
|
|
59
|
+
--pico-primary-hover-background: var(--accent-hover);
|
|
60
|
+
--pico-primary-hover-border: var(--accent-hover);
|
|
61
|
+
--pico-primary-focus: var(--accent-glow);
|
|
62
|
+
--pico-primary-underline: var(--accent);
|
|
63
|
+
--pico-primary-inverse: #fff;
|
|
64
|
+
--pico-secondary: var(--text-secondary);
|
|
65
|
+
--pico-secondary-hover: var(--text-primary);
|
|
66
|
+
--pico-code-background-color: rgba(0, 0, 0, 0.04);
|
|
67
|
+
--pico-dropdown-hover-background-color: var(--surface-2);
|
|
68
|
+
/* Form elements — warm instead of Pico's blue-tinted defaults */
|
|
69
|
+
--pico-form-element-background-color: #faf9f7;
|
|
70
|
+
--pico-form-element-selected-background-color: var(--surface-2);
|
|
71
|
+
--pico-form-element-border-color: #d6d3cd;
|
|
72
|
+
--pico-form-element-color: var(--text-primary);
|
|
73
|
+
--pico-form-element-active-background-color: #fff;
|
|
74
|
+
--pico-form-element-active-border-color: var(--accent);
|
|
75
|
+
--pico-form-element-focus-color: var(--accent);
|
|
76
|
+
--pico-switch-background-color: #c8c4bc;
|
|
77
|
+
--pico-switch-checked-background-color: var(--accent);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* --- Custom Properties: Dark --- */
|
|
3
81
|
@media (prefers-color-scheme: dark) {
|
|
4
|
-
:root {
|
|
82
|
+
:root {
|
|
83
|
+
--accent: #fb923c;
|
|
84
|
+
--accent-hover: #f97316;
|
|
85
|
+
--accent-glow: rgba(251, 146, 60, 0.18);
|
|
86
|
+
|
|
87
|
+
--surface-0: #100f0d;
|
|
88
|
+
--surface-1: #1b1917;
|
|
89
|
+
--surface-2: #272420;
|
|
90
|
+
--surface-border: rgba(255, 255, 255, 0.07);
|
|
91
|
+
|
|
92
|
+
--text-primary: #e7e0d8;
|
|
93
|
+
--text-secondary: #8a8279;
|
|
94
|
+
--text-muted: #5c564f;
|
|
95
|
+
|
|
96
|
+
--chat-user-bg: rgba(249, 115, 22, 0.1);
|
|
97
|
+
--chat-active-bg: rgba(249, 115, 22, 0.08);
|
|
98
|
+
|
|
99
|
+
--shadow-xs: 0 1px 2px rgba(0,0,0,0.15);
|
|
100
|
+
--shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
|
|
101
|
+
--shadow-md: 0 4px 12px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
|
|
102
|
+
--shadow-lg: 0 10px 30px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
|
|
103
|
+
}
|
|
104
|
+
:root:not([data-theme=light]) {
|
|
105
|
+
--pico-background-color: var(--surface-0);
|
|
106
|
+
--pico-card-background-color: var(--surface-1);
|
|
107
|
+
--pico-card-sectioning-background-color: var(--surface-1);
|
|
108
|
+
--pico-muted-border-color: var(--surface-border);
|
|
109
|
+
--pico-color: var(--text-primary);
|
|
110
|
+
--pico-muted-color: var(--text-secondary);
|
|
111
|
+
--pico-primary: var(--accent);
|
|
112
|
+
--pico-primary-hover: var(--accent-hover);
|
|
113
|
+
--pico-primary-background: var(--accent);
|
|
114
|
+
--pico-primary-border: var(--accent);
|
|
115
|
+
--pico-primary-hover-background: var(--accent-hover);
|
|
116
|
+
--pico-primary-hover-border: var(--accent-hover);
|
|
117
|
+
--pico-primary-focus: var(--accent-glow);
|
|
118
|
+
--pico-primary-underline: var(--accent);
|
|
119
|
+
--pico-primary-inverse: #fff;
|
|
120
|
+
--pico-secondary: var(--text-secondary);
|
|
121
|
+
--pico-secondary-hover: var(--text-primary);
|
|
122
|
+
--pico-code-background-color: rgba(255, 255, 255, 0.06);
|
|
123
|
+
--pico-dropdown-hover-background-color: var(--surface-2);
|
|
124
|
+
/* Form elements — warm instead of Pico's blue-tinted defaults */
|
|
125
|
+
--pico-form-element-background-color: var(--surface-1);
|
|
126
|
+
--pico-form-element-selected-background-color: var(--surface-2);
|
|
127
|
+
--pico-form-element-border-color: #3d3830;
|
|
128
|
+
--pico-form-element-color: var(--text-primary);
|
|
129
|
+
--pico-form-element-active-background-color: #1f1c19;
|
|
130
|
+
--pico-form-element-active-border-color: var(--accent);
|
|
131
|
+
--pico-form-element-focus-color: var(--accent);
|
|
132
|
+
--pico-switch-background-color: #4a443c;
|
|
133
|
+
--pico-switch-checked-background-color: var(--accent);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* --- Scrollbar --- */
|
|
138
|
+
* { scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
|
|
139
|
+
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
140
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
141
|
+
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }
|
|
142
|
+
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
|
143
|
+
|
|
144
|
+
/* --- Animations --- */
|
|
145
|
+
@keyframes fadeUp {
|
|
146
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
147
|
+
to { opacity: 1; transform: translateY(0); }
|
|
148
|
+
}
|
|
149
|
+
@keyframes fadeIn {
|
|
150
|
+
from { opacity: 0; }
|
|
151
|
+
to { opacity: 1; }
|
|
152
|
+
}
|
|
153
|
+
@keyframes dotBounce {
|
|
154
|
+
0%, 60%, 100% { transform: translateY(0); opacity: 0.25; }
|
|
155
|
+
30% { transform: translateY(-6px); opacity: 0.8; }
|
|
156
|
+
}
|
|
157
|
+
@keyframes breathe {
|
|
158
|
+
0%, 100% { opacity: 0.4; }
|
|
159
|
+
50% { opacity: 1; }
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* --- Base --- */
|
|
163
|
+
body {
|
|
164
|
+
margin: 0; padding: 0;
|
|
165
|
+
height: 100vh; height: 100dvh;
|
|
166
|
+
background: var(--surface-0);
|
|
167
|
+
color: var(--text-primary);
|
|
5
168
|
}
|
|
6
169
|
|
|
7
|
-
/*
|
|
170
|
+
/* --- Pico Resets: strip button chrome from utility buttons --- */
|
|
8
171
|
.btn-icon, .settings-btn, .hamburger-btn,
|
|
9
172
|
.file-upload-btn, .file-preview-remove,
|
|
10
173
|
.conversation-item .delete-btn,
|
|
@@ -13,245 +176,606 @@
|
|
|
13
176
|
color: inherit; width: auto; margin-bottom: 0;
|
|
14
177
|
}
|
|
15
178
|
|
|
16
|
-
/*
|
|
179
|
+
/* Pico adds margins/widths to form elements inside layouts */
|
|
17
180
|
.chat-layout h2 { margin: 0; }
|
|
18
181
|
.chat-layout input, .chat-layout textarea, .chat-layout select, .chat-layout button {
|
|
19
182
|
width: auto; margin-bottom: 0;
|
|
20
183
|
}
|
|
21
184
|
.input-row textarea { width: auto; }
|
|
22
185
|
|
|
23
|
-
body {
|
|
24
|
-
margin: 0; padding: 0;
|
|
25
|
-
height: 100vh; height: 100dvh;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* Setup page — constrain width and font size for desktop */
|
|
29
|
-
.container { max-width: 640px; }
|
|
30
|
-
.status-msg { margin-top: 12px; padding: 10px; border-radius: 8px; font-size: 14px; }
|
|
31
|
-
.status-msg.error { background: #fee; color: #c00; }
|
|
32
|
-
.status-msg.success { background: #efe; color: #060; }
|
|
33
|
-
|
|
34
|
-
/* MCP servers editor */
|
|
35
|
-
.mcp-servers { margin-top: 8px; }
|
|
36
|
-
#addServerBtn { margin-bottom: 2rem; }
|
|
37
|
-
.mcp-server-header { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
|
|
38
|
-
.mcp-server-header input { flex: 1; font-weight: 600; }
|
|
39
186
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
.mcp-server-header .btn-icon:hover, .env-row .btn-icon:hover { color: #c00; background: #fee; border-color: #fcc; }
|
|
187
|
+
/* ====================================
|
|
188
|
+
CHAT PAGE
|
|
189
|
+
==================================== */
|
|
44
190
|
|
|
45
|
-
/* Chat page */
|
|
46
191
|
.chat-layout { display: flex; height: 100vh; height: 100dvh; }
|
|
47
192
|
|
|
193
|
+
/* ---- Sidebar ---- */
|
|
48
194
|
.sidebar {
|
|
49
|
-
width: 260px;
|
|
195
|
+
width: 260px;
|
|
196
|
+
background: var(--surface-1);
|
|
197
|
+
border-right: 1px solid var(--surface-border);
|
|
50
198
|
display: flex; flex-direction: column; flex-shrink: 0;
|
|
51
199
|
}
|
|
200
|
+
|
|
52
201
|
.sidebar-header {
|
|
53
|
-
padding: 16px
|
|
202
|
+
padding: 16px 16px 14px;
|
|
203
|
+
border-bottom: 1px solid var(--surface-border);
|
|
54
204
|
display: flex; justify-content: space-between; align-items: center;
|
|
55
205
|
}
|
|
56
|
-
.sidebar-header h2 {
|
|
57
|
-
|
|
206
|
+
.sidebar-header h2 {
|
|
207
|
+
font-size: 11.5px;
|
|
208
|
+
font-weight: 650;
|
|
209
|
+
text-transform: uppercase;
|
|
210
|
+
letter-spacing: 0.08em;
|
|
211
|
+
color: var(--text-muted);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* New-chat "+" button */
|
|
215
|
+
#newChatBtn {
|
|
216
|
+
width: 30px; height: 30px;
|
|
217
|
+
display: flex; align-items: center; justify-content: center;
|
|
218
|
+
border-radius: 8px !important;
|
|
219
|
+
font-size: 18px; line-height: 1;
|
|
220
|
+
color: var(--accent);
|
|
221
|
+
border: 1px solid var(--surface-border) !important;
|
|
222
|
+
cursor: pointer;
|
|
223
|
+
transition: all 0.2s ease;
|
|
224
|
+
}
|
|
225
|
+
#newChatBtn:hover {
|
|
226
|
+
background: var(--accent) !important;
|
|
227
|
+
color: #fff !important;
|
|
228
|
+
border-color: var(--accent) !important;
|
|
229
|
+
transform: scale(1.05);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.conversation-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
|
|
233
|
+
|
|
58
234
|
.conversation-item {
|
|
59
|
-
padding: 10px 12px;
|
|
60
|
-
|
|
235
|
+
padding: 10px 12px;
|
|
236
|
+
border-radius: 10px;
|
|
237
|
+
cursor: pointer;
|
|
238
|
+
font-size: 13px;
|
|
239
|
+
font-weight: 450;
|
|
240
|
+
margin-bottom: 2px;
|
|
241
|
+
display: flex; align-items: center; gap: 4px;
|
|
242
|
+
position: relative;
|
|
243
|
+
transition: all 0.15s ease;
|
|
61
244
|
}
|
|
62
245
|
.conversation-item .conv-title {
|
|
63
246
|
flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
|
|
64
247
|
}
|
|
248
|
+
|
|
65
249
|
.conversation-item .delete-btn {
|
|
66
|
-
display: none; flex-shrink: 0; font-size: 12px; padding: 2px 6px;
|
|
250
|
+
display: none; flex-shrink: 0; font-size: 12px; padding: 2px 6px;
|
|
251
|
+
color: var(--text-muted);
|
|
252
|
+
border-radius: 6px;
|
|
253
|
+
transition: all 0.15s ease;
|
|
254
|
+
}
|
|
255
|
+
.conversation-item .delete-btn:hover {
|
|
256
|
+
color: #dc2626; background: rgba(220, 38, 38, 0.08);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.conversation-item:hover {
|
|
260
|
+
background: var(--surface-2);
|
|
261
|
+
color: var(--text-primary);
|
|
67
262
|
}
|
|
68
|
-
.conversation-item .delete-btn:hover { color: #c00; background: #fee; border-color: #fcc; }
|
|
69
|
-
.conversation-item:hover { background: var(--pico-dropdown-hover-background-color); color: var(--pico-color); }
|
|
70
263
|
.conversation-item:hover .delete-btn { display: inline-block; }
|
|
71
|
-
.conversation-item.active { background: var(--chat-active-bg); color: var(--pico-color); }
|
|
72
264
|
|
|
73
|
-
.
|
|
265
|
+
.conversation-item.active {
|
|
266
|
+
background: var(--chat-active-bg);
|
|
267
|
+
color: var(--text-primary);
|
|
268
|
+
font-weight: 550;
|
|
269
|
+
}
|
|
270
|
+
/* Orange accent bar on active conversation */
|
|
271
|
+
.conversation-item.active::before {
|
|
272
|
+
content: '';
|
|
273
|
+
position: absolute; left: 0; top: 50%;
|
|
274
|
+
transform: translateY(-50%);
|
|
275
|
+
width: 3px; height: 18px;
|
|
276
|
+
background: var(--accent);
|
|
277
|
+
border-radius: 0 3px 3px 0;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* ---- Chat Main ---- */
|
|
281
|
+
.chat-main {
|
|
282
|
+
flex: 1; display: flex; flex-direction: column;
|
|
283
|
+
min-height: 0; overflow: hidden;
|
|
284
|
+
background: var(--surface-0);
|
|
285
|
+
}
|
|
74
286
|
|
|
287
|
+
/* ---- Chat Header ---- */
|
|
75
288
|
.chat-header {
|
|
76
|
-
padding:
|
|
289
|
+
padding: 0 20px;
|
|
290
|
+
border-bottom: 1px solid var(--surface-border);
|
|
291
|
+
background: var(--surface-0);
|
|
292
|
+
height: 56px;
|
|
77
293
|
display: flex; justify-content: space-between; align-items: center;
|
|
78
294
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
295
|
+
.chat-header h2 {
|
|
296
|
+
font-size: 15px;
|
|
297
|
+
font-weight: 600;
|
|
298
|
+
color: var(--text-primary);
|
|
83
299
|
}
|
|
84
|
-
|
|
85
|
-
.chat-header h2 { font-size: 16px; }
|
|
300
|
+
|
|
86
301
|
.settings-btn {
|
|
87
|
-
cursor: pointer; font-size:
|
|
88
|
-
border-radius:
|
|
302
|
+
cursor: pointer; font-size: 18px; padding: 6px 8px;
|
|
303
|
+
border-radius: 8px;
|
|
304
|
+
color: var(--text-secondary);
|
|
305
|
+
transition: all 0.15s ease;
|
|
306
|
+
}
|
|
307
|
+
.settings-btn:hover {
|
|
308
|
+
background: var(--surface-2);
|
|
309
|
+
color: var(--text-primary);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* ---- Empty State ---- */
|
|
313
|
+
.empty-state {
|
|
314
|
+
display: flex; flex-direction: column;
|
|
315
|
+
align-items: center; justify-content: center;
|
|
316
|
+
height: 100%; gap: 20px;
|
|
317
|
+
animation: fadeIn 0.8s ease;
|
|
318
|
+
}
|
|
319
|
+
.empty-state-logo { height: 60px; width: auto; opacity: 0.2; }
|
|
320
|
+
.empty-state-text {
|
|
321
|
+
font-family: var(--font-display);
|
|
322
|
+
font-style: italic;
|
|
323
|
+
font-size: 22px;
|
|
324
|
+
color: var(--text-muted);
|
|
325
|
+
margin: 0;
|
|
326
|
+
letter-spacing: -0.01em;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
/* ---- Messages ---- */
|
|
330
|
+
.messages { flex: 1; overflow-y: auto; padding: 24px 20px; }
|
|
331
|
+
|
|
332
|
+
.message {
|
|
333
|
+
max-width: 720px;
|
|
334
|
+
margin: 0 auto 16px;
|
|
335
|
+
padding: 14px 18px;
|
|
336
|
+
border-radius: 16px;
|
|
337
|
+
line-height: 1.6;
|
|
338
|
+
font-size: 14.5px;
|
|
339
|
+
animation: fadeUp 0.25s ease;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.message.user {
|
|
343
|
+
background: var(--chat-user-bg);
|
|
344
|
+
color: var(--text-primary);
|
|
345
|
+
margin-left: auto;
|
|
346
|
+
max-width: 480px;
|
|
347
|
+
border-bottom-right-radius: 6px;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.message.assistant {
|
|
351
|
+
background: var(--surface-1);
|
|
352
|
+
border: 1px solid var(--surface-border);
|
|
353
|
+
box-shadow: var(--shadow-xs);
|
|
89
354
|
}
|
|
90
|
-
.settings-btn:hover { background: var(--pico-dropdown-hover-background-color); }
|
|
91
355
|
|
|
92
|
-
|
|
93
|
-
.message {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
356
|
+
/* Message typography */
|
|
357
|
+
.message pre {
|
|
358
|
+
background: var(--pico-code-background-color);
|
|
359
|
+
padding: 14px 16px;
|
|
360
|
+
border-radius: 10px;
|
|
361
|
+
overflow-x: auto;
|
|
362
|
+
margin: 10px 0;
|
|
363
|
+
border: 1px solid var(--surface-border);
|
|
364
|
+
}
|
|
365
|
+
.message code {
|
|
366
|
+
font-family: var(--font-mono);
|
|
367
|
+
font-size: 13px;
|
|
368
|
+
}
|
|
369
|
+
.message :not(pre) > code {
|
|
370
|
+
background: var(--pico-code-background-color);
|
|
371
|
+
padding: 2px 6px;
|
|
372
|
+
border-radius: 5px;
|
|
373
|
+
font-size: 0.88em;
|
|
374
|
+
}
|
|
98
375
|
.message ul, .message ol { padding-left: 1.5em; margin: 8px 0; }
|
|
99
376
|
.message li { margin: 4px 0; }
|
|
100
377
|
.message p { margin: 8px 0; }
|
|
101
378
|
.message p:first-child { margin-top: 0; }
|
|
102
379
|
.message p:last-child { margin-bottom: 0; }
|
|
103
|
-
.message h1, .message h2, .message h3, .message h4 {
|
|
104
|
-
|
|
380
|
+
.message h1, .message h2, .message h3, .message h4 {
|
|
381
|
+
margin: 16px 0 8px;
|
|
382
|
+
font-weight: 650;
|
|
383
|
+
}
|
|
384
|
+
.message h1:first-child, .message h2:first-child,
|
|
385
|
+
.message h3:first-child, .message h4:first-child { margin-top: 0; }
|
|
386
|
+
.message blockquote {
|
|
387
|
+
border-left: 3px solid var(--accent);
|
|
388
|
+
padding-left: 14px;
|
|
389
|
+
margin: 10px 0;
|
|
390
|
+
color: var(--text-secondary);
|
|
391
|
+
font-style: italic;
|
|
392
|
+
}
|
|
393
|
+
.message a {
|
|
394
|
+
color: var(--accent);
|
|
395
|
+
text-decoration: underline;
|
|
396
|
+
text-underline-offset: 2px;
|
|
397
|
+
text-decoration-thickness: 1px;
|
|
398
|
+
}
|
|
399
|
+
.message a:hover { color: var(--accent-hover); }
|
|
400
|
+
.message table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
|
|
401
|
+
.message th, .message td { padding: 8px 12px; border: 1px solid var(--surface-border); text-align: left; }
|
|
402
|
+
.message th { background: var(--surface-2); font-weight: 600; }
|
|
403
|
+
.message hr { border: none; border-top: 1px solid var(--surface-border); margin: 16px 0; }
|
|
404
|
+
.message img { max-width: 100%; border-radius: 8px; }
|
|
405
|
+
|
|
406
|
+
/* ---- Typing Indicator (animated dots) ---- */
|
|
407
|
+
.typing-indicator {
|
|
408
|
+
display: flex; gap: 5px; align-items: center;
|
|
409
|
+
padding: 12px 20px;
|
|
410
|
+
max-width: 720px; margin: 0 auto;
|
|
411
|
+
}
|
|
412
|
+
.typing-indicator span {
|
|
413
|
+
width: 7px; height: 7px;
|
|
414
|
+
border-radius: 50%;
|
|
415
|
+
background: var(--accent);
|
|
416
|
+
animation: dotBounce 1.4s ease-in-out infinite;
|
|
417
|
+
}
|
|
418
|
+
.typing-indicator span:nth-child(2) { animation-delay: 0.16s; }
|
|
419
|
+
.typing-indicator span:nth-child(3) { animation-delay: 0.32s; }
|
|
105
420
|
|
|
421
|
+
/* ---- Input Area ---- */
|
|
106
422
|
.input-area {
|
|
107
|
-
padding:
|
|
423
|
+
padding: 12px 20px 20px;
|
|
424
|
+
background: var(--surface-0);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.input-row {
|
|
428
|
+
display: flex; gap: 6px; align-items: flex-end;
|
|
429
|
+
max-width: 720px; margin: 0 auto;
|
|
430
|
+
background: var(--surface-1);
|
|
431
|
+
border: 1px solid var(--surface-border);
|
|
432
|
+
border-radius: 18px;
|
|
433
|
+
padding: 6px 6px 6px 4px;
|
|
434
|
+
box-shadow: var(--shadow-sm);
|
|
435
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
108
436
|
}
|
|
109
|
-
.input-row
|
|
437
|
+
.input-row:focus-within {
|
|
438
|
+
border-color: var(--accent);
|
|
439
|
+
box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-glow);
|
|
440
|
+
}
|
|
441
|
+
|
|
110
442
|
.input-row textarea,
|
|
111
443
|
.setup-chat-input-row textarea {
|
|
112
|
-
flex: 1;
|
|
113
|
-
|
|
114
|
-
|
|
444
|
+
flex: 1;
|
|
445
|
+
padding: 8px 12px;
|
|
446
|
+
border: none !important;
|
|
447
|
+
border-radius: 14px;
|
|
448
|
+
resize: none;
|
|
449
|
+
font-family: var(--font-body);
|
|
450
|
+
min-height: 40px; max-height: 200px;
|
|
451
|
+
background: transparent !important;
|
|
452
|
+
color: var(--text-primary);
|
|
453
|
+
font-size: 14.5px;
|
|
454
|
+
line-height: 1.5;
|
|
115
455
|
}
|
|
116
|
-
.input-row textarea { font-size: 14px; }
|
|
117
456
|
.input-row textarea:focus,
|
|
118
|
-
.setup-chat-input-row textarea:focus { outline: none;
|
|
119
|
-
|
|
120
|
-
.
|
|
457
|
+
.setup-chat-input-row textarea:focus { outline: none; box-shadow: none; }
|
|
458
|
+
.input-row textarea::placeholder,
|
|
459
|
+
.setup-chat-input-row textarea::placeholder { color: var(--text-muted); }
|
|
460
|
+
.input-row textarea { font-size: 14.5px; }
|
|
461
|
+
|
|
462
|
+
/* Send button */
|
|
463
|
+
.input-row .btn-primary,
|
|
464
|
+
.input-row #sendBtn {
|
|
465
|
+
background: var(--accent) !important;
|
|
466
|
+
color: #fff !important;
|
|
467
|
+
border: none !important;
|
|
468
|
+
border-radius: 12px !important;
|
|
469
|
+
padding: 9px 20px !important;
|
|
470
|
+
font-family: var(--font-body) !important;
|
|
471
|
+
font-weight: 600 !important;
|
|
472
|
+
font-size: 13.5px !important;
|
|
473
|
+
cursor: pointer;
|
|
474
|
+
transition: all 0.15s ease;
|
|
475
|
+
box-shadow: none !important;
|
|
476
|
+
line-height: 1.4;
|
|
477
|
+
flex-shrink: 0;
|
|
478
|
+
}
|
|
479
|
+
.input-row .btn-primary:hover,
|
|
480
|
+
.input-row #sendBtn:hover {
|
|
481
|
+
background: var(--accent-hover) !important;
|
|
482
|
+
transform: translateY(-1px);
|
|
483
|
+
}
|
|
121
484
|
|
|
122
|
-
/* File
|
|
485
|
+
/* ---- File Upload ---- */
|
|
123
486
|
.file-upload-btn {
|
|
124
|
-
border:
|
|
125
|
-
|
|
487
|
+
border: none !important;
|
|
488
|
+
border-radius: 10px;
|
|
489
|
+
cursor: pointer;
|
|
490
|
+
font-size: 18px;
|
|
491
|
+
padding: 8px 10px;
|
|
492
|
+
flex-shrink: 0;
|
|
493
|
+
line-height: 1;
|
|
494
|
+
color: var(--text-muted) !important;
|
|
495
|
+
transition: all 0.15s ease;
|
|
496
|
+
}
|
|
497
|
+
.file-upload-btn:hover {
|
|
498
|
+
background: var(--surface-2) !important;
|
|
499
|
+
color: var(--text-primary) !important;
|
|
126
500
|
}
|
|
127
|
-
.file-upload-btn:hover { background: var(--pico-dropdown-hover-background-color) !important; border-color: var(--pico-muted-border-color) !important; }
|
|
128
501
|
|
|
129
502
|
.file-preview {
|
|
130
|
-
display: none; gap: 8px; padding: 8px 0;
|
|
503
|
+
display: none; gap: 8px; padding: 8px 0;
|
|
504
|
+
max-width: 720px; margin: 0 auto;
|
|
131
505
|
overflow-x: auto; flex-wrap: nowrap;
|
|
132
506
|
}
|
|
133
507
|
.file-preview-item {
|
|
134
|
-
position: relative; width: 64px; height: 64px; flex-shrink: 0;
|
|
135
|
-
|
|
508
|
+
position: relative; width: 64px; height: 64px; flex-shrink: 0;
|
|
509
|
+
border-radius: 10px; overflow: hidden;
|
|
510
|
+
border: 1px solid var(--surface-border);
|
|
511
|
+
box-shadow: var(--shadow-xs);
|
|
136
512
|
}
|
|
137
513
|
.file-preview-item img { width: 100%; height: 100%; object-fit: cover; }
|
|
138
514
|
.file-preview-remove {
|
|
139
|
-
position: absolute; top:
|
|
140
|
-
|
|
141
|
-
|
|
515
|
+
position: absolute; top: 3px; right: 3px;
|
|
516
|
+
background: rgba(0,0,0,0.55) !important; color: #fff !important;
|
|
517
|
+
border-radius: 50%; width: 20px; height: 20px;
|
|
518
|
+
font-size: 12px; cursor: pointer;
|
|
519
|
+
line-height: 1; padding: 0;
|
|
520
|
+
display: flex; align-items: center; justify-content: center;
|
|
521
|
+
transition: background 0.15s ease;
|
|
142
522
|
}
|
|
523
|
+
.file-preview-remove:hover { background: rgba(0,0,0,0.75) !important; }
|
|
524
|
+
|
|
525
|
+
.message-attachments { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
|
|
526
|
+
.attachment-img {
|
|
527
|
+
max-width: 300px; max-height: 300px;
|
|
528
|
+
border-radius: 10px; cursor: pointer;
|
|
529
|
+
box-shadow: var(--shadow-sm);
|
|
530
|
+
transition: transform 0.2s ease;
|
|
531
|
+
}
|
|
532
|
+
.attachment-img:hover { transform: scale(1.02); }
|
|
143
533
|
|
|
144
|
-
|
|
145
|
-
.attachment-img { max-width: 300px; max-height: 300px; border-radius: 8px; cursor: pointer; }
|
|
146
|
-
|
|
147
|
-
/* Hamburger button — hidden on desktop */
|
|
534
|
+
/* ---- Hamburger & Overlay (mobile) ---- */
|
|
148
535
|
.hamburger-btn {
|
|
149
536
|
display: none; cursor: pointer;
|
|
150
|
-
font-size:
|
|
537
|
+
font-size: 20px; padding: 6px 8px;
|
|
538
|
+
border-radius: 8px; flex-shrink: 0;
|
|
539
|
+
color: var(--text-secondary);
|
|
540
|
+
transition: all 0.15s ease;
|
|
541
|
+
}
|
|
542
|
+
.hamburger-btn:hover {
|
|
543
|
+
background: var(--surface-2);
|
|
544
|
+
color: var(--text-primary);
|
|
151
545
|
}
|
|
152
|
-
.hamburger-btn:hover { background: var(--pico-dropdown-hover-background-color); }
|
|
153
546
|
|
|
154
|
-
/* Sidebar overlay — hidden by default */
|
|
155
547
|
.sidebar-overlay {
|
|
156
|
-
display: none; position: fixed; inset: 0;
|
|
548
|
+
display: none; position: fixed; inset: 0;
|
|
549
|
+
background: rgba(0,0,0,0.3);
|
|
550
|
+
z-index: 9;
|
|
551
|
+
backdrop-filter: blur(4px);
|
|
552
|
+
-webkit-backdrop-filter: blur(4px);
|
|
157
553
|
}
|
|
158
|
-
.sidebar-overlay.open { display: block; }
|
|
554
|
+
.sidebar-overlay.open { display: block; animation: fadeIn 0.2s ease; }
|
|
159
555
|
|
|
160
|
-
/* 480px breakpoint for MCP env rows on small screens */
|
|
161
|
-
@media (max-width: 480px) {
|
|
162
|
-
.env-row { flex-direction: column; gap: 4px; }
|
|
163
|
-
.env-row input { width: 100%; }
|
|
164
|
-
}
|
|
165
556
|
|
|
166
|
-
/*
|
|
167
|
-
|
|
168
|
-
|
|
557
|
+
/* ====================================
|
|
558
|
+
SETUP PAGE
|
|
559
|
+
==================================== */
|
|
169
560
|
|
|
170
|
-
|
|
171
|
-
position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
|
|
172
|
-
transform: translateX(-100%); transition: transform 0.25s ease;
|
|
173
|
-
z-index: 10;
|
|
174
|
-
}
|
|
175
|
-
.sidebar.open { transform: translateX(0); }
|
|
561
|
+
.container { max-width: 640px; }
|
|
176
562
|
|
|
177
|
-
|
|
563
|
+
/* Setup form headings */
|
|
564
|
+
.setup-form h1 {
|
|
565
|
+
font-family: var(--font-display);
|
|
566
|
+
font-weight: 400;
|
|
567
|
+
font-size: 30px;
|
|
568
|
+
letter-spacing: -0.01em;
|
|
569
|
+
}
|
|
178
570
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
571
|
+
.status-msg {
|
|
572
|
+
margin-top: 12px; padding: 12px 16px;
|
|
573
|
+
border-radius: 10px; font-size: 14px;
|
|
574
|
+
font-weight: 500;
|
|
575
|
+
}
|
|
576
|
+
.status-msg.error {
|
|
577
|
+
background: #fef2f2; color: #dc2626;
|
|
578
|
+
border: 1px solid rgba(220, 38, 38, 0.12);
|
|
579
|
+
}
|
|
580
|
+
.status-msg.success {
|
|
581
|
+
background: #f0fdf4; color: #16a34a;
|
|
582
|
+
border: 1px solid rgba(22, 163, 74, 0.12);
|
|
583
|
+
}
|
|
182
584
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
585
|
+
/* MCP servers editor */
|
|
586
|
+
.mcp-servers { margin-top: 8px; }
|
|
587
|
+
#addServerBtn { margin-bottom: 2rem; }
|
|
588
|
+
.mcp-server-header { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
|
|
589
|
+
.mcp-server-header input { flex: 1; font-weight: 600; }
|
|
186
590
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
.input-row textarea { font-size: 16px; }
|
|
591
|
+
.env-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
|
|
592
|
+
.env-row input { flex: 1; }
|
|
190
593
|
|
|
191
|
-
|
|
594
|
+
.btn-icon {
|
|
595
|
+
border: 1px solid var(--surface-border);
|
|
596
|
+
border-radius: 8px;
|
|
597
|
+
padding: 4px 8px;
|
|
598
|
+
cursor: pointer;
|
|
599
|
+
font-size: 16px;
|
|
600
|
+
transition: all 0.15s ease;
|
|
192
601
|
}
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
.status-msg.success { background: #1a3a1a; color: #8f8; }
|
|
198
|
-
.conversation-item .delete-btn:hover, .mcp-server-header .btn-icon:hover, .env-row .btn-icon:hover { color: #f88; background: #3a1a1a; border-color: #522; }
|
|
602
|
+
.mcp-server-header .btn-icon:hover, .env-row .btn-icon:hover {
|
|
603
|
+
color: #dc2626;
|
|
604
|
+
background: rgba(220, 38, 38, 0.06);
|
|
605
|
+
border-color: rgba(220, 38, 38, 0.2);
|
|
199
606
|
}
|
|
200
607
|
|
|
201
|
-
/*
|
|
202
|
-
|
|
203
|
-
/* Side-by-side on desktop */
|
|
608
|
+
/* ---- Setup Layout: Side-by-Side ---- */
|
|
204
609
|
.setup-layout { display: flex; height: 100vh; height: 100dvh; }
|
|
205
610
|
.setup-form { flex: 1; overflow-y: auto; }
|
|
206
611
|
.setup-form .container { max-width: 640px; }
|
|
207
612
|
|
|
208
|
-
/* Chat
|
|
613
|
+
/* ---- Setup Chat Panel ---- */
|
|
209
614
|
.setup-chat {
|
|
210
615
|
width: 400px; flex-shrink: 0;
|
|
211
616
|
display: flex; flex-direction: column;
|
|
212
|
-
border-left: 1px solid var(--
|
|
213
|
-
background: var(--
|
|
617
|
+
border-left: 1px solid var(--surface-border);
|
|
618
|
+
background: var(--surface-0);
|
|
214
619
|
}
|
|
215
620
|
.setup-chat-header {
|
|
216
|
-
padding:
|
|
621
|
+
padding: 14px 16px;
|
|
622
|
+
border-bottom: 1px solid var(--surface-border);
|
|
217
623
|
display: flex; justify-content: space-between; align-items: center;
|
|
218
624
|
}
|
|
219
|
-
.setup-chat-header h3 {
|
|
625
|
+
.setup-chat-header h3 {
|
|
626
|
+
margin: 0; font-size: 15px; font-weight: 600;
|
|
627
|
+
}
|
|
220
628
|
.setup-chat-close {
|
|
221
629
|
font-size: 20px; cursor: pointer;
|
|
222
|
-
color: var(--
|
|
630
|
+
color: var(--text-muted); padding: 4px 8px;
|
|
631
|
+
border-radius: 8px;
|
|
632
|
+
transition: all 0.15s ease;
|
|
633
|
+
}
|
|
634
|
+
.setup-chat-close:hover {
|
|
635
|
+
background: var(--surface-2);
|
|
636
|
+
color: var(--text-primary);
|
|
223
637
|
}
|
|
638
|
+
|
|
224
639
|
.setup-chat-messages { flex: 1; overflow-y: auto; padding: 16px; }
|
|
225
640
|
.setup-chat-messages .message { max-width: 100%; font-size: 14px; }
|
|
226
641
|
.setup-chat-messages .message.user { max-width: 85%; }
|
|
227
|
-
.setup-chat-input { padding: 12px; border-top: 1px solid var(--pico-muted-border-color); }
|
|
228
|
-
.setup-chat-input-row { display: flex; gap: 8px; }
|
|
229
|
-
.setup-chat-input-row textarea { font-size: 16px; width: auto; margin-bottom: 0; }
|
|
230
|
-
.setup-chat-input-row button { flex-shrink: 0; margin-bottom: 0; }
|
|
231
642
|
|
|
232
|
-
|
|
643
|
+
.setup-chat-input { padding: 12px; border-top: 1px solid var(--surface-border); }
|
|
644
|
+
.setup-chat-input-row {
|
|
645
|
+
display: flex; gap: 8px;
|
|
646
|
+
background: var(--surface-1);
|
|
647
|
+
border: 1px solid var(--surface-border);
|
|
648
|
+
border-radius: 14px;
|
|
649
|
+
padding: 4px 4px 4px 2px;
|
|
650
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
651
|
+
}
|
|
652
|
+
.setup-chat-input-row:focus-within {
|
|
653
|
+
border-color: var(--accent);
|
|
654
|
+
box-shadow: 0 0 0 3px var(--accent-glow);
|
|
655
|
+
}
|
|
656
|
+
.setup-chat-input-row textarea {
|
|
657
|
+
font-size: 14px; width: auto; margin-bottom: 0;
|
|
658
|
+
border: none !important; background: transparent !important;
|
|
659
|
+
padding: 8px 10px;
|
|
660
|
+
min-height: 36px;
|
|
661
|
+
}
|
|
662
|
+
.setup-chat-input-row button {
|
|
663
|
+
flex-shrink: 0; margin-bottom: 0;
|
|
664
|
+
background: var(--accent) !important;
|
|
665
|
+
color: #fff !important;
|
|
666
|
+
border: none !important;
|
|
667
|
+
border-radius: 10px !important;
|
|
668
|
+
padding: 8px 16px !important;
|
|
669
|
+
font-weight: 600 !important;
|
|
670
|
+
font-size: 13px !important;
|
|
671
|
+
cursor: pointer;
|
|
672
|
+
transition: background 0.15s ease;
|
|
673
|
+
box-shadow: none !important;
|
|
674
|
+
}
|
|
675
|
+
.setup-chat-input-row button:hover {
|
|
676
|
+
background: var(--accent-hover) !important;
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
/* Choice buttons for Q&A wizard */
|
|
233
680
|
.chat-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
|
|
234
681
|
.chat-choice-btn {
|
|
235
|
-
padding: 8px
|
|
236
|
-
border
|
|
237
|
-
|
|
682
|
+
padding: 8px 18px;
|
|
683
|
+
border-radius: 10px;
|
|
684
|
+
cursor: pointer;
|
|
685
|
+
border: 1px solid var(--accent);
|
|
686
|
+
color: var(--accent);
|
|
687
|
+
background: transparent;
|
|
688
|
+
font-family: var(--font-body);
|
|
689
|
+
font-size: 13px;
|
|
690
|
+
font-weight: 550;
|
|
238
691
|
width: auto; margin-bottom: 0; box-shadow: none;
|
|
692
|
+
transition: all 0.2s ease;
|
|
693
|
+
}
|
|
694
|
+
.chat-choice-btn:hover {
|
|
695
|
+
background: var(--accent);
|
|
696
|
+
color: #fff;
|
|
697
|
+
transform: translateY(-1px);
|
|
698
|
+
box-shadow: var(--shadow-sm);
|
|
239
699
|
}
|
|
240
|
-
.chat-choice-btn:hover { background: var(--pico-primary); color: var(--pico-primary-inverse); }
|
|
241
700
|
|
|
242
|
-
/* Chat open button */
|
|
243
701
|
.chat-open-btn { margin-bottom: 1.5rem; }
|
|
244
702
|
|
|
245
|
-
|
|
703
|
+
|
|
704
|
+
/* ====================================
|
|
705
|
+
RESPONSIVE
|
|
706
|
+
==================================== */
|
|
707
|
+
|
|
708
|
+
/* Small screens: stack MCP env rows */
|
|
709
|
+
@media (max-width: 480px) {
|
|
710
|
+
.env-row { flex-direction: column; gap: 4px; }
|
|
711
|
+
.env-row input { width: 100%; }
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
/* Mobile layout */
|
|
246
715
|
@media (max-width: 768px) {
|
|
716
|
+
.hamburger-btn { display: block; }
|
|
717
|
+
|
|
718
|
+
.sidebar {
|
|
719
|
+
position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
|
|
720
|
+
transform: translateX(-100%);
|
|
721
|
+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
722
|
+
z-index: 10;
|
|
723
|
+
box-shadow: none;
|
|
724
|
+
}
|
|
725
|
+
.sidebar.open {
|
|
726
|
+
transform: translateX(0);
|
|
727
|
+
box-shadow: var(--shadow-lg);
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
.chat-main { width: 100%; }
|
|
731
|
+
.chat-header h2 {
|
|
732
|
+
overflow: hidden; text-overflow: ellipsis;
|
|
733
|
+
white-space: nowrap; min-width: 0; flex: 1;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
.messages { padding: 16px 12px; }
|
|
737
|
+
.message { max-width: 100%; }
|
|
738
|
+
.message.user { max-width: 85%; }
|
|
739
|
+
|
|
740
|
+
.input-area { padding: 10px 12px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
|
|
741
|
+
.input-row { max-width: 100%; border-radius: 16px; }
|
|
742
|
+
.input-row textarea { font-size: 16px; }
|
|
743
|
+
|
|
744
|
+
.conversation-item .delete-btn { display: inline-block; }
|
|
745
|
+
|
|
746
|
+
/* Setup mobile */
|
|
247
747
|
.setup-layout { flex-direction: column; }
|
|
248
748
|
.setup-form { flex: 1; }
|
|
249
749
|
.setup-chat {
|
|
250
750
|
position: fixed; top: 0; right: 0; bottom: 0; width: 100%;
|
|
251
|
-
transform: translateX(100%);
|
|
751
|
+
transform: translateX(100%);
|
|
752
|
+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
753
|
+
z-index: 15;
|
|
252
754
|
}
|
|
253
755
|
.setup-chat.open { transform: translateX(0); }
|
|
254
756
|
}
|
|
757
|
+
|
|
255
758
|
@media (min-width: 769px) {
|
|
256
759
|
.setup-chat.closed { display: none; }
|
|
257
760
|
}
|
|
761
|
+
|
|
762
|
+
/* ---- Dark mode status overrides ---- */
|
|
763
|
+
@media (prefers-color-scheme: dark) {
|
|
764
|
+
.status-msg.error {
|
|
765
|
+
background: rgba(220, 38, 38, 0.08);
|
|
766
|
+
color: #fca5a5;
|
|
767
|
+
border-color: rgba(220, 38, 38, 0.15);
|
|
768
|
+
}
|
|
769
|
+
.status-msg.success {
|
|
770
|
+
background: rgba(22, 163, 74, 0.08);
|
|
771
|
+
color: #86efac;
|
|
772
|
+
border-color: rgba(22, 163, 74, 0.15);
|
|
773
|
+
}
|
|
774
|
+
.conversation-item .delete-btn:hover,
|
|
775
|
+
.mcp-server-header .btn-icon:hover,
|
|
776
|
+
.env-row .btn-icon:hover {
|
|
777
|
+
color: #fca5a5;
|
|
778
|
+
background: rgba(220, 38, 38, 0.1);
|
|
779
|
+
border-color: rgba(220, 38, 38, 0.2);
|
|
780
|
+
}
|
|
781
|
+
}
|