style.css

.main-company {
    /* Slate Appearance */
    background-color: #333;
    display: block;  
    width: 100%;           /* Fixed width */
    height: 300px;          /* Fixed height */
    overflow: hidden;       /* Prevents content from expanding the div */
    color: #eee;
    box-sizing: border-box; /* Includes padding/border in the dimensions */
    border: 7px solid #7e574b; /* Wooden frame */
    border-radius: 9px;   
    /* Chalk Font & Appearance */ 
    font-family: 'Fredericka the Great', cursive;  
    font-weight: bold; 
    text-shadow: 0.1px 0.1px 0.3px #fff; /* White glow for chalk effect very little*/  
    position: relative;  
}

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

.user-input-container{
    position: absolute;
    bottom: 8px;
    right: 8px;
    border: 2px solid #4c3b41;
    border-radius: 15px;
    padding: 15px;
    
}

.login-card{
    position: absolute;
    bottom:5px;
    border: 2px solid #4c3b41;
    border-radius: 15px;
    padding: 15px;
    left: 1150px;
    width: 200px;
}

.disclaimer  {
    position: absolute;
    bottom: 10;
    width: 100%;
    color: black;
}
.disclaimer span {
    color: rgb(255, 55, 0);
}

.disclaimer p{
    color: black;
}



#balloon-container {
    position: absolute;
    top: 125px;
    left: 50px; /* Start off-screen, at -150 */
    width: 100px;
    height: 150px;
    cursor: pointer;
    z-index: 10;
    transition: none;
    opacity: 1;
  }
/*
    .main-company:hover {
    background-color: #bac9bf; 
    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;
}




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

.nature-leaf::after {
    content: "\1F33F"; /* Unicode for Herb/Leaf */
    margin-right: 5px;
    color: #2e7d32;    /* A nice forest green */
    
  }

.fallen-leaf::before {
    content: "\1F342"; /* Unicode for Herb/Leaf */
    margin-right: 5px;
    color: #7d552e;    /* A fallen leaf */
  }

  .cash-icon::after {
    content: "\1F4B5"; /* Unicode for Dollar Banknote */
    margin-left: 8px;
    font-size: 1.2em;   /* Makes the bill slightly larger than text */
  }

  .potted-plant::after {
    content: "\1FAB4";
    margin-right: 5px;
    color: #0c230c;    /* A potted plant */
  }

  .disabled-div { 
    opacity: 0.5; filter: grayscale(100%);
  }

  .ai-icon::after{
    content: "\1F9E0";
    margin-right: 5px;
    color: #9aa39a; 
  }