@contenify/chatbot 0.1.2 → 0.1.4

package/dist/index.js

@@ -61,7 +61,7 @@ var import_axios = __toESM(require("axios"));
 
 // lib/config.ts
 function getApiBaseUrl() {
-  return process.env.NEXT_PUBLIC_CONTENIFY_API_URL || DEFAULT_API_BASE_URL;
+  return process.env.NEXT_PUBLIC_CONTENIFY_API_URL || "http://localhost:8080/api";
 }
 function getServerBaseUrl() {
   const apiUrl = getApiBaseUrl();
@@ -212,31 +212,31 @@ function ArticleModal({
   onClose,
   onRecreate
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative w-full max-w-3xl bg-white rounded-xl shadow-card border border-gray-200 animate-in fade-in zoom-in", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between px-6 py-4 border-b border-gray-300", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "cnfy-article-modal-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cnfy-article-modal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cnfy-article-modal-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500 mb-1", children: "Source Article" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-lg font-semibold text-gray-900 leading-snug", children: article.title })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "cnfy-article-modal-source", children: "Source Article" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "cnfy-article-modal-title", children: article.title })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "button",
         {
           onClick: onClose,
-          className: "text-gray-400 hover:text-gray-700 transition",
+          className: "cnfy-article-modal-close-btn",
           "aria-label": "Close modal",
           children: "\u2715"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-6 py-5 max-h-[65vh] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "prose prose-sm max-w-none text-gray-800", children: article.content }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-t bg-gray-50 rounded-b-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs text-gray-400", children: "This content will be recreated using AI" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "cnfy-article-modal-body", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "cnfy-article-modal-content", children: article.content }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cnfy-article-modal-footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "cnfy-article-modal-footer-text", children: "This content will be recreated using AI" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cnfy-article-modal-footer-actions", children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "button",
           {
             onClick: onClose,
-            className: "px-4 py-2 text-sm rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition",
+            className: "cnfy-btn-cancel",
             children: "Cancel"
           }
         ),
@@ -247,9 +247,8 @@ function ArticleModal({
               title: article.title,
               content: article.content,
               id: article._id
-              // Include article ID when available
             }),
-            className: "px-4 py-2 text-sm rounded-md bg-gray-900 text-white hover:bg-black transition",
+            className: "cnfy-btn-recreate",
             children: "Recreate Article"
           }
         )
