.engagement-panel{max-width:1060px;margin:48px auto;padding:32px;border:1px solid #dce4ee;border-radius:24px;background:linear-gradient(145deg,#fff,#f6f8fc);color:#192e4a;box-sizing:border-box}.engagement-eyebrow{font-size:12px;letter-spacing:.12em;color:#627b9c;font-weight:700}.engagement-panel h2{font-size:clamp(22px,3vw,30px);line-height:1.5}.engagement-panel h3{margin-top:32px}.engagement-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin:24px 0}.engagement-metrics>div{padding:18px 12px;background:#fff;border:1px solid #e3e9f2;border-radius:16px;text-align:center}.engagement-metrics strong{display:block;font-size:28px}.engagement-metrics span{font-size:13px;color:#53667f}.engagement-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}.engagement-panel button[aria-pressed=true]{background:#e8efff;color:#204c9b;border-color:#a8bde5}.engagement-panel textarea{display:block;width:100%;box-sizing:border-box;margin-top:10px;border:1px solid #aabbd1;border-radius:12px;padding:14px;font:inherit;background:white;color:#192e4a}.engagement-comments article,.engagement-event{padding:20px 0;border-bottom:1px solid #dce4ee}.engagement-comments article p,.engagement-event p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.engagement-comments time{margin-left:12px;font-size:12px;color:#53667f}.engagement-badge{margin-left:8px;padding:3px 7px;border-radius:8px;background:#e8efff;font-size:12px}.engagement-event{display:flex;gap:16px}.engagement-event>span{color:#b75d78}.engagement-event a{display:block;margin-top:6px}.engagement-work{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid #dce4ee;color:inherit;text-decoration:none}.engagement-work span{color:#53667f;font-size:14px}.engagement-work b{margin-left:auto;font-size:14px}.engagement-empty{padding:24px;background:#fff;border-radius:12px;line-height:1.8}.engagement-panel :focus-visible{outline:3px solid #245cf4;outline-offset:3px}@media(max-width:600px){.engagement-panel{margin:24px 12px;padding:20px;border-radius:18px}.engagement-actions .btn{flex:1;min-height:44px}.engagement-work{align-items:flex-start;flex-direction:column;gap:8px}.engagement-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.engagement-panel button{min-height:44px}}
.engagement-reply{margin-left:20px;border-left:3px solid #cbdcff!important;padding-left:20px!important}.reply-context{font-size:13px;color:#60738e;background:#f3f7ff;padding:10px;border-radius:8px;overflow-wrap:anywhere}.engagement-reply-box{margin:16px 0}.engagement-reply-box summary{cursor:pointer;color:#064bff;min-height:32px}.engagement-reply-box form{margin-top:12px}@media(max-width:640px){.engagement-reply{margin-left:8px;padding-left:12px!important}}
/* Match the approved existing-UI mockup. */
.engagement-panel{border-radius:12px;background:#f8faff;padding:32px}.engagement-panel h2{font-size:clamp(21px,2.4vw,28px);margin:16px 0;overflow-wrap:anywhere}.engagement-metrics>div{border-radius:8px;padding:16px 10px}.engagement-panel textarea{border-radius:8px;font-size:16px}.engagement-panel .btn{border-radius:8px;min-height:44px}.engagement-comments [data-eng-delete]{border:0;background:#edf2f8;color:#60738e;border-radius:5px;padding:7px 10px;font-size:12px;min-height:36px}.engagement-comments article>div:first-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.engagement-comments time{margin-left:0}.engagement-reply{border-left-width:2px!important}.engagement-comments .reply-context{font-size:13px;line-height:1.6}.engagement-reply-box summary{min-height:44px;display:list-item;align-content:center}.engagement-panel form>p{font-size:13px;line-height:1.7}.engagement-panel form .btn{margin-top:8px}
@media(max-width:600px){.engagement-panel{padding:20px 16px;margin:24px 0;border-radius:10px}.engagement-metrics:has(>div:last-child:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.engagement-metrics strong{font-size:24px}.engagement-metrics span{font-size:12px}.engagement-actions{flex-direction:column;gap:10px}.engagement-actions .btn,.engagement-panel form .btn{width:100%;box-sizing:border-box}.engagement-panel h2{font-size:21px}.engagement-comments article{padding:18px 0}.engagement-reply{margin-left:8px}.engagement-panel>p{font-size:14px;line-height:1.8}}