/* Reset and Basic Styles */
 body, html {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex; /* Use flexbox for overall structure */
    flex-direction: column; /* Stack title and main content vertically */
}
h1 {
    text-align: center;
    color: #333;
    margin: 10px 0; /* Reduced margin */
    font-size: 1.4em;
    flex-shrink: 0; /* Prevent title from shrinking */
}

/* Three-Pane Layout */
#main-container {
    display: flex;
    flex-grow: 1; /* Allow main container to fill remaining height */
    overflow: hidden; /* Prevent overflow issues */
    width: 100%;
    padding: 0 10px 10px 10px; /* Add some padding around panes */
    box-sizing: border-box;
}

#left-pane, #right-pane {
    width: 230px; /* Fixed width for side panes */
    flex-shrink: 0; /* Prevent side panes from shrinking */
    background-color: #e9ecef;
    padding: 15px;
    border-radius: 8px;
    overflow-y: auto; /* Allow scrolling if content overflows */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: calc(100vh - 70px); /* Adjust based on h1 height/padding */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between elements in side panes */
}
 #left-pane { margin-right: 10px; }
 #right-pane { margin-left: 10px; }

#center-pane {
    flex-grow: 1; /* Allow center pane to take remaining space */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent chatbox/input overflow */
    height: calc(100vh - 70px); /* Adjust based on h1 height/padding */
}

/* Center Pane Specifics */
 #scene-awareness {
    padding: 10px 15px;
    font-size: 0.9em;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0; /* Prevent shrinking */
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
 #scene-awareness span {
     font-weight: bold;
     margin-right: 5px;
     color: #495057;
 }
 #detected-objects {
     font-style: italic;
     color: #6c757d;
 }
 #analyze-scene-button {
     padding: 5px 10px;
     font-size: 0.8em;
     margin-left: 10px;
 }

#chatbox-container {
    flex-grow: 1;
    padding: 10px 20px;
    overflow-y: auto;
}
#chatbox {
    max-width: 100%; /* Allow chat to fill center pane */
    margin: 0;
}
#input-area { /* Container for input box + send button below chat */
    padding: 15px 20px;
    border-top: 1px solid #ccc;
    background-color: #f4f4f9;
    flex-shrink: 0; /* Prevent shrinking */
}
#input-row {
    display: flex;
    align-items: center;
}
#question {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 1em;
}
#sendButton {
     border-radius: 20px;
     padding: 10px 20px;
     font-size: 1em;
}

/* Side Pane Section Styling */
.pane-section {
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid #dee2e6;
}
.pane-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.pane-section h3 {
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #495057;
}
.pane-section label {
    display: block; /* Stack labels nicely */
    margin-bottom: 5px;
    font-size: 0.9em;
}
.pane-section select, .pane-section input[type="file"] {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
    font-size: 0.9em;
    margin-bottom: 5px;
}
 .pane-section input[type="radio"], .pane-section input[type="checkbox"] {
     margin-right: 5px;
 }
 .radio-group label {
     display: inline-block; /* Radio labels inline */
     margin-right: 10px;
     margin-bottom: 0;
 }

