1  .root {
  2    font-family: 'IBM Plex Sans', var(--font-sans, sans-serif);
  3    background: var(--bg-base);
  4    height: 100vh;
  5    color: var(--text-1);
  6    display: flex;
  7    flex-direction: column;
  8    overflow: hidden;
  9  }
 10  
 11  /* ── Top bar ────────────────────────────────────────────────────────────────── */
 12  
 13  .topbar {
 14    display: flex;
 15    align-items: center;
 16    justify-content: space-between;
 17    padding: 14px 20px;
 18    border-bottom: 1px solid var(--border-2);
 19    background: var(--bg-surface);
 20    flex-shrink: 0;
 21    -webkit-app-region: drag;
 22    user-select: none;
 23  }
 24  
 25  /* Interactive children must opt out of the drag region */
 26  .topbar button,
 27  .topbar a {
 28    -webkit-app-region: no-drag;
 29  }
 30  
 31  .logo {
 32    font-family: 'JetBrains Mono', monospace;
 33    font-size: 15px;
 34    font-weight: 500;
 35    color: var(--text-1);
 36    letter-spacing: -0.3px;
 37    display: flex;
 38    align-items: center;
 39    gap: 8px;
 40  }
 41  
 42  .logoDot {
 43    width: 7px;
 44    height: 7px;
 45    border-radius: 50%;
 46    background: #5de4c7;
 47    flex-shrink: 0;
 48  }
 49  
 50  .actions {
 51    display: flex;
 52    gap: 6px;
 53  }
 54  
 55  
 56  /* ── Window controls ────────────────────────────────────────────────────────── */
 57  
 58  .windowControls {
 59    display: flex;
 60    align-items: center;
 61    gap: 7px;
 62    margin-left: 16px;
 63    /* not a drag region — buttons need real clicks */
 64    -webkit-app-region: no-drag;
 65  }
 66  
 67  .winBtn {
 68    width: 12px;
 69    height: 12px;
 70    border-radius: 50%;
 71    border: none;
 72    cursor: pointer;
 73    background: var(--text-8);
 74    transition: background 0.15s, transform 0.1s;
 75    padding: 0;
 76    flex-shrink: 0;
 77  }
 78  
 79  .winBtn:active {
 80    transform: scale(0.88);
 81  }
 82  
 83  /* Colours revealed on topbar hover */
 84  .topbar:hover .winMinimize { background: #f59e0b; }
 85  .topbar:hover .winMaximize { background: #5de4c7; }
 86  .topbar:hover .winClose    { background: #f87171; }
 87  
 88  /* ── Tabs ───────────────────────────────────────────────────────────────────── */
 89  
 90  .tabs {
 91    display: flex;
 92    align-items: center;
 93    gap: 2px;
 94    padding: 8px 20px 0;
 95    border-bottom: 1px solid var(--border-2);
 96    background: var(--bg-surface);
 97    flex-shrink: 0;
 98  }
 99  
100  .tab {
101    font-family: 'IBM Plex Sans', sans-serif;
102    font-size: 12px;
103    padding: 6px 8px 8px 14px;
104    cursor: pointer;
105    color: var(--text-4);
106    border: none;
107    border-bottom: 2px solid transparent;
108    background: transparent;
109    margin-bottom: -1px;
110    font-weight: 400;
111    transition: color 0.15s;
112    display: flex;
113    align-items: center;
114    gap: 6px;
115  }
116  
117  .tab:hover {
118    color: var(--text-3);
119  }
120  
121  .tabActive {
122    color: #5de4c7;
123    border-bottom-color: #5de4c7;
124  }
125  
126  .tabClose {
127    display: flex;
128    align-items: center;
129    justify-content: center;
130    width: 14px;
131    height: 14px;
132    border-radius: 3px;
133    font-size: 10px;
134    color: var(--text-6);
135    opacity: 0;
136    transition: opacity 0.15s, color 0.15s, background 0.15s;
137    flex-shrink: 0;
138    line-height: 1;
139  }
140  
141  .tab:hover .tabClose {
142    opacity: 1;
143  }
144  
145  .tabClose:hover {
146    color: #f87171;
147    background: rgba(248, 113, 113, 0.12);
148  }
149  
150  .tabAdd {
151    width: 26px;
152    height: 26px;
153    display: flex;
154    align-items: center;
155    justify-content: center;
156    color: var(--text-5);
157    cursor: pointer;
158    border: none;
159    border-radius: 4px;
160    background: transparent;
161    font-size: 16px;
162    margin-left: 4px;
163    margin-bottom: 2px;
164    transition: color 0.15s, background 0.15s;
165  }
166  
167  .tabAdd:hover {
168    color: var(--text-3);
169    background: var(--hover-3);
170  }
171  
172  /* ── View switcher ─────────────────────────────────────────────────────────── */
173  
174  .viewSwitcher {
175    display: flex;
176    align-items: center;
177    gap: 2px;
178    padding: 4px 20px;
179    background: var(--bg-surface);
180    border-bottom: 1px solid var(--border-1);
181    flex-shrink: 0;
182  }
183  
184  .viewTabUnread { color: #f8b84c; }
185  
186  /* ── Main ───────────────────────────────────────────────────────────────────── */
187  
188  .main {
189    flex: 1;
190    display: flex;
191    flex-direction: column;
192    overflow: hidden;
193    position: relative;
194  }
195  
196  .loadingBar {
197    position: absolute;
198    top: 0;
199    left: 0;
200    right: 0;
201    height: 2px;
202    background: var(--border-1);
203    z-index: 100;
204    overflow: hidden;
205  }
206  
207  .loadingBarInner {
208    height: 100%;
209    width: 40%;
210    background: #5de4c7;
211    animation: loadingSweep 1.4s ease-in-out infinite;
212  }
213  
214  @keyframes loadingSweep {
215    0%   { transform: translateX(-100%); }
216    100% { transform: translateX(350%); }
217  }
218  
219  /* ── Footer ─────────────────────────────────────────────────────────────────── */
220  
221  .footer {
222    padding: 6px 12px;
223    border-top: 1px solid var(--border-1);
224    background: var(--bg-surface);
225    display: flex;
226    align-items: center;
227    gap: 4px;
228    flex-shrink: 0;
229  }
230  
231  .footerSpacer { flex: 1; }
232  
233  .footerIconBtn {
234    width: 26px;
235    height: 26px;
236    display: flex;
237    align-items: center;
238    justify-content: center;
239    border: none;
240    border-radius: 5px;
241    background: transparent;
242    color: var(--text-6);
243    cursor: pointer;
244    transition: background 0.12s, color 0.12s;
245    padding: 0;
246    flex-shrink: 0;
247  }
248  
249  .footerIconBtn:hover {
250    background: var(--hover-4);
251    color: var(--text-2);
252  }
253  
254  /* ── Zoom controls ───────────────────────────────────────────────────────────── */
255  
256  .zoomControls {
257    display: flex;
258    align-items: center;
259    gap: 2px;
260  }
261  
262  .zoomBtn {
263    font-family: 'JetBrains Mono', monospace;
264    font-size: 14px;
265    font-weight: 600;
266    width: 24px;
267    height: 24px;
268    display: flex;
269    align-items: center;
270    justify-content: center;
271    background: none;
272    border: none;
273    color: var(--text-4);
274    cursor: pointer;
275    border-radius: 4px;
276    padding: 0;
277    transition: color 0.12s, background 0.12s;
278    line-height: 1;
279  }
280  
281  .zoomBtn:hover:not(:disabled) {
282    color: var(--text-1);
283    background: var(--hover-3);
284  }
285  
286  .zoomBtn:disabled {
287    color: var(--text-6);
288    cursor: default;
289  }
290  
291  .zoomLevel {
292    font-family: 'JetBrains Mono', monospace;
293    font-size: 12px;
294    font-weight: 600;
295    color: var(--text-3);
296    background: none;
297    border: none;
298    cursor: pointer;
299    padding: 2px 6px;
300    border-radius: 4px;
301    transition: color 0.12s, background 0.12s;
302    min-width: 40px;
303    text-align: center;
304  }
305  
306  .zoomLevel:hover {
307    color: var(--text-1);
308    background: var(--hover-2);
309  }
310  
311  /* ── Logo group (logo + inbox icon) ─────────────────────────────────────────── */
312  
313  .logoGroup {
314    display: flex;
315    align-items: center;
316    gap: 10px;
317  }
318  
319  /* ── Inbox icon button ───────────────────────────────────────────────────────── */
320  
321  .inboxBtn {
322    position: relative;
323    display: flex;
324    align-items: center;
325    justify-content: center;
326    width: 28px;
327    height: 28px;
328    border: none;
329    border-radius: 6px;
330    background: transparent;
331    color: var(--text-5);
332    cursor: pointer;
333    transition: background 0.15s, color 0.15s;
334    flex-shrink: 0;
335    -webkit-app-region: no-drag;
336  }
337  
338  .inboxBtn:hover {
339    background: var(--hover-4);
340    color: var(--text-2);
341  }
342  
343  .inboxBtnUnread {
344    color: #f8b84c;
345  }
346  
347  .inboxBtnUnread:hover {
348    background: rgba(248, 184, 76, 0.12);
349    color: #f8b84c;
350  }
351  
352  .inboxDot {
353    position: absolute;
354    top: 2px;
355    right: 2px;
356    font-family: 'JetBrains Mono', monospace;
357    font-size: 8px;
358    font-weight: 700;
359    background: #f8b84c;
360    color: var(--bg-base);
361    border-radius: 8px;
362    padding: 0 3px;
363    min-width: 13px;
364    height: 13px;
365    display: flex;
366    align-items: center;
367    justify-content: center;
368    line-height: 1;
369  }
370  
371  /* ── Radicle button ──────────────────────────────────────────────────────────── */
372  
373  .radicleBtn {
374    font-family: 'IBM Plex Sans', sans-serif;
375    font-size: 11px;
376    padding: 5px 12px;
377    border-radius: 6px;
378    border: 1px solid rgba(93, 228, 199, 0.25);
379    background: rgba(93, 228, 199, 0.07);
380    color: #5de4c7;
381    cursor: pointer;
382    display: flex;
383    align-items: center;
384    gap: 6px;
385    transition: background 0.15s;
386  }
387  
388  .radicleBtn:hover {
389    background: rgba(93, 228, 199, 0.14);
390  }
391  
392  /* ── Terminal toggle button ──────────────────────────────────────────────────── */
393  
394  .terminalBtn {
395    font-family: 'JetBrains Mono', monospace;
396    font-size: 11px;
397    font-weight: 600;
398    display: flex;
399    align-items: center;
400    justify-content: center;
401    width: 28px;
402    height: 28px;
403    border: none;
404    border-radius: 6px;
405    background: transparent;
406    color: var(--text-5);
407    cursor: pointer;
408    transition: background 0.15s, color 0.15s;
409  }
410  
411  .terminalBtn:hover {
412    background: var(--hover-4);
413    color: var(--text-2);
414  }
415  
416  .terminalBtnActive {
417    color: #5de4c7;
418    background: rgba(93, 228, 199, 0.08);
419  }
420  
421  .terminalBtnActive:hover {
422    background: rgba(93, 228, 199, 0.14);
423  }