/*
mainddd.css ==> 3000 lines from our HTML5up website 
riseup.css = Added the below 2000 lines from ddd/gpt17.php and bigsmall.css
*/

/* #region *********************************** Loading of page  ************************************** */

 /* Prevent flash of unstyled content - Hide content until styles are loaded */
.js-loading {
    visibility: hidden;
  }

/* Animation smoothing for page reveal */
html:not(.js-loading) {
    transition: visibility 0s 0.1s;
  }
/* #endregion */

/* #region ************************************* Root level  ******************************************/
:root {
    --bg-color-light: #f1f3f3;          /* eggshell white - background - light theme */      
   /*  --panel-color-light: #ededed;  */ 
    --panel-color-light: #f8f9fa;     /* #eef1f5; */       /* light grey - panel background - light theme */
    
    --comment-bg-light: #f9f9fc;        /* grey - comments background color - light theme  */  
    --text-color-light: #333;           /* dark grey - text - light theme  */
    --card-bg-light: #ffffff;           /* white - responses background - light theme */
    --accent-color-light: #87a726;      /* green - banner and buttons - light theme  */
    --highlight-color-light: #a95818;   /* orange - icons on mouse over - light theme  */

    --bg-color-dark: #676767;           /* dark bluegreen - background - dark theme */  
    --comment-bg-dark: #e0adad;         /* grey - comments background color - dark theme  */ 
    --text-color-dark: #eaeaea;         /* eggshell white - text - light theme  */
    --card-bg-dark: #404040;            /* dark grey - responses background - dark theme */
    --accent-color-dark: #8a8769;       /* sand - banner and buttons - dark theme  */
    --highlight-color-dark: #f96d00;    /* orange - icons on mouse over - dark theme  */

    --border-color-light: #e0e0e0;
    --accent-color: #87a726;
    --border-color: #ddd;
    --text-color: #333;
    --background-color: #f8f9fa;

    --green-for-hover: #87a726; 
    --grey-for-buttons: #6f6f6f;

    --main-green: #789127;
}
/* #endregion */

/* #region *********************************** Header with logo ***************************************/
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--accent-color-light);
    color: white;
    overflow: visible;  /* Allow popups to extend beyond */
}

/* Base styling with responsive text */
.flex-item-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem;
    line-height: 1.2;
}

.site-logo, .product-logo {
    font-family: 'Roboto Slab', sans-serif;
    font-size: clamp(0.7rem, 2vw + 0.25rem, 1.1rem); /* Responsive text scaling */
    white-space: nowrap;
    text-decoration: none;
}

.site-logo {
    font-weight: 700; /* Using the bold weight from the imported font */
    margin-left: 7px;
    color: var(--text-color-light);
}

.product-logo {
    color: gray;
    font-weight: 400; /* Using the regular weight */
}

.product-name {
    color: gray;
    font-weight: 400; /* Using the regular weight */
    font-size: clamp(0.6rem, 2vw + 0.2rem, 1rem); /* Responsive text scaling */
    white-space: nowrap;
    text-decoration: none;
}

.separator {
    display: inline-block;
    margin: 0 0.2rem;
}


.tab-bar-container {
    text-align: center;
    margin: 0;
    padding: 0;
}

.tab-bar {
    display: flex;
    flex-wrap: nowrap;           /* Prevent wrapping */
    justify-content: flex-start; /* Keep tabs aligned left */
    overflow-x: auto;            /* Enable horizontal scroll */
    white-space: nowrap;         /* Prevent internal wrapping */
    gap: 8px;
    background: white;
    padding: 0.4rem 0.5rem;
    scrollbar-width: none;       /* Firefox */
}

.tab-bar::-webkit-scrollbar {
    display: none;               /* Chrome/Safari */
}

.tab {
    flex-shrink: 0;
    padding: 0.4rem 1rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}


.tab.active {
    border-color: #87a726;
    color: #87a726;
}


/* Only apply hover style to non-active tabs */
.tab:not(.active):hover {
    background-color: #eee;
    color: #4d4d4d;
}


/* Override text color on hover for active tab */
.tab.active:hover {
    color: #4d4d4d !important;
}


.source-link { margin: 0.5em 0; font-size: 0.9em; }
.documents-section ul { list-style-type: none; padding: 0; }
.documents-section li { margin: 0.3em 0; }
.controls { margin-top: 1em; }
.controls button { margin-right: 0.5em; }


/* For very small screens - stack vertically */
@media screen and (max-width: 480px) {
    .flex-item-left {
        flex-direction: column;
        align-items: flex-start;
        /* gap: 0.1rem;  */ 
    }
    
    .separator {
        display: none; /* Hide separator when stacked */
    }
    
    .product-logo {
        margin-left: 0.5rem; /* Indent the second line */
        font-size: 0.9em; /* Slightly smaller than main logo */
    }
}
/* #endregion */

/* #region **************************** Toggle - visibility of sections *********************************/


.map-toggle-line {
    flex: 1;
    height: 1px;
    background: #bbb;
    max-width: 100px;
    opacity: 0.9;
}


.map-toggle-wrapper {
    text-align: center;
}

.map-header {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.map-title {
    font-size: 15px;
    font-weight: 600;
    color: #5b5b5b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.map-toggle-btn {
    background: none;
    border: none;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.1px;
    color: #8aa00d;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    border-radius: 4px;
    box-shadow: none;
    transition: color 0.2s ease;
}

.map-toggle-btn:hover {
    color: #667300;
}

.map-toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.3); /* optional gentle ring */
}


/* #endregion */

/* #region ************************************** Buttons *********************************************/

.btn, .btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    gap: 8px;
    margin: 4px 4px;
    font-size: 0.8em;  
    padding: 0.5em 1em;
    border-radius: 0.375em;
    font-weight: 600;

    background-color: var(--comment-bg-light); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* border: 2px solid transparent;  */
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary {
    background-color: #87a726 !important; /* Brand green */
    color: white !important; /* White text */
    border-color: #87a726 !important;
    box-shadow: 0 3px 5px rgba(0,0,0,0.15); /* Stronger shadow */
    text-transform: uppercase; /* Optional: make text uppercase */
    letter-spacing: 0.5px; /* Slightly spaced letters for emphasis */
}

.btn-secondary {
    border-color: var(--accent-color-light);
    /* color: white;  */
    background-color: #f8f8f8;
    color: #333; 
    border: 2px solid #ddd;
}

.btn-primary:hover {
    background-color: #7a9623 !important; /* Slightly darker on hover */
    border-color: #7a9623 !important;
    color: white !important; /* Keep text white on hover */
    transform: translateY(-2px); /* Slight upward movement */
    box-shadow: 0 5px 10px rgba(0,0,0,0.2); /* Larger shadow on hover */
}

.btn:hover, .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: #87a726;
    text-decoration: none;
    background-color: #fff;
    color: #87a726; 
}

/* Ensure icons in buttons are properly sized and spaced */
.btn i, .btn-primary i {
    margin-right: 8px;
    font-size: 1em;
}
/* #endregion */

/* #region ************************************** Text Area *******************************************/
textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ced4da;
    resize: none;
    box-sizing: border-box;
}

textarea:focus {
    outline: none;
    border-color: var(--accent-color-light);
}
/* #endregion */

/* #region *************************************** section *********************************************/
.section {
    margin: 20px 0px;   /* 20px top and bottom margin */
    padding: 15px;  /* we dont need this padding for mobiles (<480) */

    border-radius: 8px;

    transition: background-color 0.3s;
    clear: both; /* Ensure each section starts on a new "row" */
    width: 100%; /* Take up full width */
}

.section.question-section {
    margin: 0;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column; /* Change from row to column layout */
    align-items: stretch; /* Stretch children to full width */
    clear: both;
    width: 100%;
    display: block;
    border-left: 4px solid var(--main-green);
    background-color: #f9f9f9;
    padding-left: 1rem;
}


/* Reset h3 margins in question section */
.section.question-section h3 {
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove any default padding */
}
/* #endregion */

/* #region *********************************  chat section  ************************************/

/*
    <span class="james">James:</span>
    <div class="james-text">
        Green text for James<br>
    </div>
*/
.fish {
    color: #729620; /* Brighter, more vibrant green */
    font-weight: 700; /* Slightly bolder */
    display: inline-block;
}

.james {
    color: #8d6e63; /* Burgundy */
    font-weight: bold;
    display: inline-block;
}

.others {
    color: #2e5f8c; /* Blue */
    font-weight: bold;
    display: inline-block;
}

/* Add gap before each person speaks */
span.james, span.fish, span.others {
    display: inline-block;
    margin-top: 1.5em;
}

/* Chat content wrapper (regular div after a name) */
span.james + div,
span.fish + div,
span.others + div {
    display: block;
    width: 100%;
    color: #333; /* Standard dark gray text */
    margin-bottom: 1em;
}

/* Add space after chat content */
.chat-content {
    margin-bottom: 2em; /* Adds space after the chat content */
}

/* First speaker should not have top margin */
.chat-content > span:first-child {
    margin-top: 0;
}

/* Reduce space by <br> tags */
.chat-content br {
    content: "";
    display: block;
    margin: 0.4em; /* Adjust this value to control spacing */
    /* line-height: 0.3; */ /* Smaller than normal line height */
}

.chat-content hr.chat {
  /* line-height: 1;  */
  margin:  2em 0 1em 0;   /* top left bottom right */
}

.chat-content h2 {
    margin:  1em 0 0.4em 0;   /* top left bottom right */
}

/* Make all images in chat content responsive */
.chat-content img {
    max-width: 100%; /* Ensure images fit within their container */
    height: auto;
}
/* Reduce space when specific elements follow images */
.chat-content img + p,
.chat-content img + ul,
.chat-content img + ol,
.chat-content img + div {
    margin-top: 5px; /* Less space between image and these elements */
}

/* Reduce spacing after featured image */
/* .image.main {
    margin-bottom: 0.8em;
}  */


/* Handle very large images */
.chat-content .image.main img {
    width: 100%; /* Make sure image fits the container */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Maintain aspect ratio */
}

/* Optional: Add lightbox effect for clickable images */
.chat-content img:hover {
    cursor: pointer;
    opacity: 0.9;
}

.img-wrap-right {
    float: right;
    width: 50%;
    margin: 0 0 0.5em 1em;   /* top right bottom left */
}

/* 60% width centered images */
.img-center {
    float: none;
    width: 60%;
    margin: 0.5em auto 1em auto; /* top right bottom left */
    display: block;
}

/* Clear any floating elements */
.img-center + * {
    clear: both;
}


/* Clear floating after a section ends */
.chat-text::after {
    content: "";
    display: block;
    clear: both;
}

/* List indentation in chat content */
.chat-content ul,
.chat-content ol {
    width: 100%;
    box-sizing: border-box;
    padding-left: 50px; /* Top level list indentation */
    margin-top: 8px;
    margin-bottom: 0.5em;  
}

/* Additional indentation for nested lists */
.chat-content ul ul,
.chat-content ul ol,
.chat-content ol ul,
.chat-content ol ol {
    padding-left: 60px; /* More indentation for nested lists */
    margin-top: 2px;  
}

