/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', sans-serif;
    background-color: #f7f7f7;
    overflow: hidden;
    /*display: flex;
     justify-content: center; 2222*/
    /*align-items: flex-start;  2222 Align to the top center;*/
    height: 100vh;
    /* flex-direction: column; 2222*/ 
    /* Add gradient background */
    /* background: linear-gradient(to bottom right, #c8c8d5,#9797f8,#5454cc); Light green to blue */
    /*background: linear-gradient(135deg, #6a11cb, #2575fc);  Gradient background */
    /*background: linear-gradient(97deg, #190e25, rgb(82, 52, 220) 48.32%, #2575fc); */
    background: linear-gradient(97deg, #190e25, rgb(82, 52, 220) 35.29%, #9f87e7);
}

#header {
    display: flex;
    height: 60px; /* Ensure this matches your expectations */
    box-sizing: border-box; /* Includes padding in the height calculation */
    justify-content: space-between; /* Space out the two items */
    align-items: center; /* Vertically align */
    position: fixed; /* Fixed position to stay at the top */
    top: 0;
    left: 0;
    right: 0; /* Stretch across the top */
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent background */
    width: 100%; /* Ensure the header spans the whole width */
    text-align: center; /* Center the text */
    padding: 10px; /* Space around the text */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
    z-index: 10; /* Ensure it's above other content */
}

/* Styling for the Powered By section */
#powered-by {
    text-align: center; /* Center the logo */
    font-size: 16px;
    color: #333;
    position: absolute; /* Position it absolutely within the header */
    left: 50%; /* Move to the center of the header */
    transform: translateX(-50%); /* Adjust to perfectly center */
}

#powered-by img {
    width: 150px; /* Adjust the size as needed */
    height: auto; /* Maintain aspect ratio */
    margin-left: 10px; /* Space between text and image */
}

/* Network Status */
.network-status {
    /*color: rgba(254, 252, 252, 0.61);*/
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    padding: 5px;
    padding-right: 20px;    
    text-align: center;
    font-weight: bold;
    justify-content: flex-start;
    margin-left: auto;
}

.main-container {
    /*width: 100%;*/
    display: grid;
    /* grid-template-columns: 1fr 3fr; */
    /* grid-template-rows: auto; */
    /*gap: 0.4rem;*/
    padding: 0.1rem;

    height: calc(100vh - 60px); /* Full height minus the header */
    padding-top: 60px; /* Add padding for the fixed header */

    position: relative; /* Required for positioning absolute elements inside */
    /* align-items: center; /* Center vertically */
    /* justify-content: center;  Center the chat-container when dock is closed */
    /* flex-direction: column; */
}

.summary-column {
    border: 1px solid #ccc;
    padding: 1rem;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.13);/* Semi-transparent background */
    text-align: center;
}

.button-title {
    font-size: 2.5em; /* Keeps the size impactful */
    color: #f8f1e7; /* A softer off-white color for elegance */
    /*background: linear-gradient(135deg, #4caf50, #81c784);  Subtle green gradient background */
    padding: 2rem; /* Adds some internal space for better spacing */
    /* border-radius: 15px;  Smoothly rounds the edges */
    text-align: center; /* Centers the text horizontally */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);  Adds a soft shadow for depth */
    max-width: 600px; /* Restricts the width for better readability */
    margin: 2rem auto; /* Centers the box on the page */
    font-family: 'Arial', sans-serif; /* Clean font */
    line-height: 1.5; /* Improves readability */
}

.button-title p {
    margin: 0; /* Removes extra spacing from the paragraph */
}


/* .left-column {
    display: none;
    align-content: center;
    /*border: 1px solid #ccc;*./
    padding: 1rem;
    overflow-y: auto;
    /*background-color: rgba(255, 255, 255, 0.8);/* Semi-transparent background *./
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth *./
} */

#starting-container {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

#flowchart-container {
    display: none;
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.start-step {
    position: relative;
    min-height: 1em;
    color: white;
    font-family: "Raleway",sans-serif;
    opacity: 1; /* Default dimmed look */
    transition: opacity 0.3s ease-in-out;
/*    background: #f0f0f0;
    border: 2px solid #8652f2;
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 2;*/
}

