fix: the chat's message field lower - 42px for a line instead of 52, the clip and send to scale, still centred on the last line

internal/server/web/static/ai.js

@@ -885,8 +885,8 @@
   // its width and wrap the last word a character too early.
   function grow() {
     input.style.overflowY = 'hidden';
-    input.style.height = '40px';
+    input.style.height = '32px';
-    const h = input.scrollHeight + 2;
+    const h = input.scrollHeight;
     input.style.height = Math.min(140, h) + 'px';
     input.style.overflowY = h > 140 ? 'auto' : 'hidden';
   }

internal/server/web/static/app.css

@@ -896,25 +896,25 @@ body.touch.term-active .ai-fab { bottom:104px; }
 .ai-code pre { margin:0; padding:8px; background:#0c0f13; border:1px solid var(--border); border-radius:7px; overflow:auto; font-size:12.5px; white-space:pre-wrap; }
 .ai-code .ai-run { margin-top:6px; }
 .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 { position:relative; min-width:0; flex:1; padding:4px; 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); }
 /* 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). */
+   at the bottom, centred on that line (a line's field is their height). */
 .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 { flex:1; min-width:0; resize:none; font:inherit; font-size:16px; line-height:22px; padding:5px 6px; height:32px; 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; margin-bottom:2px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:transparent; border:0; border-radius:50%; }
+.ai-attach { flex:none; width:32px; height:32px; padding:0; 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 2px -5px; overflow:hidden;
+.ai-send { flex:none; box-sizing:border-box; width:0; height:32px; min-width:0; padding:0; margin:0 0 0 -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 2px 0; opacity:1; transform:none; pointer-events:auto; }
+.ai-send.show { width:32px; margin: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); }
@@ -1004,7 +1004,7 @@ body:not(.touch) .ai-fab { cursor:grab; touch-action:none; }
 body.ai-dragging .ai-fab, body.ai-dragging .ai-box { transition:none; }
 /* The field and the send button: one height on every phone, the button
    square whatever the text size. */
-.ai-form-in textarea { min-height:40px; }
+.ai-form-in textarea { min-height:32px; }
 .ai-form-in textarea { border-radius:10px; }
 /* Настройки: the key with its eye; PostgreSQL's fields only when chosen. */
 .ai-form .keybox { display:flex; gap:6px; align-items:center; }