body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
    font-size: 0.95rem;
}

/* Disclaimer modal styling to match green theme */
#disclaimerModal .modal-header {
    background-color: #e6fcf5;
    border-bottom: 1px solid #b1e0cc;
}

#disclaimerModal .modal-title {
    color: #146c43;
    font-weight: 600;
}

#disclaimerModal .modal-body h6 {
    color: #146c43;
    font-weight: 600;
}

#disclaimerModal .modal-body p {
    color: #495057;
}

#disclaimerModal .modal-footer {
    border-top: 1px solid #b1e0cc;
    background-color: #e6fcf5;
}

#disclaimerModal .btn-primary {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}

#disclaimerModal .btn-primary:hover {
    background-color: #157347;
    border-color: #146c43;
}

/* Custom Highlight Color */
::selection {
  background-color: #198754; /* Dark green background */
  color: white; /* White text */
}
::-moz-selection { /* Firefox */
  background-color: #198754;
  color: white;
}

/* Styling for the new Sustainable BMC cards */
.sbmc-card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s ease-in-out, box-shadow 0.25s ease-in-out;
    cursor: pointer;
    border-radius: 0.375rem;
}

.sbmc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.sbmc-card .card-body {
    position: relative;
    padding: 1.25rem;
    background-color: #ffffff; /* NEW White background */
    border: 1px solid #dee2e6; /* NEW Standard grey border */
    border-radius: 0.375rem; /* Match card radius */
    transition: background-color 1s ease, border-color 1s ease; /* Keep transition */
}

/* Style for completed cards */
.sbmc-card.has-notes .card-body {
    background-color: #d1e7dd; /* Specific light green */
    border-color: #a3cfbb; /* Slightly darker green border */
}

.sbmc-card .card-title {
    font-size: 1.0rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    /* Green Theme */
    color: #146c43; /* Darker green text */
}

.sbmc-card .card-title i {
    font-size: 1.1em;
}

.sbmc-questions {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0;
    color: #6c757d;
}

.sbmc-questions li {
    margin-bottom: 0.3rem;
}

/* Removed styles for .sbmc-content and .sbmc-content:focus */

/* Styling for the saved indicator checkmark */
.saved-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #198754;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 5;
    display: none; /* Hide the checkmark indicator */
}


/* Ensure card body is the positioning context */
.sbmc-card .card-body {
    position: relative;
    /* Add padding to prevent content overlap if necessary */
}

/* Ensure the parent container IS positioned relative again */
.sbmc-container {
    position: relative;
}

/* --- Fake Modal Backdrop Styling --- */
.fake-modal-backdrop {
    position: absolute; /* Reverted from fixed */
    top: 0;
    left: 0;
    width: 100%; /* Cover parent */
    height: 100%; /* Cover parent */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 90; /* Below modal, above cards */
    border-radius: 0.3rem; /* Match container padding */
    backdrop-filter: blur(2px);
    transition: opacity 0.15s linear, visibility 0.15s linear; /* Transition opacity and visibility */
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    pointer-events: none; /* Prevent interaction when hidden */
}

/* --- Fake Modal Styling --- */
.fake-modal-container {
    position: absolute; 
    top: 5%;  
    left: 5%; 
    width: 90%; 
    height: 90%; 
    background-color: #ffffff;
    border: none;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    z-index: 100; 
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    overflow: hidden; 
    /* Initial state for animation */
    opacity: 0; 
    visibility: hidden;
    transform: scale(0.8); /* Start slightly smaller */
    transform-origin: center center; /* Default origin */
    transition: opacity 0.2s ease-out, 
                visibility 0.2s ease-out, 
                transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Pop animation */
    pointer-events: none;
}

.fake-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.fake-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6; /* Slightly darker border */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background-color: #f8f9fa; /* Keep light */
    border-top-left-radius: 0.5rem; /* Ensure rounding matches container */
    border-top-right-radius: 0.5rem;
}

.fake-modal-title {
    font-weight: 600;
    font-size: 1.1rem;
    display: flex; /* Align icon and text */
    align-items: center;
    color: #146c43; /* Dark green title */
}

.fake-modal-title i {
    margin-right: 0.5rem; /* Space between icon and text */
    font-size: 1.2em; /* Adjust icon size if needed */
    color: #6c757d; /* Slightly muted icon color */
}

.fake-modal-header .btn-close {
    --bs-btn-close-opacity: 0.7;
    --bs-btn-close-hover-opacity: 1;
}

