@pheem49/mint 1.14.0 → 1.15.0

package/src/renderer/shared/utils/ui.ts

@@ -135,71 +135,11 @@ export async function createTrimmedImagePreview(dataUri: string): Promise<string
   return previewCanvas.toDataURL('image/png')
 }
 
-export const lightenColor = (hex: string, amount: number): string => {
-  const clean = hex.replace('#', '')
-  if (clean.length !== 6) return hex
-  const num = parseInt(clean, 16)
-  const r = Math.min(255, (num >> 16) + amount)
-  const g = Math.min(255, ((num >> 8) & 0x00FF) + amount)
-  const b = Math.min(255, (num & 0x0000FF) + amount)
-  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`
-}
+import { applyTheme, hexToRgb, lightenColor, getContrastText } from '../theme/themeManager'
+export { hexToRgb, lightenColor, getContrastText }
 
-export const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16),
-  } : { r: 15, g: 23, b: 42 }
+export const applyThemeStyles = (cfg: any): void => {
+  applyTheme(cfg)
 }
 
-export const applyThemeStyles = (cfg: any): void => {
-  const theme = cfg.theme || 'dark'
-  const accentColor = cfg.accentColor || '#ffffffff'
-  const systemTextColor = cfg.systemTextColor || '#f8fafc'
-  const rgb = hexToRgb(accentColor)
-
-  document.documentElement.setAttribute('data-theme', theme)
-  document.documentElement.style.setProperty('--accent', accentColor)
-  document.documentElement.style.setProperty('--accent-hover', lightenColor(accentColor, 20))
-  document.documentElement.style.setProperty('--accent-glow', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.35)`)
-  document.documentElement.style.setProperty('--accent-subtle', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.15)`)
-  document.documentElement.style.setProperty('--accent-border', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`)
-  const chatTextColor = cfg.chatTextColor || systemTextColor
-  document.documentElement.style.setProperty('--text-main', systemTextColor)
-  document.documentElement.style.setProperty('--text-chat', chatTextColor)
-  document.documentElement.style.setProperty('--glass-blur', cfg.glassBlur || 'blur(16px)')
-  document.body.style.fontFamily = cfg.fontFamily || "'Outfit', sans-serif"
-  document.documentElement.style.fontSize = cfg.fontSize || '18px'
-
-  if (theme === 'custom') {
-    if (cfg.customBgStart && cfg.customBgEnd) {
-      document.documentElement.style.setProperty('--bg-color', cfg.customBgStart)
-      document.documentElement.style.setProperty('--bg-gradient', `linear-gradient(135deg, ${cfg.customBgStart} 0%, ${cfg.customBgEnd} 100%)`)
-    }
-    if (cfg.customPanelBg) {
-      const rgb = hexToRgb(cfg.customPanelBg)
-      document.documentElement.style.setProperty('--panel-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.75)`)
-      document.documentElement.style.setProperty('--panel-raised', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.82)`)
-      document.documentElement.style.setProperty('--panel-soft', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.46)`)
-      document.documentElement.style.setProperty('--chrome-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.88)`)
-      document.documentElement.style.setProperty('--surface-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.62)`)
-      document.documentElement.style.setProperty('--surface-strong', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.86)`)
-      document.documentElement.style.setProperty('--input-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.72)`)
-    }
-    return
-  }
 
-  ;[
-    '--bg-color',
-    '--bg-gradient',
-    '--panel-bg',
-    '--panel-raised',
-    '--panel-soft',
-    '--chrome-bg',
-    '--surface-bg',
-    '--surface-strong',
-    '--input-bg',
-  ].forEach((prop) => document.documentElement.style.removeProperty(prop))
-}

package/src/renderer/src/App.tsx

@@ -4,6 +4,8 @@ import ChunkErrorBoundary from '../shared/components/ChunkErrorBoundary'
 import ModalErrorBoundary from '../shared/components/ModalErrorBoundary'
 import { lazyWithRetry } from '../shared/utils/lazyWithRetry'
 import { listen } from './tauri'
