@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/src/css/chat.css

@@ -24,6 +24,7 @@
   min-width: 0;
   padding: 20px;
   overflow-y: auto;
+  overflow-x: hidden;
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -32,6 +33,13 @@
   will-change: transform;
 }
 
+/* Every chat item must be able to shrink inside a narrow conversation panel.
+   Individual code/output blocks provide their own horizontal scrolling. */
+.chat-container > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
 .chat-container::-webkit-scrollbar {
   width: 6px;
 }
@@ -41,7 +49,7 @@
 }
 
 .chat-container::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bg-surface-hover);
   border-radius: var(--radius-lg);
 }
 
@@ -81,6 +89,22 @@
   transition: all 0.3s ease;
 }
 
+/* Allow selecting text inside the main chat and settings areas despite global user-select:none */
+
+.chat-container,
+.chat-container *,
+.message-bubble,
+.message-bubble *,
+.bubble-wrapper,
+.bubble-wrapper *,
+.settings-content,
+.settings-content * {
+  -webkit-user-select: text !important;
+  -moz-user-select: text !important;
+  -ms-user-select: text !important;
+  user-select: text !important;
+}
+
 .bubble-wrapper {
   display: flex;
   flex-direction: column;
@@ -96,8 +120,17 @@
   align-items: flex-start;
 }
 
+/* Activity dashboards need the chat column, not the reply text's intrinsic width. */
+.message.ai-message:has(.agent-activity-history),
+.message.ai-message.agent-activity-message {
+  align-self: stretch;
+  width: 100%;
+}
+.message.ai-message:has(.agent-activity-history) > .bubble-wrapper,
+.agent-activity-history { width: 100%; }
+
 .message-time {
-  font-size: 0.72rem;
+  font-size: 0.78rem;
   color: var(--text-muted);
   margin-top: 4px;
   margin-bottom: 2px;
@@ -115,13 +148,13 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  background: var(--surface-bg, rgba(255, 255, 255, 0.04));
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+  background: var(--bg-surface-soft);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-full, 999px);
   padding: 2px 9px 2px 7px;
