/* CSS Variables for Theming (Kept from Your Original) */
:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #363636;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --accent-primary: #7289da;
    --accent-secondary: #5869a7;
    --danger: #dc3545;
    --success: #28a745;
    --border-radius: 8px;
}

/* General Styles */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

/* Style for the header */
.header {
    display: flex;
    justify-content: space-between; /* Space between the title and the button */
    align-items: center; /* Vertically center the content */
    padding: 10px;
    border-bottom: 1px solid #ccc; /* Optional: Add a bottom border for separation */
}

.header h1 {
    font-size: 2.5rem;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}



/* Style for the logout button */
#logout-button {
    background-color: #f44336; /* Red background for the button */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

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

/* Signup, Login, and API Key Sections */
#auth-section, #api-key-section, #subscription-section {
    margin-bottom: 20px;
    padding: 10px;
    background-color: var(--bg-tertiary);
    border-radius: var(--border-radius);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Alert Messages */
.alert {
    padding: 10px;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
}

.alert.success {
    background-color: var(--success);
    color: #e6ffe6;
}

.alert.error {
    background-color: var(--danger);
    color: #ffe6e6;
}

/* Input and Button Styles */
input, textarea, select {
    width: 100%;
    padding: 12px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

button {
    padding: 12px 24px;
    background-color: var(--accent-primary);
    color: var(--text-primary);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    background-color: var(--accent-secondary);
    transform: translateY(-1px);
}

button.danger {
    background-color: var(--danger);
}

/* Delete NPC Button */
button.danger {
    background-color: #f44336; /* Red background */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

button.danger:hover {
    background-color: #d32f2f; /* Darker red on hover */
}

/* Stripe Subscription Button */
button.subscribe {
    background-color: var(--success);
    color: var(--text-primary);
    border: none;
    border-radius: var(--border-radius);
    padding: 10px;
    transition: background-color 0.3s ease;
}

button.subscribe:hover {
    background-color: #21867a;
}

/* Chat Interface Styles (Kept from Your Original) */
.chat-container {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px; /* Ensure consistent padding */
    background-color: var(--bg-secondary); /* Match the theme */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 10px; /* Add consistent spacing */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Add spacing between elements */
    height: auto; /* Ensure it adjusts to content */
}

.chat-container label {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--text-primary);
}

.chat-container input,
.chat-container textarea {
    width: 100%;
    padding: 12px; /* Match Create New AI Character */
    margin-top: 5px;
    margin-bottom: 10px;
    
    border: 1px solid var(--bg-tertiary); /* Match Create New AI Character */
    border-radius: var(--border-radius); /* Match Create New AI Character */
    background-color: var(--bg-tertiary); /* Match Create New AI Character */
    color: var(--text-primary); /* Match Create New AI Character */
    resize: none;
    box-sizing: border-box;
}


.chat-history {
    margin-top: 2rem;
    background-color: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    max-height: 500px;
    overflow-y: auto;
}

.chat-entry {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.user-message {
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.npc-message {
    color: var(--success);
    margin-bottom: 0.5rem;
}

.timestamp {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-secondary);
    border-radius: 4px;
}

/* Layout for the dashboard content */
.content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

/* Main content area */
#main-content {
    flex: 3;
}

/* API Key Panel */
.api-key-panel {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: var(--bg-secondary); /* Match the theme */
    box-shadow: 0 4px 6px rgba(90, 88, 88, 0.1);
    max-width: 300px;
    max-height: 200px; /* Limit the height */
    overflow-y: auto; /* Add vertical scrolling if content exceeds height */
    text-align: center;
}

.api-key-panel h2 {
    margin-bottom: 10px;
    font-size: 18px;
    color: #bfbfbf;
}

.api-key-panel pre {
    background-color: var(--bg-tertiary);
    padding: 10px;
    border-radius: 5px;
    font-size: 10px;
    color: var(--text-primary);
    overflow-x: auto;
}

/* Container for API Key and Character List Panels */
.api-key-and-character-panel {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack panels vertically */
    gap: 20px; /* Add spacing between panels */
    max-width: 300px;
}

/* Character List Panel */
.character-list-panel {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 300px; /* Limit height */
    overflow-y: auto; /* Add scrolling if content exceeds height */
    text-align: center;
}

.character-list-panel h2 {
    margin-bottom: 10px;
    font-size: 14px;
    color: #bfbfbf;
}

.character-list-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.character-list-panel ul li {
    padding: 10px;
    margin: 5px 0;
    background-color: #8fbad9;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.character-list-panel ul li:hover {
    background-color: #d6d6d6;
}

/* Container for Create and Upload Panels */
.create-and-upload-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Create AI Character Panel */
.create-npc-panel {
    flex: 1; /* Match the size of the AI Persona panel */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px; /* Ensure consistent padding */
    background-color: var(--bg-secondary); /* Match the theme */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 10px; /* Add consistent spacing */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Add spacing between elements */
    height: auto; /* Ensure it adjusts to content */
}

/* Ensure consistent width for both panels */
.create-npc-panel,
.chat-container {
    width: 100%; /* Ensure both panels take up the same width */
    max-width: 600px; /* Optional: Set a maximum width */
    margin: 0 auto; /* Center the panels */
}

.create-npc-panel label {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--text-primary);
}

