refactor: 優化三個錦囊 UI 設計

- 縮小錦囊按鈕至原大小的 1/4：
  * padding: 20px → 8px 12px
  * font-size: 圖標 2rem → 1rem，標題 0.95rem → 0.75rem
  * gap: 16px → 8px
  * 整體更緊湊，節省空間

- 優化 Prompt 編輯模態框 Layout：
  * 寬度增加：700px → 900px
  * 高度限制：90vh，防止超出螢幕
  * 標題和副標題改為兩欄並排顯示
  * Textarea 高度增加：12 → 16 行
  * 使用等寬字體 Consolas/Monaco，提升 prompt 編輯體驗
  * 提示區塊優化為藍色主題，更醒目
  * 按鈕添加 SVG 圖標，更直觀
  * 使用 flexbox 確保 footer 固定底部

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

styles/components.css

@@ -269,58 +269,58 @@ select {
 .ai-bags-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 16px;
-    margin-bottom: 24px;
+    gap: 8px;
+    margin-bottom: 16px;
 }
 
 .ai-bag {
     position: relative;
-    padding: 20px;
+    padding: 8px 12px;
     background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
-    border-radius: var(--radius);
+    border-radius: 6px;
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
+    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
     text-align: center;
 }
 
 .ai-bag:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.5);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.5);
 }
 
 .ai-bag:active {
-    transform: translateY(-2px);
+    transform: translateY(-1px);
 }
 
 .ai-bag .bag-icon {
-    font-size: 2rem;
-    margin-bottom: 8px;
+    font-size: 1rem;
+    margin-bottom: 2px;
 }
 
 .ai-bag .bag-title {
     color: white;
     font-weight: 600;
-    font-size: 0.95rem;
-    margin-bottom: 4px;
+    font-size: 0.75rem;
+    margin-bottom: 2px;
 }
 
 .ai-bag .bag-subtitle {
     color: rgba(255, 255, 255, 0.8);
-    font-size: 0.75rem;
-    margin-top: 4px;
+    font-size: 0.65rem;
+    margin-top: 2px;
 }
 
 .ai-bag .bag-edit-btn {
     position: absolute;
-    top: 8px;
-    right: 8px;
+    top: 4px;
+    right: 4px;
     background: rgba(255, 255, 255, 0.2);
     border: none;
-    border-radius: 4px;
-    padding: 4px 8px;
+    border-radius: 3px;
+    padding: 2px 4px;
     cursor: pointer;
-    font-size: 0.9rem;
+    font-size: 0.7rem;
     transition: all 0.2s ease;
     line-height: 1;
 }
@@ -336,13 +336,13 @@ select {
 }
 
 .ai-bag .spinner {
-    width: 20px;
-    height: 20px;
+    width: 14px;
+    height: 14px;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-top-color: white;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
-    margin: 8px auto;
+    margin: 4px auto;
 }
 
 /* ==================== Old AI Button (Deprecated) ==================== */