Responsive UI rewrite: fix joystick behavior and antenna panel

- Rewrite to single-column responsive layout for mobile support
- Fix joystick to continue movement while held (interval-based)
- Fix antenna sliders to show both left and right
- Remove head orientation absolute panel
- Use separate target tracking to prevent robot state interference
- Make joystick responsive with min(250px, 40vw) sizing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.html

@@ -31,6 +31,7 @@
             background: var(--pollen-darker);
             color: var(--text-primary);
             min-height: 100vh;
+            min-height: 100dvh;
             overflow-x: hidden;
         }
 
@@ -38,104 +39,78 @@
         .header {
             background: rgba(0,0,0,0.4);
             backdrop-filter: blur(10px);
-            padding: 12px 20px;
+            padding: 8px 16px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             border-bottom: 1px solid rgba(255,107,53,0.2);
-            position: sticky;
-            top: 0;
-            z-index: 100;
         }
 
         .logo {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 10px;
         }
 
         .logo img {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
+            width: 32px;
+            height: 32px;
+            border-radius: 6px;
         }
 
         .logo-text {
             font-weight: 700;
-            font-size: 1.2em;
+            font-size: 1em;
             color: var(--pollen-coral);
         }
 
         .logo-text span {
             color: var(--text-secondary);
             font-weight: 400;
+            font-size: 0.85em;
         }
 
         .user-section {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 8px;
         }
 
         .user-badge {
-            display: flex;
-            align-items: center;
-            gap: 8px;
             background: var(--pollen-card);
-            padding: 6px 14px;
-            border-radius: 20px;
-            font-size: 0.9em;
+            padding: 4px 12px;
+            border-radius: 16px;
+            font-size: 0.8em;
         }
 
         .btn-logout {
             background: transparent;
             border: 1px solid var(--text-muted);
             color: var(--text-secondary);
-            padding: 6px 14px;
-            border-radius: 16px;
+            padding: 4px 12px;
+            border-radius: 12px;
             cursor: pointer;
-            font-size: 0.85em;
-            transition: all 0.2s;
-        }
-
-        .btn-logout:hover {
-            border-color: var(--pollen-coral);
-            color: var(--pollen-coral);
+            font-size: 0.75em;
         }
 
-        /* Main Layout */
+        /* Main Layout - Single Column */
         .app-container {
-            display: grid;
-            grid-template-columns: 1fr 340px;
-            gap: 16px;
-            padding: 16px;
-            max-width: 1600px;
+            display: flex;
+            flex-direction: column;
+            padding: 8px;
+            gap: 8px;
+            max-width: 800px;
             margin: 0 auto;
-            min-height: calc(100vh - 65px);
-        }
-
-        @media (max-width: 1024px) {
-            .app-container {
-                grid-template-columns: 1fr;
-            }
-            .control-sidebar {
-                order: 2;
-            }
         }
 
         /* Video Section */
         .video-container {
             position: relative;
             background: #000;
-            border-radius: 16px;
+            border-radius: 12px;
             overflow: hidden;
             aspect-ratio: 16/9;
-        }
-
-        @media (max-width: 1024px) {
-            .video-container {
-                aspect-ratio: 4/3;
-            }
+            width: 100%;
         }
 
         video {
@@ -150,7 +125,7 @@
             top: 0;
             left: 0;
             right: 0;
-            padding: 16px;
+            padding: 12px;
             background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
             display: flex;
             justify-content: space-between;
@@ -160,16 +135,16 @@
         .connection-badge {
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 6px;
             background: rgba(0,0,0,0.5);
-            padding: 8px 14px;
-            border-radius: 20px;
-            font-size: 0.85em;
+            padding: 6px 12px;
+            border-radius: 16px;
+            font-size: 0.8em;
         }
 
         .status-indicator {
-            width: 10px;
-            height: 10px;
+            width: 8px;
+            height: 8px;
             border-radius: 50%;
             background: var(--danger);
         }
@@ -191,9 +166,9 @@
 
         .robot-name {
             background: rgba(0,0,0,0.5);
-            padding: 8px 14px;
-            border-radius: 20px;
-            font-size: 0.85em;
+            padding: 6px 12px;
+            border-radius: 16px;
+            font-size: 0.8em;
             font-weight: 500;
         }
 
@@ -202,28 +177,25 @@
             bottom: 0;
             left: 0;
             right: 0;
-            padding: 16px;
+            padding: 12px;
             background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
         }
 
         .video-controls {
             display: flex;
             justify-content: center;
-            gap: 12px;
+            gap: 8px;
             flex-wrap: wrap;
         }
 
         .btn {
-            padding: 10px 20px;
+            padding: 8px 16px;
             border: none;
             border-radius: 8px;
             font-weight: 600;
-            font-size: 0.9em;
+            font-size: 0.85em;
             cursor: pointer;
             transition: all 0.2s;
-            display: flex;
-            align-items: center;
-            gap: 6px;
         }
 
         .btn-primary {
@@ -231,20 +203,11 @@
             color: white;
         }
 
-        .btn-primary:hover {
-            background: var(--pollen-coral-light);
-            transform: translateY(-1px);
-        }
-
         .btn-secondary {
             background: rgba(255,255,255,0.15);
             color: white;
         }
 