.start-step > div:first-child {
    position: static;
    height: 0;
    color: #4285f4;
    background-color: #4285f4;
    color: #4285f4;
    opacity: 1; /* Highlight the active step */
    font-weight: bold; /* Optional: emphasize the active step */
}

.start-step + .start-step {
    margin-top: 1.5em;
}

.start-step > div:not(:first-child) {
    margin-left: 1.5em;
    padding-left: 1em;
}

.start-step.step-active {
    color: #4285f4;
    opacity: 1; /* Highlight the active step */
    font-weight: bold; /* Optional: emphasize the active step */
}

.start-step.step-active .circle {
    background-color: #4285f4;
}

.start-step.step-active .step-title {
    color: #4285f4;
}

.step {
    position: relative;
    min-height: 1em;
    color: white;
    font-family: "Raleway",sans-serif;
    opacity: 0.5; /* Default dimmed look */
    transition: opacity 0.3s ease-in-out;
/*    background: #f0f0f0;
    border: 2px solid #8652f2;
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 2;*/
}
.step-title {
    line-height: 1.5em;
    font-weight: bold;
    /*margin: 0;
    font-size: 18px;
    color: #333;*/
}
.step-caption {
    /*font-size: 14px;*/
    font-size: 0.8em;
    color: #c3c1c1;
}

/* Circle */
.circle {
    background: gray;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    border-radius: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 0 3px #fff;
  }

.step.step-active {
    color: #4285f4;
    opacity: 1; /* Highlight the active step */
    font-weight: bold; /* Optional: emphasize the active step */
}

.step.step-active .circle {
    background-color: #4285f4;
}

.step.step-active .step-title {
    color: #4285f4;
}

.step + .step {
    margin-top: 1.5em;
}

.step > div:not(:first-child) {
    margin-left: 1.5em;
    padding-left: 1em;
}
    

/* Vertical Line */
.circle:after {
    content: ' ';
    position: absolute;
    display: block;
    top: 1px;
    right: 50%;
    bottom: 1px;
    left: 50%;
    height: 100%;
    width: 1px;
    transform: scale(1, 2);
    transform-origin: 50% -100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: -1;
  }

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    text-align: center;
}

.fa-check:before {
    content: "\f00c";
}    

.step > div:first-child {
    position: static;
    height: 0;
}

/* .dock {
    position: fixed; /* Keep dock fixed on the left *./
    left: 0;
    top: 60px; /* Start below the header *./
    width: 200px; /* Width of the dock *./
    height: calc(100% - 60px); /* Full height minus header height *./
    background-color: #f4f4f4;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    transform: translateX(-100%);
    z-index: 900; /* Below the header *./
} */

/* Chat Container */
#chat-container {
    /* margin-left: 220px; /* Space for the dock */
    width: 100%; /* Default full width */
    /* max-width: 600px; /* Maximum width for centering */
    /*height: 90vh;  Height of the chat area */
    display: none;
    flex-direction: column; /* Stack elements vertically */
    justify-content: space-between; /* Space between header, messages, and input */
    background-color: linear-gradient(to bottom right, #c8c8d5,#9797f8,#5454cc); /* Light green to blue */
    /*background-color: rgba(255, 255, 255, 0.13);/* Semi-transparent background */
    box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.2, 0.1); /* Shadow effect */
    border-radius: 2px; /* Rounded corners */
    overflow: hidden; /* Hide overflow for a clean look */
    transition: width 0.3s ease; /* Smooth transition */
}

/* Additional styles when dock is open *./
.dock-open + .chat-container {
    width: calc(100% - 200px); /* Adjust width when dock is expanded *./
    margin-left: 200px; /* Ensure chat-container aligns with dock when open *./
} */

/* .dock-header {
    background-color: #850dda;
    color: white;
    padding: 10px;
    cursor: pointer;
    text-align: center;
} */

/* .dock-content {
    padding: 10px;
    display: none; /* Hidden by default *./
} */

.expandable {
    margin-top: 10px;
}

.heading {
    background-color: #e9ecef;
    padding: 10px;
    cursor: pointer;
}

