:root {
   --ivory: #FAFFEB;
   --platinum: #DEE6E3;
   --bone: #e5e3d1;
   --brunswick-green: #0D4E3B;
   --myrtle-green: #35797C;
   --battleship-gray: #728981;
   --black: #000000;
   --white: #FFFFFF;
   /*-- system color variables -- */
   --page-bg: var(--bone);
   --chat-bg: var(--white);
   --input-bg: var(--white);
   --chat-border: var(--myrtle-green);
   --system-color: var(--black);
   --message-border: var(--chat-bg);
   --message-shadow: var(--black);

   --button-bg:var(--brunswick-green);
   --button-hover-bg: var(--myrtle-green);
   --button-click-bg: var(--brunswick-green);
   --button-click-bg: var(--black);
   --button-color: var(--white);
   --button-hover-color: var(--white);
   --button-click-color: var(--white);

   /*-- user color variables -- */
   --user-bg: var(--brunswick-green);
   --user-color: var(--white);
   --user-border: var(--myrtle-green);
   --ai-shadow: var(--black);

   /*-- AI color variables -- */
   --ai-bg: var(--battleship-gray);
   --ai-color: var(--ivory);
   --ai-border: var(--myrtle-green);
   --ai-shadow: var(--black);
   --model-color: var(--platinum);



   --input-border: var(--battleship-gray);
   --input-color: var(--black);




   --chat-color: var(--black)
}

* {
   box-sizing: border-box;
   font-size: 16px;
}

.message-button-wrapper {
   display: flex;
   justify-content: flex-end; /* Align buttons to the right */
   align-items: center; /* Center buttons vertically */
   padding: 2px; /* Add padding around the buttons */
   margin-top: 2px; /* Add margin to separate buttons from the chat bubble content */
   border-top: 1px solid #ccc; /* Optional: Add a top border to separate buttons from the chat bubble */
}

.button {
   min-width: 44px;
   max-height: 44px;
   padding: 5px 10px;
   margin: 0 5px;
   border: 1px solid var(--button-border);
   border-radius: 50%;
   background-color: var(--button-bg);
   color: var(--button-color);
   cursor: pointer;
   display: flex; /* Ensure buttons are flex items */
   align-items: center; /* Center content vertically */
   justify-content: center;
}

.round-button {
   aspect-ratio: 1 / 1; /* Maintain a 1:1 aspect ratio */
}



html, body {
   min-width: 320px; /* Minimum width */
   min-height: 480px; /* Minimum height */
   margin: 0;
   padding: 0;
   overflow: hidden; /* Prevent scrolling */
   display: flex;
   flex-direction: column;
   height: 100%; /* Ensure the body takes up the full height */
}

body {
   background-color: var(--page-bg);
   font-family: 'Montserrat', sans-serif;
   color: var(--system-color);
   display: flex;
   flex-direction: column;
   margin: 0;
   padding-left: 0.1%;
   padding-right: 0.1%;
   overflow-x: hidden;
}

.system-menu {
   background-color: var(--page-bg);
   color: var(--system-color)
}


#modelSelector {
   position: relative;
   z-index: 90;
   flex-grow: 0.2;
   background-color: var(--chat-bg);
   border: 0px solid var(--battleship-gray);
   width: 200px;
   font-size: 1em;
   appearance: none;
   outline: none;
   cursor: pointer;
   border-radius: 4px;
   font: inherit;
   color: inherit;
   text-align-last: center; /* Aligns the text for the select element itself */
}

#modelSelector option {
   padding: 8px 16px;
   cursor: pointer;
   background-color: var(--white);
   color: var(--black);
   font: inherit;
   color: inherit;
}

#modelSelector option:hover {
   background-color: var(--platinum);
}

#chat {
   min-height: 200px; 
   min-width: 340px; 
   width: 100vw;
   height: 100vh;
   max-width: calc(100vw - 1%); 
   max-height: calc(100vh - 8%); 
   margin: 5px;
   display: flex;
   flex-direction: row;
   color: var(--system-color);
   border-radius: 10px;
   justify-content: flex-end;
   position: relative;
   overflow: hidden;
}

