[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-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-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. */
[data-persona-root] .persona-artifact-toolbar-document .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 {
  color: var(--persona-artifact-toolbar-icon-hover-color, inherit);
  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-container, #f3f4f6));
}

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

[data-persona-root] .persona-artifact-toolbar-document .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 {
  background: var(--persona-artifact-toolbar-icon-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);
}

[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 gap */
[data-persona-root] .persona-artifact-toggle-group {
  gap: var(--persona-artifact-toolbar-toggle-group-gap, 0.25rem);
}

/* Toggle button border-radius (view/code buttons) */
[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-view-btn,
[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-code-btn {
  border-radius: var(--persona-artifact-toolbar-toggle-radius, var(--persona-artifact-toolbar-icon-radius, var(--persona-radius-md, 0.375rem)));
}

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

/* 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);
}

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

/* ── 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)));
}

/* 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;
    box-shadow: var(--persona-artifact-pane-shadow, -2px 0 12px rgba(15, 23, 42, 0.06));
  }
}

/* paneBorderRadius: works on any paneAppearance; overflow clips content to rounded shape */
[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;
}

/*
 * Unified split chrome: one visual shell (desktop split only; narrowed via :not(.narrow-host) + breakpoint).
 * Main chat card (.persona-widget-container) loses inner-right rounding; artifact gains matching outer-right.
 */
@media (min-width: 641px) {
  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-unified-split .persona-widget-container {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

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

/* 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;
}

/* 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;
  }
}