@@ -321,7 +320,7 @@ function RichTextEditor({
     content,
     editorProps: {
       attributes: {
-        class: "prose prose-sm max-w-none focus:outline-none min-h-[350px] p-4"
+        class: "ProseMirror"
       }
     },
     onUpdate: ({ editor: editor2 }) => {
@@ -334,10 +333,10 @@ function RichTextEditor({
     }
   }, [content, editor]);
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-full h-[400px] border border-gray-300 rounded-lg flex items-center justify-center text-gray-400", children: "Loading editor..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cnfy-editor-loading", children: "Loading editor..." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "w-full border border-gray-300 rounded-lg overflow-hidden", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap items-center gap-1 p-2 border-b border-gray-200 bg-gray-50", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-toolbar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ToolbarButton,
         {
@@ -365,7 +364,7 @@ function RichTextEditor({
           children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Pilcrow, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cnfy-toolbar-divider" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ToolbarButton,
         {
@@ -384,7 +383,7 @@ function RichTextEditor({
           children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Italic, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cnfy-toolbar-divider" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ToolbarButton,
         {
@@ -403,7 +402,7 @@ function RichTextEditor({
           children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ListOrdered, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cnfy-toolbar-divider" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ToolbarButton,
         {
@@ -423,7 +422,7 @@ function RichTextEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.EditorContent, { editor, className: "min-h-[350px]" })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.EditorContent, { editor, className: "cnfy-editor-content" })
   ] });
 }
 function ToolbarButton({
@@ -439,7 +438,7 @@ function ToolbarButton({
       onClick,
       disabled,
       title,
-      className: `p-2 rounded hover:bg-gray-200 transition-colors ${isActive ? "bg-gray-200 text-emerald-600" : "text-gray-600"} ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
+      className: `cnfy-toolbar-btn ${isActive ? "cnfy-toolbar-btn--active" : ""} ${disabled ? "cnfy-toolbar-btn--disabled" : ""}`,
       children
     }
   );
@@ -523,29 +522,29 @@ function EditModal({
     }
   };
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-edit-modal-overlay", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
-        className: "absolute inset-0 bg-black/50",
+        className: "cnfy-edit-modal-backdrop",
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-full h-full max-w-5xl max-h-[90vh] m-4 bg-white rounded-xl shadow-2xl flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "text-xl font-semibold text-gray-900", children: "Edit Article" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-edit-modal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-edit-modal-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "cnfy-edit-modal-title", children: "Edit Article" }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             onClick: onClose,
-            className: "p-2 rounded-full hover:bg-gray-100 transition-colors",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { size: 20, className: "text-gray-500" })
+            className: "cnfy-edit-modal-close-btn",
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { size: 20, className: "cnfy-edit-modal-close-icon" })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-edit-modal-body", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Article Content" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "cnfy-edit-label", children: "Article Content" }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             RichTextEditor,
             {
@@ -556,11 +555,11 @@ function EditModal({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Meta Keywords" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-wrap gap-2 mb-3", children: keywords.map((keyword, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "cnfy-edit-label", children: "Meta Keywords" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "cnfy-keyword-list", children: keywords.map((keyword, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "span",
             {
-              className: "inline-flex items-center gap-1 px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm",
+              className: "cnfy-keyword-tag",
               children: [
                 "#",
                 keyword,
@@ -568,7 +567,7 @@ function EditModal({
                   "button",
                   {
                     onClick: () => handleRemoveKeyword(index),
-                    className: "ml-1 text-gray-400 hover:text-gray-600",
+                    className: "cnfy-keyword-remove-btn",
                     children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { size: 14 })
                   }
                 )
@@ -576,7 +575,7 @@ function EditModal({
             },
             index
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-keyword-input-row", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "input",
               {
@@ -585,26 +584,26 @@ function EditModal({
                 onChange: (e) => setNewKeyword(e.target.value),
                 onKeyDown: handleKeyDown,
                 placeholder: "Add a keyword...",
-                className: "flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+                className: "cnfy-keyword-input"
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "button",
               {
                 onClick: handleAddKeyword,
-                className: "px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors",
+                className: "cnfy-btn-add-keyword",
                 children: "Add"
               }
             )
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t bg-gray-50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-edit-modal-footer", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             onClick: onClose,
-            className: "px-4 py-2 text-gray-700 text-sm font-medium hover:bg-gray-100 rounded-lg transition-colors",
+            className: "cnfy-btn-footer-cancel",
             children: "Cancel"
           }
         ),
@@ -612,7 +611,7 @@ function EditModal({
           "button",
           {
             onClick: () => onSaveDraft(content, keywords),
-            className: "px-4 py-2 bg-gray-200 text-gray-800 text-sm font-medium rounded-lg hover:bg-gray-300 transition-colors",
+            className: "cnfy-btn-save-draft",
             children: "Save Draft"
           }
         ),
@@ -620,7 +619,7 @@ function EditModal({
           "button",
           {
             onClick: () => onPost(content, keywords),
-            className: "px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg hover:bg-emerald-700 transition-colors",
+            className: "cnfy-btn-post-article",
             style: { backgroundColor: primaryColor, color: "#fff" },
             children: "Post"
           }
@@ -675,22 +674,22 @@ function NewsList({
     b = Math.round(b + (255 - b) * (percent / 100));
     return `rgb(${r}, ${g}, ${b})`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-4 space-y-3", children: news.flatMap((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-news-list", children: news.flatMap((item) => {
     const publishedDate = new Date(item.publishedAt);
     const links = extractLinksFromContent(item.content);
     if (links.length > 0) {
       return links.map((link, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
-          className: "flex items-start justify-between gap-3 rounded-lg border border-gray-200 bg-white p-3 text-sm hover:bg-gray-50 transition",
+          className: "cnfy-news-card",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-bold text-gray-900 line-clamp-2", children: link.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center gap-2 mt-2 text-xs text-gray-500", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-card-content", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cnfy-news-card-title", children: link.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-card-meta", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "span",
                   {
-                    className: "inline-flex items-center rounded-full px-2 py-0.5 font-medium border",
+                    className: "cnfy-news-badge",
                     style: {
                       backgroundColor: lightenColor(primaryColorState, 95),
                       color: primaryColor,
@@ -700,7 +699,7 @@ function NewsList({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u2022" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "capitalize", children: item.category }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cnfy-news-card-category", children: item.category }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u2022" }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
                   dateFormatter.format(publishedDate),
@@ -709,12 +708,12 @@ function NewsList({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2 shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-card-actions", children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "button",
                 {
                   onClick: () => window.open(link.url, "_blank"),
-                  className: "p-1 text-gray-400 hover:text-gray-700",
+                  className: "cnfy-news-action-btn",
                   title: "View",
                   children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Eye, { size: 16 })
                 }
@@ -726,9 +725,8 @@ function NewsList({
                     title: link.title,
                     content: link.title,
                     id: item._id
-                    // Include article ID
                   }),
-                  className: "p-1 text-gray-400 hover:text-gray-700",
+                  className: "cnfy-news-action-btn",
                   title: "Recreate",
                   children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.RefreshCcw, { size: 16 })
                 }
@@ -742,15 +740,15 @@ function NewsList({
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
-        className: "flex items-start justify-between gap-3 rounded-lg border border-gray-200 bg-white p-3 text-sm hover:bg-gray-50 transition",
+        className: "cnfy-news-card",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-bold text-gray-900 line-clamp-2", children: item.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center gap-2 mt-2 text-xs text-gray-500", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-card-content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cnfy-news-card-title", children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-card-meta", children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "span",
                 {
-                  className: "inline-flex items-center rounded-full px-2 py-0.5 font-medium border",
+                  className: "cnfy-news-badge",
                   style: {
                     backgroundColor: lightenColor(primaryColorState, 95),
                     color: primaryColor,
@@ -760,7 +758,7 @@ function NewsList({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u2022" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "capitalize", children: item.category }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cnfy-news-card-category", children: item.category }),
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u2022" }),
               /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
                 dateFormatter.format(publishedDate),
@@ -769,12 +767,12 @@ function NewsList({
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2 shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-card-actions", children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 onClick: () => onView(item),
-                className: "p-1 text-gray-400 hover:text-gray-700",
+                className: "cnfy-news-action-btn",
                 title: "View",
                 children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Eye, { size: 16 })
               }
@@ -786,9 +784,8 @@ function NewsList({
                   title: item.title,
                   content: item.content || item.title,
                   id: item._id
-                  // Include article ID
                 }),
-                className: "p-1 text-gray-400 hover:text-gray-700",
+                className: "cnfy-news-action-btn",
                 title: "Recreate",
                 children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.RefreshCcw, { size: 16 })
               }
@@ -997,30 +994,30 @@ function ChatWindow({
     });
     return { blocks, metaKeywords };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "h-full flex w-full flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 px-4 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "max-w-3xl chat-scroll mx-auto space-y-6", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-chat", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-chat-area", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-chat-scroll", children: [
       messages.map((msg) => {
         var _a2;
         const parsed = formatAIContent(msg.content);
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-msg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-msg-avatar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "div",
             {
-              className: "h-8 w-8 rounded-full flex items-center justify-center text-xs font-semibold text-white",
+              className: "cnfy-msg-avatar",
               style: {
                 backgroundColor: msg.role === "assistant" ? primaryColor : "#1f2937"
               },
               children: msg.role === "assistant" ? "AI" : "You"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1 text-sm space-y-3 leading-relaxed", children: [
-            msg.role === "assistant" && parsed.blocks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-end -mt-1 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-msg-body", children: [
+            msg.role === "assistant" && parsed.blocks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-msg-copy-row", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 onClick: () => handleCopy(parsed.blocks, msg.id),
-                className: "p-1.5 rounded-md hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600",
+                className: "cnfy-copy-btn",
                 title: "Copy to clipboard",
-                children: copiedId === msg.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Check, { size: 16, className: "text-emerald-600" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Copy, { size: 16 })
+                children: copiedId === msg.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Check, { size: 16, className: "cnfy-copy-icon--copied" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Copy, { size: 16 })
               }
             ) }),
             parsed.blocks.map((block, idx) => {
@@ -1028,7 +1025,7 @@ function ChatWindow({
                 return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "h1",
                   {
-                    className: "text-sm font-semibold",
+                    className: "cnfy-block-h1",
                     children: block.text
                   },
                   idx
@@ -1038,18 +1035,18 @@ function ChatWindow({
                 return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "h2",
                   {
-                    className: "text-base font-semibold mt-4",
+                    className: "cnfy-block-h2",
                     children: block.text
                   },
                   idx
                 );
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-800", children: block.text }, idx);
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "cnfy-block-p", children: block.text }, idx);
             }),
-            parsed.metaKeywords.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pt-4 border-t mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap gap-2", children: parsed.metaKeywords.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            parsed.metaKeywords.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-msg-keywords", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-msg-keywords-list", children: parsed.metaKeywords.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "span",
               {
-                className: "text-xs px-3 py-1 rounded-full bg-gray-100 text-gray-700",
+                className: "cnfy-msg-keyword-tag",
                 children: [
                   "#",
                   tag
@@ -1057,13 +1054,13 @@ function ChatWindow({
               },
               i
             )) }) }),
-            msg.role === "assistant" && (analyzedData == null ? void 0 : analyzedData.messageId) === msg.id && analyzedData.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap gap-2 pt-4 mt-2", children: analyzedData.options.map((option) => {
+            msg.role === "assistant" && (analyzedData == null ? void 0 : analyzedData.messageId) === msg.id && analyzedData.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-action-options", children: analyzedData.options.map((option) => {
               const IconComponent = ACTION_ICONS[option.id] || import_lucide_react4.FileText;
               return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "button",
                 {
                   onClick: () => onSelectAction == null ? void 0 : onSelectAction(option.id, analyzedData.url, analyzedData.content),
-                  className: "flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors",
+                  className: "cnfy-action-btn",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComponent, { size: 16 }),
                     option.name
@@ -1072,12 +1069,12 @@ function ChatWindow({
                 option.id
               );
             }) }),
-            msg.role === "assistant" && parsed.blocks.length > 0 && !(analyzedData == null ? void 0 : analyzedData.messageId) && (!isStreaming || msg.id !== ((_a2 = messages[messages.length - 1]) == null ? void 0 : _a2.id)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-3 pt-4 mt-2", children: [
+            msg.role === "assistant" && parsed.blocks.length > 0 && !(analyzedData == null ? void 0 : analyzedData.messageId) && (!isStreaming || msg.id !== ((_a2 = messages[messages.length - 1]) == null ? void 0 : _a2.id)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-msg-actions", children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "button",
                 {
                   onClick: () => handleEdit(parsed.blocks, parsed.metaKeywords, msg.id),
-                  className: "flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors",
+                  className: "cnfy-btn-edit",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Edit3, { size: 16 }),
                     "Edit"
@@ -1088,7 +1085,7 @@ function ChatWindow({
                 "button",
                 {
                   onClick: () => handlePost(msg.content, parsed.metaKeywords),
-                  className: "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white hover:bg-emerald-700 transition-colors",
+                  className: "cnfy-btn-post",
                   style: { backgroundColor: primaryColor, color: "#fff" },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Send, { size: 16 }),
@@ -1102,32 +1099,32 @@ function ChatWindow({
       }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: bottomRef })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "shrink-0 bg-white px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "max-w-3xl mx-auto relative flex gap-2 items-end", children: [
-      !showNewsPanel && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dropdownRef, className: "absolute left-3 top-1/2 -translate-y-1/2 z-10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-input-area", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-input-inner", children: [
+      !showNewsPanel && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dropdownRef, className: "cnfy-news-pulse-wrap", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             onClick: handleOpenNewsDropdown,
-            className: "flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 transition-all animate-pulse hover:animate-none",
+            className: "cnfy-news-pulse-btn cnfy-animate-pulse",
             title: "Select from trending news",
             children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Zap, { size: 16 })
           }
         ),
-        showNewsDropdown && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "absolute bottom-full left-0 mb-2 w-[600px] bg-white border border-gray-200 rounded-lg shadow-xl max-h-[600px] overflow-hidden", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-gray-100", style: { backgroundColor: primaryColor, color: "#fff" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm font-medium text-white", children: "Select News" }),
+        showNewsDropdown && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-news-dropdown", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-news-dropdown-header", style: { backgroundColor: primaryColor, color: "#fff" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cnfy-news-dropdown-title", children: "Select News" }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 onClick: () => setShowNewsDropdown(false),
-                className: "p-1 hover:bg-gray-200 rounded transition",
+                className: "cnfy-news-dropdown-close",
                 style: { backgroundColor: primaryColor, color: "#fff" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.X, { size: 14, className: "text-white" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.X, { size: 14 })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100 flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 min-w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-news-dropdown-source", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-news-dropdown-select-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               import_react_select.default,
               {
                 options: [
@@ -1178,10 +1175,10 @@ function ChatWindow({
               {
                 onClick: handleScrape,
                 disabled: scraping,
-                className: "flex items-center gap-1.5 px-3 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition disabled:opacity-50",
+                className: "cnfy-scrape-btn",
                 title: "Fetch latest news",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.RefreshCcw, { size: 14, className: scraping ? "animate-spin" : "" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.RefreshCcw, { size: 14, className: scraping ? "cnfy-animate-spin" : "" }),
                   scraping ? "Scraping..." : "Scrape"
                 ]
               }
@@ -1191,17 +1188,17 @@ function ChatWindow({
               {
                 onClick: () => fetchNews(null),
                 disabled: loadingNews,
-                className: "flex items-center gap-1 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg transition",
+                className: "cnfy-refresh-btn",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.RefreshCcw, { size: 14, className: loadingNews ? "animate-spin" : "" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.RefreshCcw, { size: 14, className: loadingNews ? "cnfy-animate-spin" : "" }),
                   "Refresh"
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "overflow-y-auto max-h-[320px]", children: loadingNews ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-4 text-center text-sm text-gray-500", children: "Loading news..." }) : trendingNews.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "p-4 text-center text-sm text-gray-500", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-news-dropdown-list", children: loadingNews ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-news-dropdown-msg", children: "Loading news..." }) : trendingNews.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cnfy-news-dropdown-msg", children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "No news found." }),
-            selectedSource && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-1 text-xs", children: 'Click "Scrape" to fetch latest news.' })
+            selectedSource && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "cnfy-news-dropdown-hint", children: 'Click "Scrape" to fetch latest news.' })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             NewsList,
             {
@@ -1229,7 +1226,7 @@ function ChatWindow({
           },
           rows: 1,
           placeholder: "Ask AI something\u2026",
-          className: `flex-1 resize-none overflow-hidden border border-gray-300 ${!showNewsPanel ? "!pl-14" : "!pl-5"} !pr-[50px] input_box_textarea`,
+          className: `cnfy-chat-textarea ${!showNewsPanel ? "cnfy-chat-textarea--with-pulse" : ""}`,
           style: { maxHeight: "200px", overflowY: input.split("\n").length > 6 ? "auto" : "hidden" }
         }
       ),
@@ -1237,7 +1234,7 @@ function ChatWindow({
         "button",
         {
           onClick: handleSend,
-          className: "flex h-10 w-10 absolute right-[10px] top-[5px] items-center justify-center rounded-full bg-emerald-600 text-white",
+          className: "cnfy-send-btn",
           style: { backgroundColor: primaryColor, color: "#fff" },
           children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.SendHorizontal, { size: 18 })
         }
@@ -1303,23 +1300,23 @@ function UserMenu({
       import_react_hot_toast.default.error(err || "Logout failed");
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className: "cnfy-user-menu", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         onClick: () => setOpen((v) => !v),
-        className: "p-2 rounded-full hover:bg-gray-100 transition",
+        className: "cnfy-user-menu-trigger",
         "aria-label": "Settings",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.Settings, { size: 20, className: "text-gray-600" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.Settings, { size: 20, className: "cnfy-user-menu-trigger-icon" })
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "absolute right-0 top-full mb-2 w-52 bg-white border border-gray-200 rounded-lg shadow-lg z-50", children: [
+    open && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "cnfy-dropdown", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.User, label: "Account", onClick: () => go("/dashboard/account") }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.Settings, label: "Preferences", onClick: () => go("/dashboard/preferences") }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.Palette, label: "Appearance", onClick: () => go("/dashboard/appearance") }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.HelpCircle, label: "Settings", onClick: () => go("/dashboard/settings") }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.HelpCircle, label: "Help & Support", onClick: () => go("/dashboard/help") }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "border-t border-gray-300 my-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "cnfy-dropdown-divider" }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         MenuItem,
         {
@@ -1342,7 +1339,7 @@ function MenuItem({
     "button",
     {
       onClick,
-      className: `w-full flex items-center gap-2 px-4 py-2 text-sm transition ${danger ? "text-red-600 hover:bg-red-50" : "text-gray-700 hover:bg-gray-100"}`,
+      className: `cnfy-menu-item ${danger ? "cnfy-menu-item--danger" : ""}`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: 16 }),
         label
@@ -1358,19 +1355,19 @@ function HeaderBar({
   onLogout
 }) {
   const { primaryColor, botName, logoUrl } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("header", { className: "sticky top-0 z-40 bg-white border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mx-auto flex h-14 items-center justify-between px-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3 cursor-pointer", onClick: () => onNavigate == null ? void 0 : onNavigate("/"), children: [
-      logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: logoUrl, alt: "Logo", className: "h-8 w-8 rounded-md object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("header", { className: "cnfy-header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cnfy-header-inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cnfy-header-left", onClick: () => onNavigate == null ? void 0 : onNavigate("/"), children: [
+      logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: logoUrl, alt: "Logo", className: "cnfy-header-logo-img" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
-          className: "h-8 w-8 rounded-md text-white flex items-center justify-center font-bold text-sm",
+          className: "cnfy-header-logo-fallback",
           style: { backgroundColor: primaryColor },
           children: botName.charAt(0).toUpperCase()
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-semibold text-gray-900 text-base", children: botName.toUpperCase() })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cnfy-header-brand", children: botName.toUpperCase() })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UserMenu, { onNavigate, onLogout }) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cnfy-header-right", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UserMenu, { onNavigate, onLogout }) })
   ] }) });
 }
 
@@ -1415,12 +1412,12 @@ function TrendingNews({
     window.open(item.sourceUrl || item.link, "_blank");
   }
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "p-4 text-sm text-gray-500", children: "Loading news..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "cnfy-trending-msg", children: "Loading news..." });
   }
   if (!displayNews || displayNews.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-4 text-sm text-gray-500 text-center", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "cnfy-trending-msg cnfy-trending-msg--center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "No news found for this source." }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-xs", children: 'Click "Scrape" to fetch latest news.' })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "cnfy-trending-hint", children: 'Click "Scrape" to fetch latest news.' })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1520,8 +1517,8 @@ function SourceSelector({
   const selectedOption = options.find(
     (opt) => selectedSource === null ? opt.value === ALL_SOURCES_VALUE : opt.value === selectedSource
   ) || options[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100 flex items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 min-w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-source-selector", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cnfy-source-selector-select-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_react_select2.default,
       {
         options,
@@ -1566,10 +1563,10 @@ function SourceSelector({
       {
         onClick: handleScrape,
         disabled: scraping,
-        className: "flex items-center gap-1.5 px-3 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition disabled:opacity-50",
+        className: "cnfy-scrape-btn",
         title: "Fetch latest news",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.RefreshCcw, { size: 14, className: scraping ? "animate-spin" : "" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.RefreshCcw, { size: 14, className: scraping ? "cnfy-animate-spin" : "" }),
           scraping ? "Scraping..." : "Scrape"
         ]
       }
@@ -1579,9 +1576,9 @@ function SourceSelector({
       {
         onClick: () => fetchNews(null),
         disabled: fetchingNews,
-        className: "flex items-center gap-1 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg transition",
+        className: "cnfy-refresh-btn",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.RefreshCcw, { size: 14, className: fetchingNews ? "animate-spin" : "" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.RefreshCcw, { size: 14, className: fetchingNews ? "cnfy-animate-spin" : "" }),
           "Refresh"
         ]
       }
@@ -1879,7 +1876,7 @@ ${title}`
       const lang = ((_a = preferences == null ? void 0 : preferences.localization) == null ? void 0 : _a.language) === "hi" ? "Hindi" : "English";
       try {
         await rewriteNewsStreamApi({
-          article: content,
+          article: content || "",
           language: lang,
           articleId: id,
           tone: contentPrefs == null ? void 0 : contentPrefs.tone,
@@ -1924,7 +1921,7 @@ ${title}`
           )
         );
         const result = await rewriteNewsApi({
-          article: content,
+          article: content || "",
           language: lang,
           articleId: id,
           tone: contentPrefs == null ? void 0 : contentPrefs.tone,
@@ -2116,83 +2113,77 @@ ${optionsList}`
     }
   };
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full h-screen flex items-center justify-center bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.Loader2, { className: "h-8 w-8 animate-spin text-gray-400" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm text-gray-500", children: "Loading..." })
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cnfy-loading", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cnfy-loading-inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.Loader2, { className: "cnfy-loading-spinner cnfy-animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cnfy-loading-text", children: "Loading..." })
     ] }) });
   }
-  return (
-    // ✅ FULL SCREEN
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full h-screen flex flex-col bg-white", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HeaderBar, { onNavigate, onLogout }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `flex-1 min-h-0 md:grid ${showNewsPanel ? "md:grid-cols-12" : ""}`, children: [
-        showNewsPanel && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("aside", { className: "relative col-span-4 bg-gray-50/60 border-r border-gray-300 h-[90vh] overflow-y-auto", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            SourceSelector,
-            {
-              selectedSource,
-              onSourceChange: (value) => {
-                console.log("Selected source:", value);
-                setSelectedSource(value);
-              },
-              onNewsLoaded: handleNewsLoaded,
-              onLoadingChange: handleLoadingChange
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            TrendingNews,
-            {
-              onRecreate: handleRecreate,
-              news,
-              isLoading: newsLoading
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-          "section",
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cnfy-root", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HeaderBar, { onNavigate, onLogout }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `cnfy-main ${showNewsPanel ? "cnfy-main--with-news" : ""}`, children: [
+      showNewsPanel && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("aside", { className: "cnfy-sidebar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          SourceSelector,
           {
-            className: `
-            ${showNewsPanel ? "md:col-span-8" : "w-full"} bg-white flex flex-col h-full relative
-            ${showChatMobile ? "block" : "hidden md:block"}
-          `,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "md:hidden border-b border-gray-300 p-3", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "button",
-                {
-                  onClick: () => setShowChatMobile(false),
-                  className: "text-sm text-gray-600",
-                  children: "\u2190 Back to news"
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                ChatWindow,
-                {
-                  messages,
-                  onSend: handleSendMessage,
-                  onSelectNews: handleRecreate,
-                  isStreaming,
-                  analyzedData,
-                  onSelectAction: handleSelectAction
-                }
-              ) }),
-              !messages.length && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center text-center text-gray-400 text-sm px-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium", children: "AI News Assistant" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1", children: "Select a news article or type a message to begin" })
-              ] }) })
-            ]
+            selectedSource,
+            onSourceChange: (value) => {
+              console.log("Selected source:", value);
+              setSelectedSource(value);
+            },
+            onNewsLoaded: handleNewsLoaded,
+            onLoadingChange: handleLoadingChange
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          TrendingNews,
+          {
+            onRecreate: handleRecreate,
+            news,
+            isLoading: newsLoading
           }
         )
       ] }),
