/*
 * Styles for UiTemplate server-rendered pages.
 * Scopes old admin page content rendered inside the .ui-page-content wrapper.
 */

.ui-page-content {
    display: block;
    padding: 1rem;
    padding-bottom: 1em;
}

.ui-page-content pre,
.ui-page-content .section,
.ui-page-content .wrap,
.ui-page-content .nowrap,
.ui-page-content section p {
    max-width: 100%;
}

.ui-page-content section {
    width: 100%;
}

@media (max-width: 768px) {
    .ui-page-content {
        padding: 0.5rem;
    }
}

/*
 * Headings for admin pages.
 *
 * The admin UI has two heading sizes: a page title and a section title. Every
 * page used to restate them — as `.xx-page h1` and as a `.xx-section-title`
 * class — which meant a new page looked wrong until someone noticed and copied
 * the declarations across, and that a change to the scale had to be made in a
 * dozen files.
 *
 * They live here instead, scoped to the UiTemplate content wrapper so every
 * admin page is covered whatever its root class. This file loads before any
 * page stylesheet, so a page that deliberately differs still overrides it —
 * but it should only need to restate the margin, not the whole scale.
 *
 * h2 and h3 are the same size on purpose: the design has one section level,
 * and pages differ only in which tag they reached for.
 */
.ui-page-content h1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin: 0 0 16px 0;
}

.ui-page-content h2,
.ui-page-content h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin: 0 0 12px 0;
}

/* Inline status pill used by hybrid pages for per-field save feedback. */
.dlg-status {
    display: inline-block;
    min-width: 1em;
    margin-left: 0.5em;
    font-size: 0.9em;
    color: var(--text-secondary, #888);
    transition: color 0.2s ease, opacity 0.4s ease;
}
.dlg-status--ok {
    color: #2e7d32;
}
.dlg-status--err {
    color: #c62828;
}

/* ── Thinking indicator ──────────────────────────────────────
   Three pulsing dots shown where an LLM answer is about to land
   (prompt Helper, Test-tab follow ups, …). Markup:
   <span class="dlg-thinking"><span></span><span></span><span></span></span> */
.dlg-thinking {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 6px 0;
}

.dlg-thinking span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-text-secondary, #919191);
    animation: dlg-thinking-pulse 1.2s infinite ease-in-out;
}

.dlg-thinking span:nth-child(2) { animation-delay: 0.2s; }
.dlg-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dlg-thinking-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}