openclacky 1.5.19 → 1.5.21

data/lib/clacky/web/app.css

@@ -526,16 +526,61 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 1rem;
+  padding: 0;   /* the three zones own their own padding */
   transition: background-color var(--transition-base), border-color var(--transition-base);
   flex-shrink: 0;
   position: relative;
   z-index: 10;
 }
+/* Left zone sits exactly above the sidebar so the divider in front of the
+   session title lines up with the sidebar's right edge. The 1px margin
+   mirrors the #content-row border. */
 #header-left {
   display: flex;
   align-items: center;
   gap: 0.625rem;
+  align-self: stretch;
+  box-sizing: border-box;
+  width: var(--sidebar-width);
+  margin-left: 1px;
+  padding: 0 0.75rem 0 0.5rem;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+}
+/* Short hairline, vertically centered — a border would touch the top and
+   bottom of the header, which reads as a hard seam instead of a divider. */
+#header-left::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 1.25rem;
+  background: var(--color-border-primary);
+  transition: opacity var(--transition-base);
+}
+/* Collapsed sidebar → nothing to divide from, so the cluster shrinks back to
+   its natural width and the divider disappears. */
+#app:has(#sidebar.hidden) #header-left {
+  width: auto;
+}
+#app:has(#sidebar.hidden) #header-left::after {
+  opacity: 0;
+}
+/* Active session title — aligned to the content column, right of the divider.
+   Empty (and hidden) on every non-session view. */
+#header-session-title {
+  flex: 1;
+  min-width: 0;
+  padding: 0 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .sidebar-toggle-btn {
   width: 2.25rem;
@@ -567,7 +612,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.625rem;
-  margin-left: 0.5rem;
+  margin-left: 0.25rem;
   min-width: 0;
 }
 .header-logo {
@@ -653,6 +698,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.375rem;
+  padding-right: 1rem;
 }
 #header-cmdbar {
   display: flex;
@@ -733,8 +779,13 @@ body {
 /* ── Sidebar ─────────────────────────────────────────────────────────────── */
 /* The sidebar sits on the outer frame (bg-primary) so it's visibly a layer
    BEHIND the chat surface (bg-secondary). Subtle right border separates them. */
-#sidebar {
+/* The width lives on #app, not on #sidebar: the header's session divider and
+   title align to the same edge, so they must read the same value. JS writes
+   the dragged width here (see app.js / _initSidebarResize). */
+#app {
   --sidebar-width: 16rem;
+}
+#sidebar {
   width: var(--sidebar-width);
   min-width: var(--sidebar-width);
   background: var(--color-bg-primary);
@@ -1186,11 +1237,11 @@ body {
 
 .cmd-palette {
   width: 100%;
-  max-width: 34rem;
+  max-width: 50rem;
   margin: 0 1rem;
   background: var(--color-bg-card, var(--color-bg-secondary));
   border: 1px solid var(--color-border-primary);
-  border-radius: 12px;
+  border-radius: 14px;
   box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.25));
   overflow: hidden;
   transform: translateY(-8px) scale(0.99);
@@ -1204,27 +1255,147 @@ body {
   border-radius: 0;
   border-bottom: 1px solid var(--color-border-secondary);
   background: transparent;
+  padding: 0.75rem;
+}
+
+/* Input row reads as its own surface: pill outline, focus ring on the border */
+.cmd-palette .search-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.cmd-palette .search-input-row {
+  flex: 1;
+  min-width: 0;
+  height: 2.25rem;
+  padding: 0 0.5rem 0 0.9375rem;
+  gap: 0.5rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-pill);
+  background: var(--color-bg-card);
+  transition: border-color 0.12s ease;
 }
-.cmd-palette .search-input-row { height: 3rem; }
+.cmd-palette .search-input-row:focus-within {
+  border-color: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-primary));
+}
+.cmd-palette .search-icon svg { width: 1rem; height: 1rem; }
 .cmd-palette .search-input { font-size: 0.9375rem; }
 
-/* ESC chip in the input row */
-.cmd-palette-esc {
+/* Clear stays a text affordance; the pill outline owns the emphasis */
+.cmd-palette .btn-search-q-clear {
   flex-shrink: 0;
-  font-family: var(--font-mono);
-  font-size: 0.625rem;
-  letter-spacing: 0.04em;
+  width: auto;
+  height: 1.375rem;
+  padding: 0 0.375rem;
+  border-radius: 0.375rem;
+  background: transparent;
   color: var(--color-text-muted);
-  padding: 0.125rem 0.375rem;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-secondary);
-  cursor: pointer;
-  transition: color 0.12s, border-color 0.12s;
+  font-size: 0.8125rem;
+  opacity: 1;
 }
-.cmd-palette-esc:hover {
+.cmd-palette .btn-search-q-clear:hover {
   color: var(--color-text-secondary);
-  border-color: var(--color-border-primary);
+  background: var(--color-bg-hover);
+}
+
+/* Filter row: chip-shaped triggers, no hairline divider */
+.cmd-palette .search-filter-row {
+  height: auto;
+  border-top: none;
+  padding: 0.625rem 0 0;
+  gap: 0.5rem;
+}
+.cmd-palette .search-select {
+  flex: 0 0 auto;
+  width: fit-content;
+  min-width: 6.5rem;
+  height: 1.875rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-pill);
+  background: var(--color-bg-card);
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.cmd-palette .search-select .custom-select-trigger--bare {
+  width: 100%;
+  padding: 0 0.5rem 0 0.625rem;
+  font-size: 0.8125rem;
+}
+.cmd-palette .search-select .placeholder,
+.cmd-palette .search-select .custom-select-value:not(.placeholder),
+.cmd-palette .search-select .custom-select-arrow {
+  color: var(--color-text-primary);
+  font-weight: 400;
+}
+.cmd-palette .search-date-wrap {
+  flex: 0 0 auto;
+  min-width: 6.5rem;
+  height: 1.875rem;
+  padding: 0;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-pill);
+  background: var(--color-bg-card);
+  color: var(--color-text-primary);
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+/* Button spans the whole pill so padding and icon areas stay clickable */
+.cmd-palette .search-date {
+  flex: 1 1 auto;
+  height: 100%;
+  padding: 0 2.1875rem 0 0.625rem;
+  border-radius: inherit;
+  font-size: 0.8125rem;
+  color: inherit;
+}
+.cmd-palette .search-date-icon {
+  right: 0.5rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
+  stroke-width: 1.8;
+  color: inherit;
+}
+.cmd-palette .search-date-wrap:has(.search-date[data-active="true"]) {
+  color: var(--color-accent-primary);
+}
+
+/* Hover / expanded state for the two filter pills */
+.cmd-palette .search-select:hover,
+.cmd-palette .search-date-wrap:hover,
+.cmd-palette .search-select:has(.custom-select-trigger.open) {
+  background: color-mix(in srgb, var(--color-bg-hover) 45%, var(--color-bg-card));
+}
+.cmd-palette .search-select:has(.custom-select-trigger.open) {
+  border-color: var(--color-border-strong);
+}
+.cmd-palette .search-select:hover .placeholder,
+.cmd-palette .search-select:has(.custom-select-trigger.open) .placeholder {
+  color: var(--color-text-primary);
+}
+.cmd-palette .search-select:hover .custom-select-arrow,
+.cmd-palette .search-select:has(.custom-select-trigger.open) .custom-select-arrow {
+  color: var(--color-text-primary);
+}
+.cmd-palette .btn-search-clear-all { margin-left: auto; }
+
+/* Close sits outside the pill, matching its height so the row reads as one unit */
+.cmd-palette-close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: color-mix(in srgb, var(--color-text-secondary) 65%, var(--color-text-muted));
+  cursor: pointer;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+.cmd-palette-close svg { width: 1rem; height: 1rem; }
+.cmd-palette-close:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
 }
 
 /* Results region */
