:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-muted: #484f58;--accent-blue: #58a6ff;--accent-green: #3fb950;--accent-purple: #a371f7;--accent-orange: #d29922;--emotional-warm: #f0883e;--emotional-cool: #58a6ff;--emotional-vulnerable: #a371f7;--emotional-neutral: #8b949e;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 48px;--font-mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .6s ease}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);font-size:18px;line-height:1.7}#app{height:100%;display:flex;flex-direction:column;position:relative}#conversation-area{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:var(--spacing-xl);max-width:720px;margin:0 auto;width:100%;transition:max-width var(--transition-normal)}#conversation-area.with-sidebar{margin:0 320px 0 0;max-width:none;width:calc(100vw - 320px);padding-left:calc((100vw - 320px - 720px) / 2 + var(--spacing-xl))}#messages{width:100%;max-height:60vh;overflow-y:auto;padding-bottom:var(--spacing-md)}.message{margin-bottom:var(--spacing-lg);opacity:0;animation:fadeIn var(--transition-slow) forwards}.message.user{color:var(--text-primary)}.message.assistant{color:var(--text-secondary)}.message.question{color:var(--text-primary);font-weight:600;margin-bottom:var(--spacing-xl)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#input-area{position:relative;width:100%;min-height:40px;margin-top:var(--spacing-md)}#editor{width:100%;min-height:40px;padding:var(--spacing-sm) 0;background:transparent;color:var(--text-primary);font-family:var(--font-sans);font-size:18px;line-height:1.7;border:none;outline:none;caret-color:var(--accent-blue)}#editor:empty:before{content:"";display:inline-block;width:2px;height:1.2em;background:var(--accent-blue);animation:blink 1s step-end infinite;vertical-align:text-bottom}#editor:focus:empty:before{animation:blink 1s step-end infinite}#editor:not(:empty):before{display:none}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}body.emotional-kindness{background:#0d1318}body.emotional-anger{background:#1a0d0d}body.emotional-happiness{background:#0d1810}body.emotional-love{background:#1a0d15}body.emotional-curiosity{background:#0d1318}body.emotional-vulnerable{background:#13101a}body{transition:background var(--transition-slow)}#achievement-container{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:1000}.achievement-badge{background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:8px;padding:var(--spacing-md);min-width:200px;box-shadow:0 4px 12px #0006;opacity:0;transform:translate(100%);animation:slideIn var(--transition-normal) forwards}.achievement-badge.fade-out{animation:slideOut var(--transition-normal) forwards}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.achievement-badge .star{color:var(--accent-orange);margin-right:var(--spacing-xs)}.achievement-badge .title{font-weight:600;color:var(--text-primary)}.achievement-badge .description{font-size:14px;color:var(--text-secondary);margin-top:var(--spacing-xs)}#teaching-container{position:fixed;bottom:var(--spacing-xl);left:50%;transform:translate(-50%);z-index:1000}.teaching-moment{background:var(--bg-secondary);border:1px solid var(--emotional-vulnerable);border-radius:8px;padding:var(--spacing-md) var(--spacing-lg);font-style:italic;color:var(--emotional-vulnerable);opacity:0;animation:fadeInUp var(--transition-normal) forwards}.teaching-moment.fade-out{animation:fadeOutDown var(--transition-normal) forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}#offer-container{position:fixed;bottom:calc(var(--spacing-xl) + 60px);left:50%;transform:translate(-50%);z-index:999}.offer-reveal{background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:8px;padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md);opacity:0;animation:fadeInUp var(--transition-normal) forwards}.offer-reveal button{background:var(--bg-tertiary);border:1px solid var(--text-muted);border-radius:4px;color:var(--text-primary);padding:var(--spacing-xs) var(--spacing-md);cursor:pointer;font-size:14px;transition:all var(--transition-fast)}.offer-reveal button:hover{background:var(--accent-blue);border-color:var(--accent-blue)}.offer-reveal button.secondary{background:transparent;border-color:var(--text-muted)}.offer-reveal button.secondary:hover{background:var(--bg-tertiary)}#file-explorer{position:fixed;top:0;right:0;width:320px;height:100%;background:var(--bg-secondary);border-left:1px solid var(--bg-tertiary);display:flex;flex-direction:column;transform:translate(100%);transition:transform var(--transition-normal);z-index:100}#file-explorer.visible{transform:translate(0)}#file-explorer.hidden{display:none}#file-list{padding:var(--spacing-md);border-bottom:1px solid var(--bg-tertiary)}.file-explorer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.toggle-explorer{background:transparent;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:0 var(--spacing-xs);line-height:1;transition:color var(--transition-fast)}.toggle-explorer:hover{color:var(--text-primary)}.show-explorer-btn{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:4px;padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;font-size:16px;z-index:50;transition:all var(--transition-fast)}.show-explorer-btn:hover{background:var(--bg-tertiary)}.interrupt-btn{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:4px;color:var(--text-muted);padding:var(--spacing-xs) var(--spacing-md);cursor:pointer;font-size:12px;z-index:1000;opacity:0;animation:fadeIn var(--transition-normal) forwards;transition:all var(--transition-fast)}.interrupt-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--text-muted)}.file-item{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-md);border-radius:4px;cursor:pointer;color:var(--text-secondary);transition:all var(--transition-fast)}.file-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.file-item.active{background:var(--bg-tertiary);color:var(--accent-blue)}.file-item .icon{margin-right:var(--spacing-sm);font-size:14px}#file-viewer{flex:1;display:flex;flex-direction:column;overflow:hidden}#file-header{padding:var(--spacing-md);border-bottom:1px solid var(--bg-tertiary);font-family:var(--font-mono);font-size:14px;color:var(--text-muted)}#file-content{flex:1;padding:var(--spacing-md);overflow-y:auto;font-family:var(--font-mono);font-size:14px;line-height:1.5;white-space:pre-wrap;color:var(--text-secondary)}#file-content[contenteditable=true]{outline:none;color:var(--text-primary)}#file-content[contenteditable=true]:focus{background:var(--bg-primary)}.typewriter{overflow:hidden}.typewriter-cursor{display:inline-block;width:2px;height:1em;background:var(--text-secondary);animation:blink 1s step-end infinite;vertical-align:text-bottom;margin-left:2px}.hidden{display:none!important}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.status-bar{position:fixed;top:0;left:0;right:0;height:32px;background:var(--bg-secondary);border-bottom:1px solid var(--bg-tertiary);display:flex;align-items:center;padding:0 var(--spacing-md);gap:var(--spacing-lg);z-index:1000;opacity:0;animation:fadeIn var(--transition-normal) forwards}.status-item{display:flex;align-items:center;gap:var(--spacing-xs);font-size:12px;color:var(--text-muted)}.status-icon{font-size:14px}.status-icon.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.confidence-badge,.action-badge{display:inline-block;font-size:10px;padding:2px 6px;border-radius:3px;margin-left:var(--spacing-sm);vertical-align:middle}.confidence-badge{background:var(--accent-orange);color:var(--bg-primary)}.action-badge.search{background:var(--accent-blue);color:var(--bg-primary)}.action-badge.tool{background:var(--accent-green);color:var(--bg-primary)}.export-btn{position:fixed;bottom:var(--spacing-lg);left:var(--spacing-lg);background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:4px;color:var(--text-muted);padding:var(--spacing-xs) var(--spacing-md);cursor:pointer;font-size:12px;z-index:1000;opacity:0;animation:fadeIn var(--transition-normal) forwards;transition:all var(--transition-fast)}.export-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--text-muted)}.editable-badge{margin-left:auto;font-size:12px}.edit-hint{font-size:11px;color:var(--accent-green);margin-left:var(--spacing-sm)}.status-bar~#conversation-area{padding-top:calc(var(--spacing-xl) + 32px)}.status-bar~#achievement-container{top:calc(var(--spacing-lg) + 32px)}.status-bar~.show-explorer-btn{top:calc(var(--spacing-lg) + 32px)}.status-bar~#file-explorer{top:32px;height:calc(100% - 32px)}@media(max-width:768px){#conversation-area{padding:var(--spacing-lg)}#file-explorer{width:100%}#conversation-area.with-sidebar{padding-right:var(--spacing-lg)}}