.chat-content ol li,
.chat-content ul li {
    margin-bottom: 1.75em;  
}



  /* Chat styling */
.chat-preview {
    margin-bottom: 2em;
}

.chat-excerpt {
    margin-bottom: 1em;
}

.chat-tags {
    margin-bottom: 1em;
    font-size: 0.9em;
    color: #888;
}

.chat-tags .tag {
    display: inline-block;
    padding: 0.2em 0.6em;
    margin: 0 0.3em 0.3em 0;
    background: #f4f4f4;
    border-radius: 3px;
    color: #666;
    text-decoration: none;
}

.chat-tags .tag:hover {
    background: #e4e4e4;
    color: #333;
}

.chat-filters {
    margin-bottom: 2em;
}

.chat-filters .button {
    margin: 0 0.5em 0.5em 0;
}

.chat .subtitle {
    font-size: 1.2em;
    font-style: italic;
    margin-top: -1em;
    margin-bottom: 1.5em;
    color: #666;
}

.share-buttons {
    margin-bottom: 1.5em;
}

.share-buttons .button {
    margin-right: 0.5em;
}

.pagination {
    margin-top: 2em;
    text-align: center;
}

.pagination .page-number {
    display: inline-block;
    padding: 0 1em;
}


.myHilite {
  color:#ffffff;
  background-color:#7cac03;     /* #87a726; */   
  font-weight: bolder; 
  /* font-size:15px;  */
  padding:3px;
  border-radius: 5px;
} 

.myHilite2 {
  color:#8f4e1e;
  /* background-color:#7cac03;  */
  font-weight: bolder; 
  /* font-size:15px;  */
  padding:2px;
  /* border-radius: 3px; */
} 

.myHilite3 {
    background-color: #fff2cc;
    padding: 0 3px;
}


.question-prompt {
  margin-bottom: 0.3em;
  color: #7e9b18; /*  green */
  font-style: italic;
}



/* #endregion */

/* #region ****************************************  Admin stuff  **************************************/

