*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Segoe UI',sans-serif;
  background:linear-gradient(135deg,#667eea,#764ba2);
  min-height:100vh;padding:20px;color:white
}
.container{max-width:600px;margin:0 auto}
.header{text-align:center;margin-bottom:30px}
.robot-emoji{font-size:4em;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

.status-card{
  background:rgba(255,255,255,0.1);padding:20px;border-radius:20px;
  margin-bottom:20px;border:2px solid rgba(255,255,255,0.2)
}
.status-item{
  display:flex;justify-content:space-between;
  background:rgba(255,255,255,0.05);padding:10px;border-radius:10px;margin:10px 0
}
.status-value{padding:5px 15px;border-radius:20px;font-size:.9em}
.status-connected{background:#10b981}
.status-disconnected{background:#ef4444}
.status-ready{background:#f59e0b}

.button{
  width:100%;padding:18px;font-size:1.2em;border:none;border-radius:15px;
  cursor:pointer;margin:10px 0;font-weight:bold;transition:.3s
}
.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:white}
.btn-success{background:linear-gradient(135deg,#10b981,#059669)}
.btn-recording{background:#f59e0b;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

.conversation{
  background:rgba(255,255,255,0.1);padding:20px;border-radius:20px;
  max-height:400px;overflow-y:auto;margin-top:20px
}
.message{padding:15px;margin:15px 0;border-radius:15px}
.message-user{background:rgba(102,126,234,0.3);margin-left:20px}
.message-robot{background:rgba(16,185,129,0.3);margin-right:20px}

.spinner{
  width:40px;height:40px;border:4px solid rgba(255,255,255,0.3);
  border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;
  margin:auto
}
@keyframes spin{100%{transform:rotate(360deg)}}