@pheem49/mint 1.14.0 → 1.15.0

package/src/renderer/src-web/css/app-shell.css

@@ -1,33 +1,6 @@
 /* web: app-shell.css — split from styles.css, rules kept in original order */
 
 :root {
-  /* Surface ladder — same relative order as before (bg < panel-soft <
-     chrome-bg < panel-bg < surface-bg < input-bg < panel-raised <
-     surface-strong), just spaced further apart. The old values sat within
-     ~25 points of each other on a 0-255 scale (input-bg and panel-raised
-     were literally the same lightness), so adjacent layers — a panel next
-     to the surface behind it, an input next to its panel — were hard to
-     tell apart. Each step here is a clear ~6-12 point jump. */
-  --bg-color: #0a0a0b;
-  --bg-gradient: #0a0a0b;
-  --panel-bg: #1e1e20;
-  --panel-raised: #343436;
-  --panel-soft: #121214;
-  --chrome-bg: #18181a;
-  --surface-bg: #252527;
-  --surface-strong: #404042;
-  --input-bg: #2c2c2e;
-  --text-main: #e8e8ea;
-  --text-chat: var(--text-main);
-  --text-muted: #8f8f94;
-  --text-soft: #d1d1d4;
-  --placeholder: #818187;
-  --accent: #10b981;
-  --accent-hover: #34d399;
-  --border: rgba(255, 255, 255, 0.075);
-  --border-light: rgba(255, 255, 255, 0.11);
-  --shadow: none;
-  --glass-blur: none;
   --status-listening: #7dd3fc;
   --status-thinking: var(--accent);
   --status-speaking: #22c55e;
@@ -46,13 +19,13 @@
      share the same corner radius. Sub-4px radii are left as raw px values
      where they appear — those are deliberate micro-details (e.g. a small
      square-ish status dot), not part of this scale. */
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 10px;
-  --radius-xl: 12px;
-  --radius-2xl: 16px;
-  --radius-3xl: 20px;
+  --radius-xs: 6px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 14px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+  --radius-3xl: 24px;
   --radius-full: 999px;
 
   /* Elevation scale — border-first: most resting surfaces lean on --border
@@ -78,22 +51,6 @@
 }
 
 [data-theme="light"] {
-  --bg-color: #f8fafc;
-  --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-  --panel-bg: rgba(255, 255, 255, 0.75);
-  --panel-raised: #ffffff;
-  --panel-soft: #eef2f7;
-  --chrome-bg: rgba(255, 255, 255, 0.88);
-  --surface-bg: #ffffff;
-  --surface-strong: #e2e8f0;
-  --input-bg: #f8fafc;
-  --text-main: #0f172a;
-  --text-muted: #64748b;
-  --text-soft: #334155;
-  --placeholder: #8590a2;
-  --border: rgba(0, 0, 0, 0.06);
-  --border-light: rgba(255, 255, 255, 0.6);
-  --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
   --status-listening: #0284c7;
   --status-thinking: var(--accent);
   --status-speaking: #16a34a;
@@ -107,22 +64,6 @@
 }
 
 [data-theme="midnight"] {
-  --bg-color: #020617;
-  --bg-gradient: linear-gradient(135deg, #020617 0%, #080a22 55%, #120828 100%);
-  --panel-bg: rgba(5, 8, 24, 0.94);
-  --panel-raised: rgba(99, 102, 241, 0.085);
-  --panel-soft: rgba(99, 102, 241, 0.055);
-  --chrome-bg: rgba(2, 6, 23, 0.88);
-  --surface-bg: rgba(5, 8, 24, 0.88);
-  --surface-strong: rgba(99, 102, 241, 0.16);
-  --input-bg: rgba(0, 0, 0, 0.46);
-  --text-main: #e2e8f0;
-  --text-muted: #74809a;
-  --text-soft: #bac4d6;
-  --placeholder: #68708a;
-  --border: rgba(99, 102, 241, 0.16);
-  --border-light: rgba(99, 102, 241, 0.26);
-  --shadow: none;
   --status-listening: #7dd3fc;
   --status-thinking: var(--accent);
   --status-speaking: #22c55e;
@@ -142,12 +83,15 @@
 }
 
 body {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background: transparent;
   color: var(--text-main);
   height: 100vh;
   overflow: hidden;
   user-select: none;
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .app-container {
@@ -156,7 +100,7 @@ body {
   flex-direction: column;
   background: var(--bg-gradient);
   border-radius: 0;
-  border: 1px solid rgba(255, 255, 255, 0.045);
+  border: 1px solid var(--border-subtle);
   box-shadow: var(--shadow);
   overflow: hidden;
   position: relative;
@@ -246,7 +190,7 @@ h1 {
 }
 
 .minimize-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bg-surface-hover);
   color: var(--text-main);
 }
 
@@ -318,8 +262,8 @@ h1 {
 }
 
 .maximize-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-color);
+  background: var(--bg-surface-hover);
+  color: var(--text-main);
 }
 
 /* Chat Area */
@@ -395,6 +339,18 @@ h1 {
   box-shadow: 0 30px 80px rgba(0,0,0,0.6);
 }
 
+[data-theme="light"] .settings-modal-overlay {
+  background: rgba(15, 23, 42, 0.42);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+[data-theme="light"] .settings-modal {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08);
+}
+
 @keyframes modelFloat {
   0%,
   100% {
@@ -590,8 +546,8 @@ h1 {
 }
 
 .proactive-dismiss-btn:hover {
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
 }
 
 /* Chips row */
@@ -626,8 +582,8 @@ h1 {
 
 .suggestion-chip:hover {
   background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000000));
-  border-color: rgba(255, 255, 255, 0.3);
-  color: white;
+  border-color: var(--border-strong);
+  color: var(--text-on-accent);
   box-shadow: var(--glow-accent-md), inset 0 1px 1px rgba(255, 255, 255, 0.2);
   transform: translateY(-3px) scale(1.05);
 }
@@ -703,6 +659,7 @@ h1 {
 .assistant-workspace {
   display: grid;
   grid-template-columns: minmax(320px, 1fr) minmax(360px, 520px);
+  grid-template-rows: minmax(0, 1fr);
   gap: 18px;
   margin-left: var(--sidebar-expanded-width);
   padding: 0;
@@ -724,6 +681,10 @@ h1 {
   grid-template-columns: minmax(420px, 1.18fr) minmax(360px, 0.72fr);
 }
 
+.assistant-workspace.workspace-open .message {
+  max-width: 100%;
+}
+
 .app-body.sidebar-collapsed .assistant-workspace {
   margin-left: calc(var(--sidebar-collapsed-width) + var(--sidebar-content-gap));
 }
@@ -817,17 +778,73 @@ h1 {
   height: 100%;
   max-width: none;
   margin: 0 auto;
-  padding: 32px 0 8px;
+  padding: 16px 0 8px;
   grid-column: 1 / -1;
   z-index: 1;
 }
 
 .chat-panel-split-wrapper.no-preview {
-  display: contents;
+  width: 100%;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  align-self: stretch;
+  position: static;
+  z-index: 1;
+}
+
+.chat-panel-split-wrapper.no-preview .conversation-panel {
+  width: 100%;
+  height: auto;
+  min-height: 0;
+  align-self: stretch;
+}
+
+.assistant-workspace.model-hidden .chat-panel-split-wrapper.no-preview {
+  grid-column: 1 / -1;
+  grid-row: 1;
+}
+
+.assistant-workspace.model-hidden .chat-panel-split-wrapper.no-preview .conversation-panel {
+  height: auto;
+  min-height: 0;
+  align-self: stretch;
+}
+
+@media (min-width: 761px) {
+  .conversation-panel.is-empty .input-area {
+    position: relative;
+  }
+
+  .conversation-panel.is-empty .empty-chat-prompt {
+    position: absolute;
+    top: -100%;
+    right: 0;
+    left: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .assistant-workspace .chat-panel-split-wrapper.no-preview {
+    width: min(1100px, calc(100% - 64px));
+    justify-self: center;
+  }
+
+  .assistant-workspace.model-hidden .chat-panel-split-wrapper.no-preview {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: min(1100px, calc(100% - 64px));
+    height: auto;
+    transform: translateX(-50%);
+  }
 }
 
 .chat-panel-split-wrapper.has-preview {
   grid-column: 1 / -1;
+  grid-row: 1;
   width: 100%;
   height: 100%;
   min-width: 0;
@@ -929,15 +946,72 @@ h1 {
 }
 
 .assistant-workspace.model-hidden .conversation-panel.is-empty {
-  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   align-content: stretch;
   justify-content: stretch;
   width: min(840px, calc(100% - 64px));
   margin: 0 auto;
-  padding-top: 0;
+  padding-top: 16px;
   padding-bottom: 8px;
 }
 
+.assistant-workspace.model-hidden .conversation-panel.is-empty .chat-header {
+  grid-row: 1;
+  align-self: start;
+}
+
+.assistant-workspace.model-hidden .conversation-panel.is-empty .input-area {
+  grid-row: 2;
+  align-self: center;
+  margin: 0;
+}
+
+.assistant-workspace.model-hidden .conversation-panel.is-empty .input-disclaimer {
+  grid-row: 3;
+}
+
+/* WebKitGTK can resolve the no-preview wrapper to its intrinsic content
+   height. Anchor the desktop empty state to the full workspace instead, so
+   the header never follows the vertically-centered composer. */
+@media (min-width: 761px) {
+  .assistant-workspace .conversation-panel.is-empty {
+    position: static;
+  }
+
+  .assistant-workspace .conversation-panel.is-empty .chat-header {
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    right: auto;
+    width: min(840px, calc(100% - 64px));
+    margin: 0;
+    transform: translateX(-50%);
+  }
+
+  .assistant-workspace .conversation-panel.is-empty .input-area {
+    position: absolute;
+    top: auto;
+    bottom: 44px;
+    left: 50%;
+    width: min(840px, calc(100% - 64px));
+    margin: 0;
+    transform: translateX(-50%);
+  }
+
+  .assistant-workspace .conversation-panel.is-empty .empty-chat-prompt {
+    top: calc(100% + 44px - 50vh);
+    transform: translateY(-50%);
+  }
+
+  .assistant-workspace .conversation-panel.is-empty .input-disclaimer {
+    position: absolute;
+    right: 32px;
+    bottom: 8px;
+    left: 32px;
+    margin: 0;
+  }
+}
+
 @keyframes toolMenuPopIn {
   from {
     opacity: 0;
@@ -1086,6 +1160,10 @@ h1 {
     width: 100%;
     flex-shrink: 0;
   }
+
+  .assistant-workspace.model-hidden .conversation-panel.is-empty .input-area {
+    margin: auto 0;
+  }
 }
 
 /* Sidebar Search Modal Backdrop */
@@ -1157,13 +1235,13 @@ h1 {
 }
 
 .search-modal-header input::placeholder {
-  color: var(--text-muted, #64748b);
+  color: var(--placeholder);
 }
 
 .search-modal-close {
   background: transparent;
   border: 0;
-  color: var(--text-muted, #64748b);
+  color: var(--text-muted);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -1174,8 +1252,8 @@ h1 {
 }
 
 .search-modal-close:hover {
-  color: var(--text-main, #f8fafc);
-  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  background: var(--surface-hover);
 }
 
 /* Body */
@@ -1193,10 +1271,10 @@ h1 {
   display: flex;
   align-items: center;
   gap: 10px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
+  background: var(--surface-strong);
+  border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  color: var(--text-main, #f8fafc);
+  color: var(--text-primary);
   padding: 10px 14px;
   cursor: pointer;
   text-align: left;
@@ -1206,7 +1284,7 @@ h1 {
 }
 
 .search-new-chat-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--surface-hover);
 }
 
 .search-modal-results {
@@ -1222,10 +1300,10 @@ h1 {
 }
 
 .search-group-title {
-  color: var(--accent, #10b981);
+  color: var(--interactive-fg);
   font-size: 0.72rem;
   font-weight: 600;
-  text-transform: uppercase;
+  text-transform: none;
   letter-spacing: 0.05em;
   padding: 4px 10px;
 }
@@ -1237,7 +1315,7 @@ h1 {
   background: transparent;
   border: 0;
   border-radius: var(--radius-sm);
-  color: var(--text-soft, #94a3b8);
+  color: var(--text-secondary);
   padding: 8px 12px;
   cursor: pointer;
   text-align: left;
@@ -1251,19 +1329,19 @@ h1 {
 }
 
 .search-result-item svg {
-  color: var(--text-muted, #64748b);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 
 .search-result-item:hover,
 .search-result-item.active {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--text-main, #f8fafc);
+  background: var(--surface-hover);
+  color: var(--text-primary);
 }
 
 .search-result-item:hover svg,
 .search-result-item.active svg {
-  color: var(--text-main, #f8fafc);
+  color: var(--text-primary);
 }
 
 .search-result-title {
@@ -1375,7 +1453,7 @@ h1 {
   align-items: center;
   gap: 6px;
   background: color-mix(in srgb, var(--accent) 15%, transparent);
-  color: var(--accent);
+  color: var(--interactive-fg);
   border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
   padding: 5px 12px;
   border-radius: 6px;
@@ -1387,7 +1465,7 @@ h1 {
 
 .rewind-toast-undo-btn:hover:not(:disabled) {
   background: var(--accent);
-  color: #0b0f19;
+  color: var(--text-on-accent);
   box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
 }