/* Shared identity: official 无界AI artwork. */
/* Approved marmot wordmark; keep the accessible brand text in the DOM. */
body .site-brand{position:relative;width:204px;height:70px;background:url('/wujie-ai-wordmark.webp?v=1') center/cover no-repeat;border-radius:12px}
body .site-brand>span{opacity:0}
body .top .amber-brand{width:142px;height:46px;padding:0;background:url('/wujie-ai-wordmark.webp?v=1') center/cover no-repeat;border-radius:9px}
body .top .amber-brand>*{opacity:0}
.wj-brand-icon{display:inline-block;width:40px;height:40px;object-fit:cover;border-radius:11px;vertical-align:middle;flex-shrink:0}
body .amber-brand{gap:9px}body .amber-brand .wj-brand-icon{width:38px;height:38px;border-radius:11px}body .amber-brand b{font-size:24px;white-space:nowrap}
body .site-brand .brandmark,body .yj-auth-symbol,body .wj-welcome-brand,body .mark,body .brand:empty{background:#faf7f0 url('/wujie-ai-icon-192.png?v=134') center/cover no-repeat!important;color:transparent!important;font-size:0!important;box-shadow:none!important}
body #overlay #dialog.wj-welcome .wj-welcome-brand{background:#faf7f0 url('/wujie-ai-icon-192.png?v=134') center/cover no-repeat!important;color:transparent!important;font-size:0!important}
body .site-brand .brandmark{width:46px;height:46px;border-radius:13px;flex-shrink:0}
body .amber-about .wj-brand-icon{width:80px;height:80px;border-radius:22px}body .amber-chat #heroIcon .wj-brand-icon{width:72px;height:72px;border-radius:20px}
html.wj-starting::after{content:''!important;background:#faf7f0 url('/wujie-ai-wordmark.webp?v=1') center/min(72vw,300px) auto no-repeat!important;padding:0!important}
body .brand-icon-container{width:76px;height:76px;display:block;margin:48px 0 22px;border-radius:21px;object-fit:cover}
/* Keep the mobile identity and model picker in one shared layout. */
@media(max-width:700px){
 body.amber-mobile .top{display:flex;align-items:center;gap:10px;height:56px;min-height:56px;padding:6px 12px}
 body.amber-mobile .top .amber-brand{flex:0 0 auto;gap:7px;min-width:0}
 body.amber-mobile .top .amber-brand{width:128px;height:42px}
 body.amber-mobile .top .amber-brand .wj-brand-icon{width:32px;height:32px;border-radius:9px}
 body.amber-mobile .top .amber-brand b{font-size:20px;line-height:1.2;letter-spacing:0;font-weight:700;color:#342b40;white-space:nowrap}
 body.amber-mobile.amber-chat .top .amber-chat-model{position:static;inset:auto;transform:none;order:1;flex:1 1 0;min-width:0;width:0;max-width:240px;margin-left:auto;height:44px;min-height:44px;padding:0 10px;gap:6px;border-radius:12px;background:#f0ebf8;color:#58427c;border:1px solid #e7dff0;box-shadow:none;font-size:12px;font-weight:600;line-height:1.3}
 body.amber-mobile .top .amber-chat-model>span{min-width:0;flex:1;text-align:left}
 body.amber-mobile .top .amber-chat-model>svg{flex-shrink:0;width:16px;height:16px}
 body.amber-mobile .top .amber-chat-model>svg:last-child{width:10px;height:10px}
 body.amber-mobile .top .mobile-menu{order:2;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin-left:auto;border-radius:12px;background:#f5efe8;color:#735f4c;border:0;box-shadow:none}
 body.amber-mobile.amber-chat .top .mobile-menu{margin-left:0}
 body.amber-mobile .top button:focus-visible{outline:2px solid #70529b;outline-offset:2px}
}
.wj-cream-icon{display:inline-block;width:36px;height:36px;background-image:url('/cream-icons-v1.webp');background-size:400% 200%;background-repeat:no-repeat;flex-shrink:0}
.cream-paint{background-position:0 0}.cream-persona{background-position:33.333% 0}.cream-create{background-position:66.667% 0}.cream-switch{background-position:100% 0}
.cream-text{background-position:0 100%}.cream-api{background-position:33.333% 100%}.cream-works{background-position:66.667% 100%}.cream-account{background-position:100% 100%}
@media(max-width:700px){
 body.amber-mobile.platform-shell #textTools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible;align-items:stretch}
 body.amber-mobile.platform-shell #textTools.hidden{display:none}
 body.amber-mobile.platform-shell #textTools>button,body.amber-mobile.platform-shell #textTools>#promptGenerator,body.amber-mobile.platform-shell #textTools>#createPersonaTool{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;min-height:66px;padding:4px 2px;background:#fffaf3!important;color:#655247!important;border:1px solid #e9dfd2!important;border-radius:14px;box-shadow:0 2px 5px #6f503008!important;font-size:11px;line-height:1.4;white-space:nowrap}
 body.amber-mobile.platform-shell #textTools .wj-cream-icon{width:38px;height:38px}
 body.amber-mobile.platform-shell .mobile-bottom .amber-nav-icon{width:42px;height:38px;background:transparent;box-shadow:none}
 body.amber-mobile.platform-shell .mobile-bottom .wj-cream-icon{width:42px;height:42px}
 body.amber-mobile.platform-shell .mobile-bottom button{background:#fffcf7;color:#756251;border-color:#eadfce;box-shadow:0 3px 9px #6f50300b;gap:3px}
 body.amber-mobile.platform-shell .mobile-bottom button.active{background:#eee8f7;color:#604580;border-color:#cbbbdc;box-shadow:0 3px 10px #6a4d8b12}
 body.amber-mobile.platform-shell.amber-chat .main{bottom:calc(236px + var(--safe-bottom))}
}

/* Shared About/contact dialog across desktop, mobile web and Android. */
.wj-about{text-align:center;padding:20px 0 8px}.wj-about>.wj-brand-icon{width:88px;height:88px;object-fit:contain}.wj-about h3{font-size:26px;margin:18px 0 12px}.wj-about-contact{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:22px auto 0;padding:14px 12px;border-top:1px solid #e9dfd2;font-size:14px}.wj-about-contact strong{font-variant-numeric:tabular-nums;user-select:text;-webkit-user-select:text}.wj-about-contact .pill{margin:0;min-height:36px;padding:7px 12px;font-size:13px}

.wj-about-contact .wj-qq-icon{width:26px;height:30px;flex:0 0 26px;display:block}

/* Links used as controls need the same touch treatment as buttons. */
body.platform-shell :is(a,button,[role="button"]){-webkit-tap-highlight-color:transparent}
body #overlay #dialog #aboutAppUpdate{margin:16px 0 0}
body #overlay #dialog #aboutAppUpdate>a.pill{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:44px;padding:11px 16px;border:0;border-radius:12px;background:#f3edf8;color:#70558c;box-shadow:none;text-decoration:none;line-height:1.5;white-space:normal;text-align:center;user-select:none;-webkit-user-select:none;touch-action:manipulation}
body #overlay #dialog #aboutAppUpdate>a.pill:active{background:#e9dff2}
body.platform-shell :is(a,button,[role="button"]):focus:not(:focus-visible){outline:none}

.composer:has(>#uploads:not(:empty)){flex-wrap:wrap}
.composer>#uploads{flex:0 0 100%;width:100%;max-height:none;margin:0 0 8px;padding:8px 0 2px;gap:10px;overflow-x:auto;overflow-y:hidden}
.composer>#uploads:empty{display:none}
.reference-preview{position:relative;display:block;flex:0 0 64px;width:64px;height:64px;margin:4px 3px 0 0}
.composer>#uploads .reference-preview img{display:block;width:64px;height:64px;border-radius:10px;object-fit:cover}
.composer>#uploads .reference-remove{position:absolute;top:-4px;right:-4px;z-index:2;display:grid;place-items:center;width:23px;height:23px;min-height:23px;padding:0;border:1px solid #e2d4e8;border-radius:50%;background:#fffcf8;color:#70558c;font-size:20px;line-height:1;box-shadow:0 2px 5px #50304f20}
@media(max-width:700px){body.amber-mobile.has-reference-images #textTools{transform:translateY(-88px)}body.amber-mobile.has-reference-images .main{bottom:calc(324px + var(--safe-bottom))}}

#clearPageRecords{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;margin-left:8px;padding:4px;border:0;border-radius:8px;background:transparent;color:#9b826d;vertical-align:middle;cursor:pointer;pointer-events:auto;touch-action:manipulation}
#clearPageRecords svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#clearPageRecords:hover{background:#eee6f4;color:#765a8c}
@media(max-width:700px){#clearPageRecords{width:28px;height:24px;margin-left:5px;padding:4px}.amber-mobile .retention:has(#clearPageRecords){line-height:24px}}

#clearPageRecords{position:relative;left:-5px;top:-4px}


body.platform-shell #chips #promptAssistantTrigger{flex:0 0 auto;border-color:#d7c6e4;background:#eee6f5;color:#70518c;font-weight:600}
.prompt-assistant label{display:block;font-size:13px;color:#705c7d;margin:12px 0}.prompt-assistant textarea{display:block;resize:vertical;min-height:90px;line-height:1.7}.prompt-assistant [hidden]{display:none!important}.prompt-assistant [role=status]{font-size:12px;line-height:1.6}.prompt-assistant .primary{min-height:44px}

#promptAssistantTrigger{display:inline-flex;align-items:center;gap:5px}#promptAssistantTrigger svg{width:13px;height:13px}

.prompt-assistant-refs{display:flex;gap:8px;overflow-x:auto;padding:5px 0 10px}.prompt-assistant-refs:empty{display:none}.prompt-assistant-refs img{flex:0 0 62px;width:62px;height:62px;object-fit:cover;border-radius:10px}.prompt-reference-section>p{font-size:12px!important;line-height:1.6}.prompt-reference-section>.pill{min-height:40px}

.sent-reference-images{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;margin:0 0 10px;max-width:260px}.message.user .bubble .sent-reference-images img{display:block;width:96px;height:96px;max-width:100%;object-fit:cover;border-radius:10px;border:1px solid #d7c6b2;background:#fffcf8}@media(max-width:700px){.message.user .bubble .sent-reference-images img{width:82px;height:82px}.sent-reference-images{max-width:230px}}

.owned-media-preview{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:10px;min-height:110px}.owned-media-preview>img,.owned-media-preview>video{display:block;max-width:100%;max-height:65dvh;object-fit:contain;border-radius:12px}.owned-media-preview .media-preview-save{text-decoration:none;justify-content:center}.media-actions>.result-view{font:inherit;color:inherit;padding:0;background:none;text-decoration:underline;cursor:pointer}
/* The media viewer remains centered, including on the mobile bottom-sheet layout. */
body #overlay.open:has(.owned-media-preview){display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important}
body #overlay #dialog.dialog:has(.owned-media-preview){width:min(960px,100%)!important;max-width:100%!important;max-height:calc(100dvh - 32px)!important;border-radius:24px!important;padding:20px!important;margin:0!important;background:#fffcf8;color:#493b52}
body #overlay #dialog:has(.owned-media-preview) #dialogBody>h2{font-size:20px;line-height:44px;margin-bottom:12px;color:#493b52}
body #overlay #dialog:has(.owned-media-preview) .close{top:20px;right:20px;background:#f2edf5;color:#745885}
.owned-media-preview{position:relative;padding-top:0;gap:12px}
.owned-media-preview>[role=status]{position:absolute;top:42%;z-index:1;margin:0;color:#806b8b;pointer-events:none}
.media-preview-stage{display:flex;align-items:center;justify-content:center;width:100%;height:min(58dvh,560px);overflow:hidden;touch-action:none;background:#f5f0f6;border-radius:16px;user-select:none;overscroll-behavior:contain}
.media-preview-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.media-preview-stage[data-zoomed=true] img{cursor:grab}
.media-preview-tools{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px}
body #overlay #dialog .media-preview-tools :is(button,a),body #overlay #dialog .owned-media-preview>.media-preview-save{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;padding:10px 14px;border:0;border-radius:12px;background:#eee6f4;color:#674a78;font:inherit;font-size:14px;text-decoration:none;box-shadow:none}
body #overlay #dialog .media-preview-tools :is(button,a):focus-visible{outline:2px solid #9275a5;outline-offset:2px}
@media(max-width:700px){body #overlay #dialog.dialog:has(.owned-media-preview){padding:16px!important}.media-preview-stage{height:54dvh}body #overlay #dialog:has(.owned-media-preview) .close{top:16px;right:16px}}

body #canvas.canvas-pro{position:fixed;inset:0;z-index:1200;padding:0;margin:0;background:#faf7f0;width:100%;height:100dvh}body #canvas.canvas-pro .canvas-pro-frame{display:block;border:0;width:100%;height:100%;background:#faf7f0}body #overlay.open:has(.owned-media-preview){z-index:1600!important}
