agentgui 1.0.890 → 1.0.892
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/static/css/main.css +810 -813
- package/static/index.html +0 -1
package/static/css/main.css
CHANGED
|
@@ -1229,9 +1229,6 @@
|
|
|
1229
1229
|
}
|
|
1230
1230
|
|
|
1231
1231
|
.voice-mic-btn {
|
|
1232
|
-
position: absolute;
|
|
1233
|
-
top: 4px;
|
|
1234
|
-
right: 4px;
|
|
1235
1232
|
display: flex;
|
|
1236
1233
|
align-items: center;
|
|
1237
1234
|
justify-content: center;
|
|
@@ -3249,813 +3246,813 @@
|
|
|
3249
3246
|
max-width: 120px;
|
|
3250
3247
|
}
|
|
3251
3248
|
|
|
3252
|
-
|
|
3253
|
-
.skip-link {
|
|
3254
|
-
position: absolute;
|
|
3255
|
-
top: -40px;
|
|
3256
|
-
left: 0;
|
|
3257
|
-
background: var(--color-primary, #3b82f6);
|
|
3258
|
-
color: #fff;
|
|
3259
|
-
padding: 8px 16px;
|
|
3260
|
-
z-index: 10000;
|
|
3261
|
-
text-decoration: none;
|
|
3262
|
-
border-radius: 0 0 4px 0;
|
|
3263
|
-
font-weight: 600;
|
|
3264
|
-
}
|
|
3265
|
-
.skip-link:focus {
|
|
3266
|
-
top: 0;
|
|
3267
|
-
}
|
|
3268
|
-
|
|
3269
|
-
:focus-visible {
|
|
3270
|
-
outline: 2px solid var(--color-primary, #3b82f6);
|
|
3271
|
-
outline-offset: 2px;
|
|
3272
|
-
border-radius: 2px;
|
|
3273
|
-
}
|
|
3274
|
-
|
|
3275
|
-
@media (prefers-reduced-motion: reduce) {
|
|
3276
|
-
*,
|
|
3277
|
-
*::before,
|
|
3278
|
-
*::after {
|
|
3279
|
-
animation-duration: 0.01ms !important;
|
|
3280
|
-
animation-iteration-count: 1 !important;
|
|
3281
|
-
transition-duration: 0.01ms !important;
|
|
3282
|
-
scroll-behavior: auto !important;
|
|
3283
|
-
}
|
|
3284
|
-
}
|
|
3285
|
-
|
|
3286
|
-
/* ==========================================================================
|
|
3287
|
-
Legacy ui-fixes*.css (merged into main.css on 2026-04-20).
|
|
3288
|
-
Loaded last so they still win over earlier main.css rules; intentionally
|
|
3289
|
-
left as a recognisable block so future cleanups can prune systematically.
|
|
3290
|
-
========================================================================== */
|
|
3291
|
-
|
|
3292
|
-
/* ========== merged from ui-fixes.css ========== */
|
|
3293
|
-
/* =====================================================================
|
|
3294
|
-
ui-fixes.css — Design corrections layered on top of main.css
|
|
3295
|
-
Targets styles missing or broken for current markup (index.html).
|
|
3296
|
-
Loaded AFTER main.css so selectors here win on ties.
|
|
3297
|
-
===================================================================== */
|
|
3298
|
-
|
|
3299
|
-
/* ---------- Design tokens: richer spacing + elevation ---------- */
|
|
3300
|
-
:root {
|
|
3301
|
-
--radius-sm: 0.375rem;
|
|
3302
|
-
--radius-md: 0.5rem;
|
|
3303
|
-
--radius-lg: 0.75rem;
|
|
3304
|
-
--radius-xl: 1rem;
|
|
3305
|
-
--shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
|
|
3306
|
-
--shadow-md: 0 4px 12px rgba(15,23,42,0.08);
|
|
3307
|
-
--shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
|
|
3308
|
-
--color-bg-raised: #ffffff;
|
|
3309
|
-
--color-bg-hover: rgba(15,23,42,0.04);
|
|
3310
|
-
--color-focus-ring: rgba(59,130,246,0.35);
|
|
3311
|
-
--sidebar-width: 272px;
|
|
3312
|
-
}
|
|
3313
|
-
html.dark {
|
|
3314
|
-
--color-bg-raised: #202020;
|
|
3315
|
-
--color-bg-hover: rgba(255,255,255,0.05);
|
|
3316
|
-
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
|
|
3317
|
-
--shadow-md: 0 4px 12px rgba(0,0,0,0.45);
|
|
3318
|
-
--shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
|
|
3319
|
-
--color-focus-ring: rgba(96,165,250,0.45);
|
|
3320
|
-
}
|
|
3321
|
-
|
|
3322
|
-
/* ---------- Sidebar header: two rows, fix 422px overflow ---------- */
|
|
3323
|
-
.sidebar-header {
|
|
3324
|
-
flex-direction: row;
|
|
3325
|
-
align-items: center;
|
|
3326
|
-
justify-content: space-between;
|
|
3327
|
-
gap: 0.5rem;
|
|
3328
|
-
padding: 0.625rem 0.75rem;
|
|
3329
|
-
min-height: var(--header-height);
|
|
3330
|
-
border-bottom: 1px solid var(--color-border);
|
|
3331
|
-
}
|
|
3332
|
-
.sidebar-header h2 {
|
|
3333
|
-
font-size: 0.75rem;
|
|
3334
|
-
font-weight: 700;
|
|
3335
|
-
letter-spacing: 0.08em;
|
|
3336
|
-
color: var(--color-text-secondary);
|
|
3337
|
-
flex: 1;
|
|
3338
|
-
min-width: 0;
|
|
3339
|
-
overflow: hidden;
|
|
3340
|
-
text-overflow: ellipsis;
|
|
3341
|
-
}
|
|
3342
|
-
.sidebar-header-actions {
|
|
3343
|
-
display: flex;
|
|
3344
|
-
gap: 0.25rem;
|
|
3345
|
-
align-items: center;
|
|
3346
|
-
flex-shrink: 0;
|
|
3347
|
-
}
|
|
3348
|
-
|
|
3349
|
-
/* ---------- Sidebar overflow menu: hidden by default, floating panel ---------- */
|
|
3350
|
-
.sidebar-overflow-menu-wrapper {
|
|
3351
|
-
position: relative;
|
|
3352
|
-
display: inline-block;
|
|
3353
|
-
}
|
|
3354
|
-
.sidebar-overflow-btn {
|
|
3355
|
-
display: inline-flex;
|
|
3356
|
-
align-items: center;
|
|
3357
|
-
justify-content: center;
|
|
3358
|
-
width: 30px;
|
|
3359
|
-
height: 30px;
|
|
3360
|
-
padding: 0;
|
|
3361
|
-
background: transparent;
|
|
3362
|
-
border: 1px solid transparent;
|
|
3363
|
-
border-radius: var(--radius-sm);
|
|
3364
|
-
color: var(--color-text-secondary);
|
|
3365
|
-
cursor: pointer;
|
|
3366
|
-
font-size: 1rem;
|
|
3367
|
-
line-height: 1;
|
|
3368
|
-
}
|
|
3369
|
-
.sidebar-overflow-btn:hover {
|
|
3370
|
-
background: var(--color-bg-hover);
|
|
3371
|
-
color: var(--color-text-primary);
|
|
3372
|
-
}
|
|
3373
|
-
.sidebar-overflow-menu {
|
|
3374
|
-
display: none;
|
|
3375
|
-
position: absolute;
|
|
3376
|
-
top: calc(100% + 4px);
|
|
3377
|
-
right: 0;
|
|
3378
|
-
min-width: 200px;
|
|
3379
|
-
z-index: 60;
|
|
3380
|
-
padding: 0.25rem;
|
|
3381
|
-
background: var(--color-bg-raised);
|
|
3382
|
-
border: 1px solid var(--color-border);
|
|
3383
|
-
border-radius: var(--radius-md);
|
|
3384
|
-
box-shadow: var(--shadow-md);
|
|
3385
|
-
}
|
|
3386
|
-
.sidebar-overflow-menu.open { display: block; }
|
|
3387
|
-
.sidebar-overflow-menu-item {
|
|
3388
|
-
display: flex;
|
|
3389
|
-
align-items: center;
|
|
3390
|
-
gap: 0.5rem;
|
|
3391
|
-
width: 100%;
|
|
3392
|
-
padding: 0.5rem 0.625rem;
|
|
3393
|
-
background: transparent;
|
|
3394
|
-
border: none;
|
|
3395
|
-
border-radius: var(--radius-sm);
|
|
3396
|
-
color: var(--color-text-primary);
|
|
3397
|
-
font-size: 0.8125rem;
|
|
3398
|
-
text-align: left;
|
|
3399
|
-
cursor: pointer;
|
|
3400
|
-
}
|
|
3401
|
-
.sidebar-overflow-menu-item:hover { background: var(--color-bg-hover); }
|
|
3402
|
-
.sidebar-overflow-menu-item.danger { color: var(--color-error); }
|
|
3403
|
-
.sidebar-overflow-menu-item.danger:hover { background: rgba(239,68,68,0.1); }
|
|
3404
|
-
.sidebar-overflow-menu-item svg { flex-shrink: 0; }
|
|
3405
|
-
|
|
3406
|
-
/* ---------- Sidebar new-conversation button ---------- */
|
|
3407
|
-
.sidebar-new-btn {
|
|
3408
|
-
padding: 0.375rem 0.75rem;
|
|
3409
|
-
font-size: 0.8125rem;
|
|
3410
|
-
font-weight: 600;
|
|
3411
|
-
line-height: 1.2;
|
|
3412
|
-
height: 30px;
|
|
3413
|
-
}
|
|
3414
|
-
|
|
3415
|
-
/* ---------- Sidebar search ---------- */
|
|
3416
|
-
.sidebar-search-bar {
|
|
3417
|
-
padding: 0.5rem 0.75rem;
|
|
3418
|
-
flex-shrink: 0;
|
|
3419
|
-
}
|
|
3420
|
-
.sidebar-search-input {
|
|
3421
|
-
width: 100%;
|
|
3422
|
-
padding: 0.5rem 0.75rem;
|
|
3423
|
-
font-size: 0.8125rem;
|
|
3424
|
-
background: var(--color-bg-primary);
|
|
3425
|
-
border: 1px solid var(--color-border);
|
|
3426
|
-
border-radius: var(--radius-md);
|
|
3427
|
-
color: var(--color-text-primary);
|
|
3428
|
-
outline: none;
|
|
3429
|
-
transition: border-color 0.15s, box-shadow 0.15s;
|
|
3430
|
-
}
|
|
3431
|
-
.sidebar-search-input:focus {
|
|
3432
|
-
border-color: var(--color-primary);
|
|
3433
|
-
box-shadow: 0 0 0 3px var(--color-focus-ring);
|
|
3434
|
-
}
|
|
3435
|
-
.sidebar-search-input::placeholder { color: var(--color-text-secondary); }
|
|
3436
|
-
|
|
3437
|
-
/* ---------- Sidebar list items: cards ---------- */
|
|
3438
|
-
.sidebar-list {
|
|
3439
|
-
list-style: none;
|
|
3440
|
-
padding: 0.25rem 0.5rem 1rem;
|
|
3441
|
-
margin: 0;
|
|
3442
|
-
overflow-y: auto;
|
|
3443
|
-
flex: 1;
|
|
3444
|
-
min-height: 0;
|
|
3445
|
-
}
|
|
3446
|
-
.conversation-item {
|
|
3447
|
-
display: flex;
|
|
3448
|
-
align-items: center;
|
|
3449
|
-
gap: 0.375rem;
|
|
3450
|
-
padding: 0.5rem 0.625rem;
|
|
3451
|
-
margin: 0.125rem 0;
|
|
3452
|
-
border-radius: var(--radius-md);
|
|
3453
|
-
cursor: pointer;
|
|
3454
|
-
color: var(--color-text-primary);
|
|
3455
|
-
transition: background-color 0.12s;
|
|
3456
|
-
position: relative;
|
|
3457
|
-
border-left: none;
|
|
3458
|
-
}
|
|
3459
|
-
.conversation-item-content {
|
|
3460
|
-
flex: 1;
|
|
3461
|
-
min-width: 0;
|
|
3462
|
-
overflow: hidden;
|
|
3463
|
-
}
|
|
3464
|
-
.conversation-item:hover { background: var(--color-bg-hover); }
|
|
3465
|
-
.conversation-item.active {
|
|
3466
|
-
background: var(--color-primary);
|
|
3467
|
-
color: #fff;
|
|
3468
|
-
}
|
|
3469
|
-
.conversation-item.active .conversation-item-meta { color: rgba(255,255,255,0.85); }
|
|
3470
|
-
.conversation-item-title {
|
|
3471
|
-
font-size: 0.8125rem;
|
|
3472
|
-
font-weight: 500;
|
|
3473
|
-
line-height: 1.3;
|
|
3474
|
-
overflow: hidden;
|
|
3475
|
-
text-overflow: ellipsis;
|
|
3476
|
-
white-space: nowrap;
|
|
3477
|
-
margin-bottom: 0.125rem;
|
|
3478
|
-
}
|
|
3479
|
-
.conversation-item-meta {
|
|
3480
|
-
font-size: 0.6875rem;
|
|
3481
|
-
color: var(--color-text-secondary);
|
|
3482
|
-
overflow: hidden;
|
|
3483
|
-
text-overflow: ellipsis;
|
|
3484
|
-
white-space: nowrap;
|
|
3485
|
-
}
|
|
3486
|
-
|
|
3487
|
-
/* ========== merged from ui-fixes-2.css ========== */
|
|
3488
|
-
/* =====================================================================
|
|
3489
|
-
ui-fixes-2.css — Main panel, welcome screen, messages, input card
|
|
3490
|
-
===================================================================== */
|
|
3491
|
-
|
|
3492
|
-
/* ---------- Main header: cleaner separation ---------- */
|
|
3493
|
-
.main-header {
|
|
3494
|
-
gap: 0.5rem;
|
|
3495
|
-
padding: 0 0.75rem;
|
|
3496
|
-
border-bottom: 1px solid var(--color-border);
|
|
3497
|
-
}
|
|
3498
|
-
.header-title {
|
|
3499
|
-
font-size: 0.9375rem;
|
|
3500
|
-
font-weight: 600;
|
|
3501
|
-
color: var(--color-text-primary);
|
|
3502
|
-
}
|
|
3503
|
-
|
|
3504
|
-
/* ---------- View toggle bar: pill tabs, not underline-in-void ---------- */
|
|
3505
|
-
.view-toggle-bar {
|
|
3506
|
-
gap: 0.25rem;
|
|
3507
|
-
padding: 0.375rem 0.75rem;
|
|
3508
|
-
background: var(--color-bg-primary);
|
|
3509
|
-
border-bottom: 1px solid var(--color-border);
|
|
3510
|
-
}
|
|
3511
|
-
.view-toggle-btn {
|
|
3512
|
-
padding: 0.375rem 0.625rem;
|
|
3513
|
-
border-radius: var(--radius-sm);
|
|
3514
|
-
border: none;
|
|
3515
|
-
background: transparent;
|
|
3516
|
-
color: var(--color-text-secondary);
|
|
3517
|
-
min-height: 32px;
|
|
3518
|
-
display: inline-flex;
|
|
3519
|
-
align-items: center;
|
|
3520
|
-
justify-content: center;
|
|
3521
|
-
gap: 0.375rem;
|
|
3522
|
-
}
|
|
3523
|
-
.view-toggle-btn:hover {
|
|
3524
|
-
background: var(--color-bg-hover);
|
|
3525
|
-
color: var(--color-text-primary);
|
|
3526
|
-
}
|
|
3527
|
-
.view-toggle-btn.active {
|
|
3528
|
-
background: rgba(59,130,246,0.1);
|
|
3529
|
-
color: var(--color-primary);
|
|
3530
|
-
border-bottom-color: transparent;
|
|
3531
|
-
}
|
|
3532
|
-
|
|
3533
|
-
/* ---------- Welcome screen ---------- */
|
|
3534
|
-
.main-panel > .welcome-screen {
|
|
3535
|
-
display: flex;
|
|
3536
|
-
flex-direction: column;
|
|
3537
|
-
align-items: center;
|
|
3538
|
-
justify-content: center;
|
|
3539
|
-
gap: 0.75rem;
|
|
3540
|
-
padding: 2rem 1.5rem;
|
|
3541
|
-
text-align: center;
|
|
3542
|
-
flex: 1;
|
|
3543
|
-
min-height: 0;
|
|
3544
|
-
overflow-y: auto;
|
|
3545
|
-
}
|
|
3546
|
-
.welcome-logo {
|
|
3547
|
-
width: 72px;
|
|
3548
|
-
height: 72px;
|
|
3549
|
-
border-radius: var(--radius-xl);
|
|
3550
|
-
background: linear-gradient(135deg, #3b82f6, #6366f1);
|
|
3551
|
-
color: #fff;
|
|
3552
|
-
font-size: 2.25rem;
|
|
3553
|
-
font-weight: 700;
|
|
3554
|
-
display: flex;
|
|
3555
|
-
align-items: center;
|
|
3556
|
-
justify-content: center;
|
|
3557
|
-
box-shadow: var(--shadow-md);
|
|
3558
|
-
margin-bottom: 0.5rem;
|
|
3559
|
-
}
|
|
3560
|
-
.welcome-title {
|
|
3561
|
-
font-size: 1.75rem;
|
|
3562
|
-
font-weight: 700;
|
|
3563
|
-
margin: 0;
|
|
3564
|
-
color: var(--color-text-primary);
|
|
3565
|
-
}
|
|
3566
|
-
.welcome-subtitle {
|
|
3567
|
-
font-size: 0.9375rem;
|
|
3568
|
-
color: var(--color-text-secondary);
|
|
3569
|
-
margin: 0 0 1.5rem;
|
|
3570
|
-
}
|
|
3571
|
-
.welcome-agents-grid {
|
|
3572
|
-
display: grid;
|
|
3573
|
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
3574
|
-
gap: 0.75rem;
|
|
3575
|
-
width: 100%;
|
|
3576
|
-
max-width: 720px;
|
|
3577
|
-
}
|
|
3578
|
-
|
|
3579
|
-
/* Hide welcome when empty / conversation active */
|
|
3580
|
-
.main-panel > .welcome-screen.hidden { display: none; }
|
|
3581
|
-
|
|
3582
|
-
/* #output-scroll needs to take remaining flex space */
|
|
3583
|
-
.main-panel > #output-scroll {
|
|
3584
|
-
display: flex;
|
|
3585
|
-
flex-direction: column;
|
|
3586
|
-
flex: 1;
|
|
3587
|
-
min-height: 0;
|
|
3588
|
-
}
|
|
3589
|
-
|
|
3590
|
-
/* ---------- Messages scroll: breathing room ---------- */
|
|
3591
|
-
#output-scroll {
|
|
3592
|
-
background: var(--color-bg-primary);
|
|
3593
|
-
}
|
|
3594
|
-
.messages-wrapper {
|
|
3595
|
-
max-width: 860px;
|
|
3596
|
-
margin: 0 auto;
|
|
3597
|
-
padding: 1rem 1.25rem 1.5rem;
|
|
3598
|
-
width: 100%;
|
|
3599
|
-
}
|
|
3600
|
-
|
|
3601
|
-
/* ---------- Streaming status bar: hidden by default, floating chip ---------- */
|
|
3602
|
-
body .streaming-status-bar {
|
|
3603
|
-
display: none !important;
|
|
3604
|
-
align-items: center;
|
|
3605
|
-
gap: 0.5rem;
|
|
3606
|
-
padding: 0.5rem 0.875rem;
|
|
3607
|
-
margin: 0 auto;
|
|
3608
|
-
max-width: 860px;
|
|
3609
|
-
background: var(--color-bg-secondary);
|
|
3610
|
-
border: 1px solid var(--color-border);
|
|
3611
|
-
border-radius: var(--radius-lg);
|
|
3612
|
-
font-size: 0.8125rem;
|
|
3613
|
-
color: var(--color-text-primary);
|
|
3614
|
-
box-shadow: var(--shadow-sm);
|
|
3615
|
-
}
|
|
3616
|
-
body .streaming-status-bar.visible { display: flex !important; }
|
|
3617
|
-
.streaming-status-bar .typing-dots {
|
|
3618
|
-
display: inline-flex;
|
|
3619
|
-
gap: 3px;
|
|
3620
|
-
align-items: center;
|
|
3621
|
-
}
|
|
3622
|
-
.streaming-status-bar .typing-dots span {
|
|
3623
|
-
width: 5px; height: 5px;
|
|
3624
|
-
background: var(--color-primary);
|
|
3625
|
-
border-radius: 50%;
|
|
3626
|
-
animation: typingBlink 1.2s infinite ease-in-out both;
|
|
3627
|
-
}
|
|
3628
|
-
.streaming-status-bar .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
|
|
3629
|
-
.streaming-status-bar .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
|
|
3630
|
-
@keyframes typingBlink {
|
|
3631
|
-
0%,80%,100% { opacity: 0.3; transform: scale(0.8); }
|
|
3632
|
-
40% { opacity: 1; transform: scale(1); }
|
|
3633
|
-
}
|
|
3634
|
-
.status-agent-name { font-weight: 600; }
|
|
3635
|
-
.status-cancel-btn {
|
|
3636
|
-
margin-left: auto;
|
|
3637
|
-
padding: 0.25rem 0.625rem;
|
|
3638
|
-
background: transparent;
|
|
3639
|
-
border: 1px solid var(--color-border);
|
|
3640
|
-
border-radius: var(--radius-sm);
|
|
3641
|
-
color: var(--color-text-secondary);
|
|
3642
|
-
font-size: 0.75rem;
|
|
3643
|
-
cursor: pointer;
|
|
3644
|
-
}
|
|
3645
|
-
.status-cancel-btn:hover {
|
|
3646
|
-
border-color: var(--color-error);
|
|
3647
|
-
color: var(--color-error);
|
|
3648
|
-
}
|
|
3649
|
-
|
|
3650
|
-
/* ---------- Drop zone overlay ---------- */
|
|
3651
|
-
.drop-zone-overlay {
|
|
3652
|
-
position: absolute;
|
|
3653
|
-
inset: 0;
|
|
3654
|
-
display: none;
|
|
3655
|
-
align-items: center;
|
|
3656
|
-
justify-content: center;
|
|
3657
|
-
background: rgba(59,130,246,0.1);
|
|
3658
|
-
border: 2px dashed var(--color-primary);
|
|
3659
|
-
border-radius: var(--radius-lg);
|
|
3660
|
-
pointer-events: none;
|
|
3661
|
-
z-index: 10;
|
|
3662
|
-
}
|
|
3663
|
-
.drop-zone-overlay.active { display: flex; }
|
|
3664
|
-
.drop-zone-content { text-align: center; color: var(--color-primary); }
|
|
3665
|
-
.drop-zone-icon { font-size: 3rem; font-weight: 300; }
|
|
3666
|
-
.drop-zone-text { font-size: 0.9375rem; font-weight: 500; }
|
|
3667
|
-
|
|
3668
|
-
/* ========== merged from ui-fixes-3.css ========== */
|
|
3669
|
-
/* =====================================================================
|
|
3670
|
-
ui-fixes-3.css — Input card (modern bottom composer), mobile, tools popup
|
|
3671
|
-
===================================================================== */
|
|
3672
|
-
|
|
3673
|
-
/* ---------- Input section: holds the card, proper bottom padding ---------- */
|
|
3674
|
-
.input-section {
|
|
3675
|
-
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
|
|
3676
|
-
background: var(--color-bg-primary);
|
|
3677
|
-
border-top: 1px solid var(--color-border);
|
|
3678
|
-
}
|
|
3679
|
-
|
|
3680
|
-
/* ---------- Input card: pill-shaped composer with toolbar ---------- */
|
|
3681
|
-
.input-card {
|
|
3682
|
-
max-width: 860px;
|
|
3683
|
-
margin: 0 auto;
|
|
3684
|
-
background: var(--color-bg-secondary);
|
|
3685
|
-
border: 1px solid var(--color-border);
|
|
3686
|
-
border-radius: var(--radius-lg);
|
|
3687
|
-
padding: 0.5rem 0.625rem;
|
|
3688
|
-
display: flex;
|
|
3689
|
-
flex-direction: column;
|
|
3690
|
-
gap: 0.375rem;
|
|
3691
|
-
transition: border-color 0.15s, box-shadow 0.15s;
|
|
3692
|
-
}
|
|
3693
|
-
.input-card:focus-within {
|
|
3694
|
-
border-color: var(--color-primary);
|
|
3695
|
-
box-shadow: 0 0 0 3px var(--color-focus-ring);
|
|
3696
|
-
}
|
|
3697
|
-
.input-card-textarea {
|
|
3698
|
-
width: 100%;
|
|
3699
|
-
min-height: 36px;
|
|
3700
|
-
max-height: 180px;
|
|
3701
|
-
padding: 0.375rem 0.5rem;
|
|
3702
|
-
background: transparent;
|
|
3703
|
-
border: none;
|
|
3704
|
-
outline: none;
|
|
3705
|
-
resize: none;
|
|
3706
|
-
color: var(--color-text-primary);
|
|
3707
|
-
font-family: inherit;
|
|
3708
|
-
font-size: 0.9375rem;
|
|
3709
|
-
line-height: 1.5;
|
|
3710
|
-
}
|
|
3711
|
-
.input-card-textarea::placeholder { color: var(--color-text-secondary); }
|
|
3712
|
-
|
|
3713
|
-
/* toolbar: selectors on the left, action buttons on the right */
|
|
3714
|
-
.input-card-toolbar {
|
|
3715
|
-
display: flex;
|
|
3716
|
-
align-items: center;
|
|
3717
|
-
gap: 0.375rem;
|
|
3718
|
-
flex-wrap: wrap;
|
|
3719
|
-
}
|
|
3720
|
-
.input-card-selectors {
|
|
3721
|
-
display: flex;
|
|
3722
|
-
gap: 0.375rem;
|
|
3723
|
-
align-items: center;
|
|
3724
|
-
flex-wrap: wrap;
|
|
3725
|
-
flex: 1;
|
|
3726
|
-
min-width: 0;
|
|
3727
|
-
}
|
|
3728
|
-
.input-card-actions {
|
|
3729
|
-
display: flex;
|
|
3730
|
-
gap: 0.25rem;
|
|
3731
|
-
align-items: center;
|
|
3732
|
-
margin-left: auto;
|
|
3733
|
-
flex-shrink: 0;
|
|
3734
|
-
}
|
|
3735
|
-
|
|
3736
|
-
.input-chip-select {
|
|
3737
|
-
height: 28px;
|
|
3738
|
-
padding: 0 0.5rem;
|
|
3739
|
-
font-size: 0.75rem;
|
|
3740
|
-
background: var(--color-bg-primary);
|
|
3741
|
-
color: var(--color-text-primary);
|
|
3742
|
-
border: 1px solid var(--color-border);
|
|
3743
|
-
border-radius: 999px;
|
|
3744
|
-
cursor: pointer;
|
|
3745
|
-
max-width: 180px;
|
|
3746
|
-
transition: border-color 0.12s;
|
|
3747
|
-
}
|
|
3748
|
-
.input-chip-select:hover { border-color: var(--color-primary); }
|
|
3749
|
-
.input-chip-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
|
|
3750
|
-
.input-chip-select:empty,
|
|
3751
|
-
.input-chip-select[data-empty="true"] { display: none; }
|
|
3752
|
-
|
|
3753
|
-
/* When chip selects are empty and only star remains, compact layout */
|
|
3754
|
-
#savePresetBtn { width: 28px !important; height: 28px !important; font-size: 0.875rem; }
|
|
3755
|
-
|
|
3756
|
-
/* Input card: if selectors row is empty (no visible chips), hide whole row */
|
|
3757
|
-
.input-card-selectors:not(:has(select:not([style*="display: none"]):not(:empty):not([data-empty="true"]))):not(:has(#savePresetBtn + *)) {
|
|
3758
|
-
/* do nothing: keep preset visible */
|
|
3759
|
-
}
|
|
3760
|
-
|
|
3761
|
-
.input-icon-btn {
|
|
3762
|
-
display: inline-flex;
|
|
3763
|
-
align-items: center;
|
|
3764
|
-
justify-content: center;
|
|
3765
|
-
width: 32px;
|
|
3766
|
-
height: 32px;
|
|
3767
|
-
padding: 0;
|
|
3768
|
-
background: transparent;
|
|
3769
|
-
border: 1px solid transparent;
|
|
3770
|
-
border-radius: var(--radius-sm);
|
|
3771
|
-
color: var(--color-text-secondary);
|
|
3772
|
-
cursor: pointer;
|
|
3773
|
-
transition: background 0.12s, color 0.12s;
|
|
3774
|
-
}
|
|
3775
|
-
.input-icon-btn:hover {
|
|
3776
|
-
background: var(--color-bg-hover);
|
|
3777
|
-
color: var(--color-text-primary);
|
|
3778
|
-
}
|
|
3779
|
-
.input-icon-btn svg { width: 16px; height: 16px; }
|
|
3780
|
-
|
|
3781
|
-
.input-send-btn {
|
|
3782
|
-
background: var(--color-primary);
|
|
3783
|
-
color: #fff;
|
|
3784
|
-
width: 34px;
|
|
3785
|
-
height: 34px;
|
|
3786
|
-
border-radius: var(--radius-md);
|
|
3787
|
-
}
|
|
3788
|
-
.input-send-btn:hover { background: var(--color-primary-dark); color: #fff; }
|
|
3789
|
-
.input-send-btn svg { width: 16px; height: 16px; }
|
|
3790
|
-
.input-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
3791
|
-
|
|
3792
|
-
/* When streaming: dim the card slightly */
|
|
3793
|
-
.input-card[data-streaming="true"] {
|
|
3794
|
-
opacity: 0.75;
|
|
3795
|
-
}
|
|
3796
|
-
.input-card[data-streaming="true"] .input-card-textarea {
|
|
3797
|
-
cursor: not-allowed;
|
|
3798
|
-
}
|
|
3799
|
-
|
|
3800
|
-
/* ---------- Tools popup: centered modal ---------- */
|
|
3801
|
-
body .tools-popup {
|
|
3802
|
-
display: none !important;
|
|
3803
|
-
position: fixed;
|
|
3804
|
-
inset: 0;
|
|
3805
|
-
z-index: 200;
|
|
3806
|
-
background: rgba(15,23,42,0.45);
|
|
3807
|
-
align-items: center;
|
|
3808
|
-
justify-content: center;
|
|
3809
|
-
padding: 1rem;
|
|
3810
|
-
}
|
|
3811
|
-
body .tools-popup.open { display: flex !important; }
|
|
3812
|
-
.tools-popup-content {
|
|
3813
|
-
width: 100%;
|
|
3814
|
-
max-width: 720px;
|
|
3815
|
-
max-height: 85vh;
|
|
3816
|
-
background: var(--color-bg-raised);
|
|
3817
|
-
border: 1px solid var(--color-border);
|
|
3818
|
-
border-radius: var(--radius-lg);
|
|
3819
|
-
box-shadow: var(--shadow-lg);
|
|
3820
|
-
display: flex;
|
|
3821
|
-
flex-direction: column;
|
|
3822
|
-
overflow: hidden;
|
|
3823
|
-
}
|
|
3824
|
-
.tools-popup-header {
|
|
3825
|
-
display: flex;
|
|
3826
|
-
align-items: center;
|
|
3827
|
-
justify-content: space-between;
|
|
3828
|
-
gap: 0.75rem;
|
|
3829
|
-
padding: 0.75rem 1rem;
|
|
3830
|
-
border-bottom: 1px solid var(--color-border);
|
|
3831
|
-
background: var(--color-bg-secondary);
|
|
3832
|
-
}
|
|
3833
|
-
.tools-popup-scroll {
|
|
3834
|
-
flex: 1;
|
|
3835
|
-
overflow-y: auto;
|
|
3836
|
-
padding: 0.75rem 1rem;
|
|
3837
|
-
}
|
|
3838
|
-
.tools-popup-footer {
|
|
3839
|
-
display: flex;
|
|
3840
|
-
gap: 0.5rem;
|
|
3841
|
-
justify-content: flex-end;
|
|
3842
|
-
padding: 0.75rem 1rem;
|
|
3843
|
-
border-top: 1px solid var(--color-border);
|
|
3844
|
-
background: var(--color-bg-secondary);
|
|
3845
|
-
}
|
|
3846
|
-
.tools-popup-refresh-btn,
|
|
3847
|
-
.tools-popup-update-btn {
|
|
3848
|
-
padding: 0.5rem 1rem;
|
|
3849
|
-
font-size: 0.8125rem;
|
|
3850
|
-
font-weight: 500;
|
|
3851
|
-
border-radius: var(--radius-md);
|
|
3852
|
-
border: 1px solid var(--color-border);
|
|
3853
|
-
background: var(--color-bg-primary);
|
|
3854
|
-
color: var(--color-text-primary);
|
|
3855
|
-
cursor: pointer;
|
|
3856
|
-
}
|
|
3857
|
-
.tools-popup-refresh-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
|
3858
|
-
.tools-popup-update-btn {
|
|
3859
|
-
background: var(--color-primary);
|
|
3860
|
-
color: #fff;
|
|
3861
|
-
border-color: var(--color-primary);
|
|
3862
|
-
}
|
|
3863
|
-
.tools-popup-update-btn:hover { background: var(--color-primary-dark); }
|
|
3864
|
-
|
|
3865
|
-
/* ---------- Folder modal (if opened) ---------- */
|
|
3866
|
-
body .folder-modal-overlay {
|
|
3867
|
-
display: none !important;
|
|
3868
|
-
position: fixed;
|
|
3869
|
-
inset: 0;
|
|
3870
|
-
z-index: 200;
|
|
3871
|
-
background: rgba(15,23,42,0.45);
|
|
3872
|
-
align-items: center;
|
|
3873
|
-
justify-content: center;
|
|
3874
|
-
padding: 1rem;
|
|
3875
|
-
}
|
|
3876
|
-
body .folder-modal-overlay.open { display: flex !important; }
|
|
3877
|
-
.folder-modal {
|
|
3878
|
-
width: 100%;
|
|
3879
|
-
max-width: 560px;
|
|
3880
|
-
max-height: 80vh;
|
|
3881
|
-
background: var(--color-bg-raised);
|
|
3882
|
-
border: 1px solid var(--color-border);
|
|
3883
|
-
border-radius: var(--radius-lg);
|
|
3884
|
-
box-shadow: var(--shadow-lg);
|
|
3885
|
-
display: flex;
|
|
3886
|
-
flex-direction: column;
|
|
3887
|
-
overflow: hidden;
|
|
3888
|
-
}
|
|
3889
|
-
.folder-modal-header {
|
|
3890
|
-
display: flex; justify-content: space-between; align-items: center;
|
|
3891
|
-
padding: 0.75rem 1rem;
|
|
3892
|
-
border-bottom: 1px solid var(--color-border);
|
|
3893
|
-
}
|
|
3894
|
-
.folder-modal-header h3 { margin: 0; font-size: 1rem; }
|
|
3895
|
-
.folder-modal-close {
|
|
3896
|
-
background: none; border: none; font-size: 1.5rem;
|
|
3897
|
-
color: var(--color-text-secondary); cursor: pointer; line-height: 1;
|
|
3898
|
-
}
|
|
3899
|
-
.folder-modal-footer {
|
|
3900
|
-
display: flex; gap: 0.5rem; justify-content: flex-end;
|
|
3901
|
-
padding: 0.75rem 1rem;
|
|
3902
|
-
border-top: 1px solid var(--color-border);
|
|
3903
|
-
}
|
|
3904
|
-
|
|
3905
|
-
/* ========== merged from ui-fixes-4.css ========== */
|
|
3906
|
-
/* =====================================================================
|
|
3907
|
-
ui-fixes-4.css — Responsive (mobile/tablet) + dark-theme polish
|
|
3908
|
-
===================================================================== */
|
|
3909
|
-
|
|
3910
|
-
/* ---------- Tablet (≤ 1024px): narrower sidebar ---------- */
|
|
3911
|
-
@media (max-width: 1024px) {
|
|
3912
|
-
:root { --sidebar-width: 240px; }
|
|
3913
|
-
.messages-wrapper { padding: 0.875rem 1rem; }
|
|
3914
|
-
}
|
|
3915
|
-
|
|
3916
|
-
/* ---------- Mobile (≤ 768px): sidebar becomes drawer ---------- */
|
|
3917
|
-
@media (max-width: 768px) {
|
|
3918
|
-
.app-shell { flex-direction: row; }
|
|
3919
|
-
|
|
3920
|
-
.sidebar {
|
|
3921
|
-
position: fixed;
|
|
3922
|
-
top: 0; left: 0;
|
|
3923
|
-
height: 100dvh;
|
|
3924
|
-
width: 280px;
|
|
3925
|
-
max-width: 85vw;
|
|
3926
|
-
transform: translateX(-100%);
|
|
3927
|
-
z-index: 80;
|
|
3928
|
-
box-shadow: var(--shadow-lg);
|
|
3929
|
-
transition: transform 0.2s ease-out !important;
|
|
3930
|
-
}
|
|
3931
|
-
.sidebar.open { transform: translateX(0); }
|
|
3932
|
-
|
|
3933
|
-
.sidebar-overlay {
|
|
3934
|
-
display: none;
|
|
3935
|
-
position: fixed;
|
|
3936
|
-
inset: 0;
|
|
3937
|
-
background: rgba(15,23,42,0.5);
|
|
3938
|
-
z-index: 70;
|
|
3939
|
-
}
|
|
3940
|
-
.sidebar-overlay.open { display: block; }
|
|
3941
|
-
|
|
3942
|
-
.main-panel { width: 100%; }
|
|
3943
|
-
.main-header { padding: 0 0.5rem; }
|
|
3944
|
-
.header-title { font-size: 0.875rem; }
|
|
3945
|
-
.header-controls { gap: 0.25rem; }
|
|
3946
|
-
|
|
3947
|
-
/* hide tertiary chips in very tight space */
|
|
3948
|
-
.status-badge span { display: none; }
|
|
3949
|
-
.status-badge { padding: 0.25rem; }
|
|
3950
|
-
|
|
3951
|
-
/* input card on mobile */
|
|
3952
|
-
.input-section { padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); }
|
|
3953
|
-
.input-card { padding: 0.375rem 0.5rem; border-radius: var(--radius-md); }
|
|
3954
|
-
.input-card-textarea { font-size: 1rem; /* prevent iOS zoom */ }
|
|
3955
|
-
.input-chip-select { max-width: 140px; }
|
|
3956
|
-
|
|
3957
|
-
.welcome-title { font-size: 1.375rem; }
|
|
3958
|
-
.welcome-logo { width: 56px; height: 56px; font-size: 1.75rem; }
|
|
3959
|
-
.messages-wrapper { padding: 0.75rem 0.75rem 1rem; }
|
|
3960
|
-
}
|
|
3961
|
-
|
|
3962
|
-
/* ---------- Small mobile (≤ 480px): hide noncritical header buttons ---------- */
|
|
3963
|
-
@media (max-width: 480px) {
|
|
3964
|
-
.model-dl-indicator { display: none; }
|
|
3965
|
-
.sidebar-header h2 { display: none; }
|
|
3966
|
-
.input-card-actions .input-icon-btn:not(.input-send-btn):not(.voice-mic-btn) { display: none; }
|
|
3967
|
-
}
|
|
3968
|
-
|
|
3969
|
-
/* ---------- Touch targets: ensure 40px minimum on pointer:coarse ---------- */
|
|
3970
|
-
@media (pointer: coarse) {
|
|
3971
|
-
.sidebar-toggle-btn,
|
|
3972
|
-
.theme-toggle-btn,
|
|
3973
|
-
.header-icon-btn,
|
|
3974
|
-
.input-icon-btn,
|
|
3975
|
-
.sidebar-overflow-btn,
|
|
3976
|
-
.view-toggle-btn,
|
|
3977
|
-
.status-cancel-btn {
|
|
3978
|
-
min-width: 40px;
|
|
3979
|
-
min-height: 40px;
|
|
3980
|
-
}
|
|
3981
|
-
.conversation-item { padding: 0.625rem 0.625rem; }
|
|
3982
|
-
}
|
|
3983
|
-
|
|
3984
|
-
/* ---------- Focus-visible ring: accessibility, non-intrusive ---------- */
|
|
3985
|
-
button:focus-visible,
|
|
3986
|
-
select:focus-visible,
|
|
3987
|
-
input:focus-visible,
|
|
3988
|
-
textarea:focus-visible {
|
|
3989
|
-
outline: 2px solid var(--color-primary);
|
|
3990
|
-
outline-offset: 2px;
|
|
3991
|
-
}
|
|
3992
|
-
|
|
3993
|
-
/* ---------- Dark mode: neutral grey palette ---------- */
|
|
3994
|
-
html.dark {
|
|
3995
|
-
--color-primary: #3b82f6;
|
|
3996
|
-
--color-primary-dark: #2563eb;
|
|
3997
|
-
--color-bg-primary: #1a1a1a;
|
|
3998
|
-
--color-bg-secondary: #212121;
|
|
3999
|
-
--color-bg-raised: #2a2a2a;
|
|
4000
|
-
--color-bg-hover: rgba(255,255,255,0.06);
|
|
4001
|
-
--color-text-primary: #e5e5e5;
|
|
4002
|
-
--color-text-secondary: #a3a3a3;
|
|
4003
|
-
--color-border: #333333;
|
|
4004
|
-
--color-focus-ring: rgba(163,163,163,0.35);
|
|
4005
|
-
}
|
|
4006
|
-
html.dark body { background: var(--color-bg-primary); color: var(--color-text-primary); }
|
|
4007
|
-
html.dark .sidebar { background: #161616; border-right: 1px solid var(--color-border); }
|
|
4008
|
-
html.dark .main-header,
|
|
4009
|
-
html.dark .view-toggle-bar,
|
|
4010
|
-
html.dark .input-section { background: var(--color-bg-primary); }
|
|
4011
|
-
html.dark .input-card { background: #161616; border-color: var(--color-border); }
|
|
4012
|
-
html.dark .input-chip-select { background: #161616; }
|
|
4013
|
-
html.dark .status-badge { background: #161616; }
|
|
4014
|
-
html.dark .sidebar-search-input { background: #161616; }
|
|
4015
|
-
html.dark .conversation-item.active { background: #2f2f2f; color: var(--color-text-primary); }
|
|
4016
|
-
html.dark .tools-popup,
|
|
4017
|
-
html.dark .folder-modal-overlay { background: rgba(0,0,0,0.65); }
|
|
4018
|
-
|
|
4019
|
-
/* Light mode polish: softer sidebar separation */
|
|
4020
|
-
html:not(.dark) .sidebar { border-right: 1px solid var(--color-border); }
|
|
4021
|
-
html:not(.dark) .main-header { background: var(--color-bg-primary); }
|
|
4022
|
-
|
|
4023
|
-
/* ---------- Scrollbar styling (subtle) ---------- */
|
|
4024
|
-
.sidebar-list,
|
|
4025
|
-
#output-scroll,
|
|
4026
|
-
.tools-popup-scroll {
|
|
4027
|
-
scrollbar-width: thin;
|
|
4028
|
-
scrollbar-color: var(--color-border) transparent;
|
|
4029
|
-
}
|
|
4030
|
-
.sidebar-list::-webkit-scrollbar,
|
|
4031
|
-
#output-scroll::-webkit-scrollbar,
|
|
4032
|
-
.tools-popup-scroll::-webkit-scrollbar {
|
|
4033
|
-
width: 8px;
|
|
4034
|
-
}
|
|
4035
|
-
.sidebar-list::-webkit-scrollbar-thumb,
|
|
4036
|
-
#output-scroll::-webkit-scrollbar-thumb,
|
|
4037
|
-
.tools-popup-scroll::-webkit-scrollbar-thumb {
|
|
4038
|
-
background: var(--color-border);
|
|
4039
|
-
border-radius: 4px;
|
|
4040
|
-
border: 2px solid transparent;
|
|
4041
|
-
background-clip: padding-box;
|
|
4042
|
-
}
|
|
4043
|
-
.sidebar-list::-webkit-scrollbar-thumb:hover,
|
|
4044
|
-
#output-scroll::-webkit-scrollbar-thumb:hover {
|
|
4045
|
-
background: var(--color-text-secondary);
|
|
4046
|
-
background-clip: padding-box;
|
|
4047
|
-
border: 2px solid transparent;
|
|
4048
|
-
}
|
|
4049
|
-
|
|
4050
|
-
/* ---------- Reduced motion ---------- */
|
|
4051
|
-
@media (prefers-reduced-motion: reduce) {
|
|
4052
|
-
*, *::before, *::after {
|
|
4053
|
-
animation-duration: 0.01ms !important;
|
|
4054
|
-
transition-duration: 0.01ms !important;
|
|
4055
|
-
}
|
|
4056
|
-
}
|
|
4057
|
-
|
|
4058
|
-
/* ---------- Hide legacy selectors leftovers if present ---------- */
|
|
4059
|
-
.agent-selector:empty,
|
|
4060
|
-
.model-selector:empty,
|
|
4061
|
-
.preset-selector:empty { display: none; }
|
|
3249
|
+
|
|
3250
|
+
.skip-link {
|
|
3251
|
+
position: absolute;
|
|
3252
|
+
top: -40px;
|
|
3253
|
+
left: 0;
|
|
3254
|
+
background: var(--color-primary, #3b82f6);
|
|
3255
|
+
color: #fff;
|
|
3256
|
+
padding: 8px 16px;
|
|
3257
|
+
z-index: 10000;
|
|
3258
|
+
text-decoration: none;
|
|
3259
|
+
border-radius: 0 0 4px 0;
|
|
3260
|
+
font-weight: 600;
|
|
3261
|
+
}
|
|
3262
|
+
.skip-link:focus {
|
|
3263
|
+
top: 0;
|
|
3264
|
+
}
|
|
3265
|
+
|
|
3266
|
+
:focus-visible {
|
|
3267
|
+
outline: 2px solid var(--color-primary, #3b82f6);
|
|
3268
|
+
outline-offset: 2px;
|
|
3269
|
+
border-radius: 2px;
|
|
3270
|
+
}
|
|
3271
|
+
|
|
3272
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3273
|
+
*,
|
|
3274
|
+
*::before,
|
|
3275
|
+
*::after {
|
|
3276
|
+
animation-duration: 0.01ms !important;
|
|
3277
|
+
animation-iteration-count: 1 !important;
|
|
3278
|
+
transition-duration: 0.01ms !important;
|
|
3279
|
+
scroll-behavior: auto !important;
|
|
3280
|
+
}
|
|
3281
|
+
}
|
|
3282
|
+
|
|
3283
|
+
/* ==========================================================================
|
|
3284
|
+
Legacy ui-fixes*.css (merged into main.css on 2026-04-20).
|
|
3285
|
+
Loaded last so they still win over earlier main.css rules; intentionally
|
|
3286
|
+
left as a recognisable block so future cleanups can prune systematically.
|
|
3287
|
+
========================================================================== */
|
|
3288
|
+
|
|
3289
|
+
/* ========== merged from ui-fixes.css ========== */
|
|
3290
|
+
/* =====================================================================
|
|
3291
|
+
ui-fixes.css — Design corrections layered on top of main.css
|
|
3292
|
+
Targets styles missing or broken for current markup (index.html).
|
|
3293
|
+
Loaded AFTER main.css so selectors here win on ties.
|
|
3294
|
+
===================================================================== */
|
|
3295
|
+
|
|
3296
|
+
/* ---------- Design tokens: richer spacing + elevation ---------- */
|
|
3297
|
+
:root {
|
|
3298
|
+
--radius-sm: 0.375rem;
|
|
3299
|
+
--radius-md: 0.5rem;
|
|
3300
|
+
--radius-lg: 0.75rem;
|
|
3301
|
+
--radius-xl: 1rem;
|
|
3302
|
+
--shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
|
|
3303
|
+
--shadow-md: 0 4px 12px rgba(15,23,42,0.08);
|
|
3304
|
+
--shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
|
|
3305
|
+
--color-bg-raised: #ffffff;
|
|
3306
|
+
--color-bg-hover: rgba(15,23,42,0.04);
|
|
3307
|
+
--color-focus-ring: rgba(59,130,246,0.35);
|
|
3308
|
+
--sidebar-width: 272px;
|
|
3309
|
+
}
|
|
3310
|
+
html.dark {
|
|
3311
|
+
--color-bg-raised: #202020;
|
|
3312
|
+
--color-bg-hover: rgba(255,255,255,0.05);
|
|
3313
|
+
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
|
|
3314
|
+
--shadow-md: 0 4px 12px rgba(0,0,0,0.45);
|
|
3315
|
+
--shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
|
|
3316
|
+
--color-focus-ring: rgba(96,165,250,0.45);
|
|
3317
|
+
}
|
|
3318
|
+
|
|
3319
|
+
/* ---------- Sidebar header: two rows, fix 422px overflow ---------- */
|
|
3320
|
+
.sidebar-header {
|
|
3321
|
+
flex-direction: row;
|
|
3322
|
+
align-items: center;
|
|
3323
|
+
justify-content: space-between;
|
|
3324
|
+
gap: 0.5rem;
|
|
3325
|
+
padding: 0.625rem 0.75rem;
|
|
3326
|
+
min-height: var(--header-height);
|
|
3327
|
+
border-bottom: 1px solid var(--color-border);
|
|
3328
|
+
}
|
|
3329
|
+
.sidebar-header h2 {
|
|
3330
|
+
font-size: 0.75rem;
|
|
3331
|
+
font-weight: 700;
|
|
3332
|
+
letter-spacing: 0.08em;
|
|
3333
|
+
color: var(--color-text-secondary);
|
|
3334
|
+
flex: 1;
|
|
3335
|
+
min-width: 0;
|
|
3336
|
+
overflow: hidden;
|
|
3337
|
+
text-overflow: ellipsis;
|
|
3338
|
+
}
|
|
3339
|
+
.sidebar-header-actions {
|
|
3340
|
+
display: flex;
|
|
3341
|
+
gap: 0.25rem;
|
|
3342
|
+
align-items: center;
|
|
3343
|
+
flex-shrink: 0;
|
|
3344
|
+
}
|
|
3345
|
+
|
|
3346
|
+
/* ---------- Sidebar overflow menu: hidden by default, floating panel ---------- */
|
|
3347
|
+
.sidebar-overflow-menu-wrapper {
|
|
3348
|
+
position: relative;
|
|
3349
|
+
display: inline-block;
|
|
3350
|
+
}
|
|
3351
|
+
.sidebar-overflow-btn {
|
|
3352
|
+
display: inline-flex;
|
|
3353
|
+
align-items: center;
|
|
3354
|
+
justify-content: center;
|
|
3355
|
+
width: 30px;
|
|
3356
|
+
height: 30px;
|
|
3357
|
+
padding: 0;
|
|
3358
|
+
background: transparent;
|
|
3359
|
+
border: 1px solid transparent;
|
|
3360
|
+
border-radius: var(--radius-sm);
|
|
3361
|
+
color: var(--color-text-secondary);
|
|
3362
|
+
cursor: pointer;
|
|
3363
|
+
font-size: 1rem;
|
|
3364
|
+
line-height: 1;
|
|
3365
|
+
}
|
|
3366
|
+
.sidebar-overflow-btn:hover {
|
|
3367
|
+
background: var(--color-bg-hover);
|
|
3368
|
+
color: var(--color-text-primary);
|
|
3369
|
+
}
|
|
3370
|
+
.sidebar-overflow-menu {
|
|
3371
|
+
display: none;
|
|
3372
|
+
position: absolute;
|
|
3373
|
+
top: calc(100% + 4px);
|
|
3374
|
+
right: 0;
|
|
3375
|
+
min-width: 200px;
|
|
3376
|
+
z-index: 60;
|
|
3377
|
+
padding: 0.25rem;
|
|
3378
|
+
background: var(--color-bg-raised);
|
|
3379
|
+
border: 1px solid var(--color-border);
|
|
3380
|
+
border-radius: var(--radius-md);
|
|
3381
|
+
box-shadow: var(--shadow-md);
|
|
3382
|
+
}
|
|
3383
|
+
.sidebar-overflow-menu.open { display: block; }
|
|
3384
|
+
.sidebar-overflow-menu-item {
|
|
3385
|
+
display: flex;
|
|
3386
|
+
align-items: center;
|
|
3387
|
+
gap: 0.5rem;
|
|
3388
|
+
width: 100%;
|
|
3389
|
+
padding: 0.5rem 0.625rem;
|
|
3390
|
+
background: transparent;
|
|
3391
|
+
border: none;
|
|
3392
|
+
border-radius: var(--radius-sm);
|
|
3393
|
+
color: var(--color-text-primary);
|
|
3394
|
+
font-size: 0.8125rem;
|
|
3395
|
+
text-align: left;
|
|
3396
|
+
cursor: pointer;
|
|
3397
|
+
}
|
|
3398
|
+
.sidebar-overflow-menu-item:hover { background: var(--color-bg-hover); }
|
|
3399
|
+
.sidebar-overflow-menu-item.danger { color: var(--color-error); }
|
|
3400
|
+
.sidebar-overflow-menu-item.danger:hover { background: rgba(239,68,68,0.1); }
|
|
3401
|
+
.sidebar-overflow-menu-item svg { flex-shrink: 0; }
|
|
3402
|
+
|
|
3403
|
+
/* ---------- Sidebar new-conversation button ---------- */
|
|
3404
|
+
.sidebar-new-btn {
|
|
3405
|
+
padding: 0.375rem 0.75rem;
|
|
3406
|
+
font-size: 0.8125rem;
|
|
3407
|
+
font-weight: 600;
|
|
3408
|
+
line-height: 1.2;
|
|
3409
|
+
height: 30px;
|
|
3410
|
+
}
|
|
3411
|
+
|
|
3412
|
+
/* ---------- Sidebar search ---------- */
|
|
3413
|
+
.sidebar-search-bar {
|
|
3414
|
+
padding: 0.5rem 0.75rem;
|
|
3415
|
+
flex-shrink: 0;
|
|
3416
|
+
}
|
|
3417
|
+
.sidebar-search-input {
|
|
3418
|
+
width: 100%;
|
|
3419
|
+
padding: 0.5rem 0.75rem;
|
|
3420
|
+
font-size: 0.8125rem;
|
|
3421
|
+
background: var(--color-bg-primary);
|
|
3422
|
+
border: 1px solid var(--color-border);
|
|
3423
|
+
border-radius: var(--radius-md);
|
|
3424
|
+
color: var(--color-text-primary);
|
|
3425
|
+
outline: none;
|
|
3426
|
+
transition: border-color 0.15s, box-shadow 0.15s;
|
|
3427
|
+
}
|
|
3428
|
+
.sidebar-search-input:focus {
|
|
3429
|
+
border-color: var(--color-primary);
|
|
3430
|
+
box-shadow: 0 0 0 3px var(--color-focus-ring);
|
|
3431
|
+
}
|
|
3432
|
+
.sidebar-search-input::placeholder { color: var(--color-text-secondary); }
|
|
3433
|
+
|
|
3434
|
+
/* ---------- Sidebar list items: cards ---------- */
|
|
3435
|
+
.sidebar-list {
|
|
3436
|
+
list-style: none;
|
|
3437
|
+
padding: 0.25rem 0.5rem 1rem;
|
|
3438
|
+
margin: 0;
|
|
3439
|
+
overflow-y: auto;
|
|
3440
|
+
flex: 1;
|
|
3441
|
+
min-height: 0;
|
|
3442
|
+
}
|
|
3443
|
+
.conversation-item {
|
|
3444
|
+
display: flex;
|
|
3445
|
+
align-items: center;
|
|
3446
|
+
gap: 0.375rem;
|
|
3447
|
+
padding: 0.5rem 0.625rem;
|
|
3448
|
+
margin: 0.125rem 0;
|
|
3449
|
+
border-radius: var(--radius-md);
|
|
3450
|
+
cursor: pointer;
|
|
3451
|
+
color: var(--color-text-primary);
|
|
3452
|
+
transition: background-color 0.12s;
|
|
3453
|
+
position: relative;
|
|
3454
|
+
border-left: none;
|
|
3455
|
+
}
|
|
3456
|
+
.conversation-item-content {
|
|
3457
|
+
flex: 1;
|
|
3458
|
+
min-width: 0;
|
|
3459
|
+
overflow: hidden;
|
|
3460
|
+
}
|
|
3461
|
+
.conversation-item:hover { background: var(--color-bg-hover); }
|
|
3462
|
+
.conversation-item.active {
|
|
3463
|
+
background: var(--color-primary);
|
|
3464
|
+
color: #fff;
|
|
3465
|
+
}
|
|
3466
|
+
.conversation-item.active .conversation-item-meta { color: rgba(255,255,255,0.85); }
|
|
3467
|
+
.conversation-item-title {
|
|
3468
|
+
font-size: 0.8125rem;
|
|
3469
|
+
font-weight: 500;
|
|
3470
|
+
line-height: 1.3;
|
|
3471
|
+
overflow: hidden;
|
|
3472
|
+
text-overflow: ellipsis;
|
|
3473
|
+
white-space: nowrap;
|
|
3474
|
+
margin-bottom: 0.125rem;
|
|
3475
|
+
}
|
|
3476
|
+
.conversation-item-meta {
|
|
3477
|
+
font-size: 0.6875rem;
|
|
3478
|
+
color: var(--color-text-secondary);
|
|
3479
|
+
overflow: hidden;
|
|
3480
|
+
text-overflow: ellipsis;
|
|
3481
|
+
white-space: nowrap;
|
|
3482
|
+
}
|
|
3483
|
+
|
|
3484
|
+
/* ========== merged from ui-fixes-2.css ========== */
|
|
3485
|
+
/* =====================================================================
|
|
3486
|
+
ui-fixes-2.css — Main panel, welcome screen, messages, input card
|
|
3487
|
+
===================================================================== */
|
|
3488
|
+
|
|
3489
|
+
/* ---------- Main header: cleaner separation ---------- */
|
|
3490
|
+
.main-header {
|
|
3491
|
+
gap: 0.5rem;
|
|
3492
|
+
padding: 0 0.75rem;
|
|
3493
|
+
border-bottom: 1px solid var(--color-border);
|
|
3494
|
+
}
|
|
3495
|
+
.header-title {
|
|
3496
|
+
font-size: 0.9375rem;
|
|
3497
|
+
font-weight: 600;
|
|
3498
|
+
color: var(--color-text-primary);
|
|
3499
|
+
}
|
|
3500
|
+
|
|
3501
|
+
/* ---------- View toggle bar: pill tabs, not underline-in-void ---------- */
|
|
3502
|
+
.view-toggle-bar {
|
|
3503
|
+
gap: 0.25rem;
|
|
3504
|
+
padding: 0.375rem 0.75rem;
|
|
3505
|
+
background: var(--color-bg-primary);
|
|
3506
|
+
border-bottom: 1px solid var(--color-border);
|
|
3507
|
+
}
|
|
3508
|
+
.view-toggle-btn {
|
|
3509
|
+
padding: 0.375rem 0.625rem;
|
|
3510
|
+
border-radius: var(--radius-sm);
|
|
3511
|
+
border: none;
|
|
3512
|
+
background: transparent;
|
|
3513
|
+
color: var(--color-text-secondary);
|
|
3514
|
+
min-height: 32px;
|
|
3515
|
+
display: inline-flex;
|
|
3516
|
+
align-items: center;
|
|
3517
|
+
justify-content: center;
|
|
3518
|
+
gap: 0.375rem;
|
|
3519
|
+
}
|
|
3520
|
+
.view-toggle-btn:hover {
|
|
3521
|
+
background: var(--color-bg-hover);
|
|
3522
|
+
color: var(--color-text-primary);
|
|
3523
|
+
}
|
|
3524
|
+
.view-toggle-btn.active {
|
|
3525
|
+
background: rgba(59,130,246,0.1);
|
|
3526
|
+
color: var(--color-primary);
|
|
3527
|
+
border-bottom-color: transparent;
|
|
3528
|
+
}
|
|
3529
|
+
|
|
3530
|
+
/* ---------- Welcome screen ---------- */
|
|
3531
|
+
.main-panel > .welcome-screen {
|
|
3532
|
+
display: flex;
|
|
3533
|
+
flex-direction: column;
|
|
3534
|
+
align-items: center;
|
|
3535
|
+
justify-content: center;
|
|
3536
|
+
gap: 0.75rem;
|
|
3537
|
+
padding: 2rem 1.5rem;
|
|
3538
|
+
text-align: center;
|
|
3539
|
+
flex: 1;
|
|
3540
|
+
min-height: 0;
|
|
3541
|
+
overflow-y: auto;
|
|
3542
|
+
}
|
|
3543
|
+
.welcome-logo {
|
|
3544
|
+
width: 72px;
|
|
3545
|
+
height: 72px;
|
|
3546
|
+
border-radius: var(--radius-xl);
|
|
3547
|
+
background: linear-gradient(135deg, #3b82f6, #6366f1);
|
|
3548
|
+
color: #fff;
|
|
3549
|
+
font-size: 2.25rem;
|
|
3550
|
+
font-weight: 700;
|
|
3551
|
+
display: flex;
|
|
3552
|
+
align-items: center;
|
|
3553
|
+
justify-content: center;
|
|
3554
|
+
box-shadow: var(--shadow-md);
|
|
3555
|
+
margin-bottom: 0.5rem;
|
|
3556
|
+
}
|
|
3557
|
+
.welcome-title {
|
|
3558
|
+
font-size: 1.75rem;
|
|
3559
|
+
font-weight: 700;
|
|
3560
|
+
margin: 0;
|
|
3561
|
+
color: var(--color-text-primary);
|
|
3562
|
+
}
|
|
3563
|
+
.welcome-subtitle {
|
|
3564
|
+
font-size: 0.9375rem;
|
|
3565
|
+
color: var(--color-text-secondary);
|
|
3566
|
+
margin: 0 0 1.5rem;
|
|
3567
|
+
}
|
|
3568
|
+
.welcome-agents-grid {
|
|
3569
|
+
display: grid;
|
|
3570
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
3571
|
+
gap: 0.75rem;
|
|
3572
|
+
width: 100%;
|
|
3573
|
+
max-width: 720px;
|
|
3574
|
+
}
|
|
3575
|
+
|
|
3576
|
+
/* Hide welcome when empty / conversation active */
|
|
3577
|
+
.main-panel > .welcome-screen.hidden { display: none; }
|
|
3578
|
+
|
|
3579
|
+
/* #output-scroll needs to take remaining flex space */
|
|
3580
|
+
.main-panel > #output-scroll {
|
|
3581
|
+
display: flex;
|
|
3582
|
+
flex-direction: column;
|
|
3583
|
+
flex: 1;
|
|
3584
|
+
min-height: 0;
|
|
3585
|
+
}
|
|
3586
|
+
|
|
3587
|
+
/* ---------- Messages scroll: breathing room ---------- */
|
|
3588
|
+
#output-scroll {
|
|
3589
|
+
background: var(--color-bg-primary);
|
|
3590
|
+
}
|
|
3591
|
+
.messages-wrapper {
|
|
3592
|
+
max-width: 860px;
|
|
3593
|
+
margin: 0 auto;
|
|
3594
|
+
padding: 1rem 1.25rem 1.5rem;
|
|
3595
|
+
width: 100%;
|
|
3596
|
+
}
|
|
3597
|
+
|
|
3598
|
+
/* ---------- Streaming status bar: hidden by default, floating chip ---------- */
|
|
3599
|
+
body .streaming-status-bar {
|
|
3600
|
+
display: none !important;
|
|
3601
|
+
align-items: center;
|
|
3602
|
+
gap: 0.5rem;
|
|
3603
|
+
padding: 0.5rem 0.875rem;
|
|
3604
|
+
margin: 0 auto;
|
|
3605
|
+
max-width: 860px;
|
|
3606
|
+
background: var(--color-bg-secondary);
|
|
3607
|
+
border: 1px solid var(--color-border);
|
|
3608
|
+
border-radius: var(--radius-lg);
|
|
3609
|
+
font-size: 0.8125rem;
|
|
3610
|
+
color: var(--color-text-primary);
|
|
3611
|
+
box-shadow: var(--shadow-sm);
|
|
3612
|
+
}
|
|
3613
|
+
body .streaming-status-bar.visible { display: flex !important; }
|
|
3614
|
+
.streaming-status-bar .typing-dots {
|
|
3615
|
+
display: inline-flex;
|
|
3616
|
+
gap: 3px;
|
|
3617
|
+
align-items: center;
|
|
3618
|
+
}
|
|
3619
|
+
.streaming-status-bar .typing-dots span {
|
|
3620
|
+
width: 5px; height: 5px;
|
|
3621
|
+
background: var(--color-primary);
|
|
3622
|
+
border-radius: 50%;
|
|
3623
|
+
animation: typingBlink 1.2s infinite ease-in-out both;
|
|
3624
|
+
}
|
|
3625
|
+
.streaming-status-bar .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
|
|
3626
|
+
.streaming-status-bar .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
|
|
3627
|
+
@keyframes typingBlink {
|
|
3628
|
+
0%,80%,100% { opacity: 0.3; transform: scale(0.8); }
|
|
3629
|
+
40% { opacity: 1; transform: scale(1); }
|
|
3630
|
+
}
|
|
3631
|
+
.status-agent-name { font-weight: 600; }
|
|
3632
|
+
.status-cancel-btn {
|
|
3633
|
+
margin-left: auto;
|
|
3634
|
+
padding: 0.25rem 0.625rem;
|
|
3635
|
+
background: transparent;
|
|
3636
|
+
border: 1px solid var(--color-border);
|
|
3637
|
+
border-radius: var(--radius-sm);
|
|
3638
|
+
color: var(--color-text-secondary);
|
|
3639
|
+
font-size: 0.75rem;
|
|
3640
|
+
cursor: pointer;
|
|
3641
|
+
}
|
|
3642
|
+
.status-cancel-btn:hover {
|
|
3643
|
+
border-color: var(--color-error);
|
|
3644
|
+
color: var(--color-error);
|
|
3645
|
+
}
|
|
3646
|
+
|
|
3647
|
+
/* ---------- Drop zone overlay ---------- */
|
|
3648
|
+
.drop-zone-overlay {
|
|
3649
|
+
position: absolute;
|
|
3650
|
+
inset: 0;
|
|
3651
|
+
display: none;
|
|
3652
|
+
align-items: center;
|
|
3653
|
+
justify-content: center;
|
|
3654
|
+
background: rgba(59,130,246,0.1);
|
|
3655
|
+
border: 2px dashed var(--color-primary);
|
|
3656
|
+
border-radius: var(--radius-lg);
|
|
3657
|
+
pointer-events: none;
|
|
3658
|
+
z-index: 10;
|
|
3659
|
+
}
|
|
3660
|
+
.drop-zone-overlay.active { display: flex; }
|
|
3661
|
+
.drop-zone-content { text-align: center; color: var(--color-primary); }
|
|
3662
|
+
.drop-zone-icon { font-size: 3rem; font-weight: 300; }
|
|
3663
|
+
.drop-zone-text { font-size: 0.9375rem; font-weight: 500; }
|
|
3664
|
+
|
|
3665
|
+
/* ========== merged from ui-fixes-3.css ========== */
|
|
3666
|
+
/* =====================================================================
|
|
3667
|
+
ui-fixes-3.css — Input card (modern bottom composer), mobile, tools popup
|
|
3668
|
+
===================================================================== */
|
|
3669
|
+
|
|
3670
|
+
/* ---------- Input section: holds the card, proper bottom padding ---------- */
|
|
3671
|
+
.input-section {
|
|
3672
|
+
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
|
|
3673
|
+
background: var(--color-bg-primary);
|
|
3674
|
+
border-top: 1px solid var(--color-border);
|
|
3675
|
+
}
|
|
3676
|
+
|
|
3677
|
+
/* ---------- Input card: pill-shaped composer with toolbar ---------- */
|
|
3678
|
+
.input-card {
|
|
3679
|
+
max-width: 860px;
|
|
3680
|
+
margin: 0 auto;
|
|
3681
|
+
background: var(--color-bg-secondary);
|
|
3682
|
+
border: 1px solid var(--color-border);
|
|
3683
|
+
border-radius: var(--radius-lg);
|
|
3684
|
+
padding: 0.5rem 0.625rem;
|
|
3685
|
+
display: flex;
|
|
3686
|
+
flex-direction: column;
|
|
3687
|
+
gap: 0.375rem;
|
|
3688
|
+
transition: border-color 0.15s, box-shadow 0.15s;
|
|
3689
|
+
}
|
|
3690
|
+
.input-card:focus-within {
|
|
3691
|
+
border-color: var(--color-primary);
|
|
3692
|
+
box-shadow: 0 0 0 3px var(--color-focus-ring);
|
|
3693
|
+
}
|
|
3694
|
+
.input-card-textarea {
|
|
3695
|
+
width: 100%;
|
|
3696
|
+
min-height: 36px;
|
|
3697
|
+
max-height: 180px;
|
|
3698
|
+
padding: 0.375rem 0.5rem;
|
|
3699
|
+
background: transparent;
|
|
3700
|
+
border: none;
|
|
3701
|
+
outline: none;
|
|
3702
|
+
resize: none;
|
|
3703
|
+
color: var(--color-text-primary);
|
|
3704
|
+
font-family: inherit;
|
|
3705
|
+
font-size: 0.9375rem;
|
|
3706
|
+
line-height: 1.5;
|
|
3707
|
+
}
|
|
3708
|
+
.input-card-textarea::placeholder { color: var(--color-text-secondary); }
|
|
3709
|
+
|
|
3710
|
+
/* toolbar: selectors on the left, action buttons on the right */
|
|
3711
|
+
.input-card-toolbar {
|
|
3712
|
+
display: flex;
|
|
3713
|
+
align-items: center;
|
|
3714
|
+
gap: 0.375rem;
|
|
3715
|
+
flex-wrap: wrap;
|
|
3716
|
+
}
|
|
3717
|
+
.input-card-selectors {
|
|
3718
|
+
display: flex;
|
|
3719
|
+
gap: 0.375rem;
|
|
3720
|
+
align-items: center;
|
|
3721
|
+
flex-wrap: wrap;
|
|
3722
|
+
flex: 1;
|
|
3723
|
+
min-width: 0;
|
|
3724
|
+
}
|
|
3725
|
+
.input-card-actions {
|
|
3726
|
+
display: flex;
|
|
3727
|
+
gap: 0.25rem;
|
|
3728
|
+
align-items: center;
|
|
3729
|
+
margin-left: auto;
|
|
3730
|
+
flex-shrink: 0;
|
|
3731
|
+
}
|
|
3732
|
+
|
|
3733
|
+
.input-chip-select {
|
|
3734
|
+
height: 28px;
|
|
3735
|
+
padding: 0 0.5rem;
|
|
3736
|
+
font-size: 0.75rem;
|
|
3737
|
+
background: var(--color-bg-primary);
|
|
3738
|
+
color: var(--color-text-primary);
|
|
3739
|
+
border: 1px solid var(--color-border);
|
|
3740
|
+
border-radius: 999px;
|
|
3741
|
+
cursor: pointer;
|
|
3742
|
+
max-width: 180px;
|
|
3743
|
+
transition: border-color 0.12s;
|
|
3744
|
+
}
|
|
3745
|
+
.input-chip-select:hover { border-color: var(--color-primary); }
|
|
3746
|
+
.input-chip-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
|
|
3747
|
+
.input-chip-select:empty,
|
|
3748
|
+
.input-chip-select[data-empty="true"] { display: none; }
|
|
3749
|
+
|
|
3750
|
+
/* When chip selects are empty and only star remains, compact layout */
|
|
3751
|
+
#savePresetBtn { width: 28px !important; height: 28px !important; font-size: 0.875rem; }
|
|
3752
|
+
|
|
3753
|
+
/* Input card: if selectors row is empty (no visible chips), hide whole row */
|
|
3754
|
+
.input-card-selectors:not(:has(select:not([style*="display: none"]):not(:empty):not([data-empty="true"]))):not(:has(#savePresetBtn + *)) {
|
|
3755
|
+
/* do nothing: keep preset visible */
|
|
3756
|
+
}
|
|
3757
|
+
|
|
3758
|
+
.input-icon-btn {
|
|
3759
|
+
display: inline-flex;
|
|
3760
|
+
align-items: center;
|
|
3761
|
+
justify-content: center;
|
|
3762
|
+
width: 32px;
|
|
3763
|
+
height: 32px;
|
|
3764
|
+
padding: 0;
|
|
3765
|
+
background: transparent;
|
|
3766
|
+
border: 1px solid transparent;
|
|
3767
|
+
border-radius: var(--radius-sm);
|
|
3768
|
+
color: var(--color-text-secondary);
|
|
3769
|
+
cursor: pointer;
|
|
3770
|
+
transition: background 0.12s, color 0.12s;
|
|
3771
|
+
}
|
|
3772
|
+
.input-icon-btn:hover {
|
|
3773
|
+
background: var(--color-bg-hover);
|
|
3774
|
+
color: var(--color-text-primary);
|
|
3775
|
+
}
|
|
3776
|
+
.input-icon-btn svg { width: 16px; height: 16px; }
|
|
3777
|
+
|
|
3778
|
+
.input-send-btn {
|
|
3779
|
+
background: var(--color-primary);
|
|
3780
|
+
color: #fff;
|
|
3781
|
+
width: 34px;
|
|
3782
|
+
height: 34px;
|
|
3783
|
+
border-radius: var(--radius-md);
|
|
3784
|
+
}
|
|
3785
|
+
.input-send-btn:hover { background: var(--color-primary-dark); color: #fff; }
|
|
3786
|
+
.input-send-btn svg { width: 16px; height: 16px; }
|
|
3787
|
+
.input-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
3788
|
+
|
|
3789
|
+
/* When streaming: dim the card slightly */
|
|
3790
|
+
.input-card[data-streaming="true"] {
|
|
3791
|
+
opacity: 0.75;
|
|
3792
|
+
}
|
|
3793
|
+
.input-card[data-streaming="true"] .input-card-textarea {
|
|
3794
|
+
cursor: not-allowed;
|
|
3795
|
+
}
|
|
3796
|
+
|
|
3797
|
+
/* ---------- Tools popup: centered modal ---------- */
|
|
3798
|
+
body .tools-popup {
|
|
3799
|
+
display: none !important;
|
|
3800
|
+
position: fixed;
|
|
3801
|
+
inset: 0;
|
|
3802
|
+
z-index: 200;
|
|
3803
|
+
background: rgba(15,23,42,0.45);
|
|
3804
|
+
align-items: center;
|
|
3805
|
+
justify-content: center;
|
|
3806
|
+
padding: 1rem;
|
|
3807
|
+
}
|
|
3808
|
+
body .tools-popup.open { display: flex !important; }
|
|
3809
|
+
.tools-popup-content {
|
|
3810
|
+
width: 100%;
|
|
3811
|
+
max-width: 720px;
|
|
3812
|
+
max-height: 85vh;
|
|
3813
|
+
background: var(--color-bg-raised);
|
|
3814
|
+
border: 1px solid var(--color-border);
|
|
3815
|
+
border-radius: var(--radius-lg);
|
|
3816
|
+
box-shadow: var(--shadow-lg);
|
|
3817
|
+
display: flex;
|
|
3818
|
+
flex-direction: column;
|
|
3819
|
+
overflow: hidden;
|
|
3820
|
+
}
|
|
3821
|
+
.tools-popup-header {
|
|
3822
|
+
display: flex;
|
|
3823
|
+
align-items: center;
|
|
3824
|
+
justify-content: space-between;
|
|
3825
|
+
gap: 0.75rem;
|
|
3826
|
+
padding: 0.75rem 1rem;
|
|
3827
|
+
border-bottom: 1px solid var(--color-border);
|
|
3828
|
+
background: var(--color-bg-secondary);
|
|
3829
|
+
}
|
|
3830
|
+
.tools-popup-scroll {
|
|
3831
|
+
flex: 1;
|
|
3832
|
+
overflow-y: auto;
|
|
3833
|
+
padding: 0.75rem 1rem;
|
|
3834
|
+
}
|
|
3835
|
+
.tools-popup-footer {
|
|
3836
|
+
display: flex;
|
|
3837
|
+
gap: 0.5rem;
|
|
3838
|
+
justify-content: flex-end;
|
|
3839
|
+
padding: 0.75rem 1rem;
|
|
3840
|
+
border-top: 1px solid var(--color-border);
|
|
3841
|
+
background: var(--color-bg-secondary);
|
|
3842
|
+
}
|
|
3843
|
+
.tools-popup-refresh-btn,
|
|
3844
|
+
.tools-popup-update-btn {
|
|
3845
|
+
padding: 0.5rem 1rem;
|
|
3846
|
+
font-size: 0.8125rem;
|
|
3847
|
+
font-weight: 500;
|
|
3848
|
+
border-radius: var(--radius-md);
|
|
3849
|
+
border: 1px solid var(--color-border);
|
|
3850
|
+
background: var(--color-bg-primary);
|
|
3851
|
+
color: var(--color-text-primary);
|
|
3852
|
+
cursor: pointer;
|
|
3853
|
+
}
|
|
3854
|
+
.tools-popup-refresh-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
|
3855
|
+
.tools-popup-update-btn {
|
|
3856
|
+
background: var(--color-primary);
|
|
3857
|
+
color: #fff;
|
|
3858
|
+
border-color: var(--color-primary);
|
|
3859
|
+
}
|
|
3860
|
+
.tools-popup-update-btn:hover { background: var(--color-primary-dark); }
|
|
3861
|
+
|
|
3862
|
+
/* ---------- Folder modal (if opened) ---------- */
|
|
3863
|
+
body .folder-modal-overlay {
|
|
3864
|
+
display: none !important;
|
|
3865
|
+
position: fixed;
|
|
3866
|
+
inset: 0;
|
|
3867
|
+
z-index: 200;
|
|
3868
|
+
background: rgba(15,23,42,0.45);
|
|
3869
|
+
align-items: center;
|
|
3870
|
+
justify-content: center;
|
|
3871
|
+
padding: 1rem;
|
|
3872
|
+
}
|
|
3873
|
+
body .folder-modal-overlay.open { display: flex !important; }
|
|
3874
|
+
.folder-modal {
|
|
3875
|
+
width: 100%;
|
|
3876
|
+
max-width: 560px;
|
|
3877
|
+
max-height: 80vh;
|
|
3878
|
+
background: var(--color-bg-raised);
|
|
3879
|
+
border: 1px solid var(--color-border);
|
|
3880
|
+
border-radius: var(--radius-lg);
|
|
3881
|
+
box-shadow: var(--shadow-lg);
|
|
3882
|
+
display: flex;
|
|
3883
|
+
flex-direction: column;
|
|
3884
|
+
overflow: hidden;
|
|
3885
|
+
}
|
|
3886
|
+
.folder-modal-header {
|
|
3887
|
+
display: flex; justify-content: space-between; align-items: center;
|
|
3888
|
+
padding: 0.75rem 1rem;
|
|
3889
|
+
border-bottom: 1px solid var(--color-border);
|
|
3890
|
+
}
|
|
3891
|
+
.folder-modal-header h3 { margin: 0; font-size: 1rem; }
|
|
3892
|
+
.folder-modal-close {
|
|
3893
|
+
background: none; border: none; font-size: 1.5rem;
|
|
3894
|
+
color: var(--color-text-secondary); cursor: pointer; line-height: 1;
|
|
3895
|
+
}
|
|
3896
|
+
.folder-modal-footer {
|
|
3897
|
+
display: flex; gap: 0.5rem; justify-content: flex-end;
|
|
3898
|
+
padding: 0.75rem 1rem;
|
|
3899
|
+
border-top: 1px solid var(--color-border);
|
|
3900
|
+
}
|
|
3901
|
+
|
|
3902
|
+
/* ========== merged from ui-fixes-4.css ========== */
|
|
3903
|
+
/* =====================================================================
|
|
3904
|
+
ui-fixes-4.css — Responsive (mobile/tablet) + dark-theme polish
|
|
3905
|
+
===================================================================== */
|
|
3906
|
+
|
|
3907
|
+
/* ---------- Tablet (≤ 1024px): narrower sidebar ---------- */
|
|
3908
|
+
@media (max-width: 1024px) {
|
|
3909
|
+
:root { --sidebar-width: 240px; }
|
|
3910
|
+
.messages-wrapper { padding: 0.875rem 1rem; }
|
|
3911
|
+
}
|
|
3912
|
+
|
|
3913
|
+
/* ---------- Mobile (≤ 768px): sidebar becomes drawer ---------- */
|
|
3914
|
+
@media (max-width: 768px) {
|
|
3915
|
+
.app-shell { flex-direction: row; }
|
|
3916
|
+
|
|
3917
|
+
.sidebar {
|
|
3918
|
+
position: fixed;
|
|
3919
|
+
top: 0; left: 0;
|
|
3920
|
+
height: 100dvh;
|
|
3921
|
+
width: 280px;
|
|
3922
|
+
max-width: 85vw;
|
|
3923
|
+
transform: translateX(-100%);
|
|
3924
|
+
z-index: 80;
|
|
3925
|
+
box-shadow: var(--shadow-lg);
|
|
3926
|
+
transition: transform 0.2s ease-out !important;
|
|
3927
|
+
}
|
|
3928
|
+
.sidebar.open { transform: translateX(0); }
|
|
3929
|
+
|
|
3930
|
+
.sidebar-overlay {
|
|
3931
|
+
display: none;
|
|
3932
|
+
position: fixed;
|
|
3933
|
+
inset: 0;
|
|
3934
|
+
background: rgba(15,23,42,0.5);
|
|
3935
|
+
z-index: 70;
|
|
3936
|
+
}
|
|
3937
|
+
.sidebar-overlay.open { display: block; }
|
|
3938
|
+
|
|
3939
|
+
.main-panel { width: 100%; }
|
|
3940
|
+
.main-header { padding: 0 0.5rem; }
|
|
3941
|
+
.header-title { font-size: 0.875rem; }
|
|
3942
|
+
.header-controls { gap: 0.25rem; }
|
|
3943
|
+
|
|
3944
|
+
/* hide tertiary chips in very tight space */
|
|
3945
|
+
.status-badge span { display: none; }
|
|
3946
|
+
.status-badge { padding: 0.25rem; }
|
|
3947
|
+
|
|
3948
|
+
/* input card on mobile */
|
|
3949
|
+
.input-section { padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); }
|
|
3950
|
+
.input-card { padding: 0.375rem 0.5rem; border-radius: var(--radius-md); }
|
|
3951
|
+
.input-card-textarea { font-size: 1rem; /* prevent iOS zoom */ }
|
|
3952
|
+
.input-chip-select { max-width: 140px; }
|
|
3953
|
+
|
|
3954
|
+
.welcome-title { font-size: 1.375rem; }
|
|
3955
|
+
.welcome-logo { width: 56px; height: 56px; font-size: 1.75rem; }
|
|
3956
|
+
.messages-wrapper { padding: 0.75rem 0.75rem 1rem; }
|
|
3957
|
+
}
|
|
3958
|
+
|
|
3959
|
+
/* ---------- Small mobile (≤ 480px): hide noncritical header buttons ---------- */
|
|
3960
|
+
@media (max-width: 480px) {
|
|
3961
|
+
.model-dl-indicator { display: none; }
|
|
3962
|
+
.sidebar-header h2 { display: none; }
|
|
3963
|
+
.input-card-actions .input-icon-btn:not(.input-send-btn):not(.voice-mic-btn) { display: none; }
|
|
3964
|
+
}
|
|
3965
|
+
|
|
3966
|
+
/* ---------- Touch targets: ensure 40px minimum on pointer:coarse ---------- */
|
|
3967
|
+
@media (pointer: coarse) {
|
|
3968
|
+
.sidebar-toggle-btn,
|
|
3969
|
+
.theme-toggle-btn,
|
|
3970
|
+
.header-icon-btn,
|
|
3971
|
+
.input-icon-btn,
|
|
3972
|
+
.sidebar-overflow-btn,
|
|
3973
|
+
.view-toggle-btn,
|
|
3974
|
+
.status-cancel-btn {
|
|
3975
|
+
min-width: 40px;
|
|
3976
|
+
min-height: 40px;
|
|
3977
|
+
}
|
|
3978
|
+
.conversation-item { padding: 0.625rem 0.625rem; }
|
|
3979
|
+
}
|
|
3980
|
+
|
|
3981
|
+
/* ---------- Focus-visible ring: accessibility, non-intrusive ---------- */
|
|
3982
|
+
button:focus-visible,
|
|
3983
|
+
select:focus-visible,
|
|
3984
|
+
input:focus-visible,
|
|
3985
|
+
textarea:focus-visible {
|
|
3986
|
+
outline: 2px solid var(--color-primary);
|
|
3987
|
+
outline-offset: 2px;
|
|
3988
|
+
}
|
|
3989
|
+
|
|
3990
|
+
/* ---------- Dark mode: neutral grey palette ---------- */
|
|
3991
|
+
html.dark {
|
|
3992
|
+
--color-primary: #3b82f6;
|
|
3993
|
+
--color-primary-dark: #2563eb;
|
|
3994
|
+
--color-bg-primary: #1a1a1a;
|
|
3995
|
+
--color-bg-secondary: #212121;
|
|
3996
|
+
--color-bg-raised: #2a2a2a;
|
|
3997
|
+
--color-bg-hover: rgba(255,255,255,0.06);
|
|
3998
|
+
--color-text-primary: #e5e5e5;
|
|
3999
|
+
--color-text-secondary: #a3a3a3;
|
|
4000
|
+
--color-border: #333333;
|
|
4001
|
+
--color-focus-ring: rgba(163,163,163,0.35);
|
|
4002
|
+
}
|
|
4003
|
+
html.dark body { background: var(--color-bg-primary); color: var(--color-text-primary); }
|
|
4004
|
+
html.dark .sidebar { background: #161616; border-right: 1px solid var(--color-border); }
|
|
4005
|
+
html.dark .main-header,
|
|
4006
|
+
html.dark .view-toggle-bar,
|
|
4007
|
+
html.dark .input-section { background: var(--color-bg-primary); }
|
|
4008
|
+
html.dark .input-card { background: #161616; border-color: var(--color-border); }
|
|
4009
|
+
html.dark .input-chip-select { background: #161616; }
|
|
4010
|
+
html.dark .status-badge { background: #161616; }
|
|
4011
|
+
html.dark .sidebar-search-input { background: #161616; }
|
|
4012
|
+
html.dark .conversation-item.active { background: #2f2f2f; color: var(--color-text-primary); }
|
|
4013
|
+
html.dark .tools-popup,
|
|
4014
|
+
html.dark .folder-modal-overlay { background: rgba(0,0,0,0.65); }
|
|
4015
|
+
|
|
4016
|
+
/* Light mode polish: softer sidebar separation */
|
|
4017
|
+
html:not(.dark) .sidebar { border-right: 1px solid var(--color-border); }
|
|
4018
|
+
html:not(.dark) .main-header { background: var(--color-bg-primary); }
|
|
4019
|
+
|
|
4020
|
+
/* ---------- Scrollbar styling (subtle) ---------- */
|
|
4021
|
+
.sidebar-list,
|
|
4022
|
+
#output-scroll,
|
|
4023
|
+
.tools-popup-scroll {
|
|
4024
|
+
scrollbar-width: thin;
|
|
4025
|
+
scrollbar-color: var(--color-border) transparent;
|
|
4026
|
+
}
|
|
4027
|
+
.sidebar-list::-webkit-scrollbar,
|
|
4028
|
+
#output-scroll::-webkit-scrollbar,
|
|
4029
|
+
.tools-popup-scroll::-webkit-scrollbar {
|
|
4030
|
+
width: 8px;
|
|
4031
|
+
}
|
|
4032
|
+
.sidebar-list::-webkit-scrollbar-thumb,
|
|
4033
|
+
#output-scroll::-webkit-scrollbar-thumb,
|
|
4034
|
+
.tools-popup-scroll::-webkit-scrollbar-thumb {
|
|
4035
|
+
background: var(--color-border);
|
|
4036
|
+
border-radius: 4px;
|
|
4037
|
+
border: 2px solid transparent;
|
|
4038
|
+
background-clip: padding-box;
|
|
4039
|
+
}
|
|
4040
|
+
.sidebar-list::-webkit-scrollbar-thumb:hover,
|
|
4041
|
+
#output-scroll::-webkit-scrollbar-thumb:hover {
|
|
4042
|
+
background: var(--color-text-secondary);
|
|
4043
|
+
background-clip: padding-box;
|
|
4044
|
+
border: 2px solid transparent;
|
|
4045
|
+
}
|
|
4046
|
+
|
|
4047
|
+
/* ---------- Reduced motion ---------- */
|
|
4048
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4049
|
+
*, *::before, *::after {
|
|
4050
|
+
animation-duration: 0.01ms !important;
|
|
4051
|
+
transition-duration: 0.01ms !important;
|
|
4052
|
+
}
|
|
4053
|
+
}
|
|
4054
|
+
|
|
4055
|
+
/* ---------- Hide legacy selectors leftovers if present ---------- */
|
|
4056
|
+
.agent-selector:empty,
|
|
4057
|
+
.model-selector:empty,
|
|
4058
|
+
.preset-selector:empty { display: none; }
|