/* #ff3535c6 */

/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
    font-family: Poppins, 'Tahoma', Geneva, Verdana, sans-serif;
    background-color: #2A2B32; 
    color: #D1D5DB;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

/* Style for the login overlay */
#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#login-overlay .overlay-content {
    background-color: #2A2B32; /* Match your app's dark theme */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: #D1D5DB; /* Use your app's text color */
}

#login-overlay .overlay-content h2 {
    margin-bottom: 20px;
}

#login-overlay .overlay-content button {
    padding: 10px 20px;
    background-color: #ff3535c6; /* Use your app's button color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
}

#login-overlay .overlay-content button:hover {
    background-color: #ff3535c6; /* Darker shade on hover */
}

/* Style for the login/logout button in the sidebar */
.login-button {
    padding: 10px 15px;
    background-color: #28a745; /* Green color to match your app */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    text-align: center;
}

.logout-button {
    background-color: #dc3545; /* Red color for logout */
}

.login-button:hover, .logout-button:hover {
    background-color: #218838; /* Darker green for hover on login */
}

.logout-button:hover {
    background-color: #c82333; /* Darker red for hover on logout */
}

/* Sidebar */
.sidebar {
    background-color: #202123;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid #3B3C41;
    height: 100vh; /* Ensure the sidebar takes full height */
    transition: transform 0.3s ease, left 0.3s ease;
    position: fixed;
    top: 0;
    left: -300px; /* Initially hide sidebar off-screen */
    z-index: 1100;
}


/* Ensure toggle button is above other elements */
.toggle-sidebar {
    z-index: 1200; /* Above the sidebar */
}

.sidebar.open {
    left: 0; /* Slide in the sidebar on toggle */
}

@media (min-width: 769px) {
    .sidebar {
        left: 0; /* Sidebar visible by default on larger screens */
        transform: none;
    }
}

/* Sidebar Toggle Button */
.toggle-sidebar {
    display: block; /* Ensure the button is visible */
    background-color: #ff3535c6;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1200; /* Above the sidebar */
    font-size: 1.5em;
}

/* Sidebar Sections */
.sidebar-content {
    margin-bottom: 20px;
}

.sidebar-content h3 {
    color: #D1D5DB;
    font-size: 1.2em;
    margin-bottom: 10px; /* Add margin-bottom to create space between the header and the list */
}

@media (min-width: 769px) {
    .toggle-sidebar {
        display: none; /* Hide the button on larger screens */
    }
}

/* Sidebar Header */
.sidebar-header {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sidebar-header .logo {
    font-size: 1.5em;
    /* font-weight: bold; */
    color: #D1D5DB;
    margin-bottom: 30px;
    margin-top: 40px;
}

/* Sidebar Buttons */
.new-character-button {
    background-color: transparent;
    color: #ff3535c4 !important;
    border: 1px solid #ff3535 !important;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: left;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 10px;
}

.new-chat-button {
    background-color: #ff3535 !important;
    color: white;
    border: 1px solid #ff3535 !important;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 10px;
    /* place left and use font */
    text-align: left;
    /* font-family: Poppins, 'Tahoma', Geneva, Verdana, sans-serif; */
}

.new-character-button:hover {
    background-color: #ff3535 !important;
    color: white !important;
    /* text colour white */

}

/* Disabled new-chat-button styles */
.new-chat-button[disabled] {
    background-color: #444;
    cursor: not-allowed;
    position: relative;
}

.new-chat-button[disabled]::after {
    content: attr(title);
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1000;
    font-size: 0.85em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.new-chat-button[disabled]:hover::after {
    background-color: #ff3535 !important;
}

.new-chat-button[disabled]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: default;
    z-index: 2;
}

/* Sidebar Content */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 5px;
    padding-top: 20px;
}

#character-list, #saved-chats {
    max-height: 250px; /* Adjust height to fit about 5 items */
    overflow-y: auto; /* Allow scrolling when content overflows */
    position: relative; /* Necessary for the pseudo-element to work correctly */
}

#character-list::after, #saved-chats::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px; /* Smaller height to avoid covering too much content */
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
    pointer-events: none; /* Allows interactions to pass through */
    display: none; /* Initially hidden */
}

#character-list.scrollable::after, #saved-chats.scrollable::after {
    display: block; /* Show shadow only when there's overflow */
}

#character-list::-webkit-scrollbar, #saved-chats::-webkit-scrollbar {
    width: 0; /* Hide scrollbar */
}

#character-list, #saved-chats {
    margin-bottom: 20px;
}

#character-list, #saved-chats {
    border-bottom: 1px solid #3B3C41;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

/* Chat Link */
.chat-link {
    background-color: #2a2b32;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
}

.chat-link img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}

.chat-link:hover {
    background-color: #383942;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.chat-link.selected {
    background-color: #555;
    color: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 20px;
}

.sidebar-footer .login-button {
    background-color: #ff3535;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    font-size: 1em;
    transition: background-color 0.3s;
    position: sticky;
}

.sidebar-footer .login-button:hover {
    background-color: #ff3535c6;
}
/* Chat Container */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #2A2B32;
    color: #D1D5DB;
    padding: 0;
    border: none;
    height: 100vh; /* Full viewport height */
    transition: margin-left 0.3s ease, width 0.3s ease;
    margin-left: 300px; /* Account for the sidebar */
    width: calc(100vw - 300px); /* Adjust width based on sidebar */
}

@media (max-width: 768px) {
    .chat-container {
        margin-left: 0;
        width: 100vw;
        /* margin-top: 30px; */
    }

    .sidebar.open + .chat-container {
        margin-left: 300px;
        width: calc(100vw - 300px);
    }
}

/* Chat Box */
.chat-box {
    flex: 1;
    padding: 40px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    border-radius: 15px;
    background-color: #2A2B32;
    /* a little shadow beneeth */
    scroll-behavior: smooth;
    /* margin-bottom: 20px; */
}

/* on dekstop, give it a little margin bottom */
@media (min-width: 769px) {
    .chat-box {
        margin-bottom: 10px;
        margin-top: 30px;
    }
}

.chat-box::-webkit-scrollbar {
    width: 8px;
}

.chat-box::-webkit-scrollbar-thumb {
    background-color: #3A3B42;
    border-radius: 5px;
}

.chat-box::-webkit-scrollbar-thumb:hover {
    background-color: #50515F;
}

/* Hey There Button */
#hey-there-button {
    padding: 10px 20px;
    background-color: transparent;
    color: white;
    border: 2px solid #555;
    cursor: pointer;
    border-radius: 30px;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    margin: 10px auto; /* Center the button horizontally */
    align-self: center;
}

