/**
 * WebCraft Platform - Complete CSS Styling
 * Dark theme with code editor styles
 */

:root {
  --color-bg-primary: #0f1419;
  --color-bg-secondary: #1a1f2e;
  --color-bg-tertiary: #252d3d;
  --color-text-primary: #e8eaed;
  --color-text-secondary: #9aa0a6;
  --color-text-muted: #5f6368;
  --color-border: #3c4452;
  --color-border-light: #4a5568;
  --color-accent-primary: #4f46e5;
  --color-accent-secondary: #10b981;
  --color-accent-warning: #f59e0b;
  --color-accent-danger: #ef4444;
  --color-beginner: #10b981;
  --color-intermediate: #f59e0b;
  --color-advanced: #ef4444;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-family); background-color: var(--color-bg-primary); color: var(--color-text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; }

h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.2; margin-bottom: var(--spacing-md); }
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
p { margin-bottom: var(--spacing-md); color: var(--color-text-secondary); }
a { color: var(--color-accent-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-secondary); }

button { font-family: inherit; cursor: pointer; border: none; border-radius: var(--radius-md); transition: all var(--transition-fast); font-size: var(--font-size-md); font-weight: 500; }

.btn-done { background-color: var(--color-accent-primary); color: white; padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); font-weight: 600; }
.btn-done:hover:not(.completed) { background-color: #4338ca; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-done.completed { background-color: var(--color-accent-secondary); }

.btn-send { background-color: var(--color-accent-primary); color: white; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-weight: 600; }
.btn-send:hover { background-color: #4338ca; }
.btn-send:disabled { opacity: .6; cursor: not-allowed; }

.webcraft-app { display: flex; flex-direction: column; height: 100vh; background-color: var(--color-bg-primary); overflow: hidden; }
.webcraft-container { display: flex; flex: 1; overflow: hidden; }
.webcraft-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.webcraft-header { background-color: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); padding: var(--spacing-lg) var(--spacing-xl); box-shadow: var(--shadow-md); flex-shrink: 0; }
.header-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-xl); }
.header-title h1 { margin: 0; font-size: var(--font-size-2xl); display: flex; align-items: center; gap: var(--spacing-md); }
.header-title p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.header-progress { display: flex; align-items: center; gap: var(--spacing-lg); min-width: 300px; }
.progress-bar { flex: 1; height: 8px; background-color: var(--color-bg-tertiary); border-radius: var(--radius-lg); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary)); border-radius: var(--radius-lg); transition: width var(--transition-slow); }
.progress-text { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.progress-text .percentage { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text-primary); }
.progress-text .count { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.webcraft-sidebar { width: 280px; background-color: var(--color-bg-secondary); border-right: 1px solid var(--color-border); overflow-y: auto; padding: var(--spacing-lg); flex-shrink: 0; }
.sidebar-content { display: flex; flex-direction: column; gap: var(--spacing-xl); }
.project-section { display: flex; flex-direction: column; gap: var(--spacing-md); }
.section-title { font-size: var(--font-size-md); font-weight: 600; color: var(--color-text-primary); margin: 0; padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
.project-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.project-button { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: left; transition: all var(--transition-fast); cursor: pointer; width: 100%; }
.project-button:hover { background-color: var(--color-bg-primary); border-color: var(--color-border-light); color: var(--color-text-primary); }
.project-button.selected { background-color: var(--color-accent-primary); border-color: var(--color-accent-primary); color: white; }
.project-button.completed { opacity: .7; }
.project-status { font-size: var(--font-size-md); min-width: 1.5rem; }
.project-name { flex: 1; font-size: var(--font-size-sm); font-weight: 500; }

.tabs { display: flex; gap: var(--spacing-md); padding: var(--spacing-lg) var(--spacing-xl); background-color: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.tab-button { padding: var(--spacing-md) var(--spacing-lg); background: none; color: var(--color-text-secondary); border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--transition-fast); font-weight: 500; border-radius: 0; }
.tab-button:hover { color: var(--color-text-primary); }
.tab-button.active { color: var(--color-accent-primary); border-bottom-color: var(--color-accent-primary); }
.tab-content { flex: 1; overflow: hidden; display: flex; min-height: 0; }
.tab-pane { flex: 1; display: none; overflow-y: auto; min-height: 0; }
.tab-pane.active { display: flex; }

.webcraft-main { flex: 1; overflow-y: auto; padding: var(--spacing-xl); }
.empty-state { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-text-secondary); font-size: var(--font-size-lg); }
.project-content { max-width: 900px; margin: 0 auto; }
.project-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-xl); margin-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-xl); border-bottom: 1px solid var(--color-border); }
.project-header h2 { margin: 0; font-size: var(--font-size-2xl); }
.project-meta { display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.difficulty { display: inline-block; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; }
.difficulty.beginner { background-color: rgba(16,185,129,.1); color: var(--color-beginner); }
.difficulty.intermediate { background-color: rgba(245,158,11,.1); color: var(--color-intermediate); }
.difficulty.advanced { background-color: rgba(239,68,68,.1); color: var(--color-advanced); }
.project-sections { display: flex; flex-direction: column; gap: var(--spacing-2xl); }
.project-section h3 { margin: 0; font-size: var(--font-size-lg); color: var(--color-text-primary); }
.project-section p { margin: 0; line-height: 1.8; }
.topics-list { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-md); }
.topic-badge { display: inline-block; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.requirements-list { list-style: none; padding: 0; margin: var(--spacing-md) 0 0; display: flex; flex-direction: column; gap: var(--spacing-lg); }
.requirements-list li { display: flex; gap: var(--spacing-lg); padding: var(--spacing-lg); background-color: var(--color-bg-tertiary); border-left: 3px solid var(--color-accent-primary); border-radius: var(--radius-md); }
.req-number { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; background-color: var(--color-accent-primary); color: white; border-radius: var(--radius-md); font-weight: 700; font-size: var(--font-size-sm); }
.req-text { display: flex; align-items: center; color: var(--color-text-secondary); line-height: 1.6; }

.chat-container { display: flex; flex-direction: column; width: 100%; height: 100%; gap: var(--spacing-lg); padding: var(--spacing-lg); min-height: 0; }
.chat-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-text-secondary); font-size: var(--font-size-lg); width: 100%; }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-lg); background-color: var(--color-bg-tertiary); border-radius: var(--radius-lg); min-height: 0; }
.chat-welcome { color: var(--color-text-secondary); text-align: center; padding: var(--spacing-xl); }
.chat-welcome strong { color: var(--color-text-primary); }
.chat-message { display: flex; gap: var(--spacing-md); animation: slideIn var(--transition-base) ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.chat-message.user { justify-content: flex-end; }
.chat-message.assistant { justify-content: flex-start; }
.message-content { max-width: 70%; padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-lg); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.chat-message.user .message-content { background-color: var(--color-accent-primary); color: white; }
.chat-message.assistant .message-content { background-color: var(--color-bg-secondary); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.chat-input-area { display: flex; flex-direction: column; gap: var(--spacing-md); flex-shrink: 0; }
.quick-prompts { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.quick-prompt { padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); }
.quick-prompt:hover { background-color: var(--color-accent-primary); color: white; border-color: var(--color-accent-primary); }
.input-form { display: flex; gap: var(--spacing-md); }
.chat-input { flex: 1; padding: var(--spacing-md); background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-primary); font-family: inherit; font-size: var(--font-size-md); transition: border-color var(--transition-fast); }
.chat-input:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.chat-input::placeholder { color: var(--color-text-muted); }
.chat-input:disabled { opacity: .6; cursor: not-allowed; }

/* Code Editor */
.code-editor-container { display: flex; width: 100%; height: 100%; overflow: hidden; }
.code-editor-pane { display: flex; flex-direction: column; flex: 1; border-right: 1px solid var(--color-border); min-width: 0; background: #0d1117; }
.code-lang-tabs { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.code-lang-tab { padding: var(--spacing-sm) var(--spacing-md); background: none; color: var(--color-text-secondary); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.code-lang-tab:hover { color: var(--color-text-primary); }
.code-lang-tab.active { background-color: var(--color-accent-primary); color: white; border-color: var(--color-accent-primary); }
.btn-run-code { margin-left: auto; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-accent-secondary); color: white; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.btn-run-code:hover { background-color: #059669; transform: translateY(-1px); }
.btn-run-code.small { font-size: var(--font-size-xs); padding: var(--spacing-xs) var(--spacing-sm); }
.code-textarea { flex: 1; width: 100%; background: #0d1117; color: #c9d1d9; font-family: 'JetBrains Mono','Fira Code','Cascadia Code',Consolas,monospace; font-size: .875rem; line-height: 1.7; padding: var(--spacing-lg); border: none; outline: none; resize: none; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.code-textarea.hidden { display: none; }
.code-preview-pane { display: flex; flex-direction: column; flex: 1; background: white; min-width: 0; }
.code-preview-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: var(--font-size-sm); flex-shrink: 0; }
.code-preview-frame { flex: 1; border: none; width: 100%; background: white; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-md); }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-light); }

@media (max-width: 1024px) {
  .webcraft-sidebar { width: 240px; }
  .header-content { flex-direction: column; gap: var(--spacing-md); }
  .header-progress { width: 100%; min-width: unset; }
  .code-editor-container { flex-direction: column; }
  .code-editor-pane { border-right: none; border-bottom: 1px solid var(--color-border); flex: 0 0 50%; }
  .code-preview-pane { flex: 0 0 50%; }
}
@media (max-width: 768px) {
  .webcraft-container { flex-direction: column; }
  .webcraft-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); max-height: 180px; padding: var(--spacing-md); }
  .sidebar-content { flex-direction: row; gap: var(--spacing-lg); overflow-x: auto; }
  .project-section { flex-shrink: 0; min-width: 200px; }
  .webcraft-main { padding: var(--spacing-md); }
  .project-header { flex-direction: column; gap: var(--spacing-lg); }
  .tabs { padding: var(--spacing-md); }
  .message-content { max-width: 85%; }
  .requirements-list li { flex-direction: column; gap: var(--spacing-md); }
  .req-number { width: 100%; }
}
@media (max-width: 480px) {
  :root { --spacing-lg: 1rem; --spacing-xl: 1.5rem; }
  .header-title h1 { font-size: var(--font-size-xl); }
  .project-header h2 { font-size: var(--font-size-xl); }
  .quick-prompts { flex-direction: column; }
  .quick-prompt { width: 100%; }
  .input-form { flex-direction: column; }
  .chat-input, .btn-send { width: 100%; }
}