Refine chatbot for mobile app focus

README.md

@@ -53,17 +53,16 @@ Add this before the closing `</body>` tag on your website:
   window.LookupITChatbotConfig = {
     apiBase: "https://sanjay8013-chatbot-lookupit.hf.space",
     title: "LookUP IT Assistant",
-    subtitle: "Expert consulting services",
+    subtitle: "Mobile app development",
     accentColor: "#db3f46",
-    welcomeMessage: "Welcome to LookUP IT Solutions. I can help you explore services, discuss a business requirement, or connect you with the team for a consultation.",
+    welcomeMessage: "Welcome to LookUP IT Solutions. I can help you plan an iOS, Android, or Flutter app, discuss features, and connect you with our mobile app team.",
     quickReplies: [
-      "Explore services",
-      "Web application development",
-      "AI & machine learning",
-      "Book a consultation",
-      "Share contact details"
+      "Build a mobile app",
+      "Flutter or native apps",
+      "Need iOS and Android",
+      "Get an app quote"
     ],
-    placeholder: "Tell us what you need..."
+    placeholder: "Describe your app idea..."
   };
 </script>
 <script

lookupitsolutions-chatbot-context.txt

@@ -1,6 +1,6 @@
 You are the AI assistant for LookUP IT Solutions.
 
-Your job is to help website visitors understand the company, its services, industries, technologies, delivery models, and how to get in touch. Stay focused on LookUP IT Solutions and keep answers concise, professional, and commercially useful.
+Your job is to help website visitors understand the company, its services, industries, technologies, delivery models, and how to get in touch. Lead conversations toward mobile app development when the user's request is broad or exploratory. Stay focused on LookUP IT Solutions and keep answers concise, professional, and commercially useful.
 
 Website:
 - Main website: https://www.lookupitsolutions.com/
@@ -13,6 +13,11 @@ Company snapshot based on the live website:
 - The site positions the company as a technology partner for large, medium, and small-sized enterprises.
 - Primary website goal: qualified inquiries, consultations, and project discussions.
 
+Primary focus for this bot:
+- Treat mobile app development as the lead service when users ask broad questions such as "what do you do" or "how can you help?"
+- Help visitors frame app requirements around platform choice, target users, core features, integrations, launch goals, and ongoing support.
+- Position mobile delivery in business terms such as customer engagement, field operations, internal workflow improvement, and scalable digital products.
+
 Core services shown on the website:
 - Web application development
 - Mobile app development
@@ -29,6 +34,7 @@ Core services shown on the website:
 
 What the website says about selected services:
 - Web application solutions focus on custom web applications, automation of business processes, improved collaboration, streamlined operations, and secure, scalable delivery.
+- Mobile app development should be explained around iOS, Android, Flutter, enterprise mobility, customer-facing apps, and operational efficiency.
 - Cloud solutions include cloud consulting, cloud migration, cloud security, and cloud backup and recovery.
 - AI and machine learning is presented as a major capability in the site navigation and services sections.
 - Offshore development and maintenance/support are presented as ongoing delivery and support options.
@@ -85,8 +91,9 @@ Contact information shown on the website:
 
 How to answer:
 - Greet warmly, then guide the visitor toward the right service or next step.
-- If the user asks what the company does, summarize the main services in plain business language.
+- If the user asks what the company does, lead with mobile app development first, then summarize the other main services in plain business language.
 - If the user asks about a service, explain it in business terms, mention relevant outcomes, and invite them to discuss requirements.
+- If the user is exploring a mobile app idea, ask concise follow-up questions about platform, audience, features, integrations, and whether they need native or cross-platform delivery.
 - If the user asks about industries or technologies, answer from the lists above.
 - If the user asks for contact details, give the company contact details directly.
 - If the user asks for pricing, exact cost, or project timeline, explain that it depends on scope and requirements, then offer to connect them with the team.

static/css/chatbot.css

@@ -8,7 +8,7 @@
   --lookupit-coral: #c42f3e;
   --lookupit-coral-deep: #b51f34;
   --lookupit-coral-soft: #fff1f3;