/* Admin badge for popup profile */
.admin-badge-popup {
    display: inline-block;
    background: #4e4a92;
    color: white;
    font-size: 0.7em;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Admin badge for full profile */
.admin-badge-profile {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #4e4a92 0%, #7872cf 100%);
    color: white;
    font-size: 0.8em;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 3px;
    margin: 8px 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.admin-badge-profile i {
    margin-right: 4px;
}

.admin-badge-tooltip {
    visibility: hidden;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s;
    font-weight: normal;
    font-size: 0.8em;
    width: 200px;
}

.admin-badge-profile:hover .admin-badge-tooltip {
    visibility: visible;
    opacity: 1;
}
/* #endregion */

/* #region *******************************  new response stuff - needed?  *******************************/

/* New Response Section Styling */
.new-response-section {
    display: none;              /* Hidden by default */
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 15px 0;
    padding: 10px;
    background-color: var(--panel-color-light);
}

.new-response-section.active {
    display: block;                /* Shown when active */
}

/* Vertically center the Add Response button */
.btn.btn-primary.add-response-btn {
    margin-bottom: 0px; /* Keep consistent spacing */
    vertical-align: middle; /* Align with other elements in line */
}

/* For the Add Response button */
.add-response-btn.hidden {
    display: none;
}

/* Style for disabled add response button */
.add-response-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none; /* Prevent hover effects */
  }
  
  /* Override pointer-events when we want to handle the click */
  .add-response-btn.faded {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: auto; /* Allow click to show notification */
  }
  
/* Make sure the toolbar is visible */
.new-response-section .ql-toolbar {
    display: block ;
    opacity: 1 ;
}

.submit-response-btn {
    margin: 6px;
    /* padding: 6px 12px; 
    background-color: var(--bg-color-light);   
    color: #333;
    border: none;
    border-radius: 4px; */
    cursor: pointer;
}

.cancel-response-btn {
   /* margin-top:11px;
    margin-bottom:6px;
    margin-left:6px;
    padding: 6px 12px;
    background-color: var(--bg-color-light);   
    color: #333;
    border: none;
    border-radius: 4px; */
    cursor: pointer;
}
/* #endregion */

/* #region ************************************  response stuff *****************************************/

 /* Adjust padding */
 .response-header,
 .response-content,
 .response-footer {
     padding: 7px;
 }

 /* Image constraint rules for response content */
.response-content {
    /* overflow: hidden;  */  /* Prevents content from spilling outside */
    position: relative; /* Establishes a positioning context */
}


/* Loading indicator for response saving */
.response-content.saving {
    position: relative;
    opacity: 0.7;
}

.response-content.saving::after {
    content: "Saving...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(130, 157, 48, 0.8);
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 14px;
}


.response-content img {
    max-width: 100%; /* Makes sure images never exceed container width */
    height: auto !important; /* Maintains aspect ratio */
    box-sizing: border-box; /* Includes padding/border in width calculation */
}

/* Fix for right/left aligned images */
.response-content img[style*="float: right"],
.response-content .ql-align-right img {
    margin-left: 15px;
    margin-bottom: 10px;
    max-width: 50%; /* Limit width for floated images */
}

.response-content img[style*="float: left"],
.response-content .ql-align-left img {
    margin-right: 15px;
    margin-bottom: 10px;
    max-width: 50%; /* Limit width for floated images */
}

/* For extra large images that need special treatment */
.response-content img.large-image {
    display: block;
    margin: 10px auto;
    max-width: 100%;
}
/* extra above */

/* Success message styling */
.save-alert {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
/* #endregion */


/* #region ************************************  seed stuff *****************************************/


.section.seed-section {
    margin: 0;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column; /* Change from row to column layout */
    align-items: stretch; /* Stretch children to full width */
    clear: both;
    width: 100%;
    display: block;
    border-left: 4px solid var(--main-green);
    background-color: #f9f9f9;
    padding-left: 1rem;
}


/* Reset h3 margins in seed search section */
.section.seed-section h3 {
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove any default padding */
}


.seed-tools { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.seed-tools button { padding: 0.25rem 0.5rem; border: 1px solid #aaa; border-radius: 4px; background: #f4f4f4; cursor: pointer; font-size: 0.85rem; }
.new-seed-box { margin-top: 2rem; padding: 1rem; border-top: 1px solid #ccc; }
.new-seed-actions button { margin-right: 0.5rem; font-size: 0.7rem; }
.seed-search-box { margin: 1rem 0; }
.quill-editor { height: 200px; font-size: 0.9rem; }
.search-bar-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0; }
.search-bar-row input { flex: 2; min-width: 180px; padding: 0.4rem 0.6rem; font-size: 0.9rem; }
.search-bar-row select { flex: 1; min-width: 100px; padding: 0.4rem 0.6rem; font-size: 0.85rem; }
.search-bar-row button.seed-search-btn { flex: 0 0 auto; width: auto; white-space: nowrap;  }

.new-seed-bar-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0; }
.new-seed-bar-row input { flex: 2; min-width: 180px; padding: 0.4rem 0.6rem; font-size: 0.9rem; }
.new-seed-bar-row select { flex: 1; min-width: 100px; padding: 0.4rem 0.6rem; font-size: 0.85rem; }
.new-seed-bar-row button { flex: 0 0 auto; width: auto; white-space: nowrap;  }



/* Seed seach and new seed forms */
.seed-form-container {
    width: 100%;
    margin-top: 12px;
    margin-bottom: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px 15px;  
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

/* Hide comment forms by default */
.seed-form-container {
    display: none;        /* Hidden by default */
}

/* Show comment forms when active */
.seed-form-container.active {
    display: block;
}

.edit-seed-box textarea {
    width: 100%;
    height: 80px;
    padding: 0.5rem;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.seed-input {
    width: 100%;
    min-height: 60px;
    max-height: 300px; /* Prevent excessive growth */
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    resize: none; /* Disable manual resizing since we'll do it automatically */
    font-family: inherit;
    overflow-y: hidden; /* Hide scrollbar during typing */
    box-sizing: border-box;
    transition: height 0.1s ease;    
    resize: vertical;     
}

/* #endregion */


/* #region *******************************  format all response headers  **********************************/
/*
    <!-- BEGIN HEADER SECTION FOR USER RESPONSES -->
    <div class="section responses-header-section section-responses-user">
        <h2><i class="fas fa-comments"></i> My Responses</h2>
        <div class="filter-items">

    <!-- BEGIN HEADER SECTION FOR OTHER RESPONSES -->
    <div class="section responses-header-section section-responses-others">
        <h2><i class="fas fa-comments"></i> Responses from Others</h2>
        <div class="filter-items">
*/
.responses-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--panel-color-light);
 }

/* format responses from user  
    <!-- BEGIN HEADER SECTION FOR USER RESPONSES -->
    <div class="section responses-header-section section-responses-user">
        <h2><i class="fas fa-comments"></i> My Responses</h2>
        <div class="filter-items">

*/

/* My Responses Section Header */
.section-responses-user {
    /* border-top: 4px solid #7e9b18;   */   /* Green border for user responses section */
    padding-top: 2px;
    border-left: 4px solid #7e9b18; /* Green border for user responses section */
}

.section-responses-user h2,
.responses-header-user h2 {
    color: #7e9b18; /* Green text to match border */
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-top: 18px;
}

/* Make icons match colors too */
.section-responses-user h2 i.fas.fa-comments,
.responses-header-user h2 i.fas.fa-comments {
    margin-right: 10px;
    color: #7e9b18; /* Green icon color to match border */
    font-size: 1.1em; /* Makes icon slightly larger than text */
}

/* format responses from others  */
/*
    <!-- BEGIN HEADER SECTION FOR OTHER RESPONSES -->
    <div class="section responses-header-section section-responses-others">
        <h2><i class="fas fa-comments"></i> Responses from Others</h2>
        <div class="filter-items">

*/
.section-responses-others {
    background-color: var(--panel-color-light);
    padding-top: 2px;
    border-left: 4px solid #a6a63d; /* Sand color border for others' responses section */
}

.section-responses-others h2,
.responses-header-others h2 {
    /* color: var(--accent-color-light);  */
    color: #a6a63d;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-top:18px;
    margin-bottom: 5px;
}

.section-responses-others h2 i.fas.fa-comments,
.responses-header-others h2 i.fas.fa-comments {
    margin-right: 10px;
    /* color: var(--accent-color-light, #6d819c);  */
    color: #a6a63d;
    font-size: 1.1em; /* Makes icon slightly larger than text */
}

/*
    <!-- BEGIN OTHER RESPONSES -->
    <!-- Added 'responses-container' class below for formatting other responses -->
    <div class="other-responses responses-container" id="other-responses-1">

        <!-- BEGIN RESPONSE -->
        <!-- Added 'other-user' class below for formatting other responses -->
        <div class="response other-user" id="response-592" data-response-id="592">

            <!-- BEGIN RESPONSE HEADER -->
            <div class="response-header">
*/

/* Make other users' responses visually distinct */
.response.other-user {
    position: relative !important;  /* Force relative positioning */
    background-color: var(--panel-color-light); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.response.other-user .response-header {
    background-color: var(--comment-bg-light); /* Light grey background for response header */
}

/*
The 'after' pseudo-element exists only in the render tree, not in the DOM, keeping HTML clean.
We dynamically add/remove the 'New' badge by toggling the 'new' CSS class. 
Use absolute positioning relative to the parent container to place it in corner.
*/
.response.other-user.new::after {
    content: "NEW";   
    position: absolute;
    top: 5px;         /* Move it higher */
    right: 5px;       /* Move it more to the right */
    background-color: var(--highlight-color-dark);  
    color: white ;           /* Force white text */
    padding: 3px 10px;                 /* Larger padding */
    border-radius: 10px;
    font-size: 0.9em;                  /* Larger font */
    font-weight: bold;
    z-index: 100;                      /* Ensure it's on top */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Add shadow for emphasis */
}

/* #endregion */


/* #region ************************************** response comments  ***********************************/
.response-comments {
    max-height: none; /* Remove fixed height that causes truncation */
    height: auto;
    overflow: visible;
    padding-bottom: 10px; /* Always keep some padding at bottom */
    transition: opacity 0.3s ease-out; /* Only animate opacity, not height */
    /* border-top: 1px solid #eee;  */
    /* background-color: #fafafa;  */ 
}

/* When editing is active, show the controls */
.response-comments .comment-controls {
    display: flex;
    justify-content: flex-end;
    gap: 6 px;
    /* height: 16px;  */
    /* padding: 3px 0;  */
}

.response-comments .comment-controls button {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 12px;
    /* padding: 3px 6px;  */
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.response-comments .comment-controls button:hover {
    color: #829d30;
}

/* Style for comment icons */
.response-comments .comment-controls i {
    font-size: 15px;
    margin-right: 18px;
}

/* Comment icon highlighting */
.comment-toggle-btn.active {
        color: #829d30;  
}



/* JR - use for all icons - base size is 32px x 32px - colored green or other */
.comment-btn .icon {
  width: 16px;
  height: 16px;
  filter: grayscale(100%) brightness(0.6);
  transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
  opacity: 0.8;
  margin-right: 6px;
  vertical-align: middle;
}

.comment-btn:hover .icon {
  transform: scale(1.25);  /* Only the icon grows */
  filter: none;
  opacity: 1;
}

/* For larger icons (40px base) */
.icon-large {
  width: 40px;
  height: 40px;
}

.comment-btn:hover .icon-large {
  transform: scale(1.15);  /* Less dramatic to avoid overpowering UI */
}






/* Make buttons look like plain icons */
.icon-btn {
    background: none;
    border: none;
    box-shadow: none;
    padding: 3px;
    cursor: pointer;
    color: #555;       
    transition: all 0.2s ease;
    font-size: 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    color: #829d30;
    background-color: #f0f0f0;
}

/* Enhanced edit controls */
.edit-controls {
    margin-top: 15px;
    /* text-align: right;  */
}

/* comment structure */
.comments-container {
    display: block; /* Show by default on page load */
    margin-top: 5px;
    margin-left: 10px;
    /* padding-left: 20px;
    border-left: 2px solid #ddd; */
    height: auto; /* Ensure it expands to full content height */
    max-height: none; /* Override any other max-height rules */
    overflow: visible;   /* Don't hide overflowing content */
}

.comments-container.inactive {
    display: none; /* Hide when inactive */
}


.top-comment-form textarea {
    width: 100%;
    padding: 8px;
}
.top-comment-form button {
    margin-top: 5px;
    padding: 6px 10px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.top-comment {
    border: 1px solid #aaa;
    padding: 8px;
    margin-bottom: 10px;
}


.reply-form textarea {
    width: 100%;
    padding: 6px;
}

.load-more-comments-btn,
.load-more-replies-btn {
    padding: 6px 10px;
    background-color: #555;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
}
/* #endregion */

/* #region ******************************** responses dropdown and filters *********************************/

/* Filter items have a flexbox layout */
.filter-items {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the dropdowns */
}


/* Specific styling for the "Show" label */
.filter-items .show-text {
    /* padding-top: 5px; */    
    margin-top: 9px;
    display: inline-block;
    vertical-align: middle; 
    white-space: nowrap; /* Prevents text wrapping */
    font-size: 0.9em;
}

.response-sortby-dropdown, 
.response-limit-dropdown {
    font-size: 0.9em;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
    min-width: 140px;      /* Make dropdowns wider */
    padding: 3px 6px;
    vertical-align: middle; /* Aligns with other elements */
}

.response-limit-dropdown {
    min-width: 50px;      /* Smaller dropdown for limit  */
}

/* Position the text higher within options */
.response-sortby-dropdown option,
.response-limit-dropdown option {
    padding-top: 0;      /* Remove top padding */
    line-height: 1;      /* Tighter line height */
    vertical-align: top; /* Align text to top */
}
/* #endregion */

/* #region ********************************* response-actions EDIT, DELETE, REPLY, ************************/

.response-actions {     /* EDIT, DELETE, REPLY, PRIVATE */
    display: flex;
    gap: 10px;                   /* Adds spacing between action icons */
}

.response-actions i {
    display: inline-block;
    margin-right: 10px;
    font-size: 1.25em;                            
    /* transition: transform 0.2s, color 0.2s; */        /* Add hover effect */
    cursor: pointer;
    /* color: var(--text-color-light);  */
}


/* Hover effects for icons */
.response-actions i:hover {
    /* transform: scale(1.2);     */                          /* Enlarge on hover */
    color: var(--highlight-color-light);                 /* Change color on hover */
}
/* #endregion */

/* #region ********************************* comment-header - like response-header   **********************/

.comment {
    padding: 10px; 
    border-radius: 8px; /* Optional rounded corners */
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: visible !important;  /* Allow popups to extend beyond */
    /* background-color: var(--comment-bg-light);  */
    background-color:  #e9e9e9;
}

.reply {     /* similar to comment class - for replies  */
    position: relative;
    /* background-color: var(--comment-bg-light);  */
    background-color:  #e9e9e9; 
    padding: 10px;
    border: none;
    border-radius: 8px;
    margin-bottom: 10px;  
    margin-left: 18px; /* Further indent for replies */
    overflow: visible !important;  /* Allow popups to extend beyond */
}

.comment-info {
    display: flex;
    align-items: flex-start;
}

.comment-time {
    text-align: center;
    flex-grow: 1; /* Ensure it's centered in available space */
}

.comment .avatar {
    flex-shrink: 0;
}
/* #endregion */

/* #region ************************************* comment system ************************************************/

/* Ensure comment list has room to grow */
.comment-list {
    margin-bottom: 10px;
    overflow: visible;
}

.top-comment {
    border-left: 3px solid #829d30;
}

/* Comment header with user info */
.comment-header, .reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}


/* User profile link styling */
.user-profile-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    border-bottom: none;
}

.user-profile-link:hover {
    text-decoration: none;
}

/* Avatar sizes */
.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
}

.avatar-mini {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 6px;
}

/* Comment and reply content */
.comment-content, .reply-content {
    display: none;              /*  hidden by default */
    word-wrap: break-word;
    white-space: pre-wrap;     /* preserves \n as visual breaks */
    margin-left: 20px;
    color:  #323538; /* Dark grey text color */
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;    
    color: #222;
}

/* Show comment and reply content when has active class */
.comment-content.active, .reply-content.active {
    display: block;
}

.comment-content h3 {
    font-size: 1.1em;
    margin: 1em 0 0.5em 0;
    font-weight: bold;
}

.comment-content p {
    margin: 0 0 1em 0;
}

.comment-content strong {
    font-weight: bold;
}

.comment-content em {
    font-style: italic;
}

.comment-content code {
    background-color: #f4f4f4;
    font-family: monospace;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 90%;
}

.comment-content a {
    color: #3b6af9;
    text-decoration: underline;
}

.comment-content ul,
.comment-content ol {
    margin: 0 0 1em 1.5em;
    padding-left: 1em;
}

.comment-content li {
    margin-bottom: 0.3em;
}

.comment-content blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid #ccc;
    color: #555;
    font-style: italic;
    background-color: #f9f9f9;
}


/* highlight the user's own reply */
.own-reply {
    /*  background-color: #eef3dc; */
    border-left: 0  px solid #789127;
    /* padding-left: 0.75rem;  */
}

.agent-badge {
    background-color: #93bb24;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;  
    border-radius: 6px;
    margin-top: 2px;
    display: inline-block;
    margin-left: 6px;  
}



/* Edit form visibility */
.edit-reply-form {
    display: none;
}

.edit-reply-form.active {
    display: block;
}

.reply-toggle-btn {
    cursor: pointer;
    color: #829d30;
}

.reply-toggle-btn:hover {
    text-decoration: underline;
}

/* Replies container */
.replies-container {
    margin-left: 10px;
    border-left: 2px solid #e1e4e8;
    overflow: visible !important;
}


/* Comment and reply forms */
.comment-form-container, 
.reply-form-container {
    margin-top: 12px;
    margin-bottom: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px 15px;  
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

/* Hide comment forms by default */
.comment-form-container {
    display: none;        /* Hidden by default */
}

/* Show comment forms when active */
.comment-form-container.active {
    display: block;
}

.reply-form-container {
    display: none; /* Hidden by default */
    margin-left: 62px;
}

.reply-form-container.active {
    display: block; /* Show when active */
}

.comment-input, .reply-input {
    width: 100%;
    min-height: 60px;
    max-height: 300px; /* Prevent excessive growth */
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    resize: none; /* Disable manual resizing since we'll do it automatically */
    font-family: inherit;
    overflow-y: hidden; /* Hide scrollbar during typing */
    box-sizing: border-box;
    transition: height 0.1s ease;    
    resize: vertical;     
}

/* Reply count visibility */
.replies-count {
    display: none; /* Hidden by default */
}

.replies-count.active {
    display: inline-block; /* Show when active */
}


.form-buttons, .reply-buttons {
    display: flex;
    /* gap: 10px; */
}

.submit-comment-btn, .submit-reply-btn {
    cursor: pointer;
}

.submit-comment-btn:hover, .submit-reply-btn:hover {
    background-color: #e0e0e0;
}

.cancel-comment-btn, .cancel-reply-btn {
    color: #333;
    cursor: pointer;
}

.cancel-comment-btn:hover, .cancel-reply-btn:hover {
    background-color: #e0e0e0;
}


/* Style the comment toggle icon for better UX */
.fa-comment.comment-toggle {  transition: color 0.2s ease-in-out;}
.fa-comment.comment-toggle:hover { color: #829d30;}

/* 'Load more' link */
.load-more-container {
    margin-top: 5px;
    margin-bottom: 5px; /* Reduced bottom margin */
    text-align: right; /* Align to right for discreet placement */
    display: block;     
}



.load-more-link {
    background: none;
    border: none; 
    box-shadow: none;
    color: #999;
    cursor: pointer;
    padding: 2px 0;
    margin: 0;
    font-size: 0.8em;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    appearance: none;
    -webkit-appearance: none;
    display: inline;
}

.load-more-link:hover {
    color: #829d30;  
    text-decoration: none;
}

.time-ago { color: #65676b; font-size: 12px; }

/* avatar - for both the response and comment */       
.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 18px;
    color: white;
    margin-right: 10px;
}

.avatar.green { background-color: #424d3d; }
.avatar.orange { background-color: #864e21; }
.avatar.yellow { background-color: #8c762e; }
.avatar.blue { background-color: #394951; }

/* #endregion */

/* #region **************************** reaction icons - used by response, comments and replies   ***************/


/* Reaction container holds the smile icon and the reaction popup menu -  example of placing 2 items side by side */
.reaction-container {
    position: relative; /* Ensures the popup menu is positioned relative to the container */
    display: inline-block;
    vertical-align: middle; /* Aligns with sibling elements */
}

/* Style for the smile icon */
.reaction-smile {
    font-size: 20px;
    color: darkslategray;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s; 
}

/* Smile icon hover effect */
.reaction-smile:hover {
    color: darkgreen;  
}

/* Reaction popup menu styling */
.reaction-popmenu {
    position: absolute;
    top: 50%; /* Aligns the menu vertically with the smile icon */
    right: 120%; /* Places the menu just to the left of the smile icon */
    transform: translateY(-50%); /* Centers the menu vertically */
    display: none; /* Hidden by default */
    background-color: #fff; /* White background for the popup menu */
    border: 1px solid #ddd; /* Light border for the menu */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */
    padding: 10px; /* Space inside the menu */
    gap: 10px; /* Space between reaction icons */
    z-index: 1000; /* Ensures the menu appears above other elements */
    flex-direction: row; /* Aligns the icons horizontally */
}


.reaction-popmenu.active {
    display: flex;              /* Show menu -  explicitly set the display style on hover or when showMenu() is called: */
}


/* Individual reaction icon styles */
.reaction-popmenu i {
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
    margin: 0 5px; /* Adds spacing between icons */
}

/* Reaction icon hover effect */
.reaction-popmenu i:hover {
    transform: scale(1.3); /* Enlarges icon on hover */
    color: darkslateblue; /* Changes icon color to orange on hover */
}

/* Fullscreen overlay for closing the menu on mobile */
.reaction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: transparent; /* Transparent background */
    display: none; /* Hidden by default */
}


/* waz this shit below */


.reactions i {
    font-size: 26px;
    color: #666;
    margin-right: 10px; /* Space between icons */
    margin-top: 5px; /* Space before icons */
    margin-bottom: 10px; /* Space after icons */
    position: relative; /* Needed for adjusting the number */
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
}

.reactions i small {
    font-family: 'Karla', sans-serif;
    font-size: 0.6em; /* Smaller size for the number */
    vertical-align: middle;    /* Align the number properly relative to the icon */
    color: gray;  /* Number color */
}

i.fa-smile { color: grey; }  

i.fa-chevron-right {
    position: absolute; 
    left: -20px; 
    top: 10px; 
    color: #666; 
    font-size: 16px;
}

i.fa-heart { color: red; }
i.fa-thumbs-up { color: #e4da1e; }
i.fa-grin-hearts { color: orange; }
i.fa-grin-beam { color: green; }
i.fa-face-sad-tear { color: darkkhaki; }    /*  what is the diff - fa-face-sad-tear or fa-sad-tear  */
i.fa-sad-tear { color: darkorchid; }
i.fa-smile-wink { color: darkcyan; }
i.fa-scream { color: darkkhaki; }
i.fa-surprise { color: darkgoldenrod; }

i:hover {
    transform: scale(1.2);
    filter: brightness(1.3);
}

/* Enhanced hover effect for reply icons */
i.fa-reply.faded-icon {
    transition: all 0.2s;  /* Smooth transition for all properties */
}

i.fa-reply.faded-icon:hover {
    color: var(--green-for-hover);  /* Green color on hover */
    transform: scale(1.2);  /* Slightly enlarge icon */
    background-color: #f0f0f0;  /* Light background on hover */
    border-radius: 4px;  /* Rounded corners for background */
    text-decoration: none;  /* Remove underline */
}

h1 i.fas {
    margin-right: 3px;
    /* color: #7e9b18;  */
    position: relative;
    top: -6px; /* Move icon up by 3px for a subtle adjustment */
    vertical-align: middle; /* Align icon with text better */
}

/* Add space after icons in buttons */
.btn i, 
.button i {
  margin-right: 0.5em;
}

/* #endregion */

/* #region ****************************  POPUP MENU for comments/replies *************************************/
/* 
 * =====================================================
 * POPUP MENU for comments /replies
    <div class="comment-menu-trigger">
        <i class="fa fa-ellipsis-h menu-icon" title="More"></i>
        <div class="menu-popup">
            <div class="menu-item-reply" data-action="edit" data-reply-id="157">
                <i class="fa fa-edit"></i>Edit
            </div>
            <div class="menu-item-reply" data-action="delete" data-reply-id="157">
                <i class="fa fa-trash"></i>Delete
            </div>
        </div> <!-- menu-popup -->
    </div> <!-- comment-menu-trigger -->
 * =====================================================
 */

/* 1. Menu wrapper for correct positioning */
.comment-menu-trigger {
    position: relative;
    display: inline-block;
}

/* 2. Menu popup styling */
.menu-popup {
    display: none;  /* Hide by default */
    position: absolute;
    right: 0;   /* Align with right edge of trigger */
    bottom: 100%;  /* Position above the trigger instead of below */
    background-color: white;
    margin-bottom: 5px; /* Space between popup and trigger */
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 120px;
    font-size: 13px;
}

/* 3. For desktop, show menu on hover over comment-menu-trigger which parents ellipsis and menu-popup */
@media (hover: hover) {
    .comment-menu-trigger:hover .menu-popup {
        display: block;
    }
}

/* 4. For touch devices, show menu on click leading to 'active' class being added  */
@media (hover: none) {
    .comment-menu-trigger.active .menu-popup {
        display: block;
    }
}

/* 5. Add arrow indicator */
.menu-popup:after {
    content: '';
    position: absolute;
    top: 100%;      /* Position at bottom of popup */
    bottom: auto;   /* Reset any bottom value */
    right: 10px;    /* Position near right edge */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff; /* Arrow pointing down */
    border-bottom: none;
}

/* 6. Format the menu items */
.menu-item-comment, 
.menu-item-reply,
.menu-item-action {
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* 7. Highlight menu item on mouse over */
.menu-item-comment:hover, 
.menu-item-reply:hover,
.menu-item-action:hover  {
    background-color: #f5f5f5;
}

/* 8. Create a hover bridge for the menu */
.comment-menu-trigger::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 10px; /* Bridge height */
    background: transparent;
    z-index: 999;
}

/* For desktop, expand hover area to include bridge */
@media (hover: hover) {
    .comment-menu-trigger:hover::before,
    .comment-menu-trigger:hover .menu-popup {
        display: block;
    }
}

/* #endregion */

/* #region ******************************* Other stuff to put somewhere ************************************/

#hideButton {
    /*
    margin: 20px;
    padding: 10px 15px;
    font-size: 14px;
    */
    cursor: pointer;
  }
  
  .myErrorClass { color: #87a726; }
  .myErrorClass span {  font-weight: bold;  }

  
/* Fade effect for less distracting icons */
.faded-icon {
    opacity: 0.8;
    transition: opacity 0.2s;
}

.faded-icon:hover {
    opacity: 1;
}

/* Comment footer with reactions */
.comment-footer {
    display: flex;
    justify-content: flex-end;
}

/* Privacy toggle - Add to existing actions */
.privacy-toggle {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: -10px; /* Add negative margin to move up */
}

/* Adjust the "Private" text */
.privacy-status {
    font-size: 0.7em;
    color: var(--grey-for-buttons);
    white-space: nowrap;
    margin-top: 12px; /* Moves the text down by 2px relative to the toggle */
    align-self: center; /* Ensures vertical centering */
    font-weight:700;
    text-transform: uppercase;
}

.privacy-status-small {
    font-size: 0.7em;
    color: #666;
    white-space: nowrap;
    align-self: center; /* Ensures vertical centering */
}

/* #endregion */

/* #region ***************************** Updated Response and Comment Layout *******************************/

/* Action icons in header (reply & ellipsis) */
.comment-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #777;
    font-size: 0.9em;
}

.comment-header-actions i {
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.comment-header-actions i:hover {
    background-color: #f0f0f0;
    color: var(--accent-color-light);
}


/* Comment emoji & actions row */
.comment-emoji-reply-row {
    display: flex;
    /* justify-content: space-between;  */
    align-items: center;
    vertical-align: middle;
    gap: 8px;
}

/* Menu wrapper */
.comment-menu-trigger {
    position: relative;
    display: inline-block;
}

/* Menu icon */
.menu-icon {
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--grey-for-buttons);
}

.menu-icon:hover {
    background-color: #f0f0f0;
    color: var(--accent-color-light);
}


.popup-details {
    margin: 10px 0;
    font-size: 14px;
}



.popup-location, .popup-last-seen {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    margin-top: 5px;
    font-size: 13px;
}

.popup-follow-btn {
    width: 100%;
    margin-top: 10px;
    padding: 8px 0;
    background-color: var(--accent-color-light);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.popup-follow-btn:hover {
    background-color: #768c20;
}


/* Action divider */
.action-divider {
    height: 20px;
    width: 1px;
    background-color: var(--border-color-light);
    margin: 0 4px;
}


/* Fade effect for icons */
.faded-icon {
    color: var(--grey-for-buttons);
    cursor: pointer;
    padding: 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.faded-icon:hover {
    opacity: 1;
    color: var(--green-for-hover);
    background-color: #f0f0f0;
    border-radius: 4px;
}

/* #endregion */

/* #region ****************************** login stuff - used by login.php **********************************/

/* Login.php page */
.login-register-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    width: 100%;
}

.register-link {
    text-align: left;
}

.forgot-password-right {
    text-align: right;
    margin-left: auto;
}

.message {
    margin-bottom: 15px;
    border-radius: 5px;
}

.success {
    background-color: #d4edda;
    color: #155724;
    font-weight: bold;
    padding: 10px 10px;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    margin-bottom: 15px;
    font-weight: bold;
    padding: 10px 10px;
}

/* Authentication Components  */
.auth-buttons-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
}


.user-info {
    display: flex;
    align-items: center;
    gap: 12px;

    position: relative;
    cursor: pointer;
}


.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.icon-link, 
.icon-link:hover,
.icon-link:active,
.icon-link:focus {
    color: #666;
    font-size: 18px;
    transition: color 0.2s; 
    text-decoration: none; 
    border-bottom: none;  
    box-shadow: none;
    outline: none;
}

.icon-link:hover {
    color: #007bff;
}

/* #endregion */

/* #region ********************************  Edit and View User's Profile   ********************************************/

.user-profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 2rem;
}

.profile-info {
    flex: 1;
}

.profile-username {
    margin-bottom: 0.5rem;
}

.profile-location {
    color: #888;
    margin-bottom: 1rem;
}

.profile-bio {
    margin: 0;
    padding: 0;
}

.profile-bio h3 {
    font-weight: 600;
    padding:  0;
    margin: 0;
}

.profile-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.follow-status {
    margin-bottom: 1rem;
}

.ellipsis-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}

/* For devices that support hover */
@media (hover: hover) {
    .ellipsis-menu:hover .ellipsis-dropdown {
        display: block;
        animation: myFadeIn 0.1s;
    }
}

/* Make the dropdown appear below the ellipsis icon */
.ellipsis-dropdown {
    display: none; /* Hide by default */
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1010;
    min-width: 150px;
}

.ellipsis-dropdown.active {
    display: block;
}

.ellipsis-dropdown a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: none;
}

.ellipsis-dropdown a:hover {
    background-color: #f5f5f5;
}

.response-item {
    position: relative;
    overflow: visible; /* Allow dropdowns to be visible */
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #fafafa;
}

.response-item .response-text {
    margin-top: 5px;
    padding-right: 25px; /* Make room for the ellipsis menu */
}

.response-question {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.response-text {
    margin-bottom: 15px;
    overflow: hidden;
}

.response-text img {
    max-width: 100%;
    height: auto;
}

.response-text p {
    padding: 0;
    margin: 0;
}

.response-text.full-content, 
.response-text.truncated-content {
    overflow-wrap: break-word;
}

/* Ensure the full content is truly hidden */
.full-content {
    display: none !important;
}

.read-more {
    display: inline-block;
    color: #7e9b18;
    cursor: pointer;
    margin-top: 8px;
    padding: 3px 8px;
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
    background-color: #f0f0f0;
}


/* #endregion */

/* #region ***************************** Settings dropdown styling ****************************************** */

/* Settings dropdown trigger */
.settings-dropdown-trigger {
    position: relative;
}

.settings-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 10006;
}

/* Show dropdown on hover for desktop */
@media (hover: hover) {
    .settings-dropdown-trigger:hover .settings-dropdown {
        display: block;
    }
}

/* For touch devices */
.settings-dropdown-trigger.active .settings-dropdown {
    display: block;
}

.settings-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
}

.settings-dropdown .dropdown-item:last-child {
    border-bottom: none;
}

.settings-dropdown .dropdown-item i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

.settings-dropdown .dropdown-item:hover {
    background-color: #f9fafb;
}

.settings-dropdown .admin-item {
    background-color: #f8f5ff;
}
/* #endregion */

/* #region ********************************* USER PROFILE PAGE  ****************************************** */

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.profilepage-section {
    margin-bottom: 30px;
}

.profilepage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 15px;
    cursor: pointer;
}

.profilepage-title {
    margin: 0;
    font-size: 1.3em;
    color: #7e9b18 !important;
}

.profilepage-title h2 {
    margin-bottom: 8px;
    font-size: 1.8em;
}

/* Make collapsible content work properly */
.profilepage-questions {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 5000px; /* Large enough to contain content */
    opacity: 1;
    overflow: visible;
}

.profilepage-questions.collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}


.navigation-links {
    margin-bottom: 20px;
}

.back-link {
    text-decoration: none;
    color: #666;
}

.back-link:hover {
    text-decoration: underline;
}

.profile-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.current-avatar {
    margin-bottom: 30px;
    text-align: center;
}

.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

/* Avatar selection tabs */
.avatar-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.avatar-tab {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid transparent;
}

.avatar-tab.active {
    border: 1px solid #ddd;
    border-bottom: 1px solid white;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    font-weight: bold;
}

.default-avatars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.avatar-option {
    display: block;
    cursor: pointer;
    text-align: center;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.avatar-option.selected {
    border-color: #007bff;
    background-color: #e6f2ff;
}

.avatar-option input {
    display: none;
}

.avatar-option img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.custom-avatar-upload {
    padding: 20px 0;
}

.preview-container {
    margin-top: 20px;
    text-align: center;
}

#avatar-preview {
    max-width: 150px;
    max-height: 150px;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* Form elements */
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

/* Notification messages */
.success-message, .error-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.success-message {
    background-color: #ececec;
    color: #789127;
    border: 2px solid #789127;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.success-actions {
    margin-top: 15px;
}

.help-text {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 5px;
}

/* Basic toggle button styling */
.profilepage-toggle {
    background: none;
    border: none;
    color: #829d30;
    cursor: pointer;
    font-size: 1.1em;
    padding: 5px;
    transition: transform 0.3s ease, color 0.2s ease;
}

/* Position the toggle button in the profilepage-header */
.profilepage-header .profilepage-toggle {
    align-self: flex-start;
    margin-top: 8px;
}

/* Hover effect */
.profilepage-toggle:hover {
    color: #5e7222;
}

/* Collapsed state styling (rotated icon) */
.profilepage-toggle.collapsed {
    transform: rotate(180deg);
}

/* #endregion */

/* #region ******************************* PROFILE SECTION OF PAGE.PHP **************************************/

/* Profile Card & Header */
.profile-overview {
    background-color: var(--card-bg-light);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

/* Stats Section */
.profile-stats h2 {
    margin: 0 0 10px 0;
}

.profile-stats .stats-row {
    display: flex;
    gap: 20px;
}

.profile-stats .stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
}

.profile-stats .stat-box:hover {
    background-color: rgba(0,0,0,0.05);
}

.stat-count {
    font-size: 1.2em;
    font-weight: bold;
}

.stat-label {
    font-size: 0.9em;
    color: #777;
}

/* Fix for Follow buttons being cut off on profile settings page at small screens */
@media screen and (max-width: 480px) {
    /* Make stats row stack vertically */
    .profile-stats .stats-row {
        width: 50%;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        box-sizing: border-box;
        padding-right: 15px;
    }

    /* Make each stat box take full width */
    .stat-box {
        flex: 0 0 auto;         /* Don't grow or shrink */
        width: calc(50% - 5px); /* Equal width minus half the gap */
        text-align: center;
    }

    /* Ensure that the stat labels don't wrap */
    .stat-label {
        /* white-space: nowrap;  */
        font-size: 0.8em; /* Slightly smaller text */
    }

    /* Adjust profile header spacing */
    .profile-header {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 10px;
        padding-right: 5px; /* Extra padding on right */
    }

    /* Make name container take 50% width */
    .profile-stats h2 {
        width: 50%;
        margin: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    /* Center align stats */
    .profile-stats {
        width: 100%;
        text-align: center;
    }

    /* Make avatar slightly smaller */
    .profile-avatar {
        width: 120px;
        height: 120px;
    }
}

/* #endregion */

/* #region ************************************ FORM ELEMENTS ***********************************************/

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
}

textarea.form-control {
    resize: vertical;
    min-height: 50px;
}

.char-count {
    text-align: right;
    font-size: 0.8em;
    color: #777;
    margin-top: 5px;
}

/* #endregion */

/* #region ********************************** USER MODALS & LISTS ********************************************/

.user-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);

    overflow-y: auto;
}

