@gotcos/glasses-server 6.99.20 → 6.99.25

package/server/web-control/panes/questions.js

@@ -28,6 +28,7 @@
     items: [],            // pending items, oldest first
     picks: {},            // id -> [{ labels: [], other: '' }] per question
     armed: {},            // id -> 'send' | 'allow' | 'deny'
+    armedAt: {},          // id -> when it was armed (COSWeb.confirmReady)
     sending: {},          // id -> clientAnswerId while a POST is out
     notes: {},            // id -> one line under the card
     answerIds: {},        // id -> the clientAnswerId this page answers under (a retry replays it)
@@ -115,13 +116,13 @@
     var text = Q.notes[item.id] || '';
     return '<p class="sq-note' + (text ? '' : ' hidden') + '" data-sq-note="' + esc(item.id) + '" role="status">' + esc(text) + '</p>';
   }
-  function questionCard(item) {
+  function questionCard(item, scope) {
     var picks = Q.picks[item.id] || [];
     var sending = !!Q.sending[item.id];
     var blocks = (item.questions || []).map(function (q, qi) {
       var p = picks[qi] || { labels: [], other: '' };
       var type = q.multiSelect ? 'checkbox' : 'radio';
-      var name = 'sq-' + item.id + '-' + qi;
+      var name = (scope || 'sq') + '-' + item.id + '-' + qi;
       return '<fieldset class="sq-q"><legend class="sq-q-text">' + esc(q.question) + (q.header ? ' <span class="sq-q-tag">' + esc(q.header) + '</span>' : '') + '</legend>' +
         (q.multiSelect ? '<p class="sq-fine">Pick any that apply.</p>' : '') +
         '<div class="sq-options">' + q.options.map(function (o, oi) {
@@ -153,26 +154,48 @@
         '<button type="button" class="link-btn sq-leave" data-sq="leave" data-sq-id="' + esc(item.id) + '"' + (sending ? ' disabled' : '') + '>Leave for the Mac</button></div>' +
       noteHtml(item) + '</article>';
   }
-  function render() {
+  // Other places can show the cards for one session (Today's overlay, panes/today-actions.js): the same items, picks,
+  // answer ids and posts, drawn into their own element. A mount is dropped when its element leaves the page.
+  var mounts = [];
+  function hostsOf() {
+    mounts = mounts.filter(function (m) { return m.el.isConnected !== false; });
+    return [{ el: host, sessionId: null, scope: 'sq' }].concat(mounts);
+  }
+  function itemsFor(sessionId) {
+    var want = String(sessionId || '').toLowerCase();
+    return Q.items.filter(function (i) { return !want || String(i.sessionId || '').toLowerCase() === want; });
+  }
+  function drawInto(m) {
     var active = document.activeElement;
-    var focus = active && active.hasAttribute && active.hasAttribute('data-sq-other') ? { id: active.getAttribute('data-sq-id'), q: active.getAttribute('data-q'), start: active.selectionStart, end: active.selectionEnd } : null;
-    host.innerHTML = Q.items.map(function (i) { return i.kind === 'approval' ? approvalCard(i) : questionCard(i); }).join('');
-    host.hidden = !Q.items.length;
+    var focus = active && active.hasAttribute && active.hasAttribute('data-sq-other') && m.el.contains && m.el.contains(active) ? { id: active.getAttribute('data-sq-id'), q: active.getAttribute('data-q'), start: active.selectionStart, end: active.selectionEnd } : null;
+    var list = itemsFor(m.sessionId);
+    m.el.innerHTML = list.map(function (i) { return i.kind === 'approval' ? approvalCard(i) : questionCard(i, m.scope); }).join('');
+    m.el.hidden = !list.length;
     if (focus) {
-      var box = host.querySelector('[data-sq-other][data-sq-id="' + focus.id + '"][data-q="' + focus.q + '"]');
+      var box = m.el.querySelector('[data-sq-other][data-sq-id="' + focus.id + '"][data-q="' + focus.q + '"]');
       if (box) { box.focus({ preventScroll: true }); try { box.setSelectionRange(focus.start, focus.end); } catch (_e) {} }
     }
+    if (m.onChange) { try { m.onChange(list.length); } catch (_e) {} }
+  }
+  function render() {
+    hostsOf().forEach(drawInto);
     clearInterval(Q.tick);
     if (Q.items.length) Q.tick = setInterval(tickSeconds, 1000);
   }
   function itemOf(id) { for (var i = 0; i < Q.items.length; i++) if (Q.items[i].id === id) return Q.items[i]; return null; }
   // The seconds move without a redraw (a redraw would drop a half-typed answer).
   function tickSeconds() {
-    host.querySelectorAll('[data-sq-secs]').forEach(function (el) { var it = itemOf(el.getAttribute('data-sq-secs')); if (it) el.textContent = timeLeft(secondsLeft(it)); });
+    hostsOf().forEach(function (m) {
+      m.el.querySelectorAll('[data-sq-secs]').forEach(function (el) { var it = itemOf(el.getAttribute('data-sq-secs')); if (it) el.textContent = timeLeft(secondsLeft(it)); });
+    });
   }
   function patchCard(id) {
-    var item = itemOf(id), card = host.querySelector('[data-sq-card="' + id + '"]');
-    if (!item || !card) return render();
+    var item = itemOf(id), cards = [];
+    hostsOf().forEach(function (m) { var c = m.el.querySelector('[data-sq-card="' + id + '"]'); if (c) cards.push(c); });
+    if (!item || !cards.length) return render();
+    cards.forEach(function (card) { patchOne(card, id, item); });
+  }
+  function patchOne(card, id, item) {
     var send = card.querySelector('[data-sq="send"]');
     if (send) { send.disabled = !!Q.sending[id] || !complete(item); send.textContent = Q.sending[id] ? 'Sending…' : Q.armed[id] === 'send' ? 'Tap again to send' : 'Send'; }
     var allow = card.querySelector('[data-sq="allow"]'); if (allow) allow.textContent = Q.armed[id] === 'allow' ? 'Tap again to allow' : 'Allow once';
@@ -219,7 +242,7 @@
     });
     post(item.id, { answers: answers }, 'Sent to ' + engine(item) + '.');
   }
-  host.addEventListener('click', function (e) {
+  function onClick(e) {
     var b = e.target.closest('[data-sq]');
     if (!b || b.disabled) return;
     var id = b.getAttribute('data-sq-id'), what = b.getAttribute('data-sq'), item = itemOf(id);
@@ -237,23 +260,28 @@
       });
       return;
     }
-    // Tap, then tap again: the first tap only arms the button.
-    if (Q.armed[id] !== what) { Q.armed[id] = what; patchCard(id); return; }
+    // Tap, then tap again: the first tap only arms the button, and the second counts only once the first has been on
+    // screen a moment (COSWeb.confirmReady, the rule Today's overlay uses), so a double tap never allows or sends.
+    if (Q.armed[id] !== what) { Q.armed[id] = what; Q.armedAt[id] = Date.now(); patchCard(id); return; }
+    if (W.confirmReady && !W.confirmReady(Q.armedAt[id])) return;
     if (what === 'send') return sendAnswers(item);
     if (what === 'allow' || what === 'deny') return post(id, { decision: what }, what === 'allow' ? 'Allowed once.' : 'Denied.');
-  });
-  host.addEventListener('change', function (e) {
+  }
+  function onChange(e) {
     var t = e.target;
     if (!t.hasAttribute('data-sq-pick')) return;
     var id = t.getAttribute('data-sq-id'), item = itemOf(id); if (!item) return;
     var qi = Number(t.getAttribute('data-q')), q = item.questions[qi], label = q.options[Number(t.getAttribute('data-o'))].label;
     var p = Q.picks[id][qi];
     if (q.multiSelect) p.labels = t.checked ? p.labels.concat([label]) : p.labels.filter(function (l) { return l !== label; });
-    else { p.labels = [label]; p.other = ''; var box = host.querySelector('[data-sq-other][data-sq-id="' + id + '"][data-q="' + qi + '"]'); if (box) box.value = ''; }
+    else {
+      p.labels = [label]; p.other = '';
+      hostsOf().forEach(function (m) { var box = m.el.querySelector('[data-sq-other][data-sq-id="' + id + '"][data-q="' + qi + '"]'); if (box) box.value = ''; });
+    }
     Q.armed[id] = '';
     patchCard(id);
-  });
-  host.addEventListener('input', function (e) {
+  }
+  function onInput(e) {
     var t = e.target;
     if (!t.hasAttribute('data-sq-other')) return;
     var id = t.getAttribute('data-sq-id'), item = itemOf(id); if (!item) return;
@@ -262,14 +290,24 @@
     // Single choice: typing your own answer clears the picked option, as on the phone.
     if (!q.multiSelect && t.value.trim() && p.labels.length) {
       p.labels = [];
-      host.querySelectorAll('[data-sq-pick][data-sq-id="' + id + '"][data-q="' + qi + '"]').forEach(function (r) { r.checked = false; });
+      hostsOf().forEach(function (m) { m.el.querySelectorAll('[data-sq-pick][data-sq-id="' + id + '"][data-q="' + qi + '"]').forEach(function (r) { r.checked = false; }); });
     }
     Q.armed[id] = '';
     patchCard(id);
-  });
+  }
+  function listen(el) { el.addEventListener('click', onClick); el.addEventListener('change', onChange); el.addEventListener('input', onInput); }
+  listen(host);
+  // Draw this session's cards into `el` and keep them in step; `onChange(count)` hears each redraw.
+  function mount(el, sessionId, onChange) {
+    if (!el) return null;
+    var m = { el: el, sessionId: String(sessionId || '').toLowerCase(), scope: 'sqm' + (mounts.length + 1), onChange: onChange || null };
+    mounts.push(m); listen(el); drawInto(m);
+    if (!Q.stopped) { clearTimeout(Q.timer); Q.timer = setTimeout(poll, 0); }
+    return { count: function () { return itemsFor(m.sessionId).length; }, unmount: function () { mounts = mounts.filter(function (x) { return x !== m; }); } };
+  }
 
   document.addEventListener('visibilitychange', function () { if (document.hidden) stop(); else if (signedIn()) start(); });
   W.onShell(function () { start(); });
 
-  W.sessionQuestions = { _state: Q, _take: take, _render: render, poll: poll };
+  W.sessionQuestions = { _state: Q, _take: take, _render: render, poll: poll, mount: mount, itemsFor: itemsFor };
 })();

