web: idle character animation

web/src/App.tsx

@@ -1989,7 +1989,8 @@ export default function App() {
             isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
           )}
         >
-          <div className="px-4 pb-4 pt-5">
+          <div className="relative min-h-24 px-4 pb-4 pt-5">
+            <div className="pr-24">
               <div className="sybil-wordmark bg-[linear-gradient(90deg,#ff8df8,#9a6dff_54%,#67dfff)] bg-clip-text text-3xl text-transparent">
                 SYBIL
               </div>
@@ -1998,6 +1999,14 @@ export default function App() {
                 Sybil Web{authMode ? ` (${authMode === "open" ? "open mode" : "token mode"})` : ""}
               </p>
             </div>
+            <img
+              aria-hidden="true"
+              alt=""
+              className="absolute right-4 top-3 aspect-square h-[calc(100%-1.5rem)] rounded-xl border border-violet-200/24 bg-white/6 object-cover p-1 shadow-[inset_0_1px_0_hsl(252_90%_86%/0.12),0_10px_24px_hsl(240_80%_2%/0.3)]"
+              draggable={false}
+              src="/character-idle.gif"
+            />
+          </div>
 
           <div className="space-y-3 px-3 pb-3">
             <div className="flex gap-2">
@@ -2246,7 +2255,7 @@ export default function App() {
                     void handleSend();
                   }
                 }}
-                placeholder={isSearchMode ? "Search the web" : "Message Sybil..."}
+                placeholder={isSearchMode ? "Search the web" : "Enter prompt..."}
                 className="max-h-40 min-h-0 resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 text-base text-violet-50 shadow-none placeholder:text-violet-200/45 focus-visible:ring-0"
                 disabled={isSending}
               />