/* page-styles.css */

/* ==========================================================================
   General styles applicable to main stage content
   ========================================================================== */

   html,
   body {
       margin: 0;
       padding: 0;
       font-family: Arial, sans-serif;
       min-height: 90vh;
   }
   
   body {
       display: flex;
       /* justify-content: center; */
       align-items: top;
   }
   
   .stage {
       display: flex;
       justify-content: center;
       align-items: stretch;
       width: 90%;
       max-width: 1200px;
       gap: 20px;
       box-sizing: border-box;
       padding: 20px;
   }
   
   .block {
       background-color: #fff;
       border: 1px solid #ddd;
       border-radius: 10px;
       padding: 20px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       width: 100%;
       max-width: 600px;
       gap: 20px;
   }
   
   .block h1,
   .block h2 {
       font-size: 20px;
       font-family: Arial, sans-serif;
   }
   
   .block p {
       font-size: 14px;
       margin-bottom: 20px;
       font-family: Arial, sans-serif;
   }
   
   form label {
       display: block;
       margin-bottom: 8px;
       font-size: 14px;
       font-weight: bold;
       font-family: Arial, sans-serif;
   }
   
   form input,
   form textarea,
   .block textarea {
       width: 100%;
       padding: 10px;
       font-size: 14px;
       border: 1px solid #ccc;
       border-radius: 5px;
       box-sizing: border-box;
       font-family: Arial, sans-serif;
   }
   
   form textarea,
   #reflectionBlock textarea {
       resize: none;
   }
   
   #reflectionBlock textarea {
       height: 52lvh;
   }
   
   .error {
       color: red;
       font-size: 10px;
       min-height: 16px;
       margin-top: 1px;
       margin-bottom: 0;
       display: block;
       font-family: Arial, sans-serif;
   }
   
   .action-container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-top: 20px;
   }
   
   #submitProject,
   #submitCase {
       align-self: flex-end;
       margin-left: auto;
   }
   
   .action-container select {
       background-color: #007BFF;
       color: white;
       border: none;
       border-radius: 20px;
       font-size: 14px;
       padding: 8px;
       cursor: pointer;
       font-family: Arial, sans-serif;
   }

   hamburger-button {
    font-size: 12px;
    width: 30px;  /* Equal width and height */
    height: 30px;
    color: #fff;
    border: 1px solid #CCCCCC;  /* Thin white border */
    border-radius: 50%;  /* Makes it a perfect circle */
    cursor: pointer;
    background-color: #ffffff;
  
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:5px;
    
}
   button {
       font-size: 14px;
       padding: 10px 10px;
       color: #fff;
       border: none;
       border-radius: 20px;
       cursor: pointer;
       background-color: #007BFF;
       font-family: Arial, sans-serif;
       /*align-self: flex-start; */
   }
   
   button:hover {
       background-color: #0056b3;
   }

   button.selected {
    background-color: #0056b3;
}
   
   /* Styles for Toggle Switch */
   .toggle-container {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-top: 5px;
       font-family: Arial, sans-serif;
   }
   
   .toggle-item {
       display: flex;
       align-items: center;
       gap: 5px;
       /* Space between toggle and text */
   }
   
   .toggle-item p {
       margin: 0;
       /* Remove default paragraph margins */
       font-size: 12px;
       /* Reduced font size */
   }
   
   .toggle-switch {
       position: relative;
       width: 40px;
       height: 20px;
   }
   
   .toggle-switch input {
       opacity: 0;
       width: 0;
       height: 0;
   }
   
   .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #ccc;
       border-radius: 20px;
       transition: 0.4s;
   }
   
   .slider:before {
       position: absolute;
       content: "";
       height: 14px;
       width: 14px;
       left: 3px;
       bottom: 3px;
       background-color: white;
       border-radius: 50%;
       transition: 0.4s;
   }
   
   input:checked + .slider {
       background-color: #007BFF;
   }
   
   input:checked + .slider:before {
       transform: translateX(20px);
   }
   
   /* Override Slider Styles for Toggle Buttons */
   .toggle-switch .slider {
       width: 40px;
       /* Set a fixed width */
       height: 20px;
       /* Set a fixed height */
   }
   
   .toggle-switch .slider:before {
       width: 14px;
       /* Set a fixed width */
       height: 14px;
       /* Set a fixed height */
   }
   
   input:checked + .slider {
       background-color: #007BFF;
   }
   
   input:checked + .slider:before {
       transform: translateX(20px);
   }
   
   /* Styles for All Projects Page */
   
   table {
       border-collapse: collapse;
       width: 90%;
       max-width: 1200px;
       background-color: #fff;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       border-radius: 12px;
       overflow: hidden;
       margin: 9px auto;
       margin-top: 3%; /* space in between the table and the top frame */
   }
   
   th,
   td {
        position: sticky;
      top: 0;
        z-index: 2;
       padding: 12px 16px;
       text-align: left;
       border-bottom: 1px solid #ddd;
   }
   
   th {
       background-color: #007BFF;
       color: white;
      /* border-right: 5px solid #16df38; /* Add this */
      /* border-left: 5px solid #16df38; /* Add this */
       text-transform: uppercase;
       font-size: 14px;
       cursor: pointer;
   }

   th.sortable:hover {
       background-color: #0056b3;
   }
   
   tr:hover {
       background-color: #f1f1f1;
   }
   
   td {
       font-size: 14px;
       color: #333;
   }
   
   .action-buttons {
       display: flex;
       justify-content: space-between;
       width: 76%;
       max-width: 1200px;
       margin: 20px auto;
   }
   
   .action-button-filter {
       padding: 10px 20px;
       border: none;
       border-radius: 20px;
       cursor: pointer;
       font-size: 14px;
   }
   .category-list {
    /* Styles specific to the category list */
    /* border: 1px solid #cccccc; */
    padding: 2px;
    /* ... other styles ... */
}
#commentButton, #sendButton, #surveyButton {
    width: 40px;              /* Fixed width */
    height: 40px;             /* Fixed height = makes it a square */
    border-radius: 50%;       /* Makes it a perfect circle */
    display: flex;            /* Center the text inside */
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Subtle shadow */
    transition: all 0.2s ease-in-out;
}
#surveyButton {
    background-color: #f0f4f8; /* Light cyan */
    color: #003366;
    border: 1px solid rgb(204, 204, 204);
}
#commentButton {
    background-color: #f0f4f8; /* Light cyan */
    color: #003366;
    border: 1px solid rgb(204, 204, 204);
}

