*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#1f2937;background:#f3f4f6;flex-direction:column;height:100vh;font-family:sans-serif;display:flex;overflow:hidden}.app{flex-direction:column;height:100vh;display:flex}.app-header{background:#30a3f1;flex-shrink:0;align-items:center;gap:12px;padding:12px 24px;display:flex}.app-header h1{color:#fff;font-size:1.2rem;font-weight:700}.logo{color:#fff;font-size:1.5rem;font-weight:700;line-height:1}.logo span{color:#f49e63}.logo-sub{color:#ffffffd9;flex-direction:column;margin-right:12px;font-size:.65rem;line-height:1.3;display:flex}.logo-sub strong{letter-spacing:2px}.logo-sub em{font-style:italic}.app-subtitle{color:#ffffffbf;margin-left:auto;font-size:.78rem}.ai-badge{letter-spacing:.3px;border-radius:12px;margin-left:12px;padding:3px 10px;font-size:.75rem;font-weight:600}.ai-badge--on{color:#065f46;background:#d1fae5}.ai-badge--off{color:#ffffffb3;background:#ffffff26}.thinking-indicator{color:#30a3f1;padding:8px 16px;font-size:.8rem;font-style:italic;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.example-dropdown{background:#fff;border-bottom:1px solid #e5e7eb;flex-shrink:0;align-items:center;gap:8px;padding:10px 16px;display:flex}.example-dropdown__label{color:#6b7280;white-space:nowrap;font-size:.8rem;font-weight:600}.example-dropdown__select{color:#374151;cursor:pointer;background:#f9fafb;border:1px solid #d1d5db;border-radius:4px;outline:none;flex:1;padding:6px 10px;font-size:.82rem}.example-dropdown__select:focus{border-color:#30a3f1}.app-body{flex:1;display:flex;overflow:hidden}.chat-panel{background:#fff;border-right:1px solid #e5e7eb;flex-direction:column;flex:0 0 55%;display:flex;overflow:hidden}.chat-window{background:#f9fafb;flex-direction:column;flex:1;gap:12px;padding:16px;display:flex;overflow-y:auto}.chat-window::-webkit-scrollbar{width:6px}.chat-window::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.welcome-card{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:32px 24px;display:flex}.welcome-card__icon{font-size:2.5rem}.welcome-card__title{color:#1f2937;font-size:1.1rem;font-weight:700}.welcome-card__desc{color:#6b7280;max-width:320px;font-size:.85rem;line-height:1.5}.welcome-card__tips{text-align:left;color:#374151;flex-direction:column;gap:8px;margin-top:8px;font-size:.83rem;list-style:none;display:flex}.welcome-card__tips li{align-items:flex-start;gap:8px;display:flex}.message{display:flex}.message--bot{justify-content:flex-start}.message--user{justify-content:flex-end}.message__bubble{border-radius:12px;padding:10px 14px;font-size:.85rem;line-height:1.5}.message--bot .message__bubble{color:#374151;background:#fff;border:1px solid #e5e7eb;border-top-left-radius:2px;width:80%;max-width:80%}.message--user .message__bubble{color:#fff;background:#30a3f1;border-top-right-radius:2px;max-width:90%}.message__text{white-space:pre-wrap}.code-block{width:100%;margin-top:10px;position:relative}.copy-btn{color:#6b7280;cursor:pointer;z-index:1;background:#e5e7eb;border:none;border-radius:4px;padding:3px 8px;font-family:inherit;font-size:.72rem;transition:background .15s,color .15s;position:absolute;top:6px;right:6px}.copy-btn:hover{color:#111827;background:#d1d5db}.message__code{color:#d1fae5;white-space:pre;resize:vertical;background:#1f2937;border:1px solid #d1d5db;border-radius:6px;outline:none;width:100%;padding:28px 12px 10px;font-family:Courier New,monospace;font-size:.78rem;line-height:1.6;display:block;overflow-x:auto}.message__code:focus{border-color:#30a3f1}.run-btn{color:#fff;cursor:pointer;background:#f49e63;border:none;border-radius:4px;margin-top:8px;padding:6px 14px;font-family:inherit;font-size:.82rem;font-weight:600;transition:background .15s}.run-btn:hover{background:#e8895a}.chat-input{background:#fff;border-top:1px solid #e5e7eb;flex-shrink:0;gap:8px;padding:12px 16px;display:flex}.chat-input__field{color:#374151;background:#fff;border:1px solid #d1d5db;border-radius:4px;outline:none;flex:1;padding:8px 12px;font-family:inherit;font-size:.85rem}.chat-input__field:focus{border-color:#30a3f1}.chat-input__field::placeholder{color:#9ca3af}.chat-input__btn{color:#fff;cursor:pointer;background:#f49e63;border:none;border-radius:4px;padding:8px 16px;font-size:1.1rem;font-weight:700;transition:background .15s}.chat-input__btn:hover{background:#e8895a}.preview-panel{background:#f3f4f6;flex-direction:column;flex:1;display:flex;overflow:hidden}.preview-panel__title{color:#9ca3af;text-transform:uppercase;letter-spacing:1px;background:#fff;border-bottom:1px solid #e5e7eb;flex-shrink:0;padding:10px 16px;font-size:.75rem;font-weight:600}.canvas-frame{background:#fff;border:1px solid #d1d5db;border-radius:4px;width:400px;height:300px;margin:20px auto;display:block;box-shadow:0 4px 6px -1px #00000012}.preview-placeholder{color:#9ca3af;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex}.preview-icon{font-size:3rem}.preview-placeholder p{color:#6b7280;font-size:.85rem;line-height:1.6}.preview-placeholder strong{color:#4b5563}