#chat:before {
   display: block;
   padding-top: 177.78%;
   position: absolute;
   color: var(--chat-color);
   border: 1px solid var(--chat-border);
   background-color: var(--chat-bg);
   resize: both;
   
}


#navbar {
   flex: 0 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: auto;
   border-radius: 10px;
   overflow: hidden;

}

#navbar > div:nth-child(2) {
   flex: 2;
 }

#header, #title-nav {
   flex-grow: 0.2; /* Allow headers to fill the space */
   text-align: center; /* Center the text of headers */
 }

.header{
   font-size: 1.5em;
   font-weight: bold;
   font: var(--system-color);
}

.nav-button{
   display: flex;
   justify-content: center;
   align-items: center;
}

.nav-button .ms-Icon {
   font-size: 2em; /* Adjust based on the button's size */
   width: auto; /* For SVG icons */
   height: auto; /* For SVG icons */
}

.title-nav {
   text-align: center;
   font-size: 0.8em;
   font-weight: bold;
   width: 100%;
}

#main-col-1, #main-col-2 {
   background-color: var(--chat-bg);
   flex: 1 1 50%; /* Ensure both columns take up equal space */
   max-width: 99%;
   padding: 1px;
   display: flex;
   flex-direction: column;
   resize: horizontal; /* Allow user to adjust the width */
   overflow: auto; /* Ensure content doesn't overflow */
   overflow-clip-margin: content-box !important;
   overflow: clip !important;
   border-width: 2px;
   border-style: inset;
   border-color: initial;
   border-image: initial;
   border-radius: 10px;
}

#main-col-1 {
   background-color: var(--chat-bg);
   flex: 1 ;
   max-width: 99%;
   min-width: 343px;
   padding: 0px;
   display: flex;
   flex-direction: column;

}

#main-col-2 {
   background-color: var(--chat-bg);
   flex: 1;
   max-width: calc(99vw - 380px);
   max-width: 99%;
   min-width:0.1%;
}

/* Style for the resizable handle */
.resizer {
   cursor: ew-resize; /* Horizontal resize cursor */
   position: relative;
   width: 2px;
   z-index: 900;
}

#grab-box-L, #grab-box-R {
   position: absolute;
   width: 44px; /* Half of the original width */
   height: 44px;
   background-color: #ccc; /* Adjust as needed */
   top: 80vh;
   cursor: grab;
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center; /* Ensure text is centered */
}

#grab-box-L {
   left: 0;
   border-radius: 0 50% 50% 0; /* Left half circle */
}

#grab-box-R {
   right: 0;
   border-radius: 50% 0 0 50%; /* Right half circle */
}

#tool-wraper {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px;
   background-color: var(--chat-bg);
   border-radius: 10px;
   margin: 10px;
}


#messages {
   flex: 1 1 auto; /* Messages should take the remaining space */
   background-color: var(--messages-bg);
   position: relative;
   overflow-y: auto;
   overflow-x: hidden;
}

#messages:before {
   content: "";
   float: left;
   visibility: hidden;
}

#input-area {
   color: var(--system-color);
   background-color: var(--input-bg);
   position: absolute; /* Position it within the parent */
   bottom: 0; /* Align it to the bottom */
   width: 100%; /* Make it take up the full width */
   z-index: 10; /* Ensure it appears on top */
   opacity: 0.8; /* Adjust the transparency */
}

.message {
   clear: both;
   margin-bottom: 10px;
   padding: 10px 20px;
   border-radius: 20px;
   width: fit-content;
   clear: both;
   line-height: 1.5em;
   position: relative;
   margin-bottom: 10px;
   font-size: 1em;
}

#fileReadyMessage {
   width: 100%;
   background-color: #f0f0f0; /* Example background color */
   padding: 10px;
   box-sizing: border-box;
   text-align: center;
}

