*{box-sizing:border-box}:root{color-scheme:dark}html,body,#root,.app-shell{height:100%}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--app-bg, #09090b);color:var(--text-primary, #f8fafc);overflow:hidden;transition:background-color .18s ease,color .18s ease}.app-shell{min-height:100%;background:var(--app-bg, #09090b);color:var(--text-primary, #f8fafc);transition:background-color .18s ease,color .18s ease}.page{max-width:1600px;margin:0 auto;padding:24px;display:flex;gap:16px;height:100vh;overflow:hidden}.chat-list-panel,.chat-panel,.preview-panel{border:1px solid var(--border-color, #27272a);border-radius:14px;background:var(--panel-bg, #111113);box-shadow:0 18px 60px var(--shadow-color, rgba(0, 0, 0, .26));display:flex;flex-direction:column;height:calc(100vh - 48px);min-height:0;overflow:hidden;transition:background-color .18s ease,border-color .18s ease}.chat-list-panel{flex:0 0 280px}.chat-panel{flex:0 0 42%}.preview-panel{flex:1}.chat-list-body{flex:1;min-height:0;overflow-y:auto;padding:12px;display:grid;align-content:start;gap:8px}.chat-list-status{margin:0;color:var(--text-muted, #a1a1aa);font-size:13px;padding:6px}.chat-item{width:100%;text-align:left;border-radius:12px;border:1px solid var(--border-color, #27272a);background:var(--panel-bg-soft, #151518);color:var(--text-primary, #f8fafc);padding:10px;display:grid;gap:6px;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}.chat-item:hover:not(:disabled){transform:translateY(-1px)}.chat-item.active{border-color:var(--accent-color, #fafafa);background:var(--panel-bg-active, #1e1e24)}.chat-item-title{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.chat-item-meta{font-size:11px;color:var(--text-muted, #a1a1aa)}.panel-head{padding:16px;border-bottom:1px solid var(--border-color, #27272a);display:flex;align-items:center;justify-content:space-between;gap:10px}.title-wrap h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}.title-wrap p{margin:2px 0 0;color:var(--text-muted, #a1a1aa);font-size:12px}.chat-panel-actions{display:flex;gap:8px;flex-wrap:wrap}h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}.messages{flex:1;min-height:0;overflow-y:auto;padding:16px;display:grid;align-content:start;gap:10px}.message{border-radius:12px;border:1px solid var(--border-color, #27272a);padding:12px;max-width:86%;display:grid;gap:8px}.message.user{justify-self:end;background:var(--message-user-bg, #18181b)}.message.assistant{justify-self:start;background:var(--message-assistant-bg, #101016)}.message p{margin:0;white-space:pre-wrap;line-height:1.45;font-size:14px}.english-prompt{font-size:12px;color:var(--text-muted, #a1a1aa)}.inline-images{display:flex;gap:6px}.inline-images img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--border-color, #3f3f46)}.image-btn{padding:0;border:none;background:transparent}.draft-files{display:flex;gap:8px;flex-wrap:wrap}.draft-item{position:relative}.draft-item img{width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid var(--border-color, #3f3f46)}.chip-btn{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border-radius:999px;border:1px solid var(--border-color, #3f3f46);background:var(--panel-bg-raised, #09090b);color:var(--text-primary, #d4d4d8);font-size:11px}.status-message{opacity:.85}.composer{border-top:1px solid var(--border-color, #27272a);padding:14px;display:grid;gap:10px}.model-selector{display:grid;gap:8px}.model-selector-label{font-size:12px;color:var(--text-muted, #a1a1aa)}.model-selector-options{display:flex;gap:8px;flex-wrap:wrap}.usage-card{margin-top:4px;padding:12px;border-radius:12px;border:1px solid var(--border-color, #27272a);background:var(--panel-bg-soft, #101014);display:grid;gap:8px}.usage-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.usage-card-title{font-size:12px;color:var(--text-muted, #a1a1aa)}.usage-card-value{font-size:13px;color:var(--text-primary, #f8fafc);font-weight:600}.usage-progress{width:100%;height:8px;border-radius:999px;background:var(--usage-track, #1f1f23);overflow:hidden}.usage-progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-color, #fafafa) 0%,var(--usage-fill-end, #9ca3af) 100%);transition:width .2s ease}.usage-card-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--text-muted, #a1a1aa)}.model-chip{background:var(--panel-bg-soft, #18181b);border:1px solid var(--border-color, #3f3f46);color:var(--text-primary, #f8fafc);padding:8px 12px;font-size:12px;line-height:1}.model-chip.active{background:var(--accent-color, #fafafa);color:var(--accent-contrast, #09090b);border-color:var(--accent-color, #fafafa)}.composer-row{display:flex;gap:8px;align-items:flex-end}.plus-btn{width:38px;height:38px;border-radius:10px;background:var(--panel-bg-soft, #18181b);border:1px solid var(--border-color, #3f3f46);color:var(--text-primary, #f8fafc);font-size:22px;line-height:1;padding:0}textarea,input{width:100%;border-radius:10px;border:1px solid var(--border-color, #3f3f46);background:var(--panel-bg-soft, #0d0d0f);color:var(--text-primary, #f8fafc);padding:10px 12px;font-size:14px}textarea::placeholder,input::placeholder{color:var(--text-muted, #a1a1aa)}textarea{resize:none;min-height:92px}button{cursor:pointer;border-radius:10px;border:none;font-size:14px;font-weight:500;padding:10px 12px;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}button:hover:not(:disabled){transform:translateY(-1px)}button:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--accent-color, #fafafa);outline-offset:2px}.primary-btn{background:var(--accent-color, #fafafa);color:var(--accent-contrast, #09090b)}.prompt-confirm-btn{justify-self:start;font-size:12px;padding:8px 10px}.secondary-btn{background:var(--panel-bg-soft, #18181b);border:1px solid var(--border-color, #3f3f46);color:var(--text-primary, #f8fafc)}.danger-btn{border:1px solid var(--danger-color, #ef4444);background:var(--danger-soft, rgba(239, 68, 68, .18));color:var(--danger-color, #ef4444)}.primary-btn.danger-btn{background:var(--danger-color, #ef4444);color:var(--danger-contrast, #fef2f2);border-color:var(--danger-color, #ef4444)}button:disabled,input:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}.hidden-input{display:none}.preview-body{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center;align-items:center;padding:16px}.preview-body img{width:100%;max-height:calc(100vh - 150px);object-fit:contain;border-radius:12px;border:1px solid var(--border-color, #27272a)}.preview-image-btn{width:100%;padding:0;border:none;background:transparent}.preview-download-btn{padding:8px 12px;font-size:13px;line-height:1}.loader-wrap{display:grid;justify-items:center;gap:12px;color:var(--text-muted, #d4d4d8)}.spinner{width:30px;height:30px;border-radius:999px;border:2px solid var(--border-color, #3f3f46);border-top-color:var(--accent-color, #fafafa);animation:spin .8s linear infinite}.preview-placeholder{color:var(--text-muted, #a1a1aa);font-size:14px}.error{margin:0;padding:0 14px 14px;color:var(--danger-color, #ef4444);font-size:13px}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--lightbox-color, rgba(0, 0, 0, .85));border:none;margin:0;padding:24px;display:flex;align-items:center;justify-content:center;z-index:100}.lightbox img{max-width:min(95vw,1400px);max-height:92vh;border-radius:12px;border:1px solid var(--border-color, #3f3f46)}.bongo-cat-widget{position:fixed;right:20px;bottom:12px;width:90px;height:56px;z-index:95;pointer-events:none;image-rendering:pixelated;opacity:0;transform:translateY(8px);transition:opacity .12s ease,transform .12s ease}.bongo-cat-widget.active{opacity:.95;transform:translateY(0)}.bongo-cat-gif{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.overlay-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay-color, rgba(0, 0, 0, .7));display:flex;align-items:center;justify-content:center;z-index:120;padding:20px}.auth-card,.welcome-card,.theme-modal{border:1px solid var(--border-color, #3f3f46);border-radius:16px;background:var(--panel-bg-raised, #101014);box-shadow:0 24px 70px var(--shadow-color, rgba(0, 0, 0, .26));padding:24px;display:grid;gap:16px}.auth-card,.welcome-card{width:min(460px,100%)}.theme-modal{width:min(640px,100%)}.auth-card h2,.welcome-card h2,.theme-modal h2{margin:0;font-size:24px}.auth-card p,.welcome-card p,.theme-modal p{margin:0;color:var(--text-muted, #c4c4ce);line-height:1.5}.theme-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.theme-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.theme-mode-btn{border:1px solid var(--border-color, #3f3f46);background:var(--panel-bg-soft, #18181b);color:var(--text-primary, #f8fafc)}.theme-mode-btn.active{border-color:var(--accent-color, #fafafa);background:var(--accent-soft, rgba(255, 255, 255, .12))}.theme-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.theme-preview-card{border:1px solid var(--border-color, #3f3f46);background:var(--panel-bg-soft, #18181b);border-radius:14px;padding:14px;display:grid;gap:10px}.theme-preview-label{font-size:12px;color:var(--text-muted, #a1a1aa)}.theme-preview-swatch{width:100%;height:52px;border-radius:12px;border:1px solid var(--border-color, #3f3f46)}.theme-preview-value{font-size:13px;font-weight:600}.theme-live-preview{display:grid;gap:12px}.theme-live-preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.theme-live-preview-title{display:grid;gap:4px}.theme-live-preview-title strong{font-size:14px}.theme-live-preview-title span{font-size:12px;color:var(--text-muted, #a1a1aa)}.theme-live-preview-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:6px 10px;border-radius:999px;background:var(--accent-soft, rgba(255, 255, 255, .12));color:var(--accent-color, #fafafa);border:1px solid var(--accent-color, #fafafa);font-size:12px;font-weight:600}.theme-live-preview-canvas{padding:18px;border-radius:18px;border:1px solid var(--border-color, #3f3f46);background:radial-gradient(circle at top right,var(--accent-soft, rgba(255, 255, 255, .12)),transparent 36%),var(--app-bg, #09090b)}.theme-live-preview-panel{width:min(100%,360px);margin:0 auto;padding:16px;border-radius:16px;border:1px solid var(--border-color, #3f3f46);background:var(--panel-bg, #111113);box-shadow:0 18px 60px var(--shadow-color, rgba(0, 0, 0, .26));display:grid;gap:12px}.theme-live-preview-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--text-muted, #a1a1aa)}.theme-live-preview-message{border:1px solid var(--border-color, #3f3f46);border-radius:12px;padding:12px;font-size:13px;line-height:1.45}.theme-live-preview-message.assistant{background:var(--message-assistant-bg, #101016)}.theme-live-preview-message.user{background:var(--message-user-bg, #18181b)}.theme-live-preview-actions{display:flex;gap:8px;flex-wrap:wrap}.theme-live-preview-actions button{flex:1}.theme-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.theme-color-field{display:grid;gap:8px;font-size:13px;color:var(--text-primary, #f8fafc)}.theme-color-control{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--border-color, #3f3f46);background:var(--panel-bg-soft, #18181b)}.theme-color-control strong{font-size:13px;font-weight:600}.theme-color-control input[type=color]{width:44px;min-width:44px;height:32px;padding:0;border:none;background:transparent;cursor:pointer}.confirm-actions{margin-top:8px;display:flex;justify-content:flex-end;gap:8px}.auth-card span{color:var(--danger-color, #ef4444);font-size:13px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1100px){body{overflow:auto}.page{flex-direction:column;height:auto;min-height:100vh;overflow:visible}.chat-panel,.chat-list-panel,.preview-panel{height:auto;min-height:560px}.preview-body img{max-height:520px}}@media (max-width: 720px){.page{padding:16px}.theme-modal-head,.confirm-actions{flex-direction:column;align-items:stretch}.theme-mode-grid,.theme-preview,.theme-color-grid{grid-template-columns:1fr}.chat-panel-actions{width:100%}.chat-panel-actions button{flex:1}}