html,body{width:2000px;height:840px;min-height:840px;background:transparent!important;overflow:hidden}#product-world{position:relative;left:360px;width:1280px;height:840px;perspective:2200px;perspective-origin:50% 45%}.product-plane{position:absolute;top:22px;left:0;width:1280px;height:720px;background:#f7f8fa;border:1px solid #dce4f3;border-radius:17px;box-shadow:0 26px 75px #0005,0 0 0 1px #ffffff12;transform-origin:50% 50%;overflow:hidden;opacity:0;will-change:transform,opacity;pointer-events:none}.product-content{margin-left:60px;width:1220px;height:720px}.product-plane[data-plane=flow] .product-content{width:1280px;margin-left:0}.product-rail .menu-container{position:absolute!important;left:0;top:0;width:60px!important;height:720px!important;min-height:720px!important;z-index:2}.product-rail .menu-items{height:auto}.product-plane *,.product-plane *::before,.product-plane *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.product-plane [data-demo-contact=alex]{position:relative;z-index:3}.product-plane [data-demo-contact=alex] .kanban-card{box-shadow:0 0 0 2px #00b1ff,0 6px 20px #144bc826}.product-plane[data-plane=dashboard]{height:380px;top:110px}.product-plane[data-plane=dashboard] .source-dashboard{height:380px}.product-plane[data-plane=dashboard] .product-rail .menu-container{height:380px!important;min-height:380px!important}.product-plane[data-plane=dashboard] .menu-items{max-height:235px;overflow:hidden}.product-plane [data-message-id][hidden]{display:none!important}.product-plane .source-chat{height:720px!important}
/* The native components occupy a shorter viewport; their styles and layout stay native. */
html,body{height:100%;min-height:660px}#product-world{height:660px}.product-plane{height:540px}.product-content{height:540px}.product-plane .source-chat,.product-plane .kanban-demo-scene{height:540px!important}.product-plane .flow-fragment,.product-plane .flow-viewer-v2{height:540px!important}.product-rail .menu-container{height:540px!important;min-height:540px!important}.source-chat .chat-leftsidebar .whatsapp-scroll{max-height:388px}.product-plane[data-plane=dashboard]{top:50px}.product-plane[data-plane=dashboard] .source-dashboard{height:380px}

/* One composition, using excerpts of the native components. The shared
   backing groups the surfaces visually without inventing a flow connection. */
#solution-composition{position:absolute;top:22px;left:0;width:1280px;height:560px;visibility:hidden;opacity:0;pointer-events:none;border:1px solid #3b49735e;border-radius:25px;background:linear-gradient(125deg,#17244f,#111636 74%);box-shadow:0 24px 56px #0002;isolation:isolate}
#solution-composition::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(#9cbadd2b .8px,transparent .8px);background-size:14px 14px;mask-image:linear-gradient(90deg,transparent 56%,#000 76%);pointer-events:none}
#solution-composition .solution-chat-evidence{position:absolute;z-index:2;left:18px;top:19px;width:920px;height:565px;opacity:1;visibility:visible;transform:scale(.92);transform-origin:0 0;will-change:auto;border-radius:16px;box-shadow:0 12px 34px #02051e52}
#solution-composition .solution-chat-evidence .source-chat{width:920px;height:565px!important}
#solution-composition .solution-chat-evidence app-chat-list-sidebar{display:none!important}
#solution-composition .solution-chat-evidence .layout-wrapper{height:565px!important}
#solution-composition .solution-chat-evidence .chat-details-sidebar{height:565px!important;max-height:565px!important}
#solution-composition .solution-chat-evidence .source-chat .layout-wrapper>.user-chat.w-100{flex:0 0 620px!important;width:620px!important;min-width:0}
#solution-composition .solution-chat-evidence .source-chat .layout-wrapper>app-chat-details-sidebar{flex:0 0 300px!important;width:300px!important}
/* Let the native conversation fill the space between its header and composer. */
#solution-composition .solution-chat-evidence .source-chat .chat-conversation{height:100%!important;max-height:none!important;overflow:hidden!important}
#solution-composition .solution-chat-evidence .campos-personalizados{max-height:none;overflow:visible}
#solution-composition .solution-flow-evidence{position:absolute;z-index:1;left:884px;top:66px;width:378px;display:flex;flex-direction:column;gap:30px}
#solution-composition .solution-flow-evidence.flow-fragment{height:auto!important;background:transparent;overflow:visible}
#solution-composition .solution-node-evidence{position:relative;width:378px;height:147px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none}
#solution-composition .solution-node-evidence .ia-node{position:relative!important;left:auto!important;top:auto!important;width:440px!important;margin:0;transform:scale(.84);transform-origin:0 0;box-shadow:0 8px 22px #03071926}
#solution-composition .solution-node-evidence:last-child{height:242px}
#solution-composition .solution-context-evidence{display:none}
#solution-composition .ia-agent-constellation{display:none!important}
/* Fit the native footer into this excerpt without changing its type or scale. */
#solution-composition .ia-agent-pills{gap:4px;padding-inline:8px}
#solution-composition .ia-agent-pill{padding-inline:8px}

