feat: provision private Hermes assistants for authenticated Hope accounts

web/style.css

@@ -1335,3 +1335,50 @@ body[data-mode="text"] .mic-meter {
         transition-duration: 0.01ms !important;
     }
 }
+
+/* Account surfaces share the conversation's existing tokens. */
+.login-gate { width: min(440px, calc(100% - 2rem)); margin: 12vh auto 3rem; padding: 2rem; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); }
+.login-gate h1 { font-size: 1.6rem; letter-spacing: -.025em; }
+.login-gate > p { margin: .75rem 0 1.5rem; color: var(--ink-soft); line-height: 1.6; }
+.account-form { display: flex; flex-direction: column; gap: .65rem; }
+.account-form label { display: block; font-size: .85rem; color: var(--ink-soft); margin-bottom: .3rem; }
+.account-form input, .account-form select { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: var(--canvas); }
+.account-form input:focus-visible, .account-form select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.account-form .btn { margin-top: .5rem; }
+.account-form .btn:disabled { display: inline-block; }
+.account-toolbar { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; padding: 0 .15rem; }
+.account-toolbar p { flex: 1; color: var(--warm); font-size: .85rem; line-height: 1.5; }
+.admin-section { margin-bottom: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
+.admin-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
+.admin-header h2 { font-size: 1.2rem; }
+.admin-header p, #adminMessage, #createUserMessage { margin: .5rem 0 1rem; color: var(--ink-soft); font-size: .85rem; line-height: 1.5; }
+.table-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
+.admin-section table { width: 100%; border-collapse: collapse; text-align: left; font-size: .8rem; }
+.admin-section th, .admin-section td { padding: .8rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
+.admin-section th { color: var(--ink-soft); font-weight: 600; }
+.admin-section td { max-width: 28ch; overflow-wrap: anywhere; }
+.user-actions { min-width: 190px; }
+.user-actions .btn { margin: 0 .3rem .4rem 0; font-size: .75rem; }
+.admin-section h3 { font-size: 1rem; margin-bottom: .8rem; }
+.create-user-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; }
+.create-user-form .btn { justify-self: start; }
+#accountDialog { margin: auto; padding: 1.5rem; width: min(480px, calc(100% - 2rem)); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: var(--surface); }
+#accountDialog::backdrop { background: rgba(2, 7, 14, .75); }
+#accountDialog h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
+#accountDialog p { color: var(--ink-soft); line-height: 1.55; font-size: .9rem; }
+.dialog-actions { display: flex; gap: .75rem; justify-content: flex-end; }
+.task-card p { margin-top: .5rem; line-height: 1.5; overflow-wrap: anywhere; }
+.audio-unlock { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: var(--z-sheet); }
+.topbar-actions { flex-wrap: wrap; }
+.identity-chip { max-width: 28ch; overflow-wrap: anywhere; }
+@media (max-width: 560px) {
+    .topbar { flex-wrap: wrap; }
+    .topbar-actions { width: 100%; justify-content: flex-start; }
+    .identity-chip { display: flex; }
+    .account-toolbar { padding: 0 .85rem; flex-wrap: wrap; }
+    .account-toolbar p { flex-basis: 100%; }
+    .admin-section { padding: 1rem; border-radius: 0; }
+    .create-user-form { grid-template-columns: 1fr; }
+    .admin-header { flex-wrap: wrap; }
+    .login-gate { padding: 1.5rem; margin-top: 7vh; }
+}