Mercurial

comparison mrjunejune/src/jrpg/jrpg.css @ 272:41a49c29a28f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
polish JRPG conversation experience Integrate desktop conversations into the utility panel, simplify the mobile frame, add modal destinations and a reusable Zenbu composer lab, and preserve explicit conversation resume behavior. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Fri, 07 Aug 2026 16:05:29 -0700
parents 04fee26ecce0
children e02e2036ef84
comparison
equal deleted inserted replaced
271:13d61401c57d 272:41a49c29a28f
39 39
40 .jrpg-page { 40 .jrpg-page {
41 --zenbu-sys-font-family-ui: "Pixel Mplus"; 41 --zenbu-sys-font-family-ui: "Pixel Mplus";
42 --zenbu-sys-font-family-content: "Pixel Mplus"; 42 --zenbu-sys-font-family-content: "Pixel Mplus";
43 --zenbu-sys-font-family-code: "Pixel Mplus"; 43 --zenbu-sys-font-family-code: "Pixel Mplus";
44 --zenbu-sys-type-label-family: "Pixel Mplus";
44 min-width: 20rem; 45 min-width: 20rem;
45 min-height: 100dvh; 46 min-height: 100dvh;
46 overflow: hidden; 47 overflow: hidden;
47 overflow-anchor: none; 48 overflow-anchor: none;
48 background: var(--mjj-jrpg-canvas); 49 background: var(--mjj-jrpg-canvas);
252 } 253 }
253 254
254 .jrpg-shell[data-minimized="true"] .jrpg-workspace > :is( 255 .jrpg-shell[data-minimized="true"] .jrpg-workspace > :is(
255 .jrpg-scene, 256 .jrpg-scene,
256 .jrpg-utility, 257 .jrpg-utility,
257 mjj-jrpg-composer, 258 mjj-composer,
258 mjj-jrpg-menu 259 mjj-jrpg-menu
259 ) { 260 ) {
260 visibility: hidden; 261 visibility: hidden;
261 } 262 }
262 263
263 .jrpg-workspace > .jrpg-scene, 264 .jrpg-workspace > .jrpg-scene,
264 .jrpg-workspace > .jrpg-utility, 265 .jrpg-workspace > .jrpg-utility,
265 .jrpg-workspace > mjj-jrpg-composer, 266 .jrpg-workspace > mjj-composer,
266 .jrpg-workspace > mjj-jrpg-menu { 267 .jrpg-workspace > mjj-jrpg-menu {
267 position: absolute; 268 position: absolute;
268 margin: 0; 269 margin: 0;
269 border: 0; 270 border: 0;
270 border-radius: 0; 271 border-radius: 0;
289 var(--mjj-frame-utility-inline); 290 var(--mjj-frame-utility-inline);
290 width: var(--mjj-frame-utility-width); 291 width: var(--mjj-frame-utility-width);
291 height: var(--mjj-frame-utility-height); 292 height: var(--mjj-frame-utility-height);
292 } 293 }
293 294
294 .jrpg-workspace > mjj-jrpg-composer { 295 .jrpg-workspace > mjj-composer {
295 inset: 296 inset:
296 var(--mjj-frame-composer-block) 297 var(--mjj-frame-composer-block)
297 auto 298 auto
298 auto 299 auto
299 var(--mjj-frame-composer-inline); 300 var(--mjj-frame-composer-inline);
311 height: var(--mjj-frame-menu-height); 312 height: var(--mjj-frame-menu-height);
312 } 313 }
313 314
314 .jrpg-scene, 315 .jrpg-scene,
315 .jrpg-utility, 316 .jrpg-utility,
316 mjj-jrpg-composer, 317 mjj-composer,
317 mjj-jrpg-menu, 318 mjj-jrpg-menu,
318 .jrpg-preview-panel { 319 .jrpg-preview-panel {
319 box-sizing: border-box; 320 box-sizing: border-box;
320 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); 321 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
321 border-radius: 0; 322 border-radius: 0;
391 @keyframes mjj-jrpg-idle { 392 @keyframes mjj-jrpg-idle {
392 50% { transform: translateY(calc(var(--zenbu-sys-space-related) * -1)); } 393 50% { transform: translateY(calc(var(--zenbu-sys-space-related) * -1)); }
393 } 394 }
394 395
395 mjj-jrpg-chat { 396 mjj-jrpg-chat {
397 box-sizing: border-box;
396 position: relative; 398 position: relative;
397 z-index: 1; 399 z-index: 1;
398 display: grid; 400 display: grid;
399 grid-template-rows: auto minmax(0, 1fr) auto; 401 grid-template-rows: minmax(0, 1fr) auto;
400 align-self: stretch; 402 align-self: stretch;
401 min-height: 0; 403 min-height: 0;
402 padding: var(--zenbu-sys-padding-md); 404 padding: var(--zenbu-sys-padding-md);
403 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); 405 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
404 background: var(--mjj-jrpg-panel-strong); 406 background: var(--mjj-jrpg-panel-strong);
405 box-shadow: 407 box-shadow:
406 inset 0 0 0 var(--zenbu-sys-stroke-width) 408 inset 0 0 0 var(--zenbu-sys-stroke-width)
407 var(--mjj-jrpg-info); 409 var(--mjj-jrpg-info);
408 } 410 }
409 411
410 .jrpg-panel-heading {
411 display: flex;
412 align-items: baseline;
413 justify-content: space-between;
414 gap: var(--zenbu-sys-space-group);
415 padding-bottom: var(--zenbu-sys-padding-sm);
416 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
417 }
418
419 .jrpg-menu-label, 412 .jrpg-menu-label,
420 .jrpg-brand > p, 413 .jrpg-brand > p,
421 .jrpg-dialog-heading p { 414 .jrpg-dialog-heading p {
422 color: var(--mjj-jrpg-text-muted); 415 color: var(--mjj-jrpg-text-muted);
423 font-size: var(--zenbu-sys-font-size-xs); 416 font-size: var(--zenbu-sys-font-size-xs);
424 letter-spacing: 0.08em; 417 letter-spacing: 0.08em;
425 }
426
427 .jrpg-panel-heading h1 {
428 margin: 0;
429 color: var(--mjj-jrpg-text);
430 font-size: var(--zenbu-sys-font-size-lg);
431 } 418 }
432 419
433 zen-message-scroller { 420 zen-message-scroller {
434 display: block; 421 display: block;
435 overflow: hidden; 422 overflow: hidden;
456 list-style: none; 443 list-style: none;
457 } 444 }
458 445
459 .jrpg-message { 446 .jrpg-message {
460 display: grid; 447 display: grid;
461 grid-template-columns: minmax(4rem, auto) 1fr; 448 grid-template-columns: minmax(4rem, auto) minmax(0, 1fr);
462 gap: var(--zenbu-sys-space-control); 449 gap: var(--zenbu-sys-space-control);
463 padding-left: var(--zenbu-sys-padding-sm); 450 padding-left: var(--zenbu-sys-padding-sm);
464 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent); 451 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent);
452 }
453
454 .jrpg-message-speaker {
455 display: flex;
456 align-items: center;
457 gap: var(--zenbu-sys-space-icon-label);
458 align-self: start;
459 }
460
461 .jrpg-message-avatar {
462 width: var(--zenbu-sys-control-height-sm);
463 height: var(--zenbu-sys-control-height-sm);
464 flex: none;
465 object-fit: contain;
466 image-rendering: pixelated;
465 } 467 }
466 468
467 .jrpg-message[hidden] { 469 .jrpg-message[hidden] {
468 display: none; 470 display: none;
469 } 471 }
509 } 511 }
510 } 512 }
511 513
512 .jrpg-turn-navigation { 514 .jrpg-turn-navigation {
513 display: grid; 515 display: grid;
514 grid-template-columns: auto minmax(0, 1fr) auto; 516 grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
515 align-items: center; 517 align-items: center;
516 gap: var(--zenbu-sys-space-icon-label); 518 gap: var(--zenbu-sys-space-icon-label);
517 padding-top: var(--zenbu-sys-padding-sm); 519 padding-top: var(--zenbu-sys-padding-sm);
518 border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); 520 border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
521 }
522
523 .jrpg-turn-navigation zen-button:first-child button {
524 justify-content: flex-start;
525 padding-inline-start: var(--zenbu-sys-padding-md);
526 }
527
528 .jrpg-turn-navigation zen-button:last-child button {
529 justify-content: flex-end;
530 padding-inline-end: var(--zenbu-sys-padding-md);
519 } 531 }
520 532
521 .jrpg-turn-navigation zen-button, 533 .jrpg-turn-navigation zen-button,
522 .jrpg-turn-navigation button { 534 .jrpg-turn-navigation button {
523 width: 100%; 535 width: 100%;
559 padding: var(--zenbu-sys-padding-md); 571 padding: var(--zenbu-sys-padding-md);
560 background: var(--mjj-jrpg-surface); 572 background: var(--mjj-jrpg-surface);
561 overflow: hidden; 573 overflow: hidden;
562 } 574 }
563 575
564 .jrpg-utility > mjj-jrpg-preview, 576 .jrpg-utility > mjj-jrpg-preview {
565 .jrpg-utility > mjj-conversation-archive {
566 box-sizing: border-box; 577 box-sizing: border-box;
567 grid-column: 1;
568 grid-row: 1;
569 width: 100%; 578 width: 100%;
570 height: 100%; 579 height: 100%;
571 min-height: 0; 580 min-height: 0;
572 min-width: 0; 581 min-width: 0;
573 } 582 }
621 line-height: 1; 630 line-height: 1;
622 white-space: nowrap; 631 white-space: nowrap;
623 } 632 }
624 633
625 .jrpg-preview-panel { 634 .jrpg-preview-panel {
626 display: grid; 635 display: block;
627 grid-template-rows: auto auto minmax(0, 1fr) auto;
628 gap: var(--zenbu-sys-space-group);
629 height: 100%; 636 height: 100%;
630 padding: var(--zenbu-sys-padding-lg); 637 padding: var(--zenbu-sys-padding-lg);
631 background: 638 background:
632 linear-gradient( 639 linear-gradient(
633 135deg, 640 135deg,
637 box-shadow: 644 box-shadow:
638 inset 0 0 0 var(--zenbu-sys-stroke-width) 645 inset 0 0 0 var(--zenbu-sys-stroke-width)
639 var(--mjj-jrpg-accent); 646 var(--mjj-jrpg-accent);
640 } 647 }
641 648
649 .jrpg-preview-panel > :is(.jrpg-preview-content, mjj-conversation-archive) {
650 box-sizing: border-box;
651 width: 100%;
652 height: 100%;
653 min-width: 0;
654 min-height: 0;
655 }
656
657 .jrpg-preview-content {
658 display: grid;
659 grid-template-rows: auto auto minmax(0, 1fr) auto;
660 gap: var(--zenbu-sys-space-group);
661 }
662
663 .jrpg-preview-content[hidden] {
664 display: none;
665 }
666
642 .jrpg-preview-panel h2, 667 .jrpg-preview-panel h2,
643 .jrpg-preview-panel p { 668 .jrpg-preview-panel p {
644 margin: 0; 669 margin: 0;
645 } 670 }
646 671
647 .jrpg-preview-panel h2 { 672 .jrpg-preview-panel h2 {
648 color: var(--mjj-jrpg-primary); 673 color: var(--mjj-jrpg-primary);
649 } 674 }
650 675
651 .jrpg-preview-panel > p { 676 .jrpg-preview-content > p {
652 color: var(--mjj-jrpg-text); 677 color: var(--mjj-jrpg-text);
653 } 678 }
654 679
655 .jrpg-work-showcase { 680 .jrpg-work-showcase {
656 display: grid; 681 display: grid;
1336 .jrpg-functional-tool [data-converter-download] { 1361 .jrpg-functional-tool [data-converter-download] {
1337 color: var(--mjj-jrpg-primary); 1362 color: var(--mjj-jrpg-primary);
1338 text-decoration-color: var(--mjj-jrpg-accent); 1363 text-decoration-color: var(--mjj-jrpg-accent);
1339 } 1364 }
1340 1365
1341 mjj-jrpg-composer { 1366 mjj-composer {
1342 grid-area: composer; 1367 grid-area: composer;
1343 display: block; 1368 display: block;
1344 min-height: 0; 1369 min-height: 0;
1345 padding: var(--zenbu-sys-padding-md); 1370 padding: var(--zenbu-sys-padding-md);
1346 background: var(--mjj-jrpg-surface); 1371 background: var(--mjj-jrpg-surface);
1347 } 1372 }
1348 1373
1349 .jrpg-composer {
1350 display: grid;
1351 grid-template-columns: minmax(0, 1fr) auto;
1352 grid-template-rows: minmax(0, 1fr) auto;
1353 gap: var(--zenbu-sys-space-control);
1354 height: 100%;
1355 min-height: 0;
1356 }
1357
1358 .jrpg-composer zen-field[appearance="plain"] {
1359 display: grid;
1360 grid-column: 1;
1361 grid-row: 1;
1362 grid-template-rows: auto minmax(0, 1fr);
1363 gap: var(--zenbu-sys-space-icon-label);
1364 min-height: 0;
1365 }
1366
1367 .jrpg-composer label,
1368 .jrpg-composer-hint {
1369 grid-column: 1 / -1;
1370 grid-row: 2;
1371 color: var(--mjj-jrpg-text-muted);
1372 font-size: var(--zenbu-sys-font-size-xs);
1373 }
1374
1375 .jrpg-composer zen-field label {
1376 grid-column: 1;
1377 grid-row: 1;
1378 }
1379
1380 .jrpg-composer textarea {
1381 box-sizing: border-box;
1382 grid-column: 1;
1383 grid-row: 2;
1384 width: 100%;
1385 height: 100%;
1386 min-height: calc(var(--zenbu-control-height) * 2);
1387 resize: none;
1388 padding:
1389 var(--zenbu-control-padding-block)
1390 var(--zenbu-control-padding-inline);
1391 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
1392 border-radius: 0;
1393 background: var(--mjj-jrpg-surface-sunken);
1394 color: var(--mjj-jrpg-text);
1395 font: inherit;
1396 }
1397
1398 .jrpg-composer textarea::placeholder { 1374 .jrpg-composer textarea::placeholder {
1399 color: var(--mjj-jrpg-text-muted); 1375 color: var(--mjj-jrpg-text-muted);
1400 } 1376 }
1401 1377
1402 .jrpg-page :where(a, button, textarea):focus-visible { 1378 .jrpg-page :where(a, button, textarea):focus-visible {
1403 outline: var(--zenbu-sys-focus-width) solid var(--mjj-jrpg-focus); 1379 outline: var(--zenbu-sys-focus-width) solid var(--mjj-jrpg-focus);
1404 outline-offset: var(--zenbu-sys-focus-offset); 1380 outline-offset: var(--zenbu-sys-focus-offset);
1405 }
1406
1407 .jrpg-composer-actions {
1408 display: flex;
1409 grid-column: 2;
1410 grid-row: 1;
1411 flex-direction: column;
1412 justify-content: flex-end;
1413 gap: var(--zenbu-sys-space-control);
1414 }
1415
1416 .jrpg-composer zen-button {
1417 width: 100%;
1418 }
1419
1420 .jrpg-composer zen-button[hidden] {
1421 display: none;
1422 }
1423
1424 .jrpg-composer zen-button > button {
1425 width: 100%;
1426 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
1427 border-radius: 0;
1428 background: var(--mjj-jrpg-primary);
1429 color: var(--mjj-jrpg-primary-foreground);
1430 cursor: pointer;
1431 }
1432
1433 .jrpg-composer zen-button > button:hover {
1434 border-color: var(--mjj-jrpg-primary-hover);
1435 background: var(--mjj-jrpg-primary-hover);
1436 }
1437
1438 .jrpg-composer [data-cancel-control] > button {
1439 border-color: var(--mjj-jrpg-accent);
1440 background: var(--mjj-jrpg-accent);
1441 }
1442
1443 .jrpg-composer button:disabled {
1444 opacity: var(--zenbu-sys-opacity-disabled);
1445 cursor: not-allowed;
1446 }
1447
1448 .jrpg-composer-hint {
1449 margin: 0;
1450 } 1381 }
1451 1382
1452 mjj-jrpg-menu { 1383 mjj-jrpg-menu {
1453 grid-area: menu; 1384 grid-area: menu;
1454 display: block; 1385 display: block;
1512 } 1443 }
1513 1444
1514 .jrpg-workspace > :is( 1445 .jrpg-workspace > :is(
1515 .jrpg-scene, 1446 .jrpg-scene,
1516 .jrpg-utility, 1447 .jrpg-utility,
1517 mjj-jrpg-composer, 1448 mjj-composer,
1518 mjj-jrpg-menu 1449 mjj-jrpg-menu
1519 ), 1450 ),
1520 .jrpg-scene > mjj-jrpg-chat, 1451 .jrpg-scene > mjj-jrpg-chat,
1521 .jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel, 1452 .jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel {
1522 .jrpg-utility > mjj-conversation-archive {
1523 border: 0; 1453 border: 0;
1524 background-color: transparent; 1454 background-color: transparent;
1525 box-shadow: none; 1455 box-shadow: none;
1526 } 1456 }
1527 1457
1528 .jrpg-workspace > .jrpg-scene { 1458 .jrpg-workspace > .jrpg-scene {
1529 background-image: none; 1459 background-image: none;
1530 } 1460 }
1531 1461
1532 .jrpg-workspace > mjj-jrpg-composer, 1462 .jrpg-workspace > mjj-composer,
1533 .jrpg-workspace > mjj-jrpg-menu { 1463 .jrpg-workspace > mjj-jrpg-menu {
1534 padding: var(--zenbu-sys-padding-sm); 1464 padding: var(--zenbu-sys-padding-sm);
1535 } 1465 }
1536 1466
1537 .jrpg-workspace > mjj-jrpg-composer textarea { 1467 .jrpg-workspace > mjj-composer textarea {
1538 min-height: 0; 1468 min-height: 0;
1539 } 1469 }
1540 1470
1541 .jrpg-scene .jrpg-panel-heading,
1542 .jrpg-scene .jrpg-message, 1471 .jrpg-scene .jrpg-message,
1543 .jrpg-scene .jrpg-turn-navigation, 1472 .jrpg-scene .jrpg-turn-navigation,
1544 .jrpg-brand, 1473 .jrpg-brand,
1545 .jrpg-work-showcase a, 1474 .jrpg-work-showcase a,
1546 .jrpg-preview-panel > .jrpg-preview-dialog > zen-button > button, 1475 .jrpg-preview-content > .jrpg-preview-dialog > zen-button > button,
1547 mjj-jrpg-composer > .jrpg-composer textarea,
1548 mjj-jrpg-composer > .jrpg-composer zen-button > button,
1549 mjj-jrpg-menu nav button { 1476 mjj-jrpg-menu nav button {
1550 border: 0; 1477 border: 0;
1551 } 1478 }
1552 1479
1553 @media 1480 @media
1588 background-size: cover; 1515 background-size: cover;
1589 } 1516 }
1590 1517
1591 .jrpg-workspace > .jrpg-scene, 1518 .jrpg-workspace > .jrpg-scene,
1592 .jrpg-workspace > .jrpg-utility, 1519 .jrpg-workspace > .jrpg-utility,
1593 .jrpg-workspace > mjj-jrpg-composer, 1520 .jrpg-workspace > mjj-composer,
1594 .jrpg-workspace > mjj-jrpg-menu, 1521 .jrpg-workspace > mjj-jrpg-menu,
1595 .jrpg-workspace > .jrpg-brand, 1522 .jrpg-workspace > .jrpg-brand,
1596 .jrpg-workspace > .jrpg-frame-controls, 1523 .jrpg-workspace > .jrpg-frame-controls,
1597 .jrpg-workspace > .jrpg-frame-telemetry { 1524 .jrpg-workspace > .jrpg-frame-telemetry {
1598 position: relative; 1525 position: relative;
1851 grid-column: 2; 1778 grid-column: 2;
1852 grid-row: 1; 1779 grid-row: 1;
1853 } 1780 }
1854 1781
1855 mjj-conversation-archive { 1782 mjj-conversation-archive {
1856 position: relative;
1857 z-index: 1;
1858 display: grid; 1783 display: grid;
1859 grid-template-rows: auto auto minmax(0, 1fr) auto auto; 1784 grid-template-rows: auto auto minmax(0, 1fr) auto auto;
1860 align-self: stretch; 1785 align-self: stretch;
1861 min-height: 0; 1786 min-height: 0;
1862 padding: var(--zenbu-sys-padding-md); 1787 padding: 0;
1863 overflow: hidden; 1788 overflow: hidden;
1864 background: var(--mjj-jrpg-panel-strong); 1789 background: transparent;
1865 box-shadow: inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-info); 1790 box-shadow: none;
1866 } 1791 }
1867 1792
1868 mjj-conversation-archive[hidden] { 1793 mjj-conversation-archive[hidden] {
1869 display: none; 1794 display: none;
1870 }
1871
1872 .jrpg-utility > mjj-conversation-archive {
1873 border: 0;
1874 box-shadow: inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-info);
1875 } 1795 }
1876 1796
1877 .jrpg-archive-heading { 1797 .jrpg-archive-heading {
1878 display: flex; 1798 display: flex;
1879 align-items: baseline; 1799 align-items: baseline;
2212 2132
2213 .jrpg-mobile-menu-btn { 2133 .jrpg-mobile-menu-btn {
2214 display: none; 2134 display: none;
2215 } 2135 }
2216 2136
2137 .jrpg-mobile-destination-owner {
2138 display: contents;
2139 }
2140
2141 .jrpg-page zen-button[hidden] {
2142 display: none;
2143 }
2144
2217 /* ================================================================ 2145 /* ================================================================
2218 Mobile portrait frame layout (≤52rem + portrait) 2146 Mobile portrait frame layout (≤52rem + portrait)
2219 Overrides the generic stacked grid from the 52rem breakpoint. 2147 Overrides the generic stacked grid from the 52rem breakpoint.
2220 All geometry custom properties are centralised in .jrpg-shell. 2148 All geometry custom properties are centralised in .jrpg-shell.
2221 ================================================================ */ 2149 ================================================================ */
2223 @media (max-width: 52rem) and (orientation: portrait) { 2151 @media (max-width: 52rem) and (orientation: portrait) {
2224 .jrpg-shell { 2152 .jrpg-shell {
2225 /* ── Aperture geometry: (inline=left%, block=top%, width%, height%) ── */ 2153 /* ── Aperture geometry: (inline=left%, block=top%, width%, height%) ── */
2226 2154
2227 /* Main conversation */ 2155 /* Main conversation */
2228 --mjj-mobile-scene-inline: 4.5%; 2156 --mjj-mobile-scene-inline: 4.8%;
2229 --mjj-mobile-scene-block: 7.5%; 2157 --mjj-mobile-scene-block: 7.3%;
2230 --mjj-mobile-scene-width: 91%; 2158 --mjj-mobile-scene-width: 90.4%;
2231 --mjj-mobile-scene-height: 45.5%; 2159 --mjj-mobile-scene-height: 71.2%;
2232
2233 /* Preview / utility */
2234 --mjj-mobile-utility-inline: 4.5%;
2235 --mjj-mobile-utility-block: 54.7%;
2236 --mjj-mobile-utility-width: 91%;
2237 --mjj-mobile-utility-height: 17.1%;
2238 2160
2239 /* Composer */ 2161 /* Composer */
2240 --mjj-mobile-composer-inline: 4.5%; 2162 --mjj-mobile-composer-inline: 4.8%;
2241 --mjj-mobile-composer-block: 72.8%; 2163 --mjj-mobile-composer-block: 79.6%;
2242 --mjj-mobile-composer-width: 60.3%; 2164 --mjj-mobile-composer-width: 90.4%;
2243 --mjj-mobile-composer-height: 19.2%; 2165 --mjj-mobile-composer-height: 17.7%;
2244
2245 /* Menu */
2246 --mjj-mobile-menu-inline: 66.5%;
2247 --mjj-mobile-menu-block: 72.8%;
2248 --mjj-mobile-menu-width: 29%;
2249 --mjj-mobile-menu-height: 19.2%;
2250
2251 /* Brand / SYS-01 cover */
2252 --mjj-mobile-brand-inline: 11%;
2253 --mjj-mobile-brand-block: 2.4%;
2254 --mjj-mobile-brand-width: 10%;
2255 --mjj-mobile-brand-height: 3.5%;
2256 2166
2257 /* Baked hamburger overlay */ 2167 /* Baked hamburger overlay */
2258 --mjj-mobile-hamburger-inline: 89.5%; 2168 --mjj-mobile-hamburger-inline: 87.2%;
2259 --mjj-mobile-hamburger-block: 2%; 2169 --mjj-mobile-hamburger-block: 1.3%;
2260 --mjj-mobile-hamburger-width: 7%; 2170 --mjj-mobile-hamburger-width: 9.4%;
2261 --mjj-mobile-hamburger-height: 4%; 2171 --mjj-mobile-hamburger-height: 5.3%;
2262
2263 /* Telemetry value absolute positions (x = left-center, y = top-center) */
2264 --mjj-mobile-telemetry-temp-x: 22%;
2265 --mjj-mobile-telemetry-temp-y: 94.7%;
2266 --mjj-mobile-telemetry-user-x: 45%;
2267 --mjj-mobile-telemetry-user-y: 94.7%;
2268 --mjj-mobile-telemetry-status-x: 73%;
2269 --mjj-mobile-telemetry-status-y: 94.7%;
2270 --mjj-mobile-telemetry-uptime-x: 22%;
2271 --mjj-mobile-telemetry-uptime-y: 97.5%;
2272 2172
2273 height: 100dvh; 2173 height: 100dvh;
2274 min-height: 0; 2174 min-height: 0;
2275 } 2175 }
2276 2176
2301 /* Desktop window controls are irrelevant on mobile portrait */ 2201 /* Desktop window controls are irrelevant on mobile portrait */
2302 .jrpg-workspace > .jrpg-frame-controls { 2202 .jrpg-workspace > .jrpg-frame-controls {
2303 display: none; 2203 display: none;
2304 } 2204 }
2305 2205
2306 /* Restore absolute positioning for all aperture elements */ 2206 /* Restore absolute positioning for the two frame apertures */
2307 .jrpg-workspace > .jrpg-scene, 2207 .jrpg-workspace > .jrpg-scene,
2308 .jrpg-workspace > .jrpg-utility, 2208 .jrpg-workspace > mjj-composer {
2309 .jrpg-workspace > mjj-jrpg-composer,
2310 .jrpg-workspace > mjj-jrpg-menu,
2311 .jrpg-workspace > .jrpg-brand {
2312 position: absolute; 2209 position: absolute;
2313 width: auto; 2210 width: auto;
2314 height: auto; 2211 height: auto;
2315 } 2212 }
2316 2213
2329 2.8vw, 2226 2.8vw,
2330 var(--zenbu-sys-font-size-sm) 2227 var(--zenbu-sys-font-size-sm)
2331 ); 2228 );
2332 } 2229 }
2333 2230
2334 /* Utility / preview aperture */
2335 .jrpg-workspace > .jrpg-utility {
2336 inset:
2337 var(--mjj-mobile-utility-block)
2338 auto
2339 auto
2340 var(--mjj-mobile-utility-inline);
2341 width: var(--mjj-mobile-utility-width);
2342 height: var(--mjj-mobile-utility-height);
2343 min-height: 0;
2344 overflow: hidden;
2345 font-size: clamp(
2346 var(--zenbu-sys-font-size-xs),
2347 2.8vw,
2348 var(--zenbu-sys-font-size-sm)
2349 );
2350 }
2351
2352 /* Composer aperture */ 2231 /* Composer aperture */
2353 .jrpg-workspace > mjj-jrpg-composer { 2232 .jrpg-workspace > mjj-composer {
2354 inset: 2233 inset:
2355 var(--mjj-mobile-composer-block) 2234 var(--mjj-mobile-composer-block)
2356 auto 2235 auto
2357 auto 2236 auto
2358 var(--mjj-mobile-composer-inline); 2237 var(--mjj-mobile-composer-inline);
2363 2.8vw, 2242 2.8vw,
2364 var(--zenbu-sys-font-size-sm) 2243 var(--zenbu-sys-font-size-sm)
2365 ); 2244 );
2366 } 2245 }
2367 2246
2368 /* Menu aperture */ 2247 .jrpg-workspace > :is(.jrpg-utility, mjj-jrpg-menu) {
2369 .jrpg-workspace > mjj-jrpg-menu { 2248 display: none;
2370 inset: 2249 }
2371 var(--mjj-mobile-menu-block) 2250
2372 auto
2373 auto
2374 var(--mjj-mobile-menu-inline);
2375 width: var(--mjj-mobile-menu-width);
2376 height: var(--mjj-mobile-menu-height);
2377 overflow: hidden;
2378 font-size: clamp(
2379 var(--zenbu-sys-font-size-xs),
2380 2.5vw,
2381 var(--zenbu-sys-font-size-sm)
2382 );
2383 }
2384
2385 /* Brand cover (covers baked SYS-01 label) */
2386 .jrpg-workspace > .jrpg-brand { 2251 .jrpg-workspace > .jrpg-brand {
2387 inset: 2252 position: absolute;
2388 var(--mjj-mobile-brand-block) 2253 z-index: 4;
2389 auto 2254 inset: 1.3% auto auto 50%;
2390 auto 2255 display: grid;
2391 var(--mjj-mobile-brand-inline); 2256 place-items: center;
2392 width: var(--mjj-mobile-brand-width); 2257 width: max-content;
2393 height: var(--mjj-mobile-brand-height); 2258 max-width: 68%;
2394 background: var(--mjj-jrpg-canvas); 2259 height: 5.3%;
2395 padding: 0; 2260 padding: 0;
2261 border: 0;
2262 background: transparent;
2396 box-shadow: none; 2263 box-shadow: none;
2264 text-align: center;
2265 transform: translateX(-50%);
2266 }
2267
2268 body.jrpg-page .jrpg-brand header {
2269 width: 100%;
2270 text-align: center;
2271 }
2272
2273 body.jrpg-page .jrpg-brand header h1 {
2274 font-size: var(--zenbu-sys-font-size-sm);
2275 text-shadow: none;
2397 } 2276 }
2398 2277
2399 /* Hamburger button: transparent overlay over baked art */ 2278 /* Hamburger button: transparent overlay over baked art */
2400 .jrpg-workspace > .jrpg-mobile-menu-btn { 2279 .jrpg-mobile-destination-owner > .jrpg-mobile-menu-btn {
2401 display: grid; 2280 display: grid;
2402 place-items: center; 2281 place-items: center;
2403 position: absolute; 2282 position: absolute;
2404 z-index: 5; 2283 z-index: 5;
2405 inset: 2284 inset:
2436 2315
2437 .jrpg-mobile-menu-btn > button:focus-visible zen-icon { 2316 .jrpg-mobile-menu-btn > button:focus-visible zen-icon {
2438 opacity: 0.5; 2317 opacity: 0.5;
2439 } 2318 }
2440 2319
2441 /* Telemetry: full-workspace container so children use workspace % coords */
2442 .jrpg-workspace > .jrpg-frame-telemetry { 2320 .jrpg-workspace > .jrpg-frame-telemetry {
2443 position: absolute; 2321 display: none;
2444 inset: 0; 2322 }
2445 display: block; 2323
2324 .jrpg-mobile-destination-dialog {
2325 box-sizing: border-box;
2326 width: calc(100% - var(--zenbu-sys-space-content));
2327 max-width: 42rem;
2328 height: min(88dvh, 48rem);
2329 max-height: calc(100dvh - var(--zenbu-sys-space-content));
2330 margin: auto;
2331 padding: var(--zenbu-sys-padding-md);
2332 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
2333 border-radius: 0;
2334 background: var(--mjj-jrpg-surface);
2335 color: var(--mjj-jrpg-text);
2336 box-shadow:
2337 inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-accent),
2338 var(--zenbu-sys-space-control) var(--zenbu-sys-space-control) 0
2339 var(--mjj-jrpg-accent);
2340 }
2341
2342 .jrpg-mobile-destination-dialog[open] {
2343 display: grid;
2344 grid-template-rows: auto minmax(0, 1fr);
2345 gap: var(--zenbu-sys-space-group);
2346 }
2347
2348 .jrpg-mobile-destination-dialog::backdrop {
2349 background: color-mix(in srgb, var(--mjj-jrpg-canvas) 82%, transparent);
2350 }
2351
2352 .jrpg-mobile-destination-header {
2353 display: grid;
2354 grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
2355 align-items: center;
2356 gap: var(--zenbu-sys-space-control);
2357 padding-bottom: var(--zenbu-sys-padding-sm);
2358 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
2359 }
2360
2361 .jrpg-mobile-destination-header h2 {
2362 margin: 0;
2363 color: var(--mjj-jrpg-primary);
2364 font-size: var(--zenbu-sys-font-size-lg);
2365 text-align: center;
2366 }
2367
2368 .jrpg-mobile-destination-header zen-button:first-child {
2369 justify-self: start;
2370 }
2371
2372 .jrpg-mobile-destination-header zen-button:last-child {
2373 justify-self: end;
2374 }
2375
2376 .jrpg-mobile-destination-header button {
2377 border: 0;
2378 border-radius: 0;
2379 background: transparent;
2380 color: var(--mjj-jrpg-text);
2381 cursor: pointer;
2382 }
2383
2384 .jrpg-mobile-destination-content {
2385 min-width: 0;
2386 min-height: 0;
2387 overflow: hidden;
2388 }
2389
2390 .jrpg-mobile-destination-content > :is(mjj-jrpg-menu, .jrpg-utility) {
2391 box-sizing: border-box;
2392 position: static;
2446 width: 100%; 2393 width: 100%;
2447 height: 100%; 2394 height: 100%;
2395 min-width: 0;
2396 min-height: 0;
2397 }
2398
2399 .jrpg-mobile-destination-content > [hidden],
2400 [data-mobile-destination-back-owner][hidden] {
2401 display: none;
2402 }
2403
2404 .jrpg-mobile-destination-content > mjj-jrpg-menu {
2405 display: block;
2406 padding: var(--zenbu-sys-padding-md);
2407 overflow-y: auto;
2408 }
2409
2410 .jrpg-mobile-destination-content > .jrpg-utility {
2411 display: grid;
2412 padding: 0;
2413 border: 0;
2414 overflow: hidden;
2448 background: transparent; 2415 background: transparent;
2449 pointer-events: none; 2416 box-shadow: none;
2450 font-size: clamp( 2417 }
2451 var(--zenbu-sys-font-size-xs), 2418
2452 2.5vw, 2419 .jrpg-mobile-destination-content .jrpg-archive-heading {
2453 var(--zenbu-sys-font-size-sm) 2420 display: none;
2454 );
2455 }
2456
2457 .jrpg-frame-telemetry > :nth-child(1) {
2458 position: absolute;
2459 left: var(--mjj-mobile-telemetry-temp-x);
2460 top: var(--mjj-mobile-telemetry-temp-y);
2461 transform: translate(-50%, -50%);
2462 background: transparent;
2463 padding-inline: 0;
2464 pointer-events: auto;
2465 white-space: nowrap;
2466 }
2467
2468 .jrpg-frame-telemetry > :nth-child(2) {
2469 position: absolute;
2470 left: var(--mjj-mobile-telemetry-user-x);
2471 top: var(--mjj-mobile-telemetry-user-y);
2472 transform: translate(-50%, -50%);
2473 background: transparent;
2474 padding-inline: 0;
2475 pointer-events: auto;
2476 white-space: nowrap;
2477 }
2478
2479 .jrpg-frame-telemetry > :nth-child(3) {
2480 position: absolute;
2481 left: var(--mjj-mobile-telemetry-status-x);
2482 top: var(--mjj-mobile-telemetry-status-y);
2483 transform: translate(-50%, -50%);
2484 background: transparent;
2485 padding-inline: 0;
2486 pointer-events: auto;
2487 white-space: nowrap;
2488 }
2489
2490 .jrpg-frame-telemetry > :nth-child(4) {
2491 position: absolute;
2492 left: var(--mjj-mobile-telemetry-uptime-x);
2493 top: var(--mjj-mobile-telemetry-uptime-y);
2494 transform: translate(-50%, -50%);
2495 background: transparent;
2496 padding-inline: 0;
2497 pointer-events: auto;
2498 white-space: nowrap;
2499 }
2500
2501 /* Compact the brand header text for the narrow cover area */
2502 .jrpg-workspace > .jrpg-brand header h1 {
2503 font-size: clamp(
2504 var(--zenbu-sys-font-size-xs),
2505 2vw,
2506 var(--zenbu-sys-font-size-xs)
2507 );
2508 } 2421 }
2509 2422
2510 /* Compact scene internals for mobile aperture */ 2423 /* Compact scene internals for mobile aperture */
2511 .jrpg-scene { 2424 .jrpg-scene {
2512 grid-template-columns: minmax(0, 1fr); 2425 grid-template-columns: minmax(0, 1fr);
2515 gap: var(--zenbu-sys-space-icon-label); 2428 gap: var(--zenbu-sys-space-icon-label);
2516 padding: var(--zenbu-sys-padding-sm); 2429 padding: var(--zenbu-sys-padding-sm);
2517 } 2430 }
2518 2431
2519 .jrpg-scene > mjj-jrpg-character { 2432 .jrpg-scene > mjj-jrpg-character {
2433 display: none;
2434 }
2435
2436 .jrpg-scene::before {
2520 display: none; 2437 display: none;
2521 } 2438 }
2522 2439
2523 mjj-jrpg-chat { 2440 mjj-jrpg-chat {
2524 grid-column: 1; 2441 grid-column: 1;
2528 max-height: 100%; 2445 max-height: 100%;
2529 overflow: hidden; 2446 overflow: hidden;
2530 padding: var(--zenbu-sys-padding-sm); 2447 padding: var(--zenbu-sys-padding-sm);
2531 } 2448 }
2532 2449
2533 .jrpg-utility > mjj-conversation-archive { 2450 .jrpg-preview-panel > mjj-conversation-archive {
2534 width: 100%; 2451 width: 100%;
2535 height: 100%; 2452 height: 100%;
2536 max-height: 100%; 2453 max-height: 100%;
2537 overflow: auto; 2454 overflow: auto;
2538 } 2455 }
2539 2456
2540 /* Utility compact padding */
2541 .jrpg-utility {
2542 padding: var(--zenbu-sys-padding-sm);
2543 }
2544
2545 /* Composer: compact single-row within aperture */ 2457 /* Composer: compact single-row within aperture */
2546 .jrpg-composer { 2458 .jrpg-workspace > mjj-composer {
2547 gap: var(--zenbu-sys-space-icon-label); 2459 padding: var(--zenbu-sys-space-icon-label);
2548 padding: var(--zenbu-sys-padding-sm);
2549 } 2460 }
2550 2461
2551 .jrpg-composer-hint { 2462 .jrpg-composer-hint {
2552 display: none; 2463 display: none;
2553 }
2554
2555 /* Menu compact: single column stacking */
2556 .jrpg-workspace > mjj-jrpg-menu {
2557 padding: var(--zenbu-sys-padding-xs, var(--zenbu-sys-padding-sm));
2558 overflow-y: auto;
2559 scrollbar-width: thin;
2560 } 2464 }
2561 2465
2562 mjj-jrpg-menu nav { 2466 mjj-jrpg-menu nav {
2563 height: 100%; 2467 height: 100%;
2564 grid-template-columns: 1fr; 2468 grid-template-columns: 1fr;
2578 padding-block: 0; 2482 padding-block: 0;
2579 padding-inline: var(--zenbu-control-padding-inline); 2483 padding-inline: var(--zenbu-control-padding-inline);
2580 font-size: var(--zenbu-sys-font-size-xs); 2484 font-size: var(--zenbu-sys-font-size-xs);
2581 } 2485 }
2582 2486
2583 mjj-jrpg-menu[data-mobile-menu-collapsed] {
2584 overflow: hidden;
2585 }
2586
2587 mjj-jrpg-menu[data-mobile-menu-collapsed] nav {
2588 display: grid;
2589 place-items: center;
2590 }
2591
2592 mjj-jrpg-menu[data-mobile-menu-collapsed] .jrpg-menu-label {
2593 display: block;
2594 writing-mode: initial;
2595 }
2596
2597 mjj-jrpg-menu[data-mobile-menu-collapsed] ul {
2598 display: none;
2599 }
2600
2601 /* Preview panel compact for narrow utility aperture */ 2487 /* Preview panel compact for narrow utility aperture */
2602 .jrpg-preview-panel { 2488 .jrpg-preview-panel {
2603 gap: var(--zenbu-sys-space-icon-label);
2604 padding: var(--zenbu-sys-padding-sm); 2489 padding: var(--zenbu-sys-padding-sm);
2605 overflow-y: auto; 2490 overflow-y: auto;
2606 } 2491 }
2607 2492
2493 .jrpg-preview-content {
2494 gap: var(--zenbu-sys-space-icon-label);
2495 }
2496
2608 .jrpg-preview-panel h2 { 2497 .jrpg-preview-panel h2 {
2609 font-size: var(--zenbu-sys-font-size-sm); 2498 font-size: var(--zenbu-sys-font-size-sm);
2610 } 2499 }
2611 2500
2612 .jrpg-preview-panel > p { 2501 .jrpg-preview-content > p {
2613 font-size: var(--zenbu-sys-font-size-xs); 2502 font-size: var(--zenbu-sys-font-size-xs);
2614 display: -webkit-box; 2503 display: -webkit-box;
2615 -webkit-line-clamp: 2; 2504 -webkit-line-clamp: 2;
2616 -webkit-box-orient: vertical; 2505 -webkit-box-orient: vertical;
2617 overflow: hidden; 2506 overflow: hidden;