.ai-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #b18787;
  }
  
  .ai-chat-container {
    width: 500px;
    height: 600px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #e7e7e7;
  }
  
  .ai-messages {
    flex-grow: 1;
    padding: 16px;
    overflow-y: auto;
  }
  
  .ai-message {
    background-color: #f4a2a2;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
  }
  
  .user-message {
    background-color: #e2f0ff;
  }
  
  .ai-input-container {
    display: flex;
    padding: 16px;
  }
  
  .ai-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 8px;
  }
  
  .ai-send-button {
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .ai-message {
    display: flex;
    align-items: flex-start;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 8px;
  }
  
  .user-avatar {
    background-color: #007bff;
  }
  
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .message-text {
    flex-grow: 1;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
  }
  

  //操控ai
  .ai-input-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 16px;
  }
  
  .ai-toggle-button {
    padding: 4px 8px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 8px;
  }
  
  .ai-input-wrapper {
    display: flex;
    align-items: center;
  }
  
  .ai-input {
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 8px;
  }
  
  .ai-set-button {
    padding: 4px 8px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  
  //高级ai
  .advanced-button {
    border-radius: 40%;  /* 将按钮的边框半径设置为50%，使其呈现圆形 */
    width: 50px;  /* 设置按钮的宽度 */
    height: 30px;  /* 设置按钮的高度 */
    position: fixed;  /* 使用固定定位，使按钮在最右边 */
    // right: 20px;  /* 距离右边界的距离 */
    // bottom: 20px;  /* 距离底部的距离 */
    background-color: #ff0000;  /* 设置按钮的背景颜色 */
    color: #ffffff;  /* 设置按钮的文本颜色 */
    border: none;  /* 移除按钮的边框 */
    outline: none;  /* 移除按钮的外边框 */
    cursor: pointer;  /* 设置鼠标悬停时的指针样式 */
  }
  
  .advanced-button:hover {
    background-color: #0056b3;
  }
  
  .advanced-button:active {
    background-color: #003d80;
  }
  