/* Product illustrations follow the OnSite Figma task and AI conversation cards. */
.ui-icon { display:inline-block; width:1.15em; height:1.15em; flex:none; fill:currentColor; vertical-align:-.18em; overflow:visible; }
.onsite-ai-mark { display:inline-block; width:22px; height:22px; flex:none; object-fit:contain; vertical-align:middle; }
.product-motion { --card-outline:#bed0ea; }
.motion-phone { background:linear-gradient(155deg,#f5f7fa,#e6edf6); box-shadow:0 18px 45px #14233a0d,inset 0 0 0 5px #ffffffa6; }
.motion-bubble { border-radius:24px 24px 24px 9px; box-shadow:0 3px 9px #172c4217,0 10px 26px #172c4212; }
.motion-outgoing { border-radius:24px 24px 9px 24px; background:#0da6f2; }
.motion-result { position:relative; background:#fff; border:1.5px solid var(--card-outline); border-radius:27px; box-shadow:0 3px 8px #122c4714,0 13px 28px #122c4720; padding:20px; }
.motion-phone-header .onsite-ai-mark { padding:7px; width:36px; height:36px; border-radius:50%; background:#0da6f2; filter:none; object-fit:contain; }
/* A mask colors the exact Figma mark without altering its geometry. */
.motion-phone-header:has(.onsite-ai-mark) { gap:10px; }
.motion-phone-header .onsite-ai-mark { background:#d9f1fd; }
.motion-composer { padding:8px 10px; }
.motion-composer > span:last-child { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:white; background:#0da6f2; box-shadow:0 3px 8px #0da6f233; }
.motion-composer .ui-icon { width:20px; height:20px; }
.motion-ai-label { display:flex!important; align-items:center; gap:8px; color:#1a477a!important; font-weight:650!important; }
.motion-ai-label .onsite-ai-mark { width:24px; height:24px; }
.motion-ai-badge { position:absolute; right:-6px; top:-17px; display:flex!important; align-items:center; gap:7px; white-space:nowrap; background:#0da6f2; border:1px solid #ffffff75; color:white!important; font-size:10px!important; font-weight:600!important; border-radius:30px; padding:7px 10px; box-shadow:0 5px 14px #0da6f233; }
.motion-ai-badge .onsite-ai-mark { width:17px; height:17px; filter:invert(1); transform:rotate(5deg); }
.motion-task-card { margin-top:12px; }
.motion-task-title { display:flex!important; align-items:center; gap:10px; font-size:16px!important; line-height:1.35; }
.motion-task-check,.motion-check { display:grid; place-items:center; background:#0da6f2; color:#fff; width:31px; height:31px; border-radius:50%; flex:none; font-size:19px; }
.motion-chips { align-items:center; }
.motion-chips > span { display:inline-flex; align-items:center; gap:5px; background:#eff5fc; color:#466281; }
.motion-chips .motion-person { padding:0 7px 0 0; background:transparent; }
.motion-person img { width:25px; height:25px; border-radius:50%; object-fit:cover; }
.motion-task-status { padding-top:3px; }
.motion-answer-card > .motion-ai-label { padding-bottom:8px; border-bottom:1px solid #e6edf5; }
.motion-answer-card p { background:#f4f5f6; padding:13px; border-radius:15px; }
.motion-answer-card .motion-chips > span { background:#edf8fe; color:#0794dc; border:1px solid #9bdcff; }
.motion-source { border-radius:20px; border-color:#d9e4f1; box-shadow:0 5px 14px #163b6614; }
.motion-source > span { display:flex; align-items:center; gap:6px; }
.motion-paper { border:1px solid #e3e9f0; border-radius:16px; }
.motion-paper-caption { padding:12px; }
.motion-ready { display:flex; gap:6px; align-items:center; }
.brain-node > i { display:grid; place-items:center; color:#2782bf; }
.brain-node > i .ui-icon { width:20px; height:20px; }
.brain-node { border:1px solid #dce7f2; }
.team-love-grid article > span { display:grid; place-items:center; width:74px; height:74px; border-radius:23px; background:#ffffff17; border:1px solid #ffffff26; font-size:36px; color:#fff; transform:rotate(-6deg); }
.team-love-grid article > span .ui-icon { filter:drop-shadow(0 4px 7px #07254326); }
.hero-recognition__emoji .ui-icon { color:#f3b833; width:1em; height:1em; }
.wf-message { border-radius:23px 23px 23px 7px; box-shadow:0 4px 12px #05172b16; }
.wf-message.wf-out { border-radius:23px 23px 7px 23px; }
.wf-card { background:#fff; border:1.5px solid #bed0ea; border-radius:25px; box-shadow:0 6px 12px #04142614,0 15px 28px #04142620; }
.wf-card-label { display:flex; align-items:center; gap:7px; }
.wf-card-label > .ui-icon { color:#0da6f2; width:24px; height:24px; }
.wf-ai-label { text-transform:none; letter-spacing:0; font-size:13px; color:#1a477a; }
.wf-ai-label .onsite-ai-mark { width:27px; height:27px; padding:5px; background:#e6f6fe; border-radius:9px; box-sizing:content-box; }
.wf-message small:has(.onsite-ai-mark) { display:flex; align-items:center; gap:7px; }
.wf-chips > span { display:inline-flex; align-items:center; gap:4px; background:#eef5fc; }
.wf-attachment { background:#f0f5fc; border:1px solid #dbe6f2; border-radius:13px; }
.wf-keyplan { background:#edf3f8; border:1px solid #d8e5f0; transform:rotate(-2deg); }
.wf-plan-room > b { display:grid; place-items:center; background:#0da6f2; color:white; width:26px; height:26px; border-radius:50% 50% 50% 5px; transform:rotate(-8deg); box-shadow:0 3px 8px #0da6f24d; }
.wf-plan-room > b .ui-icon { width:17px; height:17px; }
.wf-check-row .ui-icon { color:#249675; margin-right:5px; }
.wf-job > span { display:grid; place-items:center; background:#e5f5fd; border-radius:12px; color:#159ad9; width:35px; height:35px; flex:none; }
.wf-job > span .ui-icon { width:22px; height:22px; }
.wf-job:nth-child(2) > span { background:#fff2ca; color:#bc891d; }
.wf-job:nth-child(3) > span { background:#e3f5ed; color:#32866b; }
.wf-job-open > span { background:#fff0e6; color:#c3833d; }
.wf-flow-token .ui-icon { width:20px; height:20px; }
.wf-citations button { display:inline-flex; align-items:center; gap:5px; border-radius:20px; }
.wf-complete > .ui-icon { margin-right:7px; }
@media(max-width:760px) {
 .motion-result { padding:17px; }
 .motion-ai-badge { right:-3px; font-size:9px!important; }
 .team-love-grid article > span { width:60px; height:60px; font-size:30px; border-radius:18px; }
}
/* Keep the friendly emoji illustrations; Ionicons are for UI controls. */
.brain-node > i { display:inline-block; font-style:normal; font-size:19px; line-height:1; }
.team-love-grid article > span { display:block; width:auto; height:auto; border:0; border-radius:0; background:none; font-size:72px; transform:none; }
.motion-report { height:auto; min-height:550px; padding:20px 0; }
.motion-report .motion-floats { padding-top:0; }
.motion-report .motion-document { width:94%; margin-left:0; }
.motion-report .motion-paper img { height:auto; max-height:none; object-fit:contain; }
.motion-ai-comment { font-size:13px; color:#688099; margin:10px 0 15px; }
.motion-answer .rfi-status { background:#f3a61d; color:#fff; border-radius:10px; white-space:nowrap; font-size:12px; padding:2px 7px; }
@media(max-width:760px) {
 .pillar-copy { text-align:center; }
 .pillar-copy p { margin-left:auto; margin-right:auto; max-width:560px; }
 .pillar-heading { text-align:center; }
 .brain-node > i { font-size:17px; }
 .team-love-grid article > span { font-size:60px; }
}
.usage-ticker[hidden] { display:none!important; }

/* Shared chat chrome, based on the supplied OnSite reference. */
.motion-phone,.wc-chat { background:#f4f2f0; }
.motion-phone-lines,.motion-speaker { display:none; }
.motion-phone-header { width:max-content; max-width:92%; margin:20px auto 10px; padding:8px 16px; border:1px solid #fff; border-radius:40px; background:linear-gradient(135deg,#ffffffed,#eefaffb8); box-shadow:0 5px 18px #2734470c,inset 0 1px 2px white; backdrop-filter:blur(16px); }
.header-emoji { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#c7ebfc; font-size:20px; }
.motion-tabs,.wc-chat-tabs { display:flex; justify-content:space-between; gap:1px; margin:0 8px; padding:4px; border:1px solid white; border-radius:30px; background:#ffffffb5; backdrop-filter:blur(16px); color:#737373; }
.motion-tabs > span,.wc-chat-tabs > span { display:flex; align-items:center; justify-content:center; gap:3px; padding:5px 3px; font-size:9px; white-space:nowrap; }
.motion-tabs .ui-icon,.wc-chat-tabs .ui-icon { width:12px; height:12px; flex:none; }
.motion-tabs .is-selected,.wc-chat-tabs .is-selected { background:#c7ebfc; color:#0da6f2; border-radius:22px; }
.actual-composer.motion-composer,.actual-composer.wc-composer { display:flex; gap:4px; align-items:center; padding:0; background:none; border:0; box-shadow:none; color:#707070; }
.actual-composer .composer-control,.actual-composer > span:last-child { display:grid; place-items:center; width:30px; height:30px; flex:none; padding:0; border:1px solid #e5e5e5; border-radius:50%; background:#fff; color:#707070; box-shadow:none; }
.actual-composer .composer-field { display:flex; align-items:center; min-width:0; flex:1; height:30px; padding:0 10px; border-radius:24px; border:1px solid #e5e5e5; background:white; font-size:11px; color:#8c8c8c; }
.actual-composer .ui-icon { width:18px; height:18px; }
.wc-composer.actual-composer { margin:12px; }
.motion-outgoing,.wc-message.wc-out { background:#bed0ea; color:#262627; border:1px solid #0da6f2; }
.wc-message.wc-out small { color:#566b85; }
.motion-answer { height:380px; display:flex; align-items:center; }
.motion-answer .motion-floats { padding-top:0; width:100%; }
.motion-task { height:620px; }
.motion-task .motion-floats,.motion-chat .motion-floats { padding-top:145px; }
.voice-playback { display:flex; align-items:center; gap:12px; margin:10px 0 14px; color:#0b94d5; }
.voice-playback > .ui-icon { width:24px; height:24px; }
.voice-playback > span:last-child { font-size:11px; color:#737b86; }
.voice-wave { display:flex; gap:3px; align-items:center; flex:1; height:30px; }
.voice-wave i { width:3px; border-radius:4px; background:#7bacc4; }
.voice-transcript-label { font-size:9px!important; text-transform:uppercase; letter-spacing:.08em; }
.motion-task:not(.task-is-done) .motion-task-check { background:transparent; color:#0da6f2; border:1px dashed #0da6f2; }
.motion-task:not(.task-is-done) .motion-task-check .ui-icon { opacity:0; }
.motion-task-status > span { transition:opacity .3s; }
.motion-ai-comment { min-height:3em; }
.motion-ai-comment.is-typing::after { content:'▍'; color:#0da6f2; }
.wc-mini-plan { position:relative; display:block; padding:0; overflow:hidden; background:white; border:1px solid #bed0ea; border-radius:16px; }
.wc-mini-plan > img { display:block; width:100%; height:auto; max-height:145px; object-fit:contain; }
.wc-mini-plan .plan-pin { position:absolute; left:24%; top:23%; display:block; padding:0; background:none; border:0; color:#0da6f2; filter:drop-shadow(0 2px 3px #18395450); }
.wc-mini-plan .plan-pin .ui-icon { width:24px; height:24px; }
@media(max-width:760px) { .motion-task { height:620px; } .motion-answer { height:350px; } }
/* Leave the composer clear beneath the final task reply. */
.motion-task { height:700px; }
@media(max-width:760px) { .motion-task { height:690px; } }
/* Compact conversation cards, with a distinct completion beat. */
.product-motion .motion-bubble,.wc-message,.wc-message.wc-out { border-radius:22px; }
.product-motion .motion-bubble:not(.motion-outgoing),.wc-message:not(.wc-out) { background:#fff; }
.motion-chat .motion-floats { margin-left:16%; margin-right:2%; }
.motion-task .motion-floats { margin-left:12%; margin-right:10%; gap:14px; }
.motion-chat .motion-bubble,.motion-task .motion-bubble { width:fit-content; max-width:90%; padding:12px 14px; font-size:13px; }
.motion-chat .motion-result,.motion-task .motion-task-card { width:94%; margin-left:0; padding:14px; }
.motion-task .motion-task-title { font-size:14px!important; }
.motion-task .motion-task-card { transition:background .4s,border-color .4s,box-shadow .4s; }
.motion-task .voice-playback { margin:5px 0 9px; gap:8px; }
.motion-task .voice-wave { gap:2px; }
.motion-task .voice-transcript-label { margin-bottom:4px; }
.motion-task .motion-task-status { height:25px; }
.motion-task .motion-done { font-weight:600; padding:4px 8px; background:#e0f5e8; border-radius:10px; }
.motion-task.task-is-done .motion-task-card { background:#f3fff7; border-color:#63ba85; box-shadow:0 0 0 3px #76c89933,0 12px 24px #1739261a; }
.motion-task.task-is-done .motion-task-check { background:#269460; animation:task-completion-pop .55s ease-out; }
@keyframes task-completion-pop { 0% { scale:.6; } 65% { scale:1.3; } 100% { scale:1; } }
@media(prefers-reduced-motion:reduce) { .motion-task.task-is-done .motion-task-check { animation:none; } }
.wc-chat-tabs,.motion-tabs { justify-content:center; gap:2px; padding:4px 2px; }
.wc-chat-tabs > span,.motion-tabs > span { font-size:11px; gap:3px; padding:5px 3px; }
.wc-chat-tabs .ui-icon,.motion-tabs .ui-icon { width:15px; height:15px; }
.wc-chinese { display:block; font-size:12px; }
.wc-translation { display:block; opacity:var(--translation,1); max-height:calc(var(--translation,1)*100px); overflow:hidden; padding-top:calc(var(--translation,1)*7px); }
.wc-translation small { color:#168ab9; font-size:9px; }
.wc-inline-checklist { display:flex; gap:8px; padding:10px; margin-top:8px; background:white; border:1px solid #bed0ea; border-radius:16px; font-size:11px; }
.wc-inline-checklist img { width:23px; height:23px; }
.wc-inline-checklist small { display:block; margin-top:4px; font-size:9px; }
.wc-enhanced[data-wc-step='0'] .wc-inline-checklist,.wc-enhanced[data-wc-step='1'] .wc-inline-checklist { display:none; }
.wc-enhanced[data-thanks='false'] .wc-chat-complete { display:none; }
.wc-checked-list b { display:block; color:#20805a; margin:8px 0; }
.wc-photo-extraction img { width:120px; height:90px; object-fit:cover; border-radius:12px; }
.wc-chat-photo img { object-fit:cover; }
.wc-panel[data-wc-panel='2'] { transform-origin:50% 85%; }

#workflow-title { color:#fff; }

.wc-translation .wc-language-label { color:#8c8c8c; border-top:1px solid #e1e1e1; padding-top:7px; margin:0 0 5px; font-size:9px; font-weight:400; }
.wc-checked-list b { color:color-mix(in srgb,#20805a calc(var(--checked,1)*100%),#858b90); }
.wc-check-tick { display:inline-block; width:15px; opacity:var(--checked,1); transform:scale(calc(.5 + var(--checked,1)*.5)); }
/* Space for the client's closing reply above the composer. */
.motion-chat { height:640px; }
.motion-chat .motion-floats { gap:14px; }