refine prompt overlay layout

packages/ui/src/styles/messaging/prompt-input.css

@@ -9,9 +9,13 @@
   @apply flex items-end gap-2 p-3;
 }
 
+.prompt-input-field {
+  position: relative;
+  width: 100%;
+}
 
 .prompt-input {
-  @apply flex-1 min-h-[96px] max-h-[200px] p-2.5 border rounded-md text-sm resize-none outline-none transition-colors;
+  @apply flex-1 w-full min-h-[56px] max-h-[96px] px-3 pt-2.5 pb-12 border rounded-md text-sm resize-none outline-none transition-colors;
   font-family: inherit;
   background-color: var(--surface-base);
   color: inherit;
@@ -19,6 +23,45 @@
   line-height: var(--line-height-normal);
 }
 
+.prompt-input-overlay {
+  position: absolute;
+  bottom: 1rem;
+  left: 0.75rem;
+  right: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  color: var(--text-muted);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.prompt-input-overlay.shell-mode {
+  color: var(--text-primary);
+}
+
+.prompt-overlay-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.prompt-overlay-warning {
+  color: var(--status-warning);
+  font-weight: 500;
+}
+
+.prompt-overlay-shell-active {
+  color: var(--status-success);
+  font-weight: 600;
+}
+
+.prompt-overlay-muted {
+  color: var(--text-muted);
+}
+
 .prompt-input.shell-mode {
   border-color: var(--status-success);
   box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.4);
@@ -80,9 +123,6 @@
   height: 1rem;
 }
 
-.prompt-input-hints {
-  @apply px-4 pb-2 flex justify-between items-center;
-}
 
 .hint {
   @apply text-xs;
@@ -141,3 +181,26 @@
 .attachment-download:hover {
   background-color: var(--attachment-chip-ring);
 }
+
+@media (pointer: coarse) {
+  .prompt-input-overlay {
+    display: none;
+  }
+
+  .prompt-input {
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .prompt-input {
+    min-height: 64px;
+    padding: 0.5rem 0.75rem;
+    padding-bottom: 2.25rem;
+  }
+
+  .prompt-input-wrapper {
+    gap: 0.75rem;
+    padding: 0.75rem;
+  }
+}