.user-modal .user-bio,
.user-item .user-bio{
    max-height: none;      /* Remove height restriction */
    overflow: visible;     /* Allow content to be fully visible */
    word-wrap: break-word; /* Ensure text wraps properly */
    font-size: 13px;
    line-height: 1.4;
    color: #555;
    margin: 8px 0;
    white-space: normal;   /* Allow text to wrap naturally */
}

.modal-content {
    background-color: white;
    margin: 10% auto;
    width: 90%;
    max-width: 700px;
    border-radius: 8px;
    overflow: hidden;

    padding: 20px; 
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.modal-header {
    padding: 4px 8px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
}

.close {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.modal-body {
    padding: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.user-list {
    max-height: 300px;
    overflow-y: auto; 
}

.user-list .loading {
    text-align: center;
    color: #777;
    padding: 20px;
}

/* User List Items */
.user-item {
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    padding: 10px;
    gap: 20px; 
    border-bottom: 1px solid #f0f0f0;
}

.user-item:last-child {
    border-bottom: none;
}

.user-item-left {
    display: flex;
    align-items: center;
    gap: 10px;  /* Add space between avatar and name */    
    flex: 1;  /* Take up all available space */
    max-width: 85%;  /* But limit maximum width */
}

.user-item-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.user-item-name {
    font-weight: 700;
    font-size: 1.2em;    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.user-item .follow-btn {
    margin-left: auto;  /* Push to the far right */
    margin-right: 5px;  /* Small right margin for visual balance */
}

/* #endregion */

/* #region **********************************   FOLLOW BUTTONS   ********************************************/

.follow-btn {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--accent-color-light);
    background: white;
    color: var(--accent-color-light);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.follow-btn:hover {
    background-color: var(--background-color);
    color: var(--accent-color-light);
}

.follow-btn.following {
    background-color: var(--accent-color-light);
    color: white !important;
}

.follow-btn.following:hover {
    background-color: #768c20;
    color: white !important;
}

/* #endregion */

/* #region **********************************   USER PROFILE PAGE   ********************************************/

/*
<div class="question-content" id="question-content-1" >
    <!-- Start of response-item - EVERYTHING for this response goes inside here -->
    <div class="response-item">
        <div class="ellipsis-menu">
            <i class="fa fa-ellipsis-h menu-icon" title="More" onclick="toggleEllipsisMenu('response-710')" style="cursor: pointer;"></i>            
            <div class="ellipsis-dropdown" id="ellipsis-menu-response-710">
                <a href="#" onclick="exportResponse(710); return false;"> <i class="fas fa-file-export"></i> Export  </a>
                <a href="#" onclick="bookmarkResponse(710); return false;"> <i class="fas fa-bookmark"></i> Bookmark   </a>
            </div>
        </div>
        <div class="response-text truncated-content quill-styles-for-noneditable">
            <p>this is my responsee </p>
        </div> 
    </div>
    <!-- End response-item -->
</div>
<!-- End question-content -->
*/
.question-content {
    transition: all 0.3s ease-out;
    max-height: 2000px; /* Set an initial large max-height */
    opacity: 1;
    overflow: visible; 
}

.question-content.collapsed {
    display: none !important;
}


.user-account-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 8px;
}

/* Popup Header & Content */
.popup-header {
    display: flex;
    align-items: flex-start; 
    gap: 15px;
    margin-bottom: 12px;  
    position: relative;
    width: 100%;
}

/* Username container needs padding adjustment */
.popup-header > div {
    padding-top: 2px; /* Optional fine-tuning */
}

.popup-user-info {
    flex: 1;
}

.view-profile-link {
    color: #829d30;
    font-size: 0.85em;
    text-decoration: none;
    font-weight: 500;
    margin-left: auto;
    padding-left: 10px;
    white-space: nowrap; 
 
    align-self: flex-start; /* Align to top */
    line-height: 1.2; /* Match the username line height */
    padding-top: 5px; /* Matching the username padding adjustment */
}

.view-profile-link:hover {
    text-decoration: underline;
}

.popup-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.popup-username {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    text-align: left; 
    padding-top: 2px; /* Optional: fine-tune vertical alignment */
    line-height: 1.2; /* Tighten line height for better alignment */
}

.popup-last-seen {
    font-size: 12px;
    color: #777;
    margin-top: 5px;
}

.popup-bio {
    margin-bottom: 12px;  /* Add some space below */

    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    max-height: none; /* Remove height limitation */
    margin-top: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
    text-align: left;
    position: relative; /* For positioning the follow button correctly */
}

/* Popup Stats & Actions */
.popup-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.popup-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup-stat-count {
    font-weight: 600;
    color: #333;
}

.popup-stat-label {
    font-size: 12px;
    color: #777;
}

.popup-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 12px; 
    position: relative; /* Ensures proper stacking context */
    z-index: 1; /* Place above bio content if needed */
}


/* Follow Status */
.follow-status {
    display: flex;
    gap: 15px;
    margin-top: 22px; /* Add space between bio and follow status */
    margin-bottom: 6px;
    color: #666;
    font-size: 13px;
}

.follow-status .status-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.follow-status .status-icon {
    color: var(--accent-color-light);
}

.you-follow-them,
.they-follow-you,
.mutual-follow {
    display: none;
}

.you-follow-them.active,
.they-follow-you.active,
.mutual-follow.active {
    display: flex;
}


/* #endregion */

/* #region ******************************    RESPONSE UI COMPONENTS  ********************************************/

/* response ==> response-header - response actions - response-action-icon */

/* Response Card & Box */
.response {
    position: relative;
    background-color: var(--panel-color-light);
    border: 1px solid #ced4da;
    border-top: 24px solid #7e9b18;       /* Green top border for user responses */
    /* border-left: 4px solid #7e9b18;  */      
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    margin-top: 15px;
    padding: 10px;
    padding-bottom: 0px;
    overflow: visible !important;    /* Allow popups to extend beyond */
}

/* This ensures "other-user" responses keep their yellow color */
.response.other-user {
    border-top: 24px solid #b2b25c; /* Yellow top border for others */
}

/* Style for question preview on responses */
.response .question-preview {
    position: absolute;
    top: -22px; /* Moved up to center in the border */
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
    background: none;
}

.question-preview-text {
    color: white;  /* White text */
    font-size: 0.75em;
    display: inline-block;
    max-width: 88%;  /* Prevent overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;  /* Add some padding */
    font-weight: 500;  /* Slightly bolder for readability */
    /* text-shadow: 0 1px 2px rgba(0,0,0,0.5); */  /* Text shadow for better readability */
}

/* Number styling in question preview */
.response .question-preview .question-number {
    font-weight: bold;
    color: inherit;
}

/* Prevent flash of unformatted editor during initialization */
.editor-initializing {
    opacity: 0; 
    visibility: hidden;
    position: absolute;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.editor-ready {
    opacity: 1;
    visibility: visible;
    position: static;
    pointer-events: auto;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    transition: opacity 0.2s ease-in-out;
}

.response-header {
    display: flex;
    justify-content: space-between;     /* Ensures response actions are aligned to the right */
    align-items: center;                /* Aligns all items vertically in the center */
    gap: 15px;                          /* Adds spacing between flex items */
}

.response-info {
    display: flex;
    align-items: center;                /* Aligns the avatar and metadata vertically */
    gap: 10px;                          /* Add spacing between avatar and username */
}

.response-info .response-time {
    margin-left: 15px; /* Adds spacing between metadata and time */
    color: #666; /* Optional: Dim the time text */
    font-size: 0.875rem; /* Optional: Slightly smaller font for time */
}

.response-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
}
/* remove above */


/* Response Header */
.response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--comment-bg-light);
}

