From 0c71abc10740c9bca6daaf7409e708d5998e78a5 Mon Sep 17 00:00:00 2001
From: wikiboss <zacow@163.com>
Date: Mon, 21 Sep 2026 15:12:59 +0800
Subject: [PATCH] =?UTF-8?q?style(crm):=20=E4=BB=A5=E5=87=BA=E6=B5=B7?=
 =?UTF-8?q?=E9=94=80=E5=94=AE=E5=AE=9E=E6=93=8D=E8=A7=86=E8=A7=92=E4=B8=8E?=
 =?UTF-8?q?=E9=A1=B6=E7=BA=A7UI/UX=E7=BE=8E=E5=AD=A6=E6=B7=B1=E5=BA=A6?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=BD=9C=E5=AE=A2=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?(leads-detail.uvue)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mpuniapp/pages/owner/leads-detail.uvue | 1170 ++++++++++++++----------
 1 file changed, 700 insertions(+), 470 deletions(-)

diff --git a/mpuniapp/pages/owner/leads-detail.uvue b/mpuniapp/pages/owner/leads-detail.uvue
index d15b6a5..4be8e68 100644
--- a/mpuniapp/pages/owner/leads-detail.uvue
+++ b/mpuniapp/pages/owner/leads-detail.uvue
@@ -1,97 +1,123 @@
 <template>
   <view class="lead-detail-page" :class="pageRtlClass" :style="pageTheme">
+    <!-- Ambient Aurora Top Subtle Glow -->
+    <view class="detail-aurora-glow"></view>
+
     <view class="lead-detail-container">
+      <!-- Empty / Missing ID State -->
       <view v-if="state.missingId || state.empty" class="lead-empty">
+        <view class="empty-icon-wrap">
+          <view class="empty-icon-dot"></view>
+        </view>
         <text class="lead-empty-text">{{ emptyMessage }}</text>
         <button class="primary-cta-btn" @click="handleBack">
           <text class="primary-cta-btn-text">{{ backLabel }}</text>
         </button>
       </view>
 
+      <!-- Skeleton Loading State -->
       <view v-else-if="state.loading" class="lead-skeleton">
         <view class="skeleton-line skeleton-title"></view>
         <view class="skeleton-card"></view>
         <view class="skeleton-card"></view>
+        <view class="skeleton-card"></view>
       </view>
 
+      <!-- Main Body -->
       <view v-else class="lead-body">
-        <!-- 1. Lead Profile Bento Card -->
+        <!-- 1. Lead Profile Bento Card (Hero Executive Header) -->
         <view class="lead-card lead-profile">
           <view class="profile-hero-row">
             <view class="lead-avatar-wrap">
               <text class="lead-avatar-text">{{ leadInitial }}</text>
             </view>
             <view class="lead-main-info">
-              <text class="lead-name">{{ state.name }}</text>
+              <view class="lead-name-row">
+                <text class="lead-name">{{ state.name }}</text>
+                <view v-if="sourceText !== ''" class="source-tag">
+                  <text class="source-tag-text">{{ sourceText }}</text>
+                </view>
+              </view>
               <text v-if="state.company !== ''" class="lead-company">{{ state.company }}</text>
             </view>
             <view class="lead-badge-col">
-              <view class="lead-score-pill">
+              <view class="lead-score-pill" :class="{ 'lead-score-hot-pill': state.intentScore >= 80 }">
                 <text class="lead-score-text">{{ scoreLabel }} {{ state.intentScore }}</text>
               </view>
-              <view class="lead-status-pill" :class="{ 'lead-status-hot-pill': isHotStatus }">
+              <view class="lead-status-pill" :class="statusPillClass">
                 <text class="lead-status" :class="{ 'lead-status-hot': isHotStatus }">{{ statusText }}</text>
               </view>
             </view>
           </view>
 
-          <!-- Modern Global Outreach Action Pills -->
+          <!-- Modern Global Outreach Action Matrix (One-Tap Touchpoints) -->
           <view v-if="hasOutreachOptions" class="lead-outreach-row">
-            <view v-if="phoneText !== ''" class="outreach-pill" @click="handleCallPhone">
-              <text class="outreach-pill-text">{{ phoneLabel }}: {{ phoneText }}</text>
-            </view>
+            <!-- WhatsApp Action (High Contrast Brand Green) -->
             <view v-if="hasWhatsApp" class="outreach-pill whatsapp-pill" @click="handleWhatsApp">
+              <view class="outreach-dot bg-whatsapp"></view>
               <text class="outreach-pill-text whatsapp-text">{{ whatsappLabel }}</text>
             </view>
-            <view v-if="emailText !== ''" class="outreach-pill" @click="handleCopyEmail">
-              <text class="outreach-pill-text">{{ emailLabel }}: {{ emailText }}</text>
+
+            <!-- Phone Call Action -->
+            <view v-if="phoneText !== ''" class="outreach-pill phone-pill" @click="handleCallPhone">
+              <view class="outreach-dot bg-phone"></view>
+              <text class="outreach-pill-text">{{ phoneLabel }}: {{ phoneText }}</text>
             </view>
+
+            <!-- Save to Phone Contacts (vCard) -->
             <view class="outreach-pill contact-pill" @click="handleSaveContact">
+              <view class="outreach-dot bg-contact"></view>
               <text class="outreach-pill-text contact-text">{{ saveContactLabel }}</text>
             </view>
-            <view v-if="sourceText !== ''" class="source-tag">
-              <text class="source-tag-text">{{ sourceTitleLabel }}: {{ sourceText }}</text>
+
+            <!-- Copy Email Action -->
+            <view v-if="emailText !== ''" class="outreach-pill email-pill" @click="handleCopyEmail">
+              <view class="outreach-dot bg-email"></view>
+              <text class="outreach-pill-text">{{ emailLabel }}: {{ emailText }}</text>
             </view>
           </view>
         </view>
 