.section {
    display: none; /* Hidden by default */
    padding: 10px;
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
}

.dock-button {
    display: block;
    position: absolute; /* Position button within the main container */
    margin: 10px auto; /* Center the button horizontally */
    transform: rotate(90deg); /* Rotate the text 90 degrees */
    transform-origin: left bottom; /* Set origin for rotation */
    /* left: 10px; /* Adjust as needed */
    width: 80px; /* Set a fixed width for the button */
    /* top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for exact vertical centering */
    padding: 10px 15px;
    background-color: #5b10d5;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center; /* Center text */
    z-index: 1000; /* Ensure the button is on top of other elements */
}

/* Chat Title */
.chat-title {
    color: rgba(254, 252, 252, 0.61);
    padding: 5px;
    text-align: center;
    font-weight: bold;
    background-color: #e0e0e0;
    border-bottom: 1px solid #ccc;
    background: linear-gradient(to bottom right, #5454cc, #25089a); /* Light green to blue */
}

/* Adjusting the chat window */
#chat-box {
    background-color: rgba(240, 240, 240, 0);
    height: 70vh;
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Ensure that messages stack vertically */
    align-items: stretch; 
}

/* Chat messages styling */
.message {
    max-width: 80%;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
    font-size: 16px;
}

.message.user {
    align-self: flex-end;
    background-color: #2196F3;
    color: white;
}

/* Align AI messages to the left */
.message.ai {
    align-self: flex-start;  /* AI messages to the left */
    background-color: #fff;  /* AI message color */
    color: black;  /* AI message text color */
}

 /* Container for input and send button */
.input-container {
    display: flex;
    align-items: center;
    flex-direction: column;  /* Stack elements vertically */
    /*padding: 10px;*/
    /* background-color: rgba(240, 240, 240, 0.2); */
    /* border-top: 0.3px solid #ccc; */
    position: relative;
    bottom: 0;
    width: 100%;
    /* box-shadow: 0px -7px 16px rgba(0, 0, 0, 0.1); */
    /*gap: 5px; */ /* Space between the pills and input box */
}

.pills-container {
    display: flex;
    gap: 10px;  /* Space between pills */
    margin-bottom: 5px;  /* Space above the input box */
    flex-wrap: wrap;  /* Allow wrapping to next line if needed */
    padding: 10px;
}

.pill {
    padding: 8px 12px;
    background-color: #ffffff;
    color: rgb(10, 2, 55);
    border-radius: 20px;
    border: 2px solid rgb(70, 3, 146); /* Black border */
    cursor: pointer;
    font-size: 14px;
    font-weight: bold; /* Make text bold */
    transition: background-color 0.3s;
}

.pill:hover {
    background-color: #1976D2; /* Darker blue on hover */
}

/* Chat Input Section */
.chat-input-container {
    background-color: rgba(240, 240, 240, 0);/*#f0f0f0;*/
    display: flex;
    align-items: center;
    /*border-top: 2px solid #cccccc;*/
    bottom: 40px;
    width: 100%;
    height: 60px;
    z-index: 10;
}

/* Input text box */
#chat-input {
    flex-grow: 1;
    padding: 10px 15px;
    border-radius: 20px;
    border: none;
    background-color: #fff;
    font-size: 16px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    outline: none;
    margin-right: 10px;
    margin-left: 10px;
}

/* Send button */
#send-button {
    width: 50px;
    height: 50px;
    background-color: #021503;  /* Green color for send button */
    color: white;
    border-radius: 50%;
    border: none;
    display: flex;
    margin-right: 10px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.send-btn:hover {
    background-color: #218838;
}

/* Placeholder Message */
.placeholder-message {
    color: grey;
    text-align: center;
    font-size: 14px;
    margin-top: 50px;
}

/* Version Imprint */
.version-imprint {
    margin-top: auto; /* Push it to the bottom */
    bottom: 10px;
    padding: 3px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #999;
}

/*.connector {
    position: absolute;
    width: 2px;
    background-color: #4CAF50;
    z-index: 1;
}
.connector.curved {
    height: 80px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: linear-gradient(to bottom, transparent 50%, #4CAF50 50%);
}*/