@@ -1234,6 +1405,45 @@ body {
   padding: 0.375rem 0.5rem 0.5rem;
 }
 .cmd-palette-results .session-item { border-radius: 7px; }
+.cmd-palette-results .session-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 0.75rem;
+  align-items: center;
+}
+.cmd-palette-results .session-meta {
+  grid-column: 2;
+  grid-row: 1;
+  margin-top: 0;
+  font-family: inherit;
+  font-size: 0.6875rem;
+  opacity: 1;
+}
+.cmd-palette-results .session-item:has(.session-snippet) {
+  min-height: 2.625rem;
+  box-sizing: border-box;
+}
+.cmd-palette-results .session-name {
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
+.cmd-palette-results .session-name__text mark,
+.cmd-palette-results .session-snippet mark {
+  background: color-mix(in srgb, #fde047 55%, transparent);
+  color: var(--color-text-primary);
+}
+[data-theme="dark"] .cmd-palette-results .session-name__text mark,
+[data-theme="dark"] .cmd-palette-results .session-snippet mark {
+  background: color-mix(in srgb, #facc15 78%, transparent);
+  color: #111;
+}
+.cmd-palette-results .session-snippet {
+  grid-column: 1 / -1;
+  margin-top: 0.25rem;
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  line-height: 1.35;
+}
 .cmd-palette-hint {
   padding: 1.75rem 1rem;
   text-align: center;
@@ -1527,30 +1737,26 @@ body {
 .session-search-group + .session-search-group {
   margin-top: 0.25rem;
 }
-
 .session-snippet {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 0.6875rem;
-  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
   margin-top: 2px;
-  line-height: 1.35;
-  opacity: 0.85;
-}
-.session-snippet mark {
-  background: var(--color-warning-bg, #fef3c7);
-  color: var(--color-text-primary);
-  padding: 0 2px;
-  border-radius: 2px;
-  font-weight: 500;
+  line-height: 1.4;
 }
-
+.session-snippet mark,
 .session-name__text mark {
-  background: var(--color-warning-bg, #fef3c7);
-  color: var(--color-text-primary);
+  background: #fde047;
+  color: #1f2328;
   padding: 0 1px;
-  border-radius: 2px;
+  border-radius: 3px;
+}
+[data-theme="dark"] .session-snippet mark,
+[data-theme="dark"] .session-name__text mark {
+  background: #facc15;
+  color: #111;
 }
 
 /* Legacy .btn-new-inline — kept for compat, can be removed after cleanup */
@@ -1578,12 +1784,8 @@ body {
   margin-bottom: 1px;
   transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
 }
-.session-item[draggable="true"] {
-  cursor: grab;
-}
 .session-item.is-dragging {
   opacity: 0.55;
-  cursor: grabbing;
 }
 /* Two-row text block next to dot */
 .session-body {
@@ -1658,7 +1860,7 @@ body {
   border-radius: 0 2px 2px 0;
 }
 
-/* Actions button (⋯) on session list items — visible only on hover */
+/* Actions button (⋯) on session list items — visible on hover or keyboard focus */
 .session-actions-btn {
   flex-shrink: 0;
   display: flex;
@@ -1679,7 +1881,7 @@ body {
   align-self: center;
 }
 .session-item:hover .session-actions-btn,
-.session-item.active .session-actions-btn {
+.session-actions-btn:focus-visible {
   width: 1.5rem;
   opacity: 1;
   pointer-events: auto;
@@ -1766,22 +1968,28 @@ body {
 .session-actions-menu-item:hover .session-actions-menu-icon {
   color: var(--color-text-primary);
 }
+/* Entries with nothing to act on (e.g. "Close to the Right" on the last tab)
+   stay in place so the menu does not shift, but are inert. */
+.session-actions-menu-item--disabled {
+  color: var(--color-text-muted);
+  cursor: default;
+}
+.session-actions-menu-item--disabled:hover {
+  background: transparent;
+}
+.session-actions-menu-item--disabled .session-actions-menu-icon,
+.session-actions-menu-item--disabled:hover .session-actions-menu-icon {
+  color: var(--color-text-muted);
+}
 .session-actions-menu-item--danger .session-actions-menu-icon {
   color: var(--color-text-secondary);
 }
-.session-actions-menu-item--danger {
-  margin-top: 0.3125rem;
-  position: relative;
-}
-.session-actions-menu-item--danger::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -0.1875rem;
+/* The last group (archive + delete) is set off by an explicit divider element,
+   so the danger styling itself draws no line. */
+.session-actions-menu-divider {
   height: 1px;
+  margin: 0.3125rem 0;
   background: var(--color-border-secondary);
-  pointer-events: none;
 }
 .session-actions-menu-item--danger:hover {
   background: var(--color-error-bg);
@@ -2048,6 +2256,28 @@ body {
   background: var(--color-accent-primary);
 }
 
+/* ── Data management page (archive / recycle bin / backup tabs) ──────────── */
+#data-management-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+/* Title + description share the tab bodies' side padding so everything lines up. */
+#data-management-header {
+  padding: 1.75rem 2.25rem 0;
+}
+/* Margin (not padding) keeps the tab bar's underline inside the content column —
+   padding would stretch the border line all the way to the panel edges. */
+#data-management-tabs {
+  margin: 1.25rem 2.25rem 0;
+}
+/* Each tab is a full-height body of its own; min-height:0 lets it scroll. */
+#data-management-panel > .dm-view {
+  min-height: 0;
+}
+
+
 .task-row {
   display: flex;
   align-items: center;
@@ -3259,11 +3489,12 @@ body {
 .aside-panel { flex: 1; min-height: 0; overflow: auto; display: none; flex-direction: column; }
 .aside-panel.active { display: flex; }
 
-/* Floating opener shown when the column is collapsed. */
+/* Floating opener shown when the column is collapsed. Sits exactly where
+   #btn-aside-collapse sits in the 40px tab bar so the toggle never jumps. */
 .session-aside-opener {
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
+  top: 3.5px;
+  right: 12px;
   z-index: 100;
   display: inline-flex;
   align-items: center;
@@ -3272,7 +3503,7 @@ body {
   height: 2rem;
   border: 1px solid var(--color-border-primary);
   background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
+  color: var(--color-text-tertiary);
   border-radius: var(--radius-sm);
   cursor: pointer;
   box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
@@ -3576,12 +3807,59 @@ body {
   color: var(--color-text-tertiary);
 }
 .wv-code .cm-activeLineGutter { background: var(--color-bg-hover); }
+/* The picture is laid out at its natural size and moved by transform, which
+   keeps the zoom percentage in the bar a true pixel ratio. */
 .wv-pane--image {
+  overflow: hidden;
+  background: var(--color-bg-primary);
+}
+.wv-zoom {
+  flex: 1;
+  min-width: 0;
+  display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--color-bg-primary);
+  overflow: hidden;
+  touch-action: none;
+}
+.wv-zoom img {
+  /* flex: none keeps the picture at its natural size — a flex item would
+     otherwise be shrunk to the pane and quietly break the pixel ratio. */
+  flex: none;
+  max-width: none;
+  max-height: none;
+  transform-origin: center center;
+  will-change: transform;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.wv-zoom.is-panning img { cursor: grabbing; }
+.wv-zoom-bar {
+  position: absolute;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.1875rem;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--color-bg-secondary) 88%, transparent);
+  backdrop-filter: blur(6px);
+  opacity: 0.85;
+  transition: opacity 0.2s ease;
+}
+.wv-pane--image:hover .wv-zoom-bar { opacity: 1; }
+.wv-zoom-btn { width: 1.375rem; height: 1.375rem; }
+.wv-zoom-btn:disabled { opacity: 0.35; cursor: default; background: none; }
+.wv-zoom-level {
+  min-width: 2.5rem;
+  text-align: center;
+  font-size: 0.6875rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
 }
-.wv-pane--image img { max-width: 100%; max-height: 100%; object-fit: contain; }
 
 /* PDF: browser-native rendering inside an iframe pointing at /api/local-image */
 .wv-pane--pdf { background: var(--color-bg-primary); }
@@ -3592,6 +3870,33 @@ body {
   background: var(--color-bg-primary);
 }
 
+/* Audio/video: browser-native controls over the existing range-capable local
+   media endpoint. Unsupported codecs fall back to the regular Open action. */
+.wv-pane--media {
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: var(--color-bg-primary);
+}
+.wv-media-player--video {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  background: transparent;
+}
+.wv-media-player--audio {
+  width: min(32rem, 100%);
+}
+.wv-media-error {
+  display: none;
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+.wv-pane--media.is-error .wv-media-player { display: none; }
+.wv-pane--media.is-error .wv-media-error { display: block; }
+
 /* CSV/TSV: read-only table view; edit the original via "Open ▾" */
 .wv-pane--table {
   flex-direction: column;
@@ -3715,8 +4020,9 @@ body {
   font-weight: 600;
 }
 
-/* Separator inside the "open with" dropdown */
-.wv-open-menu-separator {
+/* Separator inside the "open with" dropdown and the tab context menu */
+.wv-open-menu-separator,
+.wv-menu-separator {
   height: 1px;
   margin: 0.25rem 0.375rem;
   background: var(--color-border-secondary);
@@ -3888,20 +4194,22 @@ body {
 .chat-nav-bookmark.bookmarked svg { fill: currentColor; }
 .chat-nav-user,
 .chat-nav-answer {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
   overflow: hidden;
   overflow-wrap: anywhere;
   font-size: 0.8125rem;
   line-height: 1.5;
 }
 .chat-nav-user {
-  -webkit-line-clamp: 1;
+  display: block;
   padding-right: 2rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--color-text-primary);
   font-weight: 500;
 }
 .chat-nav-answer {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   color: var(--color-text-muted);
 }
@@ -3912,6 +4220,7 @@ body {
   font-size: 0.9em;
   white-space: normal;
 }
+.chat-nav-popup .chat-nav-user code { white-space: inherit; }
 .chat-nav-popup.loading span {
   width: 100%;
   border-radius: 0.25rem;
@@ -4050,13 +4359,21 @@ body {
 }
 /* Time color / alignment: anchor to the bubble's own side, let width be
    driven by content — prevents overflow on narrow bubbles. */
-/* User timestamp: appended to .msg-user-wrap (not bubble), sits below action
-   buttons, right-aligned. */
-.msg-user-wrap > .msg-time { color: var(--color-text-secondary); top: auto; bottom: 0.2rem; right: 0; left: auto; padding-right: 0.25rem; }
-.msg-assistant .msg-time { color: var(--color-text-secondary); left: 0;  right: auto; padding-left: 0.25rem; }
-
-.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); white-space: pre-wrap; }
-[data-theme="dark"] .msg-user { background: var(--color-accent-soft); }
+/* Timestamps live inside the user hover action bar (see .msg-user-actions),
+   left of the icons. */
+.msg-user-actions > .msg-time {
+  order: -1;
+  position: static;
+  margin: 0;
+  padding: 0;
+  font-size: 0.75rem;
+  opacity: 1;
+  transform: none;
+  color: var(--color-text-tertiary);
+}
+
+.msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); white-space: pre-wrap; }
+[data-theme="dark"] .msg-user { background: var(--color-accent-soft); }
 .msg-assistant { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); align-self: flex-start; }
 
 /* Highlighted slash command inside a user bubble (/skill-name …). Rendered by
@@ -4077,14 +4394,15 @@ body {
   position: relative;
   display: flex;
   justify-content: flex-end;
-  padding-bottom: 3rem;
+  padding-bottom: 1.85rem;
 }
 .msg-user-actions {
   position: absolute;
-  bottom: 1.1rem;
+  bottom: 0.15rem;
   right: 0;
   display: flex;
-  gap: 0.125rem;
+  align-items: center;
+  gap: 0.25rem;
   opacity: 0;
   transition: opacity 0.15s ease;
   pointer-events: none;
@@ -4099,25 +4417,25 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.625rem;
-  height: 1.625rem;
+  width: 1.5rem;
+  height: 1.5rem;
   padding: 0;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 5px;
-  background: var(--color-bg-primary);
-  color: var(--color-text-secondary);
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text-tertiary);
   cursor: pointer;
-  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+  transition: color 0.15s ease, background 0.15s ease;
 }
 .msg-user-action-btn:hover {
   color: var(--color-text-primary);
-  background: var(--color-bg-tertiary);
+  background: var(--color-bg-hover);
 }
-.msg-user-action-btn:active { transform: translateY(1px); }
-.msg-user-action-btn.is-copied {
-  color: var(--color-success);
-  border-color: var(--color-success);
+.msg-user-action-btn:active {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
 }
+.msg-user-action-btn.is-copied { color: var(--color-success); }
 .msg-user-copy-icon-check { display: none; }
 .msg-user-action-btn.is-copied .msg-user-copy-icon { display: none; }
 .msg-user-action-btn.is-copied .msg-user-copy-icon-check { display: inline; }
@@ -4544,6 +4862,7 @@ body {
 }
 .feedback-actions {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
   gap: 0.5rem;
@@ -4578,10 +4897,11 @@ body {
 .feedback-actions [hidden] {
   display: none;
 }
-.feedback-hint {
+.feedback-status {
+  flex: 1;
+  min-width: 8rem;
   font-size: 0.6875rem;
   color: var(--color-text-secondary);
-  margin-top: 0.375rem;
 }
 .feedback-card--submitted {
   opacity: 0.5;
@@ -4624,6 +4944,11 @@ body {
   flex-direction: column;
   gap: 0.5rem;
 }
+.msg-error.msg-history-error {
+  background: transparent;
+  border-color: var(--color-border-primary);
+  color: var(--color-text-secondary);
+}
 .msg-error-actions {
   display: flex;
   align-items: center;
@@ -4759,50 +5084,163 @@ body {
 .tool-name     { color: var(--color-warning); font-weight: 500; }
 .progress-msg  { color: var(--color-accent-primary); font-size: 0.75rem; align-self: center; }
 
-/* ── Todo / task list panel ────────────────────────────────────────────────
-   Fixed panel above the composer, driven by `todo_update` WS events.
-   Mirrors the CLI TodoArea: shows progress count + each task with a
-   done/pending marker. Hidden automatically when no todos are active. */
+/* ── Todo / task list ──────────────────────────────────────────────────────
+   Compact session-bar entry driven by `todo_update` WS events. The icon
+   remains as a stable anchor while progress + caret expand only when a list
+   exists; the list itself opens in a fixed popover above the bar. */
 .todo-panel {
-  max-height: 12rem;
-  overflow-y: auto;
-  padding: 0.625rem 24px 0.625rem;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.todo-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 1.375rem;
+  height: 1.375rem;
+  padding: 0.1875rem 0.25rem;
+  overflow: hidden;
   background: transparent;
-  font-size: 0.8125rem;
+  border: 0;
+  border-radius: 3px;
+  font: inherit;
+  /* <button> does not inherit color: without this the icon, count and caret
+     fall back to the UA black, which is unreadable on dark themes. */
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  cursor: default;
+  transition: width 0.18s ease, color 0.15s ease, background-color 0.15s ease;
 }
-.todo-header {
-  display: flex;
+.todo-panel.has-todos .todo-trigger {
+  cursor: pointer;
+  opacity: 0.75;
+}
+.todo-panel.has-todos .todo-trigger:hover,
+.todo-panel.has-todos .todo-trigger:focus-visible,
+.todo-panel.is-open .todo-trigger {
+  color: var(--color-accent-primary);
+  background: var(--color-bg-hover);
+  opacity: 1;
+  outline: none;
+}
+.todo-trigger:disabled {
+  color: var(--color-text-muted);
+  opacity: 0.65;
+}
+.todo-status-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex: 0 0 0.875rem;
+}
+.todo-trigger-detail {
+  display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  color: var(--color-text-tertiary);
+  gap: 0.1875rem;
+  max-width: 0;
+  margin-left: 0;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateX(-0.1875rem);
+  transition: max-width 0.18s ease, margin-left 0.18s ease,
+              opacity 0.12s ease, transform 0.18s ease;
+}
+.todo-panel.has-todos .todo-trigger-detail {
+  max-width: 5rem;
+  margin-left: 0.3125rem;
+  opacity: 1;
+  transform: translateX(0);
+}
+.todo-count {
+  color: inherit;
   font-weight: 500;
-  font-size: 0.75rem;
-  margin-bottom: 0.5rem;
-  cursor: pointer;
-  user-select: none;
+  font-variant-numeric: tabular-nums;
 }
-.todo-header:hover { color: var(--color-text-secondary); }
-.todo-toggle {
-  width: 0.7rem;
-  height: 0.7rem;
+.todo-caret {
+  width: 0.625rem;
+  height: 0.625rem;
   flex-shrink: 0;
+  /* Dimmed relative to the icon and count, matching #session-info-bar .sib-caret. */
+  opacity: 0.75;
   transition: transform 0.15s ease;
 }
-.todo-panel.collapsed .todo-list { display: none; }
-.todo-panel.collapsed .todo-toggle { transform: rotate(-90deg); }
-.todo-panel.collapsed .todo-header { margin-bottom: 0; }
-.todo-count {
-  font-weight: 500;
-  color: var(--color-text-muted, var(--color-text-tertiary));
+.todo-panel:not(.is-open) .todo-caret { transform: rotate(180deg); }
+
+.todo-popover {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  width: min(22rem, calc(100vw - 1.5rem));
+  max-height: min(24rem, calc(100vh - 7rem));
+  overflow: hidden;
+  transform: translate(-50%, -100%);
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  white-space: normal;
+}
+.todo-popover[hidden] { display: none; }
+.todo-popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.4375rem 0.5rem 0.4375rem 0.75rem;
+  border-bottom: 1px solid var(--color-border-primary);
+}
+.todo-popover-heading {
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+.todo-popover-title {
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+.todo-summary {
+  color: var(--color-text-tertiary);
+  font-size: 0.6875rem;
+}
+.todo-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  color: var(--color-text-tertiary);
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.todo-close:hover,
+.todo-close:focus-visible {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+  outline: none;
+}
+.todo-close svg { width: 0.875rem; height: 0.875rem; }
+.todo-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 1px;
+  min-height: 0;
+  max-height: 18rem;
+  overflow-y: auto;
+  padding: 0.375rem;
 }
-.todo-list { display: flex; flex-direction: column; gap: 1px; }
 .todo-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.2rem 0.5rem;
+  padding: 0.4375rem 0.5rem;
   border-radius: var(--radius-sm, 6px);
   color: var(--color-text-secondary);
+  font-size: 0.75rem;
   line-height: 1.4;
   transition: background 0.12s ease;
 }
@@ -4817,7 +5255,33 @@ body {
 .todo-item:not(.done) .todo-icon {
   color: var(--color-border-strong, #d4d4ce);
 }
-.todo-text { flex: 1; word-break: break-word; }
+.todo-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent);
+  mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent);
+}
+.todo-text__content {
+  display: inline-block;
+  min-width: max-content;
+  transform: translateX(0);
+  transition: transform 0.18s ease-out;
+}
+.todo-item.todo-text-scrolling .todo-text__content {
+  transform: translateX(calc(-1 * var(--todo-text-scroll-distance)));
+  transition-duration: var(--todo-text-scroll-duration);
+  transition-delay: 0.3s;
+  transition-timing-function: linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .todo-trigger,
+  .todo-trigger-detail,
+  .todo-caret,
+  .todo-text__content { transition: none; }
+}
 
 /* ── Token usage line ────────────────────────────────────────────────────── */
 .token-usage-line {
@@ -5253,7 +5717,7 @@ body {
 /*
  * Visual hierarchy (3 tiers):
  *   Tier 1 primary   (opacity 1.00)  — status, model      → "what am I and is it running"
- *   Tier 2 secondary (opacity ~0.75) — dir, tasks         → "contextual info"
+ *   Tier 2 secondary (opacity ~0.75) — dir, todo          → "contextual info"
  *   Tier 3 tertiary  (opacity ~0.45) — id, mode, cost, │  → "can be glanced over"
  * Base bar opacity is kept high so primary tier stays fully readable; the
  * hover :hover rule lifts everything to 1.0 for detail inspection.
@@ -5305,11 +5769,6 @@ body {
   opacity: 0.85;
 }
 
-/* Show all fields by default, not just on hover */
-.sib-detail {
-  display: contents;
-}
-
 #sib-id {
   opacity: 1;
   font-size: 0.625rem;
@@ -5457,14 +5916,27 @@ body {
   opacity: 1;
 }
 
-#sib-mode  { opacity: 0.45; flex-shrink: 0; }   /* tier 3 */
+#sib-mode {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  font: inherit;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+#sib-mode:disabled { opacity: 0.5; cursor: default; }
+#sib-mode-menu { position: fixed; width: 240px; box-sizing: border-box; white-space: normal; padding: 4px; z-index: 1000; }
+#sib-mode-menu[hidden] { display: none; }
+#sib-mode-menu button { display: block; width: 100%; text-align: left; padding: 9px; border: 0; border-radius: 6px; background: transparent; color: var(--color-text-primary); cursor: pointer; }
+#sib-mode-menu button:hover, #sib-mode-menu button[aria-checked="true"] { background: var(--color-bg-hover); }
+#sib-mode-menu small { display: block; margin-top: 4px; color: var(--color-text-secondary); line-height: 1.5; }
 #sib-model { opacity: 1;    flex-shrink: 0; }   /* tier 1 — the model is primary */
-#sib-tasks { opacity: 0.75; flex-shrink: 0; }   /* tier 2 */
 #sib-cost  { opacity: 0.45; flex-shrink: 0; }   /* tier 3 */
 
-/* ── Latency signal (right after model name) ──────────────────────────────
-   A compact 4-bar signal + TTFT value. Placed adjacent to #sib-model so the
-   user's mental mapping "this model is fast/slow" is immediate. Variant
+/* ── Latency signal (right of the task list) ──────────────────────────────
+   A compact 4-bar signal + TTFT value. A trailing metric, so it sits after
+   the pickers and the task list, just before the cost. Variant
    classes (-ok/-warn/-bad) are applied by Sessions._renderSignal based on
    TTFT thresholds; colours intentionally use CSS vars so the same palette
    works in both light and dark themes. */
@@ -5574,10 +6046,11 @@ body {
 #sib-model.sib-model-no-subs .sib-caret {
   display: none;
 }
-/* The dir/reasoning carets are hints only: clicking them must reach the row,
-   and the row hover already provides the feedback. */
+/* The dir/reasoning/mode carets are hints only: clicking them must reach the
+   row, and the row hover already provides the feedback. */
 #sib-dir .sib-caret,
-.sib-reasoning-clickable .sib-caret {
+.sib-reasoning-clickable .sib-caret,
+.sib-mode-clickable .sib-caret {
   pointer-events: none;
 }
 .sib-model-clickable:hover .sib-caret,
@@ -5585,7 +6058,9 @@ body {
 #sib-dir:hover .sib-caret,
 #sib-dir.is-open .sib-caret,
 .sib-reasoning-clickable:hover .sib-caret,
-.sib-reasoning-clickable.is-open .sib-caret {
+.sib-reasoning-clickable.is-open .sib-caret,
+.sib-mode-clickable:hover .sib-caret,
+.sib-mode-clickable.is-open .sib-caret {
   opacity: 1;
 }
 /* Hovering the model caret needs feedback of its own: the row hover already
@@ -5597,7 +6072,8 @@ body {
 }
 .sib-model-clickable.is-open .sib-caret,
 #sib-dir.is-open .sib-caret,
-.sib-reasoning-clickable.is-open .sib-caret {
+.sib-reasoning-clickable.is-open .sib-caret,
+.sib-mode-clickable.is-open .sib-caret {
   transform: rotate(180deg);
 }
 .sib-model-disabled .sib-caret {
@@ -5632,7 +6108,8 @@ body {
 /* Pickers render as outlined pills so they read as controls, not status text. */
 #session-info-bar #sib-dir,
 #session-info-bar .sib-model-clickable,
-#session-info-bar .sib-reasoning-clickable {
+#session-info-bar .sib-reasoning-clickable,
+#session-info-bar .sib-mode-clickable {
   height: 1.375rem;
   padding: 0 0.4375rem 0 0.5rem;
   border: 1px solid var(--color-border-primary);
@@ -5644,9 +6121,11 @@ body {
 #session-info-bar #sib-dir:hover,
 #session-info-bar .sib-model-clickable:hover,
 #session-info-bar .sib-reasoning-clickable:hover,
+#session-info-bar .sib-mode-clickable:hover,
 #session-info-bar #sib-dir.is-open,
 #session-info-bar .sib-model-clickable.is-open,
-#session-info-bar .sib-reasoning-clickable.is-open {
+#session-info-bar .sib-reasoning-clickable.is-open,
+#session-info-bar .sib-mode-clickable.is-open {
   background: var(--color-bg-secondary);
   border-color: var(--color-text-tertiary);
   color: var(--color-text-primary);
@@ -5663,7 +6142,8 @@ body {
   display: none;
 }
 #sib-model-wrap,
-#sib-reasoning-wrap {
+#sib-reasoning-wrap,
+#sib-mode-wrap {
   margin-left: 0.1875rem;
 }
 .sib-reasoning-dropdown {
@@ -5753,9 +6233,11 @@ body {
   margin-left: 0.5rem;
   opacity: 0.8;
 }
+/* Same tokens as .sib-submodel-default-tag: the dropdown's "default" badge and
+   the variant panel's tag say the same word, so they wear one color. */
 .sib-model-option .model-badge.default {
-  background: var(--color-success-bg);
-  color: var(--color-success);
+  background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
+  color: var(--color-text-secondary);
 }
 .sib-model-option .model-badge.lite {
   background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
@@ -5816,7 +6298,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
 }
 .sib-submodel-toggle:hover {
   background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
@@ -5841,6 +6323,22 @@ body {
   transition: transform 0.18s ease;
 }
 
+/* The switcher is an affordance, not information: every row can offer one
+   (each row knows its provider's models), so it stays out of the way until the
+   row is reached. The selected row keeps it visible — it marks that the
+   session already runs a variant. */
+.sib-model-option .sib-submodel-toggle {
+  opacity: 0;
+  pointer-events: none;
+}
+.sib-model-option:hover .sib-submodel-toggle,
+.sib-model-option.current .sib-submodel-toggle,
+.sib-model-option.submodel-open .sib-submodel-toggle,
+.sib-model-option .sib-submodel-toggle:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .sib-model-option.submodel-open {
   background: var(--color-bg-hover);
 }
@@ -5913,36 +6411,6 @@ body {
   white-space: nowrap;
 }
 
-/* ── Model picker header ───────────────────────────────────────────────────
-   The dropdown lists models from every provider, so the header states which
-   provider and model are live — otherwise the rows read as a provider chooser.
-   It scrolls away with the list; .sib-model-bench below is the sticky row. */
-.sib-picker-head {
-  padding: 0.5rem 0.875rem 0.4375rem;
-  border-bottom: 1px solid var(--color-border-primary);
-}
-.sib-picker-title {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-.sib-picker-sub {
-  margin-top: 0.1875rem;
-  font-size: 0.625rem;
-  color: var(--color-text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sib-picker-sub-value {
-  font-family: var(--font-mono, monospace);
-  color: var(--color-text-primary);
-}
-.sib-picker-sub-sep {
-  padding: 0 0.3125rem;
-  color: var(--color-text-tertiary);
-}
-
 /* ── Model switcher benchmark banner & latency column ──────────────────────
    The banner sits at the top of the dropdown with a subtle border so it
    visually separates from the scrollable model list below. The ⚡ button is
@@ -6108,8 +6576,10 @@ body {
 .sib-model-option .sib-model-name.has-sub {
   flex-direction: column;
   align-items: stretch;
-  gap: 0.1875rem;
+  gap: 0.375rem;
 }
+/* Lead line of a row: the provider the model runs through (or the model name
+   on rows with no provider), so it carries the weight. */
 .sib-model-option .sib-model-name-main {
   display: inline-flex;
   align-items: center;
@@ -6117,6 +6587,7 @@ body {
   overflow: hidden;
   flex: 0 1 auto;
   min-width: 0;
+  font-weight: 500;
 }
 .sib-model-option .sib-model-name-text {
   overflow: hidden;
@@ -6172,15 +6643,25 @@ body {
   fill: initial;
 }
 .sib-model-option .sib-model-name-sub {
-  /* Indent past the vendor badge so it lines up with the model name. */
-  padding-left: 1.5rem;
+  /* Detail line under the provider: vendor mark + model name (+ remark), so it
+     starts at the row's left edge instead of indenting past the badge. */
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
   font-size: 0.6875rem;
   color: var(--color-text-secondary);
-  opacity: 0.75;
+  overflow: hidden;
+  max-width: 100%;
+}
+/* The selected row accents its provider line only; the model stays a detail. */
+.sib-model-option.current .sib-model-name-sub .sib-model-name-text {
+  color: var(--color-text-secondary);
+}
+.sib-model-option .sib-model-name-remark {
+  color: var(--color-text-tertiary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
 }
 .sib-model-option .sib-model-name-override {
   font-size: 0.6875rem;
@@ -6197,6 +6678,36 @@ body {
   gap: 0.5rem;
   flex-shrink: 0;
 }
+/* Per-row shortcut to the provider's own console (top up / manage the key).
+   Revealed on hover or keyboard focus so it never competes with the model name.
+   Opacity rather than display, so revealing it cannot shift the rest of the row;
+   pointer-events follow the same states so an invisible chip stays unclickable. */
+.sib-model-option .sib-topup-btn {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 1px 0.4375rem;
+  font-size: 0.5625rem;
+  font-family: inherit;
+  line-height: 1.6;
+  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
+  color: var(--color-accent-primary);
+  text-decoration: none;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease;
+}
+.sib-model-option:hover .sib-topup-btn,
+.sib-model-option .sib-topup-btn:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.sib-model-option .sib-topup-btn:hover {
+  background: color-mix(in srgb, var(--color-accent-primary) 16%, transparent);
+}
 .sib-model-price {
   font-size: 0.625rem;
   font-variant-numeric: tabular-nums;
@@ -6291,7 +6802,8 @@ body {
 }
 
 /* Attachment strip — top part of the composer card, above the input row */
-#image-preview-strip {
+#image-preview-strip,
+#ns-image-preview-strip {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -6299,12 +6811,6 @@ body {
   /* Divider to the input row — the strip is display:none when no chips exist. */
   border-bottom: 1px solid var(--color-border-primary);
 }
-#ns-image-preview-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  padding: 0.25rem 0 0.5rem;
-}
 .img-preview-item {
   position: relative;
   width: 3.25rem;
@@ -6319,6 +6825,7 @@ body {
   height: 100%;
   object-fit: cover;
 }
+.img-preview-thumb { cursor: zoom-in; }
 .img-preview-remove {
   position: absolute;
   top: 2px;
@@ -7168,6 +7675,16 @@ body {
   line-height: 1.5;
   margin: 0;
 }
+.settings-network-note {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+  margin: 0;
+}
+.settings-network-divider {
+  border-top: 1px solid var(--color-border-secondary);
+  padding-top: 0.75rem;
+}
 
 /* ── Backup section ── */
 .backup-auto-card {
@@ -7191,11 +7708,6 @@ body {
 .backup-option {
   margin: 0.75rem 0;
 }
-.backup-option-nested {
-  margin: 0.5rem 0 0.25rem 2.75rem;
-  font-size: 0.78125rem;
-  color: var(--color-text-secondary);
-}
 .backup-auto-row {
   display: flex;
   align-items: center;
@@ -7229,19 +7741,33 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.btn-settings-link {
+/* One button shape for the whole backup page — "Open", "Download backup" and
+   "Restore backup" are the same kind of control, so they share size, radius and
+   hover instead of the two sizes the path row and the action row used to have. */
+.btn-backup-action {
   flex-shrink: 0;
-  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2rem;
+  padding: 0 0.875rem;
   border: 1px solid var(--color-border-primary);
-  border-radius: 6px;
-  color: var(--color-accent-primary);
-  font-size: 0.75rem;
-  padding: 0.25rem 0.625rem;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
   cursor: pointer;
   white-space: nowrap;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
-.btn-settings-link:hover {
-  border-color: var(--color-accent-primary);
+.btn-backup-action:hover:not(:disabled) {
+  background: var(--color-bg-hover);
+  border-color: var(--color-text-muted);
+  color: var(--color-text-primary);
+}
+.btn-backup-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 .backup-actions {
   display: flex;
@@ -7255,9 +7781,6 @@ body {
   padding-top: 0.75rem;
   border-top: 1px solid var(--color-border);
 }
-.btn-settings-action--file {
-  cursor: pointer;
-}
 .backup-actions-sep {
   width: 1px;
   height: 1.25rem;
@@ -7295,6 +7818,77 @@ body {
   gap: 0.625rem;
   flex-shrink: 0;
 }
+
+/* ── Browser screenshot settings ────────────────────────────────────────── */
+.settings-screenshot {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.875rem 1rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 10px;
+}
+.settings-screenshot-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.settings-screenshot-head {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1875rem;
+  padding-bottom: 0.125rem;
+}
+.settings-screenshot-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.settings-screenshot-desc {
+  margin: 0.25rem 0 0.5rem 0;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+}
+.settings-screenshot-label {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+}
+.settings-segmented {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 7px;
+}
+.settings-segmented-btn {
+  border: 0;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  padding: 0.1875rem 0.625rem;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.settings-segmented-btn:hover:not(.active) {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+.settings-segmented-btn.active {
+  background: var(--color-accent-primary);
+  color: var(--color-text-inverse);
+}
+.settings-screenshot-hint {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+}
 .toggle-switch {
   position: relative;
   display: inline-flex;
@@ -7859,8 +8453,21 @@ body {
   white-space: nowrap;
 }
 .model-card-grid-remark {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  min-width: 0;
   font-size: 0.75rem;
   color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+.model-card-grid-remark-label {
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+  font-size: 0.6875rem;
+  letter-spacing: 0.3px;
+}
+.model-card-grid-remark-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -11882,7 +12489,20 @@ body.setup-mode {
 .badge-active       { color: var(--color-success); }
 .badge-expired      { color: var(--color-error); }
 .badge-expiring     { color: var(--color-warning); }
-.badge-unreachable  { color: var(--color-text-secondary); }
+.badge-unreachable  { color: var(--color-warning); }
+.brand-status-state {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.brand-status-hint {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--color-warning);
+}
 .badge-inactive     { color: var(--color-text-secondary); }
 
 /* Support QR code */
@@ -12008,7 +12628,7 @@ body.setup-mode {
   background: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   border-radius: 16px;
-  padding: 1.75rem 2rem 1.5rem;
+  padding: 3.25rem 2rem 1.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -12932,7 +13552,7 @@ body.setup-mode {
  * Assistant Memory is a 3-tab read-only window:
  *   🧬 Soul      – SOUL.md  + "Have the assistant curate this"   → /onboard scope:soul
  *   👤 User      – USER.md  + "Have the assistant update this"   → /onboard scope:user
- *   🧠 Memories  – cards with Curate + Delete (→ File Recall)    → /onboard path:<abs>
+ *   🧠 Memories  – cards with Curate + Delete (→ Recycle Bin)     → /onboard path:<abs>
  *
  * All mutations go through agent sessions; there are no inline editors.
  * All colours use design tokens from :root / [data-theme="dark"] above —
@@ -13357,19 +13977,28 @@ body.setup-mode {
   padding: 1.5rem 0;
 }
 
-/* Tab switches (file trash / session trash) — mirrors skills-tabs pattern */
+/* Tab switches (file trash / session trash) — a segmented control; the pill
+   styles live in the "Segmented Control" block near the top of this file.
+   The wrapper is a flex row so the track hugs its buttons instead of
+   stretching to the full content width. */
 #trash-tabs {
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
-}
-.trash-tabs-left {
   display: flex;
-  gap: 0.25rem;
+  margin-bottom: 0.25rem;
 }
 
 .trash-tab-content {
   flex: 1;
   overflow-y: auto;
+  /* The list scrolls on its own so the toolbar above it stays put. Pulling the
+     box out into #trash-body's right padding leaves the cards where they are and
+     parks the scrollbar in that gutter instead of against the cards — the same
+     trick the tasks and skills lists use. */
+  margin-right: -2.25rem;
+  padding-right: 2.25rem;
+  /* #trash-body's section gap is meant for the stacked heading blocks above; the
+     toolbar and the list are one block, so halve it and let the strip sit exactly
+     one card-gap above the list instead of floating over a band of empty space. */
+  margin-top: -0.625rem;
 }
 
 /* Session trash card — similar to file trash card but shows session name and timestamp */
@@ -13392,7 +14021,6 @@ body.setup-mode {
 }
 .trash-session-card-name {
   font-size: 0.875rem;
-  font-weight: 500;
   color: var(--color-text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -13525,7 +14153,7 @@ body.setup-mode {
   color: var(--color-text-secondary);
 }
 .trash-summary {
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   color: var(--color-text-muted);
   margin-right: auto;
 }
@@ -13534,36 +14162,29 @@ body.setup-mode {
   align-items: center;
   gap: 0.375rem;
 }
-/* One shape for every control in the toolbar — filter chips, project picker and
+/* One shape for every control in the toolbar — the filter dropdowns and the
    bulk actions share height, radius and type scale so the row reads as a strip. */
-.trash-filter-chip,
 .trash-filter-project-wrap,
 .btn-trash-action {
-  height: 1.75rem;
+  height: 2.125rem;
   display: inline-flex;
   align-items: center;
-  gap: 0.3125rem;
-  padding: 0 0.625rem;
-  border-radius: 6px;
+  gap: 0.375rem;
+  padding: 0 0.75rem;
+  border-radius: 8px;
   border: 1px solid var(--color-border-primary);
   background: transparent;
   color: var(--color-text-secondary);
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
-.trash-filter-chip:hover:not(.active),
 .trash-filter-project-wrap:hover,
 .btn-trash-action:hover:not(:disabled) {
   background: var(--color-bg-hover);
   border-color: var(--color-text-muted);
   color: var(--color-text-primary);
 }
-.trash-filter-chip.active {
-  background: var(--color-accent-primary);
-  border-color: var(--color-accent-primary);
-  color: #fff;
-}
 /* Project filter dropdown */
 .trash-filter-project-wrap {
   position: relative;
@@ -13584,7 +14205,15 @@ body.setup-mode {
   max-width: 130px;
 }
 .trash-filter-project-wrap .custom-select-trigger--bare {
-  font-size: 0.75rem;   /* matches the neighbouring chips and action buttons */
+  font-size: 0.8125rem;   /* matches the neighbouring chips and action buttons */
+}
+/* The chip is wider and taller than the trigger inside it — the icon and the
+   shared padding sit outside the trigger — so clicks on those edges did
+   nothing. Cover the whole control with the trigger's (empty) hit area. */
+.trash-filter-project-wrap .custom-select-trigger::after {
+  content: "";
+  position: absolute;
+  inset: 0;
 }
 .trash-actions {
   display: flex;
@@ -13675,6 +14304,194 @@ body.setup-mode {
   border: 1px solid rgba(217, 119, 6, .3);
 }
 
+/* ═════════════════════════════════════════════════════════════════════════
+ * ARCHIVE PANEL — archived chats, grouped by project
+ * ═════════════════════════════════════════════════════════════════════════ */
+
+#archive-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+#archive-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.75rem 2.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.archive-search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.4375rem;
+  flex: 1;
+  min-width: 0;
+  /* Capped like the tasks search: the field should look like a search box, not a
+     rule stretched across the toolbar. */
+  max-width: 18rem;
+  height: 2.125rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+}
+.archive-search-wrap:focus-within {
+  border-color: var(--color-accent-primary);
+}
+.archive-search-icon {
+  flex-shrink: 0;
+}
+.archive-search-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: 0.8125rem;
+}
+.archive-search-input::placeholder {
+  color: var(--color-text-muted);
+}
+/* The count anchors the right edge — without it the row would stop mid-card now
+   that the search field no longer fills the space. */
+#archive-summary {
+  margin-right: 0;
+  margin-left: auto;
+}
+#archive-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.archive-group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+.archive-group-icon {
+  width: 13px;
+  height: 13px;
+  color: var(--color-text-muted);
+}
+.archive-group-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-text-muted);
+  flex-shrink: 0;
+}
+.archive-group-count {
+  font-weight: 400;
+  color: var(--color-text-muted);
+}
+.archive-group-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.btn-archive-unarchive {
+  height: 1.75rem;
+  padding: 0 0.625rem;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-primary);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.btn-archive-unarchive:hover:not(:disabled) {
+  background: var(--color-bg-hover);
+  border-color: var(--color-text-muted);
+  color: var(--color-text-primary);
+}
+.btn-archive-delete {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-primary);
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.btn-archive-delete:hover:not(:disabled) {
+  background: var(--color-error-bg);
+  border-color: var(--color-error, #ef4444);
+  color: var(--color-error, #ef4444);
+}
+.btn-archive-unarchive:disabled,
+.btn-archive-delete:disabled {
+  opacity: .4;
+  cursor: not-allowed;
+}
+.archive-empty {
+  padding: 3rem 0;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+}
+/* Same shape as the session-list and extensions load-more rows: a full-width
+   button under the list, not a toolbar chip squeezed into the middle. */
+#btn-archive-load-more {
+  display: block;
+  width: 100%;
+  padding: 0.6rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+#btn-archive-load-more:hover:not(:disabled) {
+  border-color: var(--color-text-muted);
+  color: var(--color-text-primary);
+}
+#btn-archive-load-more:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* ═════════════════════════════════════════════════════════════════════════
+ * BACKUP PANEL — backup controls, moved out of the Settings page
+ * ═════════════════════════════════════════════════════════════════════════ */
+
+#backup-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+#backup-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.75rem 2.25rem;
+}
+#backup-content {
+  max-width: 920px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 /* Trash panel — matches Channels layout for visual consistency */
 #trash-panel {
   flex: 1;
@@ -13694,7 +14511,7 @@ body.setup-mode {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.625rem 0.875rem;
+  padding: 0.75rem 0.875rem;
   border: 1px solid var(--color-border-primary);
   border-radius: 10px;
   background: var(--color-bg-secondary);
@@ -13713,6 +14530,7 @@ body.setup-mode {
   background: color-mix(in srgb, var(--color-bg-hover) 70%, var(--color-bg-secondary));
   border-radius: 8px;
   padding: 3px;
+  transition: background 0.35s ease;
 }
 .segmented-control__btn {
   padding: 0.3125rem 0.75rem;
@@ -13722,7 +14540,7 @@ body.setup-mode {
   font-size: 0.8125rem;
   cursor: pointer;
   border-radius: 6px;
-  transition: all 0.15s ease;
+  transition: all 0.35s ease;
   white-space: nowrap;
 }
 .segmented-control__btn:hover:not(.active) {
@@ -13745,6 +14563,12 @@ body.setup-mode {
   background: var(--color-bg-hover);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 }
+/* Hover deepens the track itself rather than the button under the cursor,
+   so the active pill never competes with a second raised surface. Declared
+   after the theme overrides above, which it has to outrank on dark tracks. */
+.segmented-control:hover {
+  background: color-mix(in srgb, var(--color-text-primary) 2%, var(--color-bg-hover));
+}
 
 /* ═════════════════════════════════════════════════════════════════════════
  * BILLING PANEL
@@ -15687,9 +16511,21 @@ body.setup-mode {
     white-space: nowrap;
   }
 
-  /* Tighten header padding */
+  /* Tighten header padding. The sidebar is an overlay drawer here, so the
+     left zone is no longer pinned to it and carries no divider. */
   #top-header {
-    padding: 0 0.75rem;
+    padding: 0;
+  }
+  #header-left {
+    width: auto;
+    margin-left: 0;
+    padding: 0 0 0 0.75rem;
+  }
+  #header-left::after {
+    display: none;
+  }
+  #header-right {
+    padding-right: 0.75rem;
   }
 
   /* Hide brand name and divider on mobile, keep only the logo icon */
@@ -15717,8 +16553,10 @@ body.setup-mode {
 
   @media (max-width: 360px) {
     #top-header {
-      padding: 0 0.375rem;
+      padding: 0;
     }
+    #header-left  { padding-left: 0.375rem; }
+    #header-right { padding-right: 0.375rem; }
   }
 
   /* Session info bar: single-line, no hover-expand, font smaller */
@@ -15731,19 +16569,12 @@ body.setup-mode {
     white-space: nowrap;
     flex-wrap: nowrap;
   }
-  /* Always show detail fields on mobile (no hover) */
-  #session-info-bar .sib-detail {
-    display: contents;
-  }
   /* Hide less-important fields and their separators (element + sib-sep-after-element pattern) */
   #sib-id,
   .sib-sep-after-id,
   #sib-dir,
   .sib-sep-after-dir,
-  #sib-mode,
-  .sib-sep-after-mode,
   #sib-reasoning-wrap,
-  .sib-sep-after-reasoning,
   #sib-signal-wrap,
   .sib-sep-after-signal {
     display: none;
@@ -15987,9 +16818,74 @@ body.setup-mode {
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
   }
-  /* ── Billing / Trash pages ── */
+  /* ── Billing / Trash / Archive / Backup pages ── */
   #billing-body { padding: 1rem 1rem 1rem; }
   #trash-body   { padding: 1rem 1rem 1rem; }
+  .trash-tab-content { margin-right: -1rem; padding-right: 1rem; }
+  #archive-body { padding: 1rem 1rem 1rem; }
+  #backup-body  { padding: 1rem 1rem 1rem; }
+  #data-management-header { padding: 1rem 1rem 0; }
+  #data-management-tabs { margin: 1rem 1rem 0; }
+
+  .billing-chart-card {
+    padding: 0.875rem;
+  }
+  .billing-heatmap-year .billing-heat-year-wrap {
+    gap: 0;
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+  }
+  .billing-heat-dow-year {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    width: 24px;
+    padding-right: 6px;
+    background: var(--color-bg-secondary);
+  }
+  .billing-heat-content {
+    flex: 0 0 auto;
+    width: max-content;
+  }
+  .billing-heat-grid-year {
+    justify-content: flex-start;
+    width: max-content;
+    gap: 3px;
+  }
+  .billing-heat-week {
+    flex: 0 0 13px;
+    width: 13px;
+    gap: 3px;
+  }
+  .billing-heat-week .billing-heat-cell {
+    width: 13px;
+    height: 13px;
+    max-width: none;
+    max-height: none;
+    aspect-ratio: auto;
+  }
+  .billing-heat-week .billing-heat-cell.is-active {
+    outline: 2px solid var(--color-accent-primary);
+    outline-offset: 1px;
+  }
+  .billing-trend-card {
+    min-height: 13.75rem;
+  }
+  .billing-trend-chart {
+    min-height: 10rem;
+  }
+  .billing-trend-y-label,
+  .billing-trend-x-label {
+    font-size: 10px;
+  }
+  .billing-trend-line {
+    stroke-width: 2;
+  }
+  .billing-trend-dot {
+    opacity: 1;
+  }
 
   .billing-controls .segmented-control {
     flex: 1 0 100%;
@@ -16039,11 +16935,17 @@ body.setup-mode {
   .memory-card-head        { flex-wrap: wrap; }
   .memory-card-actions     { margin-top: 0.375rem; flex-wrap: wrap; }
 
-  /* ── File Recall page ── */
+  /* ── Recycle Bin page ── */
   .trash-toolbar {
     flex-wrap: wrap;
     gap: 0.5rem;
   }
+  /* The capped search field would otherwise shrink to a sliver next to the
+     filter chips once the row wraps — give it the full line instead. */
+  .archive-search-wrap {
+    flex-basis: 100%;
+    max-width: none;
+  }
   .trash-summary {
     width: 100%;
   }
@@ -16427,26 +17329,22 @@ body.setup-mode {
 .project-actions-menu-item:hover .project-actions-menu-icon {
   color: var(--color-text-primary);
 }
-.project-actions-menu-item.danger {
-  color: var(--color-error);
-  margin-top: 0.25rem;
-  position: relative;
-}
-.project-actions-menu-item.danger .project-actions-menu-icon,
-.project-actions-menu-item.danger:hover .project-actions-menu-icon {
-  color: var(--color-error);
+.project-actions-menu-item.danger .project-actions-menu-icon {
+  color: var(--color-text-secondary);
 }
-.project-actions-menu-item.danger::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -0.1875rem;
+/* The last group (archive + delete) is set off by an explicit divider element,
+   so the danger styling itself draws no line. */
+.project-actions-menu-divider {
   height: 1px;
+  margin: 0.3125rem 0;
   background: var(--color-border-secondary);
 }
 .project-actions-menu-item.danger:hover {
   background: var(--color-error-bg);
+  color: var(--color-error);
+}
+.project-actions-menu-item.danger:hover .project-actions-menu-icon {
+  color: var(--color-error);
 }
 
 /* ── Organize menu (view-mode toggle) ──────────────────────────────────────── */
@@ -16879,3 +17777,14 @@ body.setup-mode {
 .qq-qr-open-btn:hover { opacity: 0.92; }
 .qq-qr-copy-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 14px; cursor: pointer; }
 .qq-qr-copy-btn:hover { border-color: var(--color-accent-primary); }
+.qq-qr-frame-wrap { position: relative; width: 320px; max-width: 100%; height: 460px; margin: 0 auto 12px; border-radius: 12px; overflow: hidden; }
+.qq-qr-frame { width: 100%; height: 100%; border: 0; display: block; }
+.qq-qr-frame-wrap.expired .qq-qr-frame { filter: blur(4px); opacity: 0.35; pointer-events: none; }
+.qq-qr-refresh { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 0; background: transparent; color: #1f2329; font-size: 14px; font-weight: 600; cursor: pointer; }
+.qq-qr-refresh[hidden] { display: none; }
+.qq-qr-refresh:disabled { cursor: progress; opacity: 0.7; }
+.qq-qr-refresh-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-accent-primary); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
+.qq-qr-refresh:hover .qq-qr-refresh-icon { opacity: 0.92; }
+.qq-qr-success { padding: 8px 0 4px; }
+.qq-qr-success-title { font-size: 18px; font-weight: 600; color: var(--color-accent-primary); margin-top: 8px; }
+.qq-qr-success .qq-qr-open-btn { border: 0; cursor: pointer; margin-top: 4px; }