/* Local-first (docs/release-2026-10/LOCAL-FIRST-SPEC.md §6, §10): the route
   label on a reply, the quiet Mac-app line while a turn runs in the cloud,
   and the AI accounts rows (public/ai-accounts.js). Grayscale only; green
   marks a live connection. */
.msg .who .route-label { margin-left:auto; color:var(--ink-3); font-weight:400; white-space:nowrap; }
.msg .who time + .route-label { margin-left:8px; }

.local-first-nudge { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:8px auto 0; padding:8px 12px; max-width:760px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink-2); font-size:12px; }
.local-first-nudge span { flex:1 1 220px; min-width:0; }
.local-first-nudge-get { color:var(--ink); font-weight:550; text-decoration:underline; text-underline-offset:2px; }
.local-first-nudge-close { border:0; background:transparent; color:var(--ink-3); font:inherit; cursor:pointer; padding:2px 4px; }
.local-first-nudge-close:hover { color:var(--ink); }

.ai-accounts { display:flex; flex-direction:column; gap:0; }
.ai-accounts-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.ai-accounts-head h3 { margin:0; font-size:15px; }
.ai-accounts-list { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.ai-account { display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--line); min-width:0; }
.ai-account:first-child { border-top:0; }
.ai-account-mark { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line-2); color:var(--ink-2); font-weight:600; font-size:12px; }
.ai-account-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ai-account-name { font-weight:550; color:var(--ink); }
.ai-account-where { color:var(--ink-3); font-size:12px; overflow-wrap:anywhere; }
.ai-account-state { flex:0 0 auto; font-size:12px; color:var(--ink-3); white-space:nowrap; }
.ai-account-state.live { color:#16a34a; }
.ai-account-actions { flex:0 0 auto; display:flex; gap:6px; }
.ai-account.soon .ai-account-name, .ai-account.soon .ai-account-mark { color:var(--ink-3); }
.ai-accounts-note { margin:8px 2px 0; color:var(--ink-3); font-size:12px; }
.ai-onboarding .dialog-body { display:flex; flex-direction:column; gap:14px; }
.ai-onboarding-step { display:flex; align-items:flex-start; gap:12px; }
.ai-onboarding-step p { margin:2px 0 0; color:var(--ink-3); font-size:12px; }
@media (max-width: 560px) {
  .ai-account { flex-wrap:wrap; }
  .ai-account-text { flex-basis:calc(100% - 40px); }
  .ai-account-state { margin-left:40px; }
  .ai-account-actions { margin-left:auto; }
}