-        .btn-secondary:hover {
-            background: rgba(255,255,255,0.25);
-        }
-
         .btn-danger {
             background: var(--danger);
             color: white;
@@ -253,61 +216,38 @@
         .btn:disabled {
             opacity: 0.4;
             cursor: not-allowed;
-            transform: none;
         }
 
         /* State Bar */
         .state-bar {
             display: flex;
-            gap: 16px;
-            padding: 12px 16px;
+            gap: 12px;
+            padding: 8px 12px;
             background: var(--pollen-card);
-            border-radius: 0 0 16px 16px;
+            border-radius: 8px;
             flex-wrap: wrap;
-            margin-top: -16px;
+            justify-content: center;
         }
 
         .state-item {
             display: flex;
             flex-direction: column;
+            align-items: center;
             gap: 2px;
         }
 
         .state-item label {
-            font-size: 0.7em;
+            font-size: 0.65em;
             color: var(--text-muted);
             text-transform: uppercase;
-            letter-spacing: 0.5px;
         }
 
         .state-item .value {
-            font-family: 'SF Mono', 'Fira Code', monospace;
-            font-size: 0.9em;
+            font-family: monospace;
+            font-size: 0.8em;
             color: var(--pollen-coral);
         }
 
-        /* Control Sidebar */
-        .control-sidebar {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            max-height: calc(100vh - 90px);
-            overflow-y: auto;
-        }
-
-        .control-sidebar::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        .control-sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        .control-sidebar::-webkit-scrollbar-thumb {
-            background: var(--pollen-card-light);
-            border-radius: 3px;
-        }
-
         /* Panels */
         .panel {
             background: var(--pollen-card);
@@ -316,47 +256,43 @@
         }
 
         .panel-header {
-            padding: 12px 16px;
+            padding: 10px 14px;
             background: rgba(0,0,0,0.2);
             font-weight: 600;
             font-size: 0.85em;
-            display: flex;
-            align-items: center;
-            gap: 8px;
             color: var(--pollen-coral);
         }
 
         .panel-content {
-            padding: 16px;
+            padding: 12px;
         }
 
-        /* Joystick */
-        .joystick-container {
+        /* Joystick - Full Width Responsive */
+        .joystick-wrapper {
             display: flex;
-            gap: 24px;
             align-items: center;
             justify-content: center;
-            padding: 10px 0;
+            gap: 20px;
+            padding: 10px;
         }
 
         .joystick-area {
-            width: 200px;
-            height: 200px;
+            width: min(250px, 40vw);
+            height: min(250px, 40vw);
+            min-width: 180px;
+            min-height: 180px;
             background: radial-gradient(circle at center, var(--pollen-card-light) 0%, var(--pollen-darker) 100%);
             border-radius: 50%;
             position: relative;
             border: 3px solid var(--pollen-coral);
             touch-action: none;
             cursor: grab;
-        }
-
-        .joystick-area:active {
-            cursor: grabbing;
+            flex-shrink: 0;
         }
 
         .joystick-knob {
-            width: 60px;
-            height: 60px;
+            width: 25%;
+            height: 25%;
             background: var(--pollen-coral);
             border-radius: 50%;
             position: absolute;
@@ -365,237 +301,138 @@
             transform: translate(-50%, -50%);
             box-shadow: 0 4px 16px rgba(255,107,53,0.5);
             pointer-events: none;
-            transition: box-shadow 0.2s;
         }
 
-        .joystick-area:active .joystick-knob {
-            box-shadow: 0 6px 24px rgba(255,107,53,0.7);
-        }
-
-        .joystick-labels {
+        .joystick-label {
             position: absolute;
-            font-size: 0.75em;
+            font-size: 0.7em;
             color: var(--text-muted);
             font-weight: 500;
         }
 
-        .joystick-labels.top { top: 12px; left: 50%; transform: translateX(-50%); }
-        .joystick-labels.bottom { bottom: 12px; left: 50%; transform: translateX(-50%); }
-        .joystick-labels.left { left: 10px; top: 50%; transform: translateY(-50%); }
-        .joystick-labels.right { right: 10px; top: 50%; transform: translateY(-50%); }
+        .joystick-label.top { top: 8%; left: 50%; transform: translateX(-50%); }
+        .joystick-label.bottom { bottom: 8%; left: 50%; transform: translateX(-50%); }
+        .joystick-label.left { left: 5%; top: 50%; transform: translateY(-50%); }
+        .joystick-label.right { right: 5%; top: 50%; transform: translateY(-50%); }
 
-        .z-slider-container {
+        .roll-control {
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 10px;
+            gap: 8px;
+            flex-shrink: 0;
         }
 
-        .z-slider {
+        .roll-slider {
             writing-mode: vertical-lr;
             direction: rtl;
-            height: 180px;
-            width: 12px;
+            height: min(220px, 38vw);
+            min-height: 160px;
+            width: 16px;
             -webkit-appearance: none;
             background: var(--pollen-darker);
-            border-radius: 6px;
+            border-radius: 8px;
             border: 2px solid var(--pollen-card-light);
         }
 
-        .z-slider::-webkit-slider-thumb {
+        .roll-slider::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 32px;
-            height: 32px;
+            width: 36px;
+            height: 36px;
             background: var(--pollen-coral);
             border-radius: 50%;
             cursor: pointer;
             box-shadow: 0 2px 10px rgba(255,107,53,0.5);
         }
 
-        .z-label {
-            font-size: 0.8em;
+        .roll-label {
+            font-size: 0.75em;
             color: var(--text-muted);
             font-weight: 500;
         }
 
-        /* Sliders */
-        .slider-group {
-            margin-bottom: 16px;
-        }
-
-        .slider-group:last-child {
-            margin-bottom: 0;
+        .joystick-hint {
+            text-align: center;
+            font-size: 0.75em;
+            color: var(--text-muted);
+            padding-top: 8px;
         }
 
-        .slider-header {
+        /* Sliders */
+        .slider-row {
             display: flex;
-            justify-content: space-between;
+            gap: 12px;
             align-items: center;
-            margin-bottom: 8px;
+            margin-bottom: 12px;
         }
 
-        .slider-label {
-            font-size: 0.85em;
-            color: var(--text-secondary);
+        .slider-row:last-child {
+            margin-bottom: 0;
         }
 
-        .slider-value {
-            font-family: 'SF Mono', monospace;
-            font-size: 0.85em;
-            color: var(--pollen-coral);
-            min-width: 50px;
-            text-align: right;
+        .slider-label {
+            font-size: 0.8em;
+            color: var(--text-secondary);
+            min-width: 80px;
         }
 
         .slider {
-            width: 100%;
-            height: 6px;
+            flex: 1;
+            height: 8px;
             -webkit-appearance: none;
             background: var(--pollen-darker);
-            border-radius: 3px;
-            outline: none;
+            border-radius: 4px;
         }
 
         .slider::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 18px;
-            height: 18px;
+            width: 20px;
+            height: 20px;
             background: var(--pollen-coral);
             border-radius: 50%;
             cursor: pointer;
-            transition: transform 0.1s, box-shadow 0.1s;
         }
 
-        .slider::-webkit-slider-thumb:hover {
-            transform: scale(1.1);
-            box-shadow: 0 0 10px rgba(255,107,53,0.5);
-        }
-
-        .slider::-webkit-slider-thumb:active {
-            transform: scale(1.2);
-        }
-
-        /* Motor Buttons */
-        .motor-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 8px;
-        }
-
-        .motor-btn {
-            padding: 10px;
-            border: 2px solid transparent;
-            border-radius: 8px;
-            font-weight: 600;
+        .slider-value {
+            font-family: monospace;
             font-size: 0.8em;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .motor-btn.on {
-            background: #1B5E20;
-            color: white;
-        }
-
-        .motor-btn.on:hover { background: #2E7D32; }
-        .motor-btn.on.active { border-color: var(--success); box-shadow: 0 0 12px rgba(72,187,120,0.4); }
-
-        .motor-btn.off {
-            background: #B71C1C;
-            color: white;
-        }
-
-        .motor-btn.off:hover { background: #C62828; }
-        .motor-btn.off.active { border-color: var(--danger); box-shadow: 0 0 12px rgba(245,101,101,0.4); }
-
-        .motor-btn.gravity {
-            background: var(--pollen-coral-dark);
-            color: white;
-        }
-
-        .motor-btn.gravity:hover { background: var(--pollen-coral); }
-        .motor-btn.gravity.active { border-color: var(--pollen-coral-light); box-shadow: 0 0 12px rgba(255,107,53,0.4); }
-
-        .motor-btn:disabled {
-            opacity: 0.4;
-            cursor: not-allowed;
-        }
-
-        /* Animation Buttons */
-        .action-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 8px;
-        }
-
-        .action-btn {
-            padding: 12px;
-            background: var(--pollen-darker);
-            border: 1px solid var(--pollen-card-light);
-            color: var(--text-primary);
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 0.85em;
-            transition: all 0.2s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-        }
-
-        .action-btn:hover {
-            background: var(--pollen-card-light);
-            border-color: var(--pollen-coral);
-        }
-
-        .action-btn:disabled {
-            opacity: 0.4;
-            cursor: not-allowed;
-        }
-
-        .action-btn.recording {
-            background: var(--danger);
-            border-color: var(--danger);
-            animation: blink 1s infinite;
+            color: var(--pollen-coral);
+            min-width: 45px;
+            text-align: right;
         }
 
-        /* Sound & Speak */
+        /* Sound & Voice */
         .sound-row {
             display: flex;
             gap: 8px;
-            margin-bottom: 12px;
+            margin-bottom: 10px;
         }
 
         .sound-input {
             flex: 1;
-            padding: 10px 12px;
+            padding: 8px 10px;
             background: var(--pollen-darker);
             border: 1px solid var(--pollen-card-light);
-            border-radius: 8px;
+            border-radius: 6px;
             color: var(--text-primary);
-            font-size: 0.9em;
-        }
-
-        .sound-input:focus {
-            outline: none;
-            border-color: var(--pollen-coral);
+            font-size: 0.85em;
         }
 
         .sound-presets {
             display: flex;
             flex-wrap: wrap;
             gap: 6px;
+            margin-bottom: 12px;
         }
 
         .preset-chip {
-            padding: 6px 12px;
+            padding: 4px 10px;
             background: var(--pollen-darker);
             border: 1px solid var(--pollen-card-light);
-            border-radius: 16px;
+            border-radius: 12px;
             color: var(--text-secondary);
-            font-size: 0.75em;
+            font-size: 0.7em;
             cursor: pointer;
-            transition: all 0.2s;
         }
 
         .preset-chip:hover {
@@ -603,40 +440,66 @@
             color: var(--pollen-coral);
         }
 
-        .speak-section {
-            margin-top: 16px;
-            padding-top: 16px;
+        .voice-section {
+            padding-top: 10px;
             border-top: 1px solid var(--pollen-card-light);
         }
 
-        .speak-label {
-            font-size: 0.8em;
+        .voice-label {
+            font-size: 0.75em;
             color: var(--text-muted);
             margin-bottom: 8px;
             display: block;
         }
 
-        .speak-row {
+        .voice-buttons {
             display: flex;
             gap: 8px;
         }
 
-        .speak-input {
+        .voice-buttons .btn {
             flex: 1;
-            padding: 10px 12px;
+        }
+
+        #micStatus {
+            margin-top: 8px;
+            font-size: 0.75em;
+            color: var(--text-muted);
+            text-align: center;
+        }
+
+        /* Action buttons */
+        .action-row {
+            display: flex;
+            gap: 8px;
+        }
+
+        .action-btn {
+            flex: 1;
+            padding: 10px;
             background: var(--pollen-darker);
             border: 1px solid var(--pollen-card-light);
-            border-radius: 8px;
             color: var(--text-primary);
-            font-size: 0.9em;
-            resize: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 0.8em;
         }
 
-        .speak-input:focus {
-            outline: none;
+        .action-btn:hover {
             border-color: var(--pollen-coral);
         }
 
+        .action-btn:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        .action-btn.recording {
+            background: var(--danger);
+            border-color: var(--danger);
+            animation: blink 1s infinite;
+        }
+
         /* Robot Selector */
         .robot-list {
             display: flex;
@@ -645,12 +508,11 @@
         }
 
         .robot-card {
-            padding: 12px 16px;
+            padding: 10px 14px;
             background: var(--pollen-darker);
             border: 2px solid transparent;
-            border-radius: 10px;
+            border-radius: 8px;
             cursor: pointer;
-            transition: all 0.2s;
         }
 
         .robot-card:hover {
@@ -659,16 +521,15 @@
 
         .robot-card.selected {
             border-color: var(--pollen-coral);
-            background: var(--pollen-card-light);
         }
 
         .robot-card .name {
             font-weight: 600;
-            margin-bottom: 4px;
+            font-size: 0.9em;
         }
 
         .robot-card .id {
-            font-size: 0.8em;
+            font-size: 0.75em;
             color: var(--text-muted);
             font-family: monospace;
         }
@@ -676,114 +537,56 @@
         /* Login View */
         .login-view {
             min-height: 100vh;
+            min-height: 100dvh;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 20px;
-            background: linear-gradient(135deg, var(--pollen-darker) 0%, var(--pollen-dark) 100%);
         }
 
         .login-card {
             background: var(--pollen-card);
-            padding: 48px;
-            border-radius: 20px;
+            padding: 40px;
+            border-radius: 16px;
             text-align: center;
-            max-width: 420px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+            max-width: 380px;
         }
 
         .login-logo {
-            width: 80px;
-            height: 80px;
-            margin-bottom: 24px;
+            width: 72px;
+            height: 72px;
+            margin-bottom: 20px;
+            border-radius: 12px;
         }
 
         .login-card h2 {
             color: var(--pollen-coral);
-            margin-bottom: 12px;
-            font-size: 1.8em;
+            margin-bottom: 10px;
+            font-size: 1.5em;
         }
 
         .login-card p {
             color: var(--text-secondary);
-            margin-bottom: 32px;
-            line-height: 1.6;
+            margin-bottom: 24px;
+            font-size: 0.9em;
+            line-height: 1.5;
         }
 
         .btn-hf {
             background: #FFD21E;
             color: #000;
             border: none;
-            padding: 14px 32px;
-            border-radius: 10px;
-            font-size: 1em;
+            padding: 12px 28px;
+            border-radius: 8px;
+            font-size: 0.95em;
             font-weight: 700;
             cursor: pointer;
-            transition: all 0.2s;
             display: inline-flex;
             align-items: center;
             gap: 8px;
         }
 
-        .btn-hf:hover {
-            background: #FFE55C;
-            transform: translateY(-2px);
-            box-shadow: 0 8px 20px rgba(255,210,30,0.3);
-        }
-
-        /* Utilities */
         .hidden { display: none !important; }
-
-        /* Mobile adjustments */
-        @media (max-width: 600px) {
-            .header {
-                padding: 10px 16px;
-            }
-
-            .logo-text {
-                font-size: 1em;
-            }
-
-            .app-container {
-                padding: 12px;
-                gap: 12px;
-            }
-
-            .video-controls {
-                gap: 8px;
-            }
-
-            .btn {
-                padding: 8px 14px;
-                font-size: 0.85em;
-            }
-
-            .panel-content {
-                padding: 12px;
-            }
-
-            .joystick-area {
-                width: 160px;
-                height: 160px;
-            }
-
-            .z-slider {
-                height: 140px;
-            }
-
-            .state-bar {
-                gap: 12px;
-                padding: 10px 12px;
-            }
-
-            .state-item label {
-                font-size: 0.65em;
-            }
-
-            .state-item .value {
-                font-size: 0.8em;
-            }
-        }
     </style>
 </head>
 <body>
@@ -794,7 +597,7 @@
             <h2>Reachy Mini</h2>
             <p>Sign in with your HuggingFace account to connect and control your robot remotely.</p>
             <button class="btn-hf" onclick="loginToHuggingFace()">
-                <svg width="20" height="20" viewBox="0 0 95 88" fill="currentColor">
+                <svg width="18" height="18" viewBox="0 0 95 88" fill="currentColor">
                     <path d="M47.5 0C26.3 0 9.1 17.2 9.1 38.4v2.9c0 4.5 1.1 9 3.2 13L0 88h95L82.7 54.3c2.1-4 3.2-8.5 3.2-13v-2.9C85.9 17.2 68.7 0 47.5 0z"/>
                 </svg>
                 Sign in with Hugging Face
@@ -810,195 +613,125 @@
                 <div class="logo-text">Reachy Mini <span>by Pollen Robotics</span></div>
             </div>
             <div class="user-section">
-                <div class="user-badge">
-                    <span id="username">@user</span>
-                </div>
+                <div class="user-badge"><span id="username">@user</span></div>
                 <button class="btn-logout" onclick="logout()">Sign out</button>
             </div>
         </header>
 
         <div class="app-container">
-            <!-- Video Section -->
-            <div class="video-section">
-                <div class="video-container">
-                    <video id="remoteVideo" autoplay playsinline></video>
-                    <audio id="remoteAudio" autoplay></audio>
-
-                    <div class="video-overlay-top">
-                        <div class="connection-badge">
-                            <div class="status-indicator" id="statusIndicator"></div>
-                            <span id="statusText">Disconnected</span>
-                        </div>
-                        <div class="robot-name" id="robotName"></div>
-                    </div>
-
-                    <div class="video-overlay-bottom">
-                        <div class="video-controls">
-                            <button class="btn btn-secondary" id="connectBtn" onclick="connectSignaling()">Connect Server</button>
-                            <button class="btn btn-primary" id="startBtn" onclick="startStream()" disabled>Start Stream</button>
-                            <button class="btn btn-danger" id="stopBtn" onclick="stopStream()" disabled>Disconnect</button>
-                        </div>
+            <!-- Video -->
+            <div class="video-container">
+                <video id="remoteVideo" autoplay playsinline></video>
+                <audio id="remoteAudio" autoplay></audio>
+
+                <div class="video-overlay-top">
+                    <div class="connection-badge">
+                        <div class="status-indicator" id="statusIndicator"></div>
+                        <span id="statusText">Disconnected</span>
                     </div>
+                    <div class="robot-name" id="robotName"></div>
                 </div>
 
-                <div class="state-bar" id="stateBar">
-                    <div class="state-item">
-                        <label>Motors</label>
-                        <span class="value" id="stateMotors">--</span>
-                    </div>
-                    <div class="state-item">
-                        <label>Yaw</label>
-                        <span class="value" id="stateYaw">--</span>
-                    </div>
-                    <div class="state-item">
-                        <label>Pitch</label>
-                        <span class="value" id="statePitch">--</span>
-                    </div>
-                    <div class="state-item">
-                        <label>Roll</label>
-                        <span class="value" id="stateRoll">--</span>
-                    </div>
-                    <div class="state-item">
-                        <label>Body</label>
-                        <span class="value" id="stateBody">--</span>
-                    </div>
-                    <div class="state-item">
-                        <label>R.Ant</label>
-                        <span class="value" id="stateRAnt">--</span>
-                    </div>
-                    <div class="state-item">
-                        <label>L.Ant</label>
-                        <span class="value" id="stateLAnt">--</span>
+                <div class="video-overlay-bottom">
+                    <div class="video-controls">
+                        <button class="btn btn-secondary" id="connectBtn" onclick="connectSignaling()">Connect</button>
+                        <button class="btn btn-primary" id="startBtn" onclick="startStream()" disabled>Start</button>
+                        <button class="btn btn-danger" id="stopBtn" onclick="stopStream()" disabled>Stop</button>
                     </div>
                 </div>
+            </div>
 
-                <!-- Robot Selector -->
-                <div id="robotSelector" class="panel hidden" style="margin-top: 16px;">
-                    <div class="panel-header">Available Robots</div>
-                    <div class="panel-content">
-                        <div id="robotList" class="robot-list">
-                            <div style="color: var(--text-muted); font-size: 0.9em;">Searching for robots...</div>
-                        </div>
-                    </div>
-                </div>
+            <!-- State Bar -->
+            <div class="state-bar">
+                <div class="state-item"><label>Yaw</label><span class="value" id="stateYaw">--</span></div>
+                <div class="state-item"><label>Pitch</label><span class="value" id="statePitch">--</span></div>
+                <div class="state-item"><label>Roll</label><span class="value" id="stateRoll">--</span></div>
+                <div class="state-item"><label>Body</label><span class="value" id="stateBody">--</span></div>
+                <div class="state-item"><label>R.Ant</label><span class="value" id="stateRAnt">--</span></div>
+                <div class="state-item"><label>L.Ant</label><span class="value" id="stateLAnt">--</span></div>
             </div>
 
-            <!-- Control Sidebar -->
-            <div class="control-sidebar">
-                <!-- Joystick Control -->
-                <div class="panel">
-                    <div class="panel-header">Position Control (Relative)</div>
-                    <div class="panel-content">
-                        <div class="joystick-container">
-                            <div class="joystick-area" id="joystick">
-                                <div class="joystick-knob" id="joystickKnob"></div>
-                                <span class="joystick-labels top">Pitch +</span>
-                                <span class="joystick-labels bottom">Pitch -</span>
-                                <span class="joystick-labels left">Yaw +</span>
-                                <span class="joystick-labels right">Yaw -</span>
-                            </div>
-                            <div class="z-slider-container">
-                                <span class="z-label">Roll +</span>
-                                <input type="range" class="z-slider" id="rollJoystick" min="-100" max="100" value="0">
-                                <span class="z-label">Roll -</span>
-                            </div>
-                        </div>
-                        <div style="text-align: center; margin-top: 12px; font-size: 0.8em; color: var(--text-muted);">
-                            Drag joystick to move. Release to stop.
-                        </div>
+            <!-- Robot Selector -->
+            <div id="robotSelector" class="panel hidden">
+                <div class="panel-header">Available Robots</div>
+                <div class="panel-content">
+                    <div id="robotList" class="robot-list">
+                        <div style="color: var(--text-muted); font-size: 0.85em;">Searching...</div>
                     </div>
                 </div>
+            </div>
 
-                <!-- Orientation Sliders (Absolute) -->
-                <div class="panel">
-                    <div class="panel-header">Head Orientation (Absolute)</div>
-                    <div class="panel-content">
-                        <div class="slider-group">
-                            <div class="slider-header">
-                                <span class="slider-label">Yaw (left/right)</span>
-                                <span class="slider-value" id="yawValue">0°</span>
-                            </div>
-                            <input type="range" class="slider" id="yawSlider" min="-45" max="45" value="0">
-                        </div>
-                        <div class="slider-group">
-                            <div class="slider-header">
-                                <span class="slider-label">Pitch (up/down)</span>
-                                <span class="slider-value" id="pitchValue">0°</span>
-                            </div>
-                            <input type="range" class="slider" id="pitchSlider" min="-30" max="30" value="0">
-                        </div>
-                        <div class="slider-group">
-                            <div class="slider-header">
-                                <span class="slider-label">Roll (tilt)</span>
-                                <span class="slider-value" id="rollValue">0°</span>
-                            </div>
-                            <input type="range" class="slider" id="rollSlider" min="-20" max="20" value="0">
+            <!-- Joystick Control -->
+            <div class="panel">
+                <div class="panel-header">Head Control</div>
+                <div class="panel-content">
+                    <div class="joystick-wrapper">
+                        <div class="joystick-area" id="joystick">
+                            <div class="joystick-knob" id="joystickKnob"></div>
+                            <span class="joystick-label top">Up</span>
+                            <span class="joystick-label bottom">Down</span>
+                            <span class="joystick-label left">Left</span>
+                            <span class="joystick-label right">Right</span>
                         </div>
-                        <div class="slider-group">
-                            <div class="slider-header">
-                                <span class="slider-label">Body Yaw</span>
-                                <span class="slider-value" id="bodyValue">0°</span>
-                            </div>
-                            <input type="range" class="slider" id="bodySlider" min="-45" max="45" value="0">
+                        <div class="roll-control">
+                            <span class="roll-label">Roll +</span>
+                            <input type="range" class="roll-slider" id="rollJoystick" min="-100" max="100" value="0">
+                            <span class="roll-label">Roll -</span>
                         </div>
                     </div>
+                    <div class="joystick-hint">Hold and drag to move head continuously</div>
                 </div>
+            </div>
 
-                <!-- Antennas -->
-                <div class="panel">
-                    <div class="panel-header">Antennas</div>
-                    <div class="panel-content">
-                        <div class="slider-group">
-                            <div class="slider-header">
-                                <span class="slider-label">Right Antenna</span>
-                                <span class="slider-value" id="rightAntValue">0°</span>
-                            </div>
-                            <input type="range" class="slider" id="rightAntSlider" min="-175" max="175" value="0">
-                        </div>
-                        <div class="slider-group">
-                            <div class="slider-header">
-                                <span class="slider-label">Left Antenna</span>
-                                <span class="slider-value" id="leftAntValue">0°</span>
-                            </div>
-                            <input type="range" class="slider" id="leftAntSlider" min="-175" max="175" value="0">
-                        </div>
+            <!-- Antennas -->
+            <div class="panel">
+                <div class="panel-header">Antennas</div>
+                <div class="panel-content">
+                    <div class="slider-row">
+                        <span class="slider-label">Right</span>
+                        <input type="range" class="slider" id="rightAntSlider" min="-175" max="175" value="0">
+                        <span class="slider-value" id="rightAntValue">0°</span>
+                    </div>
+                    <div class="slider-row">
+                        <span class="slider-label">Left</span>
+                        <input type="range" class="slider" id="leftAntSlider" min="-175" max="175" value="0">
+                        <span class="slider-value" id="leftAntValue">0°</span>
                     </div>
                 </div>
+            </div>
 
-                <!-- Sound & Speak -->
-                <div class="panel">
-                    <div class="panel-header">Sound & Speak</div>
-                    <div class="panel-content">
-                        <div class="sound-row">
-                            <input type="text" class="sound-input" id="soundInput" placeholder="Sound file...">
-                            <button class="btn btn-primary" id="btnPlaySound" onclick="playSound()" disabled style="padding: 10px 14px;">Play</button>
-                        </div>
-                        <div class="sound-presets">
-                            <span class="preset-chip" onclick="playSoundPreset('wake_up.wav')">wake_up</span>
-                            <span class="preset-chip" onclick="playSoundPreset('go_sleep.wav')">go_sleep</span>
-                            <span class="preset-chip" onclick="playSoundPreset('yes.wav')">yes</span>
-                            <span class="preset-chip" onclick="playSoundPreset('no.wav')">no</span>
-                        </div>
-
-                        <div class="speak-section">
-                            <label class="speak-label">Voice Chat (Telephone Mode)</label>
-                            <div class="speak-row">
-                                <button class="btn btn-primary" id="btnMic" onclick="toggleMicrophone()" style="flex: 1;">Enable Mic</button>
-                                <button class="btn btn-secondary" id="btnMute" onclick="toggleMute()" style="flex: 1;">Unmute Robot</button>
-                            </div>
-                            <div id="micStatus" style="margin-top: 8px; font-size: 0.8em; color: var(--text-muted); text-align: center;"></div>
+            <!-- Sound & Voice -->
+            <div class="panel">
+                <div class="panel-header">Sound & Voice</div>
+                <div class="panel-content">
+                    <div class="sound-row">
+                        <input type="text" class="sound-input" id="soundInput" placeholder="Sound file...">
+                        <button class="btn btn-primary" id="btnPlaySound" onclick="playSound()" disabled>Play</button>
+                    </div>
+                    <div class="sound-presets">
+                        <span class="preset-chip" onclick="playSoundPreset('wake_up.wav')">wake_up</span>
+                        <span class="preset-chip" onclick="playSoundPreset('go_sleep.wav')">go_sleep</span>
+                        <span class="preset-chip" onclick="playSoundPreset('yes.wav')">yes</span>
+                        <span class="preset-chip" onclick="playSoundPreset('no.wav')">no</span>
+                    </div>
+                    <div class="voice-section">
+                        <label class="voice-label">Voice Chat (Telephone)</label>
+                        <div class="voice-buttons">
+                            <button class="btn btn-primary" id="btnMic" onclick="toggleMicrophone()">Enable Mic</button>
+                            <button class="btn btn-secondary" id="btnMute" onclick="toggleMute()">Unmute Robot</button>
                         </div>
+                        <div id="micStatus"></div>
                     </div>
                 </div>
+            </div>
 
-                <!-- Recording -->
-                <div class="panel">
-                    <div class="panel-header">Recording</div>
-                    <div class="panel-content">
-                        <div class="action-grid">
-                            <button class="action-btn" id="btnStartRec" onclick="startRecording()" disabled>Start Rec</button>
-                            <button class="action-btn" id="btnStopRec" onclick="stopRecording()" disabled>Stop Rec</button>
-                        </div>
+            <!-- Recording -->
+            <div class="panel">
+                <div class="panel-header">Recording</div>
+                <div class="panel-content">
+                    <div class="action-row">
+                        <button class="action-btn" id="btnStartRec" onclick="startRecording()" disabled>Start Rec</button>
+                        <button class="action-btn" id="btnStopRec" onclick="stopRecording()" disabled>Stop Rec</button>
                     </div>
                 </div>
             </div>
@@ -1010,7 +743,7 @@
 
         const SIGNALING_SERVER = 'https://cduss-reachy-mini-central.hf.space';
 
-        // State
+        // Connection state
         let peerConnection = null;
         let dataChannel = null;
         let selectedProducerId = null;
@@ -1021,31 +754,13 @@
         let sseAbortController = null;
         let stateRefreshInterval = null;
 
-        // Robot state (from get_state)
-        let robotState = {
-            motorMode: null,
-            yaw: 0,
-            pitch: 0,
-            roll: 0,
-            bodyYaw: 0,
-            rightAntenna: 0,
-            leftAntenna: 0,
-            isRecording: false
-        };
-
-        // Slider update flags
-        let userDragging = {
-            yaw: false,
-            pitch: false,
-            roll: false,
-            body: false,
-            rightAnt: false,
-            leftAnt: false
-        };
-
-        // Joystick state
+        // Joystick state - track our own target position
+        let targetYaw = 0;
+        let targetPitch = 0;
+        let targetRoll = 0;
         let joystickActive = false;
-        let joystickCenter = { x: 0, y: 0 };
+        let joystickX = 0;
+        let joystickY = 0;
         let joystickInterval = null;
 
         // Audio state
@@ -1060,9 +775,6 @@
         window.connectSignaling = connectSignaling;
         window.startStream = startStream;
         window.stopStream = stopStream;
-        window.setMotorMode = setMotorMode;
-        window.wakeUp = wakeUp;
-        window.goToSleep = goToSleep;
         window.playSound = playSound;
         window.playSoundPreset = playSoundPreset;
         window.toggleMicrophone = toggleMicrophone;
@@ -1070,11 +782,10 @@
         window.startRecording = startRecording;
         window.stopRecording = stopRecording;
 
-        // Init
         document.addEventListener('DOMContentLoaded', () => {
             initAuth();
             initJoystick();
-            initSliders();
+            initAntennaSliders();
         });
 
         // ===================== Auth =====================
@@ -1107,8 +818,7 @@
         }
 
         async function loginToHuggingFace() {
-            const url = await oauthLoginUrl();
-            window.location.href = url;
+            window.location.href = await oauthLoginUrl();
         }
 
         function logout() {
@@ -1132,10 +842,8 @@
 
         // ===================== Connection =====================
         function updateStatus(status, text) {
-            const indicator = document.getElementById('statusIndicator');
-            const textEl = document.getElementById('statusText');
-            indicator.className = 'status-indicator ' + status;
-            textEl.textContent = text;
+            document.getElementById('statusIndicator').className = 'status-indicator ' + status;
+            document.getElementById('statusText').textContent = text;
         }
 
         async function sendToServer(message) {
@@ -1160,20 +868,17 @@
 
         async function connectSignaling() {
             if (!userToken) return;
-
             updateStatus('connecting', 'Connecting...');
             document.getElementById('connectBtn').disabled = true;
-
             sseAbortController = new AbortController();
 
             try {
                 const res = await fetch(`${SIGNALING_SERVER}/events?token=${encodeURIComponent(userToken)}`, {
                     signal: sseAbortController.signal
                 });
-
                 if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
-                updateStatus('connected', 'Server connected');
+                updateStatus('connected', 'Connected');
                 document.getElementById('robotSelector').classList.remove('hidden');
 
                 const reader = res.body.getReader();
@@ -1183,26 +888,17 @@
                 while (true) {
                     const { done, value } = await reader.read();
                     if (done) break;
-
                     buffer += decoder.decode(value, { stream: true });
                     const lines = buffer.split('\n');
                     buffer = lines.pop();
-
                     for (const line of lines) {
                         if (line.startsWith('data:')) {
-                            const data = line.slice(5).trim();
-                            if (data) {
-                                try {
-                                    handleSignalingMessage(JSON.parse(data));
-                                } catch (e) {}
-                            }
+                            try { handleSignalingMessage(JSON.parse(line.slice(5).trim())); } catch (e) {}
                         }
                     }
                 }
             } catch (e) {
-                if (e.name !== 'AbortError') {
-                    console.error('Connection failed:', e);
-                }
+                if (e.name !== 'AbortError') console.error('Connection failed:', e);
                 updateStatus('', 'Disconnected');
                 document.getElementById('connectBtn').disabled = false;
                 document.getElementById('robotSelector').classList.add('hidden');
@@ -1219,7 +915,7 @@
             switch (msg.type) {
                 case 'welcome':
                     myPeerId = msg.peerId;
-                    await sendToServer({ type: 'setPeerStatus', roles: ['listener'], meta: { name: 'Telepresence App' } });
+                    await sendToServer({ type: 'setPeerStatus', roles: ['listener'], meta: { name: 'Telepresence' } });
                     break;
                 case 'list':
                     displayRobots(msg.producers);
@@ -1240,55 +936,43 @@
         function displayRobots(robots) {
             const list = document.getElementById('robotList');
             list.innerHTML = '';
-
             if (!robots?.length) {
-                list.innerHTML = '<div style="color: var(--text-muted); font-size: 0.9em;">No robots online.</div>';
+                list.innerHTML = '<div style="color: var(--text-muted);">No robots online</div>';
                 document.getElementById('startBtn').disabled = true;
                 return;
             }
-
             for (const robot of robots) {
                 const div = document.createElement('div');
                 div.className = 'robot-card' + (robot.id === selectedProducerId ? ' selected' : '');
-                div.innerHTML = `
-                    <div class="name">${robot.meta?.name || 'Reachy Mini'}</div>
-                    <div class="id">${robot.id.slice(0, 12)}...</div>
-                `;
-                div.onclick = () => selectRobot(robot, div);
+                div.innerHTML = `<div class="name">${robot.meta?.name || 'Reachy Mini'}</div><div class="id">${robot.id.slice(0, 12)}...</div>`;
+                div.onclick = () => {
+                    document.querySelectorAll('.robot-card').forEach(e => e.classList.remove('selected'));
+                    div.classList.add('selected');
+                    selectedProducerId = robot.id;
+                    document.getElementById('robotName').textContent = robot.meta?.name || 'Reachy Mini';
+                    document.getElementById('startBtn').disabled = false;
+                };
                 list.appendChild(div);
             }
         }
 
-        function selectRobot(robot, el) {
-            document.querySelectorAll('.robot-card').forEach(e => e.classList.remove('selected'));
-            el.classList.add('selected');
-            selectedProducerId = robot.id;
-            document.getElementById('robotName').textContent = robot.meta?.name || 'Reachy Mini';
-            document.getElementById('startBtn').disabled = false;
-        }
-
         // ===================== WebRTC =====================
         async function startStream() {
             if (!selectedProducerId) return;
-
-            updateStatus('connecting', 'Connecting to robot...');
+            updateStatus('connecting', 'Connecting...');
 
             peerConnection = new RTCPeerConnection({
                 iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
             });
 
             peerConnection.ontrack = (e) => {
-                console.log('Received track:', e.track.kind);
                 if (e.track.kind === 'video') {
                     document.getElementById('remoteVideo').srcObject = e.streams[0];
                 }
                 if (e.track.kind === 'audio') {
-                    // Robot audio - connect to audio element
                     const audioEl = document.getElementById('remoteAudio');
                     audioEl.srcObject = new MediaStream([e.track]);
                     audioEl.muted = robotMuted;
-                    updateMuteButton();
-                    console.log('Robot audio track connected');
                 }
             };
 
@@ -1309,15 +993,6 @@
                     enableControls(true);
                     document.getElementById('robotSelector').classList.add('hidden');
                     stateRefreshInterval = setInterval(() => sendCommand({ get_state: true }), 500);
-
-                    // If mic was already enabled, attach it to the sender
-                    if (micEnabled && localStream && audioSender) {
-                        const audioTrack = localStream.getAudioTracks()[0];
-                        if (audioTrack) {
-                            audioSender.replaceTrack(audioTrack);
-                            console.log('Attached existing mic to audio sender');
-                        }
-                    }
                 } else if (state === 'failed' || state === 'disconnected') {
                     updateStatus('', 'Connection lost');
                 }
@@ -1325,9 +1000,7 @@
 
             peerConnection.ondatachannel = (e) => {
                 dataChannel = e.channel;
-                dataChannel.onopen = () => {
-                    sendCommand({ get_state: true });
-                };
+                dataChannel.onopen = () => sendCommand({ get_state: true });
                 dataChannel.onmessage = (e) => handleRobotMessage(JSON.parse(e.data));
             };
 
@@ -1344,14 +1017,8 @@
                 if (msg.sdp) {
                     await peerConnection.setRemoteDescription(new RTCSessionDescription(msg.sdp));
                     if (msg.sdp.type === 'offer') {
-                        // Add a transceiver for sending audio (telephone mode)
-                        // This ensures audio is negotiated in the SDP
-                        const transceiver = peerConnection.addTransceiver('audio', {
-                            direction: 'sendonly'
-                        });
+                        const transceiver = peerConnection.addTransceiver('audio', { direction: 'sendonly' });
                         audioSender = transceiver.sender;
-                        console.log('Added audio transceiver for sending');
-
                         const answer = await peerConnection.createAnswer();
                         await peerConnection.setLocalDescription(answer);
                         await sendToServer({ type: 'peer', sessionId: currentSessionId, sdp: { type: 'answer', sdp: answer.sdp } });
@@ -1380,95 +1047,52 @@
             document.getElementById('stopBtn').disabled = true;
             document.getElementById('robotSelector').classList.remove('hidden');
             enableControls(false);
-            updateStatus('connected', 'Server connected');
-            document.getElementById('micStatus').textContent = '';
+            updateStatus('connected', 'Connected');
         }
 
         function enableControls(enabled) {
-            const btns = ['btnPlaySound', 'btnStartRec', 'btnStopRec'];
-            btns.forEach(id => document.getElementById(id).disabled = !enabled);
+            ['btnPlaySound', 'btnStartRec', 'btnStopRec'].forEach(id =>
+                document.getElementById(id).disabled = !enabled
+            );
         }
 
-        // ===================== Robot Messages =====================
+        // ===================== Robot State =====================
         function handleRobotMessage(data) {
-            if (data.state) {
-                updateRobotState(data.state);
-            } else if (data.motor_mode) {
-                robotState.motorMode = data.motor_mode;
-                document.getElementById('stateMotors').textContent = data.motor_mode;
-            } else if (data.error) {
-                console.error('Robot error:', data.error);
-            }
+            if (data.state) updateStateDisplay(data.state);
+            if (data.error) console.error('Robot error:', data.error);
         }
 
-        function updateRobotState(state) {
-            if (state.motor_mode) {
-                robotState.motorMode = state.motor_mode;
-                document.getElementById('stateMotors').textContent = state.motor_mode;
-            }
-
+        function updateStateDisplay(state) {
             if (state.head_pose) {
                 const m = state.head_pose;
-                // Extract yaw, pitch, roll from rotation matrix
                 const pitch = Math.asin(-m[2][0]) * 180 / Math.PI;
                 const yaw = Math.atan2(m[1][0], m[0][0]) * 180 / Math.PI;
                 const roll = Math.atan2(m[2][1], m[2][2]) * 180 / Math.PI;
-
-                robotState.yaw = yaw;
-                robotState.pitch = pitch;
-                robotState.roll = roll;
-
                 document.getElementById('stateYaw').textContent = yaw.toFixed(1) + '°';
                 document.getElementById('statePitch').textContent = pitch.toFixed(1) + '°';
                 document.getElementById('stateRoll').textContent = roll.toFixed(1) + '°';
 
-                // Update sliders if user isn't dragging
-                if (!userDragging.yaw) {
-                    document.getElementById('yawSlider').value = yaw;
-                    document.getElementById('yawValue').textContent = yaw.toFixed(0) + '°';
-                }
-                if (!userDragging.pitch) {
-                    document.getElementById('pitchSlider').value = pitch;
-                    document.getElementById('pitchValue').textContent = pitch.toFixed(0) + '°';
-                }
-                if (!userDragging.roll) {
-                    document.getElementById('rollSlider').value = roll;
-                    document.getElementById('rollValue').textContent = roll.toFixed(0) + '°';
+                // Sync target with robot state when not using joystick
+                if (!joystickActive) {
+                    targetYaw = yaw;
+                    targetPitch = pitch;
+                    targetRoll = roll;
                 }
             }
-
             if (state.body_yaw !== undefined) {
-                const bodyDeg = state.body_yaw * 180 / Math.PI;
-                robotState.bodyYaw = bodyDeg;
-                document.getElementById('stateBody').textContent = bodyDeg.toFixed(1) + '°';
-
-                if (!userDragging.body) {
-                    document.getElementById('bodySlider').value = bodyDeg;
-                    document.getElementById('bodyValue').textContent = bodyDeg.toFixed(0) + '°';
-                }
+                document.getElementById('stateBody').textContent = (state.body_yaw * 180 / Math.PI).toFixed(1) + '°';
             }
-
             if (state.antennas) {
-                const rightDeg = state.antennas[0] * 180 / Math.PI;
-                const leftDeg = state.antennas[1] * 180 / Math.PI;
-                robotState.rightAntenna = rightDeg;
-                robotState.leftAntenna = leftDeg;
-
-                document.getElementById('stateRAnt').textContent = rightDeg.toFixed(0) + '°';
-                document.getElementById('stateLAnt').textContent = leftDeg.toFixed(0) + '°';
-
-                if (!userDragging.rightAnt) {
-                    document.getElementById('rightAntSlider').value = rightDeg;
-                    document.getElementById('rightAntValue').textContent = rightDeg.toFixed(0) + '°';
-                }
-                if (!userDragging.leftAnt) {
-                    document.getElementById('leftAntSlider').value = leftDeg;
-                    document.getElementById('leftAntValue').textContent = leftDeg.toFixed(0) + '°';
-                }
+                const r = (state.antennas[0] * 180 / Math.PI).toFixed(0);
+                const l = (state.antennas[1] * 180 / Math.PI).toFixed(0);
+                document.getElementById('stateRAnt').textContent = r + '°';
+                document.getElementById('stateLAnt').textContent = l + '°';
+                document.getElementById('rightAntSlider').value = r;
+                document.getElementById('rightAntValue').textContent = r + '°';
+                document.getElementById('leftAntSlider').value = l;
+                document.getElementById('leftAntValue').textContent = l + '°';
             }
-
             if (state.is_recording !== undefined) {
-                robotState.isRecording = state.is_recording;
                 document.getElementById('btnStartRec').classList.toggle('recording', state.is_recording);
             }
         }
@@ -1479,52 +1103,60 @@
             const knob = document.getElementById('joystickKnob');
             const rollSlider = document.getElementById('rollJoystick');
 
-            const getPos = (e) => {
+            function getPosition(e) {
                 const rect = joystick.getBoundingClientRect();
-                const centerX = rect.width / 2;
-                const centerY = rect.height / 2;
+                const size = rect.width;
+                const centerX = size / 2;
+                const centerY = size / 2;
                 const touch = e.touches ? e.touches[0] : e;
                 let x = touch.clientX - rect.left - centerX;
                 let y = touch.clientY - rect.top - centerY;
-                const maxRadius = centerX - 25;
+                const maxRadius = centerX * 0.7;
                 const dist = Math.sqrt(x * x + y * y);
                 if (dist > maxRadius) {
                     x = (x / dist) * maxRadius;
                     y = (y / dist) * maxRadius;
                 }
-                return { x, y, normX: x / maxRadius, normY: y / maxRadius };
-            };
+                return {
+                    x, y,
+                    normX: x / maxRadius,  // -1 to 1 (left to right)
+                    normY: y / maxRadius   // -1 to 1 (top to bottom)
+                };
+            }
 
-            const startJoystick = (e) => {
+            function updateKnob(pos) {
+                const rect = joystick.getBoundingClientRect();
+                knob.style.left = (rect.width / 2 + pos.x) + 'px';
+                knob.style.top = (rect.height / 2 + pos.y) + 'px';
+            }
+
+            function startJoystick(e) {
                 e.preventDefault();
                 joystickActive = true;
-                const pos = getPos(e);
+                const pos = getPosition(e);
                 updateKnob(pos);
-                startJoystickMovement();
-            };
+                joystickX = pos.normX;
+                joystickY = pos.normY;
+                startContinuousMovement();
+            }
 
-            const moveJoystick = (e) => {
+            function moveJoystick(e) {
                 if (!joystickActive) return;
                 e.preventDefault();
-                const pos = getPos(e);
+                const pos = getPosition(e);
                 updateKnob(pos);
-                joystickCenter = { x: pos.normX, y: pos.normY };
-            };
+                joystickX = pos.normX;
+                joystickY = pos.normY;
+            }
 
-            const endJoystick = () => {
+            function endJoystick() {
                 joystickActive = false;
                 knob.style.left = '50%';
                 knob.style.top = '50%';
-                joystickCenter = { x: 0, y: 0 };
-                stopJoystickMovement();
-            };
-
-            const updateKnob = (pos) => {
-                const rect = joystick.getBoundingClientRect();
-                knob.style.left = (rect.width / 2 + pos.x) + 'px';
-                knob.style.top = (rect.height / 2 + pos.y) + 'px';
-                joystickCenter = { x: pos.normX, y: pos.normY };
-            };
+                joystickX = 0;
+                joystickY = 0;
+                stopContinuousMovement();
+            }
 
             joystick.addEventListener('mousedown', startJoystick);
             joystick.addEventListener('touchstart', startJoystick, { passive: false });
@@ -1533,118 +1165,52 @@
             document.addEventListener('mouseup', endJoystick);
             document.addEventListener('touchend', endJoystick);
 
-            // Roll slider
-            rollSlider.addEventListener('input', () => {
-                if (joystickActive || rollSlider.value != 0) {
-                    // Apply roll delta while dragging
-                }
-            });
-
-            rollSlider.addEventListener('change', () => {
-                rollSlider.value = 0;
-            });
+            rollSlider.addEventListener('mouseup', () => { rollSlider.value = 0; });
+            rollSlider.addEventListener('touchend', () => { rollSlider.value = 0; });
         }
 
-        function startJoystickMovement() {
+        function startContinuousMovement() {
             if (joystickInterval) return;
 
             joystickInterval = setInterval(() => {
-                if (!joystickActive && joystickCenter.x === 0 && joystickCenter.y === 0) return;
+                if (!joystickActive) return;
 
-                const speed = 2; // degrees per tick
+                const speed = 1.5; // degrees per tick
                 const rollSlider = document.getElementById('rollJoystick');
-                const rollDelta = (parseFloat(rollSlider.value) / 100) * speed;
-
-                // X controls Yaw (inverted: left = positive yaw)
-                // Y controls Pitch (inverted: up = positive pitch)
-                const yawDelta = -joystickCenter.x * speed;
-                const pitchDelta = -joystickCenter.y * speed;
+                const rollInput = parseFloat(rollSlider.value) / 100;
 
-                // Calculate new absolute positions
-                let newYaw = robotState.yaw + yawDelta;
-                let newPitch = robotState.pitch + pitchDelta;
-                let newRoll = robotState.roll + rollDelta;
+                // Joystick mapping:
+                // Left/Right (X) controls Yaw: left = positive yaw (turn left)
+                // Up/Down (Y) controls Pitch: up = negative pitch (look up)
+                targetYaw += -joystickX * speed;      // Right = negative = turn right
+                targetPitch += -joystickY * speed;    // Down = positive = look down
+                targetRoll += rollInput * speed;
 
-                // Clamp values
-                newYaw = Math.max(-45, Math.min(45, newYaw));
-                newPitch = Math.max(-30, Math.min(30, newPitch));
-                newRoll = Math.max(-20, Math.min(20, newRoll));
+                // Clamp to limits
+                targetYaw = Math.max(-45, Math.min(45, targetYaw));
+                targetPitch = Math.max(-30, Math.min(30, targetPitch));
+                targetRoll = Math.max(-20, Math.min(20, targetRoll));
 
                 // Send command
-                const matrix = buildMatrix(newYaw, newPitch, newRoll);
-                sendCommand({ set_target: matrix });
+                sendCommand({ set_target: buildMatrix(targetYaw, targetPitch, targetRoll) });
 
-            }, 50); // 20 updates per second
+            }, 50);
         }
 
-        function stopJoystickMovement() {
+        function stopContinuousMovement() {
             if (joystickInterval) {
                 clearInterval(joystickInterval);
                 joystickInterval = null;
             }
         }
 
-        // ===================== Sliders =====================
-        function initSliders() {
-            const sliders = [
-                { id: 'yawSlider', value: 'yawValue', key: 'yaw' },
-                { id: 'pitchSlider', value: 'pitchValue', key: 'pitch' },
-                { id: 'rollSlider', value: 'rollValue', key: 'roll' },
-                { id: 'bodySlider', value: 'bodyValue', key: 'body' },
-                { id: 'rightAntSlider', value: 'rightAntValue', key: 'rightAnt' },
-                { id: 'leftAntSlider', value: 'leftAntValue', key: 'leftAnt' }
-            ];
-
-            sliders.forEach(({ id, value, key }) => {
-                const slider = document.getElementById(id);
-                const valueEl = document.getElementById(value);
-
-                slider.addEventListener('mousedown', () => userDragging[key] = true);
-                slider.addEventListener('touchstart', () => userDragging[key] = true);
-
-                slider.addEventListener('input', () => {
-                    valueEl.textContent = slider.value + '°';
-                    sendSliderUpdate(key, parseFloat(slider.value));
-                });
-
-                slider.addEventListener('change', () => {
-                    userDragging[key] = false;
-                });
-
-                document.addEventListener('mouseup', () => {
-                    if (userDragging[key]) userDragging[key] = false;
-                });
-            });
-        }
-
-        function sendSliderUpdate(key, value) {
-            if (key === 'rightAnt' || key === 'leftAnt') {
-                const right = parseFloat(document.getElementById('rightAntSlider').value) * Math.PI / 180;
-                const left = parseFloat(document.getElementById('leftAntSlider').value) * Math.PI / 180;
-                sendCommand({ set_antennas: [right, left] });
-            } else if (key === 'body') {
-                sendCommand({ set_body_yaw: value * Math.PI / 180 });
-            } else {
-                // Head orientation
-                const yaw = parseFloat(document.getElementById('yawSlider').value);
-                const pitch = parseFloat(document.getElementById('pitchSlider').value);
-                const roll = parseFloat(document.getElementById('rollSlider').value);
-                const matrix = buildMatrix(yaw, pitch, roll);
-                sendCommand({ set_target: matrix });
-            }
-        }
-
-        // ===================== Matrix Builder =====================
-        function buildMatrix(yawDeg, pitchDeg, rollDeg = 0) {
+        function buildMatrix(yawDeg, pitchDeg, rollDeg) {
             const y = yawDeg * Math.PI / 180;
             const p = pitchDeg * Math.PI / 180;
             const r = rollDeg * Math.PI / 180;
-
             const cy = Math.cos(y), sy = Math.sin(y);
             const cp = Math.cos(p), sp = Math.sin(p);
             const cr = Math.cos(r), sr = Math.sin(r);
-
-            // Rotation matrix: Rz(yaw) * Ry(pitch) * Rx(roll)
             return [
                 [cy * cp, cy * sp * sr - sy * cr, cy * sp * cr + sy * sr, 0],
                 [sy * cp, sy * sp * sr + cy * cr, sy * sp * cr - cy * sr, 0],
@@ -1653,19 +1219,31 @@
             ];
         }
 
-        // ===================== Controls =====================
-        function setMotorMode(mode) {
-            sendCommand({ set_motor_mode: mode });
-        }
+        // ===================== Antennas =====================
+        function initAntennaSliders() {
+            const rightSlider = document.getElementById('rightAntSlider');
+            const leftSlider = document.getElementById('leftAntSlider');
+            const rightValue = document.getElementById('rightAntValue');
+            const leftValue = document.getElementById('leftAntValue');
 
-        function wakeUp() {
-            sendCommand({ wake_up: true });
-        }
+            function sendAntennas() {
+                const r = parseFloat(rightSlider.value) * Math.PI / 180;
+                const l = parseFloat(leftSlider.value) * Math.PI / 180;
+                sendCommand({ set_antennas: [r, l] });
+            }
+
+            rightSlider.addEventListener('input', () => {
+                rightValue.textContent = rightSlider.value + '°';
+                sendAntennas();
+            });
 
-        function goToSleep() {
-            sendCommand({ goto_sleep: true });
+            leftSlider.addEventListener('input', () => {
+                leftValue.textContent = leftSlider.value + '°';
+                sendAntennas();
+            });
         }
 
+        // ===================== Sound & Voice =====================
         function playSound() {
             const file = document.getElementById('soundInput').value.trim();
             if (file) sendCommand({ play_sound: file });
@@ -1681,51 +1259,28 @@
             const status = document.getElementById('micStatus');
 
             if (micEnabled) {
-                // Disable mic - replace track with null
-                if (localStream) {
-                    localStream.getTracks().forEach(track => track.stop());
-                    localStream = null;
-                }
-                if (audioSender) {
-                    await audioSender.replaceTrack(null);
-                    console.log('Removed audio track from sender');
-                }
+                if (localStream) localStream.getTracks().forEach(t => t.stop());
+                localStream = null;
+                if (audioSender) await audioSender.replaceTrack(null);
                 micEnabled = false;
                 btn.textContent = 'Enable Mic';
                 btn.classList.remove('btn-danger');
                 btn.classList.add('btn-primary');
-                status.textContent = 'Microphone disabled';
-                status.style.color = 'var(--text-muted)';
+                status.textContent = '';
             } else {
-                // Enable mic
                 try {
                     localStream = await navigator.mediaDevices.getUserMedia({
-                        audio: {
-                            echoCancellation: true,
-                            noiseSuppression: true,
-                            autoGainControl: true
-                        }
+                        audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
                     });
-
-                    const audioTrack = localStream.getAudioTracks()[0];
-
-                    // Replace track on the pre-negotiated sender
-                    if (audioSender) {
-                        await audioSender.replaceTrack(audioTrack);
-                        console.log('Replaced audio track on sender - speaking to robot');
-                    } else {
-                        console.warn('No audio sender available - connection may not support sending audio');
-                    }
-
+                    if (audioSender) await audioSender.replaceTrack(localStream.getAudioTracks()[0]);
                     micEnabled = true;
                     btn.textContent = 'Disable Mic';
                     btn.classList.remove('btn-primary');
                     btn.classList.add('btn-danger');
-                    status.textContent = 'Microphone active - speaking to robot';
+                    status.textContent = 'Speaking to robot...';
                     status.style.color = 'var(--success)';
-                } catch (err) {
-                    console.error('Microphone access denied:', err);
-                    status.textContent = 'Microphone access denied';
+                } catch (e) {
+                    status.textContent = 'Mic access denied';
                     status.style.color = 'var(--danger)';
                 }
             }
@@ -1733,37 +1288,15 @@
 
         function toggleMute() {
             robotMuted = !robotMuted;
-            const audioEl = document.getElementById('remoteAudio');
-            audioEl.muted = robotMuted;
-            updateMuteButton();
-        }
-
-        function updateMuteButton() {
+            document.getElementById('remoteAudio').muted = robotMuted;
             const btn = document.getElementById('btnMute');
-            const status = document.getElementById('micStatus');
-            if (robotMuted) {
-                btn.textContent = 'Unmute Robot';
-                btn.classList.remove('btn-danger');
-                btn.classList.add('btn-secondary');
-            } else {
-                btn.textContent = 'Mute Robot';
-                btn.classList.remove('btn-secondary');
-                btn.classList.add('btn-danger');
-                // Show listening status
-                if (!micEnabled) {
-                    status.textContent = 'Listening to robot audio';
-                    status.style.color = 'var(--pollen-coral)';
-                }
-            }
+            btn.textContent = robotMuted ? 'Unmute Robot' : 'Mute Robot';
+            btn.classList.toggle('btn-secondary', robotMuted);
+            btn.classList.toggle('btn-danger', !robotMuted);
         }
 
-        function startRecording() {
-            sendCommand({ start_recording: true });
-        }
-
-        function stopRecording() {
-            sendCommand({ stop_recording: true });
-        }
+        function startRecording() { sendCommand({ start_recording: true }); }
+        function stopRecording() { sendCommand({ stop_recording: true }); }
     </script>
 </body>
 </html>