@oharness/server 0.9.2 → 0.10.0

package/dist/page/style.js

@@ -32,32 +32,105 @@ code,pre,.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
 
 /* sidebar */
 aside{
-  width:236px;flex:0 0 236px;background:var(--panel);
-  display:flex;flex-direction:column;overflow:hidden;transition:flex-basis .18s,width .18s;
+  --side-w:296px;width:var(--side-w);flex:0 0 var(--side-w);
+  display:flex;flex-direction:column;align-items:flex-end;overflow:hidden;
+}
+/* Folding, the sidebar narrows while its contents keep their width, pinned
+   to its right edge, so they slide out to the left behind the frame rather
+   than squeezing; the tab strip's inset grows by as much as the sidebar
+   loses, so the first tab glides to its place beside the toggle. Only once a
+   hand has touched the toggle: a page opened folded starts folded. */
+#side-top,#side-body{width:var(--side-w);flex-shrink:0}
+body.nav-anim>aside{transition:width .26s cubic-bezier(.2,0,0,1),flex-basis .26s cubic-bezier(.2,0,0,1)}
+body.nav-anim #tabs{transition:padding-left .26s cubic-bezier(.2,0,0,1)}
+body.nav-anim .wordmark{transition:opacity .14s}
+body.nav-collapsed .wordmark{opacity:0}
+@media (prefers-reduced-motion:reduce){body.nav-anim>aside,body.nav-anim #tabs,body.nav-anim .wordmark{transition:none}}
+/*
+ * A frame with the panel as a card inside it.
+ *
+ * The top bar and the rail are one L in the window's own colour, --frame, and
+ * the panel and the page sit inside it. It takes a third colour: a top bar
+ * over the sidebar in either of the other two runs into the surface below it
+ * in that colour — a grey one boxed the white rail in, a white one ran on
+ * into the page. The panel is a card set into the frame, rounded all round
+ * and clear of the page by a margin. The traffic lights sit on the frame, one
+ * colour, where the rail alone is too narrow to hold them.
+ */
+#side-top{height:36px;flex:0 0 36px;background:var(--frame);display:flex;align-items:center;overflow:hidden}
+/* Just past the toggle, which ends at 40px on the web and at 108px beside
+   the traffic lights, and fixed there, so the mark stays in the corner when
+   the sidebar folds and only the name goes with it. */
+.brand{position:fixed;z-index:30;top:0;left:48px;height:36px;display:flex;align-items:center;gap:8px;white-space:nowrap;pointer-events:none}
+body.inset-titlebar .brand{left:116px}
+body.inset-titlebar #side-top{-webkit-app-region:drag}
+#side-body{flex:1 1 auto;display:flex;min-height:0;background:var(--frame)}
+/*
+ * Two columns: a rail of the app's places, and the panel of the work.
+ *
+ * The rail is the frame and the panel a card in it, so the two read as
+ * different surfaces without a line between them.
+ */
+#rail{
+  width:52px;flex:0 0 52px;background:var(--frame);display:flex;flex-direction:column;
+  align-items:center;padding:8px 0 10px;gap:6px;overflow:hidden;
+}
+#rail #nav{padding:0;gap:4px;align-items:center}
+#rail .nav-item{width:36px;height:36px;padding:0;justify-content:center;border-radius:9px;color:var(--dim)}
+#rail .nav-item:hover{color:var(--fg)}
+#rail .nav-item.active{color:var(--fg)}
+/* Drawn at 18px on the 16 grid, the shared 1.5 stroke would render at 1.7px
+   and read heavier than every other icon on the page; 1.2 lands near 1.35. */
+#rail .nav-item .ico{width:18px;height:18px;stroke-width:1.2}
+/* The panel's icons follow at their own 14-16px, so the rail and the panel
+   beside it draw at one weight. Matched on the attribute, so the mark keeps its 2.5. */
+#side-panel svg[stroke-width="1.5"]{stroke-width:1.25}
+#rail .nav-item>span{display:none}
+.rail-tip{
+  position:fixed;z-index:80;transform:translateY(-50%);padding:4px 9px;border-radius:7px;
+  background:var(--accent);color:var(--bg);font-size:12px;line-height:1.4;white-space:nowrap;
+  pointer-events:none;opacity:0;transition:opacity .08s;
+}
+.rail-tip.on{opacity:1}
+#side-panel{
+  width:236px;flex:0 0 236px;background:var(--panel);border-radius:12px;margin:0 8px 8px 0;
+  display:flex;flex-direction:column;overflow:hidden;
+}
+#side-new{padding:0 8px 2px;display:flex;align-items:center;gap:2px}
+#side-new #new{flex:1;min-width:0}
+#side-search{
+  display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border:0;border-radius:6px;
+  background:transparent;color:var(--dim);cursor:pointer;padding:0;
 }
-/* Folded away on a desktop. Zero width rather than display:none, for the
-   slide, and so nothing inside has to be rebuilt when it comes back. */
+#side-search:hover{background:var(--hover);color:var(--fg)}
+#side-search .ico-sm{width:16px;height:16px}
+/* Folded away on a desktop, the whole sidebar goes, rail and all, and the
+   page has the window: keeping the rail left a strip of chrome and pushed the
+   tabs a rail's width plus the traffic lights in from the edge. */
 body.nav-collapsed>aside{width:0;flex-basis:0}
-#nav-collapse,#nav-expand{
-  width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--dim);
-  cursor:pointer;padding:0;display:grid;place-items:center;flex:0 0 auto;-webkit-app-region:no-drag;
-}
-#nav-collapse{margin-left:auto}
-#nav-collapse:hover,#nav-expand:hover{background:var(--hover);color:var(--fg)}
-#nav-collapse svg,#nav-expand svg{width:16px;height:16px;display:block;shape-rendering:geometricPrecision}
-#nav-expand{display:none;position:absolute;z-index:5;top:7px;left:8px}
-body.nav-collapsed #nav-expand{display:grid}
-body.nav-collapsed #tabs{padding-left:44px}
-/* The traffic lights sit where the sidebar's corner was; step past them. */
-body.inset-titlebar.nav-collapsed #nav-expand{left:80px}
-body.inset-titlebar.nav-collapsed #tabs{padding-left:116px;-webkit-app-region:drag}
-body.inset-titlebar.nav-collapsed #tabs>*{-webkit-app-region:no-drag}
-aside header{padding:15px 14px 8px;display:flex;gap:8px;align-items:center}
-/* The desktop shell hides the title bar, so on macOS the traffic lights float
- * over this corner. The wordmark moves below them, and the strip they sit in
- * becomes the window's drag handle — without it a title-bar-less window has
- * nothing to grab. */
-body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
+/* In the top bar, at the same spot folded or not, so the click that folded the
+   sidebar can bring it straight back. On a desktop it steps past the traffic
+   lights (14-74px, set in desktop/main.js). */
+#nav-toggle{
+  position:fixed;z-index:30;top:4px;left:12px;width:28px;height:28px;border:0;border-radius:7px;
+  background:transparent;color:var(--dim);cursor:pointer;padding:0;
+  display:grid;place-items:center;-webkit-app-region:no-drag;
+}
+#nav-toggle:hover{background:var(--hover);color:var(--fg)}
+#nav-toggle svg{width:16px;height:16px;display:block;shape-rendering:geometricPrecision}
+body.inset-titlebar #nav-toggle{left:80px}
+body.shelf-full #nav-toggle{display:none}
+/* The window has no title bar, so the strip's empty stretch is its handle.
+   Folded, the strip is the whole top bar and starts past the mark beside the
+   toggle: 66px on the web, 134px beside the traffic lights. */
+body.inset-titlebar #tabs{-webkit-app-region:drag}
+body.inset-titlebar #tabs>*{-webkit-app-region:no-drag}
+body.nav-collapsed #tabs{padding-left:74px}
+body.inset-titlebar.nav-collapsed #tabs{padding-left:142px}
+/* The name is in the top bar on a wide screen, so the panel's header is only
+   the phone drawer's, where it carries the name and the close button. */
+aside header{display:none;padding:8px 14px;min-height:44px;gap:8px;align-items:center}
+#side-panel{padding-top:8px}
 .mark{width:18px;height:18px;color:var(--fg);opacity:.85;flex:0 0 auto}
 .mark svg{width:18px;height:18px;display:block}
 /* Slightly tightened and a touch heavier than body text, which is what makes
@@ -95,6 +168,10 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 .fold .ico-sm{width:16px;height:16px;flex:0 0 auto;opacity:.5}
 .fold.open .ico-sm,.fold:hover .ico-sm{opacity:.9}
 .fold-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* A worktree hangs under the project it came from: indented by its icon's
+ * width, no rule or outline to say so. */
+.fold.wt{padding-left:24px;color:var(--dim)}
+.fold.wt.open,.fold.wt:hover{color:var(--fg)}
 /* The routine group's run count, where a project header keeps its actions. */
 .fold .count{flex:0 0 auto;font-size:11px;color:var(--dim);padding-right:4px}
 /* A gap between projects, but not above the first one. The selector names the
@@ -106,9 +183,13 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
    edge, where the count and the ⋯ already live and a third thing would crowd
    them; dim, because it marks a row rather than asking for attention. */
 .pin-mark{
-  width:11px;height:11px;flex:0 0 auto;margin-left:5px;opacity:.5;
-  vertical-align:-1px;display:inline-block;
+  flex:0 0 auto;margin-left:3px;padding:2px;border-radius:4px;opacity:.5;
+  display:inline-grid;place-items:center;cursor:pointer;
 }