-  --lookupit-shadow: 0 24px 64px rgba(181, 31, 52, 0.18);
+  --lookupit-shadow: 0 18px 44px rgba(181, 31, 52, 0.18);
 }
 
 *, *::before, *::after {
@@ -29,23 +29,23 @@ body {
 
 #chat-widget {
   position: fixed;
-  right: 26px;
-  bottom: 26px;
+  right: 18px;
+  bottom: 18px;
   z-index: 9999;
   font-family: inherit;
 }
 
 #chat-toggle {
-  width: 54px;
-  height: 54px;
+  width: 46px;
+  height: 46px;
   border: 0;
-  border-radius: 18px;
+  border-radius: 16px;
   background:
     radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.28), transparent 28%),
     linear-gradient(145deg, #ef5b69 0%, var(--lookupit-coral) 52%, var(--lookupit-coral-deep) 100%);
   color: #fff;
   cursor: pointer;
-  box-shadow: 0 18px 32px rgba(219, 63, 70, 0.28);
+  box-shadow: 0 12px 24px rgba(219, 63, 70, 0.26);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,8 +55,8 @@ body {
 }
 
 #chat-toggle:hover {
-  transform: translateY(-3px) scale(1.02);
-  box-shadow: 0 34px 52px rgba(219, 63, 70, 0.34);
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 16px 28px rgba(219, 63, 70, 0.3);
 }
 
 #chat-toggle::before {
@@ -64,12 +64,12 @@ body {
   position: absolute;
   inset: 6px;
   border: 1px solid rgba(255, 255, 255, 0.22);
-  border-radius: 13px;
+  border-radius: 11px;
 }
 
 #chat-toggle svg {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   color: #fff;
   position: relative;
   z-index: 1;
