#app{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background-color:#f5f7fa;margin:-8px}.chat-container{width:800px;max-width:90vw;margin:40px auto;padding:20px;background:#f9f9f9;border-radius:12px;box-shadow:0 4px 12px #0000001a;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}h1{text-align:center;color:#333;margin-bottom:20px}.image-preview{position:relative;margin-bottom:20px;text-align:center}.image-preview img{max-width:100%;max-height:300px;border-radius:10px;border:2px dashed #ccc;padding:5px}.clear-image-btn{position:absolute;top:5px;right:5px;background:#00000080;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer}.clear-image-btn:hover{background:#000000b3}.image-preview p{margin-top:10px;color:#666;font-size:.9rem}.input-form{display:flex;flex-direction:column;margin-bottom:30px}.input-wrapper{position:relative;display:flex;align-items:center;border:2px dashed #ddd;border-radius:10px;padding:20px;background:#fff;transition:background .3s,border-color .3s;justify-content:center;cursor:pointer}.input-wrapper.drag-over{background:#e8f5ff;border-color:#4da3ff}.text-input{flex-grow:1;padding:10px;border:none;outline:none;font-size:1rem;background:transparent}.drop-zone-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#4da3ff;font-size:1.1rem;font-weight:700;pointer-events:none}.send-button{margin-left:10px;padding:16px 20px;background:#4da3ff;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .3s}.send-button:disabled{background:#ccc;cursor:not-allowed}.send-button:hover:not(:disabled){background:#3a8edb}.log-container{border:1px solid #ddd;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 8px #00000014;margin-top:20px}.log-header{background:#f8f9fa;padding:15px 20px;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center}.log-header h3{margin:0;color:#333;font-size:18px;font-weight:600}.clear-logs-btn{background:#dc3545;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:background .3s}.clear-logs-btn:hover{background:#c82333}.log-box{overflow-y:auto}.log-entry{padding:16px 20px;border-bottom:1px solid #f0f0f0;transition:background-color .2s}.log-entry:hover{background-color:#f8f9fa}.log-entry:last-child{border-bottom:none}.log-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.log-type{font-weight:600;padding:4px 10px;border-radius:15px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.log-type.generate{background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.log-type.edit{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}.log-time{font-size:12px;color:#6c757d;font-weight:500}.log-content{font-size:14px;line-height:1.5}.user-input{margin-bottom:10px;color:#495057}.generated-prompt{color:#495057;background:#f8f9fa;padding:12px;border-radius:8px;border-left:4px solid #4da3ff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.user-input strong,.generated-prompt strong{color:#212529;font-weight:600}.log-box::-webkit-scrollbar{width:6px}.log-box::-webkit-scrollbar-track{background:#f1f1f1}.log-box::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.log-box::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.input-wrapper.loading-state{opacity:.7;pointer-events:none}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid #ffffff;border-radius:50%;border-top-color:transparent;animation:spin 1s ease-in-out infinite;margin-right:8px}.loading-progress{margin:20px 0;text-align:center}.progress-bar{width:100%;height:6px;background-color:#e9ecef;border-radius:3px;overflow:hidden;margin-bottom:12px}.progress-fill{height:100%;background:linear-gradient(90deg,#4da3ff,#3a8edb,#4da3ff);background-size:200% 100%;animation:progress-wave 2s ease-in-out infinite;border-radius:3px}.loading-message{margin:0;color:#666;font-size:14px;font-weight:500}.loading-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.loading-modal{background:#fff;padding:40px;border-radius:16px;text-align:center;box-shadow:0 10px 30px #0000004d;max-width:400px;width:90%;animation:modal-appear .3s ease-out}.loading-modal h3{margin:20px 0 10px;color:#333;font-size:20px;font-weight:600}.loading-modal p{margin:0 0 30px;color:#666;font-size:14px;line-height:1.5}.loading-spinner-large{width:50px;height:50px;border:4px solid #e9ecef;border-radius:50%;border-top-color:#4da3ff;animation:spin 1s linear infinite;margin:0 auto}.loading-dots{display:flex;justify-content:center;gap:8px}.loading-dots span{width:8px;height:8px;background-color:#4da3ff;border-radius:50%;animation:dots-bounce 1.4s ease-in-out infinite both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}.loading-dots span:nth-child(3){animation-delay:0s}@keyframes spin{to{transform:rotate(360deg)}}@keyframes progress-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes modal-appear{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes dots-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@media (max-width: 768px){.chat-container{width:100%;max-width:unset;margin:20px auto;padding:15px}.log-header,.log-entry{padding:12px 15px}.log-meta{flex-direction:column;align-items:flex-start;gap:8px}}.log-image-link{display:inline-block;border-radius:10px;transition:box-shadow .2s,transform .15s;box-shadow:0 2px 6px #4da3ff0f}.log-image-link:hover,.log-image-link:focus{box-shadow:0 4px 18px #4da3ff26;transform:scale(1.03);background:#f0f8ff}.log-image{display:block;max-width:120px;max-height:120px;min-width:60px;min-height:60px;border-radius:10px;border:2px solid #e4eaf2;background:#f5f7fa;padding:4px;transition:border-color .2s;margin:0 4px;box-shadow:0 1px 2px #0000000a}.log-image-link:hover .log-image,.log-image-link:focus .log-image{border-color:#4da3ff}