/* Loading bar styles */
.loading-bar {
   bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 50px;
   background-color: var(--chat-bg);
   margin-top: 10px;
   margin-bottom: 10px;
}

.loading-bar .spinner {
   border: 4px solid var(--brunswick-green);
   border-left-color: var(--chat-bg);
   border-radius: 50%;
   width: 24px;
   height: 24px;
   animation: spin 2s linear infinite;
   margin-top: 10px;
   margin-bottom: 10px;
}

/* Spinner animation */
@keyframes spin {
   to {
       transform: rotate(360deg);
   }
}
.system-message {
   align-self: center;
   margin-top: 10px;
   margin-bottom: 300px;
   padding-bottom: 0px;
   margin: auto; 
   display: flex; 
   justify-content: center; 
   align-items: center;
   background-color: var(--chat-bg);
   color: var(--system-color);
   box-shadow: none;
   border: none;
}



.user-message {
   align-self: flex-end;
   float: right;
   margin-right: 5px;
   max-width: 80%;
   color: var(--user-color); 
   background-color: var(--user-bg);
   box-shadow: 0px 0px 10px var(--message-shadow);
   border: 2px solid var(--user-border);
}

.ai-response {
   align-self: flex-start;
   float: left;
   margin-left: 5px;
   margin-right: 5px;
   max-width: 100%;
   background-color: var(--ai-bg);
   color: var(--ai-color);
   box-shadow: 0px 0px 10px var(--message-shadow);
   border: 2px solid var(--ai-border);
}

.message-preview {
   align-self: flex-end;
   float: right;
   margin-right: 20px;
   margin-left: 0px;
 }

.model-name {
   display: block;
   margin-top: 5px;
   font-size: 0.8em;
   color: var(--model-color);
}

.message-image-class {
   width: auto;  /* Make the image responsive */
   max-width: 80%; /* Image can grow until 80% of its container's width */
   max-height: 30vh; /* Optional: Limit the image's height to 80% of the viewport height */
   border: 1px solid var(--message-border); /* Add a border */
   border-radius: 50px; /* Rounded corners */
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Add a more diffused shadow */
   display: block; /* Make the image a block element */
   margin-left: auto; /* Push the image to the right */
   margin-right: auto; /* Push the image to the left */
}


#inputArea {
   flex: 0 0 auto; /* Input area should take its natural height */
   display: flex;
   justify-content: flex-end; /* Ensure the input area stays at the bottom */
   align-items: center;
   background-color: var(--chat-bg);
}

#input {
   resize: none;
   flex-grow: 1;
   padding: 15px;
   padding-right:60px;
   border: 0px solid var(--chat-bg);
   border-radius: 10px;
   font-size: 16px
}

#sendButton {
   position: absolute;  /* set this to take button out of the normal flow */
   top: 25%;  /* adjust this to suit the vertical position */
   right: 10px;  /* adjust this to suit the horizontal position */
 }

 #settingsDrawer {
   position: fixed;
   padding: 10px; /* Adjusted to create space for the inner container */
   right: 0;
   top: 1vh;
   width: 66.66vw; /* 2/3 of the width */
   max-width: 600px;
   height: 90vh; /* Full height of the viewport */
   background-color: var(--page-bg); /* Set the background color to match the chat background */
   z-index: 9998; /* Set a higher z-index to ensure the drawer is on top of other content */
   border: 2px solid var(--message-border); /* Add a border around the entire div */
   transition: transform 0.5s ease, opacity 0.5s ease;
   border-radius: 15px; /* Rounded corners */
   overflow: hidden; /* Hide overflow to maintain the border-radius effect */
   left: auto; /* Ensure the drawer is positioned correctly */
}

.inner-content {
   height: calc(100% - 20px); /* Adjust height to prevent touching the edges */
   overflow-y: auto; /* Enable scrolling for this inner div */
   padding-right: 10px; /* Optional: Adjust if you want more content padding */
   box-sizing: border-box; /* Includes padding in the element's total width and height */
   max-width: 100%; /* Ensures the element does not extend beyond its parent's width */
   position: relative; /* Establishes a positioning context for absolute positioned children */
}

