/* The Ask AI panel's Demo mode and its docking — the one sheet the panel owns besides the skin (same tokens). */
/* docked: the page keeps its full width beside the panel and the panel sits under the top bar */
#askAiPanel{top:56px}
body.askai-docked #appContent{margin-right:min(420px,100vw);transition:margin-right .28s ease}
@media (max-width:1100px){body.askai-docked #appContent{margin-right:0}}
/* the mode switch in the head: a segmented pill */
.askai-modes{display:inline-flex;gap:3px;background:#F5F5F5;border:1px solid var(--stroke);padding:3px;border-radius:12px;margin-left:auto}
.askai-modes button{width:auto!important;height:28px!important;padding:0 10px;border-radius:9px!important;font:inherit;font-size:12px;font-weight:700;color:var(--grey-2);background:transparent;border:0;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.askai-modes button:hover{color:var(--ink);background:rgba(255,255,255,.65)!important}
.askai-modes button.on{background:#fff!important;color:var(--ink);box-shadow:0 1px 1px rgba(7,9,22,.05),0 3px 10px rgba(7,9,22,.07)}
.askai-modes button.on i{color:var(--red-pure)}
.askai-head h2{flex:0 0 auto}
/* the start button on the empty state */
.askai-demo-start{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 10px;padding:12px 14px;border:1px solid var(--stroke);border-radius:14px;background:#fff;text-align:left;font:inherit;color:var(--ink);cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.askai-demo-start:hover{transform:translateY(-1px);box-shadow:var(--hover-shadow);border-color:#D4D6DA}
.askai-demo-start>i:first-child{width:36px;height:36px;border-radius:10px;background:var(--red-pure);color:#fff;display:grid;place-items:center;font-size:15px;flex:0 0 auto;box-shadow:0 8px 20px -8px rgba(253,0,36,.8)}
.askai-demo-start span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.askai-demo-start b{font-size:13.5px;font-weight:800}
.askai-demo-start small{font-size:11.5px;color:var(--grey);line-height:1.35}
.askai-demo-start>i:last-child{color:var(--grey-2)}
/* the demo view */
#demoView{flex:1;overflow-y:auto;display:flex;flex-direction:column;font-family:var(--font)}
.demo-top{padding:16px 18px 12px;border-bottom:1px solid var(--stroke);background:var(--red-soft-grad)}
.demo-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-2)}
.demo-title{margin:6px 0 10px;font-family:var(--display);font-weight:900;font-size:19px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.demo-chips{display:flex;flex-wrap:wrap;gap:6px}
.demo-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px 0 5px;border:1px solid var(--stroke);border-radius:999px;background:#fff;font:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.demo-chip:hover{background:#F0F5FD;border-color:#DCE8F8}
.demo-chip .persona-av{width:20px;height:20px;font-size:9px;border-radius:6px!important}
.demo-chip i{color:var(--red-pure);margin-left:5px}
.demo-body{padding:14px 18px 8px;display:flex;flex-direction:column;gap:14px}
.demo-lbl{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-2);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.demo-do{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.demo-do li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink)}
.demo-do li button{flex:0 0 auto;width:22px;height:22px;border:0;background:none;color:var(--grey-2);font-size:15px;cursor:pointer;padding:0;margin-top:1px}
.demo-do li.done{color:var(--grey-2);text-decoration:line-through}
.demo-do li.done button{color:var(--ok)}
.demo-do li p{margin:0;display:inline}
.demo-say{margin:0;padding:10px 14px;border-left:3px solid var(--red-pure);background:#fff;border-radius:0 10px 10px 0;font-size:13.5px;line-height:1.5;color:var(--ink);font-style:italic;box-shadow:var(--shadow-sm)}
.demo-say p{margin:0}
.demo-gap{padding:10px 12px;border-radius:10px;background:var(--warn-bg);border:1px solid var(--warn-bd)}
.demo-gap .demo-lbl{color:var(--warn);margin-bottom:4px}
.demo-gap p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink)}
.demo-fr,.demo-note{font-size:11.5px;color:var(--grey);line-height:1.4}
.demo-note i{color:var(--grey-2);margin-right:4px}
.demo-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--stroke);background:#fff;position:sticky;bottom:0}
.demo-nav{height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--stroke);background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.demo-nav:hover{background:#FAFAFA;border-color:#D4D6DA}
.demo-nav:disabled{opacity:.4;cursor:default}
.demo-nav-next{background:var(--red-pure);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(253,0,36,.2)}
.demo-nav-next:hover{background:#E10020}
.demo-progress{flex:1;position:relative;height:8px;border-radius:6px;background:#E6EBF2;overflow:visible}
.demo-progress span{display:block;height:100%;border-radius:6px;background:var(--charcoal);transition:width .3s var(--ease)}
.demo-progress b{position:absolute;right:0;top:-18px;font-size:10.5px;font-weight:800;color:var(--grey-2);font-variant-numeric:tabular-nums}
.demo-list{padding:0 18px 16px;font-size:12.5px}
.demo-list summary{cursor:pointer;color:var(--grey);font-weight:700;padding:6px 0}
.demo-list ol{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.demo-list li button{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:12.5px;color:var(--grey);padding:5px 8px;border-radius:8px;cursor:pointer}
.demo-list li button em{font-style:normal;font-weight:800;color:var(--grey-2);width:16px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.demo-list li button:hover{background:#F0F5FD;color:var(--ink)}
.demo-list li.on button{background:var(--light-red);color:var(--red-acc);font-weight:700}
.demo-list li.on button em{color:var(--red-acc)}
.demo-empty{padding:24px;color:var(--grey)}
/* hidden means hidden, whatever display the panel's parts declare */
#askAiScroll[hidden],#askAiPanel .askai-foot[hidden],#demoView[hidden]{display:none!important}