viberoom 0.6.1 → 0.7.0

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.
Files changed (107) hide show
  1. package/NOTICE +14 -0
  2. package/dist/hub.js +45 -4
  3. package/package.json +1 -1
  4. package/ui/app.css +131 -107
  5. package/ui/app.js +334 -87
  6. package/ui/avatars.js +7 -14
  7. package/ui/components.css +116 -21
  8. package/ui/components.js +202 -1
  9. package/ui/fonts/anonymous-pro-cyrillic-400.woff2 +0 -0
  10. package/ui/fonts/anonymous-pro-cyrillic-700.woff2 +0 -0
  11. package/ui/fonts/anonymous-pro-latin-400.woff2 +0 -0
  12. package/ui/fonts/anonymous-pro-latin-700.woff2 +0 -0
  13. package/ui/fonts/anonymous-pro-latin-ext-400.woff2 +0 -0
  14. package/ui/fonts/anonymous-pro-latin-ext-700.woff2 +0 -0
  15. package/ui/fonts/anonymous-pro.css +7 -0
  16. package/ui/fonts/cascadia-code-cyrillic-ext.woff2 +0 -0
  17. package/ui/fonts/cascadia-code-cyrillic.woff2 +0 -0
  18. package/ui/fonts/cascadia-code-latin-ext.woff2 +0 -0
  19. package/ui/fonts/cascadia-code-latin.woff2 +0 -0
  20. package/ui/fonts/cascadia-code.css +5 -0
  21. package/ui/fonts/comfortaa-cyrillic-ext.woff2 +0 -0
  22. package/ui/fonts/comfortaa-cyrillic.woff2 +0 -0
  23. package/ui/fonts/comfortaa-latin-ext.woff2 +0 -0
  24. package/ui/fonts/comfortaa-latin.woff2 +0 -0
  25. package/ui/fonts/comfortaa.css +5 -0
  26. package/ui/fonts/exo-2-cyrillic-ext.woff2 +0 -0
  27. package/ui/fonts/exo-2-cyrillic.woff2 +0 -0
  28. package/ui/fonts/exo-2-latin-ext.woff2 +0 -0
  29. package/ui/fonts/exo-2-latin.woff2 +0 -0
  30. package/ui/fonts/exo-2.css +5 -0
  31. package/ui/fonts/golos-text-cyrillic-ext.woff2 +0 -0
  32. package/ui/fonts/golos-text-cyrillic.woff2 +0 -0
  33. package/ui/fonts/golos-text-latin-ext.woff2 +0 -0
  34. package/ui/fonts/golos-text-latin.woff2 +0 -0
  35. package/ui/fonts/golos-text.css +5 -0
  36. package/ui/fonts/ibm-plex-mono-cyrillic-400.woff2 +0 -0
  37. package/ui/fonts/ibm-plex-mono-cyrillic-600.woff2 +0 -0
  38. package/ui/fonts/ibm-plex-mono-cyrillic-700.woff2 +0 -0
  39. package/ui/fonts/ibm-plex-mono-cyrillic-ext-400.woff2 +0 -0
  40. package/ui/fonts/ibm-plex-mono-cyrillic-ext-600.woff2 +0 -0
  41. package/ui/fonts/ibm-plex-mono-cyrillic-ext-700.woff2 +0 -0
  42. package/ui/fonts/ibm-plex-mono-latin-400.woff2 +0 -0
  43. package/ui/fonts/ibm-plex-mono-latin-600.woff2 +0 -0
  44. package/ui/fonts/ibm-plex-mono-latin-700.woff2 +0 -0
  45. package/ui/fonts/ibm-plex-mono-latin-ext-400.woff2 +0 -0
  46. package/ui/fonts/ibm-plex-mono-latin-ext-600.woff2 +0 -0
  47. package/ui/fonts/ibm-plex-mono-latin-ext-700.woff2 +0 -0
  48. package/ui/fonts/ibm-plex-mono.css +13 -0
  49. package/ui/fonts/ibm-plex-sans-cyrillic-400.woff2 +0 -0
  50. package/ui/fonts/ibm-plex-sans-cyrillic-600.woff2 +0 -0
  51. package/ui/fonts/ibm-plex-sans-cyrillic-700.woff2 +0 -0
  52. package/ui/fonts/ibm-plex-sans-cyrillic-ext-400.woff2 +0 -0
  53. package/ui/fonts/ibm-plex-sans-cyrillic-ext-600.woff2 +0 -0
  54. package/ui/fonts/ibm-plex-sans-cyrillic-ext-700.woff2 +0 -0
  55. package/ui/fonts/ibm-plex-sans-latin-400.woff2 +0 -0
  56. package/ui/fonts/ibm-plex-sans-latin-600.woff2 +0 -0
  57. package/ui/fonts/ibm-plex-sans-latin-700.woff2 +0 -0
  58. package/ui/fonts/ibm-plex-sans-latin-ext-400.woff2 +0 -0
  59. package/ui/fonts/ibm-plex-sans-latin-ext-600.woff2 +0 -0
  60. package/ui/fonts/ibm-plex-sans-latin-ext-700.woff2 +0 -0
  61. package/ui/fonts/ibm-plex-sans.css +13 -0
  62. package/ui/fonts/manrope-cyrillic-ext.woff2 +0 -0
  63. package/ui/fonts/manrope-cyrillic.woff2 +0 -0
  64. package/ui/fonts/manrope-latin-ext.woff2 +0 -0
  65. package/ui/fonts/manrope-latin.woff2 +0 -0
  66. package/ui/fonts/manrope.css +5 -0
  67. package/ui/fonts/montserrat-cyrillic-ext.woff2 +0 -0
  68. package/ui/fonts/montserrat-cyrillic.woff2 +0 -0
  69. package/ui/fonts/montserrat-latin-ext.woff2 +0 -0
  70. package/ui/fonts/montserrat-latin.woff2 +0 -0
  71. package/ui/fonts/montserrat.css +5 -0
  72. package/ui/fonts/open-sans-cyrillic-ext.woff2 +0 -0
  73. package/ui/fonts/open-sans-cyrillic.woff2 +0 -0
  74. package/ui/fonts/open-sans-latin-ext.woff2 +0 -0
  75. package/ui/fonts/open-sans-latin.woff2 +0 -0
  76. package/ui/fonts/open-sans.css +5 -0
  77. package/ui/fonts/pt-mono-cyrillic-ext.woff2 +0 -0
  78. package/ui/fonts/pt-mono-cyrillic.woff2 +0 -0
  79. package/ui/fonts/pt-mono-latin-ext.woff2 +0 -0
  80. package/ui/fonts/pt-mono-latin.woff2 +0 -0
  81. package/ui/fonts/pt-mono.css +5 -0
  82. package/ui/fonts/rubik-cyrillic-ext.woff2 +0 -0
  83. package/ui/fonts/rubik-cyrillic.woff2 +0 -0
  84. package/ui/fonts/rubik-latin-ext.woff2 +0 -0
  85. package/ui/fonts/rubik-latin.woff2 +0 -0
  86. package/ui/fonts/rubik.css +5 -0
  87. package/ui/fonts/source-sans-3-cyrillic-ext.woff2 +0 -0
  88. package/ui/fonts/source-sans-3-cyrillic.woff2 +0 -0
  89. package/ui/fonts/source-sans-3-latin-ext.woff2 +0 -0
  90. package/ui/fonts/source-sans-3-latin.woff2 +0 -0
  91. package/ui/fonts/source-sans-3.css +5 -0
  92. package/ui/fonts/ubuntu-sans-cyrillic-ext.woff2 +0 -0
  93. package/ui/fonts/ubuntu-sans-cyrillic.woff2 +0 -0
  94. package/ui/fonts/ubuntu-sans-latin-ext.woff2 +0 -0
  95. package/ui/fonts/ubuntu-sans-latin.woff2 +0 -0
  96. package/ui/fonts/ubuntu-sans.css +5 -0
  97. package/ui/fonts/victor-mono-cyrillic-ext.woff2 +0 -0
  98. package/ui/fonts/victor-mono-cyrillic.woff2 +0 -0
  99. package/ui/fonts/victor-mono-latin-ext.woff2 +0 -0
  100. package/ui/fonts/victor-mono-latin.woff2 +0 -0
  101. package/ui/fonts/victor-mono.css +5 -0
  102. package/ui/index.html +15 -6
  103. package/ui/looks.css +2446 -0
  104. package/ui/manifest.json +3 -3
  105. package/ui/theme.css +114 -84
  106. package/ui/tokens.js +315 -29
  107. package/ui/ui.js +2 -0
package/ui/app.css CHANGED
@@ -16,8 +16,8 @@
16
16
  .shell.resizing { user-select: none; cursor: col-resize; }
17
17
  .rail { grid-area: rail; position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 8px 0 4px; min-height: 0; }
18
18
  .rail-head { display: flex; align-items: center; margin-bottom: 14px; padding: 0 14px; }
19
- .rail-logo { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; margin: 0; color: var(--ink); font-weight: 800; font-size: calc(18px * var(--fs-scale)); white-space: nowrap; border-radius: 14px; }
20
- .rail-logo .mark { width: 44px; height: 44px; border-radius: 14px; flex: none; display: block; box-shadow: var(--rail-logo-shadow); }
19
+ .rail-logo { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; margin: 0; color: var(--ink); font-weight: 800; font-size: calc(18px * var(--fs-scale)); white-space: nowrap; border-radius: calc(14px * var(--r-scale)); }
20
+ .rail-logo .mark { width: 44px; height: 44px; border-radius: calc(14px * var(--r-scale)); flex: none; display: block; box-shadow: var(--rail-logo-shadow); }
21
21
  .rail-logo .word, .rail-item .label, .rail .conn-label { opacity: 0; width: 0; overflow: hidden; transition: opacity var(--t-base) var(--ease-out), width var(--t-base) var(--ease-out); white-space: nowrap; }
22
22
  .shell.rail-open .rail-logo .word, .shell.rail-open .rail-item .label, .shell.rail-open .rail .conn-label { opacity: 1; width: auto; }
23
23
  .rail-items { display: flex; flex-direction: column; gap: 10px; align-items: center; flex: 1 1 auto; min-height: 0; }
@@ -30,23 +30,23 @@
30
30
  @supports not selector(::-webkit-scrollbar) { .rail-rooms { scrollbar-width: thin; } }
31
31
  .shell.rail-open .rail-rooms { align-items: stretch; }
32
32
  .rail-room { flex: none; }