-      selectedArticle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        ArticleModal,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "section",
         {
-          article: selectedArticle,
-          onClose: () => setSelectedArticle(null),
-          onRecreate: handleRecreate
+          className: `cnfy-chat-section ${showNewsPanel ? "cnfy-chat-section--with-news" : "cnfy-chat-section--full"} ${showChatMobile ? "cnfy-chat-section--visible" : "cnfy-chat-section--hidden-mobile"}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cnfy-mobile-back", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "button",
+              {
+                onClick: () => setShowChatMobile(false),
+                className: "cnfy-mobile-back-btn",
+                children: "\u2190 Back to news"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cnfy-chat-inner", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              ChatWindow,
+              {
+                messages,
+                onSend: handleSendMessage,
+                onSelectNews: handleRecreate,
+                isStreaming,
+                analyzedData,
+                onSelectAction: handleSelectAction
+              }
+            ) }),
+            !messages.length && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cnfy-empty-state", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cnfy-empty-state-title", children: "AI News Assistant" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cnfy-empty-state-subtitle", children: "Select a news article or type a message to begin" })
+            ] }) })
+          ]
         }
       )
-    ] })
-  );
+    ] }),
+    selectedArticle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ArticleModal,
+      {
+        article: selectedArticle,
+        onClose: () => setSelectedArticle(null),
+        onRecreate: handleRecreate
+      }
+    )
+  ] });
 }
 
 // src/index.tsx