+.pin-mark svg{width:11px;height:11px;display:block}
+/* It is the unpin control, so it answers the pointer like one: full ink and a
+   fill on hover, the same as the ⋯ beside it. */
+.pin-mark:hover,.pin-mark:focus-visible{opacity:1;background:var(--sel);outline:none}
 /* Dragging: the row being carried fades, and the one under the pointer grows
    the edge it would be dropped against. A line on the row rather than a
    floating element, because this list is rebuilt on every repaint and a
@@ -191,7 +272,7 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
    already had two rules in it and a third would have made a list of five
    entries look like three lists. */
 .row-menu .menu-head{
-  padding:9px 10px;margin-bottom:4px;border-radius:8px;background:var(--field);
+  padding:12px 12px 11px;margin-bottom:6px;border-radius:12px;background:var(--field);
 }
 /* A section label, not a surface: the fill belongs to the account's facts
    above, and on a one-word caption it read as a second card pressed against
@@ -199,6 +280,25 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 .row-menu .menu-head.menu-section{
   margin:10px 0 2px;padding:4px 10px;background:transparent;
 }
+/* The workspaces: a heading and its choices on one faint surface — lighter
+   than the account card above it, so the card stays the menu's one solid
+   thing and this reads as a quiet group rather than a second card. Inside,
+   the workspace in use carries a stronger fill, and hover sits between. */
+.row-menu .menu-choices{margin:8px 0 4px;padding:2px 4px 4px;border-radius:12px;background:color-mix(in srgb,var(--fg) 2%,transparent)}
+.row-menu .menu-choices .menu-head.menu-section{margin:4px 0 0;padding-left:6px}
+.row-menu .menu-choices .menu-item{border-radius:9px}
+.row-menu .menu-choices .menu-item:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
+.row-menu .menu-choices .menu-item.on{background:color-mix(in srgb,var(--fg) 6%,transparent)}
+.row-menu .menu-choices .menu-item.on .menu-label{font-weight:500}
+.row-menu .menu-choices .menu-section-action:hover,.row-menu .menu-choices .menu-section-action:focus-visible{background:color-mix(in srgb,var(--fg) 5%,transparent)}
+/* A section heading with its one action at the right: the label keeps the
+   caption type, the action does not — it is a button, not part of the name. */
+.row-menu .menu-section-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:4px}
+.menu-section-action{
+  height:22px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--dim);
+  font:inherit;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;
+}
+.menu-section-action:hover,.menu-section-action:focus-visible{background:var(--hover);color:var(--fg);outline:none}
 .menu-head-main{font-size:14px;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
 .menu-head-sub{margin-top:2px;font-size:12px;color:var(--dim)}
 /* The billing card borrows .menu-head's surface but not its caption type: the
@@ -263,6 +363,15 @@ body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
 .row-menu .danger .menu-key{color:var(--dim)}
 /* A rule, not a gap: the group below it is the one that cannot be undone. */
 .row-menu .menu-sep{height:1px;margin:5px 8px;background:var(--line)}
+/* The + menu's groups are told apart by space alone: no rule between them,
+   the same way nothing in it is outlined. */
+#attach-picker .menu-sep{height:10px;margin:0;background:none}
+/* Each group of the + menu opens with its own heading; the ones after the
+   first get room above them, which is what sets the groups apart. */
+#attach-picker .menu-head:not(:first-child){padding-top:12px}
+/* Tall enough for all three groups at once; the list scrolls only on a short
+   window, not on every one. */
+#attach-picker .menu-body{max-height:min(72vh,560px)}
 /* Sized from the title it stands in for, so the row does not jump when a
    rename starts. */
 .session .title-edit{
@@ -379,27 +488,19 @@ main{flex:1;display:flex;flex-direction:column;min-width:0}
  * Same two shapes as the connector list: the vendor's own icon when the
  * server has one, and a lettered tile when it does not. Sized to the row —
  * the type is 13px, so the mark is 15px and not the 28px tile a card gets. */
-/* One block per vendor, whatever the vendor ships.
+/* The mark as the vendor drew it, on nothing.
  *
- * A column of these is scanned by its left edge, and the edge has to be the
- * same one every time. Left alone, it is not: a vendor shipping a tile fills
- * its square, a vendor shipping bare ink covers half of it, and one shipping
- * a thin outline covers less than that — the eye finds no common edge and
- * reads the lighter rows as hanging off the line, even where the boxes are
- * centred on the text to the pixel.
- *
- * So a mark that did not bring a background is given one: the same faint
- * fill, the same radius, the same inset. A mark that did bring one keeps it
- * and fills the box, because drawing a second shape around a shape is the
- * thing this is trying to avoid. Either way the block is identical and the
- * ink inside it is the vendor's business. */
-.vmark{width:15px;height:15px;flex:0 0 auto;border-radius:4px;object-fit:contain;
-  padding:1.5px;box-sizing:border-box;background:var(--sel)}
-.vmark.filled{padding:0;background:none}
+ * A faint tile under every bare mark once gave the column a common edge, but
+ * it also shrank the ink to two thirds of the box and put a grey square
+ * beside every name — in a list that is all one vendor, a column of the same
+ * grey squares. The box is still the same size on every row, so the marks
+ * still line up; the ink now fills it. A vendor that ships its own tile keeps
+ * it (.filled), since that tile is its mark. */
+.vmark{width:16px;height:16px;flex:0 0 auto;border-radius:3px;object-fit:contain;box-sizing:border-box}
 /* The fallback, and the reason a missing icon is not a broken row: a lettered
    tile in a colour of its own still tells two vendors apart at a glance. */
 .vmono{
-  width:15px;height:15px;flex:0 0 auto;border-radius:4px;box-sizing:border-box;
+  width:16px;height:16px;flex:0 0 auto;border-radius:4px;box-sizing:border-box;
   display:grid;place-items:center;color:#fff;
   font-size:9px;font-weight:600;letter-spacing:0;text-transform:uppercase;
 }
@@ -408,8 +509,7 @@ main{flex:1;display:flex;flex-direction:column;min-width:0}
 /* Typed as svg.vglyph so it outranks the .ico-sm every drawn icon carries:
    .6 is right for a chrome glyph and too faint for a vendor's mark. Ours is
    bare strokes, so it takes the same block as any other bare mark. */
-svg.vglyph{width:15px;height:15px;opacity:1;
-  padding:1.5px;box-sizing:border-box;border-radius:4px;background:var(--sel)}
+svg.vglyph{width:16px;height:16px;opacity:1;box-sizing:border-box}
 /* Black-on-transparent is what a good half of these vendors ship, and in the
    dark theme that is a black square on a black row. Inverted only where the
    bytes were measured to be exactly that. */
@@ -435,9 +535,6 @@ details.provider>summary .vmark,details.provider>summary .vmono,details.provider
 .pp-item .vmark,.pp-item .vmono,.pp-item .vglyph{
   width:20px;height:20px;border-radius:5px;font-size:11px;
 }
-details.provider>summary .vmark,.pp-item .vmark,
-details.provider>summary .vglyph,.pp-item .vglyph{padding:2.5px}
-details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
 .menu-head{
   padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;
   text-transform:uppercase;color:var(--dim);
@@ -498,18 +595,45 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
   justify-content:flex-end;flex-wrap:wrap;
 }
 /*
- * The context meter: how much of the model's window this session is using.
- *
- * Its own track colour rather than --line. Every other neutral token here is a
- * hairline at 6-10% alpha, which at 64x4 pixels disappears into the background
- * in both schemes — what was left read as a stray green dash rather than a bar
- * with something still to fill. The fill itself is set from the value (green,
- * then warn, then err) in applyState.
+ * The context meter: how much of the model's window this session is using,
+ * as a ring that fills clockwise. A ring rather than a bar because it sits in
+ * a row of words and has to read at a glance at the size of one; the numbers
+ * are in its tooltip. The sweep is a conic fill and the hole a mask, so there
+ * is no stroke anywhere. Its own track colour rather than --line, which at
+ * this size disappears into the background. --ctx-pct and --ctx-fill are set
+ * from the value in applyState.
  */
-#ctx{width:64px;height:4px;background:var(--track);border-radius:2px;overflow:hidden}
-#ctx i{display:block;height:100%;width:0;background:var(--ok);transition:width .3s}
+#ctx{
+  width:14px;height:14px;border-radius:50%;flex:0 0 auto;cursor:default;
+  background:conic-gradient(var(--ctx-fill,var(--brand)) calc(var(--ctx-pct,0) * 1%),var(--track) 0);
+  -webkit-mask:radial-gradient(circle,transparent 4.2px,#000 4.6px);
+  mask:radial-gradient(circle,transparent 4.2px,#000 4.6px);
+}
+#ctx{border:0;padding:0}
+/* Focus as a change of size, not a ring: this design draws no outlines. */
+#ctx{transition:transform .12s}
+#ctx:focus-visible,#ctx[aria-expanded="true"]{outline:none;transform:scale(1.2)}
+#ctx:hover{transform:scale(1.2)}
+/* The context panel. Every part is a strength of the brand colour: the two
+   things the model is given every turn lighter, the conversation full, as it
+   is the part a person can do something about. */
+:root{--ctx-system:color-mix(in srgb,var(--brand) 35%,transparent);--ctx-tools:color-mix(in srgb,var(--brand) 65%,transparent);--ctx-messages:var(--brand)}
+.ctx-panel{width:300px;min-width:0;padding:14px 14px 8px;gap:10px;font-size:12.5px}
+.ctx-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
+.ctx-title{font-weight:600;color:var(--fg)}
+.ctx-total{color:var(--dim);font-variant-numeric:tabular-nums}
+.ctx-bar{position:relative;display:flex;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
+.ctx-bar i{display:block;height:100%;flex:0 0 auto}
+.ctx-tick{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--warn)}
+.ctx-rows{display:flex;flex-direction:column;gap:5px}
+.ctx-row{display:flex;align-items:center;gap:8px}
+.ctx-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
+.ctx-label{flex:1;color:var(--fg)}
+.ctx-value{color:var(--dim);font-variant-numeric:tabular-nums}
+.ctx-notes{display:flex;flex-direction:column;gap:2px;color:var(--dim);font-size:11.5px;line-height:1.5}
+.ctx-compact{margin:0 -8px}
 #ctx,#ctxtext{display:none}
-#meta.has-ctx #ctx,#meta.has-ctx #ctxtext{display:block}
+#meta.has-ctx #ctx{display:block}
 
 /*
  * Over the transcript, not over the whole window.
@@ -518,31 +642,43 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
  * is in front. Spanning both left a band of empty chrome above the drawer that
  * belonged to neither.
  *
- * The strip is the shelf the tabs stand on, in the sidebar's grey, and the
- * front tab is cut from the page under it — the shape every browser uses.
- * It used to be the other way round: a transparent strip on the white
- * transcript with the front tab as a grey pill, so the row read as part of
- * the conversation rather than as the chrome above it. No bottom padding,
- * or a grey line would sit between the front tab and the page it is part of.
+ * The strip is the top of the frame, at #side-top's height, so one bar runs
+ * across the window, and the front tab is cut from the page under it — the
+ * shape every browser uses. No bottom padding, or a line of frame would sit
+ * between the front tab and the page it is part of; no left padding, so the
+ * first tab's edge is the page's.
  */
 #tabs{
-  display:flex;align-items:center;gap:2px;padding:6px 12px 0;overflow-x:auto;flex:0 0 auto;
-  background:var(--panel);
+  display:flex;align-items:flex-end;gap:2px;height:36px;padding:0 12px 0 0;overflow-x:auto;flex:0 0 auto;
+  background:var(--frame);
 }
 #tabs:empty{display:none}
+/* A scrollbar here takes its height out of the strip and lifts every tab off
+   the page, and a hovered tab's buttons were enough to bring one on. Tabs
+   shrink first, as a browser's do, and past that the strip still scrolls by
+   wheel or trackpad, only without the bar. */
+#tabs{scrollbar-width:none}
+#tabs::-webkit-scrollbar{display:none}
 .tab{
-  display:flex;align-items:center;gap:7px;max-width:230px;height:30px;padding:0 6px 0 10px;
+  display:flex;align-items:center;gap:7px;max-width:230px;min-width:72px;height:30px;padding:0 14px;
   border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--dim);
-  font:inherit;font-size:12.5px;cursor:pointer;flex:0 0 auto;
-}
-.tab:hover{background:var(--hover);color:var(--fg)}
+  font:inherit;font-size:12.5px;cursor:pointer;flex:0 1 auto;
+}
+/* The tab under the pointer or in front keeps its width, so its buttons fit
+   and it is the others that give way. */
+.tab:hover,.tab:focus-within,.tab.on{flex-shrink:0}
+/* Hovered, a tab lifts halfway toward the page it would become, the way a
+   browser's do, rather than sinking into a darker grey the front tab never
+   is. Mixed from --bg so the dark theme lifts the same way. */
+.tab:hover{background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--fg)}
 .tab.on{background:var(--bg);color:var(--fg)}