.fake-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scrollbar during question transition */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.fake-modal-body h6 {
    font-weight: 500;
    font-size: 1.0rem; /* Match card title size */
    color: #6c757d;
    margin-bottom: 0.5rem;
    /* text-transform: uppercase; */
    letter-spacing: 0.5px;
    flex-shrink: 0;
    margin-top: 0.5rem; /* Add space above subsequent headings */
}

.fake-modal-body ul {
    margin-bottom: 1.5rem !important;
    flex-shrink: 0;
    font-size: 0.85rem; /* Match card question size */
    color: #495057; /* Darker question text */
}

.fake-modal-body textarea {
    resize: none;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    padding: 0.75rem;
    flex-grow: 1;
    min-height: 100px;
    border-color: #ced4da; /* Slightly lighter border */
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.fake-modal-body textarea:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.fake-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #b1e0cc; /* Matching border */
    background-color: #e6fcf5; /* Light green footer */
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    flex-shrink: 0;
    text-align: right;
}

.fake-modal-footer .btn {
    margin-left: 0.5rem;
    font-weight: 500;
}

.fake-modal-footer .btn-primary {
    background-color: #198754; /* Green save button */
    border-color: #198754;
    color: white;
}
.fake-modal-footer .btn-primary:hover {
    background-color: #157347;
    border-color: #146c43;
    color: white;
}
/* Ensure close button remains distinct */
.fake-modal-footer .btn-secondary {
     background-color: #6c757d; /* Default secondary */
     border-color: #6c757d;
     color: white;
}
 .fake-modal-footer .btn-secondary:hover {
     background-color: #565e64; /* Standard darker secondary hover */
     border-color: #51585e;
     color: white;
}

/* --- Chat Styling --- */
.chat-messages {
    /* flex-grow: 1; */ /* Already set by default? Let's ensure */
    overflow-y: auto; 
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    /* min-height: 50px; */ /* Adjusted: Was 100px, match fullscreen */
    /* --- Apply Non-Fullscreen Flex Layout --- */
    /* height: 0; */ /* Set flex basis to 0 */
    /* height: 200px; */ /* Fixed height - REMOVED */
    min-height: 240px; /* Ensure minimum visible height */
    max-height: 240px; /* Preferred maximum height */
    flex-grow: 1;     /* Allow it to grow */
    flex-shrink: 1;   /* Allow it to shrink */
    flex-basis: 0%;      /* Start from 0 for flex calculations */
    /* flex-grow: 1; */ /* Grow within chat-section - REMOVED for fixed height */
    /* max-height: none; */ /* Remove any explicit max-height - Not strictly needed but good for clarity */
}

/* Fullscreen adjustments for chat messages */
html:fullscreen .chat-section .chat-messages {
    max-height: none;
}

.message {
    padding: 0.6rem 1rem;
    border-radius: 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    max-width: 85%;
    width: fit-content;
    word-wrap: break-word;
}

.message.user {
    /* background-color: #0d6efd; */ /* Old blue */
    background-color: #198754; /* New Green */
    color: white;
    border-bottom-right-radius: 0.25rem;
    margin-left: auto;
    align-self: flex-end;
}

.message.gpt {
    /* background-color: #e9ecef; */ /* Old grey */
    /* color: #212529; */ /* Old dark text */
    /* background-color: #f0fff4; */ /* Old too light green */
    background-color: #d1e7dd; /* Darker subtle green for better contrast */
    color: #146c43; /* Darker green text */
    border-bottom-left-radius: 0.25rem;
    margin-right: auto;
    align-self: flex-start;
    position: relative; /* For positioning cancel button */
}

/* Style for the cancel button within a typing message */
.message.gpt.typing:hover .cancel-request-btn {
    display: inline-block !important; 
    opacity: 0.7;
}

.cancel-request-btn {
    line-height: 1; 
    z-index: 1; 
    /* Override Bootstrap button styles for a more custom look */
    background-color: rgba(0, 0, 0, 0.1); /* Subtle dark circle */
    border: none;
    color: white;
    width: 18px; /* Small circle */
    height: 18px;
    border-radius: 50%; /* Make it a circle */
    font-size: 12px; /* Adjust X size */
    font-weight: bold;
    text-align: center;
    padding: 0;
    transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
    cursor: pointer;
    /* Ensure position is from previous sendMessage function */
    /* position:absolute; top:2px; right:5px; */ 
}

.cancel-request-btn:hover {
    background-color: #dc3545; /* Bootstrap danger red on hover */
    color: white;
    opacity: 1;
}

