feat(chat): simplify teacher pane and color follow-up cards

src/pages/Chat/TeacherChatPanel.tsx

@@ -374,12 +374,8 @@ export function TeacherChatPanel({
   const questions = definition?.suggested_questions ?? [];
   return (
     <aside className="consultation-pane flex h-full min-h-0 w-full flex-col"
-      data-testid="teacher-chat-panel" aria-label={`${label}聊天`}>
-      <header className="consultation-header flex h-[68px] shrink-0 items-center gap-3 px-5">
-        <TeacherAvatar className="consultation-avatar h-9 w-9 rounded-xl" definition={definition} />
-        <div className="min-w-0 flex-1"><h2 className="truncate text-sm font-semibold">{definition?.name ?? '智能体'}</h2>
-          {draftRevision && <p className="mt-1 text-[11px] text-muted-foreground">运营草稿试聊</p>}</div>
-      </header>
+      data-testid="teacher-chat-panel" aria-label={`${definition?.name ?? label}咨询`}>
+      {Boolean(draftRevision) && <p className="px-5 pt-3 text-[11px] text-muted-foreground">运营草稿试聊</p>}
       {(topics.items.length > 0 || draftRevision) && <div className="px-5 pt-2">
         <button className="text-[11px] text-muted-foreground" onClick={() => setHistoryOpen(!historyOpen)} aria-expanded={historyOpen}>以往讨论 <ChevronDown className="inline h-3 w-3" /></button>
         {(historyOpen || draftRevision) && <div className="mt-2 flex gap-2">
@@ -424,16 +420,16 @@ export function TeacherChatPanel({
               ? <p role="status" className="flex items-center gap-2 text-[13px] leading-7 text-muted-foreground"><Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />我看看你最近做到了哪里…</p>
               : request.status === 'completed' && <>
                 <TeacherReply text={request.response} />
-                <div className="flex flex-col gap-2" aria-label="可以和智能体聊的问题">
-                  {request.suggestedQuestions?.map((question) => <button key={question} type="button" disabled={helpUnavailable} onClick={() => void send({ text: question })} className="consultation-suggestion flex min-h-11 items-center justify-between gap-3 rounded-xl border bg-white px-3 py-3 text-left text-[13px] leading-6 transition-colors disabled:cursor-not-allowed disabled:opacity-50">{question}<ChevronRight className="h-3.5 w-3.5 shrink-0 opacity-60" /></button>)}
+                <div className="consultation-follow-ups" aria-label="可以和智能体聊的问题">
+                  {request.suggestedQuestions?.map((question) => <button key={question} type="button" disabled={helpUnavailable} onClick={() => void send({ text: question })} className="consultation-follow-up"><span className="min-w-0 flex-1">{question}</span><ChevronRight className="h-4 w-4 shrink-0 opacity-70" aria-hidden="true" /></button>)}
                 </div>
                 <button type="button" disabled={helpUnavailable} onClick={askForGuidance} className="consultation-guided-help min-h-10 text-left text-xs leading-6 underline decoration-current/30 underline-offset-4 disabled:cursor-not-allowed disabled:opacity-50">我也说不清，你带我看看</button>
                 <p className="text-[11px] leading-5 text-muted-foreground">也可以直接在下面说说你的想法。</p>
               </>}
             {['failed', 'cancelled', 'interrupted'].includes(request.status) && <button type="button" disabled={helpUnavailable} onClick={askForSuggestions} className="consultation-guided-help min-h-10 text-xs underline underline-offset-4 disabled:opacity-50">再请智能体看看</button>}
           </> : request.response ? <TeacherReply text={request.response} /> : <div className="text-[13px] leading-7">{['running', 'preparing'].includes(request.status) ? <span role="status" className="inline-flex items-center gap-2 text-muted-foreground"><Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />{request.discussionContext ? '正在梳理你的新想法…' : `${label}正在想…`}</span> : ['cancelled', 'interrupted'].includes(request.status) ? '这次先停在这里。想继续时可以再说说。' : ''}</div>}
-          {discussionEnabled && request.intent !== 'suggestions' && request.status === 'completed' && topic.discussion?.status !== 'active' && topic.discussion?.status !== 'offered' && Boolean(request.suggestedQuestions?.length) && <div className="flex flex-col gap-2" aria-label="接着聊">
-            {request.suggestedQuestions?.map(question => <button type="button" key={question} disabled={helpUnavailable} onClick={() => void send({ text: question })} className="consultation-suggestion rounded-xl border px-3 py-2 text-left text-xs leading-6">{question}<ChevronRight className="ml-1 inline h-3 w-3" /></button>)}
+          {discussionEnabled && request.intent !== 'suggestions' && request.status === 'completed' && topic.discussion?.status !== 'active' && topic.discussion?.status !== 'offered' && Boolean(request.suggestedQuestions?.length) && <div className="consultation-follow-ups" aria-label="接着聊">
+            {request.suggestedQuestions?.map(question => <button type="button" key={question} disabled={helpUnavailable} onClick={() => void send({ text: question })} className="consultation-follow-up"><span className="min-w-0 flex-1">{question}</span><ChevronRight className="h-4 w-4 shrink-0 opacity-70" aria-hidden="true" /></button>)}
           </div>}
           {request.discussionError && <p className="text-xs leading-6 text-muted-foreground">{request.discussionError}</p>}
           {request.unparsedResponse && <details className="min-w-0 text-xs text-muted-foreground">

src/pages/Chat/classroom-workspace.css

@@ -49,23 +49,27 @@
 .classroom-consultation-resizer { position: absolute; inset: 0 auto 0 -4px; width: 8px; z-index: 2; cursor: col-resize; }
 .classroom-consultation-resizer:hover, .classroom-consultation-resizer:focus-visible { background: #7994b533; }
 .consultation-pane { background: #fffdf8; color: #30465f; }
-.classroom-workspace .consultation-header { height: 78px; padding: 12px 15px; gap: 10px; border-bottom: 1px solid #eddbb2; background: #fff4d9; }
-.classroom-workspace .consultation-avatar { width: 44px; height: 44px; flex-shrink: 0; border: 2px solid white; border-radius: 11px; box-shadow: 0 3px 0 #e3cea2; }
 .consultation-help-prompt, .consultation-guided-help { color: #536747; }
 .consultation-help-prompt { background: #f1f5ea; border: 1px solid #dfe7d5; }
 .consultation-help-prompt:hover:not(:disabled) { background: #e6eedc; border-color: #bacba8; }
 .consultation-pane button:focus-visible { outline: 2px solid #71845f; outline-offset: 3px; }
 .consultation-suggestion { border-color: #e0e6d6; color: #718163; }
 .consultation-suggestion:hover { border-color: #bac9aa; background: #f4f7ee; }
+.consultation-follow-ups { display: flex; flex-direction: column; gap: 10px; }
+.consultation-follow-up { --card-background: #eef5ff; --card-hover: #e2edfc; --card-border: #d3e3f7; display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--card-background); color: #344963; font-size: 16px; line-height: 1.8; text-align: left; overflow-wrap: anywhere; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; }
+.consultation-follow-up:nth-child(3n + 2) { --card-background: #fff4dc; --card-hover: #ffedc5; --card-border: #eeddb5; }
+.consultation-follow-up:nth-child(3n + 3) { --card-background: #f3edfc; --card-hover: #eae0f8; --card-border: #e2d7f2; }
+.consultation-follow-up:hover:not(:disabled) { background: var(--card-hover); }
+.consultation-follow-up:disabled { cursor: not-allowed; opacity: 0.5; }
+.consultation-pane .consultation-follow-up:focus-visible { outline-color: #6683a5; }
 .consultation-user { background: #eaf0e1; }
 .consultation-composer { border-color: #dce3d3; }
 .consultation-send { background: #536947; }
-.consult-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: #8c9781; }
-.consult-icon:hover { background: #eaf0e1; color: #45563b; }
 @media (max-width: 1100px) { .classroom-tabs { padding-left: 18px; padding-right: 18px; } }
 @media (max-width: 900px) { .classroom-consultation-dock { position: absolute; inset: 0 0 0 auto; z-index: 45; max-width: 100%; box-shadow: -12px 0 36px #24311b0d; } .classroom-consultation-resizer { display: none; } }
 @media (max-width: 600px) { .classroom-consultation-dock { width: 100%!important; } .classroom-workspace [data-testid="coding-message-composer"] { width: calc(100% - 24px); } }
 @media (prefers-reduced-motion: reduce) { .classroom-workspace *, .consultation-pane * { scroll-behavior: auto!important; } }
+@media (prefers-reduced-motion: reduce) { .consultation-follow-up { transition: none; } }
 
 /* The teacher speaks from the title bar without taking the student's focus. */
 .classroom-composer-view[hidden] { display: none; }