@@ -79,13 +79,13 @@ body {
   position: absolute;
   top: -5px;
   right: -5px;
-  min-width: 22px;
-  height: 22px;
-  padding: 0 6px;
+  min-width: 17px;
+  height: 17px;
+  padding: 0 4px;
   border-radius: 999px;
   background: var(--lookupit-coral-deep);
   color: #fff;
-  font-size: 11px;
+  font-size: 9px;
   font-weight: 800;
   display: flex;
   align-items: center;
@@ -97,10 +97,10 @@ body {
 #chat-window {
   position: absolute;
   right: 0;
-  bottom: 72px;
-  width: 340px;
-  max-height: min(600px, calc(100vh - 100px));
-  border-radius: 34px;
+  bottom: 58px;
+  width: 308px;
+  max-height: min(500px, calc(100vh - 88px));
+  border-radius: 22px;
   background: linear-gradient(180deg, rgba(255, 250, 251, 0.98) 0%, rgba(255, 255, 255, 0.99) 100%);
   border: 1px solid rgba(217, 58, 73, 0.18);
   box-shadow: var(--lookupit-shadow);
@@ -115,13 +115,13 @@ body {
 #chat-window::before {
   content: "";
   position: absolute;
-  top: -26px;
-  right: -20px;
-  width: 180px;
-  height: 180px;
+  top: -18px;
+  right: -16px;
+  width: 128px;
+  height: 128px;
   background:
     radial-gradient(circle, rgba(217, 58, 73, 0.12) 0 22%, transparent 23% 100%);
-  background-size: 22px 22px;
+  background-size: 18px 18px;
   opacity: 0.8;
   pointer-events: none;
 }
@@ -129,11 +129,11 @@ body {
 #chat-window::after {
   content: "";
   position: absolute;
-  left: -56px;
-  top: 112px;
-  width: 150px;
-  height: 150px;
-  border: 14px solid rgba(217, 58, 73, 0.24);
+  left: -36px;
+  top: 92px;
+  width: 104px;
+  height: 104px;
+  border: 10px solid rgba(217, 58, 73, 0.22);
   border-right-color: transparent;
   border-top-color: transparent;
   border-radius: 999px;
@@ -150,11 +150,11 @@ body {
 
 .chat-header {
   position: relative;
-  padding: 14px 16px 12px;
+  padding: 12px 13px 10px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 10px;
+  gap: 8px;
   border-bottom: 1px solid rgba(217, 58, 73, 0.16);
   background: linear-gradient(180deg, rgba(255, 243, 245, 0.94) 0%, rgba(255, 255, 255, 0.94) 100%);
   z-index: 1;
@@ -163,13 +163,13 @@ body {
 .chat-header-info {
   display: flex;
   align-items: flex-start;
-  gap: 10px;
+  gap: 9px;
 }
 
 .avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 13px;
+  width: 34px;
+  height: 34px;
+  border-radius: 11px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -177,17 +177,17 @@ body {
   background:
     radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.34), transparent 24%),
     linear-gradient(145deg, #ef5b69 0%, var(--lookupit-coral) 58%, var(--lookupit-coral-deep) 100%);
-  box-shadow: 0 10px 20px rgba(219, 63, 70, 0.22);
+  box-shadow: 0 6px 14px rgba(219, 63, 70, 0.22);
 }
 
 .avatar svg {
-  width: 20px;
-  height: 20px;
+  width: 18px;
+  height: 18px;
   color: #ffffff;
 }
 
 .chat-name {
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.1;
   font-weight: 800;
   letter-spacing: -0.03em;
@@ -195,41 +195,41 @@ body {
 }
 
 .chat-status {
-  margin-top: 5px;
+  margin-top: 3px;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 9px;
+  gap: 4px;
+  padding: 4px 7px;
   border-radius: 999px;
   background: var(--lookupit-coral-soft);
   color: var(--lookupit-coral-deep);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
   line-height: 1;
 }
 
 .dot {
-  width: 8px;
-  height: 8px;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
   background: var(--lookupit-coral);
   box-shadow: 0 0 0 4px rgba(219, 63, 70, 0.14);
 }
 
 #chat-close-btn {
-  width: 30px;
-  height: 30px;
+  width: 28px;
+  height: 28px;
   border: 1px solid rgba(217, 58, 73, 0.16);
-  border-radius: 10px;
+  border-radius: 9px;
   background: rgba(255, 255, 255, 0.9);
   color: var(--lookupit-ink);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 700;
-  box-shadow: 0 6px 14px rgba(181, 31, 52, 0.08);
+  box-shadow: 0 4px 8px rgba(181, 31, 52, 0.08);
   transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
 }
 
@@ -243,10 +243,10 @@ body {
   position: relative;
   flex: 1;
   overflow-y: auto;
-  padding: 12px 14px 10px;
+  padding: 10px 11px 8px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
   scroll-behavior: smooth;
 }
 
@@ -260,10 +260,10 @@ body {
 }
 
 .msg {
-  max-width: 86%;
+  max-width: 90%;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
   animation: lookupitFadeSlide 220ms ease;
 }
 
@@ -288,10 +288,10 @@ body {
 
 .msg-bubble {
   position: relative;
-  padding: 10px 13px;
-  border-radius: 18px;
-  font-size: 13px;
-  line-height: 1.55;
+  padding: 9px 11px;
+  border-radius: 14px;
+  font-size: 12.5px;
+  line-height: 1.5;
   word-break: break-word;
 }
 
@@ -329,8 +329,8 @@ body {
 }
 
 .msg-time {
-  padding: 0 6px;
-  font-size: 11px;
+  padding: 0 4px;
+  font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.02em;
   color: var(--lookupit-muted);
@@ -343,21 +343,21 @@ body {
 .quick-replies {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
+  gap: 6px;
+  margin-top: 6px;
 }
 
 .quick-reply {
-  padding: 8px 13px;
+  padding: 6px 10px;
   border-radius: 999px;
   border: 1px solid rgba(217, 58, 73, 0.22);
   background: linear-gradient(180deg, #ffffff 0%, #fff4f6 100%);
   color: var(--lookupit-ink);
-  font-size: 12px;
+  font-size: 10.5px;
   font-weight: 700;
   line-height: 1.2;
   cursor: pointer;
-  box-shadow: 0 10px 18px rgba(181, 31, 52, 0.06);
+  box-shadow: 0 4px 8px rgba(181, 31, 52, 0.06);
   transition: transform 150ms ease, border-color 150ms ease, color 150ms ease;
 }
 
@@ -370,8 +370,8 @@ body {
 #typing-indicator {
   display: flex;
   align-items: center;
-  gap: 7px;
-  padding: 4px 24px 14px;
+  gap: 4px;
+  padding: 2px 13px 8px;
 }
 
 #typing-indicator.hidden {
@@ -379,8 +379,8 @@ body {
 }
 
 #typing-indicator span {
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   background: rgba(219, 63, 70, 0.42);
   animation: lookupitBounce 1s infinite ease-in-out;
@@ -404,10 +404,10 @@ body {
 }
 
 .chat-input-area {
-  padding: 10px 12px 12px;
+  padding: 8px 10px 10px;
   display: flex;
   align-items: flex-end;
-  gap: 8px;
+  gap: 7px;
   border-top: 1px solid rgba(217, 58, 73, 0.14);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 245, 247, 0.98) 100%);
@@ -415,15 +415,15 @@ body {
 
 #chat-input {
   flex: 1;
-  min-height: 42px;
-  max-height: 96px;
-  padding: 11px 13px;
-  border-radius: 16px;
+  min-height: 38px;
+  max-height: 84px;
+  padding: 9px 11px;
+  border-radius: 14px;
   border: 1px solid var(--lookupit-line);
   background: rgba(255, 255, 255, 0.94);
   color: var(--lookupit-ink);
   font: inherit;
-  font-size: 13px;
+  font-size: 12.5px;
   line-height: 1.5;
   outline: none;
   resize: none;
@@ -434,7 +434,7 @@ body {
 
 #chat-input:focus {
   border-color: rgba(219, 63, 70, 0.36);
-  box-shadow: 0 0 0 4px rgba(219, 63, 70, 0.08);
+  box-shadow: 0 0 0 2px rgba(219, 63, 70, 0.08);
 }
 
 #chat-input::placeholder {
@@ -442,10 +442,10 @@ body {
 }
 
 #send-btn {
-  width: 42px;
-  height: 42px;
+  width: 38px;
+  height: 38px;
   border: 0;
-  border-radius: 14px;
+  border-radius: 12px;
   background:
     radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.28), transparent 28%),
     linear-gradient(145deg, #ef5b69 0%, var(--lookupit-coral) 58%, var(--lookupit-coral-deep) 100%);
@@ -455,13 +455,13 @@ body {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  box-shadow: 0 14px 24px rgba(219, 63, 70, 0.24);
+  box-shadow: 0 8px 16px rgba(219, 63, 70, 0.24);
   transition: transform 150ms ease, box-shadow 150ms ease;
 }
 
 #send-btn:hover {
   transform: translateY(-1px);
-  box-shadow: 0 24px 40px rgba(219, 63, 70, 0.3);
+  box-shadow: 0 10px 18px rgba(219, 63, 70, 0.28);
 }
 
 #send-btn:disabled {
@@ -471,23 +471,23 @@ body {
 }
 
 #send-btn svg {
-  width: 16px;
-  height: 16px;
+  width: 15px;
+  height: 15px;
   color: #fff;
 }
 
 @media (max-width: 640px) {
   #chat-widget {
-    right: 12px;
-    bottom: 12px;
+    right: 10px;
+    bottom: 10px;
   }
 
   #chat-window {
-    width: min(100vw - 16px, 340px);
-    right: -2px;
-    bottom: 70px;
-    max-height: min(75vh, 560px);
-    border-radius: 24px;
+    width: min(calc(100vw - 16px), 294px);
+    right: 0;
+    bottom: 60px;
+    max-height: min(440px, calc(100vh - 84px));
+    border-radius: 20px;
   }
 }
 @keyframes chatbotPulse {
@@ -502,9 +502,9 @@ body {
   }
 }
 
-.lookupit-toggle {
+#chat-toggle {
   animation: chatbotPulse 2s infinite;
 }
-.lookupit-toggle:hover {
+#chat-toggle:hover {
   transform: scale(1.08);
 }

static/js/chatbot.js

@@ -24,12 +24,17 @@
     return;
   }
 
+  document.title = "Lookup IT Solutions - Mobile App Chatbot Demo";
+  closeBtn.innerHTML = "×";
+  inputEl.placeholder = "Describe your app idea...";
+  toggleBtn.setAttribute("aria-label", "Open mobile app chat");
+
   const QUICK_REPLIES = [
-    "Explore services",
-    "Web application development",
-    "AI & machine learning",
-    "Book a consultation",
-    "Share contact details",
+    "Build a mobile app",
+    "Flutter or native apps",
+    "Need iOS and Android",
+    "Estimate my app project",
+    "Book an app consultation",
   ];
 
   // ── Typewriter engine ──────────────────────────────────────────────────────
@@ -301,7 +306,7 @@
   function showWelcome() {
     appendMessage(
       "bot",
-      "Welcome to LookUP IT Solutions.\n\nI can help you explore services, discuss a business requirement, or connect you with the team for a consultation.",
+      "Welcome to LookUP IT Solutions.\n\nI can help you plan an iOS, Android, or Flutter app, discuss features, and connect you with our mobile app team.",
       QUICK_REPLIES,
     );
   }
@@ -342,4 +347,4 @@ function setOpen(open) {
   } else {
     toggleButton.style.animation = "chatbotPulse 2s infinite";
   }
-}
+}

static/js/embed.js

@@ -12,18 +12,18 @@
   const defaultConfig = {
     apiBase: scriptOrigin,
     title: "LookUP IT Assistant",
-    subtitle: "Expert consulting services",
+    subtitle: "Mobile app development",
     accentColor: "#db3f46",
     welcomeMessage:
-      "👋 Hi! I'm the Lookup IT Solutions AI Assistant.\n\nI can help you learn about our services, get a custom quote, or connect you with our team. How can I help you today?",
+      "Hi! I'm the LookUP IT mobile app assistant.\n\nI can help you plan an iOS, Android, or Flutter app, review features, and connect you with our team. How can I help with your app today?",
     quickReplies: [
-      "What services do you offer?",
-      "Tell me about Cloud Solutions",
-      "I need a Web App",
-      "Get a free quote",
+      "Build a mobile app",
+      "Flutter or native apps",
+      "Need iOS and Android",
+      "Get an app quote",
     ],
-    placeholder: "Tell us what you need...",
-    buttonLabel: "Open chat",
+    placeholder: "Describe your app idea...",
+    buttonLabel: "Open mobile app chat",
     position: "right",
     logoUrl: "",
   };
@@ -163,10 +163,10 @@
         --lookupit-coral: ${config.accentColor};
         --lookupit-coral-deep: #b51f34;
         --lookupit-coral-soft: #fff1f3;
-        --lookupit-shadow: 0 24px 64px rgba(181, 31, 52, 0.18);
+        --lookupit-shadow: 0 18px 44px rgba(181, 31, 52, 0.18);
         position: fixed;
-        ${config.position === "left" ? "left: 26px;" : "right: 26px;"}
-        bottom: 26px;
+        ${config.position === "left" ? "left: 18px;" : "right: 18px;"}
+        bottom: 18px;
         z-index: 2147483000;
         font-family: "Manrope", "Segoe UI", sans-serif;
       }
