From ae595ca8ce6002179ae9f2e8445b4b26859bc84d Mon Sep 17 00:00:00 2001
From: Alexej Wolff <awolff@draug.me>
Date: Wed, 11 Feb 2026 16:18:50 +0100
Subject: [PATCH] design: floating input container like DeepSeek

---
 src/pages/GamePage.css | 64 +++++++++++++++++++++---------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/pages/GamePage.css b/src/pages/GamePage.css
index c9ae5e3..f4f99fd 100644
--- a/src/pages/GamePage.css
+++ b/src/pages/GamePage.css
@@ -434,49 +434,50 @@
   display: flex;
   align-items: flex-end;
   gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  padding-left: max(1rem, env(safe-area-inset-left));
-  padding-right: max(1rem, env(safe-area-inset-right));
-  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
-  background: #0a0a0a;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  margin: 0.5rem;
+  margin-left: max(0.5rem, env(safe-area-inset-left));
+  margin-right: max(0.5rem, env(safe-area-inset-right));
+  margin-bottom: max(0.5rem, env(safe-area-inset-bottom));
+  padding: 0.5rem;
+  background: #1a1a1a;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
 }
 
 .input-container textarea {
   flex: 1;
-  min-height: 40px;
+  min-height: 36px;
   max-height: 120px;
-  padding: 0.625rem 1rem;
-  background: #1a1a1a;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 20px;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: none;
+  border-radius: 18px;
   color: white;
   font-size: 0.95rem;
   font-family: inherit;
   resize: none;
-  transition: border-color 0.2s, height 0.1s ease;
+  transition: height 0.1s ease;
   overflow-y: auto;
   line-height: 1.4;
 }
 
 .input-container textarea:focus {
   outline: none;
-  border-color: rgba(37, 99, 235, 0.5);
 }
 
 .input-container textarea::placeholder {
-  color: #555;
+  color: #666;
 }
 
 .send-btn {
-  width: 40px;
-  min-width: 40px;
-  height: 40px;
+  width: 36px;
+  min-width: 36px;
+  height: 36px;
   background: #2563eb;
   border: none;
   border-radius: 50%;
   color: white;
-  font-size: 1rem;
+  font-size: 0.95rem;
   cursor: pointer;
   transition: all 0.2s;
   flex-shrink: 0;
@@ -487,23 +488,22 @@
 
 .send-btn:hover:not(:disabled) {
   background: #1d4ed8;
-  transform: scale(1.05);
 }
 
 .send-btn:disabled {
-  opacity: 0.4;
+  opacity: 0.3;
   cursor: not-allowed;
 }
 
 .stop-btn {
-  width: 40px;
-  min-width: 40px;
-  height: 40px;
+  width: 36px;
+  min-width: 36px;
+  height: 36px;
   background: #dc2626;
   border: none;
   border-radius: 50%;
   color: white;
-  font-size: 1rem;
+  font-size: 0.95rem;
   cursor: pointer;
   transition: all 0.2s;
   flex-shrink: 0;
@@ -514,7 +514,6 @@
 
 .stop-btn:hover {
   background: #b91c1c;
-  transform: scale(1.05);
 }
 
 /* Streaming message animation */
@@ -589,21 +588,22 @@
   }
 
   .input-container {
-    padding: 0.5rem 0.75rem;
-    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+    margin: 0.375rem;
+    margin-bottom: max(0.375rem, env(safe-area-inset-bottom));
+    padding: 0.375rem;
   }
 
   .input-container textarea {
-    min-height: 36px;
-    padding: 0.5rem 0.875rem;
+    min-height: 32px;
+    padding: 0.4rem 0.875rem;
     font-size: 0.9rem;
   }
 
   .send-btn,
   .stop-btn {
-    width: 36px;
-    min-width: 36px;
-    height: 36px;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
   }
 
   .session-selector {