<!-- page-design.html -->
<!-- 原有设计界面保持不变 -->
<div class="panel">
  <h2><i class="fas fa-palette"></i> 个性定制</h2>
  <p class="section-desc">选择羽绒服的不同部位并自定义颜色，打造属于你的独特设计</p>
  
  <div class="jacket-display-container">
    <div class="jacket-display">
      <div class="jacket-base"></div>
      <div class="jacket-part jacket-hood" [class.active-part]="activePart === 'hood'" 
           (click)="selectPart('hood')" [style.background]="getPartGradient('hood')"></div>
      <div class="jacket-part jacket-body" [class.active-part]="activePart === 'body'" 
           (click)="selectPart('body')" [style.background]="getPartGradient('body')"></div>
      <div class="jacket-part jacket-sleeve left" [class.active-part]="activePart === 'sleeve-left'" 
           (click)="selectPart('sleeve-left')" [style.background]="getPartGradient('sleeve-left')"></div>
      <div class="jacket-part jacket-sleeve right" [class.active-part]="activePart === 'sleeve-right'" 
           (click)="selectPart('sleeve-right')" [style.background]="getPartGradient('sleeve-right')"></div>
    </div>
  </div>
  
  <h3>选择颜色</h3>
  <div class="color-palette">
    <div *ngFor="let color of colors" class="color-option" 
         [class.active]="selectedColor === color" 
         [style.background-color]="color"
         (click)="selectColor(color)">
    </div>
  </div>
  
  <div class="action-buttons">
    <button class="btn btn-secondary" (click)="resetDesign()">
      <i class="fas fa-redo"></i> 重置
    </button>
    <button class="btn btn-primary pulse" (click)="saveDesign()">
      <i class="fas fa-save"></i> 保存设计
    </button>
  </div>
  
  <!-- 新增的AI助手部分 -->
  <button class="ai-float-btn" (click)="toggleAIModal()">
    <i class="fas fa-robot"></i>
    <span>AI助手</span>
  </button>
  
  <div class="ai-modal" *ngIf="showAIModal">
    <div class="ai-modal-content">
      <div class="ai-modal-header">
        <div class="ai-icon">
          <i class="fas fa-robot"></i>
        </div>
        <div class="ai-title">AI设计助手</div>
        <button class="close-btn" (click)="toggleAIModal()">&times;</button>
      </div>
      
      <div class="ai-messages">
        <div *ngFor="let message of aiMessages; let i = index" class="message" 
             [class.user-message]="message.isUser" 
             [class.ai-message]="!message.isUser"
             [class.trend-message]="message.isTrend">
          <div *ngIf="message.isLoading" class="loading-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
          
          <div [innerHTML]="message.text"></div>
          
          <div *ngIf="message.isTrend" class="trend-actions">
            <button *ngFor="let trend of trendRecommendations; let j = index" 
                    class="trend-btn"
                    (click)="applyTrendRecommendation(j)">
              应用{{ trend.title }}
            </button>
          </div>
        </div>
      </div>
      
      <div class="preset-questions">
        <div class="preset-title">快捷提问：</div>
        <div class="preset-buttons">
          <button *ngFor="let question of presetQuestions" 
                  class="preset-btn"
                  (click)="usePresetQuestion(question.text)">
            <i [class]="question.icon"></i>
            {{ question.text }}
            <span class="preset-desc">{{ question.description }}</span>
          </button>
        </div>
      </div>
      
      <div class="ai-input-group">
        <input type="text" class="ai-input" placeholder="输入您的问题..." 
               [(ngModel)]="aiInput" [disabled]="isAILoading"
               (keyup.enter)="sendAiMessage()">
        <button class="ai-send-btn" (click)="sendAiMessage()" [disabled]="isAILoading">
          <i class="fas fa-paper-plane"></i>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="ai-modal" *ngIf="showAIModal">
  <div class="ai-modal-content">
    <div class="ai-modal-header">
      <div class="ai-icon">
        <i class="fas fa-robot"></i>
      </div>
      <div class="ai-title">AI设计助手</div>
      <button class="close-btn" (click)="toggleAIModal()">&times;</button>
    </div>
    
    <div class="ai-messages">
      <div *ngFor="let message of aiMessages; let i = index" class="message" 
           [class.user-message]="message.isUser" 
           [class.ai-message]="!message.isUser"
           [class.trend-message]="message.isTrend">
        <div *ngIf="message.isLoading" class="loading-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
        
        <div [innerHTML]="message.text"></div>
        
        <div *ngIf="message.isTrend" class="trend-actions">
          <button *ngFor="let trend of trendRecommendations; let j = index" 
                  class="trend-btn"
                  (click)="applyTrendRecommendation(j)">
            应用{{ trend.title }}
          </button>
        </div>
      </div>
    </div>
    
    <div class="preset-questions">
      <div class="preset-title">快捷提问：</div>
      <div class="preset-buttons">
        <button *ngFor="let question of presetQuestions" 
                class="preset-btn"
                (click)="usePresetQuestion(question.text)">
          <i [class]="question.icon"></i>
          {{ question.text }}
          <span class="preset-desc">{{ question.description }}</span>
        </button>
      </div>
    </div>
    
    <div class="ai-input-group">
      <input type="text" class="ai-input" placeholder="输入您的问题..." 
             [(ngModel)]="aiInput" [disabled]="isAILoading"
             (keyup.enter)="sendAiMessage()">
      <button class="ai-send-btn" (click)="sendAiMessage()" [disabled]="isAILoading">
        <i class="fas fa-paper-plane"></i>
      </button>
    </div>
  </div>
</div>