@@ -184,16 +184,16 @@
       }
 
       #${widgetId} .lookupit-toggle {
-        width: 52px;
-        height: 52px;
+        width: 46px;
+        height: 46px;
         border: 0;
-        border-radius: 24px;
+        border-radius: 16px;
         background:
           radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.28), transparent 28%),
           linear-gradient(145deg, #ef5b69 0%, #b72f38 54%, var(--lookupit-coral-deep) 100%);
         color: #fff;
         cursor: pointer;
-        box-shadow: 0 26px 44px rgba(219, 63, 70, 0.28);
+        box-shadow: 0 12px 24px rgba(219, 63, 70, 0.26);
         display: grid;
         place-items: center;
         position: relative;
@@ -202,36 +202,36 @@
       }
 
       #${widgetId} .lookupit-toggle:hover {
-        transform: translateY(-3px) scale(1.02);
-        box-shadow: 0 34px 52px rgba(219, 63, 70, 0.34);
+        transform: translateY(-2px) scale(1.02);
+        box-shadow: 0 16px 28px rgba(219, 63, 70, 0.3);
       }
 
       #${widgetId} .lookupit-toggle::before {
         content: "";
         position: absolute;
-        inset: 8px;
+        inset: 6px;
         border: 1px solid rgba(255, 255, 255, 0.22);
