body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Arial', sans-serif;
    background-color: #f0f2f5;
}

header {
    text-align: center;
    padding: 20px 0;
}

header h2 {
    color: #6B7A8F; /* Subdued blue */
    font-size: 2.2rem;
    margin-bottom:0px;
}

header p#header_secondary {
    color: #5A5A5A;
    font-size: 1.2rem;
    margin-top: 10px;
}

#chat-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 10px;
    /* border: 1px solid #ccc; */
}

#chat-output {
    margin-bottom: 20px; /* Adds space below the chat output for typing messages */
}

.message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* Ensure message text is styled appropriately */
.message > span {
    display: block; /* Make sure message text appears on a new line */
}

.bot-message {
    /* background-color: #e7f3fe; */
}

input, select {
    font-size: 13x; /* or larger */
}

textarea {
    width: 100%; /* Adjust width to fit container */
    padding: 10px; /* Padding for text inside the textarea */
    border: 1px solid #ccc; /* Soft border color */
    border-radius: 5px; /* Rounded corners */
    background-color: #f8f8f8; /* Lighter background for softness */
    font-family: 'Arial', sans-serif; /* Consistent font family */
    font-size: 16px; /* Readable font size */
    color: #333; /* Soft text color */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Subtle inner shadow for depth */
    outline: none; /* Removes the outline to keep the style clean */
    resize: vertical; /* Allows the user to resize vertically */
    margin-bottom: 20px; /* Space below the textarea */
}

textarea::placeholder {
    color: #aaa; /* Color of placeholder text for subtlety */
    font-style: italic; /* Italic placeholder text */
}

.user-message {
    /* background-color: #dcf8c6; */
    text-align: left;
    align-self: flex-end;
}

#chat-input-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

#chat-input {
    width: calc(100% - 40px);
    padding: 10px 20px;
    border: 1px solid #ccc;
    margin: 0 auto;
    display: block;
    flex-grow: 1;
    margin-right: 10px;
    margin-left:40px;
}

.message-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0; /* Prevents the avatar from shrinking */
}

.text-container {
    display: flex;
    flex-direction: column;
    padding-bottom:5px;
}

.text-container > span {
    display: block; /* Ensures the text starts on a new line */
    line-height: 1.5;
}

.message-name {
    font-weight: bold;
    margin-bottom: 5px; /* Adjust based on your design */
}
.bot-message .message-icon {
    /* Icon styling specific to bot messages */
}

.user-message .message-icon {
    /* Icon styling specific to user messages */
}

#send-button {
    padding: 10px 20px;
    background-color: #B0A295; /* Earthy tone for buttons */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
    /* margin-top: 10px; */
}

#chat-input, #send-button {
    display: none;
}

@keyframes blink {
    50% {
      opacity: 0;
    }
}
  
.generating-animation {
    animation: blink 1s linear infinite;
}

.generator-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Center horizontally */
    font-family: 'Georgia', serif; /* Match the site's font */
    font-size: 1rem;
    color: #6B7A8F; /* Subdued blue to match headers */
    background-color: #ffffff; /* Matching div background */
    padding: 20px; /* Consistent with div padding */
    border-radius: 10px; /* Soften edges */
    margin: 20px auto; /* Ensure it's centered */
    width: 80%; /* Adjust based on preference */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
}

.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #B0A295; /* Use the earthy tone for consistency */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    margin-right: 15px; /* Slightly more space */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Custom Audio Player and Cover Art Container */
#custom_audio_player {
    max-width: 300px;
    margin: 20px auto;
    position: relative;
}

#feedback::placeholder {
    color: grey; /* Placeholder text color */
    font-style: italic; /* Placeholder text style */
    font-family: 'Arial', sans-serif;
  }

#background_container {
    position: relative;
    width: 240px; /* Adjusted to accommodate the progress bar */
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    margin: auto; /* Center align the container */
}

#cover_art_container {
    position: relative;
    width: 200px;
    height: 200px;
    z-index: 2; /* Ensure image is above the progress bar */
}

#cover_art {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

#controls_container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Play/Pause Button */
#play_pause_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; /* Ensures it's above the image and progress bar */
    background: none;
    border: none;
    cursor: pointer;
}

#play_pause_icon {
    color: white; /* Ensures visibility against most images */
    font-size: 2rem; /* Adjust size as needed */
}

/* Progress Bar (Circular) */
#progress_svg {
    position: absolute;
    top: 0; /* Align SVG with the outer container */
    left: 0;
    width: 100%; /* Match the outer container size */
    height: 100%;
    transform: rotate(-90deg);
    z-index: 1; /* Below the image but above the background */
}

.progress-ring__circle {
    stroke: #4CAF50; /* Progress bar color */
    stroke-width: 10; /* Width of the progress bar */
    fill: transparent;
    stroke-dasharray: 754; /* Adjust based on the circle's circumference */
    stroke-dashoffset: 754; /* Initially no progress */
    cx: "120"; /* Center x-coordinate, adjusted for the new SVG size */
    cy: "120"; /* Center y-coordinate, adjusted for the new SVG size */
    r: "114"; /* Radius, adjusted to position the circle outside the image */
}

/* Follow-up Section */
#followup {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px; /* Space from the audio player */
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: none;
}

#followup p {
    margin-bottom: 20px;
    /* font-size: 1.1rem; */
}

#followup a, button {
    display: inline-block;
    background-color: #B0A295; /* Earthy tone */
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    margin: 10px 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
    border-width: 0px;
}

#followup a:hover, button:hover {
    background-color: #9C8E7E; /* Darker on hover */
}

footer {
    font-size: 8px; /* Smaller font size */
    padding: 10px; /* Padding around the content */
    margin-top: 20px; /* Space above the footer */
    background-color: #f2f2f2; /* Light gray background */
    color: #555555; /* Darker text color for contrast */
    text-align: center; /* Center the text */
}

.rating {
direction: rtl; /* Right-to-left direction to fill stars from right to left */
unicode-bidi: bidi-override; /* Override the default text direction */
font-size: 30px;
}

.rating > input {
display: none; /* Hide radio buttons */
}

.rating > label {
cursor: pointer;
color: #ccc; /* Light grey color for unfilled stars */
}

.rating > input:checked ~ label,
.rating > input:checked ~ label ~ label {
color: orange; /* Orange color for filled stars */
}

.rating > label:hover,
.rating > label:hover ~ label {
color: orange; /* Orange color on hover */
}

footer {
    font-size: 10px; /* Adjusted font size */
    background-color: #f2f2f2; /* Different background color for footer */
    color: #555555; /* Footer text color */
    padding: 10px 20px; /* Adjusted padding */
}