/* 实时换装页：在 styles.css 基础上的专属布局 */

.live-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; }

/* ── 镜子（中间舞台） ── */
.mirror { position: relative; }
.mirror-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 26px 14px; flex: none; }
.mirror-head h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }

.live-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: #c7cad0; }
.live-chip.on { background: #ffeced; color: var(--err); }
.live-chip.on i { background: var(--err); animation: blink 1.2s ease-in-out infinite; }
.live-chip.wait { background: var(--brand-soft); color: var(--brand); }
.live-chip.wait i { background: var(--brand); }
@keyframes blink { 50% { opacity: .25; } }

.screen {
  position: relative; flex: 1; min-height: 0; margin: 0 14px 84px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 40%, #24252b 0%, #121316 70%);
}
.screen video, .screen img.out { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.screen video.cam { transform: scaleX(-1); } /* 本地预览做镜像，和照镜子一样 */
.screen.dragging { box-shadow: inset 0 0 0 3px var(--brand); }

.screen-state {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: #fff; background: radial-gradient(70% 60% at 50% 45%, rgba(122,108,240,.18), transparent 70%);
}
.screen-state.over { background: rgba(10,10,12,.55); backdrop-filter: blur(6px); }
.state-art { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: rgba(255,255,255,.08); margin-bottom: 18px; }
.state-art .ic { width: 38px; height: 38px; color: #fff; }
.screen-state h2 { margin: 0; font-size: 20px; }
.screen-state p { margin: 10px 0 22px; max-width: 420px; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.65); }
.btn-lg { height: 46px; padding: 0 26px; font-size: 14px; background: #fff; color: var(--ink); }
.btn-lg:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(0,0,0,.35); }

.pip { position: absolute; right: 16px; bottom: 16px; width: 22%; max-width: 220px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255,255,255,.6); box-shadow: 0 8px 24px rgba(0,0,0,.35); background: #000; }
.pip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.pip span { position: absolute; left: 8px; bottom: 6px; font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

.ring { position: absolute; right: 16px; top: 16px; width: 64px; height: 64px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; }
.ring .track { stroke: rgba(255,255,255,.18); }
.ring .bar { stroke: #fff; stroke-linecap: round; stroke-dasharray: 119.4; transition: stroke-dashoffset 1s linear; }
.ring.low .bar { stroke: #ff8a80; }
.ring b { position: relative; color: #fff; font-size: 18px; font-variant-numeric: tabular-nums; }
.ring b::after { content: "s"; font-size: 11px; font-weight: 500; margin-left: 1px; opacity: .7; }

.wearing { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 6px 18px rgba(0,0,0,.25); max-width: 60%; }
.wearing img { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; background: #f4f4f6; }
.wearing span { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.connecting { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; background: rgba(17,18,20,.85); color: #fff; font-size: 13px; backdrop-filter: blur(8px); white-space: nowrap; }

.drop-hint { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(122,108,240,.18); pointer-events: none; }
.drop-hint div { padding: 12px 22px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; }

.live-dock { bottom: 18px; }
.live-dock .btn-gen .count { background: rgba(255,255,255,.18); }
.dock-btn.stop { color: var(--err); }

/* ── 衣橱 ── */
.wardrobe-tip { margin: -2px 2px 10px; font-size: 12px; color: var(--ink-3); flex: none; }
.wardrobe .card { cursor: grab; }
.wardrobe .card:active { cursor: grabbing; }
.wardrobe .card .badge-on { position: absolute; top: 12px; left: 12px; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 600; opacity: 0; transform: scale(.9); transition: all .15s; }
.wardrobe .card.on .badge-on { opacity: 1; transform: none; }
.empty-grid { grid-column: 1 / -1; padding: 40px 10px; text-align: center; font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }
.empty-grid a { color: var(--ink); font-weight: 600; }

.desc-box { flex: none; border-top: 1px solid var(--line); margin: 0 -16px; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.desc-box label { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.desc-box textarea { resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 12.5px; outline: none; }
.desc-box textarea:focus { border-color: var(--ink); }
.desc-box .pill-btn { align-self: flex-end; }

@media (max-width: 1100px) {
  .live-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
  .live-layout { display: flex; flex-direction: column; }
  .mirror { height: 78vh; min-height: 520px; }
  .wardrobe { max-height: 560px; }
  .mirror-head { padding: 16px 16px 10px; }
  .mirror-head h1 { font-size: 20px; }
  .screen { margin: 0 10px 78px; }
  .pip { width: 30%; }
}