#hey-there-button:hover {
    background-color: #555;
    color: #fff;
    border-color: #fff;
}

/* Input Container */
.input-container {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #2A2B32;
    border-top: 1px solid #3B3C41;
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1100;
    position: sticky; /* Stick the input to the bottom when visible */
    bottom: 0;
}

@media (max-width: 768px) {
    .input-container {
        position: fixed; /* Make input container fixed at the bottom */
        bottom: 0; /* Stick to the bottom of the screen */
        width: 100%; /* Ensure it spans the full width */
    }

    .sidebar.open + .input-container {
        margin-left: 300px;
        width: calc(100vw - 300px);
    }
}

#user-input {
    flex: 1;
    padding: 15px;
    border: none;
    outline: none;
    font-size: 1em;
    background-color: #40414F;
    color: #D1D5DB;
    border-radius: 20px;
    margin-right: 15px;
}

#send-button {
    padding: 15px 20px;
    background-color: #ff3535;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 20px;
    font-size: 1.2em;
    transition: background-color 0.3s;
    margin-right: 15px;
}

/* make sure close popup is right upper corner, and mouse is clickable */
.close-popup-sub {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.close-popup-predefined {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 1.3em;
}

#send-button:hover {
    background-color: #ff3535c6;
}
/* Container for the popup */
.character-popup {
    display: none; /* Hide the popup by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2A2B32;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1200;
    width: 400px;
    max-height: 90vh;
    overflow: hidden; /* Prevents scroll overflow */
}

/* Scrollable content inside popup */
.popup-content {
    overflow-y: auto;
    max-height: calc(90vh); /* Subtract the height of the button and padding */
    padding-right: 15px; /* For scrollbar to not overlap content */
    padding-bottom: 20px;
    box-sizing: border-box;
}

/* Fixed close button at the bottom of the popup */
.fixed-close-button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff3535;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1201; /* Keeps the button on top of all content */
    margin-top: 10px;
}

/* image map, make sure its within the popup */
.image-map {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}



.fixed-close-button:hover {
    background-color: #ff220e;
}

/* Ensures content stops scrolling above the button */
.popup-content {

    padding-bottom: 20px;
    box-sizing: border-box;
}


@media (max-width: 768px) {
    .character-popup {
        top: auto; /* Remove the fixed top position */
        bottom: 20px; /* Add some space from the bottom */
        transform: translate(-50%, 0); /* Align horizontally centered */
        max-height: 90vh; /* Ensure popup fits within the viewport height */
        width: 90%; /* Adjust width for mobile */
        max-width: 400px; /* Maximum width on mobile */
        overflow-y: auto; /* Enable scrolling if content overflows */
    }
}


.character-popup button {
    cursor: pointer;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;
    max-width: 400px; /* Prevent buttons from being too wide */
    width: 100%; /* Make buttons stretch up to their maximum width */
    padding: 20px 25px;
    margin: 10px auto;
}

.character-popup label {
    margin-bottom: 10px; /* Add margin-bottom for spacing below each label */
    margin-top: 10px;
    display: block; /* Ensure label is a block element to separate it from inputs */
}

.character-popup .popup-content {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Use gap property to add spacing between flex children */
    padding: 10px;
}

.character-popup input[type="text"],
.character-popup textarea,
.character-popup button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    width: 100%;
}  

.character-popup textarea,
.character-popup input[type="text"] {
    background-color: #3B3D45;
    color: #FFFFFF;
    outline: none;
    border: 1px solid transparent; /* Default border is transparent */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    font-family: Poppins, 'Tahoma', Geneva, Verdana, sans-serif;
}

.character-popup textarea:focus,
.character-popup input[type="text"]:focus {
    border-color: #ff3535c6; /* Blue border when the element is focused */
}

.character-popup textarea {
    padding: 10px;
    border: none;
    border-radius: 5px;
    width: 100%;
    height: 150px; /* Increased height for a larger input area */
    background-color: #3B3D45;
    color: #FFFFFF;
    outline: none;
    border: 1px solid transparent; /* Default border is transparent */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    font-family: Poppins, 'Tahoma', Geneva, Verdana, sans-serif;
}

#character-image-container img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 10px auto;
    display: block;
    /* zoom the image a bit out */
    /* transform: scale(1.1); */
}

/* Green Button */
.green-button {
    background-color: #ff3535c6;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: left;
    font-size: 1em;
    transition: background-color 0.3s;
    padding: 20px;
}

.green-button:hover {
    background-color: #ff3535c6;
}

/* Chat Messages */
.message {
    max-width: 66%;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.95em;
    line-height: 1.4;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* On mobile max width message should be 80% */
@media (max-width: 768px) {
    .message {
        max-width: 77%;
    }
}

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

/* Bot message container */
.message.bot {
    background-color: #3A3B42;
    color: #D1D5DB;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    padding-left: 80px; /* Adjust padding to leave space for the profile image */
    position: relative;
    margin-top: 10px;
    padding-top: 10px;
}

/* Bot's profile image */
.bot-profile-image {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Make sure the profile image remains rounded */
    position: absolute;
    left: 20px;
    top: 10px;
    margin-bottom: 10px;
}

/* Markdown images inside bot messages */
.message.bot img:not(.bot-profile-image) {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 10px; /* Ensure separation from the text */
    position: static; /* Override any absolute positioning */
}

/* Text container in bot message */
.message.bot div {
    margin-top: 0px; /* Remove extra margin */
    line-height: 1.5;
    padding-top: 0px; /* Remove padding that creates space above the text */
    margin-right: 10px;
}

/* Button Container */
.button-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

#delete-character-button {
    background-color: #f08080;
}

/* Character Rail */
.character-rail-container {
    padding-top: 50px;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
}

.character-rail-title {
    color: #D1D5DB;
    font-size: 1.2em;
    margin-top: 10px;
    font-family: Poppins, 'Tahoma', Geneva, Verdana, sans-serif;
    text-align: center;
}

.character-rail {
    background-color: #2a2b32;
    padding: 20px 15px;
    border-bottom: 2px solid #3B3C41;
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    justify-content: center;
}

.character-rail::-webkit-scrollbar {
    display: none;
}