/* Health Status Message Styling */
.message.system.health-status-message {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    margin: 15px 0;
    padding: 15px;
    border-radius: 8px;
    align-self: stretch;
    max-width: none;
}

.health-status-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.health-status-indicator.error i {
    color: #dc3545;
    margin-right: 8px;
    font-size: 1.2em;
}

.health-status-indicator strong {
    color: #721c24;
    font-weight: 600;
}

.health-status-details {
    font-size: 0.9em;
    color: #721c24;
    margin-bottom: 10px;
    line-height: 1.4;
}

.health-status-details small {
    color: #6c757d;
    font-size: 0.8em;
}

.retry-health-btn {
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    background-color: transparent !important;
    font-size: 0.85em;
    padding: 5px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.retry-health-btn:hover {
    background-color: #0d6efd !important;
    color: white !important;
}

.retry-health-btn i {
    margin-right: 5px;
}

/* Styles for the new attachment badge */
.message-attachment-badge {
    display: block; /* New: Place on its own line */
    width: fit-content; /* Constrain width to content */
    width: -moz-fit-content; /* Firefox support */
    margin-left: auto; /* Push badge to the right */
    background-color: rgba(0, 0, 0, 0.05); /* Subtle background */
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    margin-bottom: 0.4rem;
    color: #6c757d; /* Muted text color */
    line-height: 1.2;
    white-space: nowrap;
    /* Removed overflow and text-overflow */
}

.message-attachment-badge i {
    margin-right: 0.3em;
    font-size: 1em; /* Adjust icon size */
}

/* Make user message attachment badge text visible */
.message.user .message-attachment-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.chat-input .form-control {
    border-right: 0;
    border-color: #dee2e6;
}

.chat-input .btn {
    border-color: #dee2e6;
    /* Green Send Button */
    background-color: #198754; /* Green background */
    color: white; /* White icon/text */
    border-left: 0; /* Remove double border with input */
}

.chat-input .btn:hover {
    background-color: #157347; /* Darker green on hover */
    color: white;
}

/* Typing Indicator Animation (for inline use) */
.typing-indicator-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
}
.typing-indicator-inline .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    background-color: #adb5bd;
    border-radius: 50%;
    opacity: 0.4;
    animation: typingDots 1.4s infinite ease-in-out both;
}

.typing-indicator-inline .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator-inline .dot:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator-inline .dot:nth-child(3) { animation-delay: 0s; }

@keyframes typingDots {
    0%, 80%, 100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1.0);
    }
}

/* Chat Attachment Info */
.chat-attachment-info {
    padding: 0.3rem 0.75rem;
    background-color: #e9ecef; /* Light background */
    border: 1px solid #dee2e6;
    border-bottom: none; /* Remove bottom border as it sits above input */
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    font-size: 0.8rem;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0; /* Prevent this bar from shrinking */
}

.chat-attachment-info .attached-card-name {
    font-weight: 500;
    margin-left: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1; /* Allow name to take space */
    margin-right: 0.5rem;
}

.chat-attachment-info .btn-close {
    padding: 0.2rem; /* Make hitbox slightly bigger */
    opacity: 0.7;
}
.chat-attachment-info .btn-close:hover {
    opacity: 1;
}

/* Adjust input group border radius */
.chat-attachment-info + .chat-input.input-group .form-control,
.chat-attachment-info + .chat-input.input-group .btn {
    border-top-left-radius: 0; /* Flatten top corners when attachment shown */
}
.chat-attachment-info + .chat-input.input-group .btn {
     border-top-right-radius: 0;
}

/* --- General Adjustments --- */
.btn-light {
    border-color: #dee2e6;
}

/* --- Visible State for Modal/Backdrop --- */
.fake-modal-backdrop.visible,
.fake-modal-container.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* End state for scale animation */
    pointer-events: auto; /* Allow interaction when visible */
}

/* --- New Styles for Single Question View --- */

/* Ensure modal body allows flex positioning of nav */
.fake-modal-body {
    display: flex; /* Already set, but confirm */
    flex-direction: column; /* Already set, but confirm */
    /* overflow-y: auto; /* Already set, but this ensures body itself can scroll if all content too tall */
    /* overflow-x: hidden; /* Already set */
}

/* New wrapper for question text and main textarea */
#questionDisplayWrapper {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    position: relative; /* For animation transforms */
    transition: opacity 0.2s ease-out, transform 0.25s ease-out; /* Animation properties */
    /* Add a default margin-bottom if it was on the textarea before, or rely on its own mb-3 class */
}

