.hp-demo .rewrite-output {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 350px;
}

.hp-demo .gen-text .rewrite-output textarea {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.hp-demo .rewrite-status {
  margin: 0 0 0.4rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--hp-line-strong);
  border-radius: var(--hp-radius-sm);
  background: var(--hp-surface);
  color: var(--hp-text);
  font-size: 0.875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.hp-demo .rewrite-status:empty,
.hp-demo [data-rewrite-state="ready"] .rewrite-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
}

.hp-demo [data-rewrite-state="pending"] .rewrite-status {
  color: var(--hp-violet-soft);
}

.hp-demo [data-rewrite-state="pending"] #copyText::placeholder {
  color: transparent;
}

.hp-demo [data-rewrite-state="error"] .rewrite-status,
.hp-demo [data-rewrite-state="retry"] .rewrite-status,
.hp-demo [data-rewrite-state="redirecting"] .rewrite-status {
  color: var(--hp-flag);
}

.hp-demo [data-rewrite-state="pending"] .rewrite-action-icon,
.hp-demo [data-rewrite-state="pending"] .shortcut-hint,
.hp-demo [data-rewrite-state="retry"] .shortcut-hint {
  display: none;
}

.hp-demo button.rewrite-button[aria-disabled="true"] {
  background: linear-gradient(135deg, var(--hp-violet), var(--hp-violet-bright));
  box-shadow: none;
  cursor: default;
}

.hp-demo [data-rewrite-state="pending"] .rewrite-action-label::before {
  content: "";
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin-inline-end: 0.45em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  vertical-align: -0.04em;
  animation: rewrite-spin 0.8s linear infinite;
}

@keyframes rewrite-spin {
  to { transform: rotate(1turn); }
}

@media (max-width: 800px) {
  .hp-demo .rewrite-output { flex: 1 1 100%; }
  .hp-demo button.mobile-rewrite-button {
    min-width: 0;
  }
}

@media (max-width: 380px) {
  .hp-demo [data-rewrite-state="pending"] .mobile-rewrite-button {
    padding-inline: 0.5rem;
  }
  .hp-demo [data-rewrite-state="pending"] .mobile-rewrite-button .word-count {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-demo [data-rewrite-state="pending"] .rewrite-action-label::before { animation: none; }
}