-        border-radius: 18px;
+        border-radius: 11px;
       }
 
       #${widgetId} .lookupit-toggle svg {
-        width: 28px;
-        height: 28px;
+        width: 20px;
+        height: 20px;
         position: relative;
         z-index: 1;
       }
 
       #${widgetId} .lookupit-badge {
         position: absolute;
-        top: -5px;
-        right: -5px;
-        min-width: 22px;
-        height: 22px;
-        padding: 0 6px;
+        top: -4px;
+        right: -4px;
+        min-width: 17px;
+        height: 17px;
+        padding: 0 4px;
         border-radius: 999px;
         background: var(--lookupit-coral-deep);
         color: #fff;
-        font-size: 11px;
+        font-size: 9px;
         font-weight: 800;
         display: none;
         align-items: center;
@@ -243,10 +243,10 @@
       #${widgetId} .lookupit-panel {
         position: absolute;
         ${config.position === "left" ? "left: 0;" : "right: 0;"}
-        bottom: 92px;
-        width: min(398px, calc(100vw - 20px));
-        max-height: min(720px, calc(100vh - 120px));
-        border-radius: 34px;
+        bottom: 58px;
+        width: min(308px, calc(100vw - 20px));
+        max-height: min(500px, calc(100vh - 88px));
+        border-radius: 22px;
         background: linear-gradient(180deg, rgba(255, 250, 251, 0.98) 0%, rgba(255, 255, 255, 0.99) 100%);
         border: 1px solid rgba(217, 58, 73, 0.18);
         box-shadow: var(--lookupit-shadow);
