PATTERN: Support Panel
COMPOSES: .tw-avatar · .tw-agent-chat-* · .tw-btn · .tw-badge · .tw-tag · .tw-card · .tw-tabs

Shell structure for the Emma support chat. Provides FAB, floating panel, full-page overlay, and backdrop. Inner thread and composer content use existing DS components.

FAB — Floating Action Button

FAB states: Default (pulse ring visible, tooltip on hover) and open (ring hidden, ✕ shown).

Default

Open

.tw-support-fab · .tw-support-fab-ring · .tw-support-fab-av · .tw-support-fab--open

Floating Panel

Shell only. Thread and composer content use existing DS components. Static snapshot — no JS.

Emma · Applicaa Support
Online
Year 12 Admissions · Greenford High School

Hi! I'm Emma, your Admissions+ support assistant. How can I help today?

How do I set offer conditions?
.tw-support-panel · .tw-support-panel-hdr · .tw-support-panel-hdr-info · .tw-support-panel-hdr-name · .tw-support-panel-hdr-status · .tw-support-panel-hdr-btns · .tw-support-panel-btn · .tw-support-panel-ctx · .tw-support-panel-thread · .tw-support-panel-composer

Full-Page Overlay

Shell only. Full-width chat takeover. Activity sidebar uses existing DS components. Static snapshot — no JS.

Emma · Applicaa Support
Online

Hi! I'm Emma, your Admissions+ support assistant.

History

Current session Active
14 Apr session Resolved
.tw-support-fp-main · .tw-support-fp-hdr · .tw-support-fp-thread · .tw-support-fp-composer
Note: .tw-support-fp (position:absolute;inset:0) wraps the above in production but is omitted from this static preview to avoid overflow.

Backdrop & Utilities

.tw-support-backdrop — fixed overlay shown when panel is open. Add .tw-support-backdrop--visible to show it. .tw-support-bg-dimmed dims the background page. .tw-support-sidebar--open expands the activity sidebar to 360px.

.tw-support-backdrop · .tw-support-backdrop--visible · .tw-support-bg-dimmed · .tw-support-hidden · .tw-support-sidebar--open