33
- .rail-room .room-mark { width: 40px; height: 40px; border-radius: 13px; font-size: 16px; opacity: 0.72; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
34
- .rail-room .room-mark.emoji { font-size: 21px; }
35
- .rail-room:hover .room-mark { opacity: 1; transform: translateY(-1px); }
33
+ .rail-room [data-ui="room-mark"] { width: 40px; height: 40px; border-radius: calc(13px * var(--r-scale)); font-size: 16px; opacity: 0.72; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
34
+ .rail-room [data-ui="room-mark"][data-kind="emoji"] { font-size: 21px; }
35
+ .rail-room:hover [data-ui="room-mark"] { opacity: 1; transform: translateY(-1px); }
36
36
  .rail-room.active, .rail-room.active:hover { background: transparent; box-shadow: none; }
37
- .rail-room.active .room-mark { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); }
37
+ .rail-room.active [data-ui="room-mark"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); }
38
38
  .rail-room .rail-count { background: var(--unread-grad); min-width: 18px; text-align: center; z-index: 2; }
39
39
  .rail-room .rail-count.bump { animation: badge-pop 360ms var(--ease-pop); }
40
40
  @keyframes badge-pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
41
41
  .shell.rail-open .rail-items { align-items: stretch; padding: 0 14px; }
42
42
  .shell:not(.rail-open) .rail-item, .shell:not(.rail-open) .rail-logo { gap: 0; }
43
43
  .rail-item.new:hover { background: var(--rail-active-bg); color: var(--primary); box-shadow: var(--shadow-tile); }
44
- .rail-toggle { width: 44px; height: 24px; margin-top: 8px; border-radius: 8px; border: 0; background: transparent; color: var(--faint); display: grid; place-content: center; padding: 0; align-self: center; transition: background var(--t-fast), color var(--t-fast); }
44
+ .rail-toggle { width: 44px; height: 24px; margin-top: 8px; border-radius: calc(8px * var(--r-scale)); border: 0; background: transparent; color: var(--faint); display: grid; place-content: center; padding: 0; align-self: center; transition: background var(--t-fast), color var(--t-fast); }
45
45
  .rail-toggle .i { width: 16px; height: 16px; }
46
46
  .rail-toggle:hover { background: var(--rail-active-bg); color: var(--primary); }
47
47
  .rail-foot { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 0; align-items: center; }
48
- .update-pop { position: absolute; left: 12px; bottom: calc(100% - 2px); z-index: 30; display: flex; gap: 6px; align-items: flex-start; width: 250px; padding: 10px 8px 10px 14px; background: var(--pop-bg); border-radius: 18px 18px 18px 6px; box-shadow: var(--pop-shadow), var(--shadow-tile); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--ink-2); animation: bubble-in 0.45s var(--ease-out); }
49
- .update-pop::after { content: ""; position: absolute; left: 14px; bottom: -6px; width: 12px; height: 12px; background: var(--pop-bg); border-radius: 0 0 3px 0; transform: rotate(45deg); box-shadow: var(--pop-arrow-shadow); }
48
+ .update-pop { position: absolute; left: 12px; bottom: calc(100% - 2px); z-index: 30; display: flex; gap: 6px; align-items: flex-start; width: 250px; padding: 10px 8px 10px 14px; background: var(--pop-bg); border-radius: calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) calc(6px * var(--r-scale)); box-shadow: var(--pop-shadow), var(--shadow-tile); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--ink-2); animation: bubble-in 0.45s var(--ease-out); }
49
+ .update-pop::after { content: ""; position: absolute; left: 14px; bottom: -6px; width: 12px; height: 12px; background: var(--pop-bg); border-radius: 0 0 calc(3px * var(--r-scale)) 0; transform: rotate(45deg); box-shadow: var(--pop-arrow-shadow); }
50
50
  .update-pop .up-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
51
51
  .update-pop .up-text { line-height: 1.4; }
52
52
  .update-pop .up-text b { color: var(--ink); }
@@ -54,7 +54,7 @@
54
54
  .update-pop .up-side { flex: none; display: flex; flex-direction: column; gap: 2px; }
55
55
  .update-pop [data-ui="icon-button"] { width: 26px; height: 26px; }
56
56
  .shell.rail-open .rail-foot { align-items: stretch; padding: 0 14px; }
57
- .rail-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: 14px; color: var(--muted); font-weight: 800; font-size: calc(13px * var(--fs-scale)); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
57
+ .rail-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: calc(14px * var(--r-scale)); color: var(--muted); font-weight: 800; font-size: calc(13px * var(--fs-scale)); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
58
58
  .shell.rail-open .rail-item { width: auto; justify-content: flex-start; padding: 0 12px 0 0; }
59
59
  .rail-item .ico { width: 44px; height: 44px; display: grid; place-content: center; flex: none; }
60
60
  .rail-item .ico .i { width: 22px; height: 22px; }
@@ -62,12 +62,11 @@
62
62
  .rail-item.active { background: var(--rail-active-bg); color: var(--primary); box-shadow: var(--shadow-tile); }
63
63
  .rail-item.me { background: var(--rail-active-bg); box-shadow: var(--shadow-tile); }
64
64
  .rail-item.me .ico .avatar { display: block; }
65
- .rail-item.me .ico .av-tile { background: transparent !important; }
66
65
  .rail-count { position: absolute; top: -4px; right: -4px; background: var(--primary); color: var(--tile-count-ink); border-radius: var(--r-pill); font-size: calc(10px * var(--fs-scale)); padding: 0 6px; font-weight: 800; line-height: calc(16px * var(--fs-scale)); box-shadow: 0 0 0 2px var(--bg); }
67
66
  .shell.rail-open .rail-count { position: static; margin-left: auto; box-shadow: none; }
68
67
  .rail-status { position: relative; height: 0; width: 44px; align-self: center; }
69
68
  .shell.rail-open .rail-status { width: auto; height: auto; display: flex; align-items: center; gap: 8px; padding: 8px 0 0 14px; color: var(--muted); font-size: calc(11px * var(--fs-scale)); font-weight: 700; }
70
- .rail .conn { position: absolute; right: -3px; top: -11px; width: 14px; height: 14px; border-radius: 50%; background: var(--faint); border: 3px solid var(--bg); transition: background var(--t-base); }
69
+ .rail .conn { position: absolute; right: -3px; top: -11px; width: 14px; height: 14px; border-radius: calc(50% * var(--r-scale)); background: var(--faint); border: 3px solid var(--bg); transition: background var(--t-base); }
71
70
  .shell.rail-open .rail .conn { position: static; width: 9px; height: 9px; border: 0; }
72
71
  .rail .conn.ok { background: var(--green); }
73
72
  .side { grid-area: side; background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--edge); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
@@ -91,7 +90,7 @@
91
90
  .side-actions { padding: 8px 14px 6px; }
92
91
  .side-label { padding: 12px 20px 6px; font-size: calc(11px * var(--fs-scale)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 800; }
93
92
  .side-list { list-style: none; margin: 0; padding: 4px 14px 10px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
94
- .side-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; cursor: pointer; transition: background var(--t-fast); animation: slide-in-left var(--t-base) var(--ease-out); }
93
+ .side-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: calc(14px * var(--r-scale)); cursor: pointer; transition: background var(--t-fast); animation: slide-in-left var(--t-base) var(--ease-out); }
95
94
  .participants .avatar.has-life { cursor: pointer; }
96
95
  .participants li { position: relative; }
97
96
  .participants [data-ui="row-button"] { position: absolute; right: 6px; opacity: 0; }
@@ -105,8 +104,9 @@
105
104
  .shell.side-collapsed .participants [data-ui="row-button"][data-act="panel"] { right: auto; left: 0; }
106
105
  .shell.side-collapsed .participants [data-ui="row-button"][data-act="last-reply"] { top: 4px; right: 0; }
107
106
  .shell.side-collapsed .participants li.offline { min-height: 0; align-items: center; padding-top: 8px; }
108
- .participants .life-q { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--tile-badge-bg); color: var(--muted); font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow-tile); }
109
- .participants .avatar .life { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; overflow: visible; }
107
+ .participants .life-q { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: calc(50% * var(--r-scale)); background: var(--tile-badge-bg); color: var(--muted); font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow-tile); }
108
+ .participants .avatar { isolation: isolate; }
109
+ .participants .avatar .life { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; overflow: visible; z-index: 1; }
110
110
  .life path { fill: none; stroke-width: 3; }
111
111
  .life .life-track { stroke: var(--softer); }
112
112
  .life-unknown .life-track { stroke: var(--softer); stroke-width: 2; stroke-dasharray: 1 4; stroke-linecap: round; }
@@ -119,8 +119,8 @@
119
119
  .lp-event { display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fs-scale)); font-weight: 700; color: var(--muted); }
120
120
  .lp-event.fresh { color: var(--attention-ink); }
121
121
  .lp-event .i { width: 14px; height: 14px; flex: none; }
122
- .life-pop { position: fixed; z-index: 60; display: flex; gap: 6px; align-items: flex-start; width: calc(330px * var(--fs-scale)); max-width: 94vw; padding: 12px 8px 12px 14px; background: var(--pop-bg); border-radius: 6px 18px 18px 18px; box-shadow: var(--shadow-pop); font-size: calc(13px * var(--fs-scale)); animation: bubble-in var(--t-base) var(--ease-out); }
123
- .life-pop::before { content: ""; position: absolute; left: -6px; top: 18px; width: 12px; height: 12px; background: var(--pop-bg); border-radius: 0 0 0 3px; transform: rotate(45deg); }
122
+ .life-pop { position: fixed; z-index: 60; display: flex; gap: 6px; align-items: flex-start; width: calc(330px * var(--fs-scale)); max-width: 94vw; padding: 12px 8px 12px 14px; background: var(--pop-bg); border-radius: calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); box-shadow: var(--shadow-pop); font-size: calc(13px * var(--fs-scale)); animation: bubble-in var(--t-base) var(--ease-out); }
123
+ .life-pop::before { content: ""; position: absolute; left: -6px; top: 18px; width: 12px; height: 12px; background: var(--pop-bg); border-radius: 0 0 0 calc(3px * var(--r-scale)); transform: rotate(45deg); }
124
124
  .life-pop .lp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
125
125
  .life-pop .lp-side { flex: none; display: flex; flex-direction: column; gap: 2px; }
126
126
  .life-pop [data-ui="icon-button"] { width: 26px; height: 26px; }
@@ -128,8 +128,8 @@
128
128
  .lp-head b { font-size: calc(14px * var(--fs-scale)); }
129
129
  .lp-sub { color: var(--muted); font-size: calc(12px * var(--fs-scale)); font-weight: 600; margin-top: 2px; }
130
130
  .lp-sub b { color: var(--ink); }
131
- .life-bar { height: 6px; border-radius: 3px; background: var(--softer); overflow: hidden; }
132
- .life-bar i { display: block; height: 100%; border-radius: 3px; transition: width var(--t-base) var(--ease-out); }
131
+ .life-bar { height: 6px; border-radius: calc(3px * var(--r-scale)); background: var(--softer); overflow: hidden; }
132
+ .life-bar i { display: block; height: 100%; border-radius: calc(3px * var(--r-scale)); transition: width var(--t-base) var(--ease-out); }
133
133
  .life-bar.life-ok i, .life-bar.life-fresh i { background: var(--st-ready-dot); }
134
134
  .life-bar.life-warm i { background: var(--st-thinking-dot); }
