Updated stylesheet

style.css

@@ -1,28 +1,86 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+.ai-assistant-container {
+    /* Fixed positioning makes it float relative to the browser window */
+    position: fixed;
+    bottom: 20px;   /* Adjust vertical position */
+    right: 20px;    /* Adjust horizontal position */
+    z-index: 1000;  /* Ensures it stays above other content */
+
+    /* Layout for image and text */
+    display: flex;
+    align-items: flex-end; /* Aligns items to the bottom */
+    gap: 10px; /* Space between the image and the chat bubble */
+
+    /* Optional: Add a smooth transition for opening/closing animations */
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Positioning for Agent 1 (bottom one) */
+#aiAssistant {
+    right: 20px;
+    bottom: 20px; /* Distance from the bottom of the viewport */
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Positioning for Agent 2 (top one, stacked above Agent 1) */
+#agenticLoop {
+    right: 20px;
+    /* This calculation places it 200px (height) + 20px (margin) above agent 1 */
+    bottom: 140px; 
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.assistant-avatar {
+    width: 60px; /* Adjust size of the avatar */
+    height: 60px;
+    border-radius: 50%; /* Makes the image circular */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    cursor: pointer; /* Indicates it's interactive */
+}
+
+.chat-bubble {
+    /* Styling for the text area appearance */
+    background-color: #fff;
+    padding: 15px;
+    border-radius: 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    max-width: 250px;
+    position: relative;
+
+    /* Initially hide the text area */
+    display: none;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* CSS pseudo-element for the chat bubble "tail" */
+.chat-bubble::after {
+    content: "";
+    position: absolute;
+    bottom: 10px;
+    right: -8px; /* Position the tail near the avatar */
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-left: 10px solid #fff;
+    border-bottom: 10px solid transparent;
 }
+.networkContainer {
+    display: flex;
+    align-items: center; 
+    justify-content: space-around; 
+    }
+    .item {
+        /* Add some styling to see the boxes */
+        
+        color: white;
+        padding: 3px;
+        border: 1px solid #fff;
+        flex: 1; /* Optional: Distributes available space equally among items */
+    }
+    .rotate-svg {
+        /* Ensure the rotation is around the element's center */
+        transform-origin: center center; 
+        /* Define the transition effect */
+        transition: transform 1s ease; 
+    }
 
-.card p:last-child {
-	margin-bottom: 0;
+    /* Apply the rotation when the container is hovered */
+    .item:active .rotate-svg {
+        transform: rotate(360deg);
 }