@soba-so/react 0.0.19 → 0.0.21

package/dist/styles.css

@@ -12,9 +12,14 @@
   --sc-ok: #22a06b;
   --sc-warn: #b06f14;
   
-  --sc-tray: var(--sc-raised, #f6f6f7);
+  --sc-danger: #c2452d;
+  
+  --sc-warn-dot: #d9a21b;
+  
+  
+  --sc-tray: #f3f3f2;
   --sc-tray-card: var(--sc-sheet, #ffffff);
-  --sc-tray-sunk: var(--sc-raised, #f6f6f7);
+  --sc-tray-sunk: #efefed;
   
   --sc-font-size: 15px;
   --sc-fs-label: max(11px, calc(var(--sc-font-size) * 0.77));
@@ -44,9 +49,6 @@
 
   box-sizing: border-box;
   
-  width: 100%;
-  max-width: 560px;
-  margin: 0 auto;
   color: var(--sc-text, #1a1a1c);
   font-family: var(
     --sc-font,
@@ -62,6 +64,12 @@
   line-height: 1.5;
   letter-spacing: -0.005em;
 }
+
+:where(.soba-connect) {
+  width: 100%;
+  max-width: 560px;
+  margin: 0 auto;
+}
 .soba-connect *,
 .soba-connect *::before,
 .soba-connect *::after {
@@ -197,10 +205,6 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
-.sc-tone-absent {
-  color: var(--sc-faint, #a1a1aa);
-}
-
 .sc-error {
   color: var(--sc-warn, #b06f14);
   font-size: var(--sc-fs-body);
@@ -249,10 +253,11 @@ a.sc-btn {
 
 .sc-tray {
   display: grid;
-  gap: 8px;
-  padding: 6px;
-  border-radius: 18px;
-  background: var(--sc-tray, #f6f6f7);
+  
+  gap: 20px;
+  padding: 20px;
+  border-radius: 24px;
+  background: var(--sc-tray, #f3f3f2);
 }
 
 .sc-group {
@@ -263,8 +268,9 @@ a.sc-btn {
   display: flex;
   align-items: center;
   gap: 4px;
-  min-height: 24px;
-  padding: 0 2px 3px 12px;
+  min-height: 22px;
+  
+  padding: 0 0 8px 4px;
 }
 
 .sc-cap-acts {
@@ -281,24 +287,27 @@ a.sc-btn {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--sc-fs-label);
+  font-size: 14px;
   letter-spacing: 0;
   color: var(--sc-muted, #6b6b73);
 }
 
 .sc-group-card {
-  padding: 6px 0 6px 12px;
-  border-radius: var(--sc-r-lg, 14px);
+  padding: 7px 0 7px 12px;
+  border-radius: 18px;
   background: var(--sc-tray-card, #ffffff);
-  box-shadow: var(--sc-shadow-1);
+  box-shadow:
+    var(--sc-shadow-1),
+    inset 0 0 0 1px color-mix(in srgb, var(--sc-line, #e9e9eb) 70%, transparent);
 }
 
 .sc-disc {
   flex: none;
   display: grid;
   place-items: center;
-  width: 26px;
-  height: 26px;
+  
+  width: 36px;
+  height: 36px;
   padding: 0;
   border: 0;
   border-radius: 50%;
@@ -336,9 +345,9 @@ a.sc-btn {
 .sc-mrow {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 14px;
   min-height: 52px;
-  padding: 4px 12px 4px 0;
+  padding: 7px 16px 7px 4px;
 }
 
 .sc-mtile {
@@ -346,27 +355,29 @@ a.sc-btn {
   flex: none;
   display: grid;
   place-items: center;
-  width: 38px;
-  height: 38px;
+  width: 44px;
+  height: 44px;
+  
   border-radius: 12px;
-  background: var(--sc-tray-sunk, #f6f6f7);
-  box-shadow: inset 0 0 0 1px var(--sc-line, #e9e9eb);
-  color: var(--sc-text, #1a1a1c);
+  
+  background: var(--sc-tray-sunk, #efefed);
+  color: var(--sc-text, #1b1b1a);
 }
 
 .sc-mglyph {
   width: 24px;
-  height: 18px;
+  height: 19px;
 }
 
 .sc-mbadge {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 10px;
-  height: 10px;
+  left: auto;
+  bottom: -3px;
+  right: -3px;
+  width: 14px;
+  height: 14px;
   border-radius: 50%;
-  transform: translate(30%, 30%);
+  transform: none;
   box-shadow: 0 0 0 2.5px var(--sc-tray-card, #ffffff);
 }
 
@@ -382,34 +393,51 @@ a.sc-btn {
   background: var(--sc-line-2, #dcdce0);
 }
 
+.sc-mbadge-away {
+  background: var(--sc-warn-dot, #d9a21b);
+}
+
 .sc-mid {
   display: flex;
   flex: 1;
   min-width: 0;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
 }
 
 .sc-mname {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--sc-fs-small);
-  font-weight: 550;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .sc-mmeta {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1px 6px;
-  font-size: var(--sc-fs-label);
+  align-items: baseline;
+  gap: 10px;
+  font-size: 14px;
   line-height: 1.35;
   color: var(--sc-muted, #6b6b73);
 }
 
+.sc-mmeta-is {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-mmeta-now {
+  flex: none;
+  margin-left: auto;
+  color: var(--sc-text-2, #3f3f46);
+  font-variant-numeric: tabular-nums;
+}
+
 .sc-mmeta-sep {
-  padding-right: 6px;
+  padding: 0 6px;
   color: var(--sc-line-2, #dcdce0);
 }
 
@@ -447,41 +475,295 @@ a.sc-btn {
   transform: rotate(90deg);
 }
 
+.sc-group-card:has(> .sc-rrow) {
+  padding: 0 16px;
+}
 .sc-rrow {
   display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 6px 12px 6px 0;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 0;
 }
-
-.sc-rrow .sc-runtime-tile {
-  margin-top: 1px;
+.sc-rrow + .sc-rrow {
+  box-shadow: inset 0 1px 0 var(--sc-line, #e9e9e7);
 }
-
-.sc-rtop {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
+.sc-rdot {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--sc-line-2, #dcdce0);
 }
-
-.sc-rtop .sc-averdict {
-  font-variant-numeric: tabular-nums;
+.sc-rdot-live {
+  background: var(--sc-ok, #1e8e5a);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .sc-rdot-live {
+    animation: sc-breathe 1.6s ease-in-out infinite;
+  }
+}
+@keyframes sc-breathe {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+.sc-rtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  font-weight: 500;
 }
 
 .sc-rstop {
-  align-self: center;
-  width: 24px;
-  height: 24px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  margin: -8px -10px -8px 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--sc-muted, #6b6b69);
+  cursor: pointer;
 }
 
+.sc-rstop-ring {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px var(--sc-line, #e9e9e7);
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease,
+    color 120ms ease;
+}
+.sc-rstop:hover:not(:disabled) {
+  color: var(--sc-text, #1b1b1a);
+}
+.sc-rstop:hover:not(:disabled) .sc-rstop-ring {
+  background: var(--sc-tray-sunk, #efefed);
+  box-shadow: inset 0 0 0 1px transparent;
+}
+.sc-rstop .sc-dglyph {
+  width: 10px;
+  height: 10px;
+}
+.sc-rstop:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
 .sc-rstep {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  font-size: var(--sc-fs-label);
+  line-clamp: 2;
+  font-size: 13px;
   line-height: 1.4;
-  color: var(--sc-muted, #6b6b73);
+  color: var(--sc-muted, #6b6b69);
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-blank {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 24px 24px 26px;
+  text-align: center;
+}
+.sc-blank-mark {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--sc-tray-sunk, #efefed);
+  color: var(--sc-faint, #8c8c89);
+}
+.sc-blank-glyph {
+  width: 20px;
+  height: 20px;
+}
+.sc-blank-say {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.sc-blank-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+.sc-blank-body {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--sc-muted, #6b6b69);
+}
+
+.sc-blank-act {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid var(--sc-line, #e6e6e3);
+  border-radius: 11px;
+  color: var(--sc-text, #1b1b1a);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 120ms ease;
+}
+.sc-blank-act:hover {
+  background: var(--sc-tray-sunk, #efefed);
+}
+
+.sc-alarm {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  margin: -7px -0 -7px -12px;
+  padding: 16px;
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--sc-danger, #c2452d) 9%, var(--sc-tray-card, #ffffff));
+}
+
+.sc-alarm-mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  margin-top: 1px;
+  color: var(--sc-danger, #c2452d);
+}
+.sc-alarm-mark .sc-hglyph {
+  width: 22px;
+  height: 22px;
+}
+
+.sc-alarm-warn {
+  background: color-mix(in srgb, var(--sc-warn, #b06f14) 10%, var(--sc-tray-card, #ffffff));
+}
+.sc-alarm-warn .sc-alarm-mark {
+  color: var(--sc-warn, #b06f14);
+}
+.sc-alarm + .sc-alarm {
+  margin-top: 8px;
+}
+.sc-alarm-say {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.sc-alarm-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+.sc-alarm-body {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--sc-text-2, #5a4a46);
+}
+
+.sc-blank-soba {
+  display: grid;
+  place-items: center;
+  color: var(--sc-text, #1b1b1a);
+}
+.sc-blank-soba-mark {
+  width: 48px;
+  height: 48px;
+}
+
+.sc-cap-link {
+  flex: none;
+  margin: -8px -4px -8px 0;
+  padding: 8px 4px;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: var(--sc-text-2, #3f3f46);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.sc-cap-link:hover {
+  color: var(--sc-text, #1b1b1a);
+}
+
+.sc-acts {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.sc-act-go {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  height: 48px;
+  border: 0;
+  border-radius: 14px;
+  background: var(--sc-accent, #1b1b1a);
+  color: var(--sc-accent-fg, #ffffff);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 120ms ease;
+}
+.sc-act-go:hover:not(:disabled) {
+  opacity: 0.88;
+}
+.sc-act-quiet {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 44px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  color: var(--sc-muted, #6b6b69);
+  cursor: pointer;
+}
+.sc-act-quiet:hover:not(:disabled) {
+  color: var(--sc-text, #1b1b1a);
+}
+.sc-act-go:disabled,
+.sc-act-quiet:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.sc-act-go[data-spin],
+.sc-act-quiet[data-spin] {
+  opacity: 1;
+}
+.sc-act-glyph {
+  flex: none;
+  width: 15px;
+  height: 15px;
+}
+
+.sc-act-miss {
+  margin: 4px 2px 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--sc-muted, #6b6b69);
+  text-align: center;
 }
 
 .sc-arow {
@@ -496,13 +778,27 @@ a.sc-btn {
   flex: none;
   display: grid;
   place-items: center;
-  width: 22px;
-  height: 22px;
+  width: 30px;
+  height: 30px;
   border-radius: var(--sc-r-sm, 6px);
   border: 1px solid var(--sc-line, #e9e9eb);
   background: var(--sc-tray-sunk, #f6f6f7);
 }
 
+.sc-runtime-logo {
+  width: 15px;
+  height: 15px;
+  border-radius: 3px;
+  object-fit: contain;
+}
+
+.sc-runtime-letter {
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--sc-muted, #6b6b73);
+}
+
 .sc-runtime-mark {
   width: 13px;
   height: 13px;
@@ -518,10 +814,6 @@ a.sc-btn {
   font-size: var(--sc-fs-small);
 }
 
-.sc-aname-absent {
-  color: var(--sc-muted, #6b6b73);
-}
-
 .sc-aversion {
   color: var(--sc-muted, #6b6b73);
 }
@@ -535,22 +827,10 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
-.sc-sglyph {
-  flex: none;
-  width: 11px;
-  height: 11px;
-  color: var(--sc-ok, #22a06b);
-}
-
-.sc-aserving {
-  margin-left: 5px;
-  font-variant-numeric: tabular-nums;
-}
-
 .sc-orow {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 18px;
   min-height: 34px;
   padding-right: 12px;
 }
@@ -596,7 +876,7 @@ a.sc-btn {
 .sc-pair {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 18px;
   width: calc(100% + 4px);
   min-height: 34px;
   margin-left: -4px;
@@ -616,7 +896,8 @@ a.sc-btn {
 }
 
 .sc-open-app {
-  color: inherit;
+  
+  color: var(--sc-muted, #6b6b73);
   text-decoration: none;
 }
 
@@ -632,99 +913,76 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
-.sc-runs-to {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: 2px;
-  min-width: 0;
-  max-width: 62%;
-  font-size: var(--sc-fs-label);
-  color: var(--sc-muted, #6b6b73);
-}
-
-.sc-runs-cap {
-  flex: none;
-  white-space: nowrap;
-}
-
-.sc-runs-fixed,
-.sc-runs-btn {
-  display: inline-flex;
+.sc-nilrow {
+  display: flex;
   align-items: center;
-  gap: 5px;
-  min-width: 0;
-  height: 24px;
-  padding: 0 6px;
-  font-size: var(--sc-fs-label);
-  font-weight: 500;
-  color: var(--sc-text-2, #3f3f46);
+  gap: 10px;
+  margin: 0;
+  padding: 9px 0;
+  font-size: 14px;
+  color: var(--sc-muted, #6b6b69);
 }
 
-.sc-runs-btn {
-  padding-right: 4px;
-  border: 0;
-  border-radius: var(--sc-r-pill, 999px);
-  background: transparent;
-  font-family: inherit;
-  cursor: pointer;
-  transition: background-color 120ms ease, color 120ms ease;
+.sc-group-card:has(> .sc-nilrow) {
+  padding: 7px 16px;
 }
-
-.sc-runs-btn:hover:not(:disabled),
-.sc-runs-btn[aria-expanded="true"] {
-  background: var(--sc-tray-card, #ffffff);
-  color: var(--sc-text, #1a1a1c);
+.sc-nilrow-mark {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--sc-tray-sunk, #efefed);
+  color: var(--sc-faint, #8c8c89);
 }
-
-.sc-runs-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
+.sc-nilrow-mark .sc-blank-glyph {
+  width: 15px;
+  height: 15px;
 }
 
-.sc-runs-glyph {
-  flex: none;
-  width: 12px;
-  height: 12px;
+.sc-heads {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 2px 12px 3px 0;
+  padding: 8px 10px;
+  border-radius: var(--sc-r, 10px);
+  background: color-mix(in srgb, var(--sc-warn, #b06f14) 9%, var(--sc-tray-card, #ffffff));
 }
-
-.sc-runs-mark {
-  display: inline-grid;
+.sc-heads-mark {
   flex: none;
+  display: grid;
   place-items: center;
-  width: 14px;
-  height: 14px;
-}
-
-.sc-runs-mark > * {
-  max-width: 14px;
-  max-height: 14px;
+  
+  margin-top: 1px;
+  color: var(--sc-warn, #b06f14);
 }
-
-.sc-runs-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.sc-hglyph {
+  width: 13px;
+  height: 13px;
 }
-
-.sc-runs-btn .sc-chev {
-  width: 11px;
-  height: 11px;
-  color: var(--sc-faint, #a1a1aa);
+.sc-heads-say {
+  margin: 0;
+  font-size: var(--sc-fs-label);
+  line-height: 1.45;
+  color: var(--sc-text-2, #3f3f46);
 }
 
 .sc-menu {
   position: fixed;
   inset: auto;
   z-index: 2147483647;
-  width: 248px;
+  
+  width: 320px;
   margin: 0;
   padding: 4px;
   border: 1px solid var(--sc-line, #e9e9eb);
   border-radius: 12px;
   background: var(--sc-tray-card, #ffffff);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.12),
+    0 2px 6px rgba(0, 0, 0, 0.06);
   color: var(--sc-text, #1a1a1c);
   
   max-height: 60vh;
@@ -735,15 +993,16 @@ a.sc-btn {
 .sc-menu-item {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 14px;
   width: 100%;
-  min-height: 34px;
-  padding: 5px 8px;
+  
+  min-height: 44px;
+  padding: 7px 12px;
   border: 0;
-  border-radius: 8px;
+  border-radius: 12px;
   background: transparent;
   font: inherit;
-  font-size: var(--sc-fs-small);
+  font-size: 15px;
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -769,9 +1028,9 @@ a.sc-btn {
 }
 
 .sc-menu-note {
-  font-size: var(--sc-fs-label);
+  font-size: 13.5px;
   line-height: 1.4;
-  color: var(--sc-muted, #6b6b73);
+  color: var(--sc-muted, #6b6b69);
 }
 
 .sc-menu-check {
@@ -802,6 +1061,11 @@ a.sc-btn {
   border-top: 0;
 }
 
+.sc-tray-error {
+  margin: 0;
+  padding: 0 12px 2px;
+}
+
 .sc-mp {
   display: inline-flex;
   align-items: center;
@@ -832,7 +1096,9 @@ a.sc-btn {
   font-weight: 500;
   color: var(--sc-text-2, #3f3f46);
   cursor: pointer;
-  transition: background-color 120ms ease, color 120ms ease;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
 }
 
 .sc-mp-btn:hover:not(:disabled),
@@ -872,32 +1138,166 @@ a.sc-btn {
   color: var(--sc-faint, #a1a1aa);
 }
 
-.sc-row-act {
-  flex: none;
-  padding: 3px 9px;
-  border: 1px solid transparent;
-  border-radius: var(--sc-r-pill, 999px);
-  background: var(--sc-tray-sunk, #f6f6f7);
+.sc-atile .sc-runtime-logo {
+  width: 25px;
+  height: 25px;
+  border-radius: 7px;
+}
+.sc-atile .sc-runtime-mark {
+  width: 22px;
+  height: 22px;
+}
+.sc-atile .sc-runtime-letter {
+  font-size: 15px;
+}
+
+.sc-group-card:has(> .sc-runs-agent) {
+  padding: 0 16px;
+}
+.sc-runs-agent {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 14px 0;
+  border: 0;
+  background: transparent;
   font: inherit;
-  font-size: var(--sc-fs-label);
-  font-weight: 500;
-  color: var(--sc-text-2, #3f3f46);
+  color: inherit;
+  text-align: left;
   cursor: pointer;
+}
+
+.sc-runs-dim {
+  opacity: 0.55;
+}
+.sc-runs-agent:disabled,
+.sc-runs-fixed {
+  cursor: default;
+}
+.sc-runs-agent:focus-visible {
+  outline: 2px solid var(--sc-accent, #18181b);
+  outline-offset: -2px;
+  border-radius: var(--sc-r-sm, 6px);
+}
+
+.sc-runs-tile {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: var(--sc-tray-sunk, #efefed);
+}
+
+.sc-runs-tile .sc-runtime-logo {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+}
+.sc-runs-tile .sc-runtime-mark {
+  width: 30px;
+  height: 30px;
+}
+.sc-runs-tile .sc-runtime-letter {
+  font-size: 19px;
+}
+.sc-runs-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 16px;
+  font-weight: 600;
+}
+.sc-runs-agent .sc-chev {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  color: var(--sc-faint, #a1a1aa);
 }
 
-.sc-row-act:hover:not(:disabled) {
-  color: var(--sc-text, #1a1a1c);
+.sc-runs-told {
+  flex: none;
+  font-size: 14px;
+  color: var(--sc-muted, #6b6b69);
 }
 
-.sc-row-act:disabled {
-  opacity: 0.5;
-  cursor: default;
+.sc-runs-rule {
+  display: block;
+  height: 1px;
+  background: var(--sc-line, #e9e9e7);
 }
 
-.sc-tray-error {
-  margin: 0;
-  padding: 0 12px 2px;
+.sc-runs-model {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+  max-width: none;
+  min-width: 0;
+}
+.sc-runs-model .sc-mp-cap,
+.sc-runs-key {
+  flex: none;
+  width: 58px;
+  font-size: 15px;
+  color: var(--sc-muted, #6b6b69);
+}
+.sc-runs-model .sc-mp-btn {
+  flex: 1;
+  justify-content: flex-start;
+  gap: 14px;
+  min-width: 0;
+  height: auto;
+  min-height: 44px;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  font-size: 15px;
+  font-weight: 400;
+  color: var(--sc-text, #1b1b1a);
+}
+.sc-runs-model .sc-mp-btn:hover:not(:disabled),
+.sc-runs-model .sc-mp-btn[aria-expanded="true"] {
+  background: transparent;
+  color: var(--sc-text, #1b1b1a);
+}
+.sc-runs-model .sc-mp-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+.sc-runs-model .sc-mp-btn .sc-chev {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  color: var(--sc-faint, #a1a1aa);
+}
+.sc-runs-model .sc-mp-btn .sc-chev-open {
+  transform: none;
+}
+
+.sc-runs-said {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-height: 44px;
+  font-size: 15px;
+}
+.sc-runs-val {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sc-pop {
@@ -907,8 +1307,9 @@ a.sc-btn {
   right: auto;
   bottom: auto;
   z-index: 2147483000;
-  width: min(92vw, 320px);
-  max-width: min(92vw, 320px);
+  
+  width: min(92vw, 420px);
+  max-width: min(92vw, 420px);
   
   max-height: calc(100vh - 24px);
   overflow-y: auto;
@@ -924,11 +1325,6 @@ a.sc-btn {
     var(--sc-shadow-2);
 }
 
-.sc-pop > .sc-tray {
-  background: transparent;
-  border-radius: inherit;
-}
-
 @keyframes sc-pop-in {
   from {
     opacity: 0;
@@ -991,6 +1387,8 @@ a.sc-btn {
     
     --sc-ok: #4cb782;
     --sc-warn: #f2994a;
+    --sc-danger: #e4705a;
+    --sc-warn-dot: #e0ad33;
     
     --sc-tray: var(--sc-ground, #0f0f11);
     --sc-tray-card: var(--sc-raised, #1d1d20);
@@ -1016,6 +1414,7 @@ a.sc-btn {
   
   --sc-ok: #4cb782;
   --sc-warn: #f2994a;
+  --sc-danger: #e4705a;
   
   --sc-tray: var(--sc-ground, #0f0f11);
   --sc-tray-card: var(--sc-raised, #1d1d20);
@@ -1874,7 +2273,7 @@ a.sc-btn {
 .sc-step-lead:focus-visible,
 .sc-step-links a:focus-visible,
 .sc-alt-link:focus-visible,
-.sc-runs-btn:focus-visible,
+.sc-runs-agent:focus-visible,
 .sc-mp-btn:focus-visible,
 .sc-row-act:focus-visible,
 .sc-disc:focus-visible,
@@ -1934,8 +2333,9 @@ a.sc-btn {
   border-radius: var(--sc-r-pill, 999px);
   border-color: var(--sc-line, #e9e9eb);
   
-  box-shadow: var(--sc-shadow-1);
-  font-size: var(--sc-fs-small);
+  
+  box-shadow: var(--sc-shadow-1, 0 1px 2px rgb(0 0 0 / 5%));
+  font-size: var(--sc-fs-small, 12.5px);
   font-weight: 500;
   
   letter-spacing: -0.005em;