.character-card {
    background-color: #1924a4;
    padding: 20px;
    border-radius: 8px;
    text-align: center !important;
    cursor: pointer;
    width: 150px;
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.character-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.character-card:hover {
    transform: scale(1.03);
    background-color: #3B3D45;
}

/* Add Button */
.add-button {
    background-color: #ff3535c6;
    max-width: 200px;
    margin: 0 auto;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s;
    display: block;
    width: 100%;
    text-align: center;
}

.add-button:hover {
    background-color: #ff3535c6;
}

/* Character Info Display */
.character-info-container {
    background-color: #3A3B42;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 80%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.character-profile-picture {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.character-name {
    font-size: 1.5em;
    color: #D1D5DB;
    margin-bottom: 10px;
}

.character-description {
    font-size: 1em;
    color: #D1D5DB;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.start-chat-placeholder {
    font-size: 1.2em;
    color: #A0A0A0;
    background-color: #2A2B32;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
}

.character-description {
    max-height: 200px;
    max-width: 500px;
    overflow-y: auto;
    margin-bottom: 25px;
    margin-top: 10px;
    line-height: 1.5;
    scrollbar-width: thin;
    text-align: center;
}

.character-description::-webkit-scrollbar {
    width: 8px;
}

.character-description::-webkit-scrollbar-thumb {
    background-color: #3A3B42;
    border-radius: 4px;
}

.character-description::-webkit-scrollbar-thumb:hover {
    background-color: #50515F;
}

#user-input, 
#character-name, 
#character-prompt, 
#character-personality, 
#character-name-edit, 
#character-personality-edit {
    font-size: 16px; /* Set to at least 16px */
}

.sidebar-footer .logout-button {
    background-color: transparent;
    color: #ff3535;
    border: 2px solid #ff3535;
    cursor: pointer;
    border-radius: 5px;
    padding: 10px 15px;
    width: 100%;
    text-align: center;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    position: sticky;
}

.sidebar-footer .logout-button:hover {
    background-color: #ff3535c6;
    color: white;
}


/* Flickering Text Placeholder */
@keyframes flickerAnimation {
    0%   { opacity: 0.1; }
    50%  { opacity: 0.5; }
    100% { opacity: 0.1; }
}

.flicker-text {
    padding-top: 10px;
    color: #ccc;
    font-style: italic;
    animation: flickerAnimation 1s infinite;
}

/* Pulsating Image Placeholder */
@keyframes pulseAnimation {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

/* italic, smaller, and almost no space on top */
.subscription-info-extra {
    font-size: 0.7em;
    /* font-style: italic; */
    margin-top: -10px;
}

.image-placeholder {
    width: 125px;
    height: 125px;
    background-color: #444;
    border-radius: 50%;
    margin: 10px auto;
    display: block;
    animation: pulseAnimation 1.5s infinite;
}

/* Voice Chat Toggle Button */
.voice-toggle-button {
    background-color: #ff3535c6;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
    z-index: 100;
    transition: background-color 0.3s;
    width: fit-content;
    /* margin-top: 10px; */
    align-self: center;
    margin-bottom: 5px;
}

.voice-toggle-button.active {
    background-color: #f80820;
    /* flicker */
    animation: flickerAnimation 1s infinite;
    
}

.voice-toggle-button:hover {
    background-color: #ff3535;
}

#recording-animation {
    display: flex;
    align-items: center;
    font-style: italic;
    color: #dc3545;
    margin-top: 10px;
    font-size: 1em;
}

.recording-dot {
    width: 10px;
    height: 10px;
    background-color: #dc3545;
    border-radius: 50%;
    margin-right: 10px;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Ensure mobile compatibility */
.voice-toggle-button.active {
    background-color: #dc3545 !important; /* Force red color for active state */
    color: white !important; /* Ensure text remains white */
}

.voice-toggle-button:hover {
    background-color: #ff3535;
}

/* Fallback for mobile browsers to force reflow */
@media (max-width: 768px) {
    .voice-toggle-button.active {
        background-color: #dc3545 !important; /* Red color when active */
    }
}



/* Style for Back Button (no hover effect) */
.back-button {
    background-color: transparent; /* Transparent background */
    color: #ff3535c6; /* Text color */
    border: none; /* No border */
    padding: 10px 20px; /* Button padding */
    cursor: pointer; /* Pointer cursor */
    border-radius: 5px; /* Rounded corners */
    font-size: 1em; /* Font size */
    display: block; /* Center button */
    margin: 0 auto; /* Center horizontally */
    text-align: center; /* Center text */
    transition: none; /* Disable transitions */
    max-width: 100px;
    position: fixed;
}

/* Centered navigation buttons for character creation */
.centered-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

/* Centering the "Create a New Character" Text */
.character-popup .popup-content h2 {
    text-align: center;  /* Center the text horizontally */
    margin-bottom: 10px;  
    /* padding: 20px; */
}

/* Minimal style for nav buttons with FontAwesome icons */
.nav-button, .outline-button {
    background-color: transparent;
    color: #D1D5DB;
    border: 1px solid #D1D5DB;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Checkbox styling */
#tools-view input[type="checkbox"],
#data-view input[type="checkbox"] {
    accent-color: #ff3535c6;
    width: 20px;
    height: 20px;
}

/* Style for file input in the Data view */
#data-view input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #D1D5DB;
    border-radius: 5px;
    background-color: #3B3D45;
    color: #FFFFFF;
    outline: none;
    cursor: pointer;
}

#data-view input[type="file"]::file-selector-button {
    background-color: #ff3535c6;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}


.character-popup .outline-button {
    background-color: transparent !important;  /* Transparent background */
    color: #ff3535c6 !important;  /* Text color */
    border: 2px solid #ff3535c6 !important;  /* Ensure the border remains the same */
    /* align center */
    display: block !important; 
    /* max-width: 100px; */
}


.nav-button-close{
    background-color: transparent !important;  /* Transparent background */
    color: #ff3535c6 !important;  /* Text color */
    border: 2px solid #ff3535c6 !important;  /* Ensure the border remains the same */
    /* align center */
    display: block !important; 
    margin: 0 auto !important;
    margin-top: 20px !important;
    max-width: 100px !important;
}

/* Adjust CSS for centering and loading indicators */
#generate-character-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Make sure the title of the character rail is above it, and in the middle */
.character-rail-title {
    text-align: center;
    margin-top: 20px;
}

/* Loading spinner */
.loading-spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #ff3535c6; /* Green */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    display: inline-block;
    margin-left: 10px;
}

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

/* Minimal Style for Back Button */
#back-button {
    background-color: transparent; /* No background */
    color: #FFFFFF; /* Text color matching the theme */
    border: none; /* Remove border */
    cursor: pointer; /* Show pointer cursor on hover */
    font-size: 1em; /* Font size for readability */
    display: inline-block; /* Inline-block to allow padding/margin control */
    padding: 5px; /* Minimal padding for click area */ 
    text-align: center; /* Center text, if block-level */
    text-decoration: none; /* Remove underline, if any */
    transition: color 0.3s; /* Smooth color transition */
    margin-bottom: 10px;
    max-width: 100px;
    position: fixed;
    /* margin-top: 30px !important; */
    margin-left: 70px;
    margin-top: 40px;
}

