@frockbot/plugin-shell 0.0.0 → 0.1.0

package/src/client/styles.css

@@ -0,0 +1,1043 @@
+.frockbot-root {
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+
+  /*
+   * `clip`, not `hidden`. A closed drawer is parked outside the window, and
+   * `hidden` makes this element a scroll container that can still be scrolled
+   * programmatically: focusing a field inside the composer scrolls the parked
+   * drawer into view and takes the whole layout sideways with it. `clip` has
+   * the clipping without the scroll port, so there is nothing to scroll. The
+   * `hidden` above it is the fallback for a renderer without `clip`.
+   */
+  overflow: hidden;
+  overflow: clip;
+  font-size: var(--frock-text-base);
+  line-height: var(--frock-leading-normal);
+}
+
+/*
+ * Three columns: flock sidebar, workspace, right panel. The panel column is
+ * always present and animates between its width and zero so the toggle feels
+ * like a drawer rather than a relayout, and so panel plugins keep their state.
+ */
+.app-shell {
+  --panel-current: 0px;
+
+  /* A hosted surface needs more room than a panel plugin's summary column. */
+  --panel-surface-width: 360px;
+  position: relative;
+  display: grid;
+  grid-template-columns:
+    var(--frock-sidebar-width) minmax(0, 1fr)
+    var(--panel-current);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: var(--frock-surface-window);
+  transition: grid-template-columns var(--frock-motion-panel);
+}
+
+.app-shell.panel-open {
+  --panel-current: var(--frock-panel-width);
+}
+
+.app-shell.panel-open.panel-surface {
+  --panel-current: var(--panel-surface-width);
+}
+
+/* Sidebar */
+
+.sidebar {
+  position: relative;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  padding: 0 10px 10px;
+  border-right: 1px solid var(--frock-border);
+  background: var(--frock-surface-sidebar);
+}
+
+.brand {
+  display: flex;
+  height: var(--frock-titlebar-height);
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 0 8px;
+  -webkit-app-region: drag;
+}
+
+.mac-desktop .brand {
+  padding-left: 72px;
+}
+
+.brand-mark {
+  color: var(--frock-text);
+  font-family: var(--frock-font-display);
+  font-size: var(--frock-text-xl);
+  letter-spacing: var(--frock-tracking-display);
+}
+
+.sidebar-top {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+  margin: 0 2px 6px;
+  -webkit-app-region: no-drag;
+}
+
+.sidebar-top > *:first-child {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.bot-list {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: auto;
+  padding-top: 4px;
+  scrollbar-color: var(--frock-scrollbar) transparent;
+  scrollbar-width: thin;
+}
+
+.sidebar-computer {
+  flex: 0 0 auto;
+  padding: 8px 2px 10px;
+  border-top: 1px solid var(--frock-border);
+}
+
+.sidebar-bottom {
+  display: grid;
+  gap: 2px;
+  margin-top: 0;
+  padding-top: 10px;
+  border-top: 1px solid var(--frock-border);
+}
+
+/* Workspace */
+
+.workspace {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  background: var(--frock-surface);
+}
+
+.topbar {
+  display: flex;
+  height: var(--frock-titlebar-height);
+  align-items: center;
+  gap: 12px;
+  padding: 0 64px 0 18px;
+  border-bottom: 1px solid var(--frock-border);
+  -webkit-app-region: drag;
+}
+
+.topbar > :last-child:not(.workspace-title) {
+  flex: 0 0 auto;
+  -webkit-app-region: no-drag;
+}
+
+.bot-identity {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  -webkit-app-region: no-drag;
+}
+
+.workspace-title {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  line-height: var(--frock-leading-tight);
+}
+
+.workspace-title strong {
+  overflow: hidden;
+  color: var(--frock-text);
+  font-size: var(--frock-text-lg);
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.workspace-title small {
+  overflow: hidden;
+  margin-top: 3px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.model-setup-link {
+  width: max-content;
+  max-width: 100%;
+  margin-top: 3px;
+  overflow: hidden;
+  border: 0;
+  padding: 0;
+  color: var(--frock-action-primary);
+  background: transparent;
+  font: inherit;
+  font-size: var(--frock-text-sm);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.model-setup-link:hover {
+  color: var(--frock-action-primary-hover);
+}
+
+/*
+ * The panel collapse control is pinned to the window's trailing edge. Feature
+ * actions live in the panel's own header.
+ */
+.window-actions {
+  position: absolute;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  display: flex;
+  height: var(--frock-titlebar-height);
+  align-items: center;
+  gap: 2px;
+  padding: 0 12px;
+  -webkit-app-region: no-drag;
+}
+
+/* Thread */
+
+.thread {
+  position: absolute;
+  top: var(--frock-titlebar-height);
+  right: 0;
+  bottom: 84px;
+  left: 0;
+  overflow-y: auto;
+  padding: 16px 20px 24px;
+  background-color: var(--frock-surface);
+  background-image: var(--frock-thread-gradient);
+  scrollbar-color: var(--frock-scrollbar) transparent;
+  scrollbar-width: thin;
+}
+
+.empty-thread {
+  display: grid;
+  min-height: 100%;
+  place-content: center;
+  justify-items: center;
+  padding: 30px;
+  color: var(--frock-text-muted);
+  text-align: center;
+  animation: frock-fade-in var(--frock-motion-enter) both;
+}
+
+.empty-mark {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  margin-bottom: 14px;
+  border-radius: 14px;
+  color: var(--frock-action-primary-hover);
+  background: var(--frock-surface-accent);
+}
+
+.empty-thread h1 {
+  margin: 0;
+  color: var(--frock-text);
+  font-family: var(--frock-font-display);
+  font-size: var(--frock-text-2xl);
+  font-weight: 400;
+  letter-spacing: var(--frock-tracking-display);
+}
+
+.empty-thread p {
+  max-width: 340px;
+  margin: 6px 0 0;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-md);
+  line-height: var(--frock-leading-normal);
+}
+
+.message {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-top: 6px;
+  animation: frock-rise-in var(--frock-motion-enter) both;
+}
+
+.message-user {
+  align-items: flex-end;
+  margin-top: 18px;
+}
+
+/* A Session announcement: the conversation narrating itself, not a party. */
+.message-system {
+  align-items: center;
+  margin-top: 14px;
+}
+
+.message-system-line {
+  margin: 0;
+  padding: 4px 10px;
+  border-radius: var(--frock-radius-control);
+  background: var(--frock-surface-subtle);
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-xs);
+  text-align: center;
+}
+
+/* An assistant Turn is its avatar and, once there is text, its bubble. */
+.message-assistant {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.bot-avatar {
+  position: relative;
+  display: grid;
+  width: var(--frock-avatar-sm);
+  height: var(--frock-avatar-sm);
+  flex: 0 0 auto;
+  place-items: center;
+  margin-top: 2px;
+}
+
+.bot-avatar-fallback {
+  display: grid;
+  width: var(--frock-avatar-sm);
+  height: var(--frock-avatar-sm);
+  place-items: center;
+  border-radius: 9px;
+  color: var(--frock-action-primary-hover);
+  background: var(--frock-surface-accent);
+}
+
+/*
+ * A Package that fills `frockbot.bot-avatar` renders beside this tile, which
+ * then stops being the only child and steps aside.
+ */
+.bot-avatar-fallback:not(:only-child) {
+  display: none;
+}
+
+/*
+ * The avatar carries the running state: a fast breath with a halo while the
+ * Turn has produced nothing yet, a slower one once text is arriving. The
+ * reduced-motion block at the end of this file stops both.
+ */
+.bot-avatar-live {
+  animation: frock-breathe 2600ms ease-in-out infinite;
+}
+
+.bot-avatar-live::after {
+  position: absolute;
+  border-radius: 12px;
+  animation: frock-halo 2600ms ease-in-out infinite;
+  box-shadow: 0 0 0 2px var(--frock-surface-accent);
+  content: "";
+  inset: -4px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bot-avatar-waiting,
+.bot-avatar-waiting::after {
+  animation-duration: 1600ms;
+}
+
+@keyframes frock-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.07);
+  }
+}
+
+@keyframes frock-halo {
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.06);
+  }
+}
+
+.message-bubble {
+  width: max-content;
+  max-width: min(640px, 84%);
+  padding: 10px 14px;
+  border: 1px solid var(--frock-border);
+  border-radius: 18px 18px 18px 6px;
+  color: var(--frock-text);
+  background: var(--frock-surface-raised);
+  box-shadow: var(--frock-shadow-card);
+  font-size: var(--frock-text-md);
+  line-height: var(--frock-leading-normal);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  animation: frock-rise-in var(--frock-motion-enter) both;
+}
+
+.message-user .message-bubble {
+  max-width: min(640px, 84%);
+  border-color: var(--frock-action-primary);
+  border-radius: 18px 18px 6px 18px;
+  color: var(--frock-on-accent);
+  background: var(--frock-action-primary);
+}
+
+/*
+ * User-facing sends. They stack under the Bot's avatar in the same column the
+ * text bubble occupies, so a Turn that only sent a widget still reads as the
+ * Bot speaking.
+ */
+
+.message-sends {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(640px, 84%);
+}
+
+/*
+ * Dispatched subagents. A chip is deliberately quiet — a subagent is work the
+ * Bot delegated, not something it said — and opens in place to the summary the
+ * child handed back. The child's own transcript is never here.
+ */
+
+.message-tasks {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: min(640px, 84%);
+}
+
+.task-chip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: baseline;
+  padding: 8px 10px;
+  font: inherit;
+  color: var(--frock-text);
+  text-align: left;
+  cursor: pointer;
+  background: var(--frock-surface);
+  border: 1px solid var(--frock-border);
+  border-radius: 10px;
+}
+
+.task-chip-type {
+  font-weight: 600;
+}
+
+.task-chip-description {
+  flex: 1 1 auto;
+}
+
+.task-chip-status,
+.task-chip-model {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-xs);
+}
+
+.task-chip-completed .task-chip-status {
+  color: var(--frock-text);
+}
+
+.task-chip-failed .task-chip-status,
+.task-chip-stopped .task-chip-status {
+  color: var(--frock-danger-text);
+}
+
+.task-chip-summary {
+  flex: 1 0 100%;
+  color: var(--frock-text-muted);
+  white-space: pre-wrap;
+}
+
+.task-chip-stop {
+  flex: 0 0 auto;
+  padding: 2px 8px;
+  color: var(--frock-danger-text);
+  font-size: var(--frock-text-xs);
+  cursor: pointer;
+  border: 1px solid var(--frock-danger-border);
+  border-radius: 8px;
+}
+
+/* Jump to latest */
+
+.jump-latest {
+  position: absolute;
+  z-index: 6;
+  right: 24px;
+  bottom: 92px;
+  color: var(--frock-text);
+  background: var(--frock-surface-raised);
+  box-shadow: var(--frock-shadow-card);
+}
+
+/* Status banner */
+
+.error-banner {
+  position: absolute;
+  right: 20px;
+  bottom: 84px;
+  left: 20px;
+  z-index: 5;
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 7px 12px;
+  border: 1px solid var(--frock-danger-border);
+  border-radius: 12px;
+  color: var(--frock-danger-text);
+  background: var(--frock-danger-surface);
+  box-shadow: var(--frock-shadow-card);
+  font-size: var(--frock-text-sm);
+}
+
+.error-banner button {
+  flex: 0 0 auto;
+  padding: 5px 10px;
+  border-radius: 999px;
+  color: var(--frock-on-accent);
+  background: var(--frock-danger-text);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.banner-enter-active,
+.banner-leave-active {
+  transition:
+    opacity var(--frock-motion-fast),
+    transform var(--frock-motion-fast);
+}
+
+.banner-enter-from,
+.banner-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+/* Composer */
+
+.composer {
+  position: absolute;
+  right: 20px;
+  bottom: 18px;
+  left: 20px;
+  display: flex;
+  min-height: 52px;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 8px 8px 8px 18px;
+  border: 1px solid var(--frock-border-strong);
+  border-radius: 26px;
+  background: var(--frock-surface-raised);
+  box-shadow: var(--frock-shadow-composer);
+  transition:
+    border-color var(--frock-motion-fast),
+    box-shadow var(--frock-motion-fast);
+}
+
+.composer:focus-within {
+  border-color: var(--frock-border-strong);
+  box-shadow:
+    var(--frock-shadow-composer),
+    0 0 0 3px var(--frock-focus-ring);
+}
+
+.composer-model-setup {
+  min-width: 0;
+  flex: 1;
+  align-self: center;
+}
+
+.composer textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 36px;
+  max-height: 120px;
+  flex: 1;
+  align-self: stretch;
+  resize: none;
+  border: 0;
+  outline: 0;
+  padding: 8px 0;
+  color: var(--frock-text);
+  background: transparent;
+  font-size: var(--frock-text-md);
+  line-height: var(--frock-leading-normal);
+  text-align: left;
+}
+
+.composer textarea::placeholder {
+  color: var(--frock-text-subtle);
+}
+
+.composer textarea:disabled {
+  color: var(--frock-text-muted);
+}
+
+/*
+ * Skill invocation. The popover floats above the composer rather than pushing
+ * it, so the message the User is writing never moves under their caret; the
+ * chips sit inside the composer with the textarea because they are part of the
+ * message being composed, not a separate control.
+ */
+
+.composer-body {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  align-self: stretch;
+  gap: 6px;
+}
+
+.skill-chips {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+  gap: 6px;
+  list-style: none;
+}
+
+.skill-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px 2px 8px;
+  border: 1px solid var(--frock-accent-border);
+  border-radius: var(--frock-radius-control);
+  color: var(--frock-accent-text);
+  background: var(--frock-accent-surface);
+  cursor: pointer;
+  font-size: var(--frock-text-xs);
+  line-height: var(--frock-leading-tight);
+}
+
+.skill-chip:hover {
+  border-color: var(--frock-border-strong);
+}
+
+.skill-chip-name {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.skill-popover {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+  left: 0;
+  z-index: var(--frock-layer-menu);
+  max-height: 240px;
+  margin: 0;
+  padding: 4px;
+  overflow-y: auto;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-card);
+  background: var(--frock-surface-raised);
+  box-shadow: var(--frock-shadow-floating);
+  list-style: none;
+}
+
+.skill-option {
+  display: grid;
+  padding: 6px 8px;
+  border-radius: var(--frock-radius-control);
+  cursor: pointer;
+  grid-template-columns: auto 1fr;
+  gap: 2px 8px;
+}
+
+.skill-option-active {
+  background: var(--frock-fill-hover);
+}
+
+.skill-option-name {
+  color: var(--frock-text);
+  font-size: var(--frock-text-base);
+  line-height: var(--frock-leading-tight);
+}
+
+.skill-option-ref {
+  color: var(--frock-text-subtle);
+  font-family: var(--frock-font-mono);
+  font-size: var(--frock-text-xs);
+  line-height: var(--frock-leading-tight);
+}
+
+.skill-option-description {
+  overflow: hidden;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-xs);
+  grid-column: 1 / -1;
+  line-height: var(--frock-leading-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.composer-busy .stop-button {
+  background: var(--frock-danger-text);
+}
+
+/* Right panel */
+
+.right-panel {
+  min-width: 0;
+  overflow: hidden;
+  border-left: 1px solid var(--frock-border);
+  background: var(--frock-surface-sidebar);
+}
+
+.right-panel-stack {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.right-panel-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  width: var(--frock-panel-width);
+  min-height: 0;
+  flex-direction: column;
+}
+
+.right-panel-header {
+  display: flex;
+  height: var(--frock-titlebar-height);
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 52px 0 12px;
+  border-bottom: 1px solid var(--frock-border);
+}
+
+.right-panel-body {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  scrollbar-color: var(--frock-scrollbar) transparent;
+  scrollbar-width: thin;
+}
+
+.panel-surface-view {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  width: var(--panel-surface-width);
+  min-height: 0;
+  flex-direction: column;
+  background: var(--frock-surface);
+}
+
+/*
+ * The title and back control belong to the surface header; only the generic
+ * collapse control floats over its trailing edge.
+ */
+.panel-surface-header {
+  display: flex;
+  height: var(--frock-titlebar-height);
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+  padding: 0 52px 0 10px;
+  border-bottom: 1px solid var(--frock-border);
+}
+
+.panel-surface-header h2 {
+  overflow: hidden;
+  margin: 0;
+  color: var(--frock-text);
+  font-size: var(--frock-text-md);
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.panel-surface-content {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  scrollbar-color: var(--frock-scrollbar) transparent;
+  scrollbar-width: thin;
+}
+
+.panel-swap-enter-active,
+.panel-swap-leave-active {
+  transition:
+    opacity var(--frock-motion-panel),
+    transform var(--frock-motion-panel);
+}
+
+.panel-swap-enter-from,
+.panel-swap-leave-to {
+  opacity: 0;
+  transform: translateX(12px);
+}
+
+/* Responsive */
+
+@media (max-width: 980px) {
+  .app-shell.panel-open {
+    --panel-current: 0px;
+  }
+
+  .app-shell.panel-surface .right-panel {
+    width: var(--panel-surface-width);
+  }
+
+  /*
+   * A parked panel is hidden as well as off-canvas: it is not something to
+   * tab into, read out, or hit-test, and `visibility` is the one property that
+   * says all three and still animates.
+   */
+  .right-panel {
+    position: absolute;
+    z-index: 15;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--frock-panel-width);
+    box-shadow: var(--frock-shadow-right-panel);
+    transform: translateX(100%);
+    visibility: hidden;
+    transition:
+      transform var(--frock-motion-panel),
+      visibility var(--frock-motion-panel);
+  }
+
+  .app-shell.panel-open .right-panel {
+    transform: translateX(0);
+    visibility: visible;
+  }
+}
+
+/*
+ * Phone.
+ *
+ * A hand-held viewport has room for exactly one column, so the shell stops
+ * being three columns and becomes the conversation with two drawers over it:
+ * the Bot list from the leading edge, the right panel from the trailing one.
+ * Squeezing all three instead is what the 190px sidebar above used to do, and
+ * at 390px it left the conversation about a hundred points wide with every
+ * label clipped mid-word.
+ *
+ * Only one drawer is ever open: opening either closes the other, in the
+ * component, so this layer never has to reason about them overlapping.
+ */
+@media (max-width: 640px) {
+  .frockbot-root {
+    height: var(--frock-viewport-height);
+  }
+
+  .app-shell,
+  .app-shell.panel-open,
+  .app-shell.panel-open.panel-surface {
+    --panel-surface-width: 100%;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  /*
+   * Off canvas and inert. `visibility` rather than transform alone so a closed
+   * drawer is hidden to assistive technology and to a hit test, and so it
+   * still animates: the property is transitioned, not switched.
+   */
+  .sidebar {
+    position: absolute;
+    z-index: 25;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--frock-drawer-width);
+    /* `calc` so the declaration is a length the checker can type; `env` alone
+       is not one it knows. */
+    padding-top: calc(var(--frock-safe-top) + 0px);
+    box-shadow: var(--frock-shadow-panel);
+    transform: translateX(-100%);
+    visibility: hidden;
+    transition:
+      transform var(--frock-motion-panel),
+      visibility var(--frock-motion-panel);
+  }
+
+  .app-shell.nav-open .sidebar {
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  /* The drawers dim the conversation they cover, and the dimmed area closes them. */
+  /*
+   * Under both drawers and over the workspace: the sidebar sits at 25 and the
+   * right panel at 15, so one scrim serves whichever is open.
+   */
+  .nav-scrim {
+    position: absolute;
+    z-index: 14;
+    inset: 0;
+    border: 0;
+    padding: 0;
+    background: var(--frock-overlay-tint);
+    cursor: pointer;
+  }
+
+  .scrim-enter-active,
+  .scrim-leave-active {
+    transition: opacity var(--frock-motion-panel);
+  }
+
+  .scrim-enter-from,
+  .scrim-leave-to {
+    opacity: 0;
+  }
+
+  /* The right panel is a drawer too, and on a phone it takes the whole width. */
+  .right-panel,
+  .app-shell.panel-surface .right-panel {
+    width: 100%;
+  }
+
+  .right-panel-content,
+  .panel-surface-view {
+    width: 100%;
+  }
+
+  /* There is no window chrome to drag and no traffic lights to clear. */
+  .brand {
+    padding-left: 0;
+  }
+
+  .mac-desktop .brand {
+    padding-left: 0;
+  }
+
+  .topbar {
+    gap: 8px;
+    padding: 0 100px 0 4px;
+  }
+
+  .brand-mark {
+    font-size: var(--frock-text-lg);
+  }
+
+  .window-actions {
+    padding: 0 8px;
+  }
+
+  .nav-toggle {
+    flex: 0 0 auto;
+  }
+
+  /*
+   * The conversation. Its horizontal room is the whole window now, so the
+   * gutters shrink and a bubble may use nearly all of what is left; the
+   * vertical anchors all clear the home indicator.
+   */
+  .thread {
+    bottom: calc(76px + var(--frock-safe-bottom));
+    padding: 12px 12px 20px;
+  }
+
+  .empty-thread {
+    padding: 20px;
+  }
+
+  .message-bubble,
+  .message-user .message-bubble {
+    max-width: 92%;
+  }
+
+  .message-sends,
+  .message-tasks {
+    width: 92%;
+  }
+
+  .message-attachments img {
+    max-width: 100%;
+  }
+
+  .error-banner {
+    right: 10px;
+    bottom: calc(76px + var(--frock-safe-bottom));
+    left: 10px;
+  }
+
+  .jump-latest {
+    right: 14px;
+    bottom: calc(84px + var(--frock-safe-bottom));
+  }
+
+  .composer {
+    right: 10px;
+    bottom: calc(10px + var(--frock-safe-bottom));
+    left: 10px;
+    padding: 6px 6px 6px 14px;
+  }
+
+  .composer textarea {
+    max-height: 96px;
+    font-size: var(--frock-text-input);
+  }
+
+  .skill-chip-name {
+    max-width: 120px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+.message-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--frockbot-space-2, 0.5rem);
+  margin-top: var(--frockbot-space-2, 0.5rem);
+}
+
+.message-attachments img {
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frockbot-radius-small, 4px);
+  display: block;
+  max-width: 20rem;
+}