接續昨天的html頁面，我們接著來美化他吧!我將解釋都寫在裡面了

• 設定背景

body {
    background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
    height: 100vh; /* 背景高度占滿視窗高度 */
}

我將背景設定成漸層的，這個顏色我是從這裡挑的。(這裡的配色真的超多好看的，好難挑

• 創立聊天機器人容器

.chat-bot-container {
  width: 700px; /* 寬度 */
  margin: auto; /* 居中對齊 */
  position: absolute; /* 絕對定位 */
  top: 50%; /* 距離上邊界的距離 */
  left: 50%; /* 距離左邊界的距離 */
  transform: translate(-50%, -50%); /* 水平和垂直居中 */
  padding: 30px; /* 內邊距 */
}

接下來，我們創建了一個包含聊天界面的容器，並將其居中對齊。

• 聊天機器人標題

.chat-bot-title-container {
  box-shadow: 0 0 10px rgba(0,0,0,0.7); /* 陰影效果 */
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  background: #233492; /* 背景色 */
  color: #fff; /* 文字顏色 */
  padding: 15px; /* 內邊距 */
  border-top-left-radius: 30px; /* 邊框圓角 */
  border-top-right-radius: 30px; /* 邊框圓角 */
}

/* 標題文字設定 */
.chat-bot-title-container > p {
  text-transform: uppercase; /* 轉換為大寫字母 */
  margin-top: 13.8px; /* 上邊距 */
}
/* 聊天機器人圖片 */
.chat-bot-title-container img {
  width: 50px; /* 寬度 */
  height: 50px; /* 高度 */
  border-radius: 50%; /* 圓角 */
  object-fit: cover; /* 圖片填充方式 */
  margin-right: 10px; /* 右邊距 */
}

• 設計聊天消息容器

/* 聊天消息容器 */
.msg-container {
  height: 400px; /* 高度 */
  overflow-y: auto; /* 垂直滾動條 */
  background-color: #d2eeef; /* 背景色 */
  box-shadow: 0 0 10px rgba(0,0,0,0.7); /* 陰影效果 */
  padding: 10px; /* 內邊距 */
}

接下來，我們創建了一個容器，用於顯示聊天消息。

• 用戶和機器人消息框

.user-msg-box {
  margin-right: 15px; /* 右邊距 */
  display: flex; /* 使用 Flex 布局 */
  justify-content: flex-end; /* 右對齊 */
  margin-bottom: 10px; /* 下邊距 */
}

.user-msg {
  background-color: #C8E6C9; /* 背景色 */
  padding: 10px; /* 內邊距 */
  border-radius: 15px; /* 邊框圓角 */
  max-width: 70%; /* 最大寬度 */
}

/* 機器人回應的消息框 */
.bot-message {
  display: flex; /* 使用 Flex 布局 */
  align-items: flex-start; /* 左對齊 */
  margin-bottom: 10px; /* 下邊距 */
}

/* 機器人圖片 */
.bot-logo img {
  width: 40px; /* 寬度 */
  height: 40px; /* 高度 */
  border-radius: 50%; /* 圓角 */
  margin-right: 10px; /* 右邊距 */
}

/* 機器人回應的消息框 */
.bot-msg {
  background-color: #ffffff; /* 背景色 */
  padding: 10px; /* 內邊距 */
  border-radius: 15px; /* 邊框圓角 */
  max-width: 70%; /* 最大寬度 */
}

• 輸入框和發送按鈕

/* 聊天輸入框容器 */
.chat-container {
    display: flex; /* 使用 Flex 布局 */
    margin-top: 10px; /* 上邊距 */  
}
  
/* 聊天輸入框 */
.chat-box {
  outline: none; /* 去除聚焦時的外框 */
  position: relative; /* 相對定位 */
  flex: 1; /* 自動擴展寬度 */
  padding: 15px; /* 內邊距 */
  border:none; /* 去除邊框 */
  font-size: 16px; /* 字體大小 */
  width: 86%; /* 寬度 */
  background: rgba(0,0,0,0); /* 背景透明 */
  border-bottom-left-radius: 30px; /* 邊框圓角 */
}

/* 聊天發送按鈕 */
.chat-submit {
  position: absolute; /* 絕對定位 */
  right: 0; /* 靠右對齊 */
  border-bottom-right-radius: 30px; /* 邊框圓角 */
  padding: 15px; /* 內邊距 */
  background: #187e4d; /* 背景色 */
  color: #fff; /* 文字顏色 */
  font-size: 16px; /* 字體大小 */
  width: 12%; /* 寬度 */
  height: 48px; /* 高度 */
  border: none; /* 去除邊框 */
}

/* 選中按鈕時的樣式 */
.chat-submit:active {
  background: #9aca9f; /* 按鈕激活時的背景色 */
}

/* 聊天框外觀 */
.chat-frame {
  width: 100%; /* 寬度 */
  position: relative; /* 相對定位 */
  background-color: #ffffff; /* 背景色 */
  border-bottom-left-radius: 30px; /* 邊框圓角 */
  border-bottom-right-radius: 30px; /* 邊框圓角 */
  box-shadow: 0 0 10px rgba(0,0,0,0.7); /* 陰影效果 */
}

/* 消息文字自動換行 */
.msg-span {
  word-wrap: break-word; /* 自動換行 */
}