diff --git a/index.html b/index.html
index 756d0f2..dcda068 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
       <h1>🤖 練習用 Chatbot</h1>
       <!-- 練習一：把標題改成你們組的名字 -->
       <p class="subtitle">W4 Git Branch 練習</p>
+      <button class="dark-toggle" onclick="document.body.classList.toggle('dark')">🌙 深色模式</button>
     </header>
 
     <div id="chat-box">
diff --git a/style.css b/style.css
index e420ff3..4650652 100644
--- a/style.css
+++ b/style.css
@@ -8,7 +8,7 @@
 body {
   font-family: 'Noto Sans TC', sans-serif;
   /* 練習：把背景色改成你喜歡的顏色 */
-  background-color: #f0f4f8;
+  background-color: #f5f4f0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -17,88 +17,144 @@ body {
 
 .container {
   background: white;
-  border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-  width: 480px;
+  border-radius: 24px;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+  width: 420px;
   max-width: 95vw;
+  height: 85vh;
+  max-height: 800px;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 
 header {
   /* 練習：把標題列顏色從藍色改成其他顏色 */
-  background: #4f8ef7;
+  background: #6c8065;
   color: white;
-  padding: 20px 24px;
+  padding: 24px 24px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  z-index: 10;
 }
 
-header h1 { font-size: 20px; }
-header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; }
+header h1 { font-size: 20px; font-weight: 600; letter-spacing: 0.5px; }
+header .subtitle { font-size: 13px; opacity: 0.9; margin-top: 6px; }
 
 #chat-box {
-  height: 360px;
+  flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: 24px 20px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
+  background-color: #faf9f6;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .message {
-  max-width: 75%;
-  padding: 10px 14px;
-  border-radius: 12px;
-  font-size: 14px;
+  max-width: 78%;
+  padding: 12px 16px;
+  font-size: 15px;
   line-height: 1.5;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
+  animation: slideUp 0.3s ease-out forwards;
 }
 
 .message.bot {
-  background: #f0f4f8;
-  color: #333;
+  background: #ecebe6;
+  color: #4a423e;
   align-self: flex-start;
-  border-bottom-left-radius: 4px;
+  border-radius: 20px 20px 20px 4px;
 }
 
 .message.user {
   /* 練習：把使用者訊息顏色從綠色改成你喜歡的顏色 */
-  background: #4caf87;
+  background: #c9a099;
   color: white;
   align-self: flex-end;
-  border-bottom-right-radius: 4px;
+  border-radius: 20px 20px 4px 20px;
 }
 
 .input-area {
   display: flex;
-  padding: 16px;
-  gap: 10px;
-  border-top: 1px solid #eee;
+  padding: 16px 20px;
+  gap: 12px;
+  background: white;
+  border-top: 1px solid rgba(0,0,0,0.05);
+  z-index: 10;
 }
 
 .input-area input {
   flex: 1;
-  padding: 10px 14px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  font-size: 14px;
+  padding: 12px 20px;
+  border: 1px solid transparent;
+  background: #ebeae6;
+  border-radius: 24px;
+  font-size: 15px;
   outline: none;
+  transition: all 0.2s ease;
 }
 
 .input-area input:focus {
-  border-color: #4f8ef7;
+  background: white;
+  border-color: #6c8065;
+  box-shadow: 0 0 0 3px rgba(108, 128, 101, 0.15);
 }
 
 .input-area button {
-  /* 練習：把按鈕顏色改成你喜歡的顏色
-     conflict-a 分支：改成 #4f8ef7（藍色）
-     conflict-b 分支：改成 #e84393（粉色）  */
-  background: #4f8ef7;
+  /* 練習：把按鈕顏色改成你喜歡的顏色 */
+  background: #6c8065;
   color: white;
   border: none;
-  padding: 10px 20px;
-  border-radius: 8px;
+  padding: 12px 24px;
+  border-radius: 24px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 15px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(108, 128, 101, 0.2);
 }
 
 .input-area button:hover {
-  opacity: 0.85;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(108, 128, 101, 0.3);
+}
+
+.input-area button:active {
+  transform: translateY(1px);
+  box-shadow: 0 1px 4px rgba(108, 128, 101, 0.2);
+}
+
+/* ===== feature/dark-mode 新增 ===== */
+.dark-toggle {
+  margin-top: 12px;
+  background: rgba(255,255,255,0.2);
+  border: none;
+  color: white;
+  padding: 6px 14px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background 0.2s;
 }
+
+.dark-toggle:hover {
+  background: rgba(255,255,255,0.3);
+}
+
+body.dark { background-color: #1e1e2e; }
+body.dark .container { background: #2a2b3c; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
+body.dark header { background: #1e1e2e; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
+body.dark #chat-box { background-color: #181825; }
+body.dark .message.bot { background: #313244; color: #cdd6f4; }
+body.dark .message.user { color: white; }
+body.dark .input-area { background: #2a2b3c; border-top-color: rgba(255,255,255,0.05); }
+body.dark .input-area input { background: #181825; color: #cdd6f4; border-color: transparent; }
+body.dark .input-area input:focus { background: #313244; border-color: #6c8065; box-shadow: 0 0 0 3px rgba(108, 128, 101, 0.3); }