openclacky 1.5.20 → 1.5.21

data/lib/clacky/web/app.css

@@ -1237,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);
@@ -1255,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 */
@@ -1285,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;
@@ -1578,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 */
@@ -1629,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 {
@@ -4208,10 +4359,18 @@ 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; }
+/* 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); }
@@ -4235,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;
@@ -4257,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; }
@@ -4702,6 +4862,7 @@ body {
 }
 .feedback-actions {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
   gap: 0.5rem;
@@ -4736,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;
@@ -4939,11 +5101,13 @@ body {
   height: 1.375rem;
   padding: 0.1875rem 0.25rem;
   overflow: hidden;
-  color: var(--color-text-tertiary);
   background: transparent;
   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;
@@ -4996,6 +5160,8 @@ body {
   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:not(.is-open) .todo-caret { transform: rotate(180deg); }
@@ -5603,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;
@@ -5755,13 +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-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. */
@@ -5871,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,
@@ -5882,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
@@ -5894,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 {
@@ -5929,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);
@@ -5941,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);
@@ -5960,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 {
@@ -6619,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;
@@ -6627,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;
@@ -7497,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 {
@@ -7630,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;
@@ -12230,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 */
@@ -12356,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;
@@ -16297,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;
@@ -17064,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) ──────────────────────────────────────── */