/* Plumb mobile responsiveness overrides for Chainlit defaults.
 *
 * Targets phone-sized viewports (≤ 640px). Chainlit's UI is mostly
 * okay on desktop but has a few cramped spots on phones we improve here:
 * - Action-message buttons (Yes/Edit, FEMA flood zones) wrap vertically
 *   instead of squishing on one line.
 * - Reply markdown content gets a touch more line-height for readability.
 * - File-upload prompt has a larger touch target.
 *
 * Loaded via .chainlit/config.toml -> custom_css = "/public/style.css".
 */

/* ──────────────────────────────────────────────────────────────────────
 * Universal: comfortable reading + tap targets
 * ────────────────────────────────────────────────────────────────────── */

.cl-message-content,
[class*="message-content"] {
    line-height: 1.55;
}

button,
[role="button"] {
    min-height: 40px;
}

/* ──────────────────────────────────────────────────────────────────────
 * Phone viewport tweaks (≤ 640px)
 * ────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Action buttons (AskActionMessage) — stack instead of squishing.
     * Chainlit lays them out as a row by default; on narrow screens this
     * truncates labels like "Yes, that's correct" or the FEMA zone codes. */
    [class*="ask-action"] [class*="actions"],
    [class*="action-buttons"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    [class*="ask-action"] button,
    [class*="action-buttons"] button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Reduce horizontal padding so messages have more room to breathe. */
    [class*="message"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* File upload prompt — tap target ≥ 56px for thumbs. */
    [class*="upload"],
    [class*="dropzone"] {
        min-height: 56px;
        padding: 12px !important;
    }

    /* Step indicator (e.g. "extracting characteristics") — keep readable. */
    [class*="step"] {
        font-size: 0.92rem;
    }

    /* Code blocks (we surface census tract / BBL inline) — wrap on phone. */
    code {
        word-break: break-all;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * Plumb-specific tweaks
 * ────────────────────────────────────────────────────────────────────── */

/* The orchestrator emits multiple Reply messages per turn (geocode info,
 * pluto summary, prompts). Tighten vertical rhythm so the conversation
 * doesn't feel bloated. */
[class*="message"] + [class*="message"] {
    margin-top: 0.5rem;
}