/* Live Vidu output on the original portrait display. No generated stills here. */
.fitting-stage.camera-frame { height: 1716px; background: radial-gradient(ellipse at 40% 35%, #183c50, #081521 70%); }
.live-video-stack { position: absolute; inset: 0; z-index: 0; }
.live-video-stack video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover !important; object-position: center; transform: scaleX(1) !important; background: #071421; opacity: 0; transition: opacity .25s; }
#fitting-stage[data-mirrored="true"] .live-video-stack video { transform: scaleX(-1) !important; }
#fitting-stage[data-camera="true"] #camera-video { opacity: 1; }
#fitting-stage[data-output="true"] #tryon-video { opacity: 1; z-index: 1; }
#fitting-stage[data-output="true"] #camera-video { z-index: 2; width: 222px; height: 280px; top: auto; right: auto; bottom: 125px; left: 29px; border: 1px solid #cbebfa80; border-radius: 18px; box-shadow: 0 8px 28px #0006; }
.camera-preview-caption { display: none; position: absolute; z-index: 3; left: 50px; bottom: 143px; font-size: 23px; color: #e8f5fc; text-shadow: 0 2px 8px #000; pointer-events: none; }
#fitting-stage[data-output="true"] .camera-preview-caption { display: block; }
.live-panel { position: absolute; z-index: 5; left: 32px; right: 270px; top: 33%; display: flex; flex-direction: column; align-items: center; gap: 25px; padding: 38px 24px; text-align: center; border-radius: 28px; border: 1px solid #afdff12b; background: #0a2030e0; backdrop-filter: blur(18px); }
#fitting-stage[data-output="true"] .live-panel { display: none; }
.live-emblem { display: grid; place-items: center; width: 112px; height: 112px; border: 1px solid #a1e8ff66; border-radius: 32px; color: #c6efff; background: #80cce919; }
.live-emblem svg { width: 56px; height: 56px; }
.live-panel strong { color: #e9f6fc; font-size: 36px; font-weight: 500; line-height: 1.5; }
.live-panel p { margin: 0; color: #b8cedd; font-size: 27px; line-height: 1.7; max-width: 570px; overflow-wrap: anywhere; }
.live-panel small { color: #8caaba; font-size: 21px; line-height: 1.6; }
.live-connect, .live-play { min-height: 79px; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 18px 32px; background: #c5edfa; color: #153145; border: 1px solid #e1f7ff; border-radius: 18px; font: inherit; font-size: 29px; cursor: pointer; }
.live-connect svg { width: 34px; height: 34px; }
.live-connect:disabled { opacity: .55; cursor: wait; }
.live-play { position: absolute; z-index: 9; left: 160px; right: 270px; top: 48%; }
.live-play[hidden] { display: none; }
#fitting-stage:not([data-camera="true"]) .recording-dot { animation: none; background: #8ba9b8; box-shadow: none; }
.camera-frame .stage-status { max-width: 715px; font-size: 25px; }
.fitting-stage .body-guide, .fitting-stage .scan-prompt { display: none; }
.fitting-stage:not(.changing) .scan-effect { opacity: 0; }
.fitting-stage.changing .scan-effect { display: none; }
#reset-button:disabled { opacity: .4; cursor: default; }
.camera-frame .change-toast { width: auto; max-width: 620px; left: 50%; transform: translateX(-50%); white-space: normal; text-align: center; }
@media (prefers-reduced-motion: reduce) { .live-video-stack video { transition: none; } }

/* A browsable wardrobe floats over the uninterrupted video canvas. */
.fitting-workspace .wardrobe { bottom: 132px; gap: 10px; }
.wardrobe-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; flex-shrink: 0; padding: 5px; border: 1px solid #d4e5f13d; border-radius: 19px; background: #0a1e30d9; backdrop-filter: blur(20px); }
.wardrobe-tabs button { flex: 1; min-height: 55px; padding: 8px 0; font: inherit; font-size: 25px; color: #bad0df; background: transparent; border-radius: 13px; white-space: nowrap; }
.wardrobe-tabs [data-category="palace"] { grid-column: 1 / -1; letter-spacing: 1px; }
.wardrobe-tabs button.active { color: #102e40; background: #b7e8f5; }
.wardrobe-list { position: relative; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; padding: 3px 0; }
.wardrobe-list::-webkit-scrollbar { display: none; }
.fitting-workspace .wardrobe-list .garment-card { flex-shrink: 0; height: 280px; border-radius: 23px; }
.fitting-workspace .wardrobe-list .garment-card[hidden] { display: none; }
.fitting-workspace .wardrobe-list .garment-card:hover { transform: none; }
.fitting-workspace .wardrobe-list .garment-name { font-size: 27px; letter-spacing: 1px; }
.fitting-workspace .wardrobe-list .garment-tone { font-size: 22px; margin-top: 8px; }
.wardrobe-scroll { min-height: 42px; flex-shrink: 0; display: grid; place-items: center; color: #e0f3fc; border: 1px solid #d4e5f12b; border-radius: 13px; background: #0a2030b8; backdrop-filter: blur(14px); }
.wardrobe-scroll svg { width: 32px; height: 32px; }
.fitting-workspace .wardrobe-hint { font-size: 21px; letter-spacing: 0; white-space: nowrap; }
.camera-footer button { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 18px; color: #e1f0f8; font: inherit; font-size: 25px; border-radius: 28px; border: 1px solid #d3eaf438; background: #0c2030c2; backdrop-filter: blur(14px); }
.camera-footer button svg { width: 29px; height: 29px; }
.camera-controls { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.mirror-switch { position: relative; display: block; width: 50px; height: 28px; border-radius: 20px; background: #728a9a77; transition: background .18s; }
.mirror-switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #d4e4ed; transition: transform .18s, background .18s; }
#mirror-button[aria-pressed="true"] { color: #d9f8ff; border-color: #ade9f786; background: #163e51de; }
#mirror-button[aria-pressed="true"] .mirror-switch { background: #a9e8f7; }
#mirror-button[aria-pressed="true"] .mirror-switch::after { transform: translateX(22px); background: #164052; }

/* A short estimated wait keeps the live video moving under a light veil. */
.garment-change-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; background: #06142166; backdrop-filter: blur(5px); }
.garment-change-overlay[hidden] { display: none; }
.garment-change-panel { display: flex; align-items: center; flex-direction: column; width: min(560px, calc(100% - 64px)); padding: 36px 40px 40px; border: 1px solid #b2e7f762; border-radius: 30px; background: linear-gradient(145deg, #14384ce8, #11273de8); box-shadow: 0 24px 80px #0004, inset 0 1px 0 #e1faff17; transform: translateX(-100px); }
.garment-change-emblem { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 20px; border: 1px solid #b5edff47; border-radius: 23px; color: #c3f0ff; background: #a4e8ff0d; box-shadow: 0 0 30px #8bdfff0c; }
.garment-change-emblem svg { width: 43px; height: 43px; }
.garment-change-panel strong { color: #ebf8ff; font-size: 38px; font-weight: 500; letter-spacing: 3px; }
.garment-change-panel p { margin: 16px 0 27px; color: #b3d0e0; font-size: 24px; line-height: 1.5; text-align: center; }
.garment-change-track { width: 100%; height: 9px; overflow: hidden; border-radius: 10px; background: #b1e4f31a; }
.garment-change-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8ddff6, #bad7fc 65%, #cab7f2); transform: scaleX(0); transform-origin: left; animation: garment-change-progress 8s cubic-bezier(.2, .65, .45, 1) forwards; }
@keyframes garment-change-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .garment-change-track i { animation: none !important; transform: scaleX(1); } }