.redt{
color: #d22b27;
font-size: 1.6rem;
 }
 .fas{
    color: #1a2b64;
    color: #357ebd;
    color: #6C99E5;
    color: #357ebd;
    color: #557AB2;
    color: #4D7CCD;
    color: #557a99;
    color: #909AAA;
     
     
    
    
    
    
 }
 .gradient {
    
    background: linear-gradient(145deg, #1F3068  55%, #d22b27 45%); /* 135deg for top-left to bottom-right */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
}
/* Message Styles (Keep existing) */
.message { margin-bottom: 15px; padding: 10px 15px; border-radius: 15px; line-height: 1.4; max-width: 85%; word-wrap: break-word; }
.user-question { background-color: #dcf8c6; margin-left: auto; border-bottom-right-radius: 5px; }
.llm-answer { background-color: #e5e5ea; margin-right: auto; border-bottom-left-radius: 5px; white-space: pre-wrap; }
.llm-answer strong {
    color: #0068c0 ;
    font-weight: 400;
    font-style: italic;
}
.error-message { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; margin-right: auto; border-bottom-left-radius: 5px; }
.thinking-indicator { font-style: italic; color: #555; }
.shortcut-hint { font-size: 0.8em; color: #6c757d; margin-left: 5px; }

/* TTS Setting Styles (Keep existing / move to right pane) */
#tts-settings { font-size: 0.9em; }
#tts-settings div { display: flex; align-items: center; margin-bottom: 5px; }
#tts-settings label { margin-right: 5px; min-width: 50px; }
#tts-settings button { padding: 3px 8px; font-size: 0.9em; min-width: 25px; border-radius: 5px; margin: 0 3px; }
#tts-settings span { display: inline-block; width: 30px; text-align: center; margin: 0 3px; }
#tts-settings select { max-width: 150px; padding: 5px; margin-left: 5px; }

/* Right Pane Specific Controls */
#mic-activation { display: flex; align-items: center; margin-bottom: 10px; }
#micStatus { margin-left: 10px; font-style: italic; color: #555; font-size: 0.9em; }
#tts-controls { display: flex; align-items: center; font-size: 0.9em; margin-bottom: 10px; }
#tts-controls label { margin-left: 5px; cursor: pointer; }
#speakLastAnswerButton { padding: 8px 15px; font-size: 0.9em; margin-left: 15px; }
#speakStopButton { padding: 8px 15px; font-size: 0.9em; margin-left: 15px; }

/* Toggle Switch Style (Basic) */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider:before { transform: translateX(20px); }



/* Center Pane - Scene Display */
#scene-display-container {
    flex-shrink: 0; /* Prevent shrinking */
    max-height: 150px; /* Limit height, adjust as needed */
    overflow-y: auto; /* Add scroll if content exceeds max height */
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0; /* Remove padding from container */
}

#scene-log-header {
    font-weight: bold;
    font-size: 0.9em;
    color: #495057;
    padding: 8px 15px;
    background-color: #e9ecef; /* Slightly different background */
    border-bottom: 1px solid #dee2e6;
    position: sticky; /* Keep header visible when scrolling */
    top: 0;
    z-index: 1;
}

#scene-log {
     padding: 10px 15px; /* Padding for the scene entries */
}

.scene-entry {
    font-size: 0.9em;
    color: #d22b27;
    margin-bottom: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    border-bottom: 1px dotted #ced4da; /* Dotted separator */
    line-height: 1.4;
}
.scene-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.scene-entry.initial-hint {
     font-style: italic;
     color: #d22b27;
     border-bottom: none;
}
.scene-object { /* Style for clickable objects */
     cursor: pointer;
     text-decoration: underline;
     text-decoration-style: dotted;
     color: #0056b3; /* Link-like color */
     margin: 0 2px; /* Add slight spacing */
}
.scene-object:hover {
     text-decoration-style: solid;
     background-color: #e9ecef;
}

#scene-controls {
    padding: 8px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6; /* Match scene log container */
    text-align: right; /* Align button to right */
    flex-shrink: 0;
}

#generate-report-button {
    padding: 5px 10px;
    font-size: 0.85em;
}

/* Right Pane - Sliders */
.pane-section input[type="range"] {
    width: calc(100% - 40px); /* Adjust width to fit label/value */
    vertical-align: middle;
    margin-left: 5px;
}
.pane-section label span { /* Style for value display next to slider */
     display: inline-block;
     min-width: 30px;
     text-align: right;
     font-weight: bold;
     margin-left: 5px;
}

/* Center Chatbox Container to fill space correctly */
#chatbox-container {
    flex-grow: 1;
    padding: 10px 20px;
    overflow-y: auto;
    /* Remove fixed border if scene display provides separation */
     border-bottom: none;
}

/* Add specific styling for AI Observation messages */
.ai-observation {
    border-left: 3px solid #17a2b8; /* Example: teal border */
    background-color: #f1fafd; /* Lighter background */
    padding-left: 12px;
}



/* --- Sample Questions Modal Styles --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top, above navbar if navbar z-index is 1000 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    padding-top: 60px; /* Location of the box */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 25px;
    border: 1px solid #888;
    width: 80%;
    max-width: 700px; /* Max width */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative; /* For positioning the close button */
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 1; /* Adjust line height for better vertical alignment */
    padding: 0 5px; /* Add some padding for easier clicking */
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #007bff; /* Or your primary heading color */
}

#sampleQuestionsContainer {
    max-height: 60vh; /* Limit height and allow scroll */
    overflow-y: auto;
    text-align: left;
}

.sample-category {
    margin-bottom: 20px;
}

