@geminilight/mindos 0.5.64 → 0.5.66

package/app/components/echo/EchoInsightCollapsible.tsx

@@ -103,7 +103,7 @@ export function EchoInsightCollapsible({
   const generateDisabled = aiLoading || !aiReady || streaming;
 
   return (
-    <div className="mt-10 overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/15 hover:shadow-md">
+    <div className="mt-10 overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/15 hover:shadow">
       <button
         id={btnId}
         type="button"
@@ -129,56 +129,65 @@ export function EchoInsightCollapsible({
         />
         <span className="sr-only">{open ? hideLabel : showLabel}</span>
       </button>
-      {open ? (
-        <div
-          id={panelId}
-          role="region"
-          aria-labelledby={btnId}
-          className="border-t border-border/60 px-5 pb-5 pt-4"
-        >
-          <p className="font-sans text-sm leading-relaxed text-muted-foreground">{hint}</p>
-          <div className="mt-4 flex flex-wrap items-center gap-2">
-            <button
-              type="button"
-              disabled={generateDisabled}
-              onClick={runGenerate}
-              className="inline-flex items-center gap-2 rounded-lg bg-[var(--amber)] px-3 py-2 font-sans text-sm font-medium text-white transition-opacity duration-150 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              {streaming ? <Loader2 size={16} className="animate-spin shrink-0" aria-hidden /> : null}
-              {streaming ? generatingLabel : generateLabel}
-            </button>
-            {err ? (
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={btnId}
+        className={cn(
+          'grid transition-[grid-template-rows] duration-250 ease-out',
+          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="border-t border-border/60 px-5 pb-5 pt-4">
+            <p className="font-sans text-sm leading-relaxed text-muted-foreground">{hint}</p>
+            <div className="mt-4 flex flex-wrap items-center gap-2">
               <button
                 type="button"
+                disabled={generateDisabled}
                 onClick={runGenerate}
-                disabled={streaming || !aiReady}
-                className="font-sans text-sm text-[var(--amber)] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+                className="inline-flex items-center gap-2 rounded-lg bg-[var(--amber)] px-3 py-2 font-sans text-sm font-medium text-[var(--amber-foreground)] transition-opacity duration-150 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
-                {retryLabel}
+                {streaming ? (
+                  <Loader2 size={16} className="animate-spin shrink-0" aria-hidden />
+                ) : (
+                  <Sparkles size={15} className="shrink-0" aria-hidden />
+                )}
+                {streaming ? generatingLabel : generateLabel}
               </button>
-            ) : null}
-          </div>
-          {!aiLoading && !aiReady ? (
-            <p className="mt-2 font-sans text-2xs text-muted-foreground">{noAiHint}</p>
-          ) : null}
-          {err ? (
-            <p className="mt-3 font-sans text-sm text-error" role="alert">
-              {errorPrefix} {err}
-            </p>
-          ) : null}
-          {insightMd ? (
-            <div className={cn(proseInsight, 'mt-4 border-t border-border/60 pt-4')}>
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>{insightMd}</ReactMarkdown>
-              {streaming ? (
-                <span
-                  className="ml-0.5 inline-block h-3.5 w-1 animate-pulse rounded-sm bg-[var(--amber)] align-middle"
-                  aria-hidden
-                />
+              {err ? (
+                <button
+                  type="button"
+                  onClick={runGenerate}
+                  disabled={streaming || !aiReady}
+                  className="font-sans text-sm text-[var(--amber)] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+                >
+                  {retryLabel}
+                </button>
               ) : null}
             </div>
-          ) : null}
+            {!aiLoading && !aiReady ? (
+              <p className="mt-2 font-sans text-2xs text-muted-foreground">{noAiHint}</p>
+            ) : null}
+            {err ? (
+              <p className="mt-3 font-sans text-sm text-error" role="alert">
+                {errorPrefix} {err}
+              </p>
+            ) : null}
+            {insightMd ? (
+              <div className={cn(proseInsight, 'mt-4 border-t border-border/60 pt-4')}>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{insightMd}</ReactMarkdown>
+                {streaming ? (
+                  <span
+                    className="ml-0.5 inline-block h-3.5 w-1 animate-pulse rounded-sm bg-[var(--amber)] align-middle"
+                    aria-hidden
+                  />
+                ) : null}
+              </div>
+            ) : null}
+          </div>
         </div>
-      ) : null}
+      </div>
     </div>
   );
 }

package/app/components/echo/EchoPageSections.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { Library } from 'lucide-react';
+import { Library, FileText, CircleCheck } from 'lucide-react';
 
 export function EchoFactSnapshot({
   headingId,
@@ -9,6 +9,7 @@ export function EchoFactSnapshot({
   snapshotBadge,
   emptyTitle,
   emptyBody,
+  icon,
   actions,
 }: {
   headingId: string;
@@ -16,12 +17,12 @@ export function EchoFactSnapshot({
   snapshotBadge: string;
   emptyTitle: string;
   emptyBody: string;
-  /** e.g. continue-in-Agent CTA — inside this card so it is not orphaned between sections */
+  icon?: ReactNode;
   actions?: ReactNode;
 }) {
   return (
     <section
-      className="rounded-xl border border-border bg-card p-5 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/20 hover:shadow-md sm:p-6"
+      className="rounded-xl border border-border bg-card p-5 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/20 hover:shadow sm:p-6"
       aria-labelledby={headingId}
     >
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
@@ -30,7 +31,7 @@ export function EchoFactSnapshot({
             className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--amber-dim)] text-[var(--amber)]"
             aria-hidden
           >
-            <Library size={18} strokeWidth={1.75} />
+            {icon ?? <Library size={18} strokeWidth={1.75} />}
           </span>
           <div>
             <h2
@@ -67,9 +68,12 @@ export function EchoContinuedGroups({
   subEmptyHint: string;
   footer?: ReactNode;
 }) {
-  const cell = (label: string) => (
-    <div className="flex min-h-[5.75rem] flex-col justify-center rounded-xl border border-dashed border-border/80 bg-muted/10 px-4 py-4">
-      <h3 className="font-sans text-sm font-medium text-foreground">{label}</h3>
+  const cell = (label: string, icon: ReactNode) => (
+    <div className="flex min-h-[5.75rem] flex-col justify-center rounded-xl border border-dashed border-border/80 bg-muted/10 px-4 py-4 transition-colors duration-150 hover:border-[var(--amber)]/25 hover:bg-[var(--amber-dim)]/15">
+      <div className="flex items-center gap-2">
+        <span className="shrink-0 text-muted-foreground" aria-hidden>{icon}</span>
+        <h3 className="font-sans text-sm font-medium text-foreground">{label}</h3>
+      </div>
       <p className="mt-2 font-sans text-2xs leading-relaxed text-muted-foreground">{subEmptyHint}</p>
     </div>
   );
@@ -77,8 +81,8 @@ export function EchoContinuedGroups({
   return (
     <div className="space-y-4">
       <div className="grid gap-3 sm:grid-cols-2">
-        {cell(draftsLabel)}
-        {cell(todosLabel)}
+        {cell(draftsLabel, <FileText size={15} strokeWidth={1.75} />)}
+        {cell(todosLabel, <CircleCheck size={15} strokeWidth={1.75} />)}
       </div>
       {footer ? <div className="border-t border-border/60 pt-4">{footer}</div> : null}
     </div>

package/app/components/echo/EchoSegmentNav.tsx

@@ -1,25 +1,27 @@
 'use client';
 
+import type { ReactNode } from 'react';
 import Link from 'next/link';
+import { UserRound, Bookmark, Sun, History, Brain } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { cn } from '@/lib/utils';
 import { ECHO_SEGMENT_HREF, ECHO_SEGMENT_ORDER, type EchoSegment } from '@/lib/echo-segments';
 
-function labelForSegment(
+function segmentMeta(
   segment: EchoSegment,
   echo: ReturnType<typeof useLocale>['t']['panels']['echo'],
-): string {
+): { label: string; icon: ReactNode } {
   switch (segment) {
     case 'about-you':
-      return echo.aboutYouTitle;
+      return { label: echo.aboutYouTitle, icon: <UserRound size={13} /> };
     case 'continued':
-      return echo.continuedTitle;
+      return { label: echo.continuedTitle, icon: <Bookmark size={13} /> };
     case 'daily':
-      return echo.dailyEchoTitle;
+      return { label: echo.dailyEchoTitle, icon: <Sun size={13} /> };
     case 'past-you':
-      return echo.pastYouTitle;
+      return { label: echo.pastYouTitle, icon: <History size={13} /> };
     case 'growth':
-      return echo.intentGrowthTitle;
+      return { label: echo.intentGrowthTitle, icon: <Brain size={13} /> };
   }
 }
 
@@ -29,11 +31,11 @@ export default function EchoSegmentNav({ activeSegment }: { activeSegment: EchoS
   const aria = t.echoPages.segmentNavAria;
 
   return (
-    <nav aria-label={aria} className="mt-6 font-sans">
-      <ul className="-mx-1 flex snap-x snap-mandatory gap-1.5 overflow-x-auto px-1 pb-1 [scrollbar-width:thin]">
+    <nav aria-label={aria} className="mt-5 border-t border-border/30 pt-4 font-sans">
+      <ul className="flex snap-x snap-mandatory gap-1.5 overflow-x-auto pb-0.5 [scrollbar-width:thin]">
         {ECHO_SEGMENT_ORDER.map((segment) => {
           const href = ECHO_SEGMENT_HREF[segment];
-          const label = labelForSegment(segment, echo);
+          const { label, icon } = segmentMeta(segment, echo);
           const isActive = segment === activeSegment;
           return (
             <li key={segment} className="snap-start shrink-0">
@@ -41,12 +43,13 @@ export default function EchoSegmentNav({ activeSegment }: { activeSegment: EchoS
                 href={href}
                 aria-current={isActive ? 'page' : undefined}
                 className={cn(
-                  'inline-flex min-h-9 max-w-[11rem] items-center rounded-full border px-3 py-1.5 text-sm transition-[background-color,border-color,color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  'inline-flex min-h-9 max-w-[11rem] items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-[background-color,border-color,color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                   isActive
                     ? 'border-[var(--amber)]/45 bg-[var(--amber-dim)]/50 font-medium text-foreground'
                     : 'border-transparent bg-muted/35 text-muted-foreground hover:bg-muted/55 hover:text-foreground',
                 )}
               >
+                <span className="shrink-0" aria-hidden>{icon}</span>
                 <span className="truncate">{label}</span>
               </Link>
             </li>

package/app/components/echo/EchoSegmentPageClient.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { ArrowUpRight, Bookmark, Brain, Check, History, Sun, UserRound } from 'lucide-react';
 import type { EchoSegment } from '@/lib/echo-segments';
 import { buildEchoInsightUserPrompt } from '@/lib/echo-insight-prompt';
 import type { Locale, Messages } from '@/lib/i18n';
@@ -44,12 +46,20 @@ function segmentLead(segment: EchoSegment, p: ReturnType<typeof useLocale>['t'][
   }
 }
 
+const SEGMENT_ICON: Record<EchoSegment, ReactNode> = {
+  'about-you': <UserRound size={18} strokeWidth={1.75} />,
+  continued: <Bookmark size={18} strokeWidth={1.75} />,
+  daily: <Sun size={18} strokeWidth={1.75} />,
+  'past-you': <History size={18} strokeWidth={1.75} />,
+  growth: <Brain size={18} strokeWidth={1.75} />,
+};
+
 const fieldLabelClass =
   'block font-sans text-2xs font-semibold uppercase tracking-wide text-muted-foreground';
 const inputClass =
-  'mt-2 w-full min-h-[5rem] resize-y rounded-lg border border-border bg-background px-3 py-2.5 font-sans text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+  'mt-2 w-full min-h-[5rem] resize-y rounded-lg border border-border bg-background px-3 py-2.5 font-sans text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-[var(--amber)]/40';
 const cardSectionClass =
-  'rounded-xl border border-border bg-card p-5 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/20 hover:shadow-md sm:p-6';
+  'rounded-xl border border-border bg-card p-5 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--amber)]/20 hover:shadow sm:p-6';
 
 function echoSnapshotCopy(segment: EchoSegment, p: Messages['echoPages']): { title: string; body: string } {
   switch (segment) {
@@ -77,6 +87,15 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
 
   const [dailyLine, setDailyLine] = useState('');
   const [growthIntent, setGrowthIntent] = useState('');
+  const [dailySaved, setDailySaved] = useState(false);
+  const [growthSaved, setGrowthSaved] = useState(false);
+  const dailySavedTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const growthSavedTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => () => {
+    clearTimeout(dailySavedTimer.current);
+    clearTimeout(growthSavedTimer.current);
+  }, []);
 
   const snapshot = useMemo(() => echoSnapshotCopy(segment, p), [segment, p]);
 
@@ -97,6 +116,9 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
     } catch {
       /* ignore */
     }
+    clearTimeout(dailySavedTimer.current);
+    setDailySaved(true);
+    dailySavedTimer.current = setTimeout(() => setDailySaved(false), 1800);
   }, [dailyLine]);
 
   const persistGrowth = useCallback(() => {
@@ -105,6 +127,9 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
     } catch {
       /* ignore */
     }
+    clearTimeout(growthSavedTimer.current);
+    setGrowthSaved(true);
+    growthSavedTimer.current = setTimeout(() => setGrowthSaved(false), 1800);
   }, [growthIntent]);
 
   const openDailyAsk = useCallback(() => {
@@ -150,7 +175,14 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
   );
 
   const secondaryBtnClass =
-    'inline-flex items-center rounded-lg border border-border bg-background px-4 py-2.5 font-sans text-sm font-medium text-foreground transition-colors duration-150 hover:border-[var(--amber)]/35 hover:bg-[var(--amber-dim)]/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+    'inline-flex items-center gap-1.5 rounded-lg border border-border bg-background px-4 py-2.5 font-sans text-sm font-medium text-foreground transition-colors duration-150 hover:border-[var(--amber)]/35 hover:bg-[var(--amber-dim)]/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+
+  const agentBtn = (onClick: () => void) => (
+    <button type="button" onClick={onClick} className={secondaryBtnClass}>
+      {p.continueAgent}
+      <ArrowUpRight size={14} className="shrink-0 text-muted-foreground" aria-hidden />
+    </button>
+  );
 
   return (
     <article
@@ -158,16 +190,13 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
       aria-labelledby={pageTitleId}
     >
       <EchoHero
-        breadcrumbNav={p.breadcrumbNav}
-        parentHref="/echo/about-you"
-        parent={p.parent}
         heroKicker={p.heroKicker}
         pageTitle={title}
         lead={lead}
         titleId={pageTitleId}
-      />
-
-      <EchoSegmentNav activeSegment={segment} />
+      >
+        <EchoSegmentNav activeSegment={segment} />
+      </EchoHero>
 
       <div className="mt-6 space-y-6 sm:mt-8">
         <EchoFactSnapshot
@@ -176,24 +205,15 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
           snapshotBadge={p.snapshotBadge}
           emptyTitle={snapshot.title}
           emptyBody={snapshot.body}
-          actions={
-            segment === 'about-you' ? (
-              <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
-                {p.continueAgent}
-              </button>
-            ) : undefined
-          }
+          icon={SEGMENT_ICON[segment]}
+          actions={segment === 'about-you' ? agentBtn(openSegmentAsk) : undefined}
         />
         {segment === 'continued' ? (
           <EchoContinuedGroups
             draftsLabel={p.continuedDrafts}
             todosLabel={p.continuedTodos}
             subEmptyHint={p.subEmptyHint}
-            footer={
-              <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
-                {p.continueAgent}
-              </button>
-            }
+            footer={agentBtn(openSegmentAsk)}
           />
         ) : null}
       </div>
@@ -212,11 +232,14 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
             placeholder={p.dailyLinePlaceholder}
             className={inputClass}
           />
-          <p className="mt-3 font-sans text-2xs text-muted-foreground">{p.dailySavedNote}</p>
+          <p className="mt-3 flex items-center gap-2 font-sans text-2xs text-muted-foreground">
+            <span>{p.dailySavedNote}</span>
+            <span className="inline-flex items-center gap-1 text-[var(--success)]" aria-live="polite">
+              {dailySaved ? <><Check size={12} aria-hidden /> {p.savedFlash}</> : null}
+            </span>
+          </p>
           <div className="mt-4">
-            <button type="button" onClick={openDailyAsk} className={secondaryBtnClass}>
-              {p.continueAgent}
-            </button>
+            {agentBtn(openDailyAsk)}
           </div>
         </section>
       ) : null}
@@ -235,31 +258,29 @@ export default function EchoSegmentPageClient({ segment }: { segment: EchoSegmen
             placeholder={p.growthIntentPlaceholder}
             className={`${inputClass} min-h-[6.5rem]`}
           />
-          <p className="mt-3 font-sans text-2xs text-muted-foreground">{p.growthSavedNote}</p>
+          <p className="mt-3 flex items-center gap-2 font-sans text-2xs text-muted-foreground">
+            <span>{p.growthSavedNote}</span>
+            <span className="inline-flex items-center gap-1 text-[var(--success)]" aria-live="polite">
+              {growthSaved ? <><Check size={12} aria-hidden /> {p.savedFlash}</> : null}
+            </span>
+          </p>
           <div className="mt-4 border-t border-border/60 pt-4">
-            <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
-              {p.continueAgent}
-            </button>
+            {agentBtn(openSegmentAsk)}
           </div>
         </section>
       ) : null}
 
       {segment === 'past-you' ? (
         <section className={`${cardSectionClass} mt-6`}>
-          <label className={fieldLabelClass}>{p.pastYouDrawLabel}</label>
-          <button
-            type="button"
-            disabled
-            title={p.pastYouDisabledHint}
-            className="mt-2 inline-flex cursor-not-allowed items-center rounded-lg border border-dashed border-border bg-muted/20 px-4 py-2.5 font-sans text-sm text-muted-foreground opacity-85"
-          >
-            {p.pastYouAnother}
-          </button>
-          <p className="mt-3 font-sans text-2xs text-muted-foreground">{p.pastYouDisabledHint}</p>
+          <div className="flex items-center gap-3">
+            <span className={fieldLabelClass}>{p.pastYouDrawLabel}</span>
+            <span className="rounded-full bg-muted px-2 py-0.5 font-sans text-2xs font-medium text-muted-foreground">
+              {p.pastYouComingSoon}
+            </span>
+          </div>
+          <p className="mt-3 font-sans text-sm leading-relaxed text-muted-foreground">{p.pastYouDisabledHint}</p>
           <div className="mt-4 border-t border-border/60 pt-4">
-            <button type="button" onClick={openSegmentAsk} className={secondaryBtnClass}>
-              {p.continueAgent}
-            </button>
+            {agentBtn(openSegmentAsk)}
           </div>
         </section>
       ) : null}

package/app/components/explore/ExploreContent.tsx

@@ -31,17 +31,13 @@ export default function ExploreContent() {
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 mb-3">
-          <div className="w-1 h-5 rounded-full" style={{ background: 'var(--amber)' }} />
-          <h1
-            className="text-2xl font-semibold tracking-tight font-display"
-            style={{ color: 'var(--foreground)' }}
-          >
+          <div className="w-1 h-5 rounded-full bg-[var(--amber)]" />
+          <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">
             {e.title}
           </h1>
         </div>
         <p
-          className="text-sm leading-relaxed"
-          style={{ color: 'var(--muted-foreground)', paddingLeft: '1rem' }}
+          className="text-sm leading-relaxed text-muted-foreground pl-4"
         >
           {e.subtitle}
         </p>

package/app/components/explore/UseCaseCard.tsx

@@ -13,35 +13,24 @@ interface UseCaseCardProps {
 export default function UseCaseCard({ icon, title, description, prompt, tryItLabel }: UseCaseCardProps) {
   return (
     <div
-      className="group flex flex-col gap-3 p-4 rounded-xl border transition-all duration-150 hover:border-amber-500/30 hover:bg-muted/50"
-      style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
+      className="group flex flex-col gap-3 p-4 rounded-xl border border-border bg-card transition-all duration-150 hover:border-[var(--amber)]/30 hover:bg-muted/50"
     >
       <div className="flex items-start gap-3">
         <span className="text-xl leading-none shrink-0 mt-0.5" suppressHydrationWarning>
           {icon}
         </span>
         <div className="flex-1 min-w-0">
-          <h3
-            className="text-sm font-semibold font-display truncate"
-            style={{ color: 'var(--foreground)' }}
-          >
+          <h3 className="text-sm font-semibold font-display truncate text-foreground">
             {title}
           </h3>
-          <p
-            className="text-xs leading-relaxed mt-1 line-clamp-2"
-            style={{ color: 'var(--muted-foreground)' }}
-          >
+          <p className="text-xs leading-relaxed mt-1 line-clamp-2 text-muted-foreground">
             {description}
           </p>
         </div>
       </div>
       <button
         onClick={() => openAskModal(prompt, 'user')}
-        className="self-start inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 hover:opacity-80 cursor-pointer"
-        style={{
-          background: 'var(--amber-dim)',
-          color: 'var(--amber)',
-        }}
+        className="self-start inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 hover:opacity-80 cursor-pointer bg-[var(--amber-dim)] text-[var(--amber)]"
       >
         {tryItLabel} →
       </button>