*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Arial,sans-serif;color:#fff}
body{background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
.app-shell{height:100dvh;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.42));overflow:hidden}
.topbar{height:76px;flex:0 0 76px;display:flex;align-items:center;justify-content:space-between;padding:10px 28px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);z-index:5}
.brand{font-size:30px;font-weight:800;letter-spacing:1px}.subtitle{font-size:13px;opacity:.75;margin-top:2px}
.status{padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.12);font-size:14px}
.robot-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 24px 112px;overflow:hidden}
.robot-media{flex:1;min-height:0;width:min(90vw,720px);display:flex;align-items:center;justify-content:center}
.robot-media img,.robot-media video{width:auto;height:auto;max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.robot-placeholder{font-size:clamp(90px,18vw,190px)}
.conversation{flex:0 0 auto;width:min(900px,94vw);max-height:105px;overflow:auto;text-align:center;padding:12px 20px;border-radius:22px;background:rgba(0,0,0,.38);backdrop-filter:blur(12px)}
.question{font-size:15px;opacity:.72;margin-bottom:5px}.answer{font-size:clamp(19px,2.2vw,30px);line-height:1.25;font-weight:600}
.listening{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:20;font-size:15px;font-weight:700;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.55)}
.hidden{display:none!important}
.controls{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:rgba(0,0,0,.48);backdrop-filter:blur(12px)}
.control{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:12px 20px;background:rgba(255,255,255,.12);color:#fff;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.control:hover{background:rgba(255,255,255,.2)}.control.primary{background:#00AEEF;border-color:transparent}
@media(max-width:600px){
 .topbar{height:66px;flex-basis:66px;padding:9px 16px}.brand{font-size:24px}.subtitle{display:none}
 .status{padding:8px 13px;font-size:13px}
 .robot-stage{padding:4px 16px 104px}
 .conversation{width:94vw;max-height:92px;padding:10px 14px;border-radius:18px}
 .question{font-size:13px}.answer{font-size:19px}
 .controls{gap:7px;padding:9px 8px calc(10px + env(safe-area-inset-bottom))}
 .control{padding:10px 12px;font-size:13px}
 .listening{bottom:78px;font-size:13px}
}
@media(max-height:700px) and (min-width:601px){
 .topbar{height:64px;flex-basis:64px}.robot-stage{padding-bottom:96px}.conversation{max-height:78px}.answer{font-size:20px}.control{padding:9px 15px}
}