/* ChatGPT-like Interface Styles */

/* Reset and Base Styles */
html {
    /* Prevent mobile/desktop auto text zoom that can distort layout */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Constrain media so large assets don't overflow containers */
img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Brand logo sizing safeguard (applies anywhere on the page) */
img[src*="TheCTOAdvisor.png"] {
    max-width: 40px; /* 2.5rem */
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Strict caps for images rendered inside dynamic content areas */
.content-view img,
.wizard-messages img,
.wizard-message-bubble img,
.message-content img,
.vendor-card img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 200px; /* prevent tall images from blowing layout */
    object-fit: contain;
    margin: 0 auto;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    line-height: 1.6;
    color: #374151;
    background: #ffffff;
}

.dark body {
    color: #e5e7eb;
    background: #111827;
}

/* Layout */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    /* Match Tailwind w-64 used in HTML to avoid mismatch */
    width: 256px;
    height: 100vh;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    z-index: 1000;
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.dark .sidebar {
    background: #1f2937;
    border-color: #374151;
}

/* Main content area */
.main-content {
    margin-left: 280px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
    }
}

/* Chat Messages */
.message {
    max-width: 100%;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.message.user {
    justify-content: flex-end;
}

.message.ai {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 80%;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    word-wrap: break-word;
    line-height: 1.5;
}

.message.user .message-bubble {
    background: #3b82f6;
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.message.ai .message-bubble {
    background: #f3f4f6;
    color: #374151;
    border-bottom-left-radius: 0.25rem;
}

.dark .message.ai .message-bubble {
    background: #374151;
    color: #e5e7eb;
}

/* Message content */
.message-content {
    white-space: pre-wrap;
}

/* Sources section */
.sources-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.dark .sources-section {
    border-color: #374151;
}

.sources-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.dark .sources-section h4 {
    color: #9ca3af;
}

.source-item {
    margin-bottom: 0.375rem;
    padding: 0.5rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.dark .source-item {
    background: #374151;
    border-color: #4b5563;
}

.source-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.source-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    background: #e5e7eb;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.dark .source-number {
    color: #9ca3af;
    background: #4b5563;
}

.source-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}

.source-link:hover {
    text-decoration: underline;
}

.source-content {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.4;
}

.dark .source-content {
    color: #9ca3af;
}

/* Chat Input */
.chat-input-container {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 1rem;
}

.dark .chat-input-container {
    background: #1f2937;
    border-color: #374151;
}

.chat-input-wrapper {
    max-width: 4xl;
    margin: 0 auto;
    position: relative;
}

.chat-input {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
    background: #f9fafb;
    resize: none;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.2s;
}

.chat-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark .chat-input {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

.send-button {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.send-button:hover {
    background: #2563eb;
}

.send-button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Sidebar Styles */
.sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
}

.dark .sidebar-header {
    border-color: #374151;
    color: #e5e7eb;
}

.new-chat-button {
    width: 100%;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.new-chat-button:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.conversation-item {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.25rem;
    border: 1px solid transparent;
    color: #374151;
}

.conversation-item:hover {
    background: #f3f4f6;
}

.conversation-item.active {
    background: #dbeafe;
    border-color: #3b82f6;
}

.dark .conversation-item {
    color: #e5e7eb;
}

.dark .conversation-item:hover {
    background: #374151;
}

.dark .conversation-item.active {
    background: #1e3a8a;
    border-color: #3b82f6;
}

/* Mode selection buttons */
.mode-button {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.mode-button:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.mode-button.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.dark .mode-button {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.dark .mode-button:hover {
    background: #374151;
}

.dark .mode-button.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        max-width: 320px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .message-bubble {
        max-width: 90%;
    }
    
    .welcome-features {
        grid-template-columns: 1fr;
    }
    
    .chat-input-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .send-button {
        position: static;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    /* Mobile menu button */
    #mobileMenuBtn {
        display: block;
        z-index: 1001; /* Above sidebar (1000) */
    }
    
    /* Hide sidebar overlay on mobile when closed */
    .sidebar:not(.open) {
        pointer-events: none;
    }
    
    /* Sidebar overlay */
    #sidebarOverlay {
        display: block;
    }
}

@media (min-width: 769px) {
    #mobileMenuBtn {
        display: none;
    }
    
    .sidebar {
        transform: translateX(0);
    }
}

/* Animation for new messages */
.message {
    animation: slideIn 0.3s ease-out;
}

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

/* Thinking indicator */
.thinking-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.thinking-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #6b7280;
    animation: thinkingPulse 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.thinking-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.thinking-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes thinkingPulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Loading indicator */
.loading-dots {
    display: inline-block;
}

.loading-dots::after {
    content: '';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

/* Focus states for accessibility */
.new-chat-button:focus,
.conversation-item:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .message.user .message-bubble {
        background: #1e40af;
        color: white;
    }
    
    .message.ai .message-bubble {
        background: #f3f4f6;
        color: #111827;
    }
    
    .dark .message.ai .message-bubble {
        background: #374151;
        color: #e5e7eb;
    }
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

.dark .tab-navigation {
    border-bottom-color: #374151;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    width: 100%;
}

.tab-btn:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.dark .tab-btn:hover {
    background: #374151;
    color: #f9fafb;
}

.tab-btn.active {
    background: #3b82f6;
    color: white;
}

.tab-btn.active:hover {
    background: #2563eb;
}

.tab-icon {
    font-size: 1.25rem;
}

.tab-label {
    flex: 1;
}

/* Content Views */
.content-view {
    display: none;
    height: 100%;
    overflow-y: auto;
}

.content-view.active {
    display: flex;
    flex-direction: column;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.875rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: #1f2937;
}

.dark .empty-state-title {
    color: #f9fafb;
}

.empty-state-text {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.dark .empty-state-text {
    color: #9ca3af;
}

.empty-state-subtext {
    font-size: 0.875rem;
    color: #9ca3af;
}

.dark .empty-state-subtext {
    color: #6b7280;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .tab-label {
        display: none;
    }
    
    .tab-btn {
        justify-content: center;
        padding: 0.75rem;
    }
    
    .tab-navigation {
        flex-direction: row;
        gap: 0.5rem;
    }
}

/* Wizard Container */
.wizard-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

/* Progress Bar */
.wizard-progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-bottom: 1rem;
}

.dark .wizard-progress-bar {
    background: #374151;
}

.wizard-progress-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

.wizard-progress-text {
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.dark .wizard-progress-text {
    color: #9ca3af;
}

/* Messages Area */
.wizard-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Message Bubbles (reuse chat styles) */
.wizard-message {
    display: flex;
    animation: fadeIn 0.3s ease;
}

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

.wizard-message.ai {
    justify-content: flex-start;
}

.wizard-message.user {
    justify-content: flex-end;
}

.wizard-message-bubble {
    max-width: 80%;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    word-wrap: break-word;
    line-height: 1.5;
}

.wizard-message.ai .wizard-message-bubble {
    background: #f3f4f6;
    color: #374151;
    border-bottom-left-radius: 0.25rem;
}

.dark .wizard-message.ai .wizard-message-bubble {
    background: #374151;
    color: #f9fafb;
}

.wizard-message.user .wizard-message-bubble {
    background: #3b82f6;
    color: white;
    border-bottom-right-radius: 0.25rem;
}

/* Input Area */
.wizard-input {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Answer Buttons */
.wizard-answer-btn {
    padding: 1rem 1.5rem;
    border: 2px solid #e5e7eb;
    background: white;
    color: #374151;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dark .wizard-answer-btn {
    background: #1f2937;
    color: #f9fafb;
    border-color: #374151;
}

.wizard-answer-btn:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dark .wizard-answer-btn:hover {
    background: #1e40af;
    border-color: #3b82f6;
}

.wizard-answer-btn:active {
    transform: translateY(0);
}

.wizard-answer-icon {
    font-size: 1.5rem;
    opacity: 0.7;
}

/* Checkbox Group (for multi-select) */
.wizard-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wizard-checkbox-label {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.dark .wizard-checkbox-label {
    background: #1f2937;
    border-color: #374151;
}

.wizard-checkbox-label:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.dark .wizard-checkbox-label:hover {
    background: #1e40af;
}

.wizard-checkbox-label input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.wizard-checkbox-label.checked {
    border-color: #3b82f6;
    background: #eff6ff;
}

.dark .wizard-checkbox-label.checked {
    background: #1e40af;
}

/* Continue Button */
.wizard-continue-btn {
    padding: 1rem 2rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1rem;
}

.wizard-continue-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.wizard-continue-btn:active {
    transform: translateY(0);
}

.wizard-continue-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

/* Back Button */
.wizard-back-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.wizard-back-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.dark .wizard-back-btn:hover {
    background: #374151;
    color: #f9fafb;
}

/* Summary View */
.wizard-summary {
    padding: 1.5rem;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    margin-top: 1rem;
}

.dark .wizard-summary {
    background: #1f2937;
    border-color: #374151;
}

.wizard-summary-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #1f2937;
}

.dark .wizard-summary-title {
    color: #f9fafb;
}

.wizard-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.dark .wizard-summary-item {
    border-bottom-color: #374151;
}

.wizard-summary-item:last-child {
    border-bottom: none;
}

.wizard-summary-label {
    font-weight: 600;
    color: #6b7280;
}

.wizard-summary-value {
    color: #1f2937;
    text-align: right;
}

.dark .wizard-summary-value {
    color: #f9fafb;
}

/* Spinner for loading states */
.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(59, 130, 246, 0.3);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.dark .spinner {
    border-color: rgba(59, 130, 246, 0.2);
    border-top-color: #60a5fa;
}

/* Success bubble */
.success-bubble {
    background: #10b981 !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
}

.dark .success-bubble {
    background: #059669 !important;
}

/* Error bubble */
.error-bubble {
    background: #ef4444 !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
}

.dark .error-bubble {
    background: #dc2626 !important;
}

/* Mapping results styling */
.wizard-message-bubble ul {
    margin: 0;
    padding: 0;
}

.wizard-message-bubble ul li {
    margin-bottom: 0.5rem;
}

/* Layer sequence badges */
.wizard-message-bubble span[style*="background: #eff6ff"] {
    display: inline-block;
}

.dark .wizard-message-bubble span[style*="background: #eff6ff"] {
    background: #1e3a8a !important;
    color: #93c5fd !important;
}

/* Layer descriptor styling - ensure text is visible on light blue background */
.wizard-message-bubble div[style*="background: #eff6ff"] strong {
    color: #1e40af !important;
}

.dark .wizard-message-bubble div[style*="background: #eff6ff"] strong {
    color: #93c5fd !important;
}

/* Note/warning boxes in dark mode */
.dark .wizard-message-bubble div[style*="background: #fef3c7"] {
    background: #78350f !important;
    border-left-color: #f59e0b !important;
}

.dark .wizard-message-bubble div[style*="background: #fef3c7"] strong,
.dark .wizard-message-bubble div[style*="background: #fef3c7"] span {
    color: #fde68a !important;
}

/* Vendor Cards */
.vendor-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vendor-card {
    padding: 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    background: white;
    transition: all 0.2s;
}

.dark .vendor-card {
    background: #1f2937;
    border-color: #374151;
}

.vendor-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.vendor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.vendor-name {
    font-size: 1.125rem;
    font-weight: bold;
    color: #1f2937;
    margin: 0;
}

.dark .vendor-name {
    color: #f9fafb;
}

.vendor-pricing {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: normal;
    word-wrap: break-word;
    max-width: 200px;
    line-height: 1.3;
}

.vendor-detail {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-size: 0.9375rem;
    color: #374151;
}

.dark .vendor-detail {
    color: #d1d5db;
}

.vendor-detail strong {
    color: #1f2937;
}

.dark .vendor-detail strong {
    color: #f3f4f6;
}

.vendor-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.vendor-select-btn {
    flex: 1;
    padding: 0.75rem 1.25rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.vendor-select-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.vendor-details-btn {
    padding: 0.75rem 1.25rem;
    background: transparent;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.vendor-details-btn:hover {
    background: #eff6ff;
}

.dark .vendor-details-btn:hover {
    background: #1e3a8a;
}

/* Mobile responsive vendor cards */
@media (max-width: 768px) {
    .vendor-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .vendor-pricing {
        max-width: 100%;
        font-size: 0.8rem;
    }
    
    .vendor-actions {
        flex-direction: column;
    }
    
    .vendor-select-btn,
    .vendor-details-btn {
        width: 100%;
    }
}

/* Dark mode for info boxes */
.dark .wizard-message-bubble[style*="background: #f0f9ff"] {
    background: #0c4a6e !important;
    border-left-color: #0ea5e9 !important;
}

.dark .wizard-message-bubble[style*="background: #f0f9ff"] h5,
.dark .wizard-message-bubble[style*="background: #f0f9ff"] p {
    color: #e0f2fe !important;
}

/* Session Info Panel */
.session-info-panel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    margin: 1rem 0;
    font-size: 0.875rem;
}

.dark .session-info-panel {
    background: #1e3a5f;
    border-color: #1e40af;
}

.session-info-icon {
    font-size: 1.5rem;
}

.session-info-text {
    flex: 1;
}

.session-info-label {
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 0.125rem;
}

.dark .session-info-label {
    color: #93c5fd;
}

.session-info-id {
    color: #6b7280;
    font-family: monospace;
    font-size: 0.75rem;
}

.dark .session-info-id {
    color: #9ca3af;
}

.session-info-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #059669;
}

.dark .session-info-status {
    color: #10b981;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Mobile Responsive for Wizard */
@media (max-width: 768px) {
    .wizard-container {
        padding: 1rem;
    }
    
    .wizard-message-bubble {
        max-width: 90%;
    }
    
    .wizard-answer-btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .session-info-panel {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .session-info-id {
        font-size: 0.6875rem;
    }
}

/* Roadmap Document */
.roadmap-document {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.roadmap-header {
    border-bottom: 3px solid #3b82f6;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.roadmap-title {
    font-size: 2rem;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 1rem;
}

.dark .roadmap-title {
    color: #f9fafb;
}

.roadmap-meta {
    display: flex;
    gap: 2rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.meta-label {
    font-weight: 600;
}

/* Sections */
.roadmap-section {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1e40af;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.dark .section-title {
    color: #60a5fa;
    border-bottom-color: #374151;
}

.section-content {
    line-height: 1.8;
    color: #374151;
}

.dark .section-content {
    color: #d1d5db;
}

.section-content p {
    margin-bottom: 1rem;
}

.section-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #1f2937;
}

.dark .section-content h3 {
    color: #f3f4f6;
}

.section-content ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.section-content li {
    margin-bottom: 0.5rem;
}

/* Layer Analysis */
.layer-analysis {
    background: #f9fafb;
    border-left: 4px solid #3b82f6;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.dark .layer-analysis {
    background: #1f2937;
}

.layer-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dark .layer-title {
    color: #f9fafb;
}

.selected-vendor {
    font-size: 1rem;
    color: #3b82f6;
    font-weight: 600;
}

.analysis-section {
    margin-bottom: 1.5rem;
}

.analysis-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.75rem;
}

.dark .analysis-section h4 {
    color: #9ca3af;
}

.analysis-section.warning {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    padding: 1rem;
    border-radius: 0.25rem;
}

.dark .analysis-section.warning {
    background: #78350f;
    border-left-color: #fbbf24;
}

/* Timeline */
.timeline {
    display: grid;
    gap: 2rem;
}

.timeline-quarter {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.2s;
}

.dark .timeline-quarter {
    background: #1f2937;
    border-color: #374151;
}

.timeline-quarter:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.quarter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
}

.dark .quarter-header {
    border-bottom-color: #374151;
}

.quarter-header h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1f2937;
    margin: 0;
}

.dark .quarter-header h3 {
    color: #f9fafb;
}

.quarter-cost {
    font-size: 1.125rem;
    font-weight: 600;
    color: #10b981;
}

.quarter-focus {
    font-size: 1rem;
    color: #4b5563;
    margin-bottom: 1rem;
}

.dark .quarter-focus {
    color: #9ca3af;
}

.quarter-section {
    margin-bottom: 1rem;
}

.quarter-section strong {
    color: #1f2937;
    font-weight: 600;
}

.dark .quarter-section strong {
    color: #f3f4f6;
}

.quarter-section ul {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.quarter-section li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.quarter-rationale {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #eff6ff;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-style: italic;
    color: #1e40af;
}

.dark .quarter-rationale {
    background: #1e3a8a;
    color: #93c5fd;
}

/* Failure Modes */
.failure-modes {
    display: grid;
    gap: 1.5rem;
}

.failure-mode {
    border-left: 4px solid #ef4444;
    background: #fef2f2;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.dark .failure-mode {
    background: #7f1d1d;
}

.failure-mode.severity-high {
    border-left-color: #dc2626;
}

.failure-mode.severity-medium {
    border-left-color: #f59e0b;
    background: #fef3c7;
}

.dark .failure-mode.severity-medium {
    background: #78350f;
}

.failure-mode.severity-low {
    border-left-color: #3b82f6;
    background: #eff6ff;
}

.dark .failure-mode.severity-low {
    background: #1e3a8a;
}

.failure-mode h4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: #1f2937;
}

.dark .failure-mode h4 {
    color: #e5e7eb;
}

.section-ref {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: normal;
    font-style: italic;
}

.dark .section-ref {
    color: #9ca3af;
}

.severity-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.severity-badge.severity-high {
    background: #fee2e2;
    color: #991b1b;
}

.dark .severity-badge.severity-high {
    background: #7f1d1d;
    color: #fecaca;
}

.severity-badge.severity-medium {
    background: #fef3c7;
    color: #92400e;
}

.dark .severity-badge.severity-medium {
    background: #78350f;
    color: #fde68a;
}

.severity-badge.severity-low {
    background: #dbeafe;
    color: #1e40af;
}

.dark .severity-badge.severity-low {
    background: #1e3a8a;
    color: #93c5fd;
}

.failure-description {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: #374151;
}

.dark .failure-description {
    color: #d1d5db;
}

.why-applies {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-left: 3px solid #3b82f6;
    border-radius: 0.375rem;
}

.dark .why-applies {
    background: #1f2937;
    border-color: #60a5fa;
}

.why-applies strong {
    color: #1e40af;
    display: block;
    margin-bottom: 0.5rem;
}

.dark .why-applies strong {
    color: #60a5fa;
}

.mode-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.mode-header h3 {
    font-size: 1.125rem;
    font-weight: bold;
    color: #991b1b;
    margin: 0;
}

.dark .mode-header h3 {
    color: #fca5a5;
}

.mode-reference {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
}

.mode-description {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: #7f1d1d;
}

.dark .mode-description {
    color: #fca5a5;
}

.mode-mitigation {
    padding: 0.75rem;
    background: white;
    border-radius: 0.25rem;
    line-height: 1.6;
}

.dark .mode-mitigation {
    background: #1f2937;
}

.mode-mitigation strong {
    color: #059669;
}

/* Cost Analysis */
.cost-analysis {
    background: #f9fafb;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb;
}

.dark .cost-analysis {
    background: #1f2937;
    border-color: #374151;
}

.cost-summary {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.dark .cost-summary {
    border-bottom-color: #374151;
}

.cost-total,
.cost-recurring {
    flex: 1;
}

.cost-label {
    display: block;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.cost-value {
    display: block;
    font-size: 1.875rem;
    font-weight: bold;
    color: #1f2937;
}

.dark .cost-value {
    color: #f9fafb;
}

.cost-breakdown h3,
.cost-optimization h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1f2937;
}

.dark .cost-breakdown h3,
.dark .cost-optimization h3 {
    color: #f3f4f6;
}

.cost-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.cost-table tr {
    border-bottom: 1px solid #e5e7eb;
}

.dark .cost-table tr {
    border-bottom-color: #374151;
}

.cost-table td {
    padding: 0.75rem 0;
    color: #374151;
}

.dark .cost-table td {
    color: #d1d5db;
}

.cost-table .cost-amount {
    text-align: right;
    font-weight: 600;
    color: #1f2937;
}

.dark .cost-table .cost-amount {
    color: #f3f4f6;
}

.cost-optimization ul {
    margin-left: 1.5rem;
}

.cost-optimization li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Next Steps */
/* Layer 2C Audit Styles */
.layer2c-audit {
    background: #f9fafb;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb;
    margin: 2rem 0;
}

.dark .layer2c-audit {
    background: #1f2937;
    border-color: #374151;
}

.audit-summary {
    display: flex;
    gap: 3rem;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb;
}

.dark .audit-summary {
    border-color: #374151;
}

.maturity-score {
    flex-shrink: 0;
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(
        #10b981 0% calc(var(--score) * 1%),
        #e5e7eb calc(var(--score) * 1%) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px;
}

.dark .score-circle {
    background: conic-gradient(
        #10b981 0% calc(var(--score) * 1%),
        #374151 calc(var(--score) * 1%) 100%
    );
}

.score-circle::before {
    content: '';
    position: absolute;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 50%;
    background: white;
}

.dark .score-circle::before {
    background: #1f2937;
}

.score-value {
    font-size: 1.75rem;
    font-weight: bold;
    color: #1e40af;
    position: relative;
    z-index: 1;
}

.dark .score-value {
    color: #60a5fa;
}

.score-label {
    font-size: 0.75rem;
    color: #6b7280;
    position: relative;
    z-index: 1;
    text-align: center;
}

.dark .score-label {
    color: #9ca3af;
}

.status-breakdown {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.dark .status-item {
    background: #111827;
    border-color: #374151;
}

.status-icon {
    font-size: 1.25rem;
}

.status-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.dark .status-label {
    color: #9ca3af;
}

.status-count {
    font-weight: bold;
    color: #1e40af;
    font-size: 1.125rem;
}

.dark .status-count {
    color: #60a5fa;
}

.audit-heatmap {
    margin-bottom: 2rem;
}

.audit-heatmap h3 {
    font-size: 1.25rem;
    color: #1e40af;
    margin-bottom: 1rem;
}

.dark .audit-heatmap h3 {
    color: #60a5fa;
}

.heatmap-table-container {
    overflow-x: auto;
}

.audit-heatmap-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

.dark .audit-heatmap-table {
    background: #111827;
}

.audit-heatmap-table thead {
    background: #1e40af;
    color: white;
}

.dark .audit-heatmap-table thead {
    background: #1e3a8a;
}

.audit-heatmap-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.audit-heatmap-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.dark .audit-heatmap-table td {
    border-color: #374151;
}

.audit-heatmap-table tbody tr:hover {
    background: #f3f4f6;
}

.dark .audit-heatmap-table tbody tr:hover {
    background: #1f2937;
}

.audit-heatmap-table .layer2c-row {
    background: #eff6ff;
    font-weight: 600;
}

.dark .audit-heatmap-table .layer2c-row {
    background: #1e3a8a;
}

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

.score-cell {
    text-align: center;
    font-size: 1.25rem;
    cursor: help;
}

.avg-score {
    text-align: center;
    font-weight: 600;
    color: #1e40af;
}

.dark .avg-score {
    color: #60a5fa;
}

.status-cell {
    text-align: center;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-automated {
    color: #10b981;
}

.status-mature {
    color: #f59e0b;
}

.status-reactive {
    color: #ef4444;
}

.status-manual {
    color: #6b7280;
}

.audit-gaps {
    margin-bottom: 2rem;
}

.audit-gaps h3 {
    font-size: 1.25rem;
    color: #1e40af;
    margin-bottom: 1rem;
}

.dark .audit-gaps h3 {
    color: #60a5fa;
}

.gaps-list {
    display: grid;
    gap: 1rem;
}

.gap-item {
    padding: 1.25rem;
    background: white;
    border-radius: 0.5rem;
    border-left: 4px solid #e5e7eb;
}

.dark .gap-item {
    background: #111827;
    border-color: #374151;
}

.gap-item.priority-critical {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.dark .gap-item.priority-critical {
    background: #7f1d1d;
    border-color: #ef4444;
}

.gap-item.priority-high {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.dark .gap-item.priority-high {
    background: #78350f;
    border-color: #f59e0b;
}

.gap-item.priority-medium {
    border-left-color: #10b981;
    background: #f0fdf4;
}

.dark .gap-item.priority-medium {
    background: #064e3b;
    border-color: #10b981;
}

.gap-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.gap-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #1e40af;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
}

.dark .gap-number {
    background: #3b82f6;
}

.gap-priority-icon {
    font-size: 1.25rem;
}

.gap-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.dark .gap-title {
    color: #e5e7eb;
}

.gap-description {
    color: #6b7280;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.dark .gap-description {
    color: #9ca3af;
}

.gap-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #6b7280;
}

.dark .gap-meta {
    color: #9ca3af;
}

.audit-quick-wins {
    margin-bottom: 2rem;
}

.audit-quick-wins h3 {
    font-size: 1.25rem;
    color: #1e40af;
    margin-bottom: 1rem;
}

.dark .audit-quick-wins h3 {
    color: #60a5fa;
}

.quick-wins-list {
    display: grid;
    gap: 1rem;
}

.quick-win-item {
    padding: 1.25rem;
    background: white;
    border-radius: 0.5rem;
    border: 2px solid #e5e7eb;
}

.dark .quick-win-item {
    background: #111827;
    border-color: #374151;
}

.quick-win-item.priority-critical {
    border-color: #ef4444;
}

.quick-win-item.priority-high {
    border-color: #f59e0b;
}

.quick-win-item.priority-medium {
    border-color: #10b981;
}

.quick-win-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.quick-win-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #10b981;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
}

.quick-win-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.dark .quick-win-title {
    color: #e5e7eb;
}

.quick-win-description {
    color: #6b7280;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.dark .quick-win-description {
    color: #9ca3af;
}

.quick-win-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #6b7280;
}

.dark .quick-win-meta {
    color: #9ca3af;
}

.next-steps {
    display: grid;
    gap: 1rem;
}

.next-step {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.dark .next-step {
    background: #1f2937;
    border-color: #374151;
}

.next-step:hover {
    border-color: #3b82f6;
    transform: translateX(4px);
}

.next-step.priority-critical {
    border-left: 4px solid #dc2626;
}

.next-step.priority-high {
    border-left: 4px solid #f59e0b;
}

.next-step.priority-medium {
    border-left: 4px solid #3b82f6;
}

.step-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    font-weight: bold;
}

.step-content {
    flex: 1;
}

.step-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.dark .step-title {
    color: #f9fafb;
}

.step-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}

/* Roadmap Actions */
.roadmap-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e7eb;
}

.dark .roadmap-actions {
    border-top-color: #374151;
}

.action-btn {
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 1rem;
}

.action-btn.primary {
    background: #3b82f6;
    color: white;
}

.action-btn.primary:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.action-btn.secondary {
    background: white;
    color: #3b82f6;
    border: 2px solid #3b82f6;
}

.dark .action-btn.secondary {
    background: #1f2937;
    color: #60a5fa;
    border-color: #3b82f6;
}

.action-btn.secondary:hover {
    background: #eff6ff;
}

.dark .action-btn.secondary:hover {
    background: #1e3a8a;
}

.action-btn.tertiary {
    background: transparent;
    color: #6b7280;
    border: 2px solid #d1d5db;
}

.action-btn.tertiary:hover {
    background: #f3f4f6;
    color: #374151;
}

.dark .action-btn.tertiary:hover {
    background: #374151;
    color: #d1d5db;
}

/* Roadmap Contact Section */
.roadmap-contact-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e7eb;
    text-align: center;
}

.dark .roadmap-contact-section {
    border-top-color: #374151;
}

.contact-description {
    color: #6b7280;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.dark .contact-description {
    color: #9ca3af;
}

.contact-btn {
    display: inline-block;
    text-decoration: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.contact-btn:active {
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .roadmap-document {
        padding: 1rem;
    }

    .roadmap-title {
        font-size: 1.5rem;
    }

    .roadmap-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .cost-summary {
        flex-direction: column;
        gap: 1.5rem;
    }

    .roadmap-actions {
        flex-direction: column;
    }

    .action-btn {
        width: 100%;
    }

    .roadmap-contact-section {
        padding: 1.5rem 1rem;
    }

    .contact-btn {
        width: 100%;
    }

    .layer-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .step-meta {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.modal-content {
    background: white;
    border-radius: 1rem;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.3s ease-out;
}

.dark .modal-content {
    background: #1f2937;
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.dark .modal-header {
    border-bottom-color: #374151;
}

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    margin: 0;
}

.dark .modal-header h2 {
    color: #f9fafb;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.dark .modal-close:hover {
    background: #374151;
    color: #f9fafb;
}

.modal-body {
    padding: 1.5rem;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.dark .form-group label {
    color: #d1d5db;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.2s;
    background: white;
    color: #1f2937;
}

.dark .form-input {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input::placeholder {
    color: #9ca3af;
}

.form-group-checkbox {
    display: flex;
    align-items: start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.form-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    cursor: pointer;
    flex-shrink: 0;
}

.form-group-checkbox label {
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #374151;
    margin: 0;
    cursor: pointer;
}

.dark .form-group-checkbox label {
    color: #d1d5db;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.modal-btn {
    flex: 1;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 1rem;
}

.modal-btn.primary {
    background: #3b82f6;
    color: white;
}

.modal-btn.primary:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
}

.modal-btn.primary:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.modal-btn.secondary {
    background: transparent;
    color: #6b7280;
    border: 2px solid #d1d5db;
}

.modal-btn.secondary:hover {
    background: #f3f4f6;
    color: #374151;
}

.dark .modal-btn.secondary {
    border-color: #4b5563;
    color: #9ca3af;
}

.dark .modal-btn.secondary:hover {
    background: #374151;
    color: #d1d5db;
}

/* Success Toast */
.success-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: white;
    border: 2px solid #10b981;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    animation: slideInRight 0.3s ease-out;
    max-width: 400px;
}

.dark .success-toast {
    background: #1f2937;
    border-color: #10b981;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.success-content {
    display: flex;
    gap: 1rem;
    align-items: start;
}

.success-icon {
    width: 2rem;
    height: 2rem;
    background: #10b981;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.success-content strong {
    display: block;
    color: #1f2937;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.dark .success-content strong {
    color: #f9fafb;
}

.success-content p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.dark .success-content p {
    color: #9ca3af;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .modal-content {
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    .modal-actions {
        flex-direction: column;
    }

    .success-toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
}

/* Print Styles (for PDF generation) */
@media print {
    .roadmap-actions {
        display: none;
    }

    .roadmap-document {
        max-width: 100%;
    }

    .timeline-quarter {
        page-break-inside: avoid;
    }

    .layer-analysis {
        page-break-inside: avoid;
    }
}

/* Inline Chat Panel Styles */
.inline-chat-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dark .inline-chat-panel {
    background: #1f2937;
    border-color: #374151;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.dark .chat-header {
    border-color: #374151;
}

.chat-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.dark .chat-header h4 {
    color: #f9fafb;
}

.close-chat {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.close-chat:hover {
    background: #f3f4f6;
    color: #374151;
}

.dark .close-chat:hover {
    background: #374151;
    color: #d1d5db;
}

.chat-context {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: #f9fafb;
    border-radius: 0.375rem;
}

.dark .chat-context {
    color: #9ca3af;
    background: #374151;
}

.chat-suggestions {
    margin-bottom: 0.75rem;
}

.chat-suggestions strong {
    display: block;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

.dark .chat-suggestions strong {
    color: #d1d5db;
}

.suggestion-btn {
    display: inline-block;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    margin: 0.125rem 0.25rem 0.125rem 0;
    font-size: 0.75rem;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.suggestion-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.dark .suggestion-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark .suggestion-btn:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.chat-messages {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: #f9fafb;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
}

.dark .chat-messages {
    background: #374151;
    border-color: #4b5563;
}

.chat-msg {
    margin-bottom: 0.75rem;
}

.chat-msg:last-child {
    margin-bottom: 0;
}

.chat-msg.user {
    text-align: right;
}

.chat-msg.assistant {
    text-align: left;
}

.chat-msg-content {
    display: inline-block;
    max-width: 80%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.chat-msg.user .chat-msg-content {
    background: #3b82f6;
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.chat-msg.assistant .chat-msg-content {
    background: #ffffff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 0.25rem;
}

.dark .chat-msg.assistant .chat-msg-content {
    background: #1f2937;
    color: #f9fafb;
    border-color: #374151;
}

.chat-input-area {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.chat-input-area textarea {
    flex: 1;
    min-height: 2.5rem;
    max-height: 6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    resize: vertical;
    background: #ffffff;
    color: #374151;
}

.dark .chat-input-area textarea {
    background: #1f2937;
    border-color: #4b5563;
    color: #f9fafb;
}

.chat-input-area textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.send-chat-btn {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.send-chat-btn:hover {
    background: #2563eb;
}

.send-chat-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Wizard Secondary Button */
.wizard-secondary-btn {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0.25rem;
    position: relative;
    z-index: 100;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.wizard-secondary-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.dark .wizard-secondary-btn {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}

.dark .wizard-secondary-btn:hover {
    background: #4b5563;
    border-color: #6b7280;
}

/* Report Q&A Panel */
.report-qa-panel {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    margin: 1rem 0;
}

.qa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.qa-header h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.qa-context {
    background: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
    border-left: 3px solid #3b82f6;
}

.qa-suggestions {
    margin-bottom: 1rem;
}

.qa-suggestions strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
}

.qa-suggestions .suggestion-btn {
    display: inline-block;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    margin: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qa-suggestions .suggestion-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.qa-messages {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.qa-input-area {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.qa-input-area textarea {
    flex: 1;
    min-height: 2.5rem;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
}

.qa-input-area textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dark mode support for report Q&A */
.dark .report-qa-panel {
    background: #1f2937;
    color: #f9fafb;
}

.dark .qa-header {
    border-bottom-color: #374151;
}

.dark .qa-header h4 {
    color: #f9fafb;
}

.dark .qa-context {
    background: #374151;
    color: #d1d5db;
    border-left-color: #60a5fa;
}

.dark .qa-suggestions strong {
    color: #d1d5db;
}

.dark .qa-suggestions .suggestion-btn {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}

.dark .qa-suggestions .suggestion-btn:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.dark .qa-messages {
    background: #374151;
    border-color: #4b5563;
}

.dark .qa-input-area textarea {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark .qa-input-area textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

/* Context Modal Styles */
.context-option {
    display: block;
    cursor: pointer;
    transition: all 0.2s;
}

.context-option-content {
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s;
}

.context-option:hover .context-option-content {
    border-color: #3b82f6;
    background-color: #f8fafc;
}

.context-option.active .context-option-content {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.context-tag {
    display: inline-block;
    cursor: pointer;
}

.context-tag-content {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.context-tag:hover .context-tag-content {
    border-color: #3b82f6;
    background-color: #f8fafc;
}

.context-tag.active .context-tag-content {
    border-color: #3b82f6;
    background-color: #eff6ff;
    color: #1d4ed8;
}

/* Dark mode for context modal */
.dark .context-option-content {
    border-color: #374151;
    background-color: #1f2937;
    color: #f9fafb;
}

.dark .context-option:hover .context-option-content {
    border-color: #60a5fa;
    background-color: #1e3a8a;
}

.dark .context-option.active .context-option-content {
    border-color: #60a5fa;
    background-color: #1e40af;
}

.dark .context-tag-content {
    border-color: #374151;
    background-color: #1f2937;
    color: #d1d5db;
}

.dark .context-tag:hover .context-tag-content {
    border-color: #60a5fa;
    background-color: #1e3a8a;
}

.dark .context-tag.active .context-tag-content {
    border-color: #60a5fa;
    background-color: #1e40af;
    color: #60a5fa;
}

/* Outcome Mapping Styles */
.mapping-result { max-width: 800px; }
.mapping-result h3 { font-size: 1.5rem; margin-bottom: 1.5rem; color: #3b82f6; }
.mapping-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #1f2937; }
.mapping-section:last-of-type { border-bottom: none; }
.mapping-section h4 { font-size: 1.125rem; margin-bottom: 1rem; color: #e5e7eb; }
.approach-card { padding: 1.5rem; background: #1e293b; border-left: 4px solid #3b82f6; border-radius: 0.5rem; }
.approach-card.multi-layer-platform { border-left-color: #8b5cf6; background: linear-gradient(135deg, #1e293b 0%, #2d1b4e 100%); }
.approach-card.hyperscaler { border-left-color: #06b6d4; background: linear-gradient(135deg, #1e293b 0%, #1a3a42 100%); }
.approach-card.best-of-breed { border-left-color: #10b981; background: linear-gradient(135deg, #1e293b 0%, #1a3d32 100%); }
.approach-type { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; margin-bottom: 0.75rem; }
.approach-card p { color: #d1d5db; line-height: 1.6; margin: 0; }
.layer-requirement { padding: 1rem; border-radius: 0.5rem; margin-bottom: 0.75rem; border-left: 3px solid; }
.layer-requirement.critical { background: #2d1317; border-left-color: #ef4444; }
.layer-requirement.required { background: #2d2410; border-left-color: #f59e0b; }
.layer-requirement.recommended { background: #162d1a; border-left-color: #10b981; }
.layer-name { font-weight: 600; margin-bottom: 0.5rem; font-size: 1rem; }
.layer-reasons { list-style: none; padding: 0; margin: 0; }
.layer-reasons li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; color: #9ca3af; font-size: 0.9375rem; line-height: 1.5; }
.layer-reasons li:before { content: "→"; position: absolute; left: 0; color: #6b7280; }
.layer-reasons li:last-child { margin-bottom: 0; }
.layer-sequence { display: flex; flex-direction: column; gap: 0.5rem; }
.sequence-step { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: #1e293b; border-radius: 0.5rem; }
.sequence-number { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #3b82f6; color: white; border-radius: 50%; font-weight: 600; flex-shrink: 0; }
.sequence-layer { flex: 1; font-size: 0.9375rem; }
.rationale-card { background: #1e293b; padding: 1rem; border-radius: 0.5rem; }
.rationale-item { margin-bottom: 0.75rem; line-height: 1.5; font-size: 0.9375rem; }
.rationale-item:last-child { margin-bottom: 0; }
.rationale-item strong { color: #3b82f6; }
.mapping-actions { display: flex; gap: 1rem; justify-content: flex-end; padding-top: 1.5rem; border-top: 1px solid #1f2937; }
.wizard-secondary-btn { padding: 0.75rem 1.5rem; background: transparent; border: 2px solid #374151; border-radius: 0.5rem; color: #e5e7eb; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.wizard-secondary-btn:hover { background: #1f2937; border-color: #4b5563; }
@media (max-width: 768px) { .mapping-actions { flex-direction: column; } .wizard-continue-btn, .wizard-secondary-btn { width: 100%; } .sequence-step { flex-direction: column; align-items: flex-start; } }

/* Enhanced wizard styles (Slice 1) */
.wizard-options { display: grid; gap: 0.75rem; }
.wizard-option { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: #0f172a; border: 2px solid #1f2937; border-radius: 0.75rem; cursor: pointer; transition: all 0.2s; text-align: left; width: 100%; }
.wizard-option:hover { border-color: #2563eb; background: #1e293b; }
.wizard-option:active { transform: scale(0.98); }
.option-emoji { font-size: 1.5rem; flex-shrink: 0; }
.option-content { flex: 1; }
.option-label { font-weight: 600; margin-bottom: 0.25rem; }
.option-description { font-size: 0.875rem; color: #9ca3af; line-height: 1.4; }
.wizard-checkbox { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: #0f172a; border: 2px solid #1f2937; border-radius: 0.75rem; cursor: pointer; transition: all 0.2s; }
.wizard-checkbox:hover { border-color: #2563eb; background: #1e293b; }
.wizard-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0 0; cursor: pointer; flex-shrink: 0; }
.wizard-checkbox input[type="checkbox"]:checked { accent-color: #2563eb; }
.multi-select-note { font-size: 0.875rem; color: #9ca3af; margin-bottom: 1rem; padding: 0.75rem; background: #1e293b; border-radius: 0.5rem; border-left: 3px solid #2563eb; }
.other-input { width: 100%; padding: 0.75rem; background: #0f172a; border: 2px solid #1f2937; border-radius: 0.5rem; color: #e5e7eb; font-family: inherit; font-size: 0.9375rem; resize: vertical; transition: border-color 0.2s; }
.other-input:focus { outline: none; border-color: #2563eb; }
.other-input::placeholder { color: #6b7280; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid #1f2937; border-top-color: #2563eb; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.wizard-message-bubble:has(button:disabled), .wizard-message-bubble:has(input:disabled) { opacity: 0.6; pointer-events: none; }

/* Slice 3 - Solution Search UI */
.solution-search-loading { text-align: center; padding: 4rem 2rem; max-width: 600px; margin: 0 auto; }
.solution-search-loading h3 { font-size: 1.5rem; margin: 1.5rem 0 0.5rem; }
.solution-search-loading p { color: #9ca3af; line-height: 1.6; margin: 0.5rem 0; }
.loading-detail { font-size: 0.875rem; font-style: italic; }
.solution-results { padding: 2rem; max-width: 1200px; margin: 0 auto; }
.solution-header { text-align: center; margin-bottom: 3rem; }
.solution-header h2 { font-size: 2rem; margin-bottom: 0.5rem; }
.solution-subtitle { color: #9ca3af; font-size: 1rem; }
.solution-category { margin-bottom: 3rem; }
.category-header { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: #1e293b; border-radius: 1rem; margin-bottom: 1.5rem; border: 2px solid #1f2937; }
.category-header.recommended { border-color: #8b5cf6; background: linear-gradient(135deg, #1e293b 0%, #2d1b4e 100%); }
.category-icon { font-size: 2rem; }
.category-header h3 { margin: 0 0 0.25rem 0; font-size: 1.5rem; }
.category-header p { margin: 0; color: #9ca3af; font-size: 0.9375rem; }
.recommended-badge { display: inline-block; margin-top: 0.5rem; padding: 0.25rem 0.75rem; background: #8b5cf6; color: white; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.solution-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 1.5rem; }
@media (max-width: 768px) { .solution-grid { grid-template-columns: 1fr; } }
.solution-card { background: #111827; border: 2px solid #1f2937; border-radius: 1rem; padding: 1.5rem; transition: all 0.2s; display: flex; flex-direction: column; }
.solution-card:hover { border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.solution-card.selected { border-color: #3b82f6; background: #1e293b; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.solution-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.solution-checkbox-label { display: flex; align-items: center; gap: 0.75rem; flex: 1; cursor: pointer; }
.solution-checkbox { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: #3b82f6; flex-shrink: 0; }
.solution-card-header h4 { margin: 0; font-size: 1.25rem; flex: 1; cursor: pointer; }
.solution-select-instructions { color: #9ca3af; font-size: 0.9375rem; margin-top: 0.5rem; }

/* Required Layers Summary */
.required-layers-summary {
    background: #1e293b;
    border: 2px solid #1f2937;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

.required-layers-summary h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: #e5e7eb;
}

.layers-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.layers-group h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.layers-group.critical h4 {
    color: #fca5a5;
}

.layers-group.required h4 {
    color: #fcd34d;
}

.layer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.layer-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 2px solid;
    transition: all 0.2s;
}

.layer-tag.critical {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #fca5a5;
}

.layer-tag.required {
    background: rgba(234, 179, 8, 0.1);
    border-color: #eab308;
    color: #fcd34d;
}

.layer-tag.covered {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    color: #86efac;
    position: relative;
}

.layer-tag.covered::after {
    content: ' ✓';
    font-weight: bold;
}

/* Layer Coverage Tracker */
.layer-coverage-tracker {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #111827;
    border-radius: 0.5rem;
    border: 1px solid #1f2937;
}

.coverage-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.coverage-label {
    font-weight: 600;
    color: #9ca3af;
}

.coverage-count {
    font-weight: 700;
    font-size: 1.125rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
}

.coverage-count.low {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
}

.coverage-count.partial {
    color: #fcd34d;
    background: rgba(234, 179, 8, 0.1);
}

.coverage-count.good {
    color: #86efac;
    background: rgba(34, 197, 94, 0.1);
}

.coverage-count.complete {
    color: #86efac;
    background: rgba(34, 197, 94, 0.2);
}

.coverage-progress-bar {
    width: 100%;
    height: 0.5rem;
    background: #1f2937;
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.coverage-progress-fill {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 0.25rem;
}

.coverage-progress-fill.low {
    background: #ef4444;
}

.coverage-progress-fill.partial {
    background: #eab308;
}

.coverage-progress-fill.good {
    background: #22c55e;
}

.coverage-progress-fill.complete {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.missing-layers {
    font-size: 0.875rem;
    color: #9ca3af;
}

.missing-layers strong {
    color: #e5e7eb;
}

.missing-layers.complete {
    color: #86efac;
}

.missing-layers.complete strong {
    color: #86efac;
}

/* Single Solution Warning */
.single-solution-warning {
    background: rgba(234, 179, 8, 0.1);
    border: 2px solid #eab308;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1.5rem 0;
    color: #fcd34d;
    font-size: 0.9375rem;
}

.single-solution-warning strong {
    color: #fcd34d;
}

/* Continue Building Screen */
.layer-coverage-summary {
    background: #1e293b;
    border: 2px solid #1f2937;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.layer-coverage-summary h3 {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    color: #e5e7eb;
}

.covered-layers {
    color: #86efac;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 0.375rem;
    border-left: 3px solid #22c55e;
}

.missing-layers-warning {
    color: #fcd34d;
    padding: 0.75rem;
    background: rgba(234, 179, 8, 0.1);
    border-radius: 0.375rem;
    border-left: 3px solid #eab308;
}

.missing-layers-warning .warning-note {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #fcd34d;
    opacity: 0.9;
}

.all-layers-covered {
    color: #86efac;
    padding: 0.75rem;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 0.375rem;
    border-left: 3px solid #22c55e;
    text-align: center;
}

.solution-selection-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid #1f2937; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.selection-summary { color: #d1d5db; font-size: 0.9375rem; font-weight: 500; }
.selected-solutions-list { list-style: none; padding: 0; margin: 1rem 0; }
.selected-solutions-list li { padding: 0.5rem 1rem; background: #1e293b; border: 1px solid #3b82f6; border-radius: 0.5rem; margin-bottom: 0.5rem; color: #d1d5db; }

.selected-solution-item {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

.solution-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.solution-item-header strong {
    font-size: 1.125rem;
    color: #e5e7eb;
}

.solution-category-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: #3b82f6;
    color: white;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.solution-item-layers {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.solution-item-pricing {
    font-size: 0.875rem;
    color: #86efac;
    margin-top: 0.25rem;
}
.layer-2c-badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; background: #8b5cf6; border-radius: 0.25rem; white-space: nowrap; }
.solution-coverage { margin-bottom: 1rem; }
.coverage-bar { height: 8px; background: #1f2937; border-radius: 999px; overflow: hidden; margin-bottom: 0.5rem; }
.coverage-fill { height: 100%; background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 100%); transition: width 0.3s; }
.coverage-text { font-size: 0.875rem; color: #9ca3af; }
.solution-layers { margin-bottom: 1rem; }
.layers-label { font-size: 0.875rem; color: #9ca3af; margin-bottom: 0.5rem; }
.layer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.layer-badge { padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; border: 1px solid; }
.layer-badge.critical { background: #2d1317; border-color: #ef4444; color: #fca5a5; }
.layer-badge.required { background: #2d2410; border-color: #f59e0b; color: #fcd34d; }
.layer-badge.recommended { background: #162d1a; border-color: #10b981; color: #6ee7b7; }
.layer-badge.optional { background: #1e293b; border-color: #4b5563; color: #9ca3af; }
.solution-why { line-height: 1.6; color: #d1d5db; margin-bottom: 1rem; flex: 1; }
.solution-outcomes { margin-bottom: 1rem; }
.outcomes-label { font-size: 0.875rem; color: #9ca3af; margin-bottom: 0.5rem; }
.outcome-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.outcome-tag { padding: 0.25rem 0.75rem; background: #1e293b; border: 1px solid #374151; border-radius: 999px; font-size: 0.8125rem; color: #3b82f6; }
.solution-pricing, .solution-best-for { font-size: 0.9375rem; color: #d1d5db; margin-bottom: 0.75rem; line-height: 1.5; }
.solution-pricing strong, .solution-best-for strong { color: #e5e7eb; }
.solution-card-actions { display: flex; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #1f2937; }
.solution-card-actions .btn { flex: 1; padding: 0.75rem 1rem; font-size: 0.9375rem; }
.solution-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #1f2937; }
.solution-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 2rem; }
.solution-modal-content { background: #111827; border: 2px solid #1f2937; border-radius: 1rem; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; }
.solution-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid #1f2937; }
.solution-modal-header h2 { margin: 0; font-size: 1.5rem; }
.modal-close { background: none; border: none; color: #9ca3af; font-size: 2rem; cursor: pointer; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; transition: all 0.2s; }
.modal-close:hover { background: #1f2937; color: #e5e7eb; }
.solution-modal-body { padding: 1.5rem; }
.detail-section { margin-bottom: 1.5rem; }
.detail-section:last-child { margin-bottom: 0; }
.detail-section h3 { font-size: 1.125rem; margin: 0 0 0.5rem 0; color: #3b82f6; }
.detail-section p { margin: 0; line-height: 1.6; color: #d1d5db; }
.solution-modal-actions { display: flex; gap: 1rem; padding: 1.5rem; border-top: 1px solid #1f2937; }
.solution-modal-actions .btn { flex: 1; }

/* Slice 4 - Roadmap UI */
.stack-completion { max-width: 700px; margin: 4rem auto; text-align: center; padding: 2rem; }
.completion-icon { font-size: 5rem; color: #10b981; margin-bottom: 1rem; animation: scaleIn 0.5s ease; }
@keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.stack-completion h2 { font-size: 2rem; margin-bottom: 1rem; }
.completion-message { font-size: 1.125rem; color: #d1d5db; margin-bottom: 2rem; line-height: 1.6; }
.completion-card { background: #1e293b; border: 2px solid #10b981; border-radius: 1rem; padding: 1.5rem; margin-bottom: 2rem; text-align: left; }
.completion-card h3 { margin-top: 0; color: #10b981; }
.solution-summary { display: grid; gap: 1rem; }
.summary-item { padding: 0.75rem; background: #0f172a; border-radius: 0.5rem; border-left: 3px solid #10b981; }
.completion-actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.btn.large { padding: 1rem 2rem; font-size: 1.125rem; }
.roadmap-generating { text-align: center; padding: 4rem 2rem; max-width: 600px; margin: 0 auto; }
.roadmap-generating h3 { font-size: 1.5rem; margin: 1.5rem 0 0.5rem; }
.roadmap-display { max-width: 900px; margin: 0 auto; padding: 2rem; }
.roadmap-header { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 2px solid #1f2937; }
.roadmap-header h1 { font-size: 2.5rem; margin-bottom: 1.5rem; color: #3b82f6; }
.roadmap-actions-top { display: flex; gap: 1rem; justify-content: center; }
.roadmap-toc { background: #1e293b; border: 2px solid #374151; border-radius: 1rem; padding: 1.5rem; margin-bottom: 3rem; }
.roadmap-toc h3 { margin-top: 0; color: #3b82f6; }
.roadmap-toc ul { list-style: none; padding: 0; margin: 0; }
.roadmap-toc li { padding: 0.5rem 0; border-bottom: 1px solid #374151; }
.roadmap-toc li:last-child { border-bottom: none; }
.roadmap-toc a { color: #e5e7eb; text-decoration: none; transition: color 0.2s; }
.roadmap-toc a:hover { color: #3b82f6; }
.roadmap-content { margin-bottom: 3rem; }
.roadmap-section { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid #1f2937; }
.roadmap-section:last-child { border-bottom: none; }
.roadmap-section h2 { font-size: 1.75rem; color: #3b82f6; margin-bottom: 1.5rem; }
.roadmap-section h3 { font-size: 1.375rem; margin: 1.5rem 0 1rem; }
.roadmap-section h4 { font-size: 1.125rem; margin: 1rem 0 0.75rem; }
.section-content { line-height: 1.7; color: #d1d5db; }
.section-content p { margin: 1rem 0; }
.section-content ul, .section-content ol { margin: 1rem 0; padding-left: 1.5rem; }
.section-content li { margin: 0.5rem 0; }
.section-content strong { color: #e5e7eb; }
.section-content em { color: #9ca3af; }
.roadmap-footer { text-align: center; padding-top: 2rem; border-top: 2px solid #1f2937; }
.footer-note { color: #6b7280; font-size: 0.875rem; margin-bottom: 1.5rem; }
.roadmap-actions-bottom { display: flex; gap: 1rem; justify-content: center; }
.email-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 2rem; }
.email-modal-content { background: #111827; border: 2px solid #1f2937; border-radius: 1rem; max-width: 500px; width: 100%; }
.email-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid #1f2937; }
.email-modal-body { padding: 1.5rem; }
.email-modal-body p { margin: 0 0 1rem; color: #d1d5db; }
.email-input { width: 100%; padding: 0.75rem; background: #0f172a; border: 2px solid #374151; border-radius: 0.5rem; color: #e5e7eb; font-size: 1rem; margin-bottom: 0.75rem; }
.email-input:focus { outline: none; border-color: #3b82f6; }
.email-note { font-size: 0.875rem; color: #6b7280; font-style: italic; }
.email-modal-actions { display: flex; gap: 1rem; padding: 1.5rem; border-top: 1px solid #1f2937; }
.email-modal-actions .btn { flex: 1; }
.toast-notification { position: fixed; bottom: 2rem; right: 2rem; padding: 1rem 1.5rem; background: #111827; border: 2px solid; border-radius: 0.5rem; font-weight: 600; z-index: 1001; animation: slideInUp 0.3s ease; }
.toast-notification.success { border-color: #10b981; color: #10b981; }
@keyframes slideInUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 768px) { .roadmap-display { padding: 1rem; } .roadmap-header h1 { font-size: 1.75rem; } .roadmap-actions-top, .roadmap-actions-bottom { flex-direction: column; } .roadmap-actions-top .btn, .roadmap-actions-bottom .btn { width: 100%; } }

/* Solution Chat Panel */
.solution-chat-section {
    margin-top: 2rem;
    border-top: 2px solid #374151;
    padding-top: 1.5rem;
}

.chat-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #1e293b;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.chat-toggle-header:hover {
    background: #1f2937;
}

.dark .chat-toggle-header {
    background: #1f2937;
}

.chat-toggle-header span:first-child {
    color: #e5e7eb;
    font-weight: 500;
}

.chat-toggle-header span:last-child {
    color: #9ca3af;
    font-size: 0.875rem;
}

.solution-chat-section .chat-panel {
    background: #111827;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.5rem;
}

.solution-chat-section .chat-messages {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #0f172a;
    border-radius: 0.375rem;
    border: 1px solid #374151;
    min-height: 100px;
}

.solution-chat-section .chat-message {
    margin-bottom: 1rem;
}

.solution-chat-section .chat-message:last-child {
    margin-bottom: 0;
}

.solution-chat-section .chat-message-bubble {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    max-width: 80%;
    word-wrap: break-word;
}

.solution-chat-section .user-bubble {
    background: #3b82f6;
    color: white;
    margin-left: auto;
    text-align: right;
}

.solution-chat-section .ai-bubble {
    background: #374151;
    color: #e5e7eb;
    margin-right: auto;
}

.solution-chat-section .chat-input-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.solution-chat-section .chat-input {
    flex: 1;
    padding: 0.75rem;
    background: #0f172a;
    border: 1px solid #374151;
    border-radius: 0.375rem;
    color: #e5e7eb;
    font-size: 0.875rem;
}

.solution-chat-section .chat-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.solution-chat-section .chat-send-btn {
    padding: 0.75rem 1.5rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.solution-chat-section .chat-send-btn:hover {
    background: #2563eb;
}

.solution-chat-section .chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.solution-chat-section .suggestion-chip {
    padding: 0.5rem 0.75rem;
    background: #1e293b;
    border: 1px solid #374151;
    border-radius: 1rem;
    color: #d1d5db;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.solution-chat-section .suggestion-chip:hover {
    background: #374151;
    border-color: #3b82f6;
    color: #3b82f6;
}

.typing-indicator {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
}

.typing-indicator span {
    width: 0.5rem;
    height: 0.5rem;
    background: #6b7280;
    border-radius: 50%;
    animation: typing 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }
    30% { transform: translateY(-0.5rem); opacity: 1; }
}