:root { /* Bookeasy primary palette (sampled from testsuite.min.css) */ --be-primary: #5856d6; --be-primary-dark: #3634a3; --be-primary-soft: #cfc7f3; --be-ink: #080a0c; --be-ink-2: #212631; --be-ink-3: #6b7785; --be-surface: #ffffff; --be-surface-2: #f7f8fb; --be-surface-3: #eef0f5; --be-border: #e3e6ee; --be-success: #1b9e3e; --be-warning: #f9b115; --be-danger: #e55353; --be-star: #ffb547; /* Modern accents */ --be-accent-grad: linear-gradient(135deg, #6e6bf0 0%, #5856d6 45%, #3634a3 100%); --be-header-grad: linear-gradient(135deg, #2a2e3d 0%, #20242f 45%, #181b24 100%); --be-glow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(88, 86, 214, 0.08); --be-radius-sm: 8px; --be-radius: 14px; --be-radius-lg: 20px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: linear-gradient(180deg, #f7f8fb 0%, #eef0f5 100%); color: var(--be-ink); font-family: "Inter", "SN Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; font-size: 15px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--be-primary); } .page { display: flex; flex-direction: column; min-height: 100vh; } /* ---------- Header ---------- */ .page-header { background: var(--be-header-grad); color: #fff; padding: 36px 28px 32px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 20px rgba(0, 0, 0, 0.15); } .page-header-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .page-header .brand-logo { height: 88px; width: auto; display: block; } .page-header .tagline { margin: 0; font-size: 15px; opacity: 0.85; letter-spacing: 0.01em; } /* ---------- Main layout ---------- */ .page-main { flex: 1 1 auto; max-width: 1100px; width: 100%; margin: 0 auto; padding: 28px; display: flex; flex-direction: column; gap: 24px; } .card { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius); box-shadow: var(--be-glow); overflow: hidden; } .card-header { padding: 14px 20px; border-bottom: 1px solid var(--be-border); display: flex; align-items: center; gap: 10px; } .card-header h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--be-ink-3); } .card-body { padding: 20px; } /* ---------- AI assistant intro card ---------- */ .intro-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .intro-text { margin: 0; color: var(--be-ink-2); } /* ---------- Chat drawer (vendored bookeasychat embed) ---------- The framework mounts at

and renders a floating FAB + a fixed drawer that slides in from the right. We trigger open/close with our own