/* Ensure the textarea within the wrapper grows */
#questionDisplayWrapper #currentQuestionTextarea {
    flex-grow: 1; /* Make textarea fill the wrapper */
    min-height: 100px; /* Keep existing min-height or adjust */
}

/* Container for the question text and textarea - OLD, to be removed or repurposed if #currentQuestionContainer ID is still used elsewhere */
/* #currentQuestionContainer { ... } */ 

#currentQuestionText {
    /* Styles for the question text (h6) */
    font-size: 1.0rem; 
    color: #212529; /* Darker, standard text color */
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Navigation controls styling (using existing Bootstrap classes mostly) */
.fake-modal-body > .d-flex.justify-content-between {
    flex-shrink: 0; /* Prevent nav from shrinking */
    padding-top: 0.75rem !important; /* Adjust spacing */
    margin-top: 0.75rem !important; /* Adjust spacing */
}

#questionCounter {
    font-weight: 500;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh; /* Make body fill viewport height */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent body scrollbars */
}

.main-container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%; /* Ensure it takes available width */
    box-sizing: border-box; /* Include padding in width */
    flex-grow: 1; /* Make main-container fill body */
    overflow-y: auto; /* Allow vertical scrolling when content exceeds viewport */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* When embedded in an iframe, suppress internal scrolling and let the host control it */
html.embedded .main-container,
body.embedded .main-container {
    overflow: hidden;
}


.bmc-section {
    padding: 1rem;
    position: relative;
    min-height: 564px; /* Adjusted minimum height */
    flex-grow: 0; /* Don't grow */
    flex-shrink: 0; /* Don't shrink */
    overflow-y: auto; /* Allow internal scroll if needed */
}


.chat-section {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    
    border-top: 1px solid #dee2e6;
    padding-top: 10px;
    flex-grow: 1;
    position: relative;
}
.message { margin-bottom: 10px; padding: 5px 10px; border-radius: 10px; max-width: 80%; }
.chat-input { flex-shrink: 0;  }

/* Fixed Height & Scrolling for BMC Cards */
/* Note: Some of these rules might conflict with existing .sbmc-card rules */
/* Consider reviewing and merging them for consistency */
.sbmc-card .card-body {
    position: relative; /* Needed for positioning indicators */
    display: flex; 
    /* Adjust this height as needed */
    height: 130px;  /*<- This was commented out in the original context, potentially conflicting */
    /* Center content (title) */
    justify-content: center;
    align-items: center;
    text-align: center; /* Center text within the title element */
}

html:fullscreen .sbmc-card .card-body {
    min-height: 14vh;
}

.sbmc-card .sbmc-questions {
    /* Questions list is hidden on card view, no specific styles needed now */
    display: none; 
}

.sbmc-card .saved-indicator {
    /* Position checkmark absolutely */
    /* Note: This might conflict with existing .saved-indicator rules */
    position: absolute;
    bottom: 5px;
    right: 8px;
    font-size: 1.1em; /* Slightly larger checkmark */
}

/* --- Question Indicator Styles --- */
.question-indicators {
    position: absolute; 
    bottom: 15px; /* Move indicators up */
    left: 50%; 
    transform: translateX(-50%); 
    display: flex;
    z-index: 6; 
    pointer-events: none; 
}

.question-indicator {
    position: relative; 
    width: 40px; 
    height: 40px; 
    background-color: #ffffff; /* Change to white */
    border: 1px solid #ced4da; /* Slightly darker border */
    border-radius: 3px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
    display: flex; 
    align-items: center;
    justify-content: center;
    font-size: 0.6rem; 
    font-weight: 600; 
    color: #6c757d; 
    cursor: pointer;
    /* Initial state: hidden */
    opacity: 0;
    transform: translateY(15px); /* Start below */
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), /* Overshoot easing */
                opacity 0.2s ease-out, 
                box-shadow 0.15s ease-out, 
                margin-left 0.15s ease-out, 
                z-index 0s linear 0.15s; 
    margin-left: -10px; 
    pointer-events: none; /* No interaction when hidden */
}

/* Visible / Settled state */
.question-indicator.visible {
    opacity: 1;
    transform: translateY(0); /* Settle position */
    pointer-events: auto; /* Allow interaction when visible */
}

.question-indicator:first-child {
    margin-left: 0; /* No overlap for the first card */
}

.question-indicator:hover {
    transform: translateY(-4px) scale(1.05); /* Pop up effect */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1); 
    z-index: 10; /* Bring to front */
    border-color: #adb5bd;
    margin-left: -5px; /* Reduce overlap slightly for neighbours */
    transition-delay: 0s, 0s, 0s, 0s; /* Remove z-index delay on hover */
}

