Update ConnectAI codebase

media/sidebar.css

@@ -953,6 +953,50 @@
             border-top: 1px dashed var(--border);
         }
 
+        /* Devil's Advocate (도현) 반박 카드 — main 답변 직후 한 장씩.
+           accent 와 구분되도록 보라색 톤 + 마스크 이모지 prefix 로 시선 끌기. */
+        .devil-rebuttal-card {
+            border: 1px solid rgba(167, 139, 250, 0.55);
+            background: rgba(167, 139, 250, 0.06);
+            border-radius: 10px;
+            padding: 10px 12px;
+            margin: 8px 0;
+            font-size: 12px;
+            line-height: 1.55;
+            color: var(--text);
+        }
+        .devil-rebuttal-head {
+            font-size: 11px;
+            color: #a78bfa;
+            margin-bottom: 6px;
+            letter-spacing: 0.02em;
+        }
+        .devil-rebuttal-body {
+            white-space: pre-wrap;
+            margin-bottom: 8px;
+        }
+        .devil-rebuttal-actions {
+            display: flex;
+            gap: 8px;
+        }
+        .devil-rebuttal-actions button {
+            background: rgba(167, 139, 250, 0.16);
+            border: 1px solid rgba(167, 139, 250, 0.4);
+            color: #c7b7ff;
+            padding: 4px 10px;
+            border-radius: 6px;
+            font-size: 11px;
+            cursor: pointer;
+        }
+        .devil-rebuttal-actions button.ghost {
+            background: transparent;
+            border-color: var(--line);
+            color: var(--muted);
+        }
+        .devil-rebuttal-actions button:hover {
+            background: rgba(167, 139, 250, 0.28);
+        }
+
         /* Intent Alignment 카드 — new_task 요청 직후 C-G-C-F 분석 결과를 보여주고
            질문 / 확인 버튼을 띄움. 다른 phase 카드보다 살짝 무게감을 주려고
            accent 테두리. */