body {
    min-height: 90vh; /* Ensures it's at least 90% of the viewport height */
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center; /* Centers horizontally */
    
}

.main-content {
	
	display: flex;
	flex-direction: column; /* stack vertically */
    width: 85vw; /* adjust entire screen view matching to Body "min-height: 90vh;" */
	align-items: center;  /* Center contents horizontally */
   	
	/* padding: 10px; /* Ensure space between content and AI results */ 
	
}

#mainImage {
   justify-content: center;
    border-radius: 10px;
	height: auto;
    margin-top: 20px;
    max-width: 300px;
    margin-bottom: 20px;
}



/* Reset icon svg. Margin code adds addition gap up or down for the reset icon  */
.reset-icon {
    display: flex; /* Use flex to manage layout */
    flex-direction: column; /* Stack icon and text vertically */
    justify-content: center; /* Center content vertically in the container */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Ensure text is centered under the icon */
    color: black; /* Maintain color scheme */
    text-decoration: none; /* Remove text underline */
    font-size: 14px; /* Adjust font size as needed */
    width: auto; /* Only be as wide as its content requires */
    /* box-sizing: border-box; /* Include padding and border in the element's width */ 
	 margin-bottom: -8px; 	 /* adjusts reset icon up/down to align with search box */
}

h1 {
    margin-top: 10px; /* Add more space at the top */
    font-family: 'Roboto', sans-serif; /* Use Roboto font */
    font-weight: 900; /* Make it bold */
    font-size: 3em; /* Increase the size */
    color: #00C48C; /* shade of green */
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5); /* Add shadow for depth */
    text-align: center; /* Center the title */
	letter-spacing: 2px; /* Adds slight space between characters */
}




/* Main Search box centering horizonally across page top search and bottom */
.search-container {
     display: flex; /* flexbox layout for lining items up in a row "Reset Icon" and Search. */
     align-items: center; /* This centers the children vertically */
	 justify-content: center;	/* will move search bar in center after API Messages */
	 margin-left: 30px;  /* centers the search box above image & below title */ 
}

/* border color change in primary search bar */
#searchQuery:focus {
    border-color: blue; /* Changes border color to blue when input is focused */
    outline: none; /* Removes the default focus outline, optional */
	
}

/* primary search input "AI Search" */
#searchQuery {
     /* flex-grow: 1; - Allows the input to take up as much space as possible, pushing the icon to the edge */
	font-style: italic; /* Adds italic style to placeholder text */
    width: 400px;  /* width of search bar */
   	background: url('submiticon.png') no-repeat right center;
    background-size: 24px 25px;  /* Adjust size of the icon */
    border: 2px solid black;  /* Style the border as needed */ 
    border-radius: 15px;  /* Optional: for rounded corners */ 
	/* width: 250px; /* Width for input search bar  */ 
    padding: 10px; 	/* Makes the search box wider */
	margin-top: 5px;
	/* display: block;  */ 	/* Makes input and button block level elements */
    margin-left: 7px; 	/* centers search bar above main image but also affects distance of "Tell me more" and "Chat with me" */ 
	margin-right: 7px; /* Spacing between the search box and the Reset icon */
	/* margin-bottom: 1px; 	 affects distance of above search box and reset and logo   */
    /* margin-right: auto; */
    /* border-radius: 10px; /* Rounded corners */
	font-size: 16px; /* adding this size font so iphone doesn't zoom when search bar is selected */
      /* background-color: Purple;   */
	padding-right: 30px;  /* Make room for the text and submit icon inside the input */
}

/* "Tell me more Button"  */
#continueButton {
    display: block;
	margin-top: 6px; 	/* distance from grey line. 6px aligns up/down distance for "Tell me more" with "Chat with me"   */
	/* margin-left: 6px;  /* provides distance for "Tell me more" on the left side	 */	 
	font-size: 14px;
    background-color: #00C48C; 	/* shade of green */
      /* prevents inheriting the arrow in submit button */
			/* background-image: none; */
	color: white;
    border: none;
    border-radius: 7px;
    cursor: pointer;
	/* display: inline-block;  /* Override any display values inherited from other button styles */ 
	height: 45px; /* Fixed height of the button */
	width: 70px; 	/* fixed width size of button */
	padding: 2px 2px; 	/* button size adjustment */
	
}



