src/styles/UltimateInputField.css

/* 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 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  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 !important;
  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) !important; 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; }
}