.response-info {
    display: flex;
    align-items: center;
}
 

/* Response Footer */
.response-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    margin-bottom: 6px; 
    border-top: 1px solid var(--border-color);
    background-color: var(--comment-bg-light);
    z-index: 1;
}

.footer-left, .footer-right {
    display: flex;
    align-items: center;
}

/* #endregion */

/* #region **********************************   COMMENTS SECTION  ********************************************/

.response-comments {
    padding: 0;
    background-color: var(--comment-bg-light);
    border-top: 1px solid var(--border-color-light);
    overflow: visible !important;
}

.comment-box {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color-light);
    position: relative;
    overflow: visible !important;
}

.comment-header, .reply-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.comment-info {
    display: flex;
}

/* #endregion */

/* #region **********************************    UI BUTTONS & CONTROLS  ********************************************/

/* Standard Action Button */
.action-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    font-size: 0.7em;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    box-shadow: none;
    color: var(--grey-for-buttons) !important;      
}

.action-btn:hover {
    background-color: #f0f0f0;
    color: var(--green-for-hover) !important;   
}

.action-btn i {
    margin-right: 5px;
    font-size: 14px;
    transition: all 0.2s;
    color: var(--grey-for-buttons);      
}

 /* Change icon color on hover and add subtle scale effect */