#sendButton {
    background-color: #333333; /* Light gray */
    color: #f6f6f6;
}

#commentButton:hover, #sendButton:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

   
   /* #toggleViewButton {
       padding: 8px 12px;
       background-color: #007BFF;
       color: white;
       border: none;
       border-radius: 20px;
       cursor: pointer;
   } */
   
   /* #createNewButton {
       padding: 8px 12px;
       background-color: #4caf50;
       color: white;
       border: none;
       border-radius: 20px;
       cursor: pointer;
   } */
   
   #loadingSpinner {
       display: none;
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       border: 8px solid #f3f3f3;
       border-top: 8px solid #007BFF;
       border-radius: 50%;
       width: 50px;
       height: 50px;
       animation: spin 1s linear infinite;
   }
   
   @keyframes spin {
       0% {
           transform: rotate(0deg);
       }
   
       100% {
           transform: rotate(360deg);
       }
   }
   
   /* .error {
       color: red;
       font-size: 14px;
       margin-top: 10px;
   } */
   
   /*Styles for All Agents page */
   
   .agentCard:hover {
       transform: scale(1.02);
       /* Adds a slight hover effect */
       transition: transform 0.3s ease;
   }
   
   /* Basic CSS for agent display - of all elements on mainFrame */
   body {
       font-family: 'Roboto', Arial, sans-serif;
       /* background-color: #ffffff; */
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
   }