+import BrowserShell from './components/BrowserShell'
+import BrowserSuggestionsPopup from './components/BrowserSuggestionsPopup'
 
 const SettingsWindow = lazyWithRetry(() => import('./components/SettingsWindow'))
 const SpotlightWindow = lazy(() => import('./components/SpotlightWindow'))
@@ -19,6 +21,8 @@ function getCurrentRoute(): string {
 }
 
 export default function App() {
+  const isBrowserShell = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('mint-browser-shell') === '1'
+  const isBrowserSuggestions = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('mint-browser-suggestions') === '1'
   const [route, setRoute] = useState(getCurrentRoute)
 
   useEffect(() => {
@@ -62,6 +66,9 @@ export default function App() {
     return () => window.removeEventListener('vite:preloadError', handlePreloadError)
   }, [])
 
+  if (isBrowserShell) return <BrowserShell />
+  if (isBrowserSuggestions) return <BrowserSuggestionsPopup />
+
 
   // Auxiliary overlay windows (spotlight/widget/proactive-glow/screen-picker)
   // belong to an already-running, already-authenticated main session, so

package/src/renderer/src/components/BrowserShell.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import './browser-shell.css'
+
+const HOME_URL = 'https://www.google.com'
+
+function normalizeUrl(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return HOME_URL
+  return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`
+}
+
+function pageLabel(value: string) {
+  try {
+    return new URL(value).hostname.replace(/^www\./, '') || 'New tab'
+  } catch {
+    return 'New tab'
+  }
+}
+
+export default function BrowserShell() {
+  const [address, setAddress] = useState(HOME_URL)
+  const [draft, setDraft] = useState(HOME_URL)
+  const [addressFocused, setAddressFocused] = useState(false)
+
+  const setAddressFocus = (focused: boolean) => {
+    setAddressFocused(focused)
+    if (focused && draft.trim()) {
+      void invoke('show_mint_browser_suggestions', { query: draft })
+    } else {
+      window.setTimeout(() => void invoke('hide_mint_browser_suggestions'), 220)
+    }
+  }
+
+  useEffect(() => {
+    let unlisten: (() => void) | undefined
+    void listen<string>('mint-browser-address', (event) => {
+      setAddress(event.payload)
+      setDraft(event.payload)
+    }).then((cleanup) => { unlisten = cleanup })
+    return () => unlisten?.()
+  }, [])
+
+  const navigate = async (value = draft) => {
+    const next = normalizeUrl(value)
+    setAddress(next)
+    setDraft(next)
+    setAddressFocused(false)
+    await invoke('hide_mint_browser_suggestions')
+    await invoke('navigate_mint_browser', { url: next })
+  }
+
+  const label = pageLabel(address)
+
+  return (
+    <main className="mint-browser-shell">
+      <div className="mint-browser-tabs" role="tablist" aria-label="Browser tabs">
+        <div className="mint-browser-tab" role="tab" aria-selected="true">
+          <span className="mint-browser-tab-icon" aria-hidden="true">●</span>
+          <span className="mint-browser-tab-title">{label}</span>
+          <button type="button" className="mint-browser-tab-close" onClick={() => void getCurrentWindow().close()} aria-label="Close tab" title="Close browser">×</button>
+        </div>
+        <button type="button" className="mint-browser-new-tab" onClick={() => void navigate(HOME_URL)} aria-label="New tab" title="New tab">+</button>
+      </div>
+
+      <form className="mint-browser-toolbar" onSubmit={(event) => { event.preventDefault(); void navigate() }}>
+        <div className="mint-browser-nav-group">
+          <button type="button" className="mint-browser-nav-button" onClick={() => void invoke('browser_go_back')} aria-label="Go back" title="Back">‹</button>
+          <button type="button" className="mint-browser-nav-button" onClick={() => void invoke('browser_go_forward')} aria-label="Go forward" title="Forward">›</button>
+          <button type="button" className="mint-browser-nav-button" onClick={() => void navigate(HOME_URL)} aria-label="Home" title="Home">⌂</button>
+        </div>
+        <div className={`mint-browser-address-wrap${addressFocused ? ' is-open' : ''}`}>
+          <div className="mint-browser-address-input">
+          <span className="mint-browser-address-icon" aria-hidden="true">◎</span>
+          <input
+            value={draft}
+            onChange={(event) => {
+              const value = event.target.value
+              setDraft(value)
+              if (value.trim()) void invoke('show_mint_browser_suggestions', { query: value })
+              else void invoke('hide_mint_browser_suggestions')
+            }}
+            onFocus={() => setAddressFocus(true)}
+            onBlur={() => setAddressFocus(false)}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setAddressFocused(false)
+                void invoke('hide_mint_browser_suggestions')
+                event.currentTarget.blur()
+              }
+            }}
+            aria-label="Web address"
+            aria-expanded={addressFocused}
+            aria-autocomplete="list"
+            spellCheck={false}
+          />
+          <button type="submit" aria-label="Open address" title="Open address">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13M13 6l6 6-6 6" /></svg>
+          </button>
+          </div>
+        </div>
+        <button type="button" className="mint-browser-nav-button" onClick={() => void invoke('browser_reload')} aria-label="Reload" title="Reload">↻</button>
+      </form>
+    </main>
+  )
+}

package/src/renderer/src/components/BrowserSuggestionsPopup.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+import './browser-suggestions-popup.css'
+
+const HOME_URL = 'https://www.google.com'
+
+function normalizeUrl(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return HOME_URL
+  return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`
+}
+
+function buildSuggestions(query: string) {
+  const trimmed = query.trim()
+  if (!trimmed) return []
+
+  const suggestions = [
+    {
+      label: trimmed,
+      detail: 'Search the web',
+      value: `https://www.google.com/search?q=${encodeURIComponent(trimmed)}`,
+      icon: '⌕',
+    },
+  ]
+
+  if (!/^https?:\/\//i.test(trimmed) && !trimmed.includes('.')) {
+    suggestions.push({
+      label: `${trimmed}.com`,
+      detail: 'Open website',
+      value: normalizeUrl(`${trimmed}.com`),
+      icon: '◎',
+    })
+  }
+
+  if (/^https?:\/\//i.test(trimmed) || trimmed.includes('.')) {
+    suggestions.push({
+      label: trimmed,
+      detail: 'Open address',
+      value: normalizeUrl(trimmed),
+      icon: '◎',
+    })
+  }
+
+  return suggestions
+}
+
+export default function BrowserSuggestionsPopup() {
+  const [query, setQuery] = useState('')
+  const suggestions = useMemo(() => buildSuggestions(query), [query])
+
+  useEffect(() => {
+    void invoke<string>('get_mint_browser_suggestion_query').then(setQuery)
+    let unlisten: (() => void) | undefined
+    void listen<string>('mint-browser-suggestions-update', (event) => {
+      setQuery(event.payload)
+    }).then((cleanup) => { unlisten = cleanup })
+    return () => unlisten?.()
+  }, [])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') void invoke('hide_mint_browser_suggestions')
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  const selectSuggestion = async (value: string) => {
+    await invoke('navigate_mint_browser', { url: value })
+    await invoke('hide_mint_browser_suggestions')
+  }
+
+  return (
+    <main className="browser-suggestions-popup" role="listbox" aria-label="Address suggestions">
+      {suggestions.map((suggestion) => (
+        <button
+          key={suggestion.value}
+          type="button"
+          role="option"
+          className="browser-suggestions-popup-item"
+          onClick={() => void selectSuggestion(suggestion.value)}
+        >
+          <span className="browser-suggestions-popup-icon" aria-hidden="true">{suggestion.icon}</span>
+          <span className="browser-suggestions-popup-label">{suggestion.label}</span>
+          <span className="browser-suggestions-popup-detail">{suggestion.detail}</span>
+        </button>
+      ))}
+    </main>
+  )
+}

package/src/renderer/src/components/Live2DStage.tsx

@@ -33,7 +33,8 @@ const ACCESSORY_MAP: Record<number, string | null> = {
 
 const TRACKING_SPEED = 1.25
 const MAX_DEVICE_PIXEL_RATIO = 1.25
-const ACTIVE_MAX_FPS = 60
+const IDLE_MAX_FPS = 24
+const INTERACTION_MAX_FPS = 45
 
 const clampToUnitCircle = (x: number, y: number) => {
   if (isNaN(x) || isNaN(y) || !isFinite(x) || !isFinite(y)) {
@@ -57,6 +58,7 @@ export default function Live2DStage({ scale, expressionIndex, accessoryIndex, is
   const [shouldRender, setShouldRender] = useState(isActive)
   const baseWidthRef = useRef<number | null>(null)
   const baseHeightRef = useRef<number | null>(null)
+  const pointerInsideRef = useRef(false)
 
   useEffect(() => {
     if (isActive && !shouldRender) {
@@ -64,12 +66,14 @@ export default function Live2DStage({ scale, expressionIndex, accessoryIndex, is
     }
   }, [isActive, shouldRender])
 
-  const setRenderActive = (active: boolean) => {
+  const setRenderActive = (active: boolean, interactive = pointerInsideRef.current) => {
     const app = appRef.current
     const model = modelRef.current
     if (!app) return
 
-    app.ticker.maxFPS = ACTIVE_MAX_FPS
+    // The model idles for most of a chat session. Keep its animation smooth
+    // without reserving a 60 FPS GPU budget until the user actually hovers it.
+    app.ticker.maxFPS = interactive && !isLocked ? INTERACTION_MAX_FPS : IDLE_MAX_FPS
     if (model) {
       model.autoUpdate = active
       model.renderable = active
@@ -114,7 +118,7 @@ export default function Live2DStage({ scale, expressionIndex, accessoryIndex, is
           resolution: Math.min(window.devicePixelRatio || 1, MAX_DEVICE_PIXEL_RATIO),
           resizeTo: containerRef.current!,
         })
-        appInstance.ticker.maxFPS = ACTIVE_MAX_FPS
+        appInstance.ticker.maxFPS = IDLE_MAX_FPS
         appInstance.ticker.minFPS = 10
         appRef.current = appInstance
 
@@ -280,7 +284,8 @@ export default function Live2DStage({ scale, expressionIndex, accessoryIndex, is
     }
   }, [isActive])
 
-  // Follow the pointer across the whole window and smoothly return to center when tracking stops.
+  // Only observe pointer movement while it is over the model. Listening on the
+  // entire window made normal chat typing and scrolling compete with Live2D.
   useEffect(() => {
     let rafId: number | null = null
     let pendingNormalized: { x: number; y: number } | null = null
@@ -316,9 +321,25 @@ export default function Live2DStage({ scale, expressionIndex, accessoryIndex, is
       }
     }
 
-    if (isLocked) centerFocus()
+    const handlePointerEnter = () => {
+      if (isLocked || !isActive || document.visibilityState !== 'visible') return
+      pointerInsideRef.current = true
+      setRenderActive(true, true)
+    }
+
+    const handlePointerLeave = () => {
+      pointerInsideRef.current = false
+      centerFocus()
+      setRenderActive(isActive && document.visibilityState === 'visible', false)
+    }
+
+    const container = containerRef.current
+    if (!container) return
+    if (isLocked) handlePointerLeave()
 
-    window.addEventListener('pointermove', handlePointerMove)
+    container.addEventListener('pointermove', handlePointerMove)
+    container.addEventListener('pointerenter', handlePointerEnter)
+    container.addEventListener('pointerleave', handlePointerLeave)
     window.addEventListener('blur', centerFocus)
 
     return () => {
@@ -326,7 +347,9 @@ export default function Live2DStage({ scale, expressionIndex, accessoryIndex, is
         cancelAnimationFrame(rafId)
         rafId = null
       }
-      window.removeEventListener('pointermove', handlePointerMove)
+      container.removeEventListener('pointermove', handlePointerMove)
+      container.removeEventListener('pointerenter', handlePointerEnter)
+      container.removeEventListener('pointerleave', handlePointerLeave)
       window.removeEventListener('blur', centerFocus)
     }
   }, [isLocked, isActive])
@@ -371,7 +394,7 @@ export default function Live2DStage({ scale, expressionIndex, accessoryIndex, is
     >
       {loading && (
         <div style={{ position: 'absolute', color: '#9f7aea', fontSize: '14px', fontFamily: 'Outfit, sans-serif' }}>
-          Loading Shiroko Live2D Model...
+          Loading Shiroko Live2D model...
         </div>
       )}
       <canvas

package/src/renderer/src/components/MintDashboard.tsx

@@ -1,3 +1,5 @@
-// Re-export from the shared module — do NOT add logic here.
-// Edit src/renderer/shared/components/MintDashboard.tsx instead.
+// Keep desktop dashboard styles in the same lazy chunk as its shared view.
+import '../css/dashboard.css'
+
+// Re-export from the shared module — edit its logic there.
 export { default } from '../../shared/components/MintDashboard'

package/src/renderer/src/components/ModelPanel.tsx

@@ -1,4 +1,5 @@
 import Live2DStage from './Live2DStage'
+import '../css/model.css'
 import type { DashboardView } from './DashboardSidebar'
 
 type LayoutPreset = 'chat-wide' | 'model-wide'
@@ -90,7 +91,7 @@ export default function ModelPanel({
               </svg>
             </button>
           </div>
-          <button className="model-panel-control" onClick={() => onSetView('pictures')} title="Saved Pictures">
+          <button className="model-panel-control" onClick={() => onSetView('pictures')} title="Saved pictures">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
               <circle cx="8.5" cy="8.5" r="1.5"></circle>

package/src/renderer/src/components/PicturesLibrary.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState, memo } from 'react'
+import '../css/pictures.css'
 import { createPortal } from 'react-dom'
 import { type PictureEntry, convertFileSrc, isTauriRuntime, getLocalApiBase, deleteSavedPicture } from '../tauri'
 import type { DashboardView } from './DashboardSidebar'
@@ -171,9 +172,9 @@ export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPi
   return (
     <section className={`pictures-library ${view === 'pictures' ? 'is-visible' : ''}`} aria-hidden={view !== 'pictures'}>
       <header className="pictures-header">
-        <div><span className="pictures-kicker">Gallery</span><h2>Saved Pictures</h2></div>
+        <div><span className="pictures-kicker">Gallery</span><h2>Saved pictures</h2></div>
         <div className="pictures-header-actions">
-          <button className="pictures-close-btn" onClick={() => onSetView('chat')}>Close Gallery</button>
+          <button className="pictures-close-btn" onClick={() => onSetView('chat')}>Close gallery</button>
           <button type="button" className="picture-refresh-btn" title="Refresh" onClick={() => onRefreshPictures?.()}>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.13-3.36L23 10"/><path d="M20.49 15a9 9 0 0 1-14.13 3.36L1 14"/></svg>
           </button>

package/src/renderer/src/components/ScreenPicker.css

@@ -0,0 +1,190 @@
+.live-translate {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background: transparent;
+  color: var(--text-main);
+  font-family: inherit;
+}
+
+.live-translate-picker {
+  position: absolute;
+  inset: 0;
+  cursor: crosshair;
+  touch-action: none;
+  background: var(--zinc-950);
+}
+
+.live-translate-picker img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+
+.live-translate-loading {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-soft);
+}
+
+.live-translate-selection {
+  position: absolute;
+  border: 2px solid var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42);
+  pointer-events: none;
+}
+
+.live-translate-toolbar {
+  position: absolute;
+  z-index: 5;
+  top: 18px;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
+  min-height: 58px;
+  padding: 8px 10px 8px 16px;
+  transform: translateX(-50%);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: var(--radius-xl);
+  background: rgba(15, 15, 18, 0.95);
+  box-shadow: var(--shadow-lg);
+  color: var(--pure-white);
+}
+
+.live-translate-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 160px;
+  margin-right: 8px;
+}
+
+.live-translate-brand > span {
+  color: var(--accent);
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.live-translate-brand strong,
+.live-translate-brand small { display: block; }
+.live-translate-brand strong { font-size: 0.85rem; line-height: 1.3; }
+.live-translate-brand small { color: var(--slate-300); font-size: 0.7rem; white-space: nowrap; }
+
+.live-translate-language {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--slate-300);
+  font-size: 0.78rem;
+}
+
+.live-translate-language select,
+.live-translate-custom-language,
+.live-translate-toolbar button {
+  min-height: 36px;
+  padding: 6px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--pure-white);
+  font: inherit;
+  font-size: 0.78rem;
+}
+
+.live-translate-language select { min-width: 116px; cursor: pointer; }
+.live-translate-language option { background: var(--zinc-900); color: var(--pure-white); }
+.live-translate-custom-language { width: 130px; }
+.live-translate-toolbar button { cursor: pointer; white-space: nowrap; }
+.live-translate-toolbar button:hover { background: rgba(255, 255, 255, 0.16); }
+.live-translate-toolbar button:disabled { opacity: 0.58; cursor: not-allowed; }
+
+.live-translate-toolbar .live-translate-primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--accent-contrast, var(--text-on-accent));
+  font-weight: 700;
+}
+
+:root[data-accent-mode="monochrome"] .live-translate-toolbar .live-translate-primary { color: var(--zinc-950); }
+.live-translate-toolbar .live-translate-close { width: 36px; padding: 0; font-size: 1.4rem; line-height: 1; }
+
+.live-translate-help,
+.live-translate-error {
+  position: absolute;
+  z-index: 5;
+  bottom: 20px;
+  left: 50%;
+  max-width: calc(100vw - 32px);
+  padding: 9px 14px;
+  transform: translateX(-50%);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: var(--radius-lg);
+  background: rgba(15, 15, 18, 0.94);
+  color: var(--pure-white);
+  font-size: 0.77rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.live-translate-error { color: var(--status-error); }
+
+.live-translate-result {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 12px 16px;
+  border: 2px solid var(--accent);
+  border-radius: var(--radius-sm);
+  background: rgba(10, 10, 12, 0.97);
+  box-shadow: var(--shadow-lg);
+  color: var(--pure-white);
+  pointer-events: none;
+}
+
+.live-translate-result-label {
+  flex: none;
+  margin-bottom: 6px;
+  color: var(--slate-300);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.live-translate-result-text {
+  overflow: auto;
+  font-size: clamp(13px, 1.3vw, 22px);
+  font-weight: 500;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.live-translate.is-sampling .live-translate-toolbar,
+.live-translate.is-sampling .live-translate-result,
+.live-translate.is-sampling .live-translate-error {
+  visibility: hidden;
+}
+
+.live-translate button:focus-visible,
+.live-translate select:focus-visible,
+.live-translate input:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 760px) {
+  .live-translate-toolbar { justify-content: center; flex-wrap: wrap; width: calc(100vw - 24px); }
+  .live-translate-brand { flex: 1 1 100%; }
+  .live-translate-result { padding: 8px 10px; }
+  .live-translate-result-label { font-size: 0.6rem; }
+}