:root{--demo-bg:#f3f7f5;--demo-surface:#fff;--demo-soft:#e8f1ed;--demo-ink:#183f35;--demo-muted:#647970;--demo-line:#dce7e0;--demo-accent:#1c6d51;--demo-on:#fff;--demo-shadow:0 8px 24px #193d2d08;color-scheme:light}
html[data-theme="dark"]{--demo-bg:#10201c;--demo-surface:#1b2c27;--demo-soft:#273f35;--demo-ink:#e8f2ec;--demo-muted:#acc4b6;--demo-line:#375247;--demo-accent:#a5d8b9;--demo-on:#153b28;--demo-shadow:0 8px 24px #0002;color-scheme:dark}
#workspace.demo-app{min-height:100vh;background:var(--demo-bg);color:var(--demo-ink);font:14px/1.7 "Segoe UI",Tahoma,Arial,sans-serif;color-scheme:inherit}
#workspace.demo-app *{box-sizing:border-box}
#workspace.demo-app [hidden]{display:none!important}
#workspace.demo-app a{color:inherit;text-decoration:none}
#workspace.demo-app button,#workspace.demo-app input,#workspace.demo-app select,#workspace.demo-app textarea{font:inherit}
#workspace.demo-app button{cursor:pointer}
#workspace.demo-app button:focus-visible,#workspace.demo-app a:focus-visible,#workspace.demo-app input:focus-visible,#workspace.demo-app textarea:focus-visible,#workspace.demo-app select:focus-visible{outline:3px solid var(--demo-accent);outline-offset:2px}
#workspace.demo-app .demo-header{position:sticky;top:0;z-index:30;min-height:72px;padding:12px 24px;background:var(--demo-surface);border-bottom:1px solid var(--demo-line);display:flex;align-items:center;justify-content:space-between;gap:16px}
#workspace.demo-app .brand{display:flex;align-items:center;gap:10px;min-width:0}
#workspace.demo-app .brand strong{display:block;font-size:14px;font-weight:600}
#workspace.demo-app .brand small{display:block;color:var(--demo-muted);font-size:11px}
#workspace.demo-app .brand-mark{width:37px;height:37px;display:grid;place-items:center;background:var(--demo-accent);color:var(--demo-on);border-radius:11px;font-weight:600;flex-shrink:0}
#workspace.demo-app .top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#workspace.demo-app .icon-button{min-height:38px;padding:7px 11px;display:inline-flex;align-items:center;gap:6px;background:var(--demo-surface);color:var(--demo-ink);border:1px solid var(--demo-line);border-radius:9px;font-size:12px}
#workspace.demo-app .icon-button.primary,#workspace.demo-app .btn{background:var(--demo-accent);color:var(--demo-on);border-color:transparent}
#workspace.demo-app .icon-button:hover,#workspace.demo-app .secondary:hover,#workspace.demo-app .text-button:hover{background:var(--demo-soft)}
#workspace.demo-app .icon-button.primary:hover,#workspace.demo-app .btn:hover{filter:brightness(.96)}
#workspace.demo-app .badge{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;background:var(--demo-soft);border:1px solid var(--demo-line);border-radius:20px;color:var(--demo-muted);font-size:10px;white-space:nowrap}
#workspace.demo-app .live-dot,#workspace.demo-app .sample-dot{width:7px;height:7px;border-radius:50%;background:#b7873e}
#workspace.demo-app .demo-shell{display:grid;grid-template-columns:242px minmax(0,1fr);min-height:calc(100vh - 72px)}
#workspace.demo-app .sidebar{position:sticky!important;inset:auto!important;align-self:start;width:auto!important;height:calc(100vh - 72px);min-height:560px;padding:16px 12px;background:var(--demo-surface);border-inline-end:1px solid var(--demo-line);box-shadow:none!important;overflow-y:auto;display:flex;flex-direction:column;z-index:4}
#workspace.demo-app .sidebar[hidden]{display:flex!important}
#workspace.demo-app .sidebar .nav-dismiss{display:none}
#workspace.demo-app .store-context{padding:10px 8px 15px;margin-bottom:9px;border-bottom:1px solid var(--demo-line)}
#workspace.demo-app .store-context strong{display:block;margin:5px 0 9px;overflow-wrap:anywhere;font-size:14px}
#workspace.demo-app .muted{color:var(--demo-muted)}
#workspace.demo-app .small{font-size:11px}
#workspace.demo-app .sidebar nav{display:grid;gap:3px}
#workspace.demo-app .sidebar nav button{width:100%;min-height:40px;padding:7px 10px;display:flex;align-items:center;gap:10px;text-align:start;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--demo-muted);font-size:12px}
#workspace.demo-app .sidebar nav button>span:first-child{width:20px;text-align:center;font-size:17px;line-height:1;color:var(--demo-muted)}
#workspace.demo-app .sidebar nav button:hover{background:var(--demo-bg);color:var(--demo-ink)}
#workspace.demo-app .sidebar nav button.active{background:var(--demo-soft);color:var(--demo-accent);font-weight:600}
#workspace.demo-app .nav-group-label{padding:12px 10px 4px;color:var(--demo-muted);font-size:10px;font-weight:600}
#workspace.demo-app .nav-group-secondary{border-top:1px solid var(--demo-line);margin-top:7px}
#workspace.demo-app .sidebar-footer{margin-top:auto;padding:16px 8px 4px;display:grid;gap:9px}
#workspace.demo-app .sidebar-footer .btn{min-height:40px}
#workspace.demo-app .sidebar-footer .signin{text-align:center;color:var(--demo-muted);font-size:11px;text-decoration:underline}
#workspace.demo-app .content{width:100%;max-width:1510px;margin:0 auto;padding:24px 28px 40px;min-width:0}
#workspace.demo-app .nav-entry{display:flex;align-items:center;gap:11px;margin-bottom:19px}
#workspace.demo-app .nav-entry .crumb{margin:0;color:var(--demo-muted);font-size:12px}
#workspace.demo-app .nav-entry button{display:none}
#workspace.demo-app .page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
#workspace.demo-app .overline{color:var(--demo-accent);font-size:10px;font-weight:600}
#workspace.demo-app h1,#workspace.demo-app h2,#workspace.demo-app h3{font-weight:500;line-height:1.45}
#workspace.demo-app h1{font-size:25px;margin:3px 0 4px}
#workspace.demo-app h2{font-size:18px;margin:0 0 5px}
#workspace.demo-app h3{font-size:15px;margin:0}
#workspace.demo-app p{margin:0 0 10px}
#workspace.demo-app .page-heading p,#workspace.demo-app .panel-heading p{font-size:11px;color:var(--demo-muted);margin:3px 0 0;line-height:1.7}
#workspace.demo-app .secondary,#workspace.demo-app .text-button{min-height:36px;padding:7px 11px;border:1px solid var(--demo-line);border-radius:8px;background:var(--demo-surface);color:var(--demo-muted);font-size:11px}
#workspace.demo-app .text-button{background:var(--demo-soft);color:var(--demo-accent);border-color:transparent}
#workspace.demo-app .btn{min-height:40px;padding:9px 15px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
#workspace.demo-app .demo-notice{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:11px 14px;background:var(--demo-soft);border:1px solid var(--demo-line);border-inline-start:3px solid var(--demo-accent);border-radius:10px}
#workspace.demo-app .demo-notice>span{color:var(--demo-accent);font-size:16px;line-height:1.5}
#workspace.demo-app .demo-notice p{color:var(--demo-muted);font-size:10px;line-height:1.8;margin:0}
#workspace.demo-app .current-business{display:flex;align-items:center;gap:11px;padding:4px 1px 17px}
#workspace.demo-app .current-business>span{width:38px;height:38px;display:grid;place-items:center;background:var(--demo-soft);color:var(--demo-accent);border-radius:10px;font-size:19px;flex-shrink:0}
#workspace.demo-app .current-business>div{min-width:0;flex:1}
#workspace.demo-app .current-business strong{display:block;overflow-wrap:anywhere;font-size:14px}
#workspace.demo-app .current-business small{display:block;color:var(--demo-muted);font-size:10px}
#workspace.demo-app .select-label{display:flex;align-items:center;gap:8px;color:var(--demo-muted);font-size:10px;white-space:nowrap}
#workspace.demo-app select,#workspace.demo-app input:not([type=checkbox]),#workspace.demo-app textarea{min-width:0;padding:9px 11px;border:1px solid var(--demo-line);border-radius:8px;background:var(--demo-surface);color:var(--demo-ink);font-size:12px}
#workspace.demo-app .select-label select{min-width:150px;max-width:210px}
#workspace.demo-app .demo-panel,#workspace.demo-app .chat-panel{background:var(--demo-surface);border:1px solid var(--demo-line);border-radius:13px;min-width:0;box-shadow:var(--demo-shadow)}
#workspace.demo-app .overview-panel{padding:0;background:transparent;border:0;box-shadow:none}
#workspace.demo-app .panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
#workspace.demo-app .panel{padding:17px;margin:0;background:var(--demo-surface);border:1px solid var(--demo-line);border-radius:12px;min-width:0}
#workspace.demo-app .overview-panel>.panel-heading{padding:0 1px}
#workspace.demo-app .demo-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
#workspace.demo-app .demo-metrics .metric{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;background:var(--demo-surface);border:1px solid var(--demo-line);border-radius:12px;min-width:0}
#workspace.demo-app .demo-metrics .metric>span{font-size:10px;line-height:1.6}
#workspace.demo-app .demo-metrics .metric strong{font-size:23px;font-weight:500;line-height:1.4}
#workspace.demo-app .demo-metrics .metric small{font-size:9px}
#workspace.demo-app .sample-data-line{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:0 2px 15px;color:var(--demo-muted);font-size:9px}
#workspace.demo-app .sample-data-line strong{color:var(--demo-ink);font-size:11px;font-weight:600}
#workspace.demo-app .sample-data-line .badge{font-size:9px}
#workspace.demo-app .overview-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;margin-bottom:14px}
#workspace.demo-app .setup-panel .row,#workspace.demo-app .demo-inbox-preview .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
#workspace.demo-app .setup-row{width:100%;display:flex;align-items:center;gap:10px;padding:10px 2px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--demo-line)!important;border-radius:0!important;text-align:start;color:var(--demo-ink);min-height:58px!important}
#workspace.demo-app .setup-row:last-child{border-bottom:0!important}
#workspace.demo-app .setup-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--demo-soft);color:var(--demo-accent);flex-shrink:0}
#workspace.demo-app .setup-row>span:nth-child(2){min-width:0;flex:1}
#workspace.demo-app .setup-row strong,#workspace.demo-app .setup-row small{display:block}
#workspace.demo-app .setup-row strong{font-size:11px;font-weight:600}
#workspace.demo-app .setup-row small{font-size:9px;color:var(--demo-muted);line-height:1.5}
#workspace.demo-app .setup-state{color:var(--demo-accent);font-size:10px;white-space:nowrap}
#workspace.demo-app .preview-message{display:flex;align-items:center;gap:9px;padding:14px 0 12px;border-top:1px solid var(--demo-line);border-bottom:1px solid var(--demo-line)}
#workspace.demo-app .sample-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#e5eee9;color:#537765;font-size:11px;flex-shrink:0}
#workspace.demo-app .avatar-blue{background:#e8edf7;color:#657ba1}
#workspace.demo-app .preview-message>div{min-width:0;flex:1}
#workspace.demo-app .preview-message strong,#workspace.demo-app .preview-message small{display:block}
#workspace.demo-app .preview-message strong{font-size:10px;font-weight:600}
#workspace.demo-app .preview-message small{font-size:9px;color:var(--demo-muted)}
#workspace.demo-app .sample-tag{padding:3px 6px;background:var(--demo-soft);color:var(--demo-muted);border-radius:5px;font-size:8px;white-space:nowrap}
#workspace.demo-app .demo-no-latency{padding-top:10px;color:var(--demo-muted);font-size:9px}
#workspace.demo-app .template-panel{padding:17px;margin-bottom:14px}
#workspace.demo-app .template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#workspace.demo-app .template-card{min-height:52px;padding:8px 10px!important;display:flex;align-items:center;gap:8px;text-align:start;background:var(--demo-surface)!important;color:var(--demo-ink)!important;border:1px solid var(--demo-line)!important;border-radius:9px!important}
#workspace.demo-app .template-card>span{width:27px;height:27px;display:grid;place-items:center;background:var(--demo-soft);color:var(--demo-accent);border-radius:7px;font-size:14px;flex-shrink:0}
#workspace.demo-app .template-card strong{font-size:10px;font-weight:500;line-height:1.4}
#workspace.demo-app .template-card.active{border-color:var(--demo-accent)!important;background:var(--demo-soft)!important}
#workspace.demo-app .conversation-banner{padding:12px 14px;margin-bottom:14px;border:1px solid var(--demo-line);border-inline-start:3px solid var(--demo-accent);border-radius:9px;background:var(--demo-soft)}
#workspace.demo-app .conversation-banner strong,#workspace.demo-app .conversation-banner span{display:block}
#workspace.demo-app .conversation-banner strong{font-size:11px;font-weight:600}
#workspace.demo-app .conversation-banner span{margin-top:4px;color:var(--demo-muted);font-size:10px}
#workspace.demo-app .conversation-layout{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(340px,1.25fr);gap:14px;align-items:start}
#workspace.demo-app .example-thread-list{padding:13px;background:var(--demo-surface);border:1px solid var(--demo-line);border-radius:12px}
#workspace.demo-app .thread-list-head{display:flex;justify-content:space-between;gap:6px;padding:2px 2px 11px;border-bottom:1px solid var(--demo-line)}
#workspace.demo-app .thread-list-head strong{font-size:11px}
#workspace.demo-app .thread-list-head span{font-size:9px}
#workspace.demo-app .thread-item{width:100%;display:flex;align-items:center;gap:8px;padding:11px 5px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--demo-line)!important;border-radius:0!important;text-align:start;color:var(--demo-ink)}
#workspace.demo-app .thread-item>span:nth-child(2){min-width:0;flex:1}
#workspace.demo-app .thread-item strong,#workspace.demo-app .thread-item small{display:block}
#workspace.demo-app .thread-item strong{font-size:10px;font-weight:600}
#workspace.demo-app .thread-item small{font-size:9px;color:var(--demo-muted)}
#workspace.demo-app .thread-item.selected{background:var(--demo-soft)!important;border-radius:8px!important}
#workspace.demo-app .thread-list-note{padding-top:11px;color:var(--demo-muted);font-size:9px;line-height:1.7}
#workspace.demo-app .chat-panel{overflow:hidden}
#workspace.demo-app .chat-heading{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--demo-line)}
#workspace.demo-app .bot-icon{width:34px;height:34px;display:grid;place-items:center;background:var(--demo-accent);color:var(--demo-on);border-radius:10px;font-size:18px}
#workspace.demo-app .chat-heading h2{font-size:13px;margin:0}
#workspace.demo-app .chat-heading div>span{display:block;color:var(--demo-muted);font-size:9px}
#workspace.demo-app .assistant-source{padding:8px 15px 0;color:var(--demo-muted);font-size:9px}
#workspace.demo-app .suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 3px}
#workspace.demo-app .suggestions button{padding:5px 8px;background:var(--demo-soft);color:var(--demo-accent);border:1px solid var(--demo-line);border-radius:18px;font-size:9px}
#workspace.demo-app .messages{height:280px;overflow:auto;padding:12px 15px;display:flex;flex-direction:column;gap:9px}
#workspace.demo-app .message{max-width:92%;padding:9px 11px;border-radius:11px;font-size:10px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;flex-shrink:0}
#workspace.demo-app .message.user{align-self:flex-start;background:var(--demo-bg);border:1px solid var(--demo-line);border-end-start-radius:3px}
#workspace.demo-app .message.assistant{align-self:flex-end;background:var(--demo-soft);border-end-end-radius:3px}
#workspace.demo-app .message-source{display:block;margin-top:5px;color:var(--demo-muted);font-size:8px}
#workspace.demo-app .welcome{padding:30px 12px;color:var(--demo-muted);text-align:center;font-size:10px;line-height:1.8}
#workspace.demo-app .chat-compose{display:flex;align-items:center;gap:8px;margin:8px 14px;padding:4px 5px;border:1px solid var(--demo-line);border-radius:24px;background:var(--demo-bg)}
#workspace.demo-app .chat-compose input{flex:1;width:100%;border:0!important;background:transparent!important;box-shadow:none;min-height:34px}
#workspace.demo-app .send-button{width:32px;height:32px;min-height:32px;padding:0!important;display:grid;place-items:center;background:var(--demo-accent)!important;color:var(--demo-on)!important;border:0!important;border-radius:50%!important;font-size:20px}
#workspace.demo-app .chat-footnote{padding:0 14px 13px;color:var(--demo-muted);text-align:center;font-size:8px;margin:0}
#workspace.demo-app form label{display:grid;gap:6px;margin-bottom:13px;color:var(--demo-muted);font-size:11px}
#workspace.demo-app textarea{resize:vertical;min-height:65px}
#workspace.demo-app .form-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#workspace.demo-app .faq-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px}
#workspace.demo-app .faq-heading h3{font-size:14px}
#workspace.demo-app .field-help{font-size:10px;color:var(--demo-muted);margin:7px 0 13px}
#workspace.demo-app .faq-row,#workspace.demo-app .product-row{padding:13px;margin-bottom:12px;border:1px solid var(--demo-line);border-radius:10px;background:var(--demo-bg)}
#workspace.demo-app .row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--demo-muted);font-size:11px}
#workspace.demo-app .remove-button{background:transparent;border:0;color:var(--demo-muted);text-decoration:underline;font-size:10px}
#workspace.demo-app .save-status{display:block;margin-top:9px;color:var(--demo-accent);font-size:10px}
#workspace.demo-app .offline-panel{max-width:860px;padding:28px}
#workspace.demo-app .offline-icon{width:38px;height:38px;display:grid;place-items:center;margin-bottom:12px;border-radius:11px;background:var(--demo-soft);color:var(--demo-accent);font-size:18px}
#workspace.demo-app .offline-panel h2{margin:5px 0 8px}
#workspace.demo-app .offline-panel>p{max-width:660px;color:var(--demo-muted);font-size:12px;line-height:1.9}
#workspace.demo-app .offline-notice{margin:14px 0}
#workspace.demo-app .skip{position:absolute;top:-100px;z-index:40;padding:10px;background:var(--demo-surface)}
#workspace.demo-app .skip:focus{top:0}

@media(max-width:1080px){#workspace.demo-app .demo-shell{grid-template-columns:220px minmax(0,1fr)}#workspace.demo-app .content{padding:21px}#workspace.demo-app .overview-grid{grid-template-columns:1fr}#workspace.demo-app .template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){#workspace.demo-app .demo-header{min-height:64px;padding:10px 13px}#workspace.demo-app .demo-header .brand strong{font-size:12px}#workspace.demo-app .demo-header .brand small{font-size:9px}#workspace.demo-app .brand-mark{width:32px;height:32px}#workspace.demo-app .top-actions{gap:5px}#workspace.demo-app .demo-preview-badge{display:none}#workspace.demo-app .top-actions .icon-button{padding:6px 8px;min-height:35px;font-size:10px}#workspace.demo-app .demo-shell{display:block;min-height:calc(100vh - 64px)}#workspace.demo-app .sidebar,#workspace.demo-app .sidebar[hidden]{position:fixed!important;inset-block:64px 0!important;inset-inline-start:0!important;width:min(300px,88vw)!important;height:auto!important;min-height:0;z-index:45;display:flex!important;transform:translateX(105%);visibility:hidden;transition:transform .18s ease,visibility .18s ease;box-shadow:0 0 0 100vmax #10201c77!important}#workspace.demo-app .sidebar:not([hidden]){transform:translateX(0);visibility:visible}#workspace.demo-app .sidebar .nav-dismiss{display:block;align-self:flex-end;min-height:34px;padding:5px 8px;border:1px solid var(--demo-line);border-radius:7px;background:var(--demo-surface);color:var(--demo-muted);font-size:10px}#workspace.demo-app .content{padding:15px 14px 28px}#workspace.demo-app .nav-entry{margin-bottom:12px}#workspace.demo-app .nav-entry button{display:inline-flex}#workspace.demo-app .page-heading{align-items:flex-start;flex-wrap:wrap}#workspace.demo-app h1{font-size:21px}#workspace.demo-app .page-heading p{max-width:600px}#workspace.demo-app .current-business{flex-wrap:wrap}#workspace.demo-app .current-business>div{flex:1}#workspace.demo-app .select-label{width:100%}#workspace.demo-app .select-label select{flex:1;max-width:none}#workspace.demo-app .demo-metrics{gap:7px}#workspace.demo-app .demo-metrics .metric{padding:10px 9px}#workspace.demo-app .demo-metrics .metric>span{font-size:9px}#workspace.demo-app .demo-metrics .metric strong{font-size:20px}#workspace.demo-app .template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#workspace.demo-app .conversation-layout{grid-template-columns:1fr}#workspace.demo-app .example-thread-list{order:2}#workspace.demo-app .chat-panel{order:1}#workspace.demo-app .messages{height:250px}#workspace.demo-app .form-columns{grid-template-columns:1fr}}
@media(max-width:420px){#workspace.demo-app .brand small{display:none}#workspace.demo-app .demo-header .top-actions .icon-button{padding:6px;font-size:9px}#workspace.demo-app .demo-metrics .metric{padding:8px 6px}#workspace.demo-app .demo-metrics .metric>span{font-size:8px}#workspace.demo-app .demo-metrics .metric strong{font-size:18px}#workspace.demo-app .demo-metrics .metric small{font-size:8px}#workspace.demo-app .page-heading .secondary{font-size:9px}}
@media(prefers-reduced-motion:reduce){#workspace.demo-app *{scroll-behavior:auto!important;transition:none!important}}