Spaces:

TheGreatUnknown
/

test

Running

App Files Files Community

TheGreatUnknown commited on May 30

Commit

59c1b5c

verified ·

1 Parent(s): 1cb34df

Update styles.css

Browse files

Files changed (1) hide show

styles.css +1196 -148

styles.css CHANGED Viewed

@@ -1,209 +1,1257 @@
-[⚠️ Suspicious Content] @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Quicksand:wght@300;400;500&display=swap');
 :root {
-  --intimate-color: #f8d568;
-  --universal-color: #6e9bd2;
-  --divine-color: #c98fff;
-  --background-color: #0a0e1a;
-  --text-color: #ffffff;
-  --transition-time: 1.5s;
 }
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
 }
 body {
-  font-family: 'Quicksand', sans-serif;
-  height: 100vh;
-  background-color: var(--background-color);
-  color: var(--text-color);
-  overflow: hidden;
 }
-#journey-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
-#background-video {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: -2;
-  opacity: 0.4;
 }
-#background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  background: radial-gradient(circle, rgba(10,14,26,0.5) 0%, rgba(10,14,26,0.9) 70%);
 }
-#symbol-container {
-  position: relative;
-  width: 100%;
-  height: 30vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 2rem;
 }
-.symbol {
-  position: absolute;
-  font-size: 15rem;
-  opacity: 0;
-  transition: all var(--transition-time) ease-in-out;
-  transform: scale(0.5);
-  text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
 }
-#intimate-symbol {
-  color: var(--intimate-color);
 }
-#universal-symbol {
-  color: var(--universal-color);
 }
-#divine-symbol {
-  color: var(--divine-color);
 }
-.symbol.active {
-  opacity: 1;
-  transform: scale(1);
 }
-#text-container {
-  width: 80%;
-  max-width: 800px;
-  position: relative;
-  height: 30vh;
-  overflow: hidden;
 }
-.text-panel {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  opacity: 0;
-  transform: translateY(30px);
-  transition: all var(--transition-time) ease-in-out;
-  padding: 2rem;
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(10px);
-  text-align: center;
 }
-.text-panel.active {
-  opacity: 1;
-  transform: translateY(0);
 }
-h2 {
-  font-family: 'Cinzel', serif;
-  margin-bottom: 1rem;
-  font-size: 2rem;
 }
-#intimate-text h2 {
-  color: var(--intimate-color);
 }
-#universal-text h2 {
-  color: var(--universal-color);
 }
-#divine-text h2 {
-  color: var(--divine-color);
 }
-p {
-  line-height: 1.6;
-  font-size: 1.2rem;
-  font-weight: 300;
 }
-#progression-controls {
-  margin-top: 2rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
 }
-button {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: white;
-  padding: 0.6rem 1.2rem;
-  border-radius: 30px;
-  cursor: pointer;
-  font-family: 'Quicksand', sans-serif;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(5px);
 }
-button:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.2);
 }
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
 }
-#progress-indicator {
-  display: flex;
-  gap: 0.8rem;
 }
-.progress-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.3);
-  cursor: pointer;
-  transition: all 0.3s ease;
 }
-.progress-dot.active {
-  background: white;
-  transform: scale(1.2);
 }
-@media (max-width: 768px) {
-  .symbol {
-    font-size: 8rem;
-  }
-  h2 {
-    font-size: 1.5rem;
-  }
-  p {
     font-size: 1rem;
-  }
-  #text-container {
     width: 90%;
-  }
 }

+/* 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;
+    }
+}