Add MicroslopSam TTS, Flextalk voice profiles, effects, and engine controls

poc/public/style.css

@@ -950,8 +950,8 @@ a.vk-attachment:hover {
 .vk-composer-input {
     flex: 1;
     min-height: 38px;
-    max-height: 160px;
-    resize: none;
+    max-height: 50vh;
+    resize: vertical;
     padding: 8px 10px;
     border-radius: var(--radius-sm);
     background: var(--color-bg);
@@ -1016,6 +1016,46 @@ a.vk-attachment:hover {
     padding: 9px 11px 8px;
 }
 
+.vk-tts-slider {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: none;
+}
+
+.vk-tts-slider input[type="range"] {
+    width: 84px;
+    accent-color: var(--color-accent);
+}
+
+.vk-tts-slider .vk-mono {
+    min-width: 34px;
+    text-align: right;
+}
+
+.vk-tts-speed {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.vk-tts-presets {
+    display: flex;
+    gap: 4px;
+    padding-left: 2px;
+}
+
+.vk-tts-presets .vk-chip {
+    padding: 3px 7px;
+    font-size: 10px;
+}
+
+.vk-engine-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
 .vk-chip {
     display: flex;
     align-items: center;
@@ -1027,6 +1067,14 @@ a.vk-attachment:hover {
     box-shadow: inset 0 0 0 1px var(--color-accent-800);
     color: var(--color-neutral-300);
     font: 400 11px/1 ui-monospace, Menlo, monospace;
+    border: none;
+    cursor: pointer;
+}
+
+.vk-chip-off {
+    background: var(--color-bg);
+    box-shadow: inset 0 0 0 1px var(--color-neutral-800);
+    color: var(--color-neutral-500);
 }
 
 .vk-chip-on {
@@ -1047,8 +1095,9 @@ a.vk-attachment:hover {
 
 .vk-tts-field {
     width: 100%;
-    max-height: 150px;
-    resize: none;
+    min-height: 64px;
+    max-height: 40vh;
+    resize: vertical;
     border: none;
     outline: none;
     background: transparent;
@@ -1203,7 +1252,11 @@ a.vk-attachment:hover {
 }
 
 .vk-transcript-toolbar .vk-small-btn {
-    margin-left: auto;
+    margin-left: 0;
+}
+
+.vk-transcript-toolbar #transcript-status {
+    margin-right: auto;
 }
 
 .vk-transcript-list {
@@ -1266,6 +1319,9 @@ a.vk-attachment:hover {
     align-items: flex-end;
     gap: 2px;
     height: 11px;
+    transform-origin: bottom;
+    transform: scaleY(0);
+    opacity: 0;
 }
 
 .vk-levels span {
@@ -1274,9 +1330,49 @@ a.vk-attachment:hover {
     border-radius: 1px;
     background: var(--color-accent);
     transform-origin: bottom;
+}
+
+.vk-levels.speaking {
+    opacity: 1;
+    transform: scaleY(1);
+    animation: vk-levels-in 200ms ease-out;
+}
+
+.vk-levels.speaking span,
+.vk-levels.stopping span {
     animation: vk-lvl 0.7s ease-in-out infinite;
 }
 
+.vk-levels.stopping {
+    animation: vk-levels-out 700ms ease-in forwards;
+}
+
+@keyframes vk-levels-in {
+    from {
+        opacity: 0;
+        transform: scaleY(0.05);
+    }
+    to {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes vk-levels-out {
+    0% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+    60% {
+        opacity: 0.8;
+        transform: scaleY(0.35);
+    }
+    100% {
+        opacity: 0;
+        transform: scaleY(0.02);
+    }
+}
+
 .vk-levels span:nth-child(2) {
     animation-delay: 0.1s;
 }
@@ -1308,6 +1404,19 @@ a.vk-attachment:hover {
 }
 
 @media (prefers-reduced-motion: reduce) {
+    .vk-levels,
+    .vk-levels.speaking,
+    .vk-levels.stopping {
+        animation: none;
+    }
+    .vk-levels.speaking {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+    .vk-levels.stopping {
+        opacity: 0;
+        transform: scaleY(0);
+    }
     .vk-levels span {
         animation: none;
         transform: scaleY(0.6);
@@ -1482,6 +1591,116 @@ a.vk-attachment:hover {
     display: none;
 }
 
+/* Flextalk voice profile: a bottom drawer over the chat, separate from the TTS row. */
+
+.vk-profile-panel {
+    position: fixed;
+    left: 50%;
+    top: 10vh;
+    transform: translateX(-50%);
+    width: min(760px, 100%);
+    max-height: 76vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--color-surface);
+    box-shadow: var(--shadow-lg);
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    animation: vk-drawer-in 180ms ease-out;
+}
+
+.vk-profile-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 6px 16px 18px;
+}
+
+.vk-profile-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.vk-profile-section + .vk-profile-section {
+    padding-top: 14px;
+    box-shadow: inset 0 1px 0 var(--color-neutral-800);
+}
+
+.vk-profile-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 6px 20px;
+}
+
+.vk-profile-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.vk-profile-row input[type="range"] {
+    flex: 1;
+    min-width: 80px;
+    accent-color: var(--color-accent);
+}
+
+.vk-profile-row .vk-mono {
+    min-width: 44px;
+    text-align: right;
+}
+
+.vk-profile-row .input {
+    flex: 1;
+    min-height: 28px;
+}
+
+#profile-drag {
+    cursor: move;
+    user-select: none;
+}
+
+.vk-profile-tests {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+}
+
+.vk-test-custom {
+    width: 110px;
+    min-height: 26px;
+}
+
+@keyframes vk-drawer-in {
+    from {
+        transform: translateY(26px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@media (max-width: 768px) {
+    .vk-profile-panel {
+        max-height: 82vh;
+    }
+
+    .vk-profile-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vk-profile-panel {
+        animation: none;
+    }
+}
+
 .vk-settings-panel {
     width: min(680px, 100%);
     height: 100%;