feat(poster): fix 3d poster bugs and add 1-click google trending search loader

style.css

@@ -513,6 +513,8 @@ body {
 /* Canvas Wrapper */
 .canvas-wrapper {
   width: 100%;
+  max-width: 520px;
+  margin: 0 auto;
   aspect-ratio: 1/1;
   border-radius: var(--radius-lg);
   overflow: hidden;
@@ -522,17 +524,57 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.3s ease;
 }
 
 .canvas-wrapper.aspect-reels {
   aspect-ratio: 9/16;
-  max-height: 520px;
+  max-width: 320px;
+  max-height: 570px;
 }
 
 .canvas-wrapper canvas {
   width: 100%;
   height: 100%;
   object-fit: contain;
+  display: block;
+}
+
+/* Trending Poster Chips */
+.trending-chips-bar {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 4px 2px 8px;
+  scrollbar-width: none;
+}
+.trending-chips-bar::-webkit-scrollbar {
+  display: none;
+}
+.trend-chip {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-full);
+  padding: 6px 12px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.trend-chip:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.trend-chip.active {
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(59, 130, 246, 0.35));
+  border-color: var(--primary);
+  color: #FFFFFF;
 }
 
 /* Result Card */