-.tab .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tab-page .ico-sm{width:14px;height:14px;opacity:.75}
+.tab .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 /* Which project a tab is in, ahead of its title. Set quieter than the title,
    which is still what identifies it. */
 .tab .where{
   max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
-  font-size:11px;opacity:.6;flex:0 0 auto;
+  font-size:11px;opacity:.6;flex:0 1 auto;min-width:0;
 }
 .tab .where::after{content:"/";padding-left:5px;opacity:.5}
 .tab .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
@@ -556,6 +692,10 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
    transparent — a transparent button still holds its space. A running
    browser keeps its button, because its dot is what says so. */
 .tab:hover .x,.tab:focus-within .x{display:grid}
+/* Even padding while the title is alone, as a label is set; the right side
+   gives some back when a button comes in, so the button sits near the edge
+   and the tab grows by less. */
+.tab:hover,.tab:focus-within,.tab:has(.tab-browser.running){padding-right:6px}
 /* The tab's browser button's size. Much smaller and the 1.5px strokes thin
    below a pixel and blur; the full 16px outweighs the tab's own text. */
 .tab .x svg{width:14px;height:14px}
@@ -571,7 +711,7 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
 .tab:hover .tab-browser,.tab.on .tab-browser,.tab-browser.running{opacity:.62}
 .tab-browser:hover,.tab-browser.on{opacity:1;background:var(--sel)}
 .tab-browser svg{width:14px;height:14px}
-.tab-browser i{display:none;position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 1.5px var(--panel)}
+.tab-browser i{display:none;position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 1.5px var(--frame)}
 .tab.on .tab-browser i{box-shadow:0 0 0 1.5px var(--bg)}
 .tab-browser.running i{display:block}
 #tab-add{
@@ -774,6 +914,83 @@ body.browser-resizing #browser-pane{transition:none}
 }
 #browser-pane.live #browser-frame{cursor:crosshair}
 .browser-idle{margin:auto;text-align:center;max-width:32ch}