#back-button:hover {
    color: #ff3535c6; /* Change text color on hover for feedback */
    text-decoration: underline; /* Optionally underline on hover */
}

@media (max-width: 768px) {
    .character-rail-container {
        display: block; /* Ensure it's visible on mobile by default */
    }

    .chat-container.chat-active .character-rail-container {
        display: none; /* Hide when chat is active */
    }
}



/* Character Rail Container */
.character-rail-container {
    text-align: center;
    position: relative;
    overflow: hidden; /* Prevent content overflow */
    z-index: 10;
    margin-bottom: 10px;
    flex-shrink: 0;
    justify-content: center;
    padding: 10px;
    margin-top: 10px;
}

/* Character Rail */
.character-rail {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    justify-content: flex-start; /* Align items to the start of the rail */
    position: relative;
    padding: 10px 0; /* Padding inside the rail for spacing */
    border-bottom: none; /* Remove bottom line */
    padding-bottom: 20px;
    padding-top: 20px;
}

.character-rail::-webkit-scrollbar {
    display: none; /* Hide scrollbar for cleaner look */
}

/* Enhanced Shadow Effect on Right Side */
.character-rail-container::after {
    content: '';
    position: absolute; /* Absolute positioning relative to the rail container */
    top: 0;
    right: 0;
    height: 100%;
    width: 40px; /* Slightly wider for a softer effect */
    background: linear-gradient(to right, rgba(42, 43, 50, 0.1), rgba(42, 43, 50, 0.9)); /* Softer gradient */
    pointer-events: none;
    z-index: 2; /* Ensure the shadow is above the content */
    display: block; /* Ensure the shadow is always displayed */
    opacity: 0.8; /* Slight opacity for a softer shadow */
}

.character-card {
    background-color: #2f313b;
    padding: 30px;
    border-radius: 8px;
    text-align: center; /* Center text */
    cursor: pointer;
    width: 150px;
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: flex; /* Add Flexbox for centering */
    flex-direction: column; /* Column layout for items */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    position: relative; /* For positioning the category label */
}

/* Category Label Styling */
.character-card .category-label {
    position: absolute;
    bottom: -10px; /* Place lower within the card */
    left: 50%;
    transform: translateX(-50%); /* Center the label horizontally */
    color: white;
    padding: 3px 8px;
    font-size: 0.8em;
    border-radius: 5px;
    /* font-weight: bold; */
    background-color: rgba(16, 163, 127, 0.5); /* Lighter shade of green */
    opacity: 0.8; /* Make the color slightly less intense */
    border-bottom: none; /* Remove any border */
}

/* Character Grid Containers */
.character-grid-container {
    padding: 10px; /* Add some padding around the grid */
    z-index: 5; /* Lower z-index than character rail to prevent overlap */
    position: relative; /* Relative positioning to avoid overlap */
    margin-top: 10px; /* Ensure space above grid */
    margin-bottom: 10px; /* Space below the grid */
    flex-shrink: 0; /* Prevent shrinking */
    justify-content: center;
}

/* Grid Setup */
.character-grid {
    display: grid;
    gap: 20px;
    margin: 0; /* Reset margin to avoid additional space */
    justify-content: center; /* Center grid items */
}









/* Container for the "For You" Section */
.for-you-container {
    display: flex; /* Flexbox for horizontal alignment on desktop */
    align-items: flex-start; /* Align items at the start */
    justify-content: center; /* Center content horizontally */
    gap: 20px; /* Gap between the image and the grid */
    padding: 20px; /* Padding around the container */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    position: relative; /* Allows absolute positioning for the image */
    width: 100%;
    max-width: 1200px; /* Limit max width for centering */
    margin: 0 auto; /* Center the container */
}

/* Image in the "For You" Section */
.for-you-image {
    width: calc(100px * 2 + 20px); /* Width to match the grid width */
    height: calc(100px * 2 + 20px); /* Height to match the grid height */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    object-fit: cover; /* Cover the entire space nicely */
    cursor: pointer;
    display: block; /* Ensure the image is a block element for centering */
    margin: 0 auto; /* Center the image */
    transition: transform 0.3s ease, margin-top 0.3s ease; /* Smooth transitions */
    margin-top: 10px;
}

.for-you-image:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* For You Grid - Adjust to 2x2 or 4x1 based on screen width */
#for-you-grid-items {
    display: grid;
    grid-template-columns: repeat(2, 200px); /* Two columns initially */
    grid-template-rows: repeat(2, 200px); /* Two rows initially */
    gap: 20px;
    justify-items: center;
    margin-top: 70px; /* Aligns with image height */
}

/* Adjust title position */
.character-grid-title {
    margin-bottom: 20px; /* Space below the title */
}

/* Mobile View: Image Above Grid */
@media (max-width: 768px) {
    .for-you-container {
        flex-direction: column; /* Stack image above grid */
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center content horizontally */
    }

    .for-you-image {
        width: 80%; /* Smaller width for mobile */
        max-width: 350px; /* Limit max width */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 20px; /* Space below image */
        margin-top: 0; /* Reset margin-top for mobile */
        cursor: pointer;
    }

    .for-you-image:hover {
        transform: scale(1.01);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #for-you-grid-items {
        grid-template-columns: repeat(2, 1fr); /* Two columns on mobile */
        grid-template-rows: repeat(2, auto); /* Two rows to match */
        gap: 20px; /* Normal gap */
        width: 100%; /* Full width */
        max-width: 300px; /* Limit max width */
        margin: 0 auto; /* Center grid on the page */
        justify-items: center; /* Center items within their columns */
    }

    #try-these-grid-items {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        grid-template-rows: repeat(3, auto); /* Three rows */
        gap: 20px; /* Normal gap */
        width: 100%; /* Full width */
        max-width: 300px; /* Limit max width for better fit */
        justify-items: center; /* Center items within their columns */
        margin: 0 auto; /* Center grid on the page */
    }

    .grid-item {
        padding: 20px; /* Adjust padding for smaller cards */
    }
}

/* Between Mobile and Desktop (769px to 1099px) */
@media (min-width: 769px) and (max-width: 1099px) {
    .for-you-container {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center content */
    }

    .for-you-image {
        width: 90%; /* Slightly larger than mobile */
        max-width: 350px; /* Cap at a larger size than mobile */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 20px; /* Space below image */
        margin-top: 0; /* No margin top adjustment */
        cursor: pointer;
    }

    .for-you-image:hover {
        transform: scale(1.01);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #for-you-grid-items {
        grid-template-columns: repeat(2, 1fr); /* Keep two columns */
        grid-template-rows: repeat(2, auto); /* Auto height rows */
        width: 100%; /* Full width */
        max-width: 400px; /* A bit wider for medium screens */
        gap: 20px; /* Normal gap */
        margin-top: 0; /* Reset margin-top */
    }
}

