@pheem49/mint 1.15.0 → 1.16.0

package/src/renderer/src/css/settings/base.css

@@ -1,32 +1,35 @@
 /* desktop: settings/base.css — split from settings.css, rules kept in original order */
+/* Scope element rules with :where() so lazy loading cannot restyle other pages
+   and existing specificity relationships inside Settings remain intact. */
 
-:root {
+.settings-container {
     --sidebar-bg: var(--bg-surface-soft);
 }
 
-* {
+:where(.settings-container),
+:where(.settings-container) * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
-body {
+:where(.settings-container) {
     height: 100vh;
     overflow: hidden;
     background: transparent;
     color: var(--text-primary);
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
     user-select: none;
 }
 
-button,
-input,
-select,
-textarea {
+:where(.settings-container) button,
+:where(.settings-container) input,
+:where(.settings-container) select,
+:where(.settings-container) textarea {
     font: inherit;
 }
 
-button {
+:where(.settings-container) button {
     -webkit-app-region: no-drag;
 }
 
@@ -90,7 +93,7 @@ button {
     font-size: 1rem;
 }
 
-h1 {
+:where(.settings-container) h1 {
     color: var(--text-primary);
     font-size: 1.02rem;
     font-weight: 600;
@@ -358,12 +361,12 @@ h1 {
     font-weight: 500;
 }
 
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="url"],
-select,
-textarea {
+:where(.settings-container) input[type="text"],
+:where(.settings-container) input[type="password"],
+:where(.settings-container) input[type="email"],
+:where(.settings-container) input[type="url"],
+:where(.settings-container) select,
+:where(.settings-container) textarea {
     width: 100%;
     min-height: 32px;
     padding: 6px 10px;
@@ -377,7 +380,7 @@ textarea {
     transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
 }
 
-select {
+:where(.settings-container) select {
     cursor: pointer;
     background-color: var(--input-bg) !important;
     color: var(--text-main) !important;
@@ -388,25 +391,25 @@ select {
     justify-self: end;
 }
 
-select:focus {
+:where(.settings-container) select:focus {
     background-color: var(--input-focus-bg) !important;
 }
 
-select option {
+:where(.settings-container) select option {
     background-color: var(--input-bg) !important;
     color: var(--text-main) !important;
 }
 
-select option:checked {
+:where(.settings-container) select option:checked {
     background: linear-gradient(var(--accent), var(--accent)) !important;
     color: var(--accent-contrast, #ffffff) !important;
 }
 
-[data-theme="light"] select {
+[data-theme="light"] :where(.settings-container) select {
     color-scheme: light;
 }
 
-textarea {
+:where(.settings-container) textarea {
     min-height: 74px;
     resize: vertical;
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -414,20 +417,20 @@ textarea {
     line-height: 1.45;
 }
 
-input:focus,
-select:focus,
-textarea:focus {
+:where(.settings-container) input:focus,
+:where(.settings-container) select:focus,
+:where(.settings-container) textarea:focus {
     background: var(--input-focus-bg);
     border-color: var(--accent);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
 }
 
-input::placeholder,
-textarea::placeholder {
+:where(.settings-container) input::placeholder,
+:where(.settings-container) textarea::placeholder {
     color: var(--placeholder);
 }
 
-input[type="color"] {
+:where(.settings-container) input[type="color"] {
     width: 44px;
     height: 34px;
     padding: 3px;
@@ -563,12 +566,12 @@ input[type="color"] {
     transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease;
 }
 
-input:checked + .settings-toggle-slider {
+:where(.settings-container) input:checked + .settings-toggle-slider {
     background: var(--accent);
     border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong));
 }
 
-input:checked + .settings-toggle-slider::before {
+:where(.settings-container) input:checked + .settings-toggle-slider::before {
     transform: translateX(20px);
     background: var(--accent-contrast, #ffffff);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
@@ -802,14 +805,14 @@ input:checked + .settings-toggle-slider::before {
     white-space: nowrap;
 }
 
-kbd {
+:where(.settings-container) kbd {
     min-width: 30px;
     padding: 4px 8px;
     border: 1px solid var(--border-strong);
     border-radius: var(--radius-sm);
     background: var(--input-bg);
     color: var(--interactive-fg-hover);
-    font-family: 'Outfit', sans-serif;
+    font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
     font-size: 0.76rem;
     font-weight: 700;
     text-align: center;
@@ -1133,40 +1136,40 @@ kbd {
 }
 
 /* Form inputs */
-[data-theme="light"] input[type="text"],
-[data-theme="light"] input[type="password"],
-[data-theme="light"] input[type="email"],
-[data-theme="light"] input[type="url"],
-[data-theme="light"] textarea {
+[data-theme="light"] :where(.settings-container) input[type="text"],
+[data-theme="light"] :where(.settings-container) input[type="password"],
+[data-theme="light"] :where(.settings-container) input[type="email"],
+[data-theme="light"] :where(.settings-container) input[type="url"],
+[data-theme="light"] :where(.settings-container) textarea {
     background: #ffffff;
     border: 1px solid rgba(15, 23, 42, 0.16);
     color: #0f172a;
 }
 
-[data-theme="light"] input[type="text"]:focus,
-[data-theme="light"] input[type="password"]:focus,
-[data-theme="light"] input[type="email"]:focus,
-[data-theme="light"] input[type="url"]:focus,
-[data-theme="light"] textarea:focus {
+[data-theme="light"] :where(.settings-container) input[type="text"]:focus,
+[data-theme="light"] :where(.settings-container) input[type="password"]:focus,
+[data-theme="light"] :where(.settings-container) input[type="email"]:focus,
+[data-theme="light"] :where(.settings-container) input[type="url"]:focus,
+[data-theme="light"] :where(.settings-container) textarea:focus {
     background: #ffffff;
     border-color: var(--accent);
     box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
 }
 
-[data-theme="light"] select {
+[data-theme="light"] :where(.settings-container) select {
     color-scheme: light;
     background-color: #ffffff !important;
     color: #0f172a !important;
     border: 1px solid rgba(15, 23, 42, 0.16);
 }
 
-[data-theme="light"] select:focus {
+[data-theme="light"] :where(.settings-container) select:focus {
     background-color: #ffffff !important;
     border-color: var(--accent);
     box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
 }
 
-[data-theme="light"] select option {
+[data-theme="light"] :where(.settings-container) select option {
     background-color: #ffffff !important;
     color: #0f172a !important;
 }
@@ -1194,12 +1197,12 @@ kbd {
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
 }
 
-[data-theme="light"] input:checked + .settings-toggle-slider {
+[data-theme="light"] :where(.settings-container) input:checked + .settings-toggle-slider {
     background: var(--accent);
     border-color: var(--accent);
 }
 
-[data-theme="light"] input:checked + .settings-toggle-slider::before {
+[data-theme="light"] :where(.settings-container) input:checked + .settings-toggle-slider::before {
     background: #ffffff;
 }
 

package/src/renderer/src/css/sidebar-workspace.css

@@ -1,10 +1,122 @@
 /* desktop: sidebar-workspace.css — split from styles.css, rules kept in original order */
 
-.toggle-model-btn,
-.change-expression-btn,
-.accessory-cycle-btn,
-.toggle-interaction-btn,
-.interaction-guide-btn,
+.workspace-file-menu {
+  position: fixed;
+  z-index: 10000;
+  width: 184px;
+  padding: 4px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md, 8px);
+  background: var(--bg-surface-raised, #202126);
+  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, .3));
+  -webkit-app-region: no-drag;
+}
+
+.workspace-file-menu button {
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: var(--radius-sm, 5px);
+  background: transparent;
+  color: var(--text-primary);
+  font: inherit;
+  font-size: .8rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.workspace-file-menu button:not(:disabled):hover,
+.workspace-file-menu button:not(:disabled):focus-visible {
+  background: var(--bg-surface-hover);
+}
+
+.workspace-file-menu button:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+
+.workspace-file-menu button.is-danger {
+  color: var(--status-error);
+}
+
+.workspace-file-menu button.is-danger:not(:disabled):hover,
+.workspace-file-menu button.is-danger:not(:disabled):focus-visible {
+  background: color-mix(in srgb, var(--status-error) 12%, transparent);
+}
+
+.workspace-file-menu button:disabled {
+  color: var(--text-muted);
+  cursor: default;
+}
+
+.workspace-undo-bar {
+  margin: 12px 8px;
+  padding: 10px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md, 8px);
+  background: var(--bg-surface-raised);
+  color: var(--text-primary);
+  font-size: .78rem;
+  overflow-wrap: anywhere;
+}
+.workspace-undo-bar > span { display: block; margin-bottom: 6px; }
+.workspace-undo-bar button {
+  border: 0;
+  border-radius: var(--radius-sm, 5px);
+  padding: 6px 8px;
+  background: var(--bg-surface-hover);
+  color: var(--text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.workspace-undo-bar button:disabled { opacity: .5; cursor: default; }
+.workspace-undo-bar details { margin-top: 8px; color: var(--text-muted); }
+.workspace-undo-bar summary { cursor: pointer; }
+.workspace-undo-bar ol { padding-left: 18px; }
+.workspace-undo-bar li { margin: 6px 0; }
+.workspace-history-error { padding: 10px; color: var(--color-danger, #f87171); font-size: .8rem; }
+.workspace-file-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: rgba(0, 0, 0, .45);
+}
+.workspace-file-dialog {
+  width: min(420px, 100%);
+  padding: 20px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md, 8px);
+  background: var(--bg-surface-raised, #202126);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-lg);
+}
+.workspace-file-dialog h3 { margin: 0 0 16px; overflow-wrap: anywhere; }
+.workspace-file-dialog label { display: grid; gap: 8px; font-size: .85rem; }
+.workspace-file-dialog input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font: inherit;
+  box-sizing: border-box;
+}
+.workspace-file-dialog p { color: var(--color-danger, #f87171); font-size: .8rem; }
+.workspace-file-dialog > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+.workspace-file-dialog button {
+  padding: 7px 12px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--bg-surface-hover);
+  color: var(--text-primary);
+  font: inherit;
+  cursor: pointer;
+}
 .clear-btn,
 .settings-btn {
   -webkit-app-region: no-drag;
@@ -26,33 +138,11 @@
   white-space: nowrap;
   transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
 }
-
-.toggle-model-btn svg,
-.change-expression-btn svg,
-.accessory-cycle-btn svg,
-.toggle-interaction-btn svg,
-.interaction-guide-btn svg,
 .clear-btn svg,
 .settings-btn svg {
   flex: 0 0 auto;
 }
 
-.change-expression-btn:hover {
-  background: color-mix(in srgb, var(--flavor-amber) 15%, transparent);
-  border-color: color-mix(in srgb, var(--flavor-amber) 20%, transparent);
-  color: var(--flavor-amber);
-}
-
-.toggle-interaction-btn .interaction-off-mark {
-  opacity: 0;
-}
-
-.interaction-guide-btn:hover {
-  background: color-mix(in srgb, var(--flavor-cyan) 14%, transparent);
-  border-color: color-mix(in srgb, var(--flavor-cyan) 20%, transparent);
-  color: var(--flavor-cyan);
-}
-
 .clear-btn:hover {
   background: color-mix(in srgb, var(--flavor-amber) 15%, transparent);
   border-color: color-mix(in srgb, var(--flavor-amber) 20%, transparent);
@@ -379,7 +469,6 @@
   white-space: nowrap;
 }
 
-
 .sidebar-top-action {
   margin-bottom: 4px;
 }
@@ -388,49 +477,6 @@
   margin-bottom: 12px;
 }
 
-.sidebar-model-controls {
-  display: grid;
-  width: 100%;
-  align-items: stretch;
-  justify-items: stretch;
-  justify-content: stretch;
-  gap: 2px;
-  padding: 10px 0 18px;
-  border-top: 1px solid var(--border-subtle);
-  border-bottom: 1px solid var(--border-subtle);
-  margin-bottom: 6px;
-}
-
-.workspace-sidebar .toggle-model-btn,
-.workspace-sidebar .change-expression-btn,
-.workspace-sidebar .accessory-cycle-btn,
-.workspace-sidebar .toggle-interaction-btn,
-.workspace-sidebar .interaction-guide-btn {
-  width: 100%;
-  min-width: 0;
-  max-width: none;
-  height: 32px;
-  justify-content: flex-start;
-  padding: 0 10px;
-  color: var(--text-soft);
-  font-weight: 400;
-  gap: 9px;
-}
-
-.workspace-sidebar .toggle-model-btn:hover,
-.workspace-sidebar .toggle-model-btn.active,
-.workspace-sidebar .change-expression-btn:hover,
-.workspace-sidebar .accessory-cycle-btn:hover,
-.workspace-sidebar .accessory-cycle-btn.active,
-.workspace-sidebar .toggle-interaction-btn:hover,
-.workspace-sidebar .toggle-interaction-btn.active,
-.workspace-sidebar .interaction-guide-btn:hover,
-.workspace-sidebar .interaction-guide-btn.active {
-  background: var(--surface-strong);
-  border-color: transparent;
-  color: var(--text-main);
-}
-
 .sidebar-section {
   flex: 1 1 0;
   min-height: 0;
@@ -633,6 +679,7 @@
 .sidebar-conversation-menu-popover button:hover { background: var(--bg-surface-hover); }
 .sidebar-conversation-menu-popover button.is-destructive { color: var(--color-danger, #f87171); }
 .sidebar-conversation-menu-popover button span { flex: 1; }
+.workspace-sidebar .sidebar-menu-icon { flex: 0 0 14px; }
 @media (pointer: coarse) { .sidebar-conversation-menu-trigger { opacity: 1; } }
 
 .sidebar-chat-rename-input {
@@ -657,17 +704,11 @@
 .sidebar-chat-item.active:hover .mint-status-pill {
   display: none;
 }
-
 .app-body.sidebar-collapsed .sidebar-new-chat,
 .app-body.sidebar-collapsed .sidebar-top-action,
 .app-body.sidebar-collapsed .sidebar-settings,
 .app-body.sidebar-collapsed .sidebar-bottom-actions .clear-btn,
 .app-body.sidebar-collapsed .sidebar-bottom-actions .settings-btn,
-.app-body.sidebar-collapsed .workspace-sidebar .toggle-model-btn,
-.app-body.sidebar-collapsed .workspace-sidebar .change-expression-btn,
-.app-body.sidebar-collapsed .workspace-sidebar .accessory-cycle-btn,
-.app-body.sidebar-collapsed .workspace-sidebar .toggle-interaction-btn,
-.app-body.sidebar-collapsed .workspace-sidebar .interaction-guide-btn,
 .app-body.sidebar-collapsed .sidebar-project {
   width: 40px;
   height: 34px;
@@ -1352,23 +1393,6 @@
     height: 34px;
   }
 
-  .toggle-model-btn,
-  .change-expression-btn,
-.accessory-cycle-btn,
-  .toggle-interaction-btn,
-  .interaction-guide-btn {
-    width: 34px;
-    padding: 0;
-  }
-
-  .toggle-model-btn span,
-  .change-expression-btn span,
-.accessory-cycle-btn span,
-  .toggle-interaction-btn span,
-  .interaction-guide-btn span {
-    display: none;
-  }
-
   .sidebar-toggle {
     display: none;
   }
@@ -1627,6 +1651,9 @@
 }
 
 .sidebar-show-more-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   background: transparent;
   border: none;
   color: var(--text-muted);
@@ -1638,6 +1665,8 @@
   margin-top: 2px;
   transition: color 0.15s ease, background 0.15s ease;
 }
+.sidebar-show-more-btn svg { flex: 0 0 auto; transition: transform 0.15s ease; }
+.sidebar-show-more-btn svg.is-expanded { transform: rotate(180deg); }
 
 .sidebar-show-more-btn:hover {
   color: var(--text-secondary);
@@ -1732,6 +1761,8 @@
 }
 
 .sidebar-move-item-check {
+  display: inline-flex;
+  align-items: center;
   margin-left: auto;
   font-size: 0.85rem;
   color: var(--flavor-teal, #2dd4bf);
@@ -1743,3 +1774,29 @@
   background: var(--border-subtle, rgba(255, 255, 255, 0.08));
   margin: 4px 2px;
 }
+
+/* The resize target stays inside the panel so its overflow cannot clip it. */
+.workspace-pane-resizer {
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: 8px;
+  z-index: 4;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+.workspace-pane-resizer::after {
+  content: '';
+  position: absolute;
+  inset: 8px 3px;
+  border-radius: 2px;
+  background: var(--border-default);
+  transition: background 0.15s ease;
+}
+.workspace-pane-resizer:hover::after,
+.workspace-pane-resizer:focus-visible::after,
+.is-workspace-resizing .workspace-pane-resizer::after { background: var(--border-focus); }
+.workspace-pane-resizer:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
+.workspace-pane-resizer[hidden] { display: none; }
+@media (prefers-reduced-motion: reduce) { .workspace-pane-resizer::after { transition: none; } }
+@media (forced-colors: active) { .workspace-pane-resizer::after { background: Highlight; } }

package/src/renderer/src/css/tool-surfaces.css

@@ -116,6 +116,11 @@ body.is-tool-resizing .assistant-workspace {
   border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
 }
 
+[data-surface="opaque"] .tool-surface-tabs,
+[data-surface="opaque"] .tool-surface-launcher-header {
+  background: var(--chrome-bg, var(--bg-surface, #18191c));
+}
+
 .tool-surface-launcher-header {
   position: relative;
   z-index: 300;
@@ -215,13 +220,28 @@ body.is-tool-resizing .assistant-workspace {
   top: calc(100% + 6px);
   left: 0;
   right: auto;
-  width: 175px;
+  width: 232px;
   max-width: calc(100vw - 24px);
-  padding: 5px;
+  padding: 7px;
   border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
   border-radius: var(--radius-md, 10px);
-  background: var(--bg-surface, #20232a);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
+  background: color-mix(in srgb, var(--bg-surface, #20232a) 96%, black);
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.58), 0 2px 8px rgba(0, 0, 0, 0.28);
+  backdrop-filter: var(--glass-blur, none);
+  animation: toolMenuEnter 120ms ease-out both;
+}
+
+.tool-surface-menu-heading {
+  padding: 6px 10px 7px;
+  color: var(--text-muted, #94a3b8);
+  font-size: 0.64rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+
+@keyframes toolMenuEnter {
+  from { opacity: 0; transform: translateY(-3px) scale(0.985); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .tool-surface-switch-menu.is-align-right {
@@ -235,9 +255,9 @@ body.is-tool-resizing .assistant-workspace {
 }
 
 .tool-surface-switch-menu .tool-surface-launcher-item {
-  min-height: 32px;
-  padding: 0 10px;
-  gap: 8px;
+  min-height: 46px;
+  padding: 4px 9px;
+  gap: 9px;
   border: 0;
   border-radius: var(--radius-xs, 6px);
   background: transparent;
@@ -258,13 +278,33 @@ body.is-tool-resizing .assistant-workspace {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   color: var(--text-muted, #94a3b8);
   flex-shrink: 0;
   transition: color 150ms ease, transform 150ms ease;
 }
 
+.tool-surface-switch-menu .tool-surface-menu-icon.is-review { color: #8ab4ff; }
+.tool-surface-switch-menu .tool-surface-menu-icon.is-terminal { color: #34d399; }
+.tool-surface-switch-menu .tool-surface-menu-icon.is-browser { color: #c4a7ff; }
+.tool-surface-switch-menu .tool-surface-menu-icon.is-files { color: #fbbf24; }
+
+.tool-surface-menu-copy { flex: 1; min-width: 0; }
+
+.tool-surface-menu-label {
+  color: var(--text-main, #e2e8f0);
+  font-size: 0.8rem;
+  font-weight: 550;
+  line-height: 1.15;
+}
+
+.tool-surface-switch-menu .tool-surface-launcher-item kbd {
+  padding: 3px 5px;
+  border-radius: 5px;
+  font-size: 0.64rem;
+}
+
 .tool-surface-menu-icon svg {
   width: 18px;
   height: 18px;
@@ -277,6 +317,13 @@ body.is-tool-resizing .assistant-workspace {
   transform: scale(1.04);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .tool-surface-page.is-entering, .tool-surface-content.is-launcher .tool-surface-launcher-item { animation: none; }
+  .assistant-workspace { transition: none; }
+  .tool-surface-switch-menu { animation: none; }
+  .tool-surface-menu-icon { transition: none; }
+}
+
 .tool-surface-tabs-container {
   display: flex;
   align-items: center;
@@ -585,8 +632,14 @@ body.is-tool-resizing .assistant-workspace {
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow-y: auto;
+  padding-block: 18px;
 }
 
+.tool-surface-panel-host { width: 100%; height: 100%; min-width: 0; min-height: 0; }
+.tool-surface-menu-icon.is-mods, .tool-surface-tab-icon.is-mods { color: var(--accent); }
+.tool-surface-menu-icon.is-background, .tool-surface-tab-icon.is-background { color: var(--accent); }
+
 .tool-surface-launcher {
   display: flex;
   flex-direction: column;
@@ -714,6 +767,9 @@ body.is-tool-resizing .assistant-workspace {
     width: 100%;
   }
 
+  .tool-surface-page.is-maximized { left: 0 !important; }
+  .app-body.sidebar-collapsed .tool-surface-page.is-maximized { left: 0 !important; }
+
   .app-body.tool-surface-active .assistant-workspace {
     margin-right: 0;
     margin-bottom: 0;

package/src/renderer/src/css/widget.css

@@ -7,7 +7,7 @@ body {
     justify-content: center;
     align-items: center;
     height: 100vh;
-    font-family: 'Outfit', sans-serif;
+    font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
     user-select: none;
 }