agentgui 1.0.883 → 1.0.884
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/docs/screenshots/conversation-dark.png +0 -0
- package/docs/screenshots/home-light.png +0 -0
- package/package.json +1 -1
- package/scripts/capture-screenshots.mjs +17 -3
- package/static/css/main.css +777 -0
- package/static/index.html +0 -4
- package/static/css/ui-fixes-2.css +0 -179
- package/static/css/ui-fixes-3.css +0 -235
- package/static/css/ui-fixes-4.css +0 -156
- package/static/css/ui-fixes.css +0 -193
package/static/index.html
CHANGED
|
@@ -41,10 +41,6 @@
|
|
|
41
41
|
|
|
42
42
|
<link rel="stylesheet" href="/gm/css/main.css">
|
|
43
43
|
<link rel="stylesheet" href="/gm/css/tools-popup.css" media="print" onload="this.media='all'">
|
|
44
|
-
<link rel="stylesheet" href="/gm/css/ui-fixes.css">
|
|
45
|
-
<link rel="stylesheet" href="/gm/css/ui-fixes-2.css">
|
|
46
|
-
<link rel="stylesheet" href="/gm/css/ui-fixes-3.css">
|
|
47
|
-
<link rel="stylesheet" href="/gm/css/ui-fixes-4.css">
|
|
48
44
|
<link rel="stylesheet" href="/gm/css/gmail-skin.css">
|
|
49
45
|
</head>
|
|
50
46
|
<body>
|
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
/* =====================================================================
|
|
2
|
-
ui-fixes-2.css — Main panel, welcome screen, messages, input card
|
|
3
|
-
===================================================================== */
|
|
4
|
-
|
|
5
|
-
/* ---------- Main header: cleaner separation ---------- */
|
|
6
|
-
.main-header {
|
|
7
|
-
gap: 0.5rem;
|
|
8
|
-
padding: 0 0.75rem;
|
|
9
|
-
border-bottom: 1px solid var(--color-border);
|
|
10
|
-
}
|
|
11
|
-
.header-title {
|
|
12
|
-
font-size: 0.9375rem;
|
|
13
|
-
font-weight: 600;
|
|
14
|
-
color: var(--color-text-primary);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/* ---------- View toggle bar: pill tabs, not underline-in-void ---------- */
|
|
18
|
-
.view-toggle-bar {
|
|
19
|
-
gap: 0.25rem;
|
|
20
|
-
padding: 0.375rem 0.75rem;
|
|
21
|
-
background: var(--color-bg-primary);
|
|
22
|
-
border-bottom: 1px solid var(--color-border);
|
|
23
|
-
}
|
|
24
|
-
.view-toggle-btn {
|
|
25
|
-
padding: 0.375rem 0.625rem;
|
|
26
|
-
border-radius: var(--radius-sm);
|
|
27
|
-
border: none;
|
|
28
|
-
background: transparent;
|
|
29
|
-
color: var(--color-text-secondary);
|
|
30
|
-
min-height: 32px;
|
|
31
|
-
display: inline-flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
justify-content: center;
|
|
34
|
-
gap: 0.375rem;
|
|
35
|
-
}
|
|
36
|
-
.view-toggle-btn:hover {
|
|
37
|
-
background: var(--color-bg-hover);
|
|
38
|
-
color: var(--color-text-primary);
|
|
39
|
-
}
|
|
40
|
-
.view-toggle-btn.active {
|
|
41
|
-
background: rgba(59,130,246,0.1);
|
|
42
|
-
color: var(--color-primary);
|
|
43
|
-
border-bottom-color: transparent;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/* ---------- Welcome screen ---------- */
|
|
47
|
-
.main-panel > .welcome-screen {
|
|
48
|
-
display: flex;
|
|
49
|
-
flex-direction: column;
|
|
50
|
-
align-items: center;
|
|
51
|
-
justify-content: center;
|
|
52
|
-
gap: 0.75rem;
|
|
53
|
-
padding: 2rem 1.5rem;
|
|
54
|
-
text-align: center;
|
|
55
|
-
flex: 1;
|
|
56
|
-
min-height: 0;
|
|
57
|
-
overflow-y: auto;
|
|
58
|
-
}
|
|
59
|
-
.welcome-logo {
|
|
60
|
-
width: 72px;
|
|
61
|
-
height: 72px;
|
|
62
|
-
border-radius: var(--radius-xl);
|
|
63
|
-
background: linear-gradient(135deg, #3b82f6, #6366f1);
|
|
64
|
-
color: #fff;
|
|
65
|
-
font-size: 2.25rem;
|
|
66
|
-
font-weight: 700;
|
|
67
|
-
display: flex;
|
|
68
|
-
align-items: center;
|
|
69
|
-
justify-content: center;
|
|
70
|
-
box-shadow: var(--shadow-md);
|
|
71
|
-
margin-bottom: 0.5rem;
|
|
72
|
-
}
|
|
73
|
-
.welcome-title {
|
|
74
|
-
font-size: 1.75rem;
|
|
75
|
-
font-weight: 700;
|
|
76
|
-
margin: 0;
|
|
77
|
-
color: var(--color-text-primary);
|
|
78
|
-
}
|
|
79
|
-
.welcome-subtitle {
|
|
80
|
-
font-size: 0.9375rem;
|
|
81
|
-
color: var(--color-text-secondary);
|
|
82
|
-
margin: 0 0 1.5rem;
|
|
83
|
-
}
|
|
84
|
-
.welcome-agents-grid {
|
|
85
|
-
display: grid;
|
|
86
|
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
87
|
-
gap: 0.75rem;
|
|
88
|
-
width: 100%;
|
|
89
|
-
max-width: 720px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
/* Hide welcome when empty / conversation active */
|
|
93
|
-
.main-panel > .welcome-screen.hidden { display: none; }
|
|
94
|
-
|
|
95
|
-
/* #output-scroll needs to take remaining flex space */
|
|
96
|
-
.main-panel > #output-scroll {
|
|
97
|
-
display: flex;
|
|
98
|
-
flex-direction: column;
|
|
99
|
-
flex: 1;
|
|
100
|
-
min-height: 0;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/* ---------- Messages scroll: breathing room ---------- */
|
|
104
|
-
#output-scroll {
|
|
105
|
-
background: var(--color-bg-primary);
|
|
106
|
-
}
|
|
107
|
-
.messages-wrapper {
|
|
108
|
-
max-width: 860px;
|
|
109
|
-
margin: 0 auto;
|
|
110
|
-
padding: 1rem 1.25rem 1.5rem;
|
|
111
|
-
width: 100%;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
/* ---------- Streaming status bar: hidden by default, floating chip ---------- */
|
|
115
|
-
body .streaming-status-bar {
|
|
116
|
-
display: none !important;
|
|
117
|
-
align-items: center;
|
|
118
|
-
gap: 0.5rem;
|
|
119
|
-
padding: 0.5rem 0.875rem;
|
|
120
|
-
margin: 0 auto;
|
|
121
|
-
max-width: 860px;
|
|
122
|
-
background: var(--color-bg-secondary);
|
|
123
|
-
border: 1px solid var(--color-border);
|
|
124
|
-
border-radius: var(--radius-lg);
|
|
125
|
-
font-size: 0.8125rem;
|
|
126
|
-
color: var(--color-text-primary);
|
|
127
|
-
box-shadow: var(--shadow-sm);
|
|
128
|
-
}
|
|
129
|
-
body .streaming-status-bar.visible { display: flex !important; }
|
|
130
|
-
.streaming-status-bar .typing-dots {
|
|
131
|
-
display: inline-flex;
|
|
132
|
-
gap: 3px;
|
|
133
|
-
align-items: center;
|
|
134
|
-
}
|
|
135
|
-
.streaming-status-bar .typing-dots span {
|
|
136
|
-
width: 5px; height: 5px;
|
|
137
|
-
background: var(--color-primary);
|
|
138
|
-
border-radius: 50%;
|
|
139
|
-
animation: typingBlink 1.2s infinite ease-in-out both;
|
|
140
|
-
}
|
|
141
|
-
.streaming-status-bar .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
|
|
142
|
-
.streaming-status-bar .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
|
|
143
|
-
@keyframes typingBlink {
|
|
144
|
-
0%,80%,100% { opacity: 0.3; transform: scale(0.8); }
|
|
145
|
-
40% { opacity: 1; transform: scale(1); }
|
|
146
|
-
}
|
|
147
|
-
.status-agent-name { font-weight: 600; }
|
|
148
|
-
.status-cancel-btn {
|
|
149
|
-
margin-left: auto;
|
|
150
|
-
padding: 0.25rem 0.625rem;
|
|
151
|
-
background: transparent;
|
|
152
|
-
border: 1px solid var(--color-border);
|
|
153
|
-
border-radius: var(--radius-sm);
|
|
154
|
-
color: var(--color-text-secondary);
|
|
155
|
-
font-size: 0.75rem;
|
|
156
|
-
cursor: pointer;
|
|
157
|
-
}
|
|
158
|
-
.status-cancel-btn:hover {
|
|
159
|
-
border-color: var(--color-error);
|
|
160
|
-
color: var(--color-error);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
/* ---------- Drop zone overlay ---------- */
|
|
164
|
-
.drop-zone-overlay {
|
|
165
|
-
position: absolute;
|
|
166
|
-
inset: 0;
|
|
167
|
-
display: none;
|
|
168
|
-
align-items: center;
|
|
169
|
-
justify-content: center;
|
|
170
|
-
background: rgba(59,130,246,0.1);
|
|
171
|
-
border: 2px dashed var(--color-primary);
|
|
172
|
-
border-radius: var(--radius-lg);
|
|
173
|
-
pointer-events: none;
|
|
174
|
-
z-index: 10;
|
|
175
|
-
}
|
|
176
|
-
.drop-zone-overlay.active { display: flex; }
|
|
177
|
-
.drop-zone-content { text-align: center; color: var(--color-primary); }
|
|
178
|
-
.drop-zone-icon { font-size: 3rem; font-weight: 300; }
|
|
179
|
-
.drop-zone-text { font-size: 0.9375rem; font-weight: 500; }
|
|
@@ -1,235 +0,0 @@
|
|
|
1
|
-
/* =====================================================================
|
|
2
|
-
ui-fixes-3.css — Input card (modern bottom composer), mobile, tools popup
|
|
3
|
-
===================================================================== */
|
|
4
|
-
|
|
5
|
-
/* ---------- Input section: holds the card, proper bottom padding ---------- */
|
|
6
|
-
.input-section {
|
|
7
|
-
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
|
|
8
|
-
background: var(--color-bg-primary);
|
|
9
|
-
border-top: 1px solid var(--color-border);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* ---------- Input card: pill-shaped composer with toolbar ---------- */
|
|
13
|
-
.input-card {
|
|
14
|
-
max-width: 860px;
|
|
15
|
-
margin: 0 auto;
|
|
16
|
-
background: var(--color-bg-secondary);
|
|
17
|
-
border: 1px solid var(--color-border);
|
|
18
|
-
border-radius: var(--radius-lg);
|
|
19
|
-
padding: 0.5rem 0.625rem;
|
|
20
|
-
display: flex;
|
|
21
|
-
flex-direction: column;
|
|
22
|
-
gap: 0.375rem;
|
|
23
|
-
transition: border-color 0.15s, box-shadow 0.15s;
|
|
24
|
-
}
|
|
25
|
-
.input-card:focus-within {
|
|
26
|
-
border-color: var(--color-primary);
|
|
27
|
-
box-shadow: 0 0 0 3px var(--color-focus-ring);
|
|
28
|
-
}
|
|
29
|
-
.input-card-textarea {
|
|
30
|
-
width: 100%;
|
|
31
|
-
min-height: 36px;
|
|
32
|
-
max-height: 180px;
|
|
33
|
-
padding: 0.375rem 0.5rem;
|
|
34
|
-
background: transparent;
|
|
35
|
-
border: none;
|
|
36
|
-
outline: none;
|
|
37
|
-
resize: none;
|
|
38
|
-
color: var(--color-text-primary);
|
|
39
|
-
font-family: inherit;
|
|
40
|
-
font-size: 0.9375rem;
|
|
41
|
-
line-height: 1.5;
|
|
42
|
-
}
|
|
43
|
-
.input-card-textarea::placeholder { color: var(--color-text-secondary); }
|
|
44
|
-
|
|
45
|
-
/* toolbar: selectors on the left, action buttons on the right */
|
|
46
|
-
.input-card-toolbar {
|
|
47
|
-
display: flex;
|
|
48
|
-
align-items: center;
|
|
49
|
-
gap: 0.375rem;
|
|
50
|
-
flex-wrap: wrap;
|
|
51
|
-
}
|
|
52
|
-
.input-card-selectors {
|
|
53
|
-
display: flex;
|
|
54
|
-
gap: 0.375rem;
|
|
55
|
-
align-items: center;
|
|
56
|
-
flex-wrap: wrap;
|
|
57
|
-
flex: 1;
|
|
58
|
-
min-width: 0;
|
|
59
|
-
}
|
|
60
|
-
.input-card-actions {
|
|
61
|
-
display: flex;
|
|
62
|
-
gap: 0.25rem;
|
|
63
|
-
align-items: center;
|
|
64
|
-
margin-left: auto;
|
|
65
|
-
flex-shrink: 0;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.input-chip-select {
|
|
69
|
-
height: 28px;
|
|
70
|
-
padding: 0 0.5rem;
|
|
71
|
-
font-size: 0.75rem;
|
|
72
|
-
background: var(--color-bg-primary);
|
|
73
|
-
color: var(--color-text-primary);
|
|
74
|
-
border: 1px solid var(--color-border);
|
|
75
|
-
border-radius: 999px;
|
|
76
|
-
cursor: pointer;
|
|
77
|
-
max-width: 180px;
|
|
78
|
-
transition: border-color 0.12s;
|
|
79
|
-
}
|
|
80
|
-
.input-chip-select:hover { border-color: var(--color-primary); }
|
|
81
|
-
.input-chip-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
|
|
82
|
-
.input-chip-select:empty,
|
|
83
|
-
.input-chip-select[data-empty="true"] { display: none; }
|
|
84
|
-
|
|
85
|
-
/* When chip selects are empty and only star remains, compact layout */
|
|
86
|
-
#savePresetBtn { width: 28px !important; height: 28px !important; font-size: 0.875rem; }
|
|
87
|
-
|
|
88
|
-
/* Input card: if selectors row is empty (no visible chips), hide whole row */
|
|
89
|
-
.input-card-selectors:not(:has(select:not([style*="display: none"]):not(:empty):not([data-empty="true"]))):not(:has(#savePresetBtn + *)) {
|
|
90
|
-
/* do nothing: keep preset visible */
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.input-icon-btn {
|
|
94
|
-
display: inline-flex;
|
|
95
|
-
align-items: center;
|
|
96
|
-
justify-content: center;
|
|
97
|
-
width: 32px;
|
|
98
|
-
height: 32px;
|
|
99
|
-
padding: 0;
|
|
100
|
-
background: transparent;
|
|
101
|
-
border: 1px solid transparent;
|
|
102
|
-
border-radius: var(--radius-sm);
|
|
103
|
-
color: var(--color-text-secondary);
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
transition: background 0.12s, color 0.12s;
|
|
106
|
-
}
|
|
107
|
-
.input-icon-btn:hover {
|
|
108
|
-
background: var(--color-bg-hover);
|
|
109
|
-
color: var(--color-text-primary);
|
|
110
|
-
}
|
|
111
|
-
.input-icon-btn svg { width: 16px; height: 16px; }
|
|
112
|
-
|
|
113
|
-
.input-send-btn {
|
|
114
|
-
background: var(--color-primary);
|
|
115
|
-
color: #fff;
|
|
116
|
-
width: 34px;
|
|
117
|
-
height: 34px;
|
|
118
|
-
border-radius: var(--radius-md);
|
|
119
|
-
}
|
|
120
|
-
.input-send-btn:hover { background: var(--color-primary-dark); color: #fff; }
|
|
121
|
-
.input-send-btn svg { width: 16px; height: 16px; }
|
|
122
|
-
.input-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
123
|
-
|
|
124
|
-
/* When streaming: dim the card slightly */
|
|
125
|
-
.input-card[data-streaming="true"] {
|
|
126
|
-
opacity: 0.75;
|
|
127
|
-
}
|
|
128
|
-
.input-card[data-streaming="true"] .input-card-textarea {
|
|
129
|
-
cursor: not-allowed;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/* ---------- Tools popup: centered modal ---------- */
|
|
133
|
-
body .tools-popup {
|
|
134
|
-
display: none !important;
|
|
135
|
-
position: fixed;
|
|
136
|
-
inset: 0;
|
|
137
|
-
z-index: 200;
|
|
138
|
-
background: rgba(15,23,42,0.45);
|
|
139
|
-
align-items: center;
|
|
140
|
-
justify-content: center;
|
|
141
|
-
padding: 1rem;
|
|
142
|
-
}
|
|
143
|
-
body .tools-popup.open { display: flex !important; }
|
|
144
|
-
.tools-popup-content {
|
|
145
|
-
width: 100%;
|
|
146
|
-
max-width: 720px;
|
|
147
|
-
max-height: 85vh;
|
|
148
|
-
background: var(--color-bg-raised);
|
|
149
|
-
border: 1px solid var(--color-border);
|
|
150
|
-
border-radius: var(--radius-lg);
|
|
151
|
-
box-shadow: var(--shadow-lg);
|
|
152
|
-
display: flex;
|
|
153
|
-
flex-direction: column;
|
|
154
|
-
overflow: hidden;
|
|
155
|
-
}
|
|
156
|
-
.tools-popup-header {
|
|
157
|
-
display: flex;
|
|
158
|
-
align-items: center;
|
|
159
|
-
justify-content: space-between;
|
|
160
|
-
gap: 0.75rem;
|
|
161
|
-
padding: 0.75rem 1rem;
|
|
162
|
-
border-bottom: 1px solid var(--color-border);
|
|
163
|
-
background: var(--color-bg-secondary);
|
|
164
|
-
}
|
|
165
|
-
.tools-popup-scroll {
|
|
166
|
-
flex: 1;
|
|
167
|
-
overflow-y: auto;
|
|
168
|
-
padding: 0.75rem 1rem;
|
|
169
|
-
}
|
|
170
|
-
.tools-popup-footer {
|
|
171
|
-
display: flex;
|
|
172
|
-
gap: 0.5rem;
|
|
173
|
-
justify-content: flex-end;
|
|
174
|
-
padding: 0.75rem 1rem;
|
|
175
|
-
border-top: 1px solid var(--color-border);
|
|
176
|
-
background: var(--color-bg-secondary);
|
|
177
|
-
}
|
|
178
|
-
.tools-popup-refresh-btn,
|
|
179
|
-
.tools-popup-update-btn {
|
|
180
|
-
padding: 0.5rem 1rem;
|
|
181
|
-
font-size: 0.8125rem;
|
|
182
|
-
font-weight: 500;
|
|
183
|
-
border-radius: var(--radius-md);
|
|
184
|
-
border: 1px solid var(--color-border);
|
|
185
|
-
background: var(--color-bg-primary);
|
|
186
|
-
color: var(--color-text-primary);
|
|
187
|
-
cursor: pointer;
|
|
188
|
-
}
|
|
189
|
-
.tools-popup-refresh-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
|
190
|
-
.tools-popup-update-btn {
|
|
191
|
-
background: var(--color-primary);
|
|
192
|
-
color: #fff;
|
|
193
|
-
border-color: var(--color-primary);
|
|
194
|
-
}
|
|
195
|
-
.tools-popup-update-btn:hover { background: var(--color-primary-dark); }
|
|
196
|
-
|
|
197
|
-
/* ---------- Folder modal (if opened) ---------- */
|
|
198
|
-
body .folder-modal-overlay {
|
|
199
|
-
display: none !important;
|
|
200
|
-
position: fixed;
|
|
201
|
-
inset: 0;
|
|
202
|
-
z-index: 200;
|
|
203
|
-
background: rgba(15,23,42,0.45);
|
|
204
|
-
align-items: center;
|
|
205
|
-
justify-content: center;
|
|
206
|
-
padding: 1rem;
|
|
207
|
-
}
|
|
208
|
-
body .folder-modal-overlay.open { display: flex !important; }
|
|
209
|
-
.folder-modal {
|
|
210
|
-
width: 100%;
|
|
211
|
-
max-width: 560px;
|
|
212
|
-
max-height: 80vh;
|
|
213
|
-
background: var(--color-bg-raised);
|
|
214
|
-
border: 1px solid var(--color-border);
|
|
215
|
-
border-radius: var(--radius-lg);
|
|
216
|
-
box-shadow: var(--shadow-lg);
|
|
217
|
-
display: flex;
|
|
218
|
-
flex-direction: column;
|
|
219
|
-
overflow: hidden;
|
|
220
|
-
}
|
|
221
|
-
.folder-modal-header {
|
|
222
|
-
display: flex; justify-content: space-between; align-items: center;
|
|
223
|
-
padding: 0.75rem 1rem;
|
|
224
|
-
border-bottom: 1px solid var(--color-border);
|
|
225
|
-
}
|
|
226
|
-
.folder-modal-header h3 { margin: 0; font-size: 1rem; }
|
|
227
|
-
.folder-modal-close {
|
|
228
|
-
background: none; border: none; font-size: 1.5rem;
|
|
229
|
-
color: var(--color-text-secondary); cursor: pointer; line-height: 1;
|
|
230
|
-
}
|
|
231
|
-
.folder-modal-footer {
|
|
232
|
-
display: flex; gap: 0.5rem; justify-content: flex-end;
|
|
233
|
-
padding: 0.75rem 1rem;
|
|
234
|
-
border-top: 1px solid var(--color-border);
|
|
235
|
-
}
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
/* =====================================================================
|
|
2
|
-
ui-fixes-4.css — Responsive (mobile/tablet) + dark-theme polish
|
|
3
|
-
===================================================================== */
|
|
4
|
-
|
|
5
|
-
/* ---------- Tablet (≤ 1024px): narrower sidebar ---------- */
|
|
6
|
-
@media (max-width: 1024px) {
|
|
7
|
-
:root { --sidebar-width: 240px; }
|
|
8
|
-
.messages-wrapper { padding: 0.875rem 1rem; }
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
/* ---------- Mobile (≤ 768px): sidebar becomes drawer ---------- */
|
|
12
|
-
@media (max-width: 768px) {
|
|
13
|
-
.app-shell { flex-direction: row; }
|
|
14
|
-
|
|
15
|
-
.sidebar {
|
|
16
|
-
position: fixed;
|
|
17
|
-
top: 0; left: 0;
|
|
18
|
-
height: 100dvh;
|
|
19
|
-
width: 280px;
|
|
20
|
-
max-width: 85vw;
|
|
21
|
-
transform: translateX(-100%);
|
|
22
|
-
z-index: 80;
|
|
23
|
-
box-shadow: var(--shadow-lg);
|
|
24
|
-
transition: transform 0.2s ease-out !important;
|
|
25
|
-
}
|
|
26
|
-
.sidebar.open { transform: translateX(0); }
|
|
27
|
-
|
|
28
|
-
.sidebar-overlay {
|
|
29
|
-
display: none;
|
|
30
|
-
position: fixed;
|
|
31
|
-
inset: 0;
|
|
32
|
-
background: rgba(15,23,42,0.5);
|
|
33
|
-
z-index: 70;
|
|
34
|
-
}
|
|
35
|
-
.sidebar-overlay.open { display: block; }
|
|
36
|
-
|
|
37
|
-
.main-panel { width: 100%; }
|
|
38
|
-
.main-header { padding: 0 0.5rem; }
|
|
39
|
-
.header-title { font-size: 0.875rem; }
|
|
40
|
-
.header-controls { gap: 0.25rem; }
|
|
41
|
-
|
|
42
|
-
/* hide tertiary chips in very tight space */
|
|
43
|
-
.status-badge span { display: none; }
|
|
44
|
-
.status-badge { padding: 0.25rem; }
|
|
45
|
-
|
|
46
|
-
/* input card on mobile */
|
|
47
|
-
.input-section { padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); }
|
|
48
|
-
.input-card { padding: 0.375rem 0.5rem; border-radius: var(--radius-md); }
|
|
49
|
-
.input-card-textarea { font-size: 1rem; /* prevent iOS zoom */ }
|
|
50
|
-
.input-chip-select { max-width: 140px; }
|
|
51
|
-
|
|
52
|
-
.welcome-title { font-size: 1.375rem; }
|
|
53
|
-
.welcome-logo { width: 56px; height: 56px; font-size: 1.75rem; }
|
|
54
|
-
.messages-wrapper { padding: 0.75rem 0.75rem 1rem; }
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/* ---------- Small mobile (≤ 480px): hide noncritical header buttons ---------- */
|
|
58
|
-
@media (max-width: 480px) {
|
|
59
|
-
.model-dl-indicator { display: none; }
|
|
60
|
-
.sidebar-header h2 { display: none; }
|
|
61
|
-
.input-card-actions .input-icon-btn:not(.input-send-btn):not(.voice-mic-btn) { display: none; }
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/* ---------- Touch targets: ensure 40px minimum on pointer:coarse ---------- */
|
|
65
|
-
@media (pointer: coarse) {
|
|
66
|
-
.sidebar-toggle-btn,
|
|
67
|
-
.theme-toggle-btn,
|
|
68
|
-
.header-icon-btn,
|
|
69
|
-
.input-icon-btn,
|
|
70
|
-
.sidebar-overflow-btn,
|
|
71
|
-
.view-toggle-btn,
|
|
72
|
-
.status-cancel-btn {
|
|
73
|
-
min-width: 40px;
|
|
74
|
-
min-height: 40px;
|
|
75
|
-
}
|
|
76
|
-
.conversation-item { padding: 0.625rem 0.625rem; }
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
/* ---------- Focus-visible ring: accessibility, non-intrusive ---------- */
|
|
80
|
-
button:focus-visible,
|
|
81
|
-
select:focus-visible,
|
|
82
|
-
input:focus-visible,
|
|
83
|
-
textarea:focus-visible {
|
|
84
|
-
outline: 2px solid var(--color-primary);
|
|
85
|
-
outline-offset: 2px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/* ---------- Dark mode: neutral grey palette ---------- */
|
|
89
|
-
html.dark {
|
|
90
|
-
--color-primary: #3b82f6;
|
|
91
|
-
--color-primary-dark: #2563eb;
|
|
92
|
-
--color-bg-primary: #1a1a1a;
|
|
93
|
-
--color-bg-secondary: #212121;
|
|
94
|
-
--color-bg-raised: #2a2a2a;
|
|
95
|
-
--color-bg-hover: rgba(255,255,255,0.06);
|
|
96
|
-
--color-text-primary: #e5e5e5;
|
|
97
|
-
--color-text-secondary: #a3a3a3;
|
|
98
|
-
--color-border: #333333;
|
|
99
|
-
--color-focus-ring: rgba(163,163,163,0.35);
|
|
100
|
-
}
|
|
101
|
-
html.dark body { background: var(--color-bg-primary); color: var(--color-text-primary); }
|
|
102
|
-
html.dark .sidebar { background: #161616; border-right: 1px solid var(--color-border); }
|
|
103
|
-
html.dark .main-header,
|
|
104
|
-
html.dark .view-toggle-bar,
|
|
105
|
-
html.dark .input-section { background: var(--color-bg-primary); }
|
|
106
|
-
html.dark .input-card { background: #161616; border-color: var(--color-border); }
|
|
107
|
-
html.dark .input-chip-select { background: #161616; }
|
|
108
|
-
html.dark .status-badge { background: #161616; }
|
|
109
|
-
html.dark .sidebar-search-input { background: #161616; }
|
|
110
|
-
html.dark .conversation-item.active { background: #2f2f2f; color: var(--color-text-primary); }
|
|
111
|
-
html.dark .tools-popup,
|
|
112
|
-
html.dark .folder-modal-overlay { background: rgba(0,0,0,0.65); }
|
|
113
|
-
|
|
114
|
-
/* Light mode polish: softer sidebar separation */
|
|
115
|
-
html:not(.dark) .sidebar { border-right: 1px solid var(--color-border); }
|
|
116
|
-
html:not(.dark) .main-header { background: var(--color-bg-primary); }
|
|
117
|
-
|
|
118
|
-
/* ---------- Scrollbar styling (subtle) ---------- */
|
|
119
|
-
.sidebar-list,
|
|
120
|
-
#output-scroll,
|
|
121
|
-
.tools-popup-scroll {
|
|
122
|
-
scrollbar-width: thin;
|
|
123
|
-
scrollbar-color: var(--color-border) transparent;
|
|
124
|
-
}
|
|
125
|
-
.sidebar-list::-webkit-scrollbar,
|
|
126
|
-
#output-scroll::-webkit-scrollbar,
|
|
127
|
-
.tools-popup-scroll::-webkit-scrollbar {
|
|
128
|
-
width: 8px;
|
|
129
|
-
}
|
|
130
|
-
.sidebar-list::-webkit-scrollbar-thumb,
|
|
131
|
-
#output-scroll::-webkit-scrollbar-thumb,
|
|
132
|
-
.tools-popup-scroll::-webkit-scrollbar-thumb {
|
|
133
|
-
background: var(--color-border);
|
|
134
|
-
border-radius: 4px;
|
|
135
|
-
border: 2px solid transparent;
|
|
136
|
-
background-clip: padding-box;
|
|
137
|
-
}
|
|
138
|
-
.sidebar-list::-webkit-scrollbar-thumb:hover,
|
|
139
|
-
#output-scroll::-webkit-scrollbar-thumb:hover {
|
|
140
|
-
background: var(--color-text-secondary);
|
|
141
|
-
background-clip: padding-box;
|
|
142
|
-
border: 2px solid transparent;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
/* ---------- Reduced motion ---------- */
|
|
146
|
-
@media (prefers-reduced-motion: reduce) {
|
|
147
|
-
*, *::before, *::after {
|
|
148
|
-
animation-duration: 0.01ms !important;
|
|
149
|
-
transition-duration: 0.01ms !important;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
/* ---------- Hide legacy selectors leftovers if present ---------- */
|
|
154
|
-
.agent-selector:empty,
|
|
155
|
-
.model-selector:empty,
|
|
156
|
-
.preset-selector:empty { display: none; }
|