.engagement-launch { border-color: transparent; background: transparent; color: var(--wa-icon, #54656f); }
.engagement-backdrop { position: fixed; z-index: 45; inset: 0; display: flex; justify-content: flex-end; background: rgba(11, 20, 26, .64); backdrop-filter: blur(2px); }
.engagement-backdrop[hidden], .engagement-panel[hidden] { display: none; }
.engagement-drawer { width: min(92vw, 1080px); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--wa-panel-alt, #f7f8fa); color: var(--wa-text, #111b21); box-shadow: -12px 0 40px rgba(0, 0, 0, .24); scrollbar-color: color-mix(in srgb, var(--wa-muted, #667781) 40%, transparent) transparent; }
.engagement-header { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 14px 22px; border-bottom: 1px solid var(--wa-border, #e9edef); background: var(--wa-header, #f0f2f5); }
.engagement-header .eyebrow, .canonical-heading .eyebrow { color: var(--wa-accent-strong, #008069); font-size: .66rem; font-weight: 800; letter-spacing: .075em; }
.engagement-header h2 { margin: 3px 0 0; color: var(--wa-text, #111b21); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 600; }
.engagement-header .icon-button { color: var(--wa-icon, #54656f); }
.engagement-header .icon-button:hover { background: var(--wa-hover, #f5f6f6); }
.engagement-safety { display: flex; gap: 8px; padding: 11px 22px; border-bottom: 1px solid var(--wa-border, #e9edef); background: color-mix(in srgb, var(--wa-accent, #00a884) 7%, var(--wa-panel, #fff)); color: var(--wa-muted, #667781); font-size: .76rem; line-height: 1.45; }
.engagement-safety strong { flex: 0 0 auto; color: var(--wa-text, #111b21); }
.engagement-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 14px 22px; }
.engagement-tabs, .engagement-routes { display: flex; gap: 7px; padding: 4px 22px 14px; overflow-x: auto; scrollbar-width: thin; }
.engagement-tabs { flex-wrap: wrap; }
.engagement-routes .button, .engagement-tabs .button { flex: 0 0 auto; min-height: 38px; padding: 8px 13px; border: 1px solid var(--wa-border, #e9edef); border-radius: 999px; background: var(--wa-panel, #fff); color: var(--wa-muted, #667781); font-size: .76rem; font-weight: 600; white-space: nowrap; box-shadow: none; }
.engagement-routes .button:hover, .engagement-tabs .button:hover { background: var(--wa-hover, #f5f6f6); color: var(--wa-text, #111b21); }
.engagement-routes button[aria-selected="true"], .engagement-tabs button[aria-selected="true"] { border-color: transparent; background: color-mix(in srgb, var(--wa-accent, #00a884) 15%, var(--wa-panel, #fff)); color: var(--wa-accent-strong, #008069); }
.engagement-canonical { padding: 0 22px 22px; }
.canonical-heading { display: flex; align-items: baseline; gap: 9px; margin: 2px 0 12px; }
.canonical-heading h3 { margin: 0; color: var(--wa-text, #111b21); font-size: 1.05rem; font-weight: 600; }
.canonical-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); gap: 14px; align-items: start; }
.engagement-state { display: grid; gap: 3px; margin: 0 22px 14px; padding: 12px 14px; border: 1px solid var(--wa-border, #e9edef); border-left: 4px solid var(--wa-accent, #00a884); border-radius: 10px; background: var(--wa-panel, #fff); color: var(--wa-text, #111b21); box-shadow: var(--wa-shadow, 0 1px 2px rgba(11,20,26,.12)); }
.engagement-state strong { color: var(--wa-text, #111b21); font-size: .8rem; }
.engagement-state span { color: var(--wa-muted, #667781); font-size: .74rem; }
.engagement-state[data-kind="error"] { border-left-color: #ea0038; background: color-mix(in srgb, #ea0038 7%, var(--wa-panel, #fff)); }
.engagement-state[data-kind="disabled"] { border-left-color: var(--wa-muted, #667781); }
.engagement-state[data-kind="loading"] { border-left-color: #f5a623; background: color-mix(in srgb, #f5a623 7%, var(--wa-panel, #fff)); }
.engagement-state[data-kind="success"] { border-left-color: var(--wa-accent, #00a884); }
.engagement-panel { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 14px; padding: 0 22px 22px; }
.engagement-card { min-width: 0; padding: 17px; border: 1px solid var(--wa-border, #e9edef); border-radius: 12px; background: var(--wa-panel, #fff); color: var(--wa-text, #111b21); box-shadow: var(--wa-shadow, 0 1px 2px rgba(11,20,26,.12)); }
.engagement-card h3 { margin: 0 0 12px; color: var(--wa-text, #111b21); font-size: .92rem; font-weight: 650; }
.engagement-card p { color: var(--wa-muted, #667781); line-height: 1.55; }
.engagement-card pre { max-height: 360px; overflow: auto; padding: 12px; border-radius: 9px; background: var(--wa-panel-alt, #f7f8fa); color: var(--wa-text, #111b21); font-size: .72rem; white-space: pre-wrap; }
.engagement-card form, .engagement-wizard { display: grid; gap: 11px; }
.engagement-card label { display: grid; gap: 6px; color: var(--wa-muted, #667781); font-size: .72rem; font-weight: 650; }
.engagement-card :is(input, select, textarea) { min-height: 42px; border: 1px solid var(--wa-border, #e9edef); border-radius: 9px; background: var(--wa-panel-alt, #f7f8fa); color: var(--wa-text, #111b21); }
.engagement-step { display: grid; gap: 8px; margin: 0; padding: 13px; border: 1px solid var(--wa-border, #e9edef); border-radius: 10px; background: var(--wa-panel-alt, #f7f8fa); }
.engagement-step legend { padding: 0 6px; color: var(--wa-accent-strong, #008069); font-size: .7rem; font-weight: 800; }
.engagement-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.engagement-actions .button, .engagement-card > .button { min-height: 40px; padding: 9px 14px; border-radius: 999px; font-size: .76rem; }
.engagement-actions .primary-button, .engagement-card > .primary-button { background: var(--wa-accent-strong, #008069); color: #fff; }
.engagement-actions .secondary-button, .engagement-card > .secondary-button { border: 1px solid var(--wa-border, #e9edef); background: var(--wa-panel, #fff); color: var(--wa-accent-strong, #008069); }
.engagement-actions .button:hover, .engagement-card > .button:hover { filter: brightness(.97); }
.engagement-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.engagement-list li { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border: 1px solid var(--wa-border, #e9edef); border-radius: 10px; background: var(--wa-panel-alt, #f7f8fa); }
.engagement-list strong { overflow-wrap: anywhere; color: var(--wa-text, #111b21); font-size: .78rem; font-weight: 600; }
.engagement-list span, .engagement-audit { overflow-wrap: anywhere; color: var(--wa-muted, #667781); font-size: .7rem; line-height: 1.45; }
.engagement-list.metric-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.engagement-list.metric-grid li { min-height: 72px; align-content: center; }
.engagement-list.metric-grid strong { color: var(--wa-muted, #667781); font-size: .7rem; }
.engagement-list.metric-grid span { color: var(--wa-text, #111b21); font-size: 1.05rem; font-weight: 650; }
.insight-notes { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.insight-notes li { display: flex; gap: 8px; align-items: flex-start; color: var(--wa-muted, #667781); font-size: .74rem; line-height: 1.45; }
.insight-notes li::before { content: "✓"; flex: 0 0 auto; color: var(--wa-accent-strong, #008069); font-weight: 800; }
.engagement-audit { margin: 0 22px 22px; padding: 10px 12px; border-top: 1px solid var(--wa-border, #e9edef); font-family: ui-monospace, monospace; }
@media (max-width: 1024px) { .engagement-drawer { width: calc(100vw - 60px); } }
@media (max-width: 767px) { .engagement-drawer { width: 100vw; } .engagement-header, .engagement-toolbar, .engagement-safety { padding-left: 14px; padding-right: 14px; } .engagement-safety, .engagement-toolbar { align-items: stretch; flex-direction: column; } .engagement-tabs, .engagement-routes { padding: 2px 14px 12px; } .engagement-state { margin: 0 14px 12px; } .engagement-panel, .canonical-grid { grid-template-columns: 1fr; } .engagement-panel { padding: 0 14px 16px; } .engagement-canonical { padding: 0 14px 16px; } .engagement-audit { margin: 0 14px 16px; } }
@media (max-width: 380px) { .engagement-actions .button { width: 100%; } .engagement-card { padding: 14px; } }
@media (prefers-reduced-motion: no-preference) { .engagement-drawer { animation: engagement-slide 180ms ease-out both; } @keyframes engagement-slide { from { transform: translateX(22px); opacity: .72; } to { transform: translateX(0); opacity: 1; } } }
@media (prefers-reduced-motion: reduce) { .engagement-drawer { animation: none !important; scroll-behavior: auto !important; } }