From baec4522cfe739e11c2c83efd1a9e579603c4feb Mon Sep 17 00:00:00 2001
From: tyler <gitea@tysstech.com>
Date: Tue, 19 May 2026 02:43:27 -0400
Subject: [PATCH] Fixing a animation around the input box

---
 ollama_answers.py | 73 ++++++++++++++++++++++++-----------------------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/ollama_answers.py b/ollama_answers.py
index 4141b40..ee02412 100644
--- a/ollama_answers.py
+++ b/ollama_answers.py
@@ -297,32 +297,56 @@ INTERACTIVE_CSS = '''
                             margin: 0 0.5rem;
                             position: relative;
                             border-radius: 4px;
+                            overflow: hidden;
+                            padding: 1px;
+                            background: var(--color-result-border, rgba(0,0,0,0.15));
+                        }
+                        .sxng-input-wrapper::before {
+                            content: "";
+                            position: absolute;
+                            width: 200%;
+                            height: 200%;
+                            top: -50%;
+                            left: -50%;
+                            background: conic-gradient(
+                                transparent 0deg,
+                                transparent 270deg,
+                                var(--color-result-link, #4a9eff) 300deg,
+                                transparent 360deg
+                            );
+                            opacity: 0;
+                            transition: opacity 0.3s ease;
+                            animation: sxng-border-rotate 2s linear infinite;
+                            animation-play-state: paused;
+                        }
+                        .sxng-input-wrapper:focus-within {
+                            background: transparent;
+                        }
+                        .sxng-input-wrapper:focus-within::before {
+                            opacity: 1;
+                            animation-play-state: running;
+                        }
+                        @keyframes sxng-border-rotate {
+                            from { transform: rotate(0deg); }
+                            to { transform: rotate(360deg); }
                         }
                         .sxng-input {
+                            position: relative;
+                            z-index: 1;
                             width: 100%;
-                            height: -webkit-fill-available;
-                            background: var(--color-base-background-hover, rgba(0,0,0,0.06));
-                            border: 1px solid var(--color-result-border, rgba(0,0,0,0.15));
+                            height: 100%;
+                            background: var(--color-base-background, #1e1e2e);
+                            border: none;
                             color: var(--color-base-font, inherit);
                             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                             font-size: 0.78em;
                             padding: 3px 8px;
-                            border-radius: 4px;
+                            border-radius: 3px;
                             line-height: 1.4;
                             vertical-align: middle;
                         }
                         .sxng-input:focus { outline: none; }
                         .sxng-input::placeholder { color: var(--color-base-font, inherit); opacity: 0.4; }
-                        .sxng-input-line {
-                            position: absolute;
-                            bottom: 0;
-                            left: 0;
-                            width: 0;
-                            height: 1px;
-                            background: var(--color-result-link, #5e81ac);
-                            transition: width 0.3s ease;
-                        }
-                        .sxng-input:focus + .sxng-input-line { width: 100%; }
                         .sxng-user-msg {
                             display: block;
                             width: fit-content;
@@ -336,27 +360,6 @@ INTERACTIVE_CSS = '''
                             opacity: 0.55;
                             animation: sxng-fade-in-up 0.3s ease-out forwards;
                         }
-                        .sxng-input-wrapper:focus-within {
-                            opacity: 1;
-                            color: var(--color-result-link, #5e81ac);
-                            background: var(--color-base-background-hover, rgba(0,0,0,0.05)) !important;
-                        }
-                        @keyframes sxng-input-glow {
-                            0% {
-                                box-shadow: 0 0 0 0px var(--color-result-link, #4a9eff);
-                            }
-                            50% {
-                                box-shadow: 0 0 6px 2px var(--color-result-link, #4a9eff);
-                            }
-                            100% {
-                                box-shadow: 0 0 0 0px var(--color-result-link, #4a9eff);
-                            }
-                        }
-                        .sxng-input:focus {
-                            outline: none;
-                            border-color: var(--color-result-link, #4a9eff);
-                            animation: sxng-input-glow 2s ease-in-out infinite;
-                        }
                         .sxng-model-select {
                             appearance: none;
                             -webkit-appearance: none;