feat: the assistant keeps several chats - the current one named in the header, the list under its arrow to open or delete; actions as compact cards; folding parts open smoothly

internal/server/web/static/app.css

@@ -948,3 +948,53 @@ main#app > .view:not([hidden]) { animation:view-in .22s ease both; }
 .ai-think-in { min-height:0; overflow:hidden; font-size:12px; color:var(--muted); line-height:1.45; }
 .ai-think.open .ai-think-in { margin-top:4px; padding-left:10px; border-left:2px solid var(--border); max-height:220px; overflow:auto; }
 .ai-think-in p { margin:0 0 4px; }
+/* Folding parts (Сменить пароль, PIN-код, more settings, results) open and
+   shut smoothly, their arrow turning, as the + menu's groups do. */
+:root { interpolate-size: allow-keywords; }
+details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
+details > summary::-webkit-details-marker { display: none; }
+details > summary::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 4px 0 2px; border: solid currentColor;
+  border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); opacity: .7; transition: transform .2s ease; }
+details[open] > summary::before { transform: rotate(45deg); }
+details::details-content { block-size: 0; overflow: hidden; opacity: 0;
+  transition: block-size .25s ease, opacity .2s ease, content-visibility .25s allow-discrete; }
+details[open]::details-content { block-size: auto; opacity: 1; }
+/* The assistant's chats: the name in the header, the list under it. */
+.ai-head { position:relative; }
+.ai-chatsel { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:65%; padding:4px 6px; margin-left:-6px; border-radius:7px;
+  background:none; border:0; color:var(--text); font-weight:600; font-size:14px; cursor:pointer; }
+.ai-chatsel:hover { background:#151a21; }
+.ai-chatname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.ai-chatsel .chev { flex:none; color:var(--muted); transition:transform .2s ease; }
+.ai-chatsel[aria-expanded="true"] .chev { transform:rotate(90deg); }
+.ai-box { position:fixed; }
+.ai-chats { position:absolute; left:8px; right:8px; top:52px; z-index:3; display:grid; grid-template-rows:0fr; opacity:0; pointer-events:none;
+  background:var(--panel); border:1px solid transparent; border-radius:10px; box-shadow:0 14px 30px rgba(0,0,0,.5);
+  transition:grid-template-rows .22s ease, opacity .18s ease, border-color .22s ease; }
+.ai-chats.open { grid-template-rows:1fr; opacity:1; pointer-events:auto; border-color:var(--border); }
+.ai-chats-in { min-height:0; overflow:hidden; display:flex; flex-direction:column; }
+.ai-chatnew { margin:6px; padding:7px 10px; text-align:left; background:none; border:1px dashed var(--border); border-radius:7px; color:var(--accent); font-size:13px; cursor:pointer; }
+.ai-chatnew:hover { background:#12202f; }
+.ai-chatlist { max-height:min(320px, 50vh); overflow-y:auto; padding:0 6px 6px; }
+.ai-chatrow { display:flex; align-items:center; gap:4px; border-radius:7px; }
+.ai-chatrow:hover, .ai-chatrow.on { background:#12202f; }
+.ai-chatopen { flex:1; min-width:0; padding:7px 10px; text-align:left; background:none; border:0; color:var(--text); font-size:13px;
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
+.ai-chatdel { flex:none; width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:none; border:0;
+  border-radius:6px; color:var(--muted); cursor:pointer; opacity:.6; }
+.ai-chatrow:hover .ai-chatdel { opacity:1; }
+.ai-chatdel:hover { color:var(--danger); background:rgba(255,92,92,.1); }
+.ai-chatnone { padding:8px 10px; font-size:13px; }
+/* An action in an answer: a compact card, as in Cursor. */
+.ai-code.ai-action { border:1px solid var(--border); border-radius:9px; overflow:hidden; background:#0c0f13; }
+.ai-code-h { display:flex; align-items:center; gap:8px; padding:5px 6px 5px 10px; background:#11161d; border-bottom:1px solid var(--border); font-size:12px; }
+.ai-code.ai-action:not(:has(pre)) .ai-code-h { border-bottom:0; }
+.ai-kind { display:inline-flex; align-items:center; gap:6px; min-width:0; color:var(--muted); }
+.ai-kind svg { flex:none; color:var(--accent); }
+.ai-kind b { font-weight:500; color:var(--text); flex:none; }
+.ai-where-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace, Menlo, monospace; font-size:11.5px; }
+.ai-act { margin-left:auto; flex:none; height:24px; padding:0 9px; min-height:0; line-height:24px; border-radius:6px; border:0; font-size:12px; font-weight:500;
+  background:var(--accent); color:#fff; cursor:pointer; }
+.ai-act:hover:not(:disabled) { filter:brightness(1.1); }
+.ai-act:disabled { background:#1f2733; color:var(--muted); cursor:default; }
+.ai-code.ai-action pre { margin:0; border:0; border-radius:0; background:transparent; }