Updated all text to English

src/styles/components.css

@@ -1,8 +1,16 @@
-/* Хедер и карточки */
+/* Основные стили для полноэкранного чата */
+.minimal-bg {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
 .header-minimal {
     background: rgb(35 36 35 / 13%);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
+    flex-shrink: 0;
+    height: 64px; /* Фиксированная высота хедера */
 }
 
 .header-minimal .cursor-pointer:hover {
@@ -13,6 +21,56 @@
     transform: scale(0.95);
 }
 
+/* Основной контейнер чата занимает всю оставшуюся высоту */
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 64px); /* 64px - высота хедера */
+    min-height: 0;
+    flex: 1;
+}
+
+.chat-messages-area {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-input-area {
+    flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    background: rgba(42, 43, 42, 0.95);
+    backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(75, 85, 99, 0.2);
+}
+
+/* Контейнер сообщений должен занимать всю доступную высоту */
+.chat-messages-area > div:first-child {
+    height: 100%;
+    overflow-y: auto;
+    padding: 1rem;
+    scroll-behavior: smooth;
+}
+
+/* Для мобильных устройств учитываем высоту виртуальной клавиатуры */
+@media (max-width: 768px) {
+    .chat-container {
+        height: calc(100vh - 64px);
+        height: calc(100dvh - 64px); /* dvh для поддержки динамической высоты на мобильных */
+    }
+}
+
+/* Исправление для основного контейнера приложения */
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
 .card-minimal {
     background: rgba(42, 43, 42, 0.8);
     backdrop-filter: blur(16px);
@@ -25,7 +83,6 @@
     transition: all 0.2s ease;
 }
 
-/* Статусы */
 .status-dot {
     width: 8px;
     height: 8px;
@@ -39,7 +96,6 @@
 .status-disconnected { background: #6b7280; }
 .status-verifying { background: #9ca3af; }
 
-/* Security / verification */
 .security-shield {
     background: linear-gradient(135deg, #2A2B2A 0%, #3a3b3a 100%);
     border: 1px solid rgba(75, 85, 99, 0.3);
@@ -57,7 +113,6 @@
     text-align: center;
 }
 
-/* Иконки и размеры */
 .icon-container {
     width: 40px;
     height: 40px;
@@ -79,7 +134,6 @@
 .icon-xl { font-size: 1.25rem; }
 .icon-2xl { font-size: 1.5rem; }
 
-/* Step number */
 .step-number {
     width: 32px;
     height: 32px;
@@ -93,7 +147,6 @@
     font-size: 14px;
 }
 
-/* Fallback styles for icons (ВОТ ОН — блок, который я пропустил) */
 .icon-fallback {
     display: inline-block;
     width: 1em;
@@ -103,7 +156,6 @@
     background-position: center;
 }
 
-/* Ensure icons are visible */
 .fas, .far, .fab {
     display: inline-block;
     font-style: normal;
@@ -122,7 +174,7 @@
     line-height: 1;
 }
 
-/* Icon loading fallback (первый вариант) */
+/* Icon loading fallback */
 .icon-loading {
     opacity: 0.7;
     animation: iconPulse 1.5s ease-in-out infinite;
@@ -153,6 +205,7 @@
 .fa-fallback .fas.fa-signature::before { content: "✍️"; }
 .fa-fallback .fas.fa-power-off::before { content: "⏻"; }
 .fa-fallback .fas.fa-arrow-left::before { content: "←"; }
+.fa-fallback .fas.fa-chevron-down::before { content: "↓"; }
 
 /* Ensure fallback icons are properly sized & use emoji font */
 .fa-fallback .fas::before {
@@ -166,41 +219,6 @@ button i {
     margin-right: 0.5rem;
 }
 
-/* Повторное определение не удалял — второй вариант icon-loading переопределит первый (как в оригинале) */
-.icon-loading {
-    opacity: 0.6;
-    animation: iconPulse 2s ease-in-out infinite;
-}
-
-/* Чат */
-.chat-container {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - 128px);
-    min-height: 0;
-}
-.chat-messages-area {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-}
-.chat-input-area {
-    flex-shrink: 0;
-    position: sticky;
-    bottom: 0;
-    background: rgba(42, 43, 42, 0.95);
-    backdrop-filter: blur(10px);
-}
-
-/* Интерактивные индикаторы безопасности */
-.header-minimal .cursor-pointer:hover {
-    transform: scale(1.05);
-    transition: transform 0.2s ease;
-}
-.header-minimal .cursor-pointer:active {
-    transform: scale(0.95);
-}
-
 /* Pay-per-session UI */
 .session-timer {
     background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
@@ -236,7 +254,6 @@ button i {
     transform: translateY(-2px);
 }
 
-/* Кнопки */
 .btn-primary {
     background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
     border: 1px solid rgba(249, 115, 22, 0.3);
@@ -305,7 +322,6 @@ button i {
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }
 
-/* Примеры per-wallet классов (как в оригинале) */
 .wallet-logo.bitcoin-lightning { background: transparent; padding: 4px; }
 .wallet-logo.bitcoin-lightning img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
 
@@ -346,12 +362,60 @@ button i {
     animation-play-state: paused;
 }
 
-/* Анимация появления сообщений использует keyframes из animations.css */
 .message-slide {
     animation: messageSlideIn 0.3s ease-out;
 }
 
-/* Icon color improvements (повтор в оригинале — сохранил) */
+/* Анимации */
+@keyframes iconPulse {
+    0%, 100% { opacity: 0.7; }
+    50% { opacity: 1; }
+}
+
+@keyframes messageSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes walletLogosScroll {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+/* Кастомный скроллбар */
+.custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(156, 163, 175, 0.5);
+    border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(156, 163, 175, 0.7);
+}
+
 .accent-orange { color: #fb923c !important; }
 .accent-green { color: #34d399 !important; }
 .accent-red { color: #f87171 !important; }
@@ -359,8 +423,9 @@ button i {
 .accent-purple { color: #a78bfa !important; }
 .accent-gray { color: #9ca3af !important; }
 .accent-cyan { color: #22d3ee !important; }
+.accent-blue { color: #60a5fa !important; }
 
 /* Ensure icons visible in dark backgrounds */
 .text-secondary i {
     opacity: 0.8;
-}
+}