nio-cat 0.9.7 → 0.9.9

package/web/app/app.js

@@ -2,6 +2,7 @@
 // Sense frameworks ni compilació. També inclou un ordinador de prova que viu dins del navegador.
 
 import { createNotes } from './notes.js';
+import { createCall } from './call.js';
 
 const $ = (s, e = document) => e.querySelector(s);
 const $$ = (s, e = document) => [...e.querySelectorAll(s)];
@@ -23,11 +24,12 @@ const CHIP_ICON = {
 const svg = (d) => `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true">${d}</svg>`;
 const ICON = {
   activity: '<path d="M3 12h4l3-7 4 14 3-7h4"/>',
-  jobs: '<rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 9h8M8 13h5M8 17h3"/>',
+  jobs: '<rect x="4" y="5" width="16" height="15" rx="3"/><path d="M8 3v4M16 3v4M4 10h16m-12 5 2 2 5-4"/>',
   screen: '<rect x="3" y="4" width="18" height="12" rx="2"/><path d="M9 20h6M12 16v4"/><circle cx="12" cy="10" r="2"/>',
   panic: '<circle cx="12" cy="12" r="9"/><path d="M8.5 8.5l7 7M15.5 8.5l-7 7"/>',
-  notes: '<path d="M6 4h12v16H6z"/><path d="M9 9h6M9 13h6M9 17h3"/>',
-  memory: '<path d="M6 4h9l3 3v13H6z"/><path d="M9 11h6M9 15h6M14 4v4h4"/>',
+  call: '<path d="M6.6 3.5h2.6l1.4 4-2 1.3a12 12 0 0 0 6.6 6.6l1.3-2 4 1.4v2.6a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z"/>',
+  notes: '<path d="M14 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M9 15l1-4 8-8 3 3-8 8-4 1z"/>',
+  memory: '<path d="M12 5a3 3 0 0 0-5-2 4 4 0 0 0-3 6 4 4 0 0 0 0 7 4 4 0 0 0 8 3V5zm0 0a3 3 0 0 1 5-2 4 4 0 0 1 3 6 4 4 0 0 1 0 7 4 4 0 0 1-8 3M7 8l2 2M17 8l-2 2M6 15l3-1M18 15l-3-1"/>',
   sessions: '<path d="M4 6h16M4 12h16M4 18h10"/>',
   approvals: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
   phone: '<rect x="6" y="3" width="12" height="18" rx="3"/><path d="M10.5 17.5h3"/>',
@@ -363,6 +365,7 @@ function renameMachine(host, id) {
 
 function handle(msg) {
   const r = state.route;
+  callCtl?.onEvent(msg);
   switch (msg.type) {
     case 'device':
       if (!isPhone() && msg.device !== deviceId()) { if ($('#qrBox')) closeSheet(); toast('Mòbil connectat correctament', 2000); }
@@ -510,18 +513,19 @@ function checkPairHash() {
 /* ---------------------------------------------------------------- navegació */
 const VIEWS = {
   sessions: { label: 'Sessions', icon: ICON.sessions, group: 'Feina' },
-  approvals: { label: 'Aprovacions', icon: ICON.approvals, group: 'Feina' },
-  notes: { label: 'Notes', icon: ICON.notes, group: 'Feina' },
   feines: { label: 'Feines', icon: ICON.jobs, group: 'Feina' },
-  memoria: { label: 'Memòria', icon: ICON.memory, group: 'Ordinadors' },
-  ordinadors: { label: 'Ordinadors', icon: ICON.machine, group: 'Ordinadors' },
-  mobil: { label: 'Xat local', icon: ICON.phone, group: 'Eines' },
-  pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Eines' },
-  activitat: { label: 'Activitat', icon: ICON.activity, group: 'Compte' },
-  ajustos: { label: 'Ajustos', icon: ICON.settings, group: 'Compte' },
-  ajuda: { label: 'Ajuda', icon: ICON.help, group: 'Compte' }
+  approvals: { label: 'Aprovacions', icon: ICON.approvals, group: 'Feina' },
+  trucada: { label: 'Trucada', icon: ICON.call, group: 'Feina' },
+  notes: { label: 'Notes', icon: ICON.notes, group: 'Organització' },
+  memoria: { label: 'Memòria', icon: ICON.memory, group: 'Organització' },
+  pissarra: { label: 'Pissarra', icon: ICON.board, group: 'Organització' },
+  ordinadors: { label: 'Ordinadors', icon: ICON.machine, group: 'Ordinadors i eines' },
+  mobil: { label: 'Xat local', icon: ICON.phone, group: 'Ordinadors i eines' },
+  activitat: { label: 'Activitat', icon: ICON.activity, group: 'Ordinadors i eines' },
+  ajustos: { label: 'Ajustos', icon: ICON.settings, group: 'Preferències' },
+  ajuda: { label: 'Ajuda', icon: ICON.help, group: 'Preferències' }
 };
-const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', notes: '#/notes', feines: '#/feines', activitat: '#/activitat', memoria: '#/memoria', ordinadors: '#/ordinadors', mobil: '#/xat-local', pissarra: '#/pissarra', ajustos: '#/ajustos', ajuda: '#/ajuda' };
+const HASH = { sessions: '#/sessions', approvals: '#/aprovacions', trucada: '#/trucada', notes: '#/notes', feines: '#/feines', activitat: '#/activitat', memoria: '#/memoria', ordinadors: '#/ordinadors', mobil: '#/xat-local', pissarra: '#/pissarra', ajustos: '#/ajustos', ajuda: '#/ajuda' };
 const NEEDS_MACHINE = new Set(['session']);
 function parseRoute() {
   const h = location.hash.replace(/^#\/?/, '');
@@ -557,8 +561,8 @@ function renderChrome() {
   const m = machine(), sc = $('#sideConn');
   sc.innerHTML = m ? `<i class="dot ${state.connected ? 'on' : ''}"></i><span>${esc(m.name)}</span>${svg(ICON.chev)}` : `<i class="dot"></i><span>Afegeix un ordinador</span>${svg(ICON.plus)}`;
   sc.setAttribute('role', 'button'); sc.tabIndex = 0; sc.classList.add('switch'); sc.dataset.act = 'machines'; sc.title = 'Ordinadors';
-  const more = ['notes', 'feines', 'memoria', 'approvals', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].includes(r.name);
-  $('#tabbar').innerHTML = [['sessions', ICON.sessions, 'Sessions', active === 'sessions'], ['ordinadors', ICON.machine, 'Ordinadors', active === 'ordinadors']]
+  const more = ['feines', 'trucada', 'memoria', 'approvals', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].includes(r.name);
+  $('#tabbar').innerHTML = [['sessions', ICON.sessions, 'Sessions', active === 'sessions'], ['notes', ICON.notes, 'Notes', active === 'notes'], ['ordinadors', ICON.machine, 'Ordinadors', active === 'ordinadors']]
     .map(([k, ic, l, on]) => `<a href="${HASH[k]}" ${on ? 'aria-current="page"' : ''}>${svg(ic)}<span>${l}</span>${k === 'approvals' && n ? `<b class="badge">${n}</b>` : ''}</a>`).join('')
     .replace('</a><a href="#/ordinadors"', `</a><button type="button" data-act="pantalla-tab">${svg('<path d="M5 3l14 7-6 2.2L10.8 19z"/>')}<span>Pantalla</span></button><a href="#/ordinadors"`)
     + `<button type="button" data-act="more" ${more ? 'aria-current="page"' : ''}>${svg(ICON.more)}<span>Més</span></button>`;
@@ -571,8 +575,9 @@ function renderChrome() {
   document.title = n ? `(${n}) nio` : `nio // ${s ? s.title || 'Sessió' : VIEWS[r.name]?.label || 'Panell'}`;
   if ('setAppBadge' in navigator) (n ? navigator.setAppBadge(n) : navigator.clearAppBadge()).catch?.(() => {});
 }
-let notesCtl = null;
-const getNotes = () => (notesCtl ||= createNotes({ api, nodeAudio, toast, esc, machine, voiceOn, voiceSheet, isDemo, openSheet, closeSheet, mobileQrSheet }));
+let notesCtl = null, callCtl = null;
+const getCall = () => (callCtl ||= createCall({ api, esc, toast, bot, machine, isDemo, noMachine, voiceSheet, agentName: (a) => AGENT_NAMES[a] || a, sessions: () => [...state.sessions.values()], approvals: () => [...state.approvals.keys()], refresh: () => {} }));
+const getNotes = () => (notesCtl ||= createNotes({ api, nodeAudio, toast, esc, machine, voiceOn, voiceSheet, isDemo, isPhone, openSheet, closeSheet, mobileQrSheet }));
 function render() {
   const r = state.route, view = $('#view'), board = r.name === 'pissarra';
   if (r.name !== 'sessions') manage = null;
@@ -581,9 +586,11 @@ function render() {
   document.body.classList.toggle('chat-mode', r.name === 'session' || (r.name === 'mobil' && inLocalChat()));
   document.body.classList.toggle('no-tabs', r.name === 'session' || board || (r.name === 'mobil' && inLocalChat()));
   if (r.name !== 'notes' && lastName === 'notes') notesCtl?.unmount();
+  if (r.name !== 'trucada' && lastName === 'trucada') callCtl?.unmount();
   if (!board && lastName === 'pissarra') window.NioBoard?.unmount();
   if (board && lastName === 'pissarra' && $('#boardRoot')) return;
   if (r.name === 'notes' && lastName === 'notes' && $('#notesRoot') && machine()) return; // l'editor no es toca quan l'app es repinta
+  if (r.name === 'trucada' && lastName === 'trucada' && $('#callRoot')?.dataset.m === String(store.active)) return; // la pàgina de la trucada no es repinta a cada esdeveniment
   const changed = lastName !== r.name || r.name === 'session';
   lastName = r.name;
   if (r.name === 'session') renderSession();
@@ -591,12 +598,14 @@ function render() {
     view.innerHTML = machine() ? '<div class="page" id="notesRoot"></div>' : `<div class="page"><div class="top"><div><h1>Notes</h1><p>Escriu, grava i deixa que un model ho ordeni.</p></div></div>${noMachine('Les notes es desen a l’ordinador. Connecta’n un per escriure’n i gravar-ne.')}</div>`;
     if (machine()) getNotes().mount($('#notesRoot'));
   }
+  else if (r.name === 'trucada') { view.innerHTML = `<div class="page" id="callRoot" data-m="${store.active}"></div>`; getCall().mount($('#callRoot')); }
   else if (board) { view.innerHTML = '<div class="page"><div class="board-root" id="boardRoot"></div></div>'; window.NioBoard?.mount($('#boardRoot')); brainsForBoard(); }
   else {
     const html = r.name === 'mobil' ? viewLocal() : null;
     view.innerHTML = html && inLocalChat() ? html : `<div class="page">${html ? html : r.name === 'ordinadors' ? viewComputers() : r.name === 'sessions' ? viewSessions() : r.name === 'approvals' ? viewApprovals() : r.name === 'activitat' ? viewActivity() : r.name === 'feines' ? viewJobs() : r.name === 'memoria' ? viewMemory() : r.name === 'ajuda' ? viewHelp() : viewSettings()}</div>`;
     if (r.name === 'mobil') bindLocal();
     if (r.name === 'mobil' && machine() && !inLocalChat()) loadOllama();
+    if (r.name === 'sessions' && machine() && state.connected) loadTermSessions();
     if (r.name === 'activitat' && machine()) { activity = null; loadActivity(); }
     if (r.name === 'memoria' && machine()) loadMemory();
     if (r.name === 'ordinadors' && machine() && state.connected) loadScreen();
@@ -611,7 +620,7 @@ function render() {
 
 /* ---------- Ordinadors (llista, afegir i detall de l'actiu) */
 const deviceId = () => { let d = LS.get('nio.device', ''); if (!d) { d = Math.random().toString(36).slice(2, 12); LS.set('nio.device', d); } return d; };
-const isPhone = () => isTouch || matchMedia('(max-width: 820px)').matches;
+const isPhone = () => navigator.userAgentData?.mobile === true || /Android|iPhone|iPod|Mobile/i.test(navigator.userAgent) || (isTouch && matchMedia('(max-width: 1024px)').matches);
 const INSTALL_CMD = 'curl -fsSL https://www.nio.cat/install.sh | sh';
 const cmdBox = (c) => `<div class="cmd big"><code>${esc(c)}</code><button class="btn sm" data-copy="${esc(c)}" type="button">${svg(ICON.copy)}Copia</button></div>`;
 // Estat de la resta d'ordinadors (el connectat ja té el seu flux en directe): una consulta lleugera.
@@ -655,6 +664,7 @@ function helpPanel(open) {
 
     ${grp('Treballar amb els agents')}
     ${q('Crear una sessió', `<p>A <b>Sessions</b>, prem <b>Nova sessió</b>: tria l’agent, la carpeta (hi ha un explorador de carpetes de l’ordinador) i el nivell de permisos. Escriu què vols i l’agent es posa a treballar. La resposta et va arribant en directe.</p><p>També pots <b>clonar un repositori de GitHub</b> des de Nova sessió: nio fa servir el ${k('gh')} de l’ordinador (cal haver fet ${k('gh auth login')}).</p>`)}
+    ${q('Continuar una sessió del terminal', `<p>Si tens Claude Code obert al terminal de l’ordinador, surt a dalt de <b>Sessions</b>, a <b>Obertes al terminal</b>, amb el terminal on corre (iTerm, Terminal, VS Code, tmux, SSH…). Toca-la i continua aquí amb tota la conversa. El terminal no es toca: el mòbil en fa una branca pròpia.</p>`)}
     ${q('Els tres nivells de permisos', `<ul><li><b>Només llegir</b>: l’agent llegeix i proposa, però no toca cap fitxer.</li><li><b>Demana permís</b>: llegeix sol; abans d’editar o executar alguna cosa, t’ho pregunta (Claude Code).</li><li><b>Via lliure</b>: treballa sense preguntar. Fes-ho servir només en carpetes de confiança.</li></ul><p>Es pot canviar enmig d’una sessió amb ${k('/mode')}.</p>`)}
     ${q('Aprovacions', `<p>Quan un agent vol editar un fitxer o executar una ordre, surt una targeta amb el que farà. <b>Aprova</b> o <b>rebutja</b> amb un toc. A <b>Aprovacions</b> tens totes les pendents de totes les sessions juntes.</p>`)}
     ${q('Comandes amb «/»', `<p>Al missatge d’una sessió, escriu ${k('/')} i surt la llista amb suggeriments. Les de nio funcionen sempre; les de l’agent (comandes i skills) se li envien tal qual.</p>${rows([
@@ -671,6 +681,7 @@ function helpPanel(open) {
     ${q('Git i GitHub', `<p>Dins una sessió, ${k('/git')} (o Opcions → Git i GitHub) mostra els canvis, fa <b>commit</b> (en una branca nova si ets a ${k('main')}) i crea un <b>PR</b>. Cap clau no passa per nio: fa servir el ${k('git')} i el ${k('gh')} de l’ordinador.</p>`)}
     ${q('Avisos al mòbil', `<p>A <b>Ajustos → Avisos</b>, prem <b>Activa els avisos</b>. Rebràs una notificació quan un agent et demana permís o acaba la feina. L’avís arriba buit; el detall el demana el mòbil directament a l’ordinador.</p><p>A l’iPhone, primer afegeix nio a la pantalla d’inici (Comparteix → Afegeix a la pantalla d’inici) i obre’l des d’allà.</p>`)}
     ${q('Veu', `<p>A <b>Ajustos → Veu</b> actives <b>Whisper</b> per <b>dictar</b> els missatges amb el micròfon, gratis i sense que l’àudio surti de l’ordinador. Per <b>escoltar</b> les respostes, hi pots posar una clau d’ElevenLabs o OpenAI, que es queda a l’ordinador.</p>`)}
+    ${q('Trucada amb en Nio', `<p>A <b>Més → Trucada</b> parles amb en Nio com en una trucada, amb veu en temps real d’ElevenLabs. Et diu quins agents tens, com van les sessions i què espera el teu permís, i li pots demanar que encarregui feina, continuï una sessió o aprovi una acció (abans t’ho repeteix i espera un sí). Si una sessió acaba durant la trucada, t’ho diu.</p><ul><li>Cal una clau d’ElevenLabs a <b>Ajustos → Veu</b>. Es queda a l’ordinador: el mòbil només rep un enllaç que caduca.</li><li>La primera trucada crea l’agent «nio» al teu compte d’ElevenLabs. ElevenLabs cobra per minut.</li><li>Pots interrompre’l parlant, silenciar el micròfon i veure tota la conversa amb <b>Text</b>.</li></ul>`)}
 
     ${grp('Eines')}
     ${q('Pantalla remota', `<p>Mira i controla l’escriptori d’un ordinador des del mòbil. A <b>Ordinadors</b>, baixa fins a la secció <b>Pantalla</b> i prem <b>Obre la pantalla</b>. S’obre a pantalla completa. Cal activar abans <b>Apps de l’escriptori</b> a la mateixa secció.</p><ul><li><b>Mirar</b>: només veus la pantalla, en directe. Amb un dit la mous quan has fet zoom.</li><li><b>Controlar</b>: toc = clic; doble toc = doble clic; mantenir premut = clic dret; dos dits = desplaçar o fer zoom. El botó <b>1 dit</b> canvia entre desplaçar i arrossegar, i el botó <b>2 dits</b> entre desplaçar l’ordinador i fer zoom amb pessics. <b>Teclat</b> obre el teclat del mòbil, i dalt hi tens ${k('⌘')} ${k('⌥')} ${k('⌃')} ${k('⇧')}, ${k('Esc')}, ${k('Tab')} i fletxes.</li><li><b>Zoom amb dos dits</b>: pessiga per apropar i arrossega amb dos dits per moure’t. Al mode Mirar sempre va així, amb doble toc per alternar entre enquadrar i apropar. Al mode Controlar, tria al botó <b>2 dits</b> si els dos dits desplacen l’ordinador o fan zoom. A l’ordinador, pessiga al trackpad o ${k('Ctrl')} + roda. Els botons <b>− 100% +</b> i <b>1:1</b> fan el mateix i funcionen en tots dos modes.</li><li><b>Desa captura</b>: baixa el fotograma actual com a imatge. <b>Captura</b> (a la secció) en fa una de sola, sense obrir la pantalla.</li><li><b>Si surt negra</b>: al Mac, dona el permís de <b>Gravació de pantalla</b> (i <b>Accessibilitat</b> per controlar) al Terminal on corre <span class="mono">nio-cat</span> i reinicia’l. A Linux, per controlar cal <span class="mono">xdotool</span>.</li></ul>`)}
@@ -835,7 +846,7 @@ function addComputerSheet(tab, opts = {}) {
         addMachine({ url: r.url, token: r.token, name: keepName || r.host, kind: 'vps', via: target });
         if (keepName) { const ms = store.machines; ms[store.active].renamed = true; store.machines = ms; }
         shown = 'vps-ok';
-        body.innerHTML = `${intro(`${esc(r.host)} és a punt`, r.claude ? 'Ja el pots fer servir: crea-hi una sessió amb Claude Code.' : 'Claude Code no hi és. Entra al servidor, instal·la’l i inicia sessió amb <span class="mono">claude</span>.')}<div class="row"><a class="btn ink" href="#/sessions" data-close>Obre sessions</a><button class="btn" type="button" data-act="mobile-qr">Continua al mòbil</button></div>`;
+        body.innerHTML = `${intro(`${esc(r.host)} és a punt`, r.claude ? 'Ja el pots fer servir: crea-hi una sessió amb Claude Code.' : 'Claude Code no hi és. Entra al servidor, instal·la’l i inicia sessió amb <span class="mono">claude</span>.')}<div class="row"><a class="btn ink" href="#/sessions" data-close>Obre sessions</a>${isPhone() ? '' : '<button class="btn" type="button" data-act="mobile-qr">Continua al mòbil</button>'}</div>`;
       } catch (err) { $$('li.on', steps).forEach((l) => { l.className = 'err'; }); steps.insertAdjacentHTML('beforeend', `<li class="err">${esc(err.message)}</li>`); btn.disabled = false; shown = 'vps'; }
     };
     const vps = () => {
@@ -911,8 +922,9 @@ async function pantallaTab() {
   });
 }
 function moreSheet() {
-  const item = (k) => `<a class="card row" href="${HASH[k]}" style="gap:12px">${svg(VIEWS[k].icon)}<b>${VIEWS[k].label}</b></a>`;
-  openSheet(`<h2>Més</h2><div class="list">${['notes', 'feines', 'memoria', 'mobil', 'pissarra', 'activitat', 'ajustos', 'ajuda'].map(item).join('')}</div>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
+  const item = (k) => `<a class="more-link" href="${HASH[k]}" ${state.route.name === k ? 'aria-current="page"' : ''}><span>${VIEWS[k].label}</span>${k === 'approvals' && state.approvals.size ? `<span class="badge">${state.approvals.size}</span>` : ''}</a>`;
+  const groups = [...new Set(Object.values(VIEWS).map((v) => v.group))].map((group) => [group, Object.keys(VIEWS).filter((k) => VIEWS[k].group === group)]);
+  openSheet(`<h2>Més</h2><nav class="more-sections" aria-label="Totes les seccions">${groups.map(([title, keys]) => `<section><h3>${title}</h3><div>${keys.map(item).join('')}</div></section>`).join('')}</nav>`, (sh) => { sh.onclick = (e) => { if (e.target.closest('a, [data-act]')) closeSheet(); }; });
 }
 
 /* ---------- Sessions */
@@ -944,6 +956,46 @@ async function manageDelete() {
   toast(fail ? `No he pogut esborrar ${fail} sessions` : `${ids.length} sessions esborrades`); render();
 }
 const plain = (t) => `${t}`.replace(/```[\s\S]*?```/g, ' ').replace(/`([^`]*)`/g, '$1').replace(/!?\[([^\]]*)\]\([^)]*\)/g, '$1').replace(/^\s{0,3}(#{1,6}|[-*+]|\d+\.|>)\s+/gm, '').replace(/(\*\*|__|\*|_)(?=\S)([^*_]*?\S)\1/g, '$2').replace(/\*\*/g, '').replace(/\s#{1,6}\s/g, ' ').replace(/\s#{1,6}\s/g, ' ').replace(/\s+/g, ' ').trim();
+// Sessions de Claude Code obertes al terminal de l'ordinador: es poden continuar des d'aquí.
+let termSessions = null, termTimer = 0, termAt = 0, termFor = '';
+async function loadTermSessions(force) {
+  if (!machine() || !state.connected || state.route.name !== 'sessions') return;
+  const key = machine().url;
+  if (termFor !== key) { termSessions = null; termFor = key; }
+  // render() es crida sovint: només es torna a demanar si fa una estona.
+  if (!force && Date.now() - termAt < 4000) return;
+  clearTimeout(termTimer); termAt = Date.now();
+  try { const r = (await api('/api/claude-sessions')).sessions || []; if (termFor === key) termSessions = r; } catch { termSessions = termSessions || []; }
+  const box = $('#termSessions'); if (box && state.route.name === 'sessions') box.innerHTML = termSessionsHtml();
+  // Es manté al dia mentre la pàgina és oberta: el terminal canvia sense avisar.
+  if (!document.hidden) termTimer = setTimeout(() => loadTermSessions(true), 8000);
+}
+document.addEventListener('visibilitychange', () => { if (!document.hidden && state.route.name === 'sessions') loadTermSessions(true); });
+const TERM_STATUS = { busy: ['Treballant', 'running'], idle: ['Esperant', ''], waiting: ['Et necessita', 'waiting'], needs_input: ['Et necessita', 'waiting'] };
+function termSessionsHtml() {
+  if (!termSessions?.length) return '';
+  const taken = new Set([...state.sessions.values()].flatMap((s) => [s.nativeId, s.fromTerminal]).filter(Boolean));
+  const fresh = termSessions.filter((s) => !taken.has(s.sessionId));
+  if (!fresh.length) return '';
+  const where = (t) => [t?.app, t?.tmux && 'tmux', t?.screen && 'screen', t?.ssh && 'SSH'].filter(Boolean).join(' · ');
+  return `<section class="term-sessions" aria-label="Al terminal"><h2 class="sec">Obertes al terminal</h2><div class="list">${fresh.map((s) => {
+    const [label, cls] = TERM_STATUS[s.status] || [s.status, ''];
+    return `<button class="card session-card term-card" type="button" data-act="resume" data-sid="${esc(s.sessionId)}" data-cwd="${esc(s.cwd || '')}" data-sname="${esc(s.title || s.name || '')}">
+      <div class="row between"><span class="agent-tag nosq" data-agent="claude">${agentBot('claude', s.status === 'busy' ? 'work' : 'idle')}${esc(where(s.terminal) || 'Terminal')}</span><span class="chip ${cls}">${cls ? '<i class="pulse"></i>' : ''}${esc(label)}</span></div>
+      <div class="title">${esc(s.title || s.name || basename(s.cwd || '') || 'Claude Code')}</div>
+      ${s.ask ? `<div class="last">${esc(plain(s.ask))}</div>` : ''}
+      <div class="meta"><span class="mono">${esc(basename(s.cwd || ''))}</span>${s.updated ? `<span>·</span><span>${ago(s.updated)}</span>` : ''}<span class="term-go">Continua aquí →</span></div>
+    </button>`;
+  }).join('')}</div></section>`;
+}
+function sessionCard(s) {
+  return `<${manage ? 'div role="checkbox" tabindex="0" aria-checked="' + manage.has(s.id) + '" data-pick="' + esc(s.id) + '"' : 'a href="#/s/' + esc(s.id) + '"'} class="card session-card ${manage ? 'pick-mode' : ''} ${manage?.has(s.id) ? 'picked' : ''}">
+      <div class="row between"><span class="agent-tag nosq" data-agent="${esc(s.agent)}">${agentBot(s.agent, sessionMood(s))}${esc(AGENT_NAMES[s.agent] || s.agent)}</span>${stateChip(s)}</div>
+      <div class="title">${esc(s.title || 'Sessió nova')}</div>
+      ${s.state === 'error' && s.error ? `<div class="last err">${esc(s.error)}</div>` : s.last ? `<div class="last">${esc(plain(s.last))}</div>` : ''}
+      <div class="meta"><span class="mono">${esc(basename(s.cwd))}</span><span>·</span><span>${esc(MODES[s.mode]?.label || '')}</span><span>·</span><span>${ago(s.updated)}</span></div>
+    </${manage ? 'div' : 'a'}>`;
+}
 function viewSessions() {
   if (!machine()) return `<div class="top"><div><h1>Sessions</h1><p>Cada sessió és una conversa amb un agent, dins d’una carpeta.</p></div></div>${noMachine('Connecta’n un per donar feina als agents i seguir-ne les sessions en directe.')}`;
   const list = [...state.sessions.values()].sort((a, b) => b.updated - a.updated);
@@ -956,13 +1008,11 @@ function viewSessions() {
     return `${head}${queueList()}<div class="panel empty">${bot(state.lastError ? 'sleep' : 'work')}<h2>${esc(state.lastError || 'Connectant amb l’ordinador…')}</h2>${state.lastError ? `<p>${mach.kind === 'vps' ? 'Potser el servidor s’ha reiniciat i l’adreça ha canviat.' : 'Comprova que nio continua engegat a l’ordinador i que el túnel està obert.'}</p><div class="row" style="justify-content:center"><button class="btn" data-act="retry" type="button">${svg(ICON.refresh)}Torna-ho a provar</button>${mach.kind === 'vps' && mach.via ? `<button class="btn ink" data-reconnect="${store.active}" type="button">Torna a connectar</button>` : ''}<button class="btn ghost" data-act="new" type="button">Posa una tasca a la cua</button><a class="btn ghost" href="#/ordinadors">Ordinadors</a></div>` : ''}</div>`;
   }
   if (manage) for (const id of [...manage]) if (!state.sessions.has(id)) manage.delete(id);
-  return `${head}${queueList()}${list.length ? `<div class="list">${list.map((s) => `
-    <${manage ? 'div role="checkbox" tabindex="0" aria-checked="' + manage.has(s.id) + '" data-pick="' + esc(s.id) + '"' : 'a href="#/s/' + esc(s.id) + '"'} class="card session-card ${manage ? 'pick-mode' : ''} ${manage?.has(s.id) ? 'picked' : ''}">
-      <div class="row between"><span class="agent-tag nosq" data-agent="${esc(s.agent)}">${agentBot(s.agent, sessionMood(s))}${esc(AGENT_NAMES[s.agent] || s.agent)}</span>${stateChip(s)}</div>
-      <div class="title">${esc(s.title || 'Sessió nova')}</div>
-      ${s.state === 'error' && s.error ? `<div class="last err">${esc(s.error)}</div>` : s.last ? `<div class="last">${esc(plain(s.last))}</div>` : ''}
-      <div class="meta"><span class="mono">${esc(basename(s.cwd))}</span><span>·</span><span>${esc(MODES[s.mode]?.label || '')}</span><span>·</span><span>${ago(s.updated)}</span></div>
-    </${manage ? 'div' : 'a'}>`).join('')}</div>` : `<div class="panel empty">${bot('idle')}<h2>Encara no hi ha cap sessió</h2><p>Tria un agent i una carpeta, i explica-li què ha de fer.</p><button class="btn ink" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div>`}`;
+  const now = Date.now(), recent = list.filter((s) => now - s.updated < DAY || s.state === 'running' || s.state === 'waiting' || s.pending), old = list.filter((s) => !recent.includes(s));
+  const recentHtml = recent.length ? `<div class="list">${recent.map(sessionCard).join('')}</div>` : '';
+  const oldHtml = old.length ? `<details class="old-sessions"><summary class="muted small">${old.length} sessi${old.length > 1 ? 'ons' : 'o'} anterior${old.length > 1 ? 's' : ''}</summary><div class="list">${old.map(sessionCard).join('')}</div></details>` : '';
+  const termHtml = `<div id="termSessions">${termSessionsHtml()}</div>`;
+  return `${head}${queueList()}${termHtml}${list.length ? `${recentHtml}${oldHtml}` : `<div class="panel empty">${bot('idle')}<h2>Encara no hi ha cap sessió</h2><p>Tria un agent i una carpeta, i explica-li què ha de fer.</p><button class="btn ink" data-act="new" type="button">${svg(ICON.plus)}Nova sessió</button></div>`}`;
 }
 
 /* ---------- Aprovacions */
@@ -1021,7 +1071,7 @@ async function loadActivity() {
 let mem = null;
 function viewMemory() {
   if (!machine()) return `<div class="top"><div><h1>Memòria</h1><p>El que recorden els teus agents: preferències, decisions i context dels projectes.</p></div></div>${noMachine('La memòria són fitxers a l’ordinador. Connecta’n un per veure-la i editar-la.')}`;
-  return `<div class="top"><div><h1>Memòria</h1><p>El que recorden els teus agents en aquest ordinador. Claude Code i Codex la llegeixen i hi escriuen (servidor MCP de nio). Són fitxers markdown a <span class="mono">~/.nio/memory</span>.</p></div><button class="btn ink" data-act="mem-new" type="button">${svg(ICON.plus)}Fitxer nou</button></div>
+  return `<div class="top"><div><h1>Memòria</h1><p>Preferències, decisions i context que els agents recorden en aquest ordinador. Obre un fitxer per consultar-lo o editar-lo.</p></div><button class="btn ink" data-act="mem-new" type="button">${svg(ICON.plus)}Fitxer nou</button></div>
     <form class="mem-search" id="memSearch" role="search"><input type="search" id="memQ" placeholder="Busca a la memòria…" aria-label="Busca a la memòria" autocomplete="off"><button class="btn ink" type="submit">Busca</button></form>
     <div id="memBody">${memHtml()}</div>`;
 }
@@ -1040,14 +1090,18 @@ async function loadMemory() {
 async function memEdit(p) {
   let f = { path: p || 'projectes/', content: '' };
   if (p) { try { f = await api(`/api/memory/f/${encodeURIComponent(p)}`); } catch (e) { return toast(e.message); } }
-  openSheet(`<h2>${p ? esc(p) : 'Fitxer nou'}</h2>
-    ${p ? '' : '<label class="f"><span>Nom (acaba en .md)</span><input type="text" id="memPath" value="projectes/" autocapitalize="off" spellcheck="false"></label>'}
+  openSheet(`<h2>${p ? esc(p) : 'Fitxer nou'}</h2><form class="stack" id="memForm">
+    ${p ? '' : '<label class="f"><span>Nom (acaba en .md)</span><input type="text" id="memPath" value="projectes/" placeholder="projectes/context.md" required pattern=".+\\.md" title="Escriu un nom acabat en .md, per exemple projectes/context.md" autocapitalize="off" spellcheck="false"></label>'}
     <label class="f"><span>Contingut</span><textarea class="field mono" id="memText" rows="14" spellcheck="false">${esc(f.content)}</textarea></label>
-    <div class="row between sheet-foot">${p ? '<button class="btn danger" type="button" id="memDel">Esborra</button>' : '<span></span>'}<button class="btn ink" type="button" id="memSave">Desa</button></div>`, (sh) => {
-    $('#memSave', sh).onclick = async () => {
+    <p id="memError" class="form-error" role="alert" hidden></p>
+    <div class="row between sheet-foot">${p ? '<button class="btn danger" type="button" id="memDel">Esborra</button>' : '<span></span>'}<button class="btn ink" type="submit" id="memSave">Desa</button></div></form>`, (sh) => {
+    $('#memForm', sh).onsubmit = async (event) => {
+      event.preventDefault();
       const path = p || $('#memPath', sh).value.trim();
+      const button = $('#memSave', sh), error = $('#memError', sh); button.disabled = true; button.textContent = 'Desant…'; error.hidden = true;
       try { await api(`/api/memory/f/${encodeURIComponent(path)}`, { method: 'PUT', body: { content: $('#memText', sh).value } }); toast('Desat'); closeSheet(); mem = null; loadMemory(); }
-      catch (e) { toast(e.message, 4200); }
+      catch (e) { error.textContent = `${e.message} Pots tornar a prémer «Desa».`; error.hidden = false; }
+      finally { button.disabled = false; button.textContent = 'Desa'; }
     };
     if (p) $('#memDel', sh).onclick = async () => {
       if (!confirm(`S’esborrarà «${p}» de la memòria. Els agents ja no ho recordaran.`)) return;
@@ -1398,7 +1452,7 @@ function eventNode(e) {
   const s = state.sessions.get(state.route.id);
   switch (e.kind) {
     case 'user': return el(`<div class="msg-user">${esc(e.text)}</div>`);
-    case 'text': return el(`<div class="msg-ai ${e.open && s?.state === 'running' ? 'cursor' : ''}" data-seq="${e.seq}">${md(e.text)}${!e.open && voiceOn() ? `<button class="speak" type="button" data-speak aria-label="Escolta la resposta">${svg(ICON.speaker)}<span>Escolta</span></button>` : ''}</div>`);
+    case 'text': return el(`<div class="msg-ai ${e.open && s?.state === 'running' ? 'cursor' : ''}" data-seq="${e.seq}">${md(e.text)}${!e.open && ttsOn() ? `<button class="speak" type="button" data-speak aria-label="Escolta la resposta">${svg(ICON.speaker)}<span>Escolta</span></button>` : ''}</div>`);
     case 'tool': return el(`<details class="tool"><summary><span class="name">${esc(e.name)}</span><span class="arg">${esc(toolArg(e.input))}</span><span class="st">…</span></summary><pre>${esc(prettyInput(e.input))}</pre></details>`);
     case 'tool_result': return el(`<details class="tool"><summary><span class="name">${esc(e.name || 'Eina')}</span><span class="arg"></span><span class="st ${e.error ? 'err' : 'ok'}">${e.error ? '✕' : '✓'}</span></summary><pre class="out">${esc(e.output)}</pre></details>`);
     case 'approval': { const a = state.approvals.get(e.approval) || {}; return el(approvalCard({ ...a, approval: e.approval, tool: e.tool, input: e.input, state: e.state && e.state !== 'pending' ? e.state : a.state || e.state }, false)); }
@@ -1576,10 +1630,11 @@ function renderComposer() {
 
 /* ---------- Fulls */
 function openSheet(html, onMount, cls) {
-  const d = $('#sheet'); d.classList.toggle('wiz', !!cls?.startsWith('wiz')); d.classList.toggle('compact', cls === 'wiz compact'); const si = $('#sheetIn'); si.onclick = si.onsubmit = si.oninput = si.onchange = null; si.innerHTML = cls?.startsWith('wiz') ? '' : `<div class="grab"></div>${html}`;
+  const d = $('#sheet'); d.classList.toggle('wiz', !!cls?.startsWith('wiz')); d.classList.toggle('compact', cls === 'wiz compact'); const si = $('#sheetIn'); si.onclick = si.onsubmit = si.oninput = si.onchange = null; si.innerHTML = cls?.startsWith('wiz') ? '' : `<div class="grab"></div><button class="icon-btn sheet-close" type="button" data-sheet-close aria-label="Tanca">${svg(ICON.close)}</button>${html}`;
   if (!d.open) d.showModal(); raiseToasts();
   if (isTouch) { if (document.activeElement?.matches?.('input, textarea, select')) document.activeElement.blur(); } else setTimeout(() => focusIn(d), 30); if (T.on) $('#tour').hidden = true;
   onMount?.($('#sheetIn'));
+  const title = si.querySelector('h2'); if (title) { title.id = 'sheetTitle'; d.setAttribute('aria-labelledby', title.id); } else { d.removeAttribute('aria-labelledby'); d.setAttribute('aria-label', 'Opcions'); }
 }
 const closeSheet = () => { const d = $('#sheet'); if (d.open) d.close(); setTimeout(focusMain, 0); };
 // A l'ordinador el cursor és sempre on s'escriu; al mòbil no, perquè no s'obri el teclat.
@@ -1590,9 +1645,50 @@ function focusMain() {
   if (r === 'session') $('#msg')?.focus({ preventScroll: true });
   else if (r === 'mobil' && inLocalChat()) $('#lmsg')?.focus({ preventScroll: true });
 }
-$('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet') closeSheet(); });
+$('#sheet').addEventListener('click', (e) => { if (e.target.id === 'sheet' || e.target.closest('[data-sheet-close]')) closeSheet(); });
 $('#sheet').addEventListener('close', () => setTimeout(focusMain, 0));
 
+// Al mòbil, els fulls es tanquen lliscant cap avall, com els de l'iPhone: el full segueix el dit
+// i, si baixa prou o es llença, marxa; si no, torna a pujar. Si el contingut té scroll, primer s'ha d'arribar a dalt.
+(() => {
+  const d = $('#sheet');
+  let g = null;
+  const scrollerOf = (t) => { for (let el = t; el && el !== d.parentElement; el = el.parentElement) { if (el.scrollHeight > el.clientHeight + 1 && /auto|scroll/.test(getComputedStyle(el).overflowY)) return el; if (el === d) break; } return null; };
+  const reset = () => { d.style.transition = ''; d.style.transform = ''; };
+  d.addEventListener('touchstart', (e) => {
+    g = null;
+    if (!mq.matches || e.touches.length !== 1 || e.target.closest('input, textarea, select, [contenteditable], input[type=range], [data-noswipe]')) return;
+    const t = e.touches[0], sc = scrollerOf(e.target);
+    const head = !!e.target.closest('.grab, .wiz-head, h2');
+    if (sc && sc.scrollTop > 0 && !head) return;
+    g = { y0: t.clientY, x0: t.clientX, dy: 0, lock: null, sc: head ? null : sc, pts: [[e.timeStamp, t.clientY]] };
+  }, { passive: true });
+  d.addEventListener('touchmove', (e) => {
+    if (!g) return;
+    const t = e.touches[0], dy = t.clientY - g.y0, dx = t.clientX - g.x0;
+    if (!g.lock) {
+      if (Math.abs(dy) < 6 && Math.abs(dx) < 6) return;
+      if (dy > 0 && dy > Math.abs(dx) && !(g.sc && g.sc.scrollTop > 0)) { g.lock = 'y'; d.style.transition = 'none'; }
+      else { g = null; return; }
+    }
+    if (e.cancelable) e.preventDefault();
+    g.dy = Math.max(0, dy); g.pts.push([e.timeStamp, t.clientY]); if (g.pts.length > 5) g.pts.shift();
+    d.style.transform = `translateY(${g.dy}px)`;
+  }, { passive: false });
+  const end = (e) => {
+    const x = g; g = null; if (!x || x.lock !== 'y') return;
+    const [t0, y0] = x.pts[0], [t1, y1] = x.pts[x.pts.length - 1], v = (y1 - y0) / Math.max(1, t1 - t0);
+    if (e.type === 'touchend' && (x.dy > Math.min(160, d.offsetHeight * 0.28) || (v > 0.5 && x.dy > 20))) {
+      if (reduce) { reset(); closeSheet(); return; }
+      d.style.transition = 'transform .2s cubic-bezier(.4,0,1,1)'; d.style.transform = `translateY(${d.offsetHeight + 20}px)`;
+      setTimeout(() => { closeSheet(); requestAnimationFrame(reset); }, 200);
+    } else { d.style.transition = 'transform .3s cubic-bezier(.22,1,.36,1)'; d.style.transform = ''; setTimeout(reset, 300); }
+  };
+  d.addEventListener('touchend', end, { passive: true });
+  d.addEventListener('touchcancel', end, { passive: true });
+  d.addEventListener('close', reset);
+})();
+
 // Claude Code no deixa «Via lliure» quan nio corre com a root (típic en un VPS).
 const modeBlocked = (agentId, mode) => agentId === 'claude' && mode === 'tot' && state.info?.user === 'root';
 function modeHelp(agentId, mode) {
@@ -2468,6 +2564,8 @@ document.addEventListener('click', async (e) => {
 // Les claus (ElevenLabs o OpenAI) viuen a l'ordinador. L'àudio fa: mòbil → ordinador → proveïdor.
 let nodeVoice = null; // estat de la veu de l'ordinador actiu (sense claus)
 const voiceOn = () => !!nodeVoice?.stt;
+// Escoltar necessita una clau d'ElevenLabs o OpenAI: amb Whisper sol no hi ha veu per parlar.
+const ttsOn = () => !!nodeVoice?.tts;
 async function loadVoice() { try { nodeVoice = await api('/api/voice'); } catch { nodeVoice = null; } }
 async function nodeAudio(path, opts) {
   const m = machine(); if (!m) throw new Error('No hi ha cap ordinador connectat');
@@ -2534,13 +2632,15 @@ async function voiceSheet() {
   openSheet(`<h2>Veu</h2><p class="muted small">Per dictar n’hi ha prou amb Whisper, gratis i a l’ordinador «${esc(machine().name)}». Les claus són opcionals: serveixen per escoltar les respostes en veu alta. Es desen a l’ordinador i no tornen mai al mòbil.</p>
     <div id="whisperBox" style="margin-top:14px">${whisperCard(v.whisper)}</div>
     <form class="stack" id="voiceForm" style="margin-top:14px">
+      <details class="voice-extras"><summary>Extres opcionals · ElevenLabs i OpenAI</summary><div class="stack"><p class="muted small">Afegeix una clau per fer servir aquests serveis. Whisper funciona sense cap clau.</p>
       <label class="f"><span>Clau d’ElevenLabs ${v.providers.elevenlabs.key ? `<span class="muted">(desada: ${esc(v.providers.elevenlabs.key)})</span>` : ''}</span><input type="password" id="vEl" placeholder="${v.providers.elevenlabs.key ? 'Deixa-ho buit per mantenir-la' : 'sk_…'}" value="${!v.providers.elevenlabs.key && old.key ? esc(old.key) : ''}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
       <label class="f"><span>Clau d’OpenAI ${v.providers.openai.key ? `<span class="muted">(desada: ${esc(v.providers.openai.key)})</span>` : ''}</span><input type="password" id="vOa" placeholder="${v.providers.openai.key ? 'Deixa-ho buit per mantenir-la' : 'sk-…'}" autocomplete="off" autocapitalize="off" spellcheck="false"></label>
       <div class="grid-2"><label class="f"><span>Per entendre’t</span><select id="vStt"><option value="">Automàtic</option>${v.whisper ? `<option value="whisper" ${v.stt === 'whisper' ? 'selected' : ''}>Whisper (gratis)</option>` : ''}<option value="elevenlabs" ${v.stt === 'elevenlabs' ? 'selected' : ''}>ElevenLabs Scribe</option><option value="openai" ${v.stt === 'openai' ? 'selected' : ''}>OpenAI</option></select></label>
       <label class="f"><span>Per parlar</span><select id="vTts"><option value="">Automàtic</option><option value="elevenlabs" ${v.tts === 'elevenlabs' ? 'selected' : ''}>ElevenLabs</option><option value="openai" ${v.tts === 'openai' ? 'selected' : ''}>OpenAI</option></select></label></div>
       <label class="row check"><input type="checkbox" id="vSpeak" ${v.speak ? 'checked' : ''}> <span>Llegeix en veu alta les respostes de la sessió oberta</span></label>
       ${old.key ? '<p class="muted small">Tenies una clau d’ElevenLabs desada en aquest navegador: la passo a l’ordinador i l’esborro d’aquí.</p>' : ''}
-      <div class="row between sheet-foot"><button class="btn ghost" type="button" id="vOff">Treu les claus</button><button class="btn ink" type="submit">Desa</button></div>
+      <button class="btn ghost" type="button" id="vOff">Treu les claus</button></div></details>
+      <div class="row sheet-foot"><button class="btn ink" type="submit">Desa</button></div>
     </form>`, (sh) => {
     const put = async (body, msg) => { try { nodeVoice = await api('/api/voice', { method: 'PUT', body }); try { localStorage.removeItem('nio.voice'); } catch { /* res */ } closeSheet(); toast(msg); if (state.route.name === 'session') renderSession(); else render(); } catch (e) { toast(e.message, 4500); } };
     $('#voiceForm', sh).onsubmit = (e) => { e.preventDefault(); const keys = {}; const el = $('#vEl', sh).value.trim(), oa = $('#vOa', sh).value.trim(); if (el) keys.elevenlabs = el; if (oa) keys.openai = oa; put({ keys, stt: $('#vStt', sh).value || null, tts: $('#vTts', sh).value || null, speak: $('#vSpeak', sh).checked }, 'Veu desada a l’ordinador'); };
@@ -2619,6 +2719,17 @@ document.addEventListener('click', async (e) => {
   if (a.dataset.qdrop) { queue.drop(a.dataset.qdrop); return render(); }
   switch (a.dataset.act) {
     case 'new': return newSessionSheet();
+    case 'resume': {
+      const btn = a; btn.disabled = true;
+      const sid = btn.dataset.sid, cwd = btn.dataset.cwd, sname = btn.dataset.sname;
+      try {
+        const title = sname || basename(cwd) || 'Terminal';
+        const ns = await api('/api/sessions', { method: 'POST', body: { agent: 'claude', cwd: cwd || '', mode: 'preguntar', resumeId: sid, title } });
+        state.sessions.set(ns.id, ns); termSessions = termSessions?.filter((x) => x.sessionId !== sid) || null;
+        go(`#/s/${ns.id}`);
+      } catch (err) { toast(err.message, 4200); btn.disabled = false; }
+      return;
+    }
     case 'manage-on': manage = new Set(); return render();
     case 'manage-off': manage = null; return render();
     case 'manage-del': return manageDelete();

package/web/app/call.css

@@ -0,0 +1,80 @@
+/* nio · Trucada */
+.call-hero { display: grid; justify-items: center; gap: 10px; max-width: 640px; margin: 8px auto 0; padding: 40px 24px 32px; border: 1px solid var(--border); border-radius: 24px; background: var(--panel); text-align: center; }
+.call-hero h2 { margin-top: 8px; font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
+.call-hero > p { max-width: 440px; text-wrap: balance; }
+.call-why { font-size: 14px; color: var(--fg-muted); }
+.call-why.err { color: var(--red); }
+.call-cta { margin-top: 14px; }
+.call-try { max-width: 640px; margin: 0 auto; }
+.call-try .sec { font-size: 15px; margin: 28px 0 10px; }
+.call-ex { display: flex; flex-wrap: wrap; gap: 8px; }
+.call-ex span { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font-size: 14px; }
+.call-notes { margin: 18px 0 0; padding-left: 18px; display: grid; gap: 6px; }
+
+/* La cara d'en Nio: anells que respiren i que creixen amb la veu (--lvl, de 0 a 1). */
+.call-face { --lvl: 0; position: relative; display: grid; place-items: center; width: 132px; height: 132px; color: var(--fg); }
+.call-face .call-bot { --s: 64px; position: relative; z-index: 2; }
+.call-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; opacity: .18; transform: scale(calc(.82 + var(--lvl) * .3)); transition: transform .08s linear; animation: call-breathe 3.2s ease-in-out infinite; }
+.call-ring.r2 { opacity: .09; transform: scale(calc(1 + var(--lvl) * .55)); animation-delay: -1.6s; }
+.call-lvl { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%); opacity: calc(var(--lvl) * 1.4); transform: scale(calc(.9 + var(--lvl) * .5)); transition: transform .08s linear, opacity .08s linear; }
+@keyframes call-breathe { 50% { opacity: .3; } }
+
+.call-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; color: #fff; cursor: pointer; transition: transform .16s var(--ease), filter .16s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
+.call-btn .ico { width: 26px; height: 26px; fill: currentColor; stroke: none; }
+.call-btn:active { transform: scale(.93); }
+.call-btn:disabled { opacity: .55; cursor: progress; }
+.call-btn.go { min-width: 72px; height: 72px; padding: 0 30px; background: #1f9d55; box-shadow: 0 12px 30px -12px #1f9d55; font-size: 17px; font-weight: 600; }
+.call-btn.go:hover { filter: brightness(1.06); }
+.call-btn.end { width: 76px; height: 76px; background: var(--red); box-shadow: 0 12px 30px -12px var(--red); }
+.call-btn.end .ico { width: 32px; height: 32px; }
+
+/* Pantalla de la trucada: fosca, com al telèfon, i la conversa com les lletres d'Apple Music. */
+.call-ov { --lvl: 0; position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; color: #fff; background: #141112; overscroll-behavior: contain; overflow: hidden; }
+.call-amb { position: absolute; inset: -20%; pointer-events: none; filter: blur(70px) saturate(1.2); opacity: calc(.5 + var(--lvl) * .45); transform: scale(calc(1 + var(--lvl) * .12)); transition: opacity .2s linear, transform .2s linear; }
+.call-amb i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; animation: call-drift 22s ease-in-out infinite alternate; }
+.call-amb i:nth-child(1) { left: -10%; top: -15%; background: radial-gradient(circle, #f46a3b 0%, transparent 62%); }
+.call-amb i:nth-child(2) { right: -4%; top: 18%; background: radial-gradient(circle, #6d3f7e 0%, transparent 62%); animation-duration: 27s; animation-delay: -9s; }
+.call-amb i:nth-child(3) { left: 10%; bottom: -30%; background: radial-gradient(circle, #1f5f63 0%, transparent 62%); animation-duration: 31s; animation-delay: -15s; }
+@keyframes call-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vmax, 6vmax) scale(1.12); } 100% { transform: translate(-6vmax, 3vmax) scale(.94); } }
+.call-ov[data-st="ended"] .call-amb { opacity: .28; }
+.call-ov > :not(.call-amb) { position: relative; z-index: 1; }
+
+.call-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + var(--safe-t)) 22px 6px; max-width: 760px; width: 100%; margin: 0 auto; }
+.call-me { display: flex; align-items: center; gap: 11px; min-width: 0; }
+.call-me .call-bot { --s: 30px; color: #fff; transform: scale(calc(1 + var(--lvl) * .25)); transition: transform .1s linear; }
+.call-me > span { display: grid; line-height: 1.2; }
+.call-me b { font-size: 15px; font-weight: 600; }
+.call-me small { font-size: 13px; color: rgba(255,255,255,.62); }
+.call-time { font-size: 14px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
+
+.call-lyrics { overflow-y: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent 0, #000 16%, #000 78%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 16%, #000 78%, transparent 100%); }
+.call-lyrics::-webkit-scrollbar { display: none; }
+.call-lines { display: grid; gap: 26px; max-width: 760px; margin: 0 auto; padding: 26vh 24px 52vh; }
+.call-line { font-size: clamp(27px, 7.2vw, 42px); font-weight: 700; line-height: 1.17; letter-spacing: -.035em; text-wrap: pretty; overflow-wrap: anywhere; transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease); }
+.call-line:not(.now) { opacity: .42; filter: blur(1.2px); transform: scale(.97); transform-origin: left center; }
+.call-line.nio span { color: rgba(255,255,255,.32); transition: color .22s ease-out, text-shadow .4s; }
+.call-line.nio span.on { color: #fff; }
+.call-line.nio.now span.on { text-shadow: 0 0 22px rgba(255,255,255,.18); }
+.call-line.tu { justify-self: end; max-width: 86%; font-size: clamp(20px, 5.4vw, 30px); font-weight: 600; text-align: right; color: rgba(255,255,255,.72); }
+.call-line.tu:not(.now) { transform-origin: right center; }
+.call-line.ear { display: flex; gap: 7px; padding: 8px 2px; opacity: 1; filter: none; transform: none; }
+.call-line.ear[hidden] { display: none; }
+.call-line.ear i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.8); transform: scale(calc(.55 + var(--lvl) * 1.1)); transition: transform .08s linear; }
+.call-line.ear i:nth-child(2) { transform: scale(calc(.55 + var(--lvl) * 1.5)); }
+.call-line.info { font-size: 15px; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.6); filter: none; transform: none; opacity: 1; background: linear-gradient(90deg, rgba(255,255,255,.45) 30%, #fff 50%, rgba(255,255,255,.45) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: call-shimmer 1.6s linear infinite; }
+@keyframes call-shimmer { to { background-position: -150% 0; } }
+.call-line.err { font-size: clamp(20px, 5vw, 26px); color: #ffb3a8; }
+.call-ov.over .call-line { opacity: .9; filter: none; transform: none; }
+.call-ov.over .call-line.tu { opacity: .7; }
+
+.call-bar { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 12px 20px calc(26px + var(--safe-b)); }
+.call-ctl { display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: background .18s, color .18s, transform .16s var(--ease); -webkit-tap-highlight-color: transparent; }
+.call-ctl .ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.call-ctl:active { transform: scale(.92); }
+.call-ctl[aria-pressed="true"] { background: #fff; color: #141112; }
+.call-ov .call-btn.go { height: 62px; min-width: 0; padding: 0 26px; font-size: 16px; }
+.call-ov .call-btn.go .ico { width: 22px; height: 22px; }
+.call-ov :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
+body:has(.call-ov) { overflow: hidden; }
+@media (min-width: 900px) { .call-lines { padding-inline: 40px; } }
+@media (prefers-reduced-motion: reduce) { .call-amb i, .call-line.info, .call-ring { animation: none; } .call-line { transition: none; } }