package/server/web-control/panes/settings.js

@@ -24,12 +24,67 @@
     // 6.99.11 (Drop it P2): shown only when the server has the P2 settings and Drop it is on.
     { id: 'reach', title: 'COS reaching out', summary: 'What COS tells you about on its own, when it may interrupt, and your reminders.', mac: [], p2: true },
     { id: 'privacy', title: 'Privacy and permissions', summary: 'What COS can use on this Mac. Each permission turns on one feature.', mac: ['Permissions'] },
-    { id: 'pet', title: 'Pet', summary: 'The session pet: its character, size and motion.', mac: ['Session pet', 'Characters'] },
+    { id: 'pet', title: 'Pet', summary: 'Which pet this browser shows on Today, and whether it shows. Size, motion and the Mac\u2019s own pet are set in COS Control.', mac: ['Session pet size and motion', 'Characters on the Mac'] },
     { id: 'system', title: 'System and updates', summary: 'The COS server on this Mac, app updates, and checks when something is off.', mac: ['App updates', 'Troubleshooting'] }
   ];
   var DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
   function soft(p) { return p.then(function (d) { return d; }, function () { return null; }); }
+  // ── Pet (this browser) ──────────────────────────────────
+  // Which pet Today shows here and whether it shows at all. Kept per browser (COSWeb.petPrefs), like the theme.
+  // The Mac's own pet is changed in COS Control: the app does not watch its pet folder, so a change from here
+  // would leave the Mac showing the old pet. Catalog: GET /api/web-pet/catalog (lib/web-pet-choice.ts).
+  var PET = { catalog: null, state: 'idle', q: '' };
+  function loadPetCatalog() {
+    if (PET.state === 'loading' || PET.state === 'ready') return;
+    PET.state = 'loading';
+    api('/api/web-pet/catalog').then(function (c) { PET.catalog = c; PET.state = 'ready'; render(); },
+      function () { PET.state = 'error'; render(); });
+  }
+  function petChoiceRow(pet, name, desc, preview, current) {
+    var on = current === pet;
+    return '<button type="button" class="cx-set-row cx-set-choice pet-choice" data-pet="' + esc(pet) + '" aria-pressed="' + on + '">' +
+      (preview ? '<img class="pet-thumb" alt="" loading="lazy" src="' + esc(preview) + '">' : '<span class="pet-thumb"></span>') +
+      '<span class="cx-set-text"><span class="cx-set-name">' + esc(name) + '</span>' + (desc ? '<span class="cx-set-desc">' + esc(desc) + '</span>' : '') + '</span>' +
+      '<span class="value">' + (on ? '<span class="check">✓</span>' : '') + '</span></button>';
+  }
+  function petBody() {
+    var prefs = W.petPrefs ? W.petPrefs() : { pet: 'mac', show: true };
+    var out = group('On this browser', '',
+      row('Show the pet on Today', 'Only here. The pet on your Mac stays as it is.', toggle(prefs.show, 'data-set="pet-show"', 'Show the pet on Today')));
+    if (PET.state === 'idle') loadPetCatalog();
+    if (PET.state !== 'ready') {
+      return out + group('Character', '', PET.state === 'error'
+        ? '<p class="cx-set-row">Could not load the pets. <button type="button" class="cx-btn quiet" data-set="pet-retry">Try again</button></p>'
+        : W.skeletonRows(3));
+    }
+    var c = PET.catalog || {}, shipped = c.shipped || [], gallery = c.gallery || [];
+    out += group('Character', 'The pet this browser shows on Today. It does not change the pet on your Mac.',
+      petChoiceRow('mac', 'Same as my Mac', c.mac && c.mac.available ? 'Follows the pet COS Control shows.' : 'Your Mac has no pet set.', c.mac && c.mac.preview, prefs.pet) +
+      shipped.map(function (p) { return petChoiceRow(p.pet, p.name, p.summary || (p.animated ? 'Animated.' : ''), p.preview, prefs.pet); }).join(''));
+    if (gallery.length) {
+      var picked = gallery.filter(function (p) { return p.pet === prefs.pet; })[0];
+      out += '<div class="cx-set-group"><h3 class="cx-set-title">Gallery</h3><p class="cx-set-blurb">' + gallery.length +
+        ' pets from the OpenPets gallery COS Control uses. Each shows as one still picture, as it does on the Mac.' + (picked ? ' In use: ' + esc(picked.name) + '.' : '') + '</p>' +
+        '<input type="search" class="pet-search" id="pet-search" placeholder="Search the gallery" aria-label="Search the gallery" value="' + esc(PET.q) + '">' +
+        '<div class="pet-grid" id="pet-grid">' + gallery.map(function (p) {
+          var on = p.pet === prefs.pet, words = (p.name + ' ' + p.category + ' ' + p.description).toLowerCase();
+          return '<button type="button" class="pet-tile" data-pet="' + esc(p.pet) + '" data-words="' + esc(words) + '" aria-pressed="' + on + '" title="' + esc(p.description || p.name) + '">' +
+            '<img alt="" loading="lazy" src="' + esc(p.preview) + '"><span>' + esc(p.name) + '</span></button>';
+        }).join('') + '</div><p class="cx-set-blurb hidden" id="pet-none">No pets match that search.</p></div>';
+    }
+    return out;
+  }
+  function filterPets() {
+    var q = PET.q.trim().toLowerCase(), grid = $('pet-grid'), shown = 0;
+    if (!grid) return;
+    grid.querySelectorAll('.pet-tile').forEach(function (t) {
+      var hit = !q || (t.getAttribute('data-words') || '').indexOf(q) >= 0;
+      t.classList.toggle('hidden', !hit); if (hit) shown++;
+    });
+    var none = $('pet-none'); if (none) none.classList.toggle('hidden', shown > 0);
+  }
+
   function load(force) {
     if (S.state === 'loading' || (S.data && !force)) return;
     S.state = 'loading';
@@ -67,7 +122,7 @@
     return '<section class="cx-set-cat"><h2 class="cx-col-title">This browser</h2>' +
       group('Appearance', '', themeBtn('system', 'Match this device') + themeBtn('light', 'Light') + themeBtn('dark', 'Dark')) +
       group('Sign-in', '',
-        '<button type="button" class="cx-set-row" id="device-code-btn"><span class="cx-set-text"><span class="cx-set-name">Sign in another device</span><span class="cx-set-desc">Shows a QR for the phone camera, and a code to type.</span></span><span class="chev"></span></button>' +
+        '<button type="button" class="cx-set-row" id="device-code-btn"><span class="cx-set-text"><span class="cx-set-name">Use COS on another phone or browser</span><span class="cx-set-desc">A QR for your iPhone Camera, and a code to type. This is not glasses pairing; pair glasses from COS Control on your Mac.</span></span><span class="chev"></span></button>' +
         '<div id="device-code-panel" class="device-code hidden" aria-live="polite"></div>' +
         '<button type="button" class="cx-set-row" id="copy-link"><span class="cx-set-text"><span class="cx-set-name">Copy link for your phone</span><span class="cx-set-desc" id="tailnet-url">' + esc(W.state.tailnetUrl || 'Checking Tailscale') + '</span></span></button>' +
         '<button type="button" class="cx-set-row" id="sign-out"><span class="cx-set-text"><span class="cx-set-name">Sign out of this browser</span></span></button>' +
@@ -154,6 +209,7 @@
     var d = S.data || {};
     var out = '';
     if (cat.id === 'reach') return reachBody();
+    if (cat.id === 'pet') return petBody() + onMac(cat.mac);
     if (cat.id === 'ai' && d.dp) {
       var p = d.dp.provider || '';
       var name = function (x) { return x === 'subq' ? 'SubQ' : x === 'jev' ? 'Jev' : x || 'Not set'; };
@@ -226,9 +282,10 @@
       browserGroup() +
       (S.state !== 'ready' ? '<div class="cx-list" style="margin-top:18px">' + W.skeletonRows(4) + '</div>' :
         CATEGORIES.filter(function (cat) { return !cat.p2 || p2On(); }).map(function (cat) {
-          return '<section class="cx-set-cat"><h2 class="cx-col-title">' + esc(cat.title) + '</h2><p class="cx-set-blurb">' + esc(cat.summary) + '</p>' + categoryBody(cat) + '</section>';
+          return '<section class="cx-set-cat" id="set-cat-' + cat.id + '"><h2 class="cx-col-title">' + esc(cat.title) + '</h2><p class="cx-set-blurb">' + esc(cat.summary) + '</p>' + categoryBody(cat) + '</section>';
         }).join('')) +
       '<p class="status-line" id="settings-status"></p></div>';
+    if (PET.q) filterPets();
   }
 
   function say(text, isError) { var el = $('settings-status'); if (el) { el.textContent = text; el.classList.toggle('error', !!isError); } }
@@ -236,8 +293,26 @@
   pane.addEventListener('click', function (e) {
     var go = e.target.closest('[data-go]');
     if (go) { var parts = go.getAttribute('data-go').split('/'); return W.go(parts[0], parts.slice(1)); }
+    var pick = e.target.closest('[data-pet]');
+    if (pick && W.setPetPrefs) {
+      W.setPetPrefs({ pet: pick.getAttribute('data-pet') });
+      pane.querySelectorAll('[data-pet]').forEach(function (b) {
+        var on = b === pick; b.setAttribute('aria-pressed', String(on));
+        var v = b.querySelector('.value'); if (v) v.innerHTML = on ? '<span class="check">✓</span>' : '';
+      });
+      W.toast('Pet changed. Today shows it here.');
+      return;
+    }
     var t = e.target.closest('[data-set]');
     if (!t || t.disabled) return;
+    if (t.getAttribute('data-set') === 'pet-show') {
+      var shown = t.getAttribute('aria-checked') === 'true';
+      t.setAttribute('aria-checked', String(!shown));
+      if (W.setPetPrefs) W.setPetPrefs({ show: !shown });
+      W.toast(!shown ? 'Pet on' : 'Pet off');
+      return;
+    }
+    if (t.getAttribute('data-set') === 'pet-retry') { PET.state = 'idle'; return render(); }
     var act = t.getAttribute('data-set');
     if (act === 'refresh') { S.data = null; S.state = 'idle'; load(true); return render(); }
     if (act === 'provider') {
@@ -273,6 +348,15 @@
     }
   });
 
+  // A gallery picture that will not load shows the pet's name alone, never a broken image.
+  pane.addEventListener('error', function (e) {
+    var img = e.target;
+    if (img && img.tagName === 'IMG' && img.closest && img.closest('.pet-tile, .pet-choice')) img.classList.add('hidden');
+  }, true);
+  pane.addEventListener('input', function (e) {
+    if (e.target && e.target.id === 'pet-search') { PET.q = e.target.value; filterPets(); }
+  });
+
   // Number, time, day and steer fields save when they change (a number is clamped by the server, then shown as saved).
   pane.addEventListener('change', function (e) {
     var f = e.target && e.target.closest ? e.target.closest('[data-p2]') : null;
@@ -287,6 +371,20 @@
   });
 
   W.registerPane('settings', {
-    load: function () { load(false); render(); }
+    load: function (args) {
+      load(false); render();
+      // "Change pet" on Today opens Settings at the Pet section.
+      if (args && args[0] === 'pet') {
+        var tries = 0;
+        (function scroll() {
+          var el = document.getElementById('set-cat-pet');
+          // Land on the pet in use once the catalog has drawn; until then, the Pet section's top.
+          var chosen = el && el.querySelector('[data-pet][aria-pressed="true"]');
+          if (chosen) { chosen.scrollIntoView({ block: 'center' }); return; }
+          if (el && tries === 0) el.scrollIntoView({ block: 'start' });
+          if (++tries < 40) setTimeout(scroll, 150);
+        })();
+      }
+    }
   });
 })();