/* Adjust margin of the card *next* to the hovered one */
.question-indicator:hover + .question-indicator {
     margin-left: -5px;
}

/* First card hover adjustment */
.question-indicator:first-child:hover {
    margin-left: 0;
}


.question-indicator.answered {
    border-color: #1aa27a; /* Darker teal border */
    background-color: #20c997; /* Teal background */
    color: #ffffff; /* White text */
}

.question-indicator.answered:hover {
    background-color: #1aa27a; /* Darker teal on hover */
    border-color: #157f63;
}

/* --- Custom Tooltip Style --- */
.custom-tooltip {
    position: fixed; /* Position relative to viewport */
    background-color: rgba(40, 40, 40, 0.9); /* Dark semi-transparent background */
    color: #ffffff; /* White text */
    padding: 6px 10px; /* Padding */
    border-radius: 4px; /* Rounded corners */
    font-size: 0.8rem; /* Font size */
    line-height: 1.4;
    z-index: 1080; /* High z-index (like Bootstrap tooltips) */
    max-width: 250px; /* Limit width */
    text-align: left; /* Align text left */
    
    /* Initial state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Ignore mouse events */
    
    /* Fast transition */
    transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
}

.custom-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* --- Industry Selector --- */
#industrySelectorOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.98); /* Slightly transparent white */
    z-index: 1050; /* Above BMC content, below potential modals if any */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#industrySelectorOverlay.visible {
    opacity: 1;
    visibility: visible;
}

.industry-selector-container {
    max-width: 800px;
    width: 90%;
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.4s ease-out;
}

/* Style the selector header */
.selector-header {
    font-weight: 600; /* Slightly bolder */
    font-size: 1.5rem; /* Slightly larger */
    color: #343a40; /* Darker text */
    margin-bottom: 0.75rem; /* Adjust spacing */
    display: inline-flex; /* Align emoji and text nicely */
    align-items: center;
    position: relative; /* For potential pseudo-elements */
}

.header-emoji {
    margin-right: 0.6rem; /* Space between emoji and text */
    font-size: 1.1em; /* Adjust emoji size relative to text */
}

#industrySelectorOverlay.visible .industry-selector-container {
    transform: translateY(0);
}

.industry-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 25px;
    max-height: 60vh; /* Limit height and allow scroll if many industries */
    overflow-y: auto;
    padding: 5px; /* Padding for scrollbar */
}

.industry-card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
    font-weight: 500;
    color: #495057;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* Ensure cards have a minimum height */
}

.industry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(146, 177, 128, 0.5);
    color: #146c43; /* Dark green text */
    background-color: #d1e7dd8f; /* Darker subtle green */
}

.industry-card.selected {
    background-color: #d1e7dd; /* Darker subtle green */
    border-color: #198754; /* Dark green border */
    color: #146c43; /* Dark green text */
    font-weight: 600;
}

/* --- Control Button Animation --- */
.fullscreen-controls .btn {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Control buttons animation */
#printBtn,
#helpBtn,
#toggleFullscreenBtn,
#disclaimerBtn {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#printBtn:hover,
#helpBtn:hover,
#toggleFullscreenBtn:hover,
#disclaimerBtn:hover {
    transform: translateY(-12px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

#printBtn.visible,
#helpBtn.visible,
#toggleFullscreenBtn.visible,
#disclaimerBtn.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- BMC Card Animation --- */
#bmc-placeholder .sbmc-card {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px); /* Start slightly lower */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
}

#bmc-placeholder.cards-visible .sbmc-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0s;
}

/* Ensure the placeholder itself is visible */
#bmc-placeholder {
     position: relative; /* Already set, but ensure it's the positioning context */
} 

/* Style the Loading Indicator */
#bmcLoadingIndicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
    z-index: 1040; /* Below selector overlay, above cards */
    display: flex; /* Use flex to center spinner */
    justify-content: center;
    align-items: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

#bmcLoadingIndicator.visible {
    opacity: 1;
    visibility: visible;
}

/* Adjust spinner size if needed */
#bmcLoadingIndicator .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
}

/* --- Current Industry Display Styling --- */
.current-industry-display {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem; /* Match button padding */
    border-radius: 0.375rem;
    background-color: #f8f9fa; /* Match btn-light background */
    border: 1px solid #dee2e6; /* Match btn-light border */
    color: #212529; /* Darker (near black) text for readability */
    font-weight: 500;
    font-size: 0.95rem; /* Slightly larger font */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.1s ease, visibility 0s linear 0.3s;
    opacity: 0;
    transform: translateY(8px); /* Match button animation start */
    visibility: hidden;
    box-shadow: none; /* Start with no shadow */
}