+/* The Computer card: the window the agent is working in, floating over the
+   conversation's top-right corner while a turn works in it. Filled surfaces
+   and a shadow, no outline — the menus' elevation, since it sits above the
+   page the same way. The picture is letterboxed; the agent's cursor and its
+   click ripples sit over it in the conversation's accent. */
+#computer-float{
+  position:absolute;z-index:30;top:52px;right:16px;width:340px;
+  transition:width .18s ease;cursor:grab;touch-action:none;
+}
+#computer-float[hidden]{display:none}
+/* Larger, to read the window rather than glance at it. */
+#computer-float.big{width:min(62%,880px)}
+#computer-float.dragging{transition:none;user-select:none;cursor:grabbing}
+/* The picture is the card: its corners, its shadow, and the window's own
+   proportions (set from the stream in computer.ts), so nothing frames it —
+   no bar above it, no fill around it, no bands at its sides. */
+#computer-body{
+  aspect-ratio:16/10;max-height:70vh;position:relative;overflow:hidden;border-radius:12px;
+  background:var(--field);box-shadow:0 1px 2px #0000001a,0 10px 30px #00000033;
+}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #computer-body{box-shadow:0 1px 2px #0000004d,0 10px 30px #00000080}}
+:root[data-theme="dark"] #computer-body{box-shadow:0 1px 2px #0000004d,0 10px 30px #00000080}
+/* Over the picture: a pill naming the app on the left, round buttons on the
+   right. Translucent dark in both themes, since what is under them is
+   somebody else's window, light or dark. The buttons come up with the
+   pointer, so a card nobody is reaching for is all picture. */
+#computer-head{
+  position:absolute;z-index:2;top:8px;left:8px;right:8px;
+  display:flex;align-items:center;gap:6px;pointer-events:none;
+}
+#computer-label{
+  display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;margin-right:auto;
+  height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;color:#fff;
+  background:#000000a6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
+}
+#computer-live{width:6px;height:6px;flex:0 0 auto;display:grid;place-items:center}
+#computer-live[hidden]{display:none}
+#computer-live i,#computer-pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:computer-pulse 1.6s ease-in-out infinite}
+#computer-pill i{width:7px;height:7px}
+@keyframes computer-pulse{50%{opacity:.35}}
+#computer-where{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+#computer-head button{
+  pointer-events:auto;width:28px;height:28px;padding:0;border:0;border-radius:50%;flex:0 0 auto;
+  display:grid;place-items:center;cursor:pointer;color:#fff;
+  background:#000000a6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
+  opacity:0;transition:opacity .15s,background .15s;
+}
+#computer-float:hover #computer-head button,#computer-head button:focus-visible{opacity:1}
+@media (hover:none){#computer-head button{opacity:1}}
+#computer-head button:hover{background:#000000d9}
+#computer-head button svg{width:13px;height:13px}
+#computer-stop:hover{background:#c62828e6!important}
+#computer-stop svg{width:11px!important;height:11px!important}
+.computer-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
+.computer-cursor{position:absolute;left:0;top:0;width:22px;height:22px;opacity:0;pointer-events:none;transition:transform .26s cubic-bezier(.3,.7,.2,1),opacity .3s}
+.computer-cursor.on{opacity:1}
+.computer-cursor svg{width:22px;height:22px;display:block;filter:drop-shadow(0 1px 2px #00000059)}
+.computer-cursor path{fill:var(--brand);stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
+.computer-ring{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:color-mix(in srgb,var(--brand) 35%,transparent);pointer-events:none;animation:computer-ring .5s ease-out forwards}
+@keyframes computer-ring{from{transform:scale(.3);opacity:.9}to{transform:scale(1.5);opacity:0}}
+.computer-empty{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--dim);font-size:12.5px}
+.computer-empty[hidden],.computer-empty:empty{display:none}
+/* Folded: where it is working, one click from the card again. */
+#computer-pill{
+  position:absolute;z-index:30;top:52px;right:16px;max-width:280px;
+  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;
+  border:0;border-radius:999px;background:var(--panel);color:var(--fg);font:inherit;font-size:12px;cursor:pointer;
+  box-shadow:0 1px 2px #0000000f,0 4px 14px #0000001f;
+}
+#computer-pill[hidden]{display:none}
+#computer-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#computer-pill:hover{background:var(--hover)}
+.att.computer .n.clickable{cursor:pointer}
+@media (max-width:900px){
+  #computer-float,#computer-float.big{width:calc(100% - 24px);right:12px}
+}
+.embed #computer-float,.embed #computer-pill{display:none!important}
 /* One column at a time on a narrow window: two would leave neither readable. */
 #browser-hide .ico-x{display:none}
 #browser-scrim{display:none}
@@ -846,7 +1063,16 @@ body.panelled #composer,body.panelled #jump,body.panelled #changes-btn{display:n
 #explorer-actions button:hover{background:var(--hover);color:var(--fg)}
 #explorer-actions svg{width:15px;height:15px}
 #explorer-body{flex:1;display:flex;min-height:0}
-#explorer-tree{width:var(--explorer-tree-width,min(40%,260px));flex:0 0 auto;overflow:auto;padding:2px 6px 12px}
+#explorer-side{width:var(--explorer-tree-width,min(40%,260px));flex:0 0 auto;display:flex;flex-direction:column;min-height:0}
+#explorer-find{
+  display:flex;align-items:center;gap:6px;margin:2px 8px 6px;padding:0 8px;height:30px;border-radius:8px;
+  background:var(--hover);color:var(--dim);cursor:text;
+}
+#explorer-find svg{width:13px;height:13px;flex:0 0 auto}
+#explorer-q{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font:inherit;font-size:12.5px;padding:0}
+#explorer-q::-webkit-search-cancel-button{cursor:pointer}
+#explorer-tree{flex:1;min-height:0;overflow:auto;padding:2px 6px 12px}
+.explorer-dir{color:var(--dim);font-size:11.5px;margin-left:6px;overflow:hidden;text-overflow:ellipsis;min-width:0;direction:rtl;text-align:left}
 /* The line between the tree and the file, and the handle that moves it: a
    gap wide enough to grab, drawn only while it is being pointed at. */
 #explorer-split{flex:0 0 7px;margin:0 -3px;position:relative;z-index:1;cursor:col-resize;touch-action:none;outline:0}
@@ -1122,7 +1348,11 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
  * positioned from the viewport instead and reuses only the surface styling.
  */
 .menu.pop{position:fixed;bottom:auto;left:auto;min-width:220px}
-#log{padding:28px 24px 8px}
+/* The scrollbar's gutter is kept on both sides, and the composer below gives
+   up the same width on each side (see #composer), so a message and the box it
+   was typed in share both edges at every window width. Taken from one side
+   only, it pushed every message half a scrollbar left of the box. */
+#log{padding:28px 24px 8px;scrollbar-gutter:stable both-edges}
 /*
  * One column width, named once.
  *
@@ -1230,6 +1460,8 @@ body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
   max-width:220px;max-height:160px;border-radius:8px;cursor:zoom-in;
   background:var(--bg);object-fit:cover;
 }
+/* A clip a little larger than a picture, since it is watched, not glanced at. */
+.user .shots video{max-width:min(320px,100%);max-height:200px;border-radius:8px;background:#000;display:block}
 .user{margin-bottom:18px}
 .panel{max-width:720px;margin:8px auto 0}
 .panel-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding-block:48px;font-size:13px}
@@ -1451,6 +1683,9 @@ details.setting>summary:focus-visible{outline:none;background:var(--hover)}
 .setting-status{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--dim)}
 .status-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--dim);opacity:.6}
 .status-dot.ok{background:var(--ok);opacity:1}