/* Mobile keeps the native chat, then pairs its CRM/data excerpts before the
   two equally scaled nodes. This avoids the four oversized stacked panels. */
body[data-mode="solution"][data-mobile="true"] #solution-composition{width:560px;height:1300px;border-radius:22px}
body[data-mode="solution"][data-mobile="true"] #solution-composition::before{mask-image:linear-gradient(transparent 52%,#000 65%)}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-chat-evidence{left:12px;top:12px;width:534px;height:480px;transform:none}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-chat-evidence .source-chat{width:534px;height:480px!important}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-chat-evidence .layout-wrapper{height:480px!important}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-chat-evidence app-chat-details-sidebar{display:none!important}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-chat-evidence .source-chat .layout-wrapper>.user-chat.w-100{flex:0 0 534px!important;width:534px!important}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-context-evidence{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;position:absolute;top:506px;left:12px;width:534px;height:242px;padding:22px;background:#fff;border:1px solid #dce4f3;border-radius:16px;overflow:hidden;color:#25324b;font-family:Inter,sans-serif}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-context-evidence.source-chat{width:534px!important;height:242px!important;min-height:0!important}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-context-evidence .icv2-perfil-row{display:none!important}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-context-evidence .crm-negociacoes{margin:0;min-width:0}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-context-fields{min-width:0}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-context-fields .campos-header{margin-bottom:16px}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-context-fields .campos-header label{font-size:13px;line-height:1.5}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-context-evidence .campos-personalizados{max-height:none}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-flow-evidence{left:60px;top:772px;width:440px;gap:30px}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-node-evidence{width:440px;height:171px;padding:0}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-node-evidence .ia-node{transform:none}
body[data-mode="solution"][data-mobile="true"] #solution-composition .solution-node-evidence:last-child{height:287px}

/* Hero framing: the conversation and its context remain native; the list of
   other contacts stays outside this introduction crop. Journey layout is unchanged. */
body[data-mode="solution"] .product-plane[data-plane="chat"]{width:980px}
body[data-mode="solution"] .product-plane[data-plane="chat"]>.product-content{width:920px}
body[data-mode="solution"] .product-plane[data-plane="chat"] .source-chat{width:920px!important}
body[data-mode="solution"] .product-plane[data-plane="chat"] app-chat-list-sidebar{display:none!important}
body[data-mode="solution"] .product-plane[data-plane="chat"] .source-chat .layout-wrapper>.user-chat.w-100{flex:0 0 620px!important;width:620px!important}
body[data-mode="solution"][data-mobile="true"] .product-plane[data-plane="chat"]{width:560px}
body[data-mode="solution"][data-mobile="true"] .product-plane[data-plane="chat"]>.product-content{width:500px}
body[data-mode="solution"][data-mobile="true"] .product-plane[data-plane="chat"] .source-chat{width:500px!important}
body[data-mode="solution"][data-mobile="true"] .product-plane[data-plane="chat"] app-chat-details-sidebar{display:none!important}
body[data-mode="solution"][data-mobile="true"] .product-plane[data-plane="chat"] .source-chat .layout-wrapper>.user-chat.w-100{flex:0 0 500px!important;width:500px!important}
/* Keep the illustrative one-line composer legible inside the smaller crop. */
body[data-mode="solution"] .source-chat textarea.message-input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The CRM example preserves the native conversation at a readable mobile crop. */
body[data-mode="crm"][data-mobile="true"] .product-plane[data-plane="chat"]{width:560px}
body[data-mode="crm"][data-mobile="true"] .product-plane[data-plane="chat"]>.product-content{width:500px}
body[data-mode="crm"][data-mobile="true"] .product-plane[data-plane="chat"] .source-chat{width:500px!important}
body[data-mode="crm"][data-mobile="true"] .product-plane[data-plane="chat"] app-chat-list-sidebar,
body[data-mode="crm"][data-mobile="true"] .product-plane[data-plane="chat"] app-chat-details-sidebar{display:none!important}
body[data-mode="crm"][data-mobile="true"] .product-plane[data-plane="chat"] .source-chat .layout-wrapper>.user-chat.w-100{flex:0 0 500px!important;width:500px!important;min-width:0}