* {
   box-sizing: border-box; /* Include padding and border in element's total width/height */
}

h3, h2 {
   font-weight: normal; 
}

.hidden
{
   display: none !important;
}

body {
   display: flex;
   font-family: 'Minion Pro', Georgia, serif;
   margin: 0;
   padding: 0;
}

#left-toolbar {
   position: fixed;
   left: 6px;
   top: 6px;
   width: 60px;
   height: calc(100vh - 12px);
   border-radius: 15px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   background-color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 5px;
   gap: 10px;
}

#book-icon {
   width: 50px;
   height: 65px;
   margin: 5px 0;
   border-radius: 15px;
   padding: 0x;            
   box-sizing: border-box;
}
#book-icon img {
   width: 90%;
   height: 90%;
   border-radius: 15px;
}

/* Styling for ALL the icons inside the toolbar */
.toolbar-icon {
   width: 50px;
   height: 50px;
   border-radius: 10px;
   padding: 10px; /* Padding inside to give more space around the image */
   box-sizing: border-box; /* Ensure padding does not exceed size */
}
.toolbar-image {
   width: 100%;
   height: 100%;
   border-radius: 10px;
}
.toolbar-icon:hover {
   background-color: rgba(0, 0, 0, 0.1);
   transform: scale(1.1); /* slight zoom for better interactivity */
}

/* Styling for disabled buttons */
button[disabled] {
   opacity: 0.5;           /* Dim the icon when disabled */
   cursor: not-allowed !important; /* Prevent interaction when disabled */
   transform: none;        /* Prevent any scaling when hovered */
}

#left-toolbar .divider {
   width: 100%;
   border: none;
   border-top: 3px solid rgba(0, 0, 0, 0.1);
   margin: 15px 0; /* Slightly increased spacing around the divider for balance */
}

#chapter-icons {
   display: flex;
   flex-direction: column;
   gap: 10px; /* Increased gap for better readability */
   color: white;
}         
#chapter-icons img {
   max-width: 36px;
   max-height: 36px;
   box-sizing: border-box; /* Ensure padding does not exceed size */
}
#chapter-icons img:hover {
   background-color: rgba(0, 0, 0, 0.1);
   transform: scale(1.1); /* slight zoom for better interactivity */
}

#edit-tools {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: auto; 
   align-self: center; /* Align at the center of the toolbar */
}
#edit-tools button {
   width: 40px;
   height: 40px;
   border: none;
   border-radius: 50%;
   background-color: black;
   color: white;
   font-size: 1.5em;
   cursor: pointer;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
   outline: none;
}
#edit-tools button:hover {
   transform: scale(1.1); /* slight zoom for better interactivity */   
}

#book-container {
   display: flex;
   flex-direction: column;
   justify-content: center;   /* Centers all children vertically */
   align-items: center;       /* Centers all children horizontally */
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
}
/* Container for the book image */
#book-image {
   max-width: 100%; /* Restrict container width to its parent */
   height: auto; /* Allow height to be adjusted automatically */
   margin-bottom: 20px; /* Space below the image */
   overflow: hidden; /* Prevent any overflow from the container */
}
/* Image inside the container */
#book-image img {
   max-width: 100%; /* Ensure image does not exceed the container width */
   width: 100%; /* Allow image to take full container width */
   height: auto; /* Maintain aspect ratio */
   object-fit: contain; /* Ensure image fits without being cropped */
   border-radius: 50px; /* Add rounded corners for a softer look */
}

#book-title {
   font-size: 4em;
   margin-bottom: 10px;
   /* No align-self needed, let parent align-items handle it */
}

#main-content {
   position: relative; /* Change to relative so it respects the parent container */
   margin-left: 80px; /* Use margin-left to create space from the left toolbar */
   width: calc(100% - 90px); /* Calculate the remaining width after considering toolbar width and padding */
   box-sizing: border-box;
}

#chapter-container {
   position: relative; /* Change to relative so it respects the parent container */
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
   width: 100%; /* Take full width of the parent container */
   padding: 20px; /* Optional: Add some padding to keep content away from edges */
   box-sizing: border-box;
}