.showDrawer {
   transform: translateX(0%);
   opacity: 1; /* Ensure the drawer is fully visible when shown */
}

.hideDrawer {
   transform: translateX(100%);
   opacity: 0; /* Start with fully transparent when hiding */
}

.input-area {
  color: var(--system-color);
  background-color: var(--input-bg);
}inputs {
   list-style: none; 
   padding-left: 0;
}

.settings-list {
    list-style-type: none;  
}

.setting-row {
   list-style: none; 
   padding-left: 0;
   display: flex;  /* Allows for easy alignment of child elements */
   justify-content: flex-start;  /* Distributes space evenly between child elements */
   margin-bottom: 10px;  /* Adds space beneath each row */
}

.setting-row::before {
   content: ''; /* Required for the pseudo-element to be generated */
   width: 2%; /* Set amount of space on the left-hand side */
   flex-shrink: 0; /* Prevents the spacer from shrinking */
}

.setting-label {
    min-width: 10%;  /* Assigns a base size to the label element */
    text-align: right; /* Aligns text to the right */
    padding-right: 1%; /* Adds some space between the text and the input field */
    flex-shrink: 0; /* Prevents the label from shrinking */
    display: flex; /* Ensures the label and its ::after pseudo-element align in a flex layout */
    justify-content: space-between; /* Spaces out the label and the ::after content */
    min-width: 150px; /* Adjust this value based on your longest label */
}

.setting-label::after {
   content: ''; /* Keeps your desired content */
   margin-right: 8px; /* Adds some space before the actual tab stop */
   white-space: nowrap; /* Prevents wrapping, ensuring alignment */
}

.setting-select, .setting-input, .setting-text {
   font-size: 16px; /* Ensures font size is at least 16px to prevent zooming */
   flex-grow: 1; /* Allows the element to grow and fill the available space */
   width: 80%; /* Resets any specific width settings */
   text-align: left; /* Adjusts text alignment as needed */
}

.setting-color-select {
   font-size: 16px; /* Ensures font size is at least 16px to prevent zooming */
   width: 40px; /* Sets both width and height to the same value to make it square */
   height: 40px; /* Adjust this value as needed to match your design */
   text-align: center; /* Centers the text, if any, though not typically applicable for color inputs */
   line-height: 40px; /* Helps vertically center the text inside, if applicable */
   padding: 0; /* Removes any default padding */
   border: 1px solid #ccc; /* Optional: adds a border to make the input more visible */
}

/* Additional styles for .setting-label::after if needed */
.setting-row::after {
   content: ''; /* If you need to add content or visual cues after labels */
   max-width: 20px;
   width: 2%;
   flex-grow: 1;
}


#userSettingsDrawer {
   position: fixed;
   left: 0;
   top:0;
   width: 66.66vw; /* 1/3 of the width */
   height: 75vh; /* Full height of the viewport */
   background-color: var(--chat-bg); /* Set the background color to match the chat background */
   z-index: 9999; /* Set a higher z-index to ensure the drawer is on top of other content */
   border: 2px solid var(--message-border); /* Add a border around the entire div */
   transition: transform 0.5s ease, opacity 0.5s ease;
   border-radius: 15px; /* Rounded corners */
   overflow: hidden; /* Hide overflow to maintain the border-radius effect */
}

.showUserSettingsDrawer {
   transform: translateX(0%);
   opacity: 1; /* Ensure the drawer is fully visible when shown */
}

.hideUserSettingsDrawer {
   transform: translateX(-100%);
   opacity: 0; /* Start with fully transparent when hiding */
}


#system-message, #user-memory {
   width: 100%; /* Full width */
   padding: 12px 20px; /* Padding */
   margin: 8px 10px; /* Add a bit of margin */
   box-sizing: border-box; /* Make sure padding and width stays inside the area */
   border: 2px solid #ccc; /* Grey border */
   border-radius: 4px; /* Rounded borders */
   resize: vertical; /* Allow the user to vertically resize the textarea (but not horizontally) */
   font-size: 16px;
}

