feat: update Makelore modules and conversations

src/styles/globals.css

@@ -17,7 +17,7 @@
  *      Radix-driven components read these directly.
  *
  *   2. Makelore surface tokens (--surface-modal / --surface-input /
- *      --surface-sidebar), using white and low-saturation blue-gray layers.
+ *      --surface-sidebar), using white and neutral layers.
  *
  * Usage:
  *   - Application code should always go through Tailwind utilities, e.g.
@@ -31,30 +31,41 @@
   :root {
     /* ── shadcn semantic tokens ─────────────────────────────────── */
     --background: 0 0% 100%;
-    --foreground: 213 34% 23%;
+    --foreground: 220 20% 16%;
     --card: 0 0% 100%;
-    --card-foreground: 213 34% 23%;
+    --card-foreground: 220 20% 16%;
     --popover: 0 0% 100%;
-    --popover-foreground: 213 34% 23%;
-    --primary: 214 35% 35%;
+    --popover-foreground: 220 20% 16%;
+    --primary: 15 82% 45%;
     --primary-foreground: 0 0% 100%;
-    --secondary: 210 38% 94%;
-    --secondary-foreground: 213 34% 23%;
-    --muted: 207 36% 95%;
-    --muted-foreground: 213 14% 48%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 220 20% 16%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 220 9% 45%;
     --accent: 15 87% 59%;
     --accent-foreground: 0 0% 100%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-    --border: 210 26% 88%;
-    --input: 210 26% 88%;
-    --ring: 214 35% 35%;
-    --radius: 0.75rem;
+    --border: 220 13% 89%;
+    --input: 220 13% 86%;
+    --ring: 15 82% 45%;
+    --radius: 0.875rem;
+
+    /* ── Makelore brand tokens ─────────────────────────────────── */
+    --brand: 15 82% 45%;
+    --brand-hover: 15 84% 38%;
+    --brand-soft: 15 88% 95%;
+    --brand-quiet: 15 52% 58%;
+    --brand-blue: 213 34% 35%;
+    --accent-soft: 15 88% 95%;
+    --accent-strong: 15 82% 45%;
 
     /* ── Makelore layered surfaces ─────────────────────────────── */
     --surface-modal: 0 0% 100%;
-    --surface-input: 210 29% 97%;
-    --surface-sidebar: 207 26% 96%;
+    --surface-input: 0 0% 98%;
+    --surface-sidebar: 0 0% 98%;
+    --surface-subtle: 0 0% 97%;
+    --surface-tertiary: 0 0% 95%;
   }
 }
 
@@ -65,7 +76,21 @@
 
   body {
     @apply bg-background text-foreground;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     font-feature-settings: "rlig" 1, "calt" 1;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  :where(h1, h2, h3, h4, p) {
+    text-wrap: pretty;
   }
 }
 
