style.css

.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 */
}

/* 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; 
}

.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;
}

/* 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; 
    }

    /* Apply the rotation when the container is hovered */
    .item:active .rotate-svg {
        transform: rotate(360deg);
}

/* Style the tab buttons */
.tabs {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tabs button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background on hover */
.tabs button:hover {
  background-color: #ddd;
}

/* Highlight the active tab */
.tabs button.active {
  background-color: #ccc;
}



.tab-content {
  /* 1. Set the fixed dimensions */
  width: 100%;        /* Or a fixed px value like 500px */
  height: 350px;      /* This forces them all to be identical */
  
  /* 2. Standard box sizing (includes padding in the 300px) */
  box-sizing: border-box; 
  
  /* 3. Handle content that is too long */
  overflow-y: auto;   /* Adds a scrollbar ONLY if content exceeds 300px */
  
  /* Styling from previous example */
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

/* Select all images within the table for the cake display */
table img {
  width: 100px;
  height: 80px;
  transition: transform 0.3s ease; /* Smooth scaling */
}

/* Enlarge on hover */
table img:hover {
  transform: scale(2.5); /* Resizes to 150% of original */
  z-index: 10;            /* Ensures the enlarged image stays on top */
  position: relative;
}