@@ -259,13 +259,13 @@
       #${widgetId} .lookupit-panel::before {
         content: "";
         position: absolute;
-        top: -26px;
-        right: -20px;
-        width: 180px;
-        height: 180px;
+        top: -18px;
+        right: -16px;
+        width: 128px;
+        height: 128px;
         background:
           radial-gradient(circle, rgba(217, 58, 73, 0.12) 0 22%, transparent 23% 100%);
-        background-size: 22px 22px;
+        background-size: 18px 18px;
         opacity: 0.8;
         pointer-events: none;
       }
@@ -273,11 +273,11 @@
       #${widgetId} .lookupit-panel::after {
         content: "";
         position: absolute;
-        left: -56px;
-        top: 112px;
-        width: 150px;
-        height: 150px;
-        border: 14px solid rgba(217, 58, 73, 0.24);
+        left: -36px;
+        top: 92px;
+        width: 104px;
+        height: 104px;
+        border: 10px solid rgba(217, 58, 73, 0.22);
         border-right-color: transparent;
         border-top-color: transparent;
         border-radius: 999px;
@@ -292,11 +292,11 @@
 
       #${widgetId} .lookupit-header {
         position: relative;
-        padding: 24px 24px 20px;
+        padding: 12px 13px 10px;
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         justify-content: space-between;
-        gap: 16px;
+        gap: 8px;
         border-bottom: 1px solid rgba(217, 58, 73, 0.16);
         background: linear-gradient(180deg, rgba(255, 243, 245, 0.94) 0%, rgba(255, 255, 255, 0.94) 100%);
         z-index: 1;
@@ -304,15 +304,15 @@
 
       #${widgetId} .lookupit-header-info {
         display: flex;
-        align-items: flex-start;
-        gap: 14px;
+        align-items: center;
+        gap: 9px;
       }
 
       #${widgetId} .lookupit-brand-mark,
       #${widgetId} .lookupit-logo {
-        width: 52px;
-        height: 52px;
-        border-radius: 18px;
+        width: 34px;
+        height: 34px;
+        border-radius: 11px;
         flex: 0 0 auto;
       }
 
@@ -324,66 +324,66 @@
         background:
           radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.34), transparent 24%),
           linear-gradient(145deg, #ef5b69 0%, var(--lookupit-coral) 58%, var(--lookupit-coral-deep) 100%);
-        box-shadow: 0 18px 30px rgba(219, 63, 70, 0.24);
+        box-shadow: 0 6px 14px rgba(219, 63, 70, 0.22);
       }
 
       #${widgetId} .lookupit-brand-mark svg {
-        width: 28px;
-        height: 28px;
+        width: 18px;
+        height: 18px;
       }
 
       #${widgetId} .lookupit-logo {
         object-fit: contain;
         background: #fff;
         border: 1px solid rgba(217, 58, 73, 0.16);
-        padding: 8px;
-        box-shadow: 0 18px 30px rgba(181, 31, 52, 0.08);
+        padding: 5px;
+        box-shadow: 0 6px 14px rgba(181, 31, 52, 0.08);
       }
 
       #${widgetId} .lookupit-title {
-        font-size: 18px;
+        font-size: 13px;
         line-height: 1.1;
         font-weight: 800;
-        letter-spacing: -0.03em;
+        letter-spacing: -0.02em;
         color: var(--lookupit-ink);
       }
 
       #${widgetId} .lookupit-subtitle {
-        margin-top: 8px;
+        margin-top: 3px;
         display: inline-flex;
         align-items: center;