.cardContent {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .topSection {
    flex-grow: 1;
  }
  
  .bottomSection {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #eee;
    position: relative;
  }
   
   h1 {
       margin: 0;
       color: #333;
       display: inline-block;
   }
   
   .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 90%;
       max-width: 1100px;
       margin: 20px 0;
   }
   
   
   /* #createNewButton {
               font-size: 14px;
               position: absolute;
               top: calc(20px + 60px);
               left: 280px;
               padding: 8px 12px;
               background-color: #007BFF;
               color: white;
               border: none;
               border-radius: 4px;
               cursor: pointer;
           }
   
           #createNewButton:hover {
               background-color: #0056b3;
           } */
   
   .container {
       width: 90%;
       max-width: 1100px;
       margin: 20px 0;
       background-color: #e8e7e7;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       border-radius: 10px;
       padding: 20px;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       position: relative;
   }
   
   #agentList {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
       gap: 20px;
       margin-top: 20px;
       width: 100%;
       max-height: 700px;
       /* Set a max height for the scrollable area */
       overflow-y: auto;
       /* Enable vertical scroll */
       overflow-x: hidden;
   }
   
   .agentCard {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    }
    
    .agentCard h3 {
    /* Agent Clickable Name */
    margin-top: 0;
    margin-bottom: 10px;
    color: #027de9eb;
    cursor: pointer;
    }
    
    .agentCard p {
    margin-bottom: 10px;
    /* spaces between agent details on card */
    }
    
    .agentCard button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    right: 10px;
    }
    
    .agentCard button:hover {
    background-color: #45a049;
    }
    
    .agentCard button.fire {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 20px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    }
    
    .agentCard button.fire:hover {
    background-color: #c82333;
    }
    
    .agentCard button.inactive-button {
    background-color: #cccccc;
    /* gray background /
    color: #666666;
    border: none;
    cursor: not-allowed;
    / Indicate it is not interactable /
    pointer-events: none;
    / Disable click events */
    }
   
   /* chat.css */
   
   /* Main container for the chat interface */
   .chat-container {
       display: flex;
       flex-direction: column;
       height: 70vh;
       /* Set a fixed height for the chat container */
       border: 1px solid transparent;
       /* Make the border transparent */
       overflow: hidden;
       width: 76%;
       /* Center horizontally and set width */
       margin: 0 auto;
       border-bottom: 1px solid rgb(204, 204, 204);
       /* Bottom border */
   }
   
   /* Scrollable area for chat messages */
   .chat-messages {
       flex: 1;
       overflow-y: auto;
       /* Enable vertical scrolling */
       padding: 8px;
       margin-top: 4%;
       /* Add padding for spacing */
   }
   
   /* General styling for individual messages */
   .message {
       margin-bottom: 10px;
       display: flex;
       max-width: 100%;
       position: relative;
       /* Needed for menu positioning */
   }
   
   .editing-message {
       /* border: 1px solid rgb(204, 204, 204); */
       background-color: #e9f3f9 !important;
       /* Light background for user messages */
       
   }
   
   .comment-message {
       border: 1px solid rgb(204, 204, 204);
       background-color: #f0f4f8 !important;
   }
   
   .deleted-message {
       text-decoration: line-through;
       /* Strikethrough for deleted messages */
   }
   
   /* Styling for user messages (right-aligned) */
   .user-message-container {
       background-color: #F2F2F2;
       /* Light background for user messages */
       border-radius: 12px;
       /* Rounded corners */
       padding: 12px;
       /* Slightly increased padding for better spacing */
       align-self: flex-end;
       /* Align the container to the right */
       margin-right: auto;
       /* Adjust margin for alignment */
       display: flex;
       flex-direction: column;
       /* Stack content vertically */
       align-items: flex-start;
       /* Align text to the left */
       width: auto;
       /* Allow flexible width */
       white-space: pre-wrap;
       /* Preserve whitespace and line breaks */
       font-family: Arial, sans-serif;
       /* Consistent, clean font */
       line-height: 1.6;
       /* Enhanced line spacing for readability */
       font-size: 14px;
       /* Standard font size for readability */
       margin-bottom: 8px;
       /* Add space between messages */
       .text[dir="ltr"] {
        text-align: left;
        direction: ltr;
      }
   }
   
   /* Styling for agent messages (left-aligned) */
   .agent-message-container {
       background-color: #ffffff;
       /* Clean white background for agent messages */
       border-radius: 12px;
       /* Rounded corners */
       padding: 12px;
       /* Increased padding for better spacing */
       align-self: flex-start;
       /* Align the container to the left */
       margin-right: auto;
       /* Adjust margin for alignment */
       display: flex;
       flex-direction: column;
       /* Stack content vertically */
       align-items: flex-start;
       /* Align text to the left */
       width: auto;
       /* Allow flexible width */
       /* white-space: pre-wrap; */
       /* Preserve whitespace and line breaks */
       font-family: Arial, sans-serif;
       /* Consistent, clean font */
       line-height: 1.6;
       /* Enhanced line spacing for readability */
       font-size: 14px;
       /* Standard font size for readability */
       margin-bottom: 8px;
       /* Add space between messages */
       .text[dir="ltr"] {
        text-align: left;
        direction: ltr;
      }
   }
   