135
135
  .life-bar.life-hot i { background: var(--st-error-dot); }
@@ -139,7 +139,7 @@
139
139
  .lp-kv .link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; }
140
140
  .lp-kv .link-btn:disabled { color: var(--muted); cursor: default; }
141
141
  .lp-kv .taking { color: var(--primary); font-weight: 700; }
142
- .lp-kv .taking i { display: inline-block; width: 4px; height: 4px; margin-left: 3px; border-radius: 50%; background: var(--primary); opacity: 0.25; animation: think 1.4s ease-in-out infinite; }
142
+ .lp-kv .taking i { display: inline-block; width: 4px; height: 4px; margin-left: 3px; border-radius: calc(50% * var(--r-scale)); background: var(--primary); opacity: 0.25; animation: think 1.4s ease-in-out infinite; }
143
143
  .lp-kv .taking i:nth-child(2) { animation-delay: 0.2s; }
144
144
  .lp-kv .taking i:nth-child(3) { animation-delay: 0.4s; }
145
145
  .slow-table { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--fs-scale)); margin-bottom: 8px; }
@@ -147,13 +147,12 @@
147
147
  .slow-table td:last-child { white-space: normal; }
148
148
  .lp-editor { display: flex; flex-direction: column; gap: 6px; }
149
149
  .lp-editor textarea { width: 100%; box-sizing: border-box; font: 600 calc(12px * var(--fs-scale))/1.45 var(--font); }
150
- .lp-notes { margin: 0; padding: 8px 10px; background: var(--soft); border-radius: 10px; font: 600 calc(12px * var(--fs-scale))/1.45 var(--font); white-space: pre-wrap; max-height: 140px; overflow: auto; color: var(--ink-2); }
150
+ .lp-notes { margin: 0; padding: 8px 10px; background: var(--soft); border-radius: calc(10px * var(--r-scale)); font: 600 calc(12px * var(--fs-scale))/1.45 var(--font); white-space: pre-wrap; max-height: 140px; overflow: auto; color: var(--ink-2); }
151
151
  .lp-respawn { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
152
152
  .lp-with { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--muted); }
153
153
  .lp-with input { width: 58px; padding: 4px 6px; margin: 0; }
154
154
  .side-list li:hover { background: var(--soft); }
155
155
  .side-list li.selected { background: var(--lav); }
156
- .side-list li.offline .avatar .av-tile { filter: grayscale(0.6); opacity: 0.8; }
157
156
  .side-list .p-body { flex: 1; min-width: 0; }
158
157
  .side-list .p-name { font-weight: 800; display: flex; align-items: center; gap: 6px; font-size: calc(14px * var(--fs-scale)); min-width: 0; }
159
158
  .side-list .p-name > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -178,7 +177,7 @@
178
177
  .shell.side-collapsed.view-room.rail-open { grid-template-columns: var(--rail-w-open) 72px minmax(0, 1fr) auto; }
179
178
  .shell.side-collapsed .side-room .side-room-title, .shell.side-collapsed .side-room #back-to-rooms, .shell.side-collapsed .side-room #room-settings-btn, .shell.side-collapsed .side-label, .shell.side-collapsed .participants .p-body, .shell.side-collapsed .participants .p-actions, .shell.side-collapsed .side-room .label { display: none; }
180
179
  .shell.side-collapsed .side-head.room { justify-content: center; padding: 12px 6px 4px; }
181
- .shell.side-collapsed .side-actions { padding: 4px 10px 6px; }
180
+ .shell.side-collapsed .side-actions { padding: 4px 0 6px; display: flex; justify-content: center; }
182
181
  .shell.side-collapsed .side-room [data-ui="button"] { padding: 0; width: 44px; height: 44px; margin: 0 auto; justify-content: center; gap: 0; }
183
182
  .shell.side-collapsed .participants { padding: 4px 8px; }
184
183
  .shell.side-collapsed .participants li { justify-content: center; padding: 6px 0; gap: 0; }
@@ -198,8 +197,8 @@
198
197
  .room-card .rc-dir { font-family: var(--mono); font-size: calc(10.5px * var(--fs-scale)); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
199
198
  .home { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 28px; animation: fade-in var(--t-base) var(--ease-out); }
200
199
  .home-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
201
- .hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 24px; align-items: center; padding: 34px 36px; border-radius: 24px; color: var(--hero-ink); background: var(--hero-bg); box-shadow: var(--hero-shadow); }
202
- .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; background: var(--hero-blob-a); pointer-events: none; }
200
+ .hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 24px; align-items: center; padding: 34px 36px; border-radius: calc(24px * var(--r-scale)); color: var(--hero-ink); background: var(--hero-bg); box-shadow: var(--hero-shadow); }
201
+ .hero::before, .hero::after { content: ""; position: absolute; border-radius: calc(50% * var(--r-scale)); background: var(--hero-blob-a); pointer-events: none; }
203
202
  .hero::before { width: 320px; height: 320px; right: -80px; top: -140px; }
204
203
  .hero::after { width: 220px; height: 220px; left: 40%; bottom: -150px; background: var(--hero-blob-b); }
205
204
  .hero-text { position: relative; z-index: 1; min-width: 0; }
@@ -209,14 +208,14 @@
209
208
  .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
210
209
  .hero-cta { background: var(--hero-cta-bg); color: var(--primary); box-shadow: var(--hero-cta-shadow); }
211
210
  .hero-cta:hover:not(:disabled) { background: var(--hero-cta-bg); color: var(--primary); transform: translateY(-1px); }
212
- .hero-ghost { height: 46px; padding: 0 18px; border-radius: 14px; background: var(--hero-ghost-bg); color: var(--hero-ink); }
211
+ .hero-ghost { height: 46px; padding: 0 18px; border-radius: calc(14px * var(--r-scale)); background: var(--hero-ghost-bg); color: var(--hero-ink); }
213
212
  .hero-ghost:hover:not(:disabled) { background: var(--hero-ghost-hover-bg); color: var(--hero-ink); }
214
213
  .hero-art { position: relative; z-index: 1; min-height: 190px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
215
- .ha-bubble { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; font-size: calc(13px * var(--fs-scale)); font-weight: 700; width: fit-content; max-width: 100%; box-shadow: var(--hero-bubble-shadow); animation: pop var(--t-slow) var(--ease-out) both; }
216
- .ha-face { width: 30px; height: 30px; border-radius: 10px; display: grid; place-content: center; font-size: 17px; background: var(--hero-face-bg); flex: none; }
217
- .ha-a { background: var(--hero-bubble-1-bg); color: var(--ink); align-self: flex-end; border-bottom-right-radius: 6px; }
218
- .ha-b { background: var(--hero-bubble-2-bg); color: var(--hero-bubble-2-ink); border-bottom-left-radius: 6px; animation-delay: 0.12s; }
219
- .ha-c { background: var(--hero-bubble-3-bg); color: var(--hero-bubble-3-ink); align-self: flex-end; border-bottom-right-radius: 6px; animation-delay: 0.24s; }
214
+ .ha-bubble { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: calc(18px * var(--r-scale)); font-size: calc(13px * var(--fs-scale)); font-weight: 700; width: fit-content; max-width: 100%; box-shadow: var(--hero-bubble-shadow); animation: pop var(--t-slow) var(--ease-out) both; }
215
+ .ha-face { width: 30px; height: 30px; border-radius: calc(10px * var(--r-scale)); display: grid; place-content: center; font-size: 17px; background: var(--hero-face-bg); flex: none; }
216
+ .ha-a { background: var(--hero-bubble-1-bg); color: var(--ink); align-self: flex-end; border-bottom-right-radius: calc(6px * var(--r-scale)); }
217
+ .ha-b { background: var(--hero-bubble-2-bg); color: var(--hero-bubble-2-ink); border-bottom-left-radius: calc(6px * var(--r-scale)); animation-delay: 0.12s; }
218
+ .ha-c { background: var(--hero-bubble-3-bg); color: var(--hero-bubble-3-ink); align-self: flex-end; border-bottom-right-radius: calc(6px * var(--r-scale)); animation-delay: 0.24s; }
220
219
  .ha-spark { position: absolute; right: 6px; top: -6px; color: var(--hero-spark); font-size: calc(26px * var(--fs-scale)); animation: pulse 2s ease-in-out infinite; }
221
220
  .home-section { display: flex; flex-direction: column; gap: 12px; }
222
221
  .home-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@@ -224,7 +223,7 @@
224
223
  .home-head .linklike { display: inline-flex; align-items: center; gap: 4px; }
225
224
  .home-head .linklike .i { width: 14px; height: 14px; }
226
225
  .home-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
227
- .home-room { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--soft); text-align: left; min-width: 0; box-shadow: var(--edge); transition: transform var(--t-fast) var(--ease-out), background var(--t-fast); }
226
+ .home-room { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: calc(16px * var(--r-scale)); background: var(--soft); text-align: left; min-width: 0; box-shadow: var(--edge); transition: transform var(--t-fast) var(--ease-out), background var(--t-fast); }
228
227
  .home-room:not(.empty-room):hover { background: var(--lav); transform: translateY(-1px); }
229
228
  .home-room .hr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
