/* MCHILS Retail 2.0: Conversational Concierge + Private Virtual Studio */
.mxi-overlay{position:fixed;inset:0;z-index:260;background:#050b13e8;backdrop-filter:blur(12px);display:grid;place-items:center;padding:12px;overflow-y:auto}
.mxi-dialog{width:min(1070px,100%);max-height:94vh;overflow:auto;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--edge,#9ca3af));border-radius:17px;background:var(--card,#fff);color:var(--ink,#172130);box-shadow:0 35px 100px #0008;min-width:0}
.mxi-heading{padding:25px clamp(19px,3vw,36px);display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--edge,#ddd);background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 9%,var(--card)),var(--card))}
.mxi-heading small{display:block;font-size:10px;color:var(--accent);letter-spacing:.18em;font-weight:1000}
.mxi-heading h2{font-size:clamp(27px,4.1vw,45px);line-height:1.03;letter-spacing:-.07em;font-weight:1000;margin:9px 0 0}
.mxi-close{width:44px;height:44px;border-radius:10px;border:1px solid var(--edge,#ddd);background:var(--bg,#f5f5f5);font-size:25px;color:var(--ink);cursor:pointer;flex:none}
.mxi-intro{padding:18px clamp(19px,3vw,36px) 3px}
.mxi-intro p{font-size:12px;line-height:1.6;color:var(--sub,#777);margin:12px 0}
.mxi-pill{display:inline-flex;border:1px solid var(--accent);border-radius:50px;padding:8px 12px;font-size:10px;font-weight:850;color:var(--accent)}
.mxi-chat{display:flex;flex-direction:column;gap:13px;padding:12px clamp(19px,3vw,36px) 25px}
.mxi-transcript{border:1px solid var(--edge,#ddd);border-radius:13px;padding:19px;min-height:270px;height:min(40vh,440px);overflow-y:auto;background:var(--bg,#f7f7f7);display:flex;align-items:stretch;flex-direction:column;gap:13px}
.mxi-bubble{max-width:86%;padding:13px 15px;border-radius:13px;font-size:12px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.mxi-bubble.assistant{align-self:flex-start;background:var(--card);border:1px solid var(--edge,#ddd)}
.mxi-bubble.user{align-self:flex-end;background:var(--accent);color:var(--bg,#08131a);font-weight:760}
.mxi-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mxi-result{display:grid;grid-template-columns:75px 1fr auto;align-items:center;gap:11px;min-width:0;padding:10px;background:var(--card);border:1px solid var(--edge,#ddd);border-radius:12px}
.mxi-result>img{width:75px;height:75px;object-fit:cover;border-radius:9px;background:#ecede9}
.mxi-result>div{min-width:0}
.mxi-result strong{font-size:11px;display:block;line-height:1.3}
.mxi-result small{font-size:10px;color:var(--sub,#666)}
.mxi-result p{font-size:9px;color:var(--sub,#666);line-height:1.35;margin:4px 0}
.mxi-result b{font-size:12px}
.mxi-result>button{border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--bg,#101820);min-height:38px;padding:8px 11px;font-size:10px;font-weight:900;cursor:pointer}
.mxi-prompts{display:flex;flex-wrap:wrap;gap:8px}
.mxi-prompts button{border:1px solid var(--edge,#ddd);color:var(--ink);background:var(--card);padding:10px 13px;border-radius:30px;font-size:11px;cursor:pointer}
.mxi-prompts button:hover{border-color:var(--accent)}
#mxi-chat-form{display:flex;gap:9px;align-items:stretch}
#mxi-chat-form>input{min-width:0;flex:1;padding:16px 18px;border-radius:9px;border:1px solid var(--edge,#ddd);color:var(--ink);background:var(--bg);font-size:13px}
#mxi-chat-form>button,.mxi-primary{padding:12px 20px;border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:var(--bg,#181818);font-size:12px;font-weight:950;cursor:pointer}
#mxi-chat-form>button:disabled{opacity:.55;cursor:wait}
.mxi-disclaimer{font-size:10px;line-height:1.55;color:var(--sub);padding:0 clamp(19px,3vw,36px) 20px;margin:0}
.mxi-virtual{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);min-height:540px}
.mxi-stage{position:relative;overflow:hidden;min-height:520px;max-height:75vh;background:radial-gradient(circle at 35% 30%,#435c62,#15252c 57%,#0a151c 100%);display:grid;place-items:center;border-right:1px solid var(--edge,#333);touch-action:none}
.mxi-stage>video,.mxi-stage>canvas,.mxi-stage>#mxi-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.mxi-stage>video,.mxi-stage>canvas{transform:scaleX(-1)}
.mxi-stage>canvas{z-index:2;pointer-events:none}
.mxi-stage>#mxi-object{position:absolute;z-index:4;left:50%;top:50%;width:clamp(135px,42%,300px);max-height:65%;object-fit:contain;border-radius:12px;mix-blend-mode:normal;cursor:grab;user-select:none;touch-action:none;filter:drop-shadow(0 18px 23px #0009);transition:none;pointer-events:auto}
.mxi-stage>#mxi-object:active{cursor:grabbing}
.mxi-stage img[hidden],.mxi-stage video[hidden],.mxi-stage canvas[hidden],.mxi-empty[hidden]{display:none!important}
.mxi-empty{text-align:center;color:#f2fff8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;max-width:280px;padding:30px;z-index:0}
.mxi-empty span{font-size:75px;opacity:.6}
.mxi-empty strong{font-size:22px;font-weight:950;letter-spacing:-.05em}
.mxi-empty p{font-size:11px;line-height:1.5;color:#c7d9d8}
.mxi-demo-flag{position:absolute;left:15px;top:15px;z-index:7;pointer-events:none;background:#0e1b22bf;color:white;padding:9px 11px;font-size:9px;font-weight:900;letter-spacing:.12em;border:1px solid #ffffff60;border-radius:6px}
.mxi-tools{padding:clamp(19px,3vw,35px);display:flex;flex-direction:column;gap:15px}
.mxi-tooltop{display:flex;align-items:start;justify-content:space-between;gap:9px}
.mxi-tooltop span{font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:950}
.mxi-tooltop strong{font-size:10px;color:var(--sub)}
.mxi-tools>label{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:850;color:var(--sub)}
.mxi-tools select{padding:14px 12px;border:1px solid var(--edge);border-radius:9px;background:var(--bg);color:var(--ink);font-size:12px;width:100%}
.mxi-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.mxi-actions>button,.mxi-upload{display:grid;place-items:center;cursor:pointer;min-height:55px;border:1px solid var(--edge);border-radius:9px;background:var(--bg);color:var(--ink);font-size:10px;font-weight:900;padding:8px;text-align:center}
.mxi-actions>button:hover,.mxi-upload:hover{border-color:var(--accent)}
.mxi-swatches{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mxi-swatches span{font-size:11px;color:var(--sub);width:100%;font-weight:800}
.mxi-swatches button{width:31px;height:31px;border:2px solid #ffffffa0;border-radius:50%;cursor:pointer}
.mxi-swatches button.on{outline:3px solid var(--accent);outline-offset:2px}
.mxi-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mxi-control-grid label{color:var(--sub);font-size:11px;display:flex;flex-direction:column;gap:10px;font-weight:850}
.mxi-control-grid input{width:100%;accent-color:var(--accent)}
.mxi-helper{line-height:1.6;font-size:11px;color:var(--sub);margin:0}
.mxi-state{font-size:11px;padding:14px;border-radius:9px;border:1px solid var(--edge);background:var(--bg);color:var(--sub);line-height:1.55}
.mxi-primary{min-height:49px}
@media(max-width:900px){.mxi-virtual{grid-template-columns:1fr}.mxi-stage{height:480px;min-height:400px;max-height:none;border-right:0;border-bottom:1px solid var(--edge)}.mxi-tools{padding:22px}.mxi-results{grid-template-columns:1fr}}
@media(max-width:550px){.mxi-overlay{padding:6px}.mxi-dialog{max-height:97vh}.mxi-stage{height:min(52vh,425px);min-height:320px}.mxi-heading{padding:15px}.mxi-heading h2{font-size:27px}.mxi-close{width:37px;height:37px}.mxi-transcript{height:37vh;padding:12px}.mxi-bubble{max-width:96%}.mxi-result{grid-template-columns:60px minmax(0,1fr) auto;gap:7px}.mxi-result>img{width:60px;height:60px}.mxi-result>button{padding:8px;font-size:9px}.mxi-tools{padding:15px;gap:11px}.mxi-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.mxi-actions>button,.mxi-upload{font-size:9px;padding:6px}.mxi-demo-flag{font-size:8px;left:9px;top:9px}}
@media(prefers-reduced-motion:reduce){.mxi-dialog *{scroll-behavior:auto!important}}