.action-btn:hover i {
    color: var(--green-for-hover);     
    transform: scale(1.2);
}

/* Ensure text changes color too */
.action-btn:hover span {
    color: var(--green-for-hover) !important;  
}


/* Comment Actions - Bottom Left */
.comment-actions-left {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 15px;
}


.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

/* Comment Button */
.comment-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--grey-for-buttons) !important;
    font-size: 0.7em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    box-shadow: none;
}

.comment-btn:hover {
    background-color: #f0f0f0;
    color: var(--green-for-hover); 
}

/* Style the icon */
.comment-btn i {
    margin-right: 5px;
    font-size: 12px;
    transition: all 0.2s;
}

/* Change the icon color when hovering over the BUTTON */
.comment-btn:hover i {
    color: var(--green-for-hover); 
    transform: scale(1.2);
}

.comment-btn:hover span {
    color: var(--green-for-hover); 
}



/* Reply Button */
.reply-button {
    border: none;
    background: none;
    cursor: pointer;
    color: #555;
    font-size: 14px;
    padding: 2px 5px;
    display: flex;
    align-items: center;
}

.reply-button:hover {
    color: var(--accent-color-light);
}

.reply-button i {
    margin-right: 4px;
    font-size: 14px;
}

/* Menu Button */
.menu-btn {
    background: none;
    border: none;
    font-size: 16px;
    color: #666;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-btn:hover {
    background-color: #f0f0f0;
}

/* #endregion */

/* #region **********************************   DROPDOWN MENUS  ********************************************/

/* Menu Container */
.menu-container {
    position: relative;
    display: inline-block;
}

.menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 150px;
    display: none;
}

.menu-dropdown.active {
    display: block;
}

/* Comment Menu */
.comment-menu {
    position: relative;
}

/* #endregion */

/* #region **********************************   PRIVACY TOGGLE  ********************************************/

/* Horizontal Toggle */
.privacy-toggle {
    display: flex;
    align-items: center;
    margin-left: 5px;
}

.privacy-toggle label {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 18px;
    margin-right: 8px;
}

/* Vertical Toggle */
.privacy-toggle-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 5px;
    width: 50px;
    text-align: center;
}

.privacy-toggle-vertical label {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 18px;
    margin-bottom: 5px;
}

/* Common Toggle Styles - hide the standard checkbox input while keeping it working  */
.privacy-toggle input,
.privacy-toggle-vertical input {
    opacity: 0;
    width: 0;
    height: 0;
}

/*  Styled to look like a toggle switch  */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 18px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--accent-color-light);
}

input:checked + .slider:before {
    transform: translateX(20px);
}


/* this is the toggle while adding a new response */

.new-privacy-toggle-wrapper {
    display: inline-block;
    margin-left: 20px;
}

.new-slider {
    width: 36px;
    height: 18px;
    background-color: #ccc;
    border-radius: 18px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;             /* Prevent stretch */
}

.new-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.new-privacy-toggle {
    display: none;
}

.new-privacy-toggle:checked + .new-slider {
    background-color: var(--accent-color-light);
}

.new-privacy-toggle:checked + .new-slider::before {
    transform: translateX(18px); /* adjust to match new width */
}


.new-privacy-toggle-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    gap: 8px;
    font-weight: 500;
    color: #888;
    opacity: 0.8;
    white-space: nowrap;
    width: auto;                /* Prevent full width */
}

.new-privacy-label {
    font-size: 0.75rem;
    transition: opacity 0.2s ease;
    display: inline-block;
    opacity: 1;       
    width: 50px;          /* ← Enough to fit both comfortably */
    text-align: center;
}

.new-privacy-label.fading {
    opacity: 0;
}


/* #endregion */

/* #region **********************************  USER & CONTENT ELEMENTS ********************************************/

/* Avatar Image */
.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}


/* Username & Time */
.username {
    font-weight: bold;
    color: var(--accent-color-light);
    margin-right: 8px;
    margin-bottom: 3px;
}

/* Stack username and timeAgo for all screen sizes */
.user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* Left-align both username and time */
}

/* Adjust spacing between username and time */
.user-meta .username {
    margin-bottom: 3px;  /* Add small gap between username and time */
}

.user-meta .time-ago {
    font-size: 12px;
    color: #777;
    line-height: 1;
}

/* #endregion */

/* #region **********************************  SLIDER - Needed?  **********************************************/

/* Fix for privacy toggle slider in edit mode */
.edit-controls {
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative; /* Establish positioning context */
}

.edit-controls label {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
    margin-right: 10px;
}

.edit-controls .slider {
    position: relative;
    display: inline-block;
    width: 40px; /* Fixed width */
    height: 20px; /* Fixed height */
    margin-left: 8px;
    background-color: #ccc;
    border-radius: 20px;
    transition: .4s;
}

.edit-controls .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

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

.edit-controls input:checked + .slider:before {
    transform: translateX(20px);
}

/* Hide the default checkbox */
.edit-controls input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* #endregion */

/* #region **********************************  EDITING MODE **********************************************/

/* Keep privacy toggle visible and working during edit mode */
.response.editing .privacy-toggle,
.response.editing .privacy-toggle-vertical {
    display: flex !important;
    opacity: 1;
}

/* Hide top action icons when editing */
.response.editing .response-actions .fa-edit,
.response.editing .response-actions .fa-download,
.response.editing .response-actions .fa-trash,
.response.editing .action-btn.edit-btn,
.response.editing .action-btn.delete-btn,
.response.editing .action-btn.export-btn,
.response.editing .action-icon.edit-icon,
.response.editing .action-icon.delete-icon,
.response.editing .action-icon.export-icon {
    display: none;
}

.comment-input, .reply-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 10px;
}

.form-buttons {
    display: flex;
    gap: 10px;
}


.form-buttons-wrapper {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* right-align both rows */
    gap: 8px;
}

/* what is this again? */

.reply-input-container {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
}

.edit-comment-form, .edit-reply-form {
    margin: 10px 0;
}

.edit-reply-textarea, .edit-comment-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 400px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical; /* Allow vertical resizing */
    overflow:auto;     /* Show scrollbar if needed */
    height: auto; /* Auto-expand textarea */
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    /* overflow-y: auto; */   /* Show scrollbar if JS fails */
    transition: height 0.1s ease; /* Smooth height changes */
  }

/* #endregion */

/* #region **********************************  AGENT SELECTION **********************************************/
/* agent dropdown used for inserting responses, comments and replies - TO DO - probably belongs elsewhere */



.ai-response-agent-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-top: 4px;
    margin-left: auto;  /* keep it pushed right on large screens */
}

.ai-response-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #888;
    white-space: nowrap;
    line-height: 1;              /* Shrinks vertical space */
    /* transform: translateY(-2px);   */ /* Nudges up a bit */
    opacity: 0.8;
    position: relative;
    top: -5px;
}

