Hold a queued message below the indicator until the turn takes it

The backend records a message the moment it is sent, so one sent into a
running turn landed in the transcript at the time *we* spoke -- above the
working indicator, in among things the session had already read. It had
not read it. Showing it there says otherwise.

Messages sent while a turn is in flight are now held below the indicator,
drawn quieter, and take their place in the conversation when the turn
ends. That is an approximation and worth naming: the CLI injects a queued
message at a tool boundary, and tells nobody when it does, so the end of
the turn is the first moment anything here can honestly say the message
was taken. It errs toward "not yet read", which is the direction that
cannot mislead.

Also in this change, from the same pass over the screen: the app draws
above the gesture strip rather than under it, and the three status colours
that were literals in two other files -- an amber, a green and a red off
Material's defaults -- are now Catppuccin members in Theme.kt beside the
rest of the scheme.

The ordering is verified by construction rather than photographed: the
list is bottom-anchored, so the first item emitted is the lowest on
screen, and the queued block is emitted before the indicator. Staging a
real long-running turn to photograph cost four model turns and never
produced one, because the model kept declining to sleep -- which is its
own finding, and the reason the next change is a test command in the echo
driver.

app/androidApp/src/main/kotlin/com/example/aiapp/SessionScreen.kt

@@ -182,6 +182,14 @@ fun SessionScreen(
     // Every transcript event loaded, in order, beside the rows they folded
     // into. See `apply`.
     var loaded by remember { mutableStateOf(listOf<SessionEvent>()) }
+    // Messages sent into a turn that was already running. The backend
+    // records them the moment they are sent, so they land in the
+    // transcript at the time *we* spoke -- but the session has not read
+    // them yet, and showing them in that position claims it has. They are
+    // held out until the turn ends, which is the first moment anything
+    // here can honestly say they were taken.
+    var queued by remember { mutableStateOf(listOf<String>()) }
+    val running = status == "running" || status == "compacting"
     var moreHistory by remember { mutableStateOf(true) }
     var loadingHistory by remember { mutableStateOf(false) }
     var ready by remember { mutableStateOf(false) }
@@ -313,6 +321,12 @@ fun SessionScreen(
             }
     }
 
+    // The turn ending is the moment a queued message stops being pending:
+    // whatever it was going to be injected into is over, so it has been
+    // read or it never will be, and either way it belongs in the
+    // conversation where it happened.
+    LaunchedEffect(running) { if (!running) queued = emptyList() }
+
     LaunchedEffect(summary.setupName, summary.provider) {
         offeredModels =
             try {
@@ -331,8 +345,6 @@ fun SessionScreen(
             }
     }
 
-    val running = status == "running" || status == "compacting"
-
     fun act(action: () -> Unit) {
         scope.launch {
             try {
@@ -350,6 +362,7 @@ fun SessionScreen(
         if (text.isEmpty() && attachments.isEmpty()) return
         input = ""
         pendingAttachments = emptyList()
+        if (running && text.isNotEmpty()) queued = queued + text
         act { sendMessage(settings, summary.id, text, attachments) }
     }
 
@@ -418,6 +431,16 @@ fun SessionScreen(
             )
         }
 
+        // Anything still queued is shown separately, below, so it must not
+        // also appear in place. Matched by text from the end, since that is
+        // all that distinguishes one message from an identical earlier one.
+        val shown =
+            if (queued.isEmpty()) items
+            else {
+                val outstanding = queued.toMutableList()
+                items.filterNot { it is TranscriptItem.UserMsg && outstanding.remove(it.text) }
+            }
+
         // Laid out from the bottom, with the newest message at index 0.
         //
         // The obvious arrangement -- oldest first, then scroll to the end
@@ -438,6 +461,16 @@ fun SessionScreen(
                 contentPadding = PaddingValues(16.dp),
                 verticalArrangement = Arrangement.spacedBy(8.dp),
             ) {
+                // Below the working indicator, because that is where they
+                // are in the session's reading of events: after everything
+                // it has taken in, and not yet taken in themselves.
+                if (queued.isNotEmpty()) {
+                    item {
+                        Column(horizontalAlignment = Alignment.End) {
+                            queued.forEach { text -> UserBubble(text, pending = true) }
+                        }
+                    }
+                }
                 // Where the next thing will appear: at the end of what has
                 // happened, which in this layout is the top of the list.
                 // In the corner it was a label about the session; here it
@@ -472,7 +505,7 @@ fun SessionScreen(
                 }
                 // Reversed to match the layout, so index 0 is the newest and
                 // the reader still sees them in the order they happened.
-                items(items.asReversed()) { item ->
+                items(shown.asReversed()) { item ->
                     when (item) {
                         is TranscriptItem.UserMsg -> UserBubble(item.text)
                         is TranscriptItem.AssistantMsg ->
@@ -636,16 +669,28 @@ private fun SessionImage(settings: ServerSettings, sessionId: String, ref: Strin
 }
 
 @Composable
-private fun UserBubble(text: String) {
+private fun UserBubble(text: String, pending: Boolean = false) {
     Box(Modifier.fillMaxWidth()) {
         Card(
+            // A message the session has not read yet is drawn quieter than
+            // one it has. The difference is in degree -- said, not yet
+            // heard -- which is what colour alone can carry; where it sits
+            // is what says the rest.
             colors =
                 CardDefaults.cardColors(
-                    containerColor = MaterialTheme.colorScheme.primaryContainer
+                    containerColor =
+                        if (pending) MaterialTheme.colorScheme.surfaceVariant
+                        else MaterialTheme.colorScheme.primaryContainer
                 ),
             modifier = Modifier.align(Alignment.CenterEnd).padding(start = 48.dp),
         ) {
-            Text(text, modifier = Modifier.padding(12.dp))
+            Text(
+                text,
+                modifier = Modifier.padding(12.dp),
+                color =
+                    if (pending) MaterialTheme.colorScheme.onSurfaceVariant
+                    else MaterialTheme.colorScheme.onPrimaryContainer,
+            )
         }
     }
 }