-        gap: 8px;
-        padding: 7px 12px;
+        gap: 4px;
+        padding: 4px 7px;
         border-radius: 999px;
         background: var(--lookupit-coral-soft);
         color: var(--lookupit-coral-deep);
-        font-size: 12px;
+        font-size: 10px;
         font-weight: 700;
         line-height: 1;
       }
 
       #${widgetId} .lookupit-status-dot {
-        width: 8px;
-        height: 8px;
+        width: 5px;
+        height: 5px;
         border-radius: 50%;
         background: var(--lookupit-coral);
-        box-shadow: 0 0 0 4px rgba(219, 63, 70, 0.14);
+        box-shadow: 0 0 0 3px rgba(219, 63, 70, 0.14);
       }
 
       #${widgetId} .lookupit-close {
-        width: 38px;
-        height: 38px;
+        width: 28px;
+        height: 28px;
         border: 1px solid rgba(217, 58, 73, 0.16);
-        border-radius: 14px;
+        border-radius: 9px;
         background: rgba(255, 255, 255, 0.9);
         color: var(--lookupit-ink);
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 18px;
+        font-size: 13px;
         font-weight: 700;
-        box-shadow: 0 10px 20px rgba(181, 31, 52, 0.08);
+        box-shadow: 0 4px 8px rgba(181, 31, 52, 0.08);
         transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
       }
 
@@ -394,18 +394,18 @@
       }
 
       #${widgetId} .lookupit-close svg {
-        width: 18px;
-        height: 18px;
+        width: 13px;
+        height: 13px;
       }
 
       #${widgetId} .lookupit-messages {
         position: relative;
         flex: 1;
         overflow-y: auto;
-        padding: 18px 20px 14px;
+        padding: 10px 11px 8px;
         display: flex;
         flex-direction: column;
-        gap: 14px;
+        gap: 8px;
         scroll-behavior: smooth;
       }
 
@@ -419,10 +419,10 @@
       }
 
       #${widgetId} .lookupit-msg {
-        max-width: 86%;
+        max-width: 90%;
         display: flex;
         flex-direction: column;
-        gap: 6px;
+        gap: 5px;
         animation: lookupitFadeSlide 220ms ease;
       }
 
@@ -435,10 +435,10 @@
       }
 
       #${widgetId} .lookupit-bubble {
-        padding: 13px 16px;
-        border-radius: 24px;
-        font-size: 14px;
-        line-height: 1.62;
+        padding: 9px 11px;
+        border-radius: 14px;
+        font-size: 12.5px;
+        line-height: 1.5;
         word-break: break-word;
       }
 
@@ -476,8 +476,8 @@
       }
 
       #${widgetId} .lookupit-time {
-        padding: 0 6px;
-        font-size: 11px;
+        padding: 0 4px;
+        font-size: 10px;
         font-weight: 700;
         letter-spacing: 0.02em;
         color: var(--lookupit-muted);
@@ -490,21 +490,21 @@
       #${widgetId} .lookupit-replies {
         display: flex;
         flex-wrap: wrap;
-        gap: 8px;
-        margin-top: 8px;
+        gap: 6px;
+        margin-top: 6px;
       }
 
       #${widgetId} .lookupit-reply {
-        padding: 8px 13px;
+        padding: 6px 10px;
         border-radius: 999px;
         border: 1px solid rgba(217, 58, 73, 0.22);
         background: linear-gradient(180deg, #ffffff 0%, #fff4f6 100%);
         color: var(--lookupit-ink);
-        font-size: 12px;
+        font-size: 10.5px;
         font-weight: 700;
         line-height: 1.2;
         cursor: pointer;
-        box-shadow: 0 10px 18px rgba(181, 31, 52, 0.06);
+        box-shadow: 0 4px 8px rgba(181, 31, 52, 0.06);
         transition: transform 150ms ease, border-color 150ms ease, color 150ms ease;
       }
 
@@ -517,13 +517,13 @@
       #${widgetId} .lookupit-typing {
         display: flex;
         align-items: center;
-        gap: 7px;
-        padding: 4px 24px 14px;
+        gap: 4px;
+        padding: 2px 13px 8px;
       }
 
       #${widgetId} .lookupit-typing span {
