Add the agent scaffold, mobile web UI, voice auto-leave, and text notifications

poc/public/style.css

@@ -835,6 +835,11 @@ button {
     word-break: break-word;
 }
 
+.vk-message-reply {
+    font-size: 11px;
+    color: var(--color-neutral-500);
+}
+
 .vk-message-image {
     display: block;
     margin-top: 6px;
@@ -1723,15 +1728,184 @@ a.vk-attachment:hover {
 }
 
 @media (max-width: 768px) {
-    .vk-body {
-        grid-template-columns: minmax(0, 1fr);
+    :root {
+        --vk-header-h: 46px;
     }
 
-    .vk-rail {
+    .vk-app {
+        height: 100dvh;
+    }
+
+    .vk-header {
+        gap: 8px;
+        padding: 0 10px;
+    }
+
+    .vk-brand {
         display: none;
     }
 
     .vk-health {
+        display: flex;
+        gap: 6px;
+        flex: none;
+    }
+
+    #health-uptime,
+    #health-bridge {
         display: none;
     }
+
+    .vk-btn-text {
+        display: none;
+    }
+
+    .vk-takeover-label {
+        display: none;
+    }
+
+    .vk-scope-btn {
+        padding: 4px 8px;
+        font-size: 11.5px;
+    }
+
+    .vk-guild-picker {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .vk-guild-button {
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    #guild-picker-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .vk-body {
+        display: flex;
+        flex-direction: column;
+        grid-template-columns: none;
+    }
+
+    .vk-rail,
+    .vk-center,
+    .vk-right,
+    .vk-console {
+        display: none;
+    }
+
+    .vk-app[data-mobile-tab="users"] .vk-rail {
+        display: flex;
+        flex: 1;
+    }
+
+    .vk-app[data-mobile-tab="chat"] .vk-center {
+        display: flex;
+        flex: 1;
+    }
+
+    .vk-app[data-mobile-tab="call"] .vk-right {
+        display: flex;
+        flex: 1;
+        box-shadow: none;
+    }
+
+    .vk-app[data-mobile-tab="activity"] .vk-body {
+        display: none;
+    }
+
+    .vk-app[data-mobile-tab="activity"] .vk-console {
+        display: flex;
+        flex: 1;
+        min-height: 0;
+    }
+
+    .vk-app[data-mobile-tab="activity"] .vk-console-bar {
+        box-shadow: none;
+    }
+
+    .vk-app[data-mobile-tab="activity"] #console-toggle,
+    .vk-app[data-mobile-tab="activity"] .vk-ticker {
+        display: none;
+    }
+
+    .vk-app[data-mobile-tab="activity"] .vk-console-drawer {
+        display: flex !important;
+        height: auto;
+        flex: 1;
+        box-shadow: none;
+    }
+
+    .vk-settings-panel {
+        width: 100%;
+    }
+
+    .vk-tts-field,
+    .vk-tts-meta .btn,
+    .vk-tts .vk-select {
+        min-height: 44px;
+    }
+
+    .vk-send,
+    .vk-composer .vk-icon-btn {
+        min-height: 38px;
+        min-width: 38px;
+    }
+}
+
+/* Mobile tab bar (1c) */
+
+.vk-tabbar {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .vk-tabbar {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 2px;
+        flex: none;
+        padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px));
+        background: var(--color-surface);
+        box-shadow: inset 0 1px 0 var(--color-neutral-800);
+    }
+
+    .vk-tab {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        min-height: 44px;
+        padding: 7px 0;
+        border: none;
+        border-radius: var(--radius-sm);
+        background: none;
+        color: var(--color-neutral-500);
+        font: 400 10px/1 var(--font-body);
+        cursor: pointer;
+    }
+
+    .vk-tab .vk-icon {
+        width: 19px;
+        height: 19px;
+    }
+
+    .vk-tab.active {
+        color: var(--color-accent);
+        background: var(--color-accent-900);
+        box-shadow: inset 0 0 0 1px var(--color-accent-700);
+        font-family: var(--font-heading);
+        font-weight: 500;
+    }
+
+    .vk-tab .vk-rail-badge {
+        position: absolute;
+        top: 2px;
+        right: calc(50% - 26px);
+    }
 }