/**
 * BanterBox Immersive Showcase Styles
 * Matching the main site's design system
 */

/* Inherit site variables and add showcase-specific ones */
#interactive-showcase {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
}

.showcase-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Background effects matching site style */
.showcase-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.gradient-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
}

.orb-1 {
    background: var(--accent-primary);
    top: -300px;
    right: -300px;
    animation: float 30s ease-in-out infinite;
}

.orb-2 {
    background: #8b5cf6;
    bottom: -300px;
    left: -300px;
    animation: float 35s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(50px, -50px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.95); }
}

/* Content area */
.showcase-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    position: relative;
    z-index: var(--z-base);
}

.scene-container {
    width: 100%;
    max-width: 1200px;
    opacity: 1;
    transition: opacity var(--transition-slow);
    height: calc(100vh - 100px); /* Account for navigation */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content overflow */
}

/* Navigation - matching site style */
.showcase-nav {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    z-index: var(--z-elevated);
}

.nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover:not(:disabled) {
    background: var(--bg-elevated);
    color: var(--text-primary);
    transform: scale(1.05);
    border-color: var(--accent-primary);
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.progress-indicators {
    display: flex;
    gap: var(--space-sm);
}

.indicator {
    width: 48px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.2);
}

.indicator-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--accent-gradient);
    transition: width var(--transition-base);
}

.indicator.active .indicator-fill {
    width: 100%;
}

.indicator.completed {
    background: var(--accent-primary);
}

/* Skip button - matching site style */
.skip-showcase {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    padding: var(--space-sm) var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    z-index: var(--z-modal);
}

.skip-showcase:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    transform: translateY(-2px);
    border-color: var(--accent-primary);
}

/* Intro Scene */
.intro-content {
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.showcase-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    margin-bottom: var(--space-md);
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.showcase-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2xl);
    font-weight: 400;
}

.book-preview {
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically align book covers */
    gap: var(--space-lg);
    margin: var(--space-xl) 0; /* Reduced margin */
    perspective: 1000px;
}

.book-cover {
    width: 160px;
    height: 240px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    position: relative;
    transform-style: preserve-3d;
    transition: all var(--transition-slow);
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-md) var(--space-sm) var(--space-md) 32px;
}

.book-cover:hover {
    transform: translateY(-10px) rotateY(10deg);
    box-shadow: 0 20px 40px var(--shadow-color);
}

.book-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: rgba(0, 0, 0, 0.2);
}

.book-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    position: relative;
    z-index: 1;
    max-width: 100%;
    hyphens: manual;
}

.book-author {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
    position: relative;
    z-index: 1;
}

