From f6e2ef5dcb54efe3a3cd41e012ac9f2d6d48efc5 Mon Sep 17 00:00:00 2001
From: Alexej Wolff <awolff@draug.me>
Date: Wed, 11 Feb 2026 16:08:54 +0100
Subject: [PATCH] design: mobile-friendly DeepSeek-style chat UI

---
 src/pages/CreateStoryPage.css |  17 ++
 src/pages/GamePage.css        | 309 ++++++++++++++++++++--------------
 src/pages/StoriesPage.css     |  43 +++++
 3 files changed, 241 insertions(+), 128 deletions(-)

diff --git a/src/pages/CreateStoryPage.css b/src/pages/CreateStoryPage.css
index 1e03c26..fa2d22e 100644
--- a/src/pages/CreateStoryPage.css
+++ b/src/pages/CreateStoryPage.css
@@ -678,6 +678,8 @@
 @media (max-width: 600px) {
   .create-story-page {
     padding: 1rem;
+    padding-top: max(1rem, env(safe-area-inset-top));
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
   }
 
   .form-section {
@@ -705,4 +707,19 @@
   .language-btn {
     text-align: center;
   }
+
+  /* Temperature selector - вертикальный на мобильных */
+  .temperature-selector {
+    flex-direction: column;
+  }
+
+  .temp-btn {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+  }
+
+  .temp-label {
+    font-size: 0.9rem;
+  }
 }
diff --git a/src/pages/GamePage.css b/src/pages/GamePage.css
index d2a402d..45ea9e6 100644
--- a/src/pages/GamePage.css
+++ b/src/pages/GamePage.css
@@ -3,9 +3,8 @@
   height: 100dvh;
   display: flex;
   flex-direction: column;
-  background: #0d0d0d;
+  background: #000;
   padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
 }
 
 .game-error {
@@ -20,40 +19,45 @@
 .game-header {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  padding-left: max(1.5rem, env(safe-area-inset-left));
-  padding-right: max(1.5rem, env(safe-area-inset-right));
-  background: #1a1a1a;
-  border-bottom: 1px solid #333;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  padding-left: max(1rem, env(safe-area-inset-left));
+  padding-right: max(1rem, env(safe-area-inset-right));
+  background: #0a0a0a;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .back-btn {
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #2a2a2a;
-  border-radius: 10px;
-  color: #ccc;
+  background: transparent;
+  border-radius: 50%;
+  color: #999;
   text-decoration: none;
-  font-size: 1.2rem;
-  transition: background 0.2s;
+  font-size: 1.1rem;
+  transition: all 0.2s;
 }
 
 .back-btn:hover {
-  background: #333;
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
 }
 
 .header-info {
   flex: 1;
+  min-width: 0;
 }
 
 .header-info h1 {
-  font-size: 1.1rem;
+  font-size: 1rem;
   margin: 0;
   color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .header-session {
@@ -61,30 +65,31 @@
 }
 
 .session-selector {
-  background: rgba(102, 126, 234, 0.2);
-  border: 1px solid rgba(102, 126, 234, 0.3);
-  border-radius: 8px;
-  padding: 0.3rem 0.6rem;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 16px;
+  padding: 0.35rem 0.7rem;
   font-size: 0.8rem;
-  color: #a0b4ff;
+  color: #999;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .session-selector:hover {
-  background: rgba(102, 126, 234, 0.3);
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
 }
 
 .session-menu {
   position: absolute;
   top: 100%;
-  left: 0;
+  right: 0;
   margin-top: 0.5rem;
-  background: #1e1e2e;
-  border: 1px solid #333;
+  background: #141414;
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   min-width: 220px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
   z-index: 100;
   overflow: hidden;
 }
@@ -94,23 +99,23 @@
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid #333;
-  font-size: 0.85rem;
-  color: #888;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 0.8rem;
+  color: #666;
 }
 
 .new-session-btn {
-  background: rgba(80, 200, 120, 0.2);
+  background: rgba(34, 197, 94, 0.15);
   border: none;
-  border-radius: 6px;
-  padding: 0.3rem 0.5rem;
-  font-size: 0.9rem;
+  border-radius: 12px;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.85rem;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .new-session-btn:hover {
-  background: rgba(80, 200, 120, 0.4);
+  background: rgba(34, 197, 94, 0.25);
 }
 
 .session-list {
@@ -121,7 +126,7 @@
 .session-item {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #2a2a3a;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .session-item:last-child {
@@ -129,7 +134,7 @@
 }
 
 .session-item.active {
-  background: rgba(102, 126, 234, 0.15);
+  background: rgba(37, 99, 235, 0.12);
 }
 
 .session-name {
@@ -138,11 +143,11 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0.2rem;
-  padding: 0.75rem 1rem;
+  padding: 0.65rem 1rem;
   background: none;
   border: none;
-  color: #fff;
-  font-size: 0.9rem;
+  color: #ddd;
+  font-size: 0.85rem;
   cursor: pointer;
   text-align: left;
   transition: background 0.2s;
@@ -153,8 +158,8 @@
 }
 
 .session-messages {
-  font-size: 0.75rem;
-  color: #666;
+  font-size: 0.7rem;
+  color: #555;
 }
 
 .delete-session-btn {
@@ -173,30 +178,32 @@
 }
 
 .header-protagonist {
-  font-size: 0.85rem;
-  color: #888;
+  font-size: 0.8rem;
+  color: #666;
 }
 
 .header-stats {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .stat-badge {
-  padding: 0.4rem 0.75rem;
-  border-radius: 20px;
-  font-size: 0.8rem;
+  padding: 0.35rem 0.65rem;
+  border-radius: 16px;
+  font-size: 0.75rem;
   font-weight: 500;
+  background: rgba(255, 255, 255, 0.08);
+  color: #888;
 }
 
 .stat-badge.health {
-  background: rgba(255, 107, 107, 0.15);
-  color: #ff8a8a;
+  background: rgba(239, 68, 68, 0.12);
+  color: #f87171;
 }
 
 .stat-badge.location {
-  background: rgba(102, 126, 234, 0.15);
-  color: #a0b4ff;
+  background: rgba(37, 99, 235, 0.12);
+  color: #60a5fa;
 }
 
 .game-content {
@@ -209,15 +216,17 @@
 .messages-container {
   flex: 1;
   overflow-y: auto;
-  padding: 1.5rem;
+  padding: 1rem;
+  padding-left: max(1rem, env(safe-area-inset-left));
+  padding-right: max(1rem, env(safe-area-inset-right));
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .message {
-  max-width: 85%;
-  animation: fadeIn 0.3s ease;
+  max-width: 88%;
+  animation: fadeIn 0.25s ease;
 }
 
 @keyframes fadeIn {
@@ -240,22 +249,23 @@
 }
 
 .message-content {
-  padding: 1rem 1.25rem;
-  border-radius: 16px;
-  line-height: 1.6;
+  padding: 0.875rem 1rem;
+  border-radius: 18px;
+  line-height: 1.55;
+  font-size: 0.95rem;
 }
 
 .message.user .message-content {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #2563eb;
   color: white;
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 6px;
 }
 
 .message.assistant .message-content {
-  background: #1f1f1f;
-  color: #ddd;
-  border: 1px solid #333;
-  border-bottom-left-radius: 4px;
+  background: #1a1a1a;
+  color: #e5e5e5;
+  border: none;
+  border-bottom-left-radius: 6px;
 }
 
 .message-content p {
@@ -288,41 +298,42 @@
 }
 
 .message-content blockquote {
-  border-left: 3px solid #667eea;
-  padding-left: 1rem;
-  margin: 0.75rem 0;
-  color: #aaa;
+  border-left: 2px solid #2563eb;
+  padding-left: 0.875rem;
+  margin: 0.5rem 0;
+  color: #999;
   font-style: italic;
 }
 
 .message-content code {
-  background: #2a2a2a;
-  padding: 0.15rem 0.4rem;
+  background: #252525;
+  padding: 0.125rem 0.35rem;
   border-radius: 4px;
   font-family: monospace;
-  font-size: 0.9em;
+  font-size: 0.85em;
 }
 
 .message-content hr {
   border: none;
-  border-top: 1px solid #444;
-  margin: 1rem 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin: 0.75rem 0;
 }
 
 .message-time {
   display: block;
-  font-size: 0.7rem;
-  color: #666;
-  margin-top: 0.35rem;
-  padding: 0 0.5rem;
+  font-size: 0.65rem;
+  color: #444;
+  margin-top: 0.25rem;
+  padding: 0 0.4rem;
 }
 
 .message.user .message-time {
   text-align: right;
+  color: rgba(255, 255, 255, 0.4);
 }
 
 .message.loading .message-content {
-  padding: 1.25rem 1.5rem;
+  padding: 1rem;
 }
 
 .typing-indicator {
@@ -331,9 +342,9 @@
 }
 
 .typing-indicator span {
-  width: 8px;
-  height: 8px;
-  background: #667eea;
+  width: 6px;
+  height: 6px;
+  background: #2563eb;
   border-radius: 50%;
   animation: typing 1.4s infinite ease-in-out;
 }
@@ -353,10 +364,10 @@
   60%,
   100% {
     transform: translateY(0);
-    opacity: 0.4;
+    opacity: 0.3;
   }
   30% {
-    transform: translateY(-8px);
+    transform: translateY(-6px);
     opacity: 1;
   }
 }
@@ -365,18 +376,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.75rem 1rem;
-  background: rgba(255, 107, 107, 0.1);
-  border: 1px solid rgba(255, 107, 107, 0.3);
-  border-radius: 10px;
-  color: #ff8a8a;
-  font-size: 0.9rem;
+  padding: 0.65rem 0.875rem;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 12px;
+  color: #f87171;
+  font-size: 0.85rem;
 }
 
 .error-message button {
   background: none;
   border: none;
-  color: #ff8a8a;
+  color: #f87171;
   cursor: pointer;
   padding: 0.25rem;
 }
@@ -409,25 +420,26 @@
 
 .input-container {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1rem 1.5rem;
-  padding-left: max(1.5rem, env(safe-area-inset-left));
-  padding-right: max(1.5rem, env(safe-area-inset-right));
-  background: #131313;
-  border-top: 1px solid #222;
+  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);
 }
 
 .input-container textarea {
   flex: 1;
-  min-height: 44px;
-  max-height: 150px;
-  padding: 0.75rem 1rem;
+  min-height: 40px;
+  max-height: 120px;
+  padding: 0.625rem 1rem;
   background: #1a1a1a;
-  border: 2px solid #333;
-  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
   color: white;
-  font-size: 1rem;
+  font-size: 0.95rem;
   font-family: inherit;
   resize: none;
   transition: border-color 0.2s, height 0.1s ease;
@@ -437,53 +449,59 @@
 
 .input-container textarea:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: rgba(37, 99, 235, 0.5);
 }
 
 .input-container textarea::placeholder {
-  color: #666;
+  color: #555;
 }
 
 .send-btn {
-  width: 50px;
-  min-width: 50px;
-  height: 50px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  background: #2563eb;
   border: none;
-  border-radius: 12px;
+  border-radius: 50%;
   color: white;
-  font-size: 1.25rem;
+  font-size: 1rem;
   cursor: pointer;
-  transition:
-    transform 0.2s,
-    opacity 0.2s;
+  transition: all 0.2s;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .send-btn:hover:not(:disabled) {
+  background: #1d4ed8;
   transform: scale(1.05);
 }
 
 .send-btn:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
 .stop-btn {
-  width: 50px;
-  min-width: 50px;
-  height: 50px;
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  background: #dc2626;
   border: none;
-  border-radius: 12px;
+  border-radius: 50%;
   color: white;
-  font-size: 1.25rem;
+  font-size: 1rem;
   cursor: pointer;
-  transition: transform 0.2s;
+  transition: all 0.2s;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .stop-btn:hover {
+  background: #b91c1c;
   transform: scale(1.05);
 }
 
@@ -529,7 +547,12 @@
 
 @media (max-width: 600px) {
   .game-header {
-    padding: 0.75rem 1rem;
+    padding: 0.5rem 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .header-info h1 {
+    font-size: 1rem;
   }
 
   .header-stats {
@@ -537,18 +560,48 @@
   }
 
   .messages-container {
-    padding: 1rem;
+    padding: 0.75rem;
   }
 
   .message {
-    max-width: 95%;
+    max-width: 92%;
+  }
+
+  .message-content {
+    padding: 0.75rem 0.875rem;
+    font-size: 0.9rem;
   }
 
   .quick-actions {
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0.75rem;
   }
 
   .input-container {
-    padding: 0.75rem 1rem 1rem;
+    padding: 0.5rem 0.75rem;
+    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+  }
+
+  .input-container textarea {
+    min-height: 36px;
+    padding: 0.5rem 0.875rem;
+    font-size: 0.9rem;
+  }
+
+  .send-btn,
+  .stop-btn {
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+  }
+
+  .session-selector {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .session-menu {
+    min-width: 200px;
+    right: 0;
+    left: auto;
   }
 }
diff --git a/src/pages/StoriesPage.css b/src/pages/StoriesPage.css
index d7dd169..1f1ba81 100644
--- a/src/pages/StoriesPage.css
+++ b/src/pages/StoriesPage.css
@@ -230,3 +230,46 @@
 .btn-delete:hover {
   background: rgba(255, 107, 107, 0.2);
 }
+
+@media (max-width: 600px) {
+  .stories-page {
+    padding: 1rem;
+  }
+
+  .stories-header h1 {
+    font-size: 1.75rem;
+  }
+
+  .stories-header p {
+    font-size: 0.95rem;
+  }
+
+  .stories-controls {
+    flex-direction: column;
+  }
+
+  .search-input {
+    min-width: 100%;
+  }
+
+  .create-btn {
+    text-align: center;
+  }
+
+  .stories-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .story-card {
+    padding: 1rem;
+  }
+
+  .story-info h2 {
+    font-size: 1.1rem;
+  }
+
+  .story-meta {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+}