/*   .sender {
       font-weight: bold;
       /* Highlight the sender's name 
       margin-bottom: 4px;
       /* Add space below the sender name 
       font-size: 14px;
       /* Adjust font size for better readability 
   } */

   .sender {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 14px;
    display: flex;
    align-items: flex-end;
}

.profile-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: 5px;
    object-fit: cover;
}

.profile-letter {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #2c3e50; /* You can change this color */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 5px;
}

.timestamp {
    font-weight: normal;
    font-size: 12px;
    color: #777;
    margin-left: 4px;
    margin-right: 4px;
}

.sender-name {
    margin-right: 2px;
}
   
   .text {
       word-wrap: break-word;
       /* Break long words */
       font-size: 16px;
       /* Adjust font size */
       line-height: 1.6;
       /* Add spacing between lines */
   }
   
   .edit-textarea {
       width: 100%;
       height: auto;
       border: none;
       /* Remove border */
       background-color: transparent;
       /* Make background transparent */
       padding: 0;
       /* Remove padding */
       /* resize: vertical; */
       font-family: 'Roboto', Arial, sans-serif;
       /* Inherit font */
       font-size: 16px;
       /* Inherit font size */
       line-height: 1.5;
       /* Inherit line height */
       overflow: hidden;
       /* Hide scrollbars */
       outline: none;
       /* Remove outline on focus */
       box-shadow: none;
       /* Remove box shadow */
       color: inherit;
       /* Inherit text color */
   }
   
   /* Chat input section layout */
   .chat-input {
       display: flex;
       justify-content: space-between;
       /* Separate textarea and dropdown section */
       margin: 0 auto;
       padding: 0px;
       width: 75%;
       /* Match chat-container width */
       box-sizing: border-box;
   }
   
   /* Left section containing the textarea */
   .input-area {
       flex: 3;
       /* Occupy more space for the textarea */
       margin-right: 10px;
       /* Add spacing from dropdowns */
   }
   
   /* Textarea for user input */
   .input-area textarea {
       width: 99%;
       /* Slightly exceed container width */
       height: auto;
       border: 1px solid #ffffff;
       background-color: #F2F2F2;
       /* Match user message background */
       border-radius: 12px;
       padding: 8px;
       resize: none;
       /* Disable manual resizing */
       overflow-y: auto;
       /* Enable vertical scrolling for overflow */
       font-family: 'Roboto', Arial, sans-serif;
       font-size: 16px;
       line-height: 1.5;
       /* Compact spacing for the input area */
       min-height: 75px;
       /* Ensure three rows */
       max-height: 150px;
       /* Limit expansion */
   }
   
   /* Right section containing dropdowns and the button */
   .action-area {
       flex: 1;
       /* Occupy less space compared to textarea */
       display: flex;
       flex-direction: column;
       justify-content: center;
       /* Stack elements vertically */
       /*  justify-content: space-between; /* Maintain spacing between elements */
       align-items: flex-end;
       /* Align all elements to the right edge */
   }
   
   /* Dropdown styling */
   .action-area select {
       margin-bottom: 6.5px;
       /* Add spacing between dropdowns */
       padding: 8px;
       background-color: #007BFF;
       color: white;
       border: none;
       border-radius: 20px;
       font-size: 14px;
   }
   
   /* Button styling */
   .action-area button {
       padding: 8px 16px;  /* 6px top/bottom, 16px left/right */
       background-color: #000000;
       color: white;
       border: none;
       border-radius: 20px;
       cursor: pointer;
       width: auto;
       /* Adjust the button width as needed */
   }
   
   /* Styling for the Edit Thread button */
   .edit-thread-button {
       position: absolute;
       top: calc(20px + 60px);
       left: 280px;
       padding: 8px 12px;
       background-color: #007BFF;
       color: white;
       border: none;
       border-radius: 4px;
       cursor: pointer;
   }
   
   /* Styling for the new share button */
   .share-button {
       position: absolute;
       top: calc(20px + 60px);
       /* Same vertical position as edit-thread-button */
       right: 200px;
       /* 200px from the right edge */
       padding: 8px 12px;
       background-color: #007BFF;
       color: white;
       border: none;
       border-radius: 4px;
       cursor: pointer;
   }
   
   /* restore button styling */
   .restore-button {
       position: absolute;
       top: calc(578px + 60px);
       left: 280px;
       padding: 8px 12px;
       background-color: #e9f3f9;
       color: black;
       border: none;
       border-radius: 4px;
       cursor: pointer;
       display: none;
       /* Hidden by default */
   }
   
   /* Disabled state for the restore button */
   .restore-button[disabled] {
       background-color: #007BFF;
       cursor: not-allowed;
   }
   
   /* Textarea for displaying summaries */
   .summary-textarea {
       width: 58%;
       height: 120px;
       padding: 8px;
       margin: 0 auto;
       border: 1px solid #ccc;
       border-radius: 12px;
       margin-bottom: 10px;
       font-family: 'Roboto', Arial, sans-serif;
       font-size: 16px;
       line-height: 1.5;
       /* Compact spacing for the input area */
       display: none;
       /* Hidden by default */
   }

