Spaces:
Running
Running
| /* Ultimate Input Field Styles */ | |
| /* The field's colour tokens. Prefixed (--uif-k-*) so the library never overwrites a host page's own | |
| --accent, --muted, --background… (found when the bankML console embedded it). */ | |
| /* The palette (operator, 2026-10-10): defined once, the same in the light and the dark theme, used everywhere. | |
| Candle green: the send button and what went well (✓ receipt, connected, model verified, delivered). Bitcoin orange: | |
| accents and work in progress (the active answerer, downloading, reading, streaming, focus rings). Stop red: Stop, | |
| ✗ receipt, errors, no delivery (Cardano's brand colour is blue, so the chart's red candle; change it here). */ | |
| :root { | |
| --candle-green: #0ECB81; | |
| --candle-green-ink: #04140d; | |
| --btc-orange: #F7931A; | |
| --stop-red: #F6465D; | |
| --term-green: #33FF66; | |
| --term-bg: #000; | |
| /* every input: light text on a dark field, whatever the page or theme around it (placeholder 6.9:1 on it) */ | |
| --uif-field-bg: #111820; | |
| --uif-field-text: #f1f5f9; | |
| --uif-field-placeholder: #94a3b8; | |
| /* spawned windows: glass over the page, text kept readable (solid where backdrop-filter is not supported) */ | |
| --uif-glass: rgba(13, 17, 23, 0.72); | |
| --uif-glass-solid: #0d1117; | |
| --uif-glass-blur: blur(10px) saturate(1.2); | |
| } | |
| :root { | |
| --uif-k-background: 0 0% 100%; | |
| --uif-k-foreground: 222.2 84% 4.9%; | |
| --uif-k-primary: 222.2 47.4% 11.2%; | |
| --uif-k-primary-foreground: 210 40% 98%; | |
| --uif-k-secondary: 210 40% 96%; | |
| --uif-k-secondary-foreground: 222.2 84% 4.9%; | |
| --uif-k-muted: 210 40% 96%; | |
| --uif-k-muted-foreground: 215.4 16.3% 46.9%; | |
| --uif-k-accent: 210 40% 96%; | |
| --uif-k-accent-foreground: 222.2 84% 4.9%; | |
| --uif-k-destructive: 0 84.2% 60.2%; | |
| --uif-k-destructive-foreground: 210 40% 98%; | |
| --uif-k-border: 214.3 31.8% 91.4%; | |
| --uif-k-input: 214.3 31.8% 91.4%; | |
| --uif-k-ring: 222.2 84% 4.9%; | |
| } | |
| .dark { | |
| --uif-k-background: 222.2 84% 4.9%; | |
| --uif-k-foreground: 210 40% 98%; | |
| --uif-k-primary: 210 40% 98%; | |
| --uif-k-primary-foreground: 222.2 47.4% 11.2%; | |
| --uif-k-secondary: 217.2 32.6% 17.5%; | |
| --uif-k-secondary-foreground: 210 40% 98%; | |
| --uif-k-muted: 217.2 32.6% 17.5%; | |
| --uif-k-muted-foreground: 215 20.2% 65.1%; | |
| --uif-k-accent: 217.2 32.6% 17.5%; | |
| --uif-k-accent-foreground: 210 40% 98%; | |
| --uif-k-destructive: 0 62.8% 30.6%; | |
| --uif-k-destructive-foreground: 210 40% 98%; | |
| --uif-k-border: 217.2 32.6% 17.5%; | |
| --uif-k-input: 217.2 32.6% 17.5%; | |
| --uif-k-ring: 212.7 26.8% 83.9%; | |
| } | |
| /* Glow Animation */ | |
| @keyframes glow { | |
| 0% { | |
| box-shadow: 0 0 5px rgba(74, 222, 128, 0); | |
| transform: scale(1); | |
| } | |
| 50% { | |
| box-shadow: 0 0 20px rgba(74, 222, 128, 0.5), 0 0 30px rgba(74, 222, 128, 0.3); | |
| transform: scale(1.02); | |
| } | |
| 100% { | |
| box-shadow: 0 0 5px rgba(74, 222, 128, 0); | |
| transform: scale(1); | |
| } | |
| } | |
| .animate-glow { | |
| animation: glow 0.5s ease-in-out; | |
| box-shadow: 0 0 20px rgba(74, 222, 128, 0.5); | |
| } | |
| /* Subtle drag handle that only appears on hover */ | |
| .drag-handle { | |
| height: 6px; | |
| cursor: move; | |
| background: transparent; | |
| border-radius: 3px; | |
| margin-bottom: 2px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s ease; | |
| opacity: 0; | |
| } | |
| .drag-handle:hover, | |
| .drag-handle.dragging, | |
| .drag-handle:focus-visible { | |
| background: rgba(156, 163, 175, 0.3); | |
| opacity: 1; | |
| } | |
| .drag-handle .drag-indicator { | |
| width: 20px; | |
| height: 2px; | |
| background: rgba(156, 163, 175, 0.6); | |
| border-radius: 1px; | |
| transition: all 0.2s ease; | |
| } | |
| .drag-handle:hover .drag-indicator, | |
| .drag-handle.dragging .drag-indicator { | |
| background: rgba(156, 163, 175, 0.8); | |
| width: 24px; | |
| } | |
| /* Backdrop and glass effects */ | |
| .backdrop-blur { | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| } | |
| .terminal-glass { | |
| background: rgba(0, 0, 0, 0.8); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| } | |
| /* Main component styles */ | |
| .ultimate-input-field { | |
| position: fixed; | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| } | |
| .ultimate-textarea { | |
| width: 100%; | |
| resize: none; | |
| background: transparent; | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| outline: none; | |
| border-radius: 0.375rem; | |
| transition: all 0.2s ease; | |
| font-family: inherit; | |
| } | |
| .ultimate-textarea:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px hsl(var(--uif-k-ring)), 0 0 0 4px hsl(var(--uif-k-ring) / 0.2); | |
| } | |
| .ultimate-textarea.text-mode { | |
| font-family: system-ui, -apple-system, sans-serif; | |
| color: hsl(var(--uif-k-foreground)); | |
| } | |
| .ultimate-textarea.text-mode::placeholder { | |
| color: hsl(var(--uif-k-muted-foreground)); | |
| } | |
| .ultimate-textarea.terminal-mode { | |
| font-family: 'Courier New', monospace; | |
| color: #10b981; | |
| } | |
| .ultimate-textarea.terminal-mode::placeholder { | |
| color: rgba(16, 185, 129, 0.5); | |
| } | |
| .ultimate-textarea.pointer-events-none { | |
| pointer-events: none; | |
| } | |
| /* Controls */ | |
| .ultimate-controls { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 0.5rem; | |
| } | |
| .ultimate-controls-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| /* Menu */ | |
| .ultimate-menu { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| margin-top: 0.5rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-radius: 0.375rem; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| padding: 0.5rem; | |
| z-index: 1001; | |
| min-width: 150px; | |
| } | |
| .ultimate-menu-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| } | |
| .ultimate-menu-divider { | |
| border-top: 1px solid rgba(255, 255, 255, 0.2); | |
| margin: 0.25rem 0; | |
| } | |
| /* Transitions */ | |
| .transition-all { | |
| transition: all 0.3s ease-out; | |
| } | |
| .duration-300 { | |
| transition-duration: 300ms; | |
| } | |
| .ease-out { | |
| transition-timing-function: cubic-bezier(0, 0, 0.2, 1); | |
| } | |
| /* ------------------------------------------------------------------ */ | |
| /* Hub layout */ | |
| /* ------------------------------------------------------------------ */ | |
| .ultimate-input-field { | |
| --uif-accent: #6366f1; | |
| --uif-term: #10b981; | |
| --uif-text: hsl(var(--uif-k-foreground)); | |
| --uif-dim: hsl(var(--uif-k-muted-foreground)); | |
| --uif-surface: rgba(17, 24, 39, 0.92); | |
| --uif-line: rgba(148, 163, 184, 0.25); | |
| color: var(--uif-text); | |
| box-sizing: border-box; | |
| } | |
| .ultimate-input-field *, | |
| .uif-output *, | |
| .uif-palette *, | |
| .uif-window, | |
| .uif-window *, | |
| .uif-isolated-bar, | |
| .uif-isolated-bar *, | |
| .uif-action-floating, | |
| .uif-trash, | |
| .uif-beacon { | |
| /* the portaled pieces too: their max sizes must include padding and border */ | |
| box-sizing: border-box; | |
| } | |
| .ultimate-input-field.is-terminal { | |
| --uif-text: #d1fae5; | |
| } | |
| .uif-row { | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .uif-core { | |
| flex: 1; | |
| min-width: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.375rem; | |
| } | |
| .uif-modules { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| gap: 0.375rem; | |
| padding: 0 0.25rem; | |
| border-color: var(--uif-line); | |
| border-style: solid; | |
| border-width: 0; | |
| } | |
| .uif-modules-left { border-right-width: 1px; padding-right: 0.5rem; } | |
| .uif-modules-right { border-left-width: 1px; padding-left: 0.5rem; } | |
| .uif-prompt { | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .uif-prompt .ultimate-textarea { | |
| height: 100%; | |
| } | |
| .uif-prompt-sigil { | |
| font-family: 'Courier New', monospace; | |
| color: var(--uif-term); | |
| padding: 0.5rem 0 0 0.5rem; | |
| font-weight: bold; | |
| } | |
| .ultimate-controls { | |
| gap: 0.5rem; | |
| padding: 0 0.25rem; | |
| min-width: 0; | |
| } | |
| .ultimate-controls-left { | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .uif-mode-toggle, | |
| .uif-windows-toggle, | |
| .uif-send { | |
| flex: none; | |
| width: 2rem; | |
| height: 2rem; | |
| padding: 0; | |
| border-radius: 0.375rem; | |
| border: 1px solid var(--uif-line); | |
| background: transparent; | |
| color: inherit; | |
| cursor: pointer; | |
| } | |
| .uif-mode-toggle:hover, | |
| .uif-windows-toggle:hover { background: rgba(148, 163, 184, 0.15); } | |
| .uif-mode-toggle.is-terminal { border-color: var(--uif-term); } | |
| .uif-send { | |
| background: var(--uif-accent); | |
| border-color: transparent; | |
| color: #fff; | |
| } | |
| .uif-send:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .uif-status { | |
| font-size: 0.75rem; | |
| color: var(--uif-dim); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 40%; | |
| } | |
| .uif-status.is-err { color: #f87171; } | |
| .ultimate-input-field.is-docked { border-radius: 0; } | |
| /* ------------------------------------------------------------------ */ | |
| /* Terminal log (opens above the field; below it when docked on top) */ | |
| /* ------------------------------------------------------------------ */ | |
| .uif-termlog { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: calc(100% + 6px); | |
| max-height: 240px; | |
| overflow-y: auto; | |
| padding: 0.5rem 0.75rem; | |
| border-radius: 0.5rem; | |
| background: rgba(0, 0, 0, 0.85); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| font: 12px/1.5 'Courier New', monospace; | |
| color: #a7f3d0; | |
| } | |
| .docked-top .uif-termlog { bottom: auto; top: calc(100% + 6px); } | |
| .uif-termline { white-space: pre-wrap; word-break: break-word; } | |
| .uif-termline.is-cmd { color: var(--uif-term); } | |
| .uif-termline.is-err { color: #f87171; } | |
| .uif-termline.is-dim { color: rgba(167, 243, 208, 0.5); } | |
| /* ------------------------------------------------------------------ */ | |
| /* Action bar */ | |
| /* ------------------------------------------------------------------ */ | |
| .uif-actionbar { | |
| position: relative; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 0.25rem; | |
| min-width: 0; | |
| } | |
| .uif-action { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 2rem; | |
| height: 2rem; | |
| padding: 0 0.375rem; | |
| border-radius: 0.375rem; | |
| border: 1px solid transparent; | |
| background: rgba(148, 163, 184, 0.12); | |
| color: inherit; | |
| font-size: 0.95rem; | |
| cursor: pointer; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| -webkit-touch-callout: none; | |
| touch-action: none; | |
| transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; | |
| } | |
| .uif-action:hover { background: rgba(148, 163, 184, 0.25); } | |
| .uif-action:focus-visible { outline: 2px solid var(--uif-accent); outline-offset: 1px; } | |
| .uif-action.is-pressed { border-color: var(--uif-accent); background: rgba(99, 102, 241, 0.25); } | |
| .uif-action-icon { line-height: 1; } | |
| .uif-action.is-arranging { | |
| cursor: grab; | |
| border-color: rgba(99, 102, 241, 0.6); | |
| animation: uif-wiggle 0.35s ease-in-out infinite alternate; | |
| } | |
| .uif-action.is-arranging:nth-child(even) { animation-delay: -0.17s; } | |
| .uif-action.is-dragged { display: none; } | |
| .uif-action-slot { | |
| display: inline-block; | |
| height: 2rem; | |
| border-radius: 0.375rem; | |
| border: 1px dashed var(--uif-accent); | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| .uif-action-ghost { | |
| position: fixed; | |
| z-index: 3000; | |
| pointer-events: none; | |
| cursor: grabbing; | |
| background: #6366f1; | |
| color: #fff; | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); | |
| transform: scale(1.12); | |
| } | |
| .uif-action-ghost.is-removing { background: #ef4444; opacity: 0.8; } | |
| .uif-action-add { font-weight: bold; color: var(--uif-dim); background: transparent; border: 1px dashed var(--uif-line); } | |
| .uif-action-done { background: var(--uif-accent); color: #fff; font-size: 0.75rem; padding: 0 0.625rem; } | |
| .uif-arrange-hint { | |
| position: absolute; | |
| left: 0; | |
| top: calc(100% + 2px); | |
| font-size: 0.7rem; | |
| color: var(--uif-dim); | |
| white-space: nowrap; | |
| pointer-events: none; | |
| } | |
| @keyframes uif-wiggle { | |
| from { transform: rotate(-3deg); } | |
| to { transform: rotate(3deg); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .uif-action.is-arranging { animation: none; } | |
| } | |
| /* Add-action palette */ | |
| .uif-palette { | |
| position: absolute; | |
| left: 0; | |
| bottom: calc(100% + 0.5rem); | |
| z-index: 1002; | |
| width: 300px; | |
| max-height: 420px; | |
| overflow-y: auto; | |
| padding: 0.75rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| border-radius: 0.5rem; | |
| background: rgba(17, 24, 39, 0.96); | |
| border: 1px solid rgba(148, 163, 184, 0.3); | |
| box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); | |
| color: #e5e7eb; | |
| font-size: 0.8125rem; | |
| } | |
| .docked-top .uif-palette { bottom: auto; top: calc(100% + 0.5rem); } | |
| .uif-palette-row { display: flex; justify-content: space-between; align-items: center; } | |
| .uif-palette-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } | |
| .uif-palette-list li { display: flex; align-items: center; gap: 0.25rem; } | |
| .uif-palette-item { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.3rem 0.4rem; | |
| border: 0; | |
| border-radius: 0.25rem; | |
| background: transparent; | |
| color: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .uif-palette-item:hover { background: rgba(148, 163, 184, 0.15); } | |
| .uif-palette-item code { margin-left: auto; color: #94a3b8; font-size: 0.75rem; } | |
| .uif-palette-note { margin: 0; color: #94a3b8; } | |
| .uif-palette-form { display: flex; flex-direction: column; gap: 0.375rem; border-top: 1px solid rgba(148, 163, 184, 0.2); padding-top: 0.5rem; } | |
| .uif-palette-fields { display: flex; gap: 0.375rem; } | |
| .uif-input { | |
| flex: 1; | |
| min-width: 0; | |
| padding: 0.3rem 0.45rem; | |
| border-radius: 0.25rem; | |
| border: 1px solid rgba(148, 163, 184, 0.3); | |
| background: rgba(0, 0, 0, 0.3); | |
| color: inherit; | |
| font: inherit; | |
| } | |
| .uif-input-icon { flex: 0 0 2.5rem; text-align: center; } | |
| .uif-button { | |
| padding: 0.35rem 0.6rem; | |
| border: 0; | |
| border-radius: 0.25rem; | |
| background: #6366f1; | |
| color: #fff; | |
| font: inherit; | |
| cursor: pointer; | |
| } | |
| .uif-button:disabled { opacity: 0.45; cursor: not-allowed; } | |
| .uif-link { border: 0; background: none; color: #a5b4fc; cursor: pointer; font: inherit; padding: 0.15rem 0.3rem; } | |
| /* ------------------------------------------------------------------ */ | |
| /* Output fields */ | |
| /* ------------------------------------------------------------------ */ | |
| .uif-output { | |
| --uif-color: #22d3ee; | |
| position: fixed; | |
| z-index: 990; | |
| display: flex; | |
| flex-direction: column; | |
| border-radius: 0.5rem; | |
| background: rgba(17, 24, 39, 0.92); | |
| border: 1px solid rgba(148, 163, 184, 0.25); | |
| border-top: 3px solid var(--uif-color); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| color: #e5e7eb; | |
| font: 0.875rem/1.45 system-ui, -apple-system, sans-serif; | |
| } | |
| .uif-output.is-active { box-shadow: 0 0 0 1px var(--uif-color), 0 10px 25px rgba(0, 0, 0, 0.35); } | |
| .uif-output.is-dragging { opacity: 0.9; } | |
| .uif-output-window { | |
| position: fixed; | |
| inset: 0; | |
| border-radius: 0; | |
| } | |
| .uif-output-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.375rem 0.5rem; | |
| cursor: move; | |
| user-select: none; | |
| border-bottom: 1px solid rgba(148, 163, 184, 0.15); | |
| touch-action: none; | |
| } | |
| .uif-output-window .uif-output-header { cursor: default; } | |
| /* The speaker's mini avatar: shown when the page sets --uif-avatar (the Space mount's `avatar`), pulsing while the | |
| window's answer streams. */ | |
| .uif-output-avatar { | |
| display: var(--uif-avatar-display, none); | |
| flex: none; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| border-radius: 50%; | |
| background: var(--uif-avatar, none) 50% 16% / cover no-repeat; | |
| border: 1px solid rgba(148, 163, 184, 0.35); | |
| } | |
| .uif-output-header.is-busy .uif-output-avatar { | |
| border-color: #e3b341; | |
| animation: uif-speaking 1.2s ease-in-out infinite; | |
| } | |
| @keyframes uif-speaking { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 179, 65, 0.55); } | |
| 50% { box-shadow: 0 0 0 5px rgba(227, 179, 65, 0); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .uif-output-header.is-busy .uif-output-avatar { animation: none; box-shadow: 0 0 0 2px #e3b341; } | |
| } | |
| .uif-output-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; } | |
| .uif-output-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .uif-output-badge { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--uif-color); } | |
| .uif-output-buttons { margin-left: auto; display: flex; gap: 0.125rem; } | |
| .uif-output-buttons button { | |
| border: 0; | |
| background: transparent; | |
| color: #94a3b8; | |
| cursor: pointer; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| border-radius: 0.25rem; | |
| } | |
| .uif-output-buttons button:hover { background: rgba(148, 163, 184, 0.2); color: #fff; } | |
| .uif-output-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 0.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.375rem; | |
| } | |
| .uif-output-empty { color: #64748b; padding: 0.5rem; } | |
| .uif-msg { white-space: pre-wrap; word-break: break-word; padding: 0.375rem 0.5rem; border-radius: 0.375rem; max-width: 92%; } | |
| .uif-msg-user { align-self: flex-end; background: rgba(99, 102, 241, 0.3); } | |
| .uif-msg-assistant { align-self: flex-start; background: rgba(148, 163, 184, 0.12); } | |
| .uif-msg-system { align-self: center; color: #94a3b8; font-size: 0.8rem; } | |
| .uif-caret { animation: uif-blink 1s steps(1) infinite; color: var(--uif-color); } | |
| .uif-flash { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| border-radius: inherit; | |
| animation: uif-flash 1.2s ease-out; | |
| } | |
| @keyframes uif-flash { | |
| 0%, 40% { box-shadow: inset 0 0 0 3px var(--uif-color), 0 0 40px var(--uif-color); background: color-mix(in srgb, var(--uif-color) 18%, transparent); } | |
| 20%, 60% { box-shadow: inset 0 0 0 1px var(--uif-color); background: transparent; } | |
| 100% { box-shadow: none; background: transparent; } | |
| } | |
| @keyframes uif-blink { 50% { opacity: 0; } } | |
| /* ------------------------------------------------------------------ */ | |
| /* Strings: tethers and edge beacons */ | |
| /* ------------------------------------------------------------------ */ | |
| .uif-tethers { | |
| position: fixed; | |
| inset: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| pointer-events: none; | |
| z-index: 980; | |
| } | |
| .uif-tether { fill: none; stroke-width: 2; opacity: 0.75; filter: drop-shadow(0 0 3px currentColor); } | |
| .uif-tether.is-remote { opacity: 0.55; animation: uif-dash 1s linear infinite; } | |
| @keyframes uif-dash { to { stroke-dashoffset: -12; } } | |
| .uif-beacon { | |
| --uif-color: #22d3ee; | |
| position: fixed; | |
| z-index: 2500; | |
| transform: translate(-50%, -50%); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.375rem; | |
| padding: 0.25rem 0.5rem 0.25rem 0.375rem; | |
| border-radius: 999px; | |
| border: 1px solid var(--uif-color); | |
| background: rgba(17, 24, 39, 0.92); | |
| color: #e5e7eb; | |
| font: 600 0.75rem system-ui, sans-serif; | |
| cursor: pointer; | |
| box-shadow: 0 0 12px var(--uif-color); | |
| animation: uif-pulse 1.6s ease-in-out infinite; | |
| } | |
| .uif-beacon-arrow { color: var(--uif-color); display: inline-block; } | |
| .uif-beacon-label { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| @keyframes uif-pulse { 50% { box-shadow: 0 0 2px var(--uif-color); } } | |
| @media (prefers-reduced-motion: reduce) { | |
| .uif-beacon, .uif-tether.is-remote, .uif-flash { animation: none; } | |
| } | |
| /* ------------------------------------------------------------------ */ | |
| /* Resize corners (input field and output panels) */ | |
| /* ------------------------------------------------------------------ */ | |
| /* Each grip is a bracket drawn on the corner, with a larger invisible hit area. */ | |
| .uif-corner { | |
| --uif-grip: 18px; | |
| --uif-grip-color: rgba(99, 102, 241, 0.9); | |
| position: absolute; | |
| z-index: 10; | |
| width: var(--uif-grip); | |
| height: var(--uif-grip); | |
| touch-action: none; | |
| opacity: 0; | |
| transition: opacity 0.15s ease; | |
| } | |
| .uif-corner::after { | |
| content: ''; | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| border: 0 solid var(--uif-grip-color); | |
| transition: width 0.15s ease, height 0.15s ease, border-color 0.15s ease; | |
| } | |
| .uif-corner.tl { top: -4px; left: -4px; cursor: nwse-resize; } | |
| .uif-corner.tr { top: -4px; right: -4px; cursor: nesw-resize; } | |
| .uif-corner.bl { bottom: -4px; left: -4px; cursor: nesw-resize; } | |
| .uif-corner.br { bottom: -4px; right: -4px; cursor: nwse-resize; } | |
| .uif-corner.tl::after { top: 3px; left: 3px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; } | |
| .uif-corner.tr::after { top: 3px; right: 3px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; } | |
| .uif-corner.bl::after { bottom: 3px; left: 3px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; } | |
| .uif-corner.br::after { bottom: 3px; right: 3px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; } | |
| .ultimate-input-field:hover > .uif-corner, | |
| .uif-output:hover > .uif-corner, | |
| .uif-corner:active { | |
| opacity: 1; | |
| } | |
| .uif-corner:hover::after, | |
| .uif-corner:active::after { | |
| width: 14px; | |
| height: 14px; | |
| border-color: #818cf8; | |
| } | |
| .uif-output > .uif-corner { --uif-grip-color: var(--uif-color); } | |
| /* Touch screens have no hover: keep the grips visible and easier to hit. */ | |
| @media (pointer: coarse) { | |
| .uif-corner { --uif-grip: 28px; opacity: 0.8; } | |
| } | |
| /* ------------------------------------------------------------------ */ | |
| /* Keyboard handles, renaming, reply box */ | |
| /* ------------------------------------------------------------------ */ | |
| .drag-handle:focus-visible, | |
| .uif-output-header:focus-visible { | |
| outline: 2px solid #818cf8; | |
| outline-offset: -2px; | |
| } | |
| .uif-output-rename { | |
| flex: 1; | |
| min-width: 0; | |
| padding: 0.1rem 0.3rem; | |
| border: 1px solid var(--uif-color); | |
| border-radius: 0.25rem; | |
| background: rgba(0, 0, 0, 0.35); | |
| color: inherit; | |
| font: inherit; | |
| font-weight: 600; | |
| } | |
| .uif-output-reply { | |
| display: flex; | |
| gap: 0.25rem; | |
| padding: 0.375rem; | |
| border-top: 1px solid rgba(148, 163, 184, 0.15); | |
| } | |
| .uif-output-reply-input { | |
| flex: 1; | |
| min-width: 0; | |
| padding: 0.3rem 0.5rem; | |
| border: 1px solid rgba(148, 163, 184, 0.25); | |
| border-radius: 0.375rem; | |
| background: rgba(0, 0, 0, 0.3); | |
| color: inherit; | |
| font: inherit; | |
| } | |
| .uif-output-reply-input:focus { outline: none; border-color: var(--uif-color); } | |
| .uif-output-reply button { | |
| flex: none; | |
| width: 2rem; | |
| border: 0; | |
| border-radius: 0.375rem; | |
| background: var(--uif-color); | |
| color: #0b1120; | |
| cursor: pointer; | |
| } | |
| .uif-output-reply button:disabled { opacity: 0.35; cursor: not-allowed; } | |
| /* ------------------------------------------------------------------ */ | |
| /* Free placement: floating buttons, trash, drop target */ | |
| /* ------------------------------------------------------------------ */ | |
| .uif-action-floating { | |
| position: fixed; | |
| width: 36px; | |
| height: 36px; | |
| color: #e5e7eb; | |
| background: rgba(17, 24, 39, 0.9); | |
| border: 1px solid rgba(148, 163, 184, 0.35); | |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| } | |
| .uif-action-floating:hover { background: rgba(30, 41, 59, 0.95); } | |
| .uif-action-floating.is-moving { cursor: grabbing; transform: scale(1.12); transition: none; animation: none; } | |
| .uif-action-floating.is-removing { background: #ef4444; } | |
| .uif-action-floating.is-docking { border-color: #6366f1; } | |
| .uif-action-floating.is-pressed { border-color: #6366f1; } | |
| .uif-action-ghost.is-placing { background: #4f46e5; opacity: 0.9; } | |
| .uif-actionbar.is-drop-target { | |
| outline: 2px dashed #6366f1; | |
| outline-offset: 3px; | |
| border-radius: 0.375rem; | |
| } | |
| .uif-trash { | |
| position: fixed; | |
| top: 12px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 0.6rem 1.1rem; | |
| border-radius: 999px; | |
| border: 1px dashed rgba(248, 113, 113, 0.7); | |
| background: rgba(17, 24, 39, 0.92); | |
| color: #fca5a5; | |
| font: 600 0.8125rem system-ui, sans-serif; | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); | |
| transition: background 0.15s ease, transform 0.15s ease; | |
| } | |
| .uif-trash.is-hot { background: #ef4444; color: #fff; transform: translateX(-50%) scale(1.08); } | |
| /* Layout section of the palette */ | |
| .uif-palette-layout { display: flex; flex-direction: column; gap: 0.375rem; } | |
| .uif-palette-active { color: #94a3b8; font-size: 0.75rem; } | |
| .uif-palette-list li.is-active .uif-palette-item { color: #a5b4fc; } | |
| .uif-button.is-quiet { background: rgba(148, 163, 184, 0.15); color: #e5e7eb; flex: 1; } | |
| .uif-palette-note.is-error { color: #f87171; } | |
| /* Palette tabs */ | |
| .uif-palette-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid rgba(148, 163, 184, 0.2); padding-bottom: 0.375rem; } | |
| .uif-palette-tab { | |
| flex: 1; | |
| padding: 0.3rem 0.4rem; | |
| border: 0; | |
| border-radius: 0.25rem; | |
| background: transparent; | |
| color: #94a3b8; | |
| font: inherit; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .uif-palette-tab:hover { background: rgba(148, 163, 184, 0.12); color: #e5e7eb; } | |
| .uif-palette-tab.is-active { background: rgba(99, 102, 241, 0.25); color: #e5e7eb; } | |
| .uif-palette-panel { display: flex; flex-direction: column; gap: 0.5rem; } | |
| .uif-palette-panel .uif-palette-form { border-top: 0; padding-top: 0; } | |
| /* ------------------------------------------------------------------ */ | |
| /* Windows menu and context windows (.history .memory .prompt …) */ | |
| /* ------------------------------------------------------------------ */ | |
| .uif-windows-menu { position: relative; flex: none; } | |
| .uif-windows-toggle.is-open { border-color: #6366f1; background: rgba(99, 102, 241, 0.2); } | |
| .uif-windows-list { | |
| position: absolute; | |
| left: 0; | |
| bottom: calc(100% + 0.5rem); | |
| z-index: 1002; | |
| min-width: 260px; | |
| padding: 0.375rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| border-radius: 0.5rem; | |
| background: rgba(17, 24, 39, 0.96); | |
| border: 1px solid rgba(148, 163, 184, 0.3); | |
| box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); | |
| color: #e5e7eb; | |
| font: 0.8125rem system-ui, sans-serif; | |
| } | |
| .docked-top .uif-windows-list { bottom: auto; top: calc(100% + 0.5rem); } | |
| .uif-windows-item { | |
| display: grid; | |
| grid-template-columns: 1.25rem auto 1fr 0.75rem; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.4rem 0.5rem; | |
| border: 0; | |
| border-radius: 0.3rem; | |
| background: transparent; | |
| color: inherit; | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .uif-windows-item:hover, .uif-windows-item:focus-visible { background: rgba(148, 163, 184, 0.15); outline: none; } | |
| .uif-windows-file { font-family: ui-monospace, monospace; font-weight: 600; } | |
| .uif-windows-detail { color: #94a3b8; font-size: 0.75rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .uif-windows-check { color: #818cf8; font-size: 0.6rem; } | |
| .uif-window { | |
| position: fixed; | |
| display: flex; | |
| flex-direction: column; | |
| border-radius: 0.5rem; | |
| background: rgba(15, 23, 42, 0.95); | |
| border: 1px solid rgba(148, 163, 184, 0.3); | |
| box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| color: #e5e7eb; | |
| font: 0.8125rem/1.45 system-ui, -apple-system, sans-serif; | |
| } | |
| .uif-window.is-dragging { opacity: 0.92; } | |
| .uif-window:hover > .uif-corner, .uif-window > .uif-corner:active { opacity: 1; } | |
| .uif-window-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.45rem 0.5rem 0.45rem 0.65rem; | |
| border-bottom: 1px solid rgba(148, 163, 184, 0.18); | |
| cursor: move; | |
| user-select: none; | |
| touch-action: none; | |
| } | |
| .uif-window-title:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; } | |
| .uif-window-icon { color: #a5b4fc; } | |
| .uif-window-name { font-family: ui-monospace, monospace; font-weight: 700; } | |
| .uif-window-summary { color: #94a3b8; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } | |
| .uif-window-tools { display: flex; gap: 0.125rem; } | |
| .uif-window-tools button { | |
| width: 1.6rem; | |
| height: 1.6rem; | |
| border: 0; | |
| border-radius: 0.25rem; | |
| background: transparent; | |
| color: #94a3b8; | |
| cursor: pointer; | |
| } | |
| .uif-window-tools button:hover { background: rgba(148, 163, 184, 0.2); color: #fff; } | |
| .uif-window-body { flex: 1; min-height: 0; overflow: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; } | |
| .uif-window-stack { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-height: 0; } | |
| .uif-window-row { display: flex; gap: 0.375rem; align-items: center; } | |
| .uif-window-row.is-end { justify-content: flex-end; } | |
| .uif-window-row.is-end .uif-window-hint { margin-right: auto; } | |
| .uif-window-empty { color: #64748b; margin: 0.25rem 0; } | |
| .uif-window-hint { color: #94a3b8; font-size: 0.75rem; margin: 0; } | |
| .uif-window-note { margin: 0; font-size: 0.75rem; color: #a7f3d0; } | |
| .uif-window-note.is-error, .uif-window-hint .is-error { color: #f87171; } | |
| .uif-window-text { flex: 1; min-height: 6rem; resize: none; font: inherit; line-height: 1.5; } | |
| .uif-window-text.is-code { font-family: ui-monospace, monospace; font-size: 0.75rem; } | |
| .uif-window-text.is-invalid { border-color: #f87171; } | |
| .uif-window-preview { | |
| margin: 0; | |
| max-height: 10rem; | |
| overflow: auto; | |
| padding: 0.5rem; | |
| border-radius: 0.375rem; | |
| background: rgba(0, 0, 0, 0.35); | |
| white-space: pre-wrap; | |
| font: 0.72rem/1.45 ui-monospace, monospace; | |
| color: #cbd5e1; | |
| } | |
| .uif-window-choice { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.375rem; padding: 0.35rem 0.6rem; display: flex; gap: 1rem; flex-wrap: wrap; } | |
| .uif-window-choice legend { color: #94a3b8; font-size: 0.72rem; padding: 0 0.25rem; } | |
| .uif-window-choice label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; } | |
| .uif-window-commit { color: #94a3b8; font-size: 0.72rem; border-top: 1px solid rgba(148, 163, 184, 0.15); padding-top: 0.4rem; } | |
| .uif-window-commit code { color: #cbd5e1; } | |
| .uif-link.is-left { align-self: flex-start; padding-left: 0; } | |
| .uif-button.is-danger { background: #dc2626; color: #fff; } | |
| .uif-history { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; } | |
| .uif-history-item { display: flex; flex-direction: column; gap: 0.25rem; } | |
| .uif-history-meta { color: #64748b; font-size: 0.7rem; } | |
| .uif-history-receipt { color: #86efac; cursor: help; } | |
| .uif-memory { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; } | |
| .uif-memory-item { display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.35rem 0.45rem; border-radius: 0.3rem; background: rgba(148, 163, 184, 0.08); } | |
| .uif-memory-kind { color: #a5b4fc; flex: none; } | |
| .uif-memory-text { flex: 1; white-space: pre-wrap; word-break: break-word; } | |
| .uif-persona-card { padding: 0.5rem 0.6rem; border-radius: 0.375rem; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.3); } | |
| .uif-persona-card p { margin: 0.25rem 0 0; } | |
| .uif-persona-role { margin-left: 0.5rem; color: #a5b4fc; font-size: 0.75rem; } | |
| .uif-persona-line { color: #cbd5e1; font-size: 0.75rem; } | |
| .uif-model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.6rem; } | |
| .uif-model-grid label { display: flex; flex-direction: column; gap: 0.2rem; color: #94a3b8; font-size: 0.72rem; font-family: ui-monospace, monospace; } | |
| .uif-model-grid label.uif-model-pin { flex-direction: row; align-items: center; gap: 0.35rem; align-self: end; } | |
| /* Keep a reply in .memory */ | |
| .uif-msg-row { display: flex; align-items: flex-end; gap: 0.25rem; align-self: flex-start; max-width: 92%; } | |
| .uif-msg-row > .uif-msg { max-width: 100%; } | |
| .uif-msg-keep { | |
| flex: none; | |
| border: 0; | |
| background: none; | |
| color: #64748b; | |
| cursor: pointer; | |
| font-size: 0.8rem; | |
| opacity: 0; | |
| transition: opacity 0.15s ease; | |
| } | |
| .uif-msg-row:hover .uif-msg-keep, .uif-msg-keep:focus-visible, .uif-msg-keep.is-kept { opacity: 1; } | |
| .uif-msg-keep:hover { color: #a5b4fc; } | |
| .uif-msg-keep.is-kept { color: #818cf8; cursor: default; } | |
| @media (pointer: coarse) { .uif-msg-keep { opacity: 0.7; } } | |
| /* ------------------------------------------------------------------ */ | |
| /* Compression, sideways, handheld, the isolated button row */ | |
| /* ------------------------------------------------------------------ */ | |
| .ultimate-input-field { --uif-bar-h: 2.25rem; } | |
| /* Compressed: the input never gets shorter than the button row underneath it (equal size at the minimum), | |
| and grows to the field's maximum. */ | |
| .is-stacked .uif-prompt { min-height: var(--uif-bar-h); } | |
| .is-stacked .uif-prompt .ultimate-textarea { min-height: var(--uif-bar-h); padding-top: 0.4rem; padding-bottom: 0.4rem; } | |
| .ultimate-controls { min-height: var(--uif-bar-h); flex: none; } | |
| /* The buttons stay in one line and scroll when there are more than fit; the + palette lives outside the scroller. */ | |
| .uif-actionbar { flex-wrap: nowrap; min-width: 0; } | |
| .uif-actionbar-items { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| min-width: 0; | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| scrollbar-width: thin; | |
| overscroll-behavior: contain; | |
| } | |
| .uif-actionbar-items > * { flex: none; } | |
| .uif-bar-slot { display: flex; min-width: 0; flex: 1; } | |
| /* Sideways: too short for two rows, so the input and the button row share one. */ | |
| .is-sideways .uif-core { flex-direction: row; align-items: center; } | |
| .is-sideways .uif-prompt { flex: 1 1 40%; min-width: 7rem; min-height: var(--uif-bar-h); height: var(--uif-bar-h); align-self: center; } | |
| .is-sideways .uif-prompt .ultimate-textarea { height: var(--uif-bar-h); padding: 0.45rem 0.75rem; white-space: nowrap; overflow: hidden; } | |
| .is-sideways .ultimate-controls { flex: 0 1 auto; max-width: 60%; } | |
| .is-sideways .drag-handle { height: 4px; margin-bottom: 0; } | |
| .is-sideways .uif-modules { display: none; } | |
| /* The grip that takes the button row out of the field */ | |
| .uif-bar-grip { | |
| flex: none; | |
| width: 1.1rem; | |
| height: var(--uif-bar-h, 2.25rem); | |
| padding: 0; | |
| border: 0; | |
| border-radius: 0.25rem; | |
| background: transparent; | |
| color: var(--uif-dim, #94a3b8); | |
| cursor: grab; | |
| touch-action: none; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .uif-bar-grip:hover, .uif-bar-grip:focus-visible { background: rgba(148, 163, 184, 0.15); color: #e5e7eb; outline: none; } | |
| .uif-bar-grip.is-dragging { cursor: grabbing; } | |
| .uif-bar-ghost { | |
| position: fixed; | |
| z-index: 3000; | |
| height: 2.25rem; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 0.75rem; | |
| border: 2px dashed #6366f1; | |
| border-radius: 0.5rem; | |
| background: rgba(99, 102, 241, 0.15); | |
| color: #c7d2fe; | |
| font: 600 0.75rem system-ui, sans-serif; | |
| pointer-events: none; | |
| } | |
| .uif-isolated-bar { | |
| position: fixed; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| padding: 0.3rem 0.4rem; | |
| border-radius: 0.6rem; | |
| background: rgba(17, 24, 39, 0.94); | |
| border: 1px solid rgba(148, 163, 184, 0.3); | |
| box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| color: #e5e7eb; | |
| max-width: calc(100vw - 8px); | |
| } | |
| .uif-isolated-bar.is-dragging { opacity: 0.85; } | |
| .uif-isolated-tools { display: flex; align-items: center; gap: 0.125rem; flex: none; } | |
| .uif-bar-tool { | |
| width: 1.6rem; | |
| height: 1.6rem; | |
| border: 0; | |
| border-radius: 0.25rem; | |
| background: transparent; | |
| color: #94a3b8; | |
| cursor: pointer; | |
| } | |
| .uif-bar-tool:hover { background: rgba(148, 163, 184, 0.2); color: #fff; } | |
| .uif-isolated-bar .uif-bar-grip { cursor: move; height: 1.8rem; } | |
| /* Sideways: the isolated row stands up */ | |
| .uif-isolated-bar.is-vertical { flex-direction: column; max-height: calc(100vh - 8px); max-width: none; } | |
| .uif-isolated-bar.is-vertical .uif-isolated-tools { flex-direction: column; } | |
| .uif-actionbar.is-vertical { flex-direction: column; } | |
| .uif-actionbar.is-vertical .uif-actionbar-items { flex-direction: column; overflow-x: hidden; overflow-y: auto; flex: 1 1 auto; min-height: 0; } | |
| /* standing up, the buttons take exactly the height left beside the bar's own tools, and scroll inside it */ | |
| .uif-isolated-bar.is-vertical > .uif-actionbar { flex: 1 1 auto; min-height: 0; } | |
| .uif-actionbar.is-vertical .uif-palette { bottom: auto; top: 0; left: calc(100% + 0.5rem); } | |
| /* Handheld: full width at the edge it is docked to, touch-sized targets, no zoom on focus */ | |
| .is-handheld { --uif-bar-h: 2.75rem; } | |
| .is-handheld.docked-bottom, | |
| .is-handheld.docked-top { | |
| left: 0 ; | |
| right: 0 ; | |
| width: auto ; | |
| max-width: none ; | |
| transform: none ; | |
| border-radius: 0.75rem 0.75rem 0 0; | |
| padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); | |
| } | |
| .is-handheld.docked-top { border-radius: 0 0 0.75rem 0.75rem; padding-top: max(0.5rem, env(safe-area-inset-top)); } | |
| .is-handheld .ultimate-textarea { font-size: 16px; } | |
| .is-handheld .uif-action, | |
| .is-handheld .uif-mode-toggle, | |
| .is-handheld .uif-windows-toggle, | |
| .is-handheld .uif-send { min-width: 2.75rem; height: 2.75rem; } | |
| .is-handheld .uif-bar-grip { width: 1.6rem; } | |
| .is-handheld .uif-palette, | |
| .is-handheld .uif-windows-list { position: fixed; left: 8px; right: 8px; bottom: calc(var(--uif-bar-h) * 2 + 2rem); width: auto; } | |
| @media (max-width: 640px) { | |
| .uif-output, .uif-window { max-width: calc(100vw - 32px); } | |
| .uif-termlog { max-height: 40vh; } | |
| } | |
| .uif-output-buttons button.is-on { color: var(--uif-color); } | |
| /* Narrow fields (by the field's own width, whatever the page): the side modules and the status line give way, | |
| so the button row always shows at least two buttons. */ | |
| .ultimate-input-field { container-type: inline-size; container-name: uif; } | |
| .uif-bar-slot { min-width: 4.75rem; } | |
| @container uif (max-width: 460px) { | |
| .uif-modules, .uif-status { display: none; } | |
| } | |
| @container uif (max-width: 300px) { | |
| .uif-windows-toggle { width: 1.75rem; } | |
| } | |
| .uif-msg-silent { font-size: 0.75rem; opacity: 0.7; cursor: help; } | |
| .uif-window-tools-slot { display: contents; } | |
| /* The bar spans the field: its buttons share the row exactly, growing or shrinking (down to 1.5rem) so the row is as | |
| long as the input above it, with no scrollbar. Only where even that cannot fit them (a phone, touch-sized buttons) | |
| does the row scroll: swiped, its scrollbar hidden, the far edge faded to say there is more. A vertical, isolated bar | |
| keeps its own sizes. */ | |
| .uif-bar-slot > .uif-actionbar, .uif-bar-slot .uif-actionbar-items { flex: 1; } | |
| .uif-actionbar:not(.is-vertical) .uif-actionbar-items { scrollbar-width: none; } | |
| .uif-actionbar:not(.is-vertical) .uif-actionbar-items::-webkit-scrollbar { display: none; } | |
| .uif-actionbar:not(.is-vertical) .uif-actionbar-items > .uif-action { flex: 1 1 0; min-width: 1.5rem; padding: 0; } | |
| .is-handheld .uif-actionbar:not(.is-vertical) .uif-actionbar-items > .uif-action { flex: 1 0 2.75rem; min-width: 2.75rem; } | |
| .uif-actionbar-items.is-overflowing { mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); } | |
| /* The rolodex: switching mode turns the bar to the other mode's buttons, a card rolling over on its axis. */ | |
| .uif-bar-slot, .uif-isolated-bar { perspective: 640px; } | |
| .uif-actionbar.is-rolling { animation: uif-roll .7s cubic-bezier(.25, .6, .3, 1); transform-origin: 50% 50% -1rem; backface-visibility: hidden; } | |
| @keyframes uif-roll { | |
| 0% { transform: rotateX(-100deg); opacity: .1; } | |
| 55% { transform: rotateX(14deg); opacity: 1; } | |
| 78% { transform: rotateX(-5deg); } | |
| 100% { transform: rotateX(0deg); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { .uif-actionbar.is-rolling { animation: none; } } | |
| /* A report in the T-mode log: a heading line, then sections that open and close (an accordion). */ | |
| .uif-termline.is-report { padding: 0.15rem 0 0.25rem; } | |
| .uif-termsection { margin: 0.2rem 0 0 0.25rem; border-left: 2px solid rgba(16, 185, 129, 0.35); padding-left: 0.5rem; } | |
| .uif-termsection > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.4rem; color: var(--uif-term, #10b981); font-weight: 700; } | |
| .uif-termsection > summary::-webkit-details-marker { display: none; } | |
| .uif-termsection > summary::before { content: '▸'; display: inline-block; transition: transform 0.15s ease; } | |
| .uif-termsection[open] > summary::before { transform: rotate(90deg); } | |
| .uif-termsection > summary:focus-visible { outline: 1px solid var(--uif-term, #10b981); outline-offset: 2px; } | |
| .uif-termmark { width: 1ch; text-align: center; } | |
| .uif-termhint { margin-left: auto; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; } | |
| .uif-termsection.is-warn { border-left-color: rgba(251, 191, 36, 0.6); } | |
| .uif-termsection.is-warn > summary { color: #fbbf24; } | |
| .uif-termsection.is-bad { border-left-color: rgba(248, 113, 113, 0.7); } | |
| .uif-termsection.is-bad > summary { color: #f87171; } | |
| .uif-termsub { white-space: pre-wrap; word-break: break-word; padding: 0.05rem 0 0.05rem 1.1rem; color: #a7f3d0; } | |
| @media (prefers-reduced-motion: reduce) { .uif-termsection > summary::before { transition: none; } } | |
| /* Response windows: the text size every window shares (Responses ▸ Settings) */ | |
| .uif-output-body { font-size: var(--uif-output-font, 14px); } | |
| /* A window, or the field, filling the screen (double-click its header or grip; again, or Esc, shrinks it back) */ | |
| .uif-output.is-maximized, .ultimate-input-field.is-maximized { | |
| position: fixed; | |
| border-radius: 0 ; | |
| box-shadow: none; | |
| } | |
| .uif-output.is-maximized .uif-output-header { cursor: default; } | |
| .uif-output-buttons button[aria-pressed="true"] { color: var(--uif-color, #a5b4fc); } | |
| /* The Responses menu: every window at once, and the settings they share */ | |
| .uif-responses-menu .uif-windows-toggle { position: relative; } | |
| .uif-responses-count { | |
| position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; | |
| background: var(--uif-accent, #6366f1); color: #fff; font-size: 10px; line-height: 15px; text-align: center; | |
| } | |
| .uif-responses-list { min-width: 280px; } | |
| .uif-menu-head { padding: 0.45rem 0.6rem 0.2rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; } | |
| .uif-menu-row { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; font-size: 0.8rem; flex-wrap: wrap; } | |
| .uif-menu-row > span:first-child { min-width: 4.5rem; color: #94a3b8; } | |
| .uif-menu-row button { | |
| padding: 0.15rem 0.45rem; border-radius: 0.3rem; border: 1px solid rgba(148, 163, 184, 0.3); background: transparent; | |
| color: inherit; font: inherit; cursor: pointer; | |
| } | |
| .uif-menu-row button.is-on { background: rgba(99, 102, 241, 0.35); border-color: rgba(99, 102, 241, 0.7); } | |
| .uif-menu-check { cursor: pointer; } | |
| .uif-menu-foot { padding: 0.4rem 0.6rem 0.5rem; font-size: 0.7rem; color: #64748b; border-top: 1px solid rgba(148, 163, 184, 0.15); margin-top: 0.2rem; } | |
| .uif-windows-item:disabled { opacity: 0.4; cursor: default; } | |
| .uif-windows-item.is-danger .uif-windows-file { color: #f87171; } | |
| /* the Responses menu's rows: the action on the left, what it does on the right (no icon column) */ | |
| .uif-responses-list { background: rgb(15 23 42 / 0.98) ; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } | |
| .uif-responses-list .uif-windows-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } | |
| .uif-responses-list .uif-windows-file { white-space: nowrap; font-weight: 600; } | |
| .uif-responses-list .uif-windows-detail { text-align: right; } | |
| /* a window that fills the screen fills exactly the screen: its border inside its size */ | |
| .uif-output.is-maximized, .ultimate-input-field.is-maximized { box-sizing: border-box; } | |
| /* Magnetic docking: the edge a dragged field is drawn to glows; let go and it docks there */ | |
| .uif-dock-hint { | |
| position: fixed; | |
| z-index: 2147483000; | |
| pointer-events: none; | |
| background: linear-gradient(var(--uif-magnet-dir, 180deg), rgba(99, 102, 241, 0.55), rgba(99, 102, 241, 0)); | |
| animation: uif-magnet 0.9s ease-in-out infinite alternate; | |
| } | |
| .uif-dock-hint.is-top { top: 0; left: 0; right: 0; height: 18px; --uif-magnet-dir: 180deg; } | |
| .uif-dock-hint.is-bottom { bottom: 0; left: 0; right: 0; height: 18px; --uif-magnet-dir: 0deg; } | |
| .uif-dock-hint.is-left { top: 0; bottom: 0; left: 0; width: 18px; --uif-magnet-dir: 90deg; } | |
| .uif-dock-hint.is-right { top: 0; bottom: 0; right: 0; width: 18px; --uif-magnet-dir: 270deg; } | |
| @keyframes uif-magnet { from { opacity: 0.55; } to { opacity: 1; } } | |
| .ultimate-input-field[class*='is-drawn-'] { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.7), 0 10px 30px rgba(0, 0, 0, 0.45); } | |
| @media (prefers-reduced-motion: reduce) { .uif-dock-hint { animation: none; } } | |
| /* The persona mode's switch beside T (sAGI for Savante): lit while the field asks as the persona */ | |
| .uif-persona-toggle { | |
| flex: none; | |
| padding: 0.15rem 0.45rem; | |
| border-radius: 0.4rem; | |
| border: 1px solid rgba(148, 163, 184, 0.35); | |
| background: transparent; | |
| color: #94a3b8; | |
| font: 600 0.72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; | |
| cursor: pointer; | |
| } | |
| .uif-persona-toggle.is-on { color: #e3b341; border-color: rgba(227, 179, 65, 0.7); background: rgba(227, 179, 65, 0.1); } | |
| .ultimate-input-field.is-persona { box-shadow: 0 0 0 1px rgba(227, 179, 65, 0.45), 0 10px 30px rgba(0, 0, 0, 0.4); } | |
| /* A reply's video or image, full width of the window, with a save link */ | |
| .uif-msg-media { display: block; margin-top: 0.4rem; } | |
| .uif-media { display: block; width: 100%; max-height: 60vh; border-radius: 0.5rem; background: #000; } | |
| .uif-media-save { display: inline-block; margin-top: 0.25rem; font-size: 0.75rem; color: #93c5fd; text-decoration: none; } | |
| .uif-media-save:hover { text-decoration: underline; } | |
| /* ------------------------------------------------------------------ */ | |
| /* Palette in use (the tokens are at the top of this file) */ | |
| /* ------------------------------------------------------------------ */ | |
| /* Inputs: the text is set here, at the source, not inherited from a theme the host page may not have (a page without | |
| the .dark class gave near-black text on the dark glass: invisible). -webkit-text-fill-color too, for WebKit. */ | |
| .ultimate-textarea, | |
| .ultimate-textarea.text-mode, | |
| .uif-output-reply-input, | |
| .uif-output-rename { | |
| background: var(--uif-field-bg); | |
| color: var(--uif-field-text); | |
| -webkit-text-fill-color: var(--uif-field-text); | |
| caret-color: var(--btc-orange); | |
| } | |
| /* 16 px at every size: readable, and iOS does not zoom into the field */ | |
| .ultimate-textarea, | |
| .uif-output-reply-input { font-size: 16px; } | |
| .uif-output-reply button[type="submit"] { | |
| min-width: 2.25rem; | |
| background: var(--candle-green); | |
| border-color: var(--candle-green); | |
| color: var(--candle-green-ink); | |
| } | |
| .ultimate-textarea.text-mode::placeholder, | |
| .uif-output-reply-input::placeholder { | |
| color: var(--uif-field-placeholder); | |
| -webkit-text-fill-color: var(--uif-field-placeholder); | |
| opacity: 1; | |
| } | |
| .ultimate-textarea:focus, | |
| .uif-output-reply-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px var(--btc-orange); | |
| } | |
| .ultimate-textarea.terminal-mode { | |
| background: var(--term-bg); | |
| color: var(--term-green); | |
| -webkit-text-fill-color: var(--term-green); | |
| caret-color: var(--term-green); | |
| } | |
| .ultimate-textarea.terminal-mode::placeholder { | |
| color: rgba(51, 255, 102, 0.62); | |
| -webkit-text-fill-color: rgba(51, 255, 102, 0.62); | |
| opacity: 1; | |
| } | |
| .ultimate-input-field.is-terminal { --uif-term: var(--term-green); --uif-text: var(--term-green); } | |
| .terminal-glass { background: rgba(0, 0, 0, 0.92); border-color: rgba(51, 255, 102, 0.35); } | |
| .uif-termlog { color: var(--term-green); } | |
| .uif-termline.is-err { color: var(--stop-red); } | |
| /* Send: the primary action, in candle green; Stop beside it while an answer streams, in red */ | |
| .uif-send, | |
| .uif-stop { | |
| flex: none; | |
| min-width: 2.75rem; | |
| width: 2.75rem; | |
| height: 2.75rem; | |
| padding: 0; | |
| border-radius: 0.5rem; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .uif-send { | |
| background: var(--candle-green); | |
| border: 1px solid var(--candle-green); | |
| color: var(--candle-green-ink); | |
| font-weight: 700; | |
| } | |
| .uif-send:hover:not(:disabled) { filter: brightness(1.08); } | |
| .uif-send:disabled { opacity: 0.45; } | |
| .uif-stop { | |
| background: var(--stop-red); | |
| border: 1px solid var(--stop-red); | |
| color: #fff; | |
| font-size: 1rem; | |
| } | |
| .uif-send:focus-visible, | |
| .uif-stop:focus-visible, | |
| .uif-output-buttons button:focus-visible { outline: 2px solid var(--btc-orange); outline-offset: 2px; } | |
| /* Spawned windows (responses, the ▤ windows): semi-transparent glass over the page. Sized with their borders, so a | |
| window placed as wide as the field (16 px gutters on a phone) is exactly that wide. */ | |
| .uif-output, | |
| .uif-window { | |
| background: var(--uif-glass-solid); | |
| color: #e5e7eb; | |
| box-sizing: border-box; | |
| } | |
| @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { | |
| .uif-output, | |
| .uif-window { | |
| background: var(--uif-glass); | |
| backdrop-filter: var(--uif-glass-blur); | |
| -webkit-backdrop-filter: var(--uif-glass-blur); | |
| } | |
| } | |
| /* a popped-out window has no page behind it */ | |
| .uif-output-window { background: var(--uif-glass-solid); } | |
| .uif-output.is-active { box-shadow: 0 0 0 1px var(--btc-orange), 0 10px 25px rgba(0, 0, 0, 0.35); } | |
| /* Under each answer: the delivery line, a footer the page adds, a status while it works */ | |
| .uif-msg-system { color: #cbd5e1; } | |
| .uif-msg-system.is-delivery, | |
| .uif-msg-system.is-footer, | |
| .uif-msg-system.is-status { | |
| align-self: flex-start; | |
| max-width: 100%; | |
| font: 0.75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; | |
| padding: 0 0.5rem; | |
| } | |
| .uif-msg-system.is-footer { font-style: italic; color: #cbd5e1; } | |
| .uif-msg.is-ok { color: var(--candle-green); } | |
| .uif-msg.is-bad { color: var(--stop-red); } | |
| .uif-msg.is-working { color: var(--btc-orange); } | |
| .uif-msg-assistant.is-undelivered { | |
| background: rgba(246, 70, 93, 0.1); | |
| border-left: 3px solid var(--stop-red); | |
| color: #fecdd3; | |
| } | |
| /* Send stays candle green when there is nothing to send yet, a little quieter, never greyed into the page */ | |
| .uif-send:disabled { opacity: 0.6; } | |
| /* The small coloured lines under an answer sit on the solid glass colour, not on the see-through window: red, orange | |
| and green keep 4.5:1 whatever bright page text is behind the glass (over a light page, 0.72 glass alone left the | |
| red at about 2.3:1). */ | |
| .uif-msg-system.is-delivery, | |
| .uif-msg-system.is-footer, | |
| .uif-msg-system.is-status { | |
| background: var(--uif-glass-solid); | |
| border-radius: 0.25rem; | |
| padding: 0.125rem 0.5rem; | |
| } | |
| .uif-output-empty { color: #cbd5e1; } | |
| /* Touch: every button in a response window is at least 44 × 44 px (the header's, the reply box's), and so are the | |
| field's own (its grip, its menus) */ | |
| @media (pointer: coarse) { | |
| .uif-output-buttons { gap: 0; } | |
| .uif-output-buttons button { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; font-size: 1rem; } | |
| .uif-output-header { padding-top: 0; padding-bottom: 0; } | |
| .uif-output-reply-input { min-height: 2.75rem; } | |
| .uif-output-reply button, | |
| .uif-output-reply button[type="submit"] { width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; } | |
| } | |
| .is-handheld .uif-bar-grip { width: 2.75rem; min-height: 2.75rem; } | |
| .is-handheld .uif-action, | |
| .is-handheld .uif-action-add { min-width: 2.75rem; width: auto; height: 2.75rem; } | |
| /* A phone's button row: 44 px buttons need the room, so the gaps tighten and the ⠿ grip is not shown (T mode's | |
| `isolate` still takes the row out of the field); the row then shows its first buttons beside the +, not a sliver. */ | |
| .is-handheld .ultimate-controls, | |
| .is-handheld .ultimate-controls-left { gap: 0.25rem; } | |
| @media (max-width: 640px) { | |
| .is-handheld .uif-bar-grip { display: none; } | |
| } | |
| @media (pointer: coarse) { | |
| .uif-msg-keep { min-width: 2.75rem; min-height: 2.75rem; } | |
| } | |
| /* Voice input: 🎤 at the right edge of the prompt where the browser has speech recognition; orange while it listens. */ | |
| .uif-prompt { position: relative; } | |
| .uif-prompt.has-mic .ultimate-textarea { padding-right: 2.6rem; } | |
| .uif-mic { | |
| position: absolute; | |
| right: 0.25rem; | |
| top: 0.25rem; | |
| width: 2rem; | |
| height: 2rem; | |
| padding: 0; | |
| border-radius: 0.5rem; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| color: #e2e8f0; | |
| font-size: 0.95rem; | |
| opacity: 0.8; | |
| } | |
| .uif-mic:hover { opacity: 1; border-color: #334155; } | |
| .uif-mic.is-on { opacity: 1; border-color: var(--btc-orange); color: var(--btc-orange); animation: uif-mic-pulse 1.2s ease-in-out infinite; } | |
| .uif-mic:focus-visible { opacity: 1; outline: 2px solid var(--btc-orange); outline-offset: 1px; } | |
| .is-handheld .uif-mic { width: 2.75rem; height: 2.75rem; top: 0; right: 0; } | |
| .is-handheld .uif-prompt.has-mic .ultimate-textarea { padding-right: 3rem; } | |
| .is-sideways .uif-mic { top: 50%; transform: translateY(-50%); } | |
| @keyframes uif-mic-pulse { 50% { box-shadow: 0 0 0 4px rgba(247, 147, 26, 0.25); } } | |
| @media (prefers-reduced-motion: reduce) { .uif-mic.is-on { animation: none; } } | |
| /* Phones: 16 px in the field whatever the layout (iOS zooms into smaller text), 44 px for the mic. */ | |
| @media (max-width: 640px), (pointer: coarse) { | |
| .ultimate-textarea { font-size: 16px; } | |
| .uif-mic { width: 2.75rem; height: 2.75rem; top: 0; right: 0; } | |
| .uif-prompt.has-mic .ultimate-textarea { padding-right: 3rem; } | |
| } | |