/* 1100px to 1250px: Single Row of 4 */
@media (min-width: 1100px) and (max-width: 1250px) {
    .for-you-container {
        flex-direction: column; /* Stack image above grid */
        align-items: center; /* Center content */
        justify-content: center;
    }

    .for-you-image {
        width: 85%; /* Larger image */
        max-width: 350px; /* Larger size than mobile */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 20px; /* Space below image */
        margin-top: 0; /* Reset margin */
        cursor: pointer;
    }

    .for-you-image:hover {
        transform: scale(1.01);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #for-you-grid-items {
        grid-template-columns: repeat(4, 1fr); /* Single row of four */
        grid-template-rows: none; /* Remove row definition */
        width: 100%; /* Full width */
        max-width: 800px; /* Adjust max width */
        gap: 20px; /* Normal gap */
        margin-top: 0; /* Reset margin-top */
    }
}

.for-you-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally in a flex container */
    justify-content: center; /* Centers content vertically in a flex container */
    text-align: center; /* Ensures text is centered */
    margin-bottom: 20px; /* Adds space between repeated blocks */
}





/* Above 1250px: Image Next to Grid */
@media (min-width: 1251px) {
    .for-you-container {
        display: flex;
        flex-direction: row; /* Align images side by side */
        padding: 20px;
        max-width: 800px; /* Restrict maximum width */
        margin: 0 auto; /* Center the container */
    }
    
    .for-you-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 48%; /* Take up roughly half of the container width */
    }

    .for-you-image-1 {
        width: calc(200px * 2 + 20px); /* Width to match two grid items */
        height: calc(200px * 2 + 20px); /* Height to match two grid items */
        margin-top: 20px; /* Slight upward adjustment */
        margin: 0 auto; /* Center the image */
        cursor: pointer !important;
    }

    .for-you-image-1:hover {
        transform: scale(1.01);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .for-you-image-2 {
        width: calc(100px * 2 + 20px); /* Width to match two grid items */
        height: calc(100px * 2 + 20px); /* Height to match two grid items */
        margin-top: 20px; /* Slight upward adjustment */
        margin: 0 auto; /* Center the image */
        cursor: pointer !important;
    }

    .for-you-image-2:hover {
        transform: scale(1.01);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #for-you-grid-items {
        grid-template-columns: repeat(4, 1fr); /* Single row of four */
        grid-template-rows: none; /* Remove row definition */
        width: 100%; /* Full width */
        max-width: 800px; /* Adjust max width */
        gap: 20px; /* Normal gap */
        margin-top: 0; /* Reset margin-top */
    }
}




/* Uploaded Images Container */
.scrollable-content {
    max-height: 200px; /* Restrict image/file list height */
    overflow-y: auto; /* Enable scrolling if content exceeds height */
    margin-bottom: 20px; /* Space before the close button */
}

/* Sticky Close Button */
.fixed-close-button {
    position: sticky; /* Sticky to remain at bottom of the container */
    bottom: 0;
    background-color: #ff3535;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
}

.fixed-close-button:hover {
    background-color: #ff220e;
}



/* Ensure margin between uploaded files and input field */
#image-map, #text-uploaded-files-list {
    margin-bottom: 20px;
}



.image-map {
    margin-bottom: 20px;
}

.text-uploaded-files-list {
    margin-bottom: 20px;
}

/* Try These Grid - Always 3x3 */
#try-these-grid-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns */
    grid-template-rows: repeat(3, auto); /* Three rows */
    gap: 50px; /* Increased gap between items */
    justify-content: center;
    align-items: center;
    margin-left: 50px;
    margin-right: 50px;
}

/* Try These Grid Items - Bigger */
.grid-item {
    background-color: #2f313b;
    padding: 30px;
    border-radius: 8px;
    text-align: center; /* Center text */
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: flex; /* Add Flexbox for centering */
    flex-direction: column; /* Column layout for items */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
}

.grid-item img {
    width: 100px; /* Larger image size */
    height: 100px; /* Larger image size */
    border-radius: 50%;
    margin-bottom: 10px;
}

.grid-item:hover {
    transform: scale(1.03);
    background-color: #3B3D45;
}

/* Prevent Grid from Moving Upwards */
.character-grid-container {
    margin-top: 10px; /* Ensure consistent spacing */
    position: relative; /* Ensure the grid remains in place */
    justify-content: center;
}

/* Chat Active State Adjustments */
.chat-container.chat-active .character-rail-container,
.chat-container.chat-active .character-grid-container {
    display: none; /* Hide both rail and grids when chat is active */
}

@media (min-width: 769px) {
    .chat-container.chat-active .character-rail-container {
        display: flex; /* Ensure character rail remains visible on desktop */
    }
    .chat-container.chat-active .character-grid-container {
        display: none; /* Hide only the grids on desktop when chat is active */
    }
}

