#styles-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


body {
    font-family: 'Lato', sans-serif;
    font-weight: 300; /* This sets the font to Lato Light (300 weight) */
    line-height: 1.6;
    color: #333;
    margin: 0cm;
    padding: 2cm;
    background:
      radial-gradient(circle at 94.35% 89.62%, rgba(111, 26, 209, 0.36) 0%, rgba(111, 26, 209, 0.36) 20%, rgba(111, 26, 209, 0) 40%),
      radial-gradient(circle at 6.50% 88.04%, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.99) 25%, rgba(255, 255, 255, 0) 50%),
      radial-gradient(circle at 6.25% 11.23%, #019ED2 0%, #019ED2 42%, rgba(1, 158, 210, 0) 70%),
      radial-gradient(circle at 93.69% 11.43%, rgba(120, 66, 179, 0) 0%, rgba(120, 66, 179, 0) 42%, rgba(120, 66, 179, 0) 70%),
      radial-gradient(circle at 48.90% 49.52%, #F2F2F2 0%, rgba(242, 242, 242, 0) 100%);
    background-size: cover; /* Optional: Ensures the gradient covers the entire element */
    background-repeat: no-repeat; /* Prevents the gradient from repeating */
}

/* navbar styling */
nav {
    position: sticky;
    top: 0;
    background-color: #f0f0f0; /* Off-white background */
    padding: 10px 0; /* Add some padding */
    border-bottom: 2px solid #ccc; /* Add a bottom border */
    border-radius: 10px; /* Adjust the value to control the roundness */
}

nav a {
    color: #000000;
    text-decoration: none;
    margin: 0 10px;
    padding: 5px 10px;
    border-radius: 4px;
}

nav a:hover {
    background-color: #e0e0e0; /* Light gray hover background */
    text-decoration: underline;
}

#navLogo {
    height: 3em;
}

.navbar-flex-container{
    display: flex;
    align-items: center;
}

/* Target the navigation bar links */
#custom-nav nav a {
    color: #000000;
    text-decoration: none;
    margin: 0 10px;
    padding: 5px 10px;
    border-radius: 4px;
}

h1, h2, h3 {
    font-weight: 400;
    margin-bottom: 0.5em;
    color: #222;
}

p {
    margin-bottom: 1em;
}

a {
    color: #3BA7A4;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Form styles */
form {
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 0.5em;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 1em;
}

button {
    background-color: #3BA7A4;
    color: white;
    padding: 0.8em 1.5em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #d0d0d0;
    color: black;
}

/* Flash Message Styling */

ul.flashes {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin-bottom: 1em;
}

ul.flashes li {
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    border-radius: 5px;
}

ul.flashes li.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

ul.flashes li.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

ul.flashes li.info {
    background-color: #cce5ff;
    border-color: #b8daff;
    color: #004085;
}

ul.flashes li.warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

#ai-interaction {
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
}

.chat-message {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.chat-message .emoji {
    margin-right: 5px;
}

.chat-message.user {
    justify-content: flex-end; /* Align user messages to the right */
}

.chat-message.user .emoji {
    margin-left: 5px;
    margin-right: 0;
}

.chat-message .content {
    flex: 1;
    word-break: break-word; /* Allow long words to wrap */
    white-space: pre-wrap; /* Preserve whitespace */
    padding: 10px; /* Add padding inside the border */
    border-radius: 5px; /* Add rounded corners */
    background-color: #f0f0f0; /* Light gray background */
}

.chat-message.user .content {
    background-color: #e0f7fa; /* Light blue background for user messages */
    text-align: left;
}

.chat-message.assistant .content{
    background-color: #f9f9f9;
    text-align: left;
}

.chat-image {
    max-width: 100%; /* Prevent images from overflowing */
    max-height: 300px; /*Optional maximum height*/
    display: block; /* Prevents extra space below images */
    margin: 10px 0;
}

#queryForm {
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
}

.ai-options > div[id^="output"] { /* Selects divs with IDs starting with "output" inside .ai-options */
    width: 100%; /* Make it full width */
    box-sizing: border-box; /* Include padding and border in width */
}


#queryForm label {
    margin-bottom: 5px;
}

#queryForm textarea,
#queryForm select,
#queryForm input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px; /*subtle rounding*/
    margin-bottom: 10px;
    font-family: inherit; /* Inherit font from body */
    font-size: inherit;
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
}

#askButton, #askButtonTeam, #askButtonReasoning, #askButtonAssistants{
    padding: 10px 20px;
    background-color: #4CAF50; /* Green */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#clearButton, #clearButtonTeam, #clearButtonReasoning, #clearButtonAssistants{
    padding: 10px 20px;
    background-color: #FF0000; /* Red */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


#spinner {
    margin-left: 10px; /* space from button */
}

/* Report area styling */
.report-area {
    margin-top: 1em;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.report-area h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.report-area p {
    margin-bottom: 0.75em;
}

.report-area ul,
.report-area ol {
    padding-left: 2em;
    margin-bottom: 1em;
}

.report-area li {
    margin-bottom: 0.5em;
}

.report-area pre {
    background-color: #eee;
    padding: 0.5em;
    border-radius: 4px;
    overflow-x: auto;
}

.report-area code {
    font-family: monospace;
    background-color: #eee;
    padding: 2px 5px;
    border-radius: 4px;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 1em;
    background-color: #f0f0f0;
    margin-top: 2em;
    border-top: 1px solid #ccc;
    border-radius: 10px; /* Match navbar's border-radius */
}

.footer-flex-container {
    display: flex;
    flex-direction: column; /* Stack paragraphs vertically */
    align-items: center; /* Center items horizontally */
    flex-wrap: wrap; /* Allow paragraphs to wrap on smaller screens */
}

footer p {
    margin: 0.5em; /* Add some spacing around paragraphs */
    display: block; /* Force each paragraph to be on a new line */
}

/* Spinner Styles (replace with your preferred style) */
        #spinner { display: none; }
        #spinner.active { display: inline-block; margin-left: 10px; }
        .auto-resize {
            width: 100%; /* Or a fixed width if preferred */
            min-height: 50px; /* Minimum height */
            max-height: 200px; /* Optional maximum height */
            overflow-y: auto;
            box-sizing: border-box; /* Include padding and border in the element's total width and height */
            resize: vertical; /* Allow only vertical resizing */
        }
        .auto-resize:focus { /*Style for focus, may help visibility*/
            outline: 2px solid rgb(85, 102, 153);
        }

        /* Socket Status Icon Styles */
        #socket-status {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-left: 10px;
        }

        #socket-status.connected {
            background-color: green;
        }

        #socket-status.disconnected {
            background-color: red;
        }