-  font-size: 0.72rem;
+  font-size: 0.78rem;
   font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  color: var(--text-muted, #94a3b8);
+  color: var(--text-secondary);
   line-height: 1.3;
   user-select: none;
   transition: all 0.15s ease;
@@ -132,9 +165,9 @@
 }
 
 .provider-model-chip:hover {
-  background: var(--panel-raised, rgba(255, 255, 255, 0.07));
-  border-color: var(--border-light, rgba(255, 255, 255, 0.16));
-  color: var(--text-main, #f1f5f9);
+  background: var(--bg-surface-hover);
+  border-color: var(--border-strong);
+  color: var(--text-primary);
 }
 
 .provider-chip-dot {
@@ -181,24 +214,26 @@
 .provider-chip-name {
   font-weight: 600;
   text-transform: lowercase;
-  opacity: 0.85;
+  color: var(--text-primary);
+  opacity: 0.9;
 }
 
 .provider-chip-divider {
-  opacity: 0.35;
+  opacity: 0.5;
   font-size: 0.68rem;
   margin: 0 1px;
+  color: var(--text-muted);
 }
 
 .provider-chip-model {
-  font-weight: 450;
-  color: var(--text-chat, var(--text-main, #e2e8f0));
+  font-weight: 500;
+  color: var(--text-primary);
 }
 
 .message-timestamp {
-  font-size: 0.72rem;
-  color: var(--text-muted, #64748b);
-  opacity: 0.8;
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  opacity: 1;
   user-select: none;
 }
 
@@ -209,7 +244,7 @@
   white-space: nowrap;
   border: 0;
   background: transparent;
-  color: var(--accent);
+  color: var(--interactive-fg);
   font-weight: 600;
   font: inherit;
   line-height: 1.2;
@@ -219,7 +254,7 @@
 
 .provider-badge:hover,
 .provider-badge.is-open {
-  color: var(--accent-hover);
+  color: var(--interactive-fg-hover);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
@@ -328,7 +363,7 @@
 }
 
 .ai-list-bullet {
-  color: var(--accent-hover);
+  color: var(--interactive-fg-hover);
   font-weight: 700;
   line-height: 1.5;
 }
@@ -339,8 +374,8 @@
 
 .user-message .message-bubble {
   background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000000) 100%);
-  color: white;
-  border-bottom-right-radius: var(--radius-xs);
+  color: var(--text-on-accent);
+  border-radius: 22px 22px 6px 22px;
   box-shadow: var(--glow-accent-md), inset 1px 1px 0 rgba(255, 255, 255, 0.2);
 }
 
@@ -379,7 +414,7 @@
   gap: 8px;
   width: 100%;
   font-family: inherit;
-  font-size: 0.94rem;
+  font-size: 1rem;
   line-height: 1.7;
   letter-spacing: 0.01em;
   word-break: break-word;
@@ -390,11 +425,12 @@
 
 .chat-paragraph {
   margin: 0;
-  margin-bottom: 6px;
-  line-height: 1.7;
+  margin-bottom: 8px;
+  line-height: 1.74;
+  letter-spacing: 0.005em;
   white-space: pre-wrap;
   word-break: break-word;
-  color: var(--text-chat, var(--text-main));
+  color: var(--text-chat);
 }
 
 .chat-paragraph:last-child {
@@ -402,61 +438,51 @@
 }
 
 .chat-heading {
-  font-weight: 700;
-  color: var(--text-chat, var(--text-main));
-  margin-top: 14px;
-  margin-bottom: 6px;
+  font-weight: 600;
+  color: var(--text-main);
+  margin-top: 16px;
+  margin-bottom: 8px;
   line-height: 1.45;
+  letter-spacing: -0.015em;
 }
 
-.chat-heading-1 { font-size: 1.25rem; color: var(--text-chat, var(--text-main)); }
+.chat-heading-1 { font-size: 1.3rem; color: var(--text-main); }
 
-.chat-heading-2 { font-size: 1.15rem; color: var(--text-chat, var(--text-main)); }
+.chat-heading-2 { font-size: 1.18rem; color: var(--text-main); }
 
-.chat-heading-3 { font-size: 1.05rem; color: var(--text-chat, var(--text-main)); }
+.chat-heading-3 { font-size: 1.06rem; color: var(--text-main); }
 
 .chat-section-title {
   font-size: 1.02rem;
-  font-weight: 700;
-  color: var(--text-chat, var(--text-main));
+  font-weight: 600;
+  color: var(--text-main);
   padding-bottom: 2px;
-  margin-top: 12px;
-  margin-bottom: 6px;
+  margin-top: 14px;
+  margin-bottom: 8px;
 }
 
 .chat-list-item {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
-  margin: 3px 0 3px 4px;
-  line-height: 1.7;
+  gap: 10px;
+  margin: 4px 0 4px 4px;
+  line-height: 1.74;
 }
 
 .chat-list-bullet {
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  height: 1.7em;
   width: 14px;
-  font-size: 0.94rem;
-  line-height: 1.7;
-  color: transparent;
+  font-size: 1.1rem;
+  line-height: 1.6;
+  color: var(--text-muted);
   user-select: none;
 }
 
 .chat-list-bullet::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background-color: var(--accent, #10b981);
-  box-shadow: 0 0 5px color-mix(in srgb, var(--accent, #10b981) 35%, transparent);
+  display: none;
 }
 
 .chat-list-number {
@@ -477,7 +503,7 @@
 }
 
 .chat-link {
-  color: var(--accent-hover, #34d399);
+  color: var(--interactive-fg-hover);
   text-decoration: underline;
   text-underline-offset: 3px;
   word-break: break-all;
@@ -491,17 +517,18 @@
 
 .chat-bold-highlight {
   font-weight: 600;
-  color: var(--text-chat, var(--text-main));
+  color: var(--text-chat, var(--text-main, inherit));
 }
 
 .chat-inline-code {
-  background: color-mix(in srgb, var(--text-chat, var(--text-main)) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--text-chat, var(--text-main)) 24%, transparent);
-  padding: 2px 6px;
-  border-radius: var(--radius-xs);
+  background: var(--bg-surface-soft);
+  border: 1px solid var(--border-default);
+  padding: 2px 7px;
+  border-radius: 6px;
   font-family: 'Fira Code', monospace;
-  font-size: 0.88em;
-  color: var(--text-chat, var(--text-main));
+  font-size: 0.86em;
+  color: var(--text-chat);
+  letter-spacing: -0.01em;
 }
 
 /* Typing Indicator */
@@ -547,238 +574,8 @@
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
 }
 
-/* Slash Command Suggestions Popup */
-
-.slash-suggestions-popup {
-  position: absolute;
-  bottom: calc(100% + 12px);
-  left: 20px;
-  right: 20px;
-  max-height: 250px;
-  background: color-mix(in srgb, var(--card-bg, #18191c) 92%, #000 8%);
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
-  border-radius: var(--radius-2xl);
-  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(45, 212, 191, 0.15);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  z-index: 100;
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  transform-origin: bottom center;
-  animation: slashPopupFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-}
-
-.slash-suggestions-header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 9px 16px;
-  font-size: 0.72rem;
-  font-weight: 700;
-  color: var(--accent, #2dd4bf);
-  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
-  background: rgba(0, 0, 0, 0.3);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.slash-suggestions-count {
-  font-weight: 600;
-  color: var(--text-muted, rgba(255, 255, 255, 0.5));
-  letter-spacing: 0.02em;
-  text-transform: none;
-}
-
-.slash-suggestions-list {
-  overflow-y: auto;
-  padding: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  scroll-behavior: smooth;
-}
-
-.slash-suggestions-group {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.slash-suggestions-group + .slash-suggestions-group {
-  margin-top: 4px;
-}
-
-.slash-suggestions-group-label {
-  padding: 6px 14px 3px;
-  font-size: 0.66rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-muted, rgba(255, 255, 255, 0.45));
-}
-
-.slash-suggestion-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 14px;
-  border-radius: var(--radius-lg);
-  background: transparent;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  width: 100%;
-  transition: background 0.14s ease, box-shadow 0.14s ease;
-}
-
-.slash-suggestion-item:hover {
-  background: rgba(45, 212, 191, 0.06);
-}
-
-.slash-suggestion-item.active {
-  background: rgba(45, 212, 191, 0.12);
-  box-shadow: inset 2px 0 0 var(--accent, #2dd4bf);
-}
-
-.slash-cmd-name {
-  font-size: 0.84rem;
-  font-weight: 600;
-  font-family: var(--font-mono, monospace);
-  color: var(--accent, #2dd4bf);
-  min-width: 128px;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.slash-suggestion-item.active .slash-cmd-name {
-  color: #5eead4;
-}
-
-.skill-badge {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--accent, #2dd4bf);
-  background: rgba(45, 212, 191, 0.16);
-  padding: 2px 7px;
-  border-radius: var(--radius-sm);
-  flex-shrink: 0;
-}
-
-.slash-cmd-body {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 0;
-  flex: 1;
-}
-
-.slash-cmd-usage {
-  font-size: 0.72rem;
-  font-family: var(--font-mono, monospace);
-  color: var(--text-muted, rgba(255, 255, 255, 0.4));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.slash-suggestions-empty {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  font-size: 0.8rem;
-  color: var(--text-soft, rgba(255, 255, 255, 0.6));
-}
-
-.slash-suggestions-empty .slash-cmd-name {
-  min-width: 0;
-}
-
-.slash-suggestions-empty code {
-  font-family: var(--font-mono, monospace);
-  background: rgba(255, 255, 255, 0.08);
-  padding: 1px 6px;
-  border-radius: var(--radius-sm);
-}
-
-.slash-cmd-desc {
-  font-size: 0.8rem;
-  color: var(--text-soft, rgba(255, 255, 255, 0.65));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.input-disclaimer {
-  text-align: center;
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  opacity: 0.55;
-  padding: 4px 20px 10px;
-  margin: 0;
-  flex-shrink: 0;
-  line-height: 1.5;
-  user-select: none;
-}
-
-/* Chat Header (Mint Agent title bar inside panel) */
-
-.chat-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 18px;
-  background: var(--chrome-bg);
-  backdrop-filter: var(--glass-blur);
-  -webkit-backdrop-filter: var(--glass-blur);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  height: 52px;
-  flex-shrink: 0;
-}
-
-.chat-header-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 600;
-  color: var(--text-main);
-  font-size: 0.92rem;
-}
-
-.chat-header-logo {
-  width: 20px;
-  height: 20px;
-  object-fit: contain;
-}
-
-.chat-header-clear-btn {
-  margin-left: auto;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: background 0.16s ease, color 0.16s ease;
-}
-
-.chat-header-clear-btn:hover {
-  background: var(--surface-strong);
-  color: var(--text-main);
-}
-
 #chat-form {
+  position: relative;
   display: flex;
   gap: 12px;
   background: rgba(0, 0, 0, 0.15);
@@ -822,11 +619,10 @@
 }
 
 #send-btn,
-#mic-btn,
 #chat-tool-btn,
 #screen-capture-btn {
   background: var(--accent);
-  color: white;
+  color: var(--text-on-accent);
   border: none;
   width: 44px;
   height: 40px;
@@ -840,7 +636,6 @@
 }
 
 #send-btn:hover,
-#mic-btn:hover,
 #chat-tool-btn:hover,
 #screen-capture-btn:hover {
   background: var(--accent-hover);
@@ -848,18 +643,11 @@
 }
 
 #send-btn:active,
-#mic-btn:active,
 #chat-tool-btn:active,
 #screen-capture-btn:active {
   transform: scale(0.95);
 }
 
-#mic-btn.listening {
-  background: #ef4444;
-  /* Red color when listening */
-  animation: pulse-mic 1.5s infinite;
-}
-
 #chat-tool-btn,
 #screen-capture-btn {
   background: transparent;
@@ -870,7 +658,7 @@
 #chat-tool-btn:hover,
 #screen-capture-btn:hover {
   background: color-mix(in srgb, var(--accent) 15%, transparent);
-  color: var(--accent);
+  color: var(--interactive-fg);
   border-color: color-mix(in srgb, var(--accent) 40%, transparent);
 }
 
@@ -917,11 +705,11 @@
    ========================================================================== */
 .approval-card {
   width: 100%;
-  background: var(--panel-bg, #18181b);
-  border: 1px solid var(--border-light, rgba(255, 255, 255, 0.12));
+  background: var(--bg-surface-raised);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-xl, 14px);
   padding: 16px 18px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -934,8 +722,8 @@
 }
 
 .approval-card[data-tier="dangerous"] {
-  border-color: rgba(255, 255, 255, 0.15);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-md);
 }
 
 .approval-card-header {
@@ -958,8 +746,8 @@
   width: 28px;
   height: 28px;
   border-radius: 7px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--bg-surface-soft);
+  border: 1px solid var(--border-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -970,7 +758,7 @@
 .approval-title-text {
   font-size: 0.92rem;
   font-weight: 600;
-  color: var(--text-main, #f4f4f5);
+  color: var(--text-main);
   letter-spacing: -0.01em;
   text-align: left;
 }
@@ -982,10 +770,10 @@
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.04em;
-  text-transform: uppercase;
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-muted, #a1a1aa);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  text-transform: none;
+  background: var(--bg-surface-soft);
+  color: var(--text-muted);
+  border: 1px solid var(--border-subtle);
 }
 
 .approval-badge-chip.dangerous,
@@ -994,22 +782,22 @@
 .approval-badge-chip.mcp,
 .approval-badge-chip.command,
 .approval-badge-chip.default {
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-muted, #a1a1aa);
-  border-color: rgba(255, 255, 255, 0.1);
+  background: var(--bg-surface-soft);
+  color: var(--text-muted);
+  border-color: var(--border-subtle);
 }
 
 .approval-content-box {
   width: 100%;
   box-sizing: border-box;
-  background: rgba(0, 0, 0, 0.32);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--bg-surface-soft);
+  border: 1px solid var(--border-subtle);
   border-radius: 9px;
   padding: 10px 14px;
   font-family: 'Fira Code', ui-monospace, monospace;
   font-size: 0.84rem;
   line-height: 1.5;
-  color: var(--text-main, #e4e4e7);
+  color: var(--text-main);
   white-space: pre-wrap;
   word-break: break-word;
   max-height: 240px;
@@ -1031,7 +819,7 @@
 .approval-reason-text {
   width: 100%;
   font-size: 0.78rem;
-  color: var(--text-muted, #94a3b8);
+  color: var(--text-muted);
   line-height: 1.4;
   margin-top: -4px;
   text-align: left;
@@ -1061,8 +849,8 @@
   justify-content: space-between;
   width: 100%;
   padding: 10px 13px;
-  background: rgba(255, 255, 255, 0.035);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--bg-surface-soft);
+  border: 1px solid var(--border-subtle);
   border-radius: 10px;
   cursor: pointer;
   text-align: left;
@@ -1071,21 +859,21 @@
 }
 
 .claude-choice-card:hover {
-  background: rgba(255, 255, 255, 0.075);
-  border-color: rgba(255, 255, 255, 0.22);
+  background: var(--bg-surface-hover);
+  border-color: var(--border-strong);
   transform: translateY(-1px);
 }
 
 .claude-choice-card.variant-approve:hover,
 .claude-choice-card.variant-session:hover,
 .claude-choice-card.variant-cancel:hover {
-  background: rgba(255, 255, 255, 0.075);
-  border-color: rgba(255, 255, 255, 0.22);
+  background: var(--bg-surface-hover);
+  border-color: var(--border-strong);
 }
 
 .claude-choice-card.selected {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.35);
+  background: var(--bg-surface-hover);
+  border-color: var(--border-strong);
   box-shadow: none;
 }
 
@@ -1101,29 +889,29 @@
   width: 22px;
   height: 22px;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: var(--bg-surface-soft);
+  border: 1px solid var(--border-default);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Fira Code', ui-monospace, monospace;
   font-size: 0.72rem;
   font-weight: 700;
-  color: var(--text-muted, #a1a1aa);
+  color: var(--text-muted);
   flex-shrink: 0;
   transition: all 0.15s ease;
 }
 
 .claude-choice-card:hover .claude-choice-key {
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.3);
-  background: rgba(255, 255, 255, 0.12);
+  color: var(--text-main);
+  border-color: var(--border-strong);
+  background: var(--bg-surface-hover);
 }
 
 .claude-choice-card.selected .claude-choice-key {
-  background: rgba(255, 255, 255, 0.2);
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.4);
+  background: var(--bg-surface-hover);
+  color: var(--text-main);
+  border-color: var(--border-strong);
 }
 
 .claude-choice-text {
@@ -1137,14 +925,14 @@
 .claude-choice-title {
   font-size: 0.85rem;
   font-weight: 650;
-  color: var(--text-main, #f4f4f5);
+  color: var(--text-main);
   line-height: 1.3;
   text-align: left;
 }
 
 .claude-choice-desc {
   font-size: 0.74rem;
-  color: var(--text-muted, #a1a1aa);
+  color: var(--text-muted);
   line-height: 1.35;
   text-align: left;
 }
@@ -1160,12 +948,12 @@
 }
 
 .claude-choice-card:hover .claude-choice-right {
-  color: var(--text-main, #f4f4f5);
+  color: var(--text-main);
   transform: translateX(2px);
 }
 
 .claude-choice-card.selected .claude-choice-right {
-  color: #ffffff;
+  color: var(--text-main);
 }
 
 .claude-choice-custom-box {
@@ -1180,10 +968,10 @@
   width: 100%;
   box-sizing: border-box;
   padding: 9px 12px;
-  background: rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--bg-input);
+  border: 1px solid var(--border-default);
   border-radius: 8px;
-  color: var(--text-main, #f4f4f5);
+  color: var(--text-main);
   font-size: 0.84rem;
   font-family: inherit;
   outline: none;
@@ -1191,12 +979,12 @@
 }
 
 .claude-choice-input:focus {
-  border-color: var(--accent, #10b981);
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
 }
 
 .approval-btn {
-  border: 1px solid rgba(255, 255, 255, 0.14);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-sm);
   color: var(--text-main);
   cursor: pointer;
@@ -1223,6 +1011,7 @@
   gap: 8px;
   margin-bottom: 8px;
   margin-top: 0;
+  min-width: 0;
   max-width: 100%;
 }
 
@@ -1239,15 +1028,18 @@
   gap: 8px;
   justify-content: flex-start;
   line-height: 1.2;
-  padding: 2px 0;
+  padding: 5px 0;
   text-align: left;
-  width: fit-content;
+  width: 100%;
 }
 
 .agent-activity-toggle:hover {
   color: var(--text-soft);
 }
 
+.agent-activity-toggle-chevron { flex: 0 0 auto; color: var(--text-muted); transition: transform 0.18s ease; }
+.agent-activity-toggle-chevron.is-open { transform: rotate(180deg); }
+
 .agent-activity-toggle:focus-visible {
   outline: 1px solid var(--border-light);
   outline-offset: 3px;
@@ -1259,6 +1051,7 @@
   border-radius: 0;
   color: var(--text-main);
   width: 100%;
+  min-width: 0;
   max-width: 100%;
   padding: 4px 0;
   box-shadow: none;
@@ -1271,23 +1064,23 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  color: var(--accent);
+  color: var(--interactive-fg);
   font-weight: 500;
   transition: color 0.15s ease;
 }
 
 .file-changes-toggle:hover {
-  color: var(--accent-hover, var(--accent));
+  color: var(--interactive-fg-hover);
 }
 
 .file-changes-rewind-btn {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px 8px;
+  padding: 5px 10px;
   font-size: 0.72rem;
-  border-radius: var(--radius-xs, 4px);
-  background: var(--hover-delete-bg, rgba(239, 68, 68, 0.1));
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
   color: var(--status-error, #f87171);
   border: 1px solid color-mix(in srgb, var(--status-error, #ef4444) 30%, transparent);
   cursor: pointer;
@@ -1301,21 +1094,131 @@
 }
 
 .file-changes-card {
-  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)) !important;
+  border: 1px solid var(--border) !important;
   border-radius: var(--radius-md, 8px) !important;
-  padding: 10px !important;
+  padding: 0 !important;
   background: var(--surface-bg, #1e1e20) !important;
   margin-top: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.file-changes-item {
+.file-changes-summary-row {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 8px 12px;
   border-bottom: 1px solid var(--border);
-  padding-bottom: 4px;
+}
+
+.file-changes-summary {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.file-changes-summary-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.file-changes-summary-icon {
+  align-items: center;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  border-radius: 7px;
+  color: var(--interactive-fg);
+  display: inline-flex;
+  flex: 0 0 30px;
+  font-size: 1rem;
+  font-weight: 700;
+  height: 30px;
+  justify-content: center;
+}
+
+.file-changes-summary-label {
+  color: var(--text-main);
+  font-size: 0.84rem;
+  font-weight: 600;
+}
+
+.file-changes-summary-counts {
+  display: inline-flex;
+  gap: 5px;
+  font-size: 0.75rem;
+  line-height: 1.2;
+}
+
+.file-changes-summary-actions {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 7px;
+}
+
+.file-changes-review-btn {
+  background: color-mix(in srgb, var(--text-main) 5%, transparent);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs, 5px);
+  color: var(--text-main);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  padding: 5px 10px;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.file-changes-review-btn:hover {
+  background: color-mix(in srgb, var(--text-main) 10%, transparent);
+  border-color: var(--border-light, var(--border));
+}
+
+.file-changes-item {
+  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
+  border-radius: var(--radius-xs, 5px);
+  padding: 2px 4px;
 }
 
 .file-changes-item:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
+}
+
+.file-changes-list-container {
+  padding: 0 12px 10px;
+}
+
+.file-changes-show-more {
+  align-items: center;
+  background: color-mix(in srgb, var(--text-main) 5%, transparent);
+  border: 0;
+  border-radius: var(--radius-xs, 5px);
+  color: var(--text-soft, var(--text-main));
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: 0.76rem;
+  justify-content: flex-start;
+  gap: 7px;
+  padding: 7px 9px;
+  text-align: left;
+}
+
+.file-changes-show-more:hover {
+  background: color-mix(in srgb, var(--text-main) 9%, transparent);
+}
+
+.file-changes-show-more span {
+  color: var(--text-muted);
+  transition: transform 0.15s ease;
+}
+
+.file-changes-show-more span.is-expanded {
+  transform: rotate(180deg);
 }
 
 .file-changes-item-header {
@@ -1339,7 +1242,7 @@
 }
 
 .file-changes-filename.is-new {
-  color: var(--accent);
+  color: var(--interactive-fg);
 }
 
 .file-changes-dirpath {
@@ -1352,7 +1255,7 @@
 .file-changes-badge-new {
   font-size: 0.68rem;
   font-weight: 700;
-  color: var(--accent);
+  color: var(--interactive-fg);
   margin-left: 8px;
   padding: 1px 6px;
   border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
@@ -1362,7 +1265,7 @@
 }
 
 .file-changes-count-add {
-  color: var(--accent);
+  color: var(--interactive-fg);
   font-weight: 600;
 }
 
@@ -1376,10 +1279,10 @@
   align-items: center;
   gap: 3px;
   padding: 1px 6px;
-  fontSize: 0.68rem;
+  font-size: 0.68rem;
   border-radius: var(--radius-xs, 4px);
   background: color-mix(in srgb, var(--accent) 14%, transparent);
-  color: var(--accent);
+  color: var(--interactive-fg);
   border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
   cursor: pointer;
   font-weight: 500;
@@ -1388,7 +1291,7 @@
 
 .file-changes-preview-btn:hover {
   background: color-mix(in srgb, var(--accent) 22%, transparent);
-  color: var(--accent-hover, var(--accent));
+  color: var(--interactive-fg-hover);
 }
 
 .file-changes-diff-box {
@@ -1433,7 +1336,7 @@
 }
 
 .file-changes-diff-sign-add {
-  color: var(--accent);
+  color: var(--interactive-fg);
   margin-right: 6px;
   user-select: none;
   font-weight: 600;
@@ -1441,6 +1344,202 @@
   min-width: 10px;
 }
 
+/* Full-panel code review view */
+.code-review-page {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--app-bg, var(--input-bg, #111114));
+}
+
+.code-review-toolbar {
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex: 0 0 auto;
+  gap: 14px;
+  min-height: 48px;
+  padding: 0 16px;
+}
+
+.code-review-back,
+.code-review-tab {
+  align-items: center;
+  display: inline-flex;
+  gap: 7px;
+}
+
+.code-review-back {
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.78rem;
+  padding: 6px 4px;
+}
+
+.code-review-back:hover { color: var(--text-main); }
+
+.code-review-tab {
+  align-self: stretch;
+  border-bottom: 2px solid var(--accent);
+  color: var(--text-main);
+  font-size: 0.82rem;
+  padding: 0 12px;
+}
+
+.code-review-toolbar-title {
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-review-summary {
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  min-height: 42px;
+  padding: 0 16px;
+  color: var(--text-soft, var(--text-main));
+  font-size: 0.78rem;
+}
+
+.code-review-file-total {
+  border-left: 1px solid var(--border);
+  color: var(--text-muted);
+  margin-left: 2px;
+  padding-left: 10px;
+}
+
+.code-review-layout {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
+  min-height: 0;
+}
+
+.code-review-diff {
+  min-width: 0;
+  overflow: auto;
+}
+
+.code-review-file-heading {
+  align-items: center;
+  background: var(--surface-bg, #1e1e20);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  gap: 9px;
+  min-height: 38px;
+  padding: 0 12px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.code-review-filetype {
+  align-items: center;
+  background: color-mix(in srgb, var(--accent) 13%, transparent);
+  border-radius: 4px;
+  color: var(--interactive-fg);
+  display: inline-flex;
+  font-size: 0.58rem;
+  font-weight: 700;
+  height: 19px;
+  justify-content: center;
+  min-width: 22px;
+  padding: 0 4px;
+}
+
+.code-review-path {
+  flex: 1 1 auto;
+  font-size: 0.76rem;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-review-code {
+  font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
+  font-size: 0.76rem;
+  line-height: 1.55;
+  padding: 10px 0 24px;
+}
+
+.code-review-hunk + .code-review-hunk { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
+
+.code-review-line {
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: 48px 22px minmax(0, 1fr);
+  min-height: 23px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.code-review-line.is-added { background: color-mix(in srgb, var(--accent) 13%, transparent); }
+.code-review-line.is-deleted { background: color-mix(in srgb, var(--status-error, #ef4444) 12%, transparent); }
+.code-review-line-number { color: var(--text-muted); padding-right: 10px; text-align: right; user-select: none; }
+.code-review-sign { color: var(--text-muted); text-align: center; user-select: none; }
+.code-review-line.is-added .code-review-sign { color: var(--interactive-fg); }
+.code-review-line.is-deleted .code-review-sign { color: var(--status-error, #ef4444); }
+.code-review-line code { color: var(--text-main); font: inherit; padding-right: 14px; }
+
+.code-review-file-list {
+  background: color-mix(in srgb, var(--surface-bg, #1e1e20) 75%, transparent);
+  border-left: 1px solid var(--border);
+  min-width: 0;
+  overflow: auto;
+  padding: 10px;
+}
+
+.code-review-file-list-title {
+  align-items: center;
+  color: var(--text-muted);
+  display: flex;
+  font-size: 0.72rem;
+  font-weight: 600;
+  justify-content: space-between;
+  padding: 3px 6px 9px;
+}
+
+.code-review-file-list-title span { color: var(--text-muted); font-weight: 400; }
+
+.code-review-file-option {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs, 5px);
+  color: var(--text-main);
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  margin-bottom: 3px;
+  padding: 8px 7px;
+  text-align: left;
+  width: 100%;
+}
+
+.code-review-file-option:hover { background: color-mix(in srgb, var(--text-main) 5%, transparent); }
+.code-review-file-option.is-selected { background: color-mix(in srgb, var(--text-main) 8%, transparent); border-color: var(--border); }
+.code-review-file-option-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
+.code-review-file-option-copy strong { font-size: 0.74rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.code-review-file-option-copy small { color: var(--text-muted); font-size: 0.64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.code-review-file-option-counts { display: flex; flex: 0 0 auto; gap: 5px; font-size: 0.68rem; }
+.code-review-empty { color: var(--text-muted); font-size: 0.8rem; padding: 24px; }
+
+@media (max-width: 760px) {
+  .code-review-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
+  .code-review-file-list { border-left: 0; border-top: 1px solid var(--border); max-height: 180px; }
+}
 
 .agent-activity-card-history {
   padding-top: 0;
@@ -1539,28 +1638,27 @@
 .agent-activity-list {
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--panel-bg, #141416);
+  gap: 6px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  overflow: visible;
 }
 
 .agent-activity-item {
   display: flex;
   align-items: center;
   gap: 10px;
-  min-height: 34px;
+  min-height: 36px;
   padding: 6px 12px;
-  border-bottom: 1px solid var(--border);
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+  border-radius: var(--radius-sm, 6px);
+  background: color-mix(in srgb, var(--panel-soft) 40%, transparent);
   color: var(--text-soft);
-  font-size: 0.84rem;
+  font-size: 0.82rem;
   transition: background 0.15s ease, color 0.15s ease;
 }
 
-.agent-activity-item:last-child {
-  border-bottom: 0;
-}
-
 .agent-activity-item:hover {
   background: var(--panel-soft);
   color: var(--text-main);
@@ -1631,7 +1729,7 @@
 .agent-activity-inline-result {
   font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 0.76rem;
-  color: var(--accent, #38bdf8);
+  color: var(--interactive-fg);
   font-weight: 500;
   flex-shrink: 0;
   background: color-mix(in srgb, var(--accent, #38bdf8) 10%, transparent);
@@ -1649,11 +1747,11 @@
 }
 
 .agent-activity-status-check {
-  color: var(--accent, #10b981);
+  color: var(--interactive-fg);
 }
 
 .agent-activity-status-spin {
-  color: var(--accent, #38bdf8);
+  color: var(--interactive-fg);
   animation: spin 1.2s linear infinite;
 }
 
@@ -1697,11 +1795,10 @@
 /* ── Grouped Activity Styling ───────────────────────────── */
 
 .agent-activity-group {
-  border-bottom: 1px solid var(--border);
-}
-
-.agent-activity-group:last-child {
-  border-bottom: 0;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+  border-radius: var(--radius-sm, 6px);
+  overflow: hidden;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.03));
 }
 
 .agent-activity-group-header {
@@ -1745,9 +1842,9 @@
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.02em;
-  color: var(--text-muted, #94a3b8);
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+  color: var(--text-muted);
+  background: var(--bg-surface-soft);
+  border: 1px solid var(--border-subtle);
   border-radius: 10px;
 }
 
@@ -1770,8 +1867,8 @@
 }
 
 .agent-activity-subitem:hover {
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text-main, #f1f5f9);
+  background: var(--bg-surface-soft);
+  color: var(--text-main);
 }
 
 .agent-activity-tree-bullet {
@@ -1829,7 +1926,7 @@
 
 .thinking-block {
   margin: 6px 0 10px 0;
-  border-radius: var(--radius-md, 8px);
+  border-radius: var(--radius-xl, 16px);
   border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
   background: var(--panel-soft, rgba(255, 255, 255, 0.02));
   overflow: hidden;
@@ -1849,13 +1946,14 @@
 .thinking-block-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   width: 100%;
-  padding: 7px 12px;
-  background: transparent;
+  min-height: 36px;
+  padding: 6px 12px;
+  background: color-mix(in srgb, var(--panel-soft) 40%, transparent);
   border: 0;
   color: var(--text-muted, #94a3b8);
-  font-size: 0.76rem;
+  font-size: 0.82rem;
   font-weight: 500;
   cursor: pointer;
   text-align: left;
@@ -1864,8 +1962,8 @@
 }
 
 .thinking-block-header:hover {
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text-main, #f1f5f9);
+  background: var(--panel-soft);
+  color: var(--text-main);
 }
 
 .thinking-block-icon {
@@ -1944,7 +2042,7 @@
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.03em;
-  text-transform: uppercase;
+  text-transform: none;
   color: var(--text-muted, #94a3b8);
   opacity: 0.65;
   margin-bottom: 4px;
@@ -2002,13 +2100,8 @@
 .thinking-block-step-body strong {
   font-size: inherit;
   font-weight: 600;
-  color: var(--text-main, #e2e8f0);
-  opacity: 0.92;
-}
-
-[data-theme="light"] .thinking-block-content .chat-bold-highlight {
-  color: var(--text-main, #334155);
-  opacity: 0.92;
+  color: var(--text-secondary);
+  opacity: 1;
 }
 
 .thinking-block-content .chat-list-block {
@@ -2136,6 +2229,130 @@
   }
 }
 
+/* Extended Thinking inherits clean neutral styling directly from .thinking-block */
+
+/* Inline Thought Note (short agent notes rendered as normal plain text) */
+
+.inline-thought-note {
+  display: block;
+  padding: 4px 0 6px 0;
+  margin: 4px 0 6px 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--text-main, #f1f5f9);
+  font-size: 0.92rem;
+  line-height: 1.6;
+  animation: agent-activity-slide-up-fade 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.inline-thought-note-text {
+  word-break: break-word;
+  white-space: pre-wrap;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.inline-thought-note .chat-formatted-body {
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+}
+
+.inline-thought-note .chat-formatted-body p {
+  margin: 0 0 6px 0;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.inline-thought-note .chat-formatted-body p:last-child {
+  margin-bottom: 0;
+}
+
+.agent-activity-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+/* Unified Timeline: Extended Thinking row inside Activity Drawer */
+.agent-activity-thought-step {
+  margin: 0;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+  border-radius: var(--radius-sm, 6px);
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.03));
+  overflow: hidden;
+}
+
+.agent-activity-thought-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm, 6px);
+  cursor: pointer;
+  color: var(--text-muted, #94a3b8);
+  font-size: 0.82rem;
+  font-weight: 500;
+  background: color-mix(in srgb, var(--panel-soft) 40%, transparent);
+  transition: background 0.15s ease, color 0.15s ease;
+  user-select: none;
+}
+
+.agent-activity-thought-header:hover {
+  background: var(--panel-soft);
+  color: var(--text-main, #f1f5f9);
+}
+
+.agent-activity-thought-header .agent-activity-kind-icon {
+  color: var(--text-muted, #94a3b8);
+}
+
+.agent-activity-thought-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-main, #f1f5f9);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+}
+
+.agent-activity-thought-meta {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.agent-activity-thought-cursor {
+  display: inline-block;
+  margin-left: 2px;
+  color: var(--interactive-fg);
+  animation: agent-thought-cursor-blink 0.9s steps(1) infinite;
+}
+
+@keyframes agent-thought-cursor-blink {
+  50% { opacity: 0; }
+}
+
+.agent-activity-thought-body {
+  padding: 8px 12px 8px 28px;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: var(--text-muted, #cbd5e1);
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: var(--radius-sm, 6px);
+  margin: 2px 0 4px 0;
+  max-height: 300px;
+  overflow-y: auto;
+  user-select: text;
+}
+
 /* Smart Context Toggle */
 
 .smart-context-bar {
@@ -2154,7 +2371,7 @@
 }
 
 .smart-context-control.is-active .smart-context-label {
-  color: var(--accent);
+  color: var(--interactive-fg);
 }
 
 .smart-context-label {
@@ -2182,6 +2399,7 @@
   cursor: pointer;
   top: 0; left: 0; right: 0; bottom: 0;
   background-color: rgba(255, 255, 255, 0.2);
+  border: 1px solid transparent;
   transition: .4s;
 }
 
@@ -2193,15 +2411,18 @@
   left: 3px;
   bottom: 3px;
   background-color: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
   transition: .4s;
 }
 
 input:checked + .slider {
   background-color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong, rgba(255, 255, 255, 0.2)));
 }
 
 input:checked + .slider:before {
   transform: translateX(14px);
+  background-color: var(--accent-contrast, #ffffff);
 }
 
 .slider.round {
@@ -2249,10 +2470,6 @@ input:checked + .slider:before {
 }
 
 .suggestion-card:hover {
-  /* background/shadow were a fixed purple (rgba(143, 108, 245, ...))
-     unrelated to border-color right below, which already used
-     var(--accent) — switched both to match so the whole hover state
-     tracks whatever accent color the user picks. */
   background: color-mix(in srgb, var(--accent) 8%, transparent);
   border-color: var(--accent);
   transform: translateY(-3px);
@@ -2300,12 +2517,12 @@ input:checked + .slider:before {
               transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.assistant-workspace.model-hidden .message {
+.assistant-workspace.chat-only .message {
   max-width: 100%;
 }
 
 .conversation-panel.is-empty {
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .conversation-panel.is-empty .chat-container {
@@ -2318,6 +2535,41 @@ input:checked + .slider:before {
   transform: translateY(-7vh);
 }
 
+.empty-chat-prompt-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 28px;
+}
+
+.empty-chat-prompt-wrap .empty-chat-prompt {
+  margin: 0;
+}
+
+.empty-chat-project-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 9999px;
+  font-size: 0.85rem;
+  color: var(--text-muted, #94a3b8);
+  letter-spacing: -0.01em;
+}
+
+.empty-chat-project-badge svg {
+  color: var(--flavor-teal, #2dd4bf);
+  flex-shrink: 0;
+}
+
+.empty-chat-project-badge strong {
+  color: var(--text-primary, #f1f5f9);
+  font-weight: 600;
+}
+
 .empty-chat-prompt {
   margin: 0 0 28px;
   color: var(--text-main);
@@ -2344,7 +2596,7 @@ input:checked + .slider:before {
 .message-bubble {
   padding: 10px 12px;
   border-radius: var(--radius-md);
-  font-size: 0.9rem;
+  font-size: 1rem;
   line-height: 1.48;
   box-shadow: none;
   backdrop-filter: var(--glass-blur);
@@ -2366,14 +2618,14 @@ input:checked + .slider:before {
 
 .user-message .message-bubble {
   background: linear-gradient(135deg, var(--surface-strong), color-mix(in srgb, var(--accent) 16%, var(--surface-strong)));
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  border-radius: 22px 22px 6px 22px;
   color: var(--text-main);
   box-shadow: none;
 }
 
 .provider-badge {
-  color: var(--accent-hover);
+  color: var(--interactive-fg-hover);
 }
 
 /* Force AI replies to render as plain inline text (no bubble/frame). */
@@ -2395,135 +2647,693 @@ input:checked + .slider:before {
   pointer-events: auto;
 }
 
-.workspace-select-btn {
-  width: fit-content;
-  max-width: min(100%, 360px);
-  min-height: 34px;
-  display: inline-flex;
+/* A compact, reviewable handoff between the latest agent run and the next prompt. */
+.composer-change-status {
+  display: flex;
   align-items: center;
-  gap: 8px;
-  margin: 0 0 8px 2px;
-  padding: 0 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--input-bg);
-  color: var(--text-soft);
-  font-size: 0.86rem;
-  font-weight: 650;
+  justify-content: space-between;
+  gap: 10px;
+  max-width: calc(100% - 28px);
+  min-height: 30px;
+  margin: 0 auto 8px;
+  padding: 5px 11px;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: left;
+  background: var(--bg-surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-xs);
   cursor: pointer;
+  transition: border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
 }
 
-.workspace-select-btn:hover {
-  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
-  background: color-mix(in srgb, var(--accent) 8%, var(--input-bg));
-  color: var(--text-main);
+.composer-change-status:hover {
+  color: var(--text-primary);
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
 }
 
-.workspace-select-btn span:nth-child(2) {
+.composer-change-status:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.composer-change-status-copy,
+.composer-change-status-counts {
+  display: inline-flex;
+  align-items: center;
   min-width: 0;
+}
+
+.composer-change-status-copy {
+  gap: 7px;
+  overflow: hidden;
+}
+
+.composer-change-status-copy > span:last-child {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.smart-context-bar {
-  min-height: 24px;
-  padding: 3px 10px 3px 14px;
-  margin: 0;
-  background: var(--input-bg);
-  border: 1px solid var(--border);
-  border-bottom: 0;
-  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
+.composer-change-status-counts {
+  flex: 0 0 auto;
+  gap: 5px;
+  font-family: var(--font-mono);
+  font-size: 0.94em;
 }
 
-.smart-context-label {
-  color: var(--text-soft);
-  font-size: 0.76rem;
-  font-weight: 400;
+.composer-change-status-counts strong {
+  color: var(--status-success);
 }
 
-.smart-context-label span {
-  color: var(--text-muted);
-  font-size: 0.68rem;
+.composer-change-status-counts em {
+  color: var(--status-error);
+  font-style: normal;
 }
 
-.voice-mode-bar {
-  min-height: 30px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 12px;
-  background: color-mix(in srgb, var(--accent) 10%, var(--input-bg));
-  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
-  border-bottom: 0;
-  color: var(--text-main);
-  font-size: 0.75rem;
+.composer-change-status.is-live {
+  color: var(--interactive-fg-hover);
+  border-color: var(--accent-border);
 }
 
-.voice-mode-dot {
+.composer-change-status-spinner {
   width: 8px;
   height: 8px;
   flex: 0 0 auto;
-  border-radius: var(--radius-full);
-  background: var(--accent);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
+  border: 1.5px solid var(--accent-border);
+  border-top-color: var(--interactive-fg-hover);
+  border-radius: 50%;
+  animation: composer-change-status-spin 700ms linear infinite;
 }
 
-.voice-mode-bar[data-state="listening"] .voice-mode-dot,
-.voice-mode-bar[data-state="speaking"] .voice-mode-dot {
-  animation: pulse-mic 1.2s infinite;
+@keyframes composer-change-status-spin {
+  to { transform: rotate(360deg); }
 }
 
-.voice-mode-transcript {
+@media (prefers-reduced-motion: reduce) {
+  .composer-change-status,
+  .composer-change-status-spinner {
+    transition: none;
+    animation: none;
+  }
+}
+
+/* Project context is the first row of the composer, not a promotional CTA. */
+.project-context-row {
+  position: relative;
   min-width: 0;
-  overflow: hidden;
-  color: var(--text-muted);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 44px;
+  padding: 5px 8px;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-bottom: 0;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
 }
 
-.toggle-switch {
-  width: 32px;
-  height: 18px;
+.project-context-row + .smart-context-bar {
+  border-top-color: var(--border-subtle);
+  border-radius: 0;
 }
 
-.slider {
-  background-color: var(--surface-strong);
+.git-branch-selector {
+  position: relative;
+  display: flex;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 38%;
 }
 
-.slider:before {
-  height: 14px;
-  width: 14px;
-  left: 2px;
-  bottom: 2px;
+.git-branch-trigger {
+  min-width: 0;
+  min-height: 32px;
+  max-width: 100%;
+  padding: 0 9px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  cursor: pointer;
 }
 
-input:checked + .slider:before {
-  transform: translateX(14px);
+.git-branch-trigger:hover:not(:disabled),
+.git-branch-trigger[aria-expanded='true'] {
+  color: var(--text-primary);
+  background: var(--bg-surface-hover);
 }
 
-#chat-form {
-  min-height: 88px;
-  display: grid;
-  grid-template-columns: 32px 32px minmax(0, 1fr) 32px 32px;
-  grid-template-rows: auto minmax(48px, auto) 32px;
-  align-items: end;
-  gap: 6px;
-  padding: 8px;
-  background: var(--input-bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-2xl);
-  box-shadow: none;
-  backdrop-filter: var(--glass-blur);
-  -webkit-backdrop-filter: var(--glass-blur);
+.git-branch-trigger:focus-visible {
+  position: relative;
+  z-index: 2;
+  outline: 2px solid var(--border-focus, var(--accent));
+  outline-offset: -2px;
 }
 
-.smart-context-bar + #chat-form {
+.git-branch-trigger:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.git-branch-icon,
+.git-branch-chevron {
+  flex: 0 0 auto;
+}
+
+.git-branch-icon {
+  color: var(--text-muted);
+}
+
+.git-branch-chevron {
+  color: var(--text-muted);
+  transition: transform 120ms ease;
+}
+
+.git-branch-trigger[aria-expanded='true'] .git-branch-chevron {
+  transform: rotate(180deg);
+}
+
+.git-branch-name {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.76rem;
+  font-weight: 500;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-branch-dirty {
+  width: 5px;
+  height: 5px;
+  flex: 0 0 5px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.git-branch-menu {
+  position: absolute;
+  left: 0;
+  right: auto;
+  bottom: calc(100% + 8px);
+  z-index: 80;
+  width: min(320px, calc(100vw - 48px));
+  padding: 6px;
+  color: var(--text-primary);
+  background: var(--bg-surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  overflow-y: auto;
+}
+
+.git-branch-menu.align-right {
+  left: auto;
+  right: 0;
+}
+
+.git-branch-menu.opens-down {
+  top: calc(100% + 8px);
+  bottom: auto;
+}
+
+.git-branch-search {
+  height: 34px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-muted);
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+.git-branch-search:focus-within {
+  border-color: var(--border-focus, var(--accent));
+}
+
+.git-branch-search input {
+  min-width: 0;
+  flex: 1;
+  color: var(--text-primary);
+  background: transparent;
+  border: 0;
+  outline: 0;
+  font: inherit;
+  font-size: 0.76rem;
+}
+
+.git-branch-search input::placeholder {
+  color: var(--text-muted);
+}
+
+.git-branch-menu-heading {
+  padding: 10px 8px 5px;
+  color: var(--text-muted);
+  font-size: 0.66rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: none;
+}
+
+.git-branch-list {
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.git-branch-option {
+  width: 100%;
+  min-height: 34px;
+  padding: 6px 8px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 16px;
+  align-items: center;
+  gap: 7px;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.git-branch-option span:nth-child(2) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-branch-option:hover:not(:disabled),
+.git-branch-option:focus-visible {
+  color: var(--text-primary);
+  background: var(--bg-surface-hover);
+  outline: 0;
+}
+
+.git-branch-option[aria-selected='true'] {
+  color: var(--text-primary);
+  background: var(--bg-surface-soft);
+}
+
+.git-branch-option[aria-selected='true'] svg {
+  color: var(--interactive-fg);
+}
+
+.git-branch-option:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
+.git-branch-option-icon {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.git-branch-empty {
+  padding: 14px 8px;
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  text-align: center;
+}
+
+.git-branch-error {
+  margin-top: 6px;
+  padding: 8px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--status-error, #ef4444);
+  border-top: 1px solid var(--border-subtle);
+  font-size: 0.7rem;
+  line-height: 1.35;
+}
+
+.git-branch-error button {
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 600;
+}
+
+.git-branch-track-label {
+  color: var(--text-muted);
+  font-size: 0.64rem;
+  text-align: right;
+}
+
+.git-branch-actions {
+  margin-top: 6px;
+  padding-top: 6px;
+  display: grid;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.git-branch-actions button {
+  min-height: 34px;
+  padding: 6px 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.git-branch-actions button:hover,
+.git-branch-actions button:focus-visible {
+  color: var(--text-primary);
+  background: var(--bg-surface-hover);
+  outline: 0;
+}
+
+.git-branch-view-header {
+  min-height: 34px;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.git-branch-view-header > button {
+  min-width: 30px;
+  height: 30px;
+  padding: 0 7px;
+  color: var(--text-muted);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.git-branch-view-header > button:hover:not(:disabled),
+.git-branch-view-header > button:focus-visible {
+  color: var(--text-primary);
+  background: var(--bg-surface-hover);
+  outline: 0;
+}
+
+.git-branch-view-header strong {
+  overflow: hidden;
+  font-size: 0.76rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-branch-create {
+  display: grid;
+  gap: 9px;
+}
+
+.git-branch-create > label {
+  margin-top: 3px;
+  color: var(--text-muted);
+  font-size: 0.68rem;
+  font-weight: 600;
+}
+
+.git-branch-create > input {
+  height: 36px;
+  padding: 0 10px;
+  color: var(--text-primary);
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  outline: 0;
+  font: inherit;
+  font-size: 0.76rem;
+}
+
+.git-branch-create > input:focus {
+  border-color: var(--border-focus, var(--accent));
+}
+
+.git-branch-create > p {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 0.68rem;
+  line-height: 1.4;
+}
+
+.git-branch-create > p strong {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.git-branch-create-submit {
+  min-height: 34px;
+  color: var(--text-on-accent);
+  background: var(--accent);
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.74rem;
+  font-weight: 600;
+}
+
+.git-branch-create-submit:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.git-branch-create-submit:focus-visible {
+  outline: 2px solid var(--border-focus, var(--accent));
+  outline-offset: 2px;
+}
+
+.git-branch-create-submit:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.git-branch-menu.is-graph {
+  width: min(540px, calc(100vw - 48px));
+}
+
+.git-graph-view {
+  display: grid;
+  gap: 6px;
+}
+
+.git-graph-refresh {
+  width: auto;
+  font-size: 0.68rem;
+}
+
+.git-graph-output {
+  min-height: 180px;
+  max-height: 330px;
+  margin: 0;
+  padding: 10px;
+  overflow: auto;
+  color: var(--text-secondary);
+  background: var(--input-bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono, monospace);
+  font-size: 0.68rem;
+  line-height: 1.65;
+  tab-size: 14;
+  white-space: pre;
+}
+
+.git-graph-output:focus-visible {
+  outline: 2px solid var(--border-focus, var(--accent));
+  outline-offset: -2px;
+}
+
+.git-graph-state {
+  min-height: 140px;
+  display: grid;
+  place-items: center;
+  color: var(--text-muted);
+  font-size: 0.74rem;
+}
+
+@media (max-width: 1100px) {
+  .git-branch-menu.is-graph {
+    width: min(320px, calc(100vw - 48px));
+  }
+}
+
+@media (max-width: 640px) {
+  .git-branch-selector {
+    max-width: 38%;
+  }
+
+  .git-branch-trigger {
+    padding-inline: 7px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .git-branch-chevron {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .project-context-row,
+  .workspace-select-btn,
+  .workspace-select-menu,
+  .workspace-select-search,
+  .git-branch-menu,
+  .git-branch-search,
+  .git-branch-create > input,
+  .git-graph-output {
+    border-color: CanvasText;
+  }
+
+  .git-branch-option[aria-selected='true'] {
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+
+  .git-branch-dirty,
+  .git-branch-create-submit {
+    background: Highlight;
+    color: HighlightText;
+  }
+}
+
+.smart-context-bar {
+  min-height: 26px;
+  padding: 7px 14px 6px 18px;
+  margin: 0;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-bottom: 0;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+
+.smart-context-option {
+  min-height: 30px;
+  padding: 4px 9px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  color: var(--text-soft);
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+
+.smart-context-option:hover {
+  border-color: var(--border);
+  background: color-mix(in srgb, var(--surface-strong) 55%, transparent);
+}
+
+.smart-context-option.is-active {
+  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
+  background: color-mix(in srgb, var(--accent) 9%, transparent);
+  color: var(--text-main);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .smart-context-option {
+    transition: none;
+  }
+}
+
+.smart-context-copy {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.smart-context-title {
+  color: inherit;
+  font-size: 0.74rem;
+  font-weight: 500;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 32px;
+  height: 18px;
+}
+
+.toggle-switch input:focus-visible + .slider {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.slider {
+  background-color: var(--surface-strong);
+}
+
+.slider:before {
+  height: 14px;
+  width: 14px;
+  left: 2px;
+  bottom: 2px;
+}
+
+input:checked + .slider:before {
+  transform: translateX(14px);
+  background-color: var(--accent-contrast, #ffffff);
+}
+
+@media (max-width: 560px) {
+  .smart-context-bar {
+    padding: 6px 10px 5px;
+    gap: 4px;
+  }
+
+  .smart-context-option {
+    padding-inline: 7px;
+  }
+
+}
+
+#chat-form {
+  min-height: 88px;
+  display: grid;
+  grid-template-columns: 32px 32px minmax(0, 1fr) 32px 32px;
+  grid-template-rows: auto minmax(48px, auto) 32px;
+  align-items: end;
+  gap: 6px;
+  padding: 10px 14px 10px 14px;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  box-shadow: none;
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+}
+
+.smart-context-bar + #chat-form {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+  border-bottom-left-radius: var(--radius-xl);
+  border-bottom-right-radius: var(--radius-xl);
 }
 
 #chat-form:focus-within {
@@ -2594,7 +3404,6 @@ input:checked + .slider:before {
 #chat-form:not(:has(.mint-attachment)) .chat-tool-menu-wrap,
 #chat-form:not(:has(.mint-attachment)) #screen-capture-btn,
 #chat-form:not(:has(.mint-attachment)) .chat-provider-select,
-#chat-form:not(:has(.mint-attachment)) #mic-btn,
 #chat-form:not(:has(.mint-attachment)) #send-btn {
   grid-row: 2;
 }
@@ -2630,7 +3439,6 @@ input:checked + .slider:before {
 }
 
 #send-btn,
-#mic-btn,
 #chat-tool-btn,
 #screen-capture-btn {
   width: 32px;
@@ -2665,31 +3473,8 @@ input:checked + .slider:before {
   cursor: pointer;
 }
 
-.screen-capture-eye {
-  position: relative;
-  width: 18px;
-  height: 11px;
-  border: 1.6px solid currentColor;
-  border-radius: 50% / 58%;
-  background: transparent;
-}
-
-.screen-capture-eye::after {
-  content: '';
-  position: absolute;
-  width: 4px;
-  height: 4px;
-  left: 50%;
-  top: 50%;
-  border: 1.6px solid currentColor;
-  border-radius: 50%;
-  background: transparent;
-  transform: translate(-50%, -50%);
-}
-
 #chat-tool-btn,
 #send-btn,
-#mic-btn,
 #screen-capture-btn {
   transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
   will-change: transform;
@@ -2697,14 +3482,12 @@ input:checked + .slider:before {
 
 #chat-tool-btn:hover,
 #send-btn:hover:not(:disabled),
-#mic-btn:hover,
 #screen-capture-btn:hover {
   transform: scale(1.08);
 }
 
 #chat-tool-btn:active,
 #send-btn:active:not(:disabled),
-#mic-btn:active,
 #screen-capture-btn:active {
   transform: scale(0.92);
 }
@@ -2771,11 +3554,11 @@ input:checked + .slider:before {
   width: fit-content;
   max-width: 100%;
   height: 32px;
-  padding: 0 24px 0 6px;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-md);
-  color: var(--text-soft);
+  padding: 0 16px 0 10px;
+  background: var(--surface-strong);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-full, 999px);
+  color: var(--text-secondary);
   cursor: pointer;
   font-family: inherit;
   font-size: 0.78rem;
@@ -2784,6 +3567,7 @@ input:checked + .slider:before {
   text-overflow: ellipsis;
   white-space: nowrap;
   -webkit-app-region: no-drag;
+  transition: all 0.15s ease;
 }
 
 .chat-provider-select:hover,
@@ -2804,18 +3588,7 @@ input:checked + .slider:before {
 
 .chat-provider-select option:checked {
   background: linear-gradient(var(--accent), var(--accent));
-  color: #ffffff;
-}
-
-#mic-btn {
-  grid-column: 4;
-  grid-row: 3;
-}
-
-#mic-btn.voice-mode-active {
-  background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
-  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
-  color: var(--accent-hover);
+  color: var(--accent-contrast, #ffffff);
 }
 
 #send-btn {
@@ -2865,12 +3638,11 @@ input:checked + .slider:before {
 
 #send-btn {
   background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-  color: white;
-  box-shadow: var(--glow-accent-md);
+  color: var(--accent-contrast, #ffffff);
+  box-shadow: none;
 }
 
 #send-btn:hover,
-#mic-btn:hover,
 #chat-tool-btn:hover,
 #screen-capture-btn:hover {
   background: var(--panel-raised);
@@ -2890,30 +3662,281 @@ input:checked + .slider:before {
   .conversation-panel {
     position: static;
     width: 100%;
+    height: 100%;
     max-height: none;
     transform: none;
     flex: 1;
     min-width: 0;
+    min-height: 0;
+    border-radius: 0;
+    overflow: hidden;
   }
 
   .chat-container {
     max-height: none;
   }
+  
+  .input-area {
+    padding: 10px;
+  }
+  
+  #chat-form {
+    min-height: auto;
+    padding: 6px;
+  }
 }
 
 /* Chat Bold Highlight styling */
 
 .chat-bold-highlight {
-  color: #38bdf8; /* Soft blue (sky-400) for default/dark theme */
+  color: var(--text-chat, var(--text-main, inherit));
+  font-weight: 600;
+}
+
+.chat-bold-highlight {
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+/* Input Disclaimer Footer */
+
+.input-disclaimer {
+  text-align: center;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  opacity: 0.85;
+  padding: 6px 20px 10px;
+  margin: 0;
+  flex-shrink: 0;
+  line-height: 1.5;
+  user-select: none;
+}
+
+/* Floating Glass Capsule Chat Header */
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 14px 6px 12px;
+  background: color-mix(in srgb, var(--chrome-bg, #161a22) 75%, transparent);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: var(--radius-xl, 14px);
+  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35),
+              0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
+  position: sticky;
+  top: 12px;
+  z-index: 50;
+  height: 48px;
+  flex-shrink: 0;
+  margin: 0 0 10px 0;
+  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
+}
+
+.chat-header:hover {
+  border-color: var(--border-default, rgba(255, 255, 255, 0.16));
+  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.45),
+              0 1px 0 0 rgba(255, 255, 255, 0.08) inset;
+}
+
+.chat-header-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.chat-header-brand-group {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+}
+
+.chat-header-logo {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.chat-header-title-text {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--text-primary, #f1f5f9);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 420px;
+  letter-spacing: -0.01em;
+}
+
+.chat-header-project-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-sm, 6px);
+  font-size: 0.76rem;
+  font-weight: 500;
+  color: var(--text-secondary, #94a3b8);
+  white-space: nowrap;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.chat-header-project-pill svg {
+  color: var(--flavor-teal, #2dd4bf);
+  flex-shrink: 0;
+}
+
+.chat-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.chat-header-pill-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  font-size: 0.73rem;
+  font-weight: 600;
+  color: var(--interactive-fg);
+  background: color-mix(in srgb, var(--accent, #10b981) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent, #10b981) 28%, transparent);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+}
+
+.chat-header-pill-btn:hover {
+  background: color-mix(in srgb, var(--accent, #10b981) 22%, transparent);
+  border-color: var(--accent, #10b981);
+  transform: translateY(-0.5px);
+}
+
+.chat-header-action-btn,
+.chat-header-clear-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-surface, #202632) 70%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border, rgba(255, 255, 255, 0.08)) 80%, transparent);
+  color: var(--text-muted, #94a3b8);
+  cursor: pointer;
+  transition: all 0.18s ease;
+}
+
+.chat-header-action-btn:hover,
+.chat-header-clear-btn:hover {
+  background: color-mix(in srgb, #ef4444 14%, transparent);
+  border-color: color-mix(in srgb, #ef4444 35%, transparent);
+  color: #ef4444;
+  transform: translateY(-0.5px);
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
+}
+
+.chat-header-breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.88rem;
+}
+
+.chat-header-back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: color-mix(in srgb, var(--bg-surface, #202632) 80%, transparent);
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
+  border-radius: var(--radius-xs, 6px);
+  padding: 3px 9px;
+  color: var(--text-primary);
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.chat-header-back-btn:hover {
+  background: var(--bg-surface-hover);
+  border-color: var(--border-strong);
+  color: var(--text-primary);
+  transform: translateY(-0.5px);
+}
+
+.chat-header-sep {
+  color: var(--text-muted);
+  opacity: 0.6;
+  font-size: 0.8rem;
+  user-select: none;
+}
+
+.chat-header-session-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--accent, #10b981) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent, #10b981) 20%, transparent);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.8rem;
   font-weight: 600;
+  color: var(--interactive-fg);
+}
+
+.drag-drop-overlay {
+  animation: pulseGlow 1.2s infinite alternate ease-in-out;
 }
 
-[data-theme="light"] .chat-bold-highlight {
-  color: #0284c7; /* Sky-600 for light theme */
+/* TTS Speaking Badge animation */
+
+.tts-btn {
+  border-radius: var(--radius-xs);
+}
+
+.tts-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  opacity: 1 !important;
 }
 
-[data-theme="midnight"] .chat-bold-highlight {
-  color: #38bdf8; /* Sky-400 for midnight theme */
+@media (max-width: 760px) {
+  .chat-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 200;
+    background: var(--chrome-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border-bottom: 1px solid var(--border);
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    margin: 0;
+    height: 52px;
+    padding: 10px 16px;
+    box-shadow: none;
+  }
+  .chat-header-title-text {
+    max-width: 180px;
+  }
 }
 
 /* System Event Divider with Pill */
@@ -2930,11 +3953,7 @@ input:checked + .slider:before {
 .system-event-line {
   flex: 1;
   height: 1px;
-  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
-}
-
-[data-theme="light"] .system-event-line {
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+  border-bottom: 1px dashed var(--border-default);
 }
 
 .system-event-pill {
@@ -2942,25 +3961,19 @@ input:checked + .slider:before {
   align-items: center;
   gap: 6px;
   padding: 4px 14px;
-  background: var(--panel-raised, rgba(30, 41, 59, 0.6));
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--bg-surface-raised);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-full);
-  color: var(--text-soft, #94a3b8);
+  color: var(--text-secondary);
   font-size: 0.78rem;
   font-weight: 500;
   margin: 0 12px;
   white-space: nowrap;
-  box-shadow: var(--shadow-xs);
-}
-
-[data-theme="light"] .system-event-pill {
-  background: #f1f5f9;
-  border-color: rgba(0, 0, 0, 0.06);
-  color: #475569;
+  box-shadow: var(--shadow-sm);
 }
 
 .system-event-pill svg {
-  color: var(--accent, #38bdf8);
+  color: var(--interactive-fg);
 }
 
 /* Stop button styling overrides for ChatPanel */
@@ -2968,25 +3981,13 @@ input:checked + .slider:before {
 #send-btn.stop-btn {
   background: #ef4444 !important;
   color: #ffffff !important;
-  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.28) !important;
+  box-shadow: none !important;
 }
 
 #send-btn.stop-btn:hover {
   background: #dc2626 !important;
 }
 
-.input-area.voice-active #chat-form {
-  border-color: var(--accent) !important;
-  animation: aura-breathe-form 2s infinite ease-in-out;
-  transition: border-color 0.3s ease;
-}
-
-.input-area.voice-active .voice-mode-bar {
-  border-color: var(--accent) !important;
-  animation: aura-breathe-bar 2s infinite ease-in-out;
-  transition: border-color 0.3s ease;
-}
-
 /* Message action buttons (Copy, Read Aloud, Like, Dislike) */
 
 .msg-action-btn {
@@ -3006,23 +4007,94 @@ input:checked + .slider:before {
 }
 
 .msg-action-btn:hover {
-  background: var(--surface-bg, rgba(255, 255, 255, 0.08));
-  border-color: var(--border, rgba(255, 255, 255, 0.1));
-  color: var(--text-main, #f8fafc);
+  background: var(--bg-surface-hover);
+  border-color: var(--border-default);
+  color: var(--text-primary);
   opacity: 1;
 }
 
 .msg-action-btn.is-copied {
-  color: var(--accent, #10b981) !important;
+  color: var(--interactive-fg) !important;
   background: color-mix(in srgb, var(--accent, #10b981) 12%, transparent);
   border-color: color-mix(in srgb, var(--accent, #10b981) 25%, transparent);
   opacity: 1 !important;
 }
 
 .msg-action-btn.is-speaking {
-  color: var(--accent, #10b981) !important;
+  color: var(--interactive-fg) !important;
   background: color-mix(in srgb, var(--accent, #10b981) 12%, transparent);
   border-color: color-mix(in srgb, var(--accent, #10b981) 25%, transparent);
-  animation: aura-breathe-bar 1.8s infinite ease-in-out;
   opacity: 1 !important;
 }
+
+/* Light Theme High-Contrast & Depth Enhancements */
+
+[data-theme="light"] .chat-header {
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+[data-theme="light"] .chat-header:hover {
+  border-color: rgba(15, 23, 42, 0.22);
+  box-shadow: 0 6px 24px -2px rgba(15, 23, 42, 0.12);
+}
+
+[data-theme="light"] .chat-header-title-text {
+  color: #0f172a;
+}
+
+[data-theme="light"] .chat-header-action-btn {
+  background: #f1f5f9;
+  border-color: rgba(15, 23, 42, 0.12);
+  color: #475569;
+}
+
+[data-theme="light"] .chat-header-action-btn:hover {
+  background: #fee2e2;
+  border-color: #fca5a5;
+  color: #dc2626;
+}
+
+[data-theme="light"] .smart-context-bar,
+[data-theme="light"] #chat-form {
+  background: #ffffff;
+  border-color: rgba(15, 23, 42, 0.16);
+  box-shadow: none;
+}
+
+[data-theme="light"] .smart-context-bar {
+  border-bottom: 0;
+}
+
+[data-theme="light"] .smart-context-option {
+  color: #334155;
+}
+
+[data-theme="light"] .smart-context-option.is-active {
+  color: #0f172a;
+  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
+  background: color-mix(in srgb, var(--accent) 10%, white);
+}
+
+[data-theme="light"] .slider {
+  background-color: #cbd5e1;
+}
+
+[data-theme="light"] .input-disclaimer {
+  color: #475569;
+  opacity: 1;
+}
+
+[data-theme="light"] #chat-tool-btn,
+[data-theme="light"] #screen-capture-btn {
+  background: #f1f5f9;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  color: #334155;
+}
+
+[data-theme="light"] #chat-tool-btn:hover,
+[data-theme="light"] #screen-capture-btn:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}