/* 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;
}

/* Hide the "Built with Chainlit" watermark. The element is
 * <div class="watermark" style="display:flex">; an inline display needs
 * !important to override. This is the Plumb-branded demo, not a Chainlit
 * showcase. */
.watermark {
    display: none !important;
}

/* Brand the main-page header. The stock Chainlit header (<div id="header">)
 * renders only buttons — no logo — and the <Logo> component lives only on the
 * login + welcome screens, which our auto-greet bypasses. Inject a compact
 * bob + wordmark lockup, centered, theme-aware, non-interactive. Hidden on
 * narrow screens so it never collides with the header controls on phones. */
#header::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 30px;
    width: 77px;
    background: url("/public/header_logo_light.png") center / contain no-repeat;
    pointer-events: none;
}
.dark #header::before {
    background-image: url("/public/header_logo_dark.png");
}
@media (max-width: 560px) {
    #header::before {
        display: none;
    }
}

/* Login page cleanup. Chainlit's login is a 2-column grid; the right column is
 * an <img> that, with no login_page_image set, defaults to the 32x32 /favicon
 * stretched edge-to-edge via object-cover — pixelated and ugly. Hide that
 * panel, collapse the split to a single full-width column, and enlarge the
 * top-left brand logo (default w-[150px]) now that it has room. */
.grid.min-h-svh > div:nth-child(2) {
    display: none !important;
}
.grid.min-h-svh {
    grid-template-columns: 1fr !important;
}
.grid.min-h-svh .logo {
    width: min(280px, 64vw) !important;
    height: auto;
}