@quilltap/theme-storybook 1.0.96 → 1.0.98

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/dist/index.css CHANGED
@@ -988,7 +988,7 @@ body {
988
988
  .qt-badge-provider-nanogpt {
989
989
  background: var(--qt-badge-primary-bg);
990
990
  color: var(--qt-badge-primary-fg);
991
- border: 1px solid var(--qt-badge-primary-border);
991
+ border: 1px solid var(--qt-badge-primary-border, var(--color-primary));
992
992
  }
993
993
  .qt-badge-provider-builtin {
994
994
  background: var(--qt-status-info-bg);
@@ -1226,7 +1226,7 @@ body {
1226
1226
  }
1227
1227
  .qt-floating-dialog-close:hover {
1228
1228
  background: var(--color-accent);
1229
- color: var(--color-foreground);
1229
+ color: var(--color-accent-foreground);
1230
1230
  }
1231
1231
  .qt-floating-dialog-body {
1232
1232
  flex: 1 1 0%;
@@ -1236,510 +1236,815 @@ body {
1236
1236
  min-height: 0;
1237
1237
  overflow: hidden;
1238
1238
  }
1239
- .qt-brahma-launcher {
1240
- position: fixed;
1241
- left: calc(var(--qt-left-sidebar-collapsed-width) + var(--qt-brahma-launcher-offset));
1242
- bottom: var(--qt-brahma-launcher-offset);
1243
- z-index: var(--qt-floating-layer-z);
1244
- width: var(--qt-brahma-launcher-size);
1245
- height: var(--qt-brahma-launcher-size);
1246
- display: inline-flex;
1247
- align-items: center;
1248
- justify-content: center;
1249
- border-radius: 9999px;
1250
- background: var(--qt-brahma-launcher-bg);
1251
- color: var(--qt-brahma-launcher-fg);
1252
- border: 2px solid var(--qt-brahma-launcher-ring);
1253
- box-shadow: var(--qt-brahma-launcher-shadow);
1254
- transition:
1255
- background-color 150ms ease,
1256
- color 150ms ease,
1257
- transform 150ms ease;
1258
- }
1259
- .qt-brahma-launcher:hover {
1260
- background: var(--qt-brahma-launcher-hover-bg);
1261
- transform: scale(1.06);
1239
+ .qt-help-msg-user {
1240
+ border-radius: 1rem;
1241
+ padding-left: 0.75rem;
1242
+ padding-right: 0.75rem;
1243
+ padding-top: 0.5rem;
1244
+ padding-bottom: 0.375rem;
1245
+ font-size: 0.875rem;
1246
+ line-height: 1.25rem;
1247
+ background-color: var(--color-primary);
1248
+ color: var(--color-primary-foreground);
1249
+ max-width: 80%;
1262
1250
  }
1263
- .qt-brahma-launcher:focus-visible {
1264
- outline: 2px solid var(--qt-brahma-launcher-ring);
1265
- outline-offset: 3px;
1251
+ .qt-help-msg-user :last-child,
1252
+ .qt-help-msg-assistant :last-child {
1253
+ margin-bottom: 0 !important;
1254
+ padding-bottom: 0 !important;
1266
1255
  }
1267
- .qt-brahma-launcher-active,
1268
- .qt-brahma-launcher-active:hover {
1269
- background: var(--qt-brahma-launcher-active-bg);
1270
- color: var(--qt-brahma-launcher-active-fg);
1256
+ .qt-help-msg-user .qt-chat-message-content {
1257
+ --tw-prose-body: var(--color-primary-foreground);
1258
+ --tw-prose-invert-body: var(--color-primary-foreground);
1259
+ color: var(--color-primary-foreground);
1271
1260
  }
1272
- .qt-brahma-launcher-icon {
1273
- width: 60%;
1274
- height: 60%;
1261
+ .qt-help-msg-assistant {
1262
+ border-radius: 1rem;
1263
+ padding-left: 0.75rem;
1264
+ padding-right: 0.75rem;
1265
+ padding-top: 0.5rem;
1266
+ padding-bottom: 0.5rem;
1267
+ font-size: 0.875rem;
1268
+ line-height: 1.25rem;
1269
+ background-color: var(--color-muted);
1270
+ color: var(--color-foreground);
1271
+ max-width: 80%;
1275
1272
  }
1276
- .qt-slide-over-overlay {
1277
- position: fixed;
1278
- inset: 0;
1279
- z-index: 55;
1280
- background-color: var(--qt-dialog-backdrop);
1281
- opacity: 0;
1282
- transition: opacity 200ms ease;
1283
- pointer-events: none;
1273
+ .qt-help-tail {
1274
+ flex-shrink: 0;
1275
+ width: 8px;
1276
+ height: 12px;
1277
+ align-self: flex-start;
1278
+ margin-top: 12px;
1284
1279
  }
1285
- .qt-slide-over-overlay[data-open=true] {
1286
- opacity: 1;
1287
- pointer-events: auto;
1280
+ .qt-help-tail-user {
1281
+ color: var(--theme-primary);
1288
1282
  }
1289
- .qt-slide-over-panel {
1290
- position: fixed;
1291
- right: 0;
1292
- top: 0;
1293
- z-index: 55;
1294
- height: 100%;
1295
- display: flex;
1296
- flex-direction: column;
1297
- background-color: var(--qt-dialog-bg);
1298
- border-left: 1px solid var(--qt-dialog-border);
1299
- box-shadow: var(--qt-dialog-shadow);
1300
- transform: translateX(100%);
1301
- transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
1283
+ .qt-help-tail-assistant {
1284
+ color: var(--theme-muted);
1302
1285
  }
1303
- .qt-slide-over-panel[data-open=true] {
1304
- transform: translateX(0);
1286
+ .qt-help-msg-character-name {
1287
+ font-size: 0.75rem;
1288
+ line-height: 1rem;
1289
+ font-weight: 500;
1290
+ color: var(--color-muted-foreground);
1291
+ margin-bottom: 0.25rem;
1305
1292
  }
1306
- .qt-slide-over-header {
1293
+ .qt-help-avatar {
1294
+ flex-shrink: 0;
1295
+ width: 2rem;
1296
+ height: 2rem;
1297
+ border-radius: 9999px;
1298
+ background-color: var(--color-muted);
1307
1299
  display: flex;
1308
1300
  align-items: center;
1309
- justify-content: space-between;
1310
- padding: 0.75rem 1rem;
1311
- flex-shrink: 0;
1312
- border-bottom: 1px solid var(--qt-dialog-border);
1301
+ justify-content: center;
1302
+ overflow: hidden;
1303
+ margin-top: 2px;
1304
+ margin-right: 4px;
1313
1305
  }
1314
- .qt-inspector-entry {
1315
- transition: all 150ms ease;
1316
- border-radius: var(--qt-card-radius);
1317
- background: var(--qt-card-bg);
1318
- border: 1px solid color-mix(in srgb, var(--qt-card-border) calc(var(--qt-card-border-opacity, 1) * 100%), transparent);
1306
+ .qt-help-composer {
1307
+ display: flex;
1308
+ align-items: flex-end;
1309
+ gap: 0.5rem;
1310
+ padding: 0.75rem;
1311
+ border-top: 1px solid var(--qt-dialog-border);
1312
+ background: var(--qt-dialog-bg);
1319
1313
  }
1320
- .qt-inspector-entry:hover {
1321
- border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
1314
+ .qt-help-composer-input {
1315
+ flex: 1 1 0%;
1316
+ resize: none;
1317
+ border-radius: var(--radius-lg);
1318
+ padding-left: 0.75rem;
1319
+ padding-right: 0.75rem;
1320
+ padding-top: 0.5rem;
1321
+ padding-bottom: 0.5rem;
1322
+ font-size: 0.875rem;
1323
+ line-height: 1.25rem;
1324
+ border: 1px solid var(--qt-input-border, var(--color-input));
1325
+ background: var(--qt-input-bg, var(--color-background));
1322
1326
  }
1323
- .qt-inspector-entry-highlight {
1324
- animation: qt-inspector-highlight 2s ease-out;
1327
+ .qt-help-composer-input::-moz-placeholder {
1328
+ color: var(--color-muted-foreground);
1325
1329
  }
1326
- @keyframes qt-inspector-highlight {
1327
- 0% {
1328
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, transparent);
1329
- }
1330
- 100% {
1331
- box-shadow: 0 0 0 0px transparent;
1332
- }
1330
+ .qt-help-composer-input::placeholder {
1331
+ color: var(--color-muted-foreground);
1333
1332
  }
1334
- .qt-tab-group {
1335
- display: flex;
1336
- gap: var(--qt-tab-group-gap);
1337
- border-bottom: 1px solid var(--color-border);
1333
+ .qt-help-composer-input:focus-visible {
1334
+ outline-style: none;
1335
+ box-shadow: 0 0 0 2px var(--color-ring);
1338
1336
  }
1339
- .qt-tab {
1340
- padding: var(--qt-tab-padding-y) var(--qt-tab-padding-x);
1341
- font-size: var(--qt-tab-font-size);
1342
- font-weight: var(--qt-tab-font-weight);
1343
- color: var(--qt-tab-fg);
1344
- background-color: var(--qt-tab-bg);
1345
- border: none;
1346
- border-radius: var(--qt-tab-radius);
1347
- cursor: pointer;
1348
- transition: all 150ms;
1337
+ .qt-help-composer-input:disabled {
1338
+ cursor: not-allowed;
1339
+ opacity: 0.5;
1349
1340
  }
1350
- .qt-tab:hover {
1351
- color: var(--color-foreground);
1341
+ .qt-help-composer-send {
1342
+ display: inline-flex;
1343
+ align-items: center;
1344
+ justify-content: center;
1345
+ border-radius: var(--radius-md);
1346
+ padding-left: 0.75rem;
1347
+ padding-right: 0.75rem;
1348
+ padding-top: 0.5rem;
1349
+ padding-bottom: 0.5rem;
1350
+ height: 38px;
1351
+ font-size: 0.875rem;
1352
+ line-height: 1.25rem;
1353
+ font-weight: 500;
1354
+ background-color: var(--color-primary);
1355
+ color: var(--color-primary-foreground);
1352
1356
  }
1353
- .qt-tab-active {
1354
- background-color: var(--qt-tab-active-bg);
1355
- color: var(--qt-tab-active-fg);
1357
+ .qt-help-composer-send:disabled {
1358
+ opacity: 0.5;
1359
+ pointer-events: none;
1356
1360
  }
1357
- .qt-tab-content {
1358
- padding: 1rem 0;
1361
+ .qt-help-composer-send:hover:not(:disabled) {
1362
+ opacity: 0.9;
1359
1363
  }
1360
- .qt-chat-message {
1361
- padding: var(--qt-chat-message-padding);
1362
- border-radius: var(--qt-chat-message-radius);
1363
- max-width: 80%;
1364
+ .qt-help-char-pill {
1365
+ display: flex;
1366
+ align-items: center;
1367
+ gap: 0.375rem;
1368
+ padding-left: 0.5rem;
1369
+ padding-right: 0.5rem;
1370
+ padding-top: 0.25rem;
1371
+ padding-bottom: 0.25rem;
1372
+ border-radius: 9999px;
1373
+ font-size: 0.75rem;
1374
+ line-height: 1rem;
1375
+ transition-property:
1376
+ color,
1377
+ background-color,
1378
+ border-color,
1379
+ text-decoration-color,
1380
+ fill,
1381
+ stroke;
1382
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1383
+ transition-duration: 150ms;
1384
+ color: var(--color-muted-foreground);
1385
+ border: 1px solid var(--qt-dialog-border);
1364
1386
  }
1365
- .qt-chat-message-user {
1366
- background-color: var(--qt-chat-user-bg);
1367
- color: var(--qt-chat-user-fg);
1368
- margin-left: auto;
1387
+ .qt-help-char-pill:hover {
1388
+ border-color: var(--theme-primary);
1389
+ opacity: 0.7;
1369
1390
  }
1370
- .qt-chat-message-assistant {
1371
- background-color: var(--qt-chat-assistant-bg);
1372
- color: var(--qt-chat-assistant-fg);
1373
- border: 1px solid var(--color-border);
1391
+ .qt-help-char-pill[data-selected=true] {
1392
+ border-color: var(--theme-primary);
1393
+ background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
1394
+ color: var(--theme-primary);
1374
1395
  }
1375
- .qt-chat-message-whisper {
1376
- background: var(--qt-chat-whisper-bg);
1377
- color: var(--qt-chat-whisper-fg);
1378
- border: 2px dashed var(--qt-chat-whisper-border);
1379
- font-style: italic;
1396
+ .qt-help-past-chat {
1397
+ display: flex;
1398
+ align-items: center;
1399
+ gap: 0.5rem;
1400
+ padding-left: 0.5rem;
1401
+ padding-right: 0.5rem;
1402
+ padding-top: 0.375rem;
1403
+ padding-bottom: 0.375rem;
1404
+ border-radius: 0.25rem;
1405
+ cursor: pointer;
1380
1406
  }
1381
- .qt-chat-whisper-label {
1382
- font-size: 0.75rem;
1383
- color: var(--qt-chat-whisper-label-fg);
1384
- font-style: italic;
1385
- margin-bottom: 0.25rem;
1407
+ .qt-help-past-chat:hover {
1408
+ background: var(--color-accent);
1386
1409
  }
1387
- .qt-chat-message-whisper-overheard {
1388
- opacity: 0.6;
1410
+ .qt-help-section-label {
1411
+ font-size: 0.75rem;
1412
+ line-height: 1rem;
1413
+ font-weight: 500;
1414
+ color: var(--color-muted-foreground);
1415
+ margin-bottom: 0.5rem;
1389
1416
  }
1390
- .qt-pascal-result {
1391
- border-left: 3px solid var(--qt-alert-info-border);
1417
+ .qt-help-error {
1392
1418
  padding-left: 0.75rem;
1419
+ padding-right: 0.75rem;
1420
+ padding-top: 0.5rem;
1421
+ padding-bottom: 0.5rem;
1422
+ font-size: 0.75rem;
1423
+ line-height: 1rem;
1424
+ background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
1425
+ color: var(--color-destructive);
1426
+ border-bottom: 1px solid color-mix(in srgb, var(--color-destructive) 20%, transparent);
1393
1427
  }
1394
- .qt-pascal-result--success {
1395
- border-left-color: var(--qt-alert-success-border);
1428
+ .qt-help-nav-button {
1429
+ display: inline-flex;
1430
+ align-items: center;
1431
+ gap: 0.375rem;
1432
+ padding-left: 0.75rem;
1433
+ padding-right: 0.75rem;
1434
+ padding-top: 0.375rem;
1435
+ padding-bottom: 0.375rem;
1436
+ font-size: 0.75rem;
1437
+ line-height: 1rem;
1438
+ font-weight: 500;
1439
+ border-radius: var(--radius-md);
1440
+ transition-property:
1441
+ color,
1442
+ background-color,
1443
+ border-color,
1444
+ text-decoration-color,
1445
+ fill,
1446
+ stroke;
1447
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1448
+ transition-duration: 150ms;
1449
+ cursor: pointer;
1450
+ background: var(--qt-help-nav-bg, color-mix(in srgb, var(--color-primary) 10%, transparent));
1451
+ color: var(--qt-help-nav-fg, var(--color-primary));
1452
+ border: 1px solid var(--qt-help-nav-border, color-mix(in srgb, var(--color-primary) 20%, transparent));
1396
1453
  }
1397
- .qt-pascal-result--partial {
1398
- border-left-color: var(--qt-alert-warning-border);
1454
+ .qt-help-nav-button:hover {
1455
+ background: var(--qt-help-nav-hover-bg, color-mix(in srgb, var(--color-primary) 20%, transparent));
1456
+ border-color: var(--qt-help-nav-hover-border, color-mix(in srgb, var(--color-primary) 40%, transparent));
1399
1457
  }
1400
- .qt-pascal-result--failure {
1401
- border-left-color: var(--qt-alert-error-border);
1458
+ .qt-help-suggested-links {
1459
+ padding-left: 2.5rem;
1460
+ padding-top: 0.25rem;
1402
1461
  }
1403
- .qt-pascal-result--info {
1404
- border-left-color: var(--qt-alert-info-border);
1462
+ .qt-help-suggested-links-label {
1463
+ font-size: 10px;
1464
+ text-transform: uppercase;
1465
+ letter-spacing: 0.05em;
1466
+ font-weight: 500;
1467
+ margin-bottom: 0.375rem;
1468
+ color: var(--qt-help-suggested-label, var(--color-muted-foreground));
1405
1469
  }
1406
- .qt-confirmation-badge {
1470
+ .qt-help-suggested-link {
1407
1471
  display: inline-flex;
1408
1472
  align-items: center;
1409
- gap: 0.2rem;
1410
- padding: 0.05rem 0.4rem;
1411
- border-radius: 0.375rem;
1412
- border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
1413
- background: transparent;
1414
- font: inherit;
1415
- line-height: 1.4;
1416
- cursor: help;
1417
- color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
1418
- opacity: 0.8;
1419
- -webkit-user-select: none;
1420
- -moz-user-select: none;
1421
- user-select: none;
1422
- white-space: nowrap;
1423
- transition:
1424
- color 150ms,
1425
- background-color 150ms,
1426
- border-color 150ms,
1427
- opacity 150ms;
1428
- }
1429
- .qt-confirmation-badge:hover,
1430
- .qt-confirmation-badge:focus-visible {
1431
- opacity: 1;
1432
- border-color: color-mix(in srgb, currentColor 45%, transparent);
1433
- background: color-mix(in srgb, var(--color-muted) 50%, transparent);
1434
- }
1435
- .qt-confirmation-badge[data-confirmation-state=vouched]:hover,
1436
- .qt-confirmation-badge[data-confirmation-state=vouched]:focus-visible,
1437
- .qt-confirmation-badge[data-confirmation-state=unvetted]:hover,
1438
- .qt-confirmation-badge[data-confirmation-state=unvetted]:focus-visible {
1439
- color: var(--color-foreground);
1440
- }
1441
- .qt-confirmation-badge:focus-visible {
1442
- outline: 2px solid color-mix(in srgb, var(--color-foreground) 45%, transparent);
1443
- outline-offset: 2px;
1444
- }
1445
- .qt-chat-message-user .qt-confirmation-badge:hover,
1446
- .qt-chat-message-user .qt-confirmation-badge:focus-visible {
1447
- color: var(--qt-chat-user-fg);
1448
- background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
1473
+ gap: 0.25rem;
1474
+ padding-left: 0.5rem;
1475
+ padding-right: 0.5rem;
1476
+ padding-top: 0.25rem;
1477
+ padding-bottom: 0.25rem;
1478
+ font-size: 11px;
1479
+ border-radius: 0.25rem;
1480
+ transition-property:
1481
+ color,
1482
+ background-color,
1483
+ border-color,
1484
+ text-decoration-color,
1485
+ fill,
1486
+ stroke;
1487
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1488
+ transition-duration: 150ms;
1489
+ cursor: pointer;
1490
+ background: var(--qt-help-suggested-bg, color-mix(in srgb, var(--color-muted) 50%, transparent));
1491
+ color: var(--qt-help-suggested-fg, var(--color-muted-foreground));
1492
+ border: 1px solid var(--qt-help-suggested-border, var(--color-border));
1449
1493
  }
1450
- .qt-confirmation-badge-glyph {
1451
- font-weight: 600;
1494
+ .qt-help-suggested-link:hover {
1495
+ background: var(--qt-help-suggested-hover-bg, color-mix(in srgb, var(--color-primary) 10%, transparent));
1496
+ color: var(--qt-help-suggested-hover-fg, var(--color-primary));
1497
+ border-color: var(--qt-help-suggested-hover-border, color-mix(in srgb, var(--color-primary) 30%, transparent));
1452
1498
  }
1453
- .qt-confirmation-badge[data-confirmation-state=stood-by] {
1454
- color: var(--qt-warning-box-fg, var(--qt-text-secondary-fg));
1455
- opacity: 1;
1499
+ .qt-help-entity-picker-backdrop {
1500
+ position: absolute;
1501
+ inset: 0;
1502
+ z-index: 10;
1503
+ display: flex;
1504
+ align-items: center;
1505
+ justify-content: center;
1506
+ background: hsl(0 0% 0% / 0.7);
1507
+ backdrop-filter: blur(4px);
1456
1508
  }
1457
- .qt-confirmation-badge[data-confirmation-state=amended] {
1458
- opacity: 1;
1509
+ .qt-help-entity-picker {
1510
+ display: flex;
1511
+ flex-direction: column;
1512
+ border-radius: var(--radius-lg);
1513
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1514
+ overflow: hidden;
1515
+ width: min(320px, calc(100% - 2rem));
1516
+ max-height: min(400px, calc(100% - 2rem));
1517
+ background: var(--qt-help-picker-bg, var(--color-card));
1518
+ border: 1px solid var(--qt-help-picker-border, var(--color-border));
1459
1519
  }
1460
- .qt-chat-system-bar {
1520
+ .qt-help-entity-picker-header {
1461
1521
  display: flex;
1462
1522
  align-items: center;
1463
- gap: 0.625rem;
1523
+ justify-content: space-between;
1524
+ padding-left: 0.75rem;
1525
+ padding-right: 0.75rem;
1526
+ padding-top: 0.5rem;
1527
+ padding-bottom: 0.5rem;
1528
+ font-size: 0.875rem;
1529
+ line-height: 1.25rem;
1530
+ font-weight: 500;
1531
+ border-bottom: 1px solid var(--qt-help-picker-border, var(--color-border));
1532
+ }
1533
+ .qt-help-entity-picker-filter {
1464
1534
  width: 100%;
1465
- padding: 0.25rem 0.625rem;
1466
- margin: 0.125rem 0;
1467
- background: var(--qt-chat-system-bar-bg);
1468
- color: var(--qt-chat-system-bar-fg);
1469
- border: 1px solid var(--qt-chat-system-bar-border);
1470
- border-radius: var(--radius-sm, 0.25rem);
1535
+ padding-left: 0.5rem;
1536
+ padding-right: 0.5rem;
1537
+ padding-top: 0.25rem;
1538
+ padding-bottom: 0.25rem;
1471
1539
  font-size: 0.75rem;
1472
- line-height: 1.2;
1473
- text-align: left;
1474
- cursor: pointer;
1475
- transition: background-color 120ms ease;
1476
- }
1477
- .qt-chat-system-bar:hover,
1478
- .qt-chat-system-bar:focus-visible {
1479
- background: var(--qt-chat-system-bar-hover-bg);
1540
+ line-height: 1rem;
1541
+ border-radius: 0.25rem;
1542
+ background: var(--qt-help-picker-filter-bg, var(--color-muted));
1543
+ border: 1px solid var(--qt-help-picker-border, var(--color-border));
1544
+ color: inherit;
1480
1545
  outline: none;
1481
1546
  }
1482
- .qt-chat-system-bar-sender {
1483
- color: var(--qt-chat-system-bar-sender-fg);
1484
- font-weight: 600;
1485
- white-space: nowrap;
1547
+ .qt-help-entity-picker-filter:focus {
1548
+ border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
1486
1549
  }
1487
- .qt-chat-system-bar-kind {
1488
- flex: 1 1 auto;
1489
- min-width: 0;
1490
- font-style: italic;
1491
- overflow: hidden;
1492
- text-overflow: ellipsis;
1493
- white-space: nowrap;
1550
+ .qt-help-entity-picker-list {
1551
+ flex: 1 1 0%;
1552
+ overflow-y: auto;
1553
+ padding-top: 0.25rem;
1554
+ padding-bottom: 0.25rem;
1494
1555
  }
1495
- .qt-chat-system-bar-whisper {
1496
- flex: 0 1 auto;
1497
- min-width: 0;
1498
- color: var(--qt-chat-whisper-label-fg);
1499
- font-style: italic;
1556
+ .qt-help-entity-picker-item {
1557
+ width: 100%;
1558
+ text-align: left;
1559
+ padding-left: 0.75rem;
1560
+ padding-right: 0.75rem;
1561
+ padding-top: 0.375rem;
1562
+ padding-bottom: 0.375rem;
1563
+ font-size: 0.875rem;
1564
+ line-height: 1.25rem;
1500
1565
  overflow: hidden;
1501
1566
  text-overflow: ellipsis;
1502
1567
  white-space: nowrap;
1568
+ transition-property:
1569
+ color,
1570
+ background-color,
1571
+ border-color,
1572
+ text-decoration-color,
1573
+ fill,
1574
+ stroke;
1575
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1576
+ transition-duration: 150ms;
1577
+ cursor: pointer;
1578
+ color: var(--qt-help-picker-fg, var(--color-foreground));
1579
+ }
1580
+ .qt-help-entity-picker-item:hover {
1581
+ background: var(--qt-help-picker-hover-bg, color-mix(in srgb, var(--color-primary) 10%, transparent));
1582
+ color: var(--qt-help-picker-hover-fg, var(--color-primary));
1583
+ }
1584
+ .qt-help-guide-deco {
1585
+ --deco-bg: hsl(45 28% 78%);
1586
+ --deco-fg: hsl(222 40% 12%);
1587
+ --deco-fg-muted: hsl(222 25% 38%);
1588
+ --deco-primary: hsl(222 47% 18%);
1589
+ --deco-primary-fg: hsl(43 85% 55%);
1590
+ --deco-accent: hsl(43 85% 48%);
1591
+ --deco-border: hsl(43 30% 60%);
1592
+ --deco-border-subtle: hsl(43 30% 60% / 0.5);
1593
+ --deco-card: hsl(45 28% 75%);
1594
+ --deco-muted: hsl(222 16% 72%);
1595
+ --deco-input-bg: hsl(45 28% 82%);
1596
+ --deco-code-bg: hsl(45 20% 72%);
1597
+ --deco-gold: hsl(222 47% 18%);
1598
+ --deco-welcome-bg: hsl(222 47% 18% / 0.06);
1599
+ --deco-welcome-border: hsl(43 85% 48% / 0.3);
1600
+ --deco-table-header: hsl(45 25% 72%);
1601
+ --deco-hover-bg: hsl(43 30% 72% / 0.5);
1602
+ --deco-font-serif:
1603
+ "Cormorant Garamond",
1604
+ Georgia,
1605
+ Cambria,
1606
+ "Times New Roman",
1607
+ Times,
1608
+ serif;
1609
+ --deco-font-sans:
1610
+ Raleway,
1611
+ system-ui,
1612
+ -apple-system,
1613
+ BlinkMacSystemFont,
1614
+ "Segoe UI",
1615
+ sans-serif;
1503
1616
  }
1504
- .qt-chat-system-bar-time {
1505
- color: var(--qt-chat-system-bar-fg);
1506
- opacity: 0.75;
1507
- white-space: nowrap;
1617
+ .dark .qt-help-guide-deco,
1618
+ .qt-help-guide-deco.dark {
1619
+ --deco-bg: hsl(222 47% 7%);
1620
+ --deco-fg: hsl(45 15% 90%);
1621
+ --deco-fg-muted: hsl(222 12% 55%);
1622
+ --deco-primary: hsl(43 85% 55%);
1623
+ --deco-primary-fg: hsl(222 47% 7%);
1624
+ --deco-accent: hsl(43 90% 58%);
1625
+ --deco-border: hsl(43 35% 25%);
1626
+ --deco-border-subtle: hsl(43 35% 25% / 0.5);
1627
+ --deco-card: hsl(222 40% 12%);
1628
+ --deco-muted: hsl(222 25% 15%);
1629
+ --deco-input-bg: hsl(222 30% 14%);
1630
+ --deco-code-bg: hsl(222 25% 15%);
1631
+ --deco-gold: hsl(43 90% 58%);
1632
+ --deco-welcome-bg: hsl(43 85% 55% / 0.06);
1633
+ --deco-welcome-border: hsl(43 90% 58% / 0.2);
1634
+ --deco-table-header: hsl(222 30% 16%);
1635
+ --deco-hover-bg: hsl(222 25% 18% / 0.6);
1636
+ --deco-font-serif:
1637
+ "Cormorant Garamond",
1638
+ Georgia,
1639
+ Cambria,
1640
+ "Times New Roman",
1641
+ Times,
1642
+ serif;
1643
+ --deco-font-sans:
1644
+ Raleway,
1645
+ system-ui,
1646
+ -apple-system,
1647
+ BlinkMacSystemFont,
1648
+ "Segoe UI",
1649
+ sans-serif;
1508
1650
  }
1509
- .qt-chat-system-bar-chevron {
1510
- flex-shrink: 0;
1511
- width: 0.875rem;
1512
- height: 0.875rem;
1513
- opacity: 0.7;
1651
+ .qt-help-guide-deco {
1652
+ background: linear-gradient(hsl(45 28% 75% / 0.88), hsl(45 28% 75% / 0.88)), url(/api/themes/assets/bundle:art-deco/textures/background-light.webp);
1653
+ background-size: cover;
1654
+ background-position: center center;
1655
+ color: var(--deco-fg);
1656
+ font-family: var(--deco-font-serif);
1657
+ --qt-help-guide-search-bg: var(--deco-input-bg);
1658
+ --qt-help-guide-search-border: var(--deco-border);
1659
+ --qt-help-guide-search-fg: var(--deco-fg);
1660
+ --qt-help-guide-search-placeholder: var(--deco-fg-muted);
1661
+ --qt-help-guide-search-icon: var(--deco-fg-muted);
1662
+ --qt-help-guide-border: var(--deco-border-subtle);
1663
+ --qt-help-guide-category-fg: var(--deco-fg);
1664
+ --qt-help-guide-category-hover: var(--deco-gold);
1665
+ --qt-help-guide-badge-fg: var(--deco-fg-muted);
1666
+ --qt-help-guide-topic-fg: var(--deco-fg-muted);
1667
+ --qt-help-guide-topic-hover: var(--deco-fg);
1668
+ --qt-help-guide-topic-hover-bg: var(--deco-hover-bg);
1669
+ --qt-help-guide-topic-active-fg: var(--deco-gold);
1670
+ --qt-help-guide-back-fg: var(--deco-gold);
1671
+ --qt-help-guide-back-hover-bg: var(--deco-hover-bg);
1672
+ --qt-help-guide-reader-fg: var(--deco-fg);
1673
+ --qt-help-guide-heading-fg: var(--deco-fg);
1674
+ --qt-help-guide-code-bg: var(--deco-code-bg);
1675
+ --qt-help-guide-code-fg: var(--deco-fg);
1676
+ --qt-help-guide-link-fg: var(--deco-gold);
1677
+ --qt-help-guide-table-header-bg: var(--deco-table-header);
1678
+ --qt-help-welcome-bg: var(--deco-welcome-bg);
1679
+ --qt-help-welcome-border: var(--deco-welcome-border);
1680
+ --qt-help-welcome-title-fg: var(--deco-fg);
1681
+ --qt-help-welcome-text-fg: var(--deco-fg-muted);
1682
+ --qt-help-welcome-link-fg: var(--deco-gold);
1683
+ }
1684
+ .dark .qt-help-guide-deco,
1685
+ .qt-help-guide-deco.dark {
1686
+ background: linear-gradient(hsl(222 40% 12% / 0.88), hsl(222 40% 12% / 0.88)), url(/api/themes/assets/bundle:art-deco/textures/background-dark.webp);
1687
+ background-size: cover;
1688
+ background-position: center center;
1689
+ }
1690
+ .qt-help-guide-deco .qt-help-guide-category-label {
1691
+ font-family: var(--deco-font-sans);
1692
+ letter-spacing: 0.025em;
1693
+ }
1694
+ .qt-help-guide-deco .qt-help-guide-reader h1,
1695
+ .qt-help-guide-deco .qt-help-guide-reader h2,
1696
+ .qt-help-guide-deco .qt-help-guide-reader h3 {
1697
+ font-family: var(--deco-font-sans);
1698
+ letter-spacing: 0.015em;
1699
+ }
1700
+ .qt-help-guide-deco .qt-help-guide-back {
1701
+ font-family: var(--deco-font-sans);
1702
+ letter-spacing: 0.025em;
1703
+ }
1704
+ .qt-help-guide-search {
1705
+ position: relative;
1706
+ display: flex;
1707
+ align-items: center;
1514
1708
  }
1515
- .qt-chat-system-bar-expanded {
1516
- margin-bottom: 0.25rem;
1709
+ .qt-help-guide-search-icon {
1710
+ position: absolute;
1711
+ left: 0.625rem;
1712
+ width: 1rem;
1713
+ height: 1rem;
1714
+ pointer-events: none;
1715
+ color: var(--qt-help-guide-search-icon, var(--color-muted-foreground));
1517
1716
  }
1518
- .qt-chat-announcement-group {
1519
- display: flex;
1520
- flex-wrap: wrap;
1521
- gap: 0.375rem;
1522
- width: 95%;
1523
- max-width: var(--qt-chat-message-row-max-width);
1524
- margin: 1.5rem auto 0;
1525
- align-items: flex-start;
1717
+ .qt-help-guide-search-input {
1718
+ width: 100%;
1719
+ padding-left: 2.25rem;
1720
+ padding-right: 2rem;
1721
+ padding-top: 0.375rem;
1722
+ padding-bottom: 0.375rem;
1723
+ font-size: 0.875rem;
1724
+ line-height: 1.25rem;
1725
+ border-radius: var(--radius-md);
1726
+ border-width: 1px;
1727
+ border-style: solid;
1728
+ background: var(--qt-help-guide-search-bg, var(--color-background));
1729
+ border-color: var(--qt-help-guide-search-border, var(--color-border));
1730
+ color: var(--qt-help-guide-search-fg, var(--color-foreground));
1526
1731
  }
1527
- .qt-chat-announcement-chip {
1528
- display: inline-flex;
1732
+ .qt-help-guide-search-input::-moz-placeholder {
1733
+ color: var(--qt-help-guide-search-placeholder, var(--color-muted-foreground));
1734
+ }
1735
+ .qt-help-guide-search-input::placeholder {
1736
+ color: var(--qt-help-guide-search-placeholder, var(--color-muted-foreground));
1737
+ }
1738
+ .qt-help-guide-search-input:focus {
1739
+ outline-style: none;
1740
+ box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-ring);
1741
+ }
1742
+ .qt-help-guide-search-clear {
1743
+ position: absolute;
1744
+ right: 0.5rem;
1745
+ padding: 0.125rem;
1746
+ border-radius: var(--radius-sm);
1747
+ transition-property:
1748
+ color,
1749
+ background-color,
1750
+ border-color,
1751
+ text-decoration-color,
1752
+ fill,
1753
+ stroke;
1754
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1755
+ transition-duration: 150ms;
1756
+ color: var(--qt-help-guide-search-icon, var(--color-muted-foreground));
1757
+ }
1758
+ .qt-help-guide-search-clear:hover {
1759
+ color: var(--qt-help-guide-search-fg, var(--color-foreground));
1760
+ }
1761
+ .qt-help-guide-category {
1762
+ border-bottom-width: 1px;
1763
+ border-bottom-style: solid;
1764
+ border-color: var(--qt-help-guide-border, color-mix(in srgb, var(--color-border) 50%, transparent));
1765
+ }
1766
+ .qt-help-guide-category:last-child {
1767
+ border-bottom-width: 0;
1768
+ }
1769
+ .qt-help-guide-category-header {
1770
+ width: 100%;
1771
+ display: flex;
1529
1772
  align-items: center;
1530
1773
  gap: 0.5rem;
1531
- flex: 0 1 auto;
1532
- min-width: 0;
1533
- max-width: 100%;
1534
- padding: 0.25rem 0.625rem;
1535
- background: var(--qt-chat-system-bar-bg);
1536
- color: var(--qt-chat-system-bar-fg);
1537
- border: 1px solid var(--qt-chat-system-bar-border);
1538
- border-radius: var(--radius-sm, 0.25rem);
1539
- font-size: 0.75rem;
1540
- line-height: 1.2;
1774
+ padding-top: 0.5rem;
1775
+ padding-bottom: 0.5rem;
1776
+ padding-left: 0.25rem;
1777
+ padding-right: 0.25rem;
1541
1778
  text-align: left;
1779
+ font-size: 0.875rem;
1780
+ line-height: 1.25rem;
1781
+ transition-property:
1782
+ color,
1783
+ background-color,
1784
+ border-color,
1785
+ text-decoration-color,
1786
+ fill,
1787
+ stroke;
1788
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1789
+ transition-duration: 150ms;
1542
1790
  cursor: pointer;
1543
- transition: background-color 120ms ease;
1791
+ color: var(--qt-help-guide-category-fg, var(--color-foreground));
1544
1792
  }
1545
- .qt-chat-announcement-chip:hover,
1546
- .qt-chat-announcement-chip:focus-visible {
1547
- background: var(--qt-chat-system-bar-hover-bg);
1548
- outline: none;
1793
+ .qt-help-guide-category-header:hover {
1794
+ color: var(--qt-help-guide-category-hover, var(--color-primary));
1549
1795
  }
1550
- .qt-chat-announcement-chip .qt-chat-system-bar-kind {
1551
- flex: 0 1 auto;
1552
- max-width: 22ch;
1796
+ .qt-help-guide-category-chevron {
1797
+ width: 1rem;
1798
+ height: 1rem;
1799
+ flex-shrink: 0;
1800
+ transition-property:
1801
+ transform,
1802
+ translate,
1803
+ scale,
1804
+ rotate;
1805
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1806
+ transition-duration: 150ms;
1553
1807
  }
1554
- .qt-chat-announcement-chip .qt-chat-system-bar-whisper {
1555
- max-width: 18ch;
1808
+ .qt-help-guide-category-chevron-open {
1809
+ transform: rotate(90deg);
1556
1810
  }
1557
- .qt-chat-announcement-chip-whisper {
1558
- border-color: var(--qt-chat-whisper-label-fg);
1811
+ .qt-help-guide-category-label {
1812
+ flex: 1 1 0%;
1813
+ font-weight: 500;
1559
1814
  }
1560
- .qt-chat-announcement-dot {
1815
+ .qt-help-guide-category-badge {
1816
+ font-size: 0.75rem;
1817
+ line-height: 1rem;
1561
1818
  flex-shrink: 0;
1562
- width: 0.5rem;
1563
- height: 0.5rem;
1564
- border-radius: 9999px;
1565
- border: 1px solid transparent;
1566
- }
1567
- .qt-chat-announcement-dot-high {
1568
- background: var(--qt-chat-announcement-dot-high);
1819
+ color: var(--qt-help-guide-badge-fg, var(--color-muted-foreground));
1569
1820
  }
1570
- .qt-chat-announcement-dot-medium {
1571
- background: var(--qt-chat-announcement-dot-medium);
1821
+ .qt-help-guide-category-topics {
1822
+ display: flex;
1823
+ flex-direction: column;
1824
+ padding-bottom: 0.25rem;
1572
1825
  }
1573
- .qt-chat-announcement-dot-low {
1574
- background: transparent;
1575
- border-color: var(--qt-chat-announcement-dot-low);
1576
- }
1577
- .qt-chat-announcement-dot-outcome-success {
1578
- background: var(--qt-alert-success-fg);
1579
- }
1580
- .qt-chat-announcement-dot-outcome-partial {
1581
- background: var(--qt-alert-warning-fg);
1826
+ .qt-help-guide-topic {
1827
+ width: 100%;
1828
+ text-align: left;
1829
+ padding-top: 0.25rem;
1830
+ padding-bottom: 0.25rem;
1831
+ padding-left: 1.75rem;
1832
+ padding-right: 0.5rem;
1833
+ font-size: 0.875rem;
1834
+ line-height: 1.25rem;
1835
+ overflow: hidden;
1836
+ text-overflow: ellipsis;
1837
+ white-space: nowrap;
1838
+ transition-property:
1839
+ color,
1840
+ background-color,
1841
+ border-color,
1842
+ text-decoration-color,
1843
+ fill,
1844
+ stroke;
1845
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1846
+ transition-duration: 150ms;
1847
+ cursor: pointer;
1848
+ border-radius: var(--radius-sm);
1849
+ color: var(--qt-help-guide-topic-fg, var(--color-muted-foreground));
1582
1850
  }
1583
- .qt-chat-announcement-dot-outcome-failure {
1584
- background: var(--qt-alert-error-fg);
1851
+ .qt-help-guide-topic:hover {
1852
+ color: var(--qt-help-guide-topic-hover, var(--color-foreground));
1853
+ background: var(--qt-help-guide-topic-hover-bg, color-mix(in srgb, var(--color-accent) 50%, transparent));
1585
1854
  }
1586
- .qt-chat-announcement-dot-outcome-info {
1587
- background: var(--qt-alert-info-fg);
1855
+ .qt-help-guide-topic-active {
1856
+ color: var(--qt-help-guide-topic-active-fg, var(--color-primary));
1857
+ font-weight: 500;
1588
1858
  }
1589
- .qt-chat-system-bar.qt-pascal-result,
1590
- .qt-chat-announcement-chip.qt-pascal-result {
1591
- border-left-width: 3px;
1592
- border-left-color: var(--qt-alert-info-border);
1859
+ .qt-help-guide-back {
1860
+ display: flex;
1861
+ align-items: center;
1862
+ gap: 0.375rem;
1593
1863
  padding-left: 0.75rem;
1864
+ padding-right: 0.75rem;
1865
+ padding-top: 0.5rem;
1866
+ padding-bottom: 0.5rem;
1867
+ font-size: 0.875rem;
1868
+ line-height: 1.25rem;
1869
+ font-weight: 500;
1870
+ border-bottom-width: 1px;
1871
+ border-bottom-style: solid;
1872
+ flex-shrink: 0;
1873
+ transition-property:
1874
+ color,
1875
+ background-color,
1876
+ border-color,
1877
+ text-decoration-color,
1878
+ fill,
1879
+ stroke;
1880
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1881
+ transition-duration: 150ms;
1882
+ cursor: pointer;
1883
+ color: var(--qt-help-guide-back-fg, var(--color-primary));
1884
+ border-color: var(--qt-help-guide-border, color-mix(in srgb, var(--color-border) 50%, transparent));
1594
1885
  }
1595
- .qt-chat-system-bar.qt-pascal-result--success,
1596
- .qt-chat-announcement-chip.qt-pascal-result--success {
1597
- border-left-color: var(--qt-alert-success-border);
1598
- }
1599
- .qt-chat-system-bar.qt-pascal-result--partial,
1600
- .qt-chat-announcement-chip.qt-pascal-result--partial {
1601
- border-left-color: var(--qt-alert-warning-border);
1886
+ .qt-help-guide-back:hover {
1887
+ background: var(--qt-help-guide-back-hover-bg, color-mix(in srgb, var(--color-accent) 30%, transparent));
1602
1888
  }
1603
- .qt-chat-system-bar.qt-pascal-result--failure,
1604
- .qt-chat-announcement-chip.qt-pascal-result--failure {
1605
- border-left-color: var(--qt-alert-error-border);
1889
+ .qt-help-guide-reader {
1890
+ flex: 1 1 0%;
1891
+ overflow-y: auto;
1892
+ padding-left: 1rem;
1893
+ padding-right: 1rem;
1894
+ padding-top: 0.75rem;
1895
+ padding-bottom: 0.75rem;
1896
+ font-size: 0.8125rem;
1897
+ line-height: 1.625;
1898
+ color: var(--qt-help-guide-reader-fg, var(--color-foreground));
1899
+ overflow-x: hidden;
1900
+ min-width: 0;
1606
1901
  }
1607
- .qt-chat-system-bar.qt-pascal-result--info,
1608
- .qt-chat-announcement-chip.qt-pascal-result--info {
1609
- border-left-color: var(--qt-alert-info-border);
1902
+ .qt-help-guide-reader h1 {
1903
+ font-size: 1.125rem;
1904
+ line-height: 1.75rem;
1905
+ font-weight: 700;
1906
+ margin-top: 0;
1907
+ margin-bottom: 0.75rem;
1610
1908
  }
1611
- .qt-chat-composer-established-fact .qt-chat-composer-input {
1612
- border-color: var(--color-ring);
1613
- box-shadow: inset 0 0 0 1px var(--color-ring);
1614
- background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
1909
+ .qt-help-guide-reader h2 {
1910
+ font-size: 1rem;
1911
+ line-height: 1.5rem;
1912
+ font-weight: 600;
1913
+ margin-top: 1.25rem;
1914
+ margin-bottom: 0.5rem;
1915
+ color: var(--qt-help-guide-heading-fg, var(--color-foreground));
1615
1916
  }
1616
- .qt-chat-message-established-fact {
1617
- font-size: 0.75rem;
1917
+ .qt-help-guide-reader h3 {
1918
+ font-size: 0.875rem;
1919
+ line-height: 1.25rem;
1618
1920
  font-weight: 600;
1619
- font-variant-caps: all-small-caps;
1620
- letter-spacing: 0.04em;
1621
- color: inherit;
1622
- margin-bottom: 0.25rem;
1921
+ margin-top: 1rem;
1922
+ margin-bottom: 0.375rem;
1623
1923
  }
1624
- .qt-chat-system-bar.qt-chat-established-fact,
1625
- .qt-chat-announcement-chip.qt-chat-established-fact {
1626
- border-left-width: 3px;
1627
- border-left-color: var(--color-ring);
1628
- padding-left: 0.75rem;
1924
+ .qt-help-guide-reader p {
1925
+ margin-bottom: 0.5rem;
1629
1926
  }
1630
- .qt-chat-established-fact-row {
1631
- width: 100%;
1632
- max-width: none;
1927
+ .qt-help-guide-reader ul,
1928
+ .qt-help-guide-reader ol {
1929
+ margin-bottom: 0.5rem;
1930
+ padding-left: 1.25rem;
1633
1931
  }
1634
- .qt-chat-established-fact-band {
1635
- width: 100%;
1636
- background: var(--qt-alert-info-bg);
1637
- border: 1px solid var(--qt-alert-info-border);
1638
- border-left: 3px solid var(--color-ring);
1639
- box-shadow: none;
1932
+ .qt-help-guide-reader li {
1933
+ margin-bottom: 0.125rem;
1640
1934
  }
1641
- .qt-chat-established-fact-toggle {
1642
- display: inline-flex;
1643
- align-items: center;
1644
- justify-content: center;
1645
- width: 1.625rem;
1646
- height: 1.625rem;
1647
- padding: 0;
1648
- border: 1px solid var(--color-border);
1649
- border-radius: var(--radius-sm);
1650
- background-color: color-mix(in srgb, var(--color-background) 82%, transparent);
1651
- color: var(--color-foreground);
1652
- cursor: pointer;
1653
- opacity: 0.85;
1654
- transition:
1655
- opacity 150ms ease,
1656
- border-color 150ms ease,
1657
- box-shadow 150ms ease;
1935
+ .qt-help-guide-reader strong {
1936
+ font-weight: 600;
1658
1937
  }
1659
- .qt-chat-established-fact-toggle:hover,
1660
- .qt-chat-established-fact-toggle:focus-visible {
1661
- opacity: 1;
1938
+ .qt-help-guide-reader table {
1939
+ width: 100%;
1940
+ margin-bottom: 0.75rem;
1941
+ font-size: 0.75rem;
1942
+ line-height: 1rem;
1943
+ border-collapse: collapse;
1944
+ table-layout: fixed;
1945
+ word-break: break-word;
1662
1946
  }
1663
- .qt-chat-established-fact-toggle:focus-visible {
1664
- outline: 2px solid var(--color-ring);
1665
- outline-offset: 1px;
1947
+ .qt-help-guide-reader th,
1948
+ .qt-help-guide-reader td {
1949
+ padding-left: 0.5rem;
1950
+ padding-right: 0.5rem;
1951
+ padding-top: 0.25rem;
1952
+ padding-bottom: 0.25rem;
1953
+ border-width: 1px;
1954
+ border-style: solid;
1955
+ text-align: left;
1956
+ border-color: var(--qt-help-guide-border, color-mix(in srgb, var(--color-border) 50%, transparent));
1666
1957
  }
1667
- .qt-chat-established-fact-toggle[aria-pressed=true] {
1668
- opacity: 1;
1669
- border-color: var(--color-ring);
1670
- box-shadow: inset 0 0 0 1px var(--color-ring);
1671
- background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
1958
+ .qt-help-guide-reader th {
1959
+ font-weight: 600;
1960
+ background: var(--qt-help-guide-table-header-bg, color-mix(in srgb, var(--color-muted) 50%, transparent));
1961
+ }
1962
+ .qt-help-guide-reader hr {
1963
+ margin-top: 1rem;
1964
+ margin-bottom: 1rem;
1965
+ border-color: var(--qt-help-guide-border, color-mix(in srgb, var(--color-border) 50%, transparent));
1966
+ }
1967
+ .qt-help-guide-inline-code {
1968
+ padding-left: 0.25rem;
1969
+ padding-right: 0.25rem;
1970
+ padding-top: 0.125rem;
1971
+ padding-bottom: 0.125rem;
1972
+ border-radius: 0.25rem;
1973
+ font-size: 0.75rem;
1974
+ line-height: 1rem;
1975
+ background: var(--qt-help-guide-code-bg, var(--color-muted));
1976
+ color: var(--qt-help-guide-code-fg, var(--color-foreground));
1672
1977
  }
1673
- .qt-chat-established-fact-toggle:disabled {
1674
- cursor: not-allowed;
1675
- opacity: 0.5;
1978
+ .qt-help-guide-code-block {
1979
+ border-radius: var(--radius-md);
1980
+ padding: 0.75rem;
1981
+ margin-bottom: 0.5rem;
1982
+ font-size: 0.75rem;
1983
+ line-height: 1rem;
1984
+ background: var(--qt-help-guide-code-bg, var(--color-muted));
1985
+ white-space: pre-wrap !important;
1986
+ word-break: break-all;
1987
+ overflow-wrap: anywhere;
1988
+ max-width: 100%;
1989
+ overflow: hidden;
1990
+ color: var(--qt-help-guide-code-fg, var(--color-foreground));
1676
1991
  }
1677
- .qt-chat-message-silent {
1678
- background: var(--qt-chat-silent-bg);
1679
- color: var(--qt-chat-silent-fg);
1680
- border: 2px dotted var(--qt-chat-silent-border);
1681
- font-style: italic;
1992
+ .qt-help-guide-nav-callout {
1993
+ margin-top: 0.75rem;
1994
+ margin-bottom: 0.75rem;
1682
1995
  }
1683
- .qt-chat-silent-label {
1684
- font-size: 0.75rem;
1685
- color: var(--qt-chat-silent-label-fg);
1686
- font-style: italic;
1687
- margin-bottom: 0.25rem;
1996
+ .qt-help-guide-doc-link {
1997
+ cursor: pointer;
1998
+ text-decoration-line: underline;
1999
+ color: var(--qt-help-guide-link-fg, var(--color-primary));
1688
2000
  }
1689
- .qt-chat-message-regenerating {
1690
- border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 45%, transparent);
2001
+ .qt-help-guide-doc-link:hover {
2002
+ opacity: 0.8;
1691
2003
  }
1692
- .qt-chat-regenerating {
1693
- position: relative;
2004
+ .qt-help-guide-page-link {
2005
+ cursor: pointer;
2006
+ text-decoration-line: underline;
2007
+ color: var(--qt-help-guide-link-fg, var(--color-primary));
1694
2008
  }
1695
- .qt-chat-regenerating-original {
1696
- opacity: 0.3;
1697
- filter: grayscale(0.8);
1698
- pointer-events: none;
1699
- -webkit-user-select: none;
1700
- -moz-user-select: none;
1701
- user-select: none;
2009
+ .qt-help-guide-page-link:hover {
2010
+ opacity: 0.8;
1702
2011
  }
1703
- .qt-chat-regenerating-plate {
1704
- position: absolute;
1705
- inset: 0;
1706
- display: flex;
1707
- align-items: center;
1708
- justify-content: center;
1709
- gap: 0.5rem;
1710
- color: var(--qt-response-status-streaming-fg);
2012
+ .qt-help-welcome-card {
2013
+ border-radius: var(--radius-lg);
2014
+ border-width: 1px;
2015
+ border-style: solid;
2016
+ padding: 0.75rem;
2017
+ margin-bottom: 0.75rem;
2018
+ background: var(--qt-help-welcome-bg, color-mix(in srgb, var(--color-primary) 5%, transparent));
2019
+ border-color: var(--qt-help-welcome-border, color-mix(in srgb, var(--color-primary) 20%, transparent));
1711
2020
  }
1712
- .qt-chat-regenerating-plate-text {
1713
- color: var(--qt-chat-regenerating-plate-fg, var(--qt-chat-assistant-fg, var(--color-foreground)));
2021
+ .qt-help-welcome-title {
1714
2022
  font-size: 0.875rem;
1715
2023
  line-height: 1.25rem;
1716
- font-weight: 500;
1717
- padding: 0.375rem 0.75rem;
1718
- border-radius: 0.375rem;
1719
- background: color-mix(in srgb, var(--qt-chat-assistant-bg) 88%, transparent);
1720
- border: 1px solid color-mix(in srgb, var(--qt-response-status-streaming-fg) 35%, transparent);
1721
- letter-spacing: 0.02em;
2024
+ font-weight: 600;
2025
+ margin-bottom: 0.25rem;
2026
+ color: var(--qt-help-welcome-title-fg, var(--color-foreground));
1722
2027
  }
1723
- .qt-chat-message-action-bar {
2028
+ .qt-help-welcome-text {
2029
+ font-size: 0.75rem;
2030
+ line-height: 1rem;
2031
+ margin-bottom: 0.5rem;
2032
+ color: var(--qt-help-welcome-text-fg, var(--color-muted-foreground));
2033
+ }
2034
+ .qt-help-welcome-links {
1724
2035
  display: flex;
1725
- align-items: center;
1726
- gap: 0.75rem;
1727
- margin-top: 0.5rem;
1728
- padding-top: 0.5rem;
1729
- border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
2036
+ flex-direction: column;
2037
+ gap: 0.125rem;
2038
+ margin-bottom: 0.5rem;
1730
2039
  }
1731
- .qt-chat-message-action-bar-icons {
2040
+ .qt-help-welcome-link {
1732
2041
  display: flex;
1733
2042
  align-items: center;
1734
- gap: 0.25rem;
1735
- }
1736
- .qt-chat-message-action-bar-disabled {
1737
- pointer-events: none;
1738
- opacity: 0.4;
1739
- }
1740
- .qt-chat-message-action-icon {
1741
- padding: 0.375rem;
1742
- border-radius: 0.25rem;
2043
+ gap: 0.375rem;
2044
+ font-size: 0.75rem;
2045
+ line-height: 1rem;
2046
+ padding-top: 0.125rem;
2047
+ padding-bottom: 0.125rem;
1743
2048
  transition-property:
1744
2049
  color,
1745
2050
  background-color,
@@ -1749,37 +2054,569 @@ body {
1749
2054
  stroke;
1750
2055
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1751
2056
  transition-duration: 150ms;
1752
- color: var(--color-muted-foreground);
1753
2057
  cursor: pointer;
2058
+ text-align: left;
2059
+ color: var(--qt-help-welcome-link-fg, var(--color-primary));
1754
2060
  }
1755
- .qt-chat-message-action-icon:hover {
1756
- color: var(--color-foreground);
1757
- background: color-mix(in srgb, var(--color-muted) 50%, transparent);
1758
- }
1759
- .qt-chat-message-action-icon-danger:hover {
1760
- color: var(--qt-status-danger-fg);
1761
- background: color-mix(in srgb, var(--qt-status-danger-bg) 50%, transparent);
1762
- }
1763
- .qt-chat-message-action-icon svg,
1764
- .qt-chat-message-action-icon .qt-icon {
1765
- width: 1rem;
1766
- height: 1rem;
1767
- }
1768
- .qt-chat-message-user .qt-chat-message-action-bar {
1769
- border-top-color: color-mix(in srgb, var(--qt-chat-user-fg) 30%, transparent);
1770
- }
1771
- .qt-chat-message-user .qt-chat-message-action-icon {
1772
- color: color-mix(in srgb, var(--qt-chat-user-fg) 70%, transparent);
1773
- }
1774
- .qt-chat-message-user .qt-chat-message-action-icon:hover {
1775
- color: var(--qt-chat-user-fg);
1776
- background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
1777
- }
1778
- .qt-chat-message-user .qt-chat-message-action-icon-danger:hover {
1779
- color: hsl(0 100% 85%);
1780
- background: color-mix(in srgb, hsl(0 70% 50%) 25%, transparent);
2061
+ .qt-help-welcome-link:hover {
2062
+ opacity: 0.8;
1781
2063
  }
1782
- .qt-chat-message-action-timestamp {
2064
+ .qt-help-welcome-footer {
2065
+ font-size: 0.75rem;
2066
+ line-height: 1rem;
2067
+ color: var(--qt-help-welcome-text-fg, var(--color-muted-foreground));
2068
+ }
2069
+ .qt-brahma-launcher {
2070
+ position: fixed;
2071
+ left: calc(var(--qt-left-sidebar-collapsed-width) + var(--qt-brahma-launcher-offset));
2072
+ bottom: var(--qt-brahma-launcher-offset);
2073
+ z-index: var(--qt-floating-layer-z);
2074
+ width: var(--qt-brahma-launcher-size);
2075
+ height: var(--qt-brahma-launcher-size);
2076
+ display: inline-flex;
2077
+ align-items: center;
2078
+ justify-content: center;
2079
+ border-radius: 9999px;
2080
+ background: var(--qt-brahma-launcher-bg);
2081
+ color: var(--qt-brahma-launcher-fg);
2082
+ border: 2px solid var(--qt-brahma-launcher-ring);
2083
+ box-shadow: var(--qt-brahma-launcher-shadow);
2084
+ transition:
2085
+ background-color 150ms ease,
2086
+ color 150ms ease,
2087
+ transform 150ms ease;
2088
+ }
2089
+ .qt-brahma-launcher:hover {
2090
+ background: var(--qt-brahma-launcher-hover-bg);
2091
+ transform: scale(1.06);
2092
+ }
2093
+ .qt-brahma-launcher:focus-visible {
2094
+ outline: 2px solid var(--qt-brahma-launcher-ring);
2095
+ outline-offset: 3px;
2096
+ }
2097
+ .qt-brahma-launcher-active,
2098
+ .qt-brahma-launcher-active:hover {
2099
+ background: var(--qt-brahma-launcher-active-bg);
2100
+ color: var(--qt-brahma-launcher-active-fg);
2101
+ }
2102
+ .qt-brahma-launcher-icon {
2103
+ width: 60%;
2104
+ height: 60%;
2105
+ }
2106
+ .qt-slide-over-overlay {
2107
+ position: fixed;
2108
+ inset: 0;
2109
+ z-index: 55;
2110
+ background-color: var(--qt-dialog-backdrop);
2111
+ opacity: 0;
2112
+ transition: opacity 200ms ease;
2113
+ pointer-events: none;
2114
+ }
2115
+ .qt-slide-over-overlay[data-open=true] {
2116
+ opacity: 1;
2117
+ pointer-events: auto;
2118
+ }
2119
+ .qt-slide-over-panel {
2120
+ position: fixed;
2121
+ right: 0;
2122
+ top: 0;
2123
+ z-index: 55;
2124
+ height: 100%;
2125
+ display: flex;
2126
+ flex-direction: column;
2127
+ background-color: var(--qt-dialog-bg);
2128
+ border-left: 1px solid var(--qt-dialog-border);
2129
+ box-shadow: var(--qt-dialog-shadow);
2130
+ transform: translateX(100%);
2131
+ transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
2132
+ }
2133
+ .qt-slide-over-panel[data-open=true] {
2134
+ transform: translateX(0);
2135
+ }
2136
+ .qt-slide-over-header {
2137
+ display: flex;
2138
+ align-items: center;
2139
+ justify-content: space-between;
2140
+ padding: 0.75rem 1rem;
2141
+ flex-shrink: 0;
2142
+ border-bottom: 1px solid var(--qt-dialog-border);
2143
+ }
2144
+ .qt-inspector-entry {
2145
+ transition: all 150ms ease;
2146
+ border-radius: var(--qt-card-radius);
2147
+ background: var(--qt-card-bg);
2148
+ border: 1px solid color-mix(in srgb, var(--qt-card-border) calc(var(--qt-card-border-opacity, 1) * 100%), transparent);
2149
+ }
2150
+ .qt-inspector-entry:hover {
2151
+ border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
2152
+ }
2153
+ .qt-inspector-entry-highlight {
2154
+ animation: qt-inspector-highlight 2s ease-out;
2155
+ }
2156
+ @keyframes qt-inspector-highlight {
2157
+ 0% {
2158
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, transparent);
2159
+ }
2160
+ 100% {
2161
+ box-shadow: 0 0 0 0px transparent;
2162
+ }
2163
+ }
2164
+ .qt-tab-group {
2165
+ display: flex;
2166
+ gap: var(--qt-tab-group-gap);
2167
+ border-bottom: 1px solid var(--color-border);
2168
+ }
2169
+ .qt-tab {
2170
+ padding: var(--qt-tab-padding-y) var(--qt-tab-padding-x);
2171
+ font-size: var(--qt-tab-font-size);
2172
+ font-weight: var(--qt-tab-font-weight);
2173
+ color: var(--qt-tab-fg);
2174
+ background-color: var(--qt-tab-bg);
2175
+ border: none;
2176
+ border-radius: var(--qt-tab-radius);
2177
+ cursor: pointer;
2178
+ transition: all 150ms;
2179
+ }
2180
+ .qt-tab:hover {
2181
+ color: var(--color-foreground);
2182
+ }
2183
+ .qt-tab-active {
2184
+ background-color: var(--qt-tab-active-bg);
2185
+ color: var(--qt-tab-active-fg);
2186
+ }
2187
+ .qt-tab-content {
2188
+ padding: 1rem 0;
2189
+ }
2190
+ .qt-chat-message {
2191
+ padding: var(--qt-chat-message-padding);
2192
+ border-radius: var(--qt-chat-message-radius);
2193
+ max-width: 80%;
2194
+ }
2195
+ .qt-chat-message-user {
2196
+ background-color: var(--qt-chat-user-bg);
2197
+ color: var(--qt-chat-user-fg);
2198
+ margin-left: auto;
2199
+ }
2200
+ .qt-chat-message-assistant {
2201
+ background-color: var(--qt-chat-assistant-bg);
2202
+ color: var(--qt-chat-assistant-fg);
2203
+ border: 1px solid var(--color-border);
2204
+ }
2205
+ .qt-chat-message-whisper {
2206
+ background: var(--qt-chat-whisper-bg);
2207
+ color: var(--qt-chat-whisper-fg);
2208
+ border: 2px dashed var(--qt-chat-whisper-border);
2209
+ font-style: italic;
2210
+ }
2211
+ .qt-chat-whisper-label {
2212
+ font-size: 0.75rem;
2213
+ color: var(--qt-chat-whisper-label-fg);
2214
+ font-style: italic;
2215
+ margin-bottom: 0.25rem;
2216
+ }
2217
+ .qt-chat-message-whisper-overheard {
2218
+ opacity: 0.6;
2219
+ }
2220
+ .qt-pascal-result {
2221
+ border-left: 3px solid var(--qt-alert-info-border);
2222
+ padding-left: 0.75rem;
2223
+ }
2224
+ .qt-pascal-result--success {
2225
+ border-left-color: var(--qt-alert-success-border);
2226
+ }
2227
+ .qt-pascal-result--partial {
2228
+ border-left-color: var(--qt-alert-warning-border);
2229
+ }
2230
+ .qt-pascal-result--failure {
2231
+ border-left-color: var(--qt-alert-error-border);
2232
+ }
2233
+ .qt-pascal-result--info {
2234
+ border-left-color: var(--qt-alert-info-border);
2235
+ }
2236
+ .qt-confirmation-badge {
2237
+ display: inline-flex;
2238
+ align-items: center;
2239
+ gap: 0.2rem;
2240
+ padding: 0.05rem 0.4rem;
2241
+ border-radius: 0.375rem;
2242
+ border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
2243
+ background: transparent;
2244
+ font: inherit;
2245
+ line-height: 1.4;
2246
+ cursor: help;
2247
+ color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
2248
+ opacity: 0.8;
2249
+ -webkit-user-select: none;
2250
+ -moz-user-select: none;
2251
+ user-select: none;
2252
+ white-space: nowrap;
2253
+ transition:
2254
+ color 150ms,
2255
+ background-color 150ms,
2256
+ border-color 150ms,
2257
+ opacity 150ms;
2258
+ }
2259
+ .qt-confirmation-badge:hover,
2260
+ .qt-confirmation-badge:focus-visible {
2261
+ opacity: 1;
2262
+ border-color: color-mix(in srgb, currentColor 45%, transparent);
2263
+ background: color-mix(in srgb, var(--color-muted) 50%, transparent);
2264
+ }
2265
+ .qt-confirmation-badge[data-confirmation-state=vouched]:hover,
2266
+ .qt-confirmation-badge[data-confirmation-state=vouched]:focus-visible,
2267
+ .qt-confirmation-badge[data-confirmation-state=unvetted]:hover,
2268
+ .qt-confirmation-badge[data-confirmation-state=unvetted]:focus-visible {
2269
+ color: var(--color-foreground);
2270
+ }
2271
+ .qt-confirmation-badge:focus-visible {
2272
+ outline: 2px solid color-mix(in srgb, var(--color-foreground) 45%, transparent);
2273
+ outline-offset: 2px;
2274
+ }
2275
+ .qt-chat-message-user .qt-confirmation-badge:hover,
2276
+ .qt-chat-message-user .qt-confirmation-badge:focus-visible {
2277
+ color: var(--qt-chat-user-fg);
2278
+ background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
2279
+ }
2280
+ .qt-confirmation-badge-glyph {
2281
+ font-weight: 600;
2282
+ }
2283
+ .qt-confirmation-badge[data-confirmation-state=stood-by] {
2284
+ color: var(--qt-warning-box-fg, var(--qt-text-secondary-fg));
2285
+ opacity: 1;
2286
+ }
2287
+ .qt-confirmation-badge[data-confirmation-state=amended] {
2288
+ opacity: 1;
2289
+ }
2290
+ .qt-chat-system-bar {
2291
+ display: flex;
2292
+ align-items: center;
2293
+ gap: 0.625rem;
2294
+ width: 100%;
2295
+ padding: 0.25rem 0.625rem;
2296
+ margin: 0.125rem 0;
2297
+ background: var(--qt-chat-system-bar-bg);
2298
+ color: var(--qt-chat-system-bar-fg);
2299
+ border: 1px solid var(--qt-chat-system-bar-border);
2300
+ border-radius: var(--radius-sm, 0.25rem);
2301
+ font-size: 0.75rem;
2302
+ line-height: 1.2;
2303
+ text-align: left;
2304
+ cursor: pointer;
2305
+ transition: background-color 120ms ease;
2306
+ }
2307
+ .qt-chat-system-bar:hover,
2308
+ .qt-chat-system-bar:focus-visible {
2309
+ background: var(--qt-chat-system-bar-hover-bg);
2310
+ outline: none;
2311
+ }
2312
+ .qt-chat-system-bar:focus-visible {
2313
+ outline: 2px solid var(--color-ring);
2314
+ outline-offset: 2px;
2315
+ }
2316
+ .qt-chat-system-bar-sender {
2317
+ color: var(--qt-chat-system-bar-sender-fg);
2318
+ font-weight: 600;
2319
+ white-space: nowrap;
2320
+ }
2321
+ .qt-chat-system-bar-kind {
2322
+ flex: 1 1 auto;
2323
+ min-width: 0;
2324
+ font-style: italic;
2325
+ overflow: hidden;
2326
+ text-overflow: ellipsis;
2327
+ white-space: nowrap;
2328
+ }
2329
+ .qt-chat-system-bar-whisper {
2330
+ flex: 0 1 auto;
2331
+ min-width: 0;
2332
+ color: var(--qt-chat-whisper-label-fg);
2333
+ font-style: italic;
2334
+ overflow: hidden;
2335
+ text-overflow: ellipsis;
2336
+ white-space: nowrap;
2337
+ }
2338
+ .qt-chat-system-bar-time {
2339
+ color: var(--qt-chat-system-bar-fg);
2340
+ white-space: nowrap;
2341
+ }
2342
+ .qt-chat-system-bar-chevron {
2343
+ flex-shrink: 0;
2344
+ width: 0.875rem;
2345
+ height: 0.875rem;
2346
+ opacity: 0.7;
2347
+ }
2348
+ .qt-chat-system-bar-expanded {
2349
+ margin-bottom: 0.25rem;
2350
+ }
2351
+ .qt-chat-announcement-group {
2352
+ display: flex;
2353
+ flex-wrap: wrap;
2354
+ gap: 0.375rem;
2355
+ width: 95%;
2356
+ max-width: var(--qt-chat-message-row-max-width);
2357
+ margin: 1.5rem auto 0;
2358
+ align-items: flex-start;
2359
+ }
2360
+ .qt-chat-announcement-chip {
2361
+ display: inline-flex;
2362
+ align-items: center;
2363
+ gap: 0.5rem;
2364
+ flex: 0 1 auto;
2365
+ min-width: 0;
2366
+ max-width: 100%;
2367
+ padding: 0.25rem 0.625rem;
2368
+ background: var(--qt-chat-system-bar-bg);
2369
+ color: var(--qt-chat-system-bar-fg);
2370
+ border: 1px solid var(--qt-chat-system-bar-border);
2371
+ border-radius: var(--radius-sm, 0.25rem);
2372
+ font-size: 0.75rem;
2373
+ line-height: 1.2;
2374
+ text-align: left;
2375
+ cursor: pointer;
2376
+ transition: background-color 120ms ease;
2377
+ }
2378
+ .qt-chat-announcement-chip:hover,
2379
+ .qt-chat-announcement-chip:focus-visible {
2380
+ background: var(--qt-chat-system-bar-hover-bg);
2381
+ outline: none;
2382
+ }
2383
+ .qt-chat-announcement-chip:focus-visible {
2384
+ outline: 2px solid var(--color-ring);
2385
+ outline-offset: 2px;
2386
+ }
2387
+ .qt-chat-announcement-chip .qt-chat-system-bar-kind {
2388
+ flex: 0 1 auto;
2389
+ max-width: 22ch;
2390
+ }
2391
+ .qt-chat-announcement-chip .qt-chat-system-bar-whisper {
2392
+ max-width: 18ch;
2393
+ }
2394
+ .qt-chat-announcement-chip-whisper {
2395
+ border-color: var(--qt-chat-whisper-label-fg);
2396
+ }
2397
+ .qt-chat-announcement-dot {
2398
+ flex-shrink: 0;
2399
+ width: 0.5rem;
2400
+ height: 0.5rem;
2401
+ border-radius: 9999px;
2402
+ border: 1px solid transparent;
2403
+ }
2404
+ .qt-chat-announcement-dot-high {
2405
+ background: var(--qt-chat-announcement-dot-high);
2406
+ }
2407
+ .qt-chat-announcement-dot-medium {
2408
+ background: var(--qt-chat-announcement-dot-medium);
2409
+ }
2410
+ .qt-chat-announcement-dot-low {
2411
+ background: transparent;
2412
+ border-color: var(--qt-chat-announcement-dot-low);
2413
+ }
2414
+ .qt-chat-announcement-dot-outcome-success {
2415
+ background: var(--qt-alert-success-fg);
2416
+ }
2417
+ .qt-chat-announcement-dot-outcome-partial {
2418
+ background: var(--qt-alert-warning-fg);
2419
+ }
2420
+ .qt-chat-announcement-dot-outcome-failure {
2421
+ background: var(--qt-alert-error-fg);
2422
+ }
2423
+ .qt-chat-announcement-dot-outcome-info {
2424
+ background: var(--qt-alert-info-fg);
2425
+ }
2426
+ .qt-chat-system-bar.qt-pascal-result,
2427
+ .qt-chat-announcement-chip.qt-pascal-result {
2428
+ border-left-width: 3px;
2429
+ border-left-color: var(--qt-alert-info-border);
2430
+ padding-left: 0.75rem;
2431
+ }
2432
+ .qt-chat-system-bar.qt-pascal-result--success,
2433
+ .qt-chat-announcement-chip.qt-pascal-result--success {
2434
+ border-left-color: var(--qt-alert-success-border);
2435
+ }
2436
+ .qt-chat-system-bar.qt-pascal-result--partial,
2437
+ .qt-chat-announcement-chip.qt-pascal-result--partial {
2438
+ border-left-color: var(--qt-alert-warning-border);
2439
+ }
2440
+ .qt-chat-system-bar.qt-pascal-result--failure,
2441
+ .qt-chat-announcement-chip.qt-pascal-result--failure {
2442
+ border-left-color: var(--qt-alert-error-border);
2443
+ }
2444
+ .qt-chat-system-bar.qt-pascal-result--info,
2445
+ .qt-chat-announcement-chip.qt-pascal-result--info {
2446
+ border-left-color: var(--qt-alert-info-border);
2447
+ }
2448
+ .qt-chat-composer-established-fact .qt-chat-composer-input {
2449
+ border-color: var(--color-ring);
2450
+ box-shadow: inset 0 0 0 1px var(--color-ring);
2451
+ background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
2452
+ }
2453
+ .qt-chat-message-established-fact {
2454
+ font-size: 0.75rem;
2455
+ font-weight: 600;
2456
+ font-variant-caps: all-small-caps;
2457
+ letter-spacing: 0.04em;
2458
+ color: inherit;
2459
+ margin-bottom: 0.25rem;
2460
+ }
2461
+ .qt-chat-system-bar.qt-chat-established-fact,
2462
+ .qt-chat-announcement-chip.qt-chat-established-fact {
2463
+ border-left-width: 3px;
2464
+ border-left-color: var(--color-ring);
2465
+ padding-left: 0.75rem;
2466
+ }
2467
+ .qt-chat-established-fact-row {
2468
+ width: 100%;
2469
+ max-width: none;
2470
+ }
2471
+ .qt-chat-established-fact-band {
2472
+ width: 100%;
2473
+ background: var(--qt-alert-info-bg);
2474
+ border: 1px solid var(--qt-alert-info-border);
2475
+ border-left: 3px solid var(--color-ring);
2476
+ box-shadow: none;
2477
+ }
2478
+ .qt-chat-established-fact-toggle {
2479
+ display: inline-flex;
2480
+ align-items: center;
2481
+ justify-content: center;
2482
+ width: 1.625rem;
2483
+ height: 1.625rem;
2484
+ padding: 0;
2485
+ border: 1px solid var(--color-border);
2486
+ border-radius: var(--radius-sm);
2487
+ background-color: color-mix(in srgb, var(--color-background) 82%, transparent);
2488
+ color: var(--color-foreground);
2489
+ cursor: pointer;
2490
+ opacity: 0.85;
2491
+ transition:
2492
+ opacity 150ms ease,
2493
+ border-color 150ms ease,
2494
+ box-shadow 150ms ease;
2495
+ }
2496
+ .qt-chat-established-fact-toggle:hover,
2497
+ .qt-chat-established-fact-toggle:focus-visible {
2498
+ opacity: 1;
2499
+ }
2500
+ .qt-chat-established-fact-toggle:focus-visible {
2501
+ outline: 2px solid var(--color-ring);
2502
+ outline-offset: 1px;
2503
+ }
2504
+ .qt-chat-established-fact-toggle[aria-pressed=true] {
2505
+ opacity: 1;
2506
+ border-color: var(--color-ring);
2507
+ box-shadow: inset 0 0 0 1px var(--color-ring);
2508
+ background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
2509
+ }
2510
+ .qt-chat-established-fact-toggle:disabled {
2511
+ cursor: not-allowed;
2512
+ opacity: 0.5;
2513
+ }
2514
+ .qt-chat-message-silent {
2515
+ background: var(--qt-chat-silent-bg);
2516
+ color: var(--qt-chat-silent-fg);
2517
+ border: 2px dotted var(--qt-chat-silent-border);
2518
+ font-style: italic;
2519
+ }
2520
+ .qt-chat-silent-label {
2521
+ font-size: 0.75rem;
2522
+ color: var(--qt-chat-silent-label-fg);
2523
+ font-style: italic;
2524
+ margin-bottom: 0.25rem;
2525
+ }
2526
+ .qt-chat-message-regenerating {
2527
+ border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 45%, transparent);
2528
+ }
2529
+ .qt-chat-regenerating {
2530
+ position: relative;
2531
+ }
2532
+ .qt-chat-regenerating-original {
2533
+ opacity: 0.3;
2534
+ filter: grayscale(0.8);
2535
+ pointer-events: none;
2536
+ -webkit-user-select: none;
2537
+ -moz-user-select: none;
2538
+ user-select: none;
2539
+ }
2540
+ .qt-chat-regenerating-plate {
2541
+ position: absolute;
2542
+ inset: 0;
2543
+ display: flex;
2544
+ align-items: center;
2545
+ justify-content: center;
2546
+ gap: 0.5rem;
2547
+ color: var(--qt-response-status-streaming-fg);
2548
+ }
2549
+ .qt-chat-regenerating-plate-text {
2550
+ color: var(--qt-chat-regenerating-plate-fg, var(--qt-chat-assistant-fg, var(--color-foreground)));
2551
+ font-size: 0.875rem;
2552
+ line-height: 1.25rem;
2553
+ font-weight: 500;
2554
+ padding: 0.375rem 0.75rem;
2555
+ border-radius: 0.375rem;
2556
+ background: color-mix(in srgb, var(--qt-chat-assistant-bg) 88%, transparent);
2557
+ border: 1px solid color-mix(in srgb, var(--qt-response-status-streaming-fg) 35%, transparent);
2558
+ letter-spacing: 0.02em;
2559
+ }
2560
+ .qt-chat-message-action-bar {
2561
+ display: flex;
2562
+ align-items: center;
2563
+ gap: 0.75rem;
2564
+ margin-top: 0.5rem;
2565
+ padding-top: 0.5rem;
2566
+ border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
2567
+ }
2568
+ .qt-chat-message-action-bar-icons {
2569
+ display: flex;
2570
+ align-items: center;
2571
+ gap: 0.25rem;
2572
+ }
2573
+ .qt-chat-message-action-bar-disabled {
2574
+ pointer-events: none;
2575
+ opacity: 0.4;
2576
+ }
2577
+ .qt-chat-message-action-icon {
2578
+ padding: 0.375rem;
2579
+ border-radius: 0.25rem;
2580
+ transition-property:
2581
+ color,
2582
+ background-color,
2583
+ border-color,
2584
+ text-decoration-color,
2585
+ fill,
2586
+ stroke;
2587
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2588
+ transition-duration: 150ms;
2589
+ color: var(--color-muted-foreground);
2590
+ cursor: pointer;
2591
+ }
2592
+ .qt-chat-message-action-icon:hover {
2593
+ color: var(--color-foreground);
2594
+ background: color-mix(in srgb, var(--color-muted) 50%, transparent);
2595
+ }
2596
+ .qt-chat-message-action-icon-danger:hover {
2597
+ color: var(--qt-status-danger-fg);
2598
+ background: color-mix(in srgb, var(--qt-status-danger-bg) 50%, transparent);
2599
+ }
2600
+ .qt-chat-message-action-icon svg,
2601
+ .qt-chat-message-action-icon .qt-icon {
2602
+ width: 1rem;
2603
+ height: 1rem;
2604
+ }
2605
+ .qt-chat-message-user .qt-chat-message-action-bar {
2606
+ border-top-color: color-mix(in srgb, var(--qt-chat-user-fg) 30%, transparent);
2607
+ }
2608
+ .qt-chat-message-user .qt-chat-message-action-icon {
2609
+ color: color-mix(in srgb, var(--qt-chat-user-fg) 70%, transparent);
2610
+ }
2611
+ .qt-chat-message-user .qt-chat-message-action-icon:hover {
2612
+ color: var(--qt-chat-user-fg);
2613
+ background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
2614
+ }
2615
+ .qt-chat-message-user .qt-chat-message-action-icon-danger:hover {
2616
+ color: hsl(0 100% 85%);
2617
+ background: color-mix(in srgb, hsl(0 70% 50%) 25%, transparent);
2618
+ }
2619
+ .qt-chat-message-action-timestamp {
1783
2620
  font-size: 0.75rem;
1784
2621
  line-height: 1rem;
1785
2622
  color: var(--color-muted-foreground);
@@ -1807,391 +2644,816 @@ body {
1807
2644
  width: 1rem;
1808
2645
  height: 1rem;
1809
2646
  }
1810
- .qt-chat-response-status-text {
1811
- font-weight: 500;
2647
+ .qt-chat-response-status-text {
2648
+ font-weight: 500;
2649
+ }
2650
+ .qt-chat-response-status[data-stage=compressing] {
2651
+ color: var(--qt-response-status-compressing-fg);
2652
+ border-color: color-mix(in srgb, var(--qt-response-status-compressing-fg) 30%, transparent);
2653
+ }
2654
+ .qt-chat-response-status[data-stage=gathering] {
2655
+ color: var(--qt-response-status-gathering-fg);
2656
+ border-color: color-mix(in srgb, var(--qt-response-status-gathering-fg) 30%, transparent);
2657
+ }
2658
+ .qt-chat-response-status[data-stage=building] {
2659
+ color: var(--qt-response-status-building-fg);
2660
+ border-color: color-mix(in srgb, var(--qt-response-status-building-fg) 30%, transparent);
2661
+ }
2662
+ .qt-chat-response-status[data-stage=sending] {
2663
+ color: var(--qt-response-status-sending-fg);
2664
+ border-color: color-mix(in srgb, var(--qt-response-status-sending-fg) 30%, transparent);
2665
+ }
2666
+ .qt-chat-response-status[data-stage=streaming] {
2667
+ color: var(--qt-response-status-streaming-fg);
2668
+ border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 30%, transparent);
2669
+ }
2670
+ .qt-chat-response-status[data-stage=regenerating],
2671
+ .qt-chat-response-status[data-stage=saving] {
2672
+ color: var(--qt-response-status-streaming-fg);
2673
+ border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 30%, transparent);
2674
+ }
2675
+ .qt-chat-response-status[data-stage=tool_executing] {
2676
+ color: var(--qt-response-status-tool-fg);
2677
+ border-color: color-mix(in srgb, var(--qt-response-status-tool-fg) 30%, transparent);
2678
+ }
2679
+ @keyframes qt-status-fade-in {
2680
+ from {
2681
+ opacity: 0;
2682
+ transform: translateY(-4px);
2683
+ }
2684
+ to {
2685
+ opacity: 1;
2686
+ transform: translateY(0);
2687
+ }
2688
+ }
2689
+ @media (prefers-reduced-motion: reduce) {
2690
+ .qt-chat-response-status {
2691
+ animation: none;
2692
+ }
2693
+ .qt-chat-response-status-icon .animate-pulse {
2694
+ animation: none;
2695
+ }
2696
+ }
2697
+ .qt-chat-wardrobe-notice {
2698
+ background: var(--qt-chat-wardrobe-bg);
2699
+ color: var(--qt-chat-wardrobe-fg);
2700
+ border: 3px double var(--qt-chat-wardrobe-border);
2701
+ border-radius: var(--radius-md, 0.375rem);
2702
+ padding: 0.5rem 0.75rem;
2703
+ margin-bottom: 0.5rem;
2704
+ font-size: 0.8125rem;
2705
+ line-height: 1.4;
2706
+ }
2707
+ .qt-chat-wardrobe-label {
2708
+ font-size: 0.6875rem;
2709
+ color: var(--qt-chat-wardrobe-label-fg);
2710
+ font-weight: 600;
2711
+ text-transform: uppercase;
2712
+ letter-spacing: 0.05em;
2713
+ margin-bottom: 0.25rem;
2714
+ }
2715
+ .qt-chat-wardrobe-summary {
2716
+ color: var(--qt-chat-wardrobe-fg);
2717
+ }
2718
+ .qt-badge-silent {
2719
+ background: var(--qt-chat-silent-bg);
2720
+ color: var(--qt-chat-silent-label-fg);
2721
+ border: 1px solid var(--qt-chat-silent-border);
2722
+ border-radius: 9999px;
2723
+ padding: 0.125rem 0.5rem;
2724
+ font-weight: 600;
2725
+ font-size: 0.75rem;
2726
+ }
2727
+ .qt-badge-absent {
2728
+ background: color-mix(in srgb, var(--color-muted) 40%, transparent);
2729
+ color: var(--color-muted-foreground);
2730
+ border: 1px solid var(--color-muted);
2731
+ border-radius: 9999px;
2732
+ padding: 0.125rem 0.5rem;
2733
+ font-weight: 600;
2734
+ font-size: 0.75rem;
2735
+ opacity: 0.8;
2736
+ }
2737
+ .qt-participant-status-overlay {
2738
+ position: absolute;
2739
+ bottom: -0.125rem;
2740
+ right: -0.125rem;
2741
+ width: 1.125rem;
2742
+ height: 1.125rem;
2743
+ border-radius: 9999px;
2744
+ display: flex;
2745
+ align-items: center;
2746
+ justify-content: center;
2747
+ border: 1.5px solid var(--color-background);
2748
+ z-index: 2;
2749
+ }
2750
+ .qt-participant-status-overlay-silent {
2751
+ background: var(--qt-chat-silent-border);
2752
+ color: white;
2753
+ }
2754
+ .qt-participant-status-overlay-absent {
2755
+ background: var(--color-muted);
2756
+ color: var(--color-muted-foreground);
2757
+ }
2758
+ .qt-participant-card-silent {
2759
+ border-color: var(--qt-chat-silent-border);
2760
+ }
2761
+ .qt-chat-composer {
2762
+ display: flex;
2763
+ align-items: flex-end;
2764
+ gap: 0.5rem;
2765
+ padding: 1rem;
2766
+ background-color: var(--color-background);
2767
+ border: 1px solid var(--color-border);
2768
+ border-radius: var(--radius-lg);
2769
+ }
2770
+ .qt-chat-composer-input {
2771
+ flex: 1;
2772
+ min-height: 2.5rem;
2773
+ padding: 0.5rem 0.75rem;
2774
+ background-color: transparent;
2775
+ border: none;
2776
+ resize: none;
2777
+ font-family: inherit;
2778
+ font-size: 0.875rem;
2779
+ line-height: 1.5;
2780
+ color: var(--color-foreground);
2781
+ }
2782
+ .qt-chat-composer-input:focus,
2783
+ .qt-chat-composer-input:focus-within {
2784
+ outline: none;
2785
+ }
2786
+ .qt-chat-composer-actions {
2787
+ display: flex;
2788
+ flex-direction: column;
2789
+ align-items: center;
2790
+ gap: 0.375rem;
2791
+ flex-shrink: 0;
2792
+ }
2793
+ .qt-chat-composer-actions .qt-chat-composer-send {
2794
+ height: 2.5rem;
2795
+ width: 2.5rem;
2796
+ }
2797
+ .qt-chat-composer-send {
2798
+ display: inline-flex;
2799
+ align-items: center;
2800
+ justify-content: center;
2801
+ height: 3rem;
2802
+ width: 3rem;
2803
+ border-radius: 9999px;
2804
+ transition: all 200ms;
2805
+ cursor: pointer;
2806
+ background: var(--qt-button-primary-bg);
2807
+ color: var(--qt-button-primary-fg);
2808
+ box-shadow: var(--qt-button-primary-shadow);
2809
+ }
2810
+ .qt-chat-composer-send:focus-visible {
2811
+ outline: none;
2812
+ box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-ring);
2813
+ }
2814
+ .qt-chat-composer-send:disabled {
2815
+ opacity: 0.5;
2816
+ cursor: not-allowed;
2817
+ }
2818
+ .qt-chat-composer-send:hover:not(:disabled) {
2819
+ background: var(--qt-button-primary-hover-bg);
2820
+ }
2821
+ .qt-chat-continue-button {
2822
+ background: var(--qt-status-info-bg);
2823
+ color: var(--qt-status-info-fg);
2824
+ border: 1px solid var(--qt-status-info-border);
2825
+ }
2826
+ .qt-chat-stop-button {
2827
+ background: var(--qt-status-danger-bg);
2828
+ color: var(--qt-status-danger-fg);
2829
+ border: 1px solid var(--qt-status-danger-border);
2830
+ }
2831
+ .qt-chat-stop-button:hover:not(:disabled) {
2832
+ background: color-mix(in srgb, var(--qt-status-danger-bg) 70%, black);
2833
+ }
2834
+ .qt-chat-interrupt-button {
2835
+ background: var(--qt-status-warning-bg);
2836
+ color: var(--qt-status-warning-fg);
2837
+ border: 1px solid var(--qt-status-warning-border);
2838
+ }
2839
+ .qt-chat-interrupt-button:hover:not(:disabled) {
2840
+ background: color-mix(in srgb, var(--qt-status-warning-bg) 70%, black);
2841
+ }
2842
+ .qt-chat-interrupt-button-raised {
2843
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent);
2844
+ animation: qt-hand-raised-pulse 1.6s ease-in-out infinite;
2845
+ }
2846
+ @keyframes qt-hand-raised-pulse {
2847
+ 0%, 100% {
2848
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent);
2849
+ }
2850
+ 50% {
2851
+ box-shadow: 0 0 0 6px color-mix(in srgb, var(--qt-status-warning-border) 15%, transparent);
2852
+ }
2853
+ }
2854
+ @media (prefers-reduced-motion: reduce) {
2855
+ .qt-chat-interrupt-button-raised {
2856
+ animation: none;
2857
+ }
2858
+ }
2859
+ ::highlight(qt-punctuation-warning) {
2860
+ background-color: var(--qt-punctuation-warning-bg);
2861
+ -webkit-text-decoration: underline wavy var(--qt-punctuation-warning-underline);
2862
+ text-decoration: underline wavy var(--qt-punctuation-warning-underline);
2863
+ text-decoration-thickness: 2px;
2864
+ }
2865
+ ::highlight(qt-punctuation-no-dialogue) {
2866
+ background-color: var(--qt-punctuation-no-dialogue-bg);
2867
+ -webkit-text-decoration: underline dotted var(--qt-punctuation-no-dialogue-underline);
2868
+ text-decoration: underline dotted var(--qt-punctuation-no-dialogue-underline);
2869
+ text-decoration-thickness: 2px;
2870
+ }
2871
+ ::highlight(qt-composer-narration) {
2872
+ color: var(--qt-composer-narration-fg);
2873
+ background-color: var(--qt-composer-narration-bg);
2874
+ }
2875
+ ::highlight(qt-composer-ooc) {
2876
+ color: var(--qt-composer-ooc-fg);
2877
+ background-color: var(--qt-composer-ooc-bg);
2878
+ }
2879
+ .qt-lexical-contenteditable {
2880
+ overflow-y: auto;
2881
+ position: relative;
2882
+ }
2883
+ .qt-lexical-contenteditable [contenteditable] {
2884
+ outline: none;
2885
+ min-height: 1.5em;
1812
2886
  }
1813
- .qt-chat-response-status[data-stage=compressing] {
1814
- color: var(--qt-response-status-compressing-fg);
1815
- border-color: color-mix(in srgb, var(--qt-response-status-compressing-fg) 30%, transparent);
2887
+ .qt-lexical-placeholder {
2888
+ color: var(--color-muted-foreground);
2889
+ font-size: 0.875rem;
2890
+ pointer-events: none;
2891
+ position: absolute;
2892
+ top: 0;
2893
+ left: 0;
2894
+ padding: var(--qt-input-padding-y, 0.5rem) var(--qt-input-padding-x, 0.75rem);
2895
+ overflow: hidden;
2896
+ text-overflow: ellipsis;
2897
+ white-space: nowrap;
1816
2898
  }
1817
- .qt-chat-response-status[data-stage=gathering] {
1818
- color: var(--qt-response-status-gathering-fg);
1819
- border-color: color-mix(in srgb, var(--qt-response-status-gathering-fg) 30%, transparent);
2899
+ .qt-lexical-root {
2900
+ outline: none;
2901
+ min-height: 1.5em;
1820
2902
  }
1821
- .qt-chat-response-status[data-stage=building] {
1822
- color: var(--qt-response-status-building-fg);
1823
- border-color: color-mix(in srgb, var(--qt-response-status-building-fg) 30%, transparent);
2903
+ .qt-lexical-paragraph {
2904
+ margin: 0;
1824
2905
  }
1825
- .qt-chat-response-status[data-stage=sending] {
1826
- color: var(--qt-response-status-sending-fg);
1827
- border-color: color-mix(in srgb, var(--qt-response-status-sending-fg) 30%, transparent);
2906
+ .qt-lexical-bold {
2907
+ font-weight: 700;
1828
2908
  }
1829
- .qt-chat-response-status[data-stage=streaming] {
1830
- color: var(--qt-response-status-streaming-fg);
1831
- border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 30%, transparent);
2909
+ .qt-lexical-italic {
2910
+ font-style: italic;
1832
2911
  }
1833
- .qt-chat-response-status[data-stage=regenerating],
1834
- .qt-chat-response-status[data-stage=saving] {
1835
- color: var(--qt-response-status-streaming-fg);
1836
- border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 30%, transparent);
2912
+ .qt-lexical-underline {
2913
+ text-decoration: underline;
1837
2914
  }
1838
- .qt-chat-response-status[data-stage=tool_executing] {
1839
- color: var(--qt-response-status-tool-fg);
1840
- border-color: color-mix(in srgb, var(--qt-response-status-tool-fg) 30%, transparent);
2915
+ .qt-lexical-strikethrough {
2916
+ text-decoration: line-through;
1841
2917
  }
1842
- @keyframes qt-status-fade-in {
1843
- from {
1844
- opacity: 0;
1845
- transform: translateY(-4px);
1846
- }
1847
- to {
1848
- opacity: 1;
1849
- transform: translateY(0);
1850
- }
2918
+ .qt-lexical-code {
2919
+ font-family: monospace;
2920
+ font-size: 0.75rem;
2921
+ background: rgba(0, 0, 0, 0.1);
2922
+ padding: 0.1em 0.3em;
2923
+ border-radius: 0.2em;
1851
2924
  }
1852
- @media (prefers-reduced-motion: reduce) {
1853
- .qt-chat-response-status {
1854
- animation: none;
1855
- }
1856
- .qt-chat-response-status-icon .animate-pulse {
1857
- animation: none;
1858
- }
2925
+ .qt-lexical-h1 {
2926
+ font-size: 1.25rem;
2927
+ font-weight: bold;
2928
+ margin: 0.5em 0 0.25em;
1859
2929
  }
1860
- .qt-chat-wardrobe-notice {
1861
- background: var(--qt-chat-wardrobe-bg);
1862
- color: var(--qt-chat-wardrobe-fg);
1863
- border: 3px double var(--qt-chat-wardrobe-border);
1864
- border-radius: var(--radius-md, 0.375rem);
1865
- padding: 0.5rem 0.75rem;
1866
- margin-bottom: 0.5rem;
1867
- font-size: 0.8125rem;
1868
- line-height: 1.4;
2930
+ .qt-lexical-h2 {
2931
+ font-size: 1.125rem;
2932
+ font-weight: bold;
2933
+ margin: 0.4em 0 0.2em;
1869
2934
  }
1870
- .qt-chat-wardrobe-label {
1871
- font-size: 0.6875rem;
1872
- color: var(--qt-chat-wardrobe-label-fg);
2935
+ .qt-lexical-h3 {
2936
+ font-size: 1rem;
1873
2937
  font-weight: 600;
1874
- text-transform: uppercase;
1875
- letter-spacing: 0.05em;
1876
- margin-bottom: 0.25rem;
1877
- }
1878
- .qt-chat-wardrobe-summary {
1879
- color: var(--qt-chat-wardrobe-fg);
2938
+ margin: 0.3em 0 0.15em;
1880
2939
  }
1881
- .qt-badge-silent {
1882
- background: var(--qt-chat-silent-bg);
1883
- color: var(--qt-chat-silent-label-fg);
1884
- border: 1px solid var(--qt-chat-silent-border);
1885
- border-radius: 9999px;
1886
- padding: 0.125rem 0.5rem;
2940
+ .qt-lexical-h4 {
2941
+ font-size: 0.875rem;
1887
2942
  font-weight: 600;
1888
- font-size: 0.75rem;
2943
+ margin: 0.25em 0 0.1em;
1889
2944
  }
1890
- .qt-badge-absent {
1891
- background: color-mix(in srgb, var(--color-muted) 40%, transparent);
1892
- color: var(--color-muted-foreground);
1893
- border: 1px solid var(--color-muted);
1894
- border-radius: 9999px;
1895
- padding: 0.125rem 0.5rem;
2945
+ .qt-lexical-h5 {
2946
+ font-size: 0.75rem;
1896
2947
  font-weight: 600;
2948
+ margin: 0.2em 0 0.1em;
2949
+ }
2950
+ .qt-lexical-h6 {
1897
2951
  font-size: 0.75rem;
1898
- opacity: 0.8;
2952
+ font-weight: 500;
2953
+ margin: 0.2em 0 0.1em;
1899
2954
  }
1900
- .qt-participant-status-overlay {
2955
+ .qt-lexical-ul {
2956
+ list-style-type: disc;
2957
+ padding-left: 1.5rem;
2958
+ margin: 0.25em 0;
2959
+ }
2960
+ .qt-lexical-ol {
2961
+ list-style-type: decimal;
2962
+ padding-left: 1.5rem;
2963
+ margin: 0.25em 0;
2964
+ }
2965
+ .qt-lexical-li {
2966
+ margin: 0.1em 0;
2967
+ }
2968
+ .qt-lexical-li-nested {
2969
+ list-style-type: none;
2970
+ margin: 0;
2971
+ }
2972
+ .qt-lexical-li-nested::before,
2973
+ .qt-lexical-li-nested::after {
2974
+ display: none;
2975
+ }
2976
+ .qt-lexical-checklist {
2977
+ list-style: none;
2978
+ padding-left: 0;
2979
+ }
2980
+ .qt-lexical-li-checked,
2981
+ .qt-lexical-li-unchecked {
2982
+ position: relative;
2983
+ padding-left: 1.5rem;
2984
+ list-style: none;
2985
+ margin: 0.15em 0;
2986
+ }
2987
+ .qt-lexical-li-checked::before,
2988
+ .qt-lexical-li-unchecked::before {
2989
+ content: "";
1901
2990
  position: absolute;
1902
- bottom: -0.125rem;
1903
- right: -0.125rem;
1904
- width: 1.125rem;
1905
- height: 1.125rem;
1906
- border-radius: 9999px;
1907
- display: flex;
1908
- align-items: center;
1909
- justify-content: center;
1910
- border: 1.5px solid var(--color-background);
1911
- z-index: 2;
2991
+ left: 0;
2992
+ top: 0.25rem;
2993
+ width: 1rem;
2994
+ height: 1rem;
2995
+ border-radius: 0.25rem;
2996
+ border: 1px solid var(--qt-border-color, var(--color-border));
2997
+ cursor: pointer;
1912
2998
  }
1913
- .qt-participant-status-overlay-silent {
1914
- background: var(--qt-chat-silent-border);
1915
- color: white;
2999
+ .qt-lexical-li-checked::before {
3000
+ background: var(--color-primary);
3001
+ border-color: var(--color-primary);
3002
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
3003
+ background-size: 12px 12px;
3004
+ background-position: center;
3005
+ background-repeat: no-repeat;
1916
3006
  }
1917
- .qt-participant-status-overlay-absent {
1918
- background: var(--color-muted);
1919
- color: var(--color-muted-foreground);
3007
+ .qt-lexical-li-checked {
3008
+ opacity: 0.6;
3009
+ text-decoration: line-through;
1920
3010
  }
1921
- .qt-participant-card-silent {
1922
- border-color: var(--qt-chat-silent-border);
3011
+ .qt-lexical-blockquote {
3012
+ border-left: 4px solid rgba(0, 0, 0, 0.2);
3013
+ padding-left: 0.75rem;
3014
+ font-style: italic;
3015
+ margin: 0.25em 0;
1923
3016
  }
1924
- .qt-chat-composer {
3017
+ .qt-lexical-link {
3018
+ text-decoration: underline;
3019
+ color: var(--color-primary);
3020
+ }
3021
+ .qt-lexical-code-block {
3022
+ font-family: monospace;
3023
+ font-size: 0.75rem;
3024
+ background: rgba(0, 0, 0, 0.15);
3025
+ padding: 0.5em 0.75em;
3026
+ border-radius: 0.3em;
3027
+ margin: 0.25em 0;
3028
+ overflow-x: auto;
3029
+ -moz-tab-size: 2;
3030
+ -o-tab-size: 2;
3031
+ tab-size: 2;
3032
+ }
3033
+ .qt-chat-message-content a,
3034
+ .qt-chat-message-content a.qt-link {
3035
+ color: var(--qt-link-color, var(--color-primary));
3036
+ text-decoration: underline;
3037
+ text-underline-offset: 2px;
3038
+ }
3039
+ .qt-chat-message-content a:hover,
3040
+ .qt-chat-message-content a.qt-link:hover {
3041
+ color: var(--qt-link-hover-color, var(--color-primary));
3042
+ text-decoration: underline;
3043
+ }
3044
+ .qt-doc-split-layout {
1925
3045
  display: flex;
1926
- align-items: flex-end;
1927
- gap: 0.5rem;
1928
- padding: 1rem;
1929
- background-color: var(--color-background);
1930
- border: 1px solid var(--color-border);
1931
- border-radius: var(--radius-lg);
3046
+ flex-direction: row;
3047
+ height: 100%;
3048
+ overflow: hidden;
1932
3049
  }
1933
- .qt-chat-composer-input {
1934
- flex: 1;
1935
- min-height: 2.5rem;
1936
- padding: 0.5rem 0.75rem;
1937
- background-color: transparent;
1938
- border: none;
1939
- resize: none;
1940
- font-family: inherit;
1941
- font-size: 0.875rem;
1942
- line-height: 1.5;
1943
- color: var(--color-foreground);
3050
+ .qt-doc-chat-pane {
3051
+ display: flex;
3052
+ flex-direction: column;
3053
+ height: 100%;
3054
+ overflow: hidden;
3055
+ min-width: 320px;
3056
+ }
3057
+ .qt-doc-divider {
3058
+ flex-shrink: 0;
3059
+ height: 100%;
3060
+ display: flex;
3061
+ align-items: center;
3062
+ justify-content: center;
3063
+ width: 6px;
3064
+ cursor: col-resize;
3065
+ background: var(--color-border);
3066
+ transition: background 0.15s ease;
3067
+ -webkit-user-select: none;
3068
+ -moz-user-select: none;
3069
+ user-select: none;
3070
+ touch-action: none;
1944
3071
  }
1945
- .qt-chat-composer-input:focus,
1946
- .qt-chat-composer-input:focus-within {
1947
- outline: none;
3072
+ .qt-doc-divider:hover,
3073
+ .qt-doc-divider.qt-doc-divider-active {
3074
+ background: var(--color-primary);
1948
3075
  }
1949
- .qt-chat-composer-actions {
3076
+ .qt-doc-divider-grip {
1950
3077
  display: flex;
1951
3078
  flex-direction: column;
1952
- align-items: center;
1953
- gap: 0.375rem;
1954
- flex-shrink: 0;
3079
+ gap: 0.25rem;
1955
3080
  }
1956
- .qt-chat-composer-actions .qt-chat-composer-send {
1957
- height: 2.5rem;
1958
- width: 2.5rem;
3081
+ .qt-doc-divider-grip span {
3082
+ display: block;
3083
+ width: 3px;
3084
+ height: 3px;
3085
+ border-radius: 50%;
3086
+ background: var(--color-muted-foreground);
1959
3087
  }
1960
- .qt-chat-composer-send {
1961
- display: inline-flex;
1962
- align-items: center;
1963
- justify-content: center;
1964
- height: 3rem;
1965
- width: 3rem;
1966
- border-radius: 9999px;
1967
- transition: all 200ms;
1968
- cursor: pointer;
1969
- background: var(--qt-button-primary-bg);
1970
- color: var(--qt-button-primary-fg);
1971
- box-shadow: var(--qt-button-primary-shadow);
3088
+ .qt-doc-divider:hover .qt-doc-divider-grip span,
3089
+ .qt-doc-divider.qt-doc-divider-active .qt-doc-divider-grip span {
3090
+ background: var(--qt-primary-fg, var(--color-primary-foreground));
1972
3091
  }
1973
- .qt-chat-composer-send:focus-visible {
1974
- outline: none;
1975
- box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-ring);
3092
+ .qt-doc-pane {
3093
+ display: flex;
3094
+ flex-direction: column;
3095
+ height: 100%;
3096
+ overflow: hidden;
3097
+ min-width: 360px;
3098
+ background: color-mix(in srgb, var(--qt-content-bg) 92%, transparent);
3099
+ border-left: 1px solid var(--color-border);
1976
3100
  }
1977
- .qt-chat-composer-send:disabled {
1978
- opacity: 0.5;
1979
- cursor: not-allowed;
3101
+ .qt-doc-vertical-split-layout {
3102
+ display: flex;
3103
+ flex-direction: column;
3104
+ height: 100%;
3105
+ width: 100%;
3106
+ overflow: hidden;
1980
3107
  }
1981
- .qt-chat-composer-send:hover:not(:disabled) {
1982
- background: var(--qt-button-primary-hover-bg);
3108
+ .qt-doc-vertical-pane {
3109
+ display: flex;
3110
+ flex-direction: column;
3111
+ width: 100%;
3112
+ overflow: hidden;
3113
+ min-height: 200px;
1983
3114
  }
1984
- .qt-chat-continue-button {
1985
- background: var(--qt-status-info-bg);
1986
- color: var(--qt-status-info-fg);
1987
- border: 1px solid var(--qt-status-info-border);
3115
+ .qt-doc-vertical-divider {
3116
+ flex-shrink: 0;
3117
+ width: 100%;
3118
+ display: flex;
3119
+ align-items: center;
3120
+ justify-content: center;
3121
+ height: 6px;
3122
+ cursor: row-resize;
3123
+ background: var(--color-border);
3124
+ transition: background 0.15s ease;
3125
+ -webkit-user-select: none;
3126
+ -moz-user-select: none;
3127
+ user-select: none;
3128
+ touch-action: none;
1988
3129
  }
1989
- .qt-chat-stop-button {
1990
- background: var(--qt-status-danger-bg);
1991
- color: var(--qt-status-danger-fg);
1992
- border: 1px solid var(--qt-status-danger-border);
3130
+ .qt-doc-vertical-divider:hover,
3131
+ .qt-doc-vertical-divider.qt-doc-vertical-divider-active {
3132
+ background: var(--color-primary);
1993
3133
  }
1994
- .qt-chat-stop-button:hover:not(:disabled) {
1995
- background: color-mix(in srgb, var(--qt-status-danger-bg) 70%, black);
3134
+ .qt-doc-vertical-divider-grip {
3135
+ display: flex;
3136
+ flex-direction: row;
3137
+ gap: 0.25rem;
1996
3138
  }
1997
- .qt-chat-interrupt-button {
1998
- background: var(--qt-status-warning-bg);
1999
- color: var(--qt-status-warning-fg);
2000
- border: 1px solid var(--qt-status-warning-border);
3139
+ .qt-doc-vertical-divider-grip span {
3140
+ display: block;
3141
+ width: 3px;
3142
+ height: 3px;
3143
+ border-radius: 50%;
3144
+ background: var(--color-muted-foreground);
2001
3145
  }
2002
- .qt-chat-interrupt-button:hover:not(:disabled) {
2003
- background: color-mix(in srgb, var(--qt-status-warning-bg) 70%, black);
3146
+ .qt-doc-vertical-divider:hover .qt-doc-vertical-divider-grip span,
3147
+ .qt-doc-vertical-divider.qt-doc-vertical-divider-active .qt-doc-vertical-divider-grip span {
3148
+ background: var(--qt-primary-fg, var(--color-primary-foreground));
2004
3149
  }
2005
- .qt-chat-interrupt-button-raised {
2006
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent);
2007
- animation: qt-hand-raised-pulse 1.6s ease-in-out infinite;
3150
+ .qt-doc-focus-mode .qt-doc-editor-area {
3151
+ max-width: 640px;
3152
+ margin-left: auto;
3153
+ margin-right: auto;
2008
3154
  }
2009
- @keyframes qt-hand-raised-pulse {
2010
- 0%, 100% {
2011
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent);
2012
- }
2013
- 50% {
2014
- box-shadow: 0 0 0 6px color-mix(in srgb, var(--qt-status-warning-border) 15%, transparent);
2015
- }
3155
+ .qt-doc-header {
3156
+ display: flex;
3157
+ align-items: center;
3158
+ gap: 0.5rem;
3159
+ padding-left: 1rem;
3160
+ padding-right: 1rem;
3161
+ padding-top: 0.5rem;
3162
+ padding-bottom: 0.5rem;
3163
+ flex-shrink: 0;
3164
+ border-bottom: 1px solid var(--color-border);
3165
+ background: color-mix(in srgb, var(--qt-content-bg) 95%, transparent);
2016
3166
  }
2017
- @media (prefers-reduced-motion: reduce) {
2018
- .qt-chat-interrupt-button-raised {
2019
- animation: none;
2020
- }
3167
+ .qt-doc-badge {
3168
+ display: inline-flex;
3169
+ align-items: center;
3170
+ padding-left: 0.5rem;
3171
+ padding-right: 0.5rem;
3172
+ padding-top: 0.125rem;
3173
+ padding-bottom: 0.125rem;
3174
+ border-radius: 9999px;
3175
+ font-size: 0.75rem;
3176
+ line-height: 1rem;
3177
+ font-weight: 500;
3178
+ background: var(--qt-success-bg, color-mix(in srgb, #22c55e 15%, var(--qt-content-bg)));
3179
+ color: var(--qt-success-fg, #22c55e);
2021
3180
  }
2022
- ::highlight(qt-punctuation-warning) {
2023
- background-color: var(--qt-punctuation-warning-bg);
2024
- -webkit-text-decoration: underline wavy var(--qt-punctuation-warning-underline);
2025
- text-decoration: underline wavy var(--qt-punctuation-warning-underline);
2026
- text-decoration-thickness: 2px;
3181
+ .qt-doc-title {
3182
+ flex: 1 1 0%;
3183
+ font-size: 0.875rem;
3184
+ line-height: 1.25rem;
3185
+ font-weight: 500;
3186
+ overflow: hidden;
3187
+ text-overflow: ellipsis;
3188
+ white-space: nowrap;
3189
+ color: var(--color-foreground);
2027
3190
  }
2028
- ::highlight(qt-punctuation-no-dialogue) {
2029
- background-color: var(--qt-punctuation-no-dialogue-bg);
2030
- -webkit-text-decoration: underline dotted var(--qt-punctuation-no-dialogue-underline);
2031
- text-decoration: underline dotted var(--qt-punctuation-no-dialogue-underline);
2032
- text-decoration-thickness: 2px;
3191
+ .qt-doc-title-input {
3192
+ font-size: 0.875rem;
3193
+ line-height: 1.25rem;
3194
+ font-weight: 500;
3195
+ width: 100%;
3196
+ background-color: transparent;
3197
+ border-width: 0 0 1px;
3198
+ border-style: dashed;
3199
+ border-color: var(--color-border);
3200
+ color: var(--color-foreground);
3201
+ outline: none;
2033
3202
  }
2034
- ::highlight(qt-composer-narration) {
2035
- color: var(--qt-composer-narration-fg);
2036
- background-color: var(--qt-composer-narration-bg);
3203
+ .qt-doc-title-input:focus {
3204
+ border-color: var(--color-primary);
2037
3205
  }
2038
- ::highlight(qt-composer-ooc) {
2039
- color: var(--qt-composer-ooc-fg);
2040
- background-color: var(--qt-composer-ooc-bg);
3206
+ .qt-doc-header-button {
3207
+ padding: 0.375rem;
3208
+ border-radius: 0.25rem;
3209
+ transition-property:
3210
+ color,
3211
+ background-color,
3212
+ border-color,
3213
+ text-decoration-color,
3214
+ fill,
3215
+ stroke;
3216
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3217
+ transition-duration: 150ms;
3218
+ color: var(--color-muted-foreground);
2041
3219
  }
2042
- .qt-lexical-contenteditable {
2043
- overflow-y: auto;
2044
- position: relative;
3220
+ .qt-doc-header-button:hover {
3221
+ color: var(--color-foreground);
3222
+ background: var(--qt-hover-bg, color-mix(in srgb, var(--color-foreground) 10%, transparent));
2045
3223
  }
2046
- .qt-lexical-contenteditable [contenteditable] {
2047
- outline: none;
2048
- min-height: 1.5em;
3224
+ .qt-doc-uri-row {
3225
+ display: flex;
3226
+ align-items: center;
3227
+ gap: 0.5rem;
3228
+ padding-left: 1rem;
3229
+ padding-right: 1rem;
3230
+ padding-top: 0.25rem;
3231
+ padding-bottom: 0.25rem;
3232
+ flex-shrink: 0;
3233
+ border-bottom: 1px solid var(--color-border);
3234
+ background: color-mix(in srgb, var(--qt-content-bg) 95%, transparent);
2049
3235
  }
2050
- .qt-lexical-placeholder {
3236
+ .qt-doc-uri-label {
3237
+ font-size: 10px;
3238
+ font-weight: 600;
3239
+ text-transform: uppercase;
3240
+ letter-spacing: 0.025em;
2051
3241
  color: var(--color-muted-foreground);
2052
- font-size: 0.875rem;
2053
- pointer-events: none;
2054
- position: absolute;
2055
- top: 0;
2056
- left: 0;
2057
- padding: var(--qt-input-padding-y, 0.5rem) var(--qt-input-padding-x, 0.75rem);
3242
+ }
3243
+ .qt-doc-uri-value {
3244
+ min-width: 0;
3245
+ flex: 1 1 0%;
2058
3246
  overflow: hidden;
2059
3247
  text-overflow: ellipsis;
2060
3248
  white-space: nowrap;
3249
+ font-size: 0.75rem;
3250
+ line-height: 1rem;
3251
+ font-family: var(--font-mono);
3252
+ color: var(--color-muted-foreground);
2061
3253
  }
2062
- .qt-lexical-root {
2063
- outline: none;
2064
- min-height: 1.5em;
2065
- }
2066
- .qt-lexical-paragraph {
2067
- margin: 0;
2068
- }
2069
- .qt-lexical-bold {
2070
- font-weight: 700;
3254
+ .qt-doc-uri-copy-button {
3255
+ padding: 0.25rem;
3256
+ border-radius: 0.25rem;
3257
+ transition-property:
3258
+ color,
3259
+ background-color,
3260
+ border-color,
3261
+ text-decoration-color,
3262
+ fill,
3263
+ stroke;
3264
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3265
+ transition-duration: 150ms;
3266
+ color: var(--color-muted-foreground);
2071
3267
  }
2072
- .qt-lexical-italic {
2073
- font-style: italic;
3268
+ .qt-doc-uri-copy-button:hover {
3269
+ color: var(--color-foreground);
3270
+ background: var(--qt-hover-bg, color-mix(in srgb, var(--color-foreground) 10%, transparent));
2074
3271
  }
2075
- .qt-lexical-underline {
2076
- text-decoration: underline;
3272
+ .qt-doc-toolbar {
3273
+ display: flex;
3274
+ align-items: center;
3275
+ gap: 0.25rem;
3276
+ padding-left: 1rem;
3277
+ padding-right: 1rem;
3278
+ padding-top: 0.375rem;
3279
+ padding-bottom: 0.375rem;
3280
+ flex-shrink: 0;
3281
+ border-bottom: 1px solid var(--color-border);
3282
+ background: color-mix(in srgb, var(--qt-content-bg) 95%, transparent);
2077
3283
  }
2078
- .qt-lexical-strikethrough {
2079
- text-decoration: line-through;
3284
+ .qt-doc-editor-area {
3285
+ flex: 1 1 0%;
3286
+ overflow-y: auto;
3287
+ position: relative;
3288
+ padding: 1rem 1.5rem;
3289
+ background: var(--color-background);
2080
3290
  }
2081
- .qt-lexical-code {
2082
- font-family: monospace;
3291
+ .qt-doc-status-bar {
3292
+ display: flex;
3293
+ align-items: center;
3294
+ gap: 1rem;
3295
+ padding-left: 1rem;
3296
+ padding-right: 1rem;
3297
+ padding-top: 0.25rem;
3298
+ padding-bottom: 0.25rem;
3299
+ flex-shrink: 0;
2083
3300
  font-size: 0.75rem;
2084
- background: rgba(0, 0, 0, 0.1);
2085
- padding: 0.1em 0.3em;
2086
- border-radius: 0.2em;
3301
+ line-height: 1rem;
3302
+ border-top: 1px solid var(--color-border);
3303
+ color: var(--color-muted-foreground);
3304
+ background: color-mix(in srgb, var(--qt-content-bg) 95%, transparent);
2087
3305
  }
2088
- .qt-lexical-h1 {
2089
- font-size: 1.25rem;
2090
- font-weight: bold;
2091
- margin: 0.5em 0 0.25em;
3306
+ .qt-doc-status-item {
3307
+ display: inline-flex;
3308
+ align-items: center;
3309
+ gap: 0.25rem;
2092
3310
  }
2093
- .qt-lexical-h2 {
2094
- font-size: 1.125rem;
2095
- font-weight: bold;
2096
- margin: 0.4em 0 0.2em;
3311
+ .qt-doc-status-saving {
3312
+ display: inline-block;
3313
+ width: 0.375rem;
3314
+ height: 0.375rem;
3315
+ border-radius: 9999px;
3316
+ background: var(--qt-warning-fg, #f59e0b);
3317
+ animation: qt-doc-pulse 1s ease-in-out infinite;
3318
+ }
3319
+ @keyframes qt-doc-pulse {
3320
+ 0%, 100% {
3321
+ opacity: 0.4;
3322
+ }
3323
+ 50% {
3324
+ opacity: 1;
3325
+ }
2097
3326
  }
2098
- .qt-lexical-h3 {
2099
- font-size: 1rem;
2100
- font-weight: 600;
2101
- margin: 0.3em 0 0.15em;
3327
+ .qt-doc-status-saved {
3328
+ display: inline-block;
3329
+ width: 0.375rem;
3330
+ height: 0.375rem;
3331
+ border-radius: 9999px;
3332
+ background: var(--qt-success-fg, #22c55e);
2102
3333
  }
2103
- .qt-lexical-h4 {
2104
- font-size: 0.875rem;
2105
- font-weight: 600;
2106
- margin: 0.25em 0 0.1em;
3334
+ @media (max-width: 1025px) {
3335
+ .qt-doc-open-button {
3336
+ display: none !important;
3337
+ }
2107
3338
  }
2108
- .qt-lexical-h5 {
2109
- font-size: 0.75rem;
2110
- font-weight: 600;
2111
- margin: 0.2em 0 0.1em;
3339
+ .qt-doc-editor-with-gutter {
3340
+ display: flex;
3341
+ flex-direction: row;
3342
+ flex: 1;
3343
+ min-height: 0;
3344
+ overflow-y: auto;
2112
3345
  }
2113
- .qt-lexical-h6 {
2114
- font-size: 0.75rem;
2115
- font-weight: 500;
2116
- margin: 0.2em 0 0.1em;
3346
+ .qt-doc-gutter {
3347
+ position: relative;
3348
+ flex-shrink: 0;
3349
+ width: 20px;
3350
+ border-right: 1px solid var(--qt-border-color, rgba(128, 128, 128, 0.2));
2117
3351
  }
2118
- .qt-lexical-ul {
2119
- list-style-type: disc;
2120
- padding-left: 1.5rem;
2121
- margin: 0.25em 0;
3352
+ .qt-doc-gutter-change {
3353
+ position: absolute;
3354
+ left: 6px;
3355
+ width: 3px;
3356
+ border-radius: 1.5px;
3357
+ background-color: var(--qt-gutter-change-color, #3b82f6);
3358
+ opacity: 0.6;
2122
3359
  }
2123
- .qt-lexical-ol {
2124
- list-style-type: decimal;
2125
- padding-left: 1.5rem;
2126
- margin: 0.25em 0;
3360
+ .qt-doc-gutter-eye {
3361
+ position: absolute;
3362
+ left: 2px;
3363
+ width: 16px;
3364
+ height: 16px;
3365
+ color: var(--qt-gutter-eye-color, #f59e0b);
3366
+ opacity: 0.85;
3367
+ pointer-events: none;
2127
3368
  }
2128
- .qt-lexical-li {
2129
- margin: 0.1em 0;
3369
+ .qt-chat-sidebar-resizer {
3370
+ position: absolute;
3371
+ top: 0;
3372
+ bottom: 0;
3373
+ left: 0;
3374
+ width: 10px;
3375
+ transform: translateX(-50%);
3376
+ z-index: 20;
3377
+ cursor: col-resize;
3378
+ -webkit-user-select: none;
3379
+ -moz-user-select: none;
3380
+ user-select: none;
3381
+ touch-action: none;
3382
+ display: flex;
3383
+ align-items: center;
3384
+ justify-content: center;
2130
3385
  }
2131
- .qt-lexical-li-nested {
2132
- list-style-type: none;
2133
- margin: 0;
3386
+ .qt-chat-sidebar-resizer::before {
3387
+ content: "";
3388
+ position: absolute;
3389
+ top: 0;
3390
+ bottom: 0;
3391
+ left: 50%;
3392
+ width: 2px;
3393
+ transform: translateX(-50%);
3394
+ background: transparent;
3395
+ transition: background 0.15s ease;
2134
3396
  }
2135
- .qt-lexical-li-nested::before,
2136
- .qt-lexical-li-nested::after {
2137
- display: none;
3397
+ .qt-chat-sidebar-resizer:hover::before,
3398
+ .qt-chat-sidebar-resizer:focus-visible::before,
3399
+ .qt-chat-sidebar-resizer-active::before {
3400
+ background: var(--color-primary);
2138
3401
  }
2139
- .qt-lexical-checklist {
2140
- list-style: none;
2141
- padding-left: 0;
3402
+ .qt-chat-sidebar-resizer:focus-visible {
3403
+ outline: none;
2142
3404
  }
2143
- .qt-lexical-li-checked,
2144
- .qt-lexical-li-unchecked {
3405
+ .qt-chat-sidebar-resizer-grip {
3406
+ display: flex;
3407
+ flex-direction: column;
3408
+ gap: 0.25rem;
2145
3409
  position: relative;
2146
- padding-left: 1.5rem;
2147
- list-style: none;
2148
- margin: 0.15em 0;
3410
+ z-index: 1;
3411
+ opacity: 0;
3412
+ transition: opacity 0.15s ease;
2149
3413
  }
2150
- .qt-lexical-li-checked::before,
2151
- .qt-lexical-li-unchecked::before {
2152
- content: "";
2153
- position: absolute;
2154
- left: 0;
2155
- top: 0.25rem;
2156
- width: 1rem;
2157
- height: 1rem;
2158
- border-radius: 0.25rem;
2159
- border: 1px solid var(--qt-border-color, rgba(0, 0, 0, 0.3));
2160
- cursor: pointer;
3414
+ .qt-chat-sidebar-resizer:hover .qt-chat-sidebar-resizer-grip,
3415
+ .qt-chat-sidebar-resizer:focus-visible .qt-chat-sidebar-resizer-grip,
3416
+ .qt-chat-sidebar-resizer-active .qt-chat-sidebar-resizer-grip {
3417
+ opacity: 1;
2161
3418
  }
2162
- .qt-lexical-li-checked::before {
2163
- background: hsl(var(--primary, 220 90% 56%));
2164
- border-color: hsl(var(--primary, 220 90% 56%));
2165
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
2166
- background-size: 12px 12px;
2167
- background-position: center;
2168
- background-repeat: no-repeat;
3419
+ .qt-chat-sidebar-resizer-grip span {
3420
+ display: block;
3421
+ width: 3px;
3422
+ height: 3px;
3423
+ border-radius: 50%;
3424
+ background: var(--color-muted-foreground);
2169
3425
  }
2170
- .qt-lexical-li-checked {
2171
- opacity: 0.6;
2172
- text-decoration: line-through;
3426
+ .qt-memory-source-highlight {
3427
+ animation: memory-highlight-pulse 1s ease-in-out 2;
3428
+ position: relative;
2173
3429
  }
2174
- .qt-lexical-blockquote {
2175
- border-left: 4px solid rgba(0, 0, 0, 0.2);
2176
- padding-left: 0.75rem;
2177
- font-style: italic;
2178
- margin: 0.25em 0;
3430
+ .qt-memory-source-highlight::after {
3431
+ content: "";
3432
+ position: absolute;
3433
+ inset: -4px;
3434
+ border: 2px solid var(--color-primary);
3435
+ border-radius: var(--qt-chat-message-radius);
3436
+ pointer-events: none;
3437
+ animation: memory-highlight-border 3s ease-out forwards;
2179
3438
  }
2180
- .qt-lexical-link {
2181
- text-decoration: underline;
2182
- color: hsl(var(--primary, 220 90% 56%));
3439
+ @keyframes memory-highlight-pulse {
3440
+ 0%, 100% {
3441
+ background-color: transparent;
3442
+ }
3443
+ 50% {
3444
+ background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
3445
+ }
2183
3446
  }
2184
- .qt-lexical-code-block {
2185
- font-family: monospace;
2186
- font-size: 0.75rem;
2187
- background: rgba(0, 0, 0, 0.15);
2188
- padding: 0.5em 0.75em;
2189
- border-radius: 0.3em;
2190
- margin: 0.25em 0;
2191
- overflow-x: auto;
2192
- -moz-tab-size: 2;
2193
- -o-tab-size: 2;
2194
- tab-size: 2;
3447
+ @keyframes memory-highlight-border {
3448
+ 0% {
3449
+ opacity: 1;
3450
+ }
3451
+ 80% {
3452
+ opacity: 1;
3453
+ }
3454
+ 100% {
3455
+ opacity: 0;
3456
+ }
2195
3457
  }
2196
3458
  .qt-formatting-toolbar {
2197
3459
  display: flex;
@@ -2235,7 +3497,7 @@ body {
2235
3497
  cursor: pointer;
2236
3498
  }
2237
3499
  .qt-formatting-button:hover:not(:disabled) {
2238
- background: var(--qt-content-bg-hover);
3500
+ background: var(--qt-content-bg-hover, var(--color-muted));
2239
3501
  border-color: var(--color-foreground);
2240
3502
  }
2241
3503
  .qt-formatting-button:disabled {
@@ -2396,6 +3658,10 @@ body {
2396
3658
  background: color-mix(in srgb, var(--color-primary) 26%, transparent);
2397
3659
  outline: none;
2398
3660
  }
3661
+ .qt-mention-chip:focus-visible {
3662
+ outline: 2px solid var(--color-ring);
3663
+ outline-offset: 2px;
3664
+ }
2399
3665
  .qt-typeahead-menu {
2400
3666
  position: absolute;
2401
3667
  z-index: 50;
@@ -2455,14 +3721,14 @@ body {
2455
3721
  flex: none;
2456
3722
  font-size: 0.75rem;
2457
3723
  line-height: 1rem;
2458
- color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
3724
+ color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
2459
3725
  }
2460
3726
  .qt-typeahead-empty {
2461
3727
  padding: 0.75rem 0.5rem;
2462
3728
  text-align: center;
2463
3729
  font-size: 0.875rem;
2464
3730
  line-height: 1.25rem;
2465
- color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
3731
+ color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
2466
3732
  }
2467
3733
  .qt-emoji-picker {
2468
3734
  display: flex;
@@ -2488,7 +3754,7 @@ body {
2488
3754
  line-height: 1rem;
2489
3755
  font-weight: 600;
2490
3756
  background: var(--qt-popover-bg);
2491
- color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
3757
+ color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
2492
3758
  }
2493
3759
  .qt-emoji-picker-row {
2494
3760
  display: flex;
@@ -2511,7 +3777,7 @@ body {
2511
3777
  border: none;
2512
3778
  }
2513
3779
  .qt-emoji-picker-cell:hover {
2514
- background: var(--qt-content-bg-hover);
3780
+ background: var(--qt-content-bg-hover, var(--color-muted));
2515
3781
  }
2516
3782
  .qt-emoji-picker-cell:focus-visible {
2517
3783
  outline: 2px solid var(--color-primary);
@@ -2522,7 +3788,7 @@ body {
2522
3788
  text-align: center;
2523
3789
  font-size: 0.875rem;
2524
3790
  line-height: 1.25rem;
2525
- color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
3791
+ color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
2526
3792
  }
2527
3793
  .qt-lexical-contenteditable table {
2528
3794
  width: 100%;
@@ -3905,6 +5171,25 @@ body {
3905
5171
  border-color: var(--qt-tab-active-border);
3906
5172
  box-shadow: 0 3px 0 0 var(--qt-tab-active-border) inset;
3907
5173
  }
5174
+ .qt-tab-select {
5175
+ display: inline-flex;
5176
+ align-items: center;
5177
+ gap: inherit;
5178
+ min-width: 0;
5179
+ padding: 0;
5180
+ border: none;
5181
+ background: none;
5182
+ color: inherit;
5183
+ font: inherit;
5184
+ cursor: pointer;
5185
+ }
5186
+ .qt-tab-select:focus-visible {
5187
+ outline: none;
5188
+ }
5189
+ .qt-tab-strip .qt-tab:has(.qt-tab-select:focus-visible) {
5190
+ outline: 2px solid var(--color-ring);
5191
+ outline-offset: 2px;
5192
+ }
3908
5193
  .qt-tab-label {
3909
5194
  max-width: 14rem;
3910
5195
  overflow: hidden;
@@ -3919,7 +5204,7 @@ body {
3919
5204
  height: 1.5rem;
3920
5205
  margin: -0.175rem -0.25rem -0.175rem 0;
3921
5206
  border-radius: 0.25rem;
3922
- opacity: 0.55;
5207
+ opacity: 0.8;
3923
5208
  transition: opacity 0.15s ease, background 0.15s ease;
3924
5209
  }
3925
5210
  .qt-tab-close:hover {
@@ -4336,7 +5621,7 @@ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
4336
5621
  }
4337
5622
  .qt-storyteller-mode-option:hover {
4338
5623
  background: var(--qt-storyteller-mode-hover-bg, var(--color-accent));
4339
- color: var(--qt-storyteller-mode-hover-fg, var(--color-foreground));
5624
+ color: var(--qt-storyteller-mode-hover-fg, var(--color-accent-foreground));
4340
5625
  }
4341
5626
  .qt-storyteller-mode-option-active,
4342
5627
  .qt-storyteller-mode-option-active:hover {
@@ -4537,6 +5822,7 @@ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
4537
5822
  }
4538
5823
  .qt-intervene-toggle:hover {
4539
5824
  background-color: var(--qt-intervene-toggle-hover-bg, var(--color-accent));
5825
+ color: var(--qt-intervene-toggle-hover-fg, var(--color-accent-foreground));
4540
5826
  }
4541
5827
  .qt-intervene-toggle--off {
4542
5828
  color: var(--qt-intervene-toggle-off-fg, var(--color-muted-foreground));
@@ -4548,6 +5834,205 @@ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
4548
5834
  currentColor calc(50% + 0.75px),
4549
5835
  transparent calc(50% + 0.75px));
4550
5836
  }
5837
+ .qt-alert,
5838
+ .qt-alert-success,
5839
+ .qt-alert-warning,
5840
+ .qt-alert-error,
5841
+ .qt-alert-info {
5842
+ border-radius: 0.5rem;
5843
+ border-width: 1px;
5844
+ border-style: solid;
5845
+ padding: 0.75rem 1rem;
5846
+ font-size: 0.875rem;
5847
+ line-height: 1.25rem;
5848
+ }
5849
+ .qt-alert-success {
5850
+ background-color: var(--qt-alert-success-bg);
5851
+ color: var(--qt-alert-success-fg);
5852
+ border-color: var(--qt-alert-success-border);
5853
+ }
5854
+ .qt-alert-warning {
5855
+ background-color: var(--qt-alert-warning-bg);
5856
+ color: var(--qt-alert-warning-fg);
5857
+ border-color: var(--qt-alert-warning-border);
5858
+ }
5859
+ .qt-alert-error {
5860
+ background-color: var(--qt-alert-error-bg);
5861
+ color: var(--qt-alert-error-fg);
5862
+ border-color: var(--qt-alert-error-border);
5863
+ }
5864
+ .qt-alert-info {
5865
+ background-color: var(--qt-alert-info-bg);
5866
+ color: var(--qt-alert-info-fg);
5867
+ border-color: var(--qt-alert-info-border);
5868
+ }
5869
+ :is(.qt-alert, .qt-alert-success, .qt-alert-warning, .qt-alert-error, .qt-alert-info) :is(.qt-text-small, .qt-text-muted, .qt-text-secondary, .qt-text-xs) {
5870
+ color: inherit;
5871
+ }
5872
+ :is(.qt-alert, .qt-alert-success, .qt-alert-warning, .qt-alert-error, .qt-alert-info) a {
5873
+ color: inherit;
5874
+ text-decoration: underline;
5875
+ text-underline-offset: 2px;
5876
+ }
5877
+ .qt-page-container[style*=--story-background-url] .qt-settings-header {
5878
+ border-radius: 0.5rem;
5879
+ padding: 1rem;
5880
+ margin-left: -1rem;
5881
+ margin-right: -1rem;
5882
+ background: color-mix(in srgb, var(--color-background) 80%, transparent);
5883
+ backdrop-filter: blur(8px);
5884
+ -webkit-backdrop-filter: blur(8px);
5885
+ }
5886
+ .qt-page-container[style*=--story-background-url] .qt-tab-group .qt-tab {
5887
+ background: color-mix(in srgb, var(--color-background) 90%, var(--color-muted-foreground) 10%);
5888
+ border-color: var(--color-border);
5889
+ }
5890
+ .qt-page-container[style*=--story-background-url] .qt-tab-group .qt-tab:hover:not(.qt-tab-active) {
5891
+ background: color-mix(in srgb, var(--color-background) 84%, var(--color-muted-foreground) 16%);
5892
+ }
5893
+ .qt-page-container[style*=--story-background-url] .qt-tab-group .qt-tab.qt-tab-active {
5894
+ background: color-mix(in srgb, var(--color-background) 88%, transparent);
5895
+ border-color: var(--color-border);
5896
+ }
5897
+ .qt-page-container[style*=--story-background-url] .qt-tab-group .qt-tab.qt-tab-active::after {
5898
+ background: color-mix(in srgb, var(--color-background) 88%, transparent);
5899
+ }
5900
+ .qt-page-container[style*=--story-background-url] .qt-tab-divider {
5901
+ display: none;
5902
+ }
5903
+ .qt-page-container[style*=--story-background-url] :has(> .qt-tab-group) {
5904
+ margin-bottom: 0 !important;
5905
+ }
5906
+ .qt-page-container[style*=--story-background-url] .qt-tab-group {
5907
+ position: relative;
5908
+ z-index: 1;
5909
+ margin-bottom: -1px;
5910
+ }
5911
+ .qt-page-container[style*=--story-background-url] .qt-settings-panel {
5912
+ border-bottom-left-radius: 0.5rem;
5913
+ border-bottom-right-radius: 0.5rem;
5914
+ padding: 1.5rem 1rem;
5915
+ margin-left: -1rem;
5916
+ margin-right: -1rem;
5917
+ background: color-mix(in srgb, var(--color-background) 88%, transparent);
5918
+ backdrop-filter: blur(12px);
5919
+ -webkit-backdrop-filter: blur(12px);
5920
+ border: 1px solid var(--color-border);
5921
+ border-top: 1px solid var(--color-border);
5922
+ min-height: 40vh;
5923
+ }
5924
+ .qt-footer {
5925
+ border-top-width: 1px;
5926
+ border-top-style: solid;
5927
+ padding: 1rem;
5928
+ background: var(--qt-app-header-bg);
5929
+ border-color: var(--qt-footer-border);
5930
+ backdrop-filter: var(--qt-app-header-blur);
5931
+ -webkit-backdrop-filter: var(--qt-app-header-blur);
5932
+ position: relative;
5933
+ z-index: 20;
5934
+ }
5935
+ .qt-footer-container {
5936
+ display: flex;
5937
+ flex-wrap: wrap;
5938
+ align-items: center;
5939
+ justify-content: center;
5940
+ gap: 1rem;
5941
+ font-size: 0.875rem;
5942
+ line-height: 1.25rem;
5943
+ color: var(--qt-footer-fg);
5944
+ }
5945
+ .qt-footer-link {
5946
+ display: flex;
5947
+ align-items: center;
5948
+ gap: 0.25rem;
5949
+ transition-property:
5950
+ color,
5951
+ background-color,
5952
+ border-color,
5953
+ text-decoration-color,
5954
+ fill,
5955
+ stroke;
5956
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
5957
+ transition-duration: 150ms;
5958
+ color: var(--qt-footer-fg);
5959
+ }
5960
+ .qt-footer-link:hover {
5961
+ color: var(--qt-footer-link-hover);
5962
+ }
5963
+ .qt-footer-path {
5964
+ font-family: monospace;
5965
+ font-size: 0.75rem;
5966
+ line-height: 1rem;
5967
+ display: none;
5968
+ overflow: hidden;
5969
+ text-overflow: ellipsis;
5970
+ white-space: nowrap;
5971
+ max-width: 24rem;
5972
+ color: var(--qt-footer-fg);
5973
+ cursor: pointer;
5974
+ background: none;
5975
+ border: none;
5976
+ padding: 0;
5977
+ transition: color 0.15s ease;
5978
+ }
5979
+ .qt-footer-path:hover {
5980
+ color: var(--qt-footer-link-hover);
5981
+ text-decoration: underline;
5982
+ }
5983
+ .qt-footer-separator {
5984
+ display: none;
5985
+ }
5986
+ @media (min-width: 40rem) {
5987
+ .qt-footer-path,
5988
+ .qt-footer-separator {
5989
+ display: inline;
5990
+ }
5991
+ }
5992
+ .qt-settings-shell {
5993
+ padding: 1rem;
5994
+ border-width: 1px;
5995
+ border-style: solid;
5996
+ border-radius: 0.25rem;
5997
+ border-color: var(--qt-card-border);
5998
+ background: color-mix(in srgb, var(--color-card) 96%, transparent);
5999
+ }
6000
+ .qt-settings-shell-tight {
6001
+ padding: 0.75rem;
6002
+ border-width: 1px;
6003
+ border-style: solid;
6004
+ border-radius: 0.25rem;
6005
+ border-color: var(--qt-card-border);
6006
+ background: color-mix(in srgb, var(--color-card) 96%, transparent);
6007
+ }
6008
+ .qt-settings-section-heading {
6009
+ font-size: 0.875rem;
6010
+ line-height: 1.25rem;
6011
+ font-weight: 500;
6012
+ color: var(--qt-text-primary-fg, var(--color-foreground));
6013
+ }
6014
+ .qt-settings-field-group > :not(:last-child) {
6015
+ margin-bottom: 0.5rem;
6016
+ }
6017
+ .qt-settings-toggle-row {
6018
+ display: flex;
6019
+ align-items: flex-start;
6020
+ gap: 0.75rem;
6021
+ padding: 1rem;
6022
+ border-width: 1px;
6023
+ border-style: solid;
6024
+ border-radius: 0.25rem;
6025
+ cursor: pointer;
6026
+ border-color: var(--qt-card-border);
6027
+ transition: background-color 150ms ease;
6028
+ }
6029
+ .qt-settings-toggle-row:hover {
6030
+ background: var(--qt-card-hover-bg, var(--color-accent));
6031
+ color: var(--qt-card-hover-fg, var(--color-accent-foreground));
6032
+ }
6033
+ .qt-settings-toggle-row:hover :where(*) {
6034
+ color: var(--qt-card-hover-fg, var(--color-accent-foreground));
6035
+ }
4551
6036
  @media (prefers-reduced-motion: reduce) {
4552
6037
  *,
4553
6038
  *::before,