[data-persona-root] {
  all: initial;
  font-family: var(--persona-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif);
  font-size: var(--persona-font-size, 1rem);
  font-weight: var(--persona-font-weight, 400);
  line-height: var(--persona-line-height, 1.5);
  
  /* Theme-aware markdown variables - inherit from theme colors set by JavaScript */
  --persona-md-code-block-bg: var(--persona-container, #f3f4f6);
  --persona-md-code-block-border-color: var(--persona-border, #e5e7eb);
  --persona-md-inline-code-bg: var(--persona-container, #f3f4f6);
  --persona-md-inline-code-color: var(--persona-text, #111827);
  --persona-md-table-border-color: var(--persona-border, #e5e7eb);
  --persona-md-table-header-bg: var(--persona-container, #f8fafc);
  --persona-md-hr-color: var(--persona-divider, #e5e7eb);
  --persona-md-blockquote-border-color: var(--persona-accent, #0f0f0f);
  --persona-md-blockquote-text-color: var(--persona-muted, #6b7280);
}

[data-persona-root] * {
  box-sizing: border-box;
}

.persona-flex {
  display: flex;
}

.persona-grid {
  display: grid;
}

.persona-h-full {
  height: 100%;
}

.persona-h-1 {
  height: 0.25rem;
}

.persona-w-full {
  width: 100%;
}

.persona-flex-col {
  flex-direction: column;
}

.persona-flex-wrap {
  flex-wrap: wrap;
}

.persona-items-center {
  align-items: center;
}

.persona-items-end {
  align-items: flex-end;
}

.persona-items-start {
  align-items: flex-start;
}

.persona-justify-center {
  justify-content: center;
}

.persona-justify-between {
  justify-content: space-between;
}

.persona-justify-end {
  justify-content: flex-end;
}

.persona-gap-1 {
  gap: 0.25rem;
}

.persona-gap-2 {
  gap: 0.5rem;
}

.persona-gap-1\.5 {
  gap: 0.375rem;
}

.persona-gap-3 {
  gap: 0.75rem;
}

.persona-gap-6 {
  gap: 1.5rem;
}

[data-persona-root] .persona-widget-container .persona-attachment-drop-overlay {
  display: none;
  position: absolute;
  inset: var(--persona-drop-overlay-inset, 0);
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
  background: var(--persona-drop-overlay-bg, rgba(59, 130, 246, 0.08));
  -webkit-backdrop-filter: blur(var(--persona-drop-overlay-blur, 8px));
  backdrop-filter: blur(var(--persona-drop-overlay-blur, 8px));
  border: var(--persona-drop-overlay-border, 2px dashed rgba(59, 130, 246, 0.4));
  border-radius: var(--persona-drop-overlay-radius, inherit);
  transition: opacity 0.15s ease;
}

[data-persona-root] .persona-widget-container .persona-attachment-drop-overlay .persona-drop-overlay-label {
  font-size: var(--persona-drop-overlay-label-size, 0.875rem);
  color: var(--persona-drop-overlay-label-color, rgba(59, 130, 246, 0.8));
  font-weight: 500;
  user-select: none;
}

[data-persona-root] .persona-widget-container.persona-attachment-drop-active .persona-attachment-drop-overlay {
  display: flex;
}

/* Widget CSS Variables - scoped to widget root to avoid polluting global namespace */
[data-persona-root] {
  --persona-radius-sm: 0.125rem;
  --persona-radius-md: 0.375rem;
  --persona-radius-lg: 0.5rem;
  --persona-radius-xl: 0.75rem;
  --persona-launcher-radius: 9999px;
  --persona-button-radius: 9999px;
  --persona-panel-radius: var(--persona-radius-xl);
  --persona-input-radius: var(--persona-radius-lg);
  --persona-message-user-radius: var(--persona-radius-lg);
  --persona-message-assistant-radius: var(--persona-radius-lg);

  /* Markdown Header Variables */
  --persona-md-h1-size: 1.5rem;
  --persona-md-h1-weight: 700;
  --persona-md-h1-margin: 1rem 0 0.5rem;
  --persona-md-h1-line-height: 1.25;
  --persona-md-h2-size: 1.25rem;
  --persona-md-h2-weight: 700;
  --persona-md-h2-margin: 0.875rem 0 0.5rem;
  --persona-md-h2-line-height: 1.3;
  --persona-md-h3-size: 1.125rem;
  --persona-md-h3-weight: 600;
  --persona-md-h3-margin: 0.75rem 0 0.375rem;
  --persona-md-h3-line-height: 1.4;
  --persona-md-h4-size: 1rem;
  --persona-md-h4-weight: 600;
  --persona-md-h4-margin: 0.625rem 0 0.25rem;
  --persona-md-h4-line-height: 1.5;
  --persona-md-h5-size: 0.875rem;
  --persona-md-h5-weight: 600;
  --persona-md-h5-margin: 0.5rem 0 0.25rem;
  --persona-md-h5-line-height: 1.5;
  --persona-md-h6-size: 0.75rem;
  --persona-md-h6-weight: 600;
  --persona-md-h6-margin: 0.5rem 0 0.25rem;
  --persona-md-h6-line-height: 1.5;

  /* Markdown Table Variables */
  --persona-md-table-border-color: var(--persona-border, #e5e7eb);
  --persona-md-table-header-bg: var(--persona-container, #f8fafc);
  --persona-md-table-header-weight: 600;
  --persona-md-table-cell-padding: 0.5rem 0.75rem;
  --persona-md-table-border-radius: 0.375rem;

  /* Markdown Horizontal Rule Variables */
  --persona-md-hr-color: var(--persona-divider, #e5e7eb);
  --persona-md-hr-height: 1px;
  --persona-md-hr-margin: 1rem 0;

  /* Markdown Blockquote Variables */
  --persona-md-blockquote-border-color: #171717;
  --persona-md-blockquote-border-width: 3px;
  --persona-md-blockquote-padding: 0.5rem 1rem;
  --persona-md-blockquote-margin: 0.5rem 0;
  --persona-md-blockquote-bg: transparent;
  --persona-md-blockquote-text-color: #6b7280;
  --persona-md-blockquote-font-style: italic;

  /* Markdown Code Block Variables */
  --persona-md-code-block-bg: var(--persona-container, #f3f4f6);
  --persona-md-code-block-border-color: var(--persona-border, #e5e7eb);
  --persona-md-code-block-text-color: inherit;
  --persona-md-code-block-padding: 0.75rem;
  --persona-md-code-block-border-radius: 0.375rem;
  --persona-md-code-block-font-size: 0.875rem;

  /* Markdown Inline Code Variables */
  --persona-md-inline-code-bg: #f3f4f6;
  --persona-md-inline-code-padding: 0.125rem 0.375rem;
  --persona-md-inline-code-border-radius: 0.25rem;
  --persona-md-inline-code-font-size: 0.875em;

  /* Markdown Strong/Em Variables */
  --persona-md-strong-weight: 600;
  --persona-md-em-style: italic;
}

.persona-rounded-xl {
  border-radius: var(--persona-radius-sm);
}

.persona-rounded-lg {
  border-radius: var(--persona-radius-md);
}

.persona-rounded-2xl {
  border-radius: var(--persona-radius-lg);
}

.persona-rounded {
  border-radius: var(--persona-radius-sm, 0.125rem);
}

.persona-rounded-md {
  border-radius: var(--persona-radius-md, 0.375rem);
}

.persona-rounded-b {
  border-bottom-left-radius: var(--persona-radius-sm, 0.125rem);
  border-bottom-right-radius: var(--persona-radius-sm, 0.125rem);
}

.persona-rounded-full {
  border-radius: var(--persona-launcher-radius);
}

.persona-rounded-launcher {
  border-radius: var(--persona-launcher-radius);
}

.persona-rounded-button {
  border-radius: var(--persona-button-radius);
}

.persona-overflow-hidden {
  overflow: hidden;
}

.persona-overflow-auto {
  overflow: auto;
}

.persona-max-h-\[300px\] {
  max-height: 300px;
}

.persona-bg-persona-surface {
  background-color: var(--persona-surface, #ffffff);
}

.persona-bg-persona-container {
  background-color: var(--persona-container, #f8fafc);
}

.persona-bg-persona-input-background {
  background-color: var(--persona-input-background, #ffffff);
}

.persona-bg-white {
  background-color: #ffffff;
}

.persona-bg-transparent {
  background-color: transparent;
}

.persona-bg-gray-100 {
  background-color: #f3f4f6;
}

.persona-bg-gray-200 {
  background-color: #e5e7eb;
}

.persona-text-persona-primary {
  color: var(--persona-primary, #171717);
}

.persona-text-persona-call-to-action {
  color: var(--persona-call-to-action, var(--persona-text-inverse, #ffffff));
}

.persona-text-persona-muted {
  color: var(--persona-muted, #6b7280);
}

.persona-text-white {
  color: #ffffff;
}

.persona-bg-persona-accent {
  background-color: var(--persona-accent, #0f0f0f);
}

.persona-bg-persona-primary {
  background-color: var(--persona-button-primary-bg, var(--persona-primary, #111827));
}

.persona-italic {
  font-style: italic;
}

.persona-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.persona-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.persona-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.persona-text-xxs {
  font-size: 0.5rem;
  line-height: 1rem;
}

.persona-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.persona-text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.persona-font-semibold {
  font-weight: 600;
}

.persona-font-medium {
  font-weight: 500;
}

.persona-font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.persona-text-\[11px\] {
  font-size: 11px;
}

.persona-text-center {
  text-align: center;
}

.persona-text-persona-secondary {
  color: var(--persona-secondary, #4b5563);
}

.persona-leading-none {
  line-height: 1;
}

.persona-whitespace-nowrap {
  white-space: nowrap;
}

.persona-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona-break-all {
  word-break: break-all;
}

.persona-break-words {
  overflow-wrap: break-word;
  word-break: break-word;
}

.persona-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.persona-px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.persona-px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.persona-py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.persona-py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.persona-py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.persona-py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.persona-py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.persona-py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.persona-pr-3 {
  padding-right: 0.75rem;
}

.persona-pl-3 {
  padding-left: 0.75rem;
}

.persona-pl-7 {
  padding-left: 1.75rem;
}

.persona-pr-7 {
  padding-right: 1.75rem;
}

.persona-pl-8 {
  padding-left: 2rem;
}

.persona-pb-0 {
  padding-bottom: 0;
}

.persona-p-6 {
  padding: 1.5rem;
}

.persona-p-0 {
  padding: 0;
}

.persona-p-3 {
  padding: 0.75rem;
}

.persona-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.persona-px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.persona-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.persona-py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.persona-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.persona-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.persona-mt-2 {
  margin-top: 0.5rem;
}

.persona-ml-auto {
  margin-left: auto;
}

.persona-m-0 {
  margin: 0;
}

.persona-mb-1 {
  margin-bottom: 0.25rem;
}

.persona-ml-4 {
  margin-left: 1rem;
}

.persona-mr-3 {
  margin-right: 0.75rem;
}

.persona-text-right {
  text-align: right;
}

.disabled\:persona-opacity-50:disabled {
  opacity: 0.5;
}

.persona-shadow-2xl {
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.35);
}

.persona-shadow-sm {
  box-shadow: 0 5px 15px rgba(15, 23, 42, 0.08);
}

.persona-shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}

.persona-shadow-lg {
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.persona-border {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(148, 163, 184, 0.28);
}

.persona-border-none {
  border: none;
}

.persona-border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(148, 163, 184, 0.28);
}

.persona-border-gray-100 {
  border-color: #f1f5f9;
}

.persona-border-persona-secondary {
  border-color: var(--persona-secondary, #7c3aed);
}

.persona-border-persona-border {
  border-color: var(--persona-border, #e5e7eb);
}

.persona-border-t {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(148, 163, 184, 0.28);
}

.persona-border-t-persona-border {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--persona-border, #f1f5f9);
}

.persona-border-b-persona-border {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--persona-border, #f1f5f9);
}

.persona-border-t-persona-divider {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--persona-divider, #f1f5f9);
}

.persona-border-b-persona-divider {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--persona-divider, #f1f5f9);
}

.persona-border-persona-divider {
  border-color: var(--persona-divider, #f1f5f9);
}

.persona-border-persona-message-border {
  border-color: var(--persona-message-border, #f1f5f9);
}

.persona-fixed {
  position: fixed;
}

.persona-bottom-6 {
  bottom: 1.5rem;
}

.persona-top-6 {
  top: 1.5rem;
}

.persona-right-6 {
  right: 1.5rem;
}

.persona-left-6 {
  left: 1.5rem;
}

.persona-top-1\/2 {
  top: 50%;
}

.persona-left-1\/2 {
  left: 50%;
}

.persona-bottom-3 {
  bottom: 0.75rem;
}

.persona-right-5 {
  right: 1.25rem;
}

.persona-place-items-center {
  place-items: center;
}

.persona-h-8 {
  height: 2rem;
}

.persona-w-8 {
  width: 2rem;
}

.persona-h-10 {
  height: 2.5rem;
}

.persona-w-10 {
  width: 2.5rem;
}

.persona-h-12 {
  height: 3rem;
}

.persona-w-12 {
  width: 3rem;
}

.persona-leading-relaxed {
  line-height: 1.75;
}

.persona-max-w-\[85\%\] {
  max-width: 85%;
}

.persona-transition {
  transition: transform 160ms ease, background-color 160ms ease,
    box-shadow 160ms ease, opacity 160ms ease;
}

.persona-translate-y-\[-2px\] {
  transform: translateY(-2px);
}

.persona-transform {
  /* Enables transform context */
}

.persona--translate-x-1\/2 {
  transform: translateX(-50%);
}

.persona--translate-y-1\/2 {
  transform: translateY(-50%);
}

.persona-opacity-0 {
  opacity: 0;
}

.persona-opacity-100 {
  opacity: 1;
}

.persona-scale-100 {
  transform: scale(1);
}

.persona-scale-95 {
  transform: scale(0.95);
}

.persona-bg-\[\#f8fafc\] {
  background-color: #f8fafc;
}

.persona-flex-shrink-0 {
  flex-shrink: 0;
}

.persona-shrink-0 {
  flex-shrink: 0;
}

.persona-min-w-0 {
  min-width: 0;
}

.persona-w-4 {
  width: 1rem;
}

.persona-w-\[28px\] {
  width: 28px;
}

.persona-w-\[70px\] {
  width: 70px;
}

.persona-flex-1 {
  flex: 1 1 0%;
}

.persona-gap-3 {
  gap: 0.75rem;
}

.persona-bg {
  background-color: var(--persona-surface, #ffffff);
}

.persona-inline-flex {
  display: inline-flex;
}

.persona-text-left {
  text-align: left;
}

.persona-text-right {
  text-align: right;
}

.persona-mb-3 {
  margin-bottom: 0.75rem;
}

.persona-mt-2 {
  margin-top: 0.5rem;
}

.persona-h-12,
.persona-w-12,
.persona-h-10,
.persona-w-10,
.persona-h-8,
.persona-w-8 {
  flex: none;
}

.persona-text-right {
  text-align: right;
}

.hover\:persona-bg-gray-200:hover {
  background-color: #e5e7eb;
}

.hover\:persona-bg-persona-container:hover {
  background-color: var(--persona-container, #f8fafc);
}

.hover\:persona-text-persona-primary:hover {
  color: var(--persona-primary, #111827);
}

.hover\:persona-translate-y-\[-2px\]:hover {
  transform: translateY(-2px);
}

.persona-pointer-events-none {
  pointer-events: none;
}

.persona-pointer-events-auto {
  pointer-events: auto;
}

.persona-min-h-\[1\.5rem\] {
  min-height: 1.5rem;
}

.persona-min-h-0 {
  min-height: 0;
}

.persona-resize-none {
  resize: none;
}

.persona-z-10 {
  z-index: 10;
}

.persona-z-50 {
  z-index: 50;
}

.persona-absolute {
  position: absolute;
}

.persona-right-4 {
  right: 1rem;
}

.persona-top-4 {
  top: 1rem;
}

.persona-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.persona-grid {
  display: grid;
}

.persona-place-items-center {
  place-items: center;
}

.persona-relative {
  position: relative;
}

.persona-overflow-y-auto {
  overflow-y: auto;
}

.persona-overflow-x-auto {
  overflow-x: auto;
}

.persona-widget-body {
  overscroll-behavior: contain;
}

.persona-overflow-hidden {
  overflow: hidden;
}

.persona-min-h-\[320px\] {
  min-height: 320px;
}

.persona-min-h-\[48px\] {
  min-height: 48px;
}

.persona-min-w-\[320px\] {
  min-width: 320px;
}

.persona-max-w-\[420px\] {
  max-width: 420px;
}

.persona-w-\[360px\] {
  width: 360px;
}

.persona-w-\[400px\] {
  width: 400px;
}

.persona-h-\[640px\] {
  height: 640px;
}

.persona-border-transparent {
  border-color: transparent;
}

.persona-outline-none:focus {
  outline: none;
}

.persona-border-none:focus {
  border: none !important;
  outline: none !important;
}

/* Ensure textarea in composer form has no border on focus */
.persona-widget-composer textarea:focus {
  border: none !important;
  outline: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Prevent iOS Safari from zooming on input focus (requires 16px minimum) */
@media (hover: none) and (pointer: coarse) {
  .persona-composer-textarea {
    font-size: 1rem !important;
  }
}

/* Prevent form container from showing focus styles */
.persona-widget-composer:focus-within {
  outline: none !important;
}

.persona-widget-composer:focus-within textarea {
  border: none !important;
  outline: none !important;
}

.persona-whitespace-pre-wrap {
  white-space: pre-wrap;
}

.persona-space-y-1 > * + * {
  margin-top: 0.25rem;
}

.persona-space-y-3 > * + * {
  margin-top: 0.75rem;
}

.persona-space-y-4 > * + * {
  margin-top: 1rem;
}

.persona-form-card {
  background-color: var(--persona-surface, #ffffff);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--persona-radius-md, 0.375rem);
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.persona-widget-container {
  position: relative;
  border-radius: var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem));
}

.persona-widget-composer {
  border-radius: var(--persona-input-radius, var(--persona-radius-lg, 0.5rem));
  box-shadow: var(--persona-composer-shadow, none);
}

.persona-form-grid {
  display: flex;
  flex-direction: column;
}

.persona-form-field {
  display: flex;
  flex-direction: column;
}

.persona-cursor-pointer {
  cursor: pointer;
}

/* Send button tooltip */
.persona-send-button-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.persona-send-button-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--persona-tooltip-background, #111827);
  color: var(--persona-tooltip-foreground, #ffffff);
  padding: 6px 12px;
  border-radius: var(--persona-radius-sm, 0.125rem);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1000;
}

.persona-send-button-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--persona-tooltip-background, #111827);
}

.persona-send-button-wrapper:hover .persona-send-button-tooltip,
.persona-send-button-wrapper:focus-within .persona-send-button-tooltip {
  opacity: 1;
}

/* Hide tooltips on touch devices: hover doesn't exist, and they cause clipping issues */
@media (hover: none), (max-width: 500px) {
  .persona-send-button-wrapper:hover .persona-send-button-tooltip,
  .persona-send-button-wrapper:focus-within .persona-send-button-tooltip {
    opacity: 0;
  }
}

/* Clear chat button tooltip */
.persona-clear-chat-button-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.persona-clear-chat-tooltip {
  background-color: var(--persona-tooltip-background, #111827);
  color: var(--persona-tooltip-foreground, #ffffff);
  padding: 6px 12px;
  border-radius: var(--persona-radius-sm, 0.125rem);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
}

.persona-clear-chat-tooltip-arrow {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--persona-tooltip-background, #111827);
}

@media (hover: none), (max-width: 500px) {
  .persona-clear-chat-tooltip {
    display: none !important;
  }
}

/* Typing indicator animation */
@keyframes persona-typing {
  0%, 100% {
    opacity: 0.5;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.persona-animate-typing {
  animation: persona-typing 1s infinite;
}

.persona-space-x-1 > * + * {
  margin-left: 0.25rem;
}

.persona-h-5 {
  height: 1.25rem;
}

.persona-h-1\.5 {
  height: 0.375rem;
}

.persona-w-1\.5 {
  width: 0.375rem;
}

.persona-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Voice recognition recording animation */
@keyframes persona-voice-recording-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

.persona-voice-recording {
  animation: persona-voice-recording-pulse 1.5s ease-in-out infinite;
}

.persona-voice-recording svg {
  animation: persona-voice-recording-pulse 1.5s ease-in-out infinite;
}

/* Voice processing animation (spinner) */
@keyframes persona-voice-processing-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.persona-voice-processing svg {
  animation: persona-voice-processing-spin 1.2s linear infinite;
}

/* Voice speaking animation (gentle pulse: slower/subtler than recording) */
@keyframes persona-voice-speaking-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}

.persona-voice-speaking {
  animation: persona-voice-speaking-pulse 2s ease-in-out infinite;
}

.persona-voice-speaking svg {
  animation: persona-voice-speaking-pulse 2s ease-in-out infinite;
}

/* Markdown content overflow handling */
.persona-message-bubble pre {
  overflow-x: auto;
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  background-color: var(--persona-md-code-block-bg);
  color: var(--persona-md-code-block-text-color);
  padding: var(--persona-md-code-block-padding);
  border-radius: var(--persona-md-code-block-border-radius);
  margin: 0.5rem 0;
  font-size: var(--persona-md-code-block-font-size);
  line-height: 1.5;
  border: 1px solid var(--persona-md-code-block-border-color);
}

.persona-message-bubble code {
  word-break: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875em;
}

.persona-message-bubble pre code {
  font-size: inherit;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.persona-message-bubble img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0;
  border-radius: var(--persona-radius-md, 0.375rem);
}

.persona-message-user-bubble {
  border-radius: var(--persona-message-user-radius, var(--persona-radius-lg, 0.5rem));
}

.persona-message-assistant-bubble {
  border-radius: var(--persona-message-assistant-radius, var(--persona-radius-lg, 0.5rem));
  border-color: var(--persona-message-assistant-border, var(--persona-border, #e5e7eb));
}

[data-persona-root] .persona-message-assistant-bubble.persona-shadow-sm {
  box-shadow: var(--persona-message-assistant-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}

[data-persona-root] .persona-message-user-bubble.persona-shadow-sm {
  box-shadow: var(--persona-message-user-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
}

[data-persona-root] .persona-tool-bubble.persona-shadow-sm {
  box-shadow: var(--persona-tool-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
}

/* ==============================
   Tool call loading animations
   ============================== */

/* Inline formatting classes for template text */
[data-persona-root] .persona-tool-text-dim {
  opacity: 0.5;
}
[data-persona-root] .persona-tool-text-bold {
  font-weight: 600;
}
[data-persona-root] .persona-tool-text-italic {
  font-style: italic;
}

/* Pulse mode: entire text element pulses opacity */
@keyframes persona-tool-loading-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

[data-persona-root] .persona-tool-loading-pulse {
  animation: persona-tool-loading-pulse var(--persona-tool-anim-duration, 2s) ease-in-out infinite;
}

/* Shimmer mode: monochrome brightness sweep per character */
@keyframes persona-tool-loading-shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

[data-persona-root] .persona-tool-loading-shimmer .persona-tool-char {
  display: inline-block;
  animation: persona-tool-loading-shimmer var(--persona-tool-anim-duration, 2s) ease-in-out infinite;
  animation-delay: calc(var(--char-index, 0) * 60ms);
}

/* Shimmer-color mode: color gradient sweep per character */
@keyframes persona-tool-loading-shimmer-color {
  0%, 100% {
    color: var(--persona-tool-anim-color, currentColor);
  }
  50% {
    color: var(--persona-tool-anim-secondary-color, #3b82f6);
  }
}

[data-persona-root] .persona-tool-loading-shimmer-color .persona-tool-char {
  display: inline-block;
  animation: persona-tool-loading-shimmer-color var(--persona-tool-anim-duration, 2s) ease-in-out infinite;
  animation-delay: calc(var(--char-index, 0) * 60ms);
}

/* Rainbow mode: hue rotation per character */
@keyframes persona-tool-loading-rainbow {
  0% { color: #ef4444; }
  16% { color: #f59e0b; }
  33% { color: #22c55e; }
  50% { color: #06b6d4; }
  66% { color: #3b82f6; }
  83% { color: #8b5cf6; }
  100% { color: #ef4444; }
}

[data-persona-root] .persona-tool-loading-rainbow .persona-tool-char {
  display: inline-block;
  animation: persona-tool-loading-rainbow var(--persona-tool-anim-duration, 2s) linear infinite;
  animation-delay: calc(var(--char-index, 0) * 80ms);
}

/* Prefers-reduced-motion: disable all tool loading animations */
@media (prefers-reduced-motion: reduce) {
  [data-persona-root] .persona-tool-loading-pulse,
  [data-persona-root] .persona-tool-loading-shimmer .persona-tool-char,
  [data-persona-root] .persona-tool-loading-shimmer-color .persona-tool-char,
  [data-persona-root] .persona-tool-loading-rainbow .persona-tool-char {
    animation: none !important;
  }
}

[data-persona-root] .persona-reasoning-bubble.persona-shadow-sm {
  box-shadow: var(--persona-reasoning-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
}

/* Artifact markdown (no .persona-message-bubble wrapper) */
[data-persona-root] .persona-markdown-bubble {
  color: var(--persona-text, #111827);
  font-family: var(--persona-md-prose-font-family, inherit);
}

[data-persona-root] .persona-markdown-bubble p {
  margin: 0 0 1.5em;
}

[data-persona-root] .persona-markdown-bubble p:last-child {
  margin-bottom: 0;
}

[data-persona-root] .persona-markdown-bubble code:not(pre code) {
  background-color: var(--persona-md-inline-code-bg);
  color: var(--persona-md-inline-code-color, inherit);
  padding: var(--persona-md-inline-code-padding);
  border-radius: var(--persona-md-inline-code-border-radius);
  font-size: var(--persona-md-inline-code-font-size);
}

[data-persona-root] .persona-markdown-bubble a {
  color: var(--persona-md-link-color, var(--persona-accent, #0f0f0f));
  text-decoration: underline;
}

[data-persona-root] .persona-markdown-bubble pre {
  background-color: var(--persona-md-code-block-bg);
  border: 1px solid var(--persona-md-code-block-border-color);
  border-radius: var(--persona-radius-md, 0.375rem);
  padding: 0.75rem 1rem;
  overflow-x: auto;
  font-size: 0.8125rem;
}

/* Code block copy button */
.persona-code-block-wrapper {
  position: relative;
  margin: 0.5rem 0;
}

.persona-code-block-wrapper pre {
  margin: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.persona-code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--persona-md-code-block-bg, #f3f4f6);
  border: 1px solid var(--persona-md-code-block-border-color, #e5e7eb);
  border-bottom: none;
  border-top-left-radius: var(--persona-md-code-block-border-radius, 0.375rem);
  border-top-right-radius: var(--persona-md-code-block-border-radius, 0.375rem);
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--persona-text-muted, #6b7280);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.persona-code-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: var(--persona-text-muted, #6b7280);
  font-size: 0.75rem;
  font-family: inherit;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.persona-code-copy-btn:hover {
  color: var(--persona-text, #111827);
  border-color: var(--persona-md-code-block-border-color, #e5e7eb);
}

.persona-code-copy-btn.persona-code-copied {
  color: #16a34a;
}

.persona-code-copy-btn.persona-code-copy-generating {
  cursor: default;
  opacity: 0.5;
}

.persona-code-copy-btn.persona-code-copy-generating:hover {
  color: var(--persona-text-muted, #6b7280);
  border-color: transparent;
}

/* Ensure all links in chat bubbles have underlines */
.persona-message-bubble a {
  text-decoration: underline;
}

.persona-message-bubble a:visited {
  text-decoration: underline;
}

.persona-message-bubble a:hover {
  text-decoration: underline;
}

.persona-message-bubble a:active {
  text-decoration: underline;
}

/* Ensure links in user messages match the text color */
.persona-message-user-bubble a,
.persona-message-user-bubble a:visited,
.persona-message-user-bubble a:hover,
.persona-message-user-bubble a:active {
  color: inherit;
  text-decoration: underline;
}

[data-persona-root] .persona-message-assistant-bubble a {
  color: var(--persona-md-link-color, var(--persona-accent, #0f0f0f));
}

/* Markdown paragraph styles */
.persona-message-bubble p {
  margin: 0;
}

.persona-message-bubble p + p {
  margin-top: 0.75rem;
}

/* Markdown list styles */
.persona-message-bubble ul,
.persona-message-bubble ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.persona-message-bubble ul {
  list-style-type: disc;
}

.persona-message-bubble ol {
  list-style-type: decimal;
}

.persona-message-bubble li {
  margin: 0.25rem 0;
  padding-left: 0.25rem;
}

/* Nested lists */
.persona-message-bubble ul ul,
.persona-message-bubble ol ul {
  list-style-type: circle;
  margin: 0.25rem 0;
}

.persona-message-bubble ul ul ul,
.persona-message-bubble ol ul ul,
.persona-message-bubble ul ol ul,
.persona-message-bubble ol ol ul {
  list-style-type: square;
}

.persona-message-bubble ul ol,
.persona-message-bubble ol ol {
  list-style-type: lower-alpha;
  margin: 0.25rem 0;
}

/* Ensure user message paragraphs and lists have proper styling too */
.persona-message-user-bubble p {
  margin: 0;
  color: inherit;
}

.persona-message-user-bubble p + p {
  margin-top: 0.75rem;
}

.persona-message-user-bubble ul,
.persona-message-user-bubble ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.persona-message-user-bubble ul {
  list-style-type: disc;
}

.persona-message-user-bubble ol {
  list-style-type: decimal;
}

.persona-message-user-bubble li {
  margin: 0.25rem 0;
  padding-left: 0.25rem;
  color: inherit;
}

.persona-message-assistant-bubble p,
.persona-message-assistant-bubble li {
  color: inherit;
}

/* ============================================
   Markdown Header Styles
   ============================================ */
.persona-message-bubble h1,
[data-persona-root] .persona-markdown-bubble h1 {
  font-size: var(--persona-md-h1-size);
  font-weight: var(--persona-md-h1-weight);
  margin: var(--persona-md-h1-margin);
  line-height: var(--persona-md-h1-line-height);
  color: inherit;
}

.persona-message-bubble h2,
[data-persona-root] .persona-markdown-bubble h2 {
  font-size: var(--persona-md-h2-size);
  font-weight: var(--persona-md-h2-weight);
  margin: var(--persona-md-h2-margin);
  line-height: var(--persona-md-h2-line-height);
  color: inherit;
}

.persona-message-bubble h3,
[data-persona-root] .persona-markdown-bubble h3 {
  font-size: var(--persona-md-h3-size);
  font-weight: var(--persona-md-h3-weight);
  margin: var(--persona-md-h3-margin);
  line-height: var(--persona-md-h3-line-height);
  color: inherit;
}

.persona-message-bubble h4,
[data-persona-root] .persona-markdown-bubble h4 {
  font-size: var(--persona-md-h4-size);
  font-weight: var(--persona-md-h4-weight);
  margin: var(--persona-md-h4-margin);
  line-height: var(--persona-md-h4-line-height);
  color: inherit;
}

.persona-message-bubble h5,
[data-persona-root] .persona-markdown-bubble h5 {
  font-size: var(--persona-md-h5-size);
  font-weight: var(--persona-md-h5-weight);
  margin: var(--persona-md-h5-margin);
  line-height: var(--persona-md-h5-line-height);
  color: inherit;
}

.persona-message-bubble h6,
[data-persona-root] .persona-markdown-bubble h6 {
  font-size: var(--persona-md-h6-size);
  font-weight: var(--persona-md-h6-weight);
  margin: var(--persona-md-h6-margin);
  line-height: var(--persona-md-h6-line-height);
  color: inherit;
}

/* Remove top margin on first heading */
.persona-message-bubble h1:first-child,
.persona-message-bubble h2:first-child,
.persona-message-bubble h3:first-child,
.persona-message-bubble h4:first-child,
.persona-message-bubble h5:first-child,
.persona-message-bubble h6:first-child {
  margin-top: 0;
}

/* ============================================
   Markdown Table Styles
   ============================================ */
/* Tables span the full chat column. The assistant bubble is a flex item that
   sizes to its content, so a width:100% table only fills that shrunk box — and
   once the streaming `table-layout: fixed` lock is released the table visibly
   collapses to content width ("renders full-width, then snaps narrow"). When the
   bubble holds a table, let it grow to fill the row so the table keeps the full
   column width. */
.persona-message-bubble:has(table) {
  width: 100%;
  max-width: 100%;
  flex-grow: 1;
}

.persona-message-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  overflow: hidden;
  border-radius: var(--persona-md-table-border-radius);
  border: 1px solid var(--persona-md-table-border-color);
}

.persona-message-bubble thead {
  background-color: var(--persona-md-table-header-bg);
}

.persona-message-bubble th {
  font-weight: var(--persona-md-table-header-weight);
  text-align: left;
  padding: var(--persona-md-table-cell-padding);
  border-bottom: 1px solid var(--persona-md-table-border-color);
}

.persona-message-bubble td {
  padding: var(--persona-md-table-cell-padding);
  border-bottom: 1px solid var(--persona-md-table-border-color);
  text-align: left;
}

.persona-message-bubble tr:last-child td {
  border-bottom: none;
}

.persona-message-bubble tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* While a message is still streaming, lock table column widths so incoming rows
   append without the per-chunk horizontal reflow (Telegram-style space
   reservation). The class is removed on the final render, relaxing the finished
   table to natural content-fit widths. overflow-wrap keeps long cell content
   from spilling past the fixed columns mid-stream. */
.persona-content-streaming table {
  table-layout: fixed;
}

.persona-content-streaming th,
.persona-content-streaming td {
  overflow-wrap: break-word;
}

/* ============================================
   Markdown Horizontal Rule Styles
   ============================================ */
.persona-message-bubble hr {
  border: none;
  height: var(--persona-md-hr-height);
  background-color: var(--persona-md-hr-color);
  margin: var(--persona-md-hr-margin);
}

/* ============================================
   Markdown Blockquote Styles
   ============================================ */
.persona-message-bubble blockquote {
  border-left: var(--persona-md-blockquote-border-width) solid var(--persona-md-blockquote-border-color);
  padding: var(--persona-md-blockquote-padding);
  margin: var(--persona-md-blockquote-margin);
  background-color: var(--persona-md-blockquote-bg);
  color: var(--persona-md-blockquote-text-color);
  font-style: var(--persona-md-blockquote-font-style);
}

.persona-message-bubble blockquote p {
  margin: 0;
}

.persona-message-bubble blockquote p + p {
  margin-top: 0.5rem;
}

/* Nested blockquotes */
.persona-message-bubble blockquote blockquote {
  margin-left: 0.5rem;
}

/* ============================================
   Markdown Inline Code Styles (not in pre)
   ============================================ */
.persona-message-bubble code:not(pre code) {
  background-color: var(--persona-md-inline-code-bg);
  color: var(--persona-md-inline-code-color, inherit);
  padding: var(--persona-md-inline-code-padding);
  border-radius: var(--persona-md-inline-code-border-radius);
  font-size: var(--persona-md-inline-code-font-size);
}

/* ============================================
   Markdown Strong/Emphasis Styles
   ============================================ */
.persona-message-bubble strong,
.persona-message-bubble b {
  font-weight: var(--persona-md-strong-weight);
}

.persona-message-bubble em,
.persona-message-bubble i {
  font-style: var(--persona-md-em-style);
}

/* ============================================
   User Message Markdown Overrides
   Ensure styles work in user bubbles too
   ============================================ */
.persona-message-user-bubble h1,
.persona-message-user-bubble h2,
.persona-message-user-bubble h3,
.persona-message-user-bubble h4,
.persona-message-user-bubble h5,
.persona-message-user-bubble h6 {
  color: inherit;
}

.persona-message-user-bubble table {
  border-color: rgba(255, 255, 255, 0.3);
}

.persona-message-user-bubble th,
.persona-message-user-bubble td {
  border-color: rgba(255, 255, 255, 0.3);
}

.persona-message-user-bubble thead {
  background-color: rgba(255, 255, 255, 0.1);
}

.persona-message-user-bubble tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05);
}

.persona-message-user-bubble hr {
  background-color: rgba(255, 255, 255, 0.3);
}

.persona-message-user-bubble blockquote {
  border-left-color: rgba(255, 255, 255, 0.5);
  color: inherit;
  opacity: 0.9;
}

.persona-message-user-bubble code:not(pre code) {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Message Action Buttons (Copy, Upvote, Downvote)
   ============================================ */

/* Make message bubble position relative for overlay positioning */
.persona-message-bubble {
  position: relative;
  /* Break long unbreakable tokens (e.g. URLs, package names) so they wrap
     inside the bubble's max-width instead of overflowing horizontally. */
  overflow-wrap: break-word;
}

/* Fade-in animation for action buttons */
@keyframes persona-message-actions-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Base action bar styles */
.persona-message-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--persona-divider, #f1f5f9);
}

/* Fade in animation only for "always" visibility mode (not hover) */
/* forwards ensures final state is kept, idiomorph preserves element so animation only plays once */
.persona-message-actions:not(.persona-message-actions-hover) {
  animation: persona-message-actions-fade-in 0.3s ease-out forwards;
}

/* ask_user_question: collapsed answered state.
 * When the user picks an option, the interactive card is replaced with a
 * plain assistant bubble showing the question text. A short fade + slight
 * upward slide sells the "card resolved into history" feel.
 */
@keyframes persona-ask-resolved {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
[data-ask-answered="true"] {
  animation: persona-ask-resolved 0.22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  [data-ask-answered="true"] {
    animation: none;
  }
}

/* Action bar alignment */
.persona-message-actions-left {
  justify-content: flex-start;
}

.persona-message-actions-center {
  justify-content: center;
}

.persona-message-actions-right {
  justify-content: flex-end;
}

/* Always-visible mode: pill and row layouts (when not using hover overlay) */
.persona-message-actions:not(.persona-message-actions-hover).persona-message-actions-pill {
  width: fit-content;
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-top: none;
}

/* Pill alignment in always-visible mode (block flow: use margin to position) */
.persona-message-actions:not(.persona-message-actions-hover).persona-message-actions-pill.persona-message-actions-right {
  margin-left: auto;
}

.persona-message-actions:not(.persona-message-actions-hover).persona-message-actions-pill.persona-message-actions-center {
  margin-left: auto;
  margin-right: auto;
}

.persona-message-actions:not(.persona-message-actions-hover).persona-message-actions-row {
  /* Extend to bubble edges (bubble uses persona-px-5 = 1.25rem) */
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  margin-bottom: -0.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: 0 0 var(--persona-radius-lg, 1.5rem) var(--persona-radius-lg);
  background: linear-gradient(
    to top,
    var(--persona-surface, #ffffff) 70%,
    transparent
  );
  border-top: 1px solid var(--persona-divider, #f1f5f9);
}

/* Hover visibility mode - overlay on desktop */
@media (hover: hover) {
  .persona-message-actions-hover {
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
  }

  /* Pill layout - compact floating pill */
  .persona-message-actions-hover.persona-message-actions-pill {
    position: absolute;
    bottom: 0.5rem;
    margin-top: 0;
    padding: 0.25rem;
    border-top: none;
    width: fit-content;
  }

  /* Pill layout - position based on alignment */
  .persona-message-actions-hover.persona-message-actions-pill.persona-message-actions-left {
    left: 0.75rem;
    right: auto;
  }

  .persona-message-actions-hover.persona-message-actions-pill.persona-message-actions-center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .persona-message-actions-hover.persona-message-actions-pill.persona-message-actions-right {
    right: 0.75rem;
    left: auto;
  }

  /* Row layout - full-width bar at bottom */
  .persona-message-actions-hover.persona-message-actions-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    padding: 0.5rem 0.75rem;
    border-top: none;
    background: linear-gradient(
      to top,
      var(--persona-surface, #ffffff) 70%,
      transparent
    );
    border-radius: 0 0 var(--persona-radius-lg, 1.5rem) var(--persona-radius-lg, 1.5rem);
  }

  .persona-message-bubble:hover .persona-message-actions-hover,
  .persona-message-bubble:focus-within .persona-message-actions-hover {
    opacity: 1;
    pointer-events: auto;
  }
}

/* On touch devices (no hover support), show inline and always visible */
@media (hover: none) {
  .persona-message-actions-hover {
    /* Keep normal flow positioning on mobile */
    position: static;
    opacity: 1;
  }
}

/* Action button base styles */
.persona-message-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--persona-radius-sm, 0.125rem);
  background-color: transparent;
  color: var(--persona-muted, #6b7280);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.persona-message-action-btn:hover {
  background-color: var(--persona-container, #f8fafc);
  color: var(--persona-primary, #111827);
}

.persona-message-action-btn:active {
  transform: scale(0.95);
}

.persona-message-action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--persona-accent, #0a0a0a);
}

.persona-message-action-btn:focus:not(:focus-visible) {
  box-shadow: none;
}

.persona-message-action-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--persona-accent, #0a0a0a);
}

/* Active state (voted) */
.persona-message-action-btn.persona-message-action-active {
  background-color: var(--persona-accent, #0a0a0a);
  color: #ffffff;
}

.persona-message-action-btn.persona-message-action-active:hover {
  background-color: var(--persona-accent, #0a0a0a);
  color: #ffffff;
  opacity: 0.9;
}

/* Read-aloud loading state: spin the loader icon while audio is prepared
   (near-instant for browser TTS; visible for a hosted/server engine fetch). */
.persona-message-action-btn.persona-message-action-loading svg {
  animation: persona-voice-processing-spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .persona-message-action-btn.persona-message-action-loading svg {
    animation: none;
  }
}

/* Vote pop animation */
@keyframes persona-vote-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.persona-message-action-btn.persona-message-action-pop {
  animation: persona-vote-pop 0.3s ease;
}

/* Success state (after copy) */
.persona-message-action-btn.persona-message-action-success {
  background-color: #10b981;
  color: #ffffff;
}

.persona-message-action-btn.persona-message-action-success:hover {
  background-color: #10b981;
  color: #ffffff;
}

/* Icon styling within buttons */
.persona-message-action-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ============================================================================
 * Feedback UI Components (CSAT/NPS)
 * ============================================================================ */

.persona-feedback-container {
  background: var(--persona-surface, #ffffff);
  border: 1px solid var(--persona-border, #e5e7eb);
  border-radius: var(--persona-radius-lg, 0.5rem);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 1.25rem;
  max-width: 100%;
  margin: 0.75rem;
  animation: persona-feedback-fade-in 0.3s ease-out;
}

@keyframes persona-feedback-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.persona-feedback-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.persona-feedback-header {
  text-align: center;
}

.persona-feedback-title {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--persona-primary, #111827);
}

.persona-feedback-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--persona-muted, #6b7280);
}

/* CSAT Star Rating */
.persona-feedback-rating-csat {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.persona-feedback-star-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--persona-border, #d1d5db);
  transition: color 0.2s ease, transform 0.15s ease;
}

.persona-feedback-star-btn:hover {
  transform: scale(1.15);
}

.persona-feedback-star-btn.selected {
  color: #fbbf24;
}

.persona-feedback-star-btn .persona-feedback-star {
  width: 32px;
  height: 32px;
}

.persona-feedback-star-btn.selected .persona-feedback-star {
  fill: #fbbf24;
}

/* NPS Number Rating */
.persona-feedback-rating-nps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.persona-feedback-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--persona-muted, #6b7280);
}

.persona-feedback-numbers {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}

.persona-feedback-number-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--persona-radius-sm, 0.125rem);
  border: 1px solid var(--persona-border, #e5e7eb);
  background: var(--persona-surface, #ffffff);
  color: var(--persona-primary, #111827);
  cursor: pointer;
  transition: all 0.2s ease;
}

.persona-feedback-number-btn:hover {
  border-color: var(--persona-accent, #0a0a0a);
  background: var(--persona-container, #f3f4f6);
}

.persona-feedback-number-btn.selected {
  color: #ffffff;
}

/* NPS Color coding */
.persona-feedback-number-btn.persona-feedback-detractor.selected {
  background: #ef4444;
  border-color: #ef4444;
}

.persona-feedback-number-btn.persona-feedback-passive.selected {
  background: #f59e0b;
  border-color: #f59e0b;
}

.persona-feedback-number-btn.persona-feedback-promoter.selected {
  background: #22c55e;
  border-color: #22c55e;
}

/* Comment textarea */
.persona-feedback-comment-container {
  width: 100%;
}

.persona-feedback-comment {
  width: 100%;
  padding: 0.625rem;
  font-size: 0.875rem;
  font-family: inherit;
  border: 1px solid var(--persona-border, #e5e7eb);
  border-radius: var(--persona-radius-sm, 0.125rem);
  background: var(--persona-surface, #ffffff);
  color: var(--persona-primary, #111827);
  resize: vertical;
  box-sizing: border-box;
}

.persona-feedback-comment:focus {
  outline: none;
  border-color: var(--persona-accent, #0a0a0a);
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
}

.persona-feedback-comment::placeholder {
  color: var(--persona-muted, #9ca3af);
}

/* Action buttons */
.persona-feedback-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.persona-feedback-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--persona-radius-sm, 0.125rem);
  cursor: pointer;
  transition: all 0.2s ease;
}

.persona-feedback-btn-skip {
  background: transparent;
  border: 1px solid var(--persona-border, #e5e7eb);
  color: var(--persona-muted, #6b7280);
}

.persona-feedback-btn-skip:hover {
  background: var(--persona-container, #f3f4f6);
  color: var(--persona-primary, #111827);
}

.persona-feedback-btn-submit {
  background: var(--persona-accent, #0a0a0a);
  border: 1px solid var(--persona-accent, #0a0a0a);
  color: #ffffff;
}

.persona-feedback-btn-submit:hover:not(:disabled) {
  opacity: 0.9;
}

.persona-feedback-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Shake animation for validation */
@keyframes persona-feedback-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.persona-feedback-shake {
  animation: persona-feedback-shake 0.5s ease-in-out;
}

/* ============================================
   Tool & Reasoning Bubble Theme Styles
   ============================================ */

/* Content areas: themed border and background for tool/reasoning bubbles */
.persona-tool-bubble .persona-border-t,
.persona-reasoning-bubble .persona-border-t {
  border-top-color: var(--cw-border, #e5e7eb);
  background-color: var(--cw-container, #f9fafb);
}

/* Tool bubble code blocks: themed surface and border */
.persona-tool-bubble pre {
  background-color: var(--cw-surface, #ffffff);
  border-color: var(--cw-border, #f1f5f9);
}

/* Collapsible header hover (tool + reasoning) */
.persona-tool-bubble button[data-expand-header],
.persona-reasoning-bubble button[data-expand-header] {
  transition: background-color 0.15s ease;
}
.persona-tool-bubble button[data-expand-header]:hover,
.persona-reasoning-bubble button[data-expand-header]:hover {
  background-color: var(--cw-container, #f8fafc);
}

/* Collapsed live preview blocks: match expanded content's 1px border-top with transparent border */
[data-persona-root] [data-persona-collapsed-preview] {
  border-top: 1px solid transparent;
}

/* Grouped tool-call transcript chrome */
[data-persona-root] .persona-tool-group {
  --_rail-x: 0.5rem;
  --_rail-w: 2px;
  --_dot-size: 6px;
  --_branch-len: 0.75rem;
  --_branch-y: 1.5rem;
  --_rail-color: var(--cw-border, #d1d5db);
  gap: 0;
}

/* ---- Summary row ---- */
[data-persona-root] .persona-tool-group-summary {
  position: relative;
  min-height: 1.5rem;
  padding-left: calc(var(--_rail-x) + var(--_branch-len) + 0.625rem);
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
}

/* horizontal branch from rail to summary text */
[data-persona-root] .persona-tool-group-summary::before {
  content: "";
  position: absolute;
  left: var(--_rail-x);
  top: 50%;
  width: var(--_branch-len);
  height: var(--_rail-w);
  background: var(--_rail-color);
  transform: translateY(-50%);
}

/* dot at the rail end of the summary branch */
[data-persona-root] .persona-tool-group-summary::after {
  content: "";
  position: absolute;
  left: var(--_rail-x);
  top: 50%;
  width: var(--_dot-size);
  height: var(--_dot-size);
  border-radius: 999px;
  border: var(--_rail-w) solid var(--_rail-color);
  background: var(--cw-surface, #fff);
  transform: translate(-50%, -50%);
}

/* ---- Stack (children column) ---- */
[data-persona-root] .persona-tool-group-stack {
  position: relative;
  margin-left: var(--_rail-x);
  padding-left: calc(var(--_branch-len) + 0.125rem);
  gap: 0.625rem;
}

/* vertical rail */
[data-persona-root] .persona-tool-group-stack::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-0.625rem - (var(--_dot-size) / 2));
  bottom: calc(100% - var(--_branch-y));
  width: var(--_rail-w);
  background: var(--_rail-color);
  transform: translateX(-50%);
}

/* extend rail between items when there are multiple */
[data-persona-root] .persona-tool-group-stack::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--_rail-w);
  background: var(--_rail-color);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

/* clip the rail at the last item's branch-y */
[data-persona-root] .persona-tool-group-item:last-child {
  position: relative;
}

/* ---- Item branches ---- */
[data-persona-root] .persona-tool-group-item {
  position: relative;
  z-index: 1;
}

/* horizontal branch from rail to each child bubble */
[data-persona-root] .persona-tool-group-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--_branch-len) - 0.125rem);
  top: var(--_branch-y);
  width: calc(var(--_branch-len) + 0.125rem);
  height: var(--_rail-w);
  background: var(--_rail-color);
  transform: translateY(-50%);
}

/* dot at the junction of the rail and each branch */
[data-persona-root] .persona-tool-group-item::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--_branch-len) - 0.125rem);
  top: var(--_branch-y);
  width: var(--_dot-size);
  height: var(--_dot-size);
  border-radius: 999px;
  border: var(--_rail-w) solid var(--_rail-color);
  background: var(--cw-surface, #fff);
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ============================================
   Approval Bubble Theme Styles
   ============================================ */

/* Approval bubble defaults (overridden by inline styles when config exists) */
.persona-approval-bubble {
  background-color: var(--cw-surface, #ffffff);
  border-color: var(--cw-border, #e5e7eb);
}

/* Approval button hover/active states */
.persona-approval-bubble [data-approval-action] {
  transition: opacity 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
}
.persona-approval-bubble [data-approval-action="approve"]:hover {
  opacity: 0.85;
}
.persona-approval-bubble [data-approval-action="approve"]:active {
  transform: scale(0.97);
}
.persona-approval-bubble [data-approval-action="deny"]:hover {
  background-color: rgba(220, 38, 38, 0.08);
}
.persona-approval-bubble [data-approval-action="deny"]:active {
  transform: scale(0.97);
}

/* ============================================
   Approval card (default renderer, components/approval-actions.ts)
   Neutral surface card. Every color is a --persona-* token; the legacy
   --persona-approval-* shorthands are honored fallback-first so a consumer who
   themed them still wins, then the new semantic default applies.
   ============================================ */
.persona-approval-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--persona-approval-bg, var(--persona-surface, #ffffff));
  border: 0.5px solid var(--persona-approval-border, var(--persona-border, rgba(11, 11, 11, 0.1)));
  border-radius: 0.75rem;
  padding: 0.5rem;
}
.persona-approval-card.persona-shadow-sm {
  box-shadow: var(--persona-approval-shadow, 0 1px 2px 0 rgba(11, 11, 11, 0.06), 0 2px 8px 0 rgba(11, 11, 11, 0.04));
}

.persona-approval-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--persona-text, #0b0b0b);
  border-radius: 0.5rem;
  transition: background 0.12s ease;
}
.persona-approval-head:hover { background: var(--persona-container, rgba(11, 11, 11, 0.04)); }
.persona-approval-head[data-static="true"] { cursor: default; }
.persona-approval-head[data-static="true"]:hover { background: transparent; }

.persona-approval-logo {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 0.5px solid var(--persona-border, rgba(11, 11, 11, 0.12));
  border-radius: 6.5px;
  background: var(--persona-surface, #ffffff);
  box-shadow: 0 1px 2px 0 rgba(11, 11, 11, 0.08);
  color: var(--persona-muted, #6b7280);
  overflow: hidden;
}
.persona-approval-logo svg { width: 15px; height: 15px; display: block; }

.persona-approval-title {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--persona-text, #0b0b0b);
}
.persona-approval-title strong { font-weight: 600; }

.persona-approval-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  color: var(--persona-muted, #6b7280);
  vertical-align: middle;
  transition: transform 0.15s ease;
}
.persona-approval-toggle svg { width: 0.85rem; height: 0.85rem; display: block; }
.persona-approval-head[aria-expanded="false"] .persona-approval-toggle { transform: rotate(-90deg); }

.persona-approval-body {
  padding: 0.5rem 0.6rem 0.35rem calc(24px + 0.75rem + 0.6rem);
}

.persona-approval-details {
  margin: 0 0 0.75rem;
}
.persona-approval-details[hidden] { display: none; }

.persona-approval-desc {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--persona-muted, #6b7280);
}

.persona-approval-params {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.625rem;
  background: var(--persona-container, rgba(11, 11, 11, 0.04));
  color: var(--persona-text, #1f2937);
  font-size: 0.75rem;
  line-height: 1rem;
  overflow-x: auto;
  max-height: 9rem;
}

.persona-approval-reason {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--persona-muted, #6b7280);
}
.persona-approval-reason-label { font-weight: 500; }

.persona-approval-resolved {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.5rem 0;
  padding: 0.3rem 0.15rem;
  font-size: 0.8rem;
  color: var(--persona-muted, #6b7280);
}
.persona-approval-resolved svg { width: 0.95rem; height: 0.95rem; display: block; flex-shrink: 0; }
.persona-approval-resolved-name { font-weight: 600; }

.persona-approval-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.persona-approval-split { position: relative; display: inline-flex; }

.persona-approval-primary,
.persona-approval-caret,
.persona-approval-deny {
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
/* Primary anchors to the brand token via the established button-primary pair. */
.persona-approval-primary {
  background: var(--persona-approval-approve-bg, var(--persona-button-primary-bg, var(--persona-primary, #111827)));
  color: var(--persona-button-primary-fg, var(--persona-text-inverse, #ffffff));
  padding: 0 0.75rem;
  border-radius: 0.5rem 0 0 0.5rem;
}
.persona-approval-primary--solo { border-radius: 0.5rem; }
.persona-approval-caret {
  position: relative;
  background: var(--persona-approval-approve-bg, var(--persona-button-primary-bg, var(--persona-primary, #111827)));
  color: var(--persona-button-primary-fg, var(--persona-text-inverse, #ffffff));
  width: 2rem;
  justify-content: center;
  padding: 0;
  border-radius: 0 0.5rem 0.5rem 0;
}
.persona-approval-caret svg { width: 0.95rem; height: 0.95rem; display: block; }
.persona-approval-caret::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--persona-button-primary-fg, #ffffff);
  opacity: 0.25;
  transition: opacity 0.12s ease;
}
.persona-approval-caret:hover::before,
.persona-approval-primary:hover + .persona-approval-caret::before { opacity: 0; }
.persona-approval-primary:hover,
.persona-approval-caret:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.16); }

.persona-approval-deny {
  background: var(--persona-approval-deny-bg, var(--persona-container, rgba(11, 11, 11, 0.04)));
  color: var(--persona-text, #1f2937);
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 0.5px var(--persona-border, rgba(0, 0, 0, 0.1));
}
.persona-approval-deny:hover { box-shadow: inset 0 0 0 0.5px var(--persona-border, rgba(0, 0, 0, 0.1)), inset 0 0 0 999px rgba(11, 11, 11, 0.04); }

.persona-approval-menu {
  width: max-content;
  max-width: 18rem;
  box-sizing: border-box;
  background: var(--persona-surface, #ffffff);
  border: 0.5px solid var(--persona-border, rgba(11, 11, 11, 0.1));
  border-radius: 0.625rem;
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.12), 0 2px 6px rgba(11, 11, 11, 0.08);
  padding: 0.25rem;
  white-space: nowrap;
}
.persona-approval-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  color: var(--persona-text, #1f2937);
  padding: 0.45rem 0.6rem;
  border-radius: 0.4rem;
  text-align: left;
  transition: background 0.12s ease;
}
.persona-approval-menu-item:hover { background: var(--persona-container, rgba(11, 11, 11, 0.06)); }
.persona-approval-kbd {
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.7;
  margin-left: 0.25rem;
}
.persona-approval-menu-item .persona-approval-kbd { margin-left: auto; }

/* ============================================
   Visibility (Tailwind parity: prefix persona-)
   Shipped widget.css is hand-maintained; these utilities are used in TS but not generated by Tailwind at build time.
   ============================================ */
[data-persona-root] .persona-hidden {
  display: none !important;
}

@media (min-width: 768px) {
  [data-persona-root] .md\:persona-hidden {
    display: none !important;
  }
}

/* ============================================
   Artifact sidebar (split pane / mobile drawer)
   Vars set from TS: --persona-artifact-split-gap, --persona-artifact-pane-width,
   --persona-artifact-pane-max-width, --persona-artifact-pane-min-width
   ============================================ */
[data-persona-root] .persona-artifact-split-root {
  gap: var(--persona-artifact-split-gap, 0.5rem);
}

/* Document toolbar preset: optional layout vars: --persona-artifact-doc-toolbar-icon-color, etc. */
/* Document-toolbar icon/copy button styling is shared by the artifact pane's
   document preset and the inline chrome actions cluster, so both surfaces read
   the same `components.artifact.toolbar` tokens (the vars are emitted globally
   at the widget root). */
[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn,
[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--persona-artifact-toolbar-icon-padding, 0.25rem);
  border-radius: var(--persona-artifact-toolbar-icon-radius, var(--persona-radius-md, 0.375rem));
  border: var(--persona-artifact-toolbar-icon-border, 1px solid var(--persona-border, #e5e7eb));
  background: var(--persona-artifact-toolbar-icon-bg, var(--persona-surface, #ffffff));
  color: var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827));
  cursor: pointer;
  line-height: 1;
}

[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn:hover,
[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-icon-btn:hover {
  color: var(--persona-artifact-toolbar-icon-hover-color, inherit);
  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6)));
}

[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn[aria-pressed="true"],
[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-icon-btn[aria-pressed="true"] {
  background: var(--persona-artifact-doc-toggle-active-bg, var(--persona-icon-btn-active-bg, var(--persona-container, #f3f4f6)));
  border-color: var(--persona-artifact-doc-toggle-active-border, var(--persona-icon-btn-active-border, var(--persona-border, #e5e7eb)));
}

[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn,
[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--persona-artifact-toolbar-copy-padding, 0.25rem 0.5rem);
  border-radius: var(--persona-artifact-toolbar-copy-radius, var(--persona-radius-md, 0.375rem));
  border: var(--persona-artifact-toolbar-copy-border, 1px solid var(--persona-border, #e5e7eb));
  background: var(--persona-artifact-toolbar-copy-bg, var(--persona-surface, #ffffff));
  color: var(--persona-artifact-toolbar-copy-color, var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827)));
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1.25;
}

[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn:hover,
[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-copy-btn:hover {
  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6)));
}

[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-copy-label {
  font-weight: 500;
}

/* Artifact tab theming */
[data-persona-root] .persona-artifact-tab {
  background: var(--persona-artifact-tab-bg, transparent);
  border-radius: var(--persona-artifact-tab-radius, 0.5rem);
  color: var(--persona-artifact-tab-color, inherit);
  /* Keep each tab on one line and cap its width so the strip scrolls
     horizontally instead of wrapping/overflowing the pane. */
  white-space: nowrap;
  max-width: var(--persona-artifact-tab-max-width, 12rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-persona-root] .persona-artifact-tab.persona-bg-persona-container {
  background: var(--persona-artifact-tab-active-bg, var(--persona-container, #f3f4f6));
  border-color: var(--persona-artifact-tab-active-border, var(--persona-border, #e5e7eb));
}

/* Artifact toolbar background theming */
[data-persona-root] .persona-artifact-toolbar {
  background: var(--persona-artifact-toolbar-bg, var(--persona-surface, #fff));
}

/* Toggle group + view/code button styling lives in the segmented
   .persona-toggle-group.persona-artifact-toggle-group block further down. */

/* Tab hover */
[data-persona-root] .persona-artifact-tab:hover {
  background: var(--persona-artifact-tab-hover-bg, var(--persona-container, #f3f4f6));
}

/* Keyboard focus ring, themed to match cards/buttons instead of the UA default
   (which varies by browser). Custom renderTabBar bars reuse .persona-artifact-tab,
   so they inherit the same ring; give a scroll container enough padding that the
   2px offset isn't clipped. */
[data-persona-root] .persona-artifact-tab:focus-visible {
  outline: 2px solid var(--persona-accent, #171717);
  outline-offset: 2px;
}

/* Tab list container */
[data-persona-root] .persona-artifact-list {
  background: var(--persona-artifact-tab-list-bg, transparent);
  border-bottom-color: var(--persona-artifact-tab-list-border-color, var(--persona-border, #e5e7eb));
  padding: var(--persona-artifact-tab-list-padding, 0.5rem);
  /* Thin, unobtrusive horizontal scrollbar for the tab strip. */
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

[data-persona-root] .persona-artifact-list::-webkit-scrollbar {
  height: 6px;
}

[data-persona-root] .persona-artifact-list::-webkit-scrollbar-thumb {
  background: var(--persona-artifact-tab-list-scrollbar, var(--persona-border, #e5e7eb));
  border-radius: 9999px;
}

/* Toolbar border override */
[data-persona-root] .persona-artifact-toolbar-document {
  border-bottom: var(--persona-artifact-toolbar-border, 1px solid var(--persona-border, #e5e7eb));
}

/* Artifact reference card (chat thread) */
[data-persona-root] .persona-artifact-card {
  background: var(--persona-artifact-card-bg, var(--persona-surface, #ffffff));
  border: var(--persona-artifact-card-border, 1px solid var(--persona-border, #e5e7eb));
  border-radius: var(--persona-artifact-card-radius, var(--persona-message-assistant-radius, var(--persona-radius-lg, 0.5rem)));
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
[data-persona-root] .persona-artifact-card:hover {
  background: var(--persona-artifact-card-hover-bg, #f3f4f6);
  border-color: var(--persona-artifact-card-hover-border, var(--persona-border, #e5e7eb));
}
[data-persona-root] .persona-artifact-card:focus-visible {
  outline: 2px solid var(--persona-accent, #171717);
  outline-offset: 2px;
}

/* ── Composable button utilities ── */

/* Icon button: base for all icon-only buttons created by createIconButton() */
[data-persona-root] .persona-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--persona-icon-btn-padding, 0.25rem);
  border-radius: var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem));
  border: var(--persona-icon-btn-border, 1px solid var(--persona-border, #e5e7eb));
  background: var(--persona-icon-btn-bg, var(--persona-surface, #ffffff));
  color: var(--persona-icon-btn-color, var(--persona-text, #111827));
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

[data-persona-root] .persona-icon-btn:hover {
  background: var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6));
  color: var(--persona-icon-btn-hover-color, inherit);
}

[data-persona-root] .persona-icon-btn:focus-visible {
  outline: 2px solid var(--persona-accent, #171717);
  outline-offset: 2px;
}

[data-persona-root] .persona-icon-btn[aria-pressed="true"] {
  background: var(--persona-icon-btn-active-bg, var(--persona-container, #f3f4f6));
  border-color: var(--persona-icon-btn-active-border, var(--persona-border, #e5e7eb));
}

/* Label button: icon + text button created by createLabelButton() */
[data-persona-root] .persona-label-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--persona-label-btn-gap, 0.35rem);
  padding: var(--persona-label-btn-padding, 0.25rem 0.5rem);
  border-radius: var(--persona-label-btn-radius, var(--persona-radius-md, 0.375rem));
  border: var(--persona-label-btn-border, 1px solid var(--persona-border, #e5e7eb));
  background: var(--persona-label-btn-bg, var(--persona-surface, #ffffff));
  color: var(--persona-label-btn-color, var(--persona-text, #111827));
  cursor: pointer;
  font-size: var(--persona-label-btn-font-size, 0.75rem);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

[data-persona-root] .persona-label-btn:hover {
  background: var(--persona-label-btn-hover-bg, var(--persona-container, #f3f4f6));
}

[data-persona-root] .persona-label-btn:focus-visible {
  outline: 2px solid var(--persona-accent, #171717);
  outline-offset: 2px;
}

[data-persona-root] .persona-label-btn--sm {
  padding: var(--persona-label-btn-padding, 0.25rem 0.5rem);
  font-size: var(--persona-label-btn-font-size, 0.75rem);
}

[data-persona-root] .persona-label-btn--md {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

[data-persona-root] .persona-label-btn--primary {
  background: var(--persona-primary, #171717);
  color: var(--persona-text-inverse, #ffffff);
  border-color: transparent;
}

[data-persona-root] .persona-label-btn--primary:hover {
  opacity: 0.9;
}

[data-persona-root] .persona-label-btn--destructive {
  color: var(--persona-label-btn-destructive-color, #ef4444);
}

[data-persona-root] .persona-label-btn--ghost {
  border: none;
  background: transparent;
}

[data-persona-root] .persona-label-btn--ghost:hover {
  background: var(--persona-label-btn-hover-bg, var(--persona-container, #f3f4f6));
}

[data-persona-root] .persona-scroll-to-bottom-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--persona-scroll-to-bottom-gap, 0.5rem);
  min-height: var(--persona-scroll-to-bottom-size, 40px);
  border-radius: var(--persona-scroll-to-bottom-radius, var(--persona-radius-full, 9999px));
  border: 1px solid var(--persona-scroll-to-bottom-border, var(--persona-primary, #111827));
  background: var(--persona-scroll-to-bottom-bg, var(--persona-button-primary-bg, var(--persona-accent, #0f0f0f)));
  color: var(--persona-scroll-to-bottom-fg, var(--persona-button-primary-fg, var(--persona-text-inverse, #ffffff)));
  box-shadow: var(--persona-scroll-to-bottom-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
  font-size: var(--persona-scroll-to-bottom-font-size, 0.875rem);
  line-height: 1;
}

[data-persona-root] .persona-scroll-to-bottom-indicator[data-persona-scroll-to-bottom-has-label="true"] {
  padding: var(--persona-scroll-to-bottom-padding, 0.5rem 0.875rem);
}

[data-persona-root] .persona-scroll-to-bottom-indicator[data-persona-scroll-to-bottom-has-label="false"] {
  width: var(--persona-scroll-to-bottom-size, 40px);
  height: var(--persona-scroll-to-bottom-size, 40px);
  padding: 0;
  gap: 0;
}

[data-persona-root] .persona-scroll-to-bottom-indicator svg {
  width: var(--persona-scroll-to-bottom-icon-size, 14px);
  height: var(--persona-scroll-to-bottom-icon-size, 14px);
}

/* New-messages count badge pinned to the affordance's top-right corner. */
[data-persona-root] .persona-scroll-to-bottom-indicator [data-persona-scroll-to-bottom-count] {
  position: absolute;
  top: -6px;
  right: -6px;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--persona-radius-full, 9999px);
  border: 1px solid var(--persona-scroll-to-bottom-border, var(--persona-primary, #111827));
  background: var(--persona-scroll-to-bottom-count-bg, var(--persona-surface, #ffffff));
  color: var(--persona-scroll-to-bottom-count-fg, var(--persona-primary, #111827));
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

[data-persona-root] .persona-scroll-to-bottom-indicator:hover {
  opacity: 0.92;
}

[data-persona-root] .persona-scroll-to-bottom-indicator:focus-visible {
  outline: 2px solid var(--persona-accent, #171717);
  outline-offset: 2px;
}

/* Toggle group: mutually exclusive button set created by createToggleGroup() */
[data-persona-root] .persona-toggle-group {
  display: inline-flex;
  gap: var(--persona-toggle-group-gap, 0);
}

[data-persona-root] .persona-toggle-group > .persona-icon-btn {
  border-radius: 0;
}

[data-persona-root] .persona-toggle-group > .persona-icon-btn:first-child {
  border-top-left-radius: var(--persona-toggle-group-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem)));
  border-bottom-left-radius: var(--persona-toggle-group-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem)));
}

[data-persona-root] .persona-toggle-group > .persona-icon-btn:last-child {
  border-top-right-radius: var(--persona-toggle-group-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem)));
  border-bottom-right-radius: var(--persona-toggle-group-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem)));
}

/* Artifact view/source toggle: one segmented pill. The container carries the
   border; segments are borderless and the active one is highlighted, so the
   pair reads as a single mutually exclusive switch instead of two buttons. */
[data-persona-root] .persona-toggle-group.persona-artifact-toggle-group {
  gap: var(--persona-artifact-toolbar-toggle-group-gap, 2px);
  padding: var(--persona-artifact-toolbar-toggle-group-padding, 2px);
  border: var(--persona-artifact-toolbar-toggle-group-border, 1px solid var(--persona-border, #e5e7eb));
  /* Default to the toolbar button radius (document preset var, then the plain
     icon-button var) so the pill matches the neighboring copy/close buttons
     instead of standing out as a capsule. */
  border-radius: var(--persona-artifact-toolbar-toggle-group-radius, var(--persona-artifact-toolbar-icon-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem))));
  background: var(--persona-artifact-toolbar-toggle-group-bg, var(--persona-surface, #ffffff));
}
[data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn {
  border: none;
  background: transparent;
  /* Segment padding = standalone icon-button padding minus the container's
     padding, so the pill's outer height matches the neighboring icon buttons
     (the container's 1px border stands in for the border the segments lost).
     calc() clamps to 0 if a theme sets group padding larger than icon padding. */
  padding: calc(var(--persona-artifact-toolbar-icon-padding, var(--persona-icon-btn-padding, 0.25rem)) - var(--persona-artifact-toolbar-toggle-group-padding, 2px));
  /* Container radius minus the 2px padding so the segment nests concentrically. */
  border-radius: var(--persona-artifact-toolbar-toggle-radius, calc(var(--persona-artifact-toolbar-icon-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem))) - 2px));
}
[data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn:hover {
  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6)));
}
[data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn[aria-pressed="true"] {
  background: var(--persona-artifact-doc-toggle-active-bg, var(--persona-icon-btn-active-bg, var(--persona-container, #f3f4f6)));
  /* Inset ring instead of a border so documentToolbarToggleActiveBorderColor
     still applies inside the borderless segment (transparent by default). */
  box-shadow: inset 0 0 0 1px var(--persona-artifact-doc-toggle-active-border, transparent);
}

/* Sliding selection thumb: a container ::before that translates between the
   two equal-width segments, keyed off aria-pressed via :has(). The static
   aria-pressed background above stays as the fallback for browsers without
   :has() and is disabled inside the @supports block so the highlight is only
   ever painted once. Geometry assumes the group's two segments are equal
   width (both are square icon buttons). */
@supports selector(:has(*)) {
  [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group {
    position: relative;
  }
  [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group::before {
    content: "";
    position: absolute;
    top: var(--persona-artifact-toolbar-toggle-group-padding, 2px);
    bottom: var(--persona-artifact-toolbar-toggle-group-padding, 2px);
    left: var(--persona-artifact-toolbar-toggle-group-padding, 2px);
    width: calc(
      50% - var(--persona-artifact-toolbar-toggle-group-padding, 2px) -
        (var(--persona-artifact-toolbar-toggle-group-gap, 2px) / 2)
    );
    border-radius: var(--persona-artifact-toolbar-toggle-radius, calc(var(--persona-artifact-toolbar-icon-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem))) - 2px));
    background: var(--persona-artifact-doc-toggle-active-bg, var(--persona-icon-btn-active-bg, var(--persona-container, #f3f4f6)));
    box-shadow: inset 0 0 0 1px var(--persona-artifact-doc-toggle-active-border, transparent);
    transition: transform 0.18s ease;
    pointer-events: none;
  }
  [data-persona-root]
    .persona-toggle-group.persona-artifact-toggle-group:has(
      > .persona-icon-btn:last-child[aria-pressed="true"]
    )::before {
    transform: translateX(calc(100% + var(--persona-artifact-toolbar-toggle-group-gap, 2px)));
  }
  /* Positioned so the segments paint above the absolutely positioned thumb
     (document order applies once both are in the positioned layer). */
  [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn {
    position: relative;
  }
  /* The thumb carries the highlight; keep the segment itself transparent. */
  [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn[aria-pressed="true"] {
    background: transparent;
    box-shadow: none;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group::before {
      transition: none;
    }
  }
}

/* Combo button: label + chevron with dropdown */
[data-persona-root] .persona-combo-btn {
  font-size: var(--persona-combo-btn-font-size, 0.8125rem);
  font-weight: var(--persona-combo-btn-font-weight, 600);
  color: var(--persona-combo-btn-color, var(--persona-text, #111827));
  user-select: none;
}

[data-persona-root] .persona-combo-btn-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dropdown menu utility */
[data-persona-root] .persona-dropdown-menu {
  z-index: 100;
  min-width: 160px;
  background: var(--persona-dropdown-bg, var(--persona-surface, #fff));
  border: var(--persona-dropdown-border, 1px solid var(--persona-border, #e5e7eb));
  border-radius: var(--persona-dropdown-radius, 0.625rem);
  padding: 0.25rem 0;
  box-shadow: var(--persona-dropdown-shadow, 0 4px 16px rgba(0,0,0,0.12));
}

[data-persona-root] .persona-dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border: none;
  background: transparent;
  color: var(--persona-dropdown-item-color, var(--persona-text, #1f2937));
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

[data-persona-root] .persona-dropdown-menu button:hover {
  background: var(--persona-dropdown-item-hover-bg, var(--persona-container, #f3f4f6));
}

[data-persona-root] .persona-dropdown-menu button[data-destructive] {
  color: var(--persona-dropdown-destructive-color, #ef4444);
}

[data-persona-root] .persona-dropdown-menu hr {
  border: none;
  border-top: 1px solid var(--persona-dropdown-hr, var(--persona-border, #e5e7eb));
  margin: 0.25rem 0;
}

/* Draggable split handle (desktop split only; hidden in drawer / narrow host / small viewport) */
[data-persona-root] .persona-artifact-split-handle {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  touch-action: none;
  align-self: stretch;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

[data-persona-root] .persona-artifact-split-handle:hover,
[data-persona-root] .persona-artifact-split-handle:focus-visible {
  background: color-mix(in srgb, var(--persona-border, #e5e7eb) 55%, transparent);
  outline: none;
}

[data-persona-root].persona-artifact-narrow-host .persona-artifact-split-handle {
  display: none !important;
}

@media (max-width: 640px) {
  [data-persona-root] .persona-artifact-split-handle {
    display: none !important;
  }
}

@media (min-width: 641px) {
  [data-persona-root] .persona-artifact-pane {
    width: var(--persona-artifact-pane-width, 40%);
    max-width: var(--persona-artifact-pane-max-width, 28rem);
    min-width: var(--persona-artifact-pane-min-width, 0);
    flex-shrink: 0;
    /* No default elevation on the pane; welded reads as one card, detached and
       the drawer set their own shadow. Explicit paneShadow still wins. */
    box-shadow: var(--persona-artifact-pane-shadow, none);
  }
}

/* Expanded artifact pane: pane takes the whole split root, chat column hides.
   Split-view only: below 641px / narrow hosts the drawer already covers everything. */
@media (min-width: 641px) {
  [data-persona-root].persona-artifact-expanded .persona-artifact-split-root > :first-child {
    display: none;
  }
  [data-persona-root].persona-artifact-expanded .persona-artifact-pane {
    width: 100%;
    max-width: none;
  }
  [data-persona-root].persona-artifact-expanded .persona-artifact-split-handle {
    display: none !important;
  }
}
@media (max-width: 640px) {
  [data-persona-root] .persona-artifact-expand-btn {
    display: none !important;
  }
}
[data-persona-root].persona-artifact-narrow-host .persona-artifact-expand-btn {
  display: none !important;
}

/* paneBorderRadius: works on any paneAppearance; overflow clips content to rounded shape */
/* Positioned frame wrapping the sandboxed preview iframe (artifact-preview.ts).
   `position: relative` gives the absolute loading overlay a containing block
   (the shared preview body is display: contents, so the iframe alone has no
   positioning context). The frame owns the rendered height and the iframe is
   100% of it — see the pane default here and the inline overrides below.

   Opaque-canvas / color-scheme trap: an opaque-origin srcdoc (sandbox without
   allow-same-origin) that declares no color-scheme can get a UA-forced opaque
   canvas that flashes before content paints. Declaring color-scheme on the
   iframe plus an explicit background on both the frame and iframe makes the
   pre-paint surface a deliberate, themeable canvas rather than an uncontrolled
   flash. Artifact content generally assumes a light canvas, so white stays the
   default; override via --persona-artifact-frame-bg. */
[data-persona-root] .persona-artifact-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--persona-artifact-frame-bg, #ffffff);
}
/* Previewable file artifact: sandboxed iframe fills its frame. */
[data-persona-root] .persona-artifact-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  color-scheme: light;
  background: var(--persona-artifact-frame-bg, #ffffff);
}

/* Loading overlay above the preview iframe (artifact-preview.ts): absolutely
   fills the frame with the same themed canvas the iframe paints onto, so the
   pre-paint area reads as one deliberate surface. Appended only after
   `loading.delayMs`; the --out modifier fades it before removal. */
[data-persona-root] .persona-artifact-frame-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--persona-artifact-frame-bg, #ffffff);
  opacity: 1;
  transition: opacity var(--persona-artifact-frame-loading-fade, 200ms) ease;
}
[data-persona-root] .persona-artifact-frame-loading--out {
  opacity: 0;
}
/* Default indicator column: the icon spinner, with the escalation label (when
   present) stacked below it. Icon-first, text only as a later escalation. */
[data-persona-root] .persona-artifact-frame-loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}
/* Escalation label: calm, muted, small — NO shimmer (deliberate, per research).
   Hidden until setupPreviewLoading adds --visible after labelDelayMs; a plain
   opacity transition fades it in. */
[data-persona-root] .persona-artifact-frame-loading-text {
  color: var(
    --persona-artifact-frame-loading-color,
    var(--persona-text-muted, #6b7280)
  );
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 240ms ease;
}
[data-persona-root] .persona-artifact-frame-loading-text--visible {
  opacity: 1;
}

/* Reusable icon spinner (utils/spinner.ts): a faint full track ring with a
   rotating arc on top. Icon-first loading is the norm across preview surfaces
   (Sandpack, embeds, v0/ChatGPT) and design systems (HIG/Material/Carbon/Geist);
   text-only "loading" is used by none. The arc spins via a GPU-friendly
   `transform: rotate` keyframe. Fallback chains:
   - size:  --persona-artifact-spinner-size (default 28px)
   - arc:   --persona-artifact-spinner-color → --persona-accent → --persona-primary
            → neutral dark (the interactive/brand hue)
   - track: --persona-artifact-spinner-track-color → --persona-border → light gray
   - speed: --persona-artifact-spinner-speed (default 0.8s) */
[data-persona-root] .persona-spinner {
  width: var(--persona-artifact-spinner-size, 28px);
  height: var(--persona-artifact-spinner-size, 28px);
  transform-origin: center;
  animation: persona-spinner-rotate var(--persona-artifact-spinner-speed, 0.8s)
    linear infinite;
}
[data-persona-root] .persona-spinner-track {
  fill: none;
  stroke: var(
    --persona-artifact-spinner-track-color,
    var(--persona-border, #e5e7eb)
  );
  stroke-width: 2.5;
}
[data-persona-root] .persona-spinner-arc {
  fill: none;
  stroke: var(
    --persona-artifact-spinner-color,
    var(--persona-accent, var(--persona-primary, #171717))
  );
  stroke-width: 2.5;
  stroke-linecap: round;
  /* r=9 → circumference ≈ 56.5; ~15u arc reads as a quarter-ish sweep. */
  stroke-dasharray: 15 42;
}
@keyframes persona-spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Reduced motion: stop the rotation (the static arc still reads as a ring) and
   drop the label fade. */
@media (prefers-reduced-motion: reduce) {
  [data-persona-root] .persona-spinner {
    animation: none;
  }
  [data-persona-root] .persona-artifact-frame-loading-text {
    transition: none;
  }
}

/* Shared artifact preview body wrapper (artifact-preview.ts): generates no box
   so children (e.g. the iframe's height: 100%) lay out against the host
   container exactly as if they were its direct children. */
[data-persona-root] .persona-artifact-preview-body {
  display: contents;
}

/* Syntax-highlighted source view (code-highlight.ts). The host <pre> keeps its
   wrapping (persona-whitespace-pre-wrap); <code> resets white-space to normal so
   the literal "\n" separator text nodes between block line spans collapse
   visually while still reconstructing the verbatim source via textContent. Each
   line reserves a left gutter whose number is drawn by a CSS counter — never
   real text, so it is not selectable or copyable. */
/* The source view sits directly on the pane surface (transparent, matching
   Claude's code view); set --persona-code-bg via theme.components.code.background
   to render it as an inset sheet instead. */
[data-persona-root] .persona-code-pre {
  margin: 0;
  background: var(--persona-code-bg, transparent);
  border-radius: var(--persona-radius-md, 0.375rem);
  padding: 0.5rem 0.75rem 0.5rem 0.25rem;
}

/* Pane source view is full-bleed: the pane drops its content padding (class
   toggled in artifact-pane.ts when the body rendered a code pre) so the
   line-number gutter sits flush against the pane's left edge. */
[data-persona-root] .persona-artifact-content-flush {
  padding: 0;
}
[data-persona-root] .persona-artifact-content-flush .persona-code-pre {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-radius: 0;
  min-height: 100%;
}
[data-persona-root] .persona-code {
  display: block;
  white-space: normal;
  counter-reset: persona-code-line;
  /* Defend against host-page element rules (`code { background/padding/… }`):
     without Shadow DOM those selectors reach into the widget, and inline-code
     chip styling on a full source view reads as a mystery tinted block. */
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
[data-persona-root] .persona-code-line {
  display: block;
  position: relative;
  white-space: pre-wrap;
  padding-left: 3em;
  counter-increment: persona-code-line;
  /* An empty source line emits a childless span — a zero-height block whose
     absolutely-positioned gutter number would paint on top of the next line's.
     Reserve one line box (1lh; 1em as the older-engine fallback). */
  min-height: 1em;
  min-height: 1lh;
}
[data-persona-root] .persona-code-line::before {
  content: counter(persona-code-line);
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;
  padding-right: 0.5em;
  text-align: right;
  color: var(--persona-code-line-number-color, #a0a1a7);
  border-right: 1px solid
    var(--persona-code-gutter-border-color, var(--persona-border, #e5e7eb));
  -webkit-user-select: none;
  user-select: none;
}
/* Default syntax palette: One Light (Atom), the same theme Claude.ai's code
   view uses. Numbers and attribute names share One's constant orange; CSS
   properties / JSON keys take the function blue so keys stay distinct from
   string values. */
[data-persona-root] .persona-code-token-keyword {
  color: var(--persona-code-keyword-color, #a626a4);
}
[data-persona-root] .persona-code-token-string {
  color: var(--persona-code-string-color, #50a14f);
}
[data-persona-root] .persona-code-token-comment {
  color: var(--persona-code-comment-color, #a0a1a7);
  font-style: italic;
}
[data-persona-root] .persona-code-token-number {
  color: var(--persona-code-number-color, #986801);
}
[data-persona-root] .persona-code-token-tag {
  color: var(--persona-code-tag-color, #e45649);
}
[data-persona-root] .persona-code-token-attr {
  color: var(--persona-code-attr-color, #986801);
}
[data-persona-root] .persona-code-token-property {
  color: var(--persona-code-property-color, #4078f2);
}

/* Dark-scheme defaults for the syntax palette (One Dark counterparts of the
   One Light defaults above). Keyed off the widget's resolved scheme, stamped
   as data-persona-color-scheme by applyThemeVariables — NOT the OS
   prefers-color-scheme, which diverges whenever a host pins colorScheme.
   The widget's semantic vars can't drive these (syntax colors aren't
   derivable from surface/text). Explicit theme.components.code values still
   win in both schemes. */
[data-persona-root][data-persona-color-scheme="dark"] .persona-code-line::before {
  color: var(--persona-code-line-number-color, #4b5263);
  border-right-color: var(--persona-code-gutter-border-color, #3b4048);
}
[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-keyword {
  color: var(--persona-code-keyword-color, #c678dd);
}
[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-string {
  color: var(--persona-code-string-color, #98c379);
}
[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-comment {
  color: var(--persona-code-comment-color, #5c6370);
}
[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-number {
  color: var(--persona-code-number-color, #d19a66);
}
[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-tag {
  color: var(--persona-code-tag-color, #e06c75);
}
[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-attr {
  color: var(--persona-code-attr-color, #d19a66);
}
[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-property {
  color: var(--persona-code-property-color, #61afef);
}

/* Inline artifact block (artifact-inline.ts, display: "inline"): carries its
   own border/surface (registered with bubbleChrome: false, like the card).
   Reads like a file preview: a flush title/toolbar chrome bar above the body.
   Default vars draw from the same semantic surface/border/text/muted family
   the card uses, so light/dark themes work with zero config. */
[data-persona-root] .persona-artifact-inline {
  border: var(--persona-artifact-inline-border, 1px solid var(--persona-border, #e5e7eb));
  border-radius: var(
    --persona-artifact-inline-radius,
    var(--persona-message-assistant-radius, var(--persona-radius-lg, 0.5rem))
  );
  background: var(--persona-artifact-inline-bg, var(--persona-surface, #ffffff));
  overflow: hidden;
}

/* completeDisplay: "card" — once the block collapses to the compact reference
   card it keeps the same root (updater keying + theme zone survive) but must
   drop the inline frame styling, since the nested card carries its own border,
   background, and radius. overflow: visible so the card's focus outline (which
   uses outline-offset) isn't clipped. */
[data-persona-root] .persona-artifact-inline.persona-artifact-inline--card {
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

/* Title/toolbar chrome bar: flush to the frame edge (no frame padding). */
[data-persona-root] .persona-artifact-inline-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--persona-artifact-inline-chrome-bg, var(--persona-surface, #ffffff));
  border-bottom: 1px solid var(--persona-artifact-inline-chrome-border, var(--persona-border, #e5e7eb));
}

/* Leading cluster: file icon + title + type label / streaming status. */
[data-persona-root] .persona-artifact-inline-chrome-lead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--persona-artifact-inline-title-color, var(--persona-text, #111827));
  font-size: 0.8125rem;
  font-weight: 500;
}

[data-persona-root] .persona-artifact-inline-chrome-lead .persona-artifact-inline-type,
[data-persona-root] .persona-artifact-inline-chrome-lead .persona-artifact-inline-status {
  color: var(--persona-artifact-inline-muted-color, var(--persona-text-muted, #6b7280));
  font-weight: 400;
}

/* Streaming status: animated label span + optional plain detail span (live
   counters). The label carries the loading animation; the detail updates freely
   per delta and stays un-animated. Shared by the card, the inline chrome, and
   the inline status body (features.artifacts.statusLabel). Keep the status span
   from blowing out the chrome bar when a long detail streams in. */
[data-persona-root] .persona-artifact-inline-chrome-lead .persona-artifact-inline-status {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-persona-root] .persona-artifact-status-detail {
  color: var(--persona-artifact-inline-muted-color, var(--persona-text-muted, #6b7280));
  margin-left: 0.375rem;
  font-variant-numeric: tabular-nums;
}

/* Trailing cluster: custom inlineActions, copy, expand. */
[data-persona-root] .persona-artifact-inline-chrome-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}

/* Body wraps the chrome-free preview; padding lives here so the chrome sits
   flush to the frame edge. */
[data-persona-root] .persona-artifact-inline-body {
  padding: 0.75rem;
}

/* The preview frame (and its 100%-height iframe) is height: 100%, which
   collapses inside the auto-height inline block; pin a themeable fixed height on
   the frame instead. Height var chain: inlineBody.height
   (--persona-artifact-inline-body-height, set per state by artifact-inline.ts) →
   the legacy --persona-artifact-inline-frame-height override → 320px. The legacy
   var still wins when the new one is unset (inlineBody.height "auto"), so themes
   pinned to it keep working. The --sized rule below (equal specificity, declared
   later) overrides this to 100% when the body wrapper owns the height. */
[data-persona-root] .persona-artifact-inline .persona-artifact-frame {
  height: var(
    --persona-artifact-inline-body-height,
    var(--persona-artifact-inline-frame-height, 320px)
  );
}

/* Inline body height model (features.artifacts.inlineBody). The block root sets
   --persona-artifact-inline-body-height (px) for the current state; leaving it
   unset (inlineBody.height "auto") lets the body size to content and the iframe
   fall back through the chain above. */

/* Code bodies are full-bleed, matching the pane's source-view treatment (same
   class the pane toggles): the line-number gutter sits flush against the frame
   edge. Declared after .persona-artifact-inline-body so padding: 0 wins the
   specificity tie. */
[data-persona-root] .persona-artifact-inline-body.persona-artifact-content-flush {
  padding: 0;
}

/* Numeric inlineBody.height: the body wrapper owns the reserved height
   (border-box), so flush code, padded iframe, and padded status bodies all
   occupy the same outer box and every state swap is layout neutral. Fill-capable
   content stretches to the wrapper. */
[data-persona-root] .persona-artifact-inline-body--sized {
  height: var(--persona-artifact-inline-body-height, auto);
}
[data-persona-root] .persona-artifact-inline-body--sized .persona-artifact-source-window--fixed,
[data-persona-root] .persona-artifact-inline-body--sized .persona-artifact-frame {
  height: 100%;
}
[data-persona-root] .persona-artifact-inline-body--sized .persona-artifact-status-view {
  min-height: 100%;
}

/* Fixed-height streaming source window: a reserved scroll viewport so streamed
   source no longer grows an unbounded <pre> and then snaps to the preview. The
   height comes from the sized body wrapper above (the --fixed class is only
   ever applied together with it). The bare (non-fixed) window is an inert
   wrapper (pane path never adds it; the source <pre> sits directly on el
   there). */
[data-persona-root] .persona-artifact-source-window {
  min-width: 0;
}
[data-persona-root] .persona-artifact-source-window--fixed {
  overflow-y: auto;
}

/* Clipped preview window (inlineBody.overflow: "clip"): a fixed-height window
   showing the top of the document with no internal scroll. Applied together with
   --fixed (which supplies the reserved height via the --sized body wrapper and
   the fill-capable detection in artifact-inline.ts); declared after --fixed so
   this overflow: hidden wins its overflow-y: auto on the specificity tie. */
[data-persona-root] .persona-artifact-source-window--clip {
  overflow: hidden;
}

/* Edge fade masks on the fixed window (top fade signals content clipped above).
   mask-image works over any themed background; size via --persona-artifact-fade-size
   (defaults to 40px). */
[data-persona-root]
  .persona-artifact-fade-top:not(.persona-artifact-fade-bottom) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--persona-artifact-fade-size, 40px)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--persona-artifact-fade-size, 40px)
  );
}
[data-persona-root]
  .persona-artifact-fade-bottom:not(.persona-artifact-fade-top) {
  -webkit-mask-image: linear-gradient(
    to top,
    transparent 0,
    #000 var(--persona-artifact-fade-size, 40px)
  );
  mask-image: linear-gradient(
    to top,
    transparent 0,
    #000 var(--persona-artifact-fade-size, 40px)
  );
}
[data-persona-root]
  .persona-artifact-fade-top.persona-artifact-fade-bottom {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--persona-artifact-fade-size, 40px),
    #000 calc(100% - var(--persona-artifact-fade-size, 40px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--persona-artifact-fade-size, 40px),
    #000 calc(100% - var(--persona-artifact-fade-size, 40px)),
    transparent 100%
  );
}

/* Edge fade on the horizontally scrollable tab strip. Visual hint only; the
   tablist keyboard behavior is the real affordance. Sized via
   --persona-artifact-tab-fade-size (default 24px). */
[data-persona-root]
  .persona-artifact-tab-fade-start:not(.persona-artifact-tab-fade-end) {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--persona-artifact-tab-fade-size, 24px)
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--persona-artifact-tab-fade-size, 24px)
  );
}
[data-persona-root]
  .persona-artifact-tab-fade-end:not(.persona-artifact-tab-fade-start) {
  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0,
    #000 var(--persona-artifact-tab-fade-size, 24px)
  );
  mask-image: linear-gradient(
    to left,
    transparent 0,
    #000 var(--persona-artifact-tab-fade-size, 24px)
  );
}
[data-persona-root]
  .persona-artifact-tab-fade-start.persona-artifact-tab-fade-end {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--persona-artifact-tab-fade-size, 24px),
    #000 calc(100% - var(--persona-artifact-tab-fade-size, 24px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--persona-artifact-tab-fade-size, 24px),
    #000 calc(100% - var(--persona-artifact-tab-fade-size, 24px)),
    transparent 100%
  );
}

/* Reserved-height status placeholder (inlineBody.streamingView: "status").
   Numeric height reserves the var; "auto" falls back to a modest 160px min-height
   so the card doesn't collapse. */
[data-persona-root] .persona-artifact-status-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--persona-artifact-inline-body-height, 160px);
}

/* Complete-state height cap for non-iframe bodies (rendered markdown, source
   view, component). The iframe path is sized by the iframe rule above instead,
   so this class is only applied when the completed body has no iframe. */
[data-persona-root] .persona-artifact-inline-body--cap {
  max-height: var(--persona-artifact-inline-body-height, none);
  overflow-y: auto;
}

[data-persona-root] .persona-artifact-pane {
  border-radius: var(--persona-artifact-pane-radius, 0);
  overflow: hidden;
  /* Layout paneBackground → theme components.artifact.pane.background → semantic surface */
  background-color: var(
    --persona-artifact-pane-bg,
    var(--persona-components-artifact-pane-background, var(--persona-surface, #ffffff))
  );
}

/* paneAppearance: 'seamless': flush with chat, no border/shadow/gap */
/* `position: relative` for resizer overlay; gap 0; positioning is applied in ui.ts */
[data-persona-root].persona-artifact-appearance-seamless .persona-artifact-split-root {
  position: relative;
  gap: 0 !important;
}

[data-persona-root].persona-artifact-appearance-seamless .persona-artifact-pane {
  border-left-width: 0 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  /* Same token chain; final fallback stays container for flush split chrome */
  background-color: var(
    --persona-artifact-pane-bg,
    var(--persona-components-artifact-pane-background, var(--persona-container, #f8fafc))
  );
}

/* layout.paneBorder / paneBorderLeft: theme overrides (after appearance defaults) */
[data-persona-root].persona-artifact-border-full .persona-artifact-pane {
  border: var(--persona-artifact-pane-border) !important;
}

[data-persona-root].persona-artifact-border-left .persona-artifact-pane {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: var(--persona-artifact-pane-border-left) !important;
}

[data-persona-root].persona-artifact-appearance-seamless.persona-artifact-border-left .persona-artifact-pane {
  border-left: var(--persona-artifact-pane-border-left) !important;
}

[data-persona-root].persona-artifact-appearance-seamless.persona-artifact-border-full .persona-artifact-pane {
  border: var(--persona-artifact-pane-border) !important;
}

/* paneAppearance: 'detached': floating card with gap, all-side border, radius, elevation, canvas behind */
/* Split gap defaults to --persona-panel-inset from ui.ts; canvas paints behind both columns. */
[data-persona-root].persona-artifact-appearance-detached .persona-artifact-split-root {
  background: var(--persona-panel-canvas-bg);
}

/* Desktop split only (drawer keeps its own chrome). Non-!important so explicit
   paneBorder / paneShadow / paneBorderRadius overrides still win. */
@media (min-width: 641px) {
  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-appearance-detached .persona-artifact-pane {
    border-radius: var(
      --persona-artifact-pane-radius,
      var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem))
    );
    border: var(--persona-panel-border, 1px solid var(--persona-border, #e5e7eb));
    box-shadow: var(
      --persona-artifact-pane-shadow,
      var(--persona-panel-shadow, var(--persona-palette-shadows-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25)))
    );
  }
}

/* chatSurface: 'flush': chat is flat flush background, only the pane floats. The
   chat has no perimeter inset, so inset the pane on 3 sides (left gap comes from
   the existing detached split flex gap). Keeps the pane's border/radius/shadow. */
@media (min-width: 641px) {
  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-chat-flush .persona-artifact-pane {
    margin-top: var(--persona-panel-inset);
    margin-right: var(--persona-panel-inset);
    margin-bottom: var(--persona-panel-inset);
  }
}

/*
 * Welded split chrome (panel + seamless): one card. The outer panel carries the
 * border + radius + shadow (set in ui.ts); each column rounds only its outer
 * corners and clips, so the columns fill the panel's rounded rect and butt flush
 * at the seam. Desktop split only (narrowed via :not(.narrow-host) + breakpoint).
 * Toggled from ui.ts by splitChromeMode(); the pane's flex layout owns gap 0.
 */
@media (min-width: 641px) {
  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-welded-split .persona-artifact-split-root {
    position: relative;
  }

  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-welded-split .persona-widget-container {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden;
  }

  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-welded-split .persona-artifact-pane {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--persona-artifact-welded-outer-radius, var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem))) !important;
    border-bottom-right-radius: var(--persona-artifact-welded-outer-radius, var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem))) !important;
    overflow: hidden;
  }

  /* panel appearance: a hairline divider on the pane's chat-facing edge. seamless
     omits it (it already zeroes border-left). Non-!important so paneBorder /
     paneBorderLeft overrides win. */
  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-welded-split.persona-artifact-appearance-panel .persona-artifact-pane {
    border-left: 1px solid var(--persona-border, #e5e7eb);
  }
}

/* Narrow floating panel: drawer inside panel (class toggled by JS from panel width) */
[data-persona-root].persona-artifact-narrow-host .persona-artifact-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 55 !important;
}

@media (min-width: 641px) {
  [data-persona-root].persona-artifact-narrow-host .persona-artifact-pane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(calc(100% - 1rem), 22rem) !important;
    max-width: 22rem !important;
    z-index: 60;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  }
  [data-persona-root].persona-artifact-narrow-host .persona-artifact-pane.persona-artifact-drawer-open {
    transform: translateX(0);
  }
}

@media (max-width: 640px) {
  [data-persona-root] .persona-artifact-pane {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100vw - 1.5rem, 22rem);
    z-index: 60;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  }
  [data-persona-root] .persona-artifact-pane.persona-artifact-drawer-open {
    transform: translateX(0);
  }
}

/* ============================================================
   Stream animations: reveal effects for assistant message text
   while streaming. Opt-in via `features.streamAnimation.type`.
   Units are staggered via `--char-index` / `--word-index`
   (set inline on each wrapper span). Timing is configured via
   `--persona-stream-step` and `--persona-stream-duration` on
   the `.persona-message-content` container.
   ============================================================ */

/* Per-char/per-word spans need to be inline-block so `transform` works for
   the rise/fade animations. Each span animates from the moment it is first
   added to the DOM: streaming itself provides the visible stagger, so the
   CSS animation has no per-index delay. An index-based delay would compound
   with the stream's arrival cadence and leave later chars permanently hidden. */
[data-persona-root] .persona-stream-char,
[data-persona-root] .persona-stream-word {
  display: inline-block;
  will-change: opacity, transform, filter;
}

/* Group chars belonging to the same word so the browser treats the word as a
   single break unit. Without this, every inline-block char introduces a break
   opportunity and words get split mid-letter during streaming, then snap back
   when the final content replaces the wrapped spans. */
[data-persona-root] .persona-stream-word-group {
  white-space: nowrap;
}

/* ---------- typewriter: fade per arriving char + blinking caret ---------- */
@keyframes persona-stream-typewriter-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
[data-persona-root] .persona-stream-typewriter .persona-stream-char {
  animation: persona-stream-typewriter-in var(--persona-stream-step, 120ms) ease-out both;
}

/* ---------- letter-rise: per-char translateY + fade ---------- */
@keyframes persona-stream-letter-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-persona-root] .persona-stream-letter-rise .persona-stream-char {
  animation: persona-stream-letter-rise calc(var(--persona-stream-step, 120ms) * 2)
    ease-out both;
}

/* ---------- word-fade: per-word blur + translateY fade-in ---------- */
@keyframes persona-stream-word-fade {
  from { opacity: 0; filter: blur(4px); transform: translateY(3px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
[data-persona-root] .persona-stream-word-fade .persona-stream-word {
  animation: persona-stream-word-fade calc(var(--persona-stream-step, 120ms) * 3)
    ease-out both;
}

/* The following animations live in subpath plugin modules: their CSS is
   injected by the plugin when activated, not by the core stylesheet:
   - `wipe`        → @runtypelabs/persona/animations/wipe
   - `glyph-cycle` → @runtypelabs/persona/animations/glyph-cycle */

/* ---------- pop-bubble: scale + opacity entrance on the bubble ---------- */
@keyframes persona-stream-pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
[data-persona-root] .persona-stream-pop {
  transform-origin: bottom left;
  animation: persona-stream-pop-in 400ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

/* ---------- caret used by typewriter ---------- */
@keyframes persona-stream-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
[data-persona-root] .persona-stream-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: currentColor;
  animation: persona-stream-blink 1s steps(1) infinite;
}

/* ---------- inline timestamp (trails the last line of message text) ---------- */
[data-persona-root] .persona-timestamp-inline {
  display: inline-block;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* ---------- skeleton placeholder (pre-first-token) ---------- */
@keyframes persona-stream-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
[data-persona-root] .persona-stream-skeleton {
  padding: 2px 0;
  /* The assistant bubble sizes to content. Give the skeleton an intrinsic
     width so the bubble expands; the bubble's own `max-width: 85%` clamps
     the upper bound. */
  width: 260px;
  max-width: 100%;
}
[data-persona-root] .persona-stream-skeleton-line {
  width: 100%;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, currentColor 12%, transparent) 0%,
    color-mix(in srgb, currentColor 22%, transparent) 50%,
    color-mix(in srgb, currentColor 12%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: persona-stream-skeleton-shimmer 1.4s linear infinite;
}

/* ---------- reduced-motion: disable per-unit and container animations ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-persona-root] .persona-stream-typewriter .persona-stream-char,
  [data-persona-root] .persona-stream-letter-rise .persona-stream-char,
  [data-persona-root] .persona-stream-word-fade .persona-stream-word,
  [data-persona-root] .persona-stream-pop,
  [data-persona-root] .persona-stream-caret,
  [data-persona-root] .persona-stream-skeleton-line {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    color: inherit !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
            background-clip: border-box !important;
  }
}

/* ========================================================================
 * ask_user_question: built-in answer-pill sheet
 * Slides in over the composer when the assistant invokes `ask_user_question`.
 * Overridable via `config.features.askUserQuestion.styles`.
 * ======================================================================== */

[data-persona-root] .persona-hidden {
  display: none !important;
}

/* In-transcript stub: small "Awaiting…" chip. */
[data-persona-root] .persona-ask-stub {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--persona-muted, #6b7280);
  background: var(--persona-container, #f3f4f6);
  border: 1px dashed var(--persona-border, #e5e7eb);
}

[data-persona-root] .persona-ask-stub-label {
  font-weight: 500;
}

/* Sheet container: absolute inside composerOverlay. */
[data-persona-root] .persona-ask-sheet {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(100% + 0.5rem);
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  background: var(--persona-ask-sheet-bg, var(--persona-surface, #ffffff));
  border: 1px solid var(--persona-ask-sheet-border, var(--persona-border, #e5e7eb));
  border-radius: 1rem;
  box-shadow: var(--persona-ask-sheet-shadow, 0 12px 28px -10px rgba(0, 0, 0, 0.15), 0 4px 10px -6px rgba(0, 0, 0, 0.08));
  transition: transform var(--persona-ask-sheet-duration, 180ms) ease, opacity var(--persona-ask-sheet-duration, 180ms) ease;
  opacity: 1;
  transform: translateY(0);
}

[data-persona-root] .persona-ask-sheet.persona-ask-sheet-enter {
  opacity: 0;
  transform: translateY(8px);
}

[data-persona-root] .persona-ask-sheet.persona-ask-sheet-leave {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* Header row: question + close button */
[data-persona-root] .persona-ask-sheet-header {
  margin-bottom: 0.55rem;
}

[data-persona-root] .persona-ask-sheet-question {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--persona-text, #1f2937);
  min-height: 1.35em;
}

[data-persona-root] .persona-ask-question-skeleton {
  display: block;
  width: 60%;
  height: 0.85rem;
  border-radius: 0.3rem;
  background: linear-gradient(90deg,
    var(--persona-container, #f3f4f6) 0%,
    var(--persona-border, #e5e7eb) 50%,
    var(--persona-container, #f3f4f6) 100%);
  background-size: 200% 100%;
  animation: persona-ask-skeleton-shimmer 1.2s ease-in-out infinite;
  color: transparent;
}

[data-persona-root] .persona-ask-sheet-step-inline {
  flex: 0 0 auto;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--persona-text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

[data-persona-root] .persona-ask-sheet-step-inline:empty {
  display: none;
}

/* Option list: stacked one per row by default ("rows" layout). The "pills"
   layout opt-in switches to horizontal wrap with compact pills; see also
   horizontalPillsAskPlugin example for a custom variant. */
[data-persona-root] .persona-ask-pills {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 0.4rem;
  column-gap: 0;
}

[data-persona-root] .persona-ask-pills--rows {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.4rem;
}

/* Pills layout opt-in: horizontal wrap, auto-width compact pills. */
[data-persona-root] .persona-ask-sheet--pills .persona-ask-pills:not(.persona-ask-pills--rows) {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
}

[data-persona-root] .persona-ask-sheet--pills .persona-ask-pills:not(.persona-ask-pills--rows) .persona-ask-pill {
  width: auto;
  padding: 0.4rem 0.9rem;
  border-radius: var(--persona-ask-pill-radius, 9999px);
}

[data-persona-root] .persona-ask-pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-radius: var(--persona-ask-pill-radius, 0.6rem);
  background: var(--persona-ask-pill-bg, transparent);
  color: var(--persona-ask-pill-fg, var(--persona-text, #1f2937));
  border: 1px solid var(--persona-border, #e5e7eb);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

[data-persona-root] .persona-ask-pill:hover:not(:disabled):not(.persona-ask-pill-skeleton):not(.persona-ask-pill-selected):not([aria-pressed="true"]) {
  border-color: var(--persona-text, #1f2937);
  background: var(--persona-container, #f3f4f6);
}

[data-persona-root] .persona-ask-pill:active {
  transform: translateY(1px);
}

[data-persona-root] .persona-ask-pill-selected,
[data-persona-root] .persona-ask-pill[aria-pressed="true"] {
  background: var(--persona-ask-pill-bg-selected, var(--persona-accent, #0f0f0f));
  color: var(--persona-ask-pill-fg-selected, #fafafa);
  border-color: var(--persona-ask-pill-bg-selected, var(--persona-accent, #0f0f0f));
}

[data-persona-root] .persona-ask-pill:focus:not(:focus-visible) {
  outline: none;
}

[data-persona-root] .persona-ask-pill:focus-visible {
  outline: 2px solid var(--persona-accent, #0f0f0f);
  outline-offset: 2px;
}

[data-persona-root] .persona-ask-pill-custom {
  border-style: dashed;
}

[data-persona-root] .persona-ask-pill-skeleton {
  min-width: 5rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--persona-border, #e5e7eb);
  background: linear-gradient(90deg,
    var(--persona-container, #f3f4f6) 0%,
    var(--persona-border, #e5e7eb) 50%,
    var(--persona-container, #f3f4f6) 100%);
  background-size: 200% 100%;
  animation: persona-ask-skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes persona-ask-skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* Row layout: full-width stacked rows with always-visible description
   and a right-edge affordance (number badge for single-select, check for
   multi-select). Layered on top of .persona-ask-pill base styles. */
[data-persona-root] .persona-ask-row {
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
}

[data-persona-root] .persona-ask-row-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

[data-persona-root] .persona-ask-row-label {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}

[data-persona-root] .persona-ask-row-description {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--persona-text-muted, #6b7280);
  white-space: normal;
  overflow-wrap: anywhere;
}

[data-persona-root] .persona-ask-pill-selected .persona-ask-row-description,
[data-persona-root] .persona-ask-pill[aria-pressed="true"] .persona-ask-row-description {
  color: var(--persona-ask-pill-fg-selected, #fafafa);
  opacity: 0.85;
}

[data-persona-root] .persona-ask-row-affordance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
}

[data-persona-root] .persona-ask-row-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  border: 1px solid var(--persona-border, #e5e7eb);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--persona-text-muted, #6b7280);
  background: transparent;
}

[data-persona-root] .persona-ask-pill-selected .persona-ask-row-badge,
[data-persona-root] .persona-ask-pill[aria-pressed="true"] .persona-ask-row-badge {
  border-color: var(--persona-ask-pill-fg-selected, #fafafa);
  color: var(--persona-ask-pill-fg-selected, #fafafa);
}

[data-persona-root] .persona-ask-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.35rem;
  border: 1.5px solid var(--persona-border, #d1d5db);
  background: transparent;
  position: relative;
}

[data-persona-root] .persona-ask-pill-selected .persona-ask-row-check,
[data-persona-root] .persona-ask-pill[aria-pressed="true"] .persona-ask-row-check {
  background: var(--persona-ask-pill-fg-selected, #fafafa);
  border-color: var(--persona-ask-pill-fg-selected, #fafafa);
}

[data-persona-root] .persona-ask-pill-selected .persona-ask-row-check::after,
[data-persona-root] .persona-ask-pill[aria-pressed="true"] .persona-ask-row-check::after {
  content: "";
  width: 0.45rem;
  height: 0.75rem;
  border-right: 2px solid var(--persona-ask-pill-bg-selected, var(--persona-accent, #0f0f0f));
  border-bottom: 2px solid var(--persona-ask-pill-bg-selected, var(--persona-accent, #0f0f0f));
  transform: rotate(45deg) translate(-1px, -1px);
}

[data-persona-root] .persona-ask-row.persona-ask-pill-skeleton {
  height: 3rem;
}

/* Other row (rows mode): composite row that contains the free-text input
 * directly. The input fills the row body; the badge sits on the right. */
[data-persona-root] .persona-ask-row--other {
  cursor: text;
}

[data-persona-root] .persona-ask-row-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.92rem;
  color: inherit;
  outline: none;
  width: 100%;
}

[data-persona-root] .persona-ask-row-input::placeholder {
  color: var(--persona-text-muted, #6b7280);
  opacity: 1;
}

/* Free-text expansion row (pills layout only) */
[data-persona-root] .persona-ask-free-text {
  width: 100%;
}

[data-persona-root] .persona-ask-free-text--rows {
  margin-top: 0.4rem;
}

[data-persona-root] .persona-ask-free-text-input {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--persona-border, #e5e7eb);
  border-radius: 0.55rem;
  font-size: 0.88rem;
  background: var(--persona-ask-input-bg, var(--persona-surface, #ffffff));
  color: var(--persona-text, #1f2937);
}

[data-persona-root] .persona-ask-free-text-input:focus {
  outline: 2px solid var(--persona-accent, #0f0f0f);
  outline-offset: 1px;
}

[data-persona-root] .persona-ask-free-text-submit,
[data-persona-root] .persona-ask-multi-submit {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.55rem;
  background: var(--persona-accent, #0f0f0f);
  color: #fafafa;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

[data-persona-root] .persona-ask-free-text-submit:disabled,
[data-persona-root] .persona-ask-multi-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Nav row: Back / Skip / Next-or-Submit buttons for grouped payloads. */
[data-persona-root] .persona-ask-nav-back,
[data-persona-root] .persona-ask-nav-skip {
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--persona-text-muted, #6b7280);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

[data-persona-root] .persona-ask-nav-back:hover:not(:disabled),
[data-persona-root] .persona-ask-nav-skip:hover:not(:disabled) {
  background: var(--persona-container, #f3f4f6);
  color: var(--persona-text, #1f2937);
}

[data-persona-root] .persona-ask-nav-back:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

[data-persona-root] .persona-ask-nav-next {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.55rem;
  background: var(--persona-accent, #0f0f0f);
  color: #fafafa;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

[data-persona-root] .persona-ask-nav-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  [data-persona-root] .persona-ask-sheet,
  [data-persona-root] .persona-ask-pill-skeleton,
  [data-persona-root] .persona-ask-question-skeleton {
    transition: none !important;
    animation: none !important;
  }
}

/* ===========================================================================
 * Composer-bar mode (`launcher.mountMode: "composer-bar"`)
 *
 * Geometry (position, width, height) is set per-state inline by
 * `applyComposerBarGeometry()` in ui.ts. The pill composer
 * (`pill-composer-builder.ts`) ships with its own clean className
 * (`persona-pill-composer`, no `persona-flex-col` / `persona-rounded-2xl`
 * baggage), so layout CSS does not need to fight utility classes: no
 * !important. The pill is the visible element in both collapsed and
 * expanded states; only the panel above it appears/disappears.
 *
 * Avoid `transform: scale(...)` on the wrapper: it breaks the textarea
 * caret/IME.
 * ======================================================================= */
.persona-widget-wrapper[data-persona-composer-bar] {
  /* Flex column so the inner panel (which has `flex-1`) fills the wrapper.
   * Without this, the panel would shrink-wrap its children (chat container
   * + pill) and a gap would appear between the pill and the wrapper's
   * `bottom: 16px` edge. */
  display: flex;
  flex-direction: column;
  transition:
    max-width 220ms ease,
    bottom 220ms ease,
    top 220ms ease,
    left 220ms ease,
    right 220ms ease,
    transform 220ms ease,
    border-radius 220ms ease,
    height 220ms ease,
    width 220ms ease;
}

/* Modal and anchored: the wrapper goes from collapsed (no inline geometry,
 * so `top/left/transform` resolve to their auto/none defaults) to its
 * expanded position. The default `transform 220ms ease` transition would
 * interpolate `none → translate(...)` and visibly slide the wrapper from
 * its static-default origin toward its target: diagonally for modal,
 * horizontally from the right for anchored. Neither mode is morphing
 * something the user can see (the wrapper is invisible when collapsed
 * because the pill lives in pillRoot, not the wrapper), so the slide
 * is pure motion noise. Disable geometry transitions for both; the
 * container's opacity fade-in keyframe is the reveal.
 *
 * Fullscreen intentionally keeps its geometry transition: that's the
 * one mode where the wrapper genuinely morphs (empty → full viewport),
 * and the staggered fade-in cascade below is built to mask the
 * outer-edge/inner-content desync during that morph. */
.persona-widget-wrapper[data-persona-composer-bar][data-expanded-size="modal"],
.persona-widget-wrapper[data-persona-composer-bar][data-expanded-size="anchored"] {
  transition: none;
}

/* --- Pill composer chrome (always visible in composer-bar mode) -------- */

/* Pill is a single-row grid: paperclip · textarea · mic + send. */
.persona-pill-composer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--persona-surface, #ffffff);
  border: 1px solid var(--persona-border, #e5e7eb);
  box-shadow:
    0 6px 24px rgba(15, 23, 42, 0.10),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

.persona-pill-composer .persona-composer-textarea {
  /* Single line by default; the autoresize closure expands up to the
   * max-height set inline by pill-composer-builder (100px). Width 100%
   * fills the `1fr` middle grid cell so wrapping only happens once the
   * pill itself can't grow any wider. */
  min-height: 24px;
  width: 100%;
  padding: 4px 0;
}

/* Responsive default width for the collapsed pill: applied only when
 * `applyComposerBarGeometry()` leaves the wrapper's inline width empty
 * (i.e., the user did NOT set `composerBar.collapsedMaxWidth`). Inline
 * width from a user config still wins via specificity (inline > class). */
/* Pill responsive widths now live on the viewport-fixed pillRoot below;
 * the wrapper no longer doubles as the pill container. */

/* The action cells host inline-flex buttons; without explicit flex layout
 * on the cell, the buttons sit on the inline baseline and the cell extends
 * below them with descender space, making the buttons look top-aligned. */
.persona-pill-composer__left,
.persona-pill-composer__right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Footer wrapping the pill: transparent surface, vertical stack with
 * room above the pill for the previews row. */
.persona-widget-footer--pill {
  background: transparent;
  border-top: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Configured / agent-pushed suggestion chips belong to the expanded
 * conversation surface, not the always-on collapsed composer. Keeping the
 * row in pillRoot lets it sit directly above the textarea without re-entering
 * the transcript's scrolling region. */
.persona-widget-pill-root[data-state="collapsed"] [data-persona-composer-suggestions] {
  display: none;
}

.persona-widget-pill-root[data-state="expanded"] [data-persona-composer-suggestions] {
  display: flex;
  justify-content: center;
  margin: 0 8px 4px;
}

/* Attachment previews row (above the pill). AttachmentManager toggles
 * display:flex when items are added; default is display:none. */
.persona-pill-composer__previews {
  padding: 0 8px;
}

/* --- Container chrome ---------------------------------------------------
 *
 * Container chrome (background, border, border-radius, box-shadow) is
 * applied inline by `applyFullHeightStyles()` in ui.ts so it can flow through
 * the same `theme.components.panel.{shadow,border,borderRadius}` contract
 * used by every other mount mode. Collapsed hides the container entirely
 * (only the pill is visible); expanded re-applies the chrome. The
 * `fullscreen` expanded variant intentionally stays chrome-less. */

/* Composer overlay (interactive sheets like ask_user_question) hidden in
 * collapsed; the pill has no room and the panel above is gone anyway. */
[data-persona-composer-bar][data-state="collapsed"] .persona-composer-overlay {
  display: none;
}

/* --- Pill root: viewport-fixed sibling of the wrapper ------------------
 *
 * In composer-bar mode the pill (`footer`) and peek banner live in a
 * viewport-fixed sibling of the wrapper, NOT inside the wrapper. Reason:
 * modal mode applies `transform: translate(-50%, -50%)` to the wrapper,
 * which establishes a containing block for `position: fixed` descendants: * a fixed pill inside a transformed wrapper would be positioned relative
 * to the wrapper, not the viewport.
 *
 * Bottom offset and (optionally) width are written inline by ui.ts based
 * on `launcher.composerBar.{bottomOffset, collapsedMaxWidth}`; otherwise
 * the responsive defaults below apply. The pillRoot mirrors the wrapper's
 * `[data-state]` and `[data-expanded-size]` attributes so peek/pill rules
 * keyed off those attributes still cascade. */
.persona-widget-pill-root {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 640px) {
  .persona-widget-pill-root {
    width: 70vw;
  }
}
@media (min-width: 1024px) {
  .persona-widget-pill-root {
    width: 50vw;
  }
}

/* Container hidden when the chat is collapsed: only the pill is visible. */
[data-persona-composer-bar][data-state="collapsed"] .persona-widget-container {
  display: none;
}

/* --- Peek banner ------------------------------------------------------- */
/* The peek is the chrome-less row above the pill (composer-bar mode only)
 * that previews the trailing 100 chars of the most recent assistant
 * message. ui.ts toggles `--visible` based on streaming/hover/open state;
 * pointer-events are gated so the faded-out peek never swallows clicks
 * targeted at the pill below. */
.persona-pill-peek {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  /* Frosted-glass chrome so the text stays readable over arbitrary host
   * backgrounds (busy hero images, dark sections, brand colors). The
   * translucent fill + backdrop blur turns the underlying area into a
   * neutral surface; the hairline border + soft shadow define the edge
   * without competing with the pill below. */
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  color: var(--persona-primary, #111827);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    background-color 150ms ease;
  text-align: left;
  /* Full-width row that matches the pill below: text takes the middle
   * (flex: 1 1 auto) and the chevron pins to the right edge. */
  width: 100%;
  align-self: stretch;
}

/* Browsers without backdrop-filter support (older Firefox, some webviews)
 * fall through to a slightly more opaque solid surface so the underlying
 * page can't bleed through. The non-supports rule above already gives a
 * usable look (78% opacity); this just hardens it for non-blur fallback. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .persona-pill-peek {
    background: rgba(255, 255, 255, 0.95);
  }
}

.persona-pill-peek--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.persona-pill-peek:hover {
  background: rgba(255, 255, 255, 0.92);
}

.persona-pill-peek__icon,
.persona-pill-peek__caret {
  display: inline-flex;
  flex-shrink: 0;
  color: currentColor;
}

.persona-pill-peek__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* Per-char/per-word animated spans render as inline-block, which interacts
 * with the peek's nowrap+ellipsis chrome. Setting `vertical-align: baseline`
 * keeps the spans on the same baseline as surrounding text so reveal
 * transforms (translateY, scale) don't bump the line height. */
[data-persona-root] .persona-pill-peek__text .persona-stream-char,
[data-persona-root] .persona-pill-peek__text .persona-stream-word {
  vertical-align: baseline;
}

/* Peek-scaled skeleton: the bubble-sized 260×10 bar would dwarf a 14px-line
 * pill. Inside the peek we shrink to a single, full-flex bar that hints at
 * "more is coming" without dominating the chrome. Used when
 * `streamAnimation.placeholder === "skeleton"` AND content trims to empty
 * (e.g. `buffer: "line"` between line completions). */
[data-persona-root] .persona-pill-peek__text .persona-pill-peek__skeleton {
  display: inline-flex;
  vertical-align: middle;
  width: 100%;
  max-width: 200px;
  padding: 0;
}
[data-persona-root] .persona-pill-peek__text .persona-pill-peek__skeleton .persona-stream-skeleton-line {
  height: 8px;
}

/* --- Expanded states: geometry safety nets ----------------------------- */

/* `fullscreen`: ui.ts clears all inline geometry so this rule lights up. */
.persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"][data-expanded-size="fullscreen"] {
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: none;
  max-width: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* Fullscreen "panel behind pill": the chat body fills the full viewport
 * (including the area behind the fixed pill) so messages scroll under the
 * pill. The body itself drops its bottom padding so its background extends
 * to the viewport edge; reachability for the last bubble comes from
 * padding-bottom on the messages wrapper (body's last child): that
 * pushes the final message above the pill area rather than hiding it
 * behind. */
.persona-widget-wrapper[data-persona-composer-bar][data-expanded-size="fullscreen"] .persona-widget-body {
  padding-bottom: 0;
}
.persona-widget-wrapper[data-persona-composer-bar][data-expanded-size="fullscreen"] .persona-widget-body > :last-child {
  padding-bottom: calc(var(--persona-pill-bottom, 16px) + var(--persona-pill-area-height, 80px) + 16px);
}

/* `modal` and `anchored` get their geometry inline from ui.ts; nothing
 * needed in CSS for those. */

/* --- Expand fade-in cascade -------------------------------------------- */
/*
 * Two staggered fades that mask the visual desync between the wrapper's
 * fast-traveling outer edges and the inner content (which is constrained
 * by `contentMaxWidth` + `margin: auto` and therefore moves at a fraction
 * of the wrapper's growth rate). Without this, the user perceives an
 * empty "gap" inside the wrapper as it morphs to fullscreen.
 *
 * - Chrome (container background, border, shadow, and the absolute close +
 *   clear buttons) fades in across the same 220ms as the geometry transition,
 *   so the box appears to materialize as it grows rather than snap into
 *   existence at frame 0.
 * - Body content (intro card, messages, composer overlay) fades in AFTER
 *   the geometry has settled: `animation-delay: 220ms` plus
 *   `animation-fill-mode: both` keeps it at opacity 0 during the morph.
 *
 * Because `[data-state="collapsed"] .persona-widget-container { display:
 * none }`, the container leaves and re-enters the rendering tree on each
 * expand, which retriggers the keyframe animation cleanly without
 * needing a JS class toggle.
 */
@keyframes persona-composer-bar-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"] .persona-widget-container {
  animation: persona-composer-bar-fade-in 220ms ease both;
}

.persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"] .persona-widget-body {
  animation: persona-composer-bar-fade-in 200ms ease 220ms both;
}

@media (prefers-reduced-motion: reduce) {
  .persona-widget-wrapper[data-persona-composer-bar] {
    transition: none !important;
  }
  .persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"] .persona-widget-container,
  .persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"] .persona-widget-body {
    animation: none !important;
  }
}

/* Event stream toolbar: a size container so "Copy All" collapses to icon-only
 * in a narrow panel before the filter dropdown gets clipped. */
[data-persona-root] .persona-event-toolbar {
  container-type: inline-size;
}

@container (max-width: 390px) {
  [data-persona-root] .persona-event-copy-all {
    display: none;
  }
}