/* The agent page: one screen, one question, one text field. The example is
   the field's placeholder and goes away as soon as someone types. */
.ag .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 120px 0 64px; text-align: center; }
.ag .h1 { text-wrap: balance; }
.ag .lead { max-width: 460px; margin-top: 16px; font-size: 13px; color: var(--muted); text-wrap: pretty; }

.ag form[data-agent] { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: min(100%, 560px); margin-top: 40px; text-align: left; }
.ag textarea { min-height: 168px; padding: 12px; border: 0.5px solid var(--hair); border-radius: 0; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.ag textarea::placeholder { color: var(--faint); }
.ag textarea:focus-visible { outline-offset: -2px; }
.ag .btn { align-self: flex-end; }
.ag .btn:disabled { cursor: default; }
.ag .note { margin-top: 14px; font: 11px/1.6 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.ag .msg { min-height: 1.45em; margin-top: 10px; font-size: 12px; color: var(--accent); }
.ag .msg.ok { color: var(--ink); }

@media (max-width: 480px) {
  .ag .btn { align-self: stretch; justify-content: center; }
}

/* The Ü, buer0's agent from the workshop deck (its Zusammenarbeit slide): floating beside the
   field and blinking now and then. Only where there is room for it to the right. */
.ag form[data-agent] { position: relative; }
.ag .ue { position: absolute; top: 4px; left: calc(100% + 40px); width: 64px; height: auto; fill: var(--accent); overflow: visible; }
.ag .ue .eyes { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ag .ue { animation: ue-float 1.6s ease-in-out infinite; }
  .ag .ue .eyes { animation: ue-blink 4.8s 0.8s infinite; }
}
@keyframes ue-float { 50% { transform: translateY(-8px); } }
@keyframes ue-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@media (max-width: 760px) { .ag .ue { display: none; } }