+/* A paired phone: its name, when, and the way to forget it, on one line. */
+.remote-phone{display:flex;align-items:center;gap:10px;min-height:28px}
+.remote-phone .remote-phone-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* The presets and the calendar on one line, on the same baseline. */
 .usage-window{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 .usage-kind-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
@@ -1709,13 +1944,41 @@ details.provider>summary:hover{background:var(--hover)}
  * with it. */
 .row-head .ghost+.ghost,.row-head .ghost+.switch,.row-head .switch+.ghost{margin-left:0}
 .routine-where{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
-.routine-history{margin-top:6px}
-.routine-history>summary{cursor:pointer;width:max-content}
-.routine-runs{display:flex;flex-direction:column;gap:2px;margin-top:6px}
-.routine-run{display:flex;gap:10px;align-items:baseline;text-align:left;border:0;background:transparent;color:var(--fg);font:inherit;padding:4px 6px;border-radius:6px}
-button.routine-run{cursor:pointer}
-button.routine-run:hover{background:var(--hover)}
-.routine-run.failed{color:var(--err)}
+.routine-history{margin-top:8px}
+.routine-history-head{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;
+  font:inherit;cursor:pointer;padding:3px 6px;margin:0 -6px 4px;border-radius:6px}
+.routine-history-head:hover{background:var(--hover);color:var(--fg)}
+.routine-history-head .chev{display:inline-block;transition:transform .15s;font-size:10px}
+.routine-history.folded .chev{transform:rotate(-90deg)}
+.routine-history.folded .routine-runs{display:none}
+.routine-runs{display:flex;flex-direction:column;gap:2px}
+/* Each run a quiet row that lights on hover: status, time, facts on one line,
+   and the first line of what it said beneath. No rules between them. */
+.routine-run{display:flex;flex-direction:column;gap:3px;text-align:left;border:0;background:transparent;
+  color:var(--fg);font:inherit;font-size:12.5px;padding:7px 8px;margin:0 -8px;border-radius:8px;min-width:0}
+.routine-run[role=button]{cursor:pointer}
+.routine-run[role=button]:hover,.routine-run.open{background:var(--hover)}
+.routine-run:focus-visible{outline:none;background:var(--hover)}
+.routine-run-detail{display:none;flex-direction:column;align-items:flex-start;gap:8px;margin-top:4px;cursor:default}
+.routine-run.open .routine-run-detail{display:flex}
+.routine-run.open:not(.running) .routine-run-text{display:none}
+.routine-run-full{word-break:break-word;max-height:360px;overflow:auto;width:100%;
+  line-height:1.55;user-select:text;color:var(--fg);font-size:13px}
+.routine-run-full.err{color:var(--err);white-space:pre-wrap}
+.routine-run-full.md>:first-child{margin-top:0}
+.routine-run.running .routine-run-text{color:var(--fg)}
+.routine-run-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
+.routine-run-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
+.routine-run-text.err{color:var(--err)}
+.run-status{font-size:11px;font-weight:550;padding:1px 8px;border-radius:999px;flex:0 0 auto}
+.run-status.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
+.run-status.failed{color:var(--err);background:color-mix(in srgb,var(--err) 14%,transparent)}
+.run-status.skipped{color:var(--dim);background:var(--hover)}
+.run-status.running{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
+.run-status.running::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
+  background:currentColor;margin-right:5px;vertical-align:1px;animation:run-pulse 1.2s ease-in-out infinite}
+@keyframes run-pulse{50%{opacity:.25}}
+.routine-more{align-self:flex-start;margin-top:4px}
 .small{font-size:12px;white-space:pre-wrap;word-break:break-all}
 .keyrow{display:flex;gap:6px;margin:8px 0 6px}
 .keyrow input{
@@ -1824,6 +2087,54 @@ button.signin-site:disabled{opacity:.4;cursor:default}
 #browser-import-dialog .dlg-actions{padding:16px 22px 20px}
 #browser-import-dialog .dlg-actions button:disabled{opacity:.4;cursor:default}
 #browser-import-dialog input[type=text]{height:38px;padding:0 13px;font-size:13px}
+/* Feedback. Same frame as the import dialog; the kind is a row of fills, the
+   chosen one taking the selection fill rather than a ring. */
+#feedback-dialog{width:min(520px,94vw);max-width:min(520px,94vw)}
+#feedback-dialog .cn-head{padding:20px 22px 2px}
+#feedback-dialog .cn-body{padding:14px 22px 4px;gap:10px}
+#feedback-dialog .dlg-actions{padding:16px 22px 20px}
+#feedback-dialog .dlg-actions button:disabled{opacity:.4;cursor:default}
+#feedback-dialog textarea{width:100%;box-sizing:border-box;min-height:140px;padding:11px 13px;border:0;border-radius:10px;outline:none;background:var(--field);color:var(--fg);font:inherit;font-size:13px;line-height:1.55;resize:vertical}
+#feedback-dialog textarea:focus-visible{background:var(--hover)}
+.fb-kinds{display:flex;gap:4px}
+.fb-kind{height:30px;padding:0 13px;border:0;border-radius:999px;background:var(--field);color:var(--dim);font:inherit;font-size:12.5px;cursor:pointer}
+.fb-kind:hover{background:var(--hover);color:var(--fg)}
+.fb-kind.on{background:var(--sel);color:var(--fg);font-weight:550}
+.fb-note{margin:0;font-size:11.5px;color:var(--dim);line-height:1.5}
+.fb-note:empty{display:none}
+/* Attachments as square tiles in a row, the last one adding another. Fills
+   only: the add tile is a softer fill, not a dashed outline. */
+.fb-media{display:flex;flex-wrap:wrap;gap:8px}
+.fb-tile{position:relative;width:76px;height:76px;flex:0 0 auto;border-radius:14px;overflow:hidden;background:var(--field)}
+.fb-thumb{display:block;width:100%;height:100%;object-fit:cover}
+.fb-tile.is-video .fb-thumb{background:#000}
+/* A play mark over a recording's first frame, so it reads as video at a glance. */
+.fb-play{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(6px)}
+.fb-play::after{content:"";position:absolute;left:10px;top:8px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
+.fb-remove{
+  position:absolute;top:5px;right:5px;width:20px;height:20px;padding:0;border:0;border-radius:50%;
+  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;font-size:14px;line-height:20px;text-align:center;cursor:pointer;
+  opacity:.9;transition:opacity .15s,background .15s;
+}
+.fb-remove:hover{opacity:1;background:rgba(0,0,0,.75)}
+.fb-remove:disabled{display:none}
+.fb-tile.is-uploading::before,.fb-tile.is-done::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
+.fb-spinner{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
+  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:fb-spin .8s linear infinite}
+@keyframes fb-spin{to{transform:rotate(360deg)}}
+.fb-done{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;color:#111;font-size:12px;font-weight:700;line-height:22px;text-align:center}
+.fb-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:0;color:var(--dim);font:inherit;cursor:pointer;transition:background .15s,color .15s}
+.fb-add:hover,.fb-add:focus-visible{background:var(--hover);color:var(--fg);outline:none}
+.fb-add .fb-add-icon{width:20px;height:20px}
+.fb-add-label{font-size:11.5px;font-weight:500}
+/* Beside the tiles, centred on them: what goes here and the limits. It takes
+   the rest of the row and drops below the tiles when the row is full. */
+.fb-media{align-items:center}
+.fb-caption{display:flex;flex-direction:column;gap:3px;flex:1;min-width:170px;padding-left:4px}
+.fb-caption-title{font-size:12.5px;font-weight:500;color:var(--fg)}
+.fb-caption-sub{font-size:11.5px;color:var(--dim);line-height:1.45}
+/* Something is being dragged over: the whole dialog is the target, said with a fill. */
+#feedback-dialog.fb-dropping{background:var(--sel)}
 .bi-label{font-size:12px;color:var(--dim)}
 .bi-sites{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}
 .bi-site{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;background:var(--field);cursor:pointer}
@@ -1908,6 +2219,23 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 }
 .pw-tab:hover{color:var(--fg)}
 .pw-tab.on{background:var(--bg);color:var(--fg);font-weight:500}
+.pw-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px}
+/* The site's badge on the same tab, at this dialog's size. */
+.pw-tab-save{
+  font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;
+  background:var(--fg);color:var(--bg);font-variant-numeric:tabular-nums;
+}
+/* Twelve months at the monthly price, struck, just left of what the year costs. */
+.pw-was{color:var(--dim);font-weight:400;margin-right:6px;text-decoration-thickness:1px}
+/* What the credits reach: a quiet heading, then one row per kind of model —
+   the kind in a narrow column, its marks and names beside it. */
+.pw-media{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px 14px;font-size:12.5px}
+.pw-media-head{grid-column:1/-1;color:var(--dim);font-size:11.5px}
+.pw-media-kind{color:var(--dim);white-space:nowrap}
+.pw-media-models{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
+.pw-media-model{display:inline-flex;align-items:center;gap:5px;color:var(--fg);font-weight:500;white-space:nowrap}
+.pw-media-mark{display:inline-flex;width:14px;height:14px}
+.pw-media-mark svg{width:100%;height:100%}
 /* A labelled break, not a rule: what follows is a different kind of purchase,
    and a bare line would read as the list simply continuing. */
 .pw-sep{
@@ -2056,26 +2384,27 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
  * is right for browsing and wrong for "the one about the parser, two days
  * ago". So this is a search field over every session in every tree opened
  * here, the projects themselves, and the few actions worth a shortcut. */
-#palette{width:min(560px,92vw);max-height:min(60vh,520px)}
+#palette{width:min(600px,92vw);max-height:min(64vh,560px)}
 #palette[open]{display:flex;flex-direction:column}
 /* One left edge for everything: the field's magnifier, each row's icon, the
-   group labels and the key hints all start 22px in, and the field's text
-   starts where the row labels do. Rows sit 8px in so their highlight has room;
+   group labels and the key hints all start 26px in, and the field's text
+   starts where the row labels do. Rows sit 12px in so their highlight has room;
    their own 14px padding brings the content back to the shared edge. */
-.cmdk-head{position:relative;padding:12px 12px 8px}
-.cmdk-head .ico-sm{position:absolute;left:22px;top:calc(50% - 5.5px);pointer-events:none}
-#palette .cmdk-head input{height:40px;padding:0 10px 0 35px;font-size:14px}
-#cmdk-list{overflow-y:auto;padding:0 8px 8px;flex:1;scroll-padding-block:4px}
+.cmdk-head{position:relative;padding:16px 16px 10px}
+.cmdk-head .ico-sm{position:absolute;left:26px;top:calc(50% - 4.5px);pointer-events:none}
+#palette .cmdk-head input{height:42px;padding:0 12px 0 35px;font-size:14px}
+#cmdk-list{overflow-y:auto;padding:0 12px 12px;flex:1;scroll-padding-block:6px}
 .cmdk-group{
-  padding:12px 14px 5px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
+  padding:16px 14px 6px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
   color:var(--dim);
 }
-.cmdk-group:first-child{padding-top:6px}
+.cmdk-group:first-child{padding-top:8px}
 .cmdk-item{
   width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:8px;
   background:transparent;color:var(--fg);font:inherit;font-size:13px;cursor:pointer;
-  padding:8px 14px;text-align:left;
+  padding:10px 14px;text-align:left;
 }
+.cmdk-item + .cmdk-item{margin-top:2px}
 /* Hover and the keyboard cursor are the same highlight: a list driven by both
    at once needs one answer to "which row does Enter take". */
 .cmdk-item.cursor{background:var(--sel)}
@@ -2087,8 +2416,7 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 }
 .cmdk-empty{padding:12px 14px;font-size:12.5px;color:var(--dim)}
 .cmdk-foot{
-  display:flex;gap:16px;padding:9px 22px 11px;font-size:11px;color:var(--dim);
-  box-shadow:0 -1px 0 var(--line);
+  display:flex;gap:18px;padding:10px 26px 16px;font-size:11px;color:var(--dim);
 }
 .cmdk-foot kbd{
   font:inherit;font-size:10.5px;border:1px solid currentColor;border-radius:4px;
@@ -2108,7 +2436,10 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
 #connect:has(#cn-aside:not([hidden])){width:min(760px,94vw)}
 .cn-grid{display:grid;grid-template-columns:1fr}
 #connect:has(#cn-aside:not([hidden])) .cn-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
+/* The sidebar's bare aside rule (a fixed width, contents pinned right) would
+ * otherwise reach this one too, and set the wordmark against the divider. */
 .cn-aside{
+  width:auto;flex:initial;align-items:stretch;
   display:flex;flex-direction:column;gap:20px;padding:30px 28px;
   background:var(--hover);border-right:1px solid var(--line);
   border-radius:16px 0 0 16px;
@@ -2265,6 +2596,10 @@ button.pw-plan:disabled{opacity:.4;cursor:default}
    three sentences side by side either wrap mid-phrase or shrink the type. Down
    the page they read as a short list of offers, which is what they are. */
 #starters{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
+/* A rotated or newly written set gets a short fade, so the change is seen
+   rather than noticed as a flicker. */
+#starters.fresh button{animation:starters-in .35s ease-out both}
+@keyframes starters-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
 #starters button{
   border:0;background:var(--panel);color:var(--fg);border-radius:999px;
   padding:8px 15px;font:inherit;font-size:13px;cursor:pointer;text-align:left;
@@ -2342,6 +2677,34 @@ details.tool>summary:hover::after{opacity:1}
 .tool-body{padding:2px 12px 10px}
 .tool-body pre{margin:0;overflow-x:auto;font-size:12px;max-height:340px}
 .tool-body .label{font-size:11px;color:var(--dim);margin:0 0 4px}
+/* The screenshots a tool took, under its result: the same thumbnail as a
+   pasted image, a click away from full size. */
+.tool-shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
+.tool-shots img{
+  max-width:220px;max-height:160px;border-radius:8px;cursor:zoom-in;
+  background:var(--bg);object-fit:cover;
+}
+/* The windows a Computer use turn ended on: the result, so out in the turn
+   rather than folded into a step, and a little larger than a step's shots. */
+.turn-shots{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
+.turn-shot{margin:0;display:flex;flex-direction:column;gap:5px;max-width:280px}
+.turn-shot img{
+  display:block;max-width:280px;max-height:200px;border-radius:10px;cursor:zoom-in;
+  background:var(--bg);object-fit:cover;
+}
+.turn-shot figcaption{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* The preview: the image as large as the window allows, over a dark scrim.
+   Dark in both themes — a screenshot reads against black, not the page. */
+.img-preview{
+  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:32px;
+  background:rgba(0,0,0,.82);cursor:zoom-out;
+}
+.img-preview img{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain}
+.img-preview-count{
+  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
+  color:#fff;font-size:12px;opacity:.7;
+}
+.img-preview-count:empty{display:none}
 .tool-body .kv{margin:0 0 8px}
 .tool-summary{font-size:12.5px;line-height:1.5;margin:0 0 6px}
 details.tool-raw>summary{font-size:11px;color:var(--dim);cursor:pointer;margin:0 0 4px}
@@ -2465,6 +2828,8 @@ details.thinking[open]>summary::after{transform:translateY(-2px) rotate(45deg)}
 
 /* composer */
 form{padding:6px 24px 18px;background:var(--bg)}
+/* 24px plus the 11px the transcript's scrollbar gutter takes on each side. */
+@media (min-width:761px){#composer{padding-left:35px;padding-right:35px}}
 .composer{
   position:relative;
   max-width:720px;margin:0 auto;border-radius:16px;
@@ -2585,6 +2950,57 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
 }
 .icon-btn svg{width:14px;height:14px}
 .icon-btn:hover{background:var(--hover)}
+/* Dictation. Listening is the harness alive, so it takes the brand: the mic
+   becomes a soft lime well holding a stop square, breathing, and the panel
+   above the box shows the voice in lime. Actions (done) keep --accent, as
+   every action does. Fills and shadows only, never a ring. */
+.mic-btn{width:30px;height:30px;border-radius:999px;color:var(--dim);transition:background .2s,color .2s}
+.mic-btn svg{width:16px;height:16px}
+.mic-btn .mic-stop{display:none;width:14px;height:14px}
+.mic-btn:hover{color:var(--fg)}
+.mic-btn.is-recording{background:var(--brand-tint);color:var(--brand-ink);animation:mic-breathe 1.8s ease-in-out infinite}
+.mic-btn.is-recording .mic-idle{display:none}
+.mic-btn.is-recording .mic-stop{display:block}
+.mic-btn:disabled{opacity:.45;cursor:default}
+@keyframes mic-breathe{50%{background:color-mix(in srgb,var(--brand) 34%,transparent)}}
+.composer-bar .mic-btn,.composer-bar #send,.composer-bar #stop{flex-shrink:0}
+/* The panel: centred over the box's top edge, a pill of its own. One row:
+   what is going on, then the voice and the two ways out while listening. */
+.dictate-pop{
+  position:absolute;left:50%;bottom:calc(100% + 12px);z-index:30;transform:translateX(-50%);
+  display:flex;align-items:center;gap:12px;min-height:52px;width:max-content;max-width:min(480px,calc(100% - 24px));
+  padding:8px 8px 8px 20px;border-radius:999px;background:var(--panel);color:var(--fg);
+  box-shadow:0 18px 44px rgba(0,0,0,.26),0 3px 10px rgba(0,0,0,.12);
+  font-size:13.5px;font-weight:500;letter-spacing:.01em;animation:dp-in .18s cubic-bezier(.2,.8,.2,1);
+}
+.dictate-pop[hidden]{display:none}
+@keyframes dp-in{from{opacity:0;transform:translate(-50%,8px) scale(.97)}to{opacity:1;transform:translateX(-50%)}}
+.dp-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto;animation:dp-dot 1.4s ease-in-out infinite}
+@keyframes dp-dot{50%{opacity:.35}}
+.dp-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--brand-tint);border-top-color:var(--brand);flex:0 0 auto;animation:dp-spin .8s linear infinite}
+@keyframes dp-spin{to{transform:rotate(360deg)}}
+.dp-text{white-space:nowrap}
+.dp-time{color:var(--dim);font-weight:400;font-variant-numeric:tabular-nums;min-width:2.4em}
+.dp-wave{width:168px;height:32px;flex:0 1 auto;min-width:64px;color:var(--brand)}
+.dp-btn{width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0;font:inherit;transition:background .15s,transform .15s}
+.dp-btn:active{transform:scale(.94)}
+.dp-btn svg{width:15px;height:15px}
+.dp-cancel,.dp-close{background:var(--hover);color:var(--fg)}
+.dp-done{background:var(--accent);color:var(--bg)}
+.dp-btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
+/* Which parts show is the state's: listening, working, or saying what went wrong. */
+.dictate-pop:not([data-state="listening"]) .dp-dot,
+.dictate-pop:not([data-state="listening"]) .dp-time,
+.dictate-pop:not([data-state="listening"]) .dp-wave,
+.dictate-pop:not([data-state="listening"]) .dp-cancel,
+.dictate-pop:not([data-state="listening"]) .dp-done,
+.dictate-pop:not([data-state="working"]) .dp-spin,
+.dictate-pop:not([data-state="error"]) .dp-close{display:none}
+.dictate-pop[data-state="working"]{padding-right:20px}
+/* The error red mixed toward the text colour: bright enough on the dark
+   theme, still deep on the light one. */
+.dictate-pop[data-state="error"] .dp-text{color:color-mix(in srgb,var(--err) 62%,var(--fg));white-space:normal;line-height:1.45}
+@media (prefers-reduced-motion:reduce){.dictate-pop,.dp-dot,.dp-spin,.mic-btn.is-recording{animation:none}}
 /* The folder it runs in, set at the same weight as the model beside it: three
    settings on one bar, none of them shouting over the others. */
 #workspace-picker .picker-btn{gap:6px}
@@ -2626,6 +3042,54 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
 .effort-name.on{color:var(--fg);font-weight:600}
 #attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
 #attachments:empty{display:none}
+/* The tray: what the message carries, as cards sitting just above the box.
+   Pictures at a size that can be recognised, files as a name and a line;
+   the same fill as the box below and no outline, with the × on the card's
+   corner where a thumbnail leaves no room beside it. */
+/* The box's own width and centring, so the cards start where the box does
+   rather than at the column's edge. */
+#tray{display:flex;flex-wrap:wrap;gap:8px;max-width:720px;margin:0 auto 8px}
+#tray:empty{display:none}
+.tray-card{
+  position:relative;display:flex;align-items:center;gap:10px;height:64px;
+  max-width:240px;padding:0 30px 0 10px;border-radius:12px;background:var(--panel);
+}
+.tray-card.tray-media{width:64px;padding:0;overflow:hidden;background:var(--field)}
+.tray-card img,.tray-card video{width:100%;height:100%;object-fit:cover;display:block}
+.tray-card img{cursor:zoom-in}
+/* A clip: its first frame where a file's icon goes, with its length and size
+   beside the name. */
+.tray-thumb{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:9px;overflow:hidden;background:var(--field)}
+.tray-thumb video{width:100%;height:100%;object-fit:cover;display:block}
+.tray-duration:not(:empty)::after{content:" · "}
+.tray-play{position:absolute;left:50%;top:50%;margin:-9px 0 0 -9px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#0000008c;color:#fff;pointer-events:none;transition:opacity .12s}
+.tray-card.video:hover .tray-play{opacity:0}
+.tray-play svg{width:10px;height:10px}
+.tray-icon{width:36px;height:36px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:var(--field);color:var(--dim)}
+.tray-icon svg{width:16px;height:16px}
+.tray-text{display:flex;flex-direction:column;gap:2px;min-width:0}
+.tray-name{font-size:12.5px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tray-sub{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tray-card .x{
+  position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;border:0;border-radius:50%;
+  display:grid;place-items:center;font-size:13px;line-height:1;cursor:pointer;
+  background:var(--field);color:var(--dim);
+}
+.tray-card.tray-media .x{background:#0000008c;color:#fff;opacity:0;transition:opacity .12s}
+.tray-card.tray-media:hover .x,.tray-card .x:focus-visible{opacity:1}
+/* No hover on a touch screen: the × is always there. */
+@media (hover:none){.tray-card.tray-media .x{opacity:1}}
+.tray-card .x:hover{color:var(--fg)}
+/* A phone: one row that scrolls sideways rather than rows that push the box
+   up the screen, and cards a little smaller so two or three still show. */
+@media (max-width:760px){
+  #tray{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:6px}
+  #tray::-webkit-scrollbar{display:none}
+  .tray-card{flex:0 0 auto;height:56px;max-width:200px}
+  .tray-card.tray-media{width:56px}
+  .tray-icon,.tray-thumb{width:36px;height:36px}
+}
+.tray-card.tray-media .x:hover{color:#fff;background:#000000b3}
 /* Outside the composer, tracking its width so the rows line up with the box
    they are waiting on. min-width:0 twice over — here and on the line inside
    each row — because a flex item defaults to refusing to shrink below its
@@ -2661,6 +3125,91 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
 :root[data-theme="dark"] .q .go:hover{color:var(--brand)}
 .q .x{border:0;background:transparent;color:var(--dim);cursor:pointer;font:inherit;padding:0 2px}
 .q .x:hover{color:var(--err)}
+/* The goal being worked toward: the reason the turn keeps going, in the same
+   brand ink that marks the harness at work. Its words in full colour, since
+   unlike a queued line it is what everything below is for. */
+.q.goal .tag{color:var(--brand-ink)}
+:root[data-theme="dark"] .q.goal .tag{color:var(--brand)}
+.q.goal .n{color:var(--fg)}
+/* A background task: work this conversation set going. Running ones say so
+   in the brand ink that marks the harness at work; ended ones step back, but
+   stay a click from what they said. */
+.q.task .n{cursor:pointer}
+.q.task-running .tag,.q.task-queued .tag{color:var(--brand-ink)}
+:root[data-theme="dark"] .q.task-running .tag,:root[data-theme="dark"] .q.task-queued .tag{color:var(--brand)}
+.q.task-failed .tag{color:var(--err)}
+.q.task-completed .n,.q.task-cancelled .n,.q.task-failed .n{color:var(--dim)}
+.q.task-more{border:0;color:var(--dim);cursor:pointer;font:inherit;font-size:12px;text-align:left}
+.q.task-more:hover{color:var(--fg)}
+/* Background results read into the conversation: a card, set apart from
+   what the person typed by its fill and its place on the left. */
+.task-card-row-wrap{margin-bottom:26px}
+.task-card{display:flex;flex-direction:column;gap:4px;max-width:520px;background:var(--panel);border-radius:12px;padding:10px 12px;font-size:12px}
+.task-card-head{color:var(--dim);font-size:11px;margin-bottom:2px}
+.task-card-row{display:flex;align-items:center;gap:8px;min-width:0}
+.task-card-row .tag{flex:0 0 auto;color:var(--dim);font-size:11px}
+.task-card-row.task-completed .tag{color:var(--ok)}
+.task-card-row.task-failed .tag{color:var(--err)}
+.task-card-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.task-card-row .go{flex:0 0 auto;height:22px;padding:0 9px;border:0;border-radius:7px;background:var(--hover);color:var(--fg);cursor:pointer;font:inherit;font-size:11px}
+.task-card-row .go:hover{background:var(--brand-tint);color:var(--brand-ink)}
+/* The sheet a task opens into: down the right edge, over the conversation,
+   which stays where it was underneath. Set apart by its fill, never a line. */
+#task-sheet{
+  position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(560px,100vw);
+  display:flex;flex-direction:column;background:var(--panel);
+  box-shadow:-12px 0 32px #00000014;
+}
+#task-sheet[hidden]{display:none}
+/* In the desktop app the tab strip under the sheet's top edge is the window's
+   drag handle, and a drag region takes clicks whatever is drawn over it: the
+   sheet's close and stop buttons would only ever move the window. */
+#task-sheet{-webkit-app-region:no-drag}
+.task-head{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 10px}
+.task-titles{flex:1;min-width:0}
+.task-title{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.task-meta{color:var(--dim);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.task-stop{
+  flex:0 0 auto;height:28px;padding:0 10px;border:0;border-radius:8px;
+  background:var(--hover);color:var(--fg);cursor:pointer;font:inherit;font-size:12px;
+}
+.task-stop:hover{color:var(--err)}
+.task-close{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--dim);cursor:pointer;font:inherit;font-size:18px;line-height:1}
+.task-close:hover{background:var(--hover);color:var(--fg)}
+.task-chips{position:relative;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none;overscroll-behavior-x:contain}
+.task-chips::-webkit-scrollbar{display:none}
+.task-chips[hidden]{display:none}
+.task-chip{
+  flex:0 0 auto;height:26px;padding:0 10px;border:0;border-radius:13px;
+  background:var(--hover);color:var(--dim);cursor:pointer;font:inherit;font-size:12px;
+  white-space:nowrap;
+}
+.task-chip.on{background:var(--brand-tint);color:var(--brand-ink)}
+:root[data-theme="dark"] .task-chip.on{color:var(--brand)}
+.task-log{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 16px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.55}
+.task-msg.user{align-self:flex-end;max-width:85%;background:var(--bg);border-radius:12px;padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere}
+.task-msg.assistant{overflow-wrap:anywhere}
+.task-tool{background:var(--bg);border-radius:10px;padding:6px 10px;font-size:12px}
+.task-tool summary{display:flex;gap:8px;cursor:pointer;list-style:none;min-width:0}
+.task-tool summary::-webkit-details-marker{display:none}
+.task-tool-name{flex:0 0 auto;font-weight:600}
+.task-tool-input{flex:1;min-width:0;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono,ui-monospace,monospace)}
+.task-tool.err .task-tool-name{color:var(--err)}
+.task-tool-result{margin:6px 0 0;max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--dim);font-size:11.5px}
+.task-note{color:var(--dim);font-size:12px}
+.task-error{color:var(--err);font-size:12px}
+.task-empty{color:var(--dim)}
+.task-working{display:flex;align-items:center;gap:8px;color:var(--dim)}
+/* The sheet's own surface runs to its bottom edge: no band behind the box. */
+.task-form{padding:8px 16px 16px;background:transparent}
+/* Field and send button as one box, the send arrow inside at its corner. */
+.task-box{display:flex;align-items:flex-end;gap:8px;background:var(--bg);border-radius:14px;padding:8px 8px 8px 12px}
+.task-input{
+  flex:1;min-width:0;resize:none;border:0;padding:5px 0;max-height:160px;
+  background:transparent;color:var(--fg);font:inherit;font-size:13px;line-height:1.5;outline:none;
+}
+.task-input:disabled{opacity:.6}
+.task-send{flex:0 0 auto}
 .att{
   display:flex;align-items:center;gap:7px;background:var(--bg);border-radius:8px;
   padding:5px 8px;font-size:12px;max-width:260px;
@@ -2674,6 +3223,37 @@ textarea.boxed:focus{outline:none;background:var(--field-focus)}
    the chip carries a mark for what it points at instead of a size. */
 .att .ico-sm{width:13px;height:13px;opacity:.65}
 .att .where{color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* Goal mode is how this message is sent, not a thing attached to it: a
+   tinted fill, never an outline, sets it apart from the files. */
+.att.goal{background:var(--brand-tint);color:var(--brand-ink)}
+:root[data-theme="dark"] .att.goal{color:var(--brand)}
+.att.goal .ico-sm{opacity:1}
+/* Computer use stays on for the whole conversation, so it sits in the chip
+   row on every message: a full brand fill there shouted louder than anything
+   the person typed. The file chips' own quiet fill, with the colour kept to
+   the mark. Turning it off is not destructive, so the × does not go red. */
+.att.computer{color:var(--fg)}
+.att.computer .ico-sm{opacity:1;color:var(--brand-ink)}
+.att.computer .x:hover{color:var(--fg)}
+.att.computer-perm{flex-basis:100%;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px;background:var(--field);border-radius:10px;max-width:none}
+.computer-perm .cp-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--fg)}
+.computer-perm .cp-body{color:var(--dim);font-size:12px;white-space:normal}
+.computer-perm .cp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--fg)}
+.computer-perm .cp-ok{width:26px;text-align:center;color:var(--dim);font-size:13px;line-height:24px}
+/* The app's primary button, inverted on either theme: white on the brand
+   green was unreadable in dark mode. */
+.computer-perm .cp-btn{border:0;border-radius:7px;padding:4px 12px;background:var(--accent);color:var(--bg);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
+.computer-perm .cp-btn:hover{background:color-mix(in srgb,var(--accent) 85%,var(--bg))}
+/* The card's own actions, after the rows: buttons the size of Allow, but
+   secondary — the page's fill on the card's, no outline — and set right, where
+   Allow already sits. Loose green words read as links to somewhere else, and
+   sat under the rows as if they were a third one. */
+.computer-perm .cp-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
+.computer-perm .cp-link{
+  border:0;border-radius:7px;padding:4px 12px;background:var(--bg);color:var(--fg);
+  font:inherit;font-size:12px;font-weight:500;cursor:pointer;
+}
+.computer-perm .cp-link:hover{background:color-mix(in srgb,var(--fg) 8%,var(--bg))}
 /* Wider than the model picker's: these rows carry a name and the folder it
    sits in, and truncating the folder away leaves three files called index.ts. */
 #attach-picker .menu{min-width:min(380px,86vw)}
@@ -2761,8 +3341,11 @@ button.ghost,a.ghost{
   background:var(--sel);color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;
 }
 button.ghost:hover,a.ghost:hover{background:var(--hover)}
+/* Just above the composer, however tall it is: a fixed offset was covered as
+   soon as attachment cards or a longer draft grew the form under it.
+   --form-h is measured in transcript.ts. */
 #jump{
-  position:absolute;right:24px;bottom:118px;border-radius:999px;padding:7px 15px;border:0;
+  position:absolute;right:24px;bottom:calc(var(--form-h, 108px) + 10px);border-radius:999px;padding:7px 15px;border:0;
   background:var(--bg);color:var(--fg);cursor:pointer;font:inherit;font-size:12px;
   box-shadow:0 1px 2px #0000000f,0 6px 20px #0000001f;
 }
@@ -2773,6 +3356,11 @@ dialog{
   box-shadow:0 2px 6px #00000014,0 20px 60px #00000033;
 }
 dialog::backdrop{background:rgba(0,0,0,.55)}
+/* A phone asking to pair: the code is the thing to read, so it is the largest. */
+.pair-dialog{width:min(420px,92vw);padding-bottom:16px}
+.pair-title{padding:22px 24px 6px;font-size:16px;font-weight:600}
+.pair-body{padding:0 24px;color:var(--dim);font-size:13.5px;line-height:1.5}
+.pair-code{margin:18px 24px 6px;padding:14px 0;border-radius:12px;background:var(--sel);text-align:center;font-size:30px;letter-spacing:.12em}
 /* The approval dialog.
  *
  * Everything here is arranged around one question: what exactly is about to
@@ -2913,19 +3501,31 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
  */
 @media (max-width:760px){
   body>aside{
-    position:fixed;inset:0 auto 0 0;z-index:20;width:min(280px,84vw);flex-basis:auto;
+    position:fixed;inset:0 auto 0 0;z-index:20;width:min(332px,90vw);flex-basis:auto;
     transform:translateX(-100%);transition:transform .2s;
     padding-bottom:env(safe-area-inset-bottom);
   }
   body>aside.open{transform:none;box-shadow:0 0 0 1px #0000000a,0 12px 40px #00000040}
   body.nav-open #scrim{display:block}
   #nav-close{display:grid}
-  #nav-collapse,body.nav-collapsed #nav-expand{display:none}
-  body.nav-collapsed>aside{width:min(280px,84vw);flex-basis:auto}
-  body.nav-collapsed #tabs{padding-left:12px}
+  #nav-toggle,#side-top{display:none}
+  aside header{display:flex}
+  #side-panel{padding-top:0}
+  #side-panel{border-radius:0;margin:0}
+  body.nav-collapsed>aside{width:min(332px,90vw);flex-basis:auto}
+  #side-body{width:auto;align-self:stretch}
+  #side-panel,body.nav-collapsed #side-panel{flex:1 1 auto;width:auto;min-width:0;margin:0}
   #burger{display:grid}
-  #top{padding:6px 10px}
-  #top:has(#changes-btn:not([hidden])){padding:6px 10px}
+  /* One bar, not two: the burger sits at the head of the tab strip, in the
+     frame's colour, rather than on a white row of its own above it. #top
+     keeps its row only while it has the changes button to show. */
+  #top{padding:0;min-height:0}
+  #top:has(#changes-btn:not([hidden])){padding:6px 10px 6px 52px;background:var(--frame)}
+  #burger{position:fixed;z-index:15;top:0;left:4px;width:40px;height:36px;margin:0;border-radius:8px}
+  #tabs,body.nav-collapsed #tabs{padding-left:44px}
+  /* The front tab has the width it needs: its buttons show on a phone, where
+     there is no hover to wait for, and they left the title as "Unt…". */
+  .tab.on{max-width:none}
 
   /* Both panes are the screen while open, and each gets a way out of its own:
      the top bar with the changes button is underneath them. */
@@ -2938,7 +3538,9 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   #explorer-head{padding-top:max(10px,env(safe-area-inset-top))}
   #explorer-body{flex-direction:column}
   #explorer-resizer{display:none}
-  #explorer-tree{width:auto;height:var(--explorer-tree-height,38%);max-height:none}
+  #explorer-side{width:auto;height:var(--explorer-tree-height,38%);max-height:none}
+  #explorer-find{height:36px}
+  #explorer-q{font-size:16px}
   /* Stacked, so the handle between them drags up and down — and is a strip
      a thumb can find rather than a hairline. */
   #explorer-split{flex:0 0 18px;margin:0;cursor:row-resize}
@@ -3001,7 +3603,7 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   .effort-stop,.effort-name{width:40px}
   .effort-stop{height:40px}
   .effort-knob{width:28px;height:28px}
-  #jump{right:14px;bottom:160px}
+  #jump{right:14px}
 
   /* Dialogs, with the keyboard up: vh is the height without it. */
   #market{max-height:82dvh}