/* AI Describe result panel. Uses the builder's own tokens so it reads as part
   of the same card rather than a graft. */
.utt-builder .utt-ai-msg {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--ut-bd, #232a35);
    border-radius: 10px;
    font-size: 13px;
}

.utt-builder .utt-ai-msg p {
    margin: 0 0 8px;
}

.utt-builder .utt-ai-msg h4 {
    margin: 0 0 6px;
    font-size: 14px;
}

.utt-builder .utt-ai-msg--ok {
    border-color: var(--ut-up, #0ecb81);
}

.utt-builder .utt-ai-msg--bad {
    border-color: var(--ut-dn, #f6465d);
}

.utt-builder .utt-ai-msg--working {
    border-style: dashed;
}

/* The readback is the check on a misreading, so it gets emphasis. */
.utt-builder .utt-ai-summary {
    border-left: 2px solid var(--ut-gold, #f0b90b);
    padding-left: 10px;
    color: var(--ut-tx, #eaecef);
}

.utt-builder .utt-ai-quota {
    color: var(--ut-mut, #8b95a5);
    font-size: 12px;
    margin: 8px 0 0;
}

.utt-builder .utt-ai-issues {
    margin: 0;
    padding-left: 18px;
    color: var(--ut-mut, #8b95a5);
    word-break: break-word;
}

.utt-builder .utt-ai-issues li {
    margin-bottom: 4px;
}

/* Turnstile.
   The widget renders with appearance:interaction-only, so this box stays empty
   and takes no space for the overwhelming majority of visitors — it only fills
   when someone is actually asked to prove something. Hence no fixed height and
   no border: an always-reserved 65px gap above the button would cost every
   visitor for a challenge almost none of them see. */
.utt-builder .utt-turnstile:not(:empty) {
    margin: 10px 0 0;
}

/* Cloudflare renders the widget in an iframe with an intrinsic width. On a
   narrow phone that would push the pane sideways, which is exactly the class of
   bug the mobile stylesheet exists to fix. */
.utt-builder .utt-turnstile iframe {
    max-width: 100%;
}