design(ai): enhance speed dial labels clarity and implement responsive positioning clamping

webapp/tipitaka-web/src/components/ai/AIFloatingMenu.tsx

@@ -133,7 +133,7 @@ const AIFloatingMenu: React.FC = () => {
                   onClick={() => handleAction(act.prompt, act.isPrompt)}
                 >
                   {/* Label Pill */}
-                  <span className={`mr-3 px-3 py-1.5 rounded-xl text-[13px] md:text-sm font-bold border shadow-md whitespace-nowrap transition-transform duration-200 group-hover:scale-105 ${s.labelBg}`}>
+                  <span className={`mr-3 px-4 py-1.5 rounded-xl text-sm md:text-[15px] font-extrabold border shadow-md whitespace-nowrap transition-all duration-200 group-hover:scale-105 group-hover:border-[#0d9488] group-hover:text-[#0d9488] dark:group-hover:text-[#14b8a6] dark:group-hover:border-[#14b8a6] ${s.labelBg}`}>
                     {act.label}
                   </span>
                   

webapp/tipitaka-web/src/components/ai/AIPopup.tsx

@@ -52,27 +52,54 @@ const AIPopup: React.FC = () => {
 
   // Restore saved position + width/height on mount
   useEffect(() => {
-    if (dragPos) setPos(dragPos);
-    
+    let currentW = panelWidth;
     const savedW = localStorage.getItem('tipitaka-ai-panel-width');
     if (savedW) {
       const w = parseInt(savedW, 10);
       if (w >= 300 && w <= window.innerWidth * 0.95) {
+        currentW = w;
         setWidth(w);
         setPanelWidth(w);
       }
     }
 
+    let currentH = panelHeight;
     const savedH = localStorage.getItem('tipitaka-ai-panel-height');
     if (savedH) {
       const h = parseInt(savedH, 10);
       if (h >= 200 && h <= window.innerHeight * 0.9) {
+        currentH = h;
         setHeight(h);
         setPanelHeight(h);
       }
     }
+
+    if (dragPos) {
+      const clampedX = Math.max(0, Math.min(dragPos.x, window.innerWidth - currentW));
+      const clampedY = Math.max(0, Math.min(dragPos.y, window.innerHeight - currentH));
+      setPos({ x: clampedX, y: clampedY });
+    }
   }, []);
 
+  // Clamp position when window size changes to prevent window from going off-screen
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setPos(null);
+        return;
+      }
+      setPos(prev => {
+        const targetPos = prev || dragPos;
+        if (!targetPos) return null;
+        const clampedX = Math.max(0, Math.min(targetPos.x, window.innerWidth - width));
+        const clampedY = Math.max(0, Math.min(targetPos.y, window.innerHeight - height));
+        return { x: clampedX, y: clampedY };
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [width, height, dragPos]);
+
 
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {

webapp/tipitaka-web/src/stores/aiStore.ts

@@ -45,7 +45,14 @@ export const useAIStore = create<AIState>((set, get) => ({
   ragReady: false,
   ragChecking: false,
   ragLoading: false,
-  dragPos: null,
+  dragPos: (() => {
+    try {
+      const pos = localStorage.getItem('tipitaka-ai-drag-pos');
+      return pos ? JSON.parse(pos) : null;
+    } catch {
+      return null;
+    }
+  })(),
   viewMode: 'chat',
   panelWidth: 400,
   panelHeight: 550,