hydro-ai-helper 2.0.7 → 2.2.0

package/frontend/student/ChatInput.tsx

@@ -1,9 +1,30 @@
 import React from 'react';
 import { i18n } from '@hydrooj/ui-default';
-import {
-  COLORS, SPACING, RADIUS, SHADOWS, TRANSITIONS, FONT_FAMILY,
-  getButtonStyle, getPillStyle, getInputStyle,
-} from '../utils/styles';
+import { TypeIcon, SendIcon, AttachIcon, RefreshIcon, RemoveIcon } from './icons';
+
+// ── 方案 A · 克制蓝 调色 ───────────────────────────────────────────────
+const A = {
+  border: '#eef1f5',
+  cardBorder: '#e3e8ef',
+  inputBg: '#f8fafc',
+  primary: '#2563eb',
+  gradient: 'linear-gradient(135deg, #2563eb, #5b8def)',
+  textPrimary: '#1e2536',
+  textSecondary: '#475569',
+  textMuted: '#64748b',
+  textFaint: '#94a3b8',
+  placeholder: '#aab4c2',
+  selBorder: '#2563eb',
+  selBg: '#f3f7ff',
+  idleBorder: '#eef1f5',
+  idleBg: '#fafbfd',
+  iconIdleBg: '#eef2f8',
+  success: '#10b981',
+  warning: '#f59e0b',
+  error: '#ef4444',
+  disabledBg: '#f1f5f9',
+  disabledText: '#cbd5e1',
+};
 
 interface QuestionType {
   value: string;
@@ -42,12 +63,49 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   const isFollowUp = conversationHistoryLength > 0;
   const canSubmit = isFirstConversation ? !!questionType : !!userThinking.trim();
 
+  // ── 问题类型卡片（2×2 网格，替换原 pill 行）─────────────────────────
+  const renderTypeCard = (type: QuestionType) => {
+    const isSelected = questionType === type.value;
+    return (
+      <label
+        key={type.value}
+        className="ai-type-card"
+        style={{
+          display: 'block', padding: '11px 12px', borderRadius: '12px', cursor: 'pointer',
+          border: `1.5px solid ${isSelected ? A.selBorder : A.idleBorder}`,
+          background: isSelected ? A.selBg : A.idleBg,
+          transition: 'all 160ms cubic-bezier(.4,0,.2,1)', userSelect: 'none',
+        }}
+      >
+        <input
+          type="radio" name="questionType" value={type.value}
+          checked={isSelected} onChange={(e) => onQuestionTypeChange(e.target.value)}
+          style={{ display: 'none' }}
+        />
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '5px' }}>
+          <div style={{
+            width: '24px', height: '24px', borderRadius: '7px',
+            background: isSelected ? A.primary : A.iconIdleBg,
+            color: isSelected ? '#fff' : A.textMuted,
+            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+          }}>
+            <TypeIcon type={type.value} size={14} />
+          </div>
+          <span style={{ fontSize: '13px', fontWeight: 600, color: A.textPrimary }}>{i18n(type.label)}</span>
+        </div>
+        {type.description && (
+          <div style={{ fontSize: '11px', color: A.textMuted, lineHeight: 1.4 }}>{i18n(type.description)}</div>
+        )}
+      </label>
+    );
+  };
+
   const renderIncludeCodeCheckbox = (labelText: string) => (
     <label
       style={{
         display: 'flex', alignItems: 'center',
         cursor: questionType === 'optimize' ? 'not-allowed' : 'pointer',
-        fontSize: '12px', color: questionType === 'optimize' ? COLORS.textDisabled : COLORS.textSecondary,
+        fontSize: '11.5px', color: questionType === 'optimize' ? A.disabledText : A.textMuted,
         whiteSpace: 'nowrap', alignSelf: 'center',
       }}
       title={questionType === 'optimize' ? i18n('ai_helper_student_optimize_code_required') : undefined}
@@ -55,11 +113,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       <input
         type="checkbox" checked={includeCode} disabled={questionType === 'optimize'}
         onChange={(e) => onIncludeCodeChange(e.target.checked)}
-        style={{ marginRight: '6px', accentColor: COLORS.primary }}
+        style={{ marginRight: '6px', accentColor: A.primary }}
       />
       {labelText}
-      {questionType === 'optimize' && <span style={{ marginLeft: '4px', color: COLORS.warning, fontSize: '11px' }}>({i18n('ai_helper_student_required')})</span>}
-      {includeCode && code && questionType !== 'optimize' && <span style={{ marginLeft: '4px', color: COLORS.success, fontSize: '11px' }}>&#10003;</span>}
+      {questionType === 'optimize' && <span style={{ marginLeft: '4px', color: A.warning, fontSize: '11px' }}>({i18n('ai_helper_student_required')})</span>}
+      {includeCode && code && questionType !== 'optimize' && <span style={{ marginLeft: '4px', color: A.success, fontSize: '11px' }}>&#10003;</span>}
     </label>
   );
 
@@ -69,14 +127,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       onChange={(e) => onUserThinkingChange(e.target.value)}
       placeholder={isFirstConversation ? i18n('ai_helper_student_placeholder_first') : i18n('ai_helper_student_placeholder_followup')}
       style={{
-        ...getInputStyle(),
-        border: 'none', outline: 'none', boxShadow: 'none',
-        backgroundColor: 'transparent',
-        flex: 1, minHeight, maxHeight,
-        resize: 'none' as const, boxSizing: 'border-box' as const,
+        width: '100%', border: 'none', outline: 'none', boxShadow: 'none',
+        background: 'transparent', color: A.textPrimary,
+        fontSize: '12.5px', lineHeight: 1.6, fontFamily: 'inherit',
+        flex: 1, minHeight, maxHeight, resize: 'none', boxSizing: 'border-box', padding: 0,
       }}
-      onFocus={() => {}}
-      onBlur={() => {}}
       onKeyDown={(e) => {
         if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); onSubmit(); }
       }}