-        <!-- 2. Commercial Stage Advancement Bento Card -->
+        <!-- 2. Commercial Stage Advancement Bento Card (Stepper Flow) -->
         <view class="lead-card stage-card">
           <view class="card-header-row">
-            <text class="section-title">{{ stageTitleLabel }}</text>
+            <view class="card-title-group">
+              <view class="card-indicator bg-brand"></view>
+              <text class="section-title">{{ stageTitleLabel }}</text>
+            </view>
           </view>
           <view class="stage-stepper">
             <view
               class="stage-pill"
-              :class="{ 'stage-pill-active': state.status === 'new' }"
+              :class="{ 'stage-pill-active': state.status === 'new', 'stage-pill-active-new': state.status === 'new' }"
               @click="handleStageChange('new')"
             >
               <text class="stage-pill-text">{{ statusLabelOf('new') }}</text>
             </view>
             <view
               class="stage-pill"
-              :class="{ 'stage-pill-active': state.status === 'contacted' }"
+              :class="{ 'stage-pill-active': state.status === 'contacted', 'stage-pill-active-contacted': state.status === 'contacted' }"
               @click="handleStageChange('contacted')"
             >
               <text class="stage-pill-text">{{ statusLabelOf('contacted') }}</text>
             </view>
             <view
               class="stage-pill"
-              :class="{ 'stage-pill-active': state.status === 'hot' }"
+              :class="{ 'stage-pill-active': state.status === 'hot', 'stage-pill-active-hot': state.status === 'hot' }"
               @click="handleStageChange('hot')"
             >
               <text class="stage-pill-text">{{ statusLabelOf('hot') }}</text>
             </view>
             <view
               class="stage-pill"
-              :class="{ 'stage-pill-active': state.status === 'won' }"
+              :class="{ 'stage-pill-active': state.status === 'won', 'stage-pill-active-won': state.status === 'won' }"
               @click="handleStageChange('won')"
             >
               <text class="stage-pill-text">{{ statusLabelOf('won') }}</text>
             </view>
             <view
               class="stage-pill"
-              :class="{ 'stage-pill-active': state.status === 'archived' }"
+              :class="{ 'stage-pill-active': state.status === 'archived', 'stage-pill-active-archived': state.status === 'archived' }"
               @click="handleStageChange('archived')"
             >
               <text class="stage-pill-text">{{ statusLabelOf('archived') }}</text>
@@ -99,14 +125,42 @@
           </view>
         </view>
 