#userCloseButton {
   position: absolute;
   top: 0;
   right: 0;
}

#closeButton {
   position: absolute;
   top: 10px;
   right: 30px;
}

.col {
   flex: 0 0 auto;
   display: flex;
   flex-direction: row;
}

.flexbox {
   display: flex;
   position: relative;
   flex-grow: 1;
}

.hidden {
   display: none;
}

.col-start {
   flex: 1;
}

.col-middle {
   flex: 4;
}

.col-end {
   flex: 1;
}

.toggle-switch {
   position: relative;
   width: 60px;
   height: 44px;
   display: inline-block;
   vertical-align: middle;
}

.toggle-switch-checkbox {
   display: none;
}

.toggle-switch-label {
   display: block;
   overflow: hidden;
   cursor: pointer;
   border: 2px solid #999999;
   border-radius: 20px;
   background-color: #dddddd;
   height: 30px; /* Add this line */
}

.toggle-switch-inner {
   display: block;
   width: 200%;
   margin-left: -100%;
   transition: margin 0.3s ease-in 0s;
}

.toggle-switch-inner:before, .toggle-switch-inner:after {
   display: block;
   float: left;
   width: 50%;
   height: 30px;
   padding: 0;
   line-height: 30px;
   font-size: 14px;
   color: white;
   box-sizing: border-box;
}

.toggle-switch-inner:before {
   content: "";
   padding-left: 10px;
   background-color: #dddddd;
   color: #ffffff;
}

.toggle-switch-inner:after {
   content: "";
   padding-right: 10px;
   background-color: #4caf50;
   color: #ffffff;
   text-align: right;
}

.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
   margin-left: 0;
}

.toggle-switch-switch {
   display: block;
   width: 28px;
   margin: 1px;
   background: #ffffff;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 30px;
   border: 2px solid #999999;
   border-radius: 20px;
   transition: all 0.3s ease-in 0s; 
}

.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
   right: 0px; 
}

.square-button {
      display: inline-block;
      min-width: 44px;
      min-height: 44px;
      width: auto;
      height: auto;
      background-color: var(--button-bg); /* Green background */
      border: none;  /* Remove borders */
      color: var(--button-color);  /* White text */
      text-align: center;  /* Center the text */
      font-size: 8px;  /* Set a font size */
      transition: 0.3s;  /* Add a transition effect (when mouse leaves the button) */
      box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Give depth with shadow */
      border-radius: 4px;  /* Round the corners */
      aspect-ratio: auto; 
 }

 .remove-button {
   position: absolute;
   top: -3px;
   right: -3px;
   box-shadow: none;
   background-color: transparent; /* Optional: Add background color for better visibility */
   color: var(--chat-color); /* Optional: Add text color for better visibility */
   border: none; /* Optional: Remove default button border */
   padding: 1px; /* Optional: Add padding for better appearance */
   cursor: pointer; /* Optional: Change cursor to pointer on hover */
}

 



@media (max-width: 600px) {
   /* Styles for mobile devices */
    #settingsDrawer, #userSettingsDrawer, #navBar, #chat {
      width: 100%;
   }

   #settingsDrawer, #userSettingsDrawer {
      width: 90%; /* Adjusted for specific elements */
   }
}

@media (min-width: 601px) and (max-width: 900px) {
   /* Styles for tablets and small screens */
    #navBar, #chat  {
      width: 100%;
   }
   #settingsDrawer, #userSettingsDrawer {
      width: 90%; /* Adjusted for specific elements */
   }
}

@media (min-width: 901px) {
   /* Styles for desktops and larger screens */
    #navBar, #chat  {
      width: 100%;
   }
   #settingsDrawer, #userSettingsDrawer {
      width: 90%; /* Adjusted for specific elements */
   }
}

/* Safari-specific styles using feature queries */
@supports (-webkit-touch-callout: none) {
   body {
      min-height: -webkit-fill-available; /* Adjust for Safari */
   }
}