Update style.css

style.css

@@ -7,89 +7,12 @@ body {
     overflow: hidden;
 }
 
-#container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100vh;
-    padding: 2rem;
-    box-sizing: border-box;
-}
-
-#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;
-}
-
-.bubble {
-    padding: 0.75rem;
-    margin: 0.5rem 0;
-    border-radius: 0.5rem;
-    max-width: 80%;
-    animation: typeIn 0.5s ease-out;
-}
-
-.user {
-    align-self: flex-end;
-    background-color: #003333;
-    color: #00ffff;
-}
+/* Static/chat container, etc. (your existing rules) */
+#chatbox { /* … */ }
+.bubble { /* … */ }
+/* etc. */
 
-.ai {
-    align-self: flex-start;
-    background-color: #111;
-    border: 1px solid #00ffcc;
-    color: #00ffcc;
-}
-
-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;
-}
-
-@keyframes typeIn {
-    from {
-        opacity: 0;
-        transform: translateY(5px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* container never pulses by default */
+/* Avatar container */
 #avatar {
   width: 150px;
   height: 150px;
@@ -100,19 +23,44 @@ button:hover {
   align-self: center;
 }
 
-/* only pulse while speaking */
-#avatar.speaking {
-  animation: pulse 2s infinite;
+/* Make the <img> cover without zoom */
+#avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-/* also scale the img inside when speaking */
+/* Pulse only when speaking */
+#avatar.speaking,
 #avatar.speaking img {
   animation: pulse 2s infinite;
 }
 
+/* Keyframes unchanged */
 @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); }
 }
 
+/* Overlay for kill-phrase 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 ease-in-out;
+  z-index: 9999;
+}
+
+@keyframes glitchFlash {
+  0%,100% { opacity: 0; }
+  10%,90% { opacity: 1; }
+  20%,80% { opacity: 0; }
+  30%,70% { opacity: 1; }
+  40%,60% { opacity: 0; }
+  50%     { opacity: 1; }
+}
+
+