From 46f7f743b32a7eb633152e4dbe7a57052beafc83 Mon Sep 17 00:00:00 2001
From: iRedTea <red__tea@outlook.com>
Date: Fri, 16 Oct 2026 18:04:14 +0300
Subject: [PATCH] fix: the clip and the send button keep to the last line of
 the message, as in Telegram

---
 internal/server/web/static/app.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/internal/server/web/static/app.css b/internal/server/web/static/app.css
index d210a09..0df8923 100644
--- a/internal/server/web/static/app.css
+++ b/internal/server/web/static/app.css
@@ -897,21 +897,23 @@ body.touch.term-active .ai-fab { bottom:104px; }
 .ai-form-in { display:flex; padding:8px 10px 10px; }
 .ai-inputbox { position:relative; min-width:0; flex:1; padding:5px; background:#0c0f13; border:1px solid var(--border); border-radius:13px; transition:border-color .15s, box-shadow .15s, background-color .15s; }
 .ai-inputbox:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px rgba(91,140,255,.12); }
-.ai-entry { display:flex; align-items:center; gap:5px; min-width:0; }
+/* The clip and send keep to the last line of the text, as in Telegram:
+   at the bottom, centred on that line (2px up from the field's bottom). */
+.ai-entry { display:flex; align-items:flex-end; gap:5px; min-width:0; }
 .ai-form-in textarea { flex:1; min-width:0; resize:none; font:inherit; font-size:16px; line-height:24px; padding:8px 6px; height:40px; max-height:140px; overflow-y:auto; color:var(--text); background:transparent; border:0; border-radius:8px; }
 .ai-form-in textarea:focus { outline:none; border-color:transparent; }
-.ai-attach { flex:none; width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:transparent; border:0; border-radius:50%; }
+.ai-attach { flex:none; width:36px; height:36px; padding:0; margin-bottom:2px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:transparent; border:0; border-radius:50%; }
 .ai-attach:hover { color:var(--text); background:#1b222c; }
 /* Send, as in Telegram: no plate, a blue plane that comes in when there is
    something to send (and stays as "stop" while the answer runs), and goes
    away when the field is empty. A round shade under the pointer, like the
    clip's. As far from the right edge as from the top and bottom. */
-.ai-send { flex:none; box-sizing:border-box; width:0; height:36px; min-width:0; padding:0; margin:0 0 0 -5px; overflow:hidden;
-           display:inline-flex; align-items:center; justify-content:center; align-self:center; line-height:1;
+.ai-send { flex:none; box-sizing:border-box; width:0; height:36px; min-width:0; padding:0; margin:0 0 2px -5px; overflow:hidden;
+           display:inline-flex; align-items:center; justify-content:center; align-self:flex-end; line-height:1;
            color:var(--accent); background:transparent; border:0; border-radius:50%;
            opacity:0; transform:scale(.4); pointer-events:none;
            transition:width .2s ease, margin .2s ease, opacity .16s ease, transform .24s cubic-bezier(.3,1.45,.55,1), background-color .15s, color .15s; }
-.ai-send.show { width:36px; margin:0 3px 0 0; opacity:1; transform:none; pointer-events:auto; }
+.ai-send.show { width:36px; margin:0 3px 2px 0; opacity:1; transform:none; pointer-events:auto; }
 .ai-send:hover { color:#7ab6ff; background:#1b222c; }
 .ai-send:active { transform:scale(.9); }
 .ai-send:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(79,157,255,.45); }