230
229
  .home-room .hr-name { font-weight: 800; font-size: calc(14px * var(--fs-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -232,9 +231,9 @@
232
231
  .home-room .hr-time { color: var(--faint); font-size: calc(11px * var(--fs-scale)); font-weight: 700; flex: none; }
233
232
  .home-room.empty-room { cursor: default; }
234
233
  .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
235
- .feature { border-radius: 18px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--edge); transition: transform var(--t-fast) var(--ease-out); }
234
+ .feature { border-radius: calc(18px * var(--r-scale)); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--edge); transition: transform var(--t-fast) var(--ease-out); }
236
235
  .feature:hover { transform: translateY(-2px); }
237
- .feature .f-emoji { width: 46px; height: 46px; border-radius: 14px; background: var(--feature-emoji-bg); display: grid; place-content: center; font-size: 24px; box-shadow: var(--shadow-tile); }
236
+ .feature .f-emoji { width: 46px; height: 46px; border-radius: calc(14px * var(--r-scale)); background: var(--feature-emoji-bg); display: grid; place-content: center; font-size: 24px; box-shadow: var(--shadow-tile); }
238
237
  .feature h3 { font-size: calc(15px * var(--fs-scale)); margin-top: 4px; }
239
238
  .feature p { margin: 0; font-size: calc(13px * var(--fs-scale)); font-weight: 600; line-height: 1.5; color: var(--ink-2); }
240
239
  .feature.lav { background: var(--lav); }
@@ -243,12 +242,11 @@
243
242
  .feature.peach { background: var(--feature-peach-bg); }
244
243
  .feature.rose { background: var(--rose); }
245
244
  .feature.sky { background: var(--sky); }
245
+ .feature.orchid { background: var(--orchid); }
246
246
  .home-vendors { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
247
- .home-vendor .vc-logo { width: 30px; height: 30px; border-radius: 10px; }
248
- .home-vendor .vc-logo img { width: 18px; height: 18px; }
249
247
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
250
- .step { display: flex; gap: 14px; align-items: flex-start; background: var(--step-bg); border-radius: 18px; padding: 16px 18px; box-shadow: var(--edge); }
251
- .step-n { width: 40px; height: 40px; border-radius: 13px; background: var(--grad-primary); color: var(--step-num-ink); font-weight: 800; font-size: 17px; display: grid; place-content: center; flex: none; box-shadow: var(--shadow-primary); }
248
+ .step { display: flex; gap: 14px; align-items: flex-start; background: var(--step-bg); border-radius: calc(18px * var(--r-scale)); padding: 16px 18px; box-shadow: var(--edge); }
249
+ .step-n { width: 40px; height: 40px; border-radius: calc(13px * var(--r-scale)); background: var(--grad-primary); color: var(--step-num-ink); font-weight: 800; font-size: 17px; display: grid; place-content: center; flex: none; box-shadow: var(--shadow-primary); }
252
250
  .step h3 { font-size: calc(15px * var(--fs-scale)); margin-bottom: 4px; }
253
251
  .step p { margin: 0; font-size: calc(13px * var(--fs-scale)); font-weight: 600; line-height: 1.5; color: var(--ink-2); }
254
252
  .tips { display: flex; flex-wrap: wrap; gap: 8px; }
@@ -264,10 +262,10 @@
264
262
  .messages { position: relative; flex: 1; overflow-y: auto; padding: 12px 22px; display: flex; flex-direction: column; gap: 14px; background: var(--canvas-pattern) content-box, var(--grad-canvas); background-size: var(--canvas-pattern-size), auto; }
265
263
  .day { align-self: center; color: var(--faint); font-size: calc(11px * var(--fs-scale)); font-weight: 800; padding: 3px 12px; margin: 2px 0; }
266
264
  .msg { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 100%; animation: bubble-in var(--t-base) var(--ease-out); }
267
- .messages .msg { content-visibility: auto; contain-intrinsic-size: auto 120px; flex-shrink: 0; }
268
- .messages .msgs-page { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; content-visibility: auto; contain-intrinsic-size: auto 6000px; }
269
- .msg.agent { padding-right: 40px; }
270
- .msg.mine { align-items: flex-end; padding-left: 40px; }
265
+ .messages .msg { content-visibility: auto; contain-intrinsic-size: auto 120px; flex-shrink: 0; padding: 0 var(--shadow-room) var(--shadow-room); margin: 0 calc(-1 * var(--shadow-room)) calc(-1 * var(--shadow-room)); max-width: calc(100% + 2 * var(--shadow-room)); }
266
+ .messages .msgs-page { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; content-visibility: auto; contain-intrinsic-size: auto 6000px; padding: 0 var(--shadow-room) var(--shadow-room); margin: 0 calc(-1 * var(--shadow-room)) calc(-1 * var(--shadow-room)); }
267
+ .msg.agent { padding-right: calc(40px + var(--shadow-room)); }
268
+ .msg.mine { align-items: flex-end; padding-left: calc(40px + var(--shadow-room)); }
271
269
  .head-av { display: inline-flex; width: 32px; height: 32px; padding: 4px; box-sizing: content-box; flex: none; }
272
270
  .msg.agent .bubble, .msg.agent .shots { margin-left: 16px; }
273
271
  .msg.agent .meta { margin-left: 16px; padding-left: 0; }
@@ -275,18 +273,21 @@
275
273
  .msg.agent:hover .meta .stats { max-width: 600px; opacity: 1; margin-right: 0; }
276
274
  .msg.agent .meta .seen-by { margin-left: 0; }
277
275
  .msg.mine .bubble, .msg.mine .shots { margin-right: 16px; }
276
+ .bubble { position: relative; }
277
+ .bubble > .pin-mark { position: absolute; top: -9px; right: -9px; transform: rotate(45deg); box-shadow: var(--shadow-tile); z-index: 1; }
278
+ .msg.mine .bubble > .pin-mark { right: auto; left: -9px; transform: rotate(-45deg); }
278
279
  .msg.mine .head { flex-direction: row-reverse; }
279
280
  .msg.system { justify-content: center; }
280
281
  .msg.hidden-by-search { display: none; }
281
282
  .messages.searching .msgs-page { content-visibility: visible; }
282
- .msg.system, .msg.hidden { padding-left: 4px; }
283
+ .msg.system, .msg.hidden { padding-left: calc(4px + var(--shadow-room)); }
283
284
  .bubble-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; max-width: min(1040px, 100%); }
284
285
  .msg.mine .bubble-col { align-items: flex-end; }
285
286
  .shell.side-collapsed .bubble-col { max-width: min(1480px, 100%); }
286
287
  .timeline { position: absolute; right: 6px; top: 78px; bottom: calc(var(--composer-h, 60px) + 36px); width: 18px; z-index: 4; }
287
288
  .tl-ticks { position: absolute; inset: 0; }
288
- .tl-view { position: absolute; left: 2px; right: 2px; border-radius: 6px; background: var(--timeline-view-bg); pointer-events: none; transition: top 80ms linear, height 80ms linear; }
289
- .tl-tick { position: absolute; left: 3px; width: 12px; height: 5px; border-radius: 3px; background: var(--tick-mine); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
289
+ .tl-view { position: absolute; left: 2px; right: 2px; border-radius: calc(6px * var(--r-scale)); background: var(--timeline-view-bg); pointer-events: none; transition: top 80ms linear, height 80ms linear; }
290
+ .tl-tick { position: absolute; left: 3px; width: 12px; height: 5px; border-radius: calc(3px * var(--r-scale)); background: var(--tick-mine); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
290
291
  .tl-tick:hover, .tl-tick.active { background: var(--primary); transform: scaleX(1.25); }
291
292
  .tl-tick.in-view { background: var(--tick-mine-view); }
292
293
  .tl-tick.pinned { background: var(--primary); }
@@ -305,25 +306,25 @@
305
306
  .tl-av { flex: none; width: 16px; height: 16px; margin-top: 1px; }
306
307
  .chat-head { position: relative; }
307
308
  .working-now { position: absolute; left: 22px; bottom: -13px; display: flex; align-items: flex-end; gap: 6px; margin: 0; z-index: 6; }
308
- .wn-av { border: 0; padding: 2px; background: var(--card); border-radius: 50%; box-shadow: var(--shadow-pop); cursor: pointer; line-height: 0; animation: wn-bob 1.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.28s); }
309
+ .wn-av { border: 0; padding: 2px; background: var(--card); border-radius: calc(50% * var(--r-scale)); box-shadow: var(--shadow-pop); cursor: pointer; line-height: 0; animation: wn-bob 1.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.28s); }
309
310
  .wn-av[hidden] { display: none; }
310
311
  @keyframes wn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
311
- .timeline .tl-tick.pinned.i { width: 12px; height: 6px; left: 3px; border-radius: 3px; -webkit-mask: none; mask: none; background: var(--tick, var(--primary)); overflow: visible; }
312
+ .timeline .tl-tick.pinned.i { width: 12px; height: 6px; left: 3px; border-radius: calc(3px * var(--r-scale)); -webkit-mask: none; mask: none; background: var(--tick, var(--primary)); overflow: visible; }
312
313
  .timeline .tl-tick.pinned::after { content: ""; position: absolute; width: 16px; height: 16px; top: -11px; background: var(--tick, var(--primary)); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; filter: drop-shadow(0 0 1px var(--timeline-pin-halo)) drop-shadow(0 0 1px var(--timeline-pin-halo)); pointer-events: none; }
313
314
  .timeline.left .tl-tick.pinned::after { left: -7px; transform: rotate(-45deg); }
314
315
  .timeline:not(.left) .tl-tick.pinned::after { right: -7px; transform: rotate(45deg); }
315
316
  .timeline .tl-tick.pinned:hover, .timeline .tl-tick.pinned.active { transform: none; filter: brightness(0.85); }
316
- .pins-panel { position: absolute; right: 22px; top: 62px; width: 380px; max-height: 60%; overflow: auto; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 30; animation: rise var(--t-base) var(--ease-out); }
317
+ .pins-panel { position: absolute; right: 22px; top: 62px; width: 380px; max-height: 60%; overflow: auto; background: var(--card); border-radius: calc(14px * var(--r-scale)); box-shadow: var(--shadow-pop); padding: 6px; z-index: 30; animation: rise var(--t-base) var(--ease-out); }
317
318
  .pin-row { align-items: center; }
318
319
  .pin-row .tl-text { flex: 1; order: 1; }
319
320
  .pin-row .pin-time { order: 2; }
320
321
  .pin-row .pin-x { order: 4; }
321
322
  .pin-row.mine .tl-av { order: 3; }
322
323
  .pin-time { color: var(--faint); font-size: calc(11px * var(--fs-scale)); font-weight: 600; white-space: nowrap; }
323
- .pin-x { border: 0; background: transparent; color: var(--muted); font-size: calc(16px * var(--fs-scale)); line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 6px; }
324
+ .pin-x { border: 0; background: transparent; color: var(--muted); font-size: calc(16px * var(--fs-scale)); line-height: 1; padding: 0 4px; cursor: pointer; border-radius: calc(6px * var(--r-scale)); }
324
325
  .pin-x:hover { color: var(--danger); background: var(--soft); }
325
- .tl-pop { position: absolute; right: 26px; width: 340px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 30; animation: rise var(--t-base) var(--ease-out); }
326
- .tl-row { padding: 6px 10px; border-radius: 9px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; line-height: 1.4; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
326
+ .tl-pop { position: absolute; right: 26px; width: 340px; background: var(--card); border-radius: calc(14px * var(--r-scale)); box-shadow: var(--shadow-pop); padding: 6px; z-index: 30; animation: rise var(--t-base) var(--ease-out); }
327
+ .tl-row { padding: 6px 10px; border-radius: calc(9px * var(--r-scale)); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; line-height: 1.4; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
327
328
  .tl-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
328
329
  .tl-row.faded { color: var(--muted); opacity: 0.8; }
329
330
  .tl-row.far { opacity: 0.5; }
@@ -344,7 +345,7 @@
344
345
  @keyframes sign-bob-up { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-2.5px); } }
345
346
  .jump-latest:hover { background: var(--soft); }
346
347
  .done-notes { position: absolute; left: 30px; bottom: 96px; z-index: 5; display: flex; flex-direction: column-reverse; gap: 6px; }
347
- .done-note { display: inline-flex; align-items: center; gap: 8px; max-width: 230px; padding: 6px 12px 6px 8px; border: 0; border-radius: 14px; background: var(--done); color: var(--done-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-pop); animation: rise var(--t-base) var(--ease-out); overflow: hidden; }
348
+ .done-note { display: inline-flex; align-items: center; gap: 8px; max-width: 230px; padding: 6px 12px 6px 8px; border: 0; border-radius: calc(14px * var(--r-scale)); background: var(--done); color: var(--done-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-pop); animation: rise var(--t-base) var(--ease-out); overflow: hidden; }
348
349
  .done-note:hover { background: var(--done-hover); }
349
350
  .done-note .avatar { flex: none; }
350
351
  .done-go { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 4px 6px 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@@ -355,14 +356,35 @@
355
356
  .done-text small { font-size: calc(11px * var(--fs-scale)); font-weight: 600; opacity: 0.8; white-space: nowrap; }
356
357
  .done-x { border: 0; background: transparent; color: inherit; opacity: 0.6; font-size: calc(15px * var(--fs-scale)); line-height: 1; padding: 0 9px; cursor: pointer; }
357
358
  .done-x:hover { opacity: 1; background: var(--done-hover); }
358
- .bubble { max-width: 100%; background: var(--bubble-bg); border-radius: 6px 18px 18px 18px; padding: 12px 16px; min-width: 0; font-size: calc(14.5px * var(--fs-scale)); font-weight: 600; line-height: 1.55; color: var(--bubble-ink); box-shadow: var(--bubble-shadow); }
359
- .msg.mine .bubble { background: var(--bubble-mine-bg); color: var(--bubble-mine-ink); border-radius: 18px 6px 18px 18px; box-shadow: var(--bubble-mine-shadow); padding: 11px 16px; }
359
+ .look-preview { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 14px; background: var(--grad-canvas); border: 2px solid var(--lav-2); border-radius: var(--r-md); }
360
+ .look-preview .msg { animation: none; }
361
+ .look-preview .sample-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
362
+ .look-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
363
+ .look-cards [data-ui="look-card"] { width: auto; }
364
+ #look-dialog .look-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 14px; }
365
+ .look-adjust { margin-top: 4px; }
366
+ .look-adjust .adjust-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
367
+ .look-adjust .adjust-head .label { font-size: calc(12px * var(--fs-scale)); font-weight: 800; color: var(--ink-3); }
368
+ .look-adjust > .hint { margin: 2px 0 6px; }
369
+ .adjust-group { padding: 2px 0; }
370
+ .adjust-group h5 { margin: 10px 0 2px; font-size: calc(10.5px * var(--fs-scale)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
371
+ .adjust-group.text .field.row { margin-bottom: 8px; }
372
+ .adjust-group.text .field.row .label .hint { display: block; margin: 2px 0 0; font-weight: 600; }
373
+ .adjust-group.text .field.row [data-ui="number-field"] { width: 104px; flex: none; }
374
+ .adjust-group.text .field.row select { flex: 0 1 58%; }
375
+ .adjust-group.text #sp-chat-sample { margin-top: 4px; }
376
+ .bubble { max-width: 100%; background: var(--bubble-bg); border-radius: calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); padding: 12px 16px; min-width: 0; font-size: calc(14.5px * var(--fs-scale)); font-weight: 600; line-height: 1.55; color: var(--bubble-ink); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-shadow); }
377
+ .msg.mine .bubble { background: var(--bubble-mine-bg); color: var(--bubble-mine-ink); border-radius: calc(18px * var(--r-scale)) calc(6px * var(--r-scale)) calc(18px * var(--r-scale)) calc(18px * var(--r-scale)); box-shadow: inset 0 0 0 1px var(--bubble-border), var(--bubble-mine-shadow); padding: 11px 16px; }
360
378
  .msg.mine .bubble .text { color: var(--bubble-mine-ink); }
361
379
  .msg.mine.waiting .bubble { background: var(--attention-grad); box-shadow: var(--attention-shadow); }
380
+ html[data-look="plush"] .msg .bubble { background-image: var(--bevel); }
381
+ html[data-look="plush"] .msg.mine .bubble { background-image: var(--bevel), var(--bubble-mine-bg); }
382
+ html[data-look="plush"] .composer-box { box-shadow: var(--input-shadow); background: var(--softer); border-radius: calc(14px * var(--r-scale)); padding: 0 12px; }
383
+ html[data-look="plush"] .feature { box-shadow: var(--shadow-card); background-image: var(--bevel); }
362
384
  .bubble .waiting { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bubble-mine-rule); font-size: calc(13px * var(--fs-scale)); font-weight: 600; color: var(--bubble-mine-waiting-ink); }
363
385
  .bubble .waiting .i { width: 14px; height: 14px; vertical-align: -2px; }
364
386
  .bubble .waiting-text { flex: 1; min-width: 160px; }
365
- .msg.mine .mention { background: var(--bubble-mine-chip-bg); color: var(--bubble-mine-ink) !important; padding: 1px 7px; border-radius: 6px; font-weight: 800; }
387
+ .msg.mine .mention { background: var(--bubble-mine-chip-bg); color: var(--bubble-mine-ink) !important; padding: 1px 7px; border-radius: calc(6px * var(--r-scale)); font-weight: 800; }
366
388
  .msg.mine .bubble code { background: var(--bubble-mine-code-bg); color: var(--bubble-mine-ink); }
367
389
  .msg.mine .open-link { color: var(--bubble-mine-ink); text-decoration-color: var(--bubble-mine-link-underline); }
368
390
  .bubble .head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
@@ -406,11 +428,11 @@
406
428
  .tree, .tree ul { list-style: none; margin: 0; padding: 0; }
407
429
  .tree ul { padding-left: 18px; }
408
430
  .tree li { margin: 0; }
409
- .tn { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 2px; border-radius: 8px; cursor: pointer; font-size: calc(13.5px * var(--fs-scale)); font-weight: 700; color: var(--ink-2); white-space: nowrap; user-select: none; }
431
+ .tn { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 2px; border-radius: calc(8px * var(--r-scale)); cursor: pointer; font-size: calc(13.5px * var(--fs-scale)); font-weight: 700; color: var(--ink-2); white-space: nowrap; user-select: none; }
410
432
  .tn:hover { background: var(--lav); }
411
433
  .tn.selected { background: var(--lav-2); color: var(--primary); }
412
434
  .tn.hidden-dir { color: var(--muted); font-weight: 600; }
413
- .tn-tw { flex: 0 0 18px; width: 18px; height: 18px; border: 0; background: transparent; color: var(--muted); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 5px; transition: transform var(--t-fast); }
435
+ .tn-tw { flex: 0 0 18px; width: 18px; height: 18px; border: 0; background: transparent; color: var(--muted); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: calc(5px * var(--r-scale)); transition: transform var(--t-fast); }
414
436
  .tn-tw .i { width: 14px; height: 14px; }
415
437
  .tn-tw:hover { background: var(--card); color: var(--primary); }
416
438
  .tn.open .tn-tw { transform: rotate(90deg); }
@@ -428,9 +450,9 @@
428
450
  .file-dialog .file-head { flex: 0 0 auto; }
429
451
  .file-dialog .file-head .lead { margin-bottom: 10px; overflow-wrap: anywhere; font-family: var(--mono); font-size: calc(12px * var(--fs-scale)); }
430
452
  .file-dialog .actions { flex: 0 0 auto; margin-top: 14px; }
431
- .file-view { flex: 1 1 auto; min-height: 120px; max-height: 62vh; overflow: auto; padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: calc(14px * var(--fs-scale)); font-weight: 600; line-height: 1.55; color: var(--ink-2); }
453
+ .file-view { flex: 1 1 auto; min-height: 120px; max-height: 62vh; overflow: auto; padding: 14px 16px; border-radius: calc(14px * var(--r-scale)); background: var(--bg); font-size: calc(14px * var(--fs-scale)); font-weight: 600; line-height: 1.55; color: var(--ink-2); }
432
454
  .file-view.csv { padding: 0; background: transparent; }
433
- .csv-wrap { overflow: auto; max-height: 58vh; border-radius: 14px; box-shadow: var(--edge); background: var(--card); }
455
+ .csv-wrap { overflow: auto; max-height: 58vh; border-radius: calc(14px * var(--r-scale)); box-shadow: var(--edge); background: var(--card); }
434
456
  table.csv { border-collapse: separate; border-spacing: 0; font-size: calc(13px * var(--fs-scale)); min-width: 100%; }
435
457
  table.csv th, table.csv td { padding: 6px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
436
458
  table.csv th { position: sticky; top: 0; background: var(--lav); font-weight: 800; z-index: 1; }
@@ -440,7 +462,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
440
462
  .bubble [data-act="more"] { font-size: calc(13px * var(--fs-scale)); }
441
463
  .msg.mine .bubble [data-act="more"] { color: var(--bubble-mine-ink); }
442
464
  .bubble .pending { display: inline-flex; align-items: center; gap: 4px; height: 1.55em; vertical-align: text-bottom; }
443
- .bubble .pending i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: 0.25; animation: think 1.4s ease-in-out infinite; }
465
+ .bubble .pending i { width: 5px; height: 5px; border-radius: calc(50% * var(--r-scale)); background: var(--muted); opacity: 0.25; animation: think 1.4s ease-in-out infinite; }
444
466
  .bubble .pending i:nth-child(2) { animation-delay: 0.2s; }
445
467
  .bubble .pending i:nth-child(3) { animation-delay: 0.4s; }
446
468
  @keyframes think { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@@ -459,7 +481,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
459
481
  .agent-notices > [data-ui="reply-note"] { margin: 2px 0 8px; }
460
482
  .bubble > .stop-note { margin: 8px 0 2px; }
461
483
  .tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
462
- .plan { margin: 4px 0 8px; font-size: calc(12px * var(--fs-scale)); font-weight: 600; background: var(--bubble-inset-bg); border-radius: 10px; padding: 8px 10px; }
484
+ .plan { margin: 4px 0 8px; font-size: calc(12px * var(--fs-scale)); font-weight: 600; background: var(--bubble-inset-bg); border-radius: calc(10px * var(--r-scale)); padding: 8px 10px; }
463
485
  .plan-entry.completed { text-decoration: line-through; color: var(--muted); }
464
486
  .plan-entry.in_progress { font-weight: 800; }
465
487
  .meta { color: var(--faint); font-size: calc(11px * var(--fs-scale)); font-weight: 700; padding: 0 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
@@ -481,7 +503,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
481
503
  .msg.mine .edit-box [data-ui="button"][data-kind="ghost"]:hover:not(:disabled) { background: var(--bubble-mine-ghost-hover-bg); color: var(--bubble-mine-ink); }
482
504
  .msg.mine .edit-box [data-ui="button"][data-kind="primary"] { background: var(--bubble-mine-cta-bg); color: var(--bubble-mine-cta-ink); box-shadow: none; }
483
505
  .msg.mine .edit-box [data-ui="button"][data-kind="primary"]:hover:not(:disabled) { background: var(--bubble-mine-cta-bg); color: var(--bubble-mine-cta-ink); }
484
- .edit-area { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 2px solid var(--input-focus-border); border-radius: 12px; background: var(--input-bg); color: var(--ink); font: inherit; font-weight: 600; resize: vertical; }
506
+ .edit-area { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 2px solid var(--input-focus-border); border-radius: calc(12px * var(--r-scale)); background: var(--input-bg); color: var(--ink); font: inherit; font-weight: 600; resize: vertical; }
485
507
  .edit-box .row-btns { margin-top: 6px; }
486
508
  .skill-invoke { font-size: calc(11px * var(--fs-scale)); font-weight: 800; color: var(--primary); background: var(--lav); border-radius: var(--r-pill); padding: 2px 10px; display: inline-block; margin-bottom: 6px; }
487
509
  .msg.mine .skill-invoke { background: var(--bubble-mine-chip-bg); color: var(--bubble-mine-ink); }
@@ -489,7 +511,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
489
511
  .messages [data-ui="ask-card"][data-kind="proposal"] { max-width: 760px; }
490
512
  .prop-why { font-weight: 500; margin: 4px 0 6px; }
491
513
  .prop-diff { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: calc(12px * var(--fs-scale)); font-weight: 500; }
492
- .prop-row { background: var(--bubble-prop-row-bg); border-radius: 8px; padding: 6px 8px; }
514
+ .prop-row { background: var(--bubble-prop-row-bg); border-radius: calc(8px * var(--r-scale)); padding: 6px 8px; }
493
515
  .prop-row > b { font-weight: 800; margin-right: 6px; }
494
516
  .prop-line { margin-top: 2px; white-space: pre-wrap; }
495
517
  .prop-line.add { color: var(--mint-ink); }
@@ -498,32 +520,27 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
498
520
  .prop-to { font-weight: 800; }
499
521
  .prop-warn { margin: 6px 0 0 16px; padding: 0; font-size: calc(12px * var(--fs-scale)); font-weight: 500; color: var(--warm-ink, inherit); }
500
522
  .prop-own { display: flex; gap: 6px; align-items: center; font-size: calc(12px * var(--fs-scale)); font-weight: 600; margin-top: 6px; }
501
- .visibility-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
502
- .visibility-divider .vd-line { flex: 1; height: 8px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><path d='M0 4 Q4 0 8 4 T16 4' fill='none' stroke='%23f472b6' stroke-width='1.6'/></svg>") repeat-x center / 16px 8px; opacity: 0.7; }
503
- .visibility-divider .vd-label { color: var(--unseen-ink); background: var(--unseen-bg); border-radius: var(--r-pill); padding: 4px 12px; font-size: calc(11px * var(--fs-scale)); font-weight: 800; white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
504
523
  .msg.hidden { justify-content: center; }
505
- .hidden-turn { max-width: 720px; width: 100%; background: var(--soft); border-radius: 12px; padding: 6px 12px; font-size: calc(12px * var(--fs-scale)); font-weight: 600; color: var(--muted); }
524
+ .hidden-turn { max-width: 720px; width: 100%; background: var(--soft); border-radius: calc(12px * var(--r-scale)); padding: 6px 12px; font-size: calc(12px * var(--fs-scale)); font-weight: 600; color: var(--muted); }
506
525
  .hidden-turn summary { cursor: pointer; list-style: none; }
507
526
  .hidden-turn summary::-webkit-details-marker { display: none; }
508
527
  .hidden-turn[open] summary { color: var(--ink); }
509
528
  .hidden-body { padding: 6px 0 4px; }
510
529
  .hidden-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: calc(10px * var(--fs-scale)); font-weight: 800; color: var(--faint); margin: 6px 0 2px; }
511
- .hidden-text { white-space: pre-wrap; background: var(--bubble-inset-bg); border-radius: 10px; padding: 8px 10px; color: var(--ink-2); }
530
+ .hidden-text { white-space: pre-wrap; background: var(--bubble-inset-bg); border-radius: calc(10px * var(--r-scale)); padding: 8px 10px; color: var(--ink-2); }
512
531
  .hidden-body ul { margin: 2px 0 0; padding-left: 18px; }
513
532
  .side-foot [data-ui="button"].hush .hush-face { font-size: 22px; line-height: 1; }
514
533
  .meta .sep { color: var(--faint); margin: 0 4px; }
515
534
  .meta.seen { color: var(--primary); font-weight: 800; }
516
535
  .meta .ticks { letter-spacing: -0.15em; margin-right: 4px; }
517
536
  .side-list li.offline .p-name, .side-list li.offline .p-sub { color: var(--muted); }
518
- .side-list li.me .avatar .av-tile, .msg.mine .avatar .av-tile { box-shadow: 0 0 0 2px var(--tile-ring), 0 0 0 4px var(--primary); }
519
- .msg.mine .avatar .av-tile { box-shadow: 0 0 0 2px var(--tile-ring), 0 0 0 3.5px var(--primary); }
520
- .composer { position: relative; display: flex; gap: 10px; padding: 8px 8px 8px 18px; margin: 10px 16px; background: var(--softer); border-radius: 20px; align-items: center; min-height: 60px; transition: box-shadow var(--t-fast); }
537
+ .composer { position: relative; display: flex; gap: 10px; padding: 8px 8px 8px 18px; margin: 10px 16px; background: var(--softer); border-radius: calc(20px * var(--r-scale)); align-items: center; min-height: 60px; transition: box-shadow var(--t-fast); }
521
538
  .composer-grip { position: absolute; left: 24px; right: 24px; top: -6px; height: 12px; cursor: ns-resize; z-index: 3; touch-action: none; }
522
- .composer-grip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--lav-2); opacity: 0; transition: opacity var(--t-fast), background var(--t-fast); }
539
+ .composer-grip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 44px; height: 4px; margin-left: -22px; border-radius: calc(2px * var(--r-scale)); background: var(--lav-2); opacity: 0; transition: opacity var(--t-fast), background var(--t-fast); }
523
540
  .composer-grip:hover::after, .composer.resizing .composer-grip::after { opacity: 1; background: var(--primary); }
524
541
  .composer.resizing { user-select: none; }
525
542
  .composer:focus-within { box-shadow: 0 0 0 2px var(--primary); }
526
- .composer .smile-btn { border: 0; background: transparent; color: var(--placeholder); padding: 0; display: grid; place-content: center; width: 28px; height: 28px; border-radius: 8px; flex: none; }
543
+ .composer .smile-btn { border: 0; background: transparent; color: var(--placeholder); padding: 0; display: grid; place-content: center; width: 28px; height: 28px; border-radius: calc(8px * var(--r-scale)); flex: none; }
527
544
  .composer .smile-btn .i { width: 20px; height: 20px; }
528
545
  .composer .smile-btn:hover { color: var(--primary); }
529
546
  .composer-box { flex: 1; min-width: 0; display: flex; align-items: center; }
@@ -531,21 +548,21 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
531
548
  .composer-box:has(.shots-tray:not([hidden])) textarea { flex: none; }
532
549
  .composer.drop-target { box-shadow: 0 0 0 2px var(--primary); }
533
550
  .shots-tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px; }
