Unify category tree pickers and prefer free-text technical AI fields.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/CategoryTreeSelect.module.css

@@ -5,6 +5,10 @@
   min-height: 0;
 }
 
+.wrapperOpen {
+  z-index: 130;
+}
+
 .inputWrap {
   display: flex;
   align-items: center;
@@ -75,14 +79,8 @@
 }
 
 .panel {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  right: 0;
-  z-index: 120;
   max-height: min(320px, 50vh);
   overflow-y: auto;
-  margin-top: 0;
   padding: 4px;
   background: var(--elevated-surface);
   border: 1px solid var(--glass-border);
@@ -90,6 +88,14 @@
   box-shadow: 0 10px 28px rgba(31, 38, 135, 0.14);
 }
 
+.panelOverlay {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  z-index: 120;
+}
+
 .panelInFlow {
   position: static;
   margin-top: 6px;
@@ -98,6 +104,29 @@
   z-index: auto;
 }
 
+.noneOption {
+  width: 100%;
+  padding: 8px 10px;
+  margin-bottom: 4px;
+  border-radius: 8px;
+  font-size: var(--field-font-size);
+  font-family: var(--font-ui);
+  text-align: start;
+  color: var(--text-secondary);
+  transition: background 0.15s, color 0.15s;
+}
+
+.noneOption:hover {
+  background: rgba(var(--primary-rgb) / 0.08);
+  color: var(--text-primary);
+}
+
+.noneOptionSelected {
+  background: rgba(var(--primary-rgb) / 0.12);
+  color: var(--primary);
+  font-weight: 500;
+}
+
 .row {
   display: flex;
   align-items: center;
@@ -135,7 +164,7 @@
   background: transparent;
   cursor: pointer;
   outline: none;
-  transition: background 0.15s, color 0.15s, transform 0.2s;
+  transition: background 0.15s, color 0.15s;
 }
 
 .toggleBtn:hover {
@@ -149,23 +178,6 @@
   height: 24px;
 }
 
-.chevron {
-  display: inline-flex;
-  transition: transform 0.2s ease;
-}
-
-:global([dir='rtl']) .chevron {
-  transform: scaleX(-1);
-}
-
-.chevronOpen {
-  transform: rotate(90deg);
-}
-
-:global([dir='rtl']) .chevronOpen {
-  transform: scaleX(-1) rotate(90deg);
-}
-
 .selectBtn {
   flex: 1;
   min-width: 0;