feat(bots): highlight empty routing action with amber glow

web/src/app/home/bots/components/bot-form/EventBindingsEditor.module.css

@@ -0,0 +1,32 @@
+.emptyRouteHint {
+  --route-glow-soft: 6%;
+  --route-glow-strong: 30%;
+  animation: route-hint-glow 3.6s ease-in-out infinite;
+}
+
+:global(.dark) .emptyRouteHint {
+  --route-glow-soft: 4%;
+  --route-glow-strong: 22%;
+}
+
+.emptyRouteHint:hover,
+.emptyRouteHint:focus-visible,
+.emptyRouteHint[data-state='open'] {
+  animation: none;
+}
+
+@keyframes route-hint-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--color-amber-400) var(--route-glow-soft), transparent);
+  }
+  50% {
+    box-shadow: 0 0 14px 4px color-mix(in srgb, var(--color-amber-400) var(--route-glow-strong), transparent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .emptyRouteHint {
+    animation: none;
+  }
+}

web/src/app/home/bots/components/bot-form/EventBindingsEditor.tsx

@@ -11,6 +11,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { cn } from '@/lib/utils';
+import styles from './EventBindingsEditor.module.css';
 import type { TFunction } from 'i18next';
 import { UseFormReturn } from 'react-hook-form';
 import {
@@ -1800,7 +1801,12 @@ export default function EventBindingsEditor({
       <div className="flex flex-wrap gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button type="button" variant="outline" size="sm">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className={bindings.length === 0 ? styles.emptyRouteHint : undefined}
+            >
               <Plus className="h-4 w-4 mr-1" />
               {t('bots.addBehavior')}
               <ChevronDown className="ml-1 h-3.5 w-3.5" />