aegis-desktop 0.3.0

package/renderer/style.css

@@ -0,0 +1,1454 @@
+:root {
+  --bg: #0a0e14;
+  --surface: #12161e;
+  --surface2: #181e28;
+  --border: #2a3342;
+  --border2: #3d4a5e;
+  --text: #d0dfee;
+  --text2: #7e9ab8;
+  --text3: #3a4a60;
+  --teal: #00e5c0;
+  --purple: #6b8fd4;
+  --green: #00ff88;
+  --red: #ff1744;
+  --amber: #ff9100;
+
+  --panel: var(--surface);
+  --muted: var(--text2);
+  --accent: var(--teal);
+  --good: var(--green);
+  --user: var(--purple);
+  --assistant: var(--surface2);
+
+  --font-display: 'Syne', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'DM Mono', monospace;
+  --font-chat: 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.5 var(--font-display);
+}
+
+/* --------------------------------------------------------------- top bar */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar h1 {
+  font-size: 16px;
+  margin: 0;
+  font-weight: 700;
+  font-family: var(--font-display);
+}
+
+.accent {
+  color: var(--teal);
+}
+
+.conn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text2);
+  font-family: var(--font-mono);
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text3);
+}
+
+.dot.ok {
+  background: var(--teal);
+  box-shadow: 0 0 6px var(--teal);
+}
+
+.spacer {
+  flex: 1;
+}
+
+.toggle-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text2);
+}
+
+#mode-label.local {
+  color: var(--teal);
+}
+
+.switch {
+  position: relative;
+  width: 34px;
+  height: 18px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  inset: 0;
+  border-radius: 18px;
+  background: var(--border);
+  transition: 0.15s;
+  cursor: pointer;
+}
+
+.slider::before {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  left: 3px;
+  top: 3px;
+  border-radius: 50%;
+  background: var(--text);
+  transition: 0.15s;
+}
+
+.switch input:checked + .slider {
+  background: var(--purple);
+}
+
+.switch input:checked + .slider::before {
+  transform: translateX(16px);
+}
+
+/* --------------------------------------------------------------- layout */
+main {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.side {
+  width: 300px;
+  flex: none;
+  border-right: 1px solid var(--border);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  background: var(--surface);
+}
+
+.chat {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--bg);
+}
+
+.card {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.card h2 {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text2);
+  margin: 0 0 8px;
+  font-family: var(--font-display);
+}
+
+.card dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 10px;
+  margin: 0;
+  font-size: 13px;
+  font-family: var(--font-mono);
+}
+
+.card dt {
+  color: var(--text2);
+}
+
+.card dd {
+  margin: 0;
+  word-break: break-all;
+}
+
+select {
+  width: 100%;
+  margin-top: 6px;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px;
+  font-family: var(--font-display);
+}
+
+select:focus {
+  outline: none;
+  border-color: var(--teal);
+}
+
+select:disabled {
+  opacity: 0.55;
+}
+
+.hint {
+  font-size: 12px;
+  color: var(--text2);
+  margin: 8px 0 0;
+}
+
+/* --------------------------------------------------------- in-app key entry */
+.api-key-row {
+  display: flex;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.api-key-row input {
+  flex: 1;
+  min-width: 0;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 5px 8px;
+  font: inherit;
+  font-size: 12px;
+}
+
+.api-key-row input:focus {
+  outline: none;
+  border-color: var(--teal);
+}
+
+/* --------------------------------------------------------------- memory */
+.memory-search {
+  display: flex;
+  gap: 6px;
+}
+
+.memory-search input {
+  flex: 1;
+  min-width: 0;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 8px;
+  font: inherit;
+}
+
+.memory-search input:focus {
+  outline: none;
+  border-color: var(--teal);
+}
+
+.memory-search button {
+  border: none;
+  border-radius: 6px;
+  background: var(--surface2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 0 10px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.memory-search button:hover {
+  border-color: var(--teal);
+  color: var(--teal);
+}
+
+.memory-results {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  max-height: 160px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.memory-results li {
+  font-size: 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 8px;
+  word-break: break-word;
+}
+
+.memory-results .empty {
+  color: var(--text2);
+  border-style: dashed;
+}
+
+/* Sidebar rows now carry provenance: the source is a quiet prefix, the body
+   stays the readable part. Both are <span>s inside the existing <li>. */
+.memory-results .mem-side-src {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--teal);
+  opacity: 0.75;
+  margin-bottom: 2px;
+}
+
+.memory-results .mem-side-body {
+  color: var(--text);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+/* The Memory heading doubles as the inspector's trigger. Reset the button so
+   it inherits the .card h2 typography (style.css:179) and reads as a heading,
+   then add only an affordance on hover/focus. */
+.card-title-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.card-title-btn .ctb-expand {
+  margin-left: auto;
+  font-size: 11px;
+  opacity: 0.4;
+  transition: opacity 0.15s, color 0.15s;
+}
+
+.card-title-btn:hover,
+.card-title-btn:focus-visible {
+  color: var(--teal);
+}
+
+.card-title-btn:hover .ctb-expand,
+.card-title-btn:focus-visible .ctb-expand {
+  opacity: 1;
+  color: var(--teal);
+}
+
+.card-title-btn:focus-visible {
+  outline: 1px solid var(--teal);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+
+/* ------------------------------------------------------ memory inspector */
+/* Full-viewport translucent layer: the app stays visible but recedes behind a
+   blur, so every entry and its source reads as a foreground sheet. */
+.memory-overlay[hidden] {
+  display: none;
+}
+
+.memory-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 24px;
+}
+
+.memory-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(4, 8, 14, 0.55);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.memory-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(860px, 100%);
+  max-height: 100%;
+  min-height: 0;
+  background: color-mix(in srgb, var(--surface2) 88%, transparent);
+  border: 1px solid var(--border2);
+  border-radius: 12px;
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+}
+
+.memory-panel-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.memory-panel-head h2 {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text2);
+  margin: 0;
+  font-family: var(--font-display);
+}
+
+.memory-count {
+  font-size: 11px;
+  color: var(--text2);
+  font-family: var(--font-mono);
+}
+
+.memory-panel-head .spacer {
+  flex: 1;
+}
+
+.memory-filters {
+  display: flex;
+  gap: 6px;
+  padding: 12px 16px 0;
+}
+
+.memory-filters input {
+  flex: 1;
+  min-width: 0;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 7px 9px;
+  font: inherit;
+}
+
+.memory-filters input:focus {
+  outline: none;
+  border-color: var(--teal);
+}
+
+.memory-filters button {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text);
+  padding: 0 12px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.memory-filters button:hover {
+  border-color: var(--teal);
+  color: var(--teal);
+}
+
+.memory-chips {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px 16px 0;
+}
+
+.memory-chips:empty {
+  display: none;
+}
+
+.mem-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+}
+
+.mem-chip-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text3);
+  margin-right: 2px;
+}
+
+.mem-chip {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10px;
+  line-height: 1.6;
+  padding: 1px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  color: var(--text2);
+  background: var(--surface);
+  white-space: nowrap;
+  max-width: 22ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+button.mem-chip {
+  cursor: pointer;
+  font: inherit;
+  font-size: 10px;
+}
+
+button.mem-chip:hover {
+  border-color: var(--teal);
+  color: var(--teal);
+}
+
+button.mem-chip.on {
+  border-color: var(--teal);
+  background: rgba(0, 229, 192, 0.14);
+  color: var(--teal);
+}
+
+.mem-chip.src {
+  border-color: rgba(0, 229, 192, 0.45);
+  color: var(--teal);
+}
+
+.mem-chip.role {
+  border-color: rgba(107, 143, 212, 0.5);
+  color: var(--purple);
+}
+
+.mem-chip.imp {
+  border-color: rgba(255, 145, 0, 0.45);
+  color: var(--amber);
+}
+
+.mem-chip.sent,
+.mem-chip.flag {
+  color: var(--text3);
+}
+
+.mem-chip.pill {
+  border-style: dashed;
+  color: var(--text2);
+}
+
+.memory-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+.memory-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mem-card {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  padding: 9px 11px;
+}
+
+.mem-card-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 6px;
+}
+
+.mem-card-meta {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--text3);
+  font-family: var(--font-mono);
+}
+
+.mem-card-body {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  cursor: pointer;
+}
+
+.mem-card.expanded .mem-card-body {
+  -webkit-line-clamp: unset;
+}
+
+.mem-card-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 7px;
+  padding-top: 7px;
+  border-top: 1px dashed var(--border);
+}
+
+.mem-empty {
+  font-size: 12px;
+  color: var(--text2);
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  padding: 18px;
+  text-align: center;
+}
+
+.mem-upgrade {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  border-color: rgba(255, 145, 0, 0.45);
+}
+
+.mem-upgrade strong {
+  color: var(--amber);
+}
+
+.mem-upgrade span {
+  max-width: 52ch;
+  line-height: 1.6;
+}
+
+.mem-upgrade a {
+  color: var(--teal);
+}
+
+/* Sidebar counterpart of the inspector's .mem-upgrade card: the same cap
+   notice, sized for the narrow memory list instead of the full-width panel. */
+.mem-side-upgrade {
+  border-color: rgba(255, 145, 0, 0.45);
+}
+
+.mem-side-upgrade a {
+  color: var(--teal);
+  line-height: 1.5;
+  display: inline-block;
+}
+
+.memory-actions {
+  border-top: 1px solid var(--border);
+  padding: 12px 16px 14px;
+}
+
+.memory-actions textarea {
+  width: 100%;
+  resize: none;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 8px;
+  font: inherit;
+}
+
+.memory-actions textarea:focus {
+  outline: none;
+  border-color: var(--teal);
+}
+
+/* Stop the page behind the overlay from scrolling under it. */
+body.memory-open {
+  overflow: hidden;
+}
+
+#memory-entry {
+  width: 100%;
+  margin-top: 10px;
+  resize: none;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 8px;
+  font: inherit;
+}
+
+#memory-entry:focus {
+  outline: none;
+  border-color: var(--teal);
+}
+
+.btn-block {
+  width: 100%;
+  margin-top: 6px;
+  border: none;
+  border-radius: 6px;
+  background: var(--teal);
+  color: #04140f;
+  padding: 6px 0;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.btn-block:hover:not(:disabled) {
+  box-shadow: 0 0 12px rgba(0, 229, 192, 0.35);
+}
+
+.btn-block:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* ------------------------------------------------------------- messages */
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  font-family: var(--font-chat);
+}
+
+.msg {
+  max-width: 76%;
+  padding: 10px 12px;
+  border-radius: 10px;
+}
+
+.msg.user {
+  align-self: flex-end;
+  background: var(--purple);
+  color: #fff;
+}
+
+.msg.assistant {
+  align-self: flex-start;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+}
+
+.msg.system {
+  align-self: center;
+  background: transparent;
+  color: var(--text2);
+  font-size: 12px;
+  border: 1px dashed var(--border);
+  max-width: 92%;
+  text-align: center;
+}
+
+.msg.pending {
+  opacity: 0.6;
+}
+
+.typing-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.typing-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text3);
+  animation: typing-glow 1.2s ease-in-out infinite;
+}
+
+.typing-dots span:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.typing-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing-glow {
+  0%,
+  60%,
+  100% {
+    background: var(--text3);
+    box-shadow: none;
+  }
+  30% {
+    background: var(--accent);
+    box-shadow: 0 0 6px 1px var(--accent);
+  }
+}
+
+.who {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.7;
+  margin-bottom: 2px;
+  font-family: var(--font-display);
+}
+
+.msg.user .who {
+  text-align: right;
+}
+
+.body {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Tool-call log for a turn (desktop/lib/local/engine.js onDelta's `tool`
+   events) — a retrospective list of what the model did, shown above the
+   answer text it produced. */
+.tool-activity {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text2);
+  margin-bottom: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.meta {
+  font-size: 11px;
+  color: var(--text2);
+  margin-top: 6px;
+  font-family: var(--font-mono);
+}
+
+.msg.user .meta {
+  color: rgba(255, 255, 255, 0.75);
+  text-align: right;
+}
+
+/* --------------------------------------------------- discovery lane (D2.2)
+   The vertical thread stays one column of .msg rows; the lane drops a
+   horizontal track underneath it so the AI's *other* paths read left→right
+   beside the answer instead of being buried under it. */
+.chatflow {
+  align-self: stretch;
+  max-width: 100%;
+  margin: 2px 0 6px;
+  padding: 8px 10px 10px;
+  border: 1px solid var(--border);
+  border-left: 2px solid var(--teal);
+  border-radius: 10px;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 229, 192, 0.05),
+    rgba(107, 143, 212, 0.05)
+  );
+}
+
+.flow-rail {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.flow-rail-label {
+  font-family: var(--font-display);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--teal);
+}
+
+.flow-rail-hint {
+  font-size: 11px;
+  color: var(--text2);
+}
+
+/* Horizontal scroller: the lane's whole point. Snap stops keep a card
+   legible instead of leaving the track parked mid-card. */
+.flow-track {
+  position: relative; /* containing block for the between-card connectors */
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 10px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 6px;
+  scroll-snap-type: x proximity;
+  scrollbar-width: thin;
+}
+
+.flow-card {
+  flex: 0 0 clamp(230px, 42%, 340px);
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 9px 11px;
+  border: 1px solid var(--border2);
+  border-radius: 10px;
+  background: var(--surface2);
+  min-height: 92px;
+}
+
+/* Connector between adjacent cards — the visual "2nd path" arrow. */
+.flow-card + .flow-card::before {
+  content: '→';
+  position: absolute;
+  margin-left: -13px;
+  margin-top: 34px;
+  color: var(--border2);
+  font-size: 12px;
+}
+
+.flow-card.pending {
+  opacity: 0.72;
+  border-style: dashed;
+}
+
+.flow-card.done {
+  border-color: rgba(0, 229, 192, 0.45);
+}
+
+.flow-card.stopped {
+  opacity: 0.7;
+}
+
+.flow-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-display);
+}
+
+.flow-badge {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #04140f;
+  background: var(--teal);
+}
+
+.flow-card[data-path='discovery'] .flow-badge {
+  background: var(--purple);
+  color: #fff;
+}
+
+.flow-card[data-path='genre'] .flow-badge {
+  background: var(--amber);
+}
+
+.flow-title {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--text);
+}
+
+.flow-state {
+  flex: 0 0 auto;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text2);
+}
+
+.flow-card.done .flow-state {
+  color: var(--teal);
+}
+
+.flow-tools {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--text2);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.flow-body {
+  flex: 1;
+  font-family: var(--font-chat);
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.flow-meta {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--text2);
+}
+
+.flow-abort {
+  align-self: flex-start;
+  padding: 2px 8px;
+  font-size: 11px;
+}
+
+.flow-add {
+  flex: 0 0 auto;
+  align-self: center;
+  border-style: dashed;
+  scroll-snap-align: end;
+}
+
+/* Composer side rail: the lane toggle sits above Send so it is visible
+   without stealing composer width. */
+.composer-side {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+}
+
+.composer-side button[type='submit'] {
+  flex: 1;
+  min-height: 34px;
+}
+
+.flow-toggle {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 0;
+  font-size: 11px;
+  color: var(--text2);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.max-tokens-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.max-tokens-row select {
+  flex: 1;
+  min-width: 0;
+}
+
+#autonomous-toggle-wrap {
+  margin-top: 6px;
+}
+
+/* .flow-toggle sets display: flex, which — being an author-stylesheet rule —
+   outranks the UA stylesheet's `[hidden] { display: none }` regardless of
+   selector specificity. Without this override, hiding the toggle via the
+   `hidden` attribute (see loadModels() in app.js) has no visual effect. */
+#autonomous-toggle-wrap[hidden] {
+  display: none;
+}
+
+.autonomous-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--text2);
+}
+
+.autonomous-controls select,
+.autonomous-controls input {
+  font-size: 11px;
+}
+
+.autonomous-controls input[type='number'] {
+  width: 48px;
+}
+
+/* Same author-stylesheet-beats-UA-stylesheet gotcha as #autonomous-toggle-wrap
+   above: `display: flex` here needs an explicit [hidden] override too. */
+.autonomous-controls[hidden] {
+  display: none;
+}
+
+.flow-toggle input {
+  accent-color: var(--teal);
+  margin: 0;
+  cursor: pointer;
+}
+
+.flow-toggle:hover {
+  color: var(--teal);
+}
+
+/* ------------------------------------------------------------- composer */
+.composer {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  padding: 12px;
+  margin: 0 auto;
+  max-width: 100%;
+  width: calc(100% - 24px);
+  border: 1px solid var(--border2);
+  border-radius: 16px;
+  background: var(--surface2);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  margin-bottom: 12px;
+}
+
+.composer:focus-within {
+  border-color: var(--teal);
+  box-shadow: 0 0 0 1px rgba(0, 229, 192, 0.35), 0 6px 22px rgba(0, 229, 192, 0.08);
+}
+
+.composer textarea {
+  flex: 1;
+  resize: none;
+  background: transparent;
+  color: var(--text);
+  border: none;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font: inherit;
+  font-family: var(--font-chat);
+}
+
+.composer textarea:focus {
+  outline: none;
+}
+
+.composer button {
+  border: none;
+  border-radius: 8px;
+  background: var(--teal);
+  color: #04140f;
+  padding: 0 18px;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.composer button:hover:not(:disabled) {
+  box-shadow: 0 0 12px rgba(0, 229, 192, 0.35);
+}
+
+.composer button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* ------------------------------------------------------------- new UI bits */
+label {
+  display: block;
+  font-size: 12px;
+  color: var(--text2);
+  margin-top: 8px;
+}
+
+.ghost-btn {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface2);
+  color: var(--text);
+  padding: 4px 10px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.ghost-btn:hover {
+  border-color: var(--teal);
+  color: var(--teal);
+}
+
+.ghost-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.ghost-btn.danger:hover {
+  border-color: var(--red);
+  color: var(--red);
+}
+
+#model-input {
+  width: 100%;
+  margin-top: 6px;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px;
+  font: inherit;
+}
+
+#model-input:focus {
+  outline: none;
+  border-color: var(--teal);
+}
+
+.cancel-btn {
+  margin-top: 8px;
+  border: 1px solid var(--red);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--red);
+  padding: 2px 10px;
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.copy-btn {
+  margin-top: 8px;
+  border: 1px solid var(--teal);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--teal);
+  padding: 2px 10px;
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.copy-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* ------------------------------------------------------- settings pane */
+.setting-row {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.setting-name {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.setting-input {
+  width: 100%;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 5px 7px;
+  font: inherit;
+  font-size: 12px;
+}
+
+.setting-input:focus {
+  outline: none;
+  border-color: var(--teal);
+}
+
+.setting-status {
+  font-size: 11px;
+  color: var(--text2);
+}
+
+.setting-actions {
+  display: flex;
+  gap: 6px;
+}
+
+/* ------------------------------------------------------- sessions pane */
+.sessions-list {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  max-height: 180px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.sessions-list .empty {
+  font-size: 12px;
+  color: var(--text2);
+  border: 1px dashed var(--border);
+  border-radius: 6px;
+  padding: 6px 8px;
+}
+
+.session-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 8px;
+  cursor: pointer;
+}
+
+.session-row:hover {
+  border-color: var(--teal);
+}
+
+.session-title {
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.session-meta {
+  font-size: 11px;
+  color: var(--text2);
+}
+
+/* ---------------------------------------------------------- chat welcome */
+/* Shown when the transcript is empty; cloned from #welcome-template. */
+@keyframes shimmer {
+  to {
+    background-position: 200% center;
+  }
+}
+
+.chat-welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 18px;
+  text-align: center;
+  padding: 40px 24px;
+  color: var(--text3);
+}
+
+.chat-greeting-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  justify-content: center;
+}
+
+.chat-welcome .glyph {
+  font-size: 38px;
+  line-height: 1;
+  margin: 0;
+  background: linear-gradient(135deg, #b0d4ee, #5a7fd4, var(--teal));
+  background-size: 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 0 14px rgba(0, 229, 192, 0.3));
+  animation: shimmer 5s linear infinite;
+}
+
+.chat-welcome .title {
+  font-size: 30px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.02em;
+  margin: 0;
+  font-family: var(--font-display);
+}
+
+.chat-welcome .sub {
+  font-size: 12px;
+  color: var(--text3);
+  max-width: 420px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.chat-quick-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  max-width: 560px;
+  margin-top: 2px;
+}
+
+.chat-quick-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border2);
+  background: var(--surface);
+  color: var(--text2);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: var(--font-chat);
+  white-space: nowrap;
+}
+
+.chat-quick-pill:hover {
+  border-color: var(--teal);
+  color: var(--teal);
+  background: rgba(0, 229, 192, 0.06);
+}
+
+.chat-quick-pill .qp-ic {
+  font-size: 13px;
+  line-height: 1;
+}
+
+.chat-welcome .hints {
+  font-size: 10px;
+  color: var(--text3);
+  margin-top: 6px;
+  opacity: 0.55;
+  max-width: 460px;
+  line-height: 1.6;
+}