/* Mobile View: Adjust "For You" and "Try These" Grid */
@media (max-width: 768px) {
    .for-you-container {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center content horizontally */
    }

    .for-you-image {
        width: 90%; /* Smaller width for mobile */
        max-width: 200px; /* Limit max width */
        height: auto; /* Maintain aspect ratio */
        margin-top: 0; /* Reset margin-top for mobile */
        cursor: pointer;
    }

    .for-you-image:hover {
        transform: scale(1.01);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Adjust "Try These" Grid for Mobile */
    #try-these-grid-items {
        display: grid; /* Ensure display is grid */
        grid-template-columns: repeat(2, 1fr); /* Two columns on mobile */
        grid-template-rows: auto; /* Rows adjust automatically */
        gap: 20px; /* Normal gap */
        width: 100%; /* Full width */
        max-width: 400px; /* Increase max width to better fit mobile */
        justify-items: center; /* Center items within their columns */
        margin: 0 auto; /* Center grid on the page */
    }

    /* Make the cards of the 3x3 grid somewhat smaller */
    .grid-item {
        padding: 20px; /* Adjust padding for smaller grid */
        width: 100%; /* Ensure grid items take full width within their columns */
        max-width: 150px; /* Limit the width of each grid item */
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Ensure Mobile Compatibility */
@media (max-width: 768px) {
    /* .chat-container {
        height: auto; /* Allow auto height on mobile */
    /* }  */

    .character-rail-container,
    .character-grid-container {
        margin-top: 10px; /* Provide consistent margin */
    }

    .chat-container.chat-active .character-rail-container {
        display: none; /* Hide character rail on mobile when chat is active */
    }
}



/* Apply similar styling to grid titles */
.character-grid-title {
    color: #D1D5DB;
    font-size: 1.2em;
    font-family: Poppins, 'Tahoma', Geneva, Verdana, sans-serif;
    text-align: center;
}

/* Example of grid titles container to ensure spacing */
.character-grid-container .grid-title {
    color: #D1D5DB;
    font-size: 1.2em;
    margin-top: 10px;
    font-family: Poppins, 'Tahoma', Geneva, Verdana, sans-serif;
    text-align: center;
}

/* Sidebar Buttons */
.new-character-button-bottom {
    background-color: transparent;
    color: #ff3535 !important;
    border: 1px solid #ff3535 !important;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: left;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 10px; 
}

.new-character-button-bottom:hover {
    background-color: #ff3535 !important;
    color: white !important;
    /* text colour white */

}

/* Make sure the button is not so wide, and place somewhat to the lower, text is aligned centered */
.new-character-button-bottom {
    max-width: 200px;
    margin: 0 auto;
    margin-top: 40px;
    text-align: center;
}
/* New Chat Popup Styles */
#character-selection-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2A2B32;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1201;
    width: 400px;
    max-height: 80vh; /* Ensure the popup doesn't exceed the viewport height */
    overflow-y: auto; /* Enable scrolling if content exceeds popup size */
}

/* Mobile adjustments for New Chat Popup */
@media (max-width: 768px) {
    #character-selection-popup {
        bottom: 20px;
        top: auto;
        transform: translate(-50%, 0);
        max-height: 80vh; /* Smaller height to accommodate close button */
        width: 90%;
        max-width: 350px;
        overflow-y: auto;
        padding-bottom: 60px; /* Padding to account for the close button */
    }
}

/* Style the chat list inside New Chat Popup */
#character-selection-list {
    max-height: calc(70vh - 80px); /* Reduced height for smaller scrollable area */
    overflow-y: auto; /* Enable vertical scrolling */
    margin-top: 10px;
    margin-bottom: 30px;
    padding-right: 10px; /* Add padding to avoid clipping */
}

/* Custom scrollbar styling for better UI */
#character-selection-list::-webkit-scrollbar {
    width: 8px;
}

#character-selection-list::-webkit-scrollbar-thumb {
    background-color: #3A3B42;
    border-radius: 4px;
}

#character-selection-list::-webkit-scrollbar-thumb:hover {
    background-color: #50515F;
}

/* Close button styling */
#close-selection-popup-button {
    position: fixed;
    bottom: 10px; /* Position it 10px from the bottom */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff3535c6; /* Orange fill */
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1em;
    width: 200px; /* Set a specific width */
    padding: 10px;
    border-radius: 5px;
    z-index: 1300; /* Ensure the button is above other elements */
    text-align: center;
}

/* No hover effect for close button */
#close-selection-popup-button:hover {
    background-color: #ff3535c6; /* Keep the same orange fill on hover */
    color: white;
}

/* General Popup Button Adjustments */
.character-popup button, 
#predefined-character-popup button, 
#character-selection-popup button {
    cursor: pointer;
    text-align: center;
    margin-bottom: 7px;
    margin-top: 15px;
    max-width: 250px; /* Make buttons narrower */
    width: 100%; /* Stretch buttons to full width within max width */
    padding: 10px 15px; /* Reduce padding for smaller button size */
    font-size: 0.9em; /* Reduce font size for a more compact look */
    margin: 10px auto;
}



/* General Popup Button Adjustments */
.character-popup button, 
#predefined-character-popup button, 
#character-selection-popup button {
    cursor: pointer;
    text-align: center;
    margin-bottom: 7px;
    margin-top: 15px;
    max-width: 250px; /* Make buttons narrower */
    width: 100%; /* Stretch buttons to full width within max width */
    padding: 10px 15px; /* Reduce padding for smaller button size */
    font-size: 0.9em; /* Reduce font size for a more compact look */
    margin: 10px auto;
}

/* Predefined Character Popup Styles */
#predefined-character-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2A2B32;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1201;
    width: 400px;
    max-height: 90vh;
    overflow-y: auto; /* Allows scrolling for content if it exceeds popup size */
    padding-top: 40px; /* Ensure padding to make room for sticky elements */
}

/* Mobile adjustments for Predefined Character Popup */
@media (max-width: 768px) {
    #predefined-character-popup {
        bottom: 15px;
        top: auto;
        transform: translate(-50%, 0);
        max-height: 90vh;
        width: 90%;
        max-width: 400px;
        overflow-y: auto;
        padding-top: 10px; /* Ensure padding on mobile as well */
    }
}

/* Centering content inside the popup */
#predefined-character-info {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the items horizontally */
    justify-content: center; /* Center the items vertically */
    gap: 15px; /* Space between elements */
    text-align: center; /* Center text content */
}

/* Ensure the image is centered */
#predefined-character-info img {
    display: block; /* Make sure the image is a block element */
    margin: 0 auto; /* Center the image horizontally */
    width: 150px; /* Set a specific width for consistency */
    height: 150px; /* Set a specific height for consistency */
    border-radius: 50%; /* Make the image circular */
    margin-bottom: 10px; /* Add margin below the image */
}


.character-popup label,
#predefined-character-popup label {
    margin-bottom: 10px;
    margin-top: 10px;
    display: block;
}

.character-popup .popup-content, 
#predefined-character-popup .popup-content {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Use gap property to add spacing between flex children */
    padding: 10px;
    bottom: 50px;
}

.character-popup input[type="text"], 
.character-popup textarea, 
.character-popup button {
    padding: 8px; /* Reduce padding for inputs */
    border: none;
    border-radius: 5px;
    width: 100%;
}

.character-popup textarea, 
.character-popup input[type="text"] {
    background-color: #3B3D45;
    color: #FFFFFF;
    outline: none;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
    font-family: Poppins, 'Tahoma', Geneva, Verdana, sans-serif;
}

.character-popup textarea:focus, 
.character-popup input[type="text"]:focus {
    border-color: #ff3535c6;
}

/* Adjust Button and Container Styles for Mobile */
@media (max-width: 768px) {
    .character-popup, 
    #predefined-character-popup, 
    #character-selection-popup {
        bottom: 10px;
        top: auto;
        transform: translate(-50%, 0);
        max-height: 90vh;
        width: 90%;
        max-width: 400px;
        overflow-y: auto;
    }
}


