diff --git a/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart b/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart
index f73ca27..f9d95d8 100644
--- a/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart
+++ b/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart
@@ -744,27 +744,41 @@ class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> {
                   height: 44,
                   padding: const EdgeInsets.symmetric(horizontal: 16),
                   decoration: const BoxDecoration(
-                    color: HaloTokens.bg,
+                    // White bg so the pill stands out against the cream page
+                    // (HaloTokens.bg) — previously the pill bg matched the
+                    // page exactly, leaving only the very-light border to
+                    // define the shape (looked like a soft shadow). Border
+                    // color is unchanged — the visible outline keeps the
+                    // same tone.
+                    color: HaloTokens.surface,
                     borderRadius: HaloRadius.pill,
                     border: Border.fromBorderSide(
                       BorderSide(color: HaloTokens.border),
                     ),
                   ),
-                  child: TextField(
-                    controller: widget.messageController,
-                    onChanged: widget.onTextChanged,
-                    textInputAction: TextInputAction.send,
-                    onSubmitted: (_) => widget.onSend(),
-                    textAlignVertical: TextAlignVertical.center,
-                    style: const TextStyle(fontSize: 13.5, color: HaloTokens.ink),
-                    decoration: const InputDecoration(
-                      hintText: 'ketik balasan...',
-                      hintStyle: TextStyle(color: HaloTokens.inkMuted, fontSize: 13.5),
-                      isCollapsed: true,
-                      border: InputBorder.none,
-                      enabledBorder: InputBorder.none,
-                      focusedBorder: InputBorder.none,
-                      disabledBorder: InputBorder.none,
+                  // Center wrapper makes the TextField sit on the vertical
+                  // midline of the 44dp pill. `textAlignVertical: center`
+                  // + `isCollapsed: true` alone don't center against the
+                  // parent height — they only center within the field's
+                  // own intrinsic line-box, which then docks to the top of
+                  // the parent. Wrapping in Center delegates the vertical
+                  // alignment to the container's stack.
+                  child: Center(
+                    child: TextField(
+                      controller: widget.messageController,
+                      onChanged: widget.onTextChanged,
+                      textInputAction: TextInputAction.send,
+                      onSubmitted: (_) => widget.onSend(),
+                      style: const TextStyle(fontSize: 13.5, color: HaloTokens.ink),
+                      decoration: const InputDecoration(
+                        hintText: 'ketik balasan...',
+                        hintStyle: TextStyle(color: HaloTokens.inkMuted, fontSize: 13.5),
+                        isCollapsed: true,
+                        border: InputBorder.none,
+                        enabledBorder: InputBorder.none,
+                        focusedBorder: InputBorder.none,
+                        disabledBorder: InputBorder.none,
+                      ),
                     ),
                   ),
                 ),
@@ -886,31 +900,12 @@ class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> {
           const SizedBox(height: 8),
           Text('Tuliskan pesan terakhirmu untuk $name', textAlign: TextAlign.center),
           const SizedBox(height: 24),
-          // Pill-shaped, single-line text field with the border color picked
-          // up from the previous "shadow" tone (HaloTokens.border). Container
-          // fixes the height so textAlignVertical can center the entry.
-          Container(
-            height: 56,
-            padding: const EdgeInsets.symmetric(horizontal: 20),
-            decoration: BoxDecoration(
-              color: HaloTokens.surface,
-              borderRadius: BorderRadius.circular(100),
-              border: Border.all(color: HaloTokens.border, width: 1),
-            ),
-            child: TextField(
-              controller: widget.goodbyeController,
-              maxLines: 1,
-              textAlignVertical: TextAlignVertical.center,
-              style: const TextStyle(fontSize: 14, color: HaloTokens.ink),
-              decoration: const InputDecoration(
-                hintText: 'Terima kasih sudah curhat...',
-                hintStyle: TextStyle(color: HaloTokens.inkMuted, fontSize: 14),
-                isCollapsed: true,
-                border: InputBorder.none,
-                enabledBorder: InputBorder.none,
-                focusedBorder: InputBorder.none,
-                disabledBorder: InputBorder.none,
-              ),
+          TextField(
+            controller: widget.goodbyeController,
+            maxLines: 3,
+            decoration: InputDecoration(
+              hintText: 'Terima kasih sudah curhat...',
+              border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
             ),
           ),
           const SizedBox(height: 16),