@soba-so/react 0.0.21 → 0.0.23

package/dist/styles.css

@@ -22,6 +22,8 @@
   --sc-tray-sunk: #efefed;
   
   --sc-font-size: 15px;
+  
+  --sc-scale: 1;
   --sc-fs-label: max(11px, calc(var(--sc-font-size) * 0.77));
   
   --sc-fs-small: max(12px, calc(var(--sc-font-size) * 0.87));
@@ -254,9 +256,9 @@ a.sc-btn {
 .sc-tray {
   display: grid;
   
-  gap: 20px;
-  padding: 20px;
-  border-radius: 24px;
+  gap: calc(16px * var(--sc-scale, 1));
+  padding: calc(16px * var(--sc-scale, 1));
+  border-radius: calc(18px * var(--sc-scale, 1));
   background: var(--sc-tray, #f3f3f2);
 }
 
@@ -267,17 +269,17 @@ a.sc-btn {
 .sc-group-cap {
   display: flex;
   align-items: center;
-  gap: 4px;
-  min-height: 22px;
+  gap: calc(4px * var(--sc-scale, 1));
+  min-height: calc(22px * var(--sc-scale, 1));
   
-  padding: 0 0 8px 4px;
+  padding: 0 0 calc(8px * var(--sc-scale, 1)) calc(4px * var(--sc-scale, 1));
 }
 
 .sc-cap-acts {
   flex: none;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: calc(4px * var(--sc-scale, 1));
 }
 
 .sc-group-title {
@@ -287,14 +289,15 @@ a.sc-btn {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 14px;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
   letter-spacing: 0;
   color: var(--sc-muted, #6b6b73);
 }
 
 .sc-group-card {
-  padding: 7px 0 7px 12px;
-  border-radius: 18px;
+  padding: calc(7px * var(--sc-scale, 1)) 0 calc(7px * var(--sc-scale, 1))
+    calc(12px * var(--sc-scale, 1));
+  border-radius: calc(12px * var(--sc-scale, 1));
   background: var(--sc-tray-card, #ffffff);
   box-shadow:
     var(--sc-shadow-1),
@@ -306,8 +309,8 @@ a.sc-btn {
   display: grid;
   place-items: center;
   
-  width: 36px;
-  height: 36px;
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
   padding: 0;
   border: 0;
   border-radius: 50%;
@@ -328,8 +331,8 @@ a.sc-btn {
 }
 
 .sc-dglyph {
-  width: 13px;
-  height: 13px;
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
 }
 
 @keyframes sc-spin {
@@ -345,9 +348,10 @@ a.sc-btn {
 .sc-mrow {
   display: flex;
   align-items: center;
-  gap: 14px;
-  min-height: 52px;
-  padding: 7px 16px 7px 4px;
+  gap: calc(14px * var(--sc-scale, 1));
+  min-height: calc(52px * var(--sc-scale, 1));
+  padding: calc(7px * var(--sc-scale, 1)) calc(16px * var(--sc-scale, 1))
+    calc(7px * var(--sc-scale, 1)) calc(4px * var(--sc-scale, 1));
 }
 
 .sc-mtile {
@@ -355,27 +359,27 @@ a.sc-btn {
   flex: none;
   display: grid;
   place-items: center;
-  width: 44px;
-  height: 44px;
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
   
-  border-radius: 12px;
+  border-radius: calc(9px * var(--sc-scale, 1));
   
   background: var(--sc-tray-sunk, #efefed);
   color: var(--sc-text, #1b1b1a);
 }
 
 .sc-mglyph {
-  width: 24px;
-  height: 19px;
+  width: calc(24px * var(--sc-scale, 1));
+  height: calc(19px * var(--sc-scale, 1));
 }
 
 .sc-mbadge {
   position: absolute;
   left: auto;
-  bottom: -3px;
-  right: -3px;
-  width: 14px;
-  height: 14px;
+  bottom: calc(-3px * var(--sc-scale, 1));
+  right: calc(-3px * var(--sc-scale, 1));
+  width: calc(14px * var(--sc-scale, 1));
+  height: calc(14px * var(--sc-scale, 1));
   border-radius: 50%;
   transform: none;
   box-shadow: 0 0 0 2.5px var(--sc-tray-card, #ffffff);
@@ -409,15 +413,15 @@ a.sc-btn {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 16px;
+  font-size: calc(var(--sc-font-size, 15px) * 1.0667);
   font-weight: 600;
 }
 
 .sc-mmeta {
   display: flex;
   align-items: baseline;
-  gap: 10px;
-  font-size: 14px;
+  gap: calc(10px * var(--sc-scale, 1));
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
   line-height: 1.35;
   color: var(--sc-muted, #6b6b73);
 }
@@ -437,16 +441,16 @@ a.sc-btn {
 }
 
 .sc-mmeta-sep {
-  padding: 0 6px;
+  padding: 0 calc(6px * var(--sc-scale, 1));
   color: var(--sc-line-2, #dcdce0);
 }
 
 .sc-mrow-btn {
-  width: calc(100% + 4px);
-  margin-left: -4px;
-  padding-left: 4px;
+  width: calc(100% + calc(4px * var(--sc-scale, 1)));
+  margin-left: calc(-4px * var(--sc-scale, 1));
+  padding-left: calc(4px * var(--sc-scale, 1));
   border: 0;
-  border-radius: 10px;
+  border-radius: calc(10px * var(--sc-scale, 1));
   background: transparent;
   color: inherit;
   font: inherit;
@@ -465,8 +469,8 @@ a.sc-btn {
 
 .sc-chev {
   flex: none;
-  width: 14px;
-  height: 14px;
+  width: calc(14px * var(--sc-scale, 1));
+  height: calc(14px * var(--sc-scale, 1));
   color: var(--sc-muted, #6b6b73);
   transition: transform 120ms ease;
 }
@@ -476,21 +480,21 @@ a.sc-btn {
 }
 
 .sc-group-card:has(> .sc-rrow) {
-  padding: 0 16px;
+  padding: 0 calc(16px * var(--sc-scale, 1));
 }
 .sc-rrow {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 14px 0;
+  gap: calc(14px * var(--sc-scale, 1));
+  padding: calc(14px * var(--sc-scale, 1)) 0;
 }
 .sc-rrow + .sc-rrow {
   box-shadow: inset 0 1px 0 var(--sc-line, #e9e9e7);
 }
 .sc-rdot {
   flex: none;
-  width: 10px;
-  height: 10px;
+  width: calc(10px * var(--sc-scale, 1));
+  height: calc(10px * var(--sc-scale, 1));
   border-radius: 50%;
   background: var(--sc-line-2, #dcdce0);
 }
@@ -515,7 +519,7 @@ a.sc-btn {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 15px;
+  font-size: calc(var(--sc-font-size, 15px) * 1);
   font-weight: 500;
 }
 
@@ -523,9 +527,10 @@ a.sc-btn {
   flex: none;
   display: grid;
   place-items: center;
-  width: 44px;
-  height: 44px;
-  margin: -8px -10px -8px 0;
+  width: calc(44px * var(--sc-scale, 1));
+  height: calc(44px * var(--sc-scale, 1));
+  margin: calc(-8px * var(--sc-scale, 1)) calc(-10px * var(--sc-scale, 1))
+    calc(-8px * var(--sc-scale, 1)) 0;
   padding: 0;
   border: 0;
   border-radius: 50%;
@@ -537,8 +542,8 @@ a.sc-btn {
 .sc-rstop-ring {
   display: grid;
   place-items: center;
-  width: 28px;
-  height: 28px;
+  width: calc(28px * var(--sc-scale, 1));
+  height: calc(28px * var(--sc-scale, 1));
   border-radius: 50%;
   box-shadow: inset 0 0 0 1px var(--sc-line, #e9e9e7);
   transition:
@@ -554,8 +559,8 @@ a.sc-btn {
   box-shadow: inset 0 0 0 1px transparent;
 }
 .sc-rstop .sc-dglyph {
-  width: 10px;
-  height: 10px;
+  width: calc(10px * var(--sc-scale, 1));
+  height: calc(10px * var(--sc-scale, 1));
 }
 .sc-rstop:disabled {
   cursor: default;
@@ -567,7 +572,7 @@ a.sc-btn {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
-  font-size: 13px;
+  font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.8667));
   line-height: 1.4;
   color: var(--sc-muted, #6b6b69);
   font-variant-numeric: tabular-nums;
@@ -577,48 +582,49 @@ a.sc-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
-  padding: 24px 24px 26px;
+  gap: calc(12px * var(--sc-scale, 1));
+  padding: calc(24px * var(--sc-scale, 1)) calc(24px * var(--sc-scale, 1))
+    calc(26px * var(--sc-scale, 1));
   text-align: center;
 }
 .sc-blank-mark {
   display: grid;
   place-items: center;
-  width: 44px;
-  height: 44px;
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
   border-radius: 50%;
   background: var(--sc-tray-sunk, #efefed);
   color: var(--sc-faint, #8c8c89);
 }
 .sc-blank-glyph {
-  width: 20px;
-  height: 20px;
+  width: calc(20px * var(--sc-scale, 1));
+  height: calc(20px * var(--sc-scale, 1));
 }
 .sc-blank-say {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: calc(4px * var(--sc-scale, 1));
 }
 .sc-blank-title {
-  font-size: 16px;
+  font-size: calc(var(--sc-font-size, 15px) * 1.0667);
   font-weight: 600;
 }
 .sc-blank-body {
-  font-size: 14px;
-  line-height: 20px;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  line-height: calc(20px * var(--sc-scale, 1));
   color: var(--sc-muted, #6b6b69);
 }
 
 .sc-blank-act {
   display: inline-flex;
   align-items: center;
-  gap: 7px;
-  height: 36px;
-  padding: 0 14px;
+  gap: calc(7px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  padding: 0 calc(14px * var(--sc-scale, 1));
   border: 1px solid var(--sc-line, #e6e6e3);
-  border-radius: 11px;
+  border-radius: calc(11px * var(--sc-scale, 1));
   color: var(--sc-text, #1b1b1a);
-  font-size: 14px;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
   font-weight: 600;
   text-decoration: none;
   transition: background 120ms ease;
@@ -630,10 +636,11 @@ a.sc-btn {
 .sc-alarm {
   display: flex;
   align-items: flex-start;
-  gap: 14px;
-  margin: -7px -0 -7px -12px;
-  padding: 16px;
-  border-radius: 18px;
+  gap: calc(14px * var(--sc-scale, 1));
+  margin: calc(-7px * var(--sc-scale, 1)) -0 calc(-7px * var(--sc-scale, 1))
+    calc(-12px * var(--sc-scale, 1));
+  padding: calc(16px * var(--sc-scale, 1));
+  border-radius: calc(12px * var(--sc-scale, 1));
   background: color-mix(in srgb, var(--sc-danger, #c2452d) 9%, var(--sc-tray-card, #ffffff));
 }
 
@@ -641,13 +648,13 @@ a.sc-btn {
   flex: none;
   display: grid;
   place-items: center;
-  width: 30px;
+  width: calc(30px * var(--sc-scale, 1));
   margin-top: 1px;
   color: var(--sc-danger, #c2452d);
 }
 .sc-alarm-mark .sc-hglyph {
-  width: 22px;
-  height: 22px;
+  width: calc(22px * var(--sc-scale, 1));
+  height: calc(22px * var(--sc-scale, 1));
 }
 
 .sc-alarm-warn {
@@ -657,42 +664,93 @@ a.sc-btn {
   color: var(--sc-warn, #b06f14);
 }
 .sc-alarm + .sc-alarm {
-  margin-top: 8px;
+  margin-top: calc(8px * var(--sc-scale, 1));
 }
 .sc-alarm-say {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: calc(4px * var(--sc-scale, 1));
   min-width: 0;
 }
 .sc-alarm-title {
-  font-size: 16px;
+  font-size: calc(var(--sc-font-size, 15px) * 1.0667);
   font-weight: 600;
 }
 .sc-alarm-body {
-  font-size: 14px;
-  line-height: 20px;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  line-height: calc(20px * var(--sc-scale, 1));
   color: var(--sc-text-2, #5a4a46);
 }
 
-.sc-blank-soba {
+.sc-away {
+  display: flex;
+  align-items: center;
+  gap: calc(12px * var(--sc-scale, 1));
+  padding: calc(6px * var(--sc-scale, 1)) calc(12px * var(--sc-scale, 1))
+    calc(6px * var(--sc-scale, 1)) 0;
+}
+.sc-away-mark {
+  flex: none;
   display: grid;
   place-items: center;
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  border-radius: calc(9px * var(--sc-scale, 1));
+  background: var(--sc-tray-sunk, #efefed);
   color: var(--sc-text, #1b1b1a);
 }
-.sc-blank-soba-mark {
-  width: 48px;
-  height: 48px;
+.sc-away-mark .bx {
+  width: calc(26px * var(--sc-scale, 1));
+  height: calc(26px * var(--sc-scale, 1));
+  --bx-w: 24;
+}
+.sc-away-say {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.sc-away-title {
+  font-size: calc(var(--sc-font-size, 15px) * 1);
+  font-weight: 600;
+}
+.sc-away-body {
+  font-size: calc(var(--sc-font-size, 15px) * 0.8667);
+  line-height: 1.35;
+  color: var(--sc-muted, #6b6b73);
+}
+.sc-away-go {
+  flex: none;
+  height: calc(32px * var(--sc-scale, 1));
+  padding: 0 calc(14px * var(--sc-scale, 1));
+  border: 0;
+  border-radius: 999px;
+  background: var(--sc-accent, #1b1b1a);
+  color: var(--sc-accent-fg, #ffffff);
+  font: inherit;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 120ms ease;
+}
+.sc-away-go:hover:not(:disabled) {
+  opacity: 0.88;
+}
+.sc-away-go:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 
 .sc-cap-link {
   flex: none;
-  margin: -8px -4px -8px 0;
-  padding: 8px 4px;
+  margin: calc(-8px * var(--sc-scale, 1)) calc(-4px * var(--sc-scale, 1))
+    calc(-8px * var(--sc-scale, 1)) 0;
+  padding: calc(8px * var(--sc-scale, 1)) calc(4px * var(--sc-scale, 1));
   border: 0;
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.8667));
   color: var(--sc-text-2, #3f3f46);
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -705,20 +763,20 @@ a.sc-btn {
 .sc-acts {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: calc(4px * var(--sc-scale, 1));
 }
 .sc-act-go {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 9px;
-  height: 48px;
+  gap: calc(9px * var(--sc-scale, 1));
+  height: calc(48px * var(--sc-scale, 1));
   border: 0;
-  border-radius: 14px;
+  border-radius: calc(10px * var(--sc-scale, 1));
   background: var(--sc-accent, #1b1b1a);
   color: var(--sc-accent-fg, #ffffff);
   font: inherit;
-  font-size: 15px;
+  font-size: calc(var(--sc-font-size, 15px) * 1);
   font-weight: 600;
   cursor: pointer;
   transition: opacity 120ms ease;
@@ -726,41 +784,75 @@ a.sc-btn {
 .sc-act-go:hover:not(:disabled) {
   opacity: 0.88;
 }
-.sc-act-quiet {
+
+.sc-acts-row {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 44px;
+  justify-content: space-between;
+}
+.sc-act-small {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(7px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  padding: 0 calc(12px * var(--sc-scale, 1)) 0 calc(15px * var(--sc-scale, 1));
   border: 0;
-  border-radius: 12px;
-  background: transparent;
+  border-radius: 999px;
+  background: var(--sc-tray-card, #ffffff);
+  box-shadow:
+    var(--sc-shadow-1),
+    inset 0 0 0 1px color-mix(in srgb, var(--sc-line, #e9e9eb) 70%, transparent);
+  color: var(--sc-text, #1a1a1c);
   font: inherit;
-  font-size: 14px;
-  color: var(--sc-muted, #6b6b69);
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  font-weight: 550;
+  letter-spacing: -0.005em;
   cursor: pointer;
+  transition:
+    box-shadow 140ms ease,
+    transform 140ms ease;
 }
-.sc-act-quiet:hover:not(:disabled) {
-  color: var(--sc-text, #1b1b1a);
+.sc-act-small .sc-dglyph {
+  width: calc(12px * var(--sc-scale, 1));
+  height: calc(12px * var(--sc-scale, 1));
+  color: var(--sc-muted, #6b6b73);
+  transition:
+    color 140ms ease,
+    transform 140ms ease;
 }
-.sc-act-go:disabled,
-.sc-act-quiet:disabled {
-  cursor: default;
-  opacity: 0.5;
+.sc-act-small:hover:not(:disabled) {
+  box-shadow:
+    var(--sc-shadow-1),
+    inset 0 0 0 1px var(--sc-line, #e9e9eb);
 }
-.sc-act-go[data-spin],
-.sc-act-quiet[data-spin] {
-  opacity: 1;
+.sc-act-small:hover:not(:disabled) .sc-dglyph {
+  color: var(--sc-text, #1a1a1c);
+  transform: translate(1px, -1px);
+}
+.sc-act-small:active:not(:disabled) {
+  transform: scale(0.98);
 }
+@media (prefers-reduced-motion: reduce) {
+  .sc-act-small,
+  .sc-act-small .sc-dglyph {
+    transition: none;
+  }
+  .sc-act-small:active:not(:disabled),
+  .sc-act-small:hover:not(:disabled) .sc-dglyph {
+    transform: none;
+  }
+}
+.sc-act-go:disabled,
+.sc-act-go[data-spin],
 .sc-act-glyph {
   flex: none;
-  width: 15px;
-  height: 15px;
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(15px * var(--sc-scale, 1));
 }
 
 .sc-act-miss {
-  margin: 4px 2px 0;
-  font-size: 13px;
+  margin: calc(4px * var(--sc-scale, 1)) 2px 0;
+  font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.8667));
   line-height: 1.5;
   color: var(--sc-muted, #6b6b69);
   text-align: center;
@@ -769,26 +861,26 @@ a.sc-btn {
 .sc-arow {
   display: flex;
   align-items: center;
-  gap: 10px;
-  min-height: 30px;
-  padding-right: 12px;
+  gap: calc(10px * var(--sc-scale, 1));
+  min-height: calc(30px * var(--sc-scale, 1));
+  padding-right: calc(12px * var(--sc-scale, 1));
 }
 
 .sc-runtime-tile {
   flex: none;
   display: grid;
   place-items: center;
-  width: 30px;
-  height: 30px;
-  border-radius: var(--sc-r-sm, 6px);
+  width: calc(30px * var(--sc-scale, 1));
+  height: calc(30px * var(--sc-scale, 1));
+  border-radius: var(--sc-r-sm, calc(6px * var(--sc-scale, 1)));
   border: 1px solid var(--sc-line, #e9e9eb);
   background: var(--sc-tray-sunk, #f6f6f7);
 }
 
 .sc-runtime-logo {
-  width: 15px;
-  height: 15px;
-  border-radius: 3px;
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(15px * var(--sc-scale, 1));
+  border-radius: calc(3px * var(--sc-scale, 1));
   object-fit: contain;
 }
 
@@ -800,8 +892,8 @@ a.sc-btn {
 }
 
 .sc-runtime-mark {
-  width: 13px;
-  height: 13px;
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
   color: var(--sc-text-2, #3f3f46);
 }
 
@@ -830,31 +922,31 @@ a.sc-btn {
 .sc-orow {
   display: flex;
   align-items: center;
-  gap: 18px;
-  min-height: 34px;
-  padding-right: 12px;
+  gap: calc(18px * var(--sc-scale, 1));
+  min-height: calc(34px * var(--sc-scale, 1));
+  padding-right: calc(12px * var(--sc-scale, 1));
 }
 
 .sc-otile {
   flex: none;
   display: grid;
   place-items: center;
-  width: 22px;
-  height: 22px;
-  border-radius: var(--sc-r-sm, 6px);
+  width: calc(22px * var(--sc-scale, 1));
+  height: calc(22px * var(--sc-scale, 1));
+  border-radius: var(--sc-r-sm, calc(6px * var(--sc-scale, 1)));
   background: var(--sc-tray-sunk, #f6f6f7);
   color: var(--sc-muted, #6b6b73);
 }
 
 .sc-otile .sc-mglyph {
-  width: 15px;
-  height: 11px;
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(11px * var(--sc-scale, 1));
 }
 
 .sc-oglyph,
 .sc-omark {
-  width: 13px;
-  height: 13px;
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
 }
 
 .sc-oname {
@@ -876,13 +968,13 @@ a.sc-btn {
 .sc-pair {
   display: flex;
   align-items: center;
-  gap: 18px;
-  width: calc(100% + 4px);
-  min-height: 34px;
-  margin-left: -4px;
-  padding: 0 12px 0 4px;
+  gap: calc(18px * var(--sc-scale, 1));
+  width: calc(100% + calc(4px * var(--sc-scale, 1)));
+  min-height: calc(34px * var(--sc-scale, 1));
+  margin-left: calc(-4px * var(--sc-scale, 1));
+  padding: 0 calc(12px * var(--sc-scale, 1)) 0 calc(4px * var(--sc-scale, 1));
   border: 0;
-  border-radius: 8px;
+  border-radius: calc(8px * var(--sc-scale, 1));
   background: transparent;
   font: inherit;
   font-size: var(--sc-fs-small);
@@ -907,7 +999,7 @@ a.sc-btn {
 
 .sc-row-note {
   margin: 0;
-  padding: 2px 12px 4px 0;
+  padding: 2px calc(12px * var(--sc-scale, 1)) calc(4px * var(--sc-scale, 1)) 0;
   font-size: var(--sc-fs-label);
   line-height: 1.45;
   color: var(--sc-muted, #6b6b73);
@@ -916,38 +1008,38 @@ a.sc-btn {
 .sc-nilrow {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: calc(10px * var(--sc-scale, 1));
   margin: 0;
-  padding: 9px 0;
-  font-size: 14px;
+  padding: calc(9px * var(--sc-scale, 1)) 0;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
   color: var(--sc-muted, #6b6b69);
 }
 
 .sc-group-card:has(> .sc-nilrow) {
-  padding: 7px 16px;
+  padding: calc(7px * var(--sc-scale, 1)) calc(16px * var(--sc-scale, 1));
 }
 .sc-nilrow-mark {
   display: grid;
   place-items: center;
   flex: none;
-  width: 28px;
-  height: 28px;
+  width: calc(28px * var(--sc-scale, 1));
+  height: calc(28px * var(--sc-scale, 1));
   border-radius: 50%;
   background: var(--sc-tray-sunk, #efefed);
   color: var(--sc-faint, #8c8c89);
 }
 .sc-nilrow-mark .sc-blank-glyph {
-  width: 15px;
-  height: 15px;
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(15px * var(--sc-scale, 1));
 }
 
 .sc-heads {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
-  margin: 2px 12px 3px 0;
-  padding: 8px 10px;
-  border-radius: var(--sc-r, 10px);
+  gap: calc(8px * var(--sc-scale, 1));
+  margin: 2px calc(12px * var(--sc-scale, 1)) calc(3px * var(--sc-scale, 1)) 0;
+  padding: calc(8px * var(--sc-scale, 1)) calc(10px * var(--sc-scale, 1));
+  border-radius: var(--sc-r, calc(10px * var(--sc-scale, 1)));
   background: color-mix(in srgb, var(--sc-warn, #b06f14) 9%, var(--sc-tray-card, #ffffff));
 }
 .sc-heads-mark {
@@ -959,8 +1051,8 @@ a.sc-btn {
   color: var(--sc-warn, #b06f14);
 }
 .sc-hglyph {
-  width: 13px;
-  height: 13px;
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
 }
 .sc-heads-say {
   margin: 0;
@@ -974,11 +1066,11 @@ a.sc-btn {
   inset: auto;
   z-index: 2147483647;
   
-  width: 320px;
+  width: calc(320px * var(--sc-scale, 1));
   margin: 0;
-  padding: 4px;
+  padding: calc(4px * var(--sc-scale, 1));
   border: 1px solid var(--sc-line, #e9e9eb);
-  border-radius: 12px;
+  border-radius: calc(10px * var(--sc-scale, 1));
   background: var(--sc-tray-card, #ffffff);
   box-shadow:
     0 10px 30px rgba(0, 0, 0, 0.12),
@@ -993,16 +1085,16 @@ a.sc-btn {
 .sc-menu-item {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: calc(14px * var(--sc-scale, 1));
   width: 100%;
   
-  min-height: 44px;
-  padding: 7px 12px;
+  min-height: calc(44px * var(--sc-scale, 1));
+  padding: calc(7px * var(--sc-scale, 1)) calc(12px * var(--sc-scale, 1));
   border: 0;
-  border-radius: 12px;
+  border-radius: calc(7px * var(--sc-scale, 1));
   background: transparent;
   font: inherit;
-  font-size: 15px;
+  font-size: calc(var(--sc-font-size, 15px) * 1);
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -1028,27 +1120,52 @@ a.sc-btn {
 }
 
 .sc-menu-note {
-  font-size: 13.5px;
+  font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.9));
   line-height: 1.4;
   color: var(--sc-muted, #6b6b69);
 }
 
+.sc-row-act {
+  flex: none;
+  padding: calc(6px * var(--sc-scale, 1)) calc(8px * var(--sc-scale, 1));
+  margin-right: calc(-8px * var(--sc-scale, 1));
+  border: 0;
+  border-radius: calc(7px * var(--sc-scale, 1));
+  background: transparent;
+  color: var(--sc-text, #1a1a1c);
+  font: inherit;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  font-weight: 600;
+  cursor: pointer;
+}
+.sc-row-act:hover {
+  background: var(--sc-tray-sunk, #efefed);
+}
+
+.sc-menu-act {
+  flex: none;
+  margin-left: auto;
+  padding-left: calc(10px * var(--sc-scale, 1));
+  font-size: calc(var(--sc-font-size, 15px) * 0.8667);
+  font-weight: 600;
+  color: var(--sc-text, #1a1a1c);
+}
 .sc-menu-check {
   flex: none;
-  width: 15px;
-  height: 15px;
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(15px * var(--sc-scale, 1));
   color: var(--sc-text-2, #3f3f46);
 }
 
 .sc-menu-sep {
   height: 1px;
-  margin: 4px 6px;
+  margin: calc(4px * var(--sc-scale, 1)) calc(6px * var(--sc-scale, 1));
   background: var(--sc-line, #e9e9eb);
 }
 
 .sc-menu-head {
-  margin: 6px 6px 2px;
-  padding-top: 7px;
+  margin: calc(6px * var(--sc-scale, 1)) calc(6px * var(--sc-scale, 1)) 2px;
+  padding-top: calc(7px * var(--sc-scale, 1));
   border-top: 1px solid var(--sc-line, #e9e9eb);
   font-size: var(--sc-fs-label);
   font-weight: 500;
@@ -1063,7 +1180,7 @@ a.sc-btn {
 
 .sc-tray-error {
   margin: 0;
-  padding: 0 12px 2px;
+  padding: 0 calc(12px * var(--sc-scale, 1)) 2px;
 }
 
 .sc-mp {
@@ -1084,12 +1201,12 @@ a.sc-btn {
 .sc-mp-btn {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: calc(5px * var(--sc-scale, 1));
   min-width: 0;
-  height: 26px;
-  padding: 0 5px 0 7px;
+  height: calc(26px * var(--sc-scale, 1));
+  padding: 0 calc(5px * var(--sc-scale, 1)) 0 calc(7px * var(--sc-scale, 1));
   border: 0;
-  border-radius: var(--sc-r-pill, 999px);
+  border-radius: var(--sc-r-pill, calc(999px * var(--sc-scale, 1)));
   background: transparent;
   font: inherit;
   font-size: var(--sc-fs-label);
@@ -1116,13 +1233,13 @@ a.sc-btn {
   display: inline-grid;
   flex: none;
   place-items: center;
-  width: 13px;
-  height: 13px;
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
 }
 
 .sc-mp-glyph {
-  max-width: 13px;
-  max-height: 13px;
+  max-width: calc(13px * var(--sc-scale, 1));
+  max-height: calc(13px * var(--sc-scale, 1));
 }
 
 .sc-mp-label {
@@ -1133,35 +1250,35 @@ a.sc-btn {
 }
 
 .sc-mp-btn .sc-chev {
-  width: 11px;
-  height: 11px;
+  width: calc(11px * var(--sc-scale, 1));
+  height: calc(11px * var(--sc-scale, 1));
   color: var(--sc-faint, #a1a1aa);
 }
 
 .sc-atile .sc-runtime-logo {
-  width: 25px;
-  height: 25px;
-  border-radius: 7px;
+  width: calc(25px * var(--sc-scale, 1));
+  height: calc(25px * var(--sc-scale, 1));
+  border-radius: calc(7px * var(--sc-scale, 1));
 }
 .sc-atile .sc-runtime-mark {
-  width: 22px;
-  height: 22px;
+  width: calc(22px * var(--sc-scale, 1));
+  height: calc(22px * var(--sc-scale, 1));
 }
 .sc-atile .sc-runtime-letter {
-  font-size: 15px;
+  font-size: calc(var(--sc-font-size, 15px) * 1);
 }
 
 .sc-group-card:has(> .sc-runs-agent) {
-  padding: 0 16px;
+  padding: 0 calc(16px * var(--sc-scale, 1));
 }
 .sc-runs-agent {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: calc(14px * var(--sc-scale, 1));
   width: 100%;
   min-width: 0;
   margin: 0;
-  padding: 14px 0;
+  padding: calc(14px * var(--sc-scale, 1)) 0;
   border: 0;
   background: transparent;
   font: inherit;
@@ -1180,30 +1297,30 @@ a.sc-btn {
 .sc-runs-agent:focus-visible {
   outline: 2px solid var(--sc-accent, #18181b);
   outline-offset: -2px;
-  border-radius: var(--sc-r-sm, 6px);
+  border-radius: var(--sc-r-sm, calc(6px * var(--sc-scale, 1)));
 }
 
 .sc-runs-tile {
   flex: none;
   display: grid;
   place-items: center;
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  border-radius: calc(9px * var(--sc-scale, 1));
   background: var(--sc-tray-sunk, #efefed);
 }
 
 .sc-runs-tile .sc-runtime-logo {
-  width: 34px;
-  height: 34px;
-  border-radius: 9px;
+  width: calc(34px * var(--sc-scale, 1));
+  height: calc(34px * var(--sc-scale, 1));
+  border-radius: calc(7px * var(--sc-scale, 1));
 }
 .sc-runs-tile .sc-runtime-mark {
-  width: 30px;
-  height: 30px;
+  width: calc(30px * var(--sc-scale, 1));
+  height: calc(30px * var(--sc-scale, 1));
 }
 .sc-runs-tile .sc-runtime-letter {
-  font-size: 19px;
+  font-size: calc(var(--sc-font-size, 15px) * 1.2667);
 }
 .sc-runs-name {
   flex: 1;
@@ -1211,19 +1328,19 @@ a.sc-btn {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 16px;
+  font-size: calc(var(--sc-font-size, 15px) * 1.0667);
   font-weight: 600;
 }
 .sc-runs-agent .sc-chev {
   flex: none;
-  width: 16px;
-  height: 16px;
+  width: calc(16px * var(--sc-scale, 1));
+  height: calc(16px * var(--sc-scale, 1));
   color: var(--sc-faint, #a1a1aa);
 }
 
 .sc-runs-told {
   flex: none;
-  font-size: 14px;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
   color: var(--sc-muted, #6b6b69);
 }
 
@@ -1244,21 +1361,21 @@ a.sc-btn {
 .sc-runs-model .sc-mp-cap,
 .sc-runs-key {
   flex: none;
-  width: 58px;
-  font-size: 15px;
+  width: calc(58px * var(--sc-scale, 1));
+  font-size: calc(var(--sc-font-size, 15px) * 1);
   color: var(--sc-muted, #6b6b69);
 }
 .sc-runs-model .sc-mp-btn {
   flex: 1;
   justify-content: flex-start;
-  gap: 14px;
+  gap: calc(14px * var(--sc-scale, 1));
   min-width: 0;
   height: auto;
-  min-height: 44px;
+  min-height: calc(44px * var(--sc-scale, 1));
   padding: 0;
   border-radius: 0;
   background: transparent;
-  font-size: 15px;
+  font-size: calc(var(--sc-font-size, 15px) * 1);
   font-weight: 400;
   color: var(--sc-text, #1b1b1a);
 }
@@ -1277,8 +1394,8 @@ a.sc-btn {
 }
 .sc-runs-model .sc-mp-btn .sc-chev {
   flex: none;
-  width: 16px;
-  height: 16px;
+  width: calc(16px * var(--sc-scale, 1));
+  height: calc(16px * var(--sc-scale, 1));
   color: var(--sc-faint, #a1a1aa);
 }
 .sc-runs-model .sc-mp-btn .sc-chev-open {
@@ -1289,8 +1406,8 @@ a.sc-btn {
   display: flex;
   align-items: center;
   gap: 0;
-  min-height: 44px;
-  font-size: 15px;
+  min-height: calc(44px * var(--sc-scale, 1));
+  font-size: calc(var(--sc-font-size, 15px) * 1);
 }
 .sc-runs-val {
   flex: 1;
@@ -2149,7 +2266,100 @@ a.sc-btn {
 }
 
 .sc-result-ok {
-  color: var(--sc-ok, #22a06b);
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-arrived {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 18px;
+  padding: 10px 12px;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: 12px;
+  background: var(--sc-raised, #f6f6f7);
+  text-align: left;
+}
+.sc-arrived .sc-runtime-tile {
+  border-radius: 50%;
+  background: var(--sc-sheet, #ffffff);
+}
+.sc-arrived-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+.sc-arrived-auth {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12.5px;
+  color: var(--sc-muted, #6b6b73);
+}
+.sc-arrived-dot {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--sc-ok, #22a06b);
+}
+
+.sc-stall {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin: 16px 0 0;
+  padding: 14px;
+  list-style: none;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: 12px;
+  text-align: left;
+}
+.sc-stall-step {
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  column-gap: 12px;
+  row-gap: 2px;
+  align-items: start;
+}
+.sc-stall-step > svg {
+  grid-row: span 3;
+  width: 20px;
+  height: 20px;
+}
+.sc-stall-ok > circle:first-child {
+  fill: var(--sc-ok, #22a06b);
+}
+.sc-stall-open > circle:first-child {
+  fill: var(--sc-text, #1a1a1c);
+}
+.sc-stall-step path {
+  fill: none;
+  stroke: var(--sc-sheet, #ffffff);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.sc-stall-pt {
+  fill: var(--sc-sheet, #ffffff);
+}
+.sc-stall-title {
+  font-size: 14.5px;
+  font-weight: 500;
+  line-height: 20px;
+}
+.sc-stall-line {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--sc-muted, #6b6b73);
+}
+.sc-stall-more {
+  margin-top: 8px;
+}
+.sc-stall-act {
+  height: 36px;
+  padding: 0 16px;
 }
 
 .sc-result-off {
@@ -2277,6 +2487,8 @@ a.sc-btn {
 .sc-mp-btn:focus-visible,
 .sc-row-act:focus-visible,
 .sc-disc:focus-visible,
+.sc-act-small:focus-visible,
+.sc-away-go:focus-visible,
 .sc-pair:focus-visible,
 .sc-mrow-btn:focus-visible,
 .sc-input:focus-visible,
@@ -2373,12 +2585,7 @@ a.sc-btn {
 .sc-pill-mark {
   width: 16px;
   height: 16px;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .sc-pill-mark-busy {
-    animation: sc-spin 2400ms linear infinite;
-  }
+  --bx-w: 34;
 }
 
 .sc-btn-connected .sc-dot {
@@ -3409,3 +3616,279 @@ li.sc-plan-row.sc-plan-current {
 .sc-opt-has-warn {
   color: var(--sc-warn, #b06f14);
 }
+
+.bx * {
+  transform-box: view-box;
+}
+
+.bx-arc,
+.bx-st,
+.bx-z1 path,
+.bx-z2 path,
+.bx-ob path {
+  stroke-width: var(--bx-w, 17);
+}
+
+.bx[data-expression="thinking"] .bx-arc,
+.bx[data-expression="paused"] .bx-arc,
+.bx[data-expression="attention"] .bx-arc,
+.bx[data-expression="connecting"] .bx-arc,
+.bx[data-expression="gone"] .bx-arc,
+.bx[data-expression="snap"] .bx-arc,
+.bx[data-expression="listening"] .bx-arc,
+.bx[data-expression="permission"] .bx-arc,
+.bx[data-expression="ai"] .bx-arc {
+  display: none;
+}
+
+@keyframes bx-stream {
+  to {
+    stroke-dashoffset: -62;
+  }
+}
+
+.bx-st {
+  animation: bx-stream 0.9s linear infinite;
+}
+
+@keyframes bx-think {
+  0%,
+  100% {
+    opacity: 0.26;
+  }
+  33% {
+    opacity: 1;
+  }
+}
+
+.bx-th {
+  opacity: 0.26;
+  animation: bx-think 1.2s ease-in-out infinite;
+}
+
+.bx-th2 {
+  animation-delay: 0.4s;
+}
+
+.bx-th3 {
+  animation-delay: 0.8s;
+}
+
+@keyframes bx-att {
+  0%,
+  80%,
+  100% {
+    transform: rotate(0);
+  }
+  85% {
+    transform: rotate(-8deg);
+  }
+  95% {
+    transform: rotate(8deg);
+  }
+}
+
+.bx-at {
+  
+  transform-box: fill-box;
+  transform-origin: 50% 100%;
+  animation: bx-att 2s ease-in-out infinite;
+}
+
+@keyframes bx-z {
+  0% {
+    opacity: 0;
+    transform: translate(0, 12px);
+  }
+  25%,
+  70% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(8px, -16px);
+  }
+}
+
+.bx-z1 {
+  animation: bx-z 3s ease-in-out infinite;
+}
+
+.bx-z2 {
+  animation: bx-z 3s ease-in-out 0.75s infinite;
+}
+
+@keyframes bx-orb {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.bx-ob {
+  transform-origin: 278px 400px;
+  animation: bx-orb 1.15s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+
+@keyframes bx-xa {
+  0% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  8%,
+  22% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  45%,
+  100% {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+}
+
+.bx-xa {
+  opacity: 0;
+  animation: bx-xa 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+
+@keyframes bx-xx {
+  0%,
+  40% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  54% {
+    opacity: 1;
+    transform: scale(1.08);
+  }
+  60%,
+  90% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+.bx-xx {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: bx-xx 3.2s ease-out infinite;
+}
+
+@keyframes bx-voice {
+  0%,
+  100% {
+    transform: scaleY(0.45);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+
+.bx-vb {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: bx-voice 0.9s ease-in-out infinite;
+}
+
+.bx-vb2 {
+  animation-delay: 0.15s;
+}
+
+.bx-vb3 {
+  animation-delay: 0.3s;
+}
+
+@keyframes bx-wait {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}
+
+.bx-w {
+  opacity: 0.15;
+  animation: bx-wait 1.2s linear infinite;
+}
+
+@keyframes bx-spark {
+  0%,
+  100% {
+    transform: scale(1) rotate(0);
+  }
+  50% {
+    transform: scale(0.7) rotate(22deg);
+  }
+}
+
+.bx-sp {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: bx-spark 2.6s ease-in-out infinite;
+}
+
+.bx-sp2 {
+  animation-delay: -0.87s;
+}
+
+.bx-sp3 {
+  animation-delay: -1.73s;
+}
+
+@keyframes bx-snap {
+  0%,
+  6% {
+    transform: translateX(90px);
+    opacity: 0;
+  }
+  24% {
+    transform: translateX(-10px);
+    opacity: 1;
+  }
+  30% {
+    transform: translateX(4px);
+  }
+  35%,
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.bx-snap {
+  animation: bx-snap 3.6s cubic-bezier(0.3, 0, 0.2, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bx .bx-st,
+  .bx .bx-th,
+  .bx .bx-at,
+  .bx .bx-z1,
+  .bx .bx-z2,
+  .bx .bx-ob,
+  .bx .bx-xa,
+  .bx .bx-xx,
+  .bx .bx-snap,
+  .bx .bx-vb,
+  .bx .bx-w,
+  .bx .bx-sp {
+    animation: none;
+  }
+
+  
+  .bx .bx-th,
+  .bx .bx-z1,
+  .bx .bx-z2,
+  .bx .bx-xx,
+  .bx .bx-snap,
+  .bx .bx-w {
+    opacity: 1;
+    transform: none;
+  }
+}