style.css

.main-company {
  display: block;  
  width: 100%;           /* Fixed width */
  height: 300px;          /* Fixed height */
  overflow: hidden;       /* Prevents content from expanding the div */
  box-sizing: border-box; /* Includes padding/border in the dimensions */
  border: 1px solid #000;
  background-color: rgb(172, 207, 248);
  border-radius: 15px; /*adding roundedness*/
  transition: background-color 0.3s ease; /* Smooth transition */
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  
}

.main-company > h3 {
    text-align: center;
}

.main-company:hover {
  background-color: #bac9bf; /* Highlight color on hover */
  cursor: pointer;
}


.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;
  background-image: 
    linear-gradient(to right, #ccc 1px, transparent 1px), /* Vertical lines */
    linear-gradient(to bottom, #ccc 1px, transparent 1px); /* Horizontal lines */
  background-size: 10px 10px; /* Controls the spacing of the lines */
  gap: 15px; /* Adds 15px of space between each tab button */
  display: flex;
  
}

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

/* 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: 300px;      /* 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;
  /* adding to create a concave effect */
  mask: 
    radial-gradient(circle 20px at 0 0, #0000 98%, #000) top left,
    radial-gradient(circle 20px at 100% 0, #0000 98%, #000) top right,
    radial-gradient(circle 20px at 0 100%, #0000 98%, #000) bottom left,
    radial-gradient(circle 20px at 100% 100%, #0000 98%, #000) bottom right;
    
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
  background-color: rgb(180, 219, 254);
}

.tab-content > table td{
    vertical-align: top;
}

/* Select all images within the table */
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;
}

.tab-heading {
    font-weight: bold;
    font-size: 12px;
}

.disclaimer {
    font-weight: bold;
    font-size: 14px;
    color: red;
}