.current-industry-display:hover {
    /* Match button hover effects */
    transform: translateY(-3px); 
    box-shadow: 0 4px 12px rgba(146, 177, 128, 0.5);
    color: #146c43; /* Match button hover text color */
    background-color: #d1e7dd8f; /* Match button hover background */
    border-color: #dee2e6; /* Keep border consistent or match hover bg */
}

.current-industry-display:hover .industry-icon i {
    color: #146c43; /* Change icon color on hover too */
}
.current-industry-display:hover i.bi-chevron-down {
    opacity: 1;
}

.current-industry-display .industry-icon i {
    font-size: 1.5em;
    color: #6c757d; /* Muted icon color */
    vertical-align: text-bottom;
    transition: color 0.2s ease; /* Add transition for icon color */
}

.current-industry-display .industry-name {
    max-width: 150px; /* Prevent long names from breaking layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-industry-display i.bi-chevron-down {
    font-size: 0.8em;
    opacity: 0.7;
    transition: opacity 0.2s ease; /* Add transition for chevron */
}

/* Animation state - match button visible state */
.current-industry-display.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0s, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.1s ease; /* Match button transitions */
}

/* Ensure the spacer div doesn't affect layout when hidden */
.fullscreen-controls > div:first-child {
    flex-shrink: 0; /* Prevent spacer from shrinking */
    min-width: 120px; /* Adjust as needed based on button count/size */
}

/* Fine tune alignment if needed */
.fullscreen-controls .control-buttons {
    text-align: right; /* Keep buttons aligned right */
    min-width: 120px; /* Match the spacer width */
}

/* Prevent icons inside buttons from interfering with hover events */
.control-buttons .btn i {
    pointer-events: none;
}

.fullscreen-controls {
    /* Existing rules */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem; /* p-1 */
    /* Add min-height */
    min-height: 40px; /* Reserve space even when children are hidden */
    box-sizing: border-box; /* Include padding in height calculation */
}

/* --- Styles for the Confirmation Modal --- */
#saveChangesModal.fake-modal-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* This confines it to .sbmc-container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Slightly darker backdrop for better focus */
    /* z-index is set inline in HTML (1060), or you can set it here */
    
    opacity: 0; /* Initial state for transition */
    visibility: hidden; /* Initial state for transition */
    transition: opacity 0.25s ease-out, visibility 0s linear 0.25s; /* Fade out backdrop */
}

#saveChangesModal.fake-modal-backdrop.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Apply visible state immediately */
}

.confirmation-modal-box {
    background-color: #ffffff;
    /* padding: 1.5rem; */ /* Will be handled by header/body/footer specific padding */
    border-radius: 0.5rem; /* Match main fake modal */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15); /* Match main fake modal shadow */
    max-width: 420px; /* Slightly adjusted max-width */
    width: 90%;
    text-align: left;
    position: relative; 
    /* z-index is set inline in HTML (1061) */

    /* Animation properties - match .fake-modal-container */
    transition: opacity 0.2s ease-out, 
                visibility 0.2s ease-out, /* Keep visibility for initial hide */
                transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Pop animation */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85); /* Start slightly smaller and centered */
    /* transform: translateY(-20px) scale(0.95); Removed Y translation for centered pop */
}

/* .confirmation-modal-box.visible is already defined and should work with new transform */
/* Ensure .confirmation-modal-box.visible sets transform: scale(1); */
.confirmation-modal-box.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* Animate to final position */
    /* transition-delay: 0s; */ /* Already default */
}


.confirmation-modal-box .fake-modal-header {
    border-bottom: 1px solid #e9ecef; /* Lighter border for a softer look */
    padding: 1rem 1.25rem; /* Adjusted padding */
    margin-bottom: 0; /* Remove margin, body will have padding-top */
}

.confirmation-modal-box .fake-modal-header .fake-modal-title {
    font-size: 1.1rem; /* Slightly adjusted */
    font-weight: 600; /* More emphasis */
    color: #343a40; /* Standard dark title color */
}

.confirmation-modal-box .fake-modal-body {
    padding: 1.25rem; /* Uniform padding */
    font-size: 0.9rem;
    line-height: 1.5;
    color: #495057; /* Slightly darker body text */
}

