@kevin5251984/guild 0.2.12

package/src/public/chat.css

@@ -0,0 +1,3045 @@
+:root {
+  --enamel: #0B0E12;
+  --paper: #F3EFE6;
+  --ink: #0B0E12;
+  --steel: #A8B0BC;
+  --signal: #C9A227;
+  --bg: #0B0E12;
+  --panel: #10141A;
+  --lift: #161C24;
+  --bubble: #1A222C;
+  --you: #242C36;
+  --text: #E8E4DC;
+  --muted: #8B8F96;
+  --line: #1C222C;
+  --fill: #141A22;
+  --thread-max: 1600px;
+  --thread-gutter: 28px;
+  --you-max: min(56rem, 86%);
+  --focus: 0 0 0 2px var(--bg), 0 0 0 3px var(--steel);
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; }
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+.head-id:focus-visible,
+.nav-row:focus-visible {
+  outline: none;
+  box-shadow: var(--focus);
+}
+@media (hover: hover) {
+  .navlist a.nav-row:hover { background: var(--lift); }
+  .icon-btn:hover { background: var(--lift); }
+  .add-ch:hover { color: var(--text); background: var(--lift); }
+}
+body.grok {
+  display: grid;
+  grid-template-columns: var(--sidebar-w, 292px) 1fr;
+  height: 100%;
+  min-height: 100%;
+  color: var(--text);
+  background: var(--bg);
+  font-family: "SF Pro Text", "PingFang TC", "Segoe UI", system-ui, sans-serif;
+}
+
+.sidebar {
+  position: relative;
+  background: var(--panel);
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-width: 0;
+  overflow: hidden;
+}
+.sidebar-resizer {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 6;
+}
+.sidebar-resizer:hover,
+body.resizing-sidebar .sidebar-resizer {
+  background: rgba(255, 255, 255, 0.14);
+}
+body.resizing-sidebar {
+  cursor: col-resize;
+  user-select: none;
+}
+body.resizing-sidebar iframe { pointer-events: none; }
+.side-top {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.7rem 0.75rem 0.55rem;
+}
+.icon-btn {
+  margin: 0;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--fill);
+  color: var(--text);
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  flex: none;
+}
+.icon-btn:hover { background: var(--lift); }
+.search {
+  flex: 1;
+  margin: 0;
+  padding: 0.55rem 0.9rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--fill);
+  color: var(--text);
+  font: inherit;
+  font-size: 16px;
+  width: auto;
+}
+.search::placeholder { color: var(--muted); }
+.section-h {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.65rem 0.85rem 0.25rem 1rem;
+  color: var(--muted);
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+}
+.add-ch {
+  margin: 0;
+  width: 22px;
+  height: 22px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--steel);
+  font-size: 1.15rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.add-ch:hover { color: var(--text); background: var(--lift); }
+.navlist {
+  list-style: none;
+  margin: 0;
+  padding: 0.15rem 0;
+  overflow: auto;
+}
+.navlist a.nav-row {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.7rem 0.9rem 0.7rem 0.85rem;
+  margin: 0 0.4rem;
+  border-radius: 10px;
+  color: var(--text);
+  text-decoration: none;
+}
+.nav-av {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  flex: none;
+}
+.nav-av .avatar { width: 48px; height: 48px; }
+.nav-body { min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; }
+.nav-top {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+  overflow: hidden;
+}
+.nav-top strong {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-wrap: nowrap;
+  font-size: 0.95rem;
+  font-weight: 650;
+  display: block;
+}
+.nav-chip {
+  flex: none;
+  max-width: 42%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.68rem;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--muted);
+  background: var(--fill);
+  border-radius: 6px;
+  padding: 0.08rem 0.4rem;
+}
+.nav-top time {
+  margin-left: auto;
+  flex: none;
+  color: var(--muted);
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+.nav-row.unread .nav-top strong { font-weight: 700; }
+.busy-flash {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--signal);
+  box-shadow: 0 0 0 2px var(--bg);
+  animation: busy-pulse 0.9s ease-in-out infinite;
+}
+.unread-dot {
+  margin-left: auto;
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--signal);
+}
+@keyframes busy-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.25; transform: scale(0.82); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .busy-flash { animation: none; }
+}
+.navlist a.nav-row:hover { background: var(--lift); }
+.navlist a.nav-row.on { background: var(--bubble); }
+.navlist em {
+  display: block;
+  font-style: normal;
+  color: var(--muted);
+  font-size: 0.8rem;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-wrap: nowrap;
+}
+.avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-wrap: nowrap;
+  text-overflow: clip;
+  flex: none;
+  padding: 0;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--steel) 38%, transparent);
+}
+.avatar img,
+.queue-av img,
+.traj-av img,
+.bot-card-av img,
+.mention-glyph img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 18%;
+  display: block;
+  pointer-events: none;
+}
+.avatar.has-photo,
+.queue-av.has-photo,
+.traj-av.has-photo,
+.bot-card-av.has-photo,
+.mention-glyph.has-photo {
+  color: transparent;
+  font-size: 0;
+}
+.nav-av .avatar { font-size: 15px; letter-spacing: 0; }
+.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
+a.avatar { text-decoration: none; color: #fff; }
+.pane-head a.avatar[href] { cursor: pointer; }
+.pane-head a.avatar[href]:hover { filter: brightness(1.18); }
+.head-id {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  min-width: 0;
+  max-width: min(42vw, 22rem);
+  overflow: hidden;
+  text-align: left;
+}
+.head-id:hover .avatar { filter: brightness(1.18); }
+.head-id:hover h1 { text-decoration: underline; }
+.hash-av {
+  background: var(--fill);
+  color: var(--steel);
+  font-size: 1.05rem;
+  cursor: pointer;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--steel) 55%, transparent),
+    inset 0 0 0 3px var(--enamel);
+}
+.hash-av:hover { filter: brightness(1.18); }
+.bot-card {
+  position: fixed;
+  z-index: 50;
+  width: 280px;
+  padding: 16px 16px 14px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: var(--panel);
+  box-shadow: 0 18px 50px #000c;
+}
+.bot-card[hidden] { display: none; }
+.bot-card-av {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 1.35rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.bot-card-name {
+  font-size: 1.15rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+.bot-card-handle {
+  color: var(--muted);
+  font-size: 0.82rem;
+  margin: 0.15rem 0 0.45rem;
+}
+.bot-card-bio {
+  margin: 0 0 0.9rem;
+  color: #cfcfcf;
+  font-size: 0.88rem;
+  line-height: 1.4;
+}
+.bot-card-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.4rem;
+}
+.bot-card-actions .bot-card-btn:last-child {
+  grid-column: 1 / -1;
+}
+.bot-card-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  margin: 0;
+  padding: 0.45rem 0.5rem;
+  border: 0;
+  border-radius: 10px;
+  background: var(--lift);
+  color: var(--text);
+  text-decoration: none;
+  font: inherit;
+  font-size: 0.82rem;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.bot-card-btn:hover { background: var(--bubble); text-decoration: none; }
+button.avatar {
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+.create-row {
+  display: none;
+  gap: 0.35rem;
+  padding: 0 0.75rem 0.5rem;
+}
+.create-row.open { display: flex; }
+.create-row input {
+  flex: 1;
+  padding: 0.45rem 0.7rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--fill);
+  color: var(--text);
+  font: inherit;
+}
+.create-row button {
+  margin: 0;
+  padding: 0.45rem 0.75rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--paper);
+  color: var(--ink);
+  cursor: pointer;
+}
+.side-foot {
+  margin-top: auto;
+  padding: 0.7rem 0.85rem 0.9rem;
+  display: flex;
+  gap: 0.7rem;
+  flex-wrap: wrap;
+  align-items: baseline;
+  border-top: 1px solid var(--line);
+  font-family: "PingFang TC", "Noto Sans TC", "SF Pro Text", sans-serif;
+  font-size: 0.82rem;
+  font-weight: 400;
+  font-synthesis: none;
+}
+.side-foot a,
+.side-foot a:link,
+.side-foot a:visited {
+  color: var(--muted);
+  text-decoration: none;
+  font: inherit;
+}
+.side-foot a:hover { color: var(--text); }
+
+/* Quest board: wood only on the chat rail. Pane stays enamel. */
+body.grok .sidebar {
+  --board: #16100B;
+  --board-lit: #5A341C;
+  --board-mid: #3E2416;
+  --board-slot: #24150E;
+  --board-edge: #6B4228;
+  --notice: #EDE6D6;
+  --notice-ink: #1A1612;
+  --notice-mute: #6A5E50;
+  --plaque: var(--notice);
+  --plaque-on: #F7F1E4;
+  --pin: #C9A227;
+  color: #F0E2C8;
+  height: 100%;
+  max-height: 100vh;
+  min-height: 0;
+  overflow: hidden;
+  background-color: #16100B;
+  background-image:
+    linear-gradient(
+      180deg,
+      rgba(232, 196, 140, 0.14) 0%,
+      transparent 22%,
+      rgba(12, 8, 5, 0.38) 78%,
+      rgba(201, 162, 39, 0.06)
+    ),
+    repeating-linear-gradient(
+      90deg,
+      transparent 0 86px,
+      rgba(12, 8, 5, 0.62) 86px 89px,
+      rgba(232, 196, 140, 0.12) 90px 91px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      #4A2C18 0 3px,
+      #5C361C 3px 8px,
+      #3A2214 8px 11px,
+      #6B4228 11px 14px,
+      #452818 14px 19px,
+      #2E1A10 19px 22px
+    );
+  border-right: 10px solid #16100B;
+  box-shadow:
+    inset 8px 0 18px #0006,
+    inset -10px 0 16px #0007,
+    inset 0 18px 28px #0005;
+  padding: 6px 3px 0;
+}
+body.grok .sidebar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  background:
+    radial-gradient(circle at 13px 13px, #F4E3A4 0 2px, #C9A227 3.2px, #6E5814 4.6px, #3A2A10 5.6px, transparent 6.4px),
+    radial-gradient(circle at calc(100% - 14px) 13px, #F4E3A4 0 2px, #C9A227 3.2px, #6E5814 4.6px, #3A2A10 5.6px, transparent 6.4px),
+    radial-gradient(circle at 13px calc(100% - 13px), #F4E3A4 0 2px, #C9A227 3.2px, #6E5814 4.6px, #3A2A10 5.6px, transparent 6.4px),
+    radial-gradient(circle at calc(100% - 14px) calc(100% - 13px), #F4E3A4 0 2px, #C9A227 3.2px, #6E5814 4.6px, #3A2A10 5.6px, transparent 6.4px),
+    linear-gradient(90deg, rgba(12, 8, 5, 0.35), transparent 14px, transparent calc(100% - 14px), rgba(12, 8, 5, 0.4));
+  box-shadow: inset 0 0 0 3px #16100B;
+}
+body.grok .sidebar > *:not(.sidebar-resizer) { position: relative; z-index: 3; }
+body.grok .sidebar-resizer {
+  position: absolute;
+  z-index: 6;
+  background: #16100B;
+}
+body.grok .sidebar-resizer:hover,
+body.resizing-sidebar .sidebar-resizer {
+  background: color-mix(in srgb, var(--signal) 55%, #16100B);
+}
+body.grok .sidebar .search {
+  background: var(--board-slot);
+  color: #F0E2C8;
+  border: 1px solid color-mix(in srgb, var(--board-edge) 70%, #16100B);
+  border-radius: 2px;
+  box-shadow:
+    inset 0 2px 6px #0009,
+    0 1px 0 color-mix(in srgb, var(--pin) 22%, transparent);
+}
+body.grok .sidebar .search::placeholder { color: #B08960; }
+body.grok .sidebar .section-h {
+  color: #E8C48A;
+  letter-spacing: 0.2em;
+  font-weight: 700;
+  text-shadow: 0 1px 0 #0008;
+}
+body.grok .sidebar .add-ch {
+  color: var(--pin);
+  border-radius: 2px;
+  border: 1px solid color-mix(in srgb, var(--pin) 35%, transparent);
+  background: color-mix(in srgb, #16100B 70%, #3A2214);
+}
+body.grok .sidebar .add-ch:hover {
+  color: #F4E3A4;
+  background: #2A1810;
+  border-color: var(--pin);
+}
+body.grok .sidebar .create-row input {
+  background: var(--notice);
+  color: var(--notice-ink);
+  border-radius: 2px;
+  border: 0;
+  box-shadow: 0 2px 0 #0004;
+}
+body.grok .sidebar .create-row button {
+  background: var(--notice);
+  color: var(--notice-ink);
+  border-radius: 2px;
+  box-shadow: 0 2px 0 #0004;
+}
+body.grok #channels.navlist {
+  display: flex;
+  flex-direction: column;
+  gap: 0.72rem;
+  padding: 0.55rem 0.95rem 0.9rem;
+  flex: none;
+  overflow: visible;
+}
+body.grok #channels a.nav-row {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.38rem;
+  margin: 0;
+  min-width: 0;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 16%),
+    repeating-linear-gradient(
+      0deg,
+      transparent 0 18px,
+      rgba(26, 22, 18, 0.055) 18px 19px
+    ),
+    var(--notice);
+  color: var(--notice-ink);
+  border: 0;
+  border-radius: 1px;
+  padding: 1.35rem 1rem 0.95rem;
+  min-height: 5.8rem;
+  box-shadow:
+    0 1px 0 #fff6,
+    1px 2px 0 #0002,
+    0 9px 16px #0006,
+    inset 0 0 0 1px rgba(90, 70, 40, 0.2);
+}
+body.grok #channels a.nav-row:nth-child(3n) { transform: rotate(-1.1deg); }
+body.grok #channels a.nav-row:nth-child(3n + 1) { transform: rotate(0.85deg); }
+body.grok #channels a.nav-row:nth-child(3n + 2) { transform: rotate(-0.35deg); }
+body.grok #channels a.nav-row::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 18px;
+  height: 18px;
+  background:
+    linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--board-mid) 88%, #16100B) 50.5%);
+  box-shadow: -1px 1px 0 #0002;
+}
+body.grok #channels a.nav-row::after {
+  content: "";
+  position: absolute;
+  top: 7px;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  margin-left: -6px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 32% 28%, #F8E7A6 0 22%, #C9A227 52%, #6E5814 78%, #3A2A10 100%);
+  box-shadow:
+    0 1px 2px #000a,
+    0 0 0 1px #5A4318,
+    inset 0 -1px 1px #0005;
+}
+body.grok #channels a.nav-row:hover,
+body.grok #channels a.nav-row.on {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 18%),
+    repeating-linear-gradient(
+      0deg,
+      transparent 0 18px,
+      rgba(26, 22, 18, 0.05) 18px 19px
+    ),
+    var(--plaque-on);
+  transform: rotate(0deg) translateY(-1px);
+  border-color: transparent;
+  box-shadow:
+    0 1px 0 #fff8,
+    0 10px 18px #0007,
+    inset 0 0 0 1px color-mix(in srgb, var(--pin) 40%, transparent);
+}
+body.grok #channels .nav-top strong,
+body.grok #channels .nav-top time,
+body.grok #channels em {
+  color: inherit;
+}
+body.grok #channels .nav-top strong {
+  font-size: 1.08rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  padding-right: 0.4rem;
+}
+body.grok #channels .nav-top time,
+body.grok #channels em { color: var(--notice-mute); }
+body.grok #channels em {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-size: 0.86rem;
+  line-height: 1.4;
+}
+body.grok #channels .notice-party {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.08rem;
+  min-width: 0;
+  overflow: visible;
+}
+body.grok #channels .notice-party .members-stack .avatar {
+  width: 22px;
+  height: 22px;
+  font-size: 11px;
+  letter-spacing: 0;
+  margin-left: 0;
+  border: 2px solid var(--notice);
+  box-shadow: none;
+}
+body.grok #channels .notice-party .members-stack .avatar + .avatar {
+  margin-left: -7px;
+}
+body.grok #channels a.nav-row.on .notice-party .members-stack .avatar,
+body.grok #channels a.nav-row:hover .notice-party .members-stack .avatar {
+  border-color: var(--plaque-on);
+}
+body.grok #channels .notice-party .members-count {
+  color: var(--notice-mute);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+}
+body.grok #channels .busy-flash {
+  top: 10px;
+  right: 10px;
+  left: auto;
+  bottom: auto;
+  box-shadow: 0 0 0 2px var(--notice);
+}
+@media (prefers-reduced-motion: reduce) {
+  body.grok #channels a.nav-row:nth-child(3n),
+  body.grok #channels a.nav-row:nth-child(3n + 1),
+  body.grok #channels a.nav-row:nth-child(3n + 2) { transform: none; }
+}
+body.grok #dms.navlist {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+  height: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.2rem 0.45rem 3.2rem;
+  scrollbar-width: thin;
+  scrollbar-color: #8A623C transparent;
+}
+body.grok #dms a.nav-row {
+  color: #F0E2C8;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  background: color-mix(in srgb, #16100B 35%, transparent);
+}
+body.grok #dms a.nav-row:hover {
+  background: color-mix(in srgb, #EDE6D6 12%, transparent);
+  border-color: color-mix(in srgb, var(--board-edge) 45%, transparent);
+}
+body.grok #dms a.nav-row.on {
+  background: color-mix(in srgb, #EDE6D6 18%, transparent);
+  border-color: color-mix(in srgb, var(--pin) 40%, transparent);
+}
+body.grok #dms .nav-chip {
+  color: #E8C48A;
+  background: #16100B;
+}
+body.grok #dms .busy-flash { box-shadow: 0 0 0 2px #16100B; }
+body.grok .sidebar .side-foot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+  margin-top: 0;
+  flex: none;
+  border-top: 1px solid var(--board-edge);
+  background:
+    linear-gradient(180deg, rgba(232, 196, 140, 0.08), transparent 40%),
+    #16100B;
+}
+body.grok .sidebar .side-foot a,
+body.grok .sidebar .side-foot a:link,
+body.grok .sidebar .side-foot a:visited { color: #E8C48A; }
+body.grok .sidebar .side-foot a:hover { color: #F7F1E4; }
+
+
+.pane {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-width: 0;
+  min-height: 100vh;
+  background: var(--bg);
+}
+.pane-head {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.65rem 1.1rem;
+  border-bottom: 1px solid var(--line);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--steel) 7%, transparent), transparent 70%),
+    var(--bg);
+}
+.pane-head h1 {
+  margin: 0;
+  min-width: 0;
+  font-size: 0.98rem;
+  font-weight: 650;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-wrap: nowrap;
+}
+.pane-head .meta {
+  color: var(--muted);
+  font-size: 0.8rem;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.head-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-left: auto;
+  flex: none;
+}
+.traj-btn {
+  margin: 0;
+  padding: 0.32rem 0.7rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--fill);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+.traj-btn:hover { background: var(--lift); color: var(--text); }
+.bot-card-btn.danger { color: #fca5a5; }
+.members-wrap {
+  position: relative;
+  margin-left: 0;
+  flex: none;
+}
+.members-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+  padding: 0.15rem 0.55rem 0.15rem 0.4rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--fill);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.82rem;
+  cursor: pointer;
+  overflow: visible;
+}
+.members-btn:hover { background: var(--lift); }
+.members-stack { display: flex; align-items: center; }
+.members-stack .avatar {
+  width: 26px;
+  height: 26px;
+  font-size: 12px;
+  letter-spacing: 0;
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-left: 0;
+  border: 2px solid var(--bg);
+}
+.members-stack .avatar + .avatar { margin-left: -8px; }
+.members-count { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
+.members-pop {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  width: min(300px, 86vw);
+  max-height: 360px;
+  overflow: auto;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  box-shadow: 0 16px 40px #000c;
+  z-index: 40;
+  padding: 0.35rem 0 0.5rem;
+}
+.members-pop[hidden] { display: none; }
+.members-sec {
+  color: var(--muted);
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  padding: 0.45rem 0.85rem 0.2rem;
+}
+.members-row {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  width: 100%;
+  padding: 0.4rem 0.75rem;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+}
+.members-row .who { flex: 1; min-width: 0; }
+.members-row strong {
+  display: block;
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+.members-row em {
+  display: block;
+  font-style: normal;
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+.members-act {
+  flex: none;
+  margin: 0;
+  padding: 0.2rem 0.55rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--lift);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.72rem;
+  cursor: pointer;
+}
+.members-act:hover { background: var(--bubble); }
+.members-act.out { color: #e07070; }
+.members-empty {
+  color: var(--muted);
+  font-size: 0.8rem;
+  padding: 0.35rem 0.85rem 0.6rem;
+}
+.invite-btn {
+  margin: 0;
+  padding: 0.3rem 0.7rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--fill);
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.82rem;
+  text-decoration: none;
+}
+a.invite-btn:hover { text-decoration: none; }
+.invite-btn:hover { background: var(--lift); }
+
+.thread-wrap {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+.thread {
+  position: relative;
+  height: 100%;
+  overflow: auto;
+  padding: 20px max(var(--thread-gutter), calc((100% - var(--thread-max)) / 2)) 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.prompt-rail {
+  position: absolute;
+  top: 8px;
+  left: 4px;
+  bottom: 8px;
+  z-index: 5;
+  width: 16px;
+  pointer-events: none;
+}
+.prompt-rail[hidden] { display: none; }
+.prompt-rail::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 7px;
+  bottom: 0;
+  width: 1px;
+  background: color-mix(in srgb, var(--steel) 22%, transparent);
+}
+.prompt-tick {
+  position: absolute;
+  left: 0;
+  width: 16px;
+  height: 12px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  pointer-events: auto;
+  transform: translateY(-50%);
+}
+.prompt-tick::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  width: 8px;
+  height: 2px;
+  border-radius: 1px;
+  background: color-mix(in srgb, var(--steel) 58%, transparent);
+  transform: translateY(-50%);
+}
+.prompt-tick.on::after,
+.prompt-tick:hover::after {
+  width: 12px;
+  background: var(--signal);
+}
+.prompt-tick[data-preview]:hover::before {
+  content: attr(data-preview);
+  position: absolute;
+  left: 18px;
+  top: 50%;
+  z-index: 8;
+  max-width: min(52vw, 280px);
+  padding: 6px 8px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: 0 8px 28px #0008;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.msg.you.is-jump .bubble {
+  box-shadow: inset 0 0 0 1px var(--steel);
+}
+.jump-bottom {
+  position: absolute;
+  left: 50%;
+  bottom: 14px;
+  z-index: 6;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--panel);
+  color: var(--steel);
+  box-shadow: 0 8px 28px #0008;
+  cursor: pointer;
+  transform: translateX(-50%);
+}
+.jump-bottom:hover {
+  color: var(--text);
+  background: var(--lift);
+}
+.jump-bottom[hidden] { display: none; }
+.msg {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--thread-max);
+  align-self: center;
+}
+.msg.bot {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  column-gap: 12px;
+  align-items: start;
+}
+.msg.bot > .avatar {
+  width: 36px;
+  height: 36px;
+  margin-top: 2px;
+  font-size: 13px;
+}
+.msg-main { min-width: 0; }
+.msg-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 2px;
+  line-height: 22px;
+}
+.msg-head .name {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.msg-head .name:hover { text-decoration: underline; }
+.msg-head .handle {
+  color: var(--muted);
+  font-size: 12px;
+}
+.msg-time {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.msg.you .msg-time {
+  margin: 0 6px 4px;
+}
+.day-rule {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  max-width: var(--thread-max);
+  align-self: center;
+  margin: 4px 0 2px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.day-rule::before,
+.day-rule::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--line);
+}
+.day-rule span {
+  flex: none;
+  padding: 3px 10px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--panel);
+}
+.msg.you { align-items: flex-end; }
+.msg.you .bubble {
+  max-width: var(--you-max);
+  margin: 0;
+  padding: 10px 16px;
+  border-radius: 22px;
+  background: var(--you);
+  color: var(--text);
+  line-height: 24px;
+  white-space: pre-wrap;
+  font-size: 16px;
+}
+.steer-tag {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0 6px 4px;
+  color: var(--steel);
+  font-size: 12px;
+  line-height: 16px;
+}
+.steer-tag .queue-to { margin: 0; }
+.msg.you.steer .bubble {
+  background: var(--lift);
+  box-shadow: inset 0 0 0 1px var(--line);
+}
+.msg.you.queued .bubble {
+  background: var(--fill);
+  box-shadow: inset 0 0 0 1px var(--line);
+  opacity: 0.88;
+}
+.steer-tag.waiting { color: var(--signal); }
+.msg.bot .bubble {
+  width: fit-content;
+  max-width: 100%;
+  margin: 6px 0 0;
+  padding: 14px 18px;
+  border-radius: 22px;
+  background: var(--bubble);
+  color: var(--text);
+}
+.msg.bot .bubble .assistant-text { margin-top: 0; }
+.msg.bot .bubble .assistant-text:last-child p:last-child { margin-bottom: 0; }
+.msg.bot .bubble .md-fence:last-child,
+.msg.bot .bubble .md-table-wrap:last-child { margin-bottom: 0; }
+.reply-quote {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: var(--you-max);
+  margin: 0 0 4px;
+  padding: 0 4px;
+  border: 0;
+  background: transparent;
+  color: #8b8b8b;
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: left;
+  cursor: pointer;
+  min-width: 0;
+}
+.reply-quote span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.reply-quote:hover { color: #cfcfcf; }
+.msg.flash {
+  animation: msg-flash 1.1s ease;
+}
+@keyframes msg-flash {
+  from { background: #222; }
+  to { background: transparent; }
+}
+.assistant-doc {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.assistant-text {
+  margin: 2px 0 0;
+  padding: 0;
+  color: #e6e6e6;
+  font-size: 15.5px;
+  line-height: 1.9;
+}
+.assistant-text.md { white-space: normal; overflow-wrap: break-word; }
+.assistant-text p { margin: 0 0 1.15rem; }
+.assistant-text p:last-child { margin-bottom: 0; }
+.assistant-text h1,
+.assistant-text h2,
+.assistant-text h3 {
+  margin: 1.35rem 0 0.5rem;
+  color: #f4f4f4;
+  font-weight: 650;
+  line-height: 1.35;
+  letter-spacing: -0.015em;
+}
+.assistant-text h1:first-child,
+.assistant-text h2:first-child,
+.assistant-text h3:first-child { margin-top: 0.1rem; }
+.assistant-text h1 { font-size: 1.22rem; }
+.assistant-text h2 { font-size: 1.08rem; }
+.assistant-text h3 { font-size: 1rem; }
+.assistant-text ul,
+.assistant-text ol {
+  margin: 0.15rem 0 1.05rem;
+  padding-left: 1.45rem;
+}
+.assistant-text li {
+  margin: 0.55rem 0;
+  padding-left: 0.2rem;
+}
+.assistant-text li::marker { color: #8a8a8a; }
+.assistant-text li > p { margin: 0; }
+.assistant-text strong { color: var(--paper); font-weight: 650; }
+.assistant-text blockquote {
+  margin: 0.7rem 0 1rem;
+  padding: 0.1rem 0 0.1rem 0.9rem;
+  border-left: 2px solid #5c5c5c;
+  color: #c8c8c8;
+}
+.assistant-text a { color: var(--steel); text-underline-offset: 2px; }
+.assistant-text code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.86em;
+  font-weight: 500;
+  padding: 0.12em 0.4em;
+  border-radius: 6px;
+  background: #242C36;
+  color: var(--text);
+  border: 1px solid #454545;
+  line-height: inherit;
+  white-space: break-spaces;
+  word-break: break-word;
+}
+.assistant-text code.md-file {
+  color: var(--steel);
+  background: color-mix(in srgb, var(--steel) 12%, transparent);
+  border-color: color-mix(in srgb, var(--steel) 16%, transparent);
+}
+.assistant-text .md-fence {
+  margin: 0.25rem 0 0.75rem;
+  border-radius: 12px;
+  background: #1a1a1a;
+}
+.assistant-text .md-fence-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 32px;
+  padding: 4px 8px 0 12px;
+}
+.assistant-text .md-fence-lang {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: #8b8b8b;
+  font-size: 12px;
+  line-height: 1;
+}
+.assistant-text .md-fence-ico { flex: none; }
+.assistant-text .md-fence-acts {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.assistant-text .md-fence-btn {
+  position: relative;
+  margin: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #c8c8c8;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.assistant-text .md-fence-btn:hover { background: #2a2a2a; color: #fff; }
+.assistant-text .md-fence-btn[data-fence-input]:hover::after,
+.assistant-text .md-fence-btn[data-fence-copy]:hover::after,
+.assistant-text .md-fence-btn[data-html-expand]:hover::after {
+  content: attr(title);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 2;
+  padding: 4px 8px;
+  border-radius: 8px;
+  background: #2f2f2f;
+  color: #eee;
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+}
+.assistant-text .md-fence-btn[data-fence-input]:hover::before,
+.assistant-text .md-fence-btn[data-fence-copy]:hover::before,
+.assistant-text .md-fence-btn[data-html-expand]:hover::before {
+  content: "";
+  position: absolute;
+  bottom: calc(100% - 4px);
+  right: 8px;
+  z-index: 2;
+  border: 5px solid transparent;
+  border-top-color: #2f2f2f;
+  pointer-events: none;
+}
+.assistant-text .md-fence-btn.copied { color: #9adf9a; }
+.assistant-text .md-pre {
+  margin: 0;
+  padding: 6px 14px 14px;
+  overflow: auto;
+  border-radius: 0 0 12px 12px;
+  background: transparent;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.assistant-text .md-pre code {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  white-space: inherit;
+  word-break: normal;
+}
+.assistant-text .md-fence-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  margin-right: 4px;
+}
+.assistant-text .md-fence-tab {
+  margin: 0;
+  padding: 3px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #8b8b8b;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.assistant-text .md-fence-tab.on,
+.assistant-text .md-fence-tab:hover { background: #2a2a2a; color: #eee; }
+.assistant-text .md-html-frame {
+  display: block;
+  width: 100%;
+  min-height: 240px;
+  height: 360px;
+  border: 0;
+  background: #fff;
+  border-radius: 0 0 12px 12px;
+}
+.assistant-text .md-html-preview[data-view="code"] .md-html-frame { display: none; }
+.assistant-text .md-html-preview[data-view="preview"] .md-pre { display: none; }
+.html-zoom {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  padding: 24px 28px 28px;
+  background: rgba(0, 0, 0, 0.72);
+}
+.html-zoom[hidden] { display: none !important; }
+.html-zoom-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 auto 12px;
+  width: min(1100px, 100%);
+  color: #eee;
+}
+.html-zoom-close {
+  margin: 0;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: 50%;
+  background: #2a2a2a;
+  color: #eee;
+  font-size: 1.35rem;
+  cursor: pointer;
+}
+.html-zoom-close:hover { background: #3a3a3a; }
+.html-zoom-frame {
+  width: min(1100px, 100%);
+  height: 100%;
+  margin: 0 auto;
+  border: 0;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 24px 60px #000a;
+}
+.assistant-text .md-table-wrap {
+  margin: 0.35rem 0 0.85rem;
+  overflow-x: auto;
+  border: 1px solid #3a3a3a;
+  border-radius: 10px;
+  background: #242424;
+}
+.assistant-text .md-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  line-height: 1.7;
+  background: #242424;
+}
+.assistant-text .md-table th,
+.assistant-text .md-table td {
+  padding: 11px 14px;
+  border-bottom: 1px solid #3a3a3a;
+  text-align: left;
+  vertical-align: top;
+}
+.assistant-text .md-table th {
+  background: #1c1c1c;
+  color: #f2f2f2;
+  font-weight: 600;
+  white-space: nowrap;
+  border-bottom-color: #444;
+}
+.assistant-text .md-table tbody tr:nth-child(odd) td { background: #242424; }
+.assistant-text .md-table tbody tr:nth-child(even) td { background: #303030; }
+.assistant-text .md-table tbody tr:last-child td { border-bottom: 0; }
+.assistant-text .md-table .md-al-left { text-align: left; }
+.assistant-text .md-table .md-al-center { text-align: center; }
+.assistant-text .md-table .md-al-right { text-align: right; }
+.dsh-row,
+.dsh-trace {
+  width: 100%;
+}
+.dsh-row:not([open]) > *:not(summary),
+.dsh-trace:not([open]) > *:not(summary) {
+  display: none !important;
+}
+.dsh-row > summary,
+.dsh-trace > summary {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.dsh-row > summary::-webkit-details-marker,
+.dsh-trace > summary::-webkit-details-marker { display: none; }
+.dsh-trace { margin: 0 0 4px; }
+.dsh-trace-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 2px 0 6px 8px;
+}
+.dsh-row[data-state="running"] > summary::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  left: -300px;
+  width: 300px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, #000 60%, transparent) 55%,
+    transparent 100%
+  );
+  animation: dsh-row-sweep 2.6s ease-out infinite;
+  pointer-events: none;
+}
+@keyframes dsh-row-sweep {
+  0% { left: -300px; }
+  90%, 100% { left: 100%; }
+}
+.row-icon {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  color: #8b8b8b;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.row-title {
+  flex: none;
+  font-size: 14px;
+  line-height: 24px;
+  color: #cfcfcf;
+  font-weight: 400;
+}
+.row-sep {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  margin: 0 8px;
+  border-radius: 1px;
+  background: #6f6f6f;
+}
+.row-summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 24px;
+  color: #8b8b8b;
+}
+.row-summary.err { color: #e07070; }
+.row-body {
+  margin: 4px 0 4px 22px;
+  color: #8b8b8b;
+  font-size: 14px;
+  line-height: 24px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.row-card {
+  margin: 4px 0 4px 4px;
+  max-height: 260px;
+  overflow: auto;
+  border: 1px solid #2a2a2a;
+  border-radius: 12px;
+  background: #121212;
+  padding: 10px 12px;
+  color: #cfcfcf;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: pre-wrap;
+}
+.row-card.terminal { background: #0b0b0d; }
+.term-cmd {
+  color: var(--steel);
+  margin: 0 0 6px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.term-exit {
+  display: inline-flex;
+  margin: 0 0 8px;
+  padding: 0.05rem 0.45rem;
+  border-radius: 999px;
+  background: #1c3324;
+  color: #7dcc8a;
+  font-size: 11px;
+}
+.term-exit.bad { background: #3a1518; color: #e07070; }
+.term-out {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font: inherit;
+  color: #cfcfcf;
+}
+.row-card.read { padding: 6px 8px; }
+.read-line {
+  display: grid;
+  grid-template-columns: 2.6rem minmax(0, 1fr);
+  gap: 0.55rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.read-line .ln {
+  color: #5a5a5a;
+  text-align: right;
+  user-select: none;
+}
+.read-line .lx { min-width: 0; }
+.row-card.diff { border-color: #2a3a2a; }
+.row-card.search { color: #c8c8c8; }
+.msg.bot.live .turn-live {
+  align-self: stretch;
+  max-width: 100%;
+  margin-top: 4px;
+}
+.turn-live {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 100%;
+}
+.turn-status {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  background: linear-gradient(
+    90deg,
+    #E8E4DC 0%,
+    #E8E4DC 40%,
+    #8B8F96 50%,
+    #E8E4DC 60%,
+    #E8E4DC 100%
+  );
+  background-position: 100% 0;
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: dsh-turn-shimmer 1.8s ease-in-out infinite;
+}
+.live-steps {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.live-step {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px;
+  min-height: 20px;
+  font-size: 13px;
+  line-height: 20px;
+  color: #8b8b8b;
+}
+.live-name {
+  color: #cfcfcf;
+  font-weight: 500;
+}
+.live-detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.live-step.running .live-name {
+  color: var(--text);
+}
+.live-step.steer .live-name {
+  color: var(--steel);
+}
+.turn-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+.turn-actions button {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #3a3a3a;
+  border-radius: 8px;
+  background: #1c1c1c;
+  color: #ddd;
+  font: inherit;
+  font-size: 12px;
+  line-height: 28px;
+  cursor: pointer;
+}
+.turn-actions button:hover {
+  border-color: #555;
+  color: #fff;
+}
+.turn-actions .turn-stop {
+  color: #e8b4b4;
+}
+.turn-actions .turn-steer {
+  color: #b4c8e8;
+}
+body.grok .turn-actions button {
+  border-color: #3a3228;
+  background: #1c1814;
+  color: #ddd4c8;
+}
+body.grok .turn-actions button:hover {
+  border-color: #6a5a48;
+  color: #f2eadf;
+}
+body.grok .turn-actions .turn-stop { color: #d4a090; }
+body.grok .turn-actions .turn-steer { color: #c4b090; }
+.turn-status .clock {
+  margin-left: 8px;
+  font-size: 13px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  color: #6f6f6f;
+  -webkit-text-fill-color: #6f6f6f;
+}
+@keyframes dsh-turn-shimmer {
+  to { background-position: 0 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dsh-row[data-state="running"] > summary::after,
+  .turn-status { animation: none; }
+  .turn-status { color: var(--text); background: none; }
+}
+.msg-actions {
+  display: flex;
+  gap: 0.15rem;
+  margin: 6px 0 0;
+  opacity: 0;
+}
+.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg-actions.on { opacity: 1; }
+.msg.bot .msg-actions { opacity: 1; }
+.msg.you .msg-actions { justify-content: flex-end; }
+.msg-actions button {
+  margin: 0;
+  padding: 0.15rem 0.4rem;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.72rem;
+  cursor: pointer;
+}
+.msg-actions button:hover { background: #1c1c1c; color: var(--text); }
+.msg-actions button.danger:hover { color: #f0a8a8; }
+.toast {
+  position: fixed;
+  left: calc(var(--sidebar-w, 292px) + (100vw - var(--sidebar-w, 292px)) / 2);
+  bottom: 1.35rem;
+  z-index: 80;
+  transform: translateX(-50%) translateY(6px);
+  padding: 0.5rem 0.95rem;
+  border-radius: 999px;
+  background: var(--paper);
+  color: var(--ink);
+  font-size: 0.86rem;
+  font-weight: 560;
+  box-shadow: 0 8px 28px #0008;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
+}
+.toast.on {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .toast { transition: none; transform: translateX(-50%); }
+}
+.stats-ico {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 22px;
+  margin: 8px 0 0;
+  padding: 0;
+  border: 1px solid #2a2a2a;
+  border-radius: 6px;
+  background: #141414;
+  color: #8b8b8b;
+  cursor: pointer;
+  flex: none;
+}
+.stats-ico:hover,
+.stats-ico.on {
+  color: var(--text);
+  border-color: #3a3a3a;
+  background: #1c1c1c;
+}
+.stats-panel {
+  margin: 0.4rem 0 0.15rem;
+  padding: 0.7rem 0.85rem 0.8rem;
+  border-radius: 14px;
+  background: #161616;
+  border: 1px solid #242424;
+  max-width: 100%;
+}
+.stats-kicker {
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #8b8b8b;
+  margin: 0 0 0.55rem;
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.7rem 1rem;
+}
+.stats-cell span {
+  display: block;
+  font-size: 0.72rem;
+  color: #8b8b8b;
+  margin-bottom: 0.18rem;
+}
+.stats-cell b {
+  display: block;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stats-cell em {
+  display: block;
+  margin-top: 0.15rem;
+  font-style: normal;
+  font-size: 0.72rem;
+  color: #7a7a7a;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@media (max-width: 560px) {
+  .stats-grid { grid-template-columns: 1fr; }
+}
+.edit-draft {
+  width: var(--you-max);
+  min-height: 4.5rem;
+  margin: 0;
+  padding: 10px 16px;
+  border: 1px solid #3a3a3a;
+  border-radius: 22px;
+  background: var(--you);
+  color: var(--text);
+  font: inherit;
+  line-height: 24px;
+  resize: vertical;
+}
+.empty-thread {
+  color: var(--muted);
+  text-align: center;
+  padding: 4rem 1rem;
+  font-size: 0.9rem;
+}
+.empty-thread.setup-thread {
+  text-align: left;
+  max-width: 28rem;
+  margin: 3rem auto;
+  padding: 1.15rem 1.1rem 1.2rem;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  color: var(--text);
+}
+.setup-kicker {
+  margin: 0 0 6px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.setup-title {
+  margin: 0 0 8px;
+  font-weight: 650;
+}
+.setup-body {
+  margin: 0 0 14px;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+.setup-acts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+}
+.setup-acts a {
+  display: inline-block;
+  padding: 6px 10px;
+  border: 1px solid var(--line);
+  color: inherit;
+  text-decoration: none;
+  font-size: 13px;
+}
+.setup-acts a:hover {
+  border-color: var(--text);
+}
+
+.composer {
+  position: sticky;
+  bottom: 0;
+  z-index: 7;
+  display: flex;
+  justify-content: center;
+  padding: 0 max(var(--thread-gutter), calc((100% - var(--thread-max)) / 2)) 8px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--bg) 0%, transparent) 0px,
+    var(--bg) 36px
+  );
+  overflow: visible;
+}
+.composer-card {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-width: var(--thread-max);
+  padding-top: 10px;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background: var(--panel);
+  box-shadow: 0 8px 28px #0008;
+}
+.composer.drop-on .composer-card {
+  border-color: var(--steel);
+  box-shadow: 0 0 0 1px var(--steel), 0 8px 28px #0008;
+}
+.composer.drop-on .composer-card::after {
+  content: attr(data-drop-hint);
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 22px;
+  background: color-mix(in srgb, var(--panel) 90%, transparent);
+  color: var(--text);
+  font-size: 14px;
+  pointer-events: none;
+}
+body.grok .composer.drop-on .composer-card {
+  border-color: var(--steel);
+  box-shadow: 0 0 0 1px var(--steel), 0 8px 28px #0008;
+}
+body.grok .composer.drop-on .composer-card::after {
+  background: color-mix(in srgb, var(--panel) 90%, transparent);
+  color: var(--text);
+}
+.composer-reply {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  margin: 2px 12px 0;
+  padding: 6px 8px 6px 10px;
+  border-radius: 12px;
+  background: #1c1c1c;
+  color: #c8c8c8;
+  font-size: 13px;
+  line-height: 18px;
+}
+.composer-reply[hidden] { display: none; }
+.composer-reply-arrow {
+  flex: none;
+  display: inline-flex;
+  color: #8b8b8b;
+}
+.composer-reply-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.composer-reply-clear {
+  flex: none;
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #8b8b8b;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+.composer-reply-clear:hover { background: #2a2a2a; color: #fff; }
+.mention-pop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 8px);
+  max-height: 280px;
+  overflow: auto;
+  background: #171717;
+  border: 1px solid #2c2c2c;
+  border-radius: 14px;
+  box-shadow: 0 16px 40px #000c;
+  z-index: 30;
+}
+.mention-pop.is-slash {
+  max-height: min(360px, 52vh);
+}
+.mention-sec {
+  padding: 0.55rem 0.85rem 0.2rem;
+  color: #8d8d8d;
+  font-size: 0.68rem;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.mention-sec:first-child { padding-top: 0.4rem; }
+.mention-empty {
+  padding: 0.7rem 0.85rem 0.85rem;
+  color: #8d8d8d;
+  font-size: 0.82rem;
+}
+.mention-pop.on-edit {
+  position: fixed;
+  right: auto;
+  z-index: 40;
+}
+.mention-pop[hidden] { display: none; }
+.mention-item {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  width: 100%;
+  margin: 0;
+  padding: 0.5rem 0.8rem;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+.mention-item:hover, .mention-item.on { background: #2a2a2a; }
+.mention-item strong { display: block; font-size: 0.9rem; font-weight: 560; }
+.mention-item em {
+  display: block;
+  font-style: normal;
+  color: #8d8d8d;
+  font-size: 0.75rem;
+}
+.mention-item .out {
+  margin-left: auto;
+  color: #8d8d8d;
+  font-size: 0.72rem;
+  flex: none;
+}
+.mention-glyph {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: #222;
+  color: #cfcfcf;
+  font-size: 0.78rem;
+  flex: none;
+  overflow: hidden;
+}
+.composer-scroll { max-height: 336px; overflow-y: auto; }
+.composer textarea {
+  display: block;
+  width: 100%;
+  border: 0;
+  resize: none;
+  min-height: 28px;
+  max-height: 336px;
+  padding: 4px 12px 0 16px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 16px;
+  line-height: 24px;
+  outline: none;
+  overflow-y: hidden;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.composer textarea::placeholder { color: #6f6f6f; }
+.composer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 2px 8px 6px;
+  min-width: 0;
+}
+.composer-tools {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.composer-add {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  background: #2a2a2a;
+  color: var(--text);
+  font-size: 1.05rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.composer-add:hover { background: #333; }
+.attach-wrap { position: relative; flex: none; }
+.attach-pop {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 10px);
+  z-index: 40;
+  width: 220px;
+  padding: 6px;
+  border: 1px solid #2c2c2c;
+  border-radius: 14px;
+  background: #1a1a1a;
+  box-shadow: 0 16px 40px #000c;
+}
+.attach-pop[hidden],
+.attach-sheet[hidden],
+.attach-chips[hidden] { display: none; }
+.attach-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  margin: 0;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #eee;
+  font: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  cursor: pointer;
+}
+.attach-item:hover { background: #2a2a2a; }
+.attach-ico {
+  width: 18px;
+  color: #9a9a9a;
+  font-size: 12px;
+  text-align: center;
+  flex: none;
+}
+.attach-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0 12px;
+}
+.queue-chips {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 8px 12px 0;
+}
+.queue-chips[hidden] { display: none; }
+.queue-chip {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 6px 4px 6px 10px;
+  border: 1px solid #333;
+  border-radius: 10px;
+  background: #1a1a1a;
+  color: #c8c8c8;
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+}
+.queue-chip .queue-kind {
+  flex: none;
+  margin-right: 8px;
+  color: var(--muted);
+}
+.queue-chip .queue-to {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  margin-right: 8px;
+  color: var(--steel);
+}
+.queue-avs {
+  display: inline-flex;
+  align-items: center;
+}
+.queue-av {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  margin-left: -5px;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px var(--bg);
+}
+.queue-avs .queue-av:first-child { margin-left: 0; }
+.queue-chip .queue-preview {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.queue-chip button {
+  flex: none;
+  width: 22px;
+  height: 22px;
+  margin: 0 0 0 4px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #8b8b8b;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+.queue-chip button:hover { color: #fff; }
+.composer-steer {
+  margin: 6px 16px 0;
+  color: #6f6f6f;
+  font-size: 12px;
+  line-height: 16px;
+}
+.composer-steer.ok { color: #9fdfb2; }
+.composer-steer[hidden] { display: none; }
+.attach-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 240px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #3a3a3a;
+  border-radius: 999px;
+  background: #1c1c1c;
+  color: #ddd;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+}
+.attach-chip-name,
+.attach-chip > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+  padding: 6px 4px 6px 10px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.attach-chip-x {
+  margin: 0;
+  padding: 6px 10px 6px 4px;
+  border: 0;
+  background: transparent;
+  color: #9a9a9a;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.attach-chip:hover { background: #2a2a2a; }
+.attach-chip-x:hover { color: #fff; }
+.attach-chip.has-preview { padding-left: 3px; }
+.attach-thumb {
+  width: 22px;
+  height: 22px;
+  margin: 3px 0 3px 3px;
+  object-fit: cover;
+  border-radius: 50%;
+  flex: none;
+  background: #111;
+}
+.img-preview {
+  position: fixed;
+  z-index: 80;
+  pointer-events: none;
+  padding: 4px;
+  background: #141414;
+  border: 1px solid #333;
+  border-radius: 12px;
+  box-shadow: 0 16px 40px #000c;
+}
+.img-preview[hidden] { display: none; }
+.img-preview img {
+  display: block;
+  max-width: min(240px, 70vw);
+  max-height: min(180px, 40vh);
+  border-radius: 8px;
+}
+.att-token[data-preview] {
+  cursor: zoom-in;
+}
+.att-token.has-preview {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  padding: 0.12em 0.4em 0.12em 0.18em;
+}
+.att-inline {
+  width: 22px;
+  height: 22px;
+  object-fit: cover;
+  border-radius: 4px;
+  flex: none;
+  background: #111;
+}
+.msg.you .msg-imgs {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  max-width: var(--you-max);
+  margin: 0 0 6px;
+}
+.msg-img {
+  display: block;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #2c2c2c;
+  border-radius: 14px;
+  background: #111;
+  overflow: hidden;
+  cursor: pointer;
+}
+.msg-img img {
+  display: block;
+  max-width: min(280px, 72vw);
+  max-height: 220px;
+  object-fit: contain;
+}
+.msg.you .msg-atts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+  max-width: var(--you-max);
+  margin: 0 0 6px;
+}
+.msg .att-token {
+  padding: 0 0.2em;
+  border-radius: 4px;
+  background: #2a2a2a;
+  color: #cfcfcf;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+}
+.attach-sheet {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 8px);
+  z-index: 41;
+  max-height: 320px;
+  overflow: auto;
+  padding: 8px;
+  border: 1px solid #2c2c2c;
+  border-radius: 14px;
+  background: #171717;
+  box-shadow: 0 16px 40px #000c;
+}
+.attach-sheet-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px 8px;
+  color: #ddd;
+  font-size: 13px;
+}
+.attach-back {
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #ddd;
+  font-size: 18px;
+  cursor: pointer;
+}
+.attach-back:hover { background: #2a2a2a; }
+.attach-q {
+  width: 100%;
+  margin: 0 0 8px;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: #222;
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+}
+.attach-path {
+  margin: 0 4px 8px;
+  color: #8b8b8b;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.attach-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  margin: 0;
+  padding: 7px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.attach-row:hover { background: #2a2a2a; }
+.attach-row em {
+  margin-left: auto;
+  color: #8b8b8b;
+  font-style: normal;
+  font-size: 11px;
+}
+.attach-term {
+  display: flex;
+  gap: 6px;
+  padding: 4px;
+}
+.attach-term input {
+  flex: 1;
+  margin: 0;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: #222;
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+}
+.attach-term button {
+  margin: 0;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 8px;
+  background: #2a2a2a;
+  color: var(--text);
+  font: inherit;
+  cursor: pointer;
+}
+.primary {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 34px;
+  height: 34px;
+  margin: 0 2px 2px 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--paper);
+  color: var(--ink);
+  cursor: pointer;
+}
+.primary:hover:not(:disabled) { background: #F7F1E4; }
+.primary:disabled { opacity: 0.4; cursor: default; }
+.primary.stopping { background: var(--paper); }
+.primary .icon-stop { display: none; }
+.primary.stopping .icon-send { display: none; }
+.primary.stopping .icon-stop { display: block; }
+.model-wrap { position: relative; flex: 0 0 auto; }
+.model-wrap[hidden] { display: none; }
+.model-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  max-width: 14rem;
+  margin: 0;
+  padding: 0.38rem 0.7rem 0.38rem 0.9rem;
+  border: 0;
+  border-radius: 999px;
+  background: #2a2a2a;
+  color: var(--text);
+  font-size: 0.82rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.model-btn #model-btn-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.model-caret { color: #8d8d8d; font-size: 0.7rem; }
+.model-pop {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 8px);
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: min(520px, 94vw);
+  max-height: 380px;
+  background: #2c2c2c;
+  border: 0;
+  border-radius: 14px;
+  box-shadow: 0 16px 40px #000c;
+  overflow: hidden;
+  z-index: 40;
+}
+.model-pop[hidden] { display: none !important; }
+.model-nav {
+  flex: none;
+  width: 168px;
+  padding: 6px 0;
+  border-right: 1px solid #3a3a3a;
+}
+.model-panes {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 6px 0 8px;
+}
+.model-pane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+.model-pane[hidden] { display: none !important; }
+.model-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+  margin: 2px 10px 8px;
+  padding: 0 10px;
+  height: 34px;
+  border-radius: 10px;
+  background: #1c1c1c;
+  color: #9a9a9a;
+}
+.model-search-ico { display: inline-flex; flex: none; }
+.model-search input {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+}
+.model-search input::placeholder { color: #777; }
+.model-sec {
+  color: #8a8a8a;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  padding: 4px 14px 2px;
+}
+.model-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  margin: 0;
+  padding: 0.62rem 0.85rem;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 0.9rem;
+  cursor: pointer;
+  text-align: left;
+}
+.model-row:hover, .model-row.on { background: #3a3a3a; }
+.model-row > span:first-child { flex: none; }
+.model-row-val {
+  margin-left: auto;
+  color: #9a9a9a;
+  font-size: 0.86rem;
+  max-width: 5.6rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.model-row-chev { color: #7a7a7a; font-size: 0.95rem; }
+#model-results {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 0;
+}
+.model-empty { color: #8a8a8a; font-size: 0.82rem; padding: 0.85rem 0.9rem; }
+.model-choice {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  margin: 0;
+  padding: 0.5rem 0.95rem;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 0.9rem;
+  cursor: pointer;
+  text-align: left;
+  text-decoration: none;
+}
+.model-choice:hover, .model-choice.on { background: #3a3a3a; }
+.model-choice.locked { opacity: 0.5; }
+.model-choice .glyph {
+  flex: none;
+  width: 1.1rem;
+  text-align: center;
+  color: #c9c9c9;
+}
+.model-choice .glyph.claude { color: #e8a07a; }
+.model-choice .glyph.openai { color: #9ad5c0; }
+.model-choice .glyph.grok { color: #d0d0d0; }
+.model-choice .glyph.gemini { color: var(--steel); }
+.model-choice-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.model-choice .tick {
+  margin-left: auto;
+  color: #cfcfcf;
+}
+.composer-bar { display: none; }
+
+dialog {
+  border: 0;
+  border-radius: 16px;
+  padding: 1.1rem 1.2rem 1.2rem;
+  width: min(28rem, calc(100vw - 2rem));
+  background: #141414;
+  color: var(--text);
+  box-shadow: 0 12px 40px #000a;
+}
+dialog::backdrop { background: #0009; }
+dialog h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
+dialog p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
+.pick {
+  display: grid;
+  gap: 0.35rem;
+  max-height: 16rem;
+  overflow: auto;
+  margin-bottom: 0.9rem;
+}
+.pick label {
+  display: flex;
+  gap: 0.55rem;
+  align-items: center;
+  margin: 0;
+  padding: 0.45rem;
+  border-radius: 10px;
+  color: var(--text);
+}
+.pick label:hover { background: #1c1c1c; }
+.pick input { width: auto; }
+#channel-md { width: min(40rem, calc(100vw - 2rem)); }
+#channel-md label {
+  display: block;
+  margin: 0 0 0.3rem;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+#channel-md-name {
+  display: block;
+  width: 100%;
+  margin: 0 0 1rem;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid #2a2a2a;
+  border-radius: 12px;
+  background: #0e0e0e;
+  color: var(--text);
+  font: inherit;
+  font-size: 0.95rem;
+}
+#channel-md-name:disabled {
+  opacity: 0.55;
+}
+#channel-md-body,
+#channel-memory-body,
+#bot-memory-body {
+  display: block;
+  width: 100%;
+  min-height: 8rem;
+  margin: 0 0 0.9rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid #2a2a2a;
+  border-radius: 12px;
+  background: #0e0e0e;
+  color: var(--text);
+  font: inherit;
+  font-size: 0.88rem;
+  line-height: 1.45;
+  resize: vertical;
+}
+#bot-memory { width: min(36rem, calc(100vw - 2rem)); }
+#bot-memory-body { min-height: 12rem; }
+.assign-list {
+  display: grid;
+  gap: 0.35rem;
+  max-height: 18rem;
+  overflow: auto;
+  margin: 0 0 0.9rem;
+}
+.assign-list button {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  width: 100%;
+  margin: 0;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid #2a2a2a;
+  border-radius: 12px;
+  background: #1a1a1a;
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.assign-list button:hover { background: #222; border-color: #3a3a3a; }
+.assign-list .assign-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 0.05rem;
+}
+.assign-list .assign-copy strong {
+  font-size: 0.92rem;
+  font-weight: 600;
+}
+.assign-list .assign-copy span {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+.dialog-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
+.dialog-actions button {
+  margin: 0;
+  padding: 0.4rem 0.75rem;
+  border-radius: 999px;
+  cursor: pointer;
+  font: inherit;
+  border: 0;
+  background: #2a2a2a;
+  color: var(--text);
+}
+.dialog-actions .ghost { background: transparent; color: var(--muted); }
+.dialog-actions .ghost.danger {
+  margin-right: auto;
+  color: #fca5a5;
+}
+.dialog-actions .ghost.danger:hover { color: #fecaca; }
+
+.traj {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  grid-column: 1;
+  grid-row: 1 / -1;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  background: #0c0c0e;
+}
+.traj[hidden] { display: none !important; }
+.traj-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.7rem 1rem;
+  border-bottom: 1px solid #222;
+}
+.traj-bar strong { font-size: 0.92rem; }
+.traj-src { color: #8b8b8b; font-size: 0.75rem; }
+.traj-bar input {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0.4rem 0.7rem;
+  border: 0;
+  border-radius: 999px;
+  background: #1a1a1a;
+  color: var(--text);
+  font: inherit;
+  font-size: 0.82rem;
+}
+.traj-close {
+  margin: 0;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 50%;
+  background: #1a1a1a;
+  color: #cfcfcf;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+.traj-kinds {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  padding: 0.4rem 1rem 0.5rem;
+  border-bottom: 1px solid #222;
+}
+.traj-filter {
+  margin: 0;
+  padding: 0.18rem 0.5rem;
+  border: 1px solid #333;
+  border-radius: 4px;
+  background: #141416;
+  color: #bdbdbd;
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 650;
+  cursor: pointer;
+}
+.traj-filter:hover { color: var(--text); border-color: #555; }
+.traj-filter.on {
+  background: #1c1c20;
+  color: var(--text);
+  border-color: #555;
+}
+.traj-filter.spawn { color: var(--signal); border-color: #4a3d22; }
+.traj-filter.spawn.on {
+  background: #2a2418;
+  color: var(--signal);
+}
+.traj-main {
+  display: grid;
+  grid-template-columns: minmax(280px, 1.1fr) minmax(240px, 0.9fr);
+  min-height: 0;
+}
+.traj-list {
+  overflow: auto;
+  border-right: 1px solid #222;
+  padding: 0.4rem 0;
+}
+.traj-row {
+  display: grid;
+  grid-template-columns: 20px 6.2rem 6.4rem minmax(0, 1fr);
+  gap: 0.4rem;
+  align-items: center;
+  width: 100%;
+  margin: 0;
+  padding: 0.38rem 0.75rem;
+  border: 0;
+  background: transparent;
+  color: #d8d8d8;
+  font: inherit;
+  font-size: 0.8rem;
+  text-align: left;
+  cursor: pointer;
+}
+.traj-row:hover, .traj-row.on { background: #17171a; }
+.traj-row.live { background: #14110c; }
+.traj-row.live.on { background: #1c1810; }
+.traj-row.live .sum { color: #e6d48a; }
+.traj-src.live { color: var(--gold, #c9a227); }
+.traj-av {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 0.62rem;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.traj-av.you {
+  background: #2a2a2a;
+  color: #bbb;
+  font-size: 0.58rem;
+}
+.traj-who {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.74rem;
+  font-weight: 650;
+  color: var(--text);
+}
+.traj-kind {
+  font-size: 0.64rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  padding: 0.1rem 0.28rem;
+  border-radius: 4px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.traj-kind.system { background: #3b2a55; color: #d7c2ff; }
+.traj-kind.user { background: #1f3d32; color: #9fdfb2; }
+.traj-kind.context { background: #163a44; color: #8fd4e8; }
+.traj-kind.model { background: #2a2a22; color: #e6d48a; }
+.traj-kind.thinking { background: #2a2438; color: #c5b8e6; }
+.traj-kind.tool { background: #3d2a14; color: #f0b27a; }
+.traj-kind.skill { background: #1A222C; color: var(--steel); }
+.traj-kind.spawn { background: #2a2418; color: var(--signal); }
+.traj-kind.assistant { background: #3a1c28; color: #f0a0b8; }
+.traj-row .sum {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #bdbdbd;
+}
+.traj-row.err .sum { color: #e07070; }
+.traj-detail {
+  overflow: auto;
+  padding: 1rem 1.1rem 1.4rem;
+  font-size: 0.82rem;
+  line-height: 1.55;
+  color: #d0d0d0;
+}
+.traj-detail h3 { margin: 0 0 0.45rem; font-size: 0.92rem; }
+.traj-detail .meta { color: #8b8b8b; font-size: 0.75rem; margin: 0 0 0.85rem; }
+.traj-detail h4 {
+  margin: 0.9rem 0 0.3rem;
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  color: #8b8b8b;
+  font-weight: 650;
+}
+.traj-detail pre {
+  margin: 0;
+  padding: 0.7rem 0.8rem;
+  border-radius: 10px;
+  background: #141416;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.45;
+}
+.traj-empty { color: #8b8b8b; padding: 1.2rem; }
+.md-img,
+.row-card.image .md-img {
+  display: block;
+  max-width: min(100%, 48rem);
+  height: auto;
+  border-radius: 12px;
+  margin: 0.45rem 0;
+  background: #111;
+}
+.row-card.image .term-out {
+  margin-top: 0.4rem;
+  font-size: 0.72rem;
+  color: #8b8b8b;
+}
+
+.nav-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 10px;
+  background: var(--fill);
+  color: var(--text);
+  cursor: pointer;
+  flex: none;
+}
+.nav-toggle-bars,
+.nav-toggle-bars::before,
+.nav-toggle-bars::after {
+  display: block;
+  width: 16px;
+  height: 1.5px;
+  background: currentColor;
+  border-radius: 1px;
+}
+.nav-toggle-bars {
+  position: relative;
+}
+.nav-toggle-bars::before,
+.nav-toggle-bars::after {
+  content: "";
+  position: absolute;
+  left: 0;
+}
+.nav-toggle-bars::before { top: -5px; }
+.nav-toggle-bars::after { top: 5px; }
+.nav-scrim {
+  display: none;
+}
+
+@media (max-width: 760px) {
+  body.grok { grid-template-columns: 1fr; }
+  body.nav-open { overflow: hidden; }
+  .nav-toggle { display: inline-flex; }
+  .nav-scrim {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 35;
+    background: #0009;
+  }
+  body.nav-open .nav-scrim { display: block; }
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(86vw, 320px);
+    z-index: 40;
+    transform: translateX(-105%);
+    display: flex;
+    height: 100%;
+    min-height: 100%;
+    max-height: 100dvh;
+    box-shadow: 8px 0 28px #0008;
+  }
+  body.nav-open .sidebar { transform: none; }
+  .sidebar-resizer { display: none; }
+}
+@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
+  .sidebar { transition: transform 0.2s ease; }
+}