UI polish: hover lift, skeleton loaders, empty states, badge contrast, transitions

Card & row interactions:
- NoteCard, TaskCard, ProjectCard: translateY(-2px) lift on hover + extended transitions
- Kanban task cards (ProjectView), note rows: same lift treatment
- Task rows in flat/grouped list: soft indigo bg tint on hover
- Chat conversation items: left-border accent + bg tint on hover (was border-only)
- HomeView project mini-cards: translateY(-2px) lift on hover

Global feedback:
- Buttons: scale(0.97) on :active press (theme.css, :not(:disabled) scoped)
- TagPill: color → primary + indigo bg tint on hover
- StatusBadge: increased opacity 15% → 22% + stronger text color for readability

Loading & empty states:
- TasksListView: shimmer skeleton loader (6 rows) + rich empty state with CTA
- ProjectListView: shimmer skeleton cards (4) + rich empty state with CTA
- HomeView: section-empty messages for overdue/high-priority/notes sections
- ProjectView kanban columns: dashed-border styled empty state

Transitions & graph:
- WorkspaceView panels: panel-fade opacity transition on show/hide (v-if inner wrap)
- GraphView D3 nodes: grow to r*1.3 + bold label on mouseover (150ms transition)
- Milestone action buttons: base opacity 0 → 0.35 for discoverability

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/views/TasksListView.vue

@@ -247,7 +247,9 @@ function toggleGroup(key: string) {
       <button class="clear-filters" @click="store.clearTagFilters()">Clear all</button>
     </div>
 
-    <p v-if="store.loading">Loading...</p>
+    <div v-if="store.loading" class="task-list-skeleton">
+      <div class="skeleton-row" v-for="i in 6" :key="i"></div>
+    </div>
 
     <div v-else-if="store.tasks.length === 0" class="empty-state">
       <template v-if="store.searchQuery || store.activeTagFilters.length || store.statusFilter || store.priorityFilter">
@@ -255,9 +257,12 @@ function toggleGroup(key: string) {
         <p class="empty-subtitle">Try adjusting your search or removing filters.</p>
       </template>
       <template v-else>
-        <p class="empty-title">No tasks yet</p>
-        <p class="empty-subtitle">Create your first task to get started.</p>
-        <router-link to="/tasks/new" class="btn-cta">+ New Task</router-link>
+        <div class="empty-state-rich">
+          <div class="empty-icon">✓</div>
+          <p class="empty-title">No tasks yet</p>
+          <p class="empty-sub">Create your first task to start tracking work</p>
+          <router-link to="/tasks/new" class="empty-action">New task →</router-link>
+        </div>
       </template>
     </div>
 
@@ -426,6 +431,23 @@ function toggleGroup(key: string) {
   padding: 0;
 }
 
+/* Skeleton loading */
+.task-list-skeleton {
+  margin-top: 1rem;
+}
+.skeleton-row {
+  height: 44px;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s ease infinite;
+  margin-bottom: 0.3rem;
+}
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
 /* Flat compact list */
 .cards-list {
   display: flex;
@@ -433,6 +455,13 @@ function toggleGroup(key: string) {
   gap: 0.3rem;
   margin-top: 1rem;
 }
+.cards-list > div {
+  border-radius: var(--radius-sm, 6px);
+  transition: background 0.15s;
+}
+.cards-list > div:hover {
+  background: rgba(99,102,241,0.05);
+}
 
 /* Grouped view */
 .task-group {
@@ -513,6 +542,40 @@ function toggleGroup(key: string) {
   text-decoration: none;
   font-size: 0.9rem;
 }
+.empty-state-rich {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--color-text-muted);
+}
+.empty-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.3;
+}
+.empty-state-rich .empty-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  margin: 0 0 0.35rem;
+}
+.empty-sub {
+  font-size: 0.85rem;
+  margin: 0 0 1rem;
+}
+.empty-action {
+  display: inline-block;
+  padding: 0.4rem 1rem;
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-sm);
+  color: var(--color-primary);
+  text-decoration: none;
+  font-size: 0.85rem;
+  transition: background 0.15s, color 0.15s;
+}
+.empty-action:hover {
+  background: var(--color-primary);
+  color: #fff;
+}
 
 .kb-active-item {
   outline: 2px solid var(--color-primary);