@@ -121,12 +146,174 @@
 
 /* Smooth transitions */
 .transition-theme {
-  @apply transition-colors duration-200;
+  @apply transition-colors ease-out;
+  transition-duration: 220ms;
 }
 
 /* Focus ring */
 .focus-ring {
-  @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
+  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-2;
+}
+
+/* White materials and shadows form hierarchy without hard borders. */
+.glass-surface {
+  background-color: hsl(var(--background) / 0.78);
+  -webkit-backdrop-filter: blur(18px) saturate(135%);
+  backdrop-filter: blur(18px) saturate(135%);
+}
+
+.surface-card {
+  background-color: hsl(var(--card));
+  box-shadow: 0 1px 2px hsl(220 20% 16% / 0.035), 0 12px 30px hsl(220 20% 16% / 0.045);
+}
+
+/* Conversation canvas surfaces: keep the transcript quiet and let the
+ * composer carry the only strong elevation in the chat view. */
+.chat-composer-surface {
+  background-color: hsl(var(--background) / 0.94);
+  border-color: hsl(var(--border) / 0.72);
+  border-radius: 1rem;
+  box-shadow: 0 10px 28px hsl(220 20% 16% / 0.075), 0 1px 4px hsl(220 20% 16% / 0.04);
+  -webkit-backdrop-filter: blur(16px) saturate(130%);
+  backdrop-filter: blur(16px) saturate(130%);
+}
+
+.chat-empty-state {
+  min-height: min(52vh, 32rem);
+}
+
+.chat-user-message-surface {
+  background-color: hsl(var(--surface-tertiary));
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.chat-assistant-message-surface {
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
+/* Execution traces are secondary context: reveal them with a short, quiet
+ * transition so the final answer remains the visual anchor of a turn. */
+.execution-trace-content,
+.execution-trace-detail {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
+  @starting-style {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+.execution-trace-live-dot {
+  display: inline-block;
+  width: 0.375rem;
+  height: 0.375rem;
+  flex: 0 0 auto;
+  border-radius: 9999px;
+  background-color: hsl(var(--brand));
+  box-shadow: 0 0 0 3px hsl(var(--brand) / 0.12);
+}
+
+.motion-press {
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
+  transition-duration: 220ms;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.motion-press:active {
+  transform: scale(0.985);
+}
+
+/* Adapted from Uiverse.io card by Pravins01 (odd-fly-66). The card keeps the
+ * original pseudo-element rotation and blur animation, with Makelore colors. */
+.module-option-card {
+  position: relative;
+  z-index: 0;
+  overflow: visible;
+}
+
+.module-option-card-surface {
+  border: 1px solid hsl(var(--border) / 0.75);
+  box-shadow: 0 1px 2px hsl(220 20% 16% / 0.035), 0 12px 30px hsl(220 20% 16% / 0.045);
+}
+
+.module-option-card::before {
+  position: absolute;
+  inset: 0;
+  left: -5px;
+  z-index: -10;
+  content: '';
+  width: 200px;
+  height: 264px;
+  margin: auto;
+  border-radius: 10px;
+  background: linear-gradient(-45deg, hsl(var(--brand)) 0%, hsl(var(--brand-blue)) 100%);
+  pointer-events: none;
+  transition: transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.module-option-card::after {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  content: '';
+  background: linear-gradient(-45deg, hsl(var(--brand)) 0%, hsl(var(--brand-blue)) 100%);
+  transform: translate3d(0, 0, 0) scale(0.95);
+  filter: blur(20px);
+  pointer-events: none;
+}
+
+.module-option-card:hover::after,
+.module-option-card:focus-visible::after {
+  filter: blur(30px);
+}
+
+.module-option-card.module-option-card-disabled::before,
+.module-option-card.module-option-card-disabled::after {
+  background: hsl(var(--muted-foreground) / 0.28);
+  filter: none;
+}
+
+.module-option-card.module-option-card-disabled:hover::before,
+.module-option-card.module-option-card-disabled:focus-visible::before {
+  transform: none;
+}
+
+.module-option-card.module-option-card-disabled:hover::after,
+.module-option-card.module-option-card-disabled:focus-visible::after {
+  filter: none;
+}
+
+.module-option-card:hover::before,
+.module-option-card:focus-visible::before {
+  transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
+}
+
+.brand-spark {
+  transform-origin: center;
+  animation: brand-spark-pop 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes brand-spark-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.55) rotate(-10deg);
+  }
+
+  55% {
+    opacity: 1;
+    transform: scale(1.12) rotate(4deg);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
 }
 
 /* Prose styling for markdown */
@@ -222,9 +409,41 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .motion-press:active {
+    transform: none;
+  }
+
+  .module-option-card::before {
+    transform: none;
+  }
+
+  .module-option-card:hover::after,
+  .module-option-card:focus-visible::after {
+    filter: blur(20px);
+  }
+
+  .brand-spark {
+    animation: none;
+  }
+
   .voice-waveform-bar {
     animation: none;
     opacity: 0.85;
     transform: scaleY(1);
   }
+
+  .execution-trace-content,
+  .execution-trace-detail {
+    transition: none;
+    transform: none;
+  }
 }