/* Whatsend design foundation — shared by every screen. */
:root {
  color-scheme: dark;
  font-family: "DM Sans", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --page: #0c100f;
  --surface: #151c19;
  --surface-raised: #18211d;
  --text: #edf4f0;
  --text-muted: #b1beb7;
  --border: #2b3932;
  --accent: #16c79a;
  --accent-ink: #061510;
  --focus: #c3ffe9;
  --danger-surface: #3a211f;
  --danger-text: #ffb6a8;
}

html {
  min-width: 320px;
  background: var(--page);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--page);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
}

h1,
h2,
h3,
h4,
.brand,
.side-brand,
.welcome-copy h1,
.pricing-heading h2 {
  font-family: "Manrope", "DM Sans", system-ui, sans-serif;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 3px;
}

/* Keep helper text readable on phones and desktop. Icons retain their own size. */
:where(
  .eyebrow,
  .phone-top,
  .bubble-time,
  .list-head,
  .status,
  .review-box span,
  .footer,
  .step,
  .mobile-nav button,
  .demo-tag,
  .art-message span,
  .art-sticker,
  .demo-label,
  .step-instruction span,
  .guide-kicker,
  .guide-privacy,
  .top-right .btn-small,
  .side-brand small,
  .side-account small,
  .side-caption,
  .side-account strong,
  .saved-list-count,
  .optional-field summary span,
  .quick-message span,
  .contact-method small,
  .final-action p,
  .pricing-provisional,
  .pricing-rates-heading span:not(.pricing-minimum),
  .simulator-heading span:not(.simulator-icon),
  .pricing-minimum,
  .pricing-tier small,
  .pricing-addons p,
  .pricing-addons small,
  .simulator-grid .field label,
  .simulator-check b,
  .simulator-check small,
  .simulator-total > span,
  .simulator-total > strong small,
  .simulator-total > p,
  .pricing-footnote,
  .estimate-price > span,
  .estimate-credits > span,
  .estimate-price > small,
  .section-head .btn
) {
  font-size: 12px !important;
}

.side-caption,
.side-brand small,
.side-account small,
.side-account strong,
.demo-label,
.pricing-provisional,
.pricing-minimum,
.estimate-price > span,
.estimate-credits > span {
  color: var(--text-muted);
}

.ui-state {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  line-height: 1.55;
}

.ui-state--empty,
.ui-state--loading {
  color: var(--text-muted);
}

.ui-state--error {
  border-color: #75433d;
  background: #281816;
  color: #ffd9d2;
}

.skeleton {
  min-height: 1em;
  border-radius: 8px;
  background: linear-gradient(100deg, #202a25 25%, #2c3932 42%, #202a25 60%);
  background-size: 220% 100%;
  animation: messageo-shimmer 1.5s ease-in-out infinite;
}

@keyframes messageo-shimmer {
  to { background-position-x: -220%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}