-        <!-- 3. Visitor Radar Footprint Timeline Bento Card -->
-        <view class="lead-card lead-section">
+        <!-- 3. AI Copilot Icebreaker Script Bento Card -->
+        <view class="lead-card lead-section ai-card">
+          <view class="ai-header-row">
+            <view class="ai-identity">
+              <view class="ai-pulse-dot"></view>
+              <text class="ai-badge-text">AI Copilot</text>
+            </view>
+            <view class="ai-gen-action" @click="handleGenerateAiScript">
+              <text class="ai-gen-btn-text">{{ generateAiLabel }}</text>
+            </view>
+          </view>
+
+          <text class="ai-script">{{ t('aiScript') }}</text>
+
+          <view v-if="state.aiScript !== ''" class="ai-result-box">
+            <text class="ai-result-text">{{ state.aiScript }}</text>
+            <view class="ai-result-actions">
+              <view class="ai-copy-btn" @click="handleCopyScript">
+                <text class="ai-copy-btn-text">{{ copyScriptLabel }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 4. Visitor Radar Footprint Timeline Bento Card -->
+        <view class="lead-card lead-section timeline-card">
           <view class="card-header-row">
-            <text class="section-title">{{ timelineLabel }}</text>
+            <view class="card-title-group">
+              <view class="card-indicator bg-radar"></view>
+              <text class="section-title">{{ timelineLabel }}</text>
+            </view>
             <view class="count-badge">
               <text class="count-badge-text">{{ tracksCountText }}</text>
             </view>
           </view>
+
           <list-view class="timeline" :scroll-y="true">
             <list-item v-if="filteredTracks.length === 0">
               <view class="timeline-empty">
@@ -119,13 +173,17 @@
             >
               <view class="timeline-item">
                 <view class="timeline-header-line">
-                  <text class="timeline-place">{{ formatPlace(item.country, item.city) }}</text>
+                  <view class="timeline-place-wrap">
+                    <view class="timeline-dot"></view>
+                    <text class="timeline-place">{{ formatPlace(item.country, item.city) }}</text>
+                  </view>
                   <view class="timeline-touch-wrap">
                     <text class="timeline-touch">{{ item.touchType }}</text>
                   </view>
                 </view>
                 <view class="timeline-metrics">
                   <text class="timeline-metric">{{ t('stay') }} {{ formatStayMs(item.stayDurationMs) }}</text>
+                  <text class="timeline-metric-sep">·</text>
                   <text class="timeline-metric">{{ t('depth') }} {{ formatDepthPct(item.scrollDepth) }}</text>
                 </view>
               </view>
@@ -133,39 +191,13 @@
           </list-view>
         </view>
 
-        <!-- 4. AI Copilot Script Bento Card -->
-        <view class="lead-card lead-section ai-card">
-          <view class="ai-header-row">
-            <view class="ai-pulse-dot"></view>
-            <text class="ai-badge-text">AI Copilot</text>
-          </view>
-          <text class="ai-script">{{ t('aiScript') }}</text>
-
-          <view v-if="state.aiScript !== ''" class="ai-result-box">
-            <text class="ai-result-text">{{ state.aiScript }}</text>
-            <view class="ai-result-actions">
-              <view class="ai-copy-btn" @click="handleCopyScript">
-                <text class="ai-copy-btn-text">{{ copyScriptLabel }}</text>
-              </view>
-            </view>
-          </view>
-
-          <view class="ai-footer-row">
-            <button
-              class="ai-gen-btn"
-              :class="{ 'ai-gen-btn-loading': state.aiGenerating }"
-              :disabled="state.aiGenerating"
-              @click="handleGenerateAiScript"
-            >
-              <text class="ai-gen-btn-text">{{ generateAiLabel }}</text>
-            </button>
-          </view>
-        </view>
-
         <!-- 5. Follow-up Notes & Evidence Bento Card -->
         <view class="lead-card lead-section notes-section">
           <view class="card-header-row">
-            <text class="section-title">{{ notesLabel }}</text>
+            <view class="card-title-group">
+              <view class="card-indicator bg-notes"></view>
+              <text class="section-title">{{ notesLabel }}</text>
+            </view>
           </view>
 
           <view v-if="state.existingNotes !== ''" class="notes-history-box">
@@ -176,6 +208,7 @@
           <view class="notes-compose-box">
             <textarea
               class="notes-input"
+              style="min-height: 88px;"
               v-model="state.nextNote"
               :placeholder="notesPlaceholder"
               :disabled="state.saving"
@@ -195,6 +228,7 @@
           </view>
         </view>
 
+        <!-- Error Feedback -->
         <view v-if="state.errorMessage !== ''" class="lead-error">
           <text class="lead-error-text">{{ state.errorMessage }}</text>
         </view>
@@ -298,76 +332,79 @@ const emptyMessage = computed((): string => {
   return resolveLeadDetailText('empty');
 });
 
+const leadInitial = computed((): string => {
+  const trimmed = state.name.trim();
+  if (trimmed === '') {
+    return '?';
+  }
+  return trimmed.charAt(0).toUpperCase();
+});
+
+const isHotStatus = computed((): boolean => {
+  return state.status === 'hot' || state.intentScore >= 80;
+});
+
 const statusText = computed((): string => {
   return statusLabelOf(state.status);
 });
 
-const isHotStatus = computed((): boolean => {
-  return state.status === 'hot';
+const statusPillClass = computed((): string => {
+  if (state.status === 'hot') {
+    return 'lead-status-hot-pill';
+  }
+  if (state.status === 'won') {
+    return 'lead-status-won-pill';
+  }
+  if (state.status === 'contacted') {
+    return 'lead-status-contacted-pill';
+  }
+  return '';
 });
 
-const leadInitial = computed((): string => {
-  const n = state.name.trim();
-  return n.length > 0 ? n.charAt(0).toUpperCase() : 'L';
+const phoneText = computed((): string => {
+  return state.phone.trim();
+});
+
+const emailText = computed((): string => {
+  return state.email.trim();
 });
 
 const sourceText = computed((): string => {
-  const lead = state.lead;
-  if (lead == null || lead.source == null) {
-    return '';
+  const src = state.source.trim();
+  if (src === 'nfc') {
+    return 'NFC';
   }
-  return String(lead.source).toUpperCase();
+  if (src === 'qr') {
+    return 'QR';
+  }
+  if (src === 'link') {
+    return 'Link';
+  }
+  if (src === 'ai_chat') {
+    return 'AI Chat';
+  }
+  return src.toUpperCase();
+});
+
+const hasWhatsApp = computed((): boolean => {
+  return formatWhatsAppUrl(state.phone) !== '';
+});
+
+const hasOutreachOptions = computed((): boolean => {
+  return phoneText.value !== '' || emailText.value !== '' || hasWhatsApp.value;
+});
+
+const filteredTracks = computed((): RadarTrack[] => {
+  return state.tracks;
 });
 
 const tracksCountText = computed((): string => {
   return `${state.tracks.length}`;
 });
 
-const phoneText = computed((): string => {
-  const lead = state.lead;
-  if (lead == null) {
-    return '';
-  }
-  const phone = lead.phone;
-  if (phone == null) {
-    return '';
-  }
-  return phone.trim();
-});
-
-const emailText = computed((): string => {
-  const lead = state.lead;
-  if (lead == null) {
-    return '';
-  }
-  const email = lead.email;
-  if (email == null) {
-    return '';
-  }
-  return email.trim();
-});
-
-const hasWhatsApp = computed((): boolean => {
-  return phoneText.value !== '';
-});
-
-const hasOutreachOptions = computed((): boolean => {
-  return phoneText.value !== '' || emailText.value !== '' || sourceText.value !== '';
-});
-
-const filteredTracks = computed((): RadarTrack[] => {
-  if (state.tracks.length <= 1) {
-    return state.tracks;
-  }
-  const meaningful = state.tracks.filter((t: RadarTrack): boolean => {
-    return t.stayDurationMs > 0 || t.scrollDepth > 0;
-  });
-  return meaningful.length > 0 ? meaningful : state.tracks.slice(0, 3);
-});
-
 const saveLabel = computed((): string => {
   if (state.saving) {
-    return resolveLeadDetailText('loading');
+    return resolveLeadDetailText('saving');
   }
   return resolveLeadDetailText('save');
 });
@@ -393,545 +430,644 @@ function handleBack(): void {
 }
 
 function handleCallPhone(): void {
-  if (phoneText.value !== '') {
-    uni.makePhoneCall({
-      phoneNumber: phoneText.value,
-    });
-  }
-}
-
-function handleWhatsApp(): void {
-  const url = formatWhatsAppUrl(phoneText.value);
-  if (url === '') {
+  if (phoneText.value === '') {
     return;
   }
-  // #ifdef H5
-  if (typeof window !== 'undefined') {
-    window.open(url, '_blank');
-    return;
-  }
-  // #endif
-  uni.setClipboardData({
-    data: url,
-    success: () => {
-      uni.showToast({
-        title: resolveLeadDetailText('copiedToast'),
-        icon: 'none',
-      });
-    },
+  uni.makePhoneCall({
+    phoneNumber: phoneText.value,
   });
 }
 
 function handleCopyEmail(): void {
-  if (emailText.value !== '') {
-    uni.setClipboardData({
-      data: emailText.value,
-      success: () => {
-        uni.showToast({
-          title: resolveLeadDetailText('copiedToast'),
-          icon: 'none',
-        });
-      },
+  if (emailText.value === '') {
+    return;
+  }
+  uni.setClipboardData({
+    data: emailText.value,
+    showToast: true,
+  });
+}
+
+function handleWhatsApp(): void {
+  const waUrl = formatWhatsAppUrl(state.phone);
+  if (waUrl === '') {
+    return;
+  }
+  // #ifdef H5
+  if (typeof window !== 'undefined') {
+    window.open(waUrl, '_blank');
+    return;
+  }
+  // #endif
+  uni.setClipboardData({
+    data: waUrl,
+    showToast: true,
+  });
+}
+
+async function handleSaveContact(): Promise<void> {
+  const ok = await saveContactToDevice({
+    name: state.name,
+    company: state.company,
+    phone: state.phone,
+    email: state.email,
+  });
+  if (ok) {
+    uni.showToast({
+      title: resolveLeadDetailText('contactSaved'),
+      icon: 'success',
     });
   }
 }
 
-function handleSaveContact(): void {
-  saveContactToDevice(state.lead);
+async function handleStageChange(targetStatus: string): Promise<void> {
+  const parsed = parseLeadStatus(targetStatus);
+  if (parsed == null || parsed === state.status || state.saving) {
+    return;
+  }
+  await updateLeadStage(state, parsed);
 }
 
 function handleGenerateAiScript(): void {
-  if (state.aiGenerating) {
-    return;
-  }
   state.aiGenerating = true;
-  setTimeout(() => {
-    state.aiScript = generateAiIcebreaker(state.lead, state.tracks, getCurrentLocale());
-    state.aiGenerating = false;
-  }, 200);
+  const script = generateAiIcebreaker(
+    {
+      id: state.id,
+      cardId: state.cardId,
+      name: state.name,
+      company: state.company,
+      status: state.status,
+      intentScore: state.intentScore,
+      source: state.source,
+    },
+    state.tracks,
+    getCurrentLocale()
+  );
+  state.aiScript = script;
+  state.aiGenerating = false;
 }
 
 function handleCopyScript(): void {
-  if (state.aiScript !== '') {
-    uni.setClipboardData({
-      data: state.aiScript,
-      success: () => {
-        uni.showToast({
-          title: resolveLeadDetailText('scriptCopiedToast'),
-          icon: 'none',
-        });
-      },
-    });
-  }
-}
-
-async function handleStageChange(newStage: string): Promise<void> {
-  const status = parseLeadStatus(newStage);
-  if (status == null || state.leadId == null || state.status === status) {
+  if (state.aiScript === '') {
     return;
   }
-  const ok = await updateLeadStage(state, status);
-  if (ok) {
-    uni.showToast({
-      title: resolveLeadDetailText('stageUpdated'),
-      icon: 'none',
-    });
-  }
+  uni.setClipboardData({
+    data: state.aiScript,
+    showToast: true,
+  });
 }
 
 async function handleSave(): Promise<void> {
-  const next = state.nextNote.trim();
-  if (next === '' && state.attachments.length === 0) {
-    uni.showToast({
-      title: resolveLeadDetailText('notesPlaceholder'),
-      icon: 'none',
-    });
-    return;
-  }
-  const ok = await submitLeadNote(state);
-  if (ok) {
-    uni.showToast({
-      title: getOmniText(getCurrentLocale(), 'common.save'),
-      icon: 'none',
-    });
-  }
+  await submitLeadNote(state);
 }
 
 onLoad((options: LeadDetailPageOptions) => {
-  const ready = applyLeadDetailOptions(state, options);
-  if (ready) {
+  applyLeadDetailOptions(state, options);
+  refreshLeadDetail(state);
+});
+
+onShow(() => {
+  if (!state.missingId && state.id !== '') {
     refreshLeadDetail(state);
   }
 });
 </script>
 
 <style scoped>
+/* Root Container */
 .lead-detail-page {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
-  box-sizing: border-box;
-  background-color: var(--oc-bg, #F7F8FA);
-}
-
-.lead-detail-container {
-  width: 100%;
-  max-width: 480px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
+  height: 100%;
+  background-color: var(--oc-bg, #F5F8FC);
+  position: relative;
+  overflow: hidden;
 }
 
 .lead-rtl {
   direction: rtl;
 }
 
-.lead-empty {
+/* Ambient Subtle Aurora Top Glow */
+.detail-aurora-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 150px;
+  background: radial-gradient(circle at 50% -20%, rgba(0, 163, 255, 0.12) 0%, rgba(99, 102, 241, 0.05) 55%, rgba(245, 248, 252, 0) 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.lead-detail-container {
+  position: relative;
+  z-index: 1;
   flex: 1;
-  margin-inline: var(--oc-space-16, 16px);
-  margin-block: 40px;
-  padding: var(--oc-space-24, 24px);
-  background-color: var(--oc-surface, #FFFFFF);
-  border: 1px solid var(--oc-border, #EBF1F7);
-  border-radius: var(--oc-radius-card, 20px);
-  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Empty State */
+.lead-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  padding: 60px 24px;
+}
+
+.empty-icon-wrap {
+  width: 52px;
+  height: 52px;
+  border-radius: 26px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-block-end: 16px;
+}
+
+.empty-icon-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: var(--oc-text-2, #667085);
 }
 
 .lead-empty-text {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--oc-text, #101828);
+  font-size: 15px;
+  color: var(--oc-text-2, #667085);
   text-align: center;
-  line-height: 1.6;
-  margin-block-end: var(--oc-space-24, 24px);
+  margin-block-end: 24px;
+  line-height: 1.5;
 }
 
+/* Skeleton Loading */
 .lead-skeleton {
-  flex: 1;
-  padding-inline: var(--oc-space-16, 16px);
-  padding-block: var(--oc-space-16, 16px);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .skeleton-line {
-  height: 16px;
-  width: 40%;
-  background-color: var(--oc-border, #EBF1F7);
-  border-radius: 8px;
-  margin-block-end: var(--oc-space-12, 12px);
+  height: 24px;
+  background-color: var(--oc-border, #E3E7ED);
+  border-radius: 6px;
 }
 
 .skeleton-title {
-  width: 56%;
-  height: 24px;
+  width: 50%;
+  margin-block-end: 6px;
 }
 
 .skeleton-card {
-  height: 72px;
-  background-color: var(--oc-border, #EBF1F7);
+  height: 120px;
+  background-color: var(--oc-border, #E3E7ED);
   border-radius: var(--oc-radius-card, 20px);
-  margin-block-end: var(--oc-space-12, 12px);
 }
 
+/* Lead Body */
 .lead-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
   padding-inline: var(--oc-space-16, 16px);
   padding-block-start: var(--oc-space-16, 16px);
   padding-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
-}
-
-.lead-card {
-  padding: var(--oc-space-16, 16px);
-  background-color: var(--oc-surface, #FFFFFF);
-  border: 1px solid var(--oc-border, #EBF1F7);
-  border-radius: var(--oc-radius-card, 20px);
-  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
   display: flex;
   flex-direction: column;
-  margin-block-end: var(--oc-space-16, 16px);
+  gap: 12px;
 }
 
-.card-header-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-block-end: var(--oc-space-12, 12px);
+/* Generic Bento Card */
+.lead-card {
+  background-color: var(--oc-surface, #FFFFFF);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: var(--oc-radius-card, 20px);
+  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
+  padding: 16px;
+  box-sizing: border-box;
 }
 
-.section-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--oc-text, #101828);
-  line-height: 1.25;
+/* 1. Profile Hero Bento Card */
+.lead-profile {
+  background: linear-gradient(150deg, #FFFFFF 0%, #F9FBFE 100%);
 }
 
-.count-badge {
-  padding: 2px 8px;
-  border-radius: var(--oc-radius-pill, 9999px);
-  background-color: var(--oc-primary-soft, #EBF5FF);
-}
-
-.count-badge-text {
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--oc-primary, #0088FF);
-}
-
-/* 1. Lead Profile */
 .profile-hero-row {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
+  margin-block-end: 14px;
 }
 
 .lead-avatar-wrap {
-  width: 46px;
-  height: 46px;
-  border-radius: var(--oc-radius-btn, 14px);
-  background-color: var(--oc-primary-soft, #EBF5FF);
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background: linear-gradient(135deg, #EBF5FF 0%, #D8EBFF 100%);
+  border: 1px solid #B2DDFF;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-inline-end: var(--oc-space-12, 12px);
+  margin-inline-end: 12px;
+  flex-shrink: 0;
 }
 
 .lead-avatar-text {
   font-size: 18px;
-  font-weight: 700;
-  color: var(--oc-primary, #0088FF);
+  font-weight: 800;
+  color: var(--oc-primary, #0B5CFF);
 }
 
 .lead-main-info {
-  flex: 1;
   display: flex;
   flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.lead-name-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-block-end: 3px;
 }
 
 .lead-name {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   color: var(--oc-text, #101828);
   line-height: 1.25;
-  margin-block-end: 4px;
+  margin-inline-end: 6px;
+}
+
+.source-tag {
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 4px;
+  padding-inline: 5px;
+  padding-block: 1px;
+}
+
+.source-tag-text {
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--oc-text-2, #667085);
 }
 
 .lead-company {
   font-size: 13px;
-  color: var(--oc-text-2, #64748B);
-  line-height: 1.4;
+  color: var(--oc-text-2, #667085);
+  line-height: 1.3;
 }
 
 .lead-badge-col {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  margin-inline-start: var(--oc-space-8, 8px);
+  gap: 4px;
+  flex-shrink: 0;
 }
 
 .lead-score-pill {
-  padding: 3px 10px;
-  border-radius: var(--oc-radius-pill, 9999px);
-  background-color: var(--oc-primary-soft, #EBF5FF);
-  margin-block-end: 6px;
+  padding-inline: 8px;
+  padding-block: 2px;
+  border-radius: 9999px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+}
+
+.lead-score-hot-pill {
+  background-color: #FEE4E2;
+  border-color: #FECDCA;
 }
 
 .lead-score-text {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
-  color: var(--oc-primary, #0088FF);
+  color: var(--oc-text-2, #667085);
+}
+
+.lead-score-hot-pill .lead-score-text {
+  color: #F04438;
 }
 
 .lead-status-pill {
-  padding: 3px 10px;
-  border-radius: var(--oc-radius-pill, 9999px);
-  background-color: var(--oc-bg, #F5F8FC);
-  border: 1px solid var(--oc-border, #EBF1F7);
+  padding-inline: 8px;
+  padding-block: 2px;
+  border-radius: 9999px;
+  background-color: var(--oc-primary-soft, #EBF5FF);
+  border: 1px solid #B2DDFF;
 }
 
 .lead-status-hot-pill {
-  background-color: rgba(240, 68, 56, 0.08);
-  border-color: rgba(240, 68, 56, 0.2);
+  background-color: #FFF1F0;
+  border-color: #FFA39E;
+}
+
+.lead-status-won-pill {
+  background-color: #ECFDF3;
+  border-color: #A6F4C5;
+}
+
+.lead-status-contacted-pill {
+  background-color: #FFFAEB;
+  border-color: #FEDF89;
 }
 
 .lead-status {
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 700;
   color: var(--oc-primary, #0B5CFF);
 }
 
 .lead-status-hot {
-  color: var(--oc-error, #F04438);
+  color: #F04438;
 }
 
+/* Outreach Action Matrix */
 .lead-outreach-row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  align-items: center;
-  margin-block-start: var(--oc-space-12, 12px);
-  padding-block-start: var(--oc-space-12, 12px);
-  border-top: 1px solid var(--oc-border, #EBF1F7);
+  gap: 8px;
+  padding-block-start: 10px;
+  border-top: 1px solid var(--oc-border, #E3E7ED);
 }
 
 .outreach-pill {
-  height: 32px;
-  min-height: 32px;
-  padding-inline: var(--oc-space-12, 12px);
-  border-radius: var(--oc-radius-pill, 9999px);
-  background-color: var(--oc-bg, #F5F8FC);
-  border: 1px solid var(--oc-border, #EBF1F7);
+  height: 34px;
+  min-height: 34px;
+  padding-inline: 12px;
+  border-radius: 9999px;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  margin-inline-end: var(--oc-space-8, 8px);
-  margin-block: 4px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.outreach-pill:active {
+  opacity: 0.85;
+}
+
+.outreach-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  margin-inline-end: 6px;
+}
+
+.bg-whatsapp {
+  background-color: #12B76A;
+}
+
+.bg-phone {
+  background-color: var(--oc-primary, #0B5CFF);
+}
+
+.bg-contact {
+  background-color: #0E9384;
+}
+
+.bg-email {
+  background-color: #667085;
 }
 
 .outreach-pill-text {
   font-size: 12px;
   font-weight: 600;
-  color: var(--oc-primary, #0088FF);
+  color: var(--oc-text, #101828);
 }
 
 .whatsapp-pill {
-  background-color: rgba(18, 183, 106, 0.08);
-  border-color: rgba(18, 183, 106, 0.24);
+  background-color: #ECFDF3;
+  border-color: #A6F4C5;
 }
 
 .whatsapp-text {
-  color: #12B76A;
+  color: #027A48;
   font-weight: 700;
 }
 
 .contact-pill {
-  background-color: var(--oc-primary-soft, #EBF5FF);
-  border-color: rgba(0, 136, 255, 0.2);
+  background-color: #F0FDF9;
+  border-color: #B5EADB;
 }
 
 .contact-text {
-  color: var(--oc-primary, #0088FF);
-  font-weight: 700;
+  color: #0E9384;
+  font-weight: 600;
 }
 
-.source-tag {
-  height: 32px;
-  padding-inline: var(--oc-space-8, 8px);
-  border-radius: var(--oc-radius-pill, 9999px);
-  background-color: var(--oc-surface, #FFFFFF);
-  border: 1px dashed var(--oc-border, #EBF1F7);
+/* 2. Commercial Stage Advancement Card */
+.card-header-row {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  margin-block: 4px;
+  justify-content: space-between;
+  margin-block-end: 12px;
 }
 
-.source-tag-text {
-  font-size: 11px;
-  color: var(--oc-text-2, #64748B);
+.card-title-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.card-indicator {
+  width: 6px;
+  height: 14px;
+  border-radius: 3px;
+  margin-inline-end: 8px;
+}
+
+.bg-brand {
+  background-color: var(--oc-primary, #0B5CFF);
+}
+
+.bg-radar {
+  background-color: #0E9384;
+}
+
+.bg-notes {
+  background-color: #7F56D9;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--oc-text, #101828);
 }
 
-/* 2. Commercial Stage Stepper */
 .stage-stepper {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  gap: 6px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-block: 2px;
 }
 
 .stage-pill {
   flex: 1;
+  min-width: 58px;
   height: 34px;
-  border-radius: var(--oc-radius-pill, 9999px);
-  background-color: var(--oc-bg, #F5F8FC);
-  border: 1px solid var(--oc-border, #EBF1F7);
+  border-radius: 10px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-inline: 3px;
-  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.stage-pill-active {
-  background-color: var(--oc-primary, #0088FF);
-  border-color: var(--oc-primary, #0088FF);
-  box-shadow: 0 4px 12px rgba(0, 136, 255, 0.24);
+.stage-pill:active {
+  opacity: 0.85;
 }
 
 .stage-pill-text {
   font-size: 12px;
   font-weight: 500;
-  color: var(--oc-text-2, #64748B);
+  color: var(--oc-text-2, #667085);
 }
 
-.stage-pill-active .stage-pill-text {
-  color: #FFFFFF;
+.stage-pill-active {
   font-weight: 700;
 }
 
-/* 3. Radar Timeline */
-.timeline {
-  max-height: 240px;
-  background-color: var(--oc-bg, #F5F8FC);
-  border: 1px solid var(--oc-border, #EBF1F7);
-  border-radius: var(--oc-radius-btn, 14px);
-}
-
-.timeline-empty {
-  padding: var(--oc-space-16, 16px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.timeline-empty-text {
-  font-size: 13px;
-  color: var(--oc-text-2, #64748B);
-  line-height: 1.6;
-}
-
-.timeline-item {
-  padding: var(--oc-space-12, 12px) var(--oc-space-16, 16px);
-  border-bottom: 1px solid var(--oc-border, #EBF1F7);
-  display: flex;
-  flex-direction: column;
-}
-
-.timeline-header-line {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-block-end: 4px;
-}
-
-.timeline-place {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--oc-text, #101828);
-  line-height: 1.25;
-}
-
-.timeline-touch-wrap {
-  padding: 2px 6px;
-  border-radius: 6px;
+.stage-pill-active-new {
   background-color: var(--oc-primary-soft, #EBF5FF);
+  border-color: var(--oc-primary, #0B5CFF);
 }
 
-.timeline-touch {
-  font-size: 11px;
+.stage-pill-active-new .stage-pill-text {
+  color: var(--oc-primary, #0B5CFF);
   font-weight: 700;
-  color: var(--oc-primary, #0088FF);
-  text-transform: uppercase;
 }
 
-.timeline-metrics {
-  display: flex;
-  flex-direction: row;
+.stage-pill-active-contacted {
+  background-color: #FFFAEB;
+  border-color: #F79009;
 }
 
-.timeline-metric {
-  font-size: 12px;
-  color: var(--oc-text-2, #64748B);
-  line-height: 1.6;
-  margin-inline-end: 12px;
+.stage-pill-active-contacted .stage-pill-text {
+  color: #B54708;
+  font-weight: 700;
 }
 
-/* 4. AI Card */
+.stage-pill-active-hot {
+  background-color: #FFF1F0;
+  border-color: #F04438;
+}
+
+.stage-pill-active-hot .stage-pill-text {
+  color: #F04438;
+  font-weight: 700;
+}
+
+.stage-pill-active-won {
+  background-color: #ECFDF3;
+  border-color: #12B76A;
+}
+
+.stage-pill-active-won .stage-pill-text {
+  color: #027A48;
+  font-weight: 700;
+}
+
+.stage-pill-active-archived {
+  background-color: #F2F4F7;
+  border-color: #98A2B3;
+}
+
+.stage-pill-active-archived .stage-pill-text {
+  color: #475467;
+  font-weight: 700;
+}
+
+/* 3. AI Copilot Bento Card */
 .ai-card {
-  background-color: var(--oc-surface, #FFFFFF);
-  border: 1px solid rgba(0, 136, 255, 0.16);
-  border-left: 4px solid var(--oc-primary, #0088FF);
+  background: linear-gradient(150deg, #FFFFFF 0%, #FAF8FE 100%);
+  border-color: #E0D7FE;
 }
 
 .ai-header-row {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-block-end: var(--oc-space-8, 8px);
+  justify-content: space-between;
+  margin-block-end: 8px;
+}
+
+.ai-identity {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .ai-pulse-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 3px;
-  background-color: var(--oc-primary, #0088FF);
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: #7F56D9;
   margin-inline-end: 6px;
 }
 
 .ai-badge-text {
+  font-size: 14px;
+  font-weight: 700;
+  color: #6941C6;
+}
+
+.ai-gen-action {
+  padding-inline: 10px;
+  height: 28px;
+  border-radius: 9999px;
+  background-color: #F4EBFF;
+  border: 1px solid #D6BBFB;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.ai-gen-action:active {
+  opacity: 0.85;
+}
+
+.ai-gen-btn-text {
   font-size: 11px;
   font-weight: 700;
-  color: var(--oc-primary, #0088FF);
-  letter-spacing: 0.5px;
+  color: #6941C6;
 }
 
 .ai-script {
-  font-size: 13px;
-  color: var(--oc-text, #101828);
-  line-height: 1.5;
-  margin-block-end: var(--oc-space-8, 8px);
+  font-size: 12px;
+  color: var(--oc-text-2, #667085);
+  line-height: 1.4;
+  margin-block-end: 10px;
 }
 
 .ai-result-box {
-  background-color: var(--oc-bg, #F5F8FC);
-  border: 1px solid var(--oc-border, #EBF1F7);
+  padding: 12px;
+  background-color: #FFFFFF;
+  border: 1px solid #E0D7FE;
   border-radius: 12px;
-  padding: var(--oc-space-12, 12px);
-  margin-block-end: var(--oc-space-12, 12px);
   display: flex;
   flex-direction: column;
 }
 
 .ai-result-text {
   font-size: 13px;
-  line-height: 1.6;
   color: var(--oc-text, #101828);
-  margin-block-end: var(--oc-space-8, 8px);
+  line-height: 1.6;
+  margin-block-end: 8px;
 }
 
 .ai-result-actions {
@@ -941,10 +1077,11 @@ onLoad((options: LeadDetailPageOptions) => {
 }
 
 .ai-copy-btn {
-  height: 28px;
   padding-inline: 10px;
-  border-radius: var(--oc-radius-pill, 9999px);
+  height: 26px;
+  border-radius: 9999px;
   background-color: var(--oc-primary-soft, #EBF5FF);
+  border: 1px solid #B2DDFF;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -953,114 +1090,205 @@ onLoad((options: LeadDetailPageOptions) => {
 .ai-copy-btn-text {
   font-size: 11px;
   font-weight: 700;
-  color: var(--oc-primary, #0088FF);
+  color: var(--oc-primary, #0B5CFF);
 }
 
-.ai-footer-row {
+/* 4. Radar Footprint Timeline */
+.timeline-card {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
+  flex-direction: column;
 }
 
-.ai-gen-btn {
-  height: 34px;
-  min-height: 32px;
-  padding-inline: 14px;
-  border-radius: var(--oc-radius-pill, 9999px);
-  background-color: var(--oc-primary-soft, #EBF5FF);
-  border: 1px solid rgba(0, 136, 255, 0.2);
+.count-badge {
+  padding-inline: 7px;
+  padding-block: 2px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 9999px;
+}
+
+.count-badge-text {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--oc-text-2, #667085);
+}
+
+.timeline {
+  max-height: 220px;
+  display: flex;
+  flex-direction: column;
+}
+
+.timeline-empty {
+  padding: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.ai-gen-btn-loading {
-  opacity: 0.6;
+.timeline-empty-text {
+  font-size: 12px;
+  color: var(--oc-text-2, #667085);
+  font-style: italic;
 }
 
-.ai-gen-btn-text {
+.timeline-item {
+  padding: 10px 12px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 12px;
+  margin-block-end: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.timeline-header-line {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-block-end: 4px;
+}
+
+.timeline-place-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.timeline-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: #0E9384;
+  margin-inline-end: 6px;
+}
+
+.timeline-place {
   font-size: 12px;
   font-weight: 700;
-  color: var(--oc-primary, #0088FF);
+  color: var(--oc-text, #101828);
+}
+
+.timeline-touch-wrap {
+  background-color: #FFFFFF;
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 4px;
+  padding-inline: 5px;
+  padding-block: 1px;
+}
+
+.timeline-touch {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--oc-text-2, #667085);
+}
+
+.timeline-metrics {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.timeline-metric {
+  font-size: 11px;
+  color: var(--oc-text-2, #667085);
+}
+
+.timeline-metric-sep {
+  font-size: 11px;
+  color: var(--oc-border, #E3E7ED);
+}
+
+/* 5. Notes & Attachments */
+.notes-section {
+  display: flex;
+  flex-direction: column;
 }
 
-/* 5. Notes Section */
 .notes-history-box {
-  margin-block-end: var(--oc-space-12, 12px);
-  padding: var(--oc-space-12, 12px);
-  background-color: var(--oc-bg, #F5F8FC);
-  border: 1px solid var(--oc-border, #EBF1F7);
-  border-radius: var(--oc-radius-btn, 14px);
+  padding: 10px 12px;
+  background-color: #F8FAFC;
+  border: 1px solid #E2E8F0;
+  border-radius: 12px;
+  margin-block-end: 12px;
 }
 
 .notes-history-label {
   font-size: 11px;
-  font-weight: 600;
-  color: var(--oc-text-2, #64748B);
-  margin-block-end: 6px;
+  font-weight: 700;
+  color: var(--oc-text-2, #667085);
+  margin-block-end: 4px;
 }
 
 .existing-notes {
   font-size: 13px;
   color: var(--oc-text, #101828);
-  line-height: 1.6;
+  line-height: 1.5;
 }
 
 .notes-compose-box {
+  margin-block-end: 12px;
+}
+
+.notes-input {
+  width: 100%;
+  padding: 12px;
+  box-sizing: border-box;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 14px;
+  font-size: 14px;
+  color: var(--oc-text, #101828);
+  line-height: 1.5;
+}
+
+.notes-attach-box {
   display: flex;
   flex-direction: column;
 }
 
-.notes-input {
-  min-height: 88px;
-  padding: var(--oc-space-12, 12px);
-  background-color: var(--oc-surface, #FFFFFF);
-  border: 1px solid var(--oc-border, #EBF1F7);
-  border-radius: var(--oc-radius-btn, 14px);
-  font-size: 16px;
-  color: var(--oc-text, #101828);
-  line-height: 1.6;
-  box-sizing: border-box;
-}
-
 .upload-hint {
-  font-size: 12px;
-  color: var(--oc-text-2, #64748B);
-  line-height: 1.6;
-  margin-block-start: var(--oc-space-12, 12px);
+  font-size: 11px;
+  color: var(--oc-text-2, #667085);
+  margin-block-end: 8px;
 }
 
 .notes-attachments {
-  margin-block-start: var(--oc-space-8, 8px);
+  display: flex;
 }
 
 .lead-error {
-  margin-block-end: var(--oc-space-12, 12px);
+  padding: 12px;
+  background-color: #FFF1F0;
+  border: 1px solid #FFA39E;
+  border-radius: 12px;
 }
 
 .lead-error-text {
   font-size: 12px;
-  color: var(--oc-error, #F04438);
+  color: #F04438;
+  text-align: center;
 }
 
-/* 6. Floating CTA Bar */
+/* 6. Fixed Floating CTA Bar */
 .lead-cta-bar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: var(--window-bottom, 0px);
   padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
-  background-color: rgba(255, 255, 255, 0.96);
-  border-top: 1px solid var(--oc-border, #EBF1F7);
-  z-index: 100;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, #FFFFFF 100%);
+  border-top: 1px solid var(--oc-border, #E3E7ED);
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
+  z-index: 100;
+  backdrop-filter: blur(10px);
 }
 
 .lead-cta-inner {
+  display: flex;
   width: 100%;
-  max-width: 480px;
 }
 
 .primary-cta-btn {
@@ -1068,8 +1296,9 @@ onLoad((options: LeadDetailPageOptions) => {
   min-height: 44px;
   width: 100%;
   border-width: 0;
-  border-radius: var(--oc-radius-pill, 9999px);
+  border-radius: 9999px;
   background-color: var(--oc-primary, #0B5CFF);
+  background-image: var(--oc-primary-gradient, linear-gradient(135deg, #00A3FF 0%, #0B63E5 100%));
   box-shadow: var(--oc-shadow-cta, 0 8px 20px rgba(0, 136, 255, 0.22));
   display: flex;
   align-items: center;
@@ -1083,17 +1312,18 @@ onLoad((options: LeadDetailPageOptions) => {
 
 .primary-cta-btn-disabled {
   background-color: var(--oc-border, #E3E7ED);
+  background-image: none;
   box-shadow: none;
 }
 
 .primary-cta-btn-text {
   color: #FFFFFF;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 700;
 }
 
 .primary-cta-btn-disabled .primary-cta-btn-text {
-  color: var(--oc-text-2, #64748B);
+  color: var(--oc-text-2, #667085);
 }
 
 @media (prefers-reduced-motion: reduce) {