534
- .shot-chip { position: relative; display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--attach-thumb-bg); box-shadow: var(--attach-thumb-shadow); }
551
+ .shot-chip { position: relative; display: block; width: 56px; height: 56px; border-radius: calc(10px * var(--r-scale)); overflow: hidden; background: var(--attach-thumb-bg); box-shadow: var(--attach-thumb-shadow); }
535
552
  .shot-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
536
- .shot-drop { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--attach-overlay-bg); color: var(--attach-overlay-ink); font-size: calc(13px * var(--fs-scale)); line-height: 1; padding: 0; cursor: pointer; }
553
+ .shot-drop { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: calc(50% * var(--r-scale)); background: var(--attach-overlay-bg); color: var(--attach-overlay-ink); font-size: calc(13px * var(--fs-scale)); line-height: 1; padding: 0; cursor: pointer; }
537
554
  .shot-drop:hover { background: var(--primary); }
538
- .shot-n { position: absolute; top: 3px; left: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: var(--attach-overlay-bg); color: var(--attach-overlay-ink); font-size: 11px; font-weight: 800; line-height: calc(18px * var(--fs-scale)); text-align: center; pointer-events: none; }
555
+ .shot-n { position: absolute; top: 3px; left: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: calc(6px * var(--r-scale)); background: var(--attach-overlay-bg); color: var(--attach-overlay-ink); font-size: 11px; font-weight: 800; line-height: calc(18px * var(--fs-scale)); text-align: center; pointer-events: none; }
539
556
  .bubble .shots { display: flex; flex-wrap: wrap; gap: 8px; }
