diff --git a/frontend/src/components/ChatInputBar.vue b/frontend/src/components/ChatInputBar.vue
index da56ec4..96a8927 100644
--- a/frontend/src/components/ChatInputBar.vue
+++ b/frontend/src/components/ChatInputBar.vue
@@ -391,7 +391,7 @@ defineExpose({ focus, prefill })
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   border: none;
   border-radius: 50%;
@@ -400,7 +400,7 @@ defineExpose({ focus, prefill })
   flex-shrink: 0;
   transition: box-shadow 0.15s;
 }
-.btn-send:hover { box-shadow: 0 0 12px rgba(99, 102, 241, 0.5); }
+.btn-send:hover { box-shadow: 0 0 16px rgba(124, 58, 237, 0.35); }
 .btn-send:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
 
 .btn-abort-inline {
diff --git a/frontend/src/components/ChatPanel.vue b/frontend/src/components/ChatPanel.vue
index 48c05e2..59772be 100644
--- a/frontend/src/components/ChatPanel.vue
+++ b/frontend/src/components/ChatPanel.vue
@@ -338,7 +338,7 @@ defineExpose({ focus, prefill, send })
           <p
             v-if="!store.currentConversation?.messages.length && !store.streaming"
             class="empty-msg"
-          >Send a message to start the conversation.</p>
+          >Start a conversation.</p>
         </div>
       </div>
 
@@ -525,6 +525,8 @@ defineExpose({ focus, prefill, send })
   flex: 1;
   overflow-y: auto;
   padding: 1rem;
+  mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
 }
 .messages-inner {
   display: flex;
@@ -746,6 +748,9 @@ defineExpose({ focus, prefill, send })
   font-size: 0.9rem;
   text-align: center;
   padding: 2rem 1rem;
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  color: var(--color-accent-warm, #d4a017);
 }
 
 /* ── Widget variant ── */
diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index 45561b8..8f7f090 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -696,17 +696,17 @@ onUnmounted(() => {
   gap: 5px;
   padding: 3px 10px;
   border-radius: 20px;
-  background: rgba(99, 102, 241, 0.1);
-  border: 1px solid rgba(99, 102, 241, 0.2);
+  background: rgba(124, 58, 237, 0.1);
+  border: 1px solid rgba(124, 58, 237, 0.2);
   color: var(--color-text);
   text-decoration: none;
   transition: background 0.15s;
 }
-.today-event-chip:hover { background: rgba(99, 102, 241, 0.18); }
+.today-event-chip:hover { background: rgba(124, 58, 237, 0.18); }
 .chip-dot {
   width: 6px; height: 6px;
   border-radius: 50%;
-  background: #6366f1;
+  background: #7c3aed;
   flex-shrink: 0;
 }
 .chip-date { color: var(--color-muted); font-size: 0.78rem; }
@@ -721,7 +721,7 @@ onUnmounted(() => {
   font-size: 0.78rem;
 }
 .today-link {
-  color: var(--color-primary, #6366f1);
+  color: var(--color-primary, #7c3aed);
   text-decoration: none;
   font-weight: 500;
   opacity: 0.85;
@@ -775,23 +775,23 @@ onUnmounted(() => {
   flex: 1;
   padding: 7px 10px;
   border-radius: 8px;
-  border: 1px solid rgba(99, 102, 241, 0.4);
-  background: rgba(99, 102, 241, 0.12);
-  color: var(--color-primary, #818cf8);
+  border: 1px solid rgba(124, 58, 237, 0.4);
+  background: rgba(124, 58, 237, 0.12);
+  color: var(--color-primary, #a78bfa);
   cursor: pointer;
   font-size: 0.85rem;
   font-weight: 500;
   text-align: left;
   transition: background 0.15s;
 }
-.btn-new-note:hover { background: rgba(99, 102, 241, 0.2); }
+.btn-new-note:hover { background: rgba(124, 58, 237, 0.2); box-shadow: 0 0 12px rgba(124, 58, 237, 0.25); }
 .new-note-menu {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   right: 0;
   background: var(--color-bg-tertiary, #1a1b1e);
-  border: 1px solid rgba(99, 102, 241, 0.3);
+  border: 1px solid rgba(124, 58, 237, 0.3);
   border-radius: 8px;
   overflow: hidden;
   z-index: 50;
@@ -809,7 +809,7 @@ onUnmounted(() => {
   text-align: left;
   transition: background 0.12s;
 }
-.new-note-menu button:hover { background: rgba(99, 102, 241, 0.12); }
+.new-note-menu button:hover { background: rgba(124, 58, 237, 0.12); }
 
 .filter-btn {
   display: flex;
@@ -830,8 +830,8 @@ onUnmounted(() => {
 }
 .filter-btn:hover { background: rgba(255,255,255,0.05); opacity: 1; }
 .filter-btn.active {
-  background: rgba(99, 102, 241, 0.15);
-  color: var(--color-primary, #818cf8);
+  background: rgba(124, 58, 237, 0.15);
+  color: var(--color-primary, #a78bfa);
   opacity: 1;
 }
 .filter-btn-label { flex: 1; }
@@ -847,8 +847,8 @@ onUnmounted(() => {
   flex-shrink: 0;
 }
 .filter-btn.active .filter-count {
-  background: rgba(99, 102, 241, 0.2);
-  color: var(--color-primary, #818cf8);
+  background: rgba(124, 58, 237, 0.2);
+  color: var(--color-primary, #a78bfa);
 }
 .filter-tag { font-size: 0.78rem; }
 
@@ -893,7 +893,7 @@ onUnmounted(() => {
   outline: none;
   transition: border-color 0.15s;
 }
-.search-input:focus { border-color: var(--color-primary, #6366f1); }
+.search-input:focus { border-color: var(--color-primary, #7c3aed); }
 .sort-select {
   padding: 7px 10px;
   border-radius: 8px;
@@ -920,9 +920,9 @@ onUnmounted(() => {
 }
 .btn-graph:hover { color: var(--color-text); border-color: rgba(255,255,255,0.2); }
 .btn-graph.active {
-  background: rgba(99, 102, 241, 0.15);
-  border-color: rgba(99, 102, 241, 0.35);
-  color: var(--color-primary, #818cf8);
+  background: rgba(124, 58, 237, 0.15);
+  border-color: rgba(124, 58, 237, 0.35);
+  color: var(--color-primary, #a78bfa);
 }
 
 /* ── Card grid ───────────────────────────────────────────── */
@@ -1016,7 +1016,7 @@ onUnmounted(() => {
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-.badge--note   { background: rgba(99,102,241,0.15); color: #818cf8; }
+.badge--note   { background: rgba(99,102,241,0.15); color: #a78bfa; }
 .badge--person { background: rgba(16,185,129,0.15); color: #34d399; }
 .badge--place  { background: rgba(245,158,11,0.15); color: #fbbf24; }
 .badge--list   { background: rgba(56,189,248,0.15); color: #7dd3fc; }