*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #121212;--bg-secondary: #1E1E1E;--bg-tertiary: #2C2C2C;--text-primary: #E0E0E0;--text-secondary: #A0A0A0;--accent-color: #4A90E2;--error-color: #ff5252;--success-color: #4caf50;--download-color: #2ecc71}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}#root{display:flex;flex-direction:column;height:100vh;max-width:800px;margin:0 auto;background-color:var(--bg-primary)}.chat-shell{display:flex;flex-direction:column;height:100vh;width:100%;max-width:800px;margin:0 auto;background-color:var(--bg-primary)}.light-mode{--bg-primary: #f5f5f5;--bg-secondary: #e9e9e9;--bg-tertiary: #ffffff;--text-primary: #333333;--text-secondary: #666666}header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:var(--bg-secondary);color:var(--text-primary)}.dark-mode-toggle{background:none;border:none;font-size:1.5rem;cursor:pointer}main{flex-grow:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;background-color:var(--bg-primary)}.bubble{max-width:80%;margin-bottom:1rem;padding:1rem;border-radius:12px;background-color:var(--bg-tertiary);word-wrap:break-word;align-self:flex-start}.bubble.user{background-color:var(--accent-color);align-self:flex-end;margin-left:auto}.bubble.assistant{background-color:var(--bg-secondary);align-self:flex-start;margin-right:auto}.pattern-wrapper{position:relative;max-width:400px;border-radius:8px;overflow:hidden;border:1px solid var(--bg-secondary);background-color:var(--bg-tertiary)}.download-btn{position:absolute;bottom:8px;right:8px;background-color:var(--download-color);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease,transform .2s ease;box-shadow:0 2px 8px #0000004d}.download-btn:hover{background-color:#27ae60;transform:scale(1.1)}.generating-text{margin-top:12px;font-size:14px;color:var(--text-secondary);text-align:center}footer{display:flex;padding:1rem;background-color:var(--bg-secondary)}footer input{flex-grow:1;padding:.5rem;margin-right:.5rem;border:none;border-radius:4px;background-color:var(--bg-tertiary);color:var(--text-primary)}footer input::placeholder{color:var(--text-secondary)}footer button{padding:.5rem 1rem;background-color:var(--accent-color);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease}footer button:hover{background-color:#3a80d2}.aspect-ratio-selector{display:flex;justify-content:center;align-items:center;padding:.5rem;background-color:var(--bg-secondary);color:var(--text-primary)}.aspect-ratio-selector select{background-color:var(--bg-tertiary);color:var(--text-primary);border:none;border-radius:4px;padding:.5rem;margin-left:10px;cursor:pointer}.generating-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}.copy{text-align:center;padding:.5rem;font-size:.8rem;color:var(--text-secondary);background-color:var(--bg-secondary)}@media (max-width: 600px){#root,.chat-shell{width:100%;max-width:100%}.bubble{max-width:90%}.pattern-wrapper{max-width:100%}.pending-pattern-container{width:100%;height:200px}header{padding:.75rem}header span{font-size:.9rem}.aspect-ratio-selector{padding:.75rem}.aspect-ratio-selector label{font-size:.9rem}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#5a9bd5}.pattern-container{display:flex;flex-direction:column;gap:16px;margin-top:12px}.pattern-wrapper{position:relative;max-width:400px;border-radius:8px;overflow:hidden;transition:all .3s ease;box-shadow:0 2px 5px #0003;background-color:var(--bg-tertiary)}.pattern-wrapper:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.pattern-svg{width:100%;height:auto;display:block;border-radius:8px}.download-btn{position:absolute;bottom:8px;right:8px;background-color:var(--download-color, #2ecc71);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 2px 8px #0000004d;opacity:.9}.download-btn:hover{background-color:#27ae60;transform:scale(1.1);opacity:1}.download-btn:active{transform:scale(.95)}.pending-pattern-container{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:15px;padding:20px;background-color:#0000000d;border-radius:8px;width:100%;max-width:400px}.generating-text{margin-top:12px;font-size:14px;color:var(--text-secondary, #A0A0A0);text-align:center}.generating-spinner{width:40px;height:40px;border:4px solid rgba(74,144,226,.3);border-top:4px solid var(--accent-color, #4A90E2);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}footer button{transition:background-color .3s ease,transform .1s ease}footer button:not(:disabled):hover{background-color:#3a80d2;transform:translateY(-1px)}footer button:not(:disabled):active{transform:translateY(1px)}@media (max-width: 600px){.pattern-wrapper{max-width:100%}.download-btn{width:35px;height:35px;font-size:14px;bottom:6px;right:6px}}