#apiResponse {
    overflow-wrap: break-word; /* Ensures text wraps and doesn't overflow */
    font-family: 'Roboto', sans-serif;
	font-size: 15px; /* font size */
}




#messageDisplay.visible {
  display: block; /* Show the message */
  opacity: 1; /* Fully visible */
}

/* Chat bot styles */

/* Entire Container around chat from user, AI Response and "Chat with me" */
.chat-container {
    display: none; /* Keeps the element hidden until needed */
	background-color: #fff; 	/* white */
	/* background-color: purple; */
	
	
}


/* Grey line across page & Container Box around chat from user and AI Response */
.chat-content {
    /* margin-left: 100px; 	/* this does move the API chats output over */ 
	/* height: 200px; 	/* distance of chat with me container to messages. */ 
    overflow-y: auto; 	/* once messages exceed screen size a vertical scroll bar appears.  */
    padding: 10px; 	/* distance from chats to grey border */
    border-bottom: 1px solid #ccc; 	/* light gray */
	/* margin-bottom: 1px; */
	/* cursor: pointer; */
}

/* margin adjustements between chats and layout boxes*/
.user-message, .bot-message {
    margin: 5px 0; 	/* provides distance between User Chat & AI Response */
    padding: 10px;
    border-radius: 12px;
    /* max-width: 80%;  reduces the space the chats take up so it will make less room on right side */
	
}

/* Message box displaying what the user entered */
.user-message {
     
	background-color: #007BFF; 	/* shade of blue */
    color: white;
    align-self: flex-end;
    margin-right: 15px;
}

.bot-message {
    background-color: #e0e0e0; 	/* light-gray */
    color: black;
    align-self: flex-start;
    margin-left: 15px;
}


/* loading indicator */
.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;   /* Fixed positioning relative to the viewport */
    top: 55%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to be truly centered */
    display: none; /* Initially hidden, shown via JavaScript */
}

.dot {
    width: 15px;
    height: 15px;
    background-color: purple;
    border-radius: 50%;
    margin: 0 5px;
    animation: moveDots 1.5s linear infinite;
}
/* End of loading indicator */

#chatContent {
    position: relative;
    /* other existing styles, ensure there's enough height */
    /* min-height: 2px;  /* Example minimum height */ 
}


#shareIcon {
    position: absolute;
    right: 1px;  /* Adjust this value to move the icon left or right */
    bottom: 5px; /* Adjust this value to move the icon up or down */
    width: 25px;  /* or your preferred size */
    height: auto; /* maintains the aspect ratio */
}

#MoreInfo {
	position: absolute;
    right: 0px;  /* Adjust this value to move the icon left or right */
    top: 5px; /* Adjust this value to move the icon up or down */
    width: 25px;  /* or your preferred size */
    height: auto; /* maintains the aspect ratio */
}

@keyframes moveDots {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Adjust the movement distance */
    }
}

/* End of loading indicator */



/* Responsive styles for mobile devices */
@media (max-width: 600px) {
  body, .container, .search-container, .main-content {
    width: 90vw; 	/* Ensures it's 90% of the viewport width */
    display: flex;  /* Using flex to align child elements */
    /* flex-direction: row; /* Aligns children in a row */ 
    /* align-items: center; /* Centers items vertically */ 
    /* justify-content: space-between; /* Distributes space between children */ 
  }

  #continueButton {
    height: 45px;
    position: relative; /* Changed from fixed to relative for better flex alignment */
    /* margin-left: 1px; /* Ensures 3px space from the previous element */ 
  }

  #searchQuery {
    position: relative;  
    width: calc(100% - 50px); /* Adjust width to prevent overlap, assuming button width of around 45px */
    margin-right: 5px; /* Ensures 3px space before the button */
  }
}