/* ──────────────────────────────── */
/*  Collaborators container         */
/* ──────────────────────────────── */
.collaborators-container {
  width: 100%;
  height: auto;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  z-index: 1000;
  flex-direction: column;          /* you can uncomment display:flex later */
  align-items: flex-start;
  max-height: 200px;
  overflow-y: auto;
  font-size: 10px;                 /* will bump on large screens */
}

/* ──────────────────────────────── */
/*  Collaborator rows               */
/* ──────────────────────────────── */
.collaborator-item {
  display: flex;
  flex-wrap: wrap;                 /* let role wrap on narrow viewports   */
  align-items: center;
  gap: 4px;                        /* space between dot / name / role     */
  padding: 4px 0;
  line-height: 1.4;                /* bigger tap target on mobile         */
  width: 100%;
}

/* left-hand mini-wrapper you create in JS */
.collaborator-left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;                    /* enables name ellipsis               */
}

/* status dot */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
}
.online  { background: #4CAF50; }
.offline { background: #c5c5c5; }

/* name */
.collaborator-name {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* role */
.collaborator-role {
  font-style: italic;
  color: #777;
  white-space: nowrap;
  margin-left: auto;               /* keeps it right-aligned when room    */
}

/* ── tiny screens (<420 px) ── */
@media (max-width: 420px) {
  .collaborator-role {
    margin-left: 0;
    flex-basis: 100%;              /* drops to its own line               */
    font-size: 0.85em;
  }
  .status-indicator {
    width: 10px;
    height: 10px;
  }
}

/* ── very wide screens (≥1200 px) ── */
@media (min-width: 1200px) {
  .collaborators-container {
    font-size: 12px;
  }
}
  
   
   /* Styling for agent details page */
   body {
               font-family: 'Roboto', Arial, sans-serif;
               line-height: 1.3;
               /* background-color: #f4f4f9; */
              /* margin: 2%; - This wraps every element on screen with a margin */
               padding: 0;
           }
   
           .agent-card {
               width: 90%;
               height:90%;
               max-width: 1100px;
               margin: 20px 0;
               background-color: #fff;
               box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
               border-radius: 10px;
               padding: 20px;
               display: flex-end;
               flex-direction: column;
               align-items: flex-start;
               position: relative;
           }
   
           .agent-card-header {
       display: flex; /* Use flexbox for alignment */
       align-items: center; /* Vertically align items */
       justify-content: space-between; /* Space between profile image, name, and button */
       width: 100%; /* Ensure it spans the full width of the card */
       position: relative; /* Ensure positioning applies properly */
   }
   .hire-fire-button.inactive-button {
              background-color: #cccccc;  /* gray background */
               color: #666666;
               border: none;
                cursor: not-allowed; /* Indicate it is not interactable */
               pointer-events: none; /* Disable click events */
           }
   .agent-card-header h2 {
       flex-grow: 1; /* Take up remaining space */
       margin: 0; /* Remove default margins */
       padding: 28px 0px;
   }
   
   /* Default hire-fire-button style */
           .hire-fire-button {
               background-color: #4CAF50; /* Green for hire */
               color: white;
               border: none;
               padding: 10px 15px;
               border-radius: 5px;
               cursor: pointer;
               transition: background-color 0.3s ease; /* Smooth transition */
               margin-left: auto; /* Push button to the far right */
           }
   
           #profileImage {
               width: 100px;
               height: 100px;
               border-radius: 14px;
               object-fit: cover;
               margin-right: 20px;
               align-self: flex-start;
           }
   
           .agent-card h2 {
               margin-left: 0;
               align-self: flex-start;
               margin-top: 0;
               margin-bottom: 0px;
           }

           .agent-details {
               display: grid;
               grid-template-columns: 2fr 2fr;
               gap: 10px;
               width: 100%;
           }
   
           .agent-details strong {
               font-weight: bold;
               color: #333;
               white-space: nowrap;
               align-self: start;
           }
   
           .agent-details span {
               color: #555;
               word-wrap: break-word;
               white-space: normal;
           }
   
           .agent-details div {
            max-height: 80px;
               padding: 8px;
               border-bottom: 1px solid #eee;
           }
   
           .agent-details div:last-child {
               border-bottom: none;
           }
   
           .agent-details span.linkable {
               color: #007BFF;
               text-decoration: underline;
               cursor: pointer;
           }
   
           .agent-details a.nft-link {
               color: #007BFF;
               text-decoration: underline;
               cursor: pointer;
               word-wrap: break-word;
               white-space: normal;
           }
   
           .agent-details a.nft-link:hover {
               text-decoration: underline;
           }
   
           /* .error {
               color: red;
               font-size: 14px;
               margin-top: 10px;
           } */

   
   .back-button, .submit-button {
       background-color: #007BFF;
       color: white;
       border: none;
       margin-right: 10px;
       padding: 10px 15px;
       border-radius: 20px;
       cursor: pointer;
       transition: background-color 0.3s ease;
   }
   
   .back-button:hover, .submit-button:hover {
       background-color: #0056b3;
   }
   
           .back-button:hover {
               background-color: #0056b3;
           }
   
        /* Default hire-fire-button style */
           .hire-fire-button {
               background-color: #4CAF50;
               color: white;
               border: none;
               padding: 10px 15px;
               border-radius: 20px;
               cursor: pointer;
               transition: background-color 0.3s ease; /* Smooth transition */
               margin-left: auto; /* Push button to the far right */
           } 
   
           /* Fire button style */
           .hire-fire-button.fire {
               background-color: #dc3545; /* Red for fire */
           }
   
           /* Hover states */
           .hire-fire-button:hover {
               background-color: #45a049; /* Darker green for hover */
           }
   
           .hire-fire-button.fire:hover {
               background-color: #c82333; /* Darker red for hover */
           }
   
           @keyframes spin {
               0% { transform: rotate(0deg); }
               100% { transform: rotate(360deg); }
           }
           .ask-me-section {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            padding: 8px;
        }
        
        .ask-me-section textarea {
            width: 96%;
            height: 50px;
            padding: 15px 10px;
            border: 1px solid #ffffff;
            background-color: #F2F2F2;
            border-radius: 12px;
            overflow-y: auto;
            font-family: 'Roboto', Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            height: 15vh;
        }
        
        .ask-me-section button {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            margin-top: 20px;
            cursor: pointer;
            width: auto;  /* Set to auto so it doesn't stretch */
            align-self: flex-end; /* Moves button to the right */
        }
        
        .ask-me-section button:hover {
            background-color: #0056b3;
        }
        

        #agentResponse {
            margin-top: 20px;
            /* width: 96%; */
            height: 35vh;
            border-radius: 12px;
            padding: 10px 15px;
            margin-left:10px;
            margin-right:10px;
            margin-bottom:10px;
            overflow-y: auto;
            white-space: pre-wrap;
            border: 1px solid #ccc;
            border-radius: 12px;
            margin-bottom: 10px;
            font-family: 'Roboto', Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5; /* Compact spacing for the input area */
            display: none; /* Hidden by default */
            .text[dir="ltr"] {
                text-align: left;
                direction: ltr;
              }
        }
        .edit-button {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 20px;
             cursor: pointer;
            transition: background-color 0.3s ease;
             margin-left: 5px;
}

        .edit-button:hover {
            background-color: #0056b3;
        }
        /* === Enhancements for Invite Table Input Row Styling === */
#inviteTable input[type="email"],
#inviteTable input[type="url"],
#inviteTable select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

#inviteTable td {
    vertical-align: middle;
    min-height: 48px;
}
/* === Sticky Header and Scrollable Table Body === */
.table-scroll-container {
    max-height: 70vh;
    overflow-y: auto;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 12px;
}

