/* Demo chrome: banner + "this is a demo" modal for blocked actions. */
:root { --demo-h: 40px; }
/* Fixed strip at the very top; the app is pushed down and its top-offsets adjust,
   so the header and slide-out navs never hide under it or overlap. */
.demo-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 600; height: var(--demo-h); box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 14px;
    background: #144a89; color: #fff; font-size: 0.82rem; overflow: hidden;
}
.demo-banner > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.demo-banner b { font-weight: 700; }
.demo-banner .dim { opacity: 0.85; }
.demo-banner-cta {
    flex-shrink: 0; background: #fff; color: #144a89; font-weight: 600; padding: 4px 13px; border-radius: 999px;
    text-decoration: none; white-space: nowrap; font-size: 0.8rem;
}
.demo-banner-cta:hover { background: #eaf1fb; text-decoration: none; }
.demo-pill {
    background: #144a89; color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 4px; flex-shrink: 0;
}
/* Push the whole app down by the banner height, and shift its fixed/sticky bits. */
body { box-sizing: border-box; height: auto; min-height: 100dvh; padding-top: var(--demo-h); }
.appbar { top: var(--demo-h) !important; }
.chat-shell { height: calc(100dvh - var(--appbar-h) - var(--demo-h)) !important; }
.chat-side { top: calc(var(--appbar-h) + var(--demo-h)) !important; }
body.side-open .side-backdrop { inset: calc(var(--appbar-h) + var(--demo-h)) 0 0 0 !important; }
body.pagenav-open .appbar nav { top: calc(var(--appbar-h) + var(--demo-h) + 6px) !important; }
@media (max-width: 560px) {
    .demo-banner .dim { display: none; }
    .demo-banner-cta { padding: 4px 11px; font-size: 0.75rem; }
    .demo-pill { display: none; }   /* redundant with the banner; no room next to the brand */
}

.demo-modal {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
    display: none; align-items: center; justify-content: center; z-index: 2147483000; padding: 22px;
}
.demo-modal.show { display: flex; }
.demo-modal-card {
    background: #fff; border-radius: 16px; max-width: 400px; width: 100%; padding: 26px 24px;
    text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); font-family: inherit;
}
.demo-modal-h { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; color: #0f1111; }
.demo-modal-card p { color: #555; line-height: 1.55; font-size: 0.93rem; margin: 0 0 20px; }
.demo-modal-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.demo-modal-btns .btn { text-decoration: none; }