/* Fancy Text Styling Above the Image */
.fancy-text1, .fancy-text2 {
    font-family: Poppins, 'Tahoma', Geneva, Verdana, sans-serif; /* Font family for consistency */
    font-size: 1.2em; /* Larger font size */
    color: #D1D5DB; /* Green color to match the theme */
    text-align: center; /* Center the text */
    margin-top: 20px;
    margin-bottom: 20px; /* Space below the text */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* Subtle shadow for a 3D effect */
}

.character-card {
    display: flex; /* Enables Flexbox */
    flex-direction: column; /* Arranges child elements in a column */
    align-items: center; /* Centers child elements horizontally */
    text-align: center; /* Centers text */
    width: 150px; /* Maintains consistent card width */
    padding-bottom: 30px; /* Provides padding within the card */
    padding-top: 30px;
    margin-top: 10px;
    margin: 0 auto; /* Centers the card itself within its parent container if necessary */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

.message.bot div {
    margin-top: 10px;
    line-height: 1.6;
    white-space: pre-line; /* Preserve white spaces and line breaks */
    font-size: 0.95em; /* Adjust font size for readability */
    padding-top: 50px;
}

.message.bot {
    background-color: #3A3B42;
    color: #D1D5DB;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    margin-top: 10px;
    border-radius: 10px;
    max-width: 70%;
    animation: fadeIn 0.5s ease; /* Add animation */
}

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


@media (max-width: 768px) {
    .chat-active .chat-container {
        position: relative; /* Ensures positioning is relative to fixed elements */
        margin-left: 0;
        top: 50px; /* Space from the top */
        bottom: 110px !important;
        width: 100vw; /* Full viewport width */
        height: calc(100vh - 110px) !important; /* Adjust the viewport height minus fixed elements */
        overflow-y: hidden !important; /* Prevent scrolling on the container itself */
        padding-top: 50px !important; /* Space from the top if necessary */
        padding-bottom: 60px !important;
        margin-top: 100px;
        margin-bottom: 100px;
    }

    .chat-active .chat-box {
        position: absolute; /* Absolute position within the relative container */
        top: 50px; /* Start from the top edge of the container */
        bottom: 110px !important; /* Space from the bottom to account for fixed elements */
        left: 0; /* Align to the left edge */
        right: 0; /* Align to the right edge */
        overflow-y: auto; /* Allow only this box to scroll */
        padding-top: 50px !important;
        padding-bottom: 60px !important;
        margin-top: 100px;
        margin-bottom: 100px;
    }

    .input-container {
        position: fixed; /* Keep at the bottom of the viewport */
        bottom: 0; /* Align at the bottom edge */
        left: 0; /* Align to the left edge */
        right: 0; /* Align to the right edge */
        height: 60px; /* Fixed height for the input container */
        width: 100%; /* Span the entire width of the viewport */
        z-index: 1002; /* High z-index to stay on top */
    }

    .voice-toggle-button {
        position: fixed; /* Stay fixed relative to the viewport */
        bottom: 60px; /* Positioned 60px above the bottom */
        left: 0; /* Align to the left */
        right: 0; /* Align to the right */
        height: 50px; /* Fixed height */
        max-width: 150px; /* Limit the maximum width */
        margin: 0 auto; /* Center horizontally */
        z-index: 1001; /* Above other content but below the input */
        display: flex; /* Flexbox to center content */
        justify-content: center; /* Center content horizontally */
    }

    /* make hey there button not visible */
    .hey-there-button {
        display: none;
    }
    #hey-there-button {
        display: none;
    }
}



.play-audio-button {
    background-color: #ff3535c6;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 10px;
    display: block;
}







/* Styles for the scrollable container in data upload section */
#uploaded-files-container > div {
    height: 225px; /* Limit the maximum height to 225px */
    overflow-y: auto;  /* Enable vertical scrolling */
    border: 1px dashed #ff3535c6 !important;/* Blue dashed border to match upload input */
    padding: 10px; /* Padding inside the scrollable area */
    border-radius: 5px; /* Optional: Rounded corners for better aesthetics */
    background-color: #2A2B32; /* Ensure a white background for the container */
}

/* Styles for the file input with blue outline and dashed border */
#data-upload {
    outline: none; /* Remove default outline */
    border: 1px dashed #ff3535c6 !important; /* Blue border */
    padding: 10px; /* Padding for the input field */
    width: 100%; /* Full width input */
    margin-bottom: 10px; /* Space below input field */
}

/* Uploaded files list styles */
#uploaded-files-list {
    list-style: none; /* No bullet points */
    padding: 0; /* No padding */
    margin: 0; /* No margin */
}

/* Styles for each file item in the list */
#uploaded-files-list li {
    margin-bottom: 10px; /* Add some space below each file item */
    display: flex; /* Flexbox for horizontal alignment */
    align-items: flex-start; /* Align items to the start */
    flex-direction: column; /* Stack file name and button vertically */
}

/* Remove button styles */
#uploaded-files-list button {
    background-color: transparent; /* Transparent background */
    border: none; /* No border */
    color: #f08080; /* Soft red text color */
    cursor: pointer; /* Pointer cursor */
    margin-top: 5px; /* Space above the button */
    align-self: flex-start; /* Align the button to the left below the file name */
}



/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
  
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  /* Tooltip arrow */
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }



  .logo-image{
    height: 55px;
    width: auto;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
    margin-top: 20px;
    /* place it to the left a little bit */
    margin-left: 40px;
  }



#stop-audio-button {
    display: none; /* Initially hidden */
    position: relative; /* Adjust positioning if necessary */
    padding: 10px;
    background-color: #ff3535c6; /* Ensure a visible color */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: 1000; /* Ensure it is above other elements */
}




.stop-audio-button {
    background-color: #ff3535ee !important;
    color: white;
    border: none;
    border-radius: 20px !important;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
    z-index: 100;
    transition: background-color 0.3s;
    width: fit-content;
    margin-top: 10px;
    align-self: center;
    margin-top: 30px;
}


/* Hover effect for the stop button to match voice toggle button */
.stop-audio-button:hover {
    background-color: #ff3535bb; /* Slightly darker shade on hover */
}



/* Voice Menu Button Styling */
#voice-dropdown-button {
    background-color: #333; /* Match dropdown background */
    color: #ff3535d2; /* Orange text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 15px; /* Padding for button */
    cursor: pointer; /* Pointer cursor on hover */
    position: fixed; /* Position for alignment */
    right: 20px; /* Align to the right */
    top: 20px; /* Align to the top */
    z-index: 1000; /* Ensure it's above other elements */
    margin-top: 20px;
}

