shortcutxl 0.3.76 → 0.3.78

package/native-app/renderer/assets/{index-OhGE0UY4.css → index-C__g36ft.css}

@@ -1,3 +1,11 @@
+/*
+ * Shortcut design-language palette. One hue axis (155, the brand green);
+ * only danger (22) and warning (70 light / 84 dark) leave it. Light mode is
+ * the app language: grey canvas, white where you act. Brand anchors: light
+ * #217346 (Excel green), dark a tempered mint kept below body-text luminance
+ * so chrome never outshines content. All text/bg pairs verified >= 4.5:1 and
+ * rings >= 3:1 on every surface they render on, both themes.
+ */
 :root,
 :root[data-theme='terminal-light'] {
   font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
@@ -6,49 +14,50 @@
   font-synthesis: weight;
   font-kerning: normal;
   --font-terminal: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
-  --font-ui: var(--font-terminal);
   --terminal-text-size: 0.75rem;
-  --ink: oklch(23% 0.011 145);
-  --ink-soft: oklch(34% 0.013 145);
-  --muted: oklch(48% 0.014 145);
-  --quiet: oklch(60% 0.012 145);
-  --line: oklch(91.5% 0.008 145);
-  --line-strong: oklch(84.5% 0.012 145);
-  --canvas: oklch(98.8% 0.004 145);
-  --surface: oklch(99.4% 0.003 145);
-  --surface-raised: oklch(99.8% 0.002 145);
-  --sidebar: oklch(96.9% 0.008 145);
-  --sidebar-active: oklch(93.3% 0.014 145);
-  --terminal-surface: oklch(97.1% 0.006 145);
-  --brand: oklch(43% 0.135 145);
-  --brand-hover: oklch(38% 0.125 145);
-  --brand-soft: oklch(94.8% 0.025 145);
-  --danger: oklch(50% 0.16 25);
-  --danger-soft: oklch(96% 0.025 25);
-  --warning: oklch(48% 0.1 80);
-  --warning-soft: oklch(96.5% 0.035 80);
-  --focus-ring: oklch(65% 0.12 145);
-  --danger-line: oklch(86% 0.05 25);
-  --danger-line-strong: oklch(82% 0.06 25);
-  --menu-shadow: oklch(20% 0.01 145 / 0.16);
-  --dialog-shadow: oklch(20% 0.01 145 / 0.25);
-  --panel-shadow: oklch(20% 0.01 145 / 0.1);
-  --control-active-line: oklch(82% 0.04 145);
-  --notice-line: oklch(86% 0.025 145);
-  --notice-ink: oklch(40% 0.04 145);
-  --warning-line: oklch(86% 0.055 80);
-  --link-underline: oklch(68% 0.08 145 / 0.5);
-  --code-surface: oklch(96.2% 0.006 145);
-  --composer-line: oklch(67% 0.07 145 / 0.7);
-  --composer-line-focus: oklch(67% 0.07 145);
-  --subtle-shadow: oklch(20% 0.01 145 / 0.03);
-  --interaction-surface: var(--surface-raised);
-  --interaction-line: var(--line);
-  --interaction-shadow: var(--subtle-shadow);
-  --on-brand: oklch(98% 0.005 145);
-  --overlay: oklch(20% 0.01 145 / 0.18);
-  --auth-line: oklch(86% 0.025 145);
-  --hover-surface: oklch(94.4% 0.009 145);
+  --ink: oklch(23% 0 0);
+  --ink-soft: oklch(34% 0 0);
+  --muted: oklch(44.5% 0 0);
+  --quiet: oklch(50.5% 0 0);
+  --line: oklch(90.5% 0 0);
+  --line-strong: oklch(83.5% 0 0);
+  --canvas: oklch(97% 0 0);
+  --surface: oklch(99.4% 0 0);
+  --surface-raised: oklch(100% 0 0);
+  --sidebar: oklch(97% 0 0);
+  --sidebar-active: oklch(91.6% 0 0);
+  --terminal-surface: oklch(98.6% 0 0);
+  --brand: oklch(49.5% 0.106 155);
+  --brand-hover: oklch(43% 0.105 155);
+  --brand-soft: oklch(93.8% 0.025 155);
+  --danger: oklch(50% 0.19 22);
+  --danger-soft: oklch(95.4% 0.02 22);
+  --warning: oklch(49% 0.11 70);
+  --warning-soft: oklch(95.8% 0.03 70);
+  --focus-ring: oklch(57% 0.125 155);
+  --affordance-line: oklch(64% 0 0);
+  --think-1: oklch(62% 0.03 155);
+  --think-2: oklch(58% 0.055 155);
+  --think-3: oklch(54% 0.08 155);
+  --think-4: oklch(51% 0.1 155);
+  --danger-line: oklch(85% 0.055 22);
+  --danger-line-strong: oklch(81% 0.07 22);
+  --menu-shadow: oklch(20% 0 0 / 0.16);
+  --dialog-shadow: oklch(20% 0 0 / 0.25);
+  --panel-shadow: oklch(20% 0 0 / 0.1);
+  --control-active-line: oklch(81% 0.04 155);
+  --notice-line: oklch(85% 0.025 155);
+  --notice-ink: oklch(40% 0.04 155);
+  --warning-line: oklch(85% 0.055 70);
+  --link-underline: oklch(68% 0.08 155 / 0.5);
+  --code-surface: oklch(94.4% 0 0);
+  --composer-line: oklch(67% 0.07 155 / 0.7);
+  --composer-line-focus: oklch(58% 0.09 155);
+  --subtle-shadow: oklch(20% 0 0 / 0.03);
+  --on-brand: oklch(98% 0.005 155);
+  --overlay: oklch(20% 0 0 / 0.18);
+  --auth-line: oklch(85% 0 0);
+  --hover-surface: oklch(92.4% 0 0);
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   --radius-control: 6px;
   --radius-surface: 8px;
@@ -57,47 +66,49 @@
 :root[data-theme='terminal-dark'] {
   color: var(--ink);
   background: var(--canvas);
-  --ink: oklch(91% 0.012 145);
-  --ink-soft: oklch(87% 0.016 145);
-  --muted: oklch(76% 0.016 145);
-  --quiet: oklch(66% 0.014 145);
-  --line: oklch(30% 0.014 145);
-  --line-strong: oklch(42% 0.018 145);
-  --canvas: oklch(13.5% 0.01 145);
-  --surface: oklch(18% 0.012 145);
-  --surface-raised: oklch(21% 0.014 145);
-  --sidebar: oklch(14.5% 0.01 145);
-  --sidebar-active: oklch(29% 0.03 145);
-  --terminal-surface: oklch(17% 0.012 145);
-  --brand: oklch(72% 0.16 145);
-  --brand-hover: oklch(80% 0.15 145);
-  --brand-soft: oklch(28% 0.06 145);
-  --danger: oklch(70% 0.16 25);
-  --danger-soft: oklch(27% 0.055 25);
-  --warning: oklch(78% 0.11 80);
-  --warning-soft: oklch(28% 0.05 80);
-  --focus-ring: oklch(72% 0.14 145);
-  --danger-line: oklch(39% 0.08 25);
-  --danger-line-strong: oklch(48% 0.1 25);
-  --menu-shadow: oklch(4% 0.01 145 / 0.58);
-  --dialog-shadow: oklch(4% 0.01 145 / 0.72);
-  --panel-shadow: oklch(4% 0.01 145 / 0.5);
-  --control-active-line: oklch(48% 0.065 145);
-  --notice-line: oklch(42% 0.05 145);
-  --notice-ink: oklch(80% 0.07 145);
-  --warning-line: oklch(42% 0.075 80);
-  --link-underline: oklch(70% 0.11 145 / 0.65);
-  --code-surface: oklch(15% 0.01 145);
-  --composer-line: oklch(52% 0.08 145 / 0.75);
-  --composer-line-focus: oklch(67% 0.11 145);
-  --subtle-shadow: oklch(4% 0.01 145 / 0.45);
-  --interaction-surface: var(--surface-raised);
-  --interaction-line: var(--line);
-  --interaction-shadow: var(--subtle-shadow);
-  --on-brand: oklch(13% 0.025 145);
-  --overlay: oklch(3% 0.01 145 / 0.66);
-  --auth-line: oklch(44% 0.06 145);
-  --hover-surface: oklch(26% 0.025 145);
+  --ink: oklch(91% 0 0);
+  --ink-soft: oklch(87% 0 0);
+  --muted: oklch(76% 0 0);
+  --quiet: oklch(68% 0 0);
+  --line: oklch(32% 0 0);
+  --line-strong: oklch(44% 0 0);
+  --canvas: oklch(16.5% 0 0);
+  --surface: oklch(20% 0 0);
+  --surface-raised: oklch(23.5% 0 0);
+  --sidebar: oklch(16.5% 0 0);
+  --sidebar-active: oklch(31% 0 0);
+  --terminal-surface: oklch(22.5% 0 0);
+  --brand: oklch(78% 0.145 153);
+  --brand-hover: oklch(84% 0.13 153);
+  --brand-soft: oklch(28% 0.05 155);
+  --danger: oklch(71% 0.166 22);
+  --danger-soft: oklch(27% 0.06 22);
+  --warning: oklch(83.7% 0.164 84);
+  --warning-soft: oklch(28% 0.05 84);
+  --focus-ring: oklch(78% 0.145 153);
+  --affordance-line: oklch(52% 0 0);
+  --think-1: oklch(58% 0.03 155);
+  --think-2: oklch(64% 0.06 155);
+  --think-3: oklch(69% 0.09 155);
+  --think-4: oklch(74% 0.12 155);
+  --danger-line: oklch(39% 0.085 22);
+  --danger-line-strong: oklch(48% 0.105 22);
+  --menu-shadow: oklch(4% 0 0 / 0.58);
+  --dialog-shadow: oklch(4% 0 0 / 0.72);
+  --panel-shadow: oklch(4% 0 0 / 0.5);
+  --control-active-line: oklch(48% 0.065 155);
+  --notice-line: oklch(42% 0.05 155);
+  --notice-ink: oklch(84% 0.08 155);
+  --warning-line: oklch(42% 0.075 84);
+  --link-underline: oklch(78% 0.11 153 / 0.65);
+  --code-surface: oklch(19% 0 0);
+  --composer-line: oklch(52% 0.08 155 / 0.75);
+  --composer-line-focus: oklch(72% 0.11 153);
+  --subtle-shadow: oklch(4% 0 0 / 0.45);
+  --on-brand: oklch(25.2% 0.049 156);
+  --overlay: oklch(3% 0 0 / 0.66);
+  --auth-line: oklch(44% 0 0);
+  --hover-surface: oklch(28% 0 0);
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   --radius-control: 6px;
   --radius-surface: 8px;
@@ -168,6 +179,45 @@ button:not(:disabled):active {
   background: var(--sidebar);
 }
 
+.sidebar-account {
+  display: flex;
+  width: 100%;
+  min-height: 30px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 7px;
+  padding: 0 9px;
+  border: 1px solid var(--affordance-line);
+  border-radius: var(--radius-control);
+  color: var(--muted);
+  background: transparent;
+  font-family: var(--font-terminal);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 100ms var(--ease-out),
+    border-color 100ms var(--ease-out);
+}
+
+.sidebar-account.logged-out {
+  border-color: var(--brand);
+  color: var(--on-brand);
+  background: var(--brand);
+}
+
+.sidebar-account.logged-out:hover,
+.sidebar-account.logged-out:focus-visible {
+  border-color: var(--brand-hover);
+  background: var(--brand-hover);
+}
+
+.sidebar-account:not(.logged-out):hover,
+.sidebar-account:not(.logged-out):focus-visible {
+  border-color: var(--line-strong);
+  background: var(--hover-surface);
+}
+
 .new-chat-button {
   display: flex;
   flex: 0 0 auto;
@@ -176,14 +226,23 @@ button:not(:disabled):active {
   gap: 0;
   width: 100%;
   padding: 0 9px;
-  border: 0;
+  border: 1px solid var(--affordance-line);
   border-radius: var(--radius-control);
   color: var(--ink-soft);
-  background: transparent;
+  background: var(--surface);
   font-size: 0.71875rem;
   font-weight: 600;
   text-align: left;
   cursor: pointer;
+  transition:
+    background 100ms var(--ease-out),
+    border-color 100ms var(--ease-out);
+}
+
+.new-chat-button:hover:not(:disabled),
+.new-chat-button:focus-visible {
+  border-color: var(--affordance-line);
+  background: var(--surface-raised);
 }
 
 .new-chat-button:disabled {
@@ -197,9 +256,9 @@ button:not(:disabled):active {
   min-height: 30px;
   flex: 0 0 auto;
   align-items: center;
-  margin-top: 3px;
+  margin-top: 5px;
   padding: 0 9px;
-  border: 0;
+  border: 1px solid var(--line);
   border-radius: var(--radius-control);
   color: var(--muted);
   background: transparent;
@@ -208,6 +267,9 @@ button:not(:disabled):active {
   font-weight: 600;
   text-align: left;
   cursor: pointer;
+  transition:
+    background 100ms var(--ease-out),
+    border-color 100ms var(--ease-out);
 }
 
 .command-center-button:hover,
@@ -526,18 +588,29 @@ button:not(:disabled):active {
 
 .header-control-button,
 .control-button {
-  min-height: 26px;
+  min-height: 24px;
   padding: 0 7px;
-  border: 1px solid transparent;
+  border: 1px solid var(--line);
   border-radius: 5px;
   color: var(--muted);
   background: transparent;
   font-family: var(--font-terminal);
-  font-size: var(--terminal-text-size);
+  font-size: 0.6875rem;
   font-weight: 550;
   cursor: pointer;
 }
 
+.header-control-button[aria-haspopup] {
+  border-color: var(--affordance-line);
+}
+
+.header-control-button[aria-haspopup]::after {
+  content: '▾';
+  flex: 0 0 auto;
+  font-size: 0.5625rem;
+  opacity: 0.7;
+}
+
 .header-control-button,
 .control-button {
   display: inline-flex;
@@ -659,6 +732,7 @@ button:not(:disabled):active {
 
 .notice {
   display: flex;
+  align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin: 12px 24px 0;
@@ -683,6 +757,28 @@ button:not(:disabled):active {
   background: var(--danger-soft);
 }
 
+.notice > span {
+  flex: 1 1 auto;
+}
+
+.notice .notice-login {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 10px;
+  padding: 3px 12px;
+  border: 1px solid var(--brand);
+  border-radius: var(--radius-control);
+  color: var(--on-brand);
+  background: var(--brand);
+  font-weight: 620;
+  cursor: pointer;
+}
+
+.notice .notice-login:hover {
+  border-color: var(--brand-hover);
+  background: var(--brand-hover);
+}
+
 .notice button {
   display: grid;
   flex: 0 0 auto;
@@ -694,21 +790,51 @@ button:not(:disabled):active {
   cursor: pointer;
 }
 
-.conversation {
-  display: grid;
-  flex: 1 1 auto;
+.conversation-frame {
+  position: relative;
   min-height: 0;
-  place-items: center;
+  flex: 1 1 auto;
+}
+
+.conversation {
+  width: 100%;
+  height: 100%;
   overflow: auto;
   padding: 24px var(--chat-inline-gutter) 16px;
   scrollbar-color: var(--line-strong) transparent;
 }
 
+.conversation-content {
+  display: grid;
+  min-height: 100%;
+  place-items: center;
+}
+
 .conversation.command-center-conversation {
-  place-items: start center;
   padding-top: clamp(72px, 16vh, 140px);
 }
 
+.conversation.command-center-conversation .conversation-content {
+  place-items: start center;
+}
+
+.scroll-to-bottom {
+  position: absolute;
+  z-index: 2;
+  right: 18px;
+  bottom: 14px;
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 1px solid var(--line-strong);
+  border-radius: 50%;
+  color: var(--ink-soft);
+  background: var(--surface-raised);
+  box-shadow: 0 6px 18px var(--subtle-shadow);
+  cursor: pointer;
+}
+
 .empty-state {
   width: min(640px, 100%);
   color: var(--muted);
@@ -746,6 +872,123 @@ button:not(:disabled):active {
   width: min(720px, 100%);
 }
 
+/* Wide windows: Environment and Commands sit side by side under the hero. */
+@media (min-width: 1140px) {
+  .runtime-dashboard {
+    display: grid;
+    width: min(940px, 100%);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: 34px;
+    align-items: start;
+  }
+
+  .runtime-dashboard .empty-hero {
+    grid-column: 1 / -1;
+  }
+
+  .runtime-dashboard .command-reference {
+    margin-top: 0;
+  }
+}
+
+/* Start-ellipsis so a deep workspace path keeps its meaningful tail visible. */
+.environment-list .path-tail {
+  direction: rtl;
+  text-align: left;
+}
+
+.empty-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 34px;
+  text-align: left;
+}
+
+.empty-hero-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.empty-hero-brand .hero-mascot {
+  width: 42px;
+  height: auto;
+  image-rendering: pixelated;
+  user-select: none;
+}
+
+.empty-hero-brand .hero-wordmark {
+  height: 64px;
+  width: auto;
+  margin-left: -5px;
+  image-rendering: pixelated;
+  user-select: none;
+}
+
+.empty-hero-brand .hero-spark {
+  color: var(--brand);
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  opacity: 0;
+  animation:
+    fade-in-spin 0.5s ease-in 1.2s forwards,
+    spin-and-pulse 2.5s linear infinite 1.2s;
+}
+
+.empty-hero-tagline {
+  margin-top: 10px;
+  font-size: 0.75rem;
+  color: var(--quiet);
+}
+
+.empty-hero-version {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-top: 3px;
+  font-size: 0.75rem;
+  color: var(--quiet);
+}
+
+.empty-hero-version a {
+  color: var(--brand);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.runtime-dashboard > section > header h2 {
+  color: var(--quiet);
+}
+
+@keyframes fade-in-spin {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes spin-and-pulse {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  25% {
+    transform: rotate(90deg) scale(0.6);
+  }
+  50% {
+    transform: rotate(180deg) scale(0.6);
+  }
+  75% {
+    transform: rotate(270deg) scale(1);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
 .command-center {
   width: min(520px, 100%);
   font-family: var(--font-terminal);
@@ -860,7 +1103,7 @@ button:not(:disabled):active {
 .message {
   display: flex;
   width: 100%;
-  margin-bottom: 12px;
+  margin-bottom: 20px;
 }
 
 .user-message {
@@ -923,15 +1166,15 @@ button:not(:disabled):active {
 .assistant-mark {
   display: block;
   flex: 0 0 auto;
-  width: 20px;
-  height: 20px;
-  margin-top: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
   object-fit: contain;
 }
 
 .assistant-mark-spacer {
-  width: 20px;
-  flex: 0 0 20px;
+  width: 16px;
+  flex: 0 0 16px;
 }
 
 .message-body {
@@ -1016,7 +1259,7 @@ button:not(:disabled):active {
 }
 
 .markdown a {
-  color: var(--brand-hover);
+  color: var(--brand);
   font-weight: 540;
   text-decoration: underline;
   text-decoration-color: var(--link-underline);
@@ -1158,8 +1401,8 @@ button:not(:disabled):active {
   width: 100%;
   min-width: 0;
   flex-direction: column;
-  gap: 5px;
-  margin: 0 0 8px;
+  gap: 9px;
+  margin: 0 0 14px;
 }
 
 .tool-call {
@@ -1240,23 +1483,23 @@ button:not(:disabled):active {
 
 .tool-text-accent,
 .tool-text-success {
-  color: #217346;
+  color: var(--brand);
 }
 
 .tool-text-output {
-  color: #6b7280;
+  color: var(--muted);
 }
 
 .tool-text-dim {
-  color: #9ca3af;
+  color: var(--quiet);
 }
 
 .tool-text-warning {
-  color: #d97706;
+  color: var(--warning);
 }
 
 .tool-text-error {
-  color: #dc2626;
+  color: var(--danger);
 }
 
 .tool-lines {
@@ -1797,7 +2040,7 @@ button:not(:disabled):active {
   padding: 0 7px;
   border: 0;
   border-radius: 4px;
-  color: white;
+  color: var(--on-brand);
   background: var(--brand);
   font-size: 0.5625rem;
   cursor: pointer;
@@ -1813,17 +2056,16 @@ button:not(:disabled):active {
 
   flex: 0 0 auto;
   width: auto;
-  margin: 0 var(--chat-inline-gutter) 12px;
+  margin: 0 var(--chat-inline-gutter) 20px;
 }
 
 .interaction-panel {
   min-width: 0;
-  padding: 14px;
-  border: 1px solid var(--line-strong);
-  border-bottom: 0;
-  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
-  background: var(--interaction-surface);
-  box-shadow: 0 -8px 24px var(--interaction-shadow);
+  margin-bottom: 10px;
+  padding: 12px 14px;
+  border: 1px solid var(--affordance-line);
+  border-radius: var(--radius-surface);
+  background: transparent;
 }
 
 .interaction-heading {
@@ -1929,22 +2171,23 @@ button:not(:disabled):active {
 }
 
 .composer-shell[data-thinking-level='minimal'] .composer-editor {
-  --editor-line: oklch(72% 0.06 220);
+  --editor-line: var(--think-1);
 }
 
 .composer-shell[data-thinking-level='low'] .composer-editor {
-  --editor-line: oklch(67% 0.08 210);
+  --editor-line: var(--think-2);
 }
 
 .composer-shell[data-thinking-level='medium'] .composer-editor {
-  --editor-line: oklch(62% 0.1 190);
+  --editor-line: var(--think-3);
 }
 
 .composer-shell[data-thinking-level='high'] .composer-editor {
-  --editor-line: oklch(57% 0.11 165);
+  --editor-line: var(--think-4);
 }
 
-.composer-shell[data-thinking-level='xhigh'] .composer-editor {
+.composer-shell[data-thinking-level='xhigh'] .composer-editor,
+.composer-shell[data-thinking-level='max'] .composer-editor {
   --editor-line: var(--brand);
 }
 
@@ -1960,9 +2203,8 @@ button:not(:disabled):active {
   margin: 8px 8px 0;
   padding: 5px;
   overflow-y: auto;
-  border: 1px solid var(--line);
-  border-radius: 9px;
-  background: var(--surface);
+  border: 0;
+  background: transparent;
 }
 
 .command-menu button {
@@ -1981,7 +2223,8 @@ button:not(:disabled):active {
 }
 
 .command-menu button:hover,
-.command-menu button:focus-visible {
+.command-menu button:focus-visible,
+.command-menu button.selected {
   background: var(--sidebar-active);
 }
 
@@ -2009,7 +2252,7 @@ button:not(:disabled):active {
 .composer-shell textarea {
   display: block;
   width: 100%;
-  min-height: 38px;
+  min-height: 58px;
   max-height: 150px;
   field-sizing: content;
   padding: 9px 1px 8px;
@@ -2135,6 +2378,7 @@ button:not(:disabled):active {
 }
 
 .composer-footer {
+  margin-top: 10px;
   display: flex;
   min-height: 30px;
   align-items: center;
@@ -2183,11 +2427,20 @@ button:not(:disabled):active {
   align-items: center;
   gap: 2px;
   padding-left: 5px;
-  border: 1px solid transparent;
+  padding-right: 6px;
+  border: 1px solid var(--affordance-line);
   border-radius: 4px;
   color: var(--quiet);
 }
 
+.composer-mode-control::after {
+  content: '▾';
+  flex: 0 0 auto;
+  font-size: 0.5rem;
+  opacity: 0.55;
+  pointer-events: none;
+}
+
 .composer-mode-control > span {
   font-size: var(--terminal-footer-size);
 }
@@ -2198,23 +2451,24 @@ button:not(:disabled):active {
   padding: 0 5px 0 1px;
   border: 0;
   border-radius: 3px;
-  color: var(--ink-soft);
+  color: var(--quiet);
   background-color: transparent;
   font-family: var(--font-terminal);
   font-size: var(--terminal-footer-size);
   font-weight: 550;
+  font-synthesis: weight;
   cursor: pointer;
 }
 
 .composer-mode-control:hover,
 .composer-mode-control:focus-within {
-  color: var(--brand-hover);
-  background-color: var(--brand-soft);
+  color: var(--ink-soft);
+  background-color: var(--hover-surface);
 }
 
 .composer-mode-control:hover .composer-mode-select,
 .composer-mode-control:focus-within .composer-mode-select {
-  color: var(--brand-hover);
+  color: var(--ink-soft);
   background-color: transparent;
 }
 
@@ -2759,28 +3013,6 @@ button:not(:disabled):active {
   margin-top: 3px;
 }
 
-.collab-settings {
-  margin-top: 22px;
-}
-
-.collab-settings h3,
-.collab-settings p {
-  margin: 0;
-  color: var(--muted);
-  font-size: 0.6875rem;
-}
-
-.collab-settings p {
-  margin-top: 7px;
-}
-
-.collab-settings ul {
-  margin: 7px 0 0;
-  padding-left: 18px;
-  color: var(--quiet);
-  font-size: 0.625rem;
-}
-
 .skill-settings {
   margin-top: 22px;
 }
@@ -2997,10 +3229,9 @@ button:not(:disabled):active {
 }
 
 .send-button,
-.stop-button,
-.attach-button {
+.stop-button {
   display: flex;
-  min-width: 40px;
+  min-width: 34px;
   height: 26px;
   align-items: center;
   justify-content: center;
@@ -3017,14 +3248,29 @@ button:not(:disabled):active {
 }
 
 .attach-button {
-  padding: 0 6px;
+  display: inline-flex;
+  height: 26px;
+  align-items: center;
+  gap: 6px;
+  padding: 0 9px;
+  border: 1px solid var(--affordance-line);
+  border-radius: 4px;
   color: var(--muted);
-  background: transparent;
+  background: var(--surface);
+  font-family: var(--font-terminal);
+  font-size: var(--terminal-footer-size);
+  font-weight: 550;
+  cursor: pointer;
+}
+
+.attach-button svg {
+  flex: 0 0 auto;
 }
 
 .attach-button:hover:not(:disabled) {
-  color: var(--brand-hover);
-  background: var(--brand-soft);
+  border-color: var(--affordance-line);
+  background: var(--hover-surface);
+  color: var(--ink-soft);
 }
 
 .stop-button {
@@ -3053,7 +3299,6 @@ button:not(:disabled):active {
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .new-chat-button:hover:not(:disabled),
   .sidebar-session-row:hover:not(:disabled) {
     color: var(--ink-soft);
     background: var(--hover-surface);
@@ -3126,6 +3371,11 @@ button:not(:disabled):active {
     animation: none;
   }
 
+  .empty-hero-brand .hero-spark {
+    animation: none;
+    opacity: 1;
+  }
+
   .tool-call-state.running::before {
     animation: none;
   }