.confirmation-modal-box .fake-modal-footer {
    padding: 1rem 1.25rem; /* Adjusted padding */
    border-top: 1px solid #e9ecef; /* Lighter border */
    background-color: #f8f9fa; /* Subtle background for footer */
    display: flex; /* Ensure flex for button alignment */
    justify-content: flex-end; /* Align buttons to the right */
}

/* Ensure buttons in footer have consistent styling */
.confirmation-modal-box .fake-modal-footer .btn {
    font-weight: 500;
    padding: 0.375rem 0.85rem; /* Slightly adjusted padding */
}

.confirmation-modal-box .fake-modal-footer .btn-success {
    background-color: #198754;
    border-color: #198754;
}
.confirmation-modal-box .fake-modal-footer .btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
}



.confirmation-modal-box .fake-modal-footer .btn-secondary {
    /* Standard Bootstrap secondary */
    background-color: #6c757d;
    border-color: #6c757d;
}
.confirmation-modal-box .fake-modal-footer .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* --- Styles for the Print Confirmation Modal --- */
#printConfirmModal.fake-modal-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* This confines it to .sbmc-container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Slightly darker backdrop for better focus */
    
    opacity: 0; /* Initial state for transition */
    visibility: hidden; /* Initial state for transition */
    transition: opacity 0.25s ease-out, visibility 0s linear 0.25s; /* Fade out backdrop */
}

#printConfirmModal.fake-modal-backdrop.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Apply visible state immediately */
}

/* --- Save Notification --- */
#saveNotification {
    position: absolute;
    bottom: 25px; /* Slightly more offset from bottom */
    left: 25px;   /* Slightly more offset from left */
    background-color: #198754; /* Primary app green */
    color: white;
    padding: 10px; /* Adjusted padding for a more compact look */
    border-radius: 50px; /* Pill shape */
    z-index: 1070; /* Ensure it's above most elements within bmc_partial but below main modal if ever an overlap */
    display: none; /* Initially hidden */
    box-shadow: 0 3px 8px rgba(0,0,0,0.1), 0 2px 3px rgba(0,0,0,0.08); /* Softer, layered shadow */
    align-items: center;
    justify-content: center;
    font-size: 1.1rem; /* Icon size */
    width: 44px; /* Fixed width for circle/pill */
    height: 44px; /* Fixed height for circle/pill */
    transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Pop animation */
    transform: translateY(15px) scale(0.9); /* Initial state for pop animation */
    opacity: 0;
}

#saveNotification.visible { /* This class will be toggled by JS for transform/opacity */
    transform: translateY(0) scale(1);
    opacity: 1;
}

#saveNotification .save-spinner,
#saveNotification .save-checkmark {
    display: none; /* JS will control display:flex or display:inline-block */
    align-items: center;
    justify-content: center;
}

#saveNotification .save-spinner.active,
#saveNotification .save-checkmark.active {
    display: flex; /* Use flex to center icons within their span */
}

#saveNotification .save-spinner .spinner-border {
    width: 1.4rem; /* Adjust spinner size */
    height: 1.4rem;
    border-width: .2em;
}