540
557
  .bubble .shots:not([hidden]) { margin-top: 8px; }
541
- .bubble .shot { position: relative; display: block; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; line-height: 0; background: var(--attach-thumb-bg); box-shadow: var(--attach-thumb-shadow); cursor: zoom-in; transition: transform var(--t-fast) var(--ease-out); }
558
+ .bubble .shot { position: relative; display: block; width: 72px; height: 72px; padding: 0; border: 0; border-radius: calc(12px * var(--r-scale)); overflow: hidden; line-height: 0; background: var(--attach-thumb-bg); box-shadow: var(--attach-thumb-shadow); cursor: zoom-in; transition: transform var(--t-fast) var(--ease-out); }
542
559
  .bubble .shot:hover { transform: translateY(-1px) scale(1.03); }
543
560
  .bubble .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
544
- .img-ref { display: inline-flex; align-items: center; gap: 3px; vertical-align: -3px; height: 20px; padding: 0 6px 0 4px; margin: 0 1px; border: 0; border-radius: 6px; background: var(--attach-ref-bg); color: inherit; font: inherit; font-size: calc(11px * var(--fs-scale)); font-weight: 800; line-height: calc(20px * var(--fs-scale)); cursor: zoom-in; }
561
+ .img-ref { display: inline-flex; align-items: center; gap: 3px; vertical-align: -3px; height: 20px; padding: 0 6px 0 4px; margin: 0 1px; border: 0; border-radius: calc(6px * var(--r-scale)); background: var(--attach-ref-bg); color: inherit; font: inherit; font-size: calc(11px * var(--fs-scale)); font-weight: 800; line-height: calc(20px * var(--fs-scale)); cursor: zoom-in; }
545
562
  .msg.mine .img-ref { background: var(--attach-mine-ref-bg); }
546
563
  .img-ref svg { width: 14px; height: 14px; }
547
564
  .img-ref:hover { background: var(--primary); color: var(--btn-on-primary); }