/* Sidebar */

.side_bar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 100; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #dfe8e7; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 0px; /* Place content 60px from the top */
  padding-left: 0px;
  transition: width 0.5s ease;
  background-color: rgb(200, 200, 200); /* 80% opaque background */
}

.side_bar.resizing {
  transition: none; /* Disable transition during resizing */
}

/* When you mouse over the navigation links, change their color */
.side_bar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.side_bar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Full screen button */
.side_bar.fullscreen {
  width: 100% !important; /* Override inline styles */
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000; /* Ensure it's on top of everything */
}

.Speak {
position: absolute;
  top: 10px;
  left: 50px;
  padding: 5px 10px;
  cursor: pointer;
}

.fullscreen-button {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

#resize-handle {
     position: sticky;
     top: 0;
     left: 0px; /* Or right: 0; depending on which side you want to resize */
     width: 5px;
     height: 100%;
     background-color: #888; /* Or any color you prefer */
     cursor: ew-resize; /* Change cursor to indicate resizability */
     z-index: 2; /* Ensure it's above the sidebar content */
     border-radius: 20px; /* Adjust the value to control the roundness */
 }

.resizing {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#AI_Button {
  position: sticky;
  top: 0px; /* Distance from the top */
  right: 127px; /* Distance from the right */
  transform: none; /* Remove the vertical centering */
  background: none;
  float:right;
/*  background-color: #3BA7A4; */
  border: none;
  border-radius: 50%;
  color: white;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  box-shadow: 0px 0px 40px 20px gold;
  cursor: default; /* change from "grab" */
  z-index: 999;
}

.eddy-logo {
    width: 60px; /* Adjust as needed */
    height: 60px; /* Adjust as needed */
    vertical-align: middle; /* Align the image vertically within the button */
}

#AI_Button:active {
  cursor: grabbing; /* Change cursor when dragging */
}

/* Settings */

.settings {
  position: fixed;
  left: 0px;
  top: 0px;
}

.settings-btn {
  position: fixed;
  left: 0px;
  top: 0px;
  background-color: #3BA7A4;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.settings-btn .fas.fa-cog {
  font-size: 30px; /* Adjust as needed */
}

.settings-content {
  display: none;
  position: fixed;
  left: 0px;
  top: 54px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.settings-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.settings-content a:hover {background-color: #ddd;}

.settings:hover .settings-content {
  display: block;
}

.settings {
  position: absolute; /*Allows precise placement*/
  top: 200px; /*Adjust as needed */
  right: 140px; /*Adjust as needed*/
}

/* Quick prompts styling */

#quick-prompts {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #f0f0f0;
    text-align: center;
    z-index: 10;
}

.quick-prompt-button {
    background-color: #3BA7A4; /* Teal */
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}

.prompt-edit-button {
    background-color: #3BA7A4; /* Teal */
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}

/* The quick prompts popup form - hidden by default */
.add-prompt-form {
  display: none;
  position: fixed;
  bottom: 0;
  left: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a blue background colour to the cancel button */
.form-container .cancel {
  background-color: blue;
}

/* Add a yellow background colour to the edit button */
.form-container .edit {
  background-color: #b3b300;
}

/* Add a red background colour to the delete button */
.form-container .delete {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}


/* Login page */
.login-flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#login-form {
    border-radius: 25px;
    border: 2px solid black;
    padding-top: 2em;
    padding-bottom: 2em;
    padding-right: 5em;
    padding-left: 4em; 
}

#username {
    width: 20vw;
}

#drop_zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

#drop_zone.highlight {
  background-color: #f0f0f0;
}

.drag-over {
  border: 2px dashed #007bff; /* Highlight the drop area */
}

.list-group-item.dragging {
    background-color: rgba(0, 255, 255);
    border: 1px solid #ccc;
    padding: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}


#folderStructure {
 background: none;
 overflow: scroll;
 padding: 10px;
}

/* Differentiate Folders from Resources */
.folder-item {
    background: linear-gradient(to right, rgba(169,169,169,0.9), rgba(255,255,255,0.01)) border-box;   /* #f0f8ff; AliceBlue, a soft folder color */
    border: 3px solid transparent #ddd;
    border-color: blue;
    border-radius: 0.5rem;
    padding: 0.25rem;
    margin-bottom: 2px;

}

.resource-item {
    background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.01)) border-box;   /* #f0f8ff; AliceBlue, a soft folder color */
    border: 3px solid transparent #ddd;
    border-color: blue;
    border-radius: 0.5rem;
    padding: 0.25rem;
    margin-bottom: 2px;
}

.list-group-item {
    display: table;
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin-bottom: 0rem;
    border: none;
}

#addTaskModal {
    width:900px;
    padding:0px;
}

#addTask {
    width:100%;
    padding:0px;
}