/* ChatPipe product design system. Product preferences never alter published app themes. */
html:root,html[data-theme="light"]{
 --cp-bg:#f3f6f5;--cp-surface:#ffffff;--cp-elevated:#f8faf9;--cp-hover:#eaf1ed;--cp-text:#182b27;--cp-secondary:#40574e;--cp-muted:#60736b;--cp-border:#dce5df;--cp-border-strong:#b8c8be;
 --cp-accent:#077753;--cp-accent-hover:#066b4c;--cp-accent-soft:#e3f5ec;--cp-on-accent:#ffffff;--cp-danger:#b42336;--cp-danger-soft:#fff0f0;--cp-focus:#158a65;
 --cp-shadow:0 4px 18px #16372c08;--cp-shadow-float:0 16px 48px #16372c20;--cp-radius:12px;--cp-font:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif;
}
html[data-theme="dark"]{
 --cp-bg:#0b1421;--cp-surface:#111e2d;--cp-elevated:#172638;--cp-hover:#20344a;--cp-text:#ecf3fa;--cp-secondary:#c1cedc;--cp-muted:#a0b2c7;--cp-border:#2a3c50;--cp-border-strong:#486079;
 --cp-accent:#39d8a1;--cp-accent-hover:#65e5b8;--cp-accent-soft:#153c33;--cp-on-accent:#08291f;--cp-danger:#ff9d9d;--cp-danger-soft:#46242d;--cp-focus:#6ae6b9;
 --cp-shadow:0 4px 18px #0002;--cp-shadow-float:0 16px 48px #0006;
}
html:root{
 --bg:var(--cp-bg);--surface:var(--cp-surface);--surface-hover:var(--cp-hover);--surface-raised:var(--cp-elevated);--border:var(--cp-border);--border-strong:var(--cp-border-strong);
 --text:var(--cp-text);--text-secondary:var(--cp-secondary);--text-muted:var(--cp-muted);--emerald:var(--cp-accent);--emerald-dark:var(--cp-accent-hover);--emerald-light:var(--cp-accent-soft);--emerald-medium:var(--cp-accent-soft);
 --shadow-xs:0 1px 2px #17362906;--shadow-sm:var(--cp-shadow);--shadow-md:var(--cp-shadow);--shadow-lg:var(--cp-shadow-float);--shadow-xl:var(--cp-shadow-float);
 --text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:15px;--text-lg:16px;--text-xl:18px;--text-2xl:22px;--text-3xl:28px;--text-4xl:34px;--top-h:64px;
 --radius-xs:6px;--radius-sm:9px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;
 color-scheme:light;background:var(--cp-bg);scrollbar-color:var(--cp-border-strong) transparent;
}
html[data-theme="dark"]{color-scheme:dark}
body{background:var(--cp-bg);color:var(--cp-text);font-family:var(--cp-font);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:var(--cp-font)}
:where(button,[role=button],a,input,textarea,select,summary):focus-visible{outline:3px solid var(--cp-focus)!important;outline-offset:3px}
:where(button,[role=button],summary){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(button:not(.toggle):not(.config-toggle)){min-height:40px;border-radius:9px;font-size:14px;font-weight:600;line-height:1.25;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}
:where(button):disabled{cursor:not-allowed;opacity:.48}
:where(button:not(:disabled)):active{filter:brightness(.97)}
:where(.tb-btn,.btn-back,.preview-toggle,.btn-secondary,.btn-settings,.btn-action,.modal-btn-cancel,.page-list-item-btn,.comp-toolbar-btn,.cp-panel-heading button,.cp-mobile-selection button,.cp-toolbar-more>summary,.cp-editor-actions>summary,.wf-step-card button){background:var(--cp-surface);color:var(--cp-secondary);border:1px solid var(--cp-border);box-shadow:0 1px 2px #00000004;padding:9px 13px;gap:7px}
:where(.tb-btn,.btn-back,.preview-toggle,.btn-secondary,.btn-settings,.btn-action,.modal-btn-cancel,.page-list-item-btn,.cp-panel-heading button,.cp-mobile-selection button,.cp-toolbar-more>summary,.cp-editor-actions>summary,.wf-step-card button):hover{background:var(--cp-hover);border-color:var(--cp-border-strong);color:var(--cp-text)}
:where(.tb-btn-primary,.btn-primary,.btn-run-query,.modal-btn-primary,.auth-btn,.cta-btn,.chat-send-btn,.btn-add-query,.wf-connect-form>button,.btn-save){background:var(--cp-accent);color:var(--cp-on-accent);border:1px solid var(--cp-accent);padding:10px 16px;border-radius:9px;font-size:14px;font-weight:650;box-shadow:0 2px 3px #065f4612}
:where(.tb-btn-primary,.btn-primary,.btn-run-query,.modal-btn-primary,.auth-btn,.cta-btn,.chat-send-btn,.btn-add-query,.wf-connect-form>button,.btn-save):hover{background:var(--cp-accent-hover);border-color:var(--cp-accent-hover)}
:where(.btn-danger,.danger,.modal-btn-danger){color:var(--cp-danger);background:var(--cp-danger-soft);border:1px solid color-mix(in srgb,var(--cp-danger) 25%,transparent)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select){min-height:40px;background:var(--cp-elevated);color:var(--cp-text);border:1px solid var(--cp-border);border-radius:9px;padding:10px 12px;font-size:14px;box-sizing:border-box;line-height:1.5}
:where(input,textarea)::placeholder{color:var(--cp-muted);opacity:1}
:where(input,textarea,select):focus{border-color:var(--cp-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--cp-focus) 12%,transparent)}
:where(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--cp-accent)}
:where(.modal,.modal-box,.ai-modal-box,.cp-toolbar-menu,.cp-editor-actions-menu){background:var(--cp-surface);color:var(--cp-text);border:1px solid var(--cp-border);border-radius:18px;box-shadow:var(--cp-shadow-float)}
:where(.modal-header,.modal-footer,.modal-actions){border-color:var(--cp-border)}
:where(.modal-title,.modal-header h2){font-size:20px;font-weight:700;letter-spacing:-.025em}
:where(.modal-overlay){background:rgb(5 16 25 / .55);backdrop-filter:blur(4px)}
:where(.toast,.toast-container>div){background:var(--cp-surface);color:var(--cp-text);border:1px solid var(--cp-border);border-inline-start:3px solid var(--cp-accent);box-shadow:var(--cp-shadow-float);border-radius:12px}
.cp-theme-slot{display:flex;align-items:center;flex-shrink:0}
.cp-theme-toggle{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:40px;white-space:nowrap;padding:9px 12px!important;border:1px solid var(--cp-border)!important;border-radius:9px!important;background:var(--cp-elevated)!important;color:var(--cp-text)!important;font:600 13px/1.25 var(--cp-font)!important;cursor:pointer;flex-shrink:0}
.cp-theme-toggle:hover{background:var(--cp-hover)!important;border-color:var(--cp-border-strong)!important}
.cp-theme-toggle svg{width:18px;height:18px;flex-shrink:0;display:block}
.cp-theme-label{pointer-events:none}.cp-line-icon{width:20px;height:20px;display:block;flex-shrink:0}
.cp-editor-label{display:none}
/* Editor workspaces use one hierarchy and one set of controls. */
:is(.builder-layout,.wf-layout,.ab-layout) .top-bar{background:var(--cp-surface);border-bottom:1px solid var(--cp-border);box-shadow:0 2px 12px #16372c04}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.app-name-input,.wf-name-input,.agent-name-input){font-size:18px!important;font-weight:700;letter-spacing:-.025em;background:transparent;border-color:transparent;box-shadow:none;color:var(--cp-text)}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.app-name-input,.wf-name-input,.agent-name-input):focus{background:var(--cp-elevated);border-color:var(--cp-border-strong)}
:is(.builder-layout,.wf-layout,.ab-layout) .btn-back{border:0;background:transparent;color:var(--cp-muted)}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.tb-btn,.preview-toggle){color:var(--cp-secondary);background:var(--cp-surface);border:1px solid var(--cp-border);min-height:40px;font-size:13px;padding:9px 12px}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.tb-btn-primary,.btn-run-query){background:var(--cp-accent);color:var(--cp-on-accent);border:1px solid var(--cp-accent)}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.left-panel,.right-panel,.bottom-panel){background:var(--cp-surface);border-color:var(--cp-border)}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.panel-header,.bottom-header,.left-panel-tabs,.main-tabs){background:var(--cp-surface);border-color:var(--cp-border);padding:12px}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.panel-title,.category-label,.inspector-section-title,.tools-category-label){font-size:11px;font-weight:750;letter-spacing:.08em;color:var(--cp-muted);text-transform:uppercase}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.inspector-label,.config-label,.config-toggle-label){font-size:13px;font-weight:600;color:var(--cp-secondary);margin-bottom:7px}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.search-input,.inspector-input,.inspector-select,.inspector-textarea,.config-input,.config-textarea,.config-select,.query-code-editor,.transformer-editor,.chat-input){background:var(--cp-elevated);border:1px solid var(--cp-border);color:var(--cp-text);border-radius:9px}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.inspector-hint,.config-hint){color:var(--cp-muted);line-height:1.6}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.inspector-section,.config-section){padding:20px;border-color:var(--cp-border)}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.inspector-tab,.main-tab,.left-panel-tab,.query-type-tab,.device-btn){font-size:13px;font-weight:600;color:var(--cp-muted);background:transparent;border-radius:7px;min-height:40px}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.inspector-tab,.main-tab,.left-panel-tab,.query-type-tab,.device-btn).active{color:var(--cp-accent);background:var(--cp-accent-soft);border-bottom-color:transparent}
.builder-layout .left-panel-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:10px}
.builder-layout .left-panel-tab{min-width:0;padding:8px 4px;text-align:center;white-space:normal;line-height:1.3}
.builder-layout .component-list{padding:16px}
.builder-layout .component-category{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:22px}
.builder-layout .category-label{grid-column:1/-1;margin:0 0 2px;padding:0}
.builder-layout .component-item{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:12px;min-height:94px;margin:0;border:1px solid var(--cp-border);border-radius:10px;background:var(--cp-surface);color:var(--cp-text);transition:background .16s,border-color .16s,box-shadow .16s;cursor:pointer}
.builder-layout .component-item:hover{background:var(--cp-elevated);border-color:var(--cp-accent);box-shadow:0 2px 8px #087f5b0b}
.builder-layout .component-item .ci-icon{width:30px;height:30px;padding:5px;border-radius:7px;background:var(--cp-accent-soft);color:var(--cp-accent);font-size:16px}
.builder-layout .component-item .ci-name{font-size:12px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.builder-layout .page-tab-bar,.builder-layout .frame-selector-bar{background:var(--cp-surface);border-color:var(--cp-border);padding-inline:16px;gap:6px}
.builder-layout .page-tab{font-weight:600;border-radius:7px;min-height:36px;border-bottom:0;padding:8px 12px}
.builder-layout .page-tab.active{color:var(--cp-accent);background:var(--cp-accent-soft)}
.builder-layout .frame-btn{font-size:12px;min-height:34px;border:1px solid transparent;color:var(--cp-secondary);padding:6px 10px;border-radius:7px}
.builder-layout .frame-btn.active{background:var(--cp-accent-soft);border-color:color-mix(in srgb,var(--cp-accent) 22%,transparent);color:var(--cp-accent)}
.builder-layout .frame-btn.hidden-frame{color:var(--cp-muted);opacity:.75;text-decoration:none}
.builder-layout .frame-toggle-eye{background:transparent;color:var(--cp-muted);border:1px solid var(--cp-border);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px}
.builder-layout .canvas-area{background:var(--cp-bg);padding:28px}
.builder-layout .canvas-frames{border:0;box-shadow:0 0 0 1px var(--cp-border),var(--cp-shadow);border-radius:14px}
.builder-layout:not(.preview-mode) .canvas-frame{background:var(--cp-surface);color:var(--cp-text)}
.builder-layout:not(.preview-mode) .canvas-frame.active-frame:before{opacity:.45;background-image:radial-gradient(var(--cp-border-strong) 1px,transparent 1px)}
.builder-layout .canvas-component.selected{outline-color:var(--cp-accent)}
.builder-layout .canvas-empty-text{font-size:20px;font-weight:650;letter-spacing:-.025em;color:var(--cp-text)}
.builder-layout .canvas-empty-sub{font-size:14px;max-width:240px;line-height:1.6;color:var(--cp-muted)}
.builder-layout .canvas-empty-icon{opacity:1;color:var(--cp-accent)}
.builder-layout .query-list{background:var(--cp-elevated);padding:10px}
.builder-layout .query-list-item{border-radius:8px;padding:12px}
.builder-layout .query-editor-header{background:var(--cp-surface);border-color:var(--cp-border);padding:10px 12px}
.builder-layout .query-result-area{background:var(--cp-surface);color:var(--cp-text);border-color:var(--cp-border);font-size:13px}
.cp-connection-status{font-weight:600;color:var(--cp-muted)!important;display:flex;align-items:center;gap:6px}
.cp-connection-status[data-connected=true]::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cp-accent);flex-shrink:0}
.cp-mobile-canvas-tools{background:var(--cp-elevated);border-color:var(--cp-border)}
.cp-mobile-canvas-tools span{color:var(--cp-secondary)}
.cp-mobile-canvas-tools button{background:var(--cp-surface);color:var(--cp-secondary);border-color:var(--cp-border);border-radius:8px;font-weight:600}
.cp-mobile-canvas-tools button[aria-pressed=true]{color:var(--cp-accent)!important;background:var(--cp-accent-soft)!important;border-color:var(--cp-accent)!important}
.cp-mobile-selection{padding:16px;gap:12px;background:var(--cp-elevated)}
.cp-mobile-selection strong{font-size:15px;color:var(--cp-text)}
.cp-mobile-selection small{color:var(--cp-muted);line-height:1.6}
.cp-mobile-selection label{font-size:13px;font-weight:600;color:var(--cp-secondary)}
.cp-mobile-selection input{background:var(--cp-surface)!important;border-color:var(--cp-border)!important;color:var(--cp-text)!important}
.cp-mobile-selection-actions button{background:var(--cp-surface);color:var(--cp-secondary);border-color:var(--cp-border);font-size:13px;font-weight:600}
.cp-panel-heading{background:var(--cp-surface);border-color:var(--cp-border);padding:12px 16px;font-size:17px;font-weight:650}
.cp-panel-heading button{background:var(--cp-elevated);border-color:var(--cp-border);color:var(--cp-secondary)}
.wf-layout .canvas-area{background-color:var(--cp-bg);background-image:radial-gradient(var(--cp-border-strong) .7px,transparent .7px);background-size:20px 20px}
.wf-layout .block-item{margin:6px 12px;padding:12px;border:1px solid var(--cp-border);border-radius:10px;background:var(--cp-surface);min-height:62px;gap:12px}
.wf-layout .block-item:hover{border-color:var(--cp-accent);background:var(--cp-elevated)}
.wf-layout :is(.bi-icon,.wf-node-icon){background:var(--cp-accent-soft)!important;color:var(--cp-accent);border-radius:8px;padding:6px;width:32px;height:32px}
.wf-layout .wf-node{background:var(--cp-surface);border:1px solid var(--cp-border-strong);border-radius:12px;box-shadow:var(--cp-shadow)}
.wf-layout .wf-node.selected{border-color:var(--cp-accent);box-shadow:0 0 0 3px var(--cp-accent-soft)}
.wf-layout :is(.wf-node-title,.wf-step-card h3){font-weight:650;color:var(--cp-text)}
.wf-layout .wf-step-card{border-color:var(--cp-border);box-shadow:var(--cp-shadow);border-radius:14px;padding:18px}
.wf-layout .wf-step-card p{color:var(--cp-secondary)}
.wf-layout .wf-mobile-viewbar{border:1px solid var(--cp-border);box-shadow:var(--cp-shadow);padding:5px;gap:5px}
.wf-layout .wf-mobile-viewbar button{background:transparent;color:var(--cp-secondary)}
.wf-layout .wf-mobile-viewbar button[aria-pressed=true]{background:var(--cp-accent-soft);color:var(--cp-accent)}
.wf-layout .zoom-controls{background:var(--cp-surface);border:1px solid var(--cp-border);box-shadow:var(--cp-shadow);padding:5px;border-radius:10px}
.wf-layout .zoom-btn{color:var(--cp-text);background:var(--cp-surface);border-radius:7px}
.ab-layout :is(.agent-item,.tool-card,.eval-card){border:1px solid var(--cp-border);border-radius:12px;margin:8px 12px;background:var(--cp-surface);box-shadow:var(--cp-shadow)}
.ab-layout .agent-item.active{background:var(--cp-accent-soft);border-color:var(--cp-accent)}
.ab-layout .agent-item-icon{background:var(--cp-accent-soft);color:var(--cp-accent)}
.ab-layout .chat-messages{background:var(--cp-bg);padding:18px}
.ab-layout .chat-msg.assistant{background:var(--cp-surface);border:1px solid var(--cp-border);color:var(--cp-text);border-radius:14px;box-shadow:var(--cp-shadow)}
.ab-layout .chat-msg.user{background:var(--cp-accent-soft);color:var(--cp-text);border-radius:14px}
.ab-layout .chat-input-area{background:var(--cp-surface);border-color:var(--cp-border)}
:is(.builder-layout,.wf-layout,.ab-layout) :is(.cp-live input,.cp-live textarea,.cp-live select){background:var(--cp-elevated);color:var(--cp-text);border-color:var(--cp-border)}
#cp-mode-toggle::before{content:none}
#cp-mode-toggle{background:var(--cp-surface);color:var(--cp-secondary);border:1px solid var(--cp-border);box-shadow:var(--cp-shadow)}
@media(min-width:901px){
 .builder-layout{grid-template-rows:64px 44px 44px 1fr auto}
 .builder-layout.bottom-collapsed{grid-template-rows:64px 44px 44px 1fr 44px}
 .builder-layout .top-bar-center{justify-content:flex-start;gap:14px}
 .builder-layout .app-name-input{width:190px}
 .builder-layout .left-panel{width:260px}
 :is(.builder-layout,.wf-layout,.ab-layout)>.top-bar>.cp-theme-toggle{order:4;margin-inline-start:8px}
 .cp-editor-label{display:block;font-size:11px;color:var(--cp-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;white-space:nowrap}
}
@media(max-width:900px){
 button:not(.toggle):not(.config-toggle){min-height:44px}
 input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px!important;min-height:44px}
 :is(.builder-layout,.wf-layout,.ab-layout)>.top-bar{grid-template-columns:44px minmax(0,1fr) auto!important;grid-template-rows:46px 46px!important;height:114px!important;flex-basis:114px!important;padding:8px 12px!important;gap:4px 8px!important}
 :is(.builder-layout,.wf-layout,.ab-layout) .top-bar-center{grid-column:2!important;grid-row:1!important;min-width:0}
 :is(.builder-layout,.wf-layout,.ab-layout)>.top-bar>.cp-theme-toggle{grid-column:3;grid-row:1;min-width:88px;min-height:44px;font-size:12px!important;padding:8px 10px!important}
 :is(.builder-layout,.wf-layout,.ab-layout) .top-bar-right{grid-column:1/-1!important;grid-row:2!important;gap:8px!important;align-items:center}
 :is(.builder-layout,.wf-layout,.ab-layout) :is(.app-name-input,.wf-name-input,.agent-name-input){font-size:16px!important;padding:6px!important;min-width:0!important}
 .builder-layout .top-bar-right .cp-toolbar-more{margin-inline-start:auto}
 .builder-layout :is(#btnSave,#previewToggle){padding:10px 14px!important;font-size:14px!important;border-radius:9px}
 .builder-layout .cp-connection-status{max-width:58px!important;font-size:11px!important;padding:0!important}
 .builder-layout .cp-toolbar-more>summary,.cp-editor-actions>summary{background:var(--cp-elevated);font-size:13px!important;border-color:var(--cp-border)!important}
 .builder-layout .left-panel-tabs{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px}
 .builder-layout .left-panel-tab{font-size:13px;min-height:42px;white-space:normal}
 .builder-layout .component-list{padding:16px}.builder-layout .component-category{gap:10px;margin-bottom:24px}
 .builder-layout .component-item{min-height:100px;padding:14px;gap:12px}.builder-layout .component-item .ci-name{font-size:14px}
 .builder-layout .page-tab-bar,.builder-layout .frame-selector-bar{padding:4px 12px;min-height:52px;max-height:56px}
 .builder-layout .frame-btn{font-size:12px}.builder-layout .frame-toggle-eye{min-width:44px;min-height:44px}
 .builder-layout .canvas-area{padding:16px!important}.builder-layout .canvas-frames{border-radius:12px}
 .cp-mobile-canvas-tools{padding:7px 12px;gap:6px}.cp-mobile-canvas-tools span{font-size:12px}
 .cp-mobile-canvas-tools button{font-size:12px;padding:8px 11px}
 .cp-editor-nav{background:var(--cp-surface);border-top:1px solid var(--cp-border);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:6px;min-height:64px;box-shadow:0 -4px 16px #17362905}
 .cp-editor-nav button{border:1px solid transparent;background:transparent;color:var(--cp-muted);border-radius:10px;font-size:13px;font-weight:650;min-height:46px}
 .cp-editor-nav button[aria-pressed=true]{background:var(--cp-accent-soft);color:var(--cp-accent);border-color:color-mix(in srgb,var(--cp-accent) 15%,transparent)}
 .cp-panel-heading{padding:12px 16px;font-size:16px}.cp-panel-heading button{font-size:13px;padding:9px 12px}
 .cp-mobile-selection-grid{gap:12px}.cp-mobile-selection{padding:16px;gap:12px}.cp-mobile-selection-actions{gap:8px}
 .wf-step-card button,.wf-connect-form button,.wf-mobile-selection button{border:1px solid var(--cp-border);background:var(--cp-elevated);color:var(--cp-text)}
 .wf-layout .top-bar-right>#btnSave,.ab-layout .top-bar-right>#btnSave{background:var(--cp-surface);border:1px solid var(--cp-border);color:var(--cp-text)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.cp-demo-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--cp-border);border-radius:9px;color:var(--cp-accent);font-weight:600;text-decoration:none;margin-inline-end:auto}
@media(max-width:900px){.builder-layout,.wf-layout,.ab-layout{height:calc(100dvh - 64px - env(safe-area-inset-bottom))!important}}

:is(.builder-layout,.wf-layout,.ab-layout) button:not(.config-toggle):not(.toggle){min-height:40px}
.builder-layout .canvas-empty-text{font-size:20px!important}.builder-layout .canvas-empty-icon svg{width:36px;height:36px}
@media(max-width:900px){:is(.builder-layout,.wf-layout,.ab-layout) button:not(.config-toggle):not(.toggle){min-height:44px}}

.cp-template-card>div:first-child{color:var(--cp-accent);background:var(--cp-accent-soft);border-radius:9px;padding:8px;width:38px;height:38px}
.ab-layout :is(.tool-card-icon,.chat-tool-icon){color:var(--cp-accent)}
.builder-layout .canvas-component.selected{border-color:var(--cp-accent);box-shadow:0 0 0 3px var(--cp-accent-soft)}
.builder-layout.preview-mode .canvas-component.selected{box-shadow:none}

/* Preview keeps navigation between authored pages, with editing actions removed. */
.builder-layout.preview-mode{grid-template-rows:64px 1fr}
.builder-layout.preview-mode.has-preview-pages{grid-template-rows:64px 52px minmax(0,1fr);grid-template-areas:"topbar" "pagetabs" "canvas"}
.builder-layout.preview-mode.has-preview-pages>.page-tab-bar{display:flex;min-height:52px;overflow-x:auto;flex-shrink:0}
.builder-layout.preview-mode .page-tab{min-height:40px;white-space:nowrap}
@media(max-width:900px){.builder-layout.preview-mode .page-tab{min-height:44px}}
/* Fit charts within their authored widget height without losing their labels. */
.builder-layout .cp-live[data-type=chart]{height:100%;display:flex;flex-direction:column;min-height:0}
.builder-layout .cp-live[data-type=chart]>strong,.builder-layout .cp-live[data-type=chart]>details{flex-shrink:0}
.builder-layout .cp-live[data-type=chart]>svg[data-chart]{flex:1;min-height:0;max-height:100%!important}
.builder-layout svg[data-chart] text{font-size:18px;fill:var(--theme-text,var(--cp-text))}
@media(max-width:900px){.builder-layout svg[data-chart] text{font-size:26px}}
/* Fit uses a readable flow at narrow widths; Wide retains the authored grid. */
.builder-layout .canvas-scroll{container-type:inline-size;container-name:cp-canvas-preview}
@container cp-canvas-preview (max-width:768px){
 .builder-layout .canvas-scroll:not([data-canvas-view=wide]) .canvas-frames{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;grid-template-areas:"header" "sidebar" "main"!important}
 .builder-layout .canvas-scroll:not([data-canvas-view=wide]) :is(.canvas-frame,.comp-container,.comp-columns,.comp-column){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;grid-auto-rows:auto!important;align-content:start;gap:16px!important;min-width:0;height:auto!important}
 .builder-layout .canvas-scroll:not([data-canvas-view=wide]) .canvas-component{grid-column:1/-1!important;grid-row:auto!important;min-width:0;min-height:0!important;height:auto!important;max-width:100%;overflow-wrap:break-word}
 .builder-layout .canvas-scroll:not([data-canvas-view=wide]) .canvas-component>.cp-live[data-type=chart]{height:280px;max-height:none!important}
 .builder-layout .canvas-scroll:not([data-canvas-view=wide]) svg[data-chart] text{font-size:26px}
 .builder-layout .canvas-scroll:not([data-canvas-view=wide]) .resize-handle{display:none}
}
.cp-initial-sync{position:fixed;inset:76px 16px 24px;z-index:650;display:grid;place-items:center;background:var(--cp-bg,#f3f6f5);border:1px solid var(--cp-border,#dce5df);border-radius:14px;padding:24px;text-align:center}
.cp-initial-sync-card{max-width:360px;display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--cp-text,#182b27)}
.cp-initial-sync h2{font-size:22px;line-height:1.3;margin:0}.cp-initial-sync p{font-size:15px;line-height:1.6;margin:0;color:var(--cp-secondary,#40574e)}
.cp-initial-sync button{min-height:44px;padding:10px 16px;border:1px solid var(--cp-border-strong,#b8c8be);border-radius:9px;background:var(--cp-surface,#fff);color:var(--cp-text,#182b27);font:600 14px var(--cp-font,system-ui);cursor:pointer}
.cp-initial-sync-spinner{width:32px;height:32px;border:3px solid var(--cp-border,#dce5df);border-top-color:var(--cp-accent,#077753);border-radius:50%;animation:cp-initial-spin 1s linear infinite}
@keyframes cp-initial-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.cp-initial-sync{inset:124px 12px calc(76px + env(safe-area-inset-bottom));padding:20px}}
/* Landing surfaces share the product theme; cinematic sections keep their dark canvas. */
.cp-portal-landing{--dark:var(--cp-text);--slate-700:var(--cp-secondary);--slate-500:var(--cp-muted);--slate-400:var(--cp-muted);--slate-200:var(--cp-border);--slate-100:var(--cp-elevated);--off-white:var(--cp-bg);--teal:var(--cp-accent-hover);background:var(--cp-bg);color:var(--cp-text)}
.cp-portal-landing #nav,.cp-portal-landing #nav.open .nav-links{background:var(--cp-surface);border-color:var(--cp-border);color:var(--cp-text)}
.cp-portal-landing :is(.logo,.footer-brand) svg text{fill:var(--cp-text)}
.cp-portal-landing .nav-links a{color:var(--cp-secondary)}
.cp-portal-landing .nav-links a:hover{color:var(--cp-accent)}
.cp-portal-landing :is(.demo,.demo-app,.demo-browser,.price-card,.demo-browser .url-bar){background:var(--cp-surface);border-color:var(--cp-border);color:var(--cp-text)}
.cp-portal-landing :is(.vision,.marketplace,.pricing,.demo-sidebar,.demo-browser .browser-bar){background:var(--cp-bg);border-color:var(--cp-border)}
.cp-portal-landing :is(.live-links,.sdk,.early-access){background:var(--cp-surface)}
.cp-portal-landing :is(.demo-chat .chat-msg.from-ai .msg-text,.demo-chat input,.waitlist-form input){background:var(--cp-elevated);color:var(--cp-text);border-color:var(--cp-border)}
.cp-portal-landing :is(.cta-btn,.nav-links a.cta-btn,.price-card .card-cta.primary,.a3cta:not(.a3cta-white)){background:var(--cp-accent);color:var(--cp-on-accent);border-color:var(--cp-accent)}
.cp-portal-landing :is(.cta-btn,.nav-links a.cta-btn,.price-card .card-cta.primary,.a3cta:not(.a3cta-white)):hover{background:var(--cp-accent-hover);color:var(--cp-on-accent)}
.cp-portal-landing :is(.cta-btn-outline,.price-card .card-cta.secondary){background:var(--cp-surface);color:var(--cp-text);border-color:var(--cp-border-strong)}
.cp-portal-landing :is(.cta-btn-white,.a3cta-white){background:#fff;color:#0f172a}
.cp-portal-landing :is(.step-num,.price-card.featured::before,.demo-chat .chat-msg.from-user .msg-text,.demo-chat .msg-avatar.ai-av){color:var(--cp-on-accent)}
.cp-portal-landing :is(.ll-demo,.code-block){--dark:#0f172a;--white:#fff;--slate-200:#e2e8f0;--slate-400:#a0b2c7;background:#0f172a;color:#e2e8f0}
.cp-portal-landing .ll-demo .avatar.ai{color:var(--cp-on-accent)}
.cp-portal-landing .for-experts{--white:#fff;--emerald:#39d8a1;--teal:#65e5b8}
.cp-portal-landing footer{background:var(--cp-elevated);color:var(--cp-secondary);border-top:1px solid var(--cp-border)}
.cp-portal-landing footer :is(h4,.footer-col a,.footer-bottom a){color:var(--cp-text)}
.cp-portal-landing .footer-bottom{border-color:var(--cp-border)}
.cp-portal-landing .footer-col a:hover,.cp-portal-landing .footer-bottom a:hover{color:var(--cp-accent)}
.cp-portal-landing .price-card.featured::before{color:var(--cp-on-accent)}
/* Deliver finished work without searching through secondary authoring tools. */
.builder-layout #btnDownload{white-space:nowrap}
.cp-delivery-dialog{padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);border:1px solid var(--cp-border);border-radius:18px;background:var(--cp-surface);color:var(--cp-text);box-shadow:var(--cp-shadow-lg);overflow:auto;margin:auto}
.cp-delivery-dialog::backdrop{background:#07131db3;backdrop-filter:blur(3px)}
.cp-delivery-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:1;background:var(--cp-surface);padding:18px 24px;border-bottom:1px solid var(--cp-border);margin:0}
.cp-delivery-heading h2{font-size:21px;line-height:1.3;margin:0}
.cp-delivery-dialog button,.cp-delivery-dialog a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid var(--cp-border-strong);border-radius:10px;background:var(--cp-elevated);color:var(--cp-text);font:600 14px var(--cp-font);text-decoration:none;cursor:pointer;box-sizing:border-box}
.cp-delivery-dialog :is(button,a)[hidden]{display:none}
.cp-delivery-dialog .cp-delivery-close{font-size:25px;min-width:44px;padding:4px;background:transparent;border-color:transparent}
.cp-delivery-body{padding:24px;display:grid;gap:24px}
.cp-delivery-dialog h3{font-size:17px;margin:0 0 8px}.cp-delivery-dialog p{font-size:14px;line-height:1.65;color:var(--cp-secondary);margin:0 0 16px}
.cp-delivery-dialog label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.cp-delivery-dialog input{width:100%;box-sizing:border-box;background:var(--cp-elevated);color:var(--cp-text);border:1px solid var(--cp-border);border-radius:9px;min-height:48px;padding:12px;font:14px/1.4 ui-monospace,monospace;text-align:left;unicode-bidi:plaintext}
.cp-delivery-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cp-delivery-export{border-top:1px solid var(--cp-border);padding-top:24px}
.cp-delivery-dialog .cp-delivery-primary{background:var(--cp-accent);color:var(--cp-on-accent);border-color:var(--cp-accent)}
.cp-delivery-dialog #cp-delivery-status{margin:0;min-height:0}.cp-delivery-dialog #cp-delivery-status:empty{display:none}
@media(max-width:900px){
 .builder-layout .top-bar-right{display:grid!important;grid-template-columns:1fr 1fr 1fr auto;gap:6px!important}
 .builder-layout :is(#btnSave,#btnDownload,#previewToggle){font-size:13px!important;padding:9px 8px!important;justify-content:center;min-width:0;white-space:nowrap}
 .builder-layout #previewToggle svg{display:none}
 .builder-layout .top-bar-center{position:relative;flex-wrap:wrap!important;gap:0 4px!important;align-content:center}
 .builder-layout #appNameInput{flex:1;min-width:0;width:calc(100% - 40px);height:25px!important;min-height:25px!important}
 .builder-layout .top-bar-center .cp-connection-status{font-size:10px!important;flex:0 0 auto;max-width:42px!important}
 .cp-delivery-heading{padding:14px 18px}.cp-delivery-heading h2{font-size:19px}.cp-delivery-body{padding:18px;gap:18px}
}
.experience-demo-actions{display:grid;gap:10px}
.experience-demo-actions .experience-demo-live{display:flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;background:var(--cp-accent);color:var(--cp-on-accent);border:1px solid var(--cp-accent);border-radius:10px;padding:10px 16px;font-size:14px;font-weight:650;text-decoration:none}
.experience-demo-actions .experience-demo-install{background:var(--cp-surface)!important;color:var(--cp-text)!important;border:1px solid var(--cp-border-strong)!important}
@media(max-width:900px){
 .builder-layout .top-bar .btn-back{font-size:0!important;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;overflow:hidden}
 .builder-layout .top-bar .btn-back svg{display:block!important;flex:0 0 22px;width:22px;height:22px}
 .builder-layout .top-bar #appNameInput{background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;text-overflow:ellipsis;font-weight:650;max-width:none!important}
 .builder-layout .top-bar #appNameInput:focus{background:var(--cp-elevated)!important;border-color:var(--cp-border-strong)!important}
}

/* Editor chrome respects enlarged text without breaking words inside controls. */
.builder-layout :is(.tb-btn,.tb-btn-primary,.preview-toggle,.cp-toolbar-more>summary,.page-tab,.cp-mobile-canvas-tools button){word-break:normal;overflow-wrap:normal;line-height:1.4}
.builder-layout .cp-live[data-type=table]{color:var(--cp-text)}
@media(max-width:900px){.builder-layout :is(.tb-btn,.tb-btn-primary,.preview-toggle,.cp-toolbar-more>summary,.cp-mobile-canvas-tools button){font-size:.8125rem!important}.builder-layout .page-tab{font-size:.875rem!important;white-space:nowrap}.builder-layout .top-bar{height:auto;min-height:56px}}

/* Supplied ChatPipe lockup: CSS crops its transparent canvas, never the artwork. */
.cp-brand-mark{--cp-brand-width:144px;position:relative;display:inline-block;width:var(--cp-brand-width);max-width:100%;aspect-ratio:1436/366;overflow:hidden;vertical-align:middle;flex-shrink:0;direction:ltr!important;line-height:0}
.cp-brand-mark>.cp-brand-image{position:absolute!important;display:block;width:133.705%!important;max-width:none!important;height:auto!important;max-height:none!important;left:-10.028%!important;top:-40.984%!important;margin:0!important;padding:0!important;object-fit:initial!important;border:0!important;border-radius:0!important;pointer-events:none}
.cp-brand-mark>.cp-brand-contrast{display:none;filter:brightness(0) invert(1);clip-path:inset(0 0 0 26%)}
[data-theme="dark"] .cp-brand-mark>.cp-brand-contrast{display:block}
.auth-logo .cp-brand-mark{--cp-brand-width:208px;margin-block:8px 12px}
.sidebar-logo .cp-brand-mark{--cp-brand-width:152px}
.welcome-state>.cp-brand-mark{--cp-brand-width:180px;margin-bottom:22px}
.msg-logo-row .cp-brand-mark{--cp-brand-width:82px;margin-bottom:4px}
.portal-mobile-bar>strong .cp-brand-mark{--cp-brand-width:116px;margin-inline-end:auto}
.top-bar .btn-back>.cp-brand-mark{--cp-brand-width:112px}
.cp-portal-admin .topbar-title>.cp-brand-mark{--cp-brand-width:120px;margin-inline-end:8px}
@media(max-width:768px){.top-bar .btn-back>.cp-brand-mark{--cp-brand-width:94px}.welcome-state>.cp-brand-mark{--cp-brand-width:150px;margin-bottom:18px}.portal-mobile-bar>strong .cp-brand-mark{--cp-brand-width:108px}}
/* Arabic typography helpers keep generic logos unclipped; this crop must stay scoped. */
.cp-brand-mark.cp-brand-mark{overflow:hidden!important;max-width:100%!important}
@media(max-width:900px){
 :is(.builder-layout,.wf-layout,.ab-layout)>.top-bar{grid-template-columns:140px minmax(0,1fr)!important}
 :is(.builder-layout,.wf-layout,.ab-layout) .top-bar .btn-back[data-cp-brand]{width:140px;min-width:140px;padding:8px!important;gap:8px;justify-content:flex-start}
 :is(.builder-layout,.wf-layout,.ab-layout) .top-bar .btn-back[data-cp-brand]>.cp-brand-mark{--cp-brand-width:94px}
}