* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; background: #1a1a2e; color: #eee; max-width: 480px; margin: 0 auto; min-height: 100vh; }

#status-bar { display: flex; justify-content: space-around; padding: 8px; background: #16213e; font-size: 14px; }

#video-panel { position: relative; width: 100%; aspect-ratio: 4/3; background: #000; }
#remote-video { width: 100%; height: 100%; object-fit: contain; display: none; }
#video-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #666; font-size: 16px; }

#mode-bar { display: flex; gap: 8px; padding: 8px; }
.mode-btn { flex: 1; padding: 10px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; background: #16213e; color: #aaa; }
.mode-btn.active { background: #0f3460; color: #e94560; }

#dpad { padding: 12px; }
.dpad-row { display: flex; gap: 8px; margin-bottom: 8px; justify-content: center; }
.ctrl-btn { flex: 1; padding: 16px 8px; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; background: #0f3460; color: #eee; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.ctrl-btn:active { background: #e94560; }
.ctrl-btn.stop { background: #c0392b; }
.ctrl-btn.full { flex: 3; }

#ai-panel { padding: 0 12px 12px; }
#chat-messages { height: 200px; overflow-y: auto; background: #16213e; border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.chat-msg { margin-bottom: 8px; padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 1.5; }
.chat-msg.user { background: #0f3460; text-align: right; }
.chat-msg.robot { background: #1a1a2e; }
#chat-input-row { display: flex; gap: 8px; }
#chat-input { flex: 1; padding: 10px; border: none; border-radius: 8px; background: #16213e; color: #eee; font-size: 14px; }
#btn-send { padding: 10px 20px; border: none; border-radius: 8px; background: #e94560; color: #fff; font-size: 14px; cursor: pointer; }