@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/src/css/desktop-tools.css

@@ -0,0 +1,928 @@
+.mint-titlebar {
+  position: relative;
+  z-index: 300;
+  display: grid;
+  grid-template-columns: auto minmax(24px, 1fr) auto auto;
+  align-items: center;
+  flex: 0 0 38px;
+  min-width: 0;
+  height: 38px;
+  padding-left: 7px;
+  padding-right: 132px;
+  color: var(--text-secondary, #aeb4c0);
+  background: var(--chrome-bg, #1b1c20);
+  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  user-select: none;
+}
+
+.mint-titlebar-left,
+.mint-titlebar-menus,
+.mint-titlebar-window-controls {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.workspace-context {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  -webkit-app-region: no-drag;
+}
+
+.workspace-context-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 28px;
+  margin-right: 4px;
+  border: 0;
+  border-radius: 5px;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.workspace-context-trigger:hover,
+.workspace-context-trigger.is-open {
+  color: var(--text-main, #f1f2f4);
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
+}
+
+.workspace-context-trigger svg,
+.workspace-context-heading svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.workspace-context-popover {
+  max-height: calc(100dvh - 72px);
+  position: absolute;
+  z-index: 550;
+  top: calc(100% + 5px);
+  right: 6px;
+  width: min(360px, calc(100vw - 24px));
+  overflow: hidden auto;
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
+  border-radius: 12px;
+  color: var(--text-main, #f1f2f4);
+  background: var(--bg-overlay, #111113);
+  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.6));
+}
+
+.workspace-context-heading,
+.workspace-context-sources-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.workspace-context-heading {
+  min-height: 42px;
+  padding: 0 10px 0 14px;
+  color: var(--text-secondary, #cbd5e1);
+  font-size: 0.74rem;
+  font-weight: 600;
+}
+
+.workspace-context-heading button {
+  display: inline-grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: 0;
+  border-radius: 5px;
+  color: var(--text-muted, #94a3b8);
+  background: transparent;
+  cursor: pointer;
+}
+
+.workspace-context-heading button:hover:not(:disabled) {
+  color: var(--text-main, #f1f2f4);
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
+}
+
+.workspace-context-heading button:disabled { opacity: 0.5; cursor: wait; }
+
+.workspace-context-row {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr) auto;
+  align-items: center;
+  width: 100%;
+  min-height: 54px;
+  padding: 7px 14px;
+  border: 0;
+  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+}
+
+button.workspace-context-row { cursor: pointer; }
+button.workspace-context-row:hover:not(:disabled) { background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08)); }
+button.workspace-context-row:disabled { opacity: 0.52; cursor: default; }
+
+.workspace-context-icon {
+  color: var(--interactive-fg, var(--accent));
+  font-family: var(--font-mono, monospace);
+  font-size: 0.82rem;
+}
+
+.workspace-context-copy { min-width: 0; }
+.workspace-context-copy strong,
+.workspace-context-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.workspace-context-copy strong { font-size: 0.77rem; font-weight: 600; }
+.workspace-context-copy small { margin-top: 2px; color: var(--text-muted, #94a3b8); font-size: 0.68rem; }
+.workspace-context-action { color: var(--interactive-fg, var(--accent)); font-size: 0.68rem; }
+.workspace-context-status { color: var(--text-muted, #94a3b8); font-size: 0.68rem; }
+.workspace-context-status.is-dirty { color: var(--status-warning, #fbbf24); }
+.workspace-context-diff { display: flex; gap: 5px; font: 0.68rem var(--font-mono, monospace); }
+.workspace-context-diff b { color: var(--status-success, #34d399); font-weight: 600; }
+.workspace-context-diff i { color: var(--status-error, #ef4444); font-style: normal; }
+
+.workspace-context-sources {
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+}
+
+.workspace-context-sources-heading { margin-bottom: 6px; color: var(--text-muted, #94a3b8); font-size: 0.68rem; font-weight: 600; }
+.workspace-context-sources p { overflow: hidden; margin: 4px 0 0; color: var(--text-secondary, #cbd5e1); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
+.workspace-context-sources .workspace-context-more { color: var(--interactive-fg, var(--accent)); }
+
+/* Workspace context popover */
+.workspace-context-trigger {
+  width: 32px;
+  height: 30px;
+  margin-right: 5px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
+}
+
+.workspace-context-trigger:hover,
+.workspace-context-trigger.is-open {
+  border-color: var(--border, rgba(255, 255, 255, 0.1));
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.07));
+}
+
+.workspace-context-trigger:focus-visible,
+.workspace-context-heading button:focus-visible,
+.workspace-context-row:focus-visible {
+  outline: 2px solid var(--accent, #10b981);
+  outline-offset: 2px;
+}
+
+.workspace-context-popover {
+  width: min(380px, calc(100vw - 24px));
+  padding: 8px;
+  border-color: var(--border-default, rgba(255, 255, 255, 0.12));
+  border-radius: 16px;
+  background: var(--bg-overlay, #111113);
+  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.24);
+}
+
+.workspace-context-heading {
+  min-height: 42px;
+  padding: 0 4px 7px 8px;
+  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  color: var(--text-main, #f1f2f4);
+  font-size: 0.78rem;
+}
+
+.workspace-context-heading-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.workspace-context-heading-title svg {
+  color: var(--accent, #10b981);
+}
+
+.workspace-context-heading button {
+  width: 30px;
+  height: 30px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
+}
+
+.workspace-context-heading button:hover:not(:disabled) {
+  border-color: var(--border, rgba(255, 255, 255, 0.1));
+}
+
+.workspace-context-heading button .is-refreshing {
+  animation: workspaceContextSpin 0.9s linear infinite;
+}
+
+@keyframes workspaceContextSpin {
+  to { transform: rotate(360deg); }
+}
+
+.workspace-context-row {
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  gap: 10px;
+  min-height: 58px;
+  margin-top: 4px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  transition: background 0.16s ease, border-color 0.16s ease;
+}
+
+.workspace-context-row.is-static {
+  color: var(--text-main, #f1f2f4);
+}
+
+button.workspace-context-row:hover:not(:disabled) {
+  border-color: var(--border, rgba(255, 255, 255, 0.08));
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.045));
+}
+
+button.workspace-context-row:disabled {
+  opacity: 0.7;
+}
+
+.workspace-context-icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: 9px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.035));
+  color: var(--interactive-fg, var(--accent));
+}
+
+.workspace-context-copy strong { font-size: 0.78rem; }
+.workspace-context-copy small { margin-top: 3px; font-size: 0.69rem; }
+
+.workspace-context-action,
+.workspace-context-status {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 2px 8px;
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: 999px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.035));
+  color: var(--text-secondary, #cbd5e1);
+  font-size: 0.65rem;
+  white-space: nowrap;
+}
+
+.workspace-context-action {
+  color: var(--interactive-fg, var(--accent));
+}
+
+.workspace-context-status.is-dirty {
+  border-color: color-mix(in srgb, var(--status-warning, #fbbf24) 25%, transparent);
+  background: color-mix(in srgb, var(--status-warning, #fbbf24) 9%, transparent);
+  color: var(--status-warning, #fbbf24);
+}
+
+.workspace-context-diff {
+  display: inline-flex;
+  gap: 6px;
+  padding: 3px 7px;
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: 999px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.035));
+  font: 0.66rem var(--font-mono, monospace);
+}
+
+.workspace-context-sources {
+  margin-top: 6px;
+  padding: 10px;
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: 11px;
+  background: var(--bg-surface-soft, rgba(255, 255, 255, 0.025));
+}
+
+.workspace-context-sources-heading {
+  margin-bottom: 8px;
+  color: var(--text-muted, #94a3b8);
+  font-size: 0.68rem;
+}
+
+.workspace-context-sources-heading > span:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.workspace-context-sources-heading > span:last-child {
+  display: inline-grid;
+  min-width: 20px;
+  height: 20px;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.06));
+}
+
+.workspace-context-sources p {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 5px 0 0;
+  color: var(--text-secondary, #cbd5e1);
+  font-size: 0.7rem;
+}
+
+.workspace-context-sources p svg {
+  flex: 0 0 auto;
+  color: var(--text-muted, #94a3b8);
+}
+
+.workspace-context-sources p:first-of-type:last-child {
+  color: var(--text-muted, #94a3b8);
+  line-height: 1.4;
+}
+
+@media (max-width: 420px) {
+  .workspace-context-popover {
+    right: -6px;
+    width: min(380px, calc(100vw - 16px));
+  }
+}
+
+.mint-titlebar-left {
+  gap: 3px;
+  min-width: 0;
+  -webkit-app-region: no-drag;
+}
+
+.mint-titlebar-icon-button,
+.mint-titlebar-menu-button,
+.mint-window-control {
+  -webkit-app-region: no-drag;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.mint-titlebar-icon-button {
+  width: 30px;
+  height: 28px;
+  border-radius: 5px;
+}
+
+.mint-titlebar-icon-button svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.mint-titlebar-icon-button:hover:not(:disabled),
+.mint-titlebar-menu-button:hover,
+.mint-titlebar-menu-button.is-open {
+  color: var(--text-main, #f1f2f4);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.mint-titlebar-icon-button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.mint-titlebar-divider {
+  width: 1px;
+  height: 18px;
+  margin: 0 5px;
+  background: var(--border-default, rgba(255, 255, 255, 0.12));
+}
+
+.mint-titlebar-menus {
+  gap: 2px;
+}
+
+.mint-titlebar-menu-wrap {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.mint-titlebar-menu-button {
+  min-width: 38px;
+  height: 28px;
+  padding: 0 9px;
+  border-radius: 5px;
+  font: inherit;
+  font-size: 0.76rem;
+}
+
+.mint-titlebar-menu {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  z-index: 500;
+  min-width: 210px;
+  padding: 5px;
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
+  border-radius: 8px;
+  background: var(--bg-surface, #20232a);
+  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.3));
+}
+
+.mint-titlebar-menu > button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 9px;
+  border: 0;
+  border-radius: 5px;
+  color: var(--text-main, #f1f2f4);
+  background: transparent;
+  font: inherit;
+  font-size: 0.76rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mint-titlebar-menu > button:hover,
+.mint-titlebar-menu > button:focus-visible {
+  outline: none;
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
+}
+
+.mint-titlebar-menu > button:disabled {
+  color: var(--text-muted, #9ca3af);
+  opacity: 0.48;
+  cursor: default;
+}
+
+.mint-titlebar-menu > button:disabled:hover {
+  background: transparent;
+}
+
+.mint-titlebar-menu kbd {
+  color: var(--text-muted, #9ca3af);
+  font: inherit;
+  font-size: 0.68rem;
+  white-space: nowrap;
+}
+
+.mint-titlebar-drag-region {
+  align-self: stretch;
+  min-width: 24px;
+  -webkit-app-region: drag;
+}
+
+.mint-window-resize-handles {
+  position: fixed;
+  z-index: 450;
+  inset: 0;
+  pointer-events: none;
+}
+
+.mint-window-resize-handle {
+  position: absolute;
+  display: block;
+  pointer-events: auto;
+}
+
+.mint-window-resize-handle.is-north,
+.mint-window-resize-handle.is-south {
+  right: 9px;
+  left: 9px;
+  height: 6px;
+}
+
+.mint-window-resize-handle.is-north { top: 0; cursor: n-resize; }
+.mint-window-resize-handle.is-south { bottom: 0; cursor: s-resize; }
+
+.mint-window-resize-handle.is-west,
+.mint-window-resize-handle.is-east {
+  top: 9px;
+  bottom: 9px;
+  width: 6px;
+}
+
+.mint-window-resize-handle.is-west { left: 0; cursor: w-resize; }
+.mint-window-resize-handle.is-east { right: 0; cursor: e-resize; }
+
+.mint-window-resize-handle.is-northwest,
+.mint-window-resize-handle.is-northeast,
+.mint-window-resize-handle.is-southwest,
+.mint-window-resize-handle.is-southeast {
+  width: 11px;
+  height: 11px;
+}
+
+.mint-window-resize-handle.is-northwest { top: 0; left: 0; cursor: nwse-resize; }
+.mint-window-resize-handle.is-northeast { top: 0; right: 0; cursor: nesw-resize; }
+.mint-window-resize-handle.is-southwest { bottom: 0; left: 0; cursor: nesw-resize; }
+.mint-window-resize-handle.is-southeast { right: 0; bottom: 0; cursor: nwse-resize; }
+
+.mint-titlebar-window-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  gap: 0;
+  -webkit-app-region: no-drag;
+}
+
+.mint-window-control {
+  width: 44px;
+  height: 38px;
+}
+
+.mint-window-control svg {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.mint-window-control:hover {
+  color: var(--text-main, #f1f2f4);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.mint-window-control.is-close:hover {
+  color: #fff;
+  background: #c42b1c;
+}
+
+.mint-titlebar button:focus-visible {
+  outline: 2px solid var(--border-focus, #10b981);
+  outline-offset: -2px;
+}
+
+.mint-shortcuts-backdrop {
+  position: fixed;
+  z-index: 600;
+  inset: 0;
+  display: grid;
+  place-items: start center;
+  padding-top: 72px;
+  background: rgba(0, 0, 0, 0.48);
+}
+
+.mint-shortcuts-dialog {
+  width: min(420px, calc(100vw - 32px));
+  overflow: hidden;
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
+  border-radius: 10px;
+  color: var(--text-main, #f1f2f4);
+  background: var(--bg-surface, #20232a);
+  box-shadow: var(--shadow-lg, 0 18px 48px rgba(0, 0, 0, 0.42));
+}
+
+.mint-shortcuts-dialog > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 0 12px 0 16px;
+  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+}
+
+.mint-shortcuts-dialog h2 {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.mint-shortcuts-dialog > header button {
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 5px;
+  color: var(--text-secondary, #aeb4c0);
+  background: transparent;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.mint-shortcuts-dialog > header button:hover {
+  color: var(--text-main, #f1f2f4);
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
+}
+
+.mint-shortcuts-dialog dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 8px;
+}
+
+.mint-shortcuts-dialog dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 34px;
+  padding: 0 8px;
+  border-radius: 5px;
+}
+
+.mint-shortcuts-dialog dl > div:hover {
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
+}
+
+.mint-shortcuts-dialog dt,
+.mint-shortcuts-dialog dd {
+  margin: 0;
+  font-size: 0.78rem;
+}
+
+.mint-shortcuts-dialog dd {
+  display: flex;
+  gap: 4px;
+  color: var(--text-muted, #9ca3af);
+}
+
+.mint-shortcuts-dialog kbd {
+  padding: 2px 5px;
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
+  border-radius: 4px;
+  color: var(--text-secondary, #aeb4c0);
+  background: var(--bg-canvas, #18191d);
+  font: 0.68rem/1.25 var(--font-mono, monospace);
+  white-space: nowrap;
+}
+
+@media (max-width: 760px) {
+  .mint-titlebar {
+    padding-left: 3px;
+    padding-right: 108px;
+  }
+
+  .mint-titlebar-icon-button {
+    width: 26px;
+  }
+
+  .mint-titlebar-divider {
+    margin-inline: 2px;
+  }
+
+  .mint-titlebar-menu-button {
+    min-width: 32px;
+    padding-inline: 5px;
+    font-size: 0.7rem;
+  }
+
+  .mint-window-control {
+    width: 36px;
+  }
+}
+
+.app-container.is-loading > .mint-titlebar {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.terminal-dock {
+  position: absolute;
+  z-index: 200;
+  left: var(--sidebar-expanded-width, 264px);
+  right: 0;
+  bottom: 0;
+  height: var(--terminal-dock-size, min(38vh, 420px));
+  display: flex;
+  flex-direction: column;
+  padding: 0 14px 12px 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(10px);
+  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
+}
+
+.terminal-dock.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.terminal-dock.is-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  width: var(--terminal-dock-size, clamp(280px, 35vw, 560px));
+  height: auto;
+  padding: 12px 12px 12px 0;
+  transform: translateX(10px);
+}
+
+.terminal-dock.is-right.is-open {
+  transform: translateX(0);
+}
+
+.app-body.sidebar-collapsed .terminal-dock:not(.is-right) {
+  left: var(--sidebar-collapsed-width, 56px);
+}
+
+.app-body.terminal-visible .assistant-workspace {
+  height: calc(100% - var(--terminal-dock-size, min(38vh, 420px)));
+  min-height: 0;
+}
+
+.app-body.terminal-visible.terminal-right .assistant-workspace {
+  height: 100%;
+  margin-right: var(--terminal-dock-size, clamp(280px, 35vw, 560px));
+  transition: grid-template-columns 0.58s cubic-bezier(0.16, 1, 0.3, 1),
+    gap 0.58s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.22s ease,
+    margin-right 0.22s ease, opacity 0.22s ease, transform 0.22s ease;
+}
+
+.terminal-dock-resize-handle {
+  position: absolute;
+  z-index: 2;
+  top: -5px;
+  right: 14px;
+  left: 0;
+  height: 10px;
+  cursor: row-resize;
+  touch-action: none;
+}
+
+.terminal-dock-resize-handle::after {
+  position: absolute;
+  top: 4px;
+  right: 0;
+  left: 0;
+  height: 2px;
+  content: '';
+  background: transparent;
+  transition: background 0.15s ease;
+}
+
+.terminal-dock-resize-handle:hover::after,
+.terminal-dock-resize-handle:focus-visible::after,
+.terminal-dock.is-resizing .terminal-dock-resize-handle::after {
+  background: var(--accent, #10b981);
+}
+
+.terminal-dock.is-right .terminal-dock-resize-handle {
+  top: 12px;
+  right: auto;
+  bottom: 12px;
+  left: -5px;
+  width: 10px;
+  height: auto;
+  cursor: col-resize;
+}
+
+.terminal-dock.is-right .terminal-dock-resize-handle::after {
+  top: 0;
+  right: 4px;
+  bottom: 0;
+  left: 4px;
+  width: 2px;
+  height: auto;
+}
+
+.terminal-dock.is-resizing,
+.terminal-dock.is-resizing * {
+  transition: none !important;
+}
+
+.terminal-dock-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 38px;
+  padding: 0 11px;
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
+  border-bottom: 0;
+  border-radius: 10px 10px 0 0;
+  color: var(--text-main, #e5e7eb);
+  background: var(--bg-surface, #20232a);
+}
+
+.terminal-dock-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.terminal-dock-status {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #57c78b;
+  box-shadow: 0 0 8px rgba(87, 199, 139, 0.42);
+}
+
+.terminal-dock-cwd {
+  overflow: hidden;
+  color: var(--text-muted, #9ca3af);
+  font: 11px 'Fira Code', monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.terminal-dock-header > button {
+  width: 26px;
+  height: 26px;
+  border: 0;
+  border-radius: 6px;
+  color: var(--text-muted, #9ca3af);
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.terminal-dock-header > button:hover {
+  color: var(--text-main, #e5e7eb);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.terminal-dock-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.terminal-dock-header-actions > button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: 0;
+  border-radius: 6px;
+  color: var(--text-muted, #9ca3af);
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.terminal-dock-header-actions > button:hover {
+  color: var(--text-main, #e5e7eb);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.terminal-dock-surface {
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+  padding: 10px 12px;
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
+  border-radius: 0 0 10px 10px;
+  background: #111318;
+}
+
+.terminal-dock-surface .xterm {
+  height: 100%;
+}
+
+.terminal-dock-surface .xterm-viewport {
+  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
+}
+
+@media (max-width: 760px) {
+  .terminal-dock {
+    left: 0;
+    padding: 0 8px 8px;
+  }
+
+  .app-body.terminal-visible .assistant-workspace {
+    height: calc(100% - var(--terminal-dock-size, 42vh));
+  }
+
+  .terminal-dock.is-right {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: min(var(--terminal-dock-size, 72vw), 82vw);
+    height: auto;
+    padding: 8px 8px 8px 0;
+  }
+
+  .app-body.terminal-visible.terminal-right .assistant-workspace {
+    height: 100%;
+    margin-right: min(var(--terminal-dock-size, 72vw), 82vw);
+  }
+}