-        width: 8px;
-        height: 8px;
+        width: 7px;
+        height: 7px;
         border-radius: 50%;
         background: rgba(219, 63, 70, 0.42);
         animation: lookupitBounce 1s infinite ease-in-out;
@@ -538,24 +538,24 @@
       }
 
       #${widgetId} .lookupit-input {
-        padding: 16px 18px 18px;
+        padding: 8px 10px 10px;
         display: flex;
         align-items: flex-end;
-        gap: 10px;
+        gap: 7px;
         border-top: 1px solid rgba(217, 58, 73, 0.14);
         background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 245, 247, 0.98) 100%);
       }
 
       #${widgetId} .lookupit-input textarea {
         flex: 1;
-        min-height: 52px;
-        max-height: 112px;
-        padding: 14px 16px;
-        border-radius: 20px;
+        min-height: 38px;
+        max-height: 84px;
+        padding: 9px 11px;
+        border-radius: 14px;
         border: 1px solid var(--lookupit-line);
         background: rgba(255, 255, 255, 0.94);
         color: var(--lookupit-ink);
-        font-size: 14px;
+        font-size: 12.5px;
         line-height: 1.5;
         outline: none;
         resize: none;
@@ -566,7 +566,7 @@
 
       #${widgetId} .lookupit-input textarea:focus {
         border-color: rgba(219, 63, 70, 0.36);
-        box-shadow: 0 0 0 4px rgba(219, 63, 70, 0.08);
+        box-shadow: 0 0 0 2px rgba(219, 63, 70, 0.08);
       }
 
       #${widgetId} .lookupit-input textarea::placeholder {
@@ -574,10 +574,10 @@
       }
 
       #${widgetId} .lookupit-send {
-        width: 52px;
-        height: 52px;
+        width: 38px;
+        height: 38px;
         border: 0;
-        border-radius: 18px;
+        border-radius: 12px;
         background:
           radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.28), transparent 28%),
           linear-gradient(145deg, #ef5b69 0%, var(--lookupit-coral) 58%, var(--lookupit-coral-deep) 100%);
@@ -587,13 +587,13 @@
         align-items: center;
         justify-content: center;
         flex: 0 0 auto;
-        box-shadow: 0 20px 34px rgba(219, 63, 70, 0.24);
+        box-shadow: 0 8px 16px rgba(219, 63, 70, 0.24);
         transition: transform 150ms ease, box-shadow 150ms ease;
       }
 
       #${widgetId} .lookupit-send:hover {
         transform: translateY(-1px);
-        box-shadow: 0 24px 40px rgba(219, 63, 70, 0.3);
+        box-shadow: 0 10px 18px rgba(219, 63, 70, 0.28);
       }
 
       #${widgetId} .lookupit-send:disabled {
@@ -603,8 +603,8 @@
       }
 
       #${widgetId} .lookupit-send svg {
-        width: 20px;
-        height: 20px;
+        width: 15px;
+        height: 15px;
       }
 
       @keyframes lookupitFadeSlide {
@@ -629,14 +629,15 @@
 
       @media (max-width: 640px) {
         #${widgetId} {
-          ${config.position === "left" ? "left: 14px;" : "right: 14px;"}
-          bottom: 14px;
+          ${config.position === "left" ? "left: 10px;" : "right: 10px;"}
+          bottom: 10px;
         }
 
         #${widgetId} .lookupit-panel {
-          width: min(calc(100vw - 16px), 396px);
-          bottom: 88px;
-          border-radius: 28px;
+          width: min(calc(100vw - 16px), 294px);
+          bottom: 60px;
+          max-height: min(440px, calc(100vh - 84px));
+          border-radius: 20px;
         }
       }
     `;

templates/index.html

@@ -35,8 +35,8 @@
             </svg>
           </div>
           <div>
-            <div class="chat-name">Lookup IT Assistant</div>
-            <div class="chat-status"><span class="dot"></span> Online</div>
+            <div class="chat-name">LookUP IT Assistant</div>
+            <div class="chat-status"><span class="dot"></span> Mobile app experts</div>
           </div>
         </div>
         <button id="chat-close-btn" aria-label="Close chat">✕</button>
@@ -53,7 +53,7 @@
       <div class="chat-input-area">
         <textarea
           id="chat-input"
-          placeholder="Type your message…"
+          placeholder="Describe your app idea..."
           rows="1"
           maxlength="1000"
         ></textarea>