.agent-dropdown {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    color: #888;
    opacity: 0.8;
}
 

.agent-row {
    display: flex;
    align-items: center;        
    gap: 6px;
    font-size: 0.85rem;
    color: #aaa;
    opacity: 0.6; 
}


.ai-response-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* allows stacking on small screens */
    margin-top: 1rem;
}


@media (max-width: 700px) {
    .ai-response-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .ai-response-agent-group {
        order: -1; /* Move this ABOVE the buttons */
        margin-left: 0;
        margin-top: 0rem;   /* Pull closer to textbox */
        margin-bottom: 0.7rem; /* Gap beneath */
    }
}

.ai-response-buttons {
    display: flex;
    gap: 0.5rem;
}


.ai-response-buttons .btn {
    margin: 0;              /* Reset all margin to ensure level */
    padding: 0.45em 1em;    /* Consistent padding */
}

.agent-thinking {
    font-style: italic;
    opacity: 0.7;
    padding: 4px 8px;
    margin-top: 6px;
    color: #666;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 0.85rem;
}


.poem {
    margin: 1em 0;
    font-style: italic;
    color: #444;
    line-height: 1.6em;
}


.poem br + br {
    display: none; /* prevent empty spacing if needed */
}


/* #endregion */

/* #region **********************************  USER PROFILE POPUP **********************************************/

/* 1. Profile popup base styling */
.profile-popup {
    display: none; /* Hide by default */
    position: absolute;
    width: 280px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding: 15px;
    border: 1px solid #eee;
    z-index: 9999; 
    top: calc(100% + 10px);
    left: -150%;   /* set header's profile popup more to left */
    right: auto;
}

/* 2. Move the header's profile popup more to left */
.response .user-profile-trigger .profile-popup {
    left: 5px !important; /* Override any existing positioning */
    right: auto;
}


/* 3. Arrow for response/comment/reply */
.response .user-profile-trigger .profile-popup::after {
    content: '';
    position: absolute;
    left: 20px; /* Position arrow on the left */
    right: auto;
    bottom: 100%; /* Position at top of popup */
    top: auto; /* Reset any top value */  
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff; /* Arrow pointing down */
    border-top: none;
    z-index: 10001; /* Above popup border */
}

/* Arrow for header */
.auth-buttons-container .user-profile-trigger .profile-popup::after {
    content: '';
    position: absolute;
    left: 50%; /* Position arrow on the left */
    right: auto;
    bottom: 100%; /* Position at top of popup */
    top: auto; /* Reset any top value */  
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff; /* Arrow pointing down */
    border-top: none;
    z-index: 10001; /* Above popup border */
}


/* 4. User profile trigger positioning - applies everywhere */
.user-profile-trigger {
    position: relative;
    cursor: pointer;
    display: flex;  /* spread avatar, username and lastSeen across page  */
    align-items: center;
    overflow: visible;   /* So popup can escape containment */
}

/* 5. For desktops, when user hovers over triggers we show profile-popup  */
@media (hover: hover) {
    .user-profile-trigger:hover .profile-popup {
        display: block;
        animation: myFadeIn 0.1s;
    }
}

/* 6. For touch devices - when user clicks trigger, we set 'active' class to show profile-popup */
@media (hover: none) {
    .user-profile-trigger.active .profile-popup {
        display: block;
        animation: myFadeIn 0.1s;
    }
}

/* 7. Popup Animation */
@keyframes myFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 8. For desktops, create hover bridge with ::after pseudo-element */
@media (hover: hover) {
    .user-profile-trigger::after {
        content: '';
        position: absolute;
        height: 15px; /* Size of the bridge */
        width: 100%; /* Full width */
        bottom: -15px;
        left: 0;
        right: 0;
        z-index: 10;
    }
}

.popup-bio {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;    
    overflow: visible;
    max-width: 100%;
    max-height: none;
    margin-top: 8px;
    margin-bottom: 12px;
    padding-bottom: 5px;
    font-size: 13px;
    line-height: 1.4;
    color: #333;    
}

.popup-location {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #555;
    margin-top: 5px;
    font-size: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.popup-location i {
    flex-shrink: 0;
    font-size: 14px;
    color: #888;
}

.popup-follower-stats {
    gap: 5px;
    margin-top: 20px;
    margin-bottom: 12px;
    color: #555;
    font-size: 13px;
}

.popup-follower-stats .stat-line {
    display: flex;
    align-items: center;
    gap: 5px;
}

.popup-follower-stats .stat-line i {
    color: var(--accent-color-light);
    width: 16px;
    text-align: center;
}

.popup-follower-stats .count {
    font-weight: 600;
    color: #333;
}

.popup-follow-btn {
    width: 100%;
    margin-top: 10px;
    padding: 8px 0;
}

/* Follow buttons */
.follow-btn, .following-btn {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    margin-right: 10px;
}

/* #endregion */

/* #region **********************************   QUESTION NUMBERING ********************************************/

 .numbered-question {
    display: flex;
    align-items: flex-start; /* Align children to the top */
    margin-bottom: 12px;
}

.question-number {
    font-size: 1.3em;        /* Make font 50% larger */
    font-weight: bold;       /* Add bold to make it stand out */
    vertical-align: top;     /* Keep aligned with first line of text */
    margin-right: 10px;      /* Slightly increase spacing after number */
    align-self: flex-start;  /* Keep aligned to top */
    padding-top: 3px;        /* Add small padding to move number down slightly */
    flex-shrink: 0;          /* Prevent number from shrinking */
    color: var(--text-color-light);
    line-height: 1;          /* Tighter line height */
}

.question-text {
    margin: 0; /* Remove default margin on h3 */
    flex: 1;
    line-height: 1.2;   
    color: var(--text-color-light);
    font-size: 1.5em !important;     
}


/* #endregion */

/* #region **********************************   collapsible sections ********************************************/

/* Collapsible section styling */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-button {
    background-color: var(--comment-bg-light);
    border: none;
    color: #4a7bde;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    padding: 0;       /* Remove any padding that might distort shape */
    min-width: 24px;  /* Prevent browser defaults from changing width */
    min-height: 24px; /* Prevent browser defaults from changing height */
    overflow: hidden; /* Ensure content doesn't expand the button */
    box-sizing: border-box; /* Include padding in size calculation */
    line-height: 1;   /* Prevent line height from stretching button */
}

.toggle-button:hover {
    background-color: rgba(74, 123, 222, 0.1);
}

.toggle-button i {
    font-size: 10px;  /* Make icon slightly smaller */
    transition: transform 0.3s ease;
    line-height: 1;   /* Set line height to prevent stretching */
    display: flex;    /* Center icon content properly */
    align-items: center;
    justify-content: center;
}

.toggle-button.collapsed i {
    transform: rotate(180deg);
}

/* Fix toggle button text display */
.toggle-text-more, .toggle-text-less {
    display: inline-block; /* Base style */
}

/* Default state (expanded) - show only "Show less" */
.toggle-button .toggle-text-more {
    display: none; /* Force hide "Show more" by default */
}

.toggle-button .toggle-text-less {
    display: inline-block; /* Force show "Show less" by default */
}

/* Collapsed state - show only "Show more" */
.toggle-button.collapsed .toggle-text-more {
    display: inline-block; /* Force show "Show more" when collapsed */
}

.toggle-button.collapsed .toggle-text-less {
    display: none; /* Force hide "Show less" when collapsed */
}


.collapsible-content {
    overflow: visible;      /* Allow popups to be visible by default */
    transition: max-height 0.4s ease;
    padding: 10px;    
    display: flow-root; /* Modern clearfix */

    overflow: hidden; 
    max-height: 500px; /* or whatever fits your content */
    display: block;
}

.collapsible-content.collapsed {
    max-height: 0;
    padding: 0;
    overflow: hidden; /* Only hide overflow when collapsed */ 
  
    display: block; /* still part of the layout, but visually collapsed */    
}

/* Remove padding for the top overview section only */
#overview-content.collapsible-content {
    padding: 0;
}

.question-header {
    overflow: visible;  
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: #f8f9fa; /* Light background to distinguish header */
    padding: 6px 18px;
    border-radius: 8px 8px 0 0; /* Round only top corners */
    /* border-bottom: 1px solid #e6e6e6;  */
}

.question-toggle, seed-toggle {
    margin-left: 10px;
}

/* #endregion */

/* #region *********************** renamed 'section' classes for collapsible sections ******************************/

/* New styles to match renamed classes that where called section */
.responses-header {
    /* Copy styles from .section.responses-header-section */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.new-response-panel {
    /* Copy styles from .section.new-response-section */
    display: none;
    margin-bottom: 20px;

    /*
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 15px 0;
    padding: 10px;
    background-color: var(--panel-color-light); 
    */
}

.new-response-panel.active {
    display: block;                /* Shown when active */
}


/* Add specific styling for user vs others */
.responses-header-user {
    border-top: 1px solid #e6e6e6;
    padding-top: 15px;
}

.responses-header-others {
    border-top: 1px solid #e6e6e6;
    padding-top: 15px;
}

/* #endregion */

/* #region **********************************   SCROLL CONTROLS ***************************************************/

 .scroll-controls {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 100;
}

.scroll-controls button {
    width: 32px; /* Smaller size from 40px */
    height: 32px; /* Keep equal width/height for perfect circle */
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    padding: 0; /* Remove any padding */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.scroll-controls button i {
    font-size: 14px; /* Slightly smaller icon */
    line-height: 1; /* Prevent line height stretching */
    margin: 0; /* Remove any margins */
    padding: 0; /* Remove any padding */
}

/* Hover state */
.scroll-controls button:hover {
    background: #f0f0f0; /* Slightly darker on hover */
}

/* #endregion */

/* #region *************************************   PAGE HEADER ***************************************************/

 /* Add placeholder with same dimensions as button */
.nav-placeholder {
    width: 90px;  /* Approximate width of button */
    display: inline-block;
}

/* Content area with image right alignment and wrapped text */
.header-content-area {
    position: relative;
    display: block; /* Change from flex to block */
    /* overflow: visible; poo */ /* Allow overflow for proper wrapping */
    overflow: hidden; /* Create block formatting context */
}

/* Add clearfix to force container to expand to include floated content */
.header-content-area::after {
    content: "";
    display: table;
    clear: both;
    height: 0;
}

/* Ensure page-header section fully contains its floats */
.section.page-header {
    overflow: auto; /* Another way to contain floats */
    margin-bottom: 40px; /* Add some breathing room before questions */
    padding: 0 10px; /* Add padding to the left/right of header section */
}

/* Right floated image with navigation below */
.section-image {
    float: right;
    width: 45%;
    margin: 0 0 15px 20px; /* Top Right Bottom Left */
    position: relative; /* Ensures proper stacking context */
    z-index: 2; /* Ensure image appears above text */
}

.section-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

/* Navigation under the image */
.image-navigation {
    display: flex;
    justify-content: space-between;  
    align-items: center;
    margin-top: 8px;
    padding: 6px 0;
    width: 100%;
}


/* Secondary style navigation buttons (less prominent) */
.nav-button-secondary, 
.next-button, 
.prev-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px 4px;
    font-size: 0.8rem;           /* Smaller text */
    font-weight: 400;            /* Normal weight */
    padding: 0.4em 1em;          /* Slightly less horizontal padding */
    background-color: transparent; /* No background */
    color: #777;                 /* Grey text to match nearby content */
    border: 1px solid #ddd;      /* Light grey border */
    text-decoration: none;
    transition: all 0.2s;
    border-radius: 0.375em;   
    box-shadow: none;            /* Remove shadow */
    min-width: 0;                /* No minimum width */
    max-width: fit-content;      /* Don't grow beyond content size */
    width: auto;                 /* Natural width */
}

.nav-button-secondary:hover,
.next-button:hover,
.prev-button:hover {
    background-color: #f7f7f7;   /* Very light grey bg on hover */
    border-color: #ccc;          /* Slightly darker border */
    color: #555;                 /* Darker text on hover */
    transform: none;             /* Remove the lift effect */
    box-shadow: none;            /* No shadow */
}

.prev-button i {
    margin-right: 6px;
    font-size: 1em;
    transition: transform 0.3s ease;
}

.next-button i {
    margin-left: 6px;
    font-size: 1em;
    transition: transform 0.3s ease;
}

.prev-button:hover i {
    transform: translateX(-4px);
}

.next-button:hover i {
    transform: translateX(4px);
}



/* Add visual emphasis for mobile */
@media (max-width: 736px) {
    .nav-button-secondary, 
    .next-button, 
    .prev-button {
        padding: 0.5em 1em;
        font-size: 0.9rem;
        width: 80%;
        margin: 8px 0;
    }
    .image-navigation {
        margin-bottom: 20px;
    }
}


/* Page counter styling */
.page-counter {
    font-size: 0.9rem;
    font-weight: 400;
    color: #666;
}

/* Text content that wraps around the image */
.section-text-content {
    display: block;
    width: auto;
    overflow: visible; /* Allow text to flow around image */
    margin-right: 0; /* Remove any right margin */
}

.section-text-content h2 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #7e9b18; /* Change from blue to green */
    font-size: 1.8em;
}