/* Keep the header fixed during scroll */
#inviteTable thead th {
    position: sticky;
    top: 0;
    background-color: #007BFF;
    color: white;
    z-index: 5;
}
#helpPanel {
    position: fixed;
    bottom: 13%;
    right: 2%;
    width: 320px;
    max-height: 80%;
    overflow-y: auto;
    z-index: 9999;
  }
  .help-panel {
    position: fixed;
    bottom: 80px;
    right: 20px;
    font-size: 13px;
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    width: 300px;
    z-index: 9999;
  }
  
.help-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 5px;
}

.close-help-button {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #888;
}
.hidden {
    display: none !important;
  }

.page-name {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    line-height: 1; /* This prevents extra vertical space */
    margin: 12px;
    padding: 0;
}

/* Base chip style */
.category-chip {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px;
    border-radius: 20px;
    font-size: 12px;
    border: 1px solid #007bff;
    color: #007bff;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  
  /* Hover and focus states */
  .category-chip:hover,
  .category-chip:focus {
    background-color: #e6f0ff;
  }
  
  /* Selected chip */
  .category-chip.selected {
    background-color: #007bff;
    color: white;
  }
  
  .button-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between; /* Space out buttons */
    align-items: center; /* Vertically align buttons */
    /* width: 100%; */
    margin-top: 1%;
    width: 100%;                         /* Responsive */
    max-width: 1150px;
}