548
- .quote { display: block; margin: 8px 0; padding: 6px 10px; border-left: 3px solid var(--lav); border-radius: 0 8px 8px 0; background: var(--soft); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
565
+ .quote { display: block; margin: 8px 0; padding: 6px 10px; border-left: 3px solid var(--lav); border-radius: 0 calc(8px * var(--r-scale)) calc(8px * var(--r-scale)) 0; background: var(--soft); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
549
566
  .quote:hover { background: var(--lav); border-color: var(--primary); }
550
567
  .quote .q-head { display: flex; align-items: center; gap: 4px; font-size: calc(11px * var(--fs-scale)); font-weight: 800; color: var(--muted); margin-bottom: 2px; }
551
568
  .quote .q-head .i { width: 13px; height: 13px; }
@@ -556,18 +573,18 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
556
573
  .msg.mine .bubble .quote .q-head, .msg.mine .bubble .quote .q-when { color: var(--quote-mine-head-ink); }
557
574
  .msg.mine .bubble .quote .q-text { color: var(--quote-mine-text-ink); }
558
575
  .quotes-tray { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px; }
559
- .quote-chip { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; background: var(--soft); font-size: calc(12px * var(--fs-scale)); font-weight: 700; color: var(--ink-2); }
560
- .quote-chip .qc-n { min-width: 16px; height: 16px; border-radius: 5px; background: var(--lav-2); color: var(--ink-2); font-size: 10px; line-height: calc(16px * var(--fs-scale)); text-align: center; flex: none; }
576
+ .quote-chip { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: calc(10px * var(--r-scale)); background: var(--soft); font-size: calc(12px * var(--fs-scale)); font-weight: 700; color: var(--ink-2); }
577
+ .quote-chip .qc-n { min-width: 16px; height: 16px; border-radius: calc(5px * var(--r-scale)); background: var(--lav-2); color: var(--ink-2); font-size: 10px; line-height: calc(16px * var(--fs-scale)); text-align: center; flex: none; }
561
578
  .quote-chip .qc-text { color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
562
579
  .quote-chip .qc-drop { margin-left: auto; border: 0; background: none; color: var(--faint); font-size: calc(14px * var(--fs-scale)); line-height: 1; padding: 0 2px; cursor: pointer; flex: none; }
563
580
  .quote-chip .qc-drop:hover { color: var(--primary); }
564
581
  .composer-box:has(.quotes-tray:not([hidden])) { flex-direction: column; align-items: stretch; }
565
582
  .composer-box:has(.quotes-tray:not([hidden])) textarea { flex: none; }
566
- .quote-pop { position: fixed; z-index: 150; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--pop-dark-bg); color: var(--pop-dark-ink); font: 800 calc(12px * var(--fs-scale))/1 var(--font); cursor: pointer; box-shadow: var(--pop-dark-shadow); }
583
+ .quote-pop { position: fixed; z-index: 150; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 0; border-radius: calc(8px * var(--r-scale)); background: var(--pop-dark-bg); color: var(--pop-dark-ink); font: 800 calc(12px * var(--fs-scale))/1 var(--font); cursor: pointer; box-shadow: var(--pop-dark-shadow); }
567
584
  .quote-pop .i { width: 14px; height: 14px; }
568
585
  .quote-pop:hover { background: var(--primary); }
569
586
  .lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; padding: 24px; background: var(--scrim-bg); cursor: zoom-out; animation: fade-in var(--t-base) var(--ease-out); }
570
- .lightbox img { max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); border-radius: 12px; box-shadow: var(--scrim-shadow); background: var(--scrim-image-bg); }
587
+ .lightbox img { max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); border-radius: calc(12px * var(--r-scale)); box-shadow: var(--scrim-shadow); background: var(--scrim-image-bg); }
571
588
  .dialog {
572
589
  resize: both;
573
590
  min-width: 320px;
@@ -578,6 +595,13 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
578
595
  background-size: 11px 11px;
579
596
  }
580
597
  .dialog.closing { resize: none; }
598
+ .dialog::-webkit-resizer { display: none; }
599
+ .scroll-hint-slot { position: sticky; height: 0; overflow: visible; z-index: 6; pointer-events: none; }
600
+ .scroll-hint-slot.up { top: 0; }
601
+ .scroll-hint-slot.down { bottom: 0; }
602
+ .scroll-hint-slot .scroll-hint { pointer-events: auto; }
603
+ .scroll-hint-slot.up .scroll-hint { top: 0; }
604
+ .scroll-hint-slot.down .scroll-hint { bottom: 0; }
581
605
  .token.comment, .token.prolog, .token.cdata { color: var(--syntax-comment); font-style: italic; }
582
606
  .token.punctuation, .token.operator { color: var(--syntax-punctuation); }
583
607
  .token.keyword, .token.rule, .token.important, .token.atrule { color: var(--syntax-keyword); font-weight: 700; }
@@ -591,22 +615,22 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
591
615
  .code-view { display: flex; align-items: flex-start; gap: 0; background: var(--code-bg); border-radius: var(--r-sm); overflow: auto; }
592
616
  .code-view .gutter { position: sticky; left: 0; z-index: 1; flex: none; align-self: stretch; display: flex; flex-direction: column; padding: 10px 8px 10px 10px; background: var(--code-gutter-bg); color: var(--code-gutter-ink); font: 500 var(--fs-code, calc(12px * var(--fs-scale))) / 1.55 var(--mono); text-align: right; user-select: none; }
593
617
  .code-view .gutter span { display: block; }
594
- .code-view .gutter span.line-mark { color: var(--code-line-mark-ink); font-weight: 800; background: var(--code-line-mark-bg); border-radius: 4px; }
618
+ .code-view .gutter span.line-mark { color: var(--code-line-mark-ink); font-weight: 800; background: var(--code-line-mark-bg); border-radius: calc(4px * var(--r-scale)); }
595
619
  .code-view .code-body { margin: 0; flex: 1 0 auto; min-width: 0; padding: 10px 12px; background: transparent; border-radius: 0; overflow: visible; white-space: pre; line-height: 1.55; }
596
620
  .code-view::-webkit-scrollbar { width: 12px; height: 12px; }
597
621
  .code-view::-webkit-scrollbar-track { background: var(--code-sb-track); margin: 0; }
598
- .code-view::-webkit-scrollbar-thumb { background: var(--code-sb-thumb); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
622
+ .code-view::-webkit-scrollbar-thumb { background: var(--code-sb-thumb); border: 3px solid transparent; background-clip: padding-box; border-radius: calc(8px * var(--r-scale)); }
599
623
  .code-view::-webkit-scrollbar-thumb:hover { background: var(--code-sb-thumb-hover); background-clip: padding-box; }
600
624
  .code-view::-webkit-scrollbar-corner { background: var(--code-sb-track); }
601
625
  @supports not selector(::-webkit-scrollbar) { .code-view { scrollbar-width: auto; scrollbar-color: var(--code-sb-firefox) var(--code-sb-track); } }
602
626
  .code-view code, .msg.mine .bubble .code-view code, .file-view .code-view code { background: transparent; padding: 0; border-radius: 0; color: var(--code-ink); }
603
627
  .file-view.text { padding: 0; overflow: hidden; }
604
- .file-view.text .code-view { border-radius: 12px; height: 100%; }
628
+ .file-view.text .code-view { border-radius: calc(12px * var(--r-scale)); height: 100%; }
605
629
  #file-dialog[open] { display: flex; flex-direction: column; }
606
630
  #file-dialog .file-view { min-height: 0; }
607
631
  .dialog.sized .file-view { max-height: none; }
608
632
  .file-view.wrap .code-body { white-space: pre-wrap; word-break: break-word; }
609
- .find-hit { background: var(--code-find-hit-bg); color: var(--code-find-hit-ink); border-radius: 3px; padding: 0 1px; }
633
+ .find-hit { background: var(--code-find-hit-bg); color: var(--code-find-hit-ink); border-radius: calc(3px * var(--r-scale)); padding: 0 1px; }
610
634
  .fv-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
611
635
  .fv-tools .search { flex: 1 1 200px; min-width: 160px; margin: 0; height: 34px; }
612
636
  #fv-tools label.search > input:not([type="checkbox"]) { flex: 1 1 auto; margin-top: 0; width: auto; height: 100%; padding: 0; border: 0; background: transparent; }
@@ -620,15 +644,15 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
620
644
  .diagram-view { position: fixed; inset: 0; z-index: 210; overflow: hidden; background: var(--scrim-bg); cursor: grab; animation: fade-in var(--t-base) var(--ease-out); touch-action: none; }
621
645
  .diagram-view.dragging { cursor: grabbing; }
622
646
  .dv-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
623
- .dv-stage svg { display: block; background: var(--card); border-radius: 14px; box-shadow: var(--scrim-shadow); padding: 12px; box-sizing: content-box; }
624
- .dv-bar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 14px; background: var(--diagram-bar-bg); box-shadow: var(--diagram-bar-shadow); cursor: default; }
625
- .dv-btn { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-3); display: grid; place-content: center; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
647
+ .dv-stage svg { display: block; background: var(--card); border-radius: calc(14px * var(--r-scale)); box-shadow: var(--scrim-shadow); padding: 12px; box-sizing: content-box; }
648
+ .dv-bar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: calc(14px * var(--r-scale)); background: var(--diagram-bar-bg); box-shadow: var(--diagram-bar-shadow); cursor: default; }
649
+ .dv-btn { width: 30px; height: 30px; border: 0; border-radius: calc(9px * var(--r-scale)); background: transparent; color: var(--ink-3); display: grid; place-content: center; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
626
650
  .dv-btn .i { width: 17px; height: 17px; }
627
651
  .dv-btn:hover { background: var(--soft); color: var(--primary); }
628
- .dv-level { min-width: 58px; height: 30px; padding: 0 8px; border: 0; border-radius: 9px; background: var(--soft); color: var(--ink-2); font: 800 var(--fs-xs) / 30px var(--font); cursor: pointer; }
652
+ .dv-level { min-width: 58px; height: 30px; padding: 0 8px; border: 0; border-radius: calc(9px * var(--r-scale)); background: var(--soft); color: var(--ink-2); font: 800 var(--fs-xs) / 30px var(--font); cursor: pointer; }
629
653
  .dv-level:hover { color: var(--primary); }
630
654
  .dv-hint { margin: 0 4px 0 8px; color: var(--faint); font-size: var(--fs-xs); font-weight: 700; }
631
- .mermaid-block .mm-expand { display: none; border: 0; background: transparent; color: var(--faint); padding: 2px 4px; border-radius: 8px; cursor: pointer; line-height: 0; transition: background var(--t-fast), color var(--t-fast); }
655
+ .mermaid-block .mm-expand { display: none; border: 0; background: transparent; color: var(--faint); padding: 2px 4px; border-radius: calc(8px * var(--r-scale)); cursor: pointer; line-height: 0; transition: background var(--t-fast), color var(--t-fast); }
632
656
  .mermaid-block .mm-expand .i { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease-out); }
633
657
  .mermaid-block.ok .mm-expand { display: inline-flex; }
634
658
  .mermaid-block .mm-expand:hover { background: var(--soft); color: var(--primary); }
@@ -636,9 +660,9 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
636
660
  .composer textarea { flex: 1; display: block; box-sizing: border-box; resize: none; padding: 8px 0; margin: 0; border: 0; border-radius: 0; background: transparent; height: 36px; min-height: 36px; line-height: calc(20px * var(--fs-scale)); font-size: calc(14px * var(--fs-scale)); font-weight: 600; outline: none; color: var(--ink); overflow-y: auto; }