#topics-list {
   position: absolute;
   top: 10px;
   right: 10px;
   max-width: 40%;
   height: 30px; /* Set a consistent height for the container */
   background-color: white;
   border-radius: 5px;
   border: 1px solid gray;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   overflow-y: hidden; /* Hide any overflow in the y-direction */
   display: flex; /* Use flexbox for alignment */
   flex-direction: row; /* Align topics horizontally */
   justify-content: flex-end; /* Align topics to the right */
   align-items: stretch; /* Stretch items to match container height */
   padding: 0; /* Remove padding to ensure no gap for vertical lines */
   font: 1em 'Arial'; /* Set the font for the topics */
}
#topics-list .topic-item {
   padding: 0 20px; /* Horizontal padding only */
   background-color: white;
   color: gray;
   cursor: default; /* Prevent cursor change on hover */
   margin-right: 0; /* No additional horizontal margin */
   box-sizing: border-box; /* Include padding and borders in element's size */
   border-right: 1px solid #ccc; /* Vertical divider between items */
   height: 100%; /* Match the height of the parent container */
   display: flex; /* Use flexbox to center text inside */
   align-items: center; /* Vertically center the text */
   justify-content: center; /* Horizontally center the text */
}
#topics-list .topic-item:last-child {
   border-right: none; /* Remove border from the last item */
}

/* Must be centered horizontally! */
#chapter-icon {
   width: 80px;
   height: 80px;
   border-radius: 25px;
   padding: 10px;
   background-color: #0096FF;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   box-sizing: border-box; /* Ensure padding does not exceed size */
   margin-bottom: 0px; /* Removed margin to align with the title */
   position: relative;
   top: 30px;
}
#chapter-title {
   width: 100%;                /* Take full width of the container */
   display: flex;              /* Use flexbox for easy centering */
   justify-content: center;    /* Center the word horizontally */
   align-items: center;        /* Center the word vertically */
   text-align: center;         /* Center the text within the div */
   font-size: 13vw;            /* Set the font size relative to the viewport width */
   white-space: nowrap;        /* Prevent the word from wrapping to a new line */
   overflow: hidden;           /* Hide overflow in case word exceeds width */
   line-height: 1;             /* Remove extra line spacing */
   padding-bottom: 0px;        /* Keep the Description close to the Title */
}
#chapter-description { 
   max-width: 28%; 
   margin: 0 auto; 
   text-align: center; 
   font-size: 1.5em; 
}
#chapter-subtitle { 
   margin-top: 10px; 
}

.questions {
   margin-top: 20px;
   margin-bottom: 30px;
   max-width: 100%; /* Ensure it does not exceed the container's width */
   box-sizing: border-box; /* Makes sure padding and borders do not add to the width */
   padding: 10px; /* Add some padding for internal spacing */
   overflow: hidden; /* Prevent children from overflowing */
}

.question { 
   margin-bottom: 20px;
}
.answers { 
   display: flex; 
   gap: 10px; 
   margin-top: 10px; 
}
.answer { 
   padding: 10px 20px; 
   background-color: #e0e0e0; 
   border-radius: 5px; 
   cursor: pointer; 
   border-radius: 20px; 
}
.answer.selected { 
   background-color: #6c6c6c; 
   color: white; 
}

/* Custom Colors */
:root {
   --pastel-yellow: #faf5e4;
   --pastel-peach: #fff5e6;
   --pastel-pink: #fde9f0;
   --pastel-lavender: #f5eefb;
}

/* Topics container */
.topics {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
   margin-top: 20px;
   position: relative; /* Allow positioning the "Start Here" label */
   align-items: flex-start; /* Prevent all items from stretching to the same height */
}

/* Start here label styling */
.start-here-label {
   position: absolute;
   top: -30px; /* Place it above the first card */
   font-family: 'Arial', sans-serif; /* Use a simple sans-serif font */
   font-size: 1em;
   font-weight: bold;
   color: rgb(168, 165, 165); /* Light gray color for less emphasis */
   display: flex;
   align-items: center;
   gap: 5px;
}

/* Styling for the arrow next to the label */
.start-here-label .arrow {
   transform: translateY(5px);
   font-size: 1.5em; /* Increase the size for emphasis */
   color: #7a776f; /* Match the color for a subtle arrow */
}

/* Topic card styling */
.topic-card {
   padding: 20px;
   border-radius: 15px;
   cursor: pointer;
   width: 20%; /* Maintain consistent width, but allow height to be flexible */
   color: #333;
   text-align: left;
   display: block; /* Ensure block display to have natural height */
   position: relative; /* Needed for positioning the number */
   background-color: var(--pastel-yellow); /* Light pastel background */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
   border: 1px solid #ece8d8; /* Subtle border for soft edge definition */
   margin-bottom: 20px; /* Add margin to separate cards vertically */
}