/* Book gradients for different titles */
.book-pride { background: linear-gradient(135deg, #d946ef, #ec4899); }
.book-hound { background: linear-gradient(135deg, #475569, #1e293b); }
.book-jekyll { background: linear-gradient(135deg, #991b1b, #7f1d1d); }
.book-alice { background: linear-gradient(135deg, #0891b2, #0e7490); }
.book-gatsby { background: linear-gradient(135deg, #eab308, #f59e0b); }

.intro-hint {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    margin-top: var(--space-2xl);
}

/* Dialogue Scene */
.dialogue-demonstration {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 120px; /* Space for navigation and demo hint */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px); /* Full height minus space for header and nav */
}

/* Character header collapse for all dialogue demos */
.dialogue-demonstration .character-header {
    transition: all var(--transition-base);
    overflow: hidden;
    flex-shrink: 0;
}

.dialogue-demonstration .character-header.collapsed {
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    opacity: 0;
}

/* Dialogue interface should flex to fill available space */
.dialogue-demonstration .dialogue-interface {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Important for flex children */
}

/* Conversation area flexes to fill available space */
.dialogue-demonstration .conversation-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allows proper flex shrinking */
}

/* Messages container takes available space */
.dialogue-demonstration .messages-container {
    flex: 1;
    min-height: 200px; /* Minimum viable height */
    max-height: none; /* Remove restriction */
}

/* Expand even more when header is collapsed */
.dialogue-demonstration.header-collapsed .conversation-area {
    transition: all var(--transition-base);
}

.scene-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.scene-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.scene-explanation {
    max-width: 600px;
    margin: var(--space-md) auto var(--space-lg);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    text-align: center;
}

/* Compact explanation for generate response page */
.dialogue-demonstration.generate-response-demo .scene-explanation {
    margin: var(--space-sm) auto var(--space-md);
    font-size: 0.875rem;
    line-height: 1.4;
}

.dialogue-interface {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: visible; /* Changed from hidden to visible */
    box-shadow: 0 10px 40px var(--shadow-color);
    padding-bottom: 20px; /* Add padding to ensure input area is visible */
}

.interface-header {
    background: var(--bg-tertiary);
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.book-context {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.book-name {
    font-weight: 500;
}

.separator {
    color: var(--text-tertiary);
}

.character-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.avatar-circle {
    width: 56px;
    height: 56px;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 1.125rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.character-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.character-mood {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.conversation-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.messages-container {
    overflow-y: auto;
    padding: var(--space-sm) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Messages - matching main app style */
.message {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    animation: messageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.message.character {
    align-items: flex-start;
}

.message.user {
    align-items: flex-end;
}

.message-bubble {
    padding: var(--space-sm) var(--space-md);
    border-radius: 16px;
    max-width: 85%;
    line-height: 1.6;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message.character .message-bubble {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.message.user .message-bubble {
    background: var(--accent-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

@keyframes messageSlideIn {
    from { 
        opacity: 0; 
        transform: translateY(20px) scale(0.98); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Typing indicator */
.typing-indicator .message-bubble {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
}

.typing-indicator .dot {
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typingDot 1.4s ease-in-out infinite;
}

.typing-indicator .dot:nth-child(1) { animation-delay: 0s; }
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    30% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* Input area - matching main app */
.input-area {
    display: block !important; /* Force display */
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevent shrinking */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Input Container Styling */
.input-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-md);
    width: 100%;
    transition: all var(--transition-base);
}

.input-container:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.input-container .dialogue-input {
    width: 100%;
    margin: 0;
    border: none;
    background: transparent;
}

.input-container .input-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    align-items: center;
}

.input-container .generate-button {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.input-container .generate-button:hover {
    background: var(--accent-primary);
    color: white;
    transform: scale(1.02);
}

.input-container .send-button {
    min-width: auto;
    padding: var(--space-xs) var(--space-md);
    height: auto;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
}

.input-container .send-button span {
    display: inline-block;
}

.dialogue-input,
.book-input {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-sm) var(--space-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    resize: none;
    transition: all var(--transition-base);
    min-height: 56px;
    max-height: 120px;
}

.dialogue-input:focus,
.book-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.send-button {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--accent-primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.send-button:hover {
    background: var(--accent-secondary);
    transform: scale(1.05);
}

.send-button:active {
    transform: scale(0.95);
}

/* Ensure dialogue demonstrations show input areas */
.dialogue-demonstration .input-area {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dialogue-demonstration .input-container {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Generate Response Mode */
.dialogue-demonstration.generate-response-demo {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 160px; /* Extra space for navigation and generated content */
}

.dialogue-demonstration.generate-response-demo .conversation-area {
    max-height: 350px; /* Limit height to prevent overflow */
    overflow-y: auto;
    padding-right: var(--space-xs);
}

.dialogue-demonstration.generate-response-demo .messages-container {
    max-height: none; /* Remove nested height restriction */
}

/* Generate response demo specific overrides */

/* Adjust conversation area when header is collapsed */
.dialogue-demonstration.generate-response-demo.header-collapsed .conversation-area {
    max-height: 500px; /* Much more space when header is hidden */
    transition: max-height var(--transition-base);
}

.input-area.generate-mode {
    flex-direction: column;
    align-items: stretch;
}

.generate-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px dashed var(--accent-primary);
    border-radius: 12px;
    color: var(--accent-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.generate-button:hover {
    background: var(--accent-primary);
    color: white;
    border-style: solid;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.generate-button svg {
    width: 20px;
    height: 20px;
}

.generated-response {
    width: 100%;
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.response-preview {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-md);
}

.generated-text {
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

.generated-response .dialogue-input {
    width: 100%;
    min-height: 80px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-md);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-primary);
    resize: none;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.generated-response .dialogue-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(97, 116, 231, 0.1);
}

.response-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.use-response,
.regenerate {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.use-response {
    background: var(--accent-primary);
    border: none;
    color: white;
}

.use-response:hover {
    background: var(--accent-secondary);
    transform: translateY(-1px);
}

.regenerate {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.regenerate:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

/* Try Again Button */
.try-again-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--accent-primary);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.try-again-button:hover {
    background: var(--accent-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.try-again-button svg {
    width: 20px;
    height: 20px;
}

.demo-hint {
    text-align: center;
    margin-top: var(--space-sm);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-style: italic;
    padding-bottom: var(--space-sm);
}

/* AI Context Scene */
.ai-demonstration {
    text-align: center;
    padding: var(--space-lg) 0 80px 0; /* Add top padding and space for navigation bar */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from center to flex-start */
    overflow-y: auto;
}

.ai-demonstration .scene-explanation {
    max-width: 650px; /* Reduced */
    margin: var(--space-sm) auto var(--space-md); /* Reduced margins */
    color: var(--text-secondary);
    font-size: 0.875rem; /* Reduced */
    line-height: 1.5; /* Tighter */
}

.ai-process-visual {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-md); /* Reduced from xl */
    align-items: center;
    margin: var(--space-md) 0; /* Reduced from lg */
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: var(--space-lg);
    box-shadow: 0 8px 32px var(--shadow-color);
}

.glass-panel h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.context-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.context-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: 8px;
    transition: all var(--transition-base);
    opacity: 0.3;
}

.context-item.active {
    background: rgba(99, 102, 241, 0.1);
    opacity: 1;
}

.context-item .icon {
    font-size: 1.25rem;
}

.ai-thinking {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.thinking-animation {
    position: relative;
    width: 100px;
    height: 100px;
}

.pulse-ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

.ai-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
}

.ai-icon.pulse {
    animation: iconPulse 1s ease-in-out;
}

@keyframes iconPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}

.thinking-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.ai-response {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    font-family: var(--font-display);
}

.response-meta {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.meta-item {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--accent-secondary);
}


/* Book Conversation Scene */
.book-conversation-demo {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 120px; /* Space for navigation bar */
}

.book-conversation-demo .scene-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.book-conversation-demo .scene-explanation {
    max-width: 700px;
    margin: var(--space-md) auto var(--space-xl);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.book-chat-interface {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: var(--space-lg);
    margin-top: var(--space-lg);
    box-shadow: 0 10px 40px var(--shadow-color);
    text-align: left;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.book-icon {
    font-size: 2.5rem;
}

.chat-header h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0;
    color: var(--text-primary);
}

.book-messages {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.message.assistant .message-bubble {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.book-input-area {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.suggested-topics {
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Suggested topics container */
.demo-suggested-topics {
    margin-top: var(--space-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.topic-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.topic-chip {
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.topic-chip:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* Branching Scene */
.branching-demonstration {
    text-align: center;
    padding: var(--space-lg) 0 80px 0; /* Add top padding and space for navigation bar */
    max-height: calc(100vh - 100px); /* Ensure it fits in viewport */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from center to flex-start */
    height: 100%;
}

/* Scrollbar styling for branching demo */
.branching-demonstration::-webkit-scrollbar {
    width: 6px;
}

.branching-demonstration::-webkit-scrollbar-track {
    background: transparent;
}

.branching-demonstration::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.branching-demonstration::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Dynamic Features Section */
.dynamic-features {
    margin-top: var(--space-lg); /* Reduced from xl */
    text-align: left;
}

.dynamic-features h3 {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.5rem; /* Reduced from 1.75rem */
    margin-bottom: var(--space-md); /* Reduced from lg */
    color: var(--text-primary);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Reduced min width */
    gap: var(--space-sm); /* Reduced from md */
    margin-top: var(--space-md); /* Reduced from lg */
}

.feature-card {
    background: var(--bg-tertiary);
    padding: var(--space-sm); /* Reduced from md */
    border-radius: 10px; /* Reduced from 12px */
    border: 1px solid var(--border-color);
    text-align: center;
}

.feature-icon {
    font-size: 1.75rem; /* Reduced from 2rem */
    margin-bottom: var(--space-xs); /* Reduced from sm */
}

.feature-card h4 {
    font-size: 0.9375rem; /* Reduced from 1rem */
    font-weight: 600;
    margin-bottom: 0.25rem; /* Reduced from xs */
    color: var(--text-primary);
}

.feature-card p {
    font-size: 0.8125rem; /* Reduced from 0.875rem */
    color: var(--text-secondary);
    line-height: 1.4; /* Reduced from 1.5 */
}

.branching-example {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: rgba(99, 102, 241, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.example-note {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-style: italic;
}

.branching-demonstration .scene-title {
    font-family: var(--font-display);
    font-size: 2rem; /* Reduced from 2.5rem */
    font-weight: 600;
    margin-bottom: var(--space-xs); /* Reduced from sm */
    color: var(--text-primary);
}

.branching-demonstration .scene-explanation {
    max-width: 650px; /* Reduced from 700px */
    margin: var(--space-sm) auto var(--space-md); /* Reduced margins */
    color: var(--text-secondary);
    font-size: 0.875rem; /* Reduced from 0.9375rem */
    line-height: 1.5; /* Reduced from 1.6 */
}

.branching-visual {
    margin: var(--space-md) 0; /* Reduced from lg */
}

.conversation-flow {
    max-width: 650px; /* Reduced from 700px */
    margin: 0 auto;
}

.flow-message {
    padding: var(--space-sm) var(--space-md); /* Reduced padding */
    border-radius: 12px; /* Reduced from 16px */
    margin: var(--space-sm) auto; /* Reduced from md */
    max-width: 85%; /* Increased from 80% to use space better */
    font-size: 0.9375rem; /* Reduced from 1rem */
    line-height: 1.5; /* Reduced from 1.6 */
    box-shadow: 0 2px 8px var(--shadow-color); /* Reduced shadow */
}

.flow-message.user {
    background: var(--accent-primary);
    color: white;
    margin-left: auto;
    margin-right: auto;
}

.flow-branch {
    position: relative;
    margin: var(--space-xl) 0;
}

.branch-line {
    width: 2px;
    height: 60px;
    background: var(--border-color);
    margin: 0 auto;
}

.branch-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-top: -30px;
}

.branch-path {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.branch-path.show {
    opacity: 1;
    transform: translateY(0);
}

.flow-message.character {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.path-label {
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
}


/* Animations */
.animate-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-in-delay {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.animate-in-delay-2 {
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

.animate-in-delay-3 {
    animation: fadeInUp 0.6s ease-out 0.6s both;
}

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

/* Scrollbar styling - matching site */
.messages-container::-webkit-scrollbar,
.book-messages::-webkit-scrollbar {
    width: 6px;
}

.messages-container::-webkit-scrollbar-track,
.book-messages::-webkit-scrollbar-track {
    background: transparent;
}

.messages-container::-webkit-scrollbar-thumb,
.book-messages::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.messages-container::-webkit-scrollbar-thumb:hover,
.book-messages::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Finale Scene */
.finale-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    max-height: calc(100vh - 120px); /* Account for nav bar */
    overflow-y: auto;
}

/* Scrollbar styling for finale */
.finale-content::-webkit-scrollbar {
    width: 6px;
}

.finale-content::-webkit-scrollbar-track {
    background: transparent;
}

.finale-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.finale-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

.finale-title {
    font-family: var(--font-display);
    font-size: 2.5rem; /* Reduced from 3rem */
    font-weight: 600;
    margin-bottom: var(--space-xs);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.finale-subtitle {
    font-size: 1.125rem; /* Reduced from 1.25rem */
    color: var(--text-secondary);
    margin-bottom: var(--space-lg); /* Reduced from xl */
}

.finale-features {
    margin: var(--space-lg) 0; /* Reduced from xl */
}

.finale-section {
    margin-bottom: var(--space-lg); /* Reduced from xl */
}

.finale-section h2 {
    font-family: var(--font-display);
    font-size: 1.75rem; /* Reduced from 2rem */
    font-weight: 600;
    margin-bottom: var(--space-sm); /* Reduced from md */
    color: var(--text-primary);
}

.finale-section p {
    font-size: 1rem; /* Reduced from 1.125rem */
    color: var(--text-secondary);
    line-height: 1.5; /* Reduced from 1.6 */
    max-width: 650px; /* Reduced from 700px */
    margin: 0 auto;
}

.feature-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Reduced min width */
    gap: var(--space-md); /* Reduced from lg */
    margin-top: var(--space-lg); /* Reduced from xl */
}

.finale-feature {
    background: var(--bg-tertiary);
    padding: var(--space-md); /* Reduced from lg */
    border-radius: 12px; /* Reduced from 16px */
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
}

.finale-feature:hover {
    transform: translateY(-2px); /* Reduced from -4px */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* Reduced shadow */
    border-color: var(--accent-primary);
}

.finale-icon {
    font-size: 2rem; /* Reduced from 2.5rem */
    margin-bottom: var(--space-sm); /* Reduced from md */
}

.finale-feature h3 {
    font-size: 1rem; /* Reduced from 1.125rem */
    font-weight: 600;
    margin-bottom: var(--space-xs); /* Reduced from sm */
    color: var(--text-primary);
}

.finale-feature p {
    font-size: 0.875rem; /* Reduced from 0.9375rem */
    color: var(--text-secondary);
    line-height: 1.4; /* Reduced from 1.5 */
}

.finale-cta {
    margin: var(--space-lg) 0; /* Reduced from xl */
    padding: var(--space-lg); /* Reduced from xl */
    background: rgba(99, 102, 241, 0.05);
    border-radius: 12px; /* Reduced from 16px */
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.cta-text {
    font-size: 1rem; /* Reduced from 1.125rem */
    color: var(--text-primary);
    margin-bottom: var(--space-md); /* Reduced from lg */
    line-height: 1.5; /* Reduced from 1.6 */
}

.cta-button {
    padding: var(--space-md) var(--space-xl);
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.cta-button:hover {
    background: var(--accent-secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.finale-note {
    margin-top: var(--space-xl);
    font-style: italic;
    color: var(--text-tertiary);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ai-process-visual {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .branch-options {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

@media (max-width: 768px) {
    .showcase-title {
        font-size: 2.5rem;
    }
    
    .book-preview {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    .book-cover {
        width: 140px;
        height: 200px;
    }
    
    .dialogue-interface,
    .book-chat-interface {
        padding: var(--space-md);
    }
    
    .showcase-nav {
        bottom: var(--space-lg);
        gap: var(--space-md);
    }
    
    .progress-indicators {
        gap: var(--space-xs);
    }
    
    .indicator {
        width: 36px;
    }
    
    /* Demo adjustments for mobile */
    .showcase-dialogue-demo {
        padding: var(--space-md) 0;
        padding-bottom: 80px; /* Reduced bottom padding */
    }
    
    .demo-header h2 {
        font-size: 1.5rem; /* Further reduced */
    }
    
    .demo-header p {
        font-size: 0.875rem; /* Smaller on mobile */
    }
    
    .demo-reader-interface {
        height: 50vh; /* Reduced for tablets */
        max-height: 450px; /* Lower max on tablets */
        border-radius: 8px;
    }
    
    .demo-context-bar {
        font-size: 0.7rem; /* Smaller text */
        padding: 6px var(--space-sm);
    }
    
    .demo-character-bar {
        padding: var(--space-xs) var(--space-sm);
    }
    
    .demo-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
    
    .demo-character-name {
        font-size: 0.8125rem;
    }
    
    .demo-messages-area {
        padding: var(--space-sm);
        height: 200px; /* Reduced for tablets */
    }
    
    .demo-message.character .demo-message-content,
    .demo-message.user .demo-message-content {
        font-size: 0.8125rem;
        padding: 6px var(--space-sm);
    }
    
    .demo-input-area {
        padding: var(--space-sm);
    }
    
    .demo-textarea {
        font-size: 0.8125rem;
        min-height: 48px;
        max-height: 60px;
        padding: 6px var(--space-sm);
    }
    
    .demo-send-btn,
    .demo-generate-btn {
        font-size: 0.8125rem;
        padding: 6px var(--space-sm);
    }
    
    .demo-hint {
        font-size: 0.75rem;
        margin-top: var(--space-sm);
    }
}

@media (max-width: 480px) {
    .showcase-title {
        font-size: 2rem;
    }
    
    .showcase-subtitle {
        font-size: 1rem;
    }
    
    .skip-showcase {
        top: var(--space-md);
        right: var(--space-md);
        padding: var(--space-xs) var(--space-md);
        font-size: 0.8125rem;
    }
    
    .nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .message-bubble {
        font-size: 0.875rem;
    }
    
    .scene-title {
        font-size: 1.75rem;
    }
    
    /* Additional demo adjustments for small mobile */
    .showcase-dialogue-demo {
        padding: var(--space-sm) 0;
        padding-bottom: 60px; /* Even less for small screens */
    }
    
    .demo-header h2 {
        font-size: 1.25rem; /* Smaller title */
    }
    
    .demo-header p {
        font-size: 0.8125rem;
        padding: 0 var(--space-sm);
    }
    
    .demo-reader-interface {
        height: calc(100vh - 180px); /* Less padding for small screens */
        max-height: 400px; /* Reasonable max */
        min-height: 320px;
        margin: 0 var(--space-xs); /* Add slight margins */
    }
    
    .demo-messages-area {
        height: 150px; /* Further reduced for small screens */
        padding: var(--space-xs);
    }
    
    .demo-character-bar {
        gap: var(--space-xs);
    }
    
    .demo-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .demo-textarea {
        min-height: 40px;
        max-height: 50px;
        font-size: 0.75rem;
    }
    
    .demo-send-btn,
    .demo-generate-btn {
        font-size: 0.75rem;
        padding: 4px var(--space-xs);
    }
    
    .demo-generated-preview {
        max-height: 80px; /* Smaller preview */
        font-size: 0.75rem;
    }
    
    /* Adjust nav for small screens */
    .showcase-nav {
        bottom: 10px;
        padding: var(--space-xs) var(--space-sm);
    }
    
    #interactive-showcase {
        min-height: calc(100vh - 80px); /* Less space needed */
        padding-bottom: 60px;
    }
    
    /* Character conversation adjustments */
    .character-options {
        grid-template-columns: 1fr;
    }
    
    .character-option {
        padding: var(--space-md);
    }
    
    .demo-character-selection {
        padding: var(--space-md);
    }
    
    .selection-header {
        font-size: 1rem;
    }
    
    .character-option .character-avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .character-option .character-name {
        font-size: 0.875rem;
    }
    
    .character-option .character-role {
        font-size: 0.75rem;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .glass-panel {
        background: var(--bg-secondary);
        border-width: 2px;
    }
    
    .nav-btn,
    .topic-chip,
    .book-cover {
        border-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================
   SIMPLIFIED DIALOGUE DEMO STYLES
   =========================== */

.showcase-dialogue-demo {
    width: 100%;
    max-width: 700px; /* Reduced from 800px */
    margin: 0 auto;
    padding: 0; /* Remove top padding */
    padding-bottom: 80px; /* Reduced space for nav */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.demo-header {
    text-align: center;
    margin-bottom: var(--space-lg); /* Increased spacing between header and interface */
    flex-shrink: 0; /* Don't shrink */
    width: 100%;
}

.demo-header h2 {
    font-size: 1.5rem; /* Further reduced */
    font-weight: 600;
    margin-bottom: 0.25rem; /* Minimal spacing */
    color: var(--text-primary);
}

.demo-header p {
    font-size: 0.9375rem; /* Further reduced */
    color: var(--text-secondary);
    line-height: 1.4; /* Tighter line height */
    max-width: 500px; /* Reduced width */
    margin: 0 auto;
}

/* Demo Reader Interface */
.demo-reader-interface {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Reduced from 16px */
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* Reduced shadow */
    height: calc(100vh - 240px); /* Adjusted for increased header spacing */
    max-height: 550px; /* Increased for better visibility */
    min-height: 450px; /* Increased minimum height */
    display: flex;
    flex-direction: column;
    width: 100%; /* Full width of container */
    margin: 0 auto; /* Center horizontally */
}

/* Special sizing for Talk to the Book page */
.book-conversation-demo .demo-reader-interface {
    height: calc(100vh - 280px); /* Adjusted for increased header spacing */
    max-height: 500px; /* Still contained */
}

/* Book conversation demo container */
.book-conversation-demo {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    padding-bottom: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Context Bar */
.demo-context-bar {
    background: var(--bg-tertiary);
    padding: var(--space-xs) var(--space-md); /* Reduced padding */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content */
    gap: var(--space-xs); /* Reduced gap */
    font-size: 0.75rem; /* Reduced from 0.875rem */
    color: var(--text-secondary);
    flex-shrink: 0; /* Prevent shrinking */
}

.demo-separator {
    opacity: 0.5;
}

/* Character Bar */
.demo-character-bar {
    padding: var(--space-sm) var(--space-md); /* Reduced padding */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--space-sm); /* Reduced gap */
    background: rgba(99, 102, 241, 0.05);
    flex-shrink: 0; /* Prevent shrinking */
    transition: all 0.3s ease-out;
    overflow: hidden;
}

/* Minimized state for character bar */
.demo-character-bar.minimized {
    padding: 0.25rem var(--space-md);
    height: 2rem;
}

.demo-character-bar.minimized .demo-avatar {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

.demo-character-bar.minimized .demo-character-info {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}

.demo-avatar {
    width: 36px; /* Reduced from 48px */
    height: 36px; /* Reduced from 48px */
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem; /* Reduced from 1.25rem */
    flex-shrink: 0;
}

/* Book avatar with emoji */
.demo-avatar.book-avatar {
    background: rgba(99, 102, 241, 0.1);
    font-size: 1.25rem;
}

.demo-character-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem; /* Reduced spacing */
    font-size: 0.875rem; /* Reduced size */
}

.demo-character-mood {
    font-size: 0.75rem; /* Reduced from 0.875rem */
    color: var(--text-secondary);
}

/* Messages Area */
.demo-messages-area {
    padding: var(--space-md); /* Reduced from lg */
    flex: 1; /* Take available space */
    min-height: 200px; /* Minimum height */
    max-height: 300px; /* Maximum height */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar for messages area */
.demo-messages-area::-webkit-scrollbar {
    width: 6px;
}

.demo-messages-area::-webkit-scrollbar-track {
    background: transparent;
}

.demo-messages-area::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.demo-messages-area::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

.demo-message {
    margin-bottom: var(--space-sm); /* Reduced from md */
}

/* Character name display */
.demo-message-sender {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.demo-message.user .demo-message-sender {
    text-align: right;
    margin-right: 0.5rem;
}

.demo-message.character .demo-message-content {
    background: var(--bg-tertiary);
    padding: var(--space-sm) var(--space-md); /* Reduced padding */
    border-radius: 10px; /* Reduced from 12px */
    border: 1px solid var(--border-color);
    line-height: 1.5; /* Reduced from 1.6 */
    font-size: 0.875rem; /* Reduced text size */
}

.demo-message.user .demo-message-content {
    background: rgba(99, 102, 241, 0.1);
    padding: var(--space-sm) var(--space-md); /* Reduced padding */
    border-radius: 10px; /* Reduced from 12px */
    border: 1px solid rgba(99, 102, 241, 0.2);
    line-height: 1.5; /* Reduced from 1.6 */
    margin-left: auto;
    max-width: 80%;
    font-size: 0.875rem; /* Reduced text size */
}

/* Input Area */
.demo-input-area {
    padding: var(--space-md); /* Reduced from lg */
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevent shrinking */
}

.demo-input-wrapper {
    display: flex;
    gap: var(--space-xs); /* Reduced from sm */
    align-items: flex-end;
}

/* Remove old generate mode wrapper styles */
.demo-input-wrapper.demo-generate-mode {
    /* Deprecated - styles moved to parent */
}

.demo-textarea {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Reduced from 12px */
    padding: var(--space-sm) var(--space-md); /* Better padding for readability */
    color: var(--text-primary);
    font-size: 0.875rem; /* Reduced from 0.9375rem */
    font-family: inherit;
    resize: vertical; /* Allow vertical resize */
    transition: all var(--transition-base);
    min-height: 60px; /* Set specific min-height */
    max-height: 120px; /* Increased to allow more content */
    overflow-y: auto;
}

.demo-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.demo-send-btn {
    padding: var(--space-xs) var(--space-md); /* Reduced padding */
    background: var(--accent-primary);
    color: white;
    border: 1px solid var(--accent-primary);
    border-radius: 6px; /* Reduced from 8px */
    font-weight: 500;
    font-size: 0.875rem; /* Reduced font size */
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

/* When in generate mode, set consistent button width */
.demo-input-area.generate-mode .demo-send-btn {
    padding: 8px 14px;
    height: 34px;
    font-size: 0.8125rem;
    line-height: 1;
    min-width: 60px;
    border-radius: 6px;
}

.demo-send-btn:hover {
    background: var(--accent-secondary);
    transform: translateY(-1px);
}

/* Generate Response Specific */
.demo-input-area.generate-mode .demo-input-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
    align-items: stretch;
}

.demo-input-area.generate-mode .demo-textarea {
    grid-column: 1;
    width: 100%;
    min-height: 80px;
    max-height: 120px;
}

.demo-input-area.generate-mode .demo-input-buttons {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-end;
}

.demo-generate-btn {
    padding: 8px 14px;
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    height: 34px;
    line-height: 1;
}

/* Fix for button layout in generate mode */
.demo-input-area .demo-input-wrapper {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-end;
    flex-direction: row; /* Default horizontal layout */
}

.demo-generate-btn:hover {
    background: var(--accent-primary);
    color: white;
}

/* Preview styles removed - no longer using separate preview container */

/* ===========================
   CHARACTER CONVERSATION DEMO
   =========================== */

.character-conversation-demo {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    padding-bottom: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

.scene-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.character-explanation {
    margin-bottom: var(--space-xl);
}

.explanation-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: var(--space-xl);
    text-align: center;
}

.card-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

.explanation-card h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.explanation-card p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.feature-list {
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.feature-list li {
    padding: var(--space-sm) 0;
    padding-left: var(--space-lg);
    position: relative;
    color: var(--text-secondary);
}

.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-weight: bold;
}

.character-selection {
    margin-bottom: var(--space-xl);
    width: 100%;
}

.character-selection h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
    max-width: 800px;
    margin: 0 auto;
}

.character-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.character-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.character-card .character-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.character-info {
    text-align: left;
}

.character-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.character-book {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.character-chat-preview {
    margin-bottom: var(--space-xl);
}

.chat-interface {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.chat-header {
    background: var(--bg-tertiary);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.chat-header .character-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}

.character-details h3 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.chat-context {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.chat-messages {
    padding: var(--space-lg);
    height: 300px;
    overflow-y: auto;
}

.chat-input-area {
    padding: var(--space-lg);
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--space-sm);
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-sm) var(--space-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    resize: none;
    transition: all var(--transition-base);
}

.chat-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.conversation-note {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    max-width: 700px;
    margin: 0 auto;
}

.note-icon {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.conversation-note p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Demo Hint */
.demo-hint {
    text-align: center;
    margin-top: var(--space-md); /* Reduced from lg */
    font-size: 0.8125rem; /* Reduced from 0.875rem */
    color: var(--text-secondary);
    font-style: italic;
    padding: 0 var(--space-md); /* Add horizontal padding */
}

/* ===========================
   CHARACTER CONVERSATION STYLES
   =========================== */

.character-conversation-interface {
    /* Inherits from demo-reader-interface */
}

.demo-character-selection {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1;
}

.selection-header {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-md);
}

.character-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.character-option {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: var(--space-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    text-align: left;
}

.character-option:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background: rgba(99, 102, 241, 0.05);
}

.character-option .character-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.character-details {
    flex: 1;
}

.character-option .character-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.character-option .character-role {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Active Chat */
.demo-active-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.demo-active-chat .demo-character-bar {
    /* Inherits base styles from demo-character-bar */
    background: rgba(99, 102, 241, 0.1);
}

.demo-active-chat .demo-messages-area {
    flex: 1;
    /* Inherits other styles from base demo-messages-area */
}

/* Usage tracking styles */
.remaining-calls {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-xs);
    margin-bottom: var(--space-xs);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-radius: 6px;
}

.remaining-calls.exhausted {
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.demo-message.system .demo-message-content.usage-limit {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--error);
    text-align: center;
    padding: var(--space-md);
}

/* Typing indicator */
.demo-message.typing .typing-dots {
    display: inline-block;
    animation: typing 1.4s infinite;
}

@keyframes typing {
    0%, 60%, 100% {
        opacity: 0.2;
    }
    30% {
        opacity: 1;
    }
}

/* Additional spacing fixes for showcase navigation */
.showcase-nav {
    position: fixed;
    bottom: 20px; /* Ensure nav doesn't overlap content */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--bg-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Ensure proper viewport height calculation */
#interactive-showcase {
    min-height: calc(100vh - 120px); /* Account for navigation */
    padding-bottom: 80px; /* Extra padding for nav */
}