/* Upload Picture Panel */
.upload-picture-panel {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    background-color: var(--bg-tertiary);
    margin-bottom: 20px; /* Add spacing below the upload section */
}

.upload-picture-panel h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-primary);
}

#uploaded-picture-container {
    margin-top: 10px;
    text-align: center;
}

#uploaded-picture {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Upload Picture Panel */
.upload-picture-panel {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: var(--bg-secondary); /* Match the chat panel color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.upload-picture-panel form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upload-picture-panel button {
    align-self: flex-start;
}

#uploaded-picture-container {
    margin-top: 20px;
    text-align: center;
}

#uploaded-picture {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Middle Panel Container */
.middle-panel {
    display: flex;
    gap: 20px;
    margin-top: 40px; /* Add gap between top and middle panels */
}

/* Chat Panel */
.chat-panel {
    flex: 2;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: var(--bg-secondary); /* Match the theme */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Character List Panel */
.character-list-panel {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: var(--bg-secondary); /* Match the theme */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 400px; /* Limit height */
    overflow-y: auto; /* Add scrolling if content exceeds height */
}

.character-list-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.character-list-panel ul li {
    padding: 10px;
    margin: 5px 0;
    background-color: #5b97c2;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.character-list-panel ul li:hover {
    background-color: #4a86b1;
}

/* Top Panel Container */
.top-panel {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Subscribe to Plan Panel */
.subscribe-panel {
    flex: 2;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: var(--bg-secondary); /* Match the theme */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Subscription Options Container */
.subscription-options {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Individual Subscription Panel */
.subscription-panel {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background-color: var(--bg-tertiary); /* Match the theme */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.subscription-panel:hover {
    transform: translateY(-5px);
    background-color: var(--bg-secondary);
}

/* Free Subscription Panel */
.free-panel {
    border-left: 5px solid var(--success);
}

/* Basic Subscription Panel */
.basic-panel {
    border-left: 5px solid var(--accent-primary);
}

/* Pro Subscription Panel */
.pro-panel {
    border-left: 5px solid var(--danger);
}

.subscription-panel h3 {
    margin-bottom: 10px;
    font-size: 18px;
    color: var(--text-primary);
}

.subscription-panel p {
    margin: 5px 0;
    color: var(--text-secondary);
}

/* Banner Section */
.banner {
    width: 100%;
    height: 300px; /* Adjust the height as needed */
    overflow: hidden;
    position: relative;
    margin-bottom: 20px; /* Add spacing below the banner */
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire banner area */
}

/* Image Section */
.image-section {
    margin-top: 20px;
    text-align: center;
}

.image-section h3 {
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--text-primary);
}

/* Image Box */
.image-box {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--bg-tertiary);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensure the image doesn't overflow the box */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Character Image */
.image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Ensure the image fits nicely within the box */
    border-radius: 5px;
}

/* Match heading colors with the main title */
.chat-container h2,
.create-npc-panel h2,
.upload-picture-panel h2 {
    color: var(--accent-primary); /* Same color as "Welcome to the InAI Studio" */
    font-size: 1.8rem; /* Optional: Adjust font size for consistency */
    margin-bottom: 10px;
}

/* Label Styles for Consistency */
.chat-container label,
.create-npc-panel label {
    display: block;
    margin-top: 10px;
    font-size: 14px; /* Match the font size */
    color: var(--text-primary); /* Match the font color */
}

.delete-btn-container {
    position: relative;
}

.delete-btn-container button {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 1;
    padding: 6px 10px;
    font-size: 12px;
}

/* Top Panel New Section */
.top-pan-new {
    background-color: #444444; /* Light gray background */
    border: 1px solid #4c4c4c; /* Subtle border */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add padding inside the div */
    margin: 20px 0; /* Add spacing above and below the div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a soft shadow for a stylish look */
}

/* Top Panel New Section Heading */
.top-pan-new h2 {
    font-size: 1.5rem; /* Slightly larger font size */
    color: #e1e1e1; /* Darker text color for contrast */
    margin-bottom: 15px; /* Add spacing below the heading */
    text-align: center; /* Center-align the heading */
}

/* Textarea and Input Styles Inside Top Panel */
.top-pan-new textarea,
.top-pan-new input {
    width: 100%; /* Full width */
    padding: 10px;
    margin-bottom: 10px; /* Add spacing below each element */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    background-color: #fff; /* White background */
    color: #333; /* Dark text color */
    box-sizing: border-box; /* Include padding and border in width/height */
}

/* Button Styles Inside Top Panel */
.top-pan-new button {
    background-color: #007bff; /* Blue background */
    color: white; /* White text */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.top-pan-new button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.selected-plan {
    outline: 3px solid var(--accent-primary);
    border-color: var(--accent-primary);
}