Spaces:
Running
Running
| /* Base & Reset */ | |
| :root { | |
| --primary-bg: #0a192f; | |
| --secondary-bg: #112240; | |
| --accent-color: #64ffda; | |
| --text-primary: #e6f1ff; | |
| --text-secondary: #8892b0; | |
| --panel-bg: #172a45; | |
| --hover-color: rgba(100, 255, 218, 0.1); | |
| --border-color: #233554; | |
| --success-color: #64ffda; | |
| --warning-color: #ffb347; | |
| --error-color: #ff6464; | |
| --card-bg: #1d3b65; | |
| --input-bg: #0a192f; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.3); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; | |
| } | |
| body { | |
| background-color: var(--primary-bg); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| button, input, select, textarea { | |
| font-family: inherit; | |
| font-size: inherit; | |
| color: inherit; | |
| } | |
| button { | |
| cursor: pointer; | |
| border: none; | |
| background: none; | |
| } | |
| ul, ol { | |
| list-style-position: inside; | |
| padding-left: 1rem; | |
| } | |
| /* Layout */ | |
| .app-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| padding: 0 1rem; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 0; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo h1 { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| color: var(--accent-color); | |
| } | |
| nav { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .nav-button { | |
| padding: 0.5rem 1rem; | |
| color: var(--text-secondary); | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| } | |
| .nav-button:hover, .nav-button.active { | |
| background-color: var(--hover-color); | |
| color: var(--accent-color); | |
| } | |
| main { | |
| flex: 1; | |
| padding: 1rem 0; | |
| } | |
| /* Tabs */ | |
| .tab-content { | |
| display: none; | |
| min-height: calc(100vh - 120px); | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* Research Hub Layout */ | |
| .panel-layout { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 1rem; | |
| height: calc(100vh - 120px); | |
| } | |
| .side-panel { | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .search-container { | |
| padding: 1rem; | |
| display: flex; | |
| gap: 0.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| #search-input { | |
| flex: 1; | |
| background-color: var(--input-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| padding: 0.5rem; | |
| color: var(--text-primary); | |
| } | |
| #add-topic-btn { | |
| background-color: var(--accent-color); | |
| color: var(--primary-bg); | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 4px; | |
| font-weight: bold; | |
| font-size: 1.2rem; | |
| } | |
| .research-topics { | |
| overflow-y: auto; | |
| flex: 1; | |
| } | |
| .topic { | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .topic-header { | |
| padding: 0.75rem 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| } | |
| .topic.active .topic-header { | |
| background-color: var(--hover-color); | |
| } | |
| .topic-title { | |
| font-weight: 500; | |
| } | |
| .topic-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .topic-expanded { | |
| color: var(--accent-color); | |
| font-weight: bold; | |
| } | |
| .subtopics { | |
| padding: 0.5rem 0; | |
| border-top: 1px solid var(--border-color); | |
| background-color: var(--primary-bg); | |
| } | |
| .subtopics.hidden { | |
| display: none; | |
| } | |
| .subtopic { | |
| padding: 0.5rem 1rem 0.5rem 2rem; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| transition: all 0.2s ease; | |
| } | |
| .subtopic:hover, .subtopic.active { | |
| color: var(--accent-color); | |
| background-color: var(--hover-color); | |
| } | |
| .main-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| overflow: hidden; | |
| } | |
| .content-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .action-buttons { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .action-button { | |
| padding: 0.5rem 1rem; | |
| background-color: var(--panel-bg); | |
| border-radius: 4px; | |
| color: var(--text-primary); | |
| transition: all 0.2s ease; | |
| } | |
| .action-button:hover { | |
| background-color: var(--hover-color); | |
| color: var(--accent-color); | |
| } | |
| .content-area { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 1rem; | |
| overflow: hidden; | |
| flex: 1; | |
| } | |
| #editor-container { | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| overflow-y: auto; | |
| min-height: 600px; | |
| } | |
| #editor { | |
| outline: none; | |
| min-height: 100%; | |
| } | |
| #editor h3 { | |
| margin-top: 1rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--accent-color); | |
| } | |
| #editor h4 { | |
| margin-top: 1rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-primary); | |
| } | |
| #editor p { | |
| margin-bottom: 1rem; | |
| } | |
| #editor ul, #editor ol { | |
| margin-bottom: 1rem; | |
| } | |
| .content-tools { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| overflow-y: auto; | |
| } | |
| .tool-section { | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| } | |
| .tool-section h3 { | |
| margin-bottom: 0.5rem; | |
| color: var(--accent-color); | |
| font-size: 1rem; | |
| } | |
| .insight-item { | |
| margin-bottom: 0.5rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .insight-header { | |
| padding: 0.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| background-color: var(--panel-bg); | |
| cursor: pointer; | |
| } | |
| .insight-expand { | |
| color: var(--accent-color); | |
| font-weight: bold; | |
| } | |
| .insight-content { | |
| padding: 0.5rem; | |
| background-color: var(--secondary-bg); | |
| } | |
| .insight-content.hidden { | |
| display: none; | |
| } | |
| .ai-prompt { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| #ai-prompt-input { | |
| width: 100%; | |
| height: 80px; | |
| padding: 0.5rem; | |
| background-color: var(--input-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| color: var(--text-primary); | |
| resize: none; | |
| } | |
| #ai-prompt-btn { | |
| align-self: flex-end; | |
| padding: 0.5rem 1rem; | |
| background-color: var(--accent-color); | |
| color: var(--primary-bg); | |
| border-radius: 4px; | |
| font-weight: 500; | |
| } | |
| .ai-response { | |
| margin-top: 0.5rem; | |
| padding: 0.5rem; | |
| background-color: var(--panel-bg); | |
| border-radius: 4px; | |
| font-style: italic; | |
| color: var(--text-secondary); | |
| } | |
| #generating-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--accent-color); | |
| font-style: italic; | |
| } | |
| /* Idea Generator */ | |
| .idea-generator-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .idea-input { | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .idea-input h2 { | |
| color: var(--accent-color); | |
| } | |
| .concept-selectors { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .concept-group h3 { | |
| font-size: 1rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-primary); | |
| } | |
| .tag-selection { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .tag { | |
| padding: 0.25rem 0.75rem; | |
| background-color: var(--panel-bg); | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .tag:hover { | |
| background-color: var(--hover-color); | |
| } | |
| .tag.selected { | |
| background-color: var(--accent-color); | |
| color: var(--primary-bg); | |
| } | |
| .generation-controls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| #generate-ideas-btn { | |
| padding: 0.75rem; | |
| background-color: var(--accent-color); | |
| color: var(--primary-bg); | |
| border-radius: 4px; | |
| font-weight: 500; | |
| text-align: center; | |
| } | |
| .slider-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| #innovation-slider { | |
| flex: 1; | |
| height: 6px; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: var(--border-color); | |
| outline: none; | |
| border-radius: 3px; | |
| } | |
| #innovation-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--accent-color); | |
| cursor: pointer; | |
| } | |
| .generated-ideas { | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| overflow-y: auto; | |
| max-height: calc(100vh - 150px); | |
| } | |
| .generated-ideas h3 { | |
| color: var(--accent-color); | |
| } | |
| .ideas-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .idea-card { | |
| background-color: var(--panel-bg); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| border-left: 3px solid var(--accent-color); | |
| } | |
| .idea-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.5rem; | |
| } | |
| .idea-rating { | |
| display: flex; | |
| } | |
| .star { | |
| color: var(--border-color); | |
| } | |
| .star.filled { | |
| color: var(--accent-color); | |
| } | |
| .idea-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.25rem; | |
| margin: 0.5rem 0; | |
| } | |
| .idea-tag { | |
| font-size: 0.75rem; | |
| padding: 0.1rem 0.5rem; | |
| background-color: var(--secondary-bg); | |
| border-radius: 20px; | |
| } | |
| .idea-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| .idea-actions button { | |
| padding: 0.25rem 0.5rem; | |
| font-size: 0.75rem; | |
| border-radius: 4px; | |
| background-color: var(--primary-bg); | |
| transition: all 0.2s ease; | |
| } | |
| .idea-actions button:hover { | |
| background-color: var(--hover-color); | |
| color: var(--accent-color); | |
| } | |
| .idea-monetization { | |
| margin: 0.5rem 0; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| background-color: var(--primary-bg); | |
| padding: 0.5rem; | |
| border-radius: 4px; | |
| } | |
| /* Monetization */ | |
| .monetization-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .revenue-paths { | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .revenue-paths h2 { | |
| color: var(--accent-color); | |
| } | |
| .timeline { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .timeline-header { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| text-align: center; | |
| font-weight: 500; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .timeline-container { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 0.5rem; | |
| } | |
| .timeline-segment { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| } | |
| .timeline-segment.immediate { | |
| background-color: rgba(100, 255, 218, 0.05); | |
| border-radius: 8px; | |
| } | |
| .timeline-segment.mid-term { | |
| background-color: rgba(100, 255, 218, 0.03); | |
| border-radius: 8px; | |
| } | |
| .timeline-segment.long-term { | |
| background-color: rgba(100, 255, 218, 0.01); | |
| border-radius: 8px; | |
| } | |
| .revenue-card { | |
| background-color: var(--panel-bg); | |
| padding: 0.75rem; | |
| border-radius: 4px; | |
| } | |
| .revenue-card h3 { | |
| font-size: 0.9rem; | |
| color: var(--accent-color); | |
| margin-bottom: 0.25rem; | |
| } | |
| .revenue-metric { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .metric-label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| .metric-value { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .revenue-card p { | |
| font-size: 0.8rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .expand-strategy { | |
| font-size: 0.75rem; | |
| padding: 0.25rem 0.5rem; | |
| background-color: var(--primary-bg); | |
| border-radius: 4px; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .action-plan { | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .action-plan-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .action-plan h2 { | |
| color: var(--accent-color); | |
| } | |
| #generate-plan-btn { | |
| padding: 0.5rem 1rem; | |
| background-color: var(--panel-bg); | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| } | |
| #generate-plan-btn:hover { | |
| background-color: var(--hover-color); | |
| color: var(--accent-color); | |
| } | |
| .action-timeline { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .action-week { | |
| padding: 1rem; | |
| background-color: var(--panel-bg); | |
| border-radius: 8px; | |
| } | |
| .action-week h3 { | |
| font-size: 0.9rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--accent-color); | |
| } | |
| .action-items { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .action-item { | |
| display: flex; | |
| gap: 0.5rem; | |
| align-items: flex-start; | |
| } | |
| .action-item input[type="checkbox"] { | |
| margin-top: 0.25rem; | |
| accent-color: var(--accent-color); | |
| } | |
| /* Settings */ | |
| .settings-container { | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .settings-container h2 { | |
| color: var(--accent-color); | |
| margin-bottom: 1.5rem; | |
| } | |
| .settings-section { | |
| margin-bottom: 2rem; | |
| padding-bottom: 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .settings-section h3 { | |
| margin-bottom: 1rem; | |
| color: var(--text-primary); | |
| } | |
| .setting-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .setting-item.checkbox { | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .setting-item label { | |
| color: var(--text-secondary); | |
| } | |
| .setting-item select, .setting-item input[type="text"] { | |
| padding: 0.5rem; | |
| background-color: var(--input-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| color: var(--text-primary); | |
| } | |
| .setting-item input[type="range"] { | |
| width: 100%; | |
| height: 6px; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: var(--border-color); | |
| outline: none; | |
| border-radius: 3px; | |
| } | |
| .setting-item input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--accent-color); | |
| cursor: pointer; | |
| } | |
| .range-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| .setting-item input[type="checkbox"] { | |
| accent-color: var(--accent-color); | |
| } | |
| .settings-actions { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: flex-end; | |
| } | |
| .settings-actions button { | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| } | |
| #save-settings { | |
| background-color: var(--accent-color); | |
| color: var(--primary-bg); | |
| } | |
| #reset-defaults { | |
| background-color: var(--panel-bg); | |
| } | |
| /* Collaboration Panel */ | |
| .collaboration-panel { | |
| position: fixed; | |
| right: 1rem; | |
| bottom: 1rem; | |
| width: 320px; | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| flex-direction: column; | |
| max-height: 400px; | |
| z-index: 1000; | |
| } | |
| .collab-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.75rem 1rem; | |
| background-color: var(--panel-bg); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .collab-header h3 { | |
| font-size: 0.9rem; | |
| color: var(--accent-color); | |
| } | |
| #close-collab { | |
| font-size: 1.2rem; | |
| color: var(--text-secondary); | |
| } | |
| .collaborators { | |
| display: flex; | |
| padding: 0.5rem 1rem; | |
| gap: 0.5rem; | |
| align-items: center; | |
| border-bottom: 1px solid var(--border-color); | |
| overflow-x: auto; | |
| } | |
| .collaborator { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| font-size: 0.8rem; | |
| white-space: nowrap; | |
| } | |
| .collaborator-avatar { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.7rem; | |
| font-weight: bold; | |
| } | |
| .collaborator-status { | |
| font-size: 0.8rem; | |
| } | |
| .collaborator-status.active { | |
| color: var(--success-color); | |
| } | |
| #invite-collaborator { | |
| margin-left: auto; | |
| font-size: 0.7rem; | |
| color: var(--accent-color); | |
| white-space: nowrap; | |
| } | |
| .chat-container { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 0.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| min-height: 200px; | |
| } | |
| .message { | |
| padding: 0.5rem; | |
| border-radius: 4px; | |
| max-width: 85%; | |
| } | |
| .message-header { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.7rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .message-sender { | |
| font-weight: 500; | |
| } | |
| .message-time { | |
| color: var(--text-secondary); | |
| } | |
| .message-content { | |
| font-size: 0.8rem; | |
| } | |
| .ai-message { | |
| align-self: flex-start; | |
| background-color: var(--panel-bg); | |
| border-left: 2px solid var(--accent-color); | |
| } | |
| .user-message { | |
| align-self: flex-end; | |
| background-color: var(--hover-color); | |
| } | |
| .chat-input { | |
| display: flex; | |
| padding: 0.5rem; | |
| gap: 0.5rem; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .chat-input textarea { | |
| flex: 1; | |
| height: 36px; | |
| padding: 0.5rem; | |
| background-color: var(--input-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| color: var(--text-primary); | |
| resize: none; | |
| } | |
| #send-message { | |
| padding: 0 0.75rem; | |
| background-color: var(--accent-color); | |
| color: var(--primary-bg); | |
| border-radius: 4px; | |
| font-weight: 500; | |
| } | |
| /* Quantum Chat Styles */ | |
| .quantum-chat-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 400px; | |
| overflow: hidden; | |
| } | |
| .quantum-chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 0.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| background-color: var(--primary-bg); | |
| border-radius: 6px; | |
| margin-bottom: 0.5rem; | |
| } | |
| .quantum-chat-input { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .quantum-chat-input textarea { | |
| flex: 1; | |
| height: 60px; | |
| padding: 0.5rem; | |
| background-color: var(--input-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| color: var(--text-primary); | |
| resize: none; | |
| } | |
| #send-quantum-chat { | |
| padding: 0 0.75rem; | |
| background-color: var(--accent-color); | |
| color: var(--primary-bg); | |
| border-radius: 4px; | |
| font-weight: 500; | |
| align-self: flex-end; | |
| } | |
| .message { | |
| padding: 0.75rem; | |
| border-radius: 6px; | |
| max-width: 90%; | |
| margin-bottom: 0.5rem; | |
| } | |
| .ai-message { | |
| align-self: flex-start; | |
| background-color: var(--panel-bg); | |
| border-left: 3px solid var(--accent-color); | |
| } | |
| .ai-message .message-content { | |
| color: var(--text-primary); | |
| } | |
| .ai-message .message-content p, | |
| .ai-message .message-content ul { | |
| margin-bottom: 0.5rem; | |
| } | |
| .ai-message .message-content ul { | |
| padding-left: 1.5rem; | |
| } | |
| .user-message { | |
| align-self: flex-end; | |
| background-color: var(--hover-color); | |
| border-right: 3px solid var(--accent-color); | |
| } | |
| .message-header { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .message-sender { | |
| font-weight: 600; | |
| color: var(--accent-color); | |
| } | |
| .message-time { | |
| color: var(--text-secondary); | |
| } | |
| .typing { | |
| opacity: 0.7; | |
| } | |
| /* Modal */ | |
| .modal-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2000; | |
| } | |
| .modal-container.hidden { | |
| display: none; | |
| } | |
| .modal { | |
| background-color: var(--secondary-bg); | |
| border-radius: 8px; | |
| width: 90%; | |
| max-width: 600px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem; | |
| background-color: var(--panel-bg); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .modal-header h3 { | |
| color: var(--accent-color); | |
| } | |
| #close-modal { | |
| font-size: 1.2rem; | |
| color: var(--text-secondary); | |
| } | |
| .modal-content { | |
| padding: 1rem; | |
| flex: 1; | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| } | |
| .ai-options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| margin: 1rem 0; | |
| } | |
| .ai-option { | |
| display: flex; | |
| gap: 0.5rem; | |
| align-items: center; | |
| } | |
| .ai-option input[type="radio"] { | |
| accent-color: var(--accent-color); | |
| } | |
| #custom-prompt { | |
| width: 100%; | |
| height: 100px; | |
| padding: 0.5rem; | |
| background-color: var(--input-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| color: var(--text-primary); | |
| resize: none; | |
| margin-top: 1rem; | |
| } | |
| .modal-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 0.5rem; | |
| padding: 1rem; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .modal-actions button { | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| } | |
| #cancel-modal { | |
| background-color: var(--panel-bg); | |
| } | |
| #confirm-modal { | |
| background-color: var(--accent-color); | |
| color: var(--primary-bg); | |
| } | |
| /* Responsiveness */ | |
| @media (max-width: 1024px) { | |
| .panel-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .content-area { | |
| grid-template-columns: 1fr; | |
| } | |
| .idea-generator-container, .monetization-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .timeline-container { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .collaboration-panel { | |
| width: 100%; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 8px 8px 0 0; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| nav { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .nav-button { | |
| padding: 0.5rem; | |
| font-size: 0.9rem; | |
| } | |
| .content-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 0.5rem; | |
| } | |
| .action-buttons { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| } |