package/server/web-control/panes/today-actions.css

@@ -0,0 +1,109 @@
+/* COS Control Web: Today as a place to act (panes/today-actions.js). A bottom sheet on the folded phone, a side sheet
+   from 600 px. Built from the page's own tokens and pieces: the composer, .btn, .link-btn, .cx-btn, the reader's
+   activity rows (.sx-act-*) and boxes (.sx-box), and the question cards (questions.css). */
+
+/* The Today rows that open it: whole-row buttons. */
+.need-open { display: block; width: 100%; text-align: left; color: inherit; }
+.need-open .need-top { display: flex; }
+.need-open .need-foot { display: flex; }
+.intake-row { width: 100%; text-align: left; color: inherit; align-items: center; min-height: 40px; }
+.intake-row::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--grey); border-bottom: 2px solid var(--grey); transform: rotate(-45deg); flex: none; opacity: 0.6; margin-left: 2px; }
+.intake-row .intake-meeting { flex: 1; }
+
+/* The page behind does not scroll. Only the root: hidden on body too would make body a scroll container and unstick the rail. */
+html.ta-open { overflow: hidden; }
+
+.ta-layer {
+  position: fixed; left: 0; right: 0; z-index: 45;
+  /* The visible viewport (app sets these from visualViewport): the keyboard never covers the reply box. */
+  top: var(--ta-vt, 0px); height: var(--ta-vh, 100dvh);
+  --run-green: rgb(56, 145, 99);
+}
+:root[data-theme='dark'] .ta-layer { --run-green: rgb(108, 207, 143); }
+@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ta-layer { --run-green: rgb(108, 207, 143); } }
+.ta-layer[hidden] { display: none; }
+.ta-scrim { position: absolute; inset: 0; background: rgba(23, 18, 14, 0.45); touch-action: none; animation: fade 160ms ease; }
+
+.ta-sheet {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  /* A strip of Today stays in view above it: context, and somewhere to tap outside. */
+  max-height: calc(100% - var(--safe-top) - 56px);
+  display: flex; flex-direction: column;
+  background: var(--page); color: var(--ink);
+  border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
+  padding-left: var(--safe-left); padding-right: var(--safe-right);
+  outline: none;
+  animation: ta-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ta-grip { flex: none; width: 36px; height: 5px; border-radius: 3px; background: var(--panel-border); margin: 8px auto 0; }
+.ta-head { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 6px var(--gutter) 4px; }
+.ta-title { flex: 1; min-width: 0; margin: 8px 0 0; font: 500 22px/1.2 var(--display); letter-spacing: -0.005em; overflow-wrap: anywhere; }
+.ta-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border-radius: 12px; color: var(--ink); }
+.ta-x .icon { width: 20px; height: 20px; stroke-width: 1.8; }
+.ta-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px var(--gutter) 16px; }
+.ta-foot { flex: none; padding: 10px var(--gutter) calc(var(--safe-bottom) + 10px); border-top: 1px solid var(--row-border); background: var(--page); }
+.ta-foot:empty { display: none; }
+.ta-foot .composer { margin-top: 0; position: static; }
+.ta-foot .status-line { margin: 6px 4px 0; min-height: 0; }
+.ta-foot .status-line:empty { display: none; }
+.ta-foot .sx-box, .ta-foot .sx-park { margin: 0 0 10px; }
+
+.ta-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; color: var(--sub); font-size: 14.5px; line-height: 1.4; }
+.ta-note { margin: 6px 0 0; color: var(--hot); font-size: 13.5px; line-height: 1.4; }
+.ta-card-line { margin: 0 0 8px; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
+.ta-quote { margin: 8px 0 10px; padding-left: 12px; border-left: 2px solid var(--btn-border); font: italic 400 16px/1.42 var(--display); color: var(--ink); overflow-wrap: anywhere; }
+.ta-ask-line { margin: 8px 0 4px; font-size: 14.5px; font-weight: 600; color: var(--hot); }
+.ta-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
+.ta-q { display: grid; gap: 12px; margin: 8px 0 12px; }
+.ta-q[hidden] { display: none; }
+.ta-activity { margin: 8px 0 4px; }
+.ta-activity .sx-act-state { margin-top: 0; }
+.ta-act-prompt { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
+.ta-act-tail { margin-top: 6px; display: flex; flex-direction: column; }
+.ta-last { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--panel-border); font-size: 15px; line-height: 1.5; }
+.ta-last-head { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--sub); }
+.ta-last-text.clamped { max-height: 18em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
+
+/* From today's meetings */
+.ta-list { margin-top: 2px; }
+.ta-group { margin: 18px 0 0; font: 600 15px/1.3 var(--body); color: var(--ink); overflow-wrap: anywhere; }
+.ta-sugg { padding: 12px 0 10px; border-top: 1px solid var(--row-border); }
+.ta-group + .ta-sugg { border-top: 0; padding-top: 8px; }
+.ta-sugg-text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
+.ta-sugg-src { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--sub); overflow-wrap: anywhere; }
+.ta-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin-top: 6px; }
+.ta-acts .btn.small { min-height: 44px; padding: 0 16px; }
+.ta-acts .link-btn { font-size: 14.5px; }
+.link-btn.quiet { color: var(--sub); font-weight: 500; }
+.ta-wait { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--sub); }
+.ta-done { font-size: 14.5px; font-weight: 600; color: var(--ink); }
+.ta-sugg.settled { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
+.ta-sugg.settled > p { flex-basis: 100%; }
+.ta-sugg.settled .ta-sugg-text { color: var(--sub); font-weight: 500; }
+
+/* Unfolded Duo, tablets, desktop: a sheet at the right edge, Today still in view beside it. */
+@media (min-width: 600px) {
+  .ta-sheet {
+    left: auto; top: 0; width: clamp(360px, 60vw, 480px); max-height: none;
+    border-radius: 20px 0 0 20px; box-shadow: -16px 0 48px rgba(0, 0, 0, 0.22);
+    animation-name: ta-slide;
+  }
+  .ta-grip { display: none; }
+  .ta-head { padding-top: calc(var(--safe-top) + 14px); }
+  .ta-foot { padding-bottom: calc(var(--safe-bottom) + 14px); }
+}
+@keyframes ta-rise { from { transform: translateY(32px); opacity: 0.6; } }
+@keyframes ta-slide { from { transform: translateX(32px); opacity: 0.6; } }
+/* Dismiss armed: the second tap removes it (no Undo on this server). */
+.link-btn.quiet.armed { color: var(--hot); font-weight: 600; }
+/* Needs you: "Show N more", "can wait until tomorrow" and a source that could not be read (app.js renderNeeds). */
+.need-more { display: block; width: 100%; text-align: left; padding: 12px 16px; min-height: 44px; border-top: 1px solid var(--row-border); color: var(--accent); font-weight: 600; font-size: 15px; }
+.need-more.need-failed { color: var(--hot); font-weight: 500; }
+/* Next up: Prep me and Open meeting (app.js renderNext). */
+.next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 0 16px 14px; }
+.next-actions:empty { display: none; }
+.next-actions .btn.small { min-height: 44px; }
+/* The Ask sheet's File to Work inbox result, on its own row (app.js fileNoteHtml). */
+.nav-row .note.file-error { color: var(--hot); white-space: normal; }
+/* Running card when the session list could not be read (app.js renderRunning). */
+.run-more.run-failed { color: var(--run-open); }