@accurix/centrinfo-widget 4.0.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,3519 +1 @@
1
- import{C as e,S as t,_ as n,a as r,b as i,c as a,d as o,f as s,g as c,i as l,l as u,n as d,o as f,p,r as m,s as h,t as g,u as _,v,x as y,y as b}from"./config-CkU4urQY.mjs";import{render as x}from"preact";import{useCallback as S,useEffect as C,useLayoutEffect as ee,useMemo as w,useRef as T,useState as E}from"preact/hooks";import{Fragment as D,jsx as O,jsxs as k}from"preact/jsx-runtime";const A=[{name:`Smileys`,emojis:`😀.😃.😄.😁.😅.😂.🤣.😊.😇.🙂.🙃.😉.😌.😍.🥰.😘.😋.😛.😜.🤪.🤗.🤭.🤔.🤐.😐.😶.😏.🙄.😴.🥳.😎.🤓.🥺.😢.😭.😤.😠.🤯.😬.😱.🤩.🥱`.split(`.`)},{name:`Gestures`,emojis:[`👍`,`👎`,`👌`,`🤌`,`✌️`,`🤞`,`🤟`,`🤘`,`🤙`,`👈`,`👉`,`👆`,`👇`,`✋`,`🖐️`,`👋`,`🤝`,`🙏`,`💪`,`👏`,`🙌`,`👐`,`🤲`,`🫶`]},{name:`Hearts & symbols`,emojis:`❤️.🧡.💛.💚.💙.💜.🖤.🤍.💔.❣️.💕.💖.💘.💝.✨.⭐.🌟.💫.🔥.🎉.🎊.✅.❌.⚡.💯.🚀`.split(`.`)},{name:`Animals & nature`,emojis:[`🐶`,`🐱`,`🦊`,`🐻`,`🐼`,`🐨`,`🦁`,`🐮`,`🐸`,`🐵`,`🐧`,`🦄`,`🐝`,`🦋`,`🐢`,`🐬`,`🌷`,`🌸`,`🌹`,`🌻`,`🌳`,`🍀`]},{name:`Food & drink`,emojis:[`🍎`,`🍌`,`🍉`,`🍓`,`🍒`,`🥑`,`🍔`,`🍟`,`🍕`,`🌮`,`🍿`,`🍩`,`🍪`,`🎂`,`☕`,`🍵`,`🍺`,`🥂`,`🍷`]},{name:`Objects & travel`,emojis:`🚀.✈️.🚗.🏠.📦.📱.💻.⌚.📷.💡.🔑.🎁.📌.✏️.📝.📞.📧.💰.📈.⏰.🔔.🎯.🏆.🎮.🎵.💬.👀`.split(`.`)}],te={"contact-support":{title:`Contact support`,submit:`Request support`,fields:[{key:`visitorName`,label:`Full name`,kind:`text`,required:!0,identity:`name`},{key:`visitorEmail`,label:`Email`,kind:`email`,required:!0,identity:`email`},{key:`subject`,label:`Subject`,kind:`text`,required:!0},{key:`message`,label:`Message`,kind:`textarea`,required:!0,placeholder:`What do you need help with?`}]},inquiry:{title:`Leave a message`,submit:`Send message`,fields:[{key:`visitorName`,label:`Full name`,kind:`text`,required:!0,identity:`name`},{key:`visitorEmail`,label:`Email`,kind:`email`,required:!0,identity:`email`},{key:`message`,label:`Message`,kind:`textarea`,required:!0,placeholder:`How can we help?`}]},contact:{title:`Share your details`,submit:`Save`,fields:[{key:`name`,label:`Full name`,kind:`text`,required:!0,identity:`name`},{key:`email`,label:`Email`,kind:`email`,required:!0,identity:`email`},{key:`phone`,label:`Phone`,kind:`tel`,required:!0,identity:`phone`}]},"book-demo":{title:`Book a demo`,submit:`Request demo`,fields:[{key:`visitorName`,label:`Full name`,kind:`text`,required:!0,identity:`name`},{key:`visitorEmail`,label:`Email`,kind:`email`,required:!0,identity:`email`},{key:`preferredAt`,label:`Preferred time`,kind:`text`,placeholder:`e.g. Thursday 3pm`},{key:`notes`,label:`Notes`,kind:`textarea`,placeholder:`Anything we should know?`}]},"request-callback":{title:`Request a callback`,submit:`Request callback`,fields:[{key:`visitorName`,label:`Full name`,kind:`text`,required:!0,identity:`name`},{key:`visitorPhone`,label:`Phone`,kind:`tel`,required:!0,identity:`phone`},{key:`bestTime`,label:`Best time to call`,kind:`text`,placeholder:`e.g. tomorrow afternoon`},{key:`topic`,label:`Topic`,kind:`text`,placeholder:`What should we call about?`}]},"subscribe-newsletter":{title:`Subscribe`,submit:`Subscribe`,fields:[{key:`visitorName`,label:`Full name`,kind:`text`,required:!0,identity:`name`},{key:`visitorEmail`,label:`Email`,kind:`email`,required:!0,identity:`email`}]}},j=(e,t)=>O(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`,...t,children:e}),M=e=>O(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,...e,children:O(`path`,{"fill-rule":`evenodd`,"clip-rule":`evenodd`,d:`M5 3.25h14A3.75 3.75 0 0 1 22.75 7v6A3.75 3.75 0 0 1 19 16.75h-7.19l-4.26 3.84A.75.75 0 0 1 6.25 20v-3.32A3.75 3.75 0 0 1 2.25 13V7A3.75 3.75 0 0 1 6 3.25Zm3 7.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm4 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm4 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z`})}),N=e=>j(O(`path`,{d:`m6 9 6 6 6-6`}),e),P=e=>j(k(D,{children:[O(`path`,{d:`m22 2-7 20-4-9-9-4Z`}),O(`path`,{d:`M22 2 11 13`})]}),e),ne=e=>j(k(D,{children:[O(`path`,{d:`M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z`}),O(`path`,{d:`M19 10v2a7 7 0 0 1-14 0v-2`}),O(`line`,{x1:`12`,y1:`19`,x2:`12`,y2:`22`})]}),e),F=e=>j(k(D,{children:[O(`path`,{d:`M9 9v1a3 3 0 0 0 4.24 2.73`}),O(`path`,{d:`M15 5.5V5a3 3 0 0 0-5.94-.6`}),O(`path`,{d:`M19 10v2a7 7 0 0 1-9.9 6.36`}),O(`path`,{d:`M5 10v2a6.98 6.98 0 0 0 1.11 3.79`}),O(`line`,{x1:`12`,y1:`19`,x2:`12`,y2:`22`}),O(`line`,{x1:`2`,y1:`2`,x2:`22`,y2:`22`})]}),e),I=e=>j(k(D,{children:[O(`path`,{d:`M15 3h6v6`}),O(`path`,{d:`M10 14 21 3`}),O(`path`,{d:`M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6`})]}),e),re=e=>j(k(D,{children:[O(`rect`,{x:`3`,y:`4`,width:`18`,height:`18`,rx:`2`}),O(`line`,{x1:`16`,y1:`2`,x2:`16`,y2:`6`}),O(`line`,{x1:`8`,y1:`2`,x2:`8`,y2:`6`}),O(`line`,{x1:`3`,y1:`10`,x2:`21`,y2:`10`})]}),e),L=e=>j(k(D,{children:[O(`rect`,{x:`2`,y:`4`,width:`20`,height:`16`,rx:`2`}),O(`path`,{d:`m22 7-10 5L2 7`})]}),e),R=e=>j(O(`path`,{d:`M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z`}),e),ie=e=>j(k(D,{children:[O(`circle`,{cx:`12`,cy:`12`,r:`9`}),O(`path`,{d:`M8.5 14.5a4 4 0 0 0 7 0`}),O(`line`,{x1:`9`,y1:`9.5`,x2:`9.01`,y2:`9.5`}),O(`line`,{x1:`15`,y1:`9.5`,x2:`15.01`,y2:`9.5`})]}),e),z=e=>j(k(D,{children:[O(`line`,{x1:`18`,y1:`6`,x2:`6`,y2:`18`}),O(`line`,{x1:`6`,y1:`6`,x2:`18`,y2:`18`})]}),e),ae=e=>j(k(D,{children:[O(`path`,{d:`M11 5 6 9H2v6h4l5 4z`}),O(`path`,{d:`M15.5 8.5a5 5 0 0 1 0 7`}),O(`path`,{d:`M19 5a9 9 0 0 1 0 14`})]}),e),oe=e=>j(k(D,{children:[O(`path`,{d:`M11 5 6 9H2v6h4l5 4z`}),O(`line`,{x1:`22`,y1:`9`,x2:`16`,y2:`15`}),O(`line`,{x1:`16`,y1:`9`,x2:`22`,y2:`15`})]}),e),se=e=>j(O(`path`,{d:`M20 6 9 17l-5-5`}),e),ce=e=>j(k(D,{children:[O(`rect`,{x:`9`,y:`9`,width:`13`,height:`13`,rx:`2`}),O(`path`,{d:`M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1`})]}),e),le=e=>j(k(D,{children:[O(`path`,{d:`M1 4v6h6`}),O(`path`,{d:`M3.51 15a9 9 0 1 0 2.13-9.36L1 10`})]}),e),ue=e=>j(O(`rect`,{x:`6`,y:`6`,width:`12`,height:`12`,rx:`2`}),e),de=e=>j(O(`path`,{d:`M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48`}),e),fe=e=>j(k(D,{children:[O(`path`,{d:`M18.36 6.64a9 9 0 1 1-12.73 0`}),O(`line`,{x1:`12`,y1:`2`,x2:`12`,y2:`12`})]}),e),pe=e=>j(k(D,{children:[O(`circle`,{cx:`12`,cy:`12`,r:`9`}),O(`path`,{d:`M12 7v5l3 2`})]}),e),me=e=>j(k(D,{children:[O(`path`,{d:`M7 10v12`}),O(`path`,{d:`M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z`})]}),e),he=e=>j(k(D,{children:[O(`path`,{d:`M17 14V2`}),O(`path`,{d:`M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z`})]}),e),ge=e=>j(k(D,{children:[O(`path`,{d:`M15 3h6v6`}),O(`path`,{d:`M9 21H3v-6`}),O(`path`,{d:`M21 3l-7 7`}),O(`path`,{d:`M3 21l7-7`})]}),e),_e=e=>j(k(D,{children:[O(`path`,{d:`M9 3v6H3`}),O(`path`,{d:`M15 21v-6h6`}),O(`path`,{d:`M9 9 2 2`}),O(`path`,{d:`M15 15l7 7`})]}),e),B=e=>j(k(D,{children:[O(`rect`,{x:`3`,y:`4`,width:`18`,height:`14`,rx:`2`}),O(`rect`,{x:`11`,y:`11`,width:`8`,height:`6`,rx:`1`,fill:`currentColor`,stroke:`none`})]}),e),ve=e=>j(k(D,{children:[O(`rect`,{x:`4`,y:`5`,width:`16`,height:`14`,rx:`2`}),O(`path`,{d:`M12 15V9`}),O(`path`,{d:`m8.5 12.5 3.5-3.5 3.5 3.5`})]}),e),ye=e=>j(k(D,{children:[O(`line`,{x1:`12`,y1:`5`,x2:`12`,y2:`19`}),O(`path`,{d:`m19 12-7 7-7-7`})]}),e),be=e=>{let t=(e??``).trim().toLowerCase().replaceAll(`-`,`_`);return t===`low`||t===`low_quality`?`Low-confidence forecast`:t===`medium`||t===`directional`?`Directional forecast`:t===`high`||t===`validated`||t===`trusted`?`Validated forecast`:`Forecast estimate`},V=e=>{if(!e)return`Live data`;let t=new Date(e);return Number.isNaN(t.getTime())?`Live data`:`Updated ${new Intl.DateTimeFormat(void 0,{hour:`numeric`,minute:`2-digit`}).format(t)}`},xe=({answeredAt:e,reportingPeriod:t,filters:n=[],rowCount:r})=>k(`div`,{class:`cf-analytics-meta`,"data-testid":`analytics-result-meta`,"aria-label":`Result details`,children:[k(`span`,{children:[O(`span`,{"aria-hidden":`true`,class:`cf-analytics-meta__dot`}),V(e)]}),t?.label?O(`span`,{children:t.label}):null,typeof r==`number`?k(`span`,{children:[r,` `,r===1?`row`:`rows`]}):null,n.length>0?k(`span`,{children:[n.length,` applied `,n.length===1?`filter`:`filters`]}):null]}),Se=({label:e,value:t})=>k(`section`,{class:`cf-analytics-kpi`,"aria-label":e,"data-testid":`analytics-kpi`,children:[O(`div`,{class:`cf-analytics-kpi__label`,children:e}),O(`div`,{class:`cf-analytics-kpi__value`,children:t})]}),Ce=({title:e=`No matching data`,description:t=`No approved records matched this question.`})=>k(`section`,{class:`cf-analytics-empty`,role:`status`,"data-testid":`analytics-empty-state`,children:[O(`p`,{children:e}),O(`p`,{children:t})]}),we=e=>e===`line`?`Best for change over time.`:e===`stacked_bar`?`Compare totals and their parts.`:`Compare categories or ranked values.`,Te=({type:e,className:t=`cf-chart-type-icon`})=>e===`line`?k(`svg`,{viewBox:`0 0 32 32`,"aria-hidden":`true`,class:t,children:[O(`path`,{d:`M6 25h21M6 7v18`,fill:`none`,stroke:`#6B7280`,"stroke-width":`1.4`,"stroke-linecap":`round`,"stroke-linejoin":`round`}),O(`path`,{d:`M8 21c4-7 7 2 11-6 2.5-5 4.5-2 7-7`,fill:`none`,stroke:`#2563EB`,"stroke-width":`2.1`,"stroke-linecap":`round`,"stroke-linejoin":`round`})]}):e===`stacked_bar`?k(`svg`,{viewBox:`0 0 32 32`,"aria-hidden":`true`,class:t,children:[O(`path`,{d:`M6 26h21M6 7v19`,fill:`none`,stroke:`#6B7280`,"stroke-width":`1.4`,"stroke-linecap":`round`,"stroke-linejoin":`round`}),[9,15,21].map((e,t)=>k(`g`,{children:[O(`rect`,{x:e,y:18-t*2,width:`4`,height:8+t*2,fill:`#2563EB`,rx:`0.6`}),O(`rect`,{x:e,y:13-t,width:`4`,height:`5`,fill:`#F59E0B`,rx:`0.6`}),O(`rect`,{x:e,y:9-t,width:`4`,height:`4`,fill:`#22C55E`,rx:`0.6`})]},e))]}):k(`svg`,{viewBox:`0 0 32 32`,"aria-hidden":`true`,class:t,children:[O(`path`,{d:`M6 26h21M6 7v19`,fill:`none`,stroke:`#6B7280`,"stroke-width":`1.4`,"stroke-linecap":`round`,"stroke-linejoin":`round`}),O(`rect`,{x:`9`,y:`18`,width:`4`,height:`8`,fill:`#2563EB`,rx:`0.7`}),O(`rect`,{x:`15`,y:`13`,width:`4`,height:`13`,fill:`#2563EB`,rx:`0.7`}),O(`rect`,{x:`21`,y:`8`,width:`4`,height:`18`,fill:`#2563EB`,rx:`0.7`})]}),Ee=({explanation:e,onFollowUp:t,showLead:n=!1,maxFollowUps:r=3})=>k(`section`,{class:`cf-analytics-explanation`,"data-testid":`inline-analytics-explanation`,"aria-label":`Analysis and supporting evidence`,children:[n?k(`div`,{class:`cf-analytics-explanation__lead`,"data-testid":`analytics-explanation-lead`,children:[e.conversationalPreface?O(`p`,{class:`cf-analytics-explanation__summary`,children:e.conversationalPreface}):null,k(`div`,{class:`cf-analytics-explanation__lead-meta`,children:[O(`span`,{class:`cf-analytics-explanation__eyebrow`,children:`Answer from your data`}),k(`span`,{class:`cf-analytics-explanation__provenance`,children:[O(`span`,{"aria-hidden":`true`,class:`cf-analytics-explanation__provenance-dot`}),e.source===`ai_grounded`?`AI-assisted · evidence checked`:`Based on current values`]})]}),O(`h3`,{class:`cf-analytics-explanation__headline`,children:e.headline}),O(`p`,{class:`cf-analytics-explanation__summary`,children:e.summary})]}):null,k(`div`,{class:`cf-analytics-explanation__body`,children:[(e.evidence?.length??0)>0?k(`section`,{class:`cf-analytics-explanation__section`,children:[O(`h4`,{class:`cf-analytics-explanation__heading`,children:`What the numbers show`}),O(`ul`,{class:`cf-analytics-explanation__evidence`,children:e.evidence?.slice(0,4).map(e=>k(`li`,{class:`cf-analytics-explanation__evidence-item`,children:[O(`span`,{"aria-hidden":`true`,class:`cf-analytics-explanation__evidence-bullet`}),O(`span`,{children:e})]},e))})]}):null,e.businessMeaning?k(`section`,{class:`cf-analytics-explanation__meaning`,children:[O(`h4`,{class:`cf-analytics-explanation__heading`,children:`Why this may matter`}),O(`p`,{class:`cf-analytics-explanation__paragraph`,children:e.businessMeaning})]}):null,(e.possibleDrivers?.length??0)>0?k(`section`,{class:`cf-analytics-explanation__section`,children:[k(`div`,{class:`cf-analytics-explanation__section-heading`,children:[O(`h4`,{class:`cf-analytics-explanation__heading`,children:`Possibilities worth checking`}),O(`span`,{class:`cf-analytics-explanation__hint`,children:`These are not proven causes`})]}),O(`div`,{class:`cf-analytics-explanation__drivers`,children:e.possibleDrivers?.slice(0,2).map(e=>k(`article`,{class:`cf-analytics-explanation__driver`,children:[O(`p`,{class:`cf-analytics-explanation__driver-title`,children:e.hypothesis}),k(`p`,{class:`cf-analytics-explanation__driver-body`,children:[O(`span`,{class:`cf-analytics-explanation__driver-label`,children:`How to check:`}),` `,e.howToCheck]})]},`${e.hypothesis}-${e.howToCheck}`))})]}):null,(e.recommendations?.length??0)>0?k(`section`,{class:`cf-analytics-explanation__section`,children:[O(`h4`,{class:`cf-analytics-explanation__heading`,children:`Useful next steps`}),O(`div`,{class:`cf-analytics-explanation__recommendations`,children:e.recommendations?.slice(0,3).map((e,t)=>k(`article`,{class:`cf-analytics-explanation__recommendation`,children:[O(`span`,{class:`cf-analytics-explanation__recommendation-index`,children:t+1}),k(`div`,{children:[O(`p`,{class:`cf-analytics-explanation__recommendation-title`,children:e.action}),O(`p`,{class:`cf-analytics-explanation__recommendation-body`,children:e.why}),e.successMetric?k(`p`,{class:`cf-analytics-explanation__recommendation-body`,children:[O(`span`,{class:`cf-analytics-explanation__driver-label`,children:`Watch:`}),` `,e.successMetric]}):null]})]},`${e.action}-${e.why}`))})]}):null,e.forecast?k(`section`,{class:`cf-analytics-explanation__outlook`,children:[k(`div`,{class:`cf-analytics-explanation__outlook-header`,children:[O(`h4`,{class:`cf-analytics-explanation__heading`,children:`Outlook`}),O(`span`,{class:`cf-analytics-explanation__outlook-badge`,children:be(e.forecast.qualityStatus)})]}),O(`p`,{class:`cf-analytics-explanation__paragraph`,children:e.forecast.text}),e.forecast.limitations?O(`p`,{class:`cf-analytics-explanation__recommendation-body`,children:e.forecast.limitations}):null]}):null,t&&(e.followUps?.length??0)>0?k(`section`,{class:`cf-analytics-explanation__section cf-analytics-explanation__follow-up`,children:[O(`h4`,{class:`cf-analytics-explanation__heading`,children:`Ask a follow-up`}),O(`div`,{class:`cf-analytics-explanation__questions`,children:e.followUps?.slice(0,r).map(e=>O(`button`,{type:`button`,class:`cf-analytics-explanation__question`,onClick:()=>t(e),children:e},e))})]}):null,(e.limitations?.length??0)>0?k(`details`,{class:`cf-analytics-explanation__limits`,children:[O(`summary`,{class:`cf-analytics-explanation__limits-summary`,children:`Important limits`}),O(`ul`,{class:`cf-analytics-explanation__limits-list`,children:e.limitations?.map(e=>O(`li`,{children:e},e))})]}):null]}),O(`p`,{class:`cf-analytics-explanation__source`,children:e.source===`ai_grounded`?`AI-assisted wording, checked against the live values shown here.`:`Based only on the live values shown here.`})]}),De=e=>e.explanation?.source===`ai_grounded`?e.explanation:e.businessAnalysis?.explanation??e.explanation,Oe=()=>{let e=T(null);return C(()=>{let t=requestAnimationFrame(()=>e.current?.scrollIntoView?.({block:`end`}));return()=>cancelAnimationFrame(t)},[]),e},ke=e=>e.trim().split(/\s+/).slice(0,2).map(e=>e[0]?.toUpperCase()??``).join(``)||`🤖`,H=e=>{let t=e?.avatarId?.trim().toLowerCase().replace(/[^a-z0-9-]/g,`-`);return t?` cf-avatar-preset--${t}`:``},Ae={"support-guide":`SG`,"sales-host":`SH`,"calm-advisor":`CA`,"technical-guide":`TG`,"school-desk":`SD`,"front-office":`FO`},je=e=>{let t=e?.avatarId?.trim().toLowerCase();return t&&Ae[t]||(e?ke(e.agentName):`·`)},Me=({persona:e,small:t,hideWhenMissing:n})=>{let r=t?`cf-msg__avatar`:`cf-header__avatar`,i=e?.agentAvatarUrl?.trim();return i?O(`span`,{class:r,children:O(`img`,{src:i,alt:``})}):n?null:O(`span`,{class:`${r}${H(e)}`,children:je(e)})},U=()=>{let e=a(),[t,n]=E(0),r=[`Understanding your question`,`Checking approved information`,`Preparing your answer`];return C(()=>{let e=[window.setTimeout(()=>n(1),1800),window.setTimeout(()=>n(2),5e3)];return()=>e.forEach(e=>window.clearTimeout(e))},[]),k(`div`,{class:`cf-msg__bubble cf-typing`,"aria-label":e.assistantTyping,children:[O(`span`,{class:`cf-typing__label`,"aria-live":`polite`,children:r[t]}),O(`span`,{class:`cf-typing__dot`}),O(`span`,{class:`cf-typing__dot`}),O(`span`,{class:`cf-typing__dot`})]})},W=({msg:e})=>{if(!e.sources||e.sources.length===0)return null;let t=new Set,n=[];for(let r of e.sources){let e=(r.url||r.title||``).toLowerCase();!e||t.has(e)||(t.add(e),n.push(r))}if(n.length===0)return null;let r=n.slice(0,3),i=n.length-r.length;return k(`div`,{class:`cf-sources`,children:[r.map((e,t)=>e.url?k(`a`,{class:`cf-source`,href:e.url,target:`_blank`,rel:`noopener noreferrer nofollow`,title:e.title||e.url,children:[O(I,{}),O(`span`,{children:e.title||e.url})]},t):k(`span`,{class:`cf-source`,title:e.title,children:[O(I,{}),O(`span`,{children:e.title})]},t)),i>0&&k(`span`,{class:`cf-source cf-source--more`,children:[`+`,i,` more`]})]})},G=({replies:e,onPick:t})=>e&&e.length>0?O(`div`,{class:`cf-chips`,children:e.map((e,n)=>O(`button`,{type:`button`,class:`cf-chip`,onClick:()=>t(e),children:e},n))}):null,Ne=({persona:e,starters:t,onPick:n,onFocusComposer:r,speaking:i,voiceState:a=`idle`,replyPending:o=!1,pinned:s=!1,muted:c=!1,onToggleMute:l,onEndCall:u,onTalkNow:d,showTalkNow:f=!1,micLevel:p=0,theaterMode:m=!1,onToggleTheater:h,onMinimize:g,audioDevices:_=[],selectedAudioDeviceId:v=``,onSelectAudioDevice:y,connectingOnly:b=!1})=>{if(!e||!(e.talkbackMode===`avatar`||e.widgetModule===`assistant`||e.allowVoiceInput))return null;let x=e.agentAvatarUrl?.trim()||``,S=e.assistantMediaUrl?.trim()||x,C=e.assistantMediaKind===`video`&&!!S,ee=t.slice(0,3),w=a!==`idle`,T=a===`idle`?`Speak with ${e.agentName}`:`End voice chat`,E=s&&!w&&!i,A=a===`connecting`||a===`processing`||w&&o,te=[`cf-assistant-card__stage`,`cf-assistant-card__stage--local`,w?`is-live`:``,A?`is-thinking`:``,a===`listening`&&!c?`is-listening`:``,i||a===`speaking`?`is-speaking`:``,c?`is-muted`:``].filter(Boolean).join(` `),j=a===`listening`&&!c?{"--cf-listen":String(Math.max(.18,Math.min(1,p*8)))}:void 0,M=A&&k(`span`,{class:`cf-call-ripple`,"aria-hidden":`true`,children:[O(`span`,{}),O(`span`,{}),O(`span`,{})]});if(b)return k(`div`,{class:`cf-assistant-card cf-assistant-card--connecting`,"aria-live":`polite`,children:[k(`div`,{class:`cf-assistant-card__connecting-avatar`,children:[x?O(`img`,{src:x,alt:``}):O(`span`,{class:`cf-assistant-card__connecting-face${H(e)}`,children:je(e)}),M]}),k(`div`,{class:`cf-assistant-card__connecting-copy`,children:[O(`span`,{class:`cf-assistant-card__connecting-eyebrow`,children:e.agentName}),O(`strong`,{children:`Connecting with the AI…`})]})]});let N=w&&u&&O(ct,{voiceState:a,muted:c,onToggleMute:l??(()=>{}),onEndCall:u,onTalkNow:d??(()=>{}),showTalkNow:f,micLevel:p,theaterMode:m,onToggleTheater:h??(()=>{}),onMinimize:g??(()=>{}),audioDevices:_,selectedAudioDeviceId:v,onSelectAudioDevice:y??(()=>{})});return E?O(`div`,{class:`cf-assistant-card cf-assistant-card--pinned cf-assistant-card--compact`,children:k(`button`,{type:`button`,class:`cf-assistant-card__compact-speak`,onClick:r,children:[x?O(`span`,{class:`cf-assistant-card__compact-avatar`,children:O(`img`,{src:x,alt:``})}):null,O(`span`,{class:`cf-assistant-card__compact-mic`,"aria-hidden":`true`,children:O(ne,{})}),O(`span`,{class:`cf-assistant-card__compact-label`,children:T})]})}):k(`div`,{class:`cf-assistant-card ${s?`cf-assistant-card--pinned`:``} ${i?`is-speaking`:``}`,children:[(S||e.allowVoiceInput)&&k(`div`,{class:te,style:j,children:[k(`div`,{class:`cf-assistant-card__media ${S?`cf-assistant-card__media--uploaded`:`cf-assistant-card__media--generated`}${H(e)}`,children:[C?O(`video`,{src:S,muted:!0,loop:!0,playsInline:!0,autoPlay:!0}):S?O(`img`,{src:S,alt:``}):O(`div`,{class:`cf-assistant-card__avatar-stage${H(e)}`,children:k(`div`,{class:`cf-assistant-card__face`,children:[O(`span`,{class:`cf-assistant-card__initials`,children:je(e)}),O(`span`,{class:`cf-assistant-card__eye cf-assistant-card__eye--left`}),O(`span`,{class:`cf-assistant-card__eye cf-assistant-card__eye--right`}),O(`span`,{class:`cf-assistant-card__mouth`})]})}),S&&!C&&O(`span`,{class:`cf-assistant-card__mouth cf-assistant-card__mouth--overlay`}),O(`span`,{class:`cf-avatar-aura cf-avatar-aura--one`,"aria-hidden":`true`}),O(`span`,{class:`cf-avatar-aura cf-avatar-aura--two`,"aria-hidden":`true`}),O(`span`,{class:`cf-avatar-listen-ring`,"aria-hidden":`true`}),k(`span`,{class:`cf-avatar-wave`,"aria-hidden":`true`,children:[O(`span`,{}),O(`span`,{}),O(`span`,{}),O(`span`,{})]})]}),M,e.allowVoiceInput&&(N||k(`button`,{type:`button`,class:`cf-assistant-card__speak`,onClick:r,children:[O(ne,{}),T]}))]}),!s&&k(D,{children:[e.agentDescription?O(`p`,{class:`cf-assistant-card__copy`,children:e.agentDescription}):O(`p`,{class:`cf-assistant-card__copy`,children:e.greeting}),ee.length>0&&O(`div`,{class:`cf-assistant-card__chips`,children:ee.map(e=>O(`button`,{type:`button`,class:`cf-assistant-card__chip`,onClick:()=>n(e),children:e},e))}),e.disclaimerText||e.assistantPrivacyUrl?k(`p`,{class:`cf-assistant-card__privacy`,children:[e.disclaimerText||`This chat may be recorded for quality and support.`,e.assistantPrivacyUrl?k(D,{children:[` `,O(`a`,{href:e.assistantPrivacyUrl,target:`_blank`,rel:`noopener noreferrer nofollow`,children:`Privacy Policy`})]}):null]}):null]})]})},Pe={calendar:re,mail:L,phone:R,lifebuoy:L},Fe=e=>Pe[e]??L,Ie=e=>{if(e.id===`public_contact_support`)return`contact-support`;switch(e.endpoint){case`book-demo`:return`book-demo`;case`request-callback`:return`request-callback`;case`subscribe-newsletter`:return`subscribe-newsletter`;case`contact`:return`contact`;default:return`inquiry`}},Le={public_contact_support:{label:`Contact support`,description:`Ask a teammate to join this conversation.`,category:`support`,icon:`lifebuoy`,endpoint:`inquiry`},public_submit_inquiry:{label:`Leave a message`,description:`Send your question and contact details.`,category:`support`,icon:`mail`,endpoint:`inquiry`},public_book_demo:{label:`Book a demo`,description:`Request a demo from the team.`,category:`sales`,icon:`calendar`,endpoint:`book-demo`},public_request_callback:{label:`Request a callback`,description:`Share your number and best time to call.`,category:`sales`,icon:`phone`,endpoint:`request-callback`},public_subscribe_newsletter:{label:`Subscribe`,description:`Get product updates.`,category:`marketing`,icon:`mail`,endpoint:`subscribe-newsletter`}},Re=(e,t,n={})=>Array.isArray(e)?e.filter(e=>e.readiness!==`unavailable`).map(e=>ze(e,n[e.id])):(t??[]).flatMap(e=>{let t=Le[e];if(!t)return[];let n=Ie({...t,id:e}),r=te[n];return[{...t,id:e,presentation:n===`book-demo`?`booking`:`form`,formTitle:r.title,submitLabel:r.submit,fields:r.fields,delivery:``,prompt:``,shortLabel:t.label.toLowerCase(),enabled:!0,readiness:`available`,legacyFallback:!0}]}).map(e=>ze(e,n[e.id])),ze=(e,t)=>{if(!t)return e;let n=t.fields??{};return{...e,...Object.fromEntries(Object.entries(t).filter(([e,t])=>e!==`fields`&&t!==void 0)),fields:e.fields.map(e=>({...e,...n[e.key]}))}},Be=(e,t)=>{let n=e.map(e=>e.label);return n.length===0?t.actionGetInTouch:n.length<=3?n.join(`, `):`${n.slice(0,2).join(`, `)} ${h(t.actionMore,{count:String(n.length-2)})}`},Ve=({field:e,value:t,onInput:n})=>{let r=e.placeholder??e.label,i={class:`cf-form__input`,placeholder:e.required?`${r} *`:r,value:t,"aria-label":e.label,onInput:e=>n(e.target.value)};return e.kind===`textarea`?O(`textarea`,{rows:2,...i}):O(`input`,{type:e.kind,...i})},He=({spec:e,visitor:t,onSubmit:n,onCancel:r})=>{let i=a(),o=Oe(),[s,c]=E(()=>{let n={};for(let r of e.fields)r.identity&&t[r.identity]&&(n[r.key]=t[r.identity]);return n}),[l,u]=E(`idle`),[d,f]=E(``),p=e=>!!(e.identity&&t[e.identity]?.trim()),m=e.fields.filter(e=>!p(e)),g=m.every(e=>!e.required||(s[e.key]?.trim()??``)!==``),_=t.email||t.name||``;return l===`done`?k(`div`,{class:`cf-form cf-form--done`,children:[O(se,{}),O(`span`,{children:d})]}):k(`div`,{class:`cf-form`,ref:o,children:[O(`div`,{class:`cf-form__title`,children:e.title}),m.length===0&&_&&O(`div`,{class:`cf-form__as`,children:h(i.actionAs,{identity:_})}),m.map(e=>O(Ve,{field:e,value:s[e.key]??``,onInput:t=>c(n=>({...n,[e.key]:t}))},e.key)),l===`error`&&O(`div`,{class:`cf-form__err`,children:i.formError}),k(`div`,{class:`cf-form__actions`,children:[r&&O(`button`,{type:`button`,class:`cf-form__cancel`,onClick:r,children:i.cancel}),O(`button`,{type:`button`,class:`cf-form__submit`,disabled:!g||l===`submitting`,onClick:async()=>{if(!g||l===`submitting`)return;u(`submitting`);let t={},r={};for(let n of e.fields){let e=s[n.key]?.trim();e&&(t[n.key]=e,n.identity&&(r[n.identity]=e))}try{f((await n(t,r)).note||i.formThanks),u(`done`)}catch{u(`error`)}},children:l===`submitting`?i.sending:e.submit})]})]})},Ue=e=>String(e).padStart(2,`0`),We=()=>{let e=[];for(let t=9;t<=17;t++)e.push(`${Ue(t)}:00`),e.push(`${Ue(t)}:30`);return e},Ge=e=>{let t=new Date;return t.setHours(0,0,0,0),Array.from({length:e},(e,n)=>{let r=new Date(t);return r.setDate(t.getDate()+n),r})},Ke=(e,t)=>{let[n,r]=t.split(`:`).map(Number),i=new Date(e.getFullYear(),e.getMonth(),e.getDate(),n??0,r??0);try{return new Intl.DateTimeFormat(void 0,{weekday:`short`,day:`numeric`,month:`short`,year:`numeric`,hour:`2-digit`,minute:`2-digit`,timeZoneName:`short`}).format(i)}catch{return`${e.toDateString()} ${t}`}},K=(e,t)=>{let[n,r]=t.split(`:`).map(Number);return new Date(e.getFullYear(),e.getMonth(),e.getDate(),n??0,r??0)},qe=(e,t)=>{let n=K(e,t);try{return new Intl.DateTimeFormat(void 0,{hour:`numeric`,minute:`2-digit`}).format(n)}catch{return t}},Je=()=>{try{return Intl.DateTimeFormat().resolvedOptions().timeZone||``}catch{return``}},Ye=({visitor:e,onSubmit:t,onCancel:n,onDemoSlots:r,scheduler:i,title:o,submitLabel:s})=>{let c=o?.trim()||te[`book-demo`].title,l=s?.trim()||te[`book-demo`].submit,u=a(),d=Oe(),f=!!(i?.connected&&i.mode===`event`&&(i.availability===void 0||i.availability.calendarIds.length>0)),p=Math.min(60,Math.max(1,i?.availability?.bookingWindowDays??14)),m=w(()=>Ge(p),[p]),[g,_]=E(null),[v,y]=E(f?`loading`:`request_only`),[b,x]=E(i?.availability?.slotDurationMinutes??30),[S,ee]=E(Je()||i?.availability?.timezone||``),T=w(()=>f?v!==`available`||g===null?[]:[...new Set([...g].map(e=>{let t=new Date(e);return`${String(t.getHours()).padStart(2,`0`)}:${String(t.getMinutes()).padStart(2,`0`)}`}))].sort():We(),[g,v,f]),[A,j]=E(w(()=>{let e=Date.now();for(let t=0;t<m.length;t++)if(T.some(n=>K(m[t],n).getTime()>e))return t;return 0},[m,T])),[M,N]=E(null),[P,ne]=E(e.name??``),[F,re]=E(e.email??``),[L,R]=E(`idle`),[ie,z]=E(``),[ae,oe]=E(``);C(()=>{if(!f||v!==`available`||g===null)return;let e=m.findIndex(e=>T.some(t=>g.has(K(e,t).getTime())));e>=0&&j(e)},[g,v,m,f,T]);let ce=i?.connected&&i.mode===`link`,le=async()=>{if(L===`submitting`||!e.name?.trim()&&!P.trim()||!e.email?.trim()&&!F.trim())return;R(`submitting`);let n={};F.trim()&&(n.email=F.trim()),P.trim()&&(n.name=P.trim());try{let e=await t({...F.trim()?{visitorEmail:F.trim()}:{},...P.trim()?{visitorName:P.trim()}:{}},n),r=e.booking?.schedulingLink||i?.bookingLink||``;if(!r){R(`error`);return}try{window.open(r,`_blank`,`noopener,noreferrer`)}catch{}oe(r),z(e.note||u.bookingLinkOpened),R(`done`)}catch{R(`error`)}},[ue,de]=E(new Set),[fe,pe]=E([]),[me,he]=E(0),[ge,_e]=E(!1);C(()=>{if(!r)return;let e=!0,t=new Date,n=new Date;return n.setDate(n.getDate()+p+1),r(t.toISOString(),n.toISOString()).then(t=>{if(e)if(de(new Set(t.taken.map(e=>Date.parse(e)).filter(e=>!Number.isNaN(e)))),pe(t.busy.map(e=>[Date.parse(e.start),Date.parse(e.end)]).filter(([e,t])=>!Number.isNaN(e)&&!Number.isNaN(t))),x(t.slotDurationMinutes??30),ee(Je()||t.timezone||``),f){if(t.status!==`available`||!Array.isArray(t.available)){_(null),y(`unavailable`);return}_(new Set(t.available.map(e=>Date.parse(e)).filter(e=>!Number.isNaN(e)))),y(`available`)}else y(t.status??`request_only`)}).catch(()=>{!e||!f||(_(null),y(`unavailable`))}),()=>{e=!1}},[p,f,r,me]);let B=!!e.email?.trim(),ve=!!e.name?.trim(),ye=!!M&&(!f||v===`available`)&&(ve||P.trim()!==``)&&(B||F.trim()!==``),be=e.email||e.name||``,V=e=>ue.has(K(m[A],e).getTime()),xe=e=>K(m[A],e).getTime()<=Date.now(),Se=b*60*1e3,Ce=e=>{let t=K(m[A],e).getTime(),n=t+Se;return fe.some(([e,r])=>t<r&&n>e)},we=e=>!f||g?.has(K(m[A],e).getTime())===!0,Te=async()=>{if(!ye||L===`submitting`||!M)return;R(`submitting`),_e(!1);let e=K(m[A],M),n=Ke(m[A],M),r={};F.trim()&&(r.email=F.trim()),P.trim()&&(r.name=P.trim());try{let i=await t({preferredAt:n,slotAt:e.toISOString(),...F.trim()?{visitorEmail:F.trim()}:{},...P.trim()?{visitorName:P.trim()}:{}},r);i.booking?.confirmed?(z(i.note||h(u.bookingConfirmed,{when:n})),oe(i.booking.meetingUrl||i.booking.eventLink||``)):z(i.note||h(u.bookingRequested,{when:n})),R(`done`)}catch(t){t?.status===409?(de(t=>new Set(t).add(e.getTime())),N(null),_e(!0),he(e=>e+1),R(`idle`)):R(`error`)}};return L===`done`?k(`div`,{class:`cf-form cf-form--done`,children:[O(se,{}),O(`span`,{children:ie}),ae&&k(`a`,{class:`cf-booking__link`,href:ae,target:`_blank`,rel:`noopener noreferrer`,children:[ce?u.bookingOpenScheduler:u.bookingMeetingLink,` `,O(I,{})]})]}):ce?k(`div`,{class:`cf-form cf-booking`,ref:d,children:[O(`div`,{class:`cf-form__title`,children:c}),O(`div`,{class:`cf-booking__hint`,children:h(u.bookingViaProvider,{provider:i?.label??u.bookingSchedulerFallback})}),B?be?O(`div`,{class:`cf-form__as`,children:h(u.actionAs,{identity:be})}):null:k(D,{children:[!e.name?.trim()&&O(`input`,{class:`cf-form__input`,type:`text`,placeholder:`${u.handoffName} *`,value:P,"aria-label":u.handoffName,onInput:e=>ne(e.target.value)}),O(`input`,{class:`cf-form__input`,type:`email`,placeholder:`${u.handoffEmail} *`,value:F,"aria-label":u.handoffEmail,onInput:e=>re(e.target.value)})]}),L===`error`&&O(`div`,{class:`cf-form__err`,children:u.formError}),k(`div`,{class:`cf-form__actions`,children:[n&&O(`button`,{type:`button`,class:`cf-form__cancel`,onClick:n,children:u.cancel}),O(`button`,{type:`button`,class:`cf-form__submit`,disabled:L===`submitting`||!e.name?.trim()&&P.trim()===``||!B&&F.trim()===``,onClick:le,children:L===`submitting`?u.sending:u.bookingOpenScheduler})]})]}):k(`div`,{class:`cf-form cf-booking`,ref:d,children:[O(`div`,{class:`cf-form__title`,children:c}),k(`div`,{class:`cf-booking__hint`,children:[u.bookingPickTime,` ·`,` `,O(`span`,{class:`cf-booking__dur`,children:h(u.bookingDuration,{count:String(b)})}),S?` · ${h(u.bookingTimezone,{timezone:S})}`:``]}),f&&v===`loading`?O(`div`,{class:`cf-booking__state`,role:`status`,children:u.bookingCheckingAvailability}):null,f&&v===`unavailable`?O(`div`,{class:`cf-form__err`,role:`alert`,children:u.bookingAvailabilityUnavailable}):null,f&&v===`available`&&T.length===0?O(`div`,{class:`cf-booking__state`,role:`status`,children:u.bookingNoSlots}):null,T.length>0?O(`div`,{class:`cf-booking__dates`,role:`tablist`,"aria-label":u.bookingPickDay,children:m.map((e,t)=>k(`button`,{type:`button`,role:`tab`,"aria-selected":t===A,disabled:f&&v===`available`&&!T.some(t=>g?.has(K(e,t).getTime())),class:`cf-booking__date ${t===A?`is-selected`:``}`,onClick:()=>{j(t),N(null)},children:[O(`span`,{class:`cf-booking__dow`,children:e.toLocaleDateString(void 0,{weekday:`short`})}),O(`span`,{class:`cf-booking__dom`,children:e.getDate()})]},t))}):null,T.length>0?O(`div`,{class:`cf-booking__slots`,role:`listbox`,"aria-label":u.bookingPickTimeLabel,children:T.map(e=>{let t=xe(e),n=Ce(e),r=V(e),i=we(e),a=r||t||n||!i;return O(`button`,{type:`button`,role:`option`,"aria-selected":M===e,disabled:a,title:t?u.bookingEarlierToday:n?u.bookingCalendarBusy:r?u.bookingAlreadyBooked:i?void 0:u.bookingNotOffered,class:`cf-booking__slot ${M===e?`is-selected`:``} ${a?`is-taken`:``}`,onClick:()=>N(e),children:qe(m[A],e)},e)})}):null,ge&&O(`div`,{class:`cf-form__err`,children:u.bookingSlotTaken}),be?O(`div`,{class:`cf-form__as`,children:h(u.actionAs,{identity:be})}):null,!ve&&O(`input`,{class:`cf-form__input`,type:`text`,placeholder:`${u.handoffName} *`,value:P,"aria-label":u.handoffName,onInput:e=>ne(e.target.value)}),!B&&O(D,{children:O(`input`,{class:`cf-form__input`,type:`email`,placeholder:`${u.handoffEmail} *`,value:F,"aria-label":u.handoffEmail,onInput:e=>re(e.target.value)})}),L===`error`&&O(`div`,{class:`cf-form__err`,children:u.formError}),k(`div`,{class:`cf-form__actions`,children:[n&&O(`button`,{type:`button`,class:`cf-form__cancel`,onClick:n,children:u.cancel}),O(`button`,{type:`button`,class:`cf-form__submit`,disabled:!ye||L===`submitting`,onClick:Te,children:L===`submitting`?u.sending:l})]})]})},Xe=({actions:e,descriptors:t,visitor:n,onSubmitForm:r,onDemoSlots:i,scheduler:o,exclude:s=[],openAction:c,translations:l={}})=>{let u=a(),[d,f]=E(null),[p,m]=E(!1),h=T(null),g=T(null),_=T(!1),v=w(()=>`cf-actions-${Math.random().toString(36).slice(2,9)}`,[]),y=w(()=>Re(t,e,l).filter(e=>!s.includes(e.id)&&!s.includes(e.endpoint)),[t,e,s,l]);C(()=>{c&&y.some(e=>e.id===c)&&(f(c),m(!0))},[c,y]);let b=d?y.find(e=>e.id===d):void 0,x=S(()=>{_.current=!0,f(null),m(!1)},[]),D=S(()=>f(null),[]);ee(()=>{p||!_.current||(_.current=!1,h.current?.focus())},[p]);let A=T({drawerOpen:p,activeId:d});if(A.current={drawerOpen:p,activeId:d},C(()=>{let e=e=>{if(e.key!==`Escape`)return;let{drawerOpen:t,activeId:n}=A.current;!t&&!n||(e.stopPropagation(),n?D():x())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[D,x]),C(()=>{p&&g.current?.querySelector(`button, input, textarea, select`)?.focus()},[p,d]),y.length===0)return null;let te=p?b?k(`div`,{ref:g,id:v,class:`cf-action-drawer is-open`,role:`dialog`,"aria-modal":`false`,"aria-label":b.formTitle||b.label,children:[O(`div`,{class:`cf-action-drawer__handle`,"aria-hidden":`true`}),k(`div`,{class:`cf-action-drawer__head`,children:[k(`div`,{children:[O(`strong`,{children:b.formTitle||b.label}),b.legacyFallback?O(`small`,{class:`cf-action-test-mode`,children:u.actionTestMode}):null]}),O(`button`,{type:`button`,class:`cf-action-drawer__close`,"aria-label":u.actionClose,onClick:D,children:O(z,{})})]}),b.readiness===`degraded`&&b.readinessNote?O(`p`,{class:`cf-action-drawer__note cf-action-drawer__note--warn`,role:`status`,children:b.readinessNote}):null,(b.presentation??`form`)===`booking`?O(Ye,{visitor:n,title:b.formTitle,submitLabel:b.submitLabel,onCancel:D,onSubmit:(e,t)=>r(b.id,e,t,b.endpoint),onDemoSlots:i,scheduler:o}):O(He,{spec:{title:b.formTitle||b.label,submit:b.submitLabel,fields:b.fields},visitor:n,onCancel:D,onSubmit:(e,t)=>r(b.id,e,t,b.endpoint)})]}):k(`div`,{ref:g,id:v,class:`cf-action-drawer cf-action-drawer--menu`,role:`dialog`,"aria-modal":`false`,"aria-label":u.actionChoose,children:[O(`div`,{class:`cf-action-drawer__handle`,"aria-hidden":`true`}),k(`div`,{class:`cf-action-drawer__head`,children:[k(`div`,{children:[O(`span`,{class:`cf-action-drawer__eyebrow`,children:u.actionNeedHelp}),O(`strong`,{children:u.actionChoose})]}),O(`button`,{type:`button`,class:`cf-action-drawer__close`,"aria-label":u.actionClose,onClick:x,children:O(z,{})})]}),O(`div`,{class:`cf-action-drawer__grid`,children:y.map(e=>k(`button`,{type:`button`,class:`cf-action-card`,onClick:()=>f(e.id),children:[O(`span`,{class:`cf-action-card__icon`,children:O(Fe(e.icon),{})}),k(`span`,{class:`cf-action-card__copy`,children:[O(`strong`,{children:e.label}),e.legacyFallback?O(`small`,{class:`cf-action-test-mode`,children:u.actionTestMode}):null,O(`small`,{children:e.description}),e.readiness===`degraded`&&e.readinessNote?O(`small`,{class:`cf-action-card__warn`,children:e.readinessNote}):null]}),O(N,{})]},e.id))}),O(`p`,{class:`cf-action-drawer__note`,children:u.actionFooter})]}):null;return k(`div`,{class:`cf-action-shell`,children:[k(`button`,{ref:h,type:`button`,class:`cf-action-trigger`,hidden:p,"aria-expanded":p,"aria-controls":v,onClick:()=>p?x():m(!0),children:[O(`span`,{class:`cf-action-trigger__icon`,children:O(L,{})}),k(`span`,{class:`cf-action-trigger__copy`,children:[O(`strong`,{children:u.actionContactOptions}),O(`small`,{children:Be(y,u)})]}),O(N,{})]}),te]})},Ze=({hasEmail:e,visitor:t,question:n,onSubmitForm:r})=>{let i=a(),[o,s]=E(!1),[c,l]=E(!1),[u,d]=E(t.name??``),[f,p]=E(t.email??``);if(e)return k(`div`,{class:`cf-handoff cf-handoff--done`,children:[O(se,{}),O(`span`,{children:`We’ve alerted the team. If someone is available, they can continue here.`})]});if(o){let e=t.email||f;return k(`div`,{class:`cf-handoff cf-handoff--done`,children:[O(se,{}),O(`span`,{children:h(i.handoffShared,{email:e})})]})}let m=async()=>{if(!(!f.trim()||c)){l(!0);try{await r(`inquiry`,{visitorEmail:f.trim(),...u.trim()?{visitorName:u.trim()}:{},message:n||`I had a question the assistant couldn’t answer.`,subject:`Help request from chat`},{email:f.trim(),name:u.trim()||void 0}),s(!0)}catch{l(!1)}}};return k(`div`,{class:`cf-handoff`,children:[O(`div`,{class:`cf-handoff__title`,children:i.handoffTitle}),O(`input`,{class:`cf-form__input`,type:`text`,placeholder:i.handoffName,value:u,"aria-label":i.handoffName,onInput:e=>d(e.target.value)}),O(`input`,{class:`cf-form__input`,type:`email`,placeholder:`${i.handoffEmail} *`,value:f,"aria-label":i.handoffEmail,onInput:e=>p(e.target.value)}),O(`button`,{type:`button`,class:`cf-form__submit`,disabled:!f.trim()||c,onClick:m,children:c?i.sending:i.handoffNotify})]})},Qe=({text:e})=>{let t=a(),[n,r]=E(!1);return k(`button`,{type:`button`,class:`cf-tool`,onClick:async()=>{try{await navigator.clipboard.writeText(e),r(!0),setTimeout(()=>r(!1),1500)}catch{}},"aria-label":t.copy,children:[O(n?se:ce,{}),n?t.copied:t.copy]})},$e=({items:e,onPick:t})=>e.length===0?null:O(`div`,{class:`cf-starters`,children:e.map((e,n)=>O(`button`,{type:`button`,class:`cf-starter`,onClick:()=>t(e),children:e},n))}),et=({items:e})=>{let t=e.filter(e=>e.label.trim()&&e.url.trim()).slice(0,4);return t.length===0?null:O(`div`,{class:`cf-featured-links`,children:t.map((e,t)=>k(`a`,{class:`cf-featured-link`,href:e.url,target:`_blank`,rel:`noopener noreferrer nofollow`,title:e.label,children:[O(I,{}),O(`span`,{children:e.label})]},`${e.url}-${t}`))})},tt=({msg:e,onRate:t})=>{let n=a(),[r,i]=E(!1),[o,s]=E(``),c=e.feedback,l=()=>{t(e.id,`up`),i(!1)},u=()=>{t(e.id,`down`),i(!0)},d=()=>{t(e.id,`down`,o.trim()),i(!1)};return k(`div`,{class:`cf-feedback`,children:[k(`div`,{class:`cf-feedback__row`,children:[O(`button`,{type:`button`,class:`cf-feedback__btn ${c===`up`?`is-active`:``}`,"aria-label":n.feedbackHelpful,"aria-pressed":c===`up`,onClick:l,children:O(me,{})}),O(`button`,{type:`button`,class:`cf-feedback__btn ${c===`down`?`is-active`:``}`,"aria-label":n.feedbackNotHelpful,"aria-pressed":c===`down`,onClick:u,children:O(he,{})}),c&&!r&&O(`span`,{class:`cf-feedback__thanks`,children:n.feedbackThanks})]}),r&&c===`down`&&k(`div`,{class:`cf-feedback__comment`,children:[O(`textarea`,{class:`cf-feedback__input`,rows:2,placeholder:n.feedbackCommentPlaceholder,value:o,onInput:e=>s(e.target.value)}),O(`button`,{type:`button`,class:`cf-feedback__send`,onClick:d,children:n.feedbackSend})]})]})},nt=({msg:e,persona:t,isLast:n,visitor:i,hasEmail:o,lastQuestion:s,showActions:c,onPickReply:l,onSubmitForm:u,onDemoSlots:d,onRetry:f,ratable:p,onRate:m,onExpandVisualization:h})=>{let g=a(),_=e.role===`user`,v=e.liveEventType??``,y=e.content.trim().toLowerCase(),b=v===`handoff_queued`||v===`agent_joined`||v===`agent_left`||v===`conversation_ended`||y.includes(`joined the chat`)||y.includes(`left the chat`)||y.includes(`support agents will be with you`),x=e.role===`system`||b,S=e.requestedContactFields?.includes(`email`)===!0,C=n&&!_&&!x&&!!(e.handoffOffered||S),ee=C&&!o?[`inquiry`]:[],w=!e.pending&&!e.streaming,T=[...e.artifacts??[],...e.visualization&&!(e.artifacts??[]).some(e=>e.type===`visualization`)?[{type:`visualization`,visualization:e.visualization}]:[]];return x?O(`div`,{class:`cf-msg cf-msg--system`,children:k(`div`,{class:`cf-system-event`,children:[O(`div`,{class:`cf-system-event__mark`,"aria-hidden":`true`}),O(`div`,{class:`cf-system-event__text`,children:e.content}),e.createdAt&&O(`div`,{class:`cf-system-event__time`,children:new Date(e.createdAt).toLocaleString(void 0,{day:`2-digit`,month:`short`,year:`numeric`,hour:`numeric`,minute:`2-digit`})})]})}):k(`div`,{class:`cf-msg cf-msg--${_?`user`:`agent`}`,children:[!_&&O(Me,{persona:t,small:!0}),k(`div`,{class:`cf-msg__col`,children:[e.pending&&e.content===``?O(U,{}):e.imageUrl?k(`div`,{class:`cf-msg__bubble cf-msg__bubble--media`,children:[O(`img`,{class:`cf-msg__media`,src:e.imageUrl,alt:`GIF`}),e.content&&O(`span`,{class:`cf-msg__caption`,children:e.content})]}):k(`div`,{class:`cf-msg__bubble`,children:[_?e.content:r(e.content),e.streaming&&O(`span`,{class:`cf-caret`,"aria-hidden":`true`})]}),_?null:T.map((t,n)=>t.type===`visualization`&&t.visualization?O(rt,{visualization:t.visualization,onExpand:h?()=>h(e.id):void 0,expandControlId:e.id},`visualization-${n}`):t.type===`image`&&(t.data||t.uri?.startsWith(`https://`))&&[`image/png`,`image/jpeg`,`image/webp`].includes(t.mimeType??``)?k(`figure`,{class:`cf-artifact`,children:[t.title?O(`figcaption`,{children:t.title}):null,O(`img`,{src:t.uri||`data:${t.mimeType};base64,${t.data}`,alt:t.altText||t.caption||t.title||`Tool result`}),t.caption&&t.caption!==t.title?O(`p`,{children:t.caption}):null]},`image-${n}`):t.type===`resource_link`&&t.uri?.startsWith(`https://`)?k(`a`,{class:`cf-artifact-link`,href:t.uri,target:`_blank`,rel:`noopener noreferrer nofollow`,children:[O(`strong`,{children:t.title||t.name||`Open result`}),t.caption?O(`span`,{children:t.caption}):null]},`link-${n}`):null),!_&&e.visualization&&De(e.visualization)?O(Ee,{explanation:De(e.visualization),onFollowUp:l,showLead:!e.content.toLocaleLowerCase().includes(De(e.visualization).headline.toLocaleLowerCase())}):null,_&&e.attachmentName&&k(`div`,{class:`cf-attach-chip`,title:e.attachmentName,children:[O(de,{}),O(`span`,{children:e.attachmentName})]}),!_&&k(D,{children:[w&&(e.error||e.content)&&k(`div`,{class:`cf-msg__actions`,children:[O(`div`,{class:`cf-msg__tools`,children:e.error?k(`button`,{type:`button`,class:`cf-tool`,onClick:()=>f(e.id,e.retryText??``),children:[O(le,{}),g.retry]}):O(Qe,{text:e.content})}),p&&!e.error&&e.content&&O(tt,{msg:e,onRate:m})]}),O(W,{msg:e}),n&&O(G,{replies:e.suggestedReplies,onPick:l}),C&&O(Ze,{hasEmail:o,visitor:i,question:s,onSubmitForm:u}),c&&O(Xe,{actions:e.availableActions,descriptors:e.actions,openAction:e.selectedAction,visitor:i,onSubmitForm:u,onDemoSlots:d,scheduler:t?.scheduler,exclude:ee})]})]})]})},rt=({visualization:e,expanded:t=!1,onExpand:r,onClose:a,expandControlId:o})=>{let s=T(null),c=w(()=>v(e),[e]),[l,u]=E(c?.type);C(()=>u(c?.type),[c]);let d=w(()=>i(e),[e]),f=w(()=>v(e,l),[l,e]),m=l??f?.type??c?.type,h=d.find(e=>e.type===m),g=e.rows??[],_=e.columns?.length?e.columns:Object.keys(g[0]??{}),y=_.map(t=>{let n=e.columnMetadata?.find(e=>e.key===t);return n?{key:t,label:n.label,dataType:n.dataType,currencyCode:n.currencyCode}:t});if(g.length===0)return O(Ce,{});let x=O(xe,{answeredAt:e.freshness?.answeredAt,reportingPeriod:e.reportingPeriod,filters:e.appliedFilters,rowCount:e.rowCount??g.length}),S=()=>e.tableAvailable===!1||_.length===0?null:k(`div`,{class:`cf-analytics-visualization${t?` is-expanded`:``}`,children:[k(`div`,{class:`cf-analytics-visualization__header`,children:[k(`div`,{children:[O(`div`,{class:`cf-analytics-visualization__title`,children:e.title?.trim()||`Result details`}),x]}),k(`div`,{class:`cf-analytics-visualization__actions`,children:[e.downloadAvailable?O(`button`,{type:`button`,class:`cf-analytics-visualization__download`,onClick:()=>it(_,g),children:`Download`}):null,t&&a?O(`button`,{type:`button`,class:`cf-analytics-visualization__close`,"aria-label":`Restore assistant view`,onClick:a,children:O(z,{})}):r&&e.expandable!==!1?O(`button`,{type:`button`,class:`cf-analytics-visualization__expand`,"aria-label":`Expand table`,"data-visualization-message":o,onClick:r,children:O(ge,{})}):null]})]}),O(p,{rows:g,columns:y,maxRows:100,expanded:t,classPrefix:`cf`})]});if(e.presentation===`table`||!e.presentation&&e.type===`table`)return S();let ee=e.chartRecommendation?.valueFields?.[0]??e.valueFields?.[0]??e.value??_[1];if(e.presentation===`kpi`||!e.presentation&&e.type===`kpi`){let n=g[0]?.[ee??_[0]??``],r=typeof n==`number`?n:Number(n),i=e.columnMetadata?.find(e=>e.key===ee),o=Number.isFinite(r)?b(r,i,e):String(n??`No value`);return k(`div`,{class:`cf-analytics-visualization${t?` is-expanded`:``}`,children:[k(`div`,{class:`cf-analytics-visualization__header`,children:[k(`div`,{children:[O(`div`,{class:`cf-analytics-visualization__title`,children:`Live metric`}),x]}),t&&a?O(`button`,{type:`button`,class:`cf-analytics-visualization__close`,"aria-label":`Restore assistant view`,onClick:a,children:O(z,{})}):null]}),O(Se,{label:i?.label??ee??`Current value`,value:o})]})}return f?k(`div`,{class:`cf-analytics-visualization${t?` is-expanded`:``}`,children:[k(`div`,{class:`cf-analytics-visualization__header`,children:[k(`div`,{children:[O(`div`,{class:`cf-analytics-visualization__title`,children:f.title}),x]}),k(`div`,{class:`cf-analytics-visualization__actions`,children:[d.length>1?k(`details`,{ref:s,class:`cf-analytics-chart-picker`,children:[k(`summary`,{"aria-label":`Choose chart type`,title:`Choose chart type`,children:[k(`span`,{class:`cf-analytics-chart-picker__current`,children:[O(Te,{type:m??f.type}),O(`span`,{children:h?.label??`Chart`})]}),O(N,{})]}),O(`div`,{class:`cf-analytics-chart-picker__menu`,role:`listbox`,"aria-label":`Chart type`,children:d.map(e=>{let t=e.type===m;return k(`button`,{type:`button`,role:`option`,"aria-selected":t,class:t?`is-selected`:``,onClick:()=>{u(e.type),s.current&&(s.current.open=!1)},children:[O(`span`,{class:`cf-analytics-chart-picker__icon`,children:O(Te,{type:e.type})}),k(`span`,{class:`cf-analytics-chart-picker__copy`,children:[O(`strong`,{children:e.label}),O(`small`,{children:we(e.type)})]}),t?O(se,{}):null]},e.type)})})]}):null,t&&a?O(`button`,{type:`button`,class:`cf-analytics-visualization__close`,"aria-label":`Restore assistant view`,onClick:a,children:O(z,{})}):r&&e.expandable!==!1?O(`button`,{type:`button`,class:`cf-analytics-visualization__expand`,"aria-label":`Expand chart`,"data-visualization-message":o,onClick:r,children:O(ge,{})}):null]})]}),O(n,{model:f,expanded:t}),e.downloadAvailable?O(`button`,{type:`button`,class:`cf-analytics-visualization__download`,onClick:()=>it(_,g),children:`Download this data`}):null]}):S()},it=(e,t)=>{if(typeof document>`u`||e.length===0)return;let n=c(t,e),r=URL.createObjectURL(new Blob([n],{type:`text/csv;charset=utf-8`})),i=document.createElement(`a`);i.href=r,i.download=`analytics-result.csv`,i.click(),URL.revokeObjectURL(r)},at=e=>new Promise((t,n)=>{let r=new FileReader;r.onload=()=>t(String(r.result).split(`,`)[1]??``),r.onerror=n,r.readAsDataURL(e)}),ot=({onPick:e})=>O(`div`,{class:`cf-picker cf-emoji`,children:A.map(t=>k(`div`,{class:`cf-emoji__group`,children:[O(`div`,{class:`cf-emoji__label`,children:t.name}),O(`div`,{class:`cf-emoji__grid`,children:t.emojis.map((t,n)=>O(`button`,{type:`button`,class:`cf-emoji__btn`,onClick:()=>e(t),"aria-label":t,children:t},n))})]},t.name))}),st=({onSearch:e,onPick:t})=>{let n=a(),[r,i]=E(``),[o,s]=E([]),[c,l]=E(!0);return C(()=>{let t=!0;l(!0);let n=setTimeout(()=>{e(r).then(e=>t&&(s(e),l(!1))).catch(()=>t&&(s([]),l(!1)))},300);return()=>{t=!1,clearTimeout(n)}},[r,e]),k(`div`,{class:`cf-picker cf-gif`,children:[O(`input`,{class:`cf-gif__search`,placeholder:n.searchGifs,value:r,"aria-label":n.searchGifs,onInput:e=>i(e.target.value)}),O(`div`,{class:`cf-gif__grid`,children:c?O(`div`,{class:`cf-gif__hint`,children:n.searchingGifs}):o.length===0?O(`div`,{class:`cf-gif__hint`,children:n.noGifs}):o.map(e=>O(`button`,{type:`button`,class:`cf-gif__item`,onClick:()=>t(e.url),"aria-label":e.alt,children:O(`img`,{src:e.preview,alt:e.alt,loading:`lazy`})},e.id))}),O(`div`,{class:`cf-gif__powered`,children:`via Tenor`})]})},q=e=>{switch(e){case`connecting`:return`Connecting with AI…`;case`listening`:return`Listening now — go ahead.`;case`speaking`:return`AI is speaking — talk to interrupt.`;case`processing`:return`Understanding what you said…`;case`noise`:return`I couldn't hear clear words. Try again closer to the mic.`;case`misunderstood`:return`I didn't understand that. Please try again.`;case`denied`:return`Microphone access is blocked. Allow the mic or type your question.`;case`muted`:return`Muted — tap the mic to unmute.`;case`timeout`:return`Didn't hear anything for a while — ending the call.`;default:return``}},J=({muted:e,listening:t,micLevel:n,onToggleMute:r})=>O(`button`,{type:`button`,class:`cf-call-btn ${e?`is-muted`:``} ${t?`is-listening`:``} ${t&&n>=.004?`is-hot`:``}`,"aria-label":e?`Unmute microphone`:`Mute microphone`,"aria-pressed":e,onClick:r,style:t?{"--cf-wave":String(Math.max(.2,Math.min(1,n*6)))}:void 0,children:O(e?F:ne,{})}),Y=({audioDevices:e,selectedAudioDeviceId:t,onSelectAudioDevice:n})=>{let[r,i]=E(!1),a=T(null);C(()=>{if(!r)return;let e=e=>{a.current&&!e.composedPath().includes(a.current)&&i(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[r]);let o=[{deviceId:``,label:`Default microphone`},...e];return k(`div`,{class:`cf-call-more`,ref:a,children:[O(`button`,{type:`button`,class:`cf-call-btn cf-call-btn--microphones`,"aria-label":`Choose microphone`,"aria-expanded":r,onClick:()=>i(e=>!e),children:O(N,{})}),r&&k(`div`,{class:`cf-call-menu`,role:`menu`,children:[O(`div`,{class:`cf-call-menu__label`,children:`Microphone`}),o.map(e=>k(`button`,{type:`button`,role:`menuitemradio`,"aria-checked":e.deviceId===t,class:`cf-call-menu__item ${e.deviceId===t?`is-active`:``}`,onClick:()=>{n(e.deviceId),i(!1)},children:[e.deviceId===t?O(se,{}):O(`span`,{class:`cf-call-menu__spacer`}),O(`span`,{children:e.label})]},e.deviceId))]})]})},ct=({voiceState:e,muted:t,onToggleMute:n,onEndCall:r,onTalkNow:i,showTalkNow:a,micLevel:o,theaterMode:s,onToggleTheater:c,onMinimize:l,audioDevices:u,selectedAudioDeviceId:d,onSelectAudioDevice:f})=>k(`div`,{class:`cf-call-controls`,children:[O(J,{muted:t,listening:e===`listening`&&!t,micLevel:o,onToggleMute:n}),O(Y,{audioDevices:u,selectedAudioDeviceId:d,onSelectAudioDevice:f}),a&&O(`button`,{type:`button`,class:`cf-call-btn cf-call-btn--talk`,"aria-label":`Talk now`,onClick:i,children:O(ne,{})}),O(`button`,{type:`button`,class:`cf-call-btn`,"aria-label":s?`Exit expanded view`:`Expand view`,"aria-pressed":s,onClick:c,children:O(s?_e:ge,{})}),O(`button`,{type:`button`,class:`cf-call-btn`,"aria-label":`Minimize voice chat`,onClick:l,children:O(B,{})}),O(`button`,{type:`button`,class:`cf-call-btn cf-call-btn--end`,"aria-label":`End voice chat`,onClick:r,children:O(fe,{})})]}),lt=({persona:e,voiceState:t,muted:n,onToggleMute:r,onEndCall:i,micLevel:a,onExpand:o})=>{let s=e=>e.stopPropagation(),c=e?.assistantMediaUrl?.trim()||e?.agentAvatarUrl?.trim()||``,l=e?.assistantMediaKind===`video`&&!!c,u=e?.agentName||`Assistant`;return k(`div`,{class:[`cf-floating-call-card`,t===`listening`&&!n?`is-listening`:``,t===`speaking`?`is-speaking`:``,t===`processing`||t===`connecting`?`is-thinking`:``,n?`is-muted`:``].filter(Boolean).join(` `),style:t===`listening`&&!n?{"--cf-listen":String(Math.max(.18,Math.min(1,a*8)))}:void 0,role:`button`,tabIndex:0,"aria-label":`Reopen voice chat with ${u}`,onClick:o,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),o())},children:[O(`div`,{class:`cf-floating-call-card__media`,"aria-hidden":`true`,children:c?l?O(`video`,{src:c,muted:!0,loop:!0,playsInline:!0,autoPlay:!0}):O(`img`,{src:c,alt:``}):k(`div`,{class:`cf-floating-call-card__avatar${H(e)}`,children:[O(`span`,{children:je(e)}),O(`span`,{class:`cf-floating-call-card__eye cf-floating-call-card__eye--left`}),O(`span`,{class:`cf-floating-call-card__eye cf-floating-call-card__eye--right`}),O(`span`,{class:`cf-floating-call-card__mouth`})]})}),O(`div`,{class:`cf-floating-call-card__shade`,"aria-hidden":`true`}),k(`div`,{class:`cf-floating-call-card__controls`,onClick:s,onKeyDown:s,role:`presentation`,children:[O(J,{muted:n,listening:t===`listening`&&!n,micLevel:a,onToggleMute:r}),O(`button`,{type:`button`,class:`cf-call-btn cf-call-btn--restore`,"aria-label":`Restore voice chat`,onClick:e=>{s(e),o()},children:O(ve,{})}),O(`button`,{type:`button`,class:`cf-call-btn cf-call-btn--end`,"aria-label":`End voice chat`,onClick:e=>{s(e),i()},children:O(fe,{})})]})]})},ut=(e,t)=>{switch(e){case`connecting`:return t.voiceConnecting;case`listening`:return t.voiceListening;case`processing`:return t.voiceProcessing;case`speaking`:return t.voiceSpeaking;case`noise`:return t.voiceNoise;case`misunderstood`:return t.voiceMisunderstood;case`denied`:return t.voiceDenied;default:return q(e)}},dt=({draftStore:e,onSend:t,onSendGif:n,onTyping:r,disabled:i,allowVoice:c,onTranscribe:l,gifEnabled:u,onSearchGifs:d,allowAttach:f,onExtract:p,voiceStartSignal:m=0,onVoiceStateChange:h})=>{let g=a(),[v,y]=E(()=>e.value),b=t=>{let n=typeof t==`function`?t(v):t;e.value=n,y(n)},[x,S]=E(!1),[ee,w]=E(!1),[A,te]=E(`idle`),[j,M]=E(`none`),[N,F]=E(null),[I,re]=E(!1),[L,R]=E(!1),[ae,oe]=E(``),se=T(null),ce=T(null),le=T(null),ue=T(0),fe=T(null),pe=T([]),me=T(void 0),he=T(null),ge=T(void 0),_e=T(0),B=e=>{te(e),h?.(e)},ve=()=>{me.current&&window.clearTimeout(me.current),me.current=void 0,ge.current&&cancelAnimationFrame(ge.current),ge.current=void 0,he.current?.close().catch(()=>void 0),he.current=null};C(()=>{let e=se.current;e&&(e.style.height=`auto`,e.style.height=`${Math.min(e.scrollHeight,110)}px`)},[v]),C(()=>()=>{N?.previewUrl&&URL.revokeObjectURL(N.previewUrl)},[N?.previewUrl]),C(()=>{if(j===`none`)return;let e=e=>{ce.current&&!e.composedPath().includes(ce.current)&&M(`none`)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[j]);let ye=e=>M(t=>t===e?`none`:e),be=e=>{let t=se.current;if(!t){b(t=>t+e);return}let n=t.selectionStart??v.length,r=t.selectionEnd??v.length;b(v.slice(0,n)+e+v.slice(r)),requestAnimationFrame(()=>{t.focus();let r=n+e.length;t.setSelectionRange(r,r)})},V=e=>{M(`none`),n(e)},xe=async e=>{if(!e)return;let t=++ue.current;if(oe(``),e.size>8388608){oe(g.attachTooLarge);return}re(!0);try{let n=await p(await at(e),e.type||`application/octet-stream`,e.name);if(t!==ue.current)return;if(!n){oe(g.attachFailed);return}F({name:e.name,text:n,mimeType:e.type||`application/octet-stream`,size:e.size,previewUrl:e.type.startsWith(`image/`)?URL.createObjectURL(e):void 0})}catch{oe(g.attachFailed)}finally{t===ue.current&&re(!1)}},Se=async e=>{let t=e.target,n=t.files?.[0];t.value=``,await xe(n)},Ce=()=>{ue.current+=1,re(!1),oe(``)},we=(!!v.trim()||!!N)&&!i&&!I&&!ee,Te=()=>{we&&(t(v,N?{attachmentName:N.name,attachmentText:N.text}:void 0),r?.(!1),b(``),F(null),oe(``))},Ee=e=>{let n=e.trim();if(!n||i){B(`misunderstood`),window.setTimeout(()=>B(`idle`),2500);return}let a=v.trim();t(a?`${a} ${n}`:n),r?.(!1),b(``),F(null),oe(``),B(`idle`)},De=e=>{if(e.key===`Enter`&&!e.shiftKey){if(i)return;e.preventDefault(),Te()}else e.key===`Escape`&&j!==`none`&&(e.preventDefault(),e.stopPropagation(),M(`none`))},Oe=async()=>{if(x){s(fe.current);return}try{B(`connecting`);let e=await navigator.mediaDevices.getUserMedia({audio:o()}),t=_(e);pe.current=[],_e.current=0;try{let t=window.AudioContext??window.webkitAudioContext;if(t){let n=new t;he.current=n;let r=n.createMediaStreamSource(e),i=n.createAnalyser();i.fftSize=512,r.connect(i);let a=new Uint8Array(i.frequencyBinCount),o=()=>{i.getByteTimeDomainData(a);let e=0;for(let t of a){let n=(t-128)/128;e+=n*n}_e.current=Math.max(_e.current,Math.sqrt(e/a.length)),ge.current=requestAnimationFrame(o)};o()}}catch{}t.ondataavailable=e=>e.data.size>0&&pe.current.push(e.data),t.onstop=async()=>{ve(),e.getTracks().forEach(e=>e.stop()),S(!1);let n=new Blob(pe.current,{type:t.mimeType||`audio/webm`});if(n.size===0||n.size<900||_e.current<.006){B(`noise`),window.setTimeout(()=>B(`idle`),3200);return}w(!0),B(`processing`);try{let e=await at(n);if(!e.trim()){B(`noise`),window.setTimeout(()=>B(`idle`),3200);return}let t=typeof navigator<`u`&&(navigator.languages?.[0]||navigator.language)||void 0;Ee(await l(e,n.type,t))}catch{B(`misunderstood`),window.setTimeout(()=>B(`idle`),3e3)}finally{w(!1)}},fe.current=t,t.start(250),S(!0),B(`listening`),me.current=window.setTimeout(()=>{s(fe.current)},12e3)}catch{B(`denied`),window.setTimeout(()=>B(`idle`),3500)}};return C(()=>{!m||!c||i||x||ee||Oe()},[m]),C(()=>()=>{ve();let e=fe.current;if(e){if(e.ondataavailable=null,e.onstop=null,e.onerror=null,e.state!==`inactive`)try{e.stop()}catch{}e.stream.getTracks().forEach(e=>e.stop())}fe.current=null,pe.current=[]},[]),k(`div`,{class:`cf-composer ${L?`is-dragging`:``}`,ref:ce,onDragEnter:e=>{f&&(e.preventDefault(),R(!0))},onDragOver:e=>{f&&e.preventDefault()},onDragLeave:e=>{e.currentTarget===e.target&&R(!1)},onDrop:e=>{f&&(e.preventDefault(),R(!1),xe(e.dataTransfer?.files?.[0]))},children:[j===`emoji`&&O(ot,{onPick:be}),j===`gif`&&O(st,{onSearch:d,onPick:V}),(N||I||ae)&&O(`div`,{class:`cf-attach-row`,children:I?k(`span`,{class:`cf-attach-status`,children:[O(`span`,{children:g.attaching}),O(`button`,{type:`button`,onClick:Ce,children:g.cancel})]}):ae?O(`span`,{class:`cf-attach-status cf-attach-status--err`,children:ae}):N&&k(`span`,{class:`cf-attach-chip`,title:N.name,children:[N.previewUrl?O(`img`,{class:`cf-attach-preview`,src:N.previewUrl,alt:``}):O(de,{}),k(`span`,{class:`cf-attach-copy`,children:[O(`span`,{children:N.name}),k(`small`,{children:[Math.max(1,Math.ceil(N.size/1024)),` KB`]})]}),O(`button`,{type:`button`,class:`cf-attach-x`,"aria-label":g.removeAttachment,onClick:()=>F(null),children:O(z,{})})]})}),A!==`idle`&&k(`div`,{class:`cf-voice-state`,"aria-live":`polite`,children:[O(`span`,{class:`cf-voice-state__dot ${x?`is-live`:``}`}),ut(A,g)]}),k(`div`,{class:`cf-composer__field`,children:[O(`button`,{type:`button`,class:`cf-iconbtn ${j===`emoji`?`is-active`:``}`,"aria-label":g.emoji,"aria-pressed":j===`emoji`,onClick:()=>ye(`emoji`),children:O(j===`emoji`?z:ie,{})}),u&&O(`button`,{type:`button`,class:`cf-iconbtn cf-gifbtn ${j===`gif`?`is-active`:``}`,"aria-label":g.gifs,"aria-pressed":j===`gif`,onClick:()=>ye(`gif`),children:O(`span`,{class:`cf-gif-label`,children:`GIF`})}),f&&k(D,{children:[O(`input`,{ref:le,type:`file`,class:`cf-file-input`,accept:`image/png,image/jpeg,image/webp,image/gif,application/pdf`,onChange:Se,tabIndex:-1,"aria-hidden":`true`}),O(`button`,{type:`button`,class:`cf-iconbtn`,"aria-label":g.attachFile,disabled:I,onClick:()=>le.current?.click(),children:O(de,{})})]}),O(`textarea`,{ref:se,class:`cf-textarea`,rows:1,placeholder:g.composerPlaceholder,value:v,"aria-label":g.composerPlaceholder,"aria-busy":i,onInput:e=>{let t=e.target.value;b(t),r?.(!!t.trim())},onPaste:e=>{let t=e.clipboardData?.files?.[0];!f||!t||(e.preventDefault(),xe(t))},onKeyDown:De}),c&&O(`button`,{type:`button`,class:`cf-iconbtn cf-mic ${x?`is-recording`:``}`,"aria-label":x?g.stopRecording:g.recordVoice,"aria-pressed":x,disabled:ee||i,onClick:Oe,children:O(ne,{})}),O(`button`,{type:`button`,class:`cf-send`,"aria-label":g.send,disabled:!we,onClick:Te,children:O(P,{})})]})]})},ft=({name:e,greeting:t})=>{let n=a();return k(`section`,{class:`cf-empty-welcome`,"aria-label":h(n.welcomeLabel,{name:e}),children:[O(`span`,{class:`cf-empty-welcome__eyebrow`,children:n.welcomeEyebrow}),O(`h2`,{children:e}),O(`p`,{children:t||n.welcomePrompt})]})},pt=(e,t,n)=>{if(e.key===`Escape`){e.preventDefault(),e.stopPropagation(),n();return}if(e.key!==`Tab`)return;let r=Array.from(t.querySelectorAll(`button, [href], textarea, input, select, [tabindex]:not([tabindex="-1"])`)).filter(e=>!e.hasAttribute(`disabled`)&&e.getAttribute(`aria-hidden`)!==`true`&&e.tabIndex>=0);if(r.length===0)return;let i=t.getRootNode(),a=e.composedPath()[0],o=a instanceof HTMLElement?a:`activeElement`in i?i.activeElement:document.activeElement,s=r[0],c=r[r.length-1];e.shiftKey&&(o===s||!t.contains(o))?(e.preventDefault(),e.stopPropagation(),c.focus()):!e.shiftKey&&(o===c||!t.contains(o))&&(e.preventDefault(),e.stopPropagation(),s.focus())},X=new Map,mt=e=>{if(!e||typeof document>`u`||typeof CanvasRenderingContext2D>`u`)return;let t=document.createElement(`canvas`).getContext(`2d`);if(!t)return;t.fillStyle=`#010203`,t.fillStyle=e;let n=t.fillStyle;if(n===`#010203`&&e.trim().toLowerCase()!==`#010203`)return;let r=n.match(/^#([\da-f]{6})$/i)?.[1];if(r)return[Number.parseInt(r.slice(0,2),16),Number.parseInt(r.slice(2,4),16),Number.parseInt(r.slice(4,6),16),1];let i=n.match(/^rgba?\(([\d.]+)[, ]+([\d.]+)[, ]+([\d.]+)(?:[, /]+([\d.]+))?\)$/i);if(!i)return;let a=i.slice(1,5).map(Number);if(!a.some(e=>!Number.isFinite(e)))return[a[0],a[1],a[2],a[3]??1]},ht=(e,t=`#ffffff`)=>{let n=`${e??``}|${t}`;if(X.has(n))return X.get(n);let r=mt(e),i=mt(t)??[255,255,255,1];if(!r){X.set(n,void 0);return}let a=r[3],o=r.slice(0,3).map((e,t)=>e*a+i[t]*(1-a)).map(e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}),s=o[0]*.2126+o[1]*.7152+o[2]*.0722,c=1.05/(s+.05)>=(s+.05)/.059?`#ffffff`:`#0f1e2a`;return X.set(n,c),c},gt=e=>{let[t,n]=E(`light`);return C(()=>{if(e!==`auto`||typeof matchMedia>`u`)return;let t=matchMedia(`(prefers-color-scheme: dark)`),r=()=>n(t.matches?`dark`:`light`);return r(),t.addEventListener(`change`,r),()=>t.removeEventListener(`change`,r)},[e]),e===`auto`?t:e},_t=1e4,vt=6e4,yt=e=>e.replace(/\[[^\]]{0,60}\]/g,` `).replace(/\(([^)]{0,60})\)/g,(e,t)=>bt.has(t.trim().toLowerCase().replace(/[.!?,…]+$/,``).replace(/\s+/g,` `))?` `:e).replace(/\*[^*]{0,60}\*/g,` `).replace(/\s+/g,` `).trim(),bt=new Set(`background noise.engine noise.noise.inaudible.unintelligible.silence.no speech.static.music.laughter.applause.wind.breathing.click.clicks.clicking.mouse click.mouse clicks.beep.beeps.beeping.tap.taps.tapping.typing.keyboard typing.cough.coughing.sigh.hmm.mm.mmm.uh.um.ah.oh`.split(`.`)),xt=e=>{let t=e.trim().toLowerCase().replace(/[()[\]*]/g,` `).replace(/[.!?,…]+$/,``).replace(/\s+/g,` `).trim();return!t||/^(?:sh+\s*)+$/.test(t)?!0:bt.has(t)},St=e=>{let t=e.trim().toLowerCase().replace(/\s+/g,` `);return t?t.includes(`transcribe this audio recording verbatim`)||t.includes(`preserve the spoken language and any code-switching`)||t.includes(`output only the transcribed text, no commentary`):!1},Ct={end:`end the call`,mute:`mute your microphone`,minimize:`minimize the chat`,expand:`expand the view`,shrink:`exit the expanded view`},wt=e=>e.trim().toLowerCase().replace(/[^\p{L}\p{N}\s']/gu,` `).replace(/\s+/g,` `).trim(),Tt=[{action:`shrink`,re:/\b(?:exit|leave|quit|close)\b[\s\w]*\b(?:full ?screen|expanded|theat(?:er|re))\b|\bshrink\b|\bsmaller view\b/},{action:`end`,re:/\b(?:end|close|stop|finish|hang ?up|quit|exit)\b[\s\w]*\b(?:call|chat|conversation|convo|session|talking)\b|\bhang ?up\b|\bgood ?bye\b|^bye(?: bye)?$/},{action:`mute`,re:/\bmute\b|\bstop listening\b/},{action:`minimize`,re:/\bminimi[sz]e\b|\bhide\b[\s\w]*\b(?:chat|call|window|widget)\b/},{action:`expand`,re:/\bexpand\b|\bmaximi[sz]e\b|\bfull ?screen\b|\btheat(?:er|re) mode\b|\bbigger view\b/}],Et=/^(?:yes|yeah|yep|yup|sure|correct|confirm|affirmative|go ahead|do it|please do|ok(?:ay)?)\b/,Dt=/^(?:no|nope|nah|cancel|never ?mind|don'?t|stop)\b/,Ot=/^(?:end|close|stop|finish|hang ?up|quit|exit|bye|good ?bye)\b/,kt=e=>{let t=wt(e);if(!t)return null;for(let{action:e,re:n}of Tt)if(n.test(t)){let n=t.split(` `).length;return{action:e,confident:e===`end`?n<=10:n<=6}}return null},At=e=>`I didn't catch yes or no. Say yes to ${Ct[e]}, or no to keep talking.`,jt=e=>`I caught some audio, but not enough clear words. Try again a little closer to the mic, or type your question for ${e?.agentName?.trim()||`the assistant`}.`,Mt=e=>{let t=wt(e).replace(/\b(?:um|uh|erm|hmm)\b/g,``).trim();return!t||t.split(/\s+/).length<=2&&/^(?:can|could|would|will|do|does|is|are|what|why|how|where|when)\b/.test(t)?!0:/\b(?:can you|could you|would you|will you|do you|can i|could i|would i|i want to|i need to|tell me about|what about|how about|about|with|to|for|please)$/i.test(t)},Nt=(e,t)=>{let n=window.AudioContext??window.webkitAudioContext;if(!n)return null;let r,i=!1,a=new n;try{let n=a.createMediaStreamSource(e),o=a.createAnalyser();o.fftSize=512,n.connect(o);let s=new Uint8Array(o.frequencyBinCount),c=()=>{if(i)return;o.getByteTimeDomainData(s);let e=0;for(let t of s){let n=(t-128)/128;e+=n*n}t(Math.sqrt(e/s.length),performance.now()),i||(r=requestAnimationFrame(c))};c()}catch{return a.close().catch(()=>void 0),null}return{stop:()=>{i||(i=!0,r!==void 0&&cancelAnimationFrame(r),r=void 0,a.close().catch(()=>void 0))}}},Pt=e=>o(e),Ft=({transport:e,config:t,bindControls:n,composerDraftStore:r})=>{let i=t.strings,[a,o]=E(t.openByDefault),{persona:c,messages:p,sending:g,assistantSpeaking:v,visitor:y,hasEmail:b,liveMode:x,assignedAgentName:w,agentTypingName:A,starters:te,featuredLinks:j,send:P,sendGif:ne,notifyTyping:F,stop:I,retry:re,rateMessage:L,injectAssistant:R,appendUserDraft:ie,patchMessage:z,removeMessage:se,submitCsat:ce,submitForm:le,transcribe:de,extract:ge,searchGifs:_e,demoSlots:B,gifEnabled:ve,identify:be,ended:V,endConversation:xe,startNew:Se,history:Ce,viewingSessionId:we,viewMessages:Te,openConversation:Ee,closeHistoryView:De,shutdown:Oe,stopSpeaking:ke,speakAssistantText:H}=d(e,t,a),[Ae,je]=E(0),[U,W]=E(`idle`),[G,Pe]=E(!1),[Fe,Ie]=E(!1),[Le,Re]=E(0),[ze,Be]=E(!1),[Ve,He]=E(null),[Ue,We]=E([]),[Ge,Ke]=E(``),[K,qe]=E(()=>{try{return localStorage.getItem(`centrinfo:muted`)===`1`}catch{return!1}}),Je=gt(t.theme),Ye=p.some(e=>e.role===`assistant`&&(e.pending||e.streaming)),Ze=g||Ye||v,Qe=c?.soundEnabled??!0;C(()=>{l(t.sound&&Qe&&!K)},[t.sound,Qe,K]);let tt=S(()=>{qe(e=>{let t=!e;try{localStorage.setItem(`centrinfo:muted`,t?`1`:`0`)}catch{}return t})},[]),it=T(null),at=T(null),ot=T(null),st=T(0),q=T(!1),J=T(!1),Y=T(!1),ct=T(0),ut=T(!1),X=T(null),mt=T(null),bt=T([]),Tt=T(void 0),Ft=T(void 0),It=T(null),Lt=T(0),Rt=T(0),zt=T(!1),Bt=T(0),Vt=T(null),Ht=T(null),Ut=T(0),Z=T(null),Wt=T([]),Gt=T(0),Kt=T(0),qt=T(0),Jt=T(null),Yt=T(!1),Xt=T(null),Zt=T(``),Qt=T(()=>{}),$t=T(``),en=T(g),tn=T(v),nn=T(Ze),rn=T(U),an=T(0);C(()=>{en.current=g},[g]),C(()=>{tn.current=v},[v]),C(()=>{nn.current=Ze},[Ze]),C(()=>{rn.current=U},[U]);let[on,sn]=E(!0),[cn,ln]=E(!1),un=T(0),[dn,fn]=E(!1),[pn,mn]=E(!1),hn=T(null),[gn,_n]=E(!1),vn=T({value:``}),yn=r??vn.current,bn=T({confirmEnd:dn,confirmClear:pn,showHistory:gn});bn.current={confirmEnd:dn,confirmClear:pn,showHistory:gn};let[xn,Sn]=E(!1),Q=!!we,Cn=Q?Te:p,wn=Cn.find(e=>e.id===Ve&&e.visualization)?.visualization;C(()=>{!Ve||wn||(He(null),Be(!1))},[wn,Ve]);let Tn=S(()=>{o(!0),je(0),m(`open`),t.onOpen?.(),t.onShow?.()},[t]),En=S(()=>{o(!1),Be(!1),He(null),t.onClose?.(),t.onHide?.(),at.current?.focus()},[t]),Dn=S(()=>a?En():Tn(),[a,Tn,En]),On=S(()=>fn(!0),[]),kn=S(()=>{xe(),fn(!1)},[xe]),An=S(()=>{Se(),ln(!1),sn(!0)},[Se]);C(()=>{dn&&hn.current?.focus()},[dn]),C(()=>{n({open:Tn,close:En,toggle:Dn,identify:be,startNew:Se,endConversation:xe,shutdown:Oe})},[n,Tn,En,Dn,be,Se,xe,Oe]),C(()=>{let e=p.filter(e=>e.role===`assistant`&&!e.pending).length;if(a){st.current=e;return}e>st.current&&je(e-st.current)},[p,a]),C(()=>{t.onUnreadChange?.(Ae)},[Ae,t]),C(()=>{let e=t.sessionDurationMinutes;if(!e||e<=0)return;let n=setTimeout(()=>Oe(),e*60*1e3);return()=>clearTimeout(n)},[t.sessionDurationMinutes,p,a,Oe]),C(()=>{let e=t.customLauncherSelector;if(!e||typeof document>`u`)return;let n=[];try{n=Array.from(document.querySelectorAll(e))}catch{return}let r=e=>{e.preventDefault(),Dn()};return n.forEach(e=>e.addEventListener(`click`,r)),()=>n.forEach(e=>e.removeEventListener(`click`,r))},[t.customLauncherSelector,Dn]);let jn=T(!1);C(()=>{let e=t.proactiveMessage?.trim();if(!e||jn.current)return;let n=t.proactiveOnPaths??[],r=typeof location<`u`?location.pathname:``;if(n.length>0&&!n.some(e=>r.includes(e)))return;let i=`centrinfo:proactive:${t.token.slice(0,12)}`;try{if(sessionStorage.getItem(i)===`1`)return}catch{}let o=setTimeout(()=>{if(!(a||V||p.some(e=>e.role===`user`))){jn.current=!0;try{sessionStorage.setItem(i,`1`)}catch{}R(e),Tn()}},Math.max(0,t.proactiveDelaySeconds)*1e3);return()=>clearTimeout(o)},[t.proactiveMessage]),C(()=>{let e=ot.current;if(!a||!e)return;let t=p[p.length-1],n=Date.now()<un.current;t?.role===`user`||on||n?(requestAnimationFrame(()=>{e.scrollTop=e.scrollHeight}),ln(!1),n&&sn(!0)):ln(!0)},[p,a,g,on]);let Mn=S(()=>{let e=ot.current;if(!e)return;if(q.current&&!Q){sn(!0),ln(!1);return}let t=e.scrollHeight-e.scrollTop-e.clientHeight<80;sn(t),t&&ln(!1)},[Q]),Nn=S(()=>{let e=ot.current;e&&(e.scrollTop=e.scrollHeight),ln(!1),sn(!0)},[]),Pn=S(()=>{un.current=Date.now()+3e3,requestAnimationFrame(Nn)},[Nn]);C(()=>{if(!a||Q||!G||U===`connecting`)return;un.current=Date.now()+6e4,Nn();let e=requestAnimationFrame(()=>{Nn(),requestAnimationFrame(Nn)}),t=[80,180,360].map(e=>window.setTimeout(Nn,e));return()=>{cancelAnimationFrame(e),t.forEach(e=>window.clearTimeout(e))}},[v,p,a,Nn,g,G,Q,U]);let Fn=S(()=>{it.current?.querySelector(`.cf-textarea`)?.focus()},[]),In=S(()=>{Tt.current&&window.clearTimeout(Tt.current),Tt.current=void 0,Ft.current&&window.clearTimeout(Ft.current),Ft.current=void 0,It.current?.stop(),It.current=null,Re(0)},[]),Ln=S(()=>{Ht.current?.stop(),Ht.current=null,s(Z.current),Vt.current?.getTracks().forEach(e=>e.stop()),Vt.current=null,Ut.current=0,Kt.current=0},[]),Rn=S(()=>{In(),mt.current?.getTracks().forEach(e=>e.stop()),mt.current=null},[In]),$=S(()=>{q.current=!1,Y.current=!1,J.current=!1,ut.current=!1,Jt.current=null,Yt.current=!1,Xt.current=null,Zt.current=``,Pe(!1),Ie(!1),Be(!1),He(null),Ln(),ke();let e=X.current;e?.state===`recording`?s(e):(Rn(),W(`idle`))},[Ln,ke,Rn]),zn=S(()=>{ze&&He(null),Be(!ze)},[ze]),Bn=S(e=>{He(e),Be(!0)},[]),Vn=S(()=>{let e=Ve;He(null),Be(!1),window.requestAnimationFrame(()=>{Array.from(it.current?.querySelectorAll(`[data-visualization-message]`)??[]).find(t=>t.dataset.visualizationMessage===e)?.focus()})},[Ve]),Hn=S(()=>{He(null),Be(!1)},[]),Un=S((e,t)=>{if(Date.now()-ct.current>=vt){W(`timeout`),Ft.current=window.setTimeout(()=>$(),2400);return}W(e),Ft.current=window.setTimeout(()=>{q.current&&!J.current&&!tn.current&&t()},1400)},[$]),Wn=S((e,t,n)=>{Date.now()-ct.current<vt&&!J.current&&(Y.current=!0,H(t)),Un(e,n)},[Un,H]),Gn=S((e,t)=>{Pn(),ct.current=Date.now(),Y.current=!0,t&&z(t,{content:e,pending:!0,streaming:!1});let n=()=>{if(q.current){if(en.current){window.setTimeout(n,80);return}t&&Xt.current===t&&(Xt.current=null),P(e,{forceVoicePlayback:!0,userMessageId:t})}};n()},[Pn,z,P]),Kn=S(async(e,t,n,r=`normal`,i)=>{let a=null,o=e=>a||(Pn(),a=Xt.current||ie(e),Xt.current=a,z(a,{content:Zt.current||e,pending:!0,streaming:!1}),a),s=()=>{a&&(Xt.current===a&&(Xt.current=null),Zt.current=``,se(a),a=null)},l=()=>{Zt.current=``,W(`listening`),window.setTimeout(()=>{q.current&&!J.current&&!en.current&&!X.current&&n()},120)},u=e.size===0,d=e.size<350&&t<.001;if(u||d){if(r===`barge`){l();return}let e=Jt.current;Wn(`noise`,e?At(e):jt(c),n),Zt.current=``;return}W(`processing`);let f=++an.current,p=o(`Listening...`);try{let t=typeof navigator<`u`&&(navigator.languages?.[0]||navigator.language)||void 0;z(p,{content:Zt.current?`${Zt.current} ...`:`Transcribing...`,pending:!0});let a=yt(await de(e,e.type,t,i));if(f!==an.current){s();return}let o=[Zt.current,a].map(e=>e.trim()).filter(Boolean).join(` `).replace(/\s+/g,` `).trim();if(!o||xt(o)||St(o)){if(s(),r===`barge`){l();return}let e=Jt.current;Wn(`misunderstood`,e?At(e):jt(c),n);return}let u=Jt.current;if(u){let e=wt(o);if(Et.test(e)||u===`end`&&Ot.test(e)){s(),Jt.current=null,Qt.current(u);return}if(Dt.test(e)){s(),Jt.current=null;let e=`Okay, never mind — what would you like to know?`;R(e),Y.current=!0,W(`speaking`),H(e);return}s();let t=At(u);R(t),Y.current=!0,W(`speaking`),H(t);return}let d=kt(o);if(d){if(s(),ct.current=Date.now(),d.confident){Qt.current(d.action);return}Jt.current=d.action;let e=`Just to confirm — you want me to ${Ct[d.action]}? Please say yes or no.`;R(e),Y.current=!0,W(`speaking`),H(e);return}if(z(p,{content:o,pending:!0}),Mt(o)){Zt.current=o,W(`listening`),n();return}Zt.current=``,Gn(o,p)}catch(e){if(s(),r===`barge`){l();return}Wn(`misunderstood`,`I couldn't convert your speech to text. Please check the speech service configuration or type your question.${e instanceof Error&&e.message.trim()?` (${e.message.trim()})`:``}`,n)}},[ie,Pn,Wn,R,z,c,se,Gn,H,de]),qn=S(async()=>{if(!(!q.current||J.current)&&!(!c?.allowVoiceInput||V||Q)&&!en.current&&!X.current){Ln(),Y.current=!1;try{W(`connecting`);let e=await navigator.mediaDevices.getUserMedia({audio:Pt($t.current)});if(!q.current||J.current){e.getTracks().forEach(e=>e.stop());return}navigator.mediaDevices.enumerateDevices().then(e=>{We(e.filter(e=>e.kind===`audioinput`).map((e,t)=>({deviceId:e.deviceId,label:e.label||`Microphone ${t+1}`})))}).catch(()=>{});let t=_(e);X.current=t,mt.current=e,bt.current=[],Lt.current=0,zt.current=!1,Bt.current=0;let n=performance.now(),r=u();It.current=Nt(e,(e,i)=>{let a=r.observe(e);if(Lt.current=Math.max(Lt.current,e),a.speech)zt.current=!0,Bt.current=0;else if(zt.current&&a.quiet){Bt.current||(Bt.current=i);let e=i-Bt.current,r=i-n;if(e>=a.endOfSpeechDelayMs&&r>=550&&t.state===`recording`){s(t);return}}else Bt.current=0;i-Rt.current>90&&(Rt.current=i,Re(e))}),t.ondataavailable=e=>{e.data.size>0&&bt.current.push(e.data)},t.onstop=async()=>{if(Rn(),X.current=null,ut.current){ut.current=!1,q.current&&!J.current?(W(`idle`),qn()):W(q.current&&J.current?`muted`:`idle`);return}if(!q.current){W(`idle`);return}await Kn(new Blob(bt.current,{type:t.mimeType||`audio/webm`}),Lt.current,qn,`normal`,Math.max(0,(performance.now()-n)/1e3))},t.start(250),W(`listening`),Tt.current=window.setTimeout(()=>{s(X.current)},_t)}catch{W(`denied`),Ft.current=window.setTimeout(()=>$(),3500)}}},[V,$,Kn,c,c?.allowVoiceInput,Ln,Rn,Q]),Jn=S(()=>{if(q.current){$();return}Fn(),!(!c?.allowVoiceInput||en.current||V||Q)&&(ct.current=Date.now(),Y.current=!1,J.current=!1,q.current=!0,Ie(!1),Pe(!0),W(`connecting`),qn())},[V,$,Fn,c,c?.allowVoiceInput,qn,Q]),Yn=S(()=>{Ie(e=>{let t=!e;if(J.current=t,t){let e=X.current;e?.state===`recording`?(ut.current=!0,s(e)):(Rn(),W(`muted`))}else q.current&&!V&&!Q&&(W(`idle`),qn());return t})},[V,qn,Rn,Q]),Xn=S((e,t)=>{R(e),t&&(Y.current=!0),W(`speaking`),H(e)},[R,H]),Zn=S(e=>{switch(ct.current=Date.now(),e){case`end`:Y.current=!1,Yt.current=!0,Xn(`Okay — ending our call now. Goodbye!`,!1),window.setTimeout(()=>{Yt.current&&(Yt.current=!1,$())},2e3);break;case`mute`:{J.current||Yn();let e=`Muted. Tap the mic button when you want me to listen again.`;R(e),H(e);break}case`minimize`:En(),Xn(`Minimized — I'm still listening. Tap the call pill to bring the chat back.`,!0);break;case`expand`:Be(!0),Xn(`Sure — expanding the view.`,!0);break;case`shrink`:He(null),Be(!1),Xn(`Okay — back to the smaller view.`,!0);break}},[En,$,R,H,Xn,Yn]);C(()=>{Qt.current=Zn},[Zn]);let Qn=T(!1);C(()=>{Qn.current&&!v&&Yt.current&&(Yt.current=!1,$()),Qn.current=v},[v,$]);let $n=S(e=>{$t.current=e,Ke(e);let t=X.current;t?.state===`recording`&&(ut.current=!0,s(t))},[]),er=S(()=>{if(!(!q.current||J.current)){if(Ln(),I(),ke(),ct.current=Date.now(),W(`listening`),en.current){let e=()=>{if(!(!q.current||J.current)){if(en.current){window.setTimeout(e,70);return}Y.current=!1,qn()}};window.setTimeout(e,70);return}Y.current=!1,qn()}},[qn,I,Ln,ke]),tr=S(async()=>{if(!(Vt.current||Ht.current)&&!(!q.current||J.current))try{let e=await navigator.mediaDevices.getUserMedia({audio:Pt($t.current)});if(!q.current||J.current||X.current||Vt.current||!nn.current&&rn.current!==`processing`){e.getTracks().forEach(e=>e.stop());return}Vt.current=e,Ut.current=0,Kt.current=0,qt.current=0;let t=()=>{if(Z.current)return;I(),ke(),an.current+=1,ct.current=Date.now(),Y.current=!1,W(`listening`);let t=_(e);Z.current=t,Wt.current=[],Gt.current=performance.now(),Kt.current=0,t.ondataavailable=e=>{e.data.size>0&&Wt.current.push(e.data)},t.onstop=async()=>{let e=Wt.current,n=qt.current,r=t.mimeType||`audio/webm`;Z.current=null,Wt.current=[],Ln(),q.current&&await Kn(new Blob(e,{type:r}),n,qn,`barge`,Math.max(0,(performance.now()-Gt.current)/1e3))},t.start(250)},n=u({speechToNoiseRatio:3.2});Ht.current=Nt(e,(e,r)=>{let i=n.observe(e);if(qt.current=Math.max(qt.current,e),r-Rt.current>90&&(Rt.current=r,Re(e)),i.speech)Ut.current||(Ut.current=r),r-Ut.current>=280&&t(),Kt.current=0;else if(Z.current&&i.quiet){Kt.current||(Kt.current=r);let e=r-Kt.current,t=r-Gt.current;e>=i.endOfSpeechDelayMs&&t>=550&&Z.current.state===`recording`&&s(Z.current)}else Z.current&&r-Gt.current>=_t&&Z.current.state===`recording`?s(Z.current):(Ut.current=0,Kt.current=0)}),Ht.current||Ln()}catch{}},[Kn,qn,I,Ln,ke]);C(()=>{if(!(G&&!Fe&&!V&&!Q&&(Ze||U===`processing`))){Ln();return}let e=window.setTimeout(()=>void tr(),250);return()=>window.clearTimeout(e)},[Ze,V,tr,Ln,G,Fe,U,Q]);let nr=G&&!Fe&&(g||v||U===`processing`);C(()=>{!G||Fe||v&&W(`speaking`)},[v,G,Fe]),C(()=>{if(!G||Fe||!Y.current||g||v||![`processing`,`speaking`,`noise`,`misunderstood`].includes(U))return;let e=window.setTimeout(()=>{!q.current||J.current||en.current||(Y.current=!1,qn())},700);return()=>window.clearTimeout(e)},[v,g,qn,G,Fe,U]),C(()=>()=>$(),[$]);let[rr,ir]=E(``),ar=T(!1);C(()=>{if(ar.current&&!g){let e=[...p].reverse().find(e=>e.role===`assistant`&&!e.streaming&&!e.pending&&e.content);e&&ir(e.content)}ar.current=g},[g,p]),ee(()=>{if(!a)return;let e=it.current,t=dn||pn?e?.querySelector(`.cf-confirm__card`):gn?e?.querySelector(`.cf-history`):null;if(!t)return;let n=t.getRootNode(),r=`activeElement`in n?n.activeElement:document.activeElement;(!r||!t.contains(r))&&t.querySelector(`button, [href], textarea, input, [tabindex]:not([tabindex="-1"])`)?.focus()},[pn,dn,a,gn]),C(()=>{if(!a)return;let e=it.current,t=dn||pn?e?.querySelector(`.cf-confirm__card`):gn?e?.querySelector(`.cf-history`):null,n=e?.querySelectorAll(`:scope > .cf-header, :scope > .cf-panel__video, :scope > .cf-panel__chat`);n?.forEach(e=>{t?(e.setAttribute(`inert`,``),e.setAttribute(`aria-hidden`,`true`)):(e.removeAttribute(`inert`),e.removeAttribute(`aria-hidden`))}),t||requestAnimationFrame(()=>e?.querySelector(`.cf-textarea`)?.focus());let r=e=>{if(e.key===`Escape`){e.preventDefault();let t=bn.current;if(t.confirmEnd){fn(!1);return}if(t.confirmClear){mn(!1);return}if(t.showHistory){_n(!1);return}En();return}if(e.key!==`Tab`||!t)return;let n=t.querySelectorAll(`button, [href], textarea, input, [tabindex]:not([tabindex="-1"])`),r=Array.from(n).filter(e=>!e.hasAttribute(`disabled`));if(r.length===0)return;let i=r[0],a=r[r.length-1],o=t.getRootNode()instanceof ShadowRoot?t.getRootNode().activeElement:document.activeElement;e.shiftKey&&o===i?(e.preventDefault(),a.focus()):!e.shiftKey&&o===a&&(e.preventDefault(),i.focus())};return e?.addEventListener(`keydown`,r),()=>{e?.removeEventListener(`keydown`,r),n?.forEach(e=>{e.removeAttribute(`inert`),e.removeAttribute(`aria-hidden`)})}},[a,En,dn,pn,gn]),C(()=>{let e=it.current;e&&(a?e.removeAttribute(`inert`):e.setAttribute(`inert`,``))},[a]);let or=t.accentColor??t.themeTokens?.accent??c?.accentColor,sr=t.themeTokens?.accentText??ht(or,t.themeTokens?.background??(Je===`dark`?`#0f1c27`:`#ffffff`)),cr={zIndex:t.zIndex,"--cf-h-pad":`${t.horizontalPadding}px`,"--cf-v-pad":`${t.verticalPadding}px`,...sr?{"--cf-accent-ink":sr}:{},...t.themeTokens?.accentStrong?{"--cf-accent-2":t.themeTokens.accentStrong}:{},...t.themeTokens?.background?{"--cf-bg":t.themeTokens.background}:{},...t.themeTokens?.surface?{"--cf-surface":t.themeTokens.surface}:{},...t.themeTokens?.surfaceMuted?{"--cf-surface-2":t.themeTokens.surfaceMuted}:{},...t.themeTokens?.text?{"--cf-text":t.themeTokens.text}:{},...t.themeTokens?.mutedText?{"--cf-muted":t.themeTokens.mutedText}:{},...t.themeTokens?.border?{"--cf-border":t.themeTokens.border}:{},...t.themeTokens?.shadow?{"--cf-shadow":t.themeTokens.shadow}:{},...t.themeTokens?.radius?{"--cf-radius":t.themeTokens.radius}:{},...t.themeTokens?.fontFamily?{"--cf-font":t.themeTokens.fontFamily}:{},...t.themeTokens?.success?{"--cf-success":t.themeTokens.success}:{},...t.themeTokens?.warning?{"--cf-warning":t.themeTokens.warning}:{},...t.themeTokens?.danger?{"--cf-danger":t.themeTokens.danger}:{},...or?{"--cf-accent":or,"--cf-accent-2":t.themeTokens?.accentStrong??`color-mix(in oklab, ${or} 76%, #14141f)`}:{}},lr=e=>P(e),ur=[...p].reverse().find(e=>e.role===`user`&&e.content.trim())?.content??``,dr=p.some(e=>e.role===`user`),fr=c?.talkbackMode===`avatar`||c?.widgetModule===`assistant`||!!c?.allowVoiceInput,pr=!Q&&fr&&!dr?Cn.filter((e,t)=>!(t===0&&e.role===`assistant`)):Cn,mr=x===`human`&&w?w:c?.agentName??i.chatName,hr=x===`human`?i.liveSupport:x===`queued`?i.waitingForTeam:c?.offline?i.statusOffline:i.statusOnline,gr=!V&&!Q?c?.availableActions:void 0,_r=!V&&!Q?c?.actions:void 0,vr=G&&U===`connecting`&&!Q;return O(f,{value:i,children:k(`div`,{class:`cf-root`,"data-theme":Je,"data-align":t.alignment,"data-display":`floating`,style:cr,children:[ze&&a&&O(`div`,{class:`cf-theater-backdrop`,onClick:Hn}),k(`div`,{ref:it,class:`cf-panel ${a?`is-open`:``} ${G?`cf-panel--call`:``} ${vr?`cf-panel--voice-connecting`:``} ${ze&&a?`cf-panel--theater`:``} ${wn?`cf-panel--analytics-focus`:``}`,role:`dialog`,"aria-modal":`false`,"aria-label":`${i.chatName}: ${c?.agentName??i.assistantName}`,"aria-hidden":!a,children:[k(`div`,{class:`cf-header`,children:[O(Me,{persona:c,hideWhenMissing:!0}),k(`div`,{class:`cf-header__meta`,children:[O(`div`,{class:`cf-header__name`,children:mr}),O(`div`,{class:`cf-header__status ${x===`ai`&&c?.offline?`cf-header__status--offline`:``}`,children:O(`span`,{class:`cf-header__status-text`,children:hr})})]}),k(`div`,{class:`cf-header__actions`,children:[Ce.length>0&&O(`button`,{type:`button`,class:`cf-header__btn`,"aria-label":i.pastConversations,title:i.pastConversations,"aria-pressed":gn,onClick:()=>_n(e=>!e),children:O(pe,{})}),dr&&!V&&!Q&&O(`button`,{type:`button`,class:`cf-header__btn`,"aria-label":i.endChat,title:i.endChat,onClick:On,children:O(fe,{})}),t.sound&&Qe&&O(`button`,{type:`button`,class:`cf-header__btn`,"aria-label":K?i.unmuteSounds:i.muteSounds,"aria-pressed":K,onClick:tt,children:O(K?oe:ae,{})}),O(`button`,{type:`button`,class:`cf-header__btn cf-header__close`,"aria-label":i.closeChat,onClick:En,children:O(N,{})})]})]}),O(`div`,{class:`cf-panel__video`,children:wn?O(`div`,{class:`cf-analytics-focus`,role:`region`,"aria-label":i.expandedAnalyticsResult,children:O(rt,{visualization:wn,expanded:!0,onClose:Vn})}):!Q&&fr?O(Ne,{persona:c,starters:[],onPick:P,onFocusComposer:Jn,speaking:v,voiceState:U,replyPending:G&&g&&!v,pinned:!0,muted:Fe,onToggleMute:Yn,onEndCall:$,onTalkNow:er,showTalkNow:nr,micLevel:Le,theaterMode:ze,onToggleTheater:zn,onMinimize:En,audioDevices:Ue,selectedAudioDeviceId:Ge,onSelectAudioDevice:$n,connectingOnly:vr}):null}),!vr&&k(`div`,{class:`cf-panel__chat`,children:[t.preview&&O(`div`,{class:`cf-preview-banner`,children:i.previewBanner}),Q&&O(`div`,{class:`cf-viewing-banner`,children:i.viewingPast}),k(`div`,{class:`cf-body`,ref:ot,role:`log`,onScroll:Mn,children:[pr.map((e,t)=>O(nt,{msg:e,persona:c,isLast:!Q&&t===pr.length-1,visitor:y,hasEmail:b,lastQuestion:ur,showActions:!Q&&t===pr.length-1&&!!e.handoffOffered,onPickReply:lr,onSubmitForm:le,onDemoSlots:B,onRetry:re,ratable:!Q&&pr.slice(0,t).some(e=>e.role===`user`),onRate:L,onExpandVisualization:Q?void 0:Bn},e.id)),!dr&&!Q&&k(D,{children:[pr.length===0&&O(ft,{name:c?.agentName??i.assistantName,greeting:c?.greeting}),O($e,{items:te,onPick:P}),O(et,{items:j})]}),cn&&k(`button`,{type:`button`,class:`cf-newmsg`,onClick:Nn,children:[O(ye,{}),i.newMessages]})]}),O(`div`,{class:`cf-sr-live`,"aria-live":`polite`,"aria-atomic":`true`,children:rr}),g&&!V&&!Q&&O(`div`,{class:`cf-stopbar`,children:k(`button`,{type:`button`,class:`cf-stop`,onClick:I,children:[O(ue,{}),i.stop]})}),Q?O(`div`,{class:`cf-ended`,children:O(`button`,{type:`button`,class:`cf-ended__btn`,onClick:De,children:i.backToChat})}):V?k(`div`,{class:`cf-ended`,children:[O(`p`,{class:`cf-ended__text`,children:i.conversationEnded}),t.csat&&dr?xn?O(`p`,{class:`cf-ended__text`,children:i.feedbackThanks}):k(`div`,{class:`cf-csat`,children:[O(`span`,{class:`cf-csat__q`,children:i.csatPrompt}),O(`button`,{type:`button`,class:`cf-csat__btn`,"aria-label":i.feedbackHelpful,onClick:()=>{ce(`up`),Sn(!0)},children:O(me,{})}),O(`button`,{type:`button`,class:`cf-csat__btn`,"aria-label":i.feedbackNotHelpful,onClick:()=>{ce(`down`),Sn(!0)},children:O(he,{})})]}):null,O(`button`,{type:`button`,class:`cf-ended__btn`,onClick:An,children:i.startNewChat})]}):k(D,{children:[A?O(`div`,{class:`cf-live-typing`,"aria-live":`polite`,children:h(i.agentTyping,{name:A})}):null,gr&&gr.length>0&&O(`div`,{class:`cf-footer-actions`,children:O(Xe,{actions:gr,descriptors:_r,visitor:y,onSubmitForm:le,onDemoSlots:B,scheduler:c?.scheduler,translations:t.actionTranslations})},`footer-actions`),O(dt,{draftStore:yn,onSend:P,onSendGif:ne,onTyping:F,disabled:g,allowVoice:!!c?.allowVoiceInput,onTranscribe:de,gifEnabled:ve,onSearchGifs:_e,allowAttach:t.attachments,onExtract:ge},`composer`)]}),!V&&c?.disclaimerText&&O(`div`,{class:`cf-disclaimer`,children:c.disclaimerText}),k(`div`,{class:`cf-footer`,children:[O(`button`,{type:`button`,class:`cf-footer__privacy`,"aria-label":i.clearDeviceData,onClick:()=>mn(!0),children:i.privacyAndData}),O(`span`,{"aria-hidden":`true`,children:`·`}),i.poweredBy,` `,O(`a`,{href:`https://accurix.tech/centrinfo`,target:`_blank`,rel:`noopener noreferrer`,children:`Centrinfo`})]})]}),dn&&O(`div`,{class:`cf-confirm`,onClick:()=>fn(!1),children:k(`div`,{class:`cf-confirm__card`,role:`alertdialog`,"aria-modal":`true`,"aria-label":i.endChatConfirm,onClick:e=>e.stopPropagation(),onKeyDownCapture:e=>pt(e,e.currentTarget,()=>fn(!1)),children:[O(`div`,{class:`cf-confirm__title`,children:i.endChatConfirm}),O(`div`,{class:`cf-confirm__body`,children:i.endChatConfirmBody}),k(`div`,{class:`cf-confirm__actions`,children:[O(`button`,{ref:hn,type:`button`,class:`cf-confirm__btn cf-confirm__btn--cancel`,onClick:()=>fn(!1),children:i.cancel}),O(`button`,{type:`button`,class:`cf-confirm__btn cf-confirm__btn--danger`,onClick:kn,children:i.endConfirmCta})]})]})},`confirm-end`),gn&&O(`div`,{class:`cf-confirm`,onClick:()=>_n(!1),children:k(`div`,{class:`cf-history`,role:`dialog`,"aria-modal":`true`,"aria-label":i.pastConversations,onClick:e=>e.stopPropagation(),onKeyDownCapture:e=>pt(e,e.currentTarget,()=>_n(!1)),children:[k(`div`,{class:`cf-history__head`,children:[O(`span`,{children:i.pastConversations}),O(`button`,{type:`button`,class:`cf-header__btn`,"aria-label":i.closeHistory,onClick:()=>_n(!1),children:O(N,{})})]}),O(`div`,{class:`cf-history__list`,children:Ce.map(e=>k(`button`,{type:`button`,class:`cf-history__item ${e.sessionId===we?`is-active`:``}`,onClick:()=>{Ee(e.sessionId),_n(!1)},children:[O(`span`,{class:`cf-history__title`,children:e.title}),k(`span`,{class:`cf-history__meta`,children:[new Date(e.ts).toLocaleDateString(void 0,{month:`short`,day:`numeric`}),e.ended?` · ${i.historyEnded}`:``]})]},e.sessionId))}),O(`div`,{class:`cf-history__footer`,children:O(`button`,{type:`button`,class:`cf-history__clear`,onClick:()=>{_n(!1),mn(!0)},children:i.clearDeviceData})})]})},`history`),pn&&O(`div`,{class:`cf-confirm`,onClick:()=>mn(!1),children:k(`div`,{class:`cf-confirm__card`,role:`alertdialog`,"aria-modal":`true`,"aria-label":i.clearDeviceData,onClick:e=>e.stopPropagation(),onKeyDownCapture:e=>pt(e,e.currentTarget,()=>mn(!1)),children:[O(`div`,{class:`cf-confirm__title`,children:i.clearDeviceData}),O(`div`,{class:`cf-confirm__body`,children:i.clearDeviceDataBody}),k(`div`,{class:`cf-confirm__actions`,children:[O(`button`,{type:`button`,class:`cf-confirm__btn cf-confirm__btn--cancel`,onClick:()=>mn(!1),children:i.cancel}),O(`button`,{type:`button`,class:`cf-confirm__btn cf-confirm__btn--danger`,onClick:()=>{mn(!1),Oe()},children:i.clearDeviceDataCta})]})]})},`confirm-clear`)]}),G&&!a?O(lt,{persona:c,voiceState:U,muted:Fe,onToggleMute:Yn,onEndCall:$,micLevel:Le,onExpand:Tn}):ze&&a?null:!t.hideDefaultLauncher&&k(`button`,{ref:at,type:`button`,class:`cf-launcher`,"aria-label":a?i.closeChat:Ae>0?`${i.openChat}. ${Ae===1?i.unreadMessage:h(i.unreadMessages,{count:String(Ae)})}`:i.openChat,"aria-expanded":a,onClick:Dn,children:[t.launcherIcon?O(`img`,{class:`cf-launcher__img`,src:t.launcherIcon,alt:``}):O(M,{}),!a&&Ae>0&&O(`span`,{class:`cf-launcher__badge`,"aria-hidden":`true`,children:Ae>99?`99+`:Ae})]})]})})},It=`
2
- :host {
3
- all: initial;
4
- }
5
- .cf-root {
6
- --cf-accent: #2f7f55;
7
- --cf-accent-2: #2f7de8;
8
- --cf-accent-ink: #ffffff;
9
- --cf-bg: #ffffff;
10
- --cf-surface: #f4f6f8;
11
- --cf-surface-2: #eef1f4;
12
- --cf-text: #0f1e2a;
13
- --cf-muted: #5b7186;
14
- --cf-border: #e4e9ee;
15
- --cf-danger: #b42318;
16
- --cf-shadow: 0 12px 48px -12px rgba(15, 30, 42, 0.4), 0 4px 12px -4px rgba(15, 30, 42, 0.2);
17
- --cf-radius: 18px;
18
- --cf-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
19
-
20
- position: fixed;
21
- bottom: 0;
22
- right: 0;
23
- font-family: var(--cf-font);
24
- font-size: 14px;
25
- line-height: 1.45;
26
- color: var(--cf-text);
27
- -webkit-font-smoothing: antialiased;
28
- }
29
- .cf-root[data-theme='dark'] {
30
- --cf-accent-ink: #ffffff;
31
- --cf-bg: #0f1c27;
32
- --cf-surface: #1a2a37;
33
- --cf-surface-2: #213442;
34
- --cf-text: #eef3f7;
35
- --cf-muted: #93a7b6;
36
- --cf-border: #2a3d4c;
37
- --cf-shadow: 0 12px 48px -12px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
38
- }
39
- .cf-root *,
40
- .cf-root *::before,
41
- .cf-root *::after {
42
- box-sizing: border-box;
43
- }
44
- /* :where() keeps this reset at ZERO added specificity, so component button
45
- styles (.cf-launcher, .cf-send, .cf-chip, .cf-action) win over it. Without
46
- it, ".cf-root button" (class+element) out-specifies ".cf-launcher" (class)
47
- and silently wipes every button background — the launcher rendered white. */
48
- .cf-root :where(button) {
49
- font-family: inherit;
50
- cursor: pointer;
51
- border: none;
52
- background: none;
53
- padding: 0;
54
- color: inherit;
55
- }
56
-
57
- /* ---------- Launcher ---------- */
58
- .cf-launcher {
59
- position: fixed;
60
- bottom: var(--cf-v-pad, 20px);
61
- right: var(--cf-h-pad, 20px);
62
- z-index: 1;
63
- /* The host element is pointer-events: none so it can't swallow
64
- clicks on host-page UI behind it (see mount.tsx). Re-enable here
65
- on the only two visible surfaces (launcher + panel) so they DO
66
- receive clicks where they're actually drawn. */
67
- pointer-events: auto;
68
- width: 60px;
69
- height: 60px;
70
- border-radius: 50%;
71
- background: linear-gradient(135deg, var(--cf-accent, #2f7f55) 0%, var(--cf-accent-2, #2f7de8) 140%);
72
- color: var(--cf-accent-ink);
73
- display: grid;
74
- place-items: center;
75
- box-shadow: 0 8px 24px -6px rgba(15, 30, 42, 0.45);
76
- transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
77
- animation: cf-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
78
- }
79
- .cf-launcher:hover {
80
- transform: scale(1.06);
81
- box-shadow: 0 12px 28px -6px rgba(15, 30, 42, 0.5);
82
- }
83
- .cf-launcher:active {
84
- transform: scale(0.95);
85
- }
86
- .cf-launcher:focus-visible {
87
- outline: 3px solid var(--cf-accent-2);
88
- outline-offset: 3px;
89
- }
90
- .cf-launcher svg {
91
- width: 30px;
92
- height: 30px;
93
- transition: transform 0.25s ease, opacity 0.2s ease;
94
- }
95
- /* Custom org logo in the launcher (config.launcherIcon). */
96
- .cf-launcher__img {
97
- width: 34px;
98
- height: 34px;
99
- border-radius: 50%;
100
- object-fit: cover;
101
- }
102
- .cf-launcher__badge {
103
- position: absolute;
104
- top: -2px;
105
- right: -2px;
106
- min-width: 20px;
107
- height: 20px;
108
- padding: 0 5px;
109
- border-radius: 10px;
110
- background: #f25767;
111
- color: #fff;
112
- font-size: 11px;
113
- font-weight: 700;
114
- display: grid;
115
- place-items: center;
116
- box-shadow: 0 0 0 2px var(--cf-bg);
117
- animation: cf-badge-pop 0.3s ease both;
118
- }
119
-
120
- /* ---------- Panel ---------- */
121
- .cf-panel {
122
- position: fixed;
123
- /* Pair to .cf-launcher's pointer-events: auto — the host element
124
- itself is pointer-events: none, so each visible surface re-enables. */
125
- pointer-events: auto;
126
- bottom: var(--cf-v-pad, 20px);
127
- right: var(--cf-h-pad, 20px);
128
- /* Above the launcher so the open chat covers it (no second button showing). */
129
- z-index: 2;
130
- width: 384px;
131
- max-width: calc(100vw - 32px);
132
- height: min(88vh, 820px);
133
- min-height: 560px;
134
- max-height: calc(100vh - 40px);
135
- background: var(--cf-bg);
136
- border-radius: var(--cf-radius);
137
- box-shadow: var(--cf-shadow);
138
- /* Grid (not flex) so theater mode below can reflow header/video/chat into a
139
- two-column split purely in CSS, without reordering the DOM. */
140
- display: grid;
141
- grid-template-columns: 1fr;
142
- grid-template-rows: auto auto minmax(0, 1fr);
143
- grid-template-areas: 'header' 'video' 'chat';
144
- overflow: hidden;
145
- transform-origin: bottom right;
146
- opacity: 0;
147
- transform: scale(0.94);
148
- pointer-events: none;
149
- transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
150
- height 0.28s ease, width 0.28s ease;
151
- }
152
- .cf-panel.is-open {
153
- opacity: 1;
154
- transform: scale(1);
155
- pointer-events: auto;
156
- }
157
-
158
- .cf-panel > .cf-header { grid-area: header; }
159
- /* Stacked ABOVE .cf-panel__chat (which sits right below it in the docked
160
- layout) so the call bar's popover — which opens downward and overlaps
161
- that space — paints over the transcript instead of getting interleaved
162
- with message bubbles underneath it. */
163
- .cf-panel__video {
164
- grid-area: video;
165
- position: relative;
166
- z-index: 5;
167
- min-width: 0;
168
- }
169
- .cf-panel__chat {
170
- grid-area: chat;
171
- display: flex;
172
- flex-direction: column;
173
- min-height: 0;
174
- min-width: 0;
175
- }
176
- /* A live voice call gets more room for the transcript underneath the avatar card. */
177
- .cf-panel.cf-panel--call {
178
- height: min(90vh, 840px);
179
- }
180
- .cf-panel.cf-panel--voice-connecting {
181
- height: min(72vh, 560px);
182
- min-height: 420px;
183
- grid-template-rows: auto minmax(0, 1fr);
184
- grid-template-areas: 'header' 'video';
185
- }
186
- .cf-panel--voice-connecting .cf-panel__video {
187
- display: grid;
188
- min-height: 0;
189
- }
190
- /* Expanded "theater" view — video and chat side by side in a large centered
191
- modal instead of the corner bubble. Only reachable from an active call's
192
- expand button, so it never applies below the existing mobile breakpoint. */
193
- @media (min-width: 640px) {
194
- .cf-panel.cf-panel--theater {
195
- inset: 0;
196
- margin: auto;
197
- width: min(1040px, calc(100vw - 48px));
198
- height: min(760px, calc(100vh - 48px));
199
- max-width: none;
200
- max-height: none;
201
- grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
202
- grid-template-rows: auto minmax(0, 1fr);
203
- grid-template-areas: 'header header' 'video chat';
204
- }
205
- .cf-panel.cf-panel--theater.is-open {
206
- transform: none;
207
- }
208
- .cf-panel--theater .cf-panel__video { height: 100%; }
209
- .cf-panel--theater .cf-assistant-card--pinned {
210
- height: 100%;
211
- margin: 0;
212
- padding: 0;
213
- border: 0;
214
- border-right: 1px solid var(--cf-border);
215
- }
216
- .cf-panel--theater .cf-assistant-card--pinned .cf-assistant-card__stage {
217
- height: 100%;
218
- border-radius: 0;
219
- }
220
- .cf-panel--theater .cf-assistant-card__media--generated .cf-assistant-card__face {
221
- width: min(220px, 38vw);
222
- height: min(220px, 38vw);
223
- }
224
- .cf-panel--theater .cf-assistant-card__media--generated .cf-assistant-card__initials {
225
- font-size: clamp(42px, 7vw, 76px);
226
- transform: translateY(-14px);
227
- }
228
- .cf-panel--theater .cf-assistant-card__media--generated .cf-assistant-card__eye {
229
- top: 43%;
230
- width: 11px;
231
- height: 11px;
232
- }
233
- .cf-panel--theater .cf-assistant-card__media--generated .cf-assistant-card__eye--left { left: 34%; }
234
- .cf-panel--theater .cf-assistant-card__media--generated .cf-assistant-card__eye--right { right: 34%; }
235
- .cf-panel--theater .cf-assistant-card__media--generated .cf-assistant-card__mouth {
236
- bottom: 27%;
237
- width: 52px;
238
- height: 8px;
239
- }
240
- .cf-panel--theater .cf-avatar-wave {
241
- bottom: 92px;
242
- }
243
- /* The call bar sits near the BOTTOM of the full-height theater video pane
244
- (vs. near the top of the short docked card), so its popover flips to
245
- open upward here — there's room above it, none below. */
246
- .cf-panel--theater .cf-call-menu {
247
- top: auto;
248
- bottom: calc(100% + 8px);
249
- }
250
- }
251
- .cf-theater-backdrop {
252
- position: fixed;
253
- inset: 0;
254
- z-index: 1;
255
- background: rgba(10, 14, 20, 0.55);
256
- pointer-events: auto;
257
- }
258
-
259
- /* Left-aligned messenger (alignment: 'left') — dock to the left edge. */
260
- .cf-root[data-align='left'] .cf-launcher { right: auto; left: var(--cf-h-pad, 20px); }
261
- .cf-root[data-align='left'] .cf-panel { right: auto; left: var(--cf-h-pad, 20px); transform-origin: bottom left; }
262
-
263
- /* ---------- Header ---------- */
264
- .cf-header {
265
- position: relative;
266
- padding: 16px 14px 18px 18px;
267
- background: linear-gradient(135deg, var(--cf-accent, #2f7f55) 0%, var(--cf-accent-2, #2f7de8) 150%);
268
- color: var(--cf-accent-ink);
269
- display: flex;
270
- align-items: center;
271
- gap: 10px;
272
- flex-shrink: 0;
273
- }
274
- .cf-header__avatar {
275
- width: 42px;
276
- height: 42px;
277
- border-radius: 50%;
278
- background: rgba(255, 255, 255, 0.18);
279
- display: grid;
280
- place-items: center;
281
- font-weight: 700;
282
- font-size: 17px;
283
- overflow: hidden;
284
- flex-shrink: 0;
285
- box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
286
- }
287
- .cf-header__avatar img {
288
- width: 100%;
289
- height: 100%;
290
- object-fit: cover;
291
- }
292
- .cf-header__avatar[class*='cf-avatar-preset--'],
293
- .cf-msg__avatar[class*='cf-avatar-preset--'] {
294
- background: linear-gradient(135deg, var(--cf-avatar-a, var(--cf-accent)), var(--cf-avatar-b, var(--cf-accent-2)));
295
- }
296
- .cf-header__meta {
297
- min-width: 0;
298
- flex: 1 1 auto;
299
- }
300
- .cf-header__name {
301
- font-weight: 700;
302
- font-size: 16px;
303
- letter-spacing: -0.2px;
304
- white-space: nowrap;
305
- overflow: hidden;
306
- text-overflow: ellipsis;
307
- }
308
- .cf-header__status {
309
- display: flex;
310
- align-items: center;
311
- gap: 6px;
312
- font-size: 12.5px;
313
- opacity: 0.9;
314
- margin-top: 1px;
315
- min-width: 0;
316
- }
317
- .cf-header__status::before {
318
- content: '';
319
- width: 7px;
320
- height: 7px;
321
- border-radius: 50%;
322
- background: #7ee2a8;
323
- box-shadow: 0 0 0 2px rgba(126, 226, 168, 0.3);
324
- flex-shrink: 0;
325
- }
326
- /* Keep the status on one line — the icons no longer squeeze it to wrap. */
327
- .cf-header__status-text {
328
- white-space: nowrap;
329
- overflow: hidden;
330
- text-overflow: ellipsis;
331
- }
332
- /* Action icons cluster tightly together, separated from the meta by the
333
- header gap, and never shrink (so the meta yields space first). */
334
- .cf-header__actions {
335
- display: flex;
336
- align-items: center;
337
- gap: 2px;
338
- flex-shrink: 0;
339
- }
340
- .cf-header__btn {
341
- width: 30px;
342
- height: 30px;
343
- border-radius: 8px;
344
- display: grid;
345
- place-items: center;
346
- color: var(--cf-accent-ink);
347
- opacity: 0.85;
348
- transition: background 0.15s ease, opacity 0.15s ease;
349
- flex-shrink: 0;
350
- }
351
- .cf-header__btn:hover {
352
- background: rgba(255, 255, 255, 0.16);
353
- opacity: 1;
354
- }
355
- .cf-header__btn svg {
356
- width: 17px;
357
- height: 17px;
358
- }
359
- .cf-header__btn:focus-visible {
360
- outline: 2px solid #fff;
361
- outline-offset: 1px;
362
- }
363
-
364
- /* Preview-mode banner (data-preview) — sample replies, no AI. */
365
- .cf-preview-banner {
366
- flex-shrink: 0;
367
- padding: 5px 12px;
368
- text-align: center;
369
- font-size: 11.5px;
370
- font-weight: 600;
371
- letter-spacing: 0.2px;
372
- color: #7a5b00;
373
- background: #fff3cd;
374
- border-bottom: 1px solid #ffe69c;
375
- }
376
- .cf-root[data-theme='dark'] .cf-preview-banner {
377
- color: #ffe08a;
378
- background: #3a3320;
379
- border-bottom-color: #4d4427;
380
- }
381
-
382
- /* ---------- Body / messages ---------- */
383
- .cf-body {
384
- flex: 1 1 0;
385
- min-height: 0;
386
- overflow-y: auto;
387
- /* Never scroll/shift horizontally — a long source pill or code line is
388
- clipped, not allowed to push the whole thread sideways. */
389
- overflow-x: hidden;
390
- padding: 12px 14px 8px;
391
- display: flex;
392
- flex-direction: column;
393
- gap: 12px;
394
- scroll-behavior: smooth;
395
- background: var(--cf-bg);
396
- }
397
- .cf-body::-webkit-scrollbar {
398
- width: 8px;
399
- }
400
- .cf-body::-webkit-scrollbar-thumb {
401
- background: var(--cf-border);
402
- border-radius: 4px;
403
- }
404
- .cf-empty-welcome {
405
- display: flex;
406
- flex-direction: column;
407
- gap: 5px;
408
- margin: 4px 0 2px;
409
- padding: 14px 14px 13px;
410
- border-radius: 18px;
411
- background:
412
- radial-gradient(circle at 14% 0%, color-mix(in oklab, var(--cf-accent) 20%, transparent), transparent 34%),
413
- linear-gradient(135deg, color-mix(in oklab, var(--cf-surface) 88%, var(--cf-bg)), var(--cf-bg));
414
- border: 1px solid color-mix(in oklab, var(--cf-border) 78%, var(--cf-accent));
415
- }
416
- .cf-empty-welcome__eyebrow {
417
- color: var(--cf-accent);
418
- font-size: 10px;
419
- font-weight: 800;
420
- letter-spacing: 0.11em;
421
- text-transform: uppercase;
422
- }
423
- .cf-empty-welcome h2 {
424
- margin: 0;
425
- color: var(--cf-text);
426
- font-size: 17px;
427
- line-height: 1.15;
428
- letter-spacing: -0.02em;
429
- }
430
- .cf-empty-welcome p {
431
- margin: 0;
432
- color: var(--cf-muted);
433
- font-size: 12.8px;
434
- line-height: 1.45;
435
- }
436
- .cf-msg {
437
- display: flex;
438
- gap: 8px;
439
- max-width: 100%;
440
- animation: cf-msg-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
441
- }
442
- .cf-msg--user {
443
- justify-content: flex-end;
444
- }
445
- .cf-msg--system {
446
- justify-content: center;
447
- margin: 4px 0;
448
- }
449
- .cf-msg__avatar {
450
- width: 26px;
451
- height: 26px;
452
- border-radius: 50%;
453
- background: linear-gradient(135deg, var(--cf-accent, #2f7f55), var(--cf-accent-2, #2f7de8));
454
- color: #fff;
455
- display: grid;
456
- place-items: center;
457
- font-size: 11px;
458
- font-weight: 700;
459
- flex-shrink: 0;
460
- overflow: hidden;
461
- align-self: flex-end;
462
- }
463
- .cf-msg__avatar img { width: 100%; height: 100%; object-fit: cover; }
464
- .cf-msg__bubble {
465
- padding: 10px 13px;
466
- border-radius: 16px;
467
- max-width: 100%;
468
- /* break-word (not anywhere) only breaks words too long to fit — so short
469
- words like "Hello" never split mid-word. */
470
- overflow-wrap: break-word;
471
- white-space: pre-wrap;
472
- font-size: 13.5px;
473
- }
474
- .cf-msg--agent .cf-msg__bubble {
475
- background: var(--cf-surface);
476
- border-bottom-left-radius: 5px;
477
- color: var(--cf-text);
478
- }
479
- .cf-msg--user .cf-msg__bubble {
480
- background: linear-gradient(135deg, var(--cf-accent, #2f7f55) 0%, var(--cf-accent-2, #2f7de8) 160%);
481
- color: var(--cf-accent-ink);
482
- border-bottom-right-radius: 5px;
483
- }
484
- .cf-msg__bubble a {
485
- color: inherit;
486
- text-decoration: underline;
487
- }
488
- .cf-msg__bubble strong { font-weight: 700; }
489
- .cf-msg__bubble p { margin: 0 0 8px; }
490
- .cf-msg__bubble p:last-child { margin-bottom: 0; }
491
- .cf-msg__col { min-width: 0; max-width: 85%; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
492
- .cf-msg--user .cf-msg__col { align-items: flex-end; }
493
- .cf-artifact {
494
- width: min(100%, 560px);
495
- overflow: hidden;
496
- margin: 0;
497
- border: 1px solid var(--cf-border);
498
- border-radius: 12px;
499
- background: var(--cf-surface);
500
- }
501
- .cf-artifact figcaption { padding: 10px 12px 0; color: var(--cf-text); font-size: 12px; font-weight: 750; }
502
- .cf-artifact img { display: block; width: 100%; height: auto; margin-top: 9px; }
503
- .cf-artifact p { margin: 0 !important; padding: 8px 12px 10px; color: var(--cf-muted); font-size: 10px; }
504
- .cf-artifact-link {
505
- display: grid;
506
- width: min(100%, 560px);
507
- gap: 3px;
508
- border: 1px solid var(--cf-border);
509
- border-radius: 10px;
510
- background: var(--cf-surface);
511
- padding: 10px 12px;
512
- color: var(--cf-text);
513
- text-decoration: none;
514
- }
515
- .cf-artifact-link:hover { border-color: var(--cf-accent); }
516
- .cf-artifact-link span { color: var(--cf-muted); font-size: 10px; }
517
- .cf-system-event {
518
- width: min(280px, 88%);
519
- display: flex;
520
- flex-direction: column;
521
- align-items: center;
522
- gap: 4px;
523
- text-align: center;
524
- color: var(--cf-muted);
525
- }
526
- .cf-system-event__mark {
527
- width: 7px;
528
- height: 7px;
529
- border-radius: 999px;
530
- background: color-mix(in srgb, var(--cf-accent, #2f7f55) 72%, transparent);
531
- box-shadow: 0 0 0 4px color-mix(in srgb, var(--cf-accent, #2f7f55) 12%, transparent);
532
- }
533
- .cf-system-event__text {
534
- max-width: 100%;
535
- padding: 7px 11px;
536
- border: 1px solid var(--cf-border);
537
- border-radius: 999px;
538
- background: color-mix(in srgb, var(--cf-surface, #ffffff) 86%, transparent);
539
- font-size: 12.5px;
540
- font-weight: 600;
541
- line-height: 1.35;
542
- color: var(--cf-muted);
543
- overflow-wrap: break-word;
544
- }
545
- .cf-system-event__time {
546
- font-size: 11px;
547
- line-height: 1.2;
548
- color: var(--cf-muted);
549
- }
550
-
551
- /* ---------- Markdown in answers ---------- */
552
- .cf-msg__bubble .cf-md-h {
553
- margin: 12px 0 5px;
554
- color: var(--cf-text);
555
- font-size: 14.5px;
556
- font-weight: 750;
557
- line-height: 1.3;
558
- }
559
- .cf-msg__bubble .cf-md-h:first-child { margin-top: 0; }
560
- .cf-msg__bubble .cf-md-h--1,
561
- .cf-msg__bubble .cf-md-h--2 { font-size: 15.5px; }
562
- .cf-msg__bubble p.cf-md-list-intro {
563
- margin: 11px 0 5px;
564
- color: var(--cf-text);
565
- font-weight: 750;
566
- line-height: 1.35;
567
- }
568
- .cf-msg__bubble ul.cf-md-list,
569
- .cf-msg__bubble ol.cf-md-list {
570
- display: grid;
571
- gap: 9px;
572
- margin: 8px 0 11px;
573
- padding: 0;
574
- list-style: none;
575
- }
576
- .cf-msg__bubble .cf-md-list li {
577
- position: relative;
578
- min-width: 0;
579
- padding-left: 18px;
580
- line-height: 1.52;
581
- }
582
- .cf-msg__bubble ul.cf-md-list > li::before {
583
- position: absolute;
584
- top: .58em;
585
- left: 2px;
586
- width: 6px;
587
- height: 6px;
588
- border-radius: 50%;
589
- background: var(--cf-accent);
590
- content: "";
591
- }
592
- .cf-msg__bubble ol.cf-md-list { counter-reset: cf-answer-item; }
593
- .cf-msg__bubble ol.cf-md-list > li { padding-left: 25px; counter-increment: cf-answer-item; }
594
- .cf-msg__bubble ol.cf-md-list > li::before {
595
- position: absolute;
596
- top: .08em;
597
- left: 0;
598
- display: grid;
599
- width: 19px;
600
- height: 19px;
601
- place-items: center;
602
- border-radius: 50%;
603
- color: var(--cf-accent);
604
- background: var(--cf-accent-soft);
605
- content: counter(cf-answer-item);
606
- font-size: 10px;
607
- font-weight: 750;
608
- }
609
- .cf-msg__bubble .cf-md-list li > strong:first-child {
610
- display: inline;
611
- color: var(--cf-text);
612
- font-weight: 750;
613
- }
614
- .cf-md-code {
615
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
616
- font-size: 0.86em;
617
- background: var(--cf-surface-2);
618
- padding: 1px 5px;
619
- border-radius: 5px;
620
- }
621
- .cf-msg--user .cf-md-code { background: rgba(255, 255, 255, 0.22); }
622
- .cf-md-pre {
623
- margin: 6px 0;
624
- padding: 10px 12px;
625
- background: var(--cf-surface-2);
626
- border: 1px solid var(--cf-border);
627
- border-radius: 10px;
628
- overflow-x: auto;
629
- }
630
- .cf-md-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; white-space: pre; color: var(--cf-text); }
631
- .cf-msg--user .cf-md-pre { background: rgba(0, 0, 0, 0.18); border-color: rgba(255, 255, 255, 0.18); }
632
- .cf-msg--user .cf-md-pre code { color: var(--cf-accent-ink); }
633
-
634
- /* streaming caret */
635
- .cf-caret {
636
- display: inline-block;
637
- width: 7px;
638
- height: 1em;
639
- margin-left: 2px;
640
- vertical-align: text-bottom;
641
- background: var(--cf-accent);
642
- border-radius: 1px;
643
- animation: cf-blink 1s step-end infinite;
644
- }
645
- @keyframes cf-blink {
646
- 0%, 100% { opacity: 1; }
647
- 50% { opacity: 0; }
648
- }
649
-
650
- /* message tools (copy / retry) */
651
- .cf-msg__actions { display: flex; align-items: flex-start; gap: 2px; }
652
- .cf-msg__tools { display: flex; gap: 6px; }
653
- .cf-tool {
654
- display: inline-flex;
655
- align-items: center;
656
- gap: 5px;
657
- font-size: 12px;
658
- color: var(--cf-muted);
659
- padding: 3px 7px;
660
- border-radius: 7px;
661
- opacity: 0.6;
662
- transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
663
- }
664
- .cf-msg:hover .cf-tool { opacity: 1; }
665
- .cf-tool:hover { background: var(--cf-surface); color: var(--cf-text); }
666
- .cf-tool svg { width: 13px; height: 13px; }
667
-
668
- /* Per-message 👍/👎 feedback. */
669
- .cf-feedback { margin-top: 0; }
670
- .cf-feedback__row { display: flex; align-items: center; gap: 4px; }
671
- .cf-feedback__btn {
672
- display: inline-flex;
673
- align-items: center;
674
- justify-content: center;
675
- width: 26px;
676
- height: 26px;
677
- border-radius: 7px;
678
- color: var(--cf-muted);
679
- opacity: 0.6;
680
- cursor: pointer;
681
- transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
682
- }
683
- .cf-msg:hover .cf-feedback__btn { opacity: 1; }
684
- .cf-feedback__btn:hover { background: var(--cf-surface); color: var(--cf-text); }
685
- .cf-feedback__btn.is-active { opacity: 1; color: var(--cf-accent); background: var(--cf-surface); }
686
- .cf-feedback__btn svg { width: 14px; height: 14px; }
687
- .cf-feedback__thanks { margin-left: 4px; font-size: 11.5px; color: var(--cf-muted); }
688
- .cf-feedback__comment { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 260px; }
689
- .cf-feedback__input {
690
- width: 100%;
691
- resize: none;
692
- font: inherit;
693
- font-size: 12.5px;
694
- line-height: 1.4;
695
- color: var(--cf-text);
696
- background: var(--cf-bg);
697
- border: 1px solid var(--cf-border);
698
- border-radius: 9px;
699
- padding: 7px 9px;
700
- box-sizing: border-box;
701
- }
702
- .cf-feedback__input:focus { outline: none; border-color: var(--cf-accent); }
703
- .cf-feedback__send {
704
- align-self: flex-end;
705
- font-size: 12px;
706
- font-weight: 600;
707
- color: var(--cf-accent-ink);
708
- background: var(--cf-accent);
709
- border: none;
710
- border-radius: 999px;
711
- padding: 5px 14px;
712
- cursor: pointer;
713
- transition: opacity 0.15s ease;
714
- }
715
- .cf-feedback__send:hover { opacity: 0.9; }
716
-
717
- /* conversation starters */
718
- .cf-starters {
719
- display: flex;
720
- flex-direction: column;
721
- align-items: flex-start;
722
- min-width: 0;
723
- gap: 8px;
724
- margin: 2px 0 4px 34px;
725
- }
726
- .cf-starter {
727
- max-width: 100%;
728
- padding: 8px 12px;
729
- border-radius: 14px;
730
- border: 1px solid var(--cf-border);
731
- background: var(--cf-bg);
732
- color: var(--cf-text);
733
- font-size: 12.8px;
734
- font-weight: 500;
735
- text-align: left;
736
- overflow-wrap: anywhere;
737
- transition: border-color 0.15s ease, transform 0.1s ease;
738
- }
739
- .cf-starter:hover { border-color: var(--cf-accent); }
740
- .cf-starter:active { transform: scale(0.98); }
741
- .cf-starter:focus-visible {
742
- outline: 2px solid var(--cf-accent-2);
743
- outline-offset: 2px;
744
- }
745
- .cf-featured-links {
746
- display: flex;
747
- flex-wrap: wrap;
748
- align-items: flex-start;
749
- min-width: 0;
750
- gap: 8px;
751
- margin: 2px 0 4px;
752
- }
753
- .cf-featured-link {
754
- flex: 0 1 auto;
755
- min-width: 0;
756
- max-width: 100%;
757
- display: inline-flex;
758
- align-items: center;
759
- gap: 7px;
760
- min-width: 0;
761
- min-height: 34px;
762
- padding: 7px 11px;
763
- border-radius: 999px;
764
- border: 1px solid color-mix(in srgb, var(--cf-accent) 55%, var(--cf-border));
765
- background: color-mix(in srgb, var(--cf-accent) 10%, var(--cf-bg));
766
- color: var(--cf-text);
767
- font-size: 13px;
768
- font-weight: 500;
769
- text-decoration: none;
770
- transition: border-color 0.15s ease, background-color 0.15s ease;
771
- }
772
- .cf-featured-link svg {
773
- width: 14px;
774
- height: 14px;
775
- flex: 0 0 14px;
776
- }
777
- .cf-featured-link svg {
778
- width: 14px;
779
- height: 14px;
780
- flex: 0 0 14px;
781
- color: var(--cf-accent);
782
- }
783
- .cf-featured-link span {
784
- min-width: 0;
785
- overflow: hidden;
786
- text-overflow: ellipsis;
787
- white-space: nowrap;
788
- }
789
- .cf-featured-link:hover {
790
- border-color: var(--cf-accent);
791
- background: color-mix(in srgb, var(--cf-accent) 16%, var(--cf-bg));
792
- }
793
- .cf-featured-link:focus-visible {
794
- outline: 2px solid var(--cf-accent-2);
795
- outline-offset: 2px;
796
- }
797
-
798
- /* stop generating */
799
- .cf-stopbar { display: flex; justify-content: center; padding: 6px 0 2px; flex-shrink: 0; }
800
- .cf-stop {
801
- display: inline-flex;
802
- align-items: center;
803
- gap: 6px;
804
- font-size: 12.5px;
805
- font-weight: 600;
806
- color: var(--cf-muted);
807
- background: var(--cf-bg);
808
- border: 1px solid var(--cf-border);
809
- border-radius: 999px;
810
- padding: 6px 14px;
811
- box-shadow: var(--cf-shadow);
812
- transition: border-color 0.15s ease, color 0.15s ease;
813
- }
814
- .cf-stop:hover { border-color: var(--cf-accent); color: var(--cf-text); }
815
- .cf-stop svg { width: 13px; height: 13px; }
816
-
817
- /* typing */
818
- .cf-typing {
819
- max-width: 100%;
820
- flex-wrap: wrap;
821
- display: inline-flex;
822
- align-items: center;
823
- gap: 4px;
824
- padding: 10px 13px;
825
- min-width: 98px;
826
- }
827
- .cf-typing__label {
828
- min-width: 0;
829
- overflow-wrap: anywhere;
830
- margin-right: 3px;
831
- color: var(--cf-muted);
832
- font-size: 12px;
833
- font-weight: 650;
834
- }
835
- .cf-typing__dot {
836
- width: 5px;
837
- height: 5px;
838
- border-radius: 50%;
839
- background: var(--cf-muted);
840
- animation: cf-typing 1.1s infinite ease-in-out;
841
- }
842
- .cf-typing__dot:nth-child(2) { animation-delay: 0.15s; }
843
- .cf-typing__dot:nth-child(3) { animation-delay: 0.3s; }
844
-
845
- /* sources */
846
- .cf-sources {
847
- display: flex;
848
- flex-wrap: wrap;
849
- gap: 6px;
850
- /* Tie the row to the message column so a long title can't widen the thread. */
851
- max-width: 100%;
852
- min-width: 0;
853
- }
854
- .cf-source {
855
- display: inline-flex;
856
- align-items: center;
857
- gap: 5px;
858
- padding: 5px 10px;
859
- border-radius: 999px;
860
- background: var(--cf-surface-2);
861
- border: 1px solid var(--cf-border);
862
- color: var(--cf-muted);
863
- font-size: 12px;
864
- text-decoration: none;
865
- max-width: 100%;
866
- min-width: 0;
867
- transition: border-color 0.15s ease, color 0.15s ease;
868
- }
869
- .cf-source:hover { color: var(--cf-text); border-color: var(--cf-accent); }
870
- .cf-source--more { color: var(--cf-muted); cursor: default; }
871
- .cf-source--more:hover { border-color: var(--cf-border); color: var(--cf-muted); }
872
- .cf-source svg { width: 12px; height: 12px; flex-shrink: 0; }
873
- .cf-source span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
874
-
875
- /* chips + actions */
876
- .cf-chips, .cf-actions {
877
- display: flex;
878
- flex-wrap: wrap;
879
- gap: 8px;
880
- }
881
- .cf-chip {
882
- padding: 8px 13px;
883
- border-radius: 999px;
884
- background: var(--cf-bg);
885
- border: 1.5px solid var(--cf-accent);
886
- color: var(--cf-accent);
887
- font-size: 13px;
888
- font-weight: 600;
889
- transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
890
- }
891
- .cf-root[data-theme='dark'] .cf-chip { color: var(--cf-text); border-color: var(--cf-border); }
892
- .cf-chip:hover { background: var(--cf-accent); color: var(--cf-accent-ink); }
893
- .cf-chip:active { transform: scale(0.97); }
894
- .cf-chip:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 2px; }
895
- .cf-action {
896
- display: inline-flex;
897
- align-items: center;
898
- gap: 7px;
899
- padding: 9px 14px;
900
- border-radius: 12px;
901
- background: var(--cf-surface);
902
- border: 1px solid var(--cf-border);
903
- color: var(--cf-text);
904
- font-size: 12.8px;
905
- font-weight: 600;
906
- transition: border-color 0.15s ease, transform 0.1s ease;
907
- }
908
- .cf-action:hover { border-color: var(--cf-accent); }
909
- .cf-action:active { transform: scale(0.98); }
910
- .cf-action svg { width: 15px; height: 15px; color: var(--cf-accent); }
911
-
912
- /* ---------- Inline forms + handoff card ---------- */
913
- .cf-action-shell {
914
- display: flex;
915
- flex-direction: column;
916
- gap: 8px;
917
- }
918
-
919
- .cf-form {
920
- display: flex;
921
- flex-direction: column;
922
- gap: 8px;
923
- width: 100%;
924
- max-width: 300px;
925
- padding: 12px;
926
- border-radius: 14px;
927
- border: 1px solid var(--cf-border);
928
- background: var(--cf-surface);
929
- animation: cf-msg-in 0.2s ease both;
930
- }
931
- .cf-form__title { font-size: 13.5px; font-weight: 700; color: var(--cf-fg, var(--cf-text)); }
932
- .cf-form__as { font-size: 12.5px; color: var(--cf-muted); margin-top: -2px; }
933
- .cf-form__input {
934
- width: 100%;
935
- padding: 9px 11px;
936
- border: 1.5px solid var(--cf-border);
937
- border-radius: 10px;
938
- background: var(--cf-bg);
939
- color: var(--cf-text);
940
- font-family: inherit;
941
- font-size: 14px;
942
- outline: none;
943
- resize: none;
944
- }
945
- .cf-form__input:focus { border-color: var(--cf-accent); }
946
- .cf-form__input::placeholder { color: var(--cf-muted); }
947
- .cf-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
948
- .cf-form__submit {
949
- padding: 8px 14px;
950
- border-radius: 10px;
951
- font-size: 13.5px;
952
- font-weight: 600;
953
- background: linear-gradient(135deg, var(--cf-accent, #2f7f55) 0%, var(--cf-accent-2, #2f7de8) 160%);
954
- color: var(--cf-accent-ink);
955
- transition: opacity 0.15s ease, transform 0.1s ease;
956
- }
957
- .cf-form__submit:disabled { opacity: 0.45; cursor: default; }
958
- .cf-form__submit:not(:disabled):active { transform: scale(0.97); }
959
- .cf-form__cancel { padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--cf-muted); }
960
- .cf-form__cancel:hover { color: var(--cf-text); }
961
- .cf-form__err { font-size: 12.5px; color: #f25767; }
962
- .cf-form--done {
963
- flex-direction: row;
964
- align-items: center;
965
- gap: 8px;
966
- font-size: 13.5px;
967
- color: var(--cf-text);
968
- }
969
- .cf-form--done svg { width: 18px; height: 18px; color: var(--cf-accent); flex-shrink: 0; }
970
- .cf-form--done { flex-wrap: wrap; }
971
- .cf-booking__link {
972
- display: inline-flex;
973
- align-items: center;
974
- gap: 4px;
975
- font-size: 13px;
976
- font-weight: 600;
977
- color: var(--cf-accent);
978
- text-decoration: none;
979
- flex-basis: 100%;
980
- }
981
- .cf-booking__link svg { width: 13px; height: 13px; }
982
- .cf-booking__link:hover { text-decoration: underline; }
983
-
984
- .cf-handoff {
985
- display: flex;
986
- flex-direction: column;
987
- gap: 8px;
988
- width: 100%;
989
- max-width: 300px;
990
- padding: 12px;
991
- border-radius: 14px;
992
- border: 1.5px solid var(--cf-accent);
993
- background: color-mix(in oklab, var(--cf-accent) 8%, var(--cf-bg));
994
- animation: cf-msg-in 0.2s ease both;
995
- }
996
- .cf-handoff__title { font-size: 13.5px; font-weight: 700; color: var(--cf-text); }
997
-
998
- /* ---------- Demo booking picker ---------- */
999
- .cf-booking { max-width: 320px; }
1000
- .cf-booking__hint { font-size: 12.5px; color: var(--cf-muted); margin-top: -2px; }
1001
- .cf-booking__dur { font-weight: 600; color: var(--cf-text); }
1002
- .cf-booking__state {
1003
- padding: 12px;
1004
- border: 1px dashed var(--cf-border);
1005
- border-radius: 10px;
1006
- background: var(--cf-bg-soft);
1007
- color: var(--cf-muted);
1008
- font-size: 12px;
1009
- line-height: 1.45;
1010
- text-align: center;
1011
- }
1012
- .cf-booking__dates {
1013
- display: flex;
1014
- gap: 6px;
1015
- overflow-x: auto;
1016
- padding-bottom: 4px;
1017
- scrollbar-width: thin;
1018
- }
1019
- .cf-booking__dates::-webkit-scrollbar { height: 5px; }
1020
- .cf-booking__dates::-webkit-scrollbar-thumb { background: var(--cf-border); border-radius: 3px; }
1021
- .cf-booking__date {
1022
- flex-shrink: 0;
1023
- display: flex;
1024
- flex-direction: column;
1025
- align-items: center;
1026
- gap: 1px;
1027
- width: 46px;
1028
- padding: 7px 0;
1029
- border-radius: 10px;
1030
- border: 1px solid var(--cf-border);
1031
- background: var(--cf-bg);
1032
- color: var(--cf-text);
1033
- transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
1034
- }
1035
- .cf-booking__date:hover { border-color: var(--cf-accent); }
1036
- .cf-booking__date:active { transform: scale(0.96); }
1037
- .cf-booking__date.is-selected {
1038
- border-color: var(--cf-accent);
1039
- background: color-mix(in oklab, var(--cf-accent) 14%, var(--cf-bg));
1040
- color: var(--cf-accent);
1041
- }
1042
- .cf-root[data-theme='dark'] .cf-booking__date.is-selected { color: var(--cf-text); }
1043
- .cf-booking__dow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--cf-muted); }
1044
- .cf-booking__date.is-selected .cf-booking__dow { color: inherit; }
1045
- .cf-booking__dom { font-size: 15px; font-weight: 700; line-height: 1.1; }
1046
- .cf-booking__slots {
1047
- display: grid;
1048
- grid-template-columns: repeat(3, 1fr);
1049
- gap: 6px;
1050
- max-height: 156px;
1051
- overflow-y: auto;
1052
- padding: 2px;
1053
- }
1054
- .cf-booking__slots::-webkit-scrollbar { width: 6px; }
1055
- .cf-booking__slots::-webkit-scrollbar-thumb { background: var(--cf-border); border-radius: 3px; }
1056
- .cf-booking__slot {
1057
- padding: 8px 0;
1058
- border-radius: 9px;
1059
- border: 1px solid var(--cf-border);
1060
- background: var(--cf-bg);
1061
- color: var(--cf-accent);
1062
- font-size: 13px;
1063
- font-weight: 600;
1064
- transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
1065
- }
1066
- .cf-root[data-theme='dark'] .cf-booking__slot { color: var(--cf-text); }
1067
- .cf-booking__slot:hover { border-color: var(--cf-accent); }
1068
- .cf-booking__slot:active { transform: scale(0.96); }
1069
- .cf-booking__slot.is-selected {
1070
- background: linear-gradient(135deg, var(--cf-accent, #2f7f55) 0%, var(--cf-accent-2, #2f7de8) 160%);
1071
- color: var(--cf-accent-ink);
1072
- border-color: var(--cf-accent);
1073
- }
1074
- .cf-booking__slot.is-taken,
1075
- .cf-booking__slot:disabled {
1076
- color: var(--cf-muted);
1077
- background: var(--cf-surface);
1078
- border-color: var(--cf-border);
1079
- text-decoration: line-through;
1080
- cursor: not-allowed;
1081
- opacity: 0.55;
1082
- }
1083
- .cf-booking__slot.is-taken:hover { border-color: var(--cf-border); }
1084
- .cf-handoff--done {
1085
- flex-direction: row;
1086
- align-items: center;
1087
- border-color: var(--cf-border);
1088
- background: var(--cf-surface);
1089
- font-size: 13.5px;
1090
- }
1091
- .cf-handoff--done svg { width: 18px; height: 18px; color: var(--cf-accent); flex-shrink: 0; }
1092
-
1093
- /* note (action confirmation) */
1094
- .cf-note {
1095
- align-self: center;
1096
- font-size: 12.5px;
1097
- color: var(--cf-muted);
1098
- background: var(--cf-surface);
1099
- padding: 7px 12px;
1100
- border-radius: 999px;
1101
- animation: cf-msg-in 0.3s ease both;
1102
- }
1103
-
1104
- /* ---------- Composer ---------- */
1105
- .cf-composer {
1106
- flex-shrink: 0;
1107
- padding: 10px 12px;
1108
- border-top: 1px solid var(--cf-border);
1109
- background: var(--cf-bg);
1110
- }
1111
- .cf-live-typing {
1112
- flex-shrink: 0;
1113
- padding: 8px 14px 0;
1114
- color: var(--cf-muted);
1115
- font-size: 12px;
1116
- background: var(--cf-bg);
1117
- }
1118
- .cf-composer__field {
1119
- display: flex;
1120
- align-items: flex-end;
1121
- gap: 6px;
1122
- background: var(--cf-surface);
1123
- border: 1.5px solid var(--cf-border);
1124
- border-radius: 14px;
1125
- padding: 6px 6px 6px 12px;
1126
- transition: border-color 0.15s ease;
1127
- }
1128
- .cf-composer__field:focus-within { border-color: var(--cf-accent); }
1129
- .cf-voice-state {
1130
- display: inline-flex;
1131
- align-items: center;
1132
- gap: 8px;
1133
- margin: 0 0 8px 2px;
1134
- color: var(--cf-muted);
1135
- font-size: 12.5px;
1136
- }
1137
- .cf-voice-state__dot {
1138
- width: 8px;
1139
- height: 8px;
1140
- border-radius: 999px;
1141
- background: var(--cf-accent);
1142
- }
1143
- .cf-voice-state__dot.is-live {
1144
- animation: cf-pulse 1s infinite;
1145
- }
1146
- .cf-textarea {
1147
- flex: 1;
1148
- border: none;
1149
- background: none;
1150
- resize: none;
1151
- outline: none;
1152
- font-family: inherit;
1153
- font-size: 14.5px;
1154
- color: var(--cf-text);
1155
- max-height: 110px;
1156
- line-height: 1.45;
1157
- padding: 6px 0;
1158
- }
1159
- .cf-textarea::placeholder { color: var(--cf-muted); }
1160
- .cf-iconbtn {
1161
- width: 36px;
1162
- height: 36px;
1163
- border-radius: 10px;
1164
- display: grid;
1165
- place-items: center;
1166
- flex-shrink: 0;
1167
- color: var(--cf-muted);
1168
- transition: background 0.15s ease, color 0.15s ease;
1169
- }
1170
- .cf-iconbtn:hover { background: var(--cf-surface-2); color: var(--cf-text); }
1171
- .cf-iconbtn:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 1px; }
1172
- .cf-iconbtn svg { width: 19px; height: 19px; }
1173
- .cf-send {
1174
- width: 36px;
1175
- height: 36px;
1176
- border-radius: 10px;
1177
- display: grid;
1178
- place-items: center;
1179
- flex-shrink: 0;
1180
- background: linear-gradient(135deg, var(--cf-accent, #2f7f55) 0%, var(--cf-accent-2, #2f7de8) 160%);
1181
- color: var(--cf-accent-ink);
1182
- transition: opacity 0.15s ease, transform 0.1s ease;
1183
- }
1184
- .cf-send:disabled { opacity: 0.4; cursor: default; }
1185
- .cf-send:not(:disabled):hover { transform: scale(1.05); }
1186
- .cf-send:not(:disabled):active { transform: scale(0.94); }
1187
- .cf-send svg { width: 18px; height: 18px; }
1188
- .cf-mic.is-recording { color: #f25767; animation: cf-pulse 1s infinite; }
1189
-
1190
- .cf-iconbtn.is-active { background: var(--cf-surface-2); color: var(--cf-accent); }
1191
- .cf-gif-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; }
1192
-
1193
- /* ---------- Emoji + GIF pickers ---------- */
1194
- .cf-composer { position: relative; }
1195
- .cf-picker {
1196
- position: absolute;
1197
- left: 8px;
1198
- right: 8px;
1199
- bottom: calc(100% - 4px);
1200
- background: var(--cf-bg);
1201
- border: 1px solid var(--cf-border);
1202
- border-radius: 14px;
1203
- box-shadow: var(--cf-shadow);
1204
- overflow: hidden;
1205
- animation: cf-msg-in 0.18s ease both;
1206
- z-index: 2;
1207
- }
1208
- .cf-emoji { max-height: 260px; overflow-y: auto; padding: 8px 10px 10px; }
1209
- .cf-emoji__label {
1210
- font-size: 11px;
1211
- font-weight: 700;
1212
- text-transform: uppercase;
1213
- letter-spacing: 0.5px;
1214
- color: var(--cf-muted);
1215
- margin: 8px 2px 4px;
1216
- }
1217
- .cf-emoji__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
1218
- .cf-emoji__btn {
1219
- font-size: 21px;
1220
- line-height: 1;
1221
- height: 34px;
1222
- border-radius: 8px;
1223
- transition: background 0.12s ease, transform 0.08s ease;
1224
- }
1225
- .cf-emoji__btn:hover { background: var(--cf-surface); }
1226
- .cf-emoji__btn:active { transform: scale(0.9); }
1227
-
1228
- .cf-gif { display: flex; flex-direction: column; max-height: 320px; }
1229
- .cf-gif__search {
1230
- margin: 10px 10px 8px;
1231
- padding: 9px 12px;
1232
- border: 1.5px solid var(--cf-border);
1233
- border-radius: 10px;
1234
- background: var(--cf-surface);
1235
- color: var(--cf-text);
1236
- font-family: inherit;
1237
- font-size: 14px;
1238
- outline: none;
1239
- }
1240
- .cf-gif__search:focus { border-color: var(--cf-accent); }
1241
- .cf-gif__search::placeholder { color: var(--cf-muted); }
1242
- .cf-gif__grid {
1243
- flex: 1;
1244
- overflow-y: auto;
1245
- display: grid;
1246
- grid-template-columns: 1fr 1fr;
1247
- gap: 6px;
1248
- padding: 0 10px 8px;
1249
- align-content: start;
1250
- }
1251
- .cf-gif__item {
1252
- border-radius: 10px;
1253
- overflow: hidden;
1254
- background: var(--cf-surface);
1255
- aspect-ratio: 1 / 1;
1256
- transition: transform 0.1s ease, box-shadow 0.12s ease;
1257
- }
1258
- .cf-gif__item:hover { transform: scale(1.03); box-shadow: 0 0 0 2px var(--cf-accent); }
1259
- .cf-gif__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
1260
- .cf-gif__hint { grid-column: 1 / -1; text-align: center; color: var(--cf-muted); font-size: 13px; padding: 24px 0; }
1261
- .cf-gif__powered { text-align: right; font-size: 10px; color: var(--cf-muted); padding: 0 12px 8px; }
1262
-
1263
- /* Inline media (GIF) in a message bubble. */
1264
- .cf-msg__bubble--media { padding: 4px; background: var(--cf-surface); overflow: hidden; }
1265
- .cf-msg--user .cf-msg__bubble--media { background: var(--cf-surface-2); }
1266
- .cf-msg__media { display: block; max-width: 200px; width: 100%; border-radius: 12px; }
1267
- .cf-msg__caption { display: block; padding: 4px 6px 2px; font-size: 14px; }
1268
-
1269
- .cf-footer {
1270
- text-align: center;
1271
- padding: 7px 0 9px;
1272
- font-size: 11px;
1273
- color: var(--cf-muted);
1274
- }
1275
- .cf-footer a { color: var(--cf-muted); text-decoration: none; font-weight: 600; }
1276
- .cf-footer a:hover { color: var(--cf-accent); }
1277
-
1278
- /* ---------- Footer lead actions ---------- */
1279
- .cf-footer-actions {
1280
- flex-shrink: 0;
1281
- padding: 6px 14px 5px;
1282
- background: var(--cf-bg);
1283
- border-top: 1px solid var(--cf-border);
1284
- }
1285
- .cf-action-trigger {
1286
- display: grid;
1287
- grid-template-columns: 28px minmax(0, 1fr) 16px;
1288
- align-items: center;
1289
- gap: 8px;
1290
- width: 100%;
1291
- min-height: 40px;
1292
- border: 1px solid color-mix(in oklab, var(--cf-border) 86%, var(--cf-accent));
1293
- border-radius: 14px;
1294
- padding: 6px 9px;
1295
- background:
1296
- radial-gradient(circle at 15% 0%, color-mix(in oklab, var(--cf-accent) 15%, transparent), transparent 40%),
1297
- color-mix(in oklab, var(--cf-bg-soft) 78%, transparent);
1298
- color: var(--cf-text);
1299
- text-align: left;
1300
- cursor: pointer;
1301
- box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
1302
- }
1303
- .cf-action-trigger[hidden] {
1304
- display: none;
1305
- }
1306
- .cf-action-trigger:hover {
1307
- border-color: color-mix(in oklab, var(--cf-accent) 46%, var(--cf-border));
1308
- }
1309
- .cf-action-trigger > svg {
1310
- width: 14px;
1311
- height: 14px;
1312
- color: var(--cf-muted);
1313
- }
1314
- .cf-action-trigger__icon {
1315
- display: inline-flex;
1316
- align-items: center;
1317
- justify-content: center;
1318
- width: 28px;
1319
- height: 28px;
1320
- border-radius: 10px;
1321
- background: color-mix(in oklab, var(--cf-accent) 15%, transparent);
1322
- color: var(--cf-accent);
1323
- }
1324
- .cf-action-trigger__icon svg { width: 14px; height: 14px; }
1325
- .cf-action-trigger__copy {
1326
- display: grid;
1327
- gap: 1px;
1328
- min-width: 0;
1329
- }
1330
- .cf-action-trigger__copy strong {
1331
- font-size: 12px;
1332
- line-height: 1.1;
1333
- }
1334
- .cf-action-trigger__copy small {
1335
- overflow: hidden;
1336
- color: var(--cf-muted);
1337
- font-size: 10.5px;
1338
- line-height: 1.2;
1339
- text-overflow: ellipsis;
1340
- white-space: nowrap;
1341
- }
1342
- .cf-action-drawer {
1343
- border: 1px solid color-mix(in oklab, var(--cf-border) 86%, var(--cf-accent));
1344
- border-radius: 18px 18px 12px 12px;
1345
- padding: 7px;
1346
- background:
1347
- radial-gradient(circle at 18% 0%, color-mix(in oklab, var(--cf-accent) 16%, transparent), transparent 38%),
1348
- color-mix(in oklab, var(--cf-bg) 94%, #ffffff);
1349
- box-shadow: 0 -10px 34px rgba(15, 23, 42, 0.14);
1350
- animation: cf-drawer-up 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
1351
- }
1352
- .cf-action-drawer__handle {
1353
- width: 36px;
1354
- height: 3px;
1355
- margin: 0 auto 6px;
1356
- border-radius: 999px;
1357
- background: color-mix(in oklab, var(--cf-muted) 42%, transparent);
1358
- }
1359
- .cf-action-drawer__head {
1360
- display: flex;
1361
- align-items: center;
1362
- justify-content: space-between;
1363
- gap: 10px;
1364
- padding: 0 3px 6px;
1365
- color: var(--cf-text);
1366
- }
1367
- .cf-action-drawer__head strong {
1368
- display: block;
1369
- font-size: 13px;
1370
- line-height: 1.2;
1371
- }
1372
- .cf-action-drawer__eyebrow {
1373
- display: block;
1374
- margin-bottom: 2px;
1375
- font-size: 9px;
1376
- font-weight: 800;
1377
- letter-spacing: 0.16em;
1378
- text-transform: uppercase;
1379
- color: var(--cf-muted);
1380
- }
1381
- .cf-action-drawer__close {
1382
- display: inline-flex;
1383
- align-items: center;
1384
- justify-content: center;
1385
- width: 28px;
1386
- height: 28px;
1387
- border: 1px solid var(--cf-border);
1388
- border-radius: 999px;
1389
- background: var(--cf-bg-soft);
1390
- color: var(--cf-muted);
1391
- cursor: pointer;
1392
- }
1393
- .cf-action-drawer__close svg { width: 14px; height: 14px; }
1394
- .cf-action-drawer__grid {
1395
- display: grid;
1396
- gap: 6px;
1397
- }
1398
- .cf-action-card {
1399
- display: grid;
1400
- grid-template-columns: 30px minmax(0, 1fr) 14px;
1401
- align-items: center;
1402
- gap: 8px;
1403
- width: 100%;
1404
- border: 1px solid var(--cf-border);
1405
- border-radius: 14px;
1406
- padding: 7px 8px;
1407
- background: color-mix(in oklab, var(--cf-bg-soft) 72%, transparent);
1408
- color: var(--cf-text);
1409
- text-align: left;
1410
- cursor: pointer;
1411
- transition:
1412
- transform 0.16s ease,
1413
- border-color 0.16s ease,
1414
- background 0.16s ease;
1415
- }
1416
- .cf-action-card:hover {
1417
- border-color: color-mix(in oklab, var(--cf-accent) 44%, var(--cf-border));
1418
- background: color-mix(in oklab, var(--cf-accent) 9%, var(--cf-bg-soft));
1419
- }
1420
- .cf-action-card:active { transform: translateY(1px); }
1421
- .cf-action-card > svg {
1422
- width: 13px;
1423
- height: 13px;
1424
- color: var(--cf-muted);
1425
- transform: rotate(-90deg);
1426
- }
1427
- .cf-action-card__icon {
1428
- display: inline-flex;
1429
- align-items: center;
1430
- justify-content: center;
1431
- width: 30px;
1432
- height: 30px;
1433
- border-radius: 10px;
1434
- background: color-mix(in oklab, var(--cf-accent) 14%, transparent);
1435
- color: var(--cf-accent);
1436
- }
1437
- .cf-action-card__icon svg { width: 14px; height: 14px; }
1438
- .cf-action-card__copy {
1439
- display: grid;
1440
- gap: 2px;
1441
- min-width: 0;
1442
- }
1443
- .cf-action-card__copy strong {
1444
- font-size: 12px;
1445
- line-height: 1.2;
1446
- }
1447
- .cf-action-card__copy small {
1448
- overflow: hidden;
1449
- color: var(--cf-muted);
1450
- font-size: 10.5px;
1451
- line-height: 1.25;
1452
- text-overflow: ellipsis;
1453
- white-space: nowrap;
1454
- }
1455
- .cf-action-drawer__note {
1456
- margin: 6px 3px 0;
1457
- color: var(--cf-muted);
1458
- font-size: 10px;
1459
- line-height: 1.25;
1460
- }
1461
-
1462
- .cf-action-test-mode {
1463
- display: inline-flex;
1464
- width: fit-content;
1465
- margin-top: 3px;
1466
- padding: 2px 7px;
1467
- border: 1px solid color-mix(in srgb, var(--cf-accent) 32%, transparent);
1468
- border-radius: 999px;
1469
- color: var(--cf-accent-strong);
1470
- background: color-mix(in srgb, var(--cf-accent) 9%, white);
1471
- font-size: 10px;
1472
- font-weight: 700;
1473
- letter-spacing: 0.04em;
1474
- text-transform: uppercase;
1475
- }
1476
- .cf-action-drawer .cf-form,
1477
- .cf-action-drawer .cf-booking {
1478
- max-width: none;
1479
- margin: 0;
1480
- border: 0;
1481
- background: transparent;
1482
- box-shadow: none;
1483
- }
1484
- .cf-footer-actions .cf-actions {
1485
- display: grid;
1486
- grid-template-columns: repeat(2, minmax(0, 1fr));
1487
- gap: 7px;
1488
- }
1489
- .cf-footer-actions .cf-action {
1490
- justify-content: center;
1491
- min-width: 0;
1492
- gap: 5px;
1493
- min-height: 32px;
1494
- border-radius: 11px;
1495
- padding: 6px 8px;
1496
- font-size: 12px;
1497
- line-height: 1.15;
1498
- font-weight: 650;
1499
- }
1500
- .cf-footer-actions .cf-action svg {
1501
- width: 13px;
1502
- height: 13px;
1503
- }
1504
- .cf-footer-actions .cf-form,
1505
- .cf-footer-actions .cf-booking {
1506
- max-width: none;
1507
- }
1508
-
1509
- @keyframes cf-drawer-up {
1510
- from {
1511
- opacity: 0;
1512
- transform: translateY(14px) scale(0.98);
1513
- }
1514
- to {
1515
- opacity: 1;
1516
- transform: translateY(0) scale(1);
1517
- }
1518
- }
1519
-
1520
- /* ---------- Assistant card module ---------- */
1521
- .cf-assistant-card {
1522
- display: flex;
1523
- flex-direction: column;
1524
- gap: 12px;
1525
- margin: 0 2px 4px;
1526
- animation: cf-msg-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
1527
- }
1528
- .cf-assistant-card--pinned {
1529
- flex-shrink: 0;
1530
- gap: 0;
1531
- margin: 0;
1532
- padding: 8px 14px 10px;
1533
- border-bottom: 1px solid var(--cf-border);
1534
- background: var(--cf-bg);
1535
- }
1536
- .cf-assistant-card--compact {
1537
- align-items: flex-start;
1538
- padding-top: 10px;
1539
- padding-bottom: 12px;
1540
- }
1541
- .cf-assistant-card__compact-speak {
1542
- position: relative;
1543
- isolation: isolate;
1544
- display: inline-flex;
1545
- align-items: center;
1546
- gap: 8px;
1547
- max-width: 100%;
1548
- min-height: 44px;
1549
- padding: 5px 15px 5px 6px;
1550
- border-radius: 999px;
1551
- background:
1552
- linear-gradient(180deg, color-mix(in oklab, var(--cf-accent) 13%, var(--cf-surface)), color-mix(in oklab, var(--cf-bg) 92%, var(--cf-surface))),
1553
- var(--cf-bg);
1554
- border: 1px solid color-mix(in oklab, var(--cf-accent) 58%, var(--cf-border));
1555
- color: var(--cf-text);
1556
- box-shadow:
1557
- inset 0 1px 0 color-mix(in oklab, #fff 13%, transparent),
1558
- 0 13px 30px -22px color-mix(in oklab, var(--cf-accent) 60%, #000);
1559
- font-size: 12.25px;
1560
- font-weight: 750;
1561
- line-height: 1;
1562
- transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
1563
- overflow: hidden;
1564
- }
1565
- .cf-assistant-card__compact-speak::before {
1566
- content: '';
1567
- position: absolute;
1568
- inset: 1px;
1569
- z-index: -1;
1570
- border-radius: inherit;
1571
- background:
1572
- radial-gradient(circle at 20% 10%, color-mix(in oklab, var(--cf-accent) 28%, transparent), transparent 42%),
1573
- radial-gradient(circle at 85% 100%, color-mix(in oklab, var(--cf-accent-2) 18%, transparent), transparent 38%);
1574
- opacity: 0.76;
1575
- pointer-events: none;
1576
- }
1577
- .cf-assistant-card__compact-speak:hover {
1578
- border-color: color-mix(in oklab, var(--cf-accent) 82%, var(--cf-border));
1579
- box-shadow:
1580
- inset 0 1px 0 color-mix(in oklab, #fff 15%, transparent),
1581
- 0 16px 34px -22px color-mix(in oklab, var(--cf-accent) 76%, #000);
1582
- }
1583
- .cf-assistant-card__compact-speak:active { transform: scale(0.98); }
1584
- .cf-assistant-card__compact-speak:focus-visible {
1585
- outline: 2px solid var(--cf-accent-2);
1586
- outline-offset: 2px;
1587
- }
1588
- .cf-assistant-card__compact-mic {
1589
- width: 24px;
1590
- height: 24px;
1591
- margin-left: -14px;
1592
- border-radius: 999px;
1593
- display: inline-flex;
1594
- align-items: center;
1595
- justify-content: center;
1596
- flex-shrink: 0;
1597
- color: var(--cf-accent);
1598
- background: color-mix(in oklab, var(--cf-bg) 90%, transparent);
1599
- border: 1px solid color-mix(in oklab, var(--cf-accent) 48%, var(--cf-border));
1600
- box-shadow: 0 7px 18px -12px rgba(0, 0, 0, 0.75);
1601
- }
1602
- .cf-assistant-card__compact-mic svg {
1603
- width: 13px;
1604
- height: 13px;
1605
- color: var(--cf-accent);
1606
- flex-shrink: 0;
1607
- }
1608
- .cf-assistant-card__compact-mic:first-child {
1609
- margin-left: 0;
1610
- }
1611
- .cf-assistant-card__compact-label {
1612
- min-width: 0;
1613
- overflow: hidden;
1614
- text-overflow: ellipsis;
1615
- white-space: nowrap;
1616
- letter-spacing: 0.01em;
1617
- }
1618
- .cf-assistant-card__compact-avatar {
1619
- width: 34px;
1620
- height: 34px;
1621
- border-radius: 999px;
1622
- display: grid;
1623
- place-items: center;
1624
- flex-shrink: 0;
1625
- overflow: hidden;
1626
- color: #fff;
1627
- background: linear-gradient(135deg, var(--cf-avatar-a, var(--cf-accent)), var(--cf-avatar-b, var(--cf-accent-2)));
1628
- border: 1px solid color-mix(in oklab, #fff 24%, transparent);
1629
- box-shadow:
1630
- 0 0 0 3px color-mix(in oklab, var(--cf-accent) 16%, transparent),
1631
- inset 0 1px 0 color-mix(in oklab, #fff 18%, transparent);
1632
- font-size: 11px;
1633
- font-weight: 800;
1634
- }
1635
- .cf-assistant-card__compact-avatar img {
1636
- width: 100%;
1637
- height: 100%;
1638
- object-fit: cover;
1639
- }
1640
- .cf-assistant-card--pinned .cf-assistant-card__stage {
1641
- height: 132px;
1642
- min-height: 0;
1643
- border-radius: 13px;
1644
- }
1645
- /* The stage sizes/positions the card's video area; .cf-assistant-card__media
1646
- inside it stays overflow: hidden for the rounded image/video corners,
1647
- while interactive controls sit as a stage sibling so their popovers
1648
- aren't clipped by it. */
1649
- .cf-assistant-card__stage {
1650
- position: relative;
1651
- border-radius: 12px;
1652
- aspect-ratio: 16 / 9;
1653
- }
1654
- .cf-assistant-card__voice-only {
1655
- position: relative;
1656
- display: flex;
1657
- align-items: center;
1658
- justify-content: center;
1659
- width: 100%;
1660
- min-height: 44px;
1661
- align-self: stretch;
1662
- }
1663
- .cf-assistant-card__media {
1664
- position: absolute;
1665
- inset: 0;
1666
- overflow: hidden;
1667
- border-radius: inherit;
1668
- background: var(--cf-surface);
1669
- border: 1px solid var(--cf-border);
1670
- }
1671
- .cf-assistant-card__stage--local {
1672
- isolation: isolate;
1673
- overflow: hidden;
1674
- background:
1675
- radial-gradient(circle at 30% 18%, color-mix(in oklab, var(--cf-accent) 18%, transparent), transparent 36%),
1676
- linear-gradient(145deg, color-mix(in oklab, var(--cf-surface) 72%, var(--cf-bg)), var(--cf-bg));
1677
- border: 1px solid color-mix(in oklab, var(--cf-border) 82%, var(--cf-accent));
1678
- box-shadow:
1679
- inset 0 1px 0 color-mix(in oklab, #fff 9%, transparent),
1680
- 0 22px 44px -34px color-mix(in oklab, var(--cf-accent) 46%, #000);
1681
- }
1682
- .cf-assistant-card__stage--local.is-live {
1683
- height: 188px;
1684
- aspect-ratio: auto;
1685
- }
1686
- .cf-assistant-card--pinned .cf-assistant-card__stage--local.is-live {
1687
- height: 154px;
1688
- }
1689
- .cf-assistant-card__stage--local.is-speaking {
1690
- box-shadow:
1691
- inset 0 1px 0 color-mix(in oklab, #fff 11%, transparent),
1692
- 0 20px 54px -28px color-mix(in oklab, var(--cf-accent) 72%, #000);
1693
- }
1694
- .cf-assistant-card__stage--local.is-listening {
1695
- border-color: color-mix(in oklab, var(--cf-accent) 62%, var(--cf-border));
1696
- }
1697
- .cf-assistant-card__stage--local.is-muted {
1698
- filter: saturate(0.72);
1699
- }
1700
- .cf-assistant-card__stage--local .cf-assistant-card__media {
1701
- z-index: 1;
1702
- border: 0;
1703
- background:
1704
- radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--cf-accent) 18%, transparent), transparent 38%),
1705
- color-mix(in oklab, var(--cf-bg) 92%, var(--cf-surface));
1706
- }
1707
- .cf-assistant-card__media--uploaded::after {
1708
- content: '';
1709
- position: absolute;
1710
- inset: 0;
1711
- pointer-events: none;
1712
- background:
1713
- radial-gradient(circle at 50% 50%, transparent 28%, rgba(2, 6, 23, 0.08) 62%, rgba(2, 6, 23, 0.34) 100%),
1714
- linear-gradient(180deg, transparent 52%, rgba(2, 6, 23, 0.26));
1715
- }
1716
- .cf-assistant-card__media img,
1717
- .cf-assistant-card__media video {
1718
- width: 100%;
1719
- height: 100%;
1720
- display: block;
1721
- object-fit: cover;
1722
- }
1723
- .cf-avatar-aura {
1724
- position: absolute;
1725
- left: 50%;
1726
- top: 50%;
1727
- width: 104px;
1728
- height: 104px;
1729
- border-radius: 999px;
1730
- transform: translate(-50%, -50%) scale(0.88);
1731
- border: 1px solid color-mix(in oklab, var(--cf-accent) 42%, transparent);
1732
- opacity: 0;
1733
- pointer-events: none;
1734
- z-index: 3;
1735
- }
1736
- .cf-avatar-aura--two {
1737
- width: 142px;
1738
- height: 142px;
1739
- }
1740
- .cf-assistant-card__stage--local.is-speaking .cf-avatar-aura--one {
1741
- animation: cf-avatar-breathe 1.35s ease-in-out infinite;
1742
- }
1743
- .cf-assistant-card__stage--local.is-speaking .cf-avatar-aura--two {
1744
- animation: cf-avatar-breathe 1.35s ease-in-out infinite 0.32s;
1745
- }
1746
- .cf-avatar-listen-ring {
1747
- position: absolute;
1748
- left: 50%;
1749
- top: 50%;
1750
- width: calc(112px + (var(--cf-listen, 0.2) * 42px));
1751
- height: calc(112px + (var(--cf-listen, 0.2) * 42px));
1752
- border-radius: 999px;
1753
- transform: translate(-50%, -50%);
1754
- border: 2px solid color-mix(in oklab, var(--cf-accent) 58%, transparent);
1755
- box-shadow: 0 0 calc(14px + (var(--cf-listen, 0.2) * 24px)) color-mix(in oklab, var(--cf-accent) 34%, transparent);
1756
- opacity: 0;
1757
- pointer-events: none;
1758
- z-index: 4;
1759
- }
1760
- .cf-assistant-card__stage--local.is-listening .cf-avatar-listen-ring {
1761
- opacity: calc(0.36 + (var(--cf-listen, 0.2) * 0.42));
1762
- }
1763
- .cf-avatar-wave {
1764
- position: absolute;
1765
- left: 50%;
1766
- bottom: 46px;
1767
- z-index: 6;
1768
- display: inline-flex;
1769
- align-items: center;
1770
- justify-content: center;
1771
- gap: 4px;
1772
- min-width: 58px;
1773
- height: 25px;
1774
- padding: 5px 8px;
1775
- border-radius: 999px;
1776
- transform: translateX(-50%) translateY(8px);
1777
- background: color-mix(in oklab, var(--cf-bg) 82%, transparent);
1778
- border: 1px solid color-mix(in oklab, var(--cf-accent) 36%, transparent);
1779
- opacity: 0;
1780
- pointer-events: none;
1781
- backdrop-filter: blur(10px);
1782
- }
1783
- .cf-avatar-wave span {
1784
- width: 4px;
1785
- height: 8px;
1786
- border-radius: 999px;
1787
- background: color-mix(in oklab, var(--cf-accent) 88%, #fff);
1788
- transform-origin: center;
1789
- }
1790
- .cf-assistant-card__stage--local.is-speaking .cf-avatar-wave {
1791
- opacity: 1;
1792
- transform: translateX(-50%) translateY(0);
1793
- }
1794
- .cf-assistant-card__stage--local.is-speaking .cf-avatar-wave span {
1795
- animation: cf-avatar-wave 0.58s ease-in-out infinite;
1796
- }
1797
- .cf-assistant-card__stage--local.is-speaking .cf-avatar-wave span:nth-child(2) { animation-delay: 0.1s; }
1798
- .cf-assistant-card__stage--local.is-speaking .cf-avatar-wave span:nth-child(3) { animation-delay: 0.2s; }
1799
- .cf-assistant-card__stage--local.is-speaking .cf-avatar-wave span:nth-child(4) { animation-delay: 0.3s; }
1800
- .cf-assistant-card__stage--local.is-thinking .cf-assistant-card__media::before {
1801
- content: '';
1802
- position: absolute;
1803
- inset: -35%;
1804
- z-index: 5;
1805
- pointer-events: none;
1806
- background: linear-gradient(115deg, transparent 42%, color-mix(in oklab, var(--cf-accent) 20%, transparent) 50%, transparent 58%);
1807
- animation: cf-avatar-thinking 1.45s ease-in-out infinite;
1808
- }
1809
- .cf-assistant-card__avatar-stage {
1810
- position: absolute;
1811
- inset: 0;
1812
- display: grid;
1813
- place-items: center;
1814
- --cf-avatar-a: var(--cf-accent);
1815
- --cf-avatar-b: color-mix(in oklab, var(--cf-accent) 70%, #0f1f2e);
1816
- --cf-avatar-glow: color-mix(in oklab, var(--cf-accent) 38%, transparent);
1817
- background:
1818
- radial-gradient(circle at 35% 30%, var(--cf-avatar-glow), transparent 32%),
1819
- linear-gradient(145deg, color-mix(in oklab, var(--cf-avatar-a) 18%, var(--cf-bg)), var(--cf-surface-2));
1820
- }
1821
- .cf-assistant-card__face {
1822
- position: relative;
1823
- width: 128px;
1824
- height: 128px;
1825
- border-radius: 999px;
1826
- display: grid;
1827
- place-items: center;
1828
- color: #fff;
1829
- background: linear-gradient(145deg, var(--cf-avatar-a), var(--cf-avatar-b));
1830
- box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.75);
1831
- z-index: 2;
1832
- }
1833
- .cf-assistant-card__stage--local.is-speaking .cf-assistant-card__face {
1834
- animation: cf-avatar-nod 1.6s ease-in-out infinite;
1835
- }
1836
- .cf-assistant-card__stage--local.is-listening .cf-assistant-card__face {
1837
- box-shadow:
1838
- 0 22px 44px -28px rgba(0, 0, 0, 0.75),
1839
- 0 0 0 calc(5px + (var(--cf-listen, 0.2) * 6px)) color-mix(in oklab, var(--cf-accent) 16%, transparent);
1840
- }
1841
- .cf-assistant-card--pinned .cf-assistant-card__face {
1842
- width: 72px;
1843
- height: 72px;
1844
- }
1845
- .cf-avatar-preset--support-guide {
1846
- --cf-avatar-a: #10b981;
1847
- --cf-avatar-b: #0f766e;
1848
- --cf-avatar-glow: rgba(16, 185, 129, 0.34);
1849
- }
1850
- .cf-avatar-preset--sales-host {
1851
- --cf-avatar-a: #3b82f6;
1852
- --cf-avatar-b: #4338ca;
1853
- --cf-avatar-glow: rgba(59, 130, 246, 0.34);
1854
- }
1855
- .cf-avatar-preset--calm-advisor {
1856
- --cf-avatar-a: #64748b;
1857
- --cf-avatar-b: #0f172a;
1858
- --cf-avatar-glow: rgba(100, 116, 139, 0.34);
1859
- }
1860
- .cf-avatar-preset--technical-guide {
1861
- --cf-avatar-a: #06b6d4;
1862
- --cf-avatar-b: #1d4ed8;
1863
- --cf-avatar-glow: rgba(6, 182, 212, 0.34);
1864
- }
1865
- .cf-avatar-preset--school-desk {
1866
- --cf-avatar-a: #8b5cf6;
1867
- --cf-avatar-b: #6d28d9;
1868
- --cf-avatar-glow: rgba(139, 92, 246, 0.34);
1869
- }
1870
- .cf-avatar-preset--front-office {
1871
- --cf-avatar-a: #f59e0b;
1872
- --cf-avatar-b: #c2410c;
1873
- --cf-avatar-glow: rgba(245, 158, 11, 0.34);
1874
- }
1875
- .cf-assistant-card__initials {
1876
- transform: translateY(-12px);
1877
- font-size: 34px;
1878
- font-weight: 800;
1879
- }
1880
- .cf-assistant-card--pinned .cf-assistant-card__initials {
1881
- transform: translateY(-6px);
1882
- font-size: 19px;
1883
- }
1884
- .cf-assistant-card__eye {
1885
- position: absolute;
1886
- top: 58px;
1887
- width: 8px;
1888
- height: 8px;
1889
- border-radius: 999px;
1890
- background: rgba(255, 255, 255, 0.9);
1891
- }
1892
- .cf-assistant-card__eye--left { left: 42px; }
1893
- .cf-assistant-card__eye--right { right: 42px; }
1894
- .cf-assistant-card--pinned .cf-assistant-card__eye {
1895
- top: 33px;
1896
- width: 5px;
1897
- height: 5px;
1898
- }
1899
- .cf-assistant-card--pinned .cf-assistant-card__eye--left { left: 23px; }
1900
- .cf-assistant-card--pinned .cf-assistant-card__eye--right { right: 23px; }
1901
- .cf-assistant-card__mouth {
1902
- position: absolute;
1903
- left: 50%;
1904
- bottom: 31px;
1905
- width: 34px;
1906
- height: 6px;
1907
- transform: translateX(-50%);
1908
- border-radius: 999px;
1909
- background: rgba(255, 255, 255, 0.9);
1910
- }
1911
- .cf-assistant-card--pinned .cf-assistant-card__mouth {
1912
- bottom: 18px;
1913
- width: 20px;
1914
- height: 4px;
1915
- }
1916
- .cf-assistant-card.is-speaking .cf-assistant-card__mouth {
1917
- animation: cf-mouth-talk 0.24s ease-in-out infinite alternate;
1918
- }
1919
- .cf-assistant-card__stage--local.is-speaking .cf-assistant-card__mouth {
1920
- animation: cf-mouth-talk 0.24s ease-in-out infinite alternate;
1921
- }
1922
- .cf-assistant-card__mouth--overlay {
1923
- z-index: 6;
1924
- bottom: 39px;
1925
- width: 42px;
1926
- height: 7px;
1927
- opacity: 0;
1928
- background: color-mix(in oklab, #fff 90%, var(--cf-accent));
1929
- box-shadow:
1930
- 0 0 0 4px rgba(2, 6, 23, 0.22),
1931
- 0 10px 22px -10px rgba(0, 0, 0, 0.85);
1932
- }
1933
- .cf-assistant-card__stage--local.is-speaking .cf-assistant-card__mouth--overlay {
1934
- opacity: 1;
1935
- }
1936
- .cf-assistant-card--pinned .cf-assistant-card__mouth--overlay {
1937
- bottom: 42px;
1938
- }
1939
- @keyframes cf-mouth-talk {
1940
- from { height: 5px; width: 28px; border-radius: 999px; }
1941
- to { height: 20px; width: 22px; border-radius: 45% 45% 55% 55%; }
1942
- }
1943
- @keyframes cf-avatar-breathe {
1944
- 0%, 100% { opacity: 0.16; transform: translate(-50%, -50%) scale(0.82); }
1945
- 50% { opacity: 0.58; transform: translate(-50%, -50%) scale(1.12); }
1946
- }
1947
- @keyframes cf-avatar-wave {
1948
- 0%, 100% { transform: scaleY(0.62); opacity: 0.72; }
1949
- 50% { transform: scaleY(1.85); opacity: 1; }
1950
- }
1951
- @keyframes cf-avatar-thinking {
1952
- 0% { transform: translateX(-18%); opacity: 0; }
1953
- 38% { opacity: 1; }
1954
- 100% { transform: translateX(18%); opacity: 0; }
1955
- }
1956
- @keyframes cf-avatar-nod {
1957
- 0%, 100% { transform: translateY(0) scale(1); }
1958
- 45% { transform: translateY(-2px) scale(1.012); }
1959
- }
1960
- .cf-assistant-card__speak {
1961
- position: absolute;
1962
- left: 50%;
1963
- bottom: 12px;
1964
- transform: translateX(-50%);
1965
- display: inline-flex;
1966
- align-items: center;
1967
- gap: 7px;
1968
- max-width: calc(100% - 24px);
1969
- padding: 8px 12px;
1970
- border-radius: 999px;
1971
- background: color-mix(in oklab, var(--cf-bg) 92%, transparent);
1972
- color: var(--cf-accent);
1973
- box-shadow: 0 10px 22px -14px rgba(15, 30, 42, 0.6);
1974
- font-size: 12.5px;
1975
- font-weight: 700;
1976
- white-space: nowrap;
1977
- }
1978
- .cf-assistant-card--pinned .cf-assistant-card__speak {
1979
- padding: 6px 10px;
1980
- font-size: 11.5px;
1981
- }
1982
- .cf-assistant-card__speak svg { width: 15px; height: 15px; }
1983
- .cf-assistant-card__voice-only .cf-assistant-card__speak,
1984
- .cf-assistant-card__voice-only .cf-call-controls {
1985
- position: static;
1986
- transform: none;
1987
- max-width: 100%;
1988
- }
1989
- .cf-assistant-card--connecting {
1990
- min-height: 100%;
1991
- display: grid;
1992
- place-items: center;
1993
- align-content: center;
1994
- gap: 18px;
1995
- padding: 34px 24px 42px;
1996
- text-align: center;
1997
- border-top: 1px solid var(--cf-border);
1998
- background:
1999
- radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--cf-accent) 16%, transparent), transparent 36%),
2000
- linear-gradient(180deg, color-mix(in oklab, var(--cf-surface) 72%, var(--cf-bg)), var(--cf-bg));
2001
- }
2002
- .cf-assistant-card__connecting-avatar {
2003
- position: relative;
2004
- width: 118px;
2005
- height: 118px;
2006
- display: grid;
2007
- place-items: center;
2008
- }
2009
- .cf-assistant-card__connecting-avatar img,
2010
- .cf-assistant-card__connecting-face {
2011
- width: 92px;
2012
- height: 92px;
2013
- border-radius: 999px;
2014
- display: grid;
2015
- place-items: center;
2016
- object-fit: cover;
2017
- color: #fff;
2018
- font-size: 28px;
2019
- font-weight: 850;
2020
- letter-spacing: -0.04em;
2021
- background: linear-gradient(145deg, var(--cf-accent), var(--cf-accent-2));
2022
- border: 1px solid color-mix(in oklab, #fff 30%, transparent);
2023
- box-shadow:
2024
- 0 22px 48px -24px color-mix(in oklab, var(--cf-accent) 60%, #000),
2025
- 0 0 0 8px color-mix(in oklab, var(--cf-accent) 10%, transparent);
2026
- z-index: 2;
2027
- }
2028
- .cf-assistant-card__connecting-copy {
2029
- display: grid;
2030
- gap: 6px;
2031
- }
2032
- .cf-assistant-card__connecting-eyebrow {
2033
- color: var(--cf-muted);
2034
- font-size: 11px;
2035
- font-weight: 800;
2036
- letter-spacing: 0.12em;
2037
- text-transform: uppercase;
2038
- }
2039
- .cf-assistant-card__connecting-copy strong {
2040
- color: var(--cf-text);
2041
- font-size: 18px;
2042
- line-height: 1.25;
2043
- }
2044
- .cf-assistant-card--connecting .cf-call-ripple {
2045
- inset: -18px;
2046
- border-radius: 999px;
2047
- }
2048
- .cf-assistant-card--connecting .cf-call-ripple span {
2049
- width: 92px;
2050
- height: 92px;
2051
- }
2052
-
2053
- /* ---------- Call "working" ripple ----------
2054
- Concentric rings pulsing out from the avatar's center while the call is
2055
- connecting / transcribing / waiting for the reply — the classic "ringing
2056
- call" cue, so busy moments read as live activity instead of a freeze. */
2057
- .cf-call-ripple {
2058
- position: absolute;
2059
- inset: 0;
2060
- display: grid;
2061
- place-items: center;
2062
- pointer-events: none;
2063
- overflow: hidden;
2064
- border-radius: inherit;
2065
- }
2066
- .cf-call-ripple span {
2067
- position: absolute;
2068
- width: 74px;
2069
- height: 74px;
2070
- border-radius: 999px;
2071
- border: 2px solid var(--cf-accent);
2072
- opacity: 0;
2073
- animation: cf-call-ripple 1.8s ease-out infinite;
2074
- }
2075
- .cf-call-ripple span:nth-child(2) { animation-delay: 0.6s; }
2076
- .cf-call-ripple span:nth-child(3) { animation-delay: 1.2s; }
2077
- @keyframes cf-call-ripple {
2078
- 0% { transform: scale(0.9); opacity: 0.55; }
2079
- 100% { transform: scale(2.6); opacity: 0; }
2080
- }
2081
- @media (prefers-reduced-motion: reduce) {
2082
- .cf-call-ripple span { animation: none; opacity: 0.25; transform: scale(1.4); }
2083
- .cf-call-ripple span:nth-child(2), .cf-call-ripple span:nth-child(3) { display: none; }
2084
- }
2085
-
2086
- /* ---------- In-call controls (mic / audio picker / expand / minimize / end) ---------- */
2087
- .cf-call-controls {
2088
- position: absolute;
2089
- left: 50%;
2090
- bottom: 12px;
2091
- transform: translateX(-50%);
2092
- display: inline-flex;
2093
- align-items: center;
2094
- gap: 4px;
2095
- max-width: calc(100% - 24px);
2096
- padding: 5px 7px;
2097
- border-radius: 999px;
2098
- background: color-mix(in oklab, var(--cf-bg) 94%, transparent);
2099
- border: 1px solid color-mix(in oklab, var(--cf-border) 72%, transparent);
2100
- box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.7);
2101
- z-index: 30;
2102
- }
2103
- .cf-assistant-card--pinned .cf-call-controls { padding: 4px 6px; gap: 4px; }
2104
- .cf-call-btn {
2105
- position: relative;
2106
- flex-shrink: 0;
2107
- width: 30px;
2108
- height: 30px;
2109
- border-radius: 999px;
2110
- display: inline-flex;
2111
- align-items: center;
2112
- justify-content: center;
2113
- gap: 6px;
2114
- color: var(--cf-text);
2115
- background: color-mix(in oklab, var(--cf-surface) 88%, transparent);
2116
- border: 1px solid color-mix(in oklab, var(--cf-border) 76%, transparent);
2117
- transition: background 0.15s ease, transform 0.12s ease, color 0.15s ease;
2118
- }
2119
- .cf-call-btn:hover { background: color-mix(in oklab, var(--cf-accent) 10%, var(--cf-surface)); }
2120
- .cf-call-btn:active { transform: scale(0.94); }
2121
- .cf-call-btn svg { width: 14px; height: 14px; }
2122
- .cf-call-btn--microphones {
2123
- width: 24px;
2124
- margin-left: -5px;
2125
- border-top-left-radius: 10px;
2126
- border-bottom-left-radius: 10px;
2127
- }
2128
- .cf-call-btn--microphones svg { width: 13px; height: 13px; }
2129
- .cf-call-btn--restore svg { width: 15px; height: 15px; }
2130
- .cf-call-btn.is-muted {
2131
- color: #fff;
2132
- background: var(--cf-muted);
2133
- border-color: transparent;
2134
- }
2135
- /* Live-listening cue: a soft ring around the mic button that breathes with
2136
- the mic level, instead of a separate waveform element eating up row width. */
2137
- .cf-call-btn.is-listening::after {
2138
- content: '';
2139
- position: absolute;
2140
- inset: -4px;
2141
- border-radius: inherit;
2142
- border: 2px solid var(--cf-accent);
2143
- opacity: calc(0.25 + var(--cf-wave, 0.2) * 0.5);
2144
- transform: scale(calc(1 + var(--cf-wave, 0.2) * 0.22));
2145
- transition: transform 0.09s ease, opacity 0.09s ease;
2146
- pointer-events: none;
2147
- }
2148
- /* Your voice is actually registering: the mic fills with the accent color
2149
- and the ring flares, so "it hears me" is unmistakable at a glance. */
2150
- .cf-call-btn.is-listening.is-hot {
2151
- color: var(--cf-accent-ink);
2152
- background: var(--cf-accent);
2153
- border-color: transparent;
2154
- }
2155
- .cf-call-btn.is-listening.is-hot::after {
2156
- border-width: 3px;
2157
- opacity: calc(0.5 + var(--cf-wave, 0.2) * 0.5);
2158
- transform: scale(calc(1.08 + var(--cf-wave, 0.2) * 0.35));
2159
- box-shadow: 0 0 12px 2px color-mix(in oklab, var(--cf-accent) 55%, transparent);
2160
- }
2161
- .cf-call-btn--talk {
2162
- color: var(--cf-accent-ink);
2163
- background: var(--cf-accent);
2164
- border-color: transparent;
2165
- }
2166
- .cf-call-btn--end {
2167
- color: #fff;
2168
- background: #e5484d;
2169
- border-color: transparent;
2170
- }
2171
- .cf-call-btn--end:hover { background: #dc3d42; }
2172
- /* Microphone selector popover. */
2173
- .cf-call-more { position: static; display: inline-flex; z-index: 40; }
2174
- .cf-call-menu {
2175
- position: absolute;
2176
- top: calc(100% + 8px);
2177
- bottom: auto;
2178
- left: 50%;
2179
- transform: translateX(-50%);
2180
- display: flex;
2181
- flex-direction: column;
2182
- gap: 2px;
2183
- width: min(240px, calc(var(--cf-panel-w, 388px) - 72px), calc(100vw - 64px));
2184
- min-width: 0;
2185
- max-width: calc(100vw - 64px);
2186
- max-height: min(300px, calc(100vh - 220px));
2187
- overflow-y: auto;
2188
- padding: 8px;
2189
- border-radius: 14px;
2190
- background: color-mix(in oklab, var(--cf-bg) 98%, #000);
2191
- border: 1px solid color-mix(in oklab, var(--cf-border) 74%, transparent);
2192
- box-shadow: 0 18px 45px -20px rgba(0, 0, 0, 0.78);
2193
- z-index: 60;
2194
- }
2195
- .cf-call-menu__label {
2196
- margin: 8px 8px 4px;
2197
- color: var(--cf-muted);
2198
- font-size: 11px;
2199
- font-weight: 700;
2200
- text-transform: uppercase;
2201
- letter-spacing: 0.08em;
2202
- }
2203
- .cf-call-menu__item {
2204
- display: flex;
2205
- align-items: center;
2206
- gap: 8px;
2207
- min-width: 0;
2208
- padding: 8px 9px;
2209
- border-radius: 10px;
2210
- color: var(--cf-text);
2211
- font-size: 12.5px;
2212
- text-align: left;
2213
- white-space: nowrap;
2214
- overflow: hidden;
2215
- }
2216
- .cf-call-menu__item span:last-child {
2217
- min-width: 0;
2218
- overflow: hidden;
2219
- text-overflow: ellipsis;
2220
- }
2221
- .cf-call-menu__item:hover { background: color-mix(in oklab, var(--cf-accent) 12%, var(--cf-surface)); }
2222
- .cf-call-menu__item.is-active { color: var(--cf-accent); font-weight: 600; }
2223
- .cf-call-menu__item svg { width: 13px; height: 13px; flex-shrink: 0; }
2224
- .cf-call-menu__spacer { width: 13px; flex-shrink: 0; }
2225
- /* Detached floating avatar card — replaces the launcher while a call runs minimized. */
2226
- .cf-floating-call-card {
2227
- position: fixed;
2228
- bottom: var(--cf-v-pad, 20px);
2229
- right: var(--cf-h-pad, 20px);
2230
- z-index: 1;
2231
- pointer-events: auto;
2232
- width: min(340px, calc(100vw - 32px));
2233
- aspect-ratio: 16 / 9;
2234
- overflow: hidden;
2235
- border-radius: 14px;
2236
- background: var(--cf-bg);
2237
- border: 1px solid color-mix(in oklab, var(--cf-border) 74%, transparent);
2238
- box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.72);
2239
- animation: cf-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
2240
- }
2241
- .cf-root[data-align='left'] .cf-floating-call-card { right: auto; left: var(--cf-h-pad, 20px); }
2242
- .cf-floating-call-card__media,
2243
- .cf-floating-call-card__shade {
2244
- position: absolute;
2245
- inset: 0;
2246
- }
2247
- .cf-floating-call-card__media img,
2248
- .cf-floating-call-card__media video {
2249
- width: 100%;
2250
- height: 100%;
2251
- object-fit: cover;
2252
- }
2253
- .cf-floating-call-card__shade {
2254
- background:
2255
- linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18)),
2256
- radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.08), transparent 42%);
2257
- pointer-events: none;
2258
- }
2259
- .cf-floating-call-card__avatar {
2260
- position: absolute;
2261
- inset: 0;
2262
- display: flex;
2263
- align-items: center;
2264
- justify-content: center;
2265
- color: #fff;
2266
- background: linear-gradient(145deg, var(--cf-accent), var(--cf-accent-2));
2267
- }
2268
- .cf-floating-call-card.is-muted {
2269
- filter: saturate(0.72);
2270
- }
2271
- .cf-floating-call-card.is-listening {
2272
- border-color: color-mix(in oklab, var(--cf-accent) 62%, var(--cf-border));
2273
- box-shadow:
2274
- 0 20px 48px -20px rgba(0, 0, 0, 0.72),
2275
- 0 0 calc(12px + (var(--cf-listen, 0.2) * 18px)) color-mix(in oklab, var(--cf-accent) 28%, transparent);
2276
- }
2277
- .cf-floating-call-card.is-thinking .cf-floating-call-card__shade::before {
2278
- content: '';
2279
- position: absolute;
2280
- inset: -45%;
2281
- background: linear-gradient(115deg, transparent 42%, color-mix(in oklab, var(--cf-accent) 22%, transparent) 50%, transparent 58%);
2282
- animation: cf-avatar-thinking 1.45s ease-in-out infinite;
2283
- }
2284
- .cf-floating-call-card.is-speaking .cf-floating-call-card__avatar,
2285
- .cf-floating-call-card.is-speaking .cf-floating-call-card__media img {
2286
- animation: cf-avatar-nod 1.6s ease-in-out infinite;
2287
- }
2288
- .cf-floating-call-card__avatar > span:first-child {
2289
- font-size: clamp(64px, 22vw, 118px);
2290
- font-weight: 800;
2291
- line-height: 1;
2292
- }
2293
- .cf-floating-call-card__eye,
2294
- .cf-floating-call-card__mouth {
2295
- position: absolute;
2296
- background: rgba(255, 255, 255, 0.9);
2297
- }
2298
- .cf-floating-call-card__eye {
2299
- top: 37%;
2300
- width: 8px;
2301
- height: 8px;
2302
- border-radius: 999px;
2303
- }
2304
- .cf-floating-call-card__eye--left { left: 38%; }
2305
- .cf-floating-call-card__eye--right { right: 38%; }
2306
- .cf-floating-call-card__mouth {
2307
- bottom: 31%;
2308
- width: 34px;
2309
- height: 6px;
2310
- border-radius: 999px;
2311
- }
2312
- .cf-floating-call-card.is-speaking .cf-floating-call-card__mouth {
2313
- animation: cf-mouth-talk 0.24s ease-in-out infinite alternate;
2314
- }
2315
- .cf-floating-call-card__controls {
2316
- position: absolute;
2317
- left: 50%;
2318
- bottom: 12px;
2319
- transform: translateX(-50%);
2320
- display: inline-flex;
2321
- align-items: center;
2322
- gap: 4px;
2323
- padding: 5px 7px;
2324
- border-radius: 999px;
2325
- background: color-mix(in oklab, var(--cf-bg) 92%, transparent);
2326
- border: 1px solid color-mix(in oklab, var(--cf-border) 70%, transparent);
2327
- box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.74);
2328
- }
2329
- .cf-assistant-card__copy {
2330
- margin: 0;
2331
- color: var(--cf-text);
2332
- font-size: 14px;
2333
- line-height: 1.55;
2334
- }
2335
- .cf-assistant-card__chips {
2336
- display: flex;
2337
- flex-wrap: wrap;
2338
- gap: 7px;
2339
- }
2340
- .cf-assistant-card__chip {
2341
- max-width: 100%;
2342
- border-radius: 6px;
2343
- padding: 7px 9px;
2344
- background: color-mix(in oklab, var(--cf-accent) 12%, var(--cf-bg));
2345
- color: var(--cf-accent);
2346
- font-size: 12.5px;
2347
- line-height: 1.2;
2348
- }
2349
- .cf-assistant-card__chip:hover { background: color-mix(in oklab, var(--cf-accent) 18%, var(--cf-bg)); }
2350
- .cf-assistant-card__privacy {
2351
- margin: -2px 0 0;
2352
- color: var(--cf-muted);
2353
- font-size: 10.5px;
2354
- line-height: 1.4;
2355
- text-align: center;
2356
- }
2357
- .cf-assistant-card__privacy a {
2358
- color: var(--cf-muted);
2359
- text-decoration: underline;
2360
- text-underline-offset: 2px;
2361
- }
2362
-
2363
- /* Offline presence dot (amber instead of green). */
2364
- .cf-header__status--offline::before { background: #e2c07e; box-shadow: 0 0 0 2px rgba(226, 192, 126, 0.3); }
2365
-
2366
- /* Disclaimer fine-print under the composer. */
2367
- .cf-disclaimer { padding: 0 16px 2px; font-size: 10.5px; line-height: 1.45; color: var(--cf-muted); text-align: center; }
2368
-
2369
- /* Read-only banner shown while viewing a past conversation. */
2370
- .cf-viewing-banner {
2371
- padding: 7px 16px;
2372
- font-size: 12px;
2373
- font-weight: 600;
2374
- text-align: center;
2375
- color: var(--cf-muted);
2376
- background: var(--cf-surface);
2377
- border-bottom: 1px solid var(--cf-border);
2378
- flex-shrink: 0;
2379
- }
2380
-
2381
- /* Past-conversations history panel (over the chat, like the confirm dialog). */
2382
- .cf-history {
2383
- width: min(340px, 90%);
2384
- max-height: 70%;
2385
- display: flex;
2386
- flex-direction: column;
2387
- background: var(--cf-bg);
2388
- border-radius: 14px;
2389
- box-shadow: var(--cf-shadow);
2390
- overflow: hidden;
2391
- }
2392
- .cf-history__head {
2393
- display: flex;
2394
- align-items: center;
2395
- justify-content: space-between;
2396
- padding: 12px 14px;
2397
- font-size: 14px;
2398
- font-weight: 700;
2399
- color: var(--cf-text);
2400
- border-bottom: 1px solid var(--cf-border);
2401
- }
2402
- .cf-history__list { overflow-y: auto; padding: 6px; }
2403
- .cf-history__item {
2404
- display: flex;
2405
- flex-direction: column;
2406
- gap: 2px;
2407
- width: 100%;
2408
- text-align: left;
2409
- padding: 9px 10px;
2410
- border-radius: 9px;
2411
- cursor: pointer;
2412
- transition: background 0.15s ease;
2413
- }
2414
- .cf-history__item:hover { background: var(--cf-surface); }
2415
- .cf-history__item.is-active { background: var(--cf-surface); }
2416
- .cf-history__title { font-size: 13px; color: var(--cf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
2417
- .cf-history__meta { font-size: 11px; color: var(--cf-muted); }
2418
-
2419
- /* Ended-conversation bar — replaces the composer once the chat is closed. */
2420
- .cf-ended {
2421
- display: flex;
2422
- flex-direction: column;
2423
- align-items: center;
2424
- gap: 10px;
2425
- padding: 14px 16px 16px;
2426
- flex-shrink: 0;
2427
- text-align: center;
2428
- }
2429
- .cf-ended__text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--cf-muted); }
2430
- .cf-csat { display: inline-flex; align-items: center; gap: 8px; }
2431
- .cf-csat__q { font-size: 12.5px; color: var(--cf-muted); }
2432
- .cf-csat__btn {
2433
- display: inline-flex;
2434
- align-items: center;
2435
- justify-content: center;
2436
- width: 30px;
2437
- height: 30px;
2438
- border-radius: 8px;
2439
- color: var(--cf-muted);
2440
- cursor: pointer;
2441
- transition: background 0.15s ease, color 0.15s ease;
2442
- }
2443
- .cf-csat__btn:hover { background: var(--cf-surface); color: var(--cf-accent); }
2444
- .cf-csat__btn svg { width: 16px; height: 16px; }
2445
- .cf-ended__btn {
2446
- font-size: 13px;
2447
- font-weight: 600;
2448
- color: var(--cf-accent-ink);
2449
- background: var(--cf-accent);
2450
- border: none;
2451
- border-radius: 999px;
2452
- padding: 9px 18px;
2453
- cursor: pointer;
2454
- transition: opacity 0.15s ease;
2455
- }
2456
- .cf-ended__btn:hover { opacity: 0.9; }
2457
- .cf-ended__btn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
2458
-
2459
- /* "↓ New messages" pill — shown when a reply streams in while scrolled up. */
2460
- .cf-newmsg {
2461
- /* Sticky inside the scroll body: pins to the bottom of the visible thread,
2462
- just above the composer (never overlapping it). Horizontal centering via
2463
- align-self so it doesn't fight the entrance animation's transform. */
2464
- position: sticky;
2465
- bottom: 10px;
2466
- align-self: center;
2467
- z-index: 3;
2468
- pointer-events: auto;
2469
- display: inline-flex;
2470
- align-items: center;
2471
- gap: 6px;
2472
- font-size: 12.5px;
2473
- font-weight: 600;
2474
- color: var(--cf-accent-ink);
2475
- background: linear-gradient(135deg, var(--cf-accent, #2f7f55) 0%, var(--cf-accent-2, #2f7de8) 160%);
2476
- border-radius: 999px;
2477
- padding: 7px 14px;
2478
- box-shadow: var(--cf-shadow);
2479
- animation: cf-msg-in 0.2s ease both;
2480
- }
2481
- .cf-newmsg svg { width: 14px; height: 14px; }
2482
-
2483
- /* ---------- Clear-chat confirm dialog (in-widget, replaces window.confirm) ---------- */
2484
- .cf-confirm {
2485
- position: absolute;
2486
- inset: 0;
2487
- z-index: 6;
2488
- pointer-events: auto;
2489
- display: grid;
2490
- place-items: center;
2491
- padding: 22px;
2492
- background: color-mix(in oklab, var(--cf-bg) 62%, transparent);
2493
- backdrop-filter: blur(2px);
2494
- animation: cf-fade-in 0.14s ease both;
2495
- }
2496
- .cf-confirm__card {
2497
- width: 100%;
2498
- max-width: 300px;
2499
- background: var(--cf-bg);
2500
- border: 1px solid var(--cf-border);
2501
- border-radius: 16px;
2502
- box-shadow: var(--cf-shadow);
2503
- padding: 18px;
2504
- text-align: center;
2505
- animation: cf-msg-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
2506
- }
2507
- .cf-confirm__title { font-size: 15px; font-weight: 700; color: var(--cf-text); }
2508
- .cf-confirm__body { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--cf-muted); }
2509
- .cf-confirm__actions { margin-top: 16px; display: flex; gap: 8px; justify-content: center; }
2510
- .cf-confirm__btn {
2511
- padding: 9px 16px;
2512
- border-radius: 10px;
2513
- font-size: 13.5px;
2514
- font-weight: 600;
2515
- transition: transform 0.1s ease, opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
2516
- }
2517
- .cf-confirm__btn:active { transform: scale(0.97); }
2518
- .cf-confirm__btn:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 2px; }
2519
- .cf-confirm__btn--cancel { background: var(--cf-surface); color: var(--cf-text); border: 1px solid var(--cf-border); }
2520
- .cf-confirm__btn--cancel:hover { border-color: var(--cf-accent); }
2521
- .cf-confirm__btn--danger { background: #f25767; color: #fff; }
2522
- .cf-confirm__btn--danger:hover { opacity: 0.9; }
2523
-
2524
- /* Visually-hidden live region (announces the final answer only). */
2525
- .cf-sr-live {
2526
- position: absolute;
2527
- width: 1px;
2528
- height: 1px;
2529
- padding: 0;
2530
- margin: -1px;
2531
- overflow: hidden;
2532
- clip: rect(0 0 0 0);
2533
- white-space: nowrap;
2534
- border: 0;
2535
- }
2536
-
2537
- /* ---------- Attachments ---------- */
2538
- .cf-file-input { display: none; }
2539
- .cf-iconbtn:disabled { opacity: 0.4; cursor: default; }
2540
- .cf-attach-row { padding: 0 4px 8px; }
2541
- .cf-attach-status { font-size: 12px; color: var(--cf-muted); }
2542
- .cf-attach-status--err { color: #f25767; }
2543
- .cf-attach-chip {
2544
- display: inline-flex;
2545
- align-items: center;
2546
- gap: 6px;
2547
- max-width: 100%;
2548
- padding: 5px 6px 5px 10px;
2549
- border-radius: 999px;
2550
- background: var(--cf-surface-2);
2551
- border: 1px solid var(--cf-border);
2552
- color: var(--cf-text);
2553
- font-size: 12px;
2554
- }
2555
- .cf-attach-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2556
- .cf-attach-chip svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--cf-muted); }
2557
- .cf-attach-x { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--cf-muted); flex-shrink: 0; }
2558
- .cf-attach-x:hover { background: var(--cf-surface); color: var(--cf-text); }
2559
- .cf-attach-x svg { width: 11px; height: 11px; }
2560
-
2561
- /* ---------- Mobile: full-screen panel ---------- */
2562
- @media (max-width: 480px) {
2563
- .cf-panel {
2564
- bottom: 0;
2565
- right: 0;
2566
- width: 100vw;
2567
- max-width: 100vw;
2568
- height: 100dvh;
2569
- max-height: 100dvh;
2570
- border-radius: 0;
2571
- }
2572
- .cf-launcher { bottom: 16px; right: 16px; }
2573
- }
2574
-
2575
- /* ---------- Keyframes ---------- */
2576
- @keyframes cf-pop {
2577
- from { transform: scale(0); opacity: 0; }
2578
- to { transform: scale(1); opacity: 1; }
2579
- }
2580
- @keyframes cf-badge-pop {
2581
- from { transform: scale(0); }
2582
- to { transform: scale(1); }
2583
- }
2584
- @keyframes cf-msg-in {
2585
- from { opacity: 0; transform: translateY(8px); }
2586
- to { opacity: 1; transform: none; }
2587
- }
2588
- @keyframes cf-fade-in {
2589
- from { opacity: 0; }
2590
- to { opacity: 1; }
2591
- }
2592
- @keyframes cf-typing {
2593
- 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
2594
- 40% { opacity: 1; transform: translateY(-4px); }
2595
- }
2596
- @keyframes cf-pulse {
2597
- 0%, 100% { opacity: 1; }
2598
- 50% { opacity: 0.4; }
2599
- }
2600
-
2601
- @media (prefers-reduced-motion: reduce) {
2602
- .cf-root *, .cf-root *::before, .cf-root *::after {
2603
- animation-duration: 0.01ms !important;
2604
- animation-iteration-count: 1 !important;
2605
- transition-duration: 0.01ms !important;
2606
- scroll-behavior: auto !important;
2607
- }
2608
- }
2609
- .cf-analytics-visualization {
2610
- box-sizing: border-box;
2611
- width: 100%;
2612
- max-width: 100%;
2613
- margin-top: 8px;
2614
- min-width: 0;
2615
- overflow: hidden;
2616
- border: 1px solid var(--cf-border);
2617
- border-radius: 13px;
2618
- background: var(--cf-surface);
2619
- padding: 12px;
2620
- color: var(--cf-muted);
2621
- font-size: 11px;
2622
- }
2623
- .cf-analytics-visualization.is-expanded {
2624
- display: flex;
2625
- min-height: 100%;
2626
- flex-direction: column;
2627
- margin: 0;
2628
- border: 0;
2629
- border-radius: 0;
2630
- background: transparent;
2631
- padding: 0;
2632
- }
2633
- .cf-analytics-visualization__header {
2634
- display: flex;
2635
- width: 100%;
2636
- min-width: 0;
2637
- min-height: 32px;
2638
- align-items: center;
2639
- justify-content: space-between;
2640
- gap: 10px;
2641
- }
2642
- .cf-analytics-visualization__header > div:first-child {
2643
- min-width: 0;
2644
- }
2645
- .cf-analytics-visualization__actions {
2646
- display: flex;
2647
- flex: 0 0 auto;
2648
- align-items: center;
2649
- gap: 6px;
2650
- }
2651
- .cf-analytics-chart-picker {
2652
- position: relative;
2653
- display: inline-flex;
2654
- min-width: 0;
2655
- color: var(--cf-muted);
2656
- font-size: 9px;
2657
- font-weight: 700;
2658
- }
2659
-
2660
- .cf-analytics-chart-picker summary {
2661
- display: inline-flex;
2662
- min-width: 92px;
2663
- max-width: 138px;
2664
- height: 30px;
2665
- align-items: center;
2666
- gap: 6px;
2667
- border: 1px solid var(--cf-border);
2668
- border-radius: 8px;
2669
- background: var(--cf-bg);
2670
- padding: 0 8px;
2671
- color: var(--cf-text);
2672
- list-style: none;
2673
- cursor: pointer;
2674
- box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
2675
- transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
2676
- }
2677
-
2678
- .cf-analytics-chart-picker summary::-webkit-details-marker { display: none; }
2679
- .cf-analytics-chart-picker summary:hover,
2680
- .cf-analytics-chart-picker[open] summary {
2681
- border-color: var(--cf-accent);
2682
- background: color-mix(in oklab, var(--cf-accent) 9%, var(--cf-bg));
2683
- }
2684
- .cf-analytics-chart-picker summary:focus-visible {
2685
- outline: 2px solid var(--cf-accent);
2686
- outline-offset: 2px;
2687
- }
2688
- .cf-analytics-chart-picker summary > svg:last-child {
2689
- width: 13px;
2690
- height: 13px;
2691
- flex: 0 0 13px;
2692
- margin-left: auto;
2693
- color: var(--cf-muted);
2694
- transition: transform .16s ease;
2695
- }
2696
- .cf-analytics-chart-picker[open] summary > svg:last-child { transform: rotate(180deg); }
2697
- .cf-analytics-chart-picker__current {
2698
- display: inline-flex;
2699
- min-width: 0;
2700
- align-items: center;
2701
- gap: 6px;
2702
- }
2703
- .cf-analytics-chart-picker__current > span {
2704
- overflow: hidden;
2705
- text-overflow: ellipsis;
2706
- white-space: nowrap;
2707
- }
2708
- .cf-chart-type-icon {
2709
- width: 17px;
2710
- height: 17px;
2711
- flex: 0 0 17px;
2712
- }
2713
- .cf-analytics-chart-picker__menu {
2714
- position: absolute;
2715
- top: calc(100% + 7px);
2716
- right: 0;
2717
- z-index: 60;
2718
- display: grid;
2719
- min-width: 196px;
2720
- padding: 6px;
2721
- border: 1px solid var(--cf-border);
2722
- border-radius: 12px;
2723
- background: var(--cf-bg);
2724
- box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
2725
- }
2726
- .cf-analytics-chart-picker__menu button {
2727
- display: flex;
2728
- width: 100%;
2729
- min-height: 46px;
2730
- align-items: flex-start;
2731
- gap: 8px;
2732
- border: 0;
2733
- border-radius: 9px;
2734
- background: transparent;
2735
- padding: 7px;
2736
- color: var(--cf-text);
2737
- font: inherit;
2738
- text-align: left;
2739
- cursor: pointer;
2740
- }
2741
- .cf-analytics-chart-picker__menu button:hover,
2742
- .cf-analytics-chart-picker__menu button.is-selected {
2743
- background: color-mix(in oklab, var(--cf-accent) 10%, var(--cf-bg));
2744
- color: var(--cf-accent);
2745
- }
2746
- .cf-analytics-chart-picker__menu button > svg:last-child {
2747
- width: 13px;
2748
- height: 13px;
2749
- flex: 0 0 13px;
2750
- margin-top: 4px;
2751
- }
2752
- .cf-analytics-chart-picker__icon {
2753
- display: inline-flex;
2754
- width: 30px;
2755
- height: 30px;
2756
- flex: 0 0 30px;
2757
- align-items: center;
2758
- justify-content: center;
2759
- border-radius: 9px;
2760
- background: var(--cf-bg-soft);
2761
- box-shadow: inset 0 0 0 1px var(--cf-border);
2762
- }
2763
- .cf-analytics-chart-picker__icon .cf-chart-type-icon {
2764
- width: 25px;
2765
- height: 25px;
2766
- flex-basis: 25px;
2767
- }
2768
- .cf-analytics-chart-picker__copy {
2769
- display: grid;
2770
- min-width: 0;
2771
- flex: 1;
2772
- gap: 2px;
2773
- }
2774
- .cf-analytics-chart-picker__copy strong {
2775
- font-size: 10px;
2776
- line-height: 1.25;
2777
- }
2778
- .cf-analytics-chart-picker__copy small {
2779
- color: var(--cf-muted);
2780
- font-size: 9px;
2781
- font-weight: 560;
2782
- line-height: 1.3;
2783
- }
2784
- .cf-analytics-visualization__title {
2785
- overflow: hidden;
2786
- color: var(--cf-muted);
2787
- font-size: 10px;
2788
- font-weight: 750;
2789
- letter-spacing: .08em;
2790
- text-overflow: ellipsis;
2791
- text-transform: uppercase;
2792
- white-space: nowrap;
2793
- }
2794
- .cf-analytics-meta {
2795
- display: flex;
2796
- flex-wrap: wrap;
2797
- align-items: center;
2798
- gap: 3px 7px;
2799
- margin-top: 4px;
2800
- color: var(--cf-muted);
2801
- font-size: 9px;
2802
- line-height: 1.35;
2803
- }
2804
- .cf-analytics-meta__dot {
2805
- display: inline-block;
2806
- width: 5px;
2807
- height: 5px;
2808
- margin-right: 4px;
2809
- border-radius: 999px;
2810
- background: var(--cf-accent);
2811
- }
2812
- .cf-analytics-visualization__download {
2813
- width: fit-content;
2814
- border: 1px solid var(--cf-border) !important;
2815
- border-radius: 8px;
2816
- background: var(--cf-surface) !important;
2817
- padding: 6px 9px;
2818
- color: var(--cf-text) !important;
2819
- font-size: 10px;
2820
- font-weight: 700;
2821
- }
2822
- .cf-analytics-visualization__download:hover {
2823
- border-color: var(--cf-accent) !important;
2824
- color: var(--cf-accent) !important;
2825
- }
2826
- .cf-analytics-table-wrap {
2827
- box-sizing: border-box;
2828
- width: 100%;
2829
- max-width: 100%;
2830
- margin-top: 9px;
2831
- max-height: 210px;
2832
- overflow: auto;
2833
- border: 1px solid var(--cf-border);
2834
- border-radius: 9px;
2835
- scrollbar-width: thin;
2836
- }
2837
- .cf-analytics-visualization.is-expanded .cf-analytics-table-wrap {
2838
- min-height: 0;
2839
- max-height: none;
2840
- flex: 1;
2841
- margin-top: 14px;
2842
- }
2843
- .cf-analytics-table {
2844
- width: 100%;
2845
- border-collapse: collapse;
2846
- color: var(--cf-text);
2847
- font-size: 10px;
2848
- white-space: nowrap;
2849
- }
2850
- .cf-analytics-table th,
2851
- .cf-analytics-table td {
2852
- border-bottom: 1px solid var(--cf-border);
2853
- padding: 8px 9px;
2854
- text-align: left;
2855
- }
2856
- .cf-analytics-table th {
2857
- position: sticky;
2858
- top: 0;
2859
- background: var(--cf-surface-2);
2860
- color: var(--cf-muted);
2861
- font-weight: 700;
2862
- text-transform: capitalize;
2863
- }
2864
- .cf-analytics-table tbody tr:last-child td { border-bottom: 0; }
2865
- .cf-analytics-table-note {
2866
- margin: 7px 2px 0;
2867
- color: var(--cf-muted);
2868
- font-size: 9px;
2869
- line-height: 1.4;
2870
- }
2871
- .cf-data-table {
2872
- display: flex;
2873
- min-width: 0;
2874
- min-height: 0;
2875
- flex: 1;
2876
- flex-direction: column;
2877
- margin-top: 10px;
2878
- overflow: hidden;
2879
- border: 1px solid var(--cf-border);
2880
- border-radius: 9px;
2881
- background: var(--cf-bg);
2882
- }
2883
- .cf-table-fields {
2884
- display: flex;
2885
- min-width: 0;
2886
- min-height: 38px;
2887
- align-items: center;
2888
- gap: 6px;
2889
- padding: 7px 8px;
2890
- border-bottom: 1px solid var(--cf-border);
2891
- color: var(--cf-muted);
2892
- font-size: 9px;
2893
- }
2894
- .cf-table-fields > strong {
2895
- flex: 0 0 auto;
2896
- color: var(--cf-muted);
2897
- font-size: 8px;
2898
- letter-spacing: .06em;
2899
- text-transform: uppercase;
2900
- }
2901
- .cf-field-list {
2902
- display: flex;
2903
- min-width: 0;
2904
- gap: 5px;
2905
- overflow: auto hidden;
2906
- scrollbar-width: none;
2907
- }
2908
- .cf-field-chip {
2909
- flex: 0 0 auto;
2910
- padding: 4px 6px;
2911
- border-radius: 6px;
2912
- background: color-mix(in srgb, var(--cf-accent) 11%, var(--cf-bg));
2913
- color: var(--cf-accent);
2914
- font-weight: 650;
2915
- }
2916
- .cf-table-field-count { margin-left: auto;white-space: nowrap; }
2917
- .cf-table-controls {
2918
- display: grid;
2919
- grid-template-columns: minmax(110px, 1fr) auto;
2920
- gap: 6px;
2921
- padding: 7px 8px 5px;
2922
- }
2923
- .cf-table-search {
2924
- display: flex;
2925
- min-width: 0;
2926
- align-items: center;
2927
- gap: 5px;
2928
- padding: 0 7px;
2929
- border: 1px solid var(--cf-border);
2930
- border-radius: 7px;
2931
- background: var(--cf-bg);
2932
- color: var(--cf-muted);
2933
- }
2934
- .cf-table-search input {
2935
- width: 100%;
2936
- min-width: 0;
2937
- height: 28px;
2938
- border: 0;
2939
- outline: 0;
2940
- background: transparent;
2941
- color: var(--cf-text);
2942
- font: 500 9px/1 var(--cf-font);
2943
- }
2944
- .cf-table-modes {
2945
- display: inline-flex;
2946
- padding: 2px;
2947
- border: 1px solid var(--cf-border);
2948
- border-radius: 8px;
2949
- background: var(--cf-surface);
2950
- }
2951
- .cf-segment {
2952
- min-height: 26px;
2953
- border-radius: 6px;
2954
- padding: 0 7px !important;
2955
- color: var(--cf-muted) !important;
2956
- font-size: 9px;
2957
- font-weight: 650;
2958
- }
2959
- .cf-segment.is-active { background: var(--cf-accent) !important;color: var(--cf-accent-ink) !important; }
2960
- .cf-table-column-bar { display: flex;align-items: center;padding: 0 8px 7px; }
2961
- .cf-column-picker { position: relative; }
2962
- .cf-column-picker > summary {
2963
- min-height: 27px;
2964
- padding: 6px 8px;
2965
- border: 1px solid var(--cf-border);
2966
- border-radius: 7px;
2967
- cursor: pointer;
2968
- list-style: none;
2969
- color: var(--cf-text);
2970
- font-size: 9px;
2971
- font-weight: 650;
2972
- }
2973
- .cf-column-picker > summary::-webkit-details-marker { display: none; }
2974
- .cf-column-menu {
2975
- position: absolute;
2976
- z-index: 5;
2977
- top: calc(100% + 4px);
2978
- left: 0;
2979
- display: grid;
2980
- min-width: 160px;
2981
- gap: 6px;
2982
- padding: 9px;
2983
- border: 1px solid var(--cf-border);
2984
- border-radius: 8px;
2985
- background: var(--cf-bg);
2986
- box-shadow: 0 10px 24px rgba(15,30,42,.16);
2987
- }
2988
- .cf-column-menu label { display: flex;align-items: center;gap: 7px;color: var(--cf-text);font-size: 9px; }
2989
- .cf-table-wrap {
2990
- position: relative;
2991
- min-height: 0;
2992
- max-height: 210px;
2993
- overflow: auto;
2994
- border-top: 1px solid var(--cf-border);
2995
- scrollbar-width: thin;
2996
- }
2997
- .cf-analytics-visualization.is-expanded .cf-table-wrap { max-height: none;flex: 1; }
2998
- .cf-table { width: 100%;border-collapse: separate;border-spacing: 0;color: var(--cf-text);font-size: 10px; }
2999
- .cf-table th { position: sticky;top: 0;z-index: 1;background: var(--cf-surface);color: var(--cf-muted);font-size: 9px;font-weight: 720;text-align: left; }
3000
- .cf-table th,.cf-table td { padding: 8px 9px;border-bottom: 1px solid var(--cf-border);white-space: nowrap; }
3001
- .cf-table .cf-select-cell { width: 28px;padding-right: 3px;text-align: center; }
3002
- .cf-table input[type="checkbox"],.cf-column-menu input[type="checkbox"] { width: 13px;height: 13px;accent-color: var(--cf-accent); }
3003
- .cf-table-sort { display: flex !important;width: 100%;align-items: center;gap: 5px;color: inherit !important;font: inherit;text-align: left; }
3004
- .cf-sort-direction { color: var(--cf-muted);font-size: 10px; }
3005
- .cf-table.is-matrix tbody td:not(.cf-select-cell) { background: color-mix(in srgb,var(--cf-accent) 7%,var(--cf-bg)); }
3006
- .cf-table tbody tr:hover,.cf-table tbody tr.is-selected { background: color-mix(in srgb,var(--cf-accent) 10%,var(--cf-bg)); }
3007
- .cf-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--cf-accent); }
3008
- .cf-show-more { position: sticky;left: 50%;bottom: 6px;transform: translateX(-50%);margin: 8px auto;padding: 6px 9px !important;border: 1px solid var(--cf-border) !important;border-radius: 7px;background: var(--cf-bg) !important;font-size: 9px;font-weight: 650; }
3009
- .cf-table-summary { display: flex;align-items: center;justify-content: space-between;gap: 8px;padding: 7px 9px;color: var(--cf-muted);font-size: 8px; }
3010
- .cf-visually-hidden { position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0); }
3011
- @media (max-width: 430px) {
3012
- .cf-table-modes { display: none; }
3013
- .cf-table-controls { grid-template-columns: 1fr; }
3014
- .cf-table-summary span:last-child { display: none; }
3015
- }
3016
- .cf-analytics-visualization__expand,
3017
- .cf-analytics-visualization__close {
3018
- display: grid;
3019
- width: 30px;
3020
- height: 30px;
3021
- flex: 0 0 auto;
3022
- place-items: center;
3023
- border: 1px solid var(--cf-border) !important;
3024
- border-radius: 9px;
3025
- background: var(--cf-bg) !important;
3026
- color: var(--cf-text) !important;
3027
- }
3028
- .cf-analytics-visualization__expand:hover,
3029
- .cf-analytics-visualization__close:hover { background: var(--cf-surface-2) !important; }
3030
- .cf-analytics-visualization__expand:focus-visible,
3031
- .cf-analytics-visualization__close:focus-visible {
3032
- outline: 2px solid var(--cf-accent);
3033
- outline-offset: 2px;
3034
- }
3035
- .cf-analytics-visualization__expand svg,
3036
- .cf-analytics-visualization__close svg { width: 15px; height: 15px; }
3037
- .cf-analytics-visualization__kpi {
3038
- padding: 8px 0 6px;
3039
- color: var(--cf-text);
3040
- font-size: 30px;
3041
- font-weight: 750;
3042
- letter-spacing: -.035em;
3043
- }
3044
- .cf-analytics-kpi {
3045
- padding: 9px 0 5px;
3046
- }
3047
- .cf-analytics-kpi__label {
3048
- color: var(--cf-muted);
3049
- font-size: 9px;
3050
- font-weight: 700;
3051
- letter-spacing: .06em;
3052
- text-transform: uppercase;
3053
- }
3054
- .cf-analytics-kpi__value {
3055
- margin-top: 5px;
3056
- color: var(--cf-text);
3057
- font-size: 30px;
3058
- font-weight: 750;
3059
- letter-spacing: -.035em;
3060
- line-height: 1;
3061
- }
3062
- .cf-analytics-empty {
3063
- margin-top: 8px;
3064
- border: 1px dashed var(--cf-border);
3065
- border-radius: 11px;
3066
- padding: 18px 14px;
3067
- color: var(--cf-text);
3068
- text-align: center;
3069
- }
3070
- .cf-analytics-empty p { margin: 0; }
3071
- .cf-analytics-empty p + p {
3072
- margin-top: 4px;
3073
- color: var(--cf-muted);
3074
- font-size: 10px;
3075
- }
3076
- .cf-analytics-echart {
3077
- position: relative;
3078
- width: 100%;
3079
- height: 196px;
3080
- min-width: 0;
3081
- }
3082
- .cf-analytics-visualization.is-expanded .cf-analytics-echart {
3083
- height: auto;
3084
- min-height: 310px;
3085
- flex: 1;
3086
- }
3087
- .cf-analytics-echart canvas:focus-visible {
3088
- outline: 2px solid var(--cf-accent);
3089
- outline-offset: -2px;
3090
- }
3091
- .cf-analytics-echart__fallback {
3092
- display: grid;
3093
- height: 100%;
3094
- place-items: center;
3095
- border: 1px dashed var(--cf-border);
3096
- border-radius: 9px;
3097
- padding: 16px;
3098
- color: var(--cf-muted);
3099
- text-align: center;
3100
- line-height: 1.5;
3101
- }
3102
- .cf-analytics-zoom {
3103
- display: flex;
3104
- min-width: 0;
3105
- align-items: center;
3106
- justify-content: space-between;
3107
- gap: 8px;
3108
- margin-top: 4px;
3109
- border-top: 1px solid var(--cf-border);
3110
- padding-top: 8px;
3111
- }
3112
- .cf-analytics-zoom__range {
3113
- min-width: 0;
3114
- overflow: hidden;
3115
- color: var(--cf-muted);
3116
- font-size: 10px;
3117
- font-weight: 650;
3118
- line-height: 1.3;
3119
- text-overflow: ellipsis;
3120
- white-space: nowrap;
3121
- }
3122
- .cf-analytics-zoom__controls {
3123
- display: inline-flex;
3124
- flex: 0 0 auto;
3125
- align-items: center;
3126
- overflow: hidden;
3127
- border: 1px solid var(--cf-border);
3128
- border-radius: 9px;
3129
- background: var(--cf-bg);
3130
- }
3131
- .cf-analytics-zoom__controls button {
3132
- display: grid;
3133
- min-width: 40px;
3134
- height: 40px;
3135
- place-items: center;
3136
- border: 0 !important;
3137
- border-radius: 0;
3138
- background: transparent !important;
3139
- color: var(--cf-text) !important;
3140
- font: inherit;
3141
- font-size: 16px;
3142
- font-weight: 700;
3143
- line-height: 1;
3144
- }
3145
- .cf-analytics-zoom__controls button + button { border-left: 1px solid var(--cf-border) !important; }
3146
- .cf-analytics-zoom__controls button:hover:not(:disabled) { background: var(--cf-surface-2) !important; }
3147
- .cf-analytics-zoom__controls button:focus-visible {
3148
- position: relative;
3149
- z-index: 1;
3150
- outline: 2px solid var(--cf-accent);
3151
- outline-offset: -2px;
3152
- }
3153
- .cf-analytics-zoom__controls button:disabled { cursor: not-allowed; opacity: .38; }
3154
- .cf-analytics-zoom__controls .cf-analytics-zoom__reset {
3155
- min-width: 56px;
3156
- padding: 0 10px;
3157
- font-size: 10px;
3158
- font-weight: 700;
3159
- }
3160
- .cf-analytics-focus {
3161
- height: 100%;
3162
- min-height: 0;
3163
- overflow: auto;
3164
- background: var(--cf-bg);
3165
- padding: 18px;
3166
- }
3167
- @media (min-width: 640px) {
3168
- .cf-panel.cf-panel--analytics-focus {
3169
- grid-template-columns: minmax(0, 1fr);
3170
- grid-template-rows: auto minmax(0, 1fr);
3171
- grid-template-areas: 'header' 'video';
3172
- }
3173
- .cf-panel--analytics-focus .cf-panel__video { height: 100%; }
3174
- .cf-panel--analytics-focus .cf-panel__chat { display: none; }
3175
- }
3176
- .cf-analytics-explanation {
3177
- margin-top: 10px;
3178
- overflow: hidden;
3179
- border: 1px solid var(--cf-border);
3180
- border-radius: 12px;
3181
- background: var(--cf-surface);
3182
- color: var(--cf-text);
3183
- font-size: 12px;
3184
- line-height: 1.55;
3185
- }
3186
- .cf-analytics-explanation h3,
3187
- .cf-analytics-explanation h4,
3188
- .cf-analytics-explanation p { margin: 0; }
3189
- .cf-analytics-explanation__lead {
3190
- border-bottom: 1px solid var(--cf-border);
3191
- padding: 12px;
3192
- }
3193
- .cf-analytics-explanation__lead-meta {
3194
- display: flex;
3195
- flex-wrap: wrap;
3196
- align-items: center;
3197
- gap: 5px 8px;
3198
- }
3199
- .cf-analytics-explanation__eyebrow {
3200
- color: var(--cf-accent);
3201
- font-size: 9px;
3202
- font-weight: 750;
3203
- letter-spacing: .1em;
3204
- text-transform: uppercase;
3205
- }
3206
- .cf-analytics-explanation__provenance {
3207
- display: inline-flex;
3208
- align-items: center;
3209
- gap: 5px;
3210
- color: var(--cf-muted);
3211
- font-size: 9px;
3212
- font-weight: 650;
3213
- }
3214
- .cf-analytics-explanation__provenance-dot {
3215
- width: 5px;
3216
- height: 5px;
3217
- border-radius: 999px;
3218
- background: var(--cf-accent);
3219
- }
3220
- .cf-analytics-explanation__headline {
3221
- margin-top: 8px !important;
3222
- color: var(--cf-text);
3223
- font-size: 15px;
3224
- font-weight: 750;
3225
- letter-spacing: -.012em;
3226
- line-height: 1.45;
3227
- }
3228
- .cf-analytics-explanation__summary {
3229
- margin-top: 5px !important;
3230
- color: var(--cf-muted);
3231
- font-size: 12px;
3232
- line-height: 1.6;
3233
- }
3234
- .cf-analytics-explanation__body {
3235
- display: grid;
3236
- gap: 14px;
3237
- padding: 12px;
3238
- }
3239
- .cf-analytics-explanation__status { color: var(--cf-muted); }
3240
- .cf-analytics-explanation__error {
3241
- border-radius: 8px;
3242
- background: color-mix(in srgb, #d97706 10%, var(--cf-surface));
3243
- padding: 9px 10px;
3244
- color: var(--cf-text);
3245
- }
3246
- .cf-analytics-explanation__heading {
3247
- color: var(--cf-text);
3248
- font-size: 12px;
3249
- font-weight: 750;
3250
- line-height: 1.45;
3251
- }
3252
- .cf-analytics-explanation__evidence {
3253
- display: grid;
3254
- gap: 7px;
3255
- margin: 8px 0 0;
3256
- padding: 0;
3257
- list-style: none;
3258
- color: var(--cf-muted);
3259
- }
3260
- .cf-analytics-explanation__evidence-item {
3261
- display: flex;
3262
- gap: 8px;
3263
- align-items: flex-start;
3264
- }
3265
- .cf-analytics-explanation__evidence-bullet {
3266
- width: 5px;
3267
- height: 5px;
3268
- flex: 0 0 auto;
3269
- margin-top: 7px;
3270
- border-radius: 999px;
3271
- background: var(--cf-accent);
3272
- }
3273
- .cf-analytics-explanation__meaning {
3274
- border-left: 2px solid var(--cf-accent);
3275
- border-radius: 0 8px 8px 0;
3276
- background: color-mix(in srgb, var(--cf-accent) 7%, var(--cf-surface));
3277
- padding: 10px 11px;
3278
- }
3279
- .cf-analytics-explanation__paragraph {
3280
- margin-top: 5px !important;
3281
- color: var(--cf-muted);
3282
- }
3283
- .cf-analytics-explanation__section-heading,
3284
- .cf-analytics-explanation__outlook-header {
3285
- display: flex;
3286
- flex-wrap: wrap;
3287
- align-items: baseline;
3288
- justify-content: space-between;
3289
- gap: 4px 8px;
3290
- }
3291
- .cf-analytics-explanation__hint,
3292
- .cf-analytics-explanation__outlook-badge {
3293
- color: var(--cf-muted);
3294
- font-size: 9px;
3295
- font-weight: 650;
3296
- }
3297
- .cf-analytics-explanation__outlook-badge {
3298
- color: var(--cf-accent);
3299
- letter-spacing: .06em;
3300
- text-transform: uppercase;
3301
- }
3302
- .cf-analytics-explanation__drivers,
3303
- .cf-analytics-explanation__recommendations {
3304
- display: grid;
3305
- gap: 7px;
3306
- margin-top: 8px;
3307
- }
3308
- .cf-analytics-explanation__driver {
3309
- border-radius: 8px;
3310
- background: var(--cf-bg);
3311
- padding: 9px 10px;
3312
- }
3313
- .cf-analytics-explanation__driver-title,
3314
- .cf-analytics-explanation__recommendation-title {
3315
- color: var(--cf-text);
3316
- font-weight: 750;
3317
- }
3318
- .cf-analytics-explanation__driver-body,
3319
- .cf-analytics-explanation__recommendation-body {
3320
- margin-top: 3px !important;
3321
- color: var(--cf-muted);
3322
- font-size: 11px;
3323
- }
3324
- .cf-analytics-explanation__driver-label { color: var(--cf-text); font-weight: 700; }
3325
- .cf-analytics-explanation__recommendation {
3326
- display: grid;
3327
- grid-template-columns: 22px minmax(0, 1fr);
3328
- gap: 8px;
3329
- border-radius: 8px;
3330
- background: var(--cf-bg);
3331
- padding: 9px 10px;
3332
- }
3333
- .cf-analytics-explanation__recommendation-index {
3334
- display: grid;
3335
- width: 22px;
3336
- height: 22px;
3337
- place-items: center;
3338
- border-radius: 999px;
3339
- background: color-mix(in srgb, var(--cf-accent) 12%, var(--cf-surface));
3340
- color: var(--cf-accent);
3341
- font-size: 10px;
3342
- font-weight: 750;
3343
- }
3344
- .cf-analytics-explanation__outlook {
3345
- border-radius: 8px;
3346
- background: var(--cf-bg);
3347
- padding: 10px 11px;
3348
- }
3349
- .cf-analytics-explanation__follow-up {
3350
- border-top: 1px solid var(--cf-border);
3351
- padding-top: 12px;
3352
- }
3353
- .cf-analytics-explanation__questions {
3354
- display: grid;
3355
- gap: 6px;
3356
- margin-top: 8px;
3357
- }
3358
- .cf-analytics-explanation__question {
3359
- width: 100%;
3360
- border: 1px solid var(--cf-border);
3361
- border-radius: 8px;
3362
- background: var(--cf-bg);
3363
- padding: 8px 9px;
3364
- color: var(--cf-text);
3365
- font: inherit;
3366
- text-align: left;
3367
- cursor: pointer;
3368
- }
3369
- .cf-analytics-explanation__question:hover {
3370
- border-color: color-mix(in srgb, var(--cf-accent) 45%, var(--cf-border));
3371
- background: color-mix(in srgb, var(--cf-accent) 6%, var(--cf-bg));
3372
- }
3373
- .cf-analytics-explanation__question:focus-visible,
3374
- .cf-analytics-explanation__limits-summary:focus-visible {
3375
- outline: 2px solid var(--cf-accent);
3376
- outline-offset: 2px;
3377
- }
3378
- .cf-analytics-explanation__limits {
3379
- border-top: 1px solid var(--cf-border);
3380
- padding-top: 10px;
3381
- }
3382
- .cf-analytics-explanation__limits-summary {
3383
- cursor: pointer;
3384
- color: var(--cf-text);
3385
- font-weight: 700;
3386
- }
3387
- .cf-analytics-explanation__limits-list {
3388
- margin: 8px 0 0;
3389
- padding-left: 17px;
3390
- color: var(--cf-muted);
3391
- }
3392
- .cf-analytics-explanation__source {
3393
- border-top: 1px solid var(--cf-border);
3394
- margin: 0;
3395
- padding: 9px 12px;
3396
- color: var(--cf-muted);
3397
- font-size: 10px;
3398
- }
3399
-
3400
- @media (max-width: 639px) {
3401
- .cf-panel.cf-panel--analytics-focus {
3402
- inset: 12px;
3403
- width: auto;
3404
- height: auto;
3405
- min-height: 0;
3406
- max-width: none;
3407
- max-height: none;
3408
- grid-template-rows: auto minmax(0, 1fr);
3409
- grid-template-areas: 'header' 'video';
3410
- transform-origin: center;
3411
- }
3412
- .cf-panel--analytics-focus .cf-panel__video { height: 100%; }
3413
- .cf-panel--analytics-focus .cf-panel__chat { display: none; }
3414
- .cf-analytics-focus { padding: 14px; }
3415
- .cf-analytics-visualization.is-expanded .cf-analytics-echart { min-height: 260px; }
3416
- }
3417
-
3418
- /* Production embed hardening: dynamic mobile viewports, safe areas, and touch. */
3419
- @supports (height: 100dvh) {
3420
- .cf-panel { height: min(88dvh, 820px); max-height: calc(100dvh - 40px); }
3421
- .cf-panel.cf-panel--call { height: min(90dvh, 840px); }
3422
- .cf-panel.cf-panel--voice-connecting { height: min(72dvh, 560px); }
3423
- }
3424
- .cf-history__footer {
3425
- flex: 0 0 auto;
3426
- border-top: 1px solid var(--cf-border);
3427
- padding: 10px 12px;
3428
- }
3429
- .cf-history__clear {
3430
- width: 100%;
3431
- min-height: 38px;
3432
- border-radius: 9px !important;
3433
- color: var(--cf-danger) !important;
3434
- font-size: 12px;
3435
- font-weight: 700;
3436
- }
3437
- .cf-history__clear:hover { background: color-mix(in srgb, var(--cf-danger) 8%, var(--cf-bg)) !important; }
3438
- .cf-history__clear:focus-visible { outline: 2px solid var(--cf-danger); outline-offset: 2px; }
3439
- .cf-footer__privacy {
3440
- border-radius: 5px !important;
3441
- color: inherit !important;
3442
- font: inherit;
3443
- text-decoration: underline;
3444
- text-underline-offset: 2px;
3445
- }
3446
- .cf-footer__privacy:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
3447
- .cf-composer.is-dragging { box-shadow: inset 0 0 0 2px var(--cf-accent); }
3448
- .cf-attach-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
3449
- .cf-attach-status button {
3450
- min-height: 28px;
3451
- border-radius: 7px !important;
3452
- padding: 0 8px !important;
3453
- color: var(--cf-accent) !important;
3454
- font-size: 11px;
3455
- font-weight: 700;
3456
- }
3457
- .cf-attach-preview {
3458
- width: 32px;
3459
- height: 32px;
3460
- flex: 0 0 32px;
3461
- border-radius: 7px;
3462
- object-fit: cover;
3463
- }
3464
- .cf-attach-copy { display: grid; min-width: 0; gap: 1px; }
3465
- .cf-attach-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
3466
- .cf-attach-copy small { color: var(--cf-muted); font-size: 9px; font-weight: 600; }
3467
-
3468
- @media (max-width: 639px) {
3469
- .cf-panel {
3470
- top: max(8px, env(safe-area-inset-top));
3471
- right: max(8px, env(safe-area-inset-right));
3472
- bottom: max(8px, env(safe-area-inset-bottom));
3473
- left: max(8px, env(safe-area-inset-left));
3474
- width: auto;
3475
- height: auto;
3476
- min-height: 0;
3477
- max-width: none;
3478
- max-height: none;
3479
- border-radius: 16px;
3480
- }
3481
- .cf-launcher {
3482
- right: max(var(--cf-h-pad, 20px), env(safe-area-inset-right));
3483
- bottom: max(var(--cf-v-pad, 20px), env(safe-area-inset-bottom));
3484
- }
3485
- .cf-root[data-align='left'] .cf-launcher {
3486
- right: auto;
3487
- left: max(var(--cf-h-pad, 20px), env(safe-area-inset-left));
3488
- }
3489
- .cf-root[data-align='left'] .cf-panel {
3490
- right: max(8px, env(safe-area-inset-right));
3491
- left: max(8px, env(safe-area-inset-left));
3492
- }
3493
- .cf-panel.cf-panel--call,
3494
- .cf-panel.cf-panel--voice-connecting,
3495
- .cf-panel.cf-panel--analytics-focus {
3496
- top: max(8px, env(safe-area-inset-top));
3497
- right: max(8px, env(safe-area-inset-right));
3498
- bottom: max(8px, env(safe-area-inset-bottom));
3499
- left: max(8px, env(safe-area-inset-left));
3500
- width: auto;
3501
- height: auto;
3502
- min-height: 0;
3503
- max-width: none;
3504
- max-height: none;
3505
- }
3506
- .cf-header__btn { width: 40px; height: 40px; }
3507
- .cf-feedback__btn { width: 36px; height: 36px; }
3508
- .cf-iconbtn, .cf-send { min-width: 40px; min-height: 40px; }
3509
- }
3510
- @media (min-width: 640px) and (max-height: 599px) {
3511
- .cf-panel,
3512
- .cf-panel.cf-panel--call,
3513
- .cf-panel.cf-panel--voice-connecting {
3514
- height: calc(100dvh - 24px);
3515
- min-height: 0;
3516
- max-height: calc(100dvh - 24px);
3517
- }
3518
- }
3519
- `;function Lt(e){"@babel/helpers - typeof";return Lt=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},Lt(e)}function Rt(e,t){if(Lt(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(Lt(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function zt(e){var t=Rt(e,`string`);return Lt(t)==`symbol`?t:t+``}function Bt(e,t,n){return(t=zt(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const Vt=`centrinfo-widget`;var Ht=class extends HTMLElement{constructor(...e){super(...e),Bt(this,`controls`,null),Bt(this,`composerDraftStore`,{value:``})}mountWith(n){let r=g(n),i=this.shadowRoot??this.attachShadow({mode:`open`});if(this.style.zIndex=String(r.zIndex),`adoptedStyleSheets`in Document.prototype&&typeof CSSStyleSheet<`u`&&typeof CSSStyleSheet.prototype.replaceSync==`function`){let e=new CSSStyleSheet;e.replaceSync(It),i.adoptedStyleSheets=[e]}else{let e=document.createElement(`style`);r.styleNonce&&(e.nonce=r.styleNonce),e.textContent=It,i.appendChild(e)}x(O(Ft,{transport:r.demo?new t:r.preview?new y(new e(r.apiBaseUrl,r.token,r.gifApiKey,r.analyticsContextToken,{agentName:r.agentName,agentAvatarUrl:r.agentAvatarUrl},r.identityToken,r.getIdentityToken,r.chatSurface),r.strings):new e(r.apiBaseUrl,r.token,r.gifApiKey,r.analyticsContextToken,{agentName:r.agentName,agentAvatarUrl:r.agentAvatarUrl},r.identityToken,r.getIdentityToken,r.chatSurface),config:r,bindControls:e=>this.controls=e,composerDraftStore:this.composerDraftStore}),i)}open(){this.controls?.open()}close(){this.controls?.close()}toggle(){this.controls?.toggle()}identify(e){this.controls?.identify(e)}clear(){this.controls?.startNew()}shutdown(){this.controls?.shutdown()}unmount(){this.shadowRoot&&x(null,this.shadowRoot)}};typeof customElements<`u`&&!customElements.get(Vt)&&customElements.define(Vt,Ht);const Ut=(e,t=document.body)=>{if(typeof document>`u`)throw Error(`[centrinfo-widget] createWidget must run in a browser.`);let n=document.createElement(Vt);return n.style.pointerEvents=`none`,n.style.position=`fixed`,n.style.inset=`0`,n.style.width=`0`,n.style.height=`0`,t.appendChild(n),n.mountWith(e),{open:()=>n.open(),close:()=>n.close(),toggle:()=>n.toggle(),show:()=>n.open(),hide:()=>n.close(),identify:e=>n.identify(e),update:e=>n.identify(e),clear:()=>n.clear(),shutdown:()=>n.shutdown(),logout:()=>n.shutdown(),destroy:()=>{n.unmount(),n.remove()}}},Z=e=>Ut(e);let Wt=null;const Gt=e=>{Wt?.destroy();let t=Z(e);return Wt=t,t},Kt={init:Gt,createWidget:Z};export{Kt as Centrinfo,Z as createWidget,Gt as init};
1
+ import{A as e,B as t,C as n,D as r,F as i,H as a,I as o,J as s,L as ee,M as te,N as ne,O as re,P as ie,R as ae,S as oe,T as se,V as ce,X as le,Y as ue,_ as de,a as fe,b as pe,d as me,h as he,i as ge,j as _e,k as ve,m as ye,n as c,p as be,r as xe,t as l,u as Se,v as Ce,w as we,x as Te,y as Ee,z as De}from"./styles-CIJFMOKa.mjs";import{render as u}from"preact";import{useCallback as d,useEffect as f,useLayoutEffect as Oe,useRef as p,useState as m}from"preact/hooks";import{Fragment as ke,jsx as h,jsxs as g}from"preact/jsx-runtime";const _=e=>e.startsWith(`image/`)?`image`:e===`application/pdf`?`pdf`:`other`,Ae=({state:e,onClose:t})=>{let n=De(),r=p(null);f(()=>{r.current?.focus();let e=e=>{e.key===`Escape`&&(e.stopPropagation(),t())};return document.addEventListener(`keydown`,e,!0),()=>document.removeEventListener(`keydown`,e,!0)},[t]);let i=e.status===`ready`?_(e.mimeType):`other`;return h(`div`,{class:`cf-preview`,role:`dialog`,"aria-modal":`true`,"aria-label":ae(n.attachPreviewTitle,{name:e.name}),onClick:e=>{e.target===e.currentTarget&&t()},children:g(`div`,{class:`cf-preview__frame`,children:[g(`div`,{class:`cf-preview__bar`,children:[h(`span`,{class:`cf-preview__name`,title:e.name,children:e.name}),e.status===`ready`&&h(`a`,{class:`cf-preview__btn`,href:e.url,download:e.name,children:n.attachDownload}),h(`button`,{ref:r,type:`button`,class:`cf-preview__btn cf-preview__close`,"aria-label":n.attachPreviewClose,onClick:t,children:`✕`})]}),g(`div`,{class:`cf-preview__body`,children:[e.status===`loading`&&h(`p`,{class:`cf-preview__note`,children:n.attachPreviewLoading}),e.status===`error`&&h(`p`,{class:`cf-preview__note`,children:n.attachPreviewFailed}),e.status===`ready`&&i===`image`&&h(`img`,{class:`cf-preview__image`,src:e.url,alt:e.name}),e.status===`ready`&&i===`pdf`&&h(`iframe`,{class:`cf-preview__pdf`,src:e.url,title:e.name}),e.status===`ready`&&i===`other`&&h(`p`,{class:`cf-preview__note`,children:n.attachPreviewUnsupported})]})]})})},je=({name:e,greeting:t})=>{let n=De();return g(`section`,{class:`cf-empty-welcome`,"aria-label":ae(n.welcomeLabel,{name:e}),children:[h(`span`,{class:`cf-empty-welcome__eyebrow`,children:n.welcomeEyebrow}),h(`h2`,{children:e}),h(`p`,{children:t||n.welcomePrompt})]})},Me=(e,t,n)=>{if(e.key===`Escape`){e.preventDefault(),e.stopPropagation(),n();return}if(e.key!==`Tab`)return;let r=Array.from(t.querySelectorAll(`button, [href], textarea, input, select, [tabindex]:not([tabindex="-1"])`)).filter(e=>!e.hasAttribute(`disabled`)&&e.getAttribute(`aria-hidden`)!==`true`&&e.tabIndex>=0);if(r.length===0)return;let i=t.getRootNode(),a=e.composedPath()[0],o=a instanceof HTMLElement?a:`activeElement`in i?i.activeElement:document.activeElement,s=r[0],ee=r[r.length-1];e.shiftKey&&(o===s||!t.contains(o))?(e.preventDefault(),e.stopPropagation(),ee.focus()):!e.shiftKey&&(o===ee||!t.contains(o))&&(e.preventDefault(),e.stopPropagation(),s.focus())},v=new Map,y=e=>{if(!e||typeof document>`u`||typeof CanvasRenderingContext2D>`u`)return;let t=document.createElement(`canvas`).getContext(`2d`);if(!t)return;t.fillStyle=`#010203`,t.fillStyle=e;let n=t.fillStyle;if(n===`#010203`&&e.trim().toLowerCase()!==`#010203`)return;let r=n.match(/^#([\da-f]{6})$/i)?.[1];if(r)return[Number.parseInt(r.slice(0,2),16),Number.parseInt(r.slice(2,4),16),Number.parseInt(r.slice(4,6),16),1];let i=n.match(/^rgba?\(([\d.]+)[, ]+([\d.]+)[, ]+([\d.]+)(?:[, /]+([\d.]+))?\)$/i);if(!i)return;let a=i.slice(1,5).map(Number);if(!a.some(e=>!Number.isFinite(e)))return[a[0],a[1],a[2],a[3]??1]},Ne=(e,t=`#ffffff`)=>{let n=`${e??``}|${t}`;if(v.has(n))return v.get(n);let r=y(e),i=y(t)??[255,255,255,1];if(!r){v.set(n,void 0);return}let a=r[3],o=r.slice(0,3).map((e,t)=>e*a+i[t]*(1-a)).map(e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}),s=o[0]*.2126+o[1]*.7152+o[2]*.0722,ee=1.05/(s+.05)>=(s+.05)/.059?`#ffffff`:`#0f1e2a`;return v.set(n,ee),ee},Pe=e=>{let[t,n]=m(`light`);return f(()=>{if(e!==`auto`||typeof matchMedia>`u`)return;let t=matchMedia(`(prefers-color-scheme: dark)`),r=()=>n(t.matches?`dark`:`light`);return r(),t.addEventListener(`change`,r),()=>t.removeEventListener(`change`,r)},[e]),e===`auto`?t:e},Fe={end:`end the call`,mute:`mute your microphone`,minimize:`minimize the chat`,expand:`expand the view`,shrink:`exit the expanded view`},Ie=e=>e.trim().toLowerCase().replace(/[^\p{L}\p{N}\s']/gu,` `).replace(/\s+/g,` `).trim(),Le=[{action:`shrink`,re:/\b(?:exit|leave|quit|close)\b[\s\w]*\b(?:full ?screen|expanded|theat(?:er|re))\b|\bshrink\b|\bsmaller view\b/},{action:`end`,re:/\b(?:end|close|stop|finish|hang ?up|quit|exit)\b[\s\w]*\b(?:call|chat|conversation|convo|session|talking)\b|\bhang ?up\b|\bgood ?bye\b|^bye(?: bye)?$/},{action:`mute`,re:/\bmute\b|\bstop listening\b/},{action:`minimize`,re:/\bminimi[sz]e\b|\bhide\b[\s\w]*\b(?:chat|call|window|widget)\b/},{action:`expand`,re:/\bexpand\b|\bmaximi[sz]e\b|\bfull ?screen\b|\btheat(?:er|re) mode\b|\bbigger view\b/}],Re=/^(?:yes|yeah|yep|yup|sure|correct|confirm|affirmative|go ahead|do it|please do|ok(?:ay)?)\b/,ze=/^(?:no|nope|nah|cancel|never ?mind|don'?t|stop)\b/,Be=/^(?:end|close|stop|finish|hang ?up|quit|exit|bye|good ?bye)\b/,Ve=e=>{let t=Ie(e);if(!t)return null;for(let{action:e,re:n}of Le)if(n.test(t)){let n=t.split(` `).length;return{action:e,confident:e===`end`?n<=10:n<=6}}return null},He=e=>`I didn't catch yes or no. Say yes to ${Fe[e]}, or no to keep talking.`,Ue=({transport:a,config:s,bindControls:le,composerDraftStore:ue})=>{let c=s.strings,[l,De]=m(s.openByDefault),{persona:u,messages:_,sending:v,assistantSpeaking:y,visitor:Le,hasEmail:Ue,liveMode:b,assignedAgentName:We,agentTypingName:Ge,starters:Ke,featuredLinks:qe,send:x,sendGif:Je,notifyTyping:Ye,stop:Xe,amend:Ze,hold:Qe,resumeHeld:$e,duckSpeaking:et,retry:tt,rateMessage:nt,injectAssistant:rt,reconnectSupport:it,appendUserDraft:at,patchMessage:S,removeMessage:ot,submitCsat:st,submitForm:ct,confirmHostedBooking:lt,transcribe:ut,uploadAttachment:dt,loadAttachment:ft,searchGifs:pt,demoSlots:mt,gifEnabled:ht,identify:gt,ended:C,endConversation:_t,startNew:vt,history:yt,viewingSessionId:bt,viewMessages:xt,openConversation:St,closeHistoryView:Ct,shutdown:wt,stopSpeaking:w,speakAssistantText:Tt}=fe(a,s,l),Et=ge(_,b),[Dt,Ot]=m(null),kt=p(0),At=d((e,t,n)=>{n===kt.current&&Ot({status:`ready`,name:t,url:URL.createObjectURL(e),mimeType:e.type||`application/octet-stream`})},[]),jt=d((e,t,n)=>{let r=t.name,i=++kt.current;Ot({status:`loading`,name:r}),ft(e,t,n).then(e=>At(e,r,i),()=>{i===kt.current&&Ot({status:`error`,name:r})})},[ft,At]),Mt=d((e,t)=>At(e,t,++kt.current),[At]),Nt=d(()=>{kt.current+=1,Ot(null)},[]);f(()=>()=>{Dt?.status===`ready`&&URL.revokeObjectURL(Dt.url)},[Dt]);let Pt=!!xe(u?.actions),[T,Ft]=m(0),[E,It]=m({mic:`off`,processing:!1}),[Lt,Rt]=m(null),[zt,Bt]=m(!1),[D,Vt]=m(!1),[Ht,Ut]=m(!1),[Wt,Gt]=m(!1),[Kt,qt]=m(0),[O,k]=m(!1),[Jt,A]=m(null),[Yt,Xt]=m([]),[Zt,Qt]=m(``),[$t,en]=m(()=>{try{return localStorage.getItem(`centrinfo:muted`)===`1`}catch{return!1}}),tn=Pe(s.theme),nn=u?.soundEnabled??!0;f(()=>{me(s.sound&&nn&&!$t)},[s.sound,nn,$t]);let rn=d(()=>{en(e=>{let t=!e;try{localStorage.setItem(`centrinfo:muted`,t?`1`:`0`)}catch{}return t})},[]),an=p(null),on=p(null),sn=p(null),cn=p(0),j=p(!1),M=p(!1),N=p(null),P=p(0),ln=p(void 0),un=p(0),dn=p(null),fn=p(!1),F=p(null),I=p(``),pn=p(()=>{}),mn=p(``),hn=p(v),gn=p(x);gn.current=x;let _n=p(Ze);_n.current=Ze;let vn=p(ut);vn.current=ut;let L=p(!1),R=p(!1),yn=p(``);yn.current=[..._].reverse().find(e=>e.role===`assistant`)?.content??``;let bn=p(y);hn.current=v,bn.current=y;let z=D?zt?`timeout`:Wt||E.mic===`muted`?`muted`:E.mic===`unavailable`?E.reason===`permission-denied`||E.reason===`unsupported`?`denied`:`unavailable`:E.mic===`off`||E.mic===`starting`?`connecting`:E.mic===`hearing`?`hearing`:y?`speaking`:Lt??(E.processing||v?`processing`:`listening`):`idle`,[xn,Sn]=m(!0),[Cn,B]=m(!1),wn=p(0),[V,H]=m(!1),[U,W]=m(!1),Tn=p(null),[G,K]=m(!1),En=p({value:``}),Dn=ue??En.current,On=p({confirmEnd:V,confirmClear:U,showHistory:G});On.current={confirmEnd:V,confirmClear:U,showHistory:G};let[kn,An]=m(!1),q=!!bt,jn=q?xt:_,Mn=jn.find(e=>e.id===Jt&&e.visualization)?.visualization;f(()=>{!Jt||Mn||(A(null),k(!1))},[Mn,Jt]);let Nn=d(()=>{De(!0),Ft(0),Se(`open`),s.onOpen?.(),s.onShow?.()},[s]),J=d(()=>{De(!1),k(!1),A(null),s.onClose?.(),s.onHide?.(),on.current?.focus()},[s]),Pn=d(()=>l?J():Nn(),[l,Nn,J]),Fn=d(()=>H(!0),[]),In=d(()=>{_t(),H(!1)},[_t]),Ln=d(()=>{vt(),B(!1),Sn(!0)},[vt]);f(()=>{V&&Tn.current?.focus()},[V]),f(()=>{le({open:Nn,close:J,toggle:Pn,identify:gt,startNew:vt,endConversation:_t,shutdown:wt})},[le,Nn,J,Pn,gt,vt,_t,wt]),f(()=>{let e=_.filter(e=>e.role===`assistant`&&!e.pending).length;if(l){cn.current=e;return}e>cn.current&&Ft(e-cn.current)},[_,l]),f(()=>{s.onUnreadChange?.(T)},[T,s]),f(()=>{let e=s.sessionDurationMinutes;if(!e||e<=0)return;let t=setTimeout(()=>wt(),e*60*1e3);return()=>clearTimeout(t)},[s.sessionDurationMinutes,_,l,wt]),f(()=>{let e=s.customLauncherSelector;if(!e||typeof document>`u`)return;let t=[];try{t=Array.from(document.querySelectorAll(e))}catch{return}let n=e=>{e.preventDefault(),Pn()};return t.forEach(e=>e.addEventListener(`click`,n)),()=>t.forEach(e=>e.removeEventListener(`click`,n))},[s.customLauncherSelector,Pn]);let Rn=p(!1);f(()=>{let e=s.proactiveMessage?.trim();if(!e||Rn.current)return;let t=s.proactiveOnPaths??[],n=typeof location<`u`?location.pathname:``;if(t.length>0&&!t.some(e=>n.includes(e)))return;let r=`centrinfo:proactive:${s.token.slice(0,12)}`;try{if(sessionStorage.getItem(r)===`1`)return}catch{}let i=setTimeout(()=>{if(!(l||C||_.some(e=>e.role===`user`))){Rn.current=!0;try{sessionStorage.setItem(r,`1`)}catch{}rt(e),Nn()}},Math.max(0,s.proactiveDelaySeconds)*1e3);return()=>clearTimeout(i)},[s.proactiveMessage]),f(()=>{let e=sn.current;if(!l||!e)return;let t=_[_.length-1],n=Date.now()<wn.current;t?.role===`user`||xn||n?(requestAnimationFrame(()=>{e.scrollTop=e.scrollHeight}),B(!1),n&&Sn(!0)):B(!0)},[_,l,v,xn]);let zn=d(()=>{let e=sn.current;if(!e)return;if(j.current&&!q){Sn(!0),B(!1);return}let t=e.scrollHeight-e.scrollTop-e.clientHeight<80;Sn(t),t&&B(!1)},[q]),Y=d(()=>{let e=sn.current;e&&(e.scrollTop=e.scrollHeight),B(!1),Sn(!0)},[]),Bn=d(()=>{wn.current=Date.now()+3e3,requestAnimationFrame(Y)},[Y]);f(()=>{if(!l||q||!D||z===`connecting`)return;wn.current=Date.now()+6e4,Y();let e=requestAnimationFrame(()=>{Y(),requestAnimationFrame(Y)}),t=[80,180,360].map(e=>window.setTimeout(Y,e));return()=>{cancelAnimationFrame(e),t.forEach(e=>window.clearTimeout(e))}},[y,_,l,Y,v,D,q,z]);let Vn=d(()=>{an.current?.querySelector(`.cf-textarea`)?.focus()},[]),Hn=d((e,t)=>{Rt(e),ln.current&&window.clearTimeout(ln.current),ln.current=window.setTimeout(()=>Rt(null),3e3),t&&!M.current&&Tt(t)},[Tt]),Un=d(e=>{let t=F.current;if(t)return t;Bn();let n=at(e);return F.current=n,S(n,{content:I.current||e,pending:!0,streaming:!1}),n},[at,Bn,S]),X=d(()=>{let e=F.current;if(e){if(I.current){S(e,{content:I.current,pending:!0});return}F.current=null,ot(e)}},[S,ot]),Z=d(()=>{R.current&&(R.current=!1,et(!1)),L.current&&(L.current=!1,$e())},[et,$e]),Q=d(()=>{j.current=!1,N.current?.stop(`call-ended`),N.current=null,L.current=!1,R.current=!1,M.current=!1,dn.current=null,fn.current=!1;let e=F.current;F.current=null,I.current=``,e&&ot(e),ln.current&&window.clearTimeout(ln.current),Rt(null),Bt(!1),It({mic:`off`,processing:!1}),qt(0),Vt(!1),Ut(!1),Gt(!1),k(!1),A(null),w()},[ot,w]),Wn=d(()=>{O&&A(null),k(!O)},[O]),Gn=d(e=>{A(e),k(!0)},[]),Kn=d(()=>{let e=Jt;A(null),k(!1),window.requestAnimationFrame(()=>{Array.from(an.current?.querySelectorAll(`[data-visualization-message]`)??[]).find(t=>t.dataset.visualizationMessage===e)?.focus()})},[Jt]),qn=d(()=>{A(null),k(!1)},[]),Jn=d((e,t,n=!1)=>{if(Bn(),t&&(S(t,{content:e,pending:!1,streaming:!1}),F.current===t&&(F.current=null)),I.current=``,n){w(),_n.current(e,{forceVoicePlayback:!0,userMessageId:t});return}j.current&&(Qe()?_n.current(e,{forceVoicePlayback:!0,userMessageId:t}):gn.current(e,{forceVoicePlayback:!0,userMessageId:t}))},[Bn,Qe,S,w]),$=d(e=>{rt(e),Tt(e)},[rt,Tt]),Yn=d(()=>{if(P.current=Date.now(),Rt(null),bn.current){R.current=!0,et(!0);return}L.current||(L.current=Qe()),Un(`Listening...`)},[et,Un,Qe]),Xn=d(e=>{let t=F.current;!t||R.current||S(t,{content:`${[I.current,e].filter(Boolean).join(` `)} ...`,pending:!0})},[S]),Zn=d(e=>{P.current=Date.now();let t=[I.current,e.text].map(e=>e.trim()).filter(Boolean).join(` `).replace(/\s+/g,` `).trim();if((R.current||e.overlappedOutput)&&ce(e.text,yn.current)){X(),Z();return}if(!t||be(t)||ye(t)){let e=R.current||L.current;X(),Z(),e||Hn(`misunderstood`);return}R.current&&(R.current=!1,Xe(),w());let n=dn.current;if(n){I.current=``,X();let e=Ie(t);if(Re.test(e)||n===`end`&&Be.test(e)){dn.current=null,pn.current(n);return}if(ze.test(e)){dn.current=null,$(`Okay, never mind — what would you like to know?`);return}$(He(n));return}let r=Ve(t);if(r){if(I.current=``,X(),Z(),r.confident){pn.current(r.action);return}dn.current=r.action,$(`Just to confirm — you want me to ${Fe[r.action]}? Please say yes or no.`);return}let i=Un(t);S(i,{content:t,pending:!0});let a=L.current;L.current=!1,Jn(t,i,a)},[Un,S,Z,Jn,X,Hn,$,Xe,w]),Qn=d(e=>{P.current=Date.now();let t=R.current||L.current;if(X(),Z(),!(t||e.overlappedOutput||e.reason===`too-short`)){if(e.reason===`transcribe-failed`){Hn(`misunderstood`,`I couldn't transcribe that. Please try again, or type your question.`);return}Hn(`noise`)}},[Z,X,Hn]),$n=p({speechStart:Yn,partial:Xn,turn:Zn,noise:Qn});$n.current={speechStart:Yn,partial:Xn,turn:Zn,noise:Qn};let er=d(()=>{navigator.mediaDevices?.enumerateDevices().then(e=>{Xt(e.filter(e=>e.kind===`audioinput`).map((e,t)=>({deviceId:e.deviceId,label:e.label||`Microphone ${t+1}`})))}).catch(()=>{})},[]),tr=d(()=>{if(j.current){Q();return}if(Vn(),!u?.allowVoiceInput||!u.talkbackMode||u.talkbackMode===`text`||hn.current||C||q)return;P.current=Date.now(),M.current=!1,j.current=!0,Gt(!1),Vt(!0),Ut(!1),Bt(!1);let e=!1,n=new t({deviceId:mn.current||void 0,transcribe:async({audio:e,mimeType:t,durationSeconds:n})=>{let r=typeof navigator<`u`&&(navigator.languages?.[0]||navigator.language)||void 0;return he(await vn.current(e,t,r,n))},listener:{state:t=>{It(t),t.mic!==`starting`&&t.mic!==`off`&&Ut(!0),!e&&t.mic===`listening`&&(e=!0,er())},speechStart:()=>$n.current.speechStart(),partial:({text:e})=>$n.current.partial(e),turn:e=>$n.current.turn(e),noise:e=>$n.current.noise(e),level:e=>{let t=performance.now();t-un.current<90||(un.current=t,qt(e))}}});N.current=n,n.setOutputActive(bn.current),n.start()},[Q,C,Vn,u,er,q]),nr=d(()=>{let e=!M.current;M.current=e,Gt(e),N.current?.setMuted(e),e?(I.current=``,X(),Z()):P.current=Date.now()},[Z,X]),rr=d(e=>{switch(P.current=Date.now(),e){case`end`:fn.current=!0,$(`Okay — ending our call now. Goodbye!`),window.setTimeout(()=>{fn.current&&(fn.current=!1,Q())},2e3);break;case`mute`:M.current||nr(),$(`Muted. Tap the mic button when you want me to listen again.`);break;case`minimize`:J(),$(`Minimized — I'm still listening. Tap the call pill to bring the chat back.`);break;case`expand`:k(!0),$(`Sure — expanding the view.`);break;case`shrink`:A(null),k(!1),$(`Okay — back to the smaller view.`);break}},[J,Q,$,nr]);f(()=>{pn.current=rr},[rr]);let ir=p(!1);f(()=>{ir.current&&!y&&fn.current&&(fn.current=!1,Q()),ir.current=y},[y,Q]);let ar=d(e=>{mn.current=e,Qt(e),N.current?.selectDevice(e||void 0)},[]),or=d(()=>{!j.current||M.current||(R.current=!1,L.current=!1,Xe(),w(),P.current=Date.now())},[Xe,w]);f(()=>{N.current?.setOutputActive(y),P.current=Date.now()},[y]),f(()=>{if(z!==`denied`)return;let e=window.setTimeout(()=>Q(),3500);return()=>window.clearTimeout(e)},[Q,z]),f(()=>{if(!D)return;let e=window.setInterval(()=>{let e=N.current;!e||M.current||hn.current||bn.current||e.snapshot.mic===`hearing`||e.snapshot.processing||Date.now()-P.current<6e4||(N.current?.log.add(`call-timeout`),Bt(!0),window.setTimeout(()=>Q(),2400))},5e3);return()=>window.clearInterval(e)},[Q,D]);let sr=D&&!Wt&&(v||y);f(()=>()=>Q(),[Q]);let[cr,lr]=m(``),ur=p(!1);f(()=>{if(ur.current&&!v){let e=[..._].reverse().find(e=>e.role===`assistant`&&!e.streaming&&!e.pending&&e.content);e&&lr(e.content)}ur.current=v},[v,_]),Oe(()=>{if(!l)return;let e=an.current,t=V||U?e?.querySelector(`.cf-confirm__card`):G?e?.querySelector(`.cf-history`):null;if(!t)return;let n=t.getRootNode(),r=`activeElement`in n?n.activeElement:document.activeElement;(!r||!t.contains(r))&&t.querySelector(`button, [href], textarea, input, [tabindex]:not([tabindex="-1"])`)?.focus()},[U,V,l,G]),f(()=>{if(!l)return;let e=an.current,t=V||U?e?.querySelector(`.cf-confirm__card`):G?e?.querySelector(`.cf-history`):null,n=e?.querySelectorAll(`:scope > .cf-header, :scope > .cf-panel__video, :scope > .cf-panel__chat`);n?.forEach(e=>{t?(e.setAttribute(`inert`,``),e.setAttribute(`aria-hidden`,`true`)):(e.removeAttribute(`inert`),e.removeAttribute(`aria-hidden`))}),t||requestAnimationFrame(()=>e?.querySelector(`.cf-textarea`)?.focus());let r=e=>{if(e.key===`Escape`){e.preventDefault();let t=On.current;if(t.confirmEnd){H(!1);return}if(t.confirmClear){W(!1);return}if(t.showHistory){K(!1);return}J();return}if(e.key!==`Tab`||!t)return;let n=t.querySelectorAll(`button, [href], textarea, input, [tabindex]:not([tabindex="-1"])`),r=Array.from(n).filter(e=>!e.hasAttribute(`disabled`));if(r.length===0)return;let i=r[0],a=r[r.length-1],o=t.getRootNode()instanceof ShadowRoot?t.getRootNode().activeElement:document.activeElement;e.shiftKey&&o===i?(e.preventDefault(),a.focus()):!e.shiftKey&&o===a&&(e.preventDefault(),i.focus())};return e?.addEventListener(`keydown`,r),()=>{e?.removeEventListener(`keydown`,r),n?.forEach(e=>{e.removeAttribute(`inert`),e.removeAttribute(`aria-hidden`)})}},[l,J,V,U,G]),f(()=>{let e=an.current;e&&(l?e.removeAttribute(`inert`):e.setAttribute(`inert`,``))},[l]);let dr=s.accentColor??s.themeTokens?.accent??u?.accentColor,fr=s.themeTokens?.accentText??Ne(dr,s.themeTokens?.background??(tn===`dark`?`#0f1c27`:`#ffffff`)),pr={zIndex:s.zIndex,"--cf-h-pad":`${s.horizontalPadding}px`,"--cf-v-pad":`${s.verticalPadding}px`,...fr?{"--cf-accent-ink":fr}:{},...s.themeTokens?.accentStrong?{"--cf-accent-2":s.themeTokens.accentStrong}:{},...s.themeTokens?.background?{"--cf-bg":s.themeTokens.background}:{},...s.themeTokens?.surface?{"--cf-surface":s.themeTokens.surface}:{},...s.themeTokens?.surfaceMuted?{"--cf-surface-2":s.themeTokens.surfaceMuted}:{},...s.themeTokens?.text?{"--cf-text":s.themeTokens.text}:{},...s.themeTokens?.mutedText?{"--cf-muted":s.themeTokens.mutedText}:{},...s.themeTokens?.border?{"--cf-border":s.themeTokens.border}:{},...s.themeTokens?.shadow?{"--cf-shadow":s.themeTokens.shadow}:{},...s.themeTokens?.radius?{"--cf-radius":s.themeTokens.radius}:{},...s.themeTokens?.fontFamily?{"--cf-font":s.themeTokens.fontFamily}:{},...s.themeTokens?.success?{"--cf-success":s.themeTokens.success}:{},...s.themeTokens?.warning?{"--cf-warning":s.themeTokens.warning}:{},...s.themeTokens?.danger?{"--cf-danger":s.themeTokens.danger}:{},...dr?{"--cf-accent":dr,"--cf-accent-2":s.themeTokens?.accentStrong??`color-mix(in oklab, ${dr} 76%, #14141f)`}:{}},mr=e=>x(e),hr=[..._].reverse().find(e=>e.role===`user`&&e.content.trim())?.content??``,gr=_.some(e=>e.role===`user`),_r=!!(u?.allowVoiceInput&&u?.talkbackMode&&u.talkbackMode!==`text`),vr=_r,yr=!q&&vr&&!gr?jn.filter((e,t)=>!(t===0&&e.role===`assistant`)):jn,br=b===`human`&&We?We:u?.agentName??c.chatName,xr=b===`human`?c.liveSupport:b===`queued`?c.waitingForTeam:u?.offline?c.statusOffline:c.statusOnline,Sr=!C&&!q?u?.availableActions:void 0,Cr=!C&&!q?u?.actions:void 0,wr=D&&!Ht&&z===`connecting`&&!q;return h(ee,{value:c,children:g(`div`,{class:`cf-root`,"data-theme":tn,"data-align":s.alignment,"data-display":`floating`,style:pr,children:[O&&l&&h(`div`,{class:`cf-theater-backdrop`,onClick:qn}),g(`div`,{ref:an,class:`cf-panel ${l?`is-open`:``} ${D?`cf-panel--call`:``} ${wr?`cf-panel--voice-connecting`:``} ${O&&l?`cf-panel--theater`:``} ${Mn?`cf-panel--analytics-focus`:``}`,role:`dialog`,"aria-modal":`false`,"aria-label":`${c.chatName}: ${u?.agentName??c.assistantName}`,"aria-hidden":!l,children:[Dt&&l&&h(Ae,{state:Dt,onClose:Nt}),g(`div`,{class:`cf-header`,children:[h(Ce,{persona:u,hideWhenMissing:!0}),g(`div`,{class:`cf-header__meta`,children:[h(`div`,{class:`cf-header__name`,children:br}),h(`div`,{class:`cf-header__status ${b===`ai`&&u?.offline?`cf-header__status--offline`:``}`,children:h(`span`,{class:`cf-header__status-text`,children:xr})})]}),g(`div`,{class:`cf-header__actions`,children:[yt.length>0&&h(`button`,{type:`button`,class:`cf-header__btn`,"aria-label":c.pastConversations,title:c.pastConversations,"aria-pressed":G,onClick:()=>K(e=>!e),children:h(_e,{})}),gr&&!C&&!q&&h(`button`,{type:`button`,class:`cf-header__btn`,"aria-label":c.endChat,title:c.endChat,onClick:Fn,children:h(e,{})}),s.sound&&nn&&h(`button`,{type:`button`,class:`cf-header__btn`,"aria-label":$t?c.unmuteSounds:c.muteSounds,"aria-pressed":$t,onClick:rn,children:h($t?te:ne,{})}),h(`button`,{type:`button`,class:`cf-header__btn cf-header__close`,"aria-label":c.closeChat,onClick:J,children:h(ve,{})})]})]}),h(`div`,{class:`cf-panel__video`,children:Mn?h(`div`,{class:`cf-analytics-focus`,role:`region`,"aria-label":c.expandedAnalyticsResult,children:h(se,{visualization:Mn,expanded:!0,onClose:Kn})}):!q&&vr?h(Ee,{persona:u,starters:[],onPick:x,onFocusComposer:tr,speaking:y,voiceState:z,replyPending:D&&v&&!y,pinned:!0,muted:Wt,onToggleMute:nr,onEndCall:Q,onTalkNow:or,showTalkNow:sr,micLevel:Kt,theaterMode:O,onToggleTheater:Wn,onMinimize:J,audioDevices:Yt,selectedAudioDeviceId:Zt,onSelectAudioDevice:ar,connectingOnly:wr}):null}),!wr&&g(`div`,{class:`cf-panel__chat`,children:[s.preview&&h(`div`,{class:`cf-preview-banner`,children:c.previewBanner}),q&&h(`div`,{class:`cf-viewing-banner`,children:c.viewingPast}),g(`div`,{class:`cf-body`,ref:sn,role:`log`,onScroll:zn,children:[yr.map((e,t)=>h(n,{msg:e,persona:u,isLast:!q&&t===yr.length-1,visitor:Le,hasEmail:Ue,lastQuestion:hr,showActions:!q&&t===yr.length-1&&!!(e.handoffOffered||e.selectedAction),onPickReply:mr,onSubmitForm:ct,onDemoSlots:mt,onConfirmHostedBooking:lt,onRetry:tt,ratable:!q&&yr.slice(0,t).some(e=>e.role===`user`),onRate:nt,onExpandVisualization:q?void 0:Gn,onOpenAttachment:jt,onReconnect:!q&&!C&&Pt&&e.id===Et?it:void 0},e.id)),!gr&&!q&&g(ke,{children:[yr.length===0&&h(je,{name:u?.agentName??c.assistantName,greeting:u?.greeting}),h(we,{items:Ke,onPick:x}),h(Te,{items:qe})]}),Cn&&g(`button`,{type:`button`,class:`cf-newmsg`,onClick:Y,children:[h(r,{}),c.newMessages]})]}),h(`div`,{class:`cf-sr-live`,"aria-live":`polite`,"aria-atomic":`true`,children:cr}),v&&!C&&!q&&h(`div`,{class:`cf-stopbar`,children:g(`button`,{type:`button`,class:`cf-stop`,onClick:Xe,children:[h(ie,{}),c.stop]})}),q?h(`div`,{class:`cf-ended`,children:h(`button`,{type:`button`,class:`cf-ended__btn`,onClick:Ct,children:c.backToChat})}):C?g(`div`,{class:`cf-ended`,children:[h(`p`,{class:`cf-ended__text`,children:c.conversationEnded}),s.csat&&gr?kn?h(`p`,{class:`cf-ended__text`,children:c.feedbackThanks}):g(`div`,{class:`cf-csat`,children:[h(`span`,{class:`cf-csat__q`,children:c.csatPrompt}),h(`button`,{type:`button`,class:`cf-csat__btn`,"aria-label":c.feedbackHelpful,onClick:()=>{st(`up`),An(!0)},children:h(o,{})}),h(`button`,{type:`button`,class:`cf-csat__btn`,"aria-label":c.feedbackNotHelpful,onClick:()=>{st(`down`),An(!0)},children:h(i,{})})]}):null,h(`button`,{type:`button`,class:`cf-ended__btn`,onClick:Ln,children:c.startNewChat})]}):g(ke,{children:[Ge?h(`div`,{class:`cf-live-typing`,"aria-live":`polite`,children:ae(c.agentTyping,{name:Ge})}):null,Sr&&Sr.length>0&&h(`div`,{class:`cf-footer-actions`,children:h(de,{actions:Sr,descriptors:Cr,visitor:Le,onSubmitForm:ct,onDemoSlots:mt,onConfirmHostedBooking:lt,scheduler:u?.scheduler,translations:s.actionTranslations})},`footer-actions`),h(pe,{draftStore:Dn,onSend:x,onSendGif:Je,onTyping:Ye,disabled:v,allowVoice:_r,onTranscribe:ut,gifEnabled:ht,onSearchGifs:pt,allowAttach:s.attachments,analyzeAttachments:!0,onUpload:dt,onPreviewAttachment:Mt},`composer`)]}),!C&&u?.disclaimerText&&h(`div`,{class:`cf-disclaimer`,children:u.disclaimerText}),g(`div`,{class:`cf-footer`,children:[h(`button`,{type:`button`,class:`cf-footer__privacy`,"aria-label":c.clearDeviceData,onClick:()=>W(!0),children:c.privacyAndData}),h(`span`,{"aria-hidden":`true`,children:`·`}),c.poweredBy,` `,h(`a`,{href:`https://accurix.tech/centrinfo`,target:`_blank`,rel:`noopener noreferrer`,children:`Centrinfo`})]})]}),V&&h(`div`,{class:`cf-confirm`,onClick:()=>H(!1),children:g(`div`,{class:`cf-confirm__card`,role:`alertdialog`,"aria-modal":`true`,"aria-label":c.endChatConfirm,onClick:e=>e.stopPropagation(),onKeyDownCapture:e=>Me(e,e.currentTarget,()=>H(!1)),children:[h(`div`,{class:`cf-confirm__title`,children:c.endChatConfirm}),h(`div`,{class:`cf-confirm__body`,children:c.endChatConfirmBody}),g(`div`,{class:`cf-confirm__actions`,children:[h(`button`,{ref:Tn,type:`button`,class:`cf-confirm__btn cf-confirm__btn--cancel`,onClick:()=>H(!1),children:c.cancel}),h(`button`,{type:`button`,class:`cf-confirm__btn cf-confirm__btn--danger`,onClick:In,children:c.endConfirmCta})]})]})},`confirm-end`),G&&h(`div`,{class:`cf-confirm`,onClick:()=>K(!1),children:g(`div`,{class:`cf-history`,role:`dialog`,"aria-modal":`true`,"aria-label":c.pastConversations,onClick:e=>e.stopPropagation(),onKeyDownCapture:e=>Me(e,e.currentTarget,()=>K(!1)),children:[g(`div`,{class:`cf-history__head`,children:[h(`span`,{children:c.pastConversations}),h(`button`,{type:`button`,class:`cf-header__btn`,"aria-label":c.closeHistory,onClick:()=>K(!1),children:h(ve,{})})]}),h(`div`,{class:`cf-history__list`,children:yt.map(e=>g(`button`,{type:`button`,class:`cf-history__item ${e.sessionId===bt?`is-active`:``}`,onClick:()=>{St(e.sessionId),K(!1)},children:[h(`span`,{class:`cf-history__title`,children:e.title}),g(`span`,{class:`cf-history__meta`,children:[new Date(e.ts).toLocaleDateString(void 0,{month:`short`,day:`numeric`}),e.ended?` · ${c.historyEnded}`:``]})]},e.sessionId))}),h(`div`,{class:`cf-history__footer`,children:h(`button`,{type:`button`,class:`cf-history__clear`,onClick:()=>{K(!1),W(!0)},children:c.clearDeviceData})})]})},`history`),U&&h(`div`,{class:`cf-confirm`,onClick:()=>W(!1),children:g(`div`,{class:`cf-confirm__card`,role:`alertdialog`,"aria-modal":`true`,"aria-label":c.clearDeviceData,onClick:e=>e.stopPropagation(),onKeyDownCapture:e=>Me(e,e.currentTarget,()=>W(!1)),children:[h(`div`,{class:`cf-confirm__title`,children:c.clearDeviceData}),h(`div`,{class:`cf-confirm__body`,children:c.clearDeviceDataBody}),g(`div`,{class:`cf-confirm__actions`,children:[h(`button`,{type:`button`,class:`cf-confirm__btn cf-confirm__btn--cancel`,onClick:()=>W(!1),children:c.cancel}),h(`button`,{type:`button`,class:`cf-confirm__btn cf-confirm__btn--danger`,onClick:()=>{W(!1),wt()},children:c.clearDeviceDataCta})]})]})},`confirm-clear`)]}),D&&!l?h(oe,{persona:u,voiceState:z,muted:Wt,onToggleMute:nr,onEndCall:Q,micLevel:Kt,onExpand:Nn}):O&&l?null:!s.hideDefaultLauncher&&g(`button`,{ref:on,type:`button`,class:`cf-launcher`,"aria-label":l?c.closeChat:T>0?`${c.openChat}. ${T===1?c.unreadMessage:ae(c.unreadMessages,{count:String(T)})}`:c.openChat,"aria-expanded":l,onClick:Pn,children:[s.launcherIcon?h(`img`,{class:`cf-launcher__img`,src:s.launcherIcon,alt:``}):h(re,{}),!l&&T>0&&h(`span`,{class:`cf-launcher__badge`,"aria-hidden":`true`,children:T>99?`99+`:T})]})]})})},b=`centrinfo-widget`;var We=class extends HTMLElement{constructor(...e){super(...e),a(this,`controls`,null),a(this,`composerDraftStore`,{value:``})}mountWith(e){let t=c(e),n=this.shadowRoot??this.attachShadow({mode:`open`});if(this.style.zIndex=String(t.zIndex),`adoptedStyleSheets`in Document.prototype&&typeof CSSStyleSheet<`u`&&typeof CSSStyleSheet.prototype.replaceSync==`function`){let e=new CSSStyleSheet;e.replaceSync(l),n.adoptedStyleSheets=[e]}else{let e=document.createElement(`style`);t.styleNonce&&(e.nonce=t.styleNonce),e.textContent=l,n.appendChild(e)}u(h(Ue,{transport:t.demo?new ue:t.preview?new s(new le(t.apiBaseUrl,t.token,t.gifApiKey,t.analyticsContextToken,{agentName:t.agentName,agentAvatarUrl:t.agentAvatarUrl},t.identityToken,t.getIdentityToken,t.chatSurface),t.strings):new le(t.apiBaseUrl,t.token,t.gifApiKey,t.analyticsContextToken,{agentName:t.agentName,agentAvatarUrl:t.agentAvatarUrl},t.identityToken,t.getIdentityToken,t.chatSurface),config:t,bindControls:e=>this.controls=e,composerDraftStore:this.composerDraftStore}),n)}open(){this.controls?.open()}close(){this.controls?.close()}toggle(){this.controls?.toggle()}identify(e){this.controls?.identify(e)}clear(){this.controls?.startNew()}shutdown(){this.controls?.shutdown()}unmount(){this.shadowRoot&&u(null,this.shadowRoot)}};typeof customElements<`u`&&!customElements.get(b)&&customElements.define(b,We);const Ge=(e,t=document.body)=>{if(typeof document>`u`)throw Error(`[centrinfo-widget] createWidget must run in a browser.`);let n=document.createElement(b);return n.style.pointerEvents=`none`,n.style.position=`fixed`,n.style.inset=`0`,n.style.width=`0`,n.style.height=`0`,t.appendChild(n),n.mountWith(e),{open:()=>n.open(),close:()=>n.close(),toggle:()=>n.toggle(),show:()=>n.open(),hide:()=>n.close(),identify:e=>n.identify(e),update:e=>n.identify(e),clear:()=>n.clear(),shutdown:()=>n.shutdown(),logout:()=>n.shutdown(),destroy:()=>{n.unmount(),n.remove()}}},Ke=e=>Ge(e);let qe=null;const x=e=>{qe?.destroy();let t=Ke(e);return qe=t,t},Je={init:x,createWidget:Ke};export{Je as Centrinfo,Ke as createWidget,x as init};