@@ -85,137 +140,84 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
   const disabledSubmit = isLoading || !canSubmit;
   const submitStyle: React.CSSProperties = {
-    width: '36px',
-    height: '36px',
-    borderRadius: '50%',
-    background: disabledSubmit ? COLORS.bgDisabled : COLORS.gradient,
-    color: disabledSubmit ? COLORS.textDisabled : '#ffffff',
-    border: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: disabledSubmit ? 'not-allowed' : 'pointer',
-    transition: 'all 150ms ease',
+    width: '32px', height: '32px', borderRadius: '50%',
+    background: disabledSubmit ? A.disabledBg : A.gradient,
+    color: disabledSubmit ? A.disabledText : '#ffffff',
+    border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
+    cursor: disabledSubmit ? 'not-allowed' : 'pointer', transition: 'all 150ms ease',
     boxShadow: disabledSubmit ? 'none' : '0 2px 6px rgba(37, 99, 235, 0.3)',
-    flexShrink: 0,
-    fontSize: '16px',
-    padding: 0,
+    flexShrink: 0, padding: 0,
+  };
+
+  const pillButton: React.CSSProperties = {
+    display: 'flex', alignItems: 'center', gap: '5px', fontSize: '11.5px',
+    color: A.textSecondary, padding: '5px 11px', border: `1px solid ${A.cardBorder}`,
+    borderRadius: '999px', background: 'transparent', cursor: 'pointer', fontFamily: 'inherit',
   };
 
   return (
-    <div style={{ background: COLORS.bgPage, flexShrink: 0 }}>
+    <div style={{ background: '#fff', flexShrink: 0 }}>
+      <style>{`.ai-type-card:hover{border-color:#c5d4f5 !important}.ai-input-card:focus-within{border-color:#2563eb !important;box-shadow:0 0 0 3px rgba(37,99,235,.18)}`}</style>
       {errorBanner}
 
-      {/* Question type pills - above the card */}
+      {/* 问题类型卡片 — 首次对话 */}
       {isFirstConversation && (
-        <div style={{ padding: `${SPACING.sm} ${SPACING.base} 0` }}>
-          <div style={{ fontSize: '12px', color: COLORS.textSecondary, marginBottom: SPACING.xs }}>{i18n('ai_helper_student_select_type')}：</div>
-          <div className="hide-scrollbar" style={{ display: 'flex', overflowX: 'auto', gap: SPACING.sm }}>
-            {questionTypes.map(type => {
-              const isSelected = questionType === type.value;
-              return (
-                <label
-                  key={type.value}
-                  style={{
-                    ...getPillStyle(isSelected),
-                    userSelect: 'none' as const,
-                  }}
-                >
-                  <input
-                    type="radio" name="questionType" value={type.value}
-                    checked={isSelected} onChange={(e) => onQuestionTypeChange(e.target.value)}
-                    style={{ display: 'none' }}
-                  />
-                  {i18n(type.label)}
-                </label>
-              );
-            })}
+        <div style={{ padding: '12px 16px 0' }}>
+          <div style={{ fontSize: '12px', color: A.textFaint, marginBottom: '8px' }}>{i18n('ai_helper_student_select_type')}</div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
+            {questionTypes.map(renderTypeCard)}
           </div>
-          {questionType && (() => {
-            const selected = questionTypes.find(t => t.value === questionType);
-            const descKey = (selected as any)?.description;
-            return descKey ? (
-              <div style={{ fontSize: '12px', color: COLORS.textSecondary, marginTop: SPACING.xs }}>
-                {i18n(descKey)}
-                {questionType === 'debug' && i18n('ai_helper_student_debug_auto_attach')}
-              </div>
-            ) : null;
-          })()}
+          {questionType === 'debug' && (
+            <div style={{ fontSize: '11.5px', color: A.textMuted, marginTop: '8px' }}>
+              {i18n('ai_helper_student_debug_auto_attach')}
+            </div>
+          )}
         </div>
       )}
 
-      {/* Follow-up action buttons - above the card */}
+      {/* 追问操作 — 后续对话 */}
       {isFollowUp && (
-        <div style={{ display: 'flex', gap: SPACING.sm, padding: `${SPACING.sm} ${SPACING.base} 0` }}>
-          <button
-            type="button" onClick={onRefreshCode}
-            style={{
-              ...getButtonStyle('secondary'),
-              fontSize: '12px', padding: `${SPACING.xs} ${SPACING.md}`,
-              display: 'flex', alignItems: 'center', gap: SPACING.xs,
-            }}
-          >
-            📎 {includeCode ? i18n('ai_helper_student_code_attached') : i18n('ai_helper_student_attach_code')}
+        <div style={{ display: 'flex', gap: '8px', padding: '10px 16px 0' }}>
+          <button type="button" onClick={onRefreshCode} style={pillButton}>
+            <AttachIcon size={12} /> {includeCode ? i18n('ai_helper_student_code_attached') : i18n('ai_helper_student_attach_code')}
           </button>
-          <button
-            type="button" onClick={onNewConversation}
-            style={{
-              ...getButtonStyle('ghost'),
-              fontSize: '12px', padding: `${SPACING.xs} ${SPACING.md}`,
-              border: `1px solid ${COLORS.border}`,
-            }}
-          >
-            🔄 {i18n('ai_helper_student_new_conversation')}
+          <button type="button" onClick={onNewConversation} style={pillButton}>
+            <RefreshIcon size={12} /> {i18n('ai_helper_student_new_conversation')}
           </button>
         </div>
       )}
 
+      {/* 已附带代码预览 */}
       {isFollowUp && includeCode && code && (
-        <div style={{
-          background: COLORS.bgPage, border: `1px solid ${COLORS.border}`, borderRadius: RADIUS.md,
-          padding: SPACING.sm, margin: `${SPACING.sm} ${SPACING.base} 0`, fontSize: '11px',
-        }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: SPACING.xs }}>
-            <span style={{ color: COLORS.textSecondary }}>📝 {i18n('ai_helper_student_code_attached')} ({code.length} {i18n('ai_helper_student_chars')})</span>
-            <button
-              type="button" onClick={onCodeClear}
-              style={{ background: 'none', border: 'none', color: COLORS.error, cursor: 'pointer', fontSize: '11px', padding: '2px 4px' }}
-            >
-              ✕ {i18n('ai_helper_student_remove')}
+        <div style={{ background: A.inputBg, border: `1px solid ${A.cardBorder}`, borderRadius: '10px', padding: '8px', margin: '8px 16px 0', fontSize: '11px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+            <span style={{ color: A.textMuted }}>📝 {i18n('ai_helper_student_code_attached')} ({code.length} {i18n('ai_helper_student_chars')})</span>
+            <button type="button" onClick={onCodeClear} style={{ display: 'flex', alignItems: 'center', gap: '3px', background: 'none', border: 'none', color: A.error, cursor: 'pointer', fontSize: '11px', padding: '2px 4px', fontFamily: 'inherit' }}>
+              <RemoveIcon size={11} /> {i18n('ai_helper_student_remove')}
             </button>
           </div>
-          <pre style={{
-            margin: 0, fontFamily: 'Consolas, Monaco, "Courier New", monospace',
-            whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: COLORS.textPrimary, maxHeight: '60px', overflow: 'auto',
-          }}>
+          <pre style={{ margin: 0, fontFamily: 'Consolas, Monaco, "Courier New", monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: A.textPrimary, maxHeight: '60px', overflow: 'auto' }}>
             {code.length > 200 ? code.substring(0, 200) + '...' : code}
           </pre>
         </div>
       )}
 
-      {/* Unified input card */}
-      <div className="chat-input-card" style={{
-        margin: '12px', padding: '10px 12px 10px 16px', borderRadius: '24px',
-        border: `1px solid ${COLORS.border}`, backgroundColor: '#f8fafc',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.04)', transition: 'all 200ms ease',
+      {/* 统一输入卡片 */}
+      <div className="ai-input-card" style={{
+        margin: '12px 16px', padding: '11px 12px', borderRadius: '16px',
+        border: `1px solid ${A.cardBorder}`, background: A.inputBg,
+        transition: 'all 200ms ease',
       }}>
-        {renderTextarea(isFirstConversation ? '48px' : '24px', '120px')}
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '4px' }}>
-          {isFirstConversation ? renderIncludeCodeCheckbox(`📎 ${i18n('ai_helper_student_attach_current_code')}`) : <div />}
+        {renderTextarea(isFirstConversation ? '40px' : '24px', '120px')}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '10px' }}>
+          {isFirstConversation ? renderIncludeCodeCheckbox(i18n('ai_helper_student_attach_current_code')) : <div />}
           {isLoading ? (
-            <button
-              onClick={onCancel}
-              style={{ ...getButtonStyle('danger'), whiteSpace: 'nowrap', borderRadius: RADIUS.full, padding: '6px 16px', fontSize: '13px' }}
-            >
+            <button onClick={onCancel} style={{ background: A.error, color: '#fff', border: 'none', borderRadius: '999px', padding: '6px 16px', fontSize: '13px', cursor: 'pointer', whiteSpace: 'nowrap', fontFamily: 'inherit' }}>
               {i18n('ai_helper_student_cancel')}
             </button>
           ) : (
-            <button
-              onClick={onSubmit} disabled={disabledSubmit}
-              style={submitStyle}
-              title={i18n('ai_helper_student_send_shortcut')}
-            >
-              &#x27A4;
+            <button onClick={onSubmit} disabled={disabledSubmit} style={submitStyle} title={i18n('ai_helper_student_send_shortcut')}>
+              <SendIcon size={15} />
             </button>
           )}
         </div>

package/frontend/student/ChatMessageList.tsx

@@ -1,10 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { i18n } from '@hydrooj/ui-default';
 import { renderMarkdown as renderMarkdownSafe, renderStreamingMarkdown } from '../utils/markdown';
-import { COLORS, SPACING, RADIUS, SHADOWS, ZINDEX, FONT_FAMILY } from '../utils/styles';
+import { ZINDEX } from '../utils/styles';
 import { ThinkingBlock } from './ThinkingBlock';
+import { AIMark } from './icons';
 import type { Message, ProblemInfo } from './types';
 
+// ── 方案 A · 克制蓝 调色（局部常量，避免改动共享的 styles.ts）──────────────
+const A = {
+  border: '#eef1f5',
+  problemBg: '#f7f9fc',
+  pillBg: '#e7eeff',
+  pillText: '#2563eb',
+  textPrimary: '#1e2536',
+  textSecondary: '#64748b',
+  textMuted: '#94a3b8',
+  textFaint: '#aab4c2',
+  aiBubbleBg: '#f4f8ff',
+  aiBubbleBorder: '#e2ecfb',
+  userBubbleBg: '#2563eb',
+  mono: "'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace",
+};
+
 interface ParsedContent {
   content: string;
   isThinkingStreaming: boolean;
@@ -16,12 +33,10 @@ function parseMessageContent(text: string): ParsedContent {
 
   const thinkEnd = text.indexOf('</think>');
   if (thinkEnd === -1) {
-    // Think tag opened but not closed — still streaming thinking
     const content = text.substring(0, thinkStart);
     return { content, isThinkingStreaming: true };
   }
 
-  // Strip the entire <think>...</think> block (content is just a placeholder)
   const content = text.substring(0, thinkStart) + text.substring(thinkEnd + 8);
   return { content: content.trim(), isThinkingStreaming: false };
 }
@@ -49,7 +64,7 @@ const renderMarkdown = (text: string, streaming?: boolean) => {
     <div
       className="markdown-body"
       dangerouslySetInnerHTML={{ __html: html }}
-      style={{ fontSize: '13px', lineHeight: '1.6' }}
+      style={{ fontSize: '13px', lineHeight: '1.7' }}
     />
   );
 };
@@ -63,11 +78,11 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = ({
   const renderProblemInfoCard = () => {
     if (problemInfo) {
       return (
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '10px 16px', background: 'rgba(248,250,252,0.8)', borderBottom: `1px solid ${COLORS.border}` }}>
-          <span style={{ fontSize: '11px', fontWeight: 'bold', padding: '2px 6px', background: COLORS.primaryLight, color: COLORS.primary, borderRadius: '4px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '9px 16px', background: A.problemBg, borderBottom: `1px solid ${A.border}` }}>
+          <span style={{ fontSize: '11px', fontWeight: 700, padding: '2px 7px', background: A.pillBg, color: A.pillText, borderRadius: '5px', fontFamily: A.mono, flexShrink: 0 }}>
             {problemInfo.problemId}
           </span>
-          <span style={{ fontSize: '13px', color: COLORS.textSecondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>
+          <span style={{ fontSize: '12.5px', color: A.textSecondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>
             {problemInfo.title}
           </span>
         </div>
@@ -75,19 +90,14 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = ({
     }
     if (problemInfoError) {
       return (
-        <div style={{
-          display: 'flex', alignItems: 'center', gap: '8px', padding: '10px 16px', background: COLORS.warningBg, borderBottom: `1px solid ${COLORS.warningBorder}`
-        }}>
-          <span style={{ fontSize: '12px', color: COLORS.warningText, whiteSpace: 'nowrap' }}>⚠️ {i18n('ai_helper_student_cannot_get_problem')}</span>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '9px 16px', background: '#fffbeb', borderBottom: '1px solid #fde68a' }}>
+          <span style={{ fontSize: '12px', color: '#92400e', whiteSpace: 'nowrap' }}>⚠ {i18n('ai_helper_student_cannot_get_problem')}</span>
           <input
             type="text"
             placeholder={i18n('ai_helper_student_manual_title_placeholder')}
             value={manualTitle}
             onChange={(e) => onManualTitleChange(e.target.value)}
-            style={{
-              flex: 1, padding: SPACING.xs, border: `1px solid ${COLORS.warningBorder}`,
-              borderRadius: RADIUS.sm, fontSize: '12px', boxSizing: 'border-box'
-            }}
+            style={{ flex: 1, padding: '4px 8px', border: '1px solid #fde68a', borderRadius: '6px', fontSize: '12px', boxSizing: 'border-box' }}
           />
         </div>
       );
@@ -98,16 +108,16 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = ({
   const renderEmptyState = () => (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1, padding: '40px 24px', textAlign: 'center' }}>
       <div style={{
-        width: '72px', height: '72px', borderRadius: '50%',
-        background: 'linear-gradient(135deg, #2563eb, #3b82f6)',
+        width: '64px', height: '64px', borderRadius: '18px',
+        background: 'linear-gradient(135deg, #2563eb, #5b8def)',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
-        fontSize: '36px', marginBottom: '24px',
-        boxShadow: '0 8px 24px rgba(37, 99, 235, 0.2)',
-        animation: 'float 3s ease-in-out infinite',
-      }}>🤖</div>
-      <div style={{ fontSize: '18px', fontWeight: 600, color: COLORS.textPrimary, marginBottom: '8px' }}>{i18n('ai_helper_student_welcome_title')}</div>
-      <div style={{ fontSize: '13px', color: COLORS.textSecondary, lineHeight: '1.8' }}>
-        {i18n('ai_helper_student_welcome_desc_line1')}<br/>{i18n('ai_helper_student_welcome_desc_line2')}
+        fontFamily: A.mono, fontSize: '24px', fontWeight: 700, color: '#fff',
+        letterSpacing: '-1px', marginBottom: '18px',
+        boxShadow: '0 8px 20px rgba(37, 99, 235, 0.25)',
+      }}>AI</div>
+      <div style={{ fontSize: '17px', fontWeight: 700, color: A.textPrimary, marginBottom: '6px' }}>{i18n('ai_helper_student_welcome_title')}</div>
+      <div style={{ fontSize: '12.5px', color: A.textMuted, lineHeight: '1.7' }}>
+        {i18n('ai_helper_student_welcome_desc_line1')}<br />{i18n('ai_helper_student_welcome_desc_line2')}
       </div>
     </div>
   );
@@ -116,20 +126,18 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = ({
     const parsed = msg.role === 'ai' ? parseMessageContent(msg.content) : null;
     const isStudent = msg.role === 'student';
     return (
-      <div key={idx} style={{ display: 'flex', flexDirection: isStudent ? 'row-reverse' : 'row', gap: SPACING.sm, alignItems: 'flex-start' }}>
-        {/* Avatar indicator */}
-        <div style={{
-          width: '28px', height: '28px', borderRadius: RADIUS.full, flexShrink: 0,
-          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '14px',
-          background: isStudent ? COLORS.primary : COLORS.primaryLight,
-          color: isStudent ? '#ffffff' : COLORS.primary,
-          border: isStudent ? 'none' : `1px solid ${COLORS.border}`,
-        }}>
-          {isStudent ? '\u{1F464}' : '\u{1F916}'}
-        </div>
-        <div style={{ maxWidth: '80%', display: 'flex', flexDirection: 'column', gap: '2px' }}>
+      <div key={idx} style={{ display: 'flex', flexDirection: isStudent ? 'row-reverse' : 'row', gap: '8px', alignItems: 'flex-start' }}>
+        {/* Avatar */}
+        {isStudent ? (
+          <div style={{ width: '28px', height: '28px', borderRadius: '50%', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 600, background: A.userBubbleBg, color: '#fff' }}>
+            {i18n('ai_helper_student_me')}
+          </div>
+        ) : (
+          <AIMark size={28} radius={8} fontSize={10} />
+        )}
+        <div style={{ maxWidth: '82%', display: 'flex', flexDirection: 'column', gap: '3px' }}>
           {/* Speaker label */}
-          <div style={{ fontSize: '11px', color: COLORS.textMuted, textAlign: isStudent ? 'right' : 'left' }}>
+          <div style={{ fontSize: '10.5px', color: A.textFaint, textAlign: isStudent ? 'right' : 'left' }}>
             {isStudent ? i18n('ai_helper_student_me') : i18n('ai_helper_student_ai_assistant')}
           </div>
           {/* Bubble */}
@@ -137,13 +145,12 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = ({
             data-ai-message={msg.role === 'ai' ? 'true' : undefined}
             data-message-id={msg.role === 'ai' ? msg.id : undefined}
             style={{
-              padding: `${SPACING.sm} ${SPACING.md}`,
-              borderRadius: isStudent ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
-              background: isStudent ? COLORS.primary : '#f0f7ff',
-              color: isStudent ? '#ffffff' : COLORS.textPrimary,
-              fontSize: '13px', lineHeight: '1.6',
-              border: isStudent ? 'none' : '1px solid #dbeafe',
-              boxShadow: SHADOWS.sm,
+              padding: '10px 13px',
+              borderRadius: isStudent ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
+              background: isStudent ? A.userBubbleBg : A.aiBubbleBg,
+              color: isStudent ? '#ffffff' : A.textPrimary,
+              fontSize: '13px', lineHeight: '1.7',
+              border: isStudent ? 'none' : `1px solid ${A.aiBubbleBorder}`,
             }}
           >
             {msg.role === 'ai' && parsed ? (
@@ -152,18 +159,12 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = ({
               <div style={{ whiteSpace: 'pre-wrap' }}>{msg.content}</div>
             )}
           </div>
-          {/* Attached code block for student messages */}
+          {/* Attached code (student) */}
           {isStudent && msg.code && (
-            <div style={{
-              background: COLORS.bgPage, border: `1px solid ${COLORS.border}`,
-              borderRadius: RADIUS.md, padding: SPACING.sm, fontSize: '12px',
-              maxWidth: '100%', overflow: 'hidden',
-            }}>
-              <div style={{ fontSize: '11px', color: COLORS.textMuted, marginBottom: SPACING.xs, display: 'flex', alignItems: 'center', gap: SPACING.xs }}>
-                📝 {i18n('ai_helper_student_attached_code')}
-              </div>
+            <div style={{ background: '#f8fafc', border: `1px solid ${A.border}`, borderRadius: '10px', padding: '8px', fontSize: '12px', maxWidth: '100%', overflow: 'hidden' }}>
+              <div style={{ fontSize: '11px', color: A.textMuted, marginBottom: '4px' }}>📝 {i18n('ai_helper_student_attached_code')}</div>
               <div className="markdown-body" dangerouslySetInnerHTML={{
-                __html: renderMarkdownSafe(`\`\`\`\n${msg.code.length > 500 ? msg.code.substring(0, 500) + `\n// ... ${i18n('ai_helper_student_code_truncated')}` : msg.code}\n\`\`\``).innerHTML
+                __html: renderMarkdownSafe(`\`\`\`\n${msg.code.length > 500 ? msg.code.substring(0, 500) + `\n// ... ${i18n('ai_helper_student_code_truncated')}` : msg.code}\n\`\`\``),
               }} />
             </div>
           )}
@@ -172,36 +173,55 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = ({
     );
   };
 
+  // Memoize message nodes on `messages`. Selecting text only changes popup
+  // state, so without this the whole list re-renders on every selection — and
+  // in the live runtime that re-render coincided with the AI bubble's rendered
+  // DOM being replaced (observed via MutationObserver), which detached the
+  // user's selection and collapsed the highlight. Stable element references
+  // make React bail out of these subtrees, so the selection's DOM (and the
+  // native highlight) survive; it also avoids re-rendering completed messages
+  // on every keystroke. (renderMarkdown itself is deterministic — verified
+  // end-to-end — so this is not about unstable HTML output.)
+  const messageNodes = useMemo(
+    () => messages.map((msg, idx) => renderMessage(msg, idx)),
+    [messages],
+  );
+
   return (
     <div
       ref={chatContainerRef}
       onMouseUp={onTextSelection}
-      style={{ flex: 1, overflowY: 'auto', padding: SPACING.base, display: 'flex', flexDirection: 'column', gap: SPACING.md }}
+      style={{ flex: 1, overflowY: 'auto', padding: '18px 16px', display: 'flex', flexDirection: 'column', gap: '16px' }}
     >
-      {/* Problem info breadcrumb */}
-      {renderProblemInfoCard()}
+      {/* dot-pulse keyframes for streaming/loading */}
+      <style>{`@keyframes dotpulse{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}`}</style>
+
+      {/* Problem info breadcrumb (full-bleed: negate the body padding) */}
+      <div style={{ margin: '-18px -16px 0' }}>{renderProblemInfoCard()}</div>
 
       {/* Empty state */}
       {messages.length === 0 && !isStreaming && !isLoading && renderEmptyState()}
 
-      {/* Messages */}
-      {messages.map((msg, idx) => renderMessage(msg, idx))}
+      {/* Messages (memoized — see messageNodes above) */}
+      {messageNodes}
 
       {/* Streaming output */}
       {isStreaming && streamingContent && (() => {
         const parsed = parseMessageContent(streamingContent);
         return (
-          <div style={{ display: 'flex', flexDirection: 'row', gap: SPACING.sm }}>
+          <div style={{ display: 'flex', flexDirection: 'row', gap: '8px', alignItems: 'flex-start' }}>
+            <AIMark size={28} radius={8} fontSize={10} />
             <div style={{
-              maxWidth: '85%', padding: '10px 14px', borderRadius: '12px 12px 12px 4px',
-              background: COLORS.primaryLight, color: COLORS.textPrimary, fontSize: '13px', lineHeight: '1.6'
+              maxWidth: '82%', padding: '11px 14px', borderRadius: '14px 14px 14px 4px',
+              background: A.aiBubbleBg, border: `1px solid ${A.aiBubbleBorder}`,
+              color: A.textPrimary, fontSize: '13px', lineHeight: '1.7',
             }}>
               <ThinkingBlock isStreaming={parsed.isThinkingStreaming} />
               {(!parsed.isThinkingStreaming && parsed.content) && renderMarkdown(parsed.content, true)}
               {!parsed.isThinkingStreaming && (
                 <span style={{
-                  display: 'inline-block', width: '6px', height: '14px', background: COLORS.primary,
-                  marginLeft: '2px', animation: 'blink 1s step-end infinite', verticalAlign: 'text-bottom'
+                  display: 'inline-block', width: '6px', height: '14px', background: A.pillText,
+                  marginLeft: '2px', animation: 'blink 1s step-end infinite', verticalAlign: 'text-bottom',
                 }} />
               )}
             </div>
@@ -209,12 +229,17 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = ({
         );
       })()}
 
-      {/* Loading indicator */}
+      {/* Loading (pre-stream) */}
       {isLoading && !isStreaming && (
-        <div style={{ display: 'flex', gap: SPACING.sm }}>
-          <div style={{ padding: '10px 14px', borderRadius: '12px 12px 12px 4px', background: COLORS.primaryLight, color: COLORS.textSecondary, fontSize: '13px' }}>
-            <span style={{ animation: 'pulse 1.5s ease-in-out infinite' }}>{i18n('ai_helper_student_loading')}</span>
-            <span style={{ color: COLORS.textMuted, fontSize: '11px', marginLeft: SPACING.sm }}>{i18n('ai_helper_student_click_cancel')}</span>
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+          <AIMark size={28} radius={8} fontSize={10} />
+          <div style={{ padding: '12px 14px', borderRadius: '14px 14px 14px 4px', background: A.aiBubbleBg, border: `1px solid ${A.aiBubbleBorder}`, color: A.textSecondary, fontSize: '13px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>{i18n('ai_helper_student_loading')}</span>
+            <span style={{ display: 'inline-flex', gap: '3px' }}>
+              <span style={{ width: '5px', height: '5px', borderRadius: '50%', background: A.pillText, animation: 'dotpulse 1.2s infinite' }} />
+              <span style={{ width: '5px', height: '5px', borderRadius: '50%', background: A.pillText, animation: 'dotpulse 1.2s infinite 0.2s' }} />
+              <span style={{ width: '5px', height: '5px', borderRadius: '50%', background: A.pillText, animation: 'dotpulse 1.2s infinite 0.4s' }} />
+            </span>
           </div>
         </div>
       )}
@@ -225,9 +250,9 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = ({
           style={{
             position: 'fixed', left: popupPosition.x, top: popupPosition.y,
             transform: 'translateX(-50%)', zIndex: ZINDEX.dropdown,
-            background: COLORS.textPrimary, color: '#ffffff', padding: `6px ${SPACING.md}`,
-            borderRadius: RADIUS.md, fontSize: '12px', cursor: 'pointer',
-            boxShadow: SHADOWS.md, whiteSpace: 'nowrap'
+            background: A.textPrimary, color: '#ffffff', padding: '6px 12px',
+            borderRadius: '8px', fontSize: '12px', cursor: 'pointer',
+            boxShadow: '0 4px 12px rgba(0,0,0,.18)', whiteSpace: 'nowrap',
           }}
           onMouseDown={(e) => e.preventDefault()}
           onClick={onDontUnderstand}