@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadeUp { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #1a1a1a; color: #d4d4d4; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #424242; border-radius: 3px; }

textarea, button, input { outline: none; font-family: inherit; }
button { cursor: pointer; }

.spin { animation: spin 1s linear infinite; }
.blink { animation: blink .85s step-end infinite; }
.fade-up { animation: fadeUp .25s ease-out both; }

.hidden { display: none !important; }

#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* Title bar */
#titlebar { height: 38px; background: #1f1f1f; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; padding: 0 14px; gap: 10px; flex-shrink: 0; user-select: none; }

/* Main row */
#main-row { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* Left rail */
#left-rail { width: 210px; background: #1d1d1d; border-right: 1px solid #2a2a2a; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
#history-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.history-item { padding: 8px 9px; border-radius: 7px; cursor: pointer; margin-bottom: 2px; transition: background .1s; }
.history-item:hover { background: #262626; }
.history-item.active { background: #c792ea12; }

/* Center stage */
#center { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }

/* Phases */
.phase { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* Compose */
#phase-compose .inner { max-width: 620px; width: 100%; margin: auto; padding: 40px 32px; display: flex; flex-direction: column; gap: 22px; }

/* Questions */
#phase-questions .inner { max-width: 600px; width: 100%; margin: auto; padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; }

/* Building */
#phase-building { background: #1a1a1a; }
#build-header { padding: 11px 20px; background: #1a1424; border-bottom: 1px solid #2e2e2e; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#build-bar-wrap { height: 2px; background: #2a2a2a; flex-shrink: 0; }
#build-bar { height: 100%; background: linear-gradient(to right, #c792ea, #7c4dcc); transition: width .4s ease; width: 0%; }
#build-lines { flex: 1; overflow-y: auto; padding: 18px 22px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.8; }

/* Workspace */
#phase-workspace { display: flex; flex-direction: column; }
#stage-toolbar { display: flex; align-items: center; background: #1f1f1f; border-bottom: 1px solid #2a2a2a; flex-shrink: 0; padding: 0 6px; }
.tab-btn { padding: 8px 15px; font-size: 12.5px; color: #666; background: transparent; border: none; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; font-weight: 400; transition: color .1s; }
.tab-btn.active { color: #e8e8e8; border-bottom-color: #c792ea; font-weight: 600; }
.seg-btn { width: 28px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; color: #666; background: transparent; transition: all .1s; }
.seg-btn.active { color: #e8e8e8; background: #3a3a3a; }

#stage-body { flex: 1; min-height: 0; position: relative; background: #0e0e0e; }
#preview-body { position: absolute; inset: 0; display: flex; overflow: auto; }
#code-body { position: absolute; inset: 0; }
#code-editor { width: 100%; height: 100%; background: #0e0e0e; border: none; color: #9cdcfe; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.6; padding: 14px 16px; resize: none; box-sizing: border-box; }
#preview-iframe { width: 100%; height: 100%; border: none; background: #fff; display: block; }

/* Refine bar */
#refine-bar { border-top: 1px solid #2a2a2a; background: #1f1f1f; padding: 10px 14px; flex-shrink: 0; display: flex; gap: 10px; align-items: flex-end; }
#refine-wrap { flex: 1; background: #161616; border: 1px solid #333; border-radius: 9px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
#refine-input { flex: 1; background: transparent; border: none; color: #e8e8e8; font-size: 13px; font-family: inherit; }

/* Right rail */
#right-rail { width: 272px; background: #1d1d1d; border-left: 1px solid #2a2a2a; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
#rail-tabs { display: flex; border-bottom: 1px solid #2a2a2a; flex-shrink: 0; }
.rail-tab { flex: 1; padding: 9px 0; font-size: 12px; color: #666; background: transparent; border: none; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; font-weight: 400; }
.rail-tab.active { color: #e8e8e8; border-bottom-color: #c792ea; font-weight: 600; }
.rail-panel { flex: 1; overflow-y: auto; padding: 14px; }

/* Option chips */
.opt-chip { padding: 7px 13px; border-radius: 8px; font-size: 12.5px; cursor: pointer; border: 1px solid #333; background: #1a1a1a; color: #999; transition: all .1s; display: inline-block; }
.opt-chip.selected { background: #c792ea20; color: #d9b8f0; border-color: #c792ea60; font-weight: 600; }
.opt-chip:hover:not(.selected) { border-color: #444; color: #ccc; }

/* App type chips */
.app-chip { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 20px; font-size: 12.5px; cursor: pointer; border: 1px solid #333; background: transparent; color: #888; font-weight: 400; transition: all .1s; }
.app-chip.active { background: #c792ea18; color: #d9b8f0; border-color: #c792ea50; font-weight: 600; }

/* Buttons */
.btn-primary { padding: 9px 22px; background: #c792ea; color: #1a1020; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 7px; }
.btn-primary:disabled { background: #3a3a3a; color: #777; cursor: default; }
.btn-ghost { padding: 9px 16px; background: transparent; color: #888; border: 1px solid #383838; border-radius: 8px; font-size: 13px; cursor: pointer; font-family: inherit; }

/* Settings modal */
#settings-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.68); z-index: 1000; display: flex; align-items: center; justify-content: center; }
#settings-modal { background: #222; border: 1px solid #3a3a3a; border-radius: 13px; width: 460px; max-height: 86vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,.8); }
#settings-modal .modal-header { padding: 18px 20px; border-bottom: 1px solid #2e2e2e; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; background: #222; z-index: 2; }
#settings-modal .modal-footer { padding: 14px 20px; border-top: 1px solid #2e2e2e; display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; background: #222; }
.settings-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #888; margin-bottom: 6px; }
.settings-input { width: 100%; background: #1a1a1a; border: 1px solid #333; border-radius: 7px; padding: 9px 12px; color: #d4d4d4; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.settings-input.mono { font-family: 'JetBrains Mono', monospace; }
.settings-input.sm { border-color: #2e2e2e; border-radius: 6px; font-size: 12px; padding: 8px 11px; }

/* Error toast */
#error-toast { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); background: #2a0f0f; border: 1px solid rgba(239,68,68,.3); color: #f87171; padding: 10px 16px; border-radius: 9px; font-size: 12.5px; z-index: 50; max-width: 480px; box-shadow: 0 8px 32px rgba(0,0,0,.5); display: flex; align-items: center; gap: 9px; white-space: nowrap; }

/* Status bar */
#statusbar { height: 24px; background: #7c4dcc; display: flex; align-items: center; padding: 0 12px; gap: 12px; font-size: 11px; color: rgba(255,255,255,.92); flex-shrink: 0; user-select: none; }

/* Change log / comment items */
.change-item, .comment-item { background: #202020; border: 1px solid #2e2e2e; border-radius: 8px; padding: 9px 11px; margin-bottom: 8px; }
.export-btn { width: 100%; padding: 9px; background: #262626; color: #d4d4d4; border: 1px solid #383838; border-radius: 8px; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; transition: border-color .1s; }
.export-btn:hover { border-color: #555; }

/* Mobile device frame */
.device-mobile { width: 390px; max-width: 100%; height: 100%; max-height: 740px; margin: auto; border-radius: 20px; overflow: hidden; border: 8px solid #2a2a2a; box-shadow: 0 12px 48px rgba(0,0,0,.5); background: #fff; }

/* Model dropdown */
#model-dropdown { position: absolute; top: calc(100% + 5px); right: 0; background: #242424; border: 1px solid #3a3a3a; border-radius: 8px; min-width: 230px; z-index: 999; box-shadow: 0 8px 32px rgba(0,0,0,.6); padding: 5px 0; }
.model-section-label { padding: 5px 12px 3px; font-size: 10px; color: #555; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.model-option { padding: 6px 12px; font-size: 12px; color: #888; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .1s; }
.model-option:hover { background: #2e2e2e; }
.model-option .check { color: #c792ea; font-size: 11px; width: 14px; }

/* Spec output */
#spec-output { margin-top: 14px; background: #161616; border: 1px solid #2e2e2e; border-radius: 10px; overflow: hidden; }
#spec-output .spec-header { padding: 9px 12px; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; gap: 7px; }
#spec-content { padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.65; color: #bdbdbd; white-space: pre-wrap; max-height: 300px; overflow-y: auto; }

/* Framework option chips */
.fw-chip { padding: 5px 13px; font-size: 12px; border-radius: 6px; cursor: pointer; border: 1px solid #333; background: transparent; color: #777; display: inline-block; margin-right: 6px; margin-bottom: 6px; transition: all .1s; }
.fw-chip.active { background: #c792ea18; color: #c792ea; border-color: #c792ea40; }