@import "https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap";:root{--bg:#fff;--bg-secondary:#f8f9fa;--surface:#f1f3f4;--surface-hover:#e8eaed;--border:#dadce0;--border-active:#1a73e8;--text-1:#202124;--text-2:#5f6368;--text-3:#80868b;--accent:#1a73e8;--accent-light:#e8f0fe;--accent-glow:#1a73e826;--gradient:linear-gradient(135deg, #4285f4 0%, #1a73e8 100%);--success:#34a853;--error:#ea4335;--radius:16px;--radius-sm:12px;--radius-xs:8px;--radius-pill:9999px;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 12px #0000001a;--shadow-lg:0 8px 24px #0000001f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:radial-gradient(circle at top, #1a73e80f, transparent 32%), var(--bg);color:var(--text-1);font-family:IBM Plex Sans,PingFang SC,sans-serif;overflow:hidden}.app{grid-template-columns:var(--left-panel-width,232px) minmax(0, 1fr) var(--right-panel-width,284px);grid-template-rows:56px 1fr;width:100vw;height:100vh;display:grid;position:relative}.header{border-bottom:1px solid var(--border);background:var(--bg);z-index:100;grid-area:1/1/auto/-1;align-items:center;gap:12px;padding:0 20px;display:flex}.logo{letter-spacing:.01em;color:var(--text-1);align-items:center;gap:10px;font-family:Manrope,IBM Plex Sans,sans-serif;font-size:1.08rem;font-weight:800;display:flex}.logo-icon{color:var(--accent);flex-shrink:0}.logo-badge{border-radius:7px;width:24px;height:24px;display:block;box-shadow:0 6px 14px #ffaa202e}.header-badge{border-radius:var(--radius-pill);background:var(--accent-light);color:var(--accent);letter-spacing:.03em;padding:2px 8px;font-size:.68rem;font-weight:600}.session-sidebar,.sidebar{background:var(--bg-secondary);flex-direction:column;gap:20px;padding:18px 12px;display:flex;overflow:hidden}.session-sidebar{border-right:1px solid var(--border);grid-area:2/1;min-width:0;overflow-y:auto}.sidebar{border-left:1px solid var(--border);grid-area:2/3;gap:16px;min-width:0;overflow-y:auto}.canvas{grid-area:2/2}.session-sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar{width:4px}.session-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.section-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px;font-size:.68rem;font-weight:600}.model-list{flex-direction:column;gap:6px;display:flex}.model-card{border-radius:var(--radius-xs);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;align-items:center;gap:10px;padding:10px 12px;transition:all .15s;display:flex}.model-card:hover{background:var(--surface)}.model-card.active{border-color:var(--border-active);background:var(--accent-light)}.model-checkbox{border:1.5px solid var(--border);background:var(--bg);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;transition:all .15s;display:flex}.model-card.active .model-checkbox{background:var(--accent);border-color:var(--accent)}.model-info{flex:1;min-width:0}.model-name{color:var(--text-1);font-size:.85rem;font-weight:600}.model-tag{color:var(--text-3);margin-top:1px;font-size:.66rem}.model-card.active .model-tag{color:var(--accent)}.select-dropdown-wrap{position:relative}.select-dropdown{appearance:none;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-xs);width:100%;color:var(--text-1);cursor:pointer;outline:none;padding:9px 32px 9px 12px;font-family:inherit;font-size:.82rem;transition:border-color .2s}.select-dropdown:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.select-dropdown option{background:var(--bg);color:var(--text-1)}.select-arrow{color:var(--text-3);pointer-events:none;font-size:.9rem;position:absolute;top:50%;right:10px;transform:translateY(-50%)rotate(90deg)}.tip-box{background:var(--accent-light);border-radius:var(--radius-xs);color:var(--accent);align-items:flex-start;gap:6px;padding:8px 10px;font-size:.75rem;line-height:1.5;display:flex}.recent-section{flex-direction:column;flex:1;min-height:180px;display:flex}.canvas{background:var(--bg);flex-direction:column;min-width:0;display:flex;overflow:hidden}.chat-area{flex:1;padding:24px 0;overflow-y:auto}.chat-area::-webkit-scrollbar{width:5px}.chat-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.chat-container{flex-direction:column;gap:24px;max-width:1000px;margin:0 auto;padding:0 24px;display:flex}.chat-msg{flex-direction:column;gap:12px;display:flex}.chat-msg-user{align-items:flex-end}.chat-msg-bot{align-items:flex-start}.chat-bubble-user{background:var(--accent-light);color:var(--text-1);word-break:keep-all;overflow-wrap:anywhere;border-radius:20px 20px 4px;width:fit-content;max-width:min(100%,36rem);padding:12px 16px;font-size:.92rem;line-height:1.45}.chat-bubble-shell,.error-banner-shell{align-items:center;gap:8px;max-width:92%;display:flex}.chat-copy-btn{color:var(--text-2);cursor:pointer;width:20px;height:20px;box-shadow:none;background:0 0;border:none;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.chat-copy-btn.success{color:var(--text-2)}.chat-bubble-bot{flex-direction:column;gap:12px;max-width:85%;display:flex}.chat-ref-images,.chat-ref-grid{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.chat-ref-card{border-radius:var(--radius-xs);border:1px solid var(--border);position:relative;overflow:hidden}.chat-ref-thumb{object-fit:cover;cursor:pointer;width:64px;height:64px;transition:transform .15s,box-shadow .15s;display:block}.chat-ref-thumb:hover{box-shadow:var(--shadow-md);transform:scale(1.05)}.chat-image-grid{flex-wrap:wrap;gap:12px;display:flex}.chat-image-card{flex-direction:column;flex:1;gap:8px;min-width:220px;max-width:420px;display:flex}.chat-image-meta{justify-content:space-between;align-items:center;gap:12px;display:flex}.chat-image-frame{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer;transition:box-shadow .2s;position:relative;overflow:hidden}.chat-image-frame:hover{box-shadow:var(--shadow-md)}.chat-image-frame img{width:100%;height:auto;display:block}.chat-image-label{color:var(--text-3);flex-wrap:wrap;align-items:center;gap:5px;min-width:0;font-size:.75rem;font-weight:500;display:inline-flex}.chat-image-spec{margin-left:6px;font-size:.7rem}.chat-image-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.chat-image-actions{flex-shrink:0;align-items:center;gap:4px;display:inline-flex}.chat-image-action-btn{width:28px;height:28px;color:var(--text-2);cursor:pointer;background:#fff;border:1px solid #cbd5e1e6;border-radius:9999px;justify-content:center;align-items:center;transition:border-color .15s,color .15s,background .15s,transform .15s;display:inline-flex}.chat-image-action-btn:hover{color:var(--accent);border-color:#1a73e859;transform:translateY(-1px)}.chat-image-action-btn.success{color:var(--text-2);background:#fff;border-color:#cbd5e1e6}.empty-state{color:var(--text-3);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:80px 24px;display:flex}.empty-icon{background:var(--surface);width:56px;height:56px;color:var(--text-3);border-radius:50%;justify-content:center;align-items:center;display:flex}.empty-title{color:var(--text-2);font-size:1rem;font-weight:500}.empty-sub{color:var(--text-3);font-size:.85rem}.skeleton-row{flex-wrap:wrap;gap:12px;display:flex}.skeleton{border-radius:var(--radius-sm);border:1px solid var(--border);background:linear-gradient(90deg, var(--surface) 25%, #e8eaed 50%, var(--surface) 75%);color:var(--text-3);background-size:200% 100%;flex:1;justify-content:center;align-items:center;gap:8px;min-width:220px;max-width:420px;font-size:.85rem;animation:1.5s infinite shimmer;display:flex}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.prompt-bar{border-top:1px solid var(--border);background:var(--bg);padding:12px 20px 16px}.prompt-outer{flex-direction:column;gap:8px;max-width:1000px;margin:0 auto;display:flex}.composer-main{flex-direction:column;gap:10px;display:flex}.composer-section-title{color:var(--text-2);margin-bottom:8px;font-size:.92rem;font-weight:700}.preset-panel{border:1px solid var(--border);background:linear-gradient(#f8f9faf2,#fff);border-radius:22px;min-height:0;padding:10px}.preset-create-row{grid-template-columns:minmax(0,1fr) 44px;gap:8px;margin-bottom:8px;display:grid}.preset-input,.preset-card-input{border:1px solid var(--border);width:100%;color:var(--text-1);background:#fff;border-radius:14px;outline:none;padding:9px 12px;font-family:inherit;font-size:.82rem;line-height:1.25}.preset-input:focus,.preset-card-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.preset-add-btn{background:var(--accent-light);color:var(--accent);cursor:pointer;border:none;border-radius:16px;justify-content:center;align-items:center;transition:transform .15s,opacity .15s;display:flex}.preset-add-btn:hover{transform:translateY(-1px)}.preset-list{flex-direction:column;gap:8px;max-height:260px;padding-right:4px;display:flex;overflow-y:auto}.preset-card{background:linear-gradient(#fff,#f8fafc);border:1px solid #1a73e81a;border-radius:16px;align-items:center;gap:8px;padding:4px;display:flex}.preset-card.active{border-color:#1a73e880;box-shadow:0 0 0 3px #1a73e814}.preset-card.editing{background:#fff}.preset-apply-btn{text-align:left;color:var(--text-1);cursor:pointer;background:0 0;border:none;border-radius:12px;flex:1;min-height:36px;padding:6px 8px;font-size:.8rem;line-height:1.22}.preset-apply-btn:hover{background:#1a73e80f}.preset-card-actions{align-items:center;gap:4px;display:flex}.preset-icon-btn{width:30px;height:30px;color:var(--text-2);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;display:flex}.preset-icon-btn:hover{background:var(--surface)}.preset-icon-btn.primary{color:var(--accent);background:var(--accent-light)}.ref-preview-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ref-preview-item{flex-shrink:0;position:relative}.ref-preview-img{object-fit:cover;border-radius:var(--radius-xs);border:1px solid var(--border);cursor:pointer;width:52px;height:52px;transition:box-shadow .15s;display:block}.ref-preview-img:hover{box-shadow:var(--shadow-sm)}.ref-remove-btn{background:var(--error);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;padding:0;font-size:10px;transition:transform .12s;display:flex;position:absolute;top:-5px;right:-5px}.ref-remove-btn:hover{transform:scale(1.15)}.ref-preview-actions{gap:6px;display:flex;position:absolute;bottom:6px;right:6px}.ref-preview-btn{color:#fff;cursor:pointer;background:#101828d1;border:none;border-radius:8px;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.prompt-wrap{background:var(--bg);border:1px solid var(--border);border-radius:24px;flex-direction:column;gap:8px;padding:12px 16px;transition:border-color .2s,box-shadow .2s;display:flex}.prompt-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.prompt-wrap.drag-active{border-color:var(--accent);background:linear-gradient(#1a73e80d,#1a73e805)}.prompt-textarea{color:var(--text-1);resize:none;background:0 0;border:none;outline:none;min-height:40px;max-height:140px;font-family:inherit;font-size:.95rem;line-height:1.6}.prompt-textarea::placeholder{color:var(--text-3)}.prompt-footer{justify-content:space-between;align-items:center;gap:12px;display:flex}.prompt-hint{color:var(--text-3);font-size:.75rem}.prompt-footer-left{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.prompt-balance{color:var(--text-2);font-size:.74rem}.btn-upload{border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--text-2);cursor:pointer;background:0 0;align-items:center;gap:5px;padding:6px 12px;font-family:inherit;font-size:.8rem;font-weight:500;transition:all .15s;display:flex}.btn-upload:hover:not(:disabled){background:var(--surface);color:var(--text-1)}.btn-upload.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}.btn-upload:disabled{opacity:.4;cursor:not-allowed}.btn-generate{background:var(--accent);color:#fff;border-radius:var(--radius-pill);cursor:pointer;border:none;align-items:center;gap:7px;padding:9px 20px;font-family:inherit;font-size:.88rem;font-weight:600;transition:opacity .15s,transform .15s;display:flex}.btn-generate:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.btn-generate:disabled{opacity:.35;cursor:not-allowed;transform:none}.btn-generate.danger{color:var(--text-1);border:1px solid var(--border);background:#fff}.lightbox{z-index:1000;cursor:pointer;background:#000000b3;justify-content:center;align-items:center;padding:40px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.lightbox-stage{flex-direction:column;gap:12px;width:min(94vw,1100px);max-height:90vh;display:flex}.lightbox-image-shell{cursor:default;justify-content:center;align-items:center;max-width:90vw;max-height:calc(90vh - 56px);padding:8px;display:flex;overflow:hidden}.lightbox-image-shell.zoomed{cursor:grab;justify-content:flex-start;align-items:flex-start;overflow:auto}.lightbox-image-shell.zoomed:active{cursor:grabbing}.lightbox-toolbar{justify-content:space-between;align-items:center;gap:12px;display:flex}.lightbox-title{color:#fff;font-weight:600}.lightbox-actions{align-items:center;gap:8px;display:flex}.lightbox-action-btn{color:#fff;cursor:pointer;background:#ffffff24;border:none;border-radius:9999px;align-items:center;gap:6px;padding:10px 14px;transition:background .15s,color .15s,transform .15s;display:flex}.lightbox-action-btn.icon-only{justify-content:center;min-width:42px;padding:10px}.lightbox-action-btn.success{color:#fff;background:#ffffff24}.lightbox-stage img{object-fit:contain;border-radius:var(--radius-sm);cursor:default;background:#ffffff0a;max-width:90vw;max-height:calc(90vh - 56px);transition:transform .15s;box-shadow:0 20px 60px #0006}.lightbox-close{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.2rem;transition:background .15s;display:flex;position:absolute;top:16px;right:20px}.lightbox-close:hover{background:#ffffff4d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.btn-new-chat{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-pill);width:100%;color:var(--text-1);cursor:pointer;align-items:center;gap:10px;margin-bottom:4px;padding:12px 16px;font-size:.9rem;font-weight:500;transition:all .2s;display:flex}.btn-new-chat:hover{background:var(--surface);border-color:#d1d5db;box-shadow:0 1px 2px #0000000d}.history-list{overscroll-behavior:contain;flex-direction:column;flex:1;gap:2px;min-height:0;margin-top:8px;display:flex;overflow-y:auto}.history-item{border-radius:var(--radius-xs);cursor:pointer;color:var(--text-2);group:true;justify-content:space-between;align-items:center;padding:8px 12px;transition:all .15s;display:flex;position:relative}.history-item:hover{background:var(--surface);color:var(--text-1)}.history-item.active{background:var(--accent-light);color:var(--accent);font-weight:500}.history-title{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.88rem;overflow:hidden}.btn-history-delete{color:var(--text-3);opacity:0;background:0 0;border:none;padding:4px;transition:opacity .15s,color .15s;display:flex}.history-item:hover .btn-history-delete{opacity:1}.btn-history-delete:hover{color:var(--error)}.history-scroll-hint{color:var(--text-3);margin-top:8px;font-size:.72rem}.sidebar-divider{background:var(--border);opacity:.6;height:1px;margin:16px 0}.sidebar-prompt-shell{min-height:0;margin-top:8px}.sidebar-prompt-shell .preset-panel{border-radius:20px;padding:10px}.sidebar .section-label,.sidebar .composer-section-title{font-size:.8rem}.sidebar-toggle{z-index:120;border:1px solid var(--border);width:28px;height:44px;color:var(--text-2);cursor:pointer;box-shadow:var(--shadow-sm);background:#fffffff5;justify-content:center;align-items:center;display:flex;position:absolute;top:72px}.sidebar-toggle.left{left:calc(var(--left-panel-width,232px) - 14px);border-radius:0 12px 12px 0}.sidebar-toggle.left.collapsed{left:8px}.sidebar-toggle.right{right:calc(var(--right-panel-width,284px) - 14px);border-radius:12px 0 0 12px}.sidebar-toggle.right.collapsed{right:8px}.error-banner{border-radius:var(--radius-xs);color:var(--error);text-align:center;background:#fce8e6;border:1px solid #f5c6cb;max-width:500px;padding:10px 14px;font-size:.85rem}.editor-modal{z-index:1100;background:#070c14bd;justify-content:center;align-items:center;padding:28px;display:flex;position:fixed;inset:0}.editor-panel{background:#fff;border-radius:28px;flex-direction:column;gap:14px;width:min(1040px,94vw);max-height:92vh;padding:18px;display:flex;box-shadow:0 30px 80px #0000003d}.editor-toolbar,.editor-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.editor-swatches,.editor-actions{align-items:center;gap:10px;display:flex}.editor-swatch{cursor:pointer;border:2px solid #ffffffe6;border-radius:50%;width:36px;height:36px;box-shadow:0 4px 12px #1018282e}.editor-swatch.active{outline:2px solid #1a73e873;transform:scale(1.08)}.editor-action-btn,.editor-secondary-btn,.editor-primary-btn{cursor:pointer;border-radius:14px;align-items:center;gap:8px;padding:10px 14px;font-family:inherit;font-size:.88rem;display:inline-flex}.editor-action-btn,.editor-secondary-btn{border:1px solid var(--border);color:var(--text-2);background:#fff}.editor-action-btn:disabled{opacity:.45;cursor:not-allowed}.editor-action-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.editor-primary-btn{background:var(--accent);color:#fff;border:none}.editor-canvas-shell{background:linear-gradient(#0c121c08,#0c121c14),#eef3fa;border-radius:22px;flex:1;justify-content:center;align-items:center;min-height:0;padding:16px;display:flex;overflow:auto}.editor-stage{line-height:0;display:inline-block;position:relative}.editor-canvas{touch-action:none;background:#fff;border-radius:18px;display:block;box-shadow:0 10px 30px #1018281f}.editor-text-layer{pointer-events:none;position:absolute;inset:0}.editor-text-box{pointer-events:auto;position:absolute}.editor-text-display,.editor-text-input{width:100%;color:inherit;text-align:left;font:600 1rem/1.4 IBM Plex Sans,PingFang SC,sans-serif}.editor-text-display{cursor:text;white-space:pre-wrap;background:0 0;border:none;min-height:0;padding:0;line-height:1.4}.editor-text-input{resize:vertical;min-height:54px;box-shadow:none;background:0 0;border:2px dashed;border-radius:14px;outline:none;padding:10px 12px;line-height:1.4}.editor-text-box.active .editor-text-input{box-shadow:0 0 0 3px #1a73e829}.editor-footer-tip{color:var(--text-3);font-size:.84rem}.editor-footer-actions{align-items:center;gap:10px;display:flex}@media (width<=1100px){.app{grid-template-rows:56px auto minmax(0,1fr) auto;grid-template-columns:1fr}.canvas,.session-sidebar,.sidebar{border:none;border-bottom:1px solid var(--border);grid-column:1}.sidebar-toggle{display:none}}@media (width<=1280px){.app{grid-template-columns:var(--left-panel-width,232px) minmax(0, 1fr) var(--right-panel-width,0px)}.sidebar{display:none}}@media (width<=960px){.app{grid-template-columns:var(--left-panel-width,0px) minmax(0, 1fr) var(--right-panel-width,0px)}.session-sidebar{display:none}.chat-container{padding:0 16px}.logo span{display:none}}@media (width<=640px){.prompt-footer{flex-direction:column;align-items:stretch}.prompt-footer-left{justify-content:space-between}.btn-generate{width:100%}.chat-bubble-bot,.chat-bubble-user{max-width:100%}.chat-image-card{min-width:100%}}