637
661
  .composer textarea::placeholder { color: var(--placeholder); font-weight: 600; }
638
662
  @supports (field-sizing: content) { .composer textarea { field-sizing: content; height: auto; } }
639
- .send-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--grad-primary); color: var(--btn-on-primary); display: grid; place-content: center; box-shadow: var(--shadow-primary); flex: none; transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast); }
663
+ .send-btn { width: 44px; height: 44px; border-radius: calc(14px * var(--r-scale)); border: 0; background: var(--grad-primary); color: var(--btn-on-primary); display: grid; place-content: center; box-shadow: var(--shadow-primary); flex: none; transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast); }
640
664
  .send-btn .i { width: 18px; height: 18px; display: block; }
641
- .composer-clear { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--placeholder); font-size: 20px; line-height: 1; cursor: pointer; flex: none; margin-right: 2px; transition: background var(--t-fast), color var(--t-fast); }
665
+ .composer-clear { width: 28px; height: 28px; border-radius: calc(50% * var(--r-scale)); border: 0; background: transparent; color: var(--placeholder); font-size: 20px; line-height: 1; cursor: pointer; flex: none; margin-right: 2px; transition: background var(--t-fast), color var(--t-fast); }
642
666
  .composer-clear:hover { background: var(--soft); color: var(--danger); }
643
667
  .send-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
644
668
  .send-btn:active { transform: translateY(1px); }
@@ -659,14 +683,13 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
659
683
  .trouble code { font-family: var(--mono); font-size: var(--fs-xs); }
660
684
  .details-inner .geek-body > .section { background: var(--soft); padding: 14px 16px 10px; margin-bottom: 10px; }
661
685
  .resizer { position: absolute; left: -14px; top: 0; bottom: 0; width: 20px; cursor: col-resize; z-index: 3; }
662
- .resizer::after { content: ""; position: absolute; left: 8.5px; top: 44%; height: 12%; width: 3px; border-radius: 3px; background: var(--lav-2); opacity: 0; transition: opacity var(--t-fast); }
686
+ .resizer::after { content: ""; position: absolute; left: 8.5px; top: 44%; height: 12%; width: 3px; border-radius: calc(3px * var(--r-scale)); background: var(--lav-2); opacity: 0; transition: opacity var(--t-fast); }
663
687
  .resizer:hover::after, .shell.resizing .resizer::after { opacity: 1; }
664
688
  .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
665
689
  .panel-title h3 { font-size: calc(11px * var(--fs-scale)); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
666
690
  .panel-title .hint { display: none; }
667
- .profile { text-align: center; padding: 22px 16px 18px; background: var(--profile-bg); border-radius: 18px; margin-bottom: 12px; }
691
+ .profile { text-align: center; padding: 22px 16px 18px; background: var(--profile-bg); border-radius: calc(18px * var(--r-scale)); margin-bottom: 12px; }
668
692
  .profile .avatar { margin: 0 auto 10px; display: block; width: 84px; height: 84px; }
669
- .profile .avatar .av-tile { background: var(--profile-avatar-bg) !important; border-radius: 26px !important; box-shadow: var(--shadow-pop); }
670
693
  .profile h3 { font-size: calc(22px * var(--fs-scale)); overflow-wrap: anywhere; letter-spacing: -0.01em; }
671
694
  .profile .tagline { color: var(--muted); font-size: calc(13px * var(--fs-scale)); font-weight: 700; margin-top: 2px; }
672
695
  .profile .badges { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
@@ -675,7 +698,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
675
698
  .section label:not(.check-row):not(.switch):not(.toggle):not(.choice) { display: flex; flex-direction: column; gap: 6px; font-size: calc(12px * var(--fs-scale)); font-weight: 800; color: var(--ink-3); margin-bottom: 12px; min-width: 0; }
676
699
  .section label.row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
677
700
  .section label.row select { flex: 0 1 60%; }
678
- .section input:not([type="checkbox"]):not([type="radio"]), .section select, .section textarea { width: 100%; min-width: 0; height: 42px; padding: 0 14px; border: 2px solid var(--lav); border-radius: var(--r-sm); background: var(--soft); font-size: calc(14px * var(--fs-scale)); font-weight: 700; color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast); }
701
+ .section input:not([type="checkbox"]):not([type="radio"]), .section select, .section textarea { width: 100%; min-width: 0; height: 42px; padding: 0 14px; border: 2px solid var(--lav); border-radius: var(--r-sm); background: var(--soft); box-shadow: var(--input-shadow); font-size: calc(14px * var(--fs-scale)); font-weight: 700; color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast); }
679
702
  .details-inner .section input:not([type="checkbox"]):not([type="radio"]), .details-inner .section select, .details-inner .section textarea { background: var(--soft); }
680
703
  .details-inner .geek-body .section input:not([type="checkbox"]):not([type="radio"]), .details-inner .geek-body .section select, .details-inner .geek-body .section textarea { background: var(--input-bg); }
681
704
  .section input:hover, .section select:hover, .section textarea:hover { border-color: var(--lav-2); }
@@ -687,7 +710,10 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
687
710
  .section .hint { margin: -4px 0 10px; }
688
711
  .three-inline { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
689
712
  .three-inline label { margin-bottom: 4px; }
690
- .rc-num { width: 64px !important; height: 30px !important; padding: 0 8px !important; display: inline-block; }
713
+ .rc-num { width: 76px; display: inline-flex; }
714
+ .rc-num > input { height: 30px !important; padding: 0 8px !important; }
715
+ .fv-num { width: 84px; }
716
+ .lp-n { width: 84px; margin: 0 4px; }
691
717
  .rc-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fs-scale)); font-weight: 600; margin-bottom: 8px; }
692
718
  .rc-table td { padding: 6px 4px; border-top: 2px solid var(--lav); vertical-align: middle; }
693
719
  .rc-table td:first-child { display: flex; align-items: center; gap: 8px; }
@@ -721,7 +747,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
721
747
  .tpl-pane > * { flex: 1; min-width: 0; }
722
748
  .tpl-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; padding-right: 4px; }
723
749
  .tpl-list::before { content: "Templates"; font-size: calc(11px * var(--fs-scale)); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding: 0 4px; }
724
- .tpl-item { display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 10px; text-align: left; border: 2px solid transparent; border-radius: 14px; padding: 10px 10px 10px 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--tpl-shadow); transition: border-color var(--t-fast), transform var(--t-fast); }
750
+ .tpl-item { display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 10px; text-align: left; border: 2px solid transparent; border-radius: calc(14px * var(--r-scale)); padding: 10px 10px 10px 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--tpl-shadow); transition: border-color var(--t-fast), transform var(--t-fast); }
725
751
  .tpl-item:hover { border-color: var(--lav-2); transform: translateY(-1px); }
726
752
  .tpl-item.on { border-color: var(--primary); background: var(--lav); }
727
753
  .tpl-emoji { font-size: 22px; line-height: 1; text-align: center; }
@@ -731,7 +757,7 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
731
757
  .tpl-item .avatar-stack { margin-top: 2px; }
732
758
  .tpl-runs { display: flex; flex-wrap: wrap; gap: 6px; }
733
759
  .stp-preview { display: flex; flex-direction: column; gap: 10px; max-height: 48vh; overflow: auto; padding-right: 4px; margin: 4px 0 10px; }
734
- .stp-section { background: var(--soft); border-radius: 14px; padding: 10px 12px; }
760
+ .stp-section { background: var(--soft); border-radius: calc(14px * var(--r-scale)); padding: 10px 12px; }
735
761
  .section.template { background: var(--lav); margin: 22px 0 14px; padding: 16px 18px 18px; box-sizing: border-box; width: 100%; overflow: hidden; }
736
762
  .section.template > h4 { color: var(--primary); }
737
763
  .stp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@@ -753,27 +779,25 @@ table.csv tbody tr:nth-child(even) td { background: var(--table-stripe); }
753
779
  .stp-vm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
754
780
  .stp-vm-role { color: var(--muted); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; line-height: 1.45; margin-top: 3px; }
755
781
  .stp-vm .chips { margin-top: 5px; }
756
- .tpl-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: var(--tpl-check-ink); opacity: 0; transition: opacity var(--t-fast); }
782
+ .tpl-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: calc(50% * var(--r-scale)); background: var(--primary); color: var(--tpl-check-ink); opacity: 0; transition: opacity var(--t-fast); }
757
783
  .tpl-check .i { width: 12px; height: 12px; }
758
784
  .tpl-item.on .tpl-check { opacity: 1; }
759
785
  .tpl-detail { min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; padding-right: 4px; }
760
786
  .tpl-desc { margin: 0; color: var(--ink-2); font-weight: 600; }
761
787
  .tpl-rules ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-2); font-size: calc(13px * var(--fs-scale)); font-weight: 600; }
762
- .tpl-vm { border-radius: 14px; background: var(--soft); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
788
+ .tpl-vm { border-radius: calc(14px * var(--r-scale)); background: var(--soft); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
763
789
  .tpl-vm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
764
790
  .tpl-vm-role { color: var(--muted); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; line-height: 1.45; }
765
- .mm-all { width: 24px; height: 24px; border-radius: 8px; background: var(--lav); color: var(--primary); display: grid; place-content: center; flex: none; }
791
+ .mm-all { width: 24px; height: 24px; border-radius: calc(8px * var(--r-scale)); background: var(--lav); color: var(--primary); display: grid; place-content: center; flex: none; }
766
792
  .mm-all .i { width: 14px; height: 14px; }
767
793
  .mention.all { color: var(--primary); }
768
- .side-list li.unstaffed .avatar .av-tile { filter: grayscale(0.8); opacity: 0.55; }
769
794
  .side-list li.unstaffed .p-name > span:first-child { color: var(--muted); }
770
795
  .participants [data-ui="badge"][data-tone="attention"] { cursor: pointer; }
771
796
  .cast-banner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 22px 14px; background: var(--grad-canvas); border-bottom: 1px solid var(--lav); text-align: center; }
772
797
  .cast-lead { max-width: 720px; color: var(--ink-2); font-weight: 600; font-size: calc(14px * var(--fs-scale)); }
773
798
  .cast-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
774
- .cast-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 200px; padding: 16px 12px; border: 2px dashed var(--lav-2); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast); }
799
+ .cast-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 200px; padding: 16px 12px; border: 2px dashed var(--lav-2); border-radius: calc(16px * var(--r-scale)); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast); }
775
800
  .cast-card:hover { border-color: var(--primary); transform: translateY(-2px); }
776
- .cast-card .av-tile { filter: grayscale(0.8); opacity: 0.7; }
777
801
  .cast-card b { font-size: calc(15px * var(--fs-scale)); }
778
802
  .cast-card span { color: var(--muted); font-size: calc(12px * var(--fs-scale)); font-weight: 600; }
779
803
  .cast-card em { margin-top: 4px; font-style: normal; font-size: calc(12px * var(--fs-scale)); font-weight: 800; color: var(--primary); }