refactor: 对话输入框响应式布局重构，支持水平/垂直布局自动切换

src/styles/pages/_console.scss

@@ -208,11 +208,18 @@
 .chat-input-box {
     border: 1px solid var(--color-border-3);
     border-radius: 16px;
-    overflow: hidden;
     background: var(--color-bg-1);
     transition: all var(--transition);
     box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
 
+    &--horizontal {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        padding: 8px 12px 8px 8px;
+        min-height: 44px;
+    }
+
     &:hover {
         border-color: #CBD5E1;
         box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
@@ -226,21 +233,27 @@
 
 .chat-input-main {
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     gap: 8px;
-    padding: 10px 12px 10px 14px;
+    padding: 0;
+    flex: 1;
+
+    @include chat-mobile {
+        width: 100%;
+        padding: 0;
+    }
 }
 
 .chat-input {
     flex: 1;
-    padding: 6px 2px;
+    padding: 0 2px;
     border: none;
     outline: none;
     font-size: 15px;
     resize: none;
-    min-height: 24px;
+    height: 28px;
     max-height: 200px;
-    line-height: 1.6;
+    line-height: 28px;
     background: transparent;
     color: var(--color-text-1);
 
@@ -254,6 +267,11 @@
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
+
+    @include chat-mobile {
+        width: 100%;
+        justify-content: space-between;
+    }
 }
 
 .chat-input-tools {
@@ -261,6 +279,10 @@
     gap: 2px;
     padding-right: 6px;
     border-right: 1px solid var(--color-border-2);
+
+    @include chat-mobile {
+        border-right: none;
+    }
 }
 
 .chat-input-tool {
@@ -876,3 +898,24 @@
         padding: 12px 16px 16px;
     }
 }
+
+// 聊天输入框响应式布局
+@include chat-mobile {
+    .chat-input-box {
+        &--horizontal {
+            flex-direction: column;
+            padding: 8px 12px;
+        }
+    }
+
+    .model-selector {
+        width: 100%;
+        flex-shrink: 0;
+
+        .model-selector__trigger {
+            border-right: none;
+            border-bottom: 1px solid var(--color-border-2);
+            border-radius: 16px;
+        }
+    }
+}

src/styles/pages/model-selector/_index.scss

@@ -2,7 +2,28 @@
 
 .model-selector {
     position: relative;
-    z-index: 100;
+    z-index: 1;
+    display: flex;
+    align-items: stretch;
+    margin-right: 8px;
+
+    &--open {
+        z-index: 1000;
+    }
+
+    &__dropdown {
+        z-index: 1001;
+    }
+
+    &--compact {
+        width: 100px;
+        flex-shrink: 0;
+    }
+
+    &:not(.model-selector--compact) {
+        width: 160px;
+        flex-shrink: 0;
+    }
 }
 
 .model-selector--open {
@@ -21,17 +42,26 @@
     align-items: center;
     justify-content: space-between;
     gap: $spacing-2;
-    padding: 6px $spacing-3;
+    padding: 0 10px;
     background: var(--color-bg-2);
     border: none;
-    border-bottom: 1px solid var(--color-border-2);
+    border-right: 1px solid var(--color-border-2);
+    border-radius: 16px;
     cursor: pointer;
     transition: background var(--transition);
     user-select: none;
+    width: 100%;
+    box-sizing: border-box;
 
     &:hover {
         background: var(--color-bg-3);
     }
+
+    .model-selector--compact & {
+        border-right: 1px solid var(--color-border-2);
+        border-radius: 16px;
+        padding: 0 8px;
+    }
 }
 
 .model-selector__content {
@@ -40,6 +70,7 @@
     gap: $spacing-2;
     flex: 1;
     min-width: 0;
+    overflow: hidden;
 }
 
 .model-selector__icon {
@@ -82,19 +113,16 @@
 }
 
 .model-selector__dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
+    position: fixed;
     background: var(--color-bg-1);
     border: 1px solid var(--color-primary);
-    border-top: none;
-    border-radius: 0 0 $radius-lg $radius-lg;
+    border-radius: 16px;
     box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
-    overflow: hidden;
     animation: dropdownExpand 0.2s ease-out;
     max-height: 350px;
     overflow-y: auto;
+    min-width: 160px;
+    padding: 4px 0;
 
     &::-webkit-scrollbar {
         width: 6px;
@@ -197,7 +225,7 @@
 
 @include mobile {
     .model-selector__trigger {
-        padding: 4px $spacing-2;
+        padding: 0 8px;
     }
 
     .model-selector__name {

src/styles/tokens/_breakpoints.scss

@@ -3,3 +3,8 @@
 $breakpoint-mobile: 768px;
 $breakpoint-tablet: 1024px;
 $breakpoint-desktop: 1025px;
+
+// 聊天输入框断点
+$breakpoint-chat-mobile: 480px;
+$breakpoint-chat-tablet: 768px;
+$breakpoint-chat-desktop: 769px;

src/styles/tokens/_mixins.scss

@@ -23,6 +23,25 @@
     }
 }
 
+// 聊天输入框响应式断点
+@mixin chat-mobile {
+    @media (max-width: #{$breakpoint-chat-mobile}) {
+        @content;
+    }
+}
+
+@mixin chat-tablet {
+    @media (min-width: #{$breakpoint-chat-mobile + 1}) and (max-width: #{$breakpoint-chat-tablet}) {
+        @content;
+    }
+}
+
+@mixin chat-desktop {
+    @media (min-width: #{$breakpoint-chat-desktop}) {
+        @content;
+    }
+}
+
 // 弹性布局
 @mixin flex-center {
     display: flex;