.sample-category h3 {
    font-size: 1.2em;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.sample-question-item {
    display: block; /* Make them block for easier clicking */
    padding: 8px 5px;
    color: #0056b3; /* Link-like color */
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.sample-question-item:hover {
    background-color: #e9ecef;
    color: #003875;
}

/* Ensure button styles are consistent or specific */
#showSampleQuestionsBtn,
#askRandomSampleQuestionBtn {
    width:100%;
    display: block; /* Or inline-block if you prefer */
    margin-left: auto;
    margin-right: auto;
    padding: 4px 8px; /* Adjust padding as needed */
    font-size: 0.9em;
    font-weight: 500; /* Slightly less bold than primary CTA */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent; /* Base border */

    /* Option: Secondary Gray */
    background-color: #357EBD ; /* Bootstrap secondary gray */
    color: white;
    border-color: #fff;
}


#showSampleQuestionsBtn:hover,
#askRandomSampleQuestionBtn:hover {
    /* Option: Secondary Gray Hover */
    background-color: #e9ecef;
    border-color: #545b62;
    color: black;
}

/* In your style.css or charts.css */
.message.system-info {
    font-style: italic;
    color: #666;
    background-color: #f9f9f9;
    border-left: 3px solid #ccc;
    padding: 6px 10px;
    margin-top: 3px;
    margin-bottom: 3px;
}
.message.message-small { /* Modifier for smaller text */
    font-size: 0.9em;
}


/* --- Custom Tooltip Styles --- */
.custom-tooltip-element { /* Using a more specific name for the JS-created div */
    background-color: #333;  /* Dark background */
    color: white;           /* Light text */
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85em;      /* Slightly smaller than main text */
    line-height: 1.4;
    max-width: 250px;       /* Prevent very wide tooltips */
    text-align: center;
    white-space: pre-wrap;  /* Allows line breaks in tooltip text if you use \n in data-tooltip */
    z-index: 1010;          /* Ensure it's above most other elements */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none;          /* Initially hidden, JS will show it */
    pointer-events: none;   /* Tooltip itself should not be interactive */

    /* For Popper.js positioning (it will apply transform) */
    position: absolute; /* Or fixed if your reference elements are in fixed containers */

    /* Optional: Basic fade-in animation */
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.custom-tooltip-element[data-show] { /* State when tooltip is visible */
    display: block; /* Make it block for Popper to measure */
    opacity: 1;
}

/* Optional: Arrow (add a div with this class inside the tooltipElement if desired)
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
}
.custom-tooltip-element[data-popper-placement^='top'] > .tooltip-arrow {
    bottom: -6px;
    border-color: #333 transparent transparent transparent;
}
.custom-tooltip-element[data-popper-placement^='bottom'] > .tooltip-arrow {
    top: -6px;
    border-color: transparent transparent #333 transparent;
}
etc. for left/right - Popper.js docs have examples for arrow modifiers
*/

/* Indicate to user that an element has a tooltip */
[data-tooltip] {
    cursor: help;
}


/* --- Top Right App Menu Styles --- */
#app-menu-container {
    position: absolute; /* Position relative to main-container or viewport */
    top: 10px;          /* Adjust as needed */
    right: 20px;         /* Adjust as needed */
    z-index: 1005;       /* Ensure it's above most content but below modals */
}

#menu-toggle-button {
    background-color: #4a5568; /* Darker gray, adjust to your theme */
    color: white;
    border: none;
    padding: 4px 10px;
    font-size: 1.2em; /* Adjust icon/text size */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#menu-toggle-button:hover,
#menu-toggle-button:focus {
    background-color: #2d3748; /* Darker on hover */
}

.dropdown-menu {
    display: none; /* Hidden by default, JS will toggle */
    position: absolute;
    top: 100%; /* Position below the button */
    right: 0;  /* Align to the right of the button */
    background-color: #3a3f4b; /* Slightly lighter than button, adjust */
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
    z-index: 1000; /* Below the button if button has higher z-index, but above page */
    border-radius: 4px;
    padding: 5px 0; /* Padding for top/bottom of menu items */
    border: 1px solid #555;
}

.dropdown-menu a {
    color: #e2e8f0; /* Light text for menu items */
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 0.9em;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background-color: #4a5568; /* Hover color for menu items */
    color: #fff;
}

.dropdown-divider {
    height: 1px;
    margin: 5px 0;
    overflow: hidden;
    background-color: #555c69; /* Color for the divider line */
}