/* Topic card title styling */
.topic-card strong.topic-title {
   display: inline-block;
   font: 0.9em 'Arial'; /* Use a simple sans-serif font for the title */
   margin-bottom: 5px;
   border: 1px solid #d6d3c9; /* Light border to match the subtle style */
   padding: 2px 8px;
   border-radius: 8px;
   font-weight: normal;
   color: #7a776f; /* Light gray color for less emphasis */
   background-color: transparent;
}

/* Topic card paragraph styling */
.topic-card p {
   font-size: 1.1em;
   line-height: 1.6;
   margin: 10px 0 0;
   text-align: left;
   font-family: 'Georgia', serif; /* Elegant serif font to make it stand out */
   color: #333; /* Darker color for emphasis */
}

/* Topic card number styling */
.topic-card .topic-number {
   position: absolute;
   right: 10px;
   bottom: 0px; /* Stick to the bottom of the card */
   font-size: 10em; /* Increase size for a stronger visual effect */
   color: rgba(0, 0, 0, 0.05); /* Very light color for a subtle effect */
   font-family: 'Georgia', serif; /* Consistent elegant serif font */
   pointer-events: none; /* Prevent the number from being clickable */
}

#text-and-assistant {
   display: flex; /* Use Flexbox to align items horizontally */
   justify-content: space-between; /* Create space between the two elements */
   align-items: flex-start; /* Align items to the top (can adjust to flex-end if needed) */
   width: 100%;
   box-sizing: border-box; /* Ensure padding is included in the element size */
   margin-top: 20px;
}

#chapter-text {
   flex: 1; /* Allow chapter-text to take up available space */
   margin-right: 20px; /* Add space between chapter-text and assistant-container */
   max-width: 48%; /* Limit width to 48% to have space for margin */
   height: 500px; /* Set a fixed height for the chapter text */
   padding: 20px;
   background-color: var(--pastel-yellow);
   border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   overflow-y: auto; /* Allow vertical scrolling if content exceeds height */
}
#chapter-text-title { 
   font: 1.6em 'Arial'; 
}
#chapter-text-title h2 { 
   font: 1.6em 'Arial'; 
}

#assistant-container {
   flex: 1; /* Allow assistant-container to take up available space */
   max-width: 48%; /* Limit width to 48% to balance with chapter-text */
   height: 500px; /* Set a fixed height for the assistant container */
   padding: 20px;
   background-color: #f4f4f4;
   border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   position: relative;
}
#iAIgW-chat-form {
   right: 0; /* Align the form to the right */
   bottom: 0; /* Align the form to the bottom */
   /* Position relative to its parent container */
   position: absolute;
   width: 100%; /* Take full width of the parent container */
   height: 100%; /* Take full height of the parent container */
}

.popup { max-width: 70%; 
   max-height: 70%; 
   overflow: auto ;
   position: fixed; 
   top: 50%; 
   left: 50%; 
   transform: translate(-50%, -50%); 
   background: white; 
   padding: 20px; 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
   display: none; z-index: 10; 
}
.popup.active { 
   display: block; 
}
.popup h3 { 
   margin: 0 0 10px; 
}
.popup button { 
   margin-top: 20px; 
}
.free-form-answer { 
   margin-top: 15px; 
}
.free-form-answer label { 
   display: block; 
   font-weight: bold; 
   margin-bottom: 5px; 
}
.modal-overlay { 
   position: fixed; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
   background-color: rgba(0, 0, 0, 0.5); 
   z-index: 9; 
   display: none; 
}
.modal-overlay.active { 
   display: block; 
}
body.modal-active { 
   overflow: hidden; 
}
@media (max-width: 768px) { 

   #text-and-assistant { 
      flex-direction: column; 
      gap: 20px;
   }
   #assistant-container, #chapter-text { 
      min-width: 100%; 
      right: 0;      
      height: 300px;
      min-height: 300px;
      max-height: 300px;
      overflow-y: auto;      
   }
   #assistant-container {
      overflow-x: auto;
   }
   #topics-list {
      max-width: 70%;
   }   
   .topic-card {
      width: 48%;
   }
}