/* --- Mobile Responsiveness --- */
@media (max-width: 800px) {
    html, body {
        display: block;            /* default display is block */
        overflow: visible;        /* allows scrollbars as needed */
    }
    .bmc-section {
        min-height: 800px; /* Adjusted minimum height */
    }

    /* Stack columns in all rows */
    .sbmc-container .row > [class^="col-"] {
        width: 100%;
        flex-basis: auto;
        margin-bottom: 1rem;
    }
    .introjs-tooltipReferenceLayer {
        visibility: visible !important;
    }
    

    /* Ensure nested columns also stack correctly (usually automatic) */
    .sbmc-container .row > [class^="col-"].d-flex {
         margin-bottom: 1rem; /* Ensure space even for flex columns */
    }

    /* Adjust card heights - remove h-100 if it causes issues */
    .sbmc-container .sbmc-card.h-100 {
        height: auto !important; /* Override fixed height */
        min-height: 150px; /* Optional: ensure minimum clickable area */
    }

    /* Adjust card content for readability */
    .sbmc-card .card-body {
        padding: 1rem;
    }
    .sbmc-card .card-title {
        font-size: 1rem; /* Slightly larger title on mobile */
    }
    .sbmc-questions {
        font-size: 0.85rem; /* Slightly larger questions on mobile */
    }

    /* Adjust action buttons position/style */
    .sbmc-container > .text-end {
        text-align: center !important; /* Center buttons */
        margin-bottom: 1.5rem;
    }

    /* Adjust padding on main container */
    .sbmc-container {
        padding: 1rem !important; /* Reduce padding on small screens */
    }

     /* Ensure row gutters are reset if needed */
    .sbmc-container .row {
        --bs-gutter-x: 0.75rem; 
        --bs-gutter-y: 0.75rem; 
    }

    /* Constrain Fake Modal Height on Mobile */
    .fake-modal-container {
        width: 95%; /* Keep width relative to viewport */
        height: auto; /* Allow content to determine height up to max */
        max-height: 75vh; /* Limit height to 75% of viewport height */
        top: 5vh; /* Position from top of viewport */
        left: 2.5%; /* Keep centered horizontally */
        /* Remove height: 90% which was relative to container */
    }

    .fake-modal-body textarea {
       min-height: 80px; /* Reduce min-height slightly on mobile */
    }

    .chat-section {
        display: flex;
        flex-direction: column;
        margin-top: 15px;
        
        border-top: 1px solid #dee2e6;
        padding-top: 10px;
        /* --- Apply Non-Fullscreen Flex Layout --- */
        min-height: auto;
        overflow: visible; /* Prevent this section itself from scrolling */
    }
    .industry-selector-grid {
        max-height: none;
    }

    /* Center top controls on small screens */
    .fullscreen-controls {
        justify-content: center; /* Move controls to the middle */
        flex-wrap: wrap; /* Allow wrapping if needed */
        gap: 8px; /* Pleasant spacing between items */
    }
    /* Hide the left spacer so centering is accurate */
    .fullscreen-controls > div:first-child {
        display: none;
    }
    /* Center the right-side buttons group */
    .fullscreen-controls .control-buttons {
        text-align: center;
        min-width: 0;
    }
    /* Ensure the change category control centers nicely */
    .current-industry-display {
        margin: 0 auto;
    }
    /* Hide fullscreen button on small screens */
    #toggleFullscreenBtn {
        display: none !important;
    }

    /* Ensure Intro.js tooltip fits on mobile */
    .introjs-tooltip {
        max-width: calc(100vw - 24px);
        width: auto;
        word-wrap: break-word;
    }
}

/* --- AI Answer Suggestion Box Styling --- */
#answerSuggestionContainer {
    border: 2px solid #198754; 
    border-radius: 0.375rem;
    padding: 1rem; 
    background-color: #f0fff0; 
    animation: fadeInSuggestion 0.3s ease-out;
    box-shadow: 0 0 10px rgba(25, 135, 84, 0.2); 
    position: relative; 
    /* Make it a flex container that grows like the textarea */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Remove the old title styling inside the box if it's no longer directly applicable */
/* #answerSuggestionContainer > p.small.text-muted strong { ... } */
/* #answerSuggestionContainer > p.small.text-muted strong::before { ... } */

/* Styling for the toggle buttons */
/* Note: default .btn styles from Bootstrap are sufficient for
   #answerSuggestionContainer .btn-group .btn; no overrides needed. */

#answerSuggestionContainer .btn-group .btn.active {
    background-color: #198754;
    color: white;
    font-weight: 500;
}

/* Old #currentUserAnswerPreview and #suggestedAnswerText are replaced by #answerPreviewArea */
/* #currentUserAnswerPreview { ... } */

#answerPreviewArea { 
    /* min-height: 100px; */ /* No longer strictly needed if height is fixed */
    /* max-height: 180px; */ /* Will be overridden by height */
    height: 180px; /* Fixed height for the preview area */
    overflow-y: auto;
    background-color: #ffffff; 
    border-color: #adb5bd !important; 
    /* If #answerSuggestionContainer is flex, this might need to be flexible too */
    /* flex-grow: 1; /* Let it try to grow within the suggestion container */
    /* flex-shrink: 1; */
    /* flex-basis: auto; /* or a specific basis if needed */
}

@keyframes fadeInSuggestion {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseIcon {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* Markdown Styles in Chat Messages */
.message.gpt p {
    margin: 0 0 0.5rem 0;
}

.message.gpt p:last-child {
    margin-bottom: 0;
}

.message.gpt ul, .message.gpt ol {
    margin: 0 0 0.5rem 0;
    padding-left: 1.5rem;
}

.message.gpt strong {
    font-weight: 600;
}

.message.gpt em {
    font-style: italic;
}

.message.gpt a {
    color: inherit;
    text-decoration: underline;
}

.message.gpt code {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    font-family: monospace;
}

/* Ensure markdown doesn't break the message layout */
.message.gpt .message-text > *:first-child {
    margin-top: 0;
}

.message.gpt .message-text > *:last-child {
    margin-bottom: 0;
}