@eaera-com/eaera-widgets-v2 0.1.85 → 0.1.87

package/dist/design-system/components/_chatbox.scss

@@ -0,0 +1,1176 @@
+// ============================================================================
+// EAERA CHAT BOX — AI assistant widget (floating + embedded)
+// Component: src/components/custom/EaeraChatBox.vue
+//
+// ALL chat-box styles live here (global stylesheet, BEM-ish naming with
+// the `chat-box-` prefix). Sub-components (message list, bubbles, composer,
+// history list, nav, markdown, code block, blocked state, typing indicator)
+// are style-free templates — every rule is below, organized in sections.
+// Uses --er-* custom properties (host app must provide design tokens).
+// ============================================================================
+
+// ── Panel shell ──────────────────────────────────────────────────────────────
+
+.chat-box-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--er-border-default);
+  border-radius: var(--er-shape-corner-200, 12px);
+  background: var(--er-surface-elevated);
+  box-shadow:
+    0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
+// Floating mode — fixed bottom-right, resizable via the panel composable.
+.chat-box-panel--floating {
+  position: fixed;
+  bottom: 96px;
+  right: 32px;
+  z-index: 90;
+  height: min(780px, calc(100vh - 140px));
+  width: min(640px, calc(100vw - 64px));
+}
+
+// Wide embedded — history becomes a side column instead of a stacked row.
+.chat-box-panel--sidebar {
+  flex-direction: row;
+}
+
+// ── History sidebar (wide embedded) ─────────────────────────────────────────
+
+.chat-box-sidebar {
+  // self-stretch (not h-full): the panel's height often comes only from
+  // min-height, and `height: 100%` cannot resolve against a min-height —
+  // it would collapse to fit-content. Stretch tracks the panel directly.
+  // Flex column so the inner history list can flex + scroll.
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  flex-shrink: 0;
+  overflow: hidden;
+  width: 0;
+  transition: width 200ms ease-out;
+}
+
+.chat-box-sidebar--open {
+  width: 240px;
+  border-right: 1px solid var(--er-border-default);
+}
+
+// (history list styles live in the MESSAGE LIST / HISTORY section below)
+
+// ── Header action buttons ────────────────────────────────────────────────────
+
+.chat-box-head-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 6px;
+  border-radius: 6px;
+  color: var(--er-text-secondary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+
+  &:hover {
+    background: var(--er-surface-hover);
+    color: var(--er-text-primary);
+  }
+}
+
+.chat-box-icon {
+  width: 16px;
+  height: 16px;
+}
+
+// ── Floating action button ───────────────────────────────────────────────────
+
+.chat-box-fab {
+  position: fixed;
+  bottom: 24px;
+  right: 32px;
+  z-index: 90;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 50%;
+  background: var(--er-primary-default);
+  color: var(--er-text-inverse, #fff);
+  cursor: pointer;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  transition: transform 200ms ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+.chat-box-fab--open {
+  transform: rotate(90deg);
+
+  &:hover {
+    transform: rotate(90deg) scale(1.05);
+  }
+}
+
+.chat-box-fab-icon {
+  width: 20px;
+  height: 20px;
+}
+
+// ── Header ───────────────────────────────────────────────────────────────────
+
+.chat-box-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--er-border-default);
+}
+
+.chat-box-header__title {
+  flex: 1 1 0%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: var(--er-text-primary);
+}
+
+.chat-box-head-btn--spin svg {
+  animation: spin 1s linear infinite;
+}
+
+// ── Main column + error line ────────────────────────────────────────────────
+
+// Main column — header + body. min-h-0 lets it shrink inside the flex
+// panel so the message list scrolls instead of overflowing.
+.chat-box-main {
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  flex: 1 1 0%;
+  flex-direction: column;
+}
+
+.chat-box-error {
+  margin: 0;
+  padding: 0 16px 4px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--er-text-danger);
+}
+
+// ── Resize handles (floating mode) ──────────────────────────────────────────
+
+.chat-box-resize-n {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  height: 6px;
+  cursor: ns-resize;
+}
+
+.chat-box-resize-w {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 6px;
+  cursor: ew-resize;
+}
+
+.chat-box-resize-nw {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 12px;
+  height: 12px;
+  cursor: nwse-resize;
+}
+
+// ── Embedded fluid mode / root ──────────────────────────────────────────────
+
+.chat-box-embedded {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.chat-box-panel--embedded {
+  height: 100%;
+  min-height: 520px;
+  width: 100%;
+}
+
+// ── FAB streaming ping dot ──────────────────────────────────────────────────
+
+.chat-box-fab__ping {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--er-success-default);
+  animation: chat-box-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes chat-box-ping {
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+// ── Panel enter/leave transition ────────────────────────────────────────────
+
+.chat-box-panel-enter-active {
+  transition:
+    opacity 150ms ease-out,
+    transform 150ms ease-out;
+}
+
+.chat-box-panel-enter-from {
+  opacity: 0;
+  transform: translateY(8px) scale(0.95);
+}
+
+.chat-box-panel-leave-active {
+  transition:
+    opacity 100ms ease-in,
+    transform 100ms ease-in;
+}
+
+.chat-box-panel-leave-to {
+  opacity: 0;
+  transform: translateY(8px) scale(0.95);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// MESSAGE LIST
+// ═══════════════════════════════════════════════════════════════════════════
+
+.chat-box-msglist {
+  position: relative;
+  min-height: 0;
+  flex: 1 1 0%;
+}
+
+.chat-box-msglist__scroll {
+  height: 100%;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.chat-box-msglist__inner {
+  margin-inline: auto;
+  height: 100%;
+  max-width: 860px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.chat-box-msglist__empty {
+  display: flex;
+  flex: 1 1 0%;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--er-text-muted);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// MESSAGE BUBBLE
+// ═══════════════════════════════════════════════════════════════════════════
+
+.chat-box-msg {
+  display: flex;
+  flex-direction: column;
+}
+
+// NOTE: the `eaera-chat-box-message-bubble--user/--assistant` classes MUST
+// stay — EaeraChatBoxMessageNav queries
+// `[data-msg-id].eaera-chat-box-message-bubble--user`.
+
+.eaera-chat-box-message-bubble--user {
+  align-items: flex-end;
+}
+
+.eaera-chat-box-message-bubble--assistant {
+  align-items: stretch;
+}
+
+.chat-box-msg__files {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.chat-box-attachment {
+  display: inline-flex;
+  max-width: 240px;
+  align-items: center;
+  gap: 6px;
+  border-radius: 8px;
+  border: 1px solid var(--er-border-default);
+  background: var(--er-surface-elevated);
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--er-text-secondary);
+
+  &-icon {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+
+  &-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-size {
+    flex-shrink: 0;
+    font-size: 10px;
+    line-height: 1.4;
+    color: var(--er-text-muted);
+  }
+}
+
+.chat-box-user-bubble {
+  max-width: 85%;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  border-radius: 16px;
+  border-bottom-right-radius: 6px;
+  background: var(--er-primary-default);
+  padding: 8px 14px;
+  font-size: 13.5px;
+  line-height: 1.625;
+  color: var(--er-text-inverse, #fff);
+}
+
+.chat-box-msg__meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  padding-right: 4px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--er-text-muted);
+}
+
+.chat-box-msg__copy-btn {
+  border-radius: 4px;
+  padding: 2px;
+  transition: color 150ms ease;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+
+  &:hover {
+    color: var(--er-text-primary);
+  }
+}
+
+.chat-box-msg__copy-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.chat-box-msg__copy-icon--ok {
+  color: var(--er-success-default);
+}
+
+// Assistant header: avatar + name
+.chat-box-msg__head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.chat-box-msg__avatar {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--er-primary-default);
+  color: var(--er-text-inverse, #fff);
+}
+
+.chat-box-msg__avatar-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.chat-box-msg__name {
+  font-size: 13px;
+  line-height: 1.4;
+  font-weight: 600;
+  color: var(--er-text-primary);
+}
+
+.chat-box-msg__state {
+  margin-bottom: 6px;
+  width: fit-content;
+}
+
+.chat-box-msg__state-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.chat-box-msg__state-spinner {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1px solid currentColor;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+
+.chat-box-msg__state-icon-ok,
+.chat-box-msg__state-icon-alert {
+  width: 12px;
+  height: 12px;
+}
+
+.chat-box-assistant-card {
+  min-width: 0;
+  border-radius: 12px;
+  border: 1px solid var(--er-border-default);
+  background: var(--er-surface-default);
+  padding: 10px 14px;
+  font-size: 13.5px;
+  line-height: 1.625;
+  color: var(--er-text-primary);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.chat-box-msg__foot {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--er-text-muted);
+}
+
+.chat-box-msg__error {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--er-text-danger);
+}
+
+// EaeraTag plain content alignment inside the bubble.
+.chat-box-msg .el-tag__content {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+// User-bubble markdown — white on primary background overrides.
+.chat-box-msg--user .chat-box-md {
+  color: var(--er-text-inverse, #fff);
+
+  a {
+    color: inherit;
+  }
+
+  blockquote {
+    border-left-color: color-mix(in srgb, white 40%, transparent);
+    color: color-mix(in srgb, white 80%, transparent);
+  }
+
+  :not(pre) > code {
+    background: color-mix(in srgb, white 20%, transparent);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// MESSAGE NAV (floating ↑ ● ↓ cluster)
+// ═══════════════════════════════════════════════════════════════════════════
+
+.chat-box-msg-nav {
+  position: absolute;
+  top: 50%;
+  right: 24px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  transform: translateY(-50%);
+}
+
+// Button look (circle, border, surface) comes from EaeraButton isIconOnly —
+// only the nav-specific states live here.
+.chat-box-nav-btn {
+  position: relative;
+  flex-shrink: 0;
+
+  &--dim {
+    opacity: 0.4;
+  }
+
+  // dim variants follow the nav INDEX (which user turn is current), not the
+  // raw scroll position — edges of the conversation are what matter.
+  &--active {
+    border-color: var(--er-primary-default);
+    color: var(--er-primary-default);
+    box-shadow: none;
+  }
+}
+
+.chat-box-nav-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.chat-box-nav-icon--list {
+  width: 18px;
+  height: 18px;
+}
+
+.chat-box-nav-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: 50%;
+  background: var(--er-primary-default);
+  color: var(--er-text-inverse);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// COMPOSER
+// ═══════════════════════════════════════════════════════════════════════════
+
+.chat-box-composer {
+  margin-inline: auto;
+  width: 100%;
+  max-width: 920px;
+  padding: 4px 16px 8px;
+}
+
+.chat-box-composer__card {
+  border-radius: 12px;
+  border: 1px solid var(--er-border-default);
+  background: var(--er-surface-default);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: border-color 150ms ease;
+
+  &:focus-within {
+    border-color: var(--er-primary-default);
+  }
+}
+
+.chat-box-composer__files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 10px 12px 0;
+}
+
+.chat-box-composer__file-remove {
+  border-radius: 4px;
+  padding: 2px;
+  color: var(--er-text-muted);
+  transition: color 150ms ease;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--er-text-danger);
+  }
+}
+
+.chat-box-composer__remove-icon {
+  width: 12px;
+  height: 12px;
+}
+
+// Input — EaeraInput text field (borderless inside the card).
+// Doubled class = (0,4,0): must out-rank the EaeraInput `.custom-input`
+// skin (0,3,0) REGARDLESS of stylesheet order — in the bundled style.css
+// this rule lands before the wrapper's default skin and a plain tie would
+// lose the cascade.
+.chat-box-composer-input.chat-box-composer-input {
+  .el-textarea__inner {
+    border: none;
+    background: transparent;
+    box-shadow: none !important;
+    resize: none;
+    padding: 10px 12px 4px;
+    font-size: 13.5px;
+    line-height: 1.625;
+    color: var(--er-text-primary);
+
+    &::placeholder {
+      color: var(--er-text-muted);
+    }
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+}
+
+.chat-box-composer__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 10px 8px;
+}
+
+.chat-box-composer__toolbar-left {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 4px;
+}
+
+.chat-box-composer__toolbar-right {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.chat-box-tool-btn {
+  border-radius: 6px;
+  padding: 6px;
+  color: var(--er-text-secondary);
+  transition:
+    color 150ms ease,
+    background-color 150ms ease;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--er-surface-hover);
+    color: var(--er-text-primary);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+}
+
+.chat-box-tool-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.chat-box-tool-icon--sm {
+  width: 14px;
+  height: 14px;
+}
+
+.chat-box-composer__agent {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 4px;
+  border-radius: 6px;
+  padding: 4px 6px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--er-text-secondary);
+}
+
+.chat-box-composer__agent-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-box-composer__agent-chevron {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  color: var(--er-text-muted);
+}
+
+.chat-box-composer__counter {
+  font-size: 11px;
+  line-height: 1.4;
+  font-variant-numeric: tabular-nums;
+  color: var(--er-text-muted);
+
+  &--limit {
+    color: var(--er-text-danger);
+  }
+}
+
+.chat-box-composer__mode {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 6px;
+  border: 1px solid var(--er-border-default);
+  padding: 2px 6px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--er-text-secondary);
+}
+
+.chat-box-composer__mode-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--er-success-default);
+}
+
+.chat-box-composer__mode-chevron {
+  width: 12px;
+  height: 12px;
+  color: var(--er-text-muted);
+}
+
+.chat-box-composer__footer {
+  margin: 4px 0 0;
+  text-align: center;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--er-text-muted);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// HISTORY LIST
+// ═══════════════════════════════════════════════════════════════════════════
+
+.chat-box-history {
+  min-height: 0;
+  flex: 1 1 0%;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.chat-box-history__empty {
+  display: flex;
+  height: 100%;
+  min-height: 10rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  text-align: center;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--er-text-muted);
+}
+
+.chat-box-history__item {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 10px;
+  border-radius: 8px;
+  padding: 10px 12px;
+  transition: background-color 150ms ease;
+
+  &:hover,
+  &:focus-visible {
+    background: var(--er-surface-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &--active,
+  &--active:hover {
+    background: var(--er-action-primary-subtle);
+  }
+
+  // Delete button is revealed on row hover.
+  &:hover &-delete,
+  &:focus-visible &-delete {
+    opacity: 1;
+  }
+}
+
+.chat-box-history__dot {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--er-success-default);
+}
+
+.chat-box-history__name {
+  min-width: 0;
+  flex: 1 1 0%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--er-text-primary);
+}
+
+.chat-box-history__delete {
+  flex-shrink: 0;
+  border-radius: 6px;
+  padding: 4px;
+  color: var(--er-text-muted);
+  opacity: 0;
+  transition:
+    opacity 150ms ease,
+    color 150ms ease,
+    background-color 150ms ease;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--er-surface-hover);
+    color: var(--er-text-danger);
+  }
+}
+
+.chat-box-history__delete-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.chat-box-history__loading {
+  padding: 16px 12px;
+  text-align: center;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--er-text-muted);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// MARKDOWN (chat-box-md)
+// ═══════════════════════════════════════════════════════════════════════════
+
+.chat-box-md {
+  min-width: 0;
+  overflow-wrap: break-word;
+  font-size: 13.5px;
+  line-height: 1.625;
+  color: var(--er-text-primary);
+
+  a {
+    color: var(--er-primary-default);
+    text-decoration: underline;
+  }
+
+  p {
+    margin: 6px 0;
+  }
+
+  h1 {
+    margin: 12px 0 6px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  h2 {
+    margin: 12px 0 6px;
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  h3 {
+    margin: 10px 0 4px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  h4 {
+    margin: 8px 0 4px;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  ul {
+    margin: 6px 0;
+    padding-left: 20px;
+    list-style: disc;
+  }
+
+  ol {
+    margin: 6px 0;
+    padding-left: 20px;
+    list-style: decimal;
+  }
+
+  li {
+    margin: 2px 0;
+  }
+
+  blockquote {
+    margin: 6px 0;
+    padding-left: 12px;
+    border-left: 2px solid var(--er-border-default);
+    color: var(--er-text-muted);
+  }
+
+  hr {
+    margin: 12px 0;
+    border-color: var(--er-border-default);
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  :not(pre) > code {
+    padding: 1px 4px;
+    border-radius: 4px;
+    font-size: 12px;
+    background: var(--er-surface-hover);
+  }
+
+  pre {
+    margin: 8px 0;
+    padding: 12px;
+    overflow-x: auto;
+    border-radius: 8px;
+    font-size: 12.5px;
+  }
+
+  table {
+    margin: 8px 0;
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+
+    th {
+      padding: 4px 8px;
+      border: 1px solid var(--er-border-default);
+      text-align: left;
+      font-weight: 600;
+    }
+
+    td {
+      padding: 4px 8px;
+      border: 1px solid var(--er-border-default);
+    }
+  }
+
+  *:first-child {
+    margin-top: 0;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// CODE BLOCK (chat-box-code-*)
+// ═══════════════════════════════════════════════════════════════════════════
+
+.chat-box-code-card {
+  margin: 8px 0;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid var(--er-border-default);
+  background: var(--er-surface-default);
+}
+
+.chat-box-code-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--er-border-default);
+  padding: 6px 12px;
+}
+
+.chat-box-code-lang {
+  font-size: 11px;
+  line-height: 1.4;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--er-text-muted);
+}
+
+.chat-box-code-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.chat-box-code-btn {
+  border-radius: 4px;
+  padding: 4px;
+  color: var(--er-text-muted);
+  transition:
+    color 150ms ease,
+    background-color 150ms ease;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--er-surface-hover);
+    color: var(--er-text-primary);
+  }
+
+  &--ok {
+    color: var(--er-success-default);
+  }
+}
+
+.chat-box-code-btn-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.chat-box-code-body {
+  overflow-x: auto;
+  padding: 12px;
+  font-size: 12.5px;
+  line-height: 1.625;
+
+  // Shiki emits hard-coded github-light colors INLINE on every token span
+  // (black body, blue strings…). The chat surface can be dark even when the
+  // host page never sets `html.dark`, so always collapse the whole block to
+  // the design-system text token — near-white in dark themes, token-driven,
+  // never hard-coded. `!important` is required to beat Shiki's inline styles.
+  pre.shiki {
+    background: transparent !important;
+    margin: 0;
+
+    code,
+    code span {
+      color: var(--er-text-primary) !important;
+    }
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// BLOCKED STATE
+// ═══════════════════════════════════════════════════════════════════════════
+
+.chat-box-blocked {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 0%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  overflow-y: auto;
+  padding: 24px 20px;
+  text-align: center;
+}
+
+.chat-box-blocked__title {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.4;
+  font-weight: 600;
+  color: var(--er-text-primary);
+}
+
+.chat-box-blocked__lead {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.625;
+  color: var(--er-text-muted);
+}
+
+.chat-box-blocked__retry {
+  margin-top: 4px;
+  align-self: center;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// TYPING INDICATOR
+// ═══════════════════════════════════════════════════════════════════════════
+
+.chat-box-typing {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  padding: 8px 0;
+}
+
+.chat-box-typing__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--er-text-muted);
+  animation: chat-box-bounce 0.9s infinite ease-in-out;
+
+  &:nth-child(1) {
+    animation-delay: 0ms;
+  }
+
+  &:nth-child(2) {
+    animation-delay: 150ms;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 300ms;
+  }
+}
+
+@keyframes chat-box-bounce {
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+// ── Shared spin keyframe (header sync button, state pill) ───────────────────
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}