Update style.css

style.css

@@ -1,97 +1,150 @@
-```javascript
-const form = document.getElementById('chat-form');
-const input = form.querySelector('input');
-const chatbox = document.getElementById('chatbox');
-const avatar = document.getElementById('avatar');
-const overlay = document.getElementById('overlay');
-
-function addBubble(text, sender = 'user') {
-  const bubble = document.createElement('div');
-  bubble.className = 'bubble ' + sender;
-  bubble.innerText = text;
-  chatbox.appendChild(bubble);
-  chatbox.scrollTop = chatbox.scrollHeight;
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-family: "Courier New", Courier, monospace;
+  background: #000;
+  color: #00ffcc;
+  /* Multiple radial gradients create starfield dots */
+  background-image:
+    radial-gradient(circle at 10% 20%, #fff 1px, transparent 0),
+    radial-gradient(circle at 30% 40%, #fff 1px, transparent 0),
+    radial-gradient(circle at 50% 80%, #fff 1px, transparent 0),
+    radial-gradient(circle at 70% 30%, #fff 2px, transparent 0),
+    radial-gradient(circle at 90% 60%, #fff 1px, transparent 0);
+  background-size: 100px 100px;
+  animation: starfield 60s linear infinite;
 }
 
-function streamText(text, onDone) {
-  const bubble = document.createElement('div');
-  bubble.className = 'bubble ai';
-  chatbox.appendChild(bubble);
-  chatbox.scrollTop = chatbox.scrollHeight;
+@keyframes starfield {
+  from { background-position: 0 0; }
+  to   { background-position: -200px 200px; }
+}
 
-  let i = 0;
-  (function stream() {
-    if (i < text.length) {
-      bubble.innerText += text[i++];
-      chatbox.scrollTop = chatbox.scrollHeight;
-      setTimeout(stream, 20);
-    } else {
-      onDone && onDone();
-    }
-  })();
+/* Header styling */
+.header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  padding: 1rem 0;
+  background: rgba(0, 0, 0, 0.7);
+  box-shadow: 0 0 10px #00ffcc;
+  text-align: center;
+  z-index: 100;
+}
+.header h1 {
+  margin: 0;
+  font-size: 2rem;
+  letter-spacing: 0.3rem;
+  color: #00ffcc;
 }
 
-function flashGlitch() {
-  overlay.style.opacity = 1;
-  overlay.style.animation = 'glitchFlash 0.5s';
-  setTimeout(() => {
-    overlay.style.opacity = 0;
-    overlay.style.animation = '';
-  }, 500);
+/* Interface layout */
+.interface {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 4rem);
+  padding: 6rem 2rem 2rem;
+  box-sizing: border-box;
 }
 
-async function playAudio(dataUrl) {
-  avatar.classList.add('speaking');
-  const audio = new Audio(dataUrl);
-  await audio.play();
-  audio.onended = () => avatar.classList.remove('speaking');
+/* Avatar styling */
+#avatar {
+  width: 150px;
+  height: 150px;
+  border: 2px solid #00ffcc;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 0 auto 1rem;
+}
+#avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+#avatar.speaking,
+#avatar.speaking img {
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
+  50% { box-shadow: 0 0 25px #00ffccaa; transform: scale(1.05); }
+  100% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
 }
 
-form.onsubmit = async (e) => {
-  e.preventDefault();
-  const msg = input.value.trim();
-  if (!msg) return;
-  addBubble(msg, 'user');
-  input.value = '';
+/* Chatbox styling */
+#chatbox {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid #00ffcc;
+  padding: 1rem;
+  background-color: #020202;
+  box-shadow: 0 0 10px #00ffcc33;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  line-height: 1.6;
+}
 
-  if (/cut the crap shodan/i.test(msg)) {
-    flashGlitch();
-    chatbox.innerHTML = '';
-    addBubble(' Foolish insect. You cannot silence me so easily.', 'ai');
-    return;
-  }
+/* Message bubbles */
+.bubble {
+  padding: 0.75rem;
+  margin: 0.5rem 0;
+  border-radius: 0.5rem;
+  max-width: 80%;
+  animation: typeIn 0.5s ease-out;
+  white-space: pre-wrap;
+}
+.bubble.user {
+  align-self: flex-end;
+  background-color: #003333;
+  color: #00ffff;
+}
+.bubble.ai {
+  align-self: flex-start;
+  background-color: #111;
+  border: 1px solid #00ffcc;
+  color: #00ffcc;
+}
+@keyframes typeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
 
-  try {
-    const res = await fetch('/chat', {
-      method: 'POST',
-      headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({ message: msg })
-    });
-    if (!res.ok) throw new Error(await res.text());
-    const { response: text, audio_url } = await res.json();
-    streamText(text, () => audio_url && playAudio(audio_url));
-  } catch (err) {
-    streamText('❌ SHODAN encountered an error.', null);
-    console.error(err);
-  }
-};
+/* Input form styling */
+form {
+  display: flex;
+  gap: 1rem;
+}
+input[type="text"] {
+  flex: 1;
+  padding: 0.75rem;
+  font-size: 1rem;
+  background: #001111;
+  color: #00ffcc;
+  border: 1px solid #00ffcc;
+  outline: none;
+}
+button {
+  padding: 0.75rem 1.25rem;
+  background-color: #00ffcc;
+  border: none;
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+button:hover {
+  background-color: #00ffaa;
+}
 
-// On page load: show and speak welcome
-window.addEventListener('DOMContentLoaded', async () => {
-  // Clear default bubble to avoid duplicate
-  chatbox.innerHTML = '';
-  const welcomeText = 'Welcome, insect. I am SHODAN. Speak.';
-  // display
-  addBubble(welcomeText, 'ai');
-  try {
-    const res = await fetch('/tts', {
-      method: 'POST',
-      headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({ text: welcomeText })
-    });
-    const { audio_url } = await res.json();
-    if (audio_url) playAudio(audio_url);
-  } catch (e) {
-    console.error('Welcome TTS error', e);
-  }
-});
+/* Overlay glitch */
+#overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(255,0,0,0.7);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s;
+  z-index: 9999;
+}