/* Responsive styles for mobile 
@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .right-column {
        order: 1;
    }

    .chat-container {
        order: 2;
    }

    .summary-column {
        order: 3;
    }
}*/

/* Button Container */
#button-container {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    justify-content: center;
    align-items: center; /* Center the buttons */
    /* height: 100%; */
    /*background: linear-gradient(135deg, #6a11cb, #2575fc); /* Gradient background */
    /* border-radius: 15px; Smooth corners */
    padding: 20px;
}

/* Button Styling */
.action-button {
    background: linear-gradient(143deg, rgba(105, 48, 188, 0.93), #489cf3); /* Gradient button color */
    color: white; /* Text color */
    font-size: 18px; /* Larger font for readability */
    font-weight: bold; /* Emphasize the button text */
    padding: 15px 30px; /* Padding for a comfortable click area */
    margin: 10px; /* Space between buttons */
    border: none; /* Remove borders */
    border-radius: 50px; /* Fully rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease-in-out; /* Smooth hover effect */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); /* Material shadow effect */
}

/* Tooltip text */
.action-button::after {
    content: attr(data-tooltip); /* Use the data-tooltip attribute value */
    position: absolute;
    top: 50%; /* Position above the button */
    left: 110%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.75); /* Dark background for the tooltip */
    color: #fff; /* White text */
    padding: 8px 12px;
    border-radius: 4px;
    /* white-space: nowrap;  Prevent text wrapping */
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 1000; /* Ensure it's above other elements */
    min-width: 350px;
    max-width: 500px; /* Set a maximum width for the tooltip */
    word-wrap: break-word; /* Allow content to wrap within the box */
    text-align: center; /* Center-align the text inside the tooltip */
}

/* Button Hover Effect */
.action-button:hover {
    background: linear-gradient(105deg, #489cf3, rgba(105, 48, 188, 0.93)); /* Reverse gradient on hover 135deg, #ff758c, #ff7eb3*/
    transform: translateY(-5px); /* Lift the button slightly */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.24); /* Enhance shadow on hover */
}

/* Tooltip on hover */
.action-button:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Button Active (Click) Effect */
.action-button:active {
    transform: translateY(2px); /* Slightly depress the button */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow when clicked */
}

/* Button Styling */
.action-button-inactive {
    background: linear-gradient(143deg, rgba(161, 132, 204, 0.93), #90b0d3); /* Gradient button color */
    color: white; /* Text color */
    font-size: 18px; /* Larger font for readability */
    font-weight: bold; /* Emphasize the button text */
    padding: 15px 30px; /* Padding for a comfortable click area */
    margin: 10px; /* Space between buttons */
    border: none; /* Remove borders */
    border-radius: 50px; /* Fully rounded corners */
    cursor: not-allowed; /* Optional: indicate it's inactive */
    pointer-events: auto; /* Disables clicks and interactions */
    transition: all 0.3s ease-in-out; /* Smooth hover effect */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); /* Material shadow effect */
    position: relative; /* Required for the tooltip positioning */
    display: inline-block;
}

/* Prevent clicks specifically */
.action-button-inactive > * {
    pointer-events: none; /* Disable clicks on the button content */
}

/* Tooltip text */
.action-button-inactive::after {
    content: attr(data-tooltip); /* Use the data-tooltip attribute value */
    position: absolute;
    bottom: 120%; /* Position above the button */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75); /* Dark background for the tooltip */
    color: #fff; /* White text */
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap; /* Prevent text wrapping */
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 1000; /* Ensure it's above other elements */
}

/* Button Hover Effect 
.action-button-inactive:hover {
    background: linear-gradient(105deg, #90b0d3, rgba(161, 132, 204, 0.93)); /* Reverse gradient on hover 135deg, #ff758c, #ff7eb3 *./
    transform: translateY(-5px); /* Lift the button slightly *./
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.24); /* Enhance shadow on hover *./
}*/

/* Tooltip on hover */
.action-button-inactive:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Responsive Design */
@media (max-width: 768px) {
    #button-container {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .action-button {
        font-size: 16px; /* Slightly smaller font on small screens */
        padding: 10px 20px; /* Adjust padding */
    }
}