/* Sukud AI, recorded: the demo on the home and GCE pages. The chat itself
   is the design system's Sukud AI, in a design system island. */
.ai-demo {
    padding: 96px 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(99, 102, 241, .14), transparent 32rem),
        radial-gradient(ellipse at 90% 85%, rgba(52, 211, 153, .07), transparent 28rem),
        var(--landing-bg-primary);
    border-top: 1px solid var(--landing-border);
}
.ai-demo__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 64px; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.ai-demo__intro h2 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; }
.ai-demo__intro h2 span { color: #b5b1ff; }
.landing-page .ai-demo__lead { margin: 0 0 24px; color: var(--landing-text-secondary); font-size: 1.05rem; line-height: 1.65; }
.ai-demo__points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: #d4d8e4; }
.ai-demo__points li { display: flex; align-items: center; gap: 10px; }
.ai-demo__points li::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .15); }

/* The chat is a design system island (sk-island.css). */
.ai-demo__app [data-ai-demo-chat] { display: none !important; }
.ai-demo__app .sk-ai-composer__input:focus-visible { outline: none; }

/* The chat window: Sukud AI's main panel at a fixed height. */
.ai-demo__app .sk-aiw__main { height: 600px; background: var(--sk-surface); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.ai-demo__app .sk-aiw__title { text-align: center; }
.ai-demo__app .sk-ai-start__prompts { grid-template-columns: minmax(0, 1fr); width: min(100%, 440px); }

@media (max-width: 960px) {
    .ai-demo { padding: 72px 0; }
    .ai-demo__layout { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
}
@media (max-width: 767.98px) {
    /* Sukud AI goes full screen on phones; here it stays a framed window. */
    .ai-demo__app .sk-aiw__main { height: 560px; border: 1px solid var(--sk-border-subtle); border-radius: 22px; background: var(--sk-surface); }
    .ai-demo__app .sk-aiw__head { background: transparent; padding: 6px 10px; }

}
@media (max-width: 600px) {
    .ai-demo__layout { padding: 0 16px; }
    /* Centred on phones, like the Exam Prep sections. */
    .ai-demo__intro { text-align: center; }
    .ai-demo__points { justify-items: center; }
}