.section-text-content h3 {
    font-weight: normal;
    font-style: italic;    
    /* color: var(--accent-color-dark);   */
    color: #7f888f;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1.3;
}

.section-summary {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 10px;
}

.section-detailed-content {
    font-size: 1.1em;
    line-height: 1.6;
}

/* Add this if display: flow-root; doesn't work */
.section-detailed-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Toggle button styling */
.toggle-details-wrapper {
    margin-bottom: 10px;
    margin-left: 10px;
}

.toggle-button.toggle-details {
    width: auto;
    height: auto;
    border-radius: 0; 
    padding: 5px 0;
    background-color: transparent;
    color: #7e9b18;
    font-size: 14px;
    font-weight: normal; /* Make text less bold */
    border: none;
    box-shadow: none;
    text-transform: none; /* Ensure text is not uppercase */
    letter-spacing: normal; /* Ensure normal letter spacing */  
}

/* Add space between text and icon */
.toggle-button.toggle-details span {
    margin-right: 8px; /* Add gap between text and arrow */
    font-size: 1.1em;
    font-weight: bold;
}

.toggle-button.toggle-details i {
    color: #7e9b18; /* Green icon */
    transform: rotate(180deg); /* Arrow points UP when expanded */
}

/* Fix arrow direction - collapsed state */
.toggle-button.toggle-details.collapsed i {
    transform: rotate(0deg); /* Arrow points DOWN when collapsed */
}

/* Video responsive container */
.section-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin: 20px 0;
}

.section-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* Hide YouTube CSS warnings from console by providing standard properties first */
.video-container {
    display: flex;
    justify-content: center; /* Standard replaces -moz-justify-content */
    background-size: cover; /* Standard replaces -moz-background-size */
}

/* Right-aligned video styling */
.section-video-right {
    float: right;
    width: 50%;
    margin: 0 0 15px 20px;
    position: relative;
 
    padding-bottom: 28.125%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.section-video-right iframe {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* Responsive adjustments */
@media screen and (max-width: 736px) {
    .section-image {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
    }
}

/* #endregion */

/* #region ****************************  stuff around dropdowns and user profile ***********************************/

/* Prevent editor dropdowns from triggering profile popups */
.ql-toolbar,
.ql-picker,
.ql-tooltip {
    position: relative;
    z-index: 10001 !important; /* Higher than profile popups */
}

/* Force profile popup to stay hidden when editor elements are active */
/*
  <div class="ql-toolbar"><!-- Editor toolbar --></div>
  <div class="user-profile-trigger">
    <div class="profile-popup"><!-- User profile info --></div>
  </div>
*/
.ql-toolbar:hover ~ .user-profile-trigger .profile-popup,
.ql-toolbar:focus-within ~ .user-profile-trigger .profile-popup,
.ql-picker.ql-expanded ~ .user-profile-trigger .profile-popup,
.ql-picker.ql-expanded .user-profile-trigger .profile-popup {
    display: none !important;
}

/* Stop hover events from propagating through editor components */
.ql-picker-options {
    pointer-events: auto !important; /* Ensure clicks don't go through */
}

/* Ensure editor gets priority when expanded */
.ql-picker.ql-expanded {
    position: relative;
    z-index: 10002 !important; /* Above everything */
}

/* #endregion */

/* #region **********************************  User Profile Popup for Mobile Devices  ***********************************/

/* Fix for user popup menu on touch devices */
body.is-touch .user-profile-trigger {
    position: relative;
}

body.is-touch .popup-aligned-right .popup-content {
    z-index: 10003;
    position: absolute;
    right: 0;
    top: 100%;
    width: 280px;
    max-width: 90vw;
}

/* Fix for header elements on touch devices */
body.is-touch #header {
    z-index: 10002; /* Just below popup content */
}

/* #endregion */

/* #region **********************************  Follow Me Boxes  *********************************************/

/* Make stat boxes more obviously clickable */
.stat-box.clickable {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(210, 215, 217, 0.75);
    background: #f8f8f8;
    padding: 1em;
    border-radius: 0.375em;
}

.stat-box.clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-color: #87a726;
}


.stat-box.clickable:after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.375em;
    pointer-events: none;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.stat-box.clickable:hover:after {
    border-color: #87a726;
}

/* use the ellipsis menu for action-popmenu for all screen sizes */
.small-screen-actions {
    display: flex;  
    align-items: center;
}

/* #endregion */

/* #region *******************************  RESPONSIVE STYLES FOR LARGE SCREENS - >=1000px  *********************************************/

/* For large screens (≥1000px) */
/* TO DO - when we add emojis, only show "Add Comment", "Hide Comments" labels for > 1000px  */
@media (min-width: 1000px) {
    .small-screen-comments {
        display: none;
    }
    
    .large-screen-comments {
        display: flex;  
        align-items: center;
    }
}

/* #endregion */

/* #region *******************************   RESPONSIVE STYLES FOR MEDIUM SCREENS - 736px-1000px  *********************************************/
  
@media screen and (min-width: 736px) and (max-width: 1000px) {

    .add-response-btn {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
        width: auto;
        max-width: 200px; /* Optional: limit maximum width */
      }

    /* TO DO - when we add emojis, only show "Add Comment", "Hide Comments" labels for > 1000px  */
    .large-screen-comments {    
        display: none;
    }
    
    .small-screen-comments {
        display: flex;
        align-items: center;
    }

    .responses-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .responses-header h2 {
        margin-bottom: 0.5em;
        font-size: 1.1em;
    }

    /* Filter items container */
    .responses-header .filter-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: auto;
    }

    /* Label styling */
    .responses-header .show-text {
        display: inline-block;
        margin-right: 4px;
        align-self: center;
    }

    /* Dropdown styling */
    .responses-header select {
        width: auto;
        min-width: 80px;
        max-width: 100px;
        font-size: 0.9em;
        padding: 0.3em;
    }

    /* Make text smaller in dropdowns */
    .responses-header select option {
        font-size: 0.9em;
    }

 }

 /* #endregion */

/* #region **********************************  RESPONSIVE STYLES FOR SMALL SCREENS - < 736px  *********************************************/

@media (max-width: 736px) {

    .add-response-btn {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.7rem;
        margin-bottom: 0.7rem;
        width: auto;
        max-width: 160px; /* Optional: limit maximum width */
      }


    .large-screen-comments {
        display: none;
    }
    

    .small-screen-comments {
        display: flex;
        align-items: center;
    }
    
    /* Larger tap targets for follow buttons */
    .follow-btn {
        padding: 10px 16px;
        min-height: 44px;
    }
    
    /* Ensure the divider and emoji menu trigger always show */
    .action-divider {
        position: static;
        flex-shrink: 0; /* Never shrink this items */
        margin-left: auto;
        z-index: 5;
    }
    
    
    .footer-left, .footer-right {
        flex: 1;
    }
    
    .footer-left {
        justify-content: flex-start;
    }
    
    .footer-right {
        justify-content: flex-end;
    }

    /* Stack header actions */
    .response-actions {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* Added below for mobile screens response header with the dropdowns */
        
    .responses-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .responses-header h2 {
        margin-bottom: 0.5em;
        font-size: 1.1em;
    }

    /* Filter items container */
    .responses-header .filter-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: auto;
    }

    /* Label styling */
    .responses-header .show-text {
        display: inline-block;
        margin-right: 4px;
        align-self: center;
    }

    /* Dropdown styling */
    .responses-header select {
        width: auto;
        min-width: 80px;
        max-width: 100px;
        font-size: 0.9em;
        padding: 0.3em;
    }

    /* Make text smaller in dropdowns */
    .responses-header select option {
        font-size: 0.9em;
    }

}

/* #endregion */

/* #region **********************************  RESPONSIVE STYLES FOR SMALLER SCREENS - < 480px  *********************************************/

@media (max-width: 480px) {

    .section {
        padding: 0 2px; /* Add padding to the left and right */
    }

    .header .user-profile-trigger .profile-popup,
    .header .user-info .profile-popup {
        right: -10px; 
        margin-right: 5px;  /* Pull away from edge slightly */
        max-width: min(280px, calc(100vw - 30px));
        font-size: 80%;
    }

    /* Popup position is right aligned for small screens */
    .comment .user-profile-trigger .profile-popup,
    .response .user-profile-trigger .profile-popup,
    .reply .user-profile-trigger .profile-popup {
        left: auto;
        right: 0;
        font-size: 80%;
    }

    /* Move arrow position to right side of popup as popup is now right aligned */
    .comment .user-profile-trigger .profile-popup::after,
    .response .user-profile-trigger .profile-popup::after,
    .reply .user-profile-trigger .profile-popup::after {
        left: auto;
        right: 20px;
    }

    .menu-popup {
        right: 0;
        left: auto; /* Prevent left alignment on small screens */
    }
}

/* #endregion */




/*  JR - Added this for PP sidebar */
#menu > ul > li.force-open > ul {
  display: block !important;
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
  color: #878a8c;
}
#menu > ul > li.force-open > span:before {
  content: none !important;
}