@openma/common 0.0.0-stage → 0.9.1

package/dist/chat-ui/styles.css

@@ -0,0 +1,815 @@
+/*
+ * Backchat chat structure. Hosts opt into this asset explicitly and map the
+ * --chat-* tokens to their own theme. Components never inject it from JS.
+ */
+
+:where(:root) {
+  --chat-interactive-hover-bg: color-mix(
+    in srgb,
+    var(--chat-fg, var(--fg, currentColor)) 8%,
+    transparent
+  );
+  --chat-interactive-selected-bg: var(
+    --chat-control-bg-selected,
+    var(
+      --chat-control-bg-hover,
+      var(--interaction-bg-hover, var(--chat-bg-bubble, transparent))
+    )
+  );
+  --chat-interactive-control-hover-bg: var(
+    --chat-control-bg-hover,
+    var(--interaction-bg-hover, var(--chat-bg-bubble, transparent))
+  );
+  --chat-interactive-focus-ring-color: color-mix(
+    in srgb,
+    var(--chat-focus-ring, var(--focus-ring, currentColor)) 40%,
+    transparent
+  );
+}
+
+/*
+ * Shared interactive control states (transcript rows, menus, session chips).
+ * Rest: no border/background/shadow. Hover uses variant token. Focus ring only
+ * on :focus-visible. Expanded/open/selected never mimic focus.
+ */
+button.chat-interactive-surface.chat-interactive-surface,
+summary.chat-interactive-surface.chat-interactive-surface {
+  outline: none;
+  box-shadow: none;
+}
+
+button.chat-interactive-surface.chat-interactive-surface:focus:not(:focus-visible),
+summary.chat-interactive-surface.chat-interactive-surface:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+  background-color: transparent;
+  background-image: none;
+  border-color: transparent;
+}
+
+button.chat-interactive-surface.chat-interactive-surface:focus-visible,
+summary.chat-interactive-surface.chat-interactive-surface:focus-visible {
+  outline: 2px solid var(--chat-interactive-focus-ring-color);
+  outline-offset: 1px;
+}
+
+button.chat-interactive-surface.chat-interactive-surface[aria-expanded="true"]:not(
+    :hover
+  ):not(:focus-visible),
+button.chat-interactive-surface.chat-interactive-surface[data-state="open"]:not(
+    :hover
+  ):not(:focus-visible),
+details[open]
+  > summary.chat-interactive-surface.chat-interactive-surface:not(:hover):not(
+    :focus-visible
+  ) {
+  background: transparent;
+  background-color: transparent;
+  box-shadow: none;
+  border-color: transparent;
+}
+
+button.chat-interactive-surface--transcript.chat-interactive-surface--transcript:hover,
+summary.chat-interactive-surface--transcript.chat-interactive-surface--transcript:hover,
+button.chat-interactive-surface--transcript.chat-reasoning-trigger.activity-disclosure-row:hover {
+  background: transparent;
+  background-color: transparent;
+  color: var(--chat-fg, var(--fg, currentColor));
+}
+
+button.chat-interactive-surface--transcript.activity-disclosure-row:hover
+  :is(
+    .chat-transcript-disclosure-summary,
+    .chat-activity-icon,
+    .activity-disclosure-chevron,
+    .activity-disclosure-chevron svg,
+    .activity-disclosure-chevron .text-fg-subtle
+  ),
+button.chat-interactive-surface--transcript.chat-reasoning-trigger.activity-disclosure-row:hover
+  :is(
+    .chat-transcript-disclosure-summary,
+    .activity-disclosure-chevron,
+    .activity-disclosure-chevron svg,
+    .activity-disclosure-chevron .text-fg-subtle
+  ) {
+  color: var(--chat-fg, var(--fg, currentColor));
+}
+
+button.chat-interactive-surface--control.chat-interactive-surface--control:hover,
+summary.chat-interactive-surface--control.chat-interactive-surface--control:hover {
+  background: var(--chat-interactive-control-hover-bg);
+}
+
+button.chat-interactive-surface--chip.chat-interactive-surface--chip:hover,
+summary.chat-interactive-surface--chip.chat-interactive-surface--chip:hover,
+button.chat-reasoning-trigger--chip.activity-disclosure-row:hover,
+.chat-reasoning-trigger.chat-reasoning-trigger--chip:hover {
+  background-color: var(
+    --chat-interactive-control-hover-bg,
+    var(--chat-interaction-bg-hover, var(--interaction-bg-hover, transparent))
+  );
+}
+
+button.chat-interactive-surface.chat-interactive-surface[aria-checked="true"]:not(
+    :hover
+  ):not(:focus-visible),
+summary.chat-interactive-surface.chat-interactive-surface[aria-checked="true"]:not(
+    :hover
+  ):not(:focus-visible) {
+  background: var(--chat-interactive-selected-bg);
+  background-color: var(--chat-interactive-selected-bg);
+}
+
+.chat-turn-frame {
+  padding-inline: var(
+    --chat-message-padding-inline,
+    var(--chat-turn-content-inset, 32px)
+  );
+}
+
+.chat-composer-frame {
+  padding-inline: var(--composer-frame-padding-inline, 12px);
+}
+
+.openma-session-run-controls {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.openma-session-history {
+  position: relative;
+  min-width: 0;
+}
+
+summary.openma-session-history-trigger.openma-session-history-trigger {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  height: var(--chat-session-history-height, 30px);
+  align-items: center;
+  gap: 5px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 7px;
+  color: var(--chat-fg, var(--fg, currentColor));
+  background: transparent;
+  box-shadow: none;
+  cursor: default;
+  list-style: none;
+  user-select: none;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 550;
+  line-height: inherit;
+}
+
+.openma-session-history-trigger::-webkit-details-marker {
+  display: none;
+}
+
+.openma-session-history-trigger > span {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.openma-session-history-trigger > svg {
+  flex: 0 0 auto;
+  color: var(--chat-fg-subtle, var(--fg-subtle, currentColor));
+  transition: transform 160ms ease;
+  width: 14px;
+  height: 14px;
+}
+
+.openma-session-history[open] > .openma-session-history-trigger > svg {
+  transform: rotate(180deg);
+}
+
+summary.openma-session-history-trigger.openma-session-history-trigger:hover {
+  color: var(--chat-fg, var(--fg, currentColor));
+}
+
+.openma-session-history-menu {
+  top: calc(100% + 5px);
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: auto;
+  min-width: min(260px, calc(100vw - 32px));
+}
+
+.openma-session-history-item {
+  align-items: center;
+}
+
+.openma-session-chip-menu {
+  position: relative;
+  min-width: 0;
+}
+
+.openma-session-run-menu {
+  margin-left: auto;
+}
+
+summary.openma-session-toolbar-chip.openma-session-toolbar-chip {
+  display: inline-flex;
+  min-width: 0;
+  max-width: var(--chat-session-chip-max-width, 180px);
+  height: 28px;
+  min-height: 28px;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 6px;
+  color: var(--chat-fg-muted, var(--fg-muted, currentColor));
+  background: transparent;
+  box-shadow: none;
+  cursor: default;
+  list-style: none;
+  user-select: none;
+  font-family: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+.openma-session-toolbar-chip::-webkit-details-marker {
+  display: none;
+}
+
+summary.openma-session-toolbar-chip > svg {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+}
+
+summary.openma-session-toolbar-chip > [data-harness-icon] {
+  width: 14px;
+  height: 14px;
+}
+
+summary.openma-session-toolbar-chip.openma-session-toolbar-chip:hover {
+  color: var(--chat-fg, var(--fg, currentColor));
+}
+
+summary.openma-session-toolbar-chip[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+summary.openma-session-toolbar-chip.is-warning {
+  color: var(--chat-warning, var(--warning, currentColor));
+}
+
+.openma-session-chip-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openma-session-menu {
+  position: absolute;
+  z-index: 1000;
+  bottom: calc(100% + 6px);
+  display: flex;
+  width: min(var(--chat-session-menu-width, 280px), calc(100vw - 32px));
+  max-height: min(360px, 55vh);
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid var(--chat-border, var(--border, currentColor));
+  border-radius: 10px;
+  color: var(--chat-fg, var(--fg, currentColor));
+  background: var(--chat-menu-bg, var(--bg, Canvas));
+  box-shadow: var(
+    --chat-menu-shadow,
+    0 10px 30px -12px rgb(0 0 0 / 0.25), 0 2px 8px -4px rgb(0 0 0 / 0.12)
+  );
+}
+
+.openma-session-menu-align-start {
+  left: 0;
+}
+
+.openma-session-menu-align-end {
+  right: 0;
+}
+
+.openma-session-run-root-menu {
+  width: min(280px, calc(100vw - 32px));
+}
+
+.openma-session-submenu {
+  position: absolute;
+  z-index: 1001;
+  right: calc(100% + 6px);
+  bottom: calc(100% + 6px);
+  display: flex;
+  width: min(280px, calc(100vw - 32px));
+  max-height: min(360px, 55vh);
+  flex-direction: column;
+  gap: 2px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid var(--chat-border, var(--border, currentColor));
+  border-radius: 10px;
+  color: var(--chat-fg, var(--fg, currentColor));
+  background: var(--chat-menu-bg, var(--bg, Canvas));
+  box-shadow: var(
+    --chat-menu-shadow,
+    0 10px 30px -12px rgb(0 0 0 / 0.25), 0 2px 8px -4px rgb(0 0 0 / 0.12)
+  );
+}
+
+.openma-session-menu-item.openma-session-submenu-trigger {
+  align-items: center;
+}
+
+.openma-session-submenu-trigger > .openma-session-menu-item-copy {
+  flex: 0 1 auto;
+}
+
+.openma-session-submenu-value {
+  min-width: 0;
+  max-width: 120px;
+  margin-left: auto;
+  overflow: hidden;
+  color: var(--chat-fg-subtle, var(--fg-subtle, currentColor));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+}
+
+.openma-session-submenu-trigger > svg:last-child {
+  width: 14px;
+  height: 14px;
+  margin-left: 2px;
+}
+
+.openma-session-submenu-choice {
+  align-items: center;
+}
+
+.openma-session-submenu-placeholder {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+}
+
+.openma-session-menu-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-block: 4px;
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--chat-border, var(--border, currentColor)) 55%, transparent);
+}
+
+.openma-session-menu-section:first-child {
+  padding-top: 0;
+}
+
+.openma-session-menu-section:last-child {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.openma-session-menu-heading {
+  display: flex;
+  min-height: 24px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 3px 8px;
+  color: var(--chat-fg-subtle, var(--fg-subtle, currentColor));
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.openma-session-menu-heading > :last-child:not(:first-child) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 400;
+}
+
+.openma-session-menu button.openma-session-menu-item.openma-session-menu-item,
+.openma-session-submenu button.openma-session-menu-item.openma-session-menu-item {
+  appearance: none;
+  -webkit-appearance: none;
+  display: flex;
+  width: 100%;
+  min-height: 28px;
+  height: auto;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 8px;
+  color: inherit;
+  background: transparent;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.openma-session-run-root-menu > .openma-session-menu-item {
+  min-height: 40px;
+}
+
+.openma-session-menu
+  button.chat-interactive-surface--control.openma-session-menu-item.openma-session-menu-item:hover,
+.openma-session-submenu
+  button.chat-interactive-surface--control.openma-session-menu-item.openma-session-menu-item:hover,
+.openma-session-menu
+  button.openma-session-menu-item.openma-session-menu-item:focus-visible,
+.openma-session-submenu
+  button.openma-session-menu-item.openma-session-menu-item:focus-visible {
+  background: var(--chat-interactive-control-hover-bg);
+  background-color: var(--chat-interactive-control-hover-bg);
+}
+
+.openma-session-menu button.openma-session-menu-item.is-warning,
+.openma-session-submenu button.openma-session-menu-item.is-warning {
+  color: var(--chat-warning, var(--warning, currentColor));
+}
+
+.openma-session-menu-item > svg {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+}
+
+.openma-session-menu-item > svg:last-child {
+  margin-left: auto;
+}
+
+.openma-session-menu-item-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.openma-session-menu-item-copy strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.openma-session-menu-item-copy small {
+  min-width: 0;
+  color: var(--chat-fg-subtle, var(--fg-subtle, currentColor));
+  overflow-wrap: anywhere;
+  white-space: normal;
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.openma-session-menu-item:has(.openma-session-menu-item-copy small) {
+  min-height: 48px;
+  align-items: flex-start;
+}
+
+.chat-activity-icon {
+  width: var(--chat-activity-icon-size, 14px);
+  height: var(--chat-activity-icon-size, 14px);
+}
+
+button.activity-disclosure-row.activity-disclosure-row,
+.activity-disclosure-row {
+  --chat-activity-row-leading-space: 0px;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  padding-inline-start: 0;
+  -webkit-user-select: none;
+  user-select: none;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  border-radius: 0;
+  color: var(--chat-fg-muted, var(--fg-muted, currentColor));
+  background: transparent;
+  box-shadow: none;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-align: left;
+  cursor: default;
+}
+
+/* Transcript disclosure rows (tools, thoughts, process/worked-for). */
+button.chat-interactive-surface--transcript.activity-disclosure-row.activity-disclosure-row {
+  width: 100%;
+  max-width: 100%;
+  min-height: 24px;
+  height: auto;
+  padding: 0;
+  padding-inline-start: 0;
+  font-size: 13px;
+}
+
+button.chat-interactive-surface--transcript.activity-disclosure-row
+  .chat-transcript-disclosure-summary,
+button.chat-interactive-surface--transcript.chat-reasoning-trigger.activity-disclosure-row
+  .chat-transcript-disclosure-summary {
+  color: var(--chat-fg-muted, var(--fg-muted, currentColor));
+}
+
+button.chat-interactive-surface--transcript.activity-disclosure-row
+  .chat-activity-icon {
+  color: var(--chat-fg-muted, var(--fg-muted, currentColor));
+}
+
+/* Standalone thought/reasoning chip (showIcon on ChatReasoningTrigger). */
+button.chat-reasoning-trigger.chat-reasoning-trigger--chip.activity-disclosure-row,
+button.chat-interactive-surface--chip.chat-reasoning-trigger--chip.activity-disclosure-row {
+  width: fit-content;
+  max-width: 100%;
+  padding: 0 8px;
+  padding-inline-start: 8px;
+  border-radius: 8px;
+  font-size: 13px;
+  background-color: var(--chat-bg-bubble, var(--bg-bubble, transparent));
+}
+
+.activity-disclosure-chevron {
+  display: grid;
+  width: 20px;
+  height: 20px;
+  margin-left: auto;
+  flex: 0 0 20px;
+  place-items: center;
+}
+
+.activity-disclosure-chevron > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.home-empty-stage {
+  position: relative;
+}
+
+.home-empty-stack {
+  --home-composer-width: var(--home-composer-theme-width, 42rem);
+  --home-empty-stack-offset-y: clamp(-24px, -3vh, -12px);
+  margin-top: var(--home-empty-stack-offset-y);
+}
+
+.home-composer-stack {
+  max-width: var(--home-composer-frame-width, 48rem);
+}
+
+.chat-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 160ms ease;
+}
+
+.chat-scrollbar[data-chat-scrolling="true"] {
+  scrollbar-color: color-mix(in srgb, var(--chat-fg, var(--fg, currentColor)) 30%, transparent) transparent;
+}
+
+.chat-scrollbar::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.chat-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-scrollbar::-webkit-scrollbar-thumb {
+  min-height: 40px;
+  max-height: 50%;
+  border: 3px solid transparent;
+  border-radius: 9999px;
+  background: transparent;
+  background-clip: padding-box;
+}
+
+.chat-scrollbar[data-chat-scrolling="true"]::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--chat-fg, var(--fg, currentColor)) 30%, transparent);
+  background-clip: padding-box;
+}
+
+.chat-scrollbar[data-chat-scrolling="true"]::-webkit-scrollbar-thumb:hover {
+  background: color-mix(
+    in srgb,
+    var(--chat-fg, var(--fg, currentColor)) 50%,
+    transparent
+  );
+  background-clip: padding-box;
+}
+
+.reasoning-collapse {
+  display: block;
+}
+
+.reasoning-collapse[data-state="open"] > .reasoning-collapse-inner {
+  height: auto;
+  opacity: 1;
+}
+
+.reasoning-collapse[data-state="closed"] > .reasoning-collapse-inner {
+  height: 0;
+  opacity: 0;
+}
+
+.reasoning-collapse-inner {
+  height: 0;
+  interpolate-size: allow-keywords;
+  min-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition-property: height, opacity;
+  transition-duration: var(
+    --chat-motion-disclosure-duration,
+    var(--motion-disclosure-duration, 220ms)
+  );
+  transition-timing-function: var(
+    --chat-motion-disclosure-easing,
+    var(--motion-disclosure-easing, cubic-bezier(0.25, 1, 0.5, 1))
+  );
+}
+
+/* The same settled/streaming block geometry prevents the final handoff jump. */
+.chat-markdown,
+.streaming-md {
+  min-width: 0;
+  color: var(--chat-fg, var(--fg, currentColor));
+  font-family: var(--font-chat, ui-sans-serif, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 1.75rem;
+}
+
+.chat-markdown--thought {
+  color: var(--chat-fg-muted, var(--fg-muted, currentColor));
+  font-size: 13px;
+  line-height: 1.5rem;
+}
+
+.chat-markdown :is(h1, h2, h3, h4),
+.streaming-md :is(h1, h2, h3, h4) {
+  margin-top: 0.75rem;
+  margin-bottom: 0.375rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+}
+
+.chat-markdown h1,
+.streaming-md h1 {
+  font-size: 16px;
+}
+
+.chat-markdown h2,
+.streaming-md h2 {
+  font-size: 15px;
+}
+
+.chat-markdown :is(h3, h4),
+.streaming-md :is(h3, h4) {
+  font-size: 14px;
+}
+
+.chat-markdown p,
+.streaming-md p,
+.chat-markdown :is(ul, ol),
+.streaming-md :is(ul, ol) {
+  margin-block: 0.375rem;
+}
+
+.chat-markdown ul,
+.streaming-md ul {
+  list-style: disc;
+  padding-left: 1.25rem;
+}
+
+.chat-markdown ol,
+.streaming-md ol {
+  list-style: decimal;
+  padding-left: 1.25rem;
+}
+
+.chat-markdown li,
+.streaming-md li {
+  margin-block: 0.125rem;
+  padding-block: 0;
+}
+
+.chat-markdown li > p,
+.streaming-md li > p {
+  margin-block: 0;
+}
+
+.chat-markdown pre,
+.streaming-md pre {
+  margin-block: 0.5rem;
+  overflow-x: auto;
+  border: 1px solid
+    color-mix(in srgb, var(--chat-border, var(--border, currentColor)) 60%, transparent);
+  border-radius: 0.5rem;
+  background: color-mix(
+    in srgb,
+    var(--chat-bg-surface, var(--bg-surface, transparent)) 60%,
+    transparent
+  );
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 13px;
+  line-height: 1.5rem;
+}
+
+.chat-markdown code,
+.streaming-md code {
+  border-radius: 0.25rem;
+  background: color-mix(
+    in srgb,
+    var(--chat-bg-surface, var(--bg-surface, transparent)) 70%,
+    transparent
+  );
+  padding: 0.1em 0.35em;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.9em;
+}
+
+.chat-markdown pre code,
+.streaming-md pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 13px;
+}
+
+.chat-markdown blockquote,
+.streaming-md blockquote {
+  margin-block: 0.5rem;
+  border-left: 2px solid var(--chat-border, var(--border, currentColor));
+  padding-left: 0.75rem;
+  color: var(--chat-fg-muted, var(--fg-muted, currentColor));
+}
+
+.chat-markdown table,
+.streaming-md table {
+  width: 100%;
+  margin-block: 0.5rem;
+  border-collapse: collapse;
+}
+
+.chat-markdown :is(th, td),
+.streaming-md :is(th, td) {
+  border: 1px solid
+    color-mix(in srgb, var(--chat-border, var(--border, currentColor)) 60%, transparent);
+  padding: 0.25rem 0.5rem;
+  font-size: 13px;
+  line-height: 1.5rem;
+}
+
+.chat-markdown th,
+.streaming-md th {
+  text-align: left;
+  font-weight: 600;
+}
+
+.chat-markdown a,
+.streaming-md a {
+  color: var(--chat-link, var(--chat-fg, var(--fg, currentColor)));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.chat-markdown > :first-child,
+.streaming-md > :first-child {
+  margin-top: 0;
+}
+
+.chat-markdown > :last-child,
+.streaming-md > :last-child {
+  margin-bottom: 0;
+}