/* Dropdown Menu Styling */
.voice-dropdown-menu {
    display: none; /* Hidden by default */
    position: fixed;
    background-color: #333; /* Dark background for contrast */
    color: white; /* White text color */
    border-radius: 5px;
    padding: 10px;
    z-index: 1000; /* Ensure it is above other elements */
    width: 150px; /* Adjust width as needed */
    right: 20px; /* Align to the right */
    top: 30px; /* Adjust position relative to the button */
    margin-top: 40px;
}

/* Dropdown Option Styling */
.voice-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    cursor: pointer;
}

.play-icon {
    margin-left: 10px; /* Spacing between text and play icon */
}

/* Ensure consistent text and button alignment within the container */
.voice-selection-container {
    position: relative; /* Position relative to contain the dropdown */
}



/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px; /* Increased width for better readability */
    background-color: #555; /* Background color for the tooltip */
    color: #fff; /* Text color for the tooltip */
    text-align: left; /* Align text to the left for consistency */
    padding: 8px; /* Padding inside the tooltip */
    border-radius: 6px; /* Rounded corners */
    position: absolute; /* Position relative to the tooltip */
    z-index: 1; /* Ensure it appears above other content */
    bottom: 100%; /* Position above the element */
    left: 100%; /* Align tooltip to the right */
    margin-left: -20px; /* Slight adjustment to center */
    opacity: 0; /* Initially invisible */
    transition: opacity 0.3s; /* Smooth fade-in effect */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    font-weight: normal; /* Ensure text is not bold */
    font-size: 0.9em; /* Font size slightly smaller */
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%; /* Position the arrow */
    right: 100%; /* Align with tooltip */
    margin-top: -5px; /* Center the arrow vertically */
    border-width: 5px; /* Arrow size */
    border-style: solid;
    border-color: transparent #555 transparent transparent; /* Arrow color */
}

/* Show the tooltip text when hovering over the container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1; /* Make it fully visible */
}





/* Base styling for all model popups */
.model-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2A2B32;
    border-radius: 8px;
    padding: 20px; /* Adjusted padding for internal spacing */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto; /* Allows scrolling within the popup */
}

/* Content area within the popups */
.model-popup-content {
    padding-right: 15px; /* Space for scrollbar */
    padding-bottom: 70px; /* Space at the bottom to avoid overlap with the close button */
    max-height: calc(90vh - 40px); /* Slightly reduce height to fit close button outside content area */
    overflow-y: auto; /* Ensure scrolling is possible within content */
}

/* Close buttons at the bottom of the popups */
.model-popup-close-button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    background-color: #ff3535;
    width: auto;
    z-index: 1050; /* Ensures it's above the content */
    /* hide */
    /* display: none; */
}

.model-popup-close-button:hover {
    background-color: #e63e00;
}


.logo-image {
    max-width: 66%; /* Ensures the image never exceeds the sidebar width */
    height: auto;    /* Maintains aspect ratio */
    display: block;  /* Removes any inline space */
    margin: 0 auto;  /* Centers the logo */
    margin-bottom: 20px;
    margin-top: 20px;
    /* center it in the sidebar */
    justify-content: center;
    align-items: center;
    display: flex;
}


#toggle-sidebar {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 3000; /* Ensure it's above other elements */
    font-size: 24px;
    cursor: pointer;
    background-color: #ff3535c6;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
}


#popup-content-pricinglink {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 5px;
    color: white; /* text color */
    font-size: 0.8em;
    /* remove the underline */
    text-decoration: none;
}


#image-popup-logo {
    max-width: 66%;  /* Adjust this to your desired size */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Removes any inline space */
    margin: 0 auto;  /* Centers the logo */
    margin-bottom: 20px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    display: flex;
}

#login-overlay .overlay-content {
    max-width: 400px; /* Limit the width of the popup */
    margin: 0 auto; /* Center the popup */
    padding: 20px; /* Add padding */
}




.buy-credits {
    background-color: #ff3535 !important;
    color: white !important;
    border: 1px solid #ff3535 !important;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 20px;
}

/* Sidebar Buttons */
.subscribe-essential {
    background-color: #ff3535 !important;
    color: white !important;
    border: 1px solid #ff3535 !important;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 10px;
}

/* Sidebar Buttons */
.subscribe-expert {
    background-color: #ff3535 !important;
    color: white !important;
    border: 1px solid #ff3535 !important;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 10px;
}
/* on hover */

.subscribe-essential:hover {
    background-color: #ff3535 !important;
    color: white !important;
    /* text colour white */

}

.subscribe-expert:hover {
    background-color: #ff3535 !important;
    color: white !important;
    /* text colour white */

}

.title {
    font-family: 'Confortaa', sans-serif !important; /* Use the same font as the rest of the sidebar */
               /* Center horizontally */
}

/* i have a X cross close button, itds now left upper corner, it should be right upper corner instead */
.close-popup-sub {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
    color: white;
    font-size: 24px;
}

.buy-credits:hover {
    background-color: #ff3535 !important;
    color: white !important;
    /* text colour white */

}

.space {
    margin-bottom: 10px;
}


.cancel-subscription {
    background-color: transparent !important;
    color: white !important;
    border: none;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 5px;
}


.credits-info {
    font-family: 'Poppins', sans-serif; /* Use the same font as the rest of the sidebar */
    font-size: 12px;                    /* Slightly smaller font size */
    font-weight: 600;                   /* Bold font for emphasis */
    color: #ffffff;                     /* White text color */
    background-color: #6b6a6ab4;          /* Subtle gray background to stand out */
    padding: 15px 20px;                 /* Add padding for spacing */
    /* margin-top: 10px;                   Space it nicely under the logo */
    margin-bottom: 12px;
    border-radius: 10px;                /* Rounded corners */
    text-align: center;                 /* Center the text */
    width: 80%;                         /* Make it fit nicely in the sidebar */
    margin-left: auto;                  /* Center horizontally */
    margin-right: auto;                 /* Center horizontally */
}




.bot-profile-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    margin-bottom: 20px;
}



.popup-content {
    text-align: center; /* Center all text inside */
}

.subscription-info {
    margin-bottom: 5px;  /* Add some space below the text */
    margin-top: 20px;    /* Add space above the text */
    font-size: 16px;     /* Adjust font size for readability */
    color: #D1D5DB;      /* Use your preferred text color */
}

.subscribe-essential,
.subscribe-expert,
.buy-credits {
    margin-top: 10px;    /* Ensure space above the buttons */
    margin-bottom: 20px; /* Ensure space below the buttons */
    padding: 10px 15px;
    width: 100%;         /* Ensure buttons are full-width */
    max-width: 300px;    /* Limit the maximum width of the buttons */
}

#popup-content-pricinglink {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #ff3535c6;
    /* remove underline */
    text-decoration: none;
    font-size: 1.2!important;
}