/* Chat side panel as a multi-artifact workspace (pane.js). Overrides the .pane/.pbar rules of app.css; new classes are pn-*. */

/* ---------- frame: width, expand, resize handle ---------- */
#v-chat.pn-wide:not(.pane-off):not(.traj-wide){grid-template-columns:var(--list) minmax(0,380px) minmax(0,1fr)}
@media (max-width:1100px){#v-chat.pn-wide:not(.pane-off):not(.traj-wide){grid-template-columns:var(--list) minmax(0,1fr) 0}}
#pane{position:relative;container-type:inline-size}
#v-chat.pane-off #pane{border-left:0}
.pane-resize{position:absolute;left:0;top:0;bottom:0;width:6px;margin-left:-1px;cursor:col-resize;z-index:6;touch-action:none}
.pane-resize:hover,.pane-resize.on{background:linear-gradient(90deg,var(--accent) 0,var(--accent) 2px,transparent 2px)}
#v-chat.pane-off .pane-resize,#v-chat.pn-wide .pane-resize{display:none}
body.pn-dragging{cursor:col-resize;user-select:none}
body.pn-dragging iframe{pointer-events:none}

/* ---------- tab bar ---------- */
#pane .pbar{height:40px;flex:none;background:var(--bg-2)}
#pane .pbar .sw{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;align-items:center;padding:var(--sp-1) 1px}
#pane .pbar .sw::-webkit-scrollbar{display:none}
#pane .pbar .sw button{flex:none;white-space:nowrap}
#pane .pbar .sw button:hover{background:var(--bg-3);color:var(--fg)}
#pane .pbar .sw button.on,#pane .pbar .sw button.on:hover{background:var(--bg);color:var(--fg)}
#pane .pbar .sw svg.i{width:14px;height:14px}
#pane .pbar .sw .n{font-size:var(--fs-1);color:var(--fg-3)}
#pane .pbar .sw .n:empty{display:none}
/* as in the mockup, a fixed tab shows its label only while active once file tabs share the bar */
#pane .pbar .sw.pn-many button:not(.on) .lb{display:none}
#pane .pbar .icon-btn{flex:none}
.pn-sep{flex:none;width:1px;height:16px;background:var(--line-2);margin:0 var(--sp-1)}
.pn-ft{max-width:190px;padding-right:var(--sp-1)!important}
.pn-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:var(--mono);font-size:var(--fs-1)}
.pn-ft .pn-nm{max-width:104px}
.pn-x{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--r4);color:var(--fg-3);flex:none}
.pn-x:hover{background:var(--bg-4);color:var(--fg)}
#pane .pbar .sw .pn-x svg.i{width:11px;height:11px;stroke-width:2}
.pn-dot{flex:none;width:6px;height:6px;border-radius:var(--r-full);background:var(--warn)}
.pn-ic{width:18px;height:18px;border-radius:var(--r4);display:grid;place-items:center;flex:none;color:#fff;background:#6b7280}
.pn-ic svg.i,#pane .pbar .sw .pn-ic svg.i{width:12px;height:12px;stroke-width:2}
.pn-k-sheet,.art .ic.pn-k-sheet{background:#0f8a5f}.pn-k-text,.art .ic.pn-k-text{background:#3b6fd8}
.pn-k-image,.art .ic.pn-k-image{background:#c2417e}.pn-k-pdf,.art .ic.pn-k-pdf{background:#c2410c}
.pn-k-binary,.art .ic.pn-k-binary{background:#6b7280}
.art .ic svg.i{width:15px;height:15px;stroke-width:1.8}
.menu.pn-menu{width:280px}
.menu.pn-menu button{flex-direction:row;align-items:center;gap:var(--sp-2);min-height:30px}
.menu.pn-menu svg.i{width:14px;height:14px;margin:0 2px;color:var(--fg-2)}
.menu.pn-menu .pn-ic svg.i{margin:0;color:#fff}
.menu.pn-menu .pn-nm{flex:1;font-size:var(--fs-2)}

/* ---------- views ---------- */
#pane .pbody{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.pn-view{flex:1;min-height:0;overflow:auto;padding:var(--sp-3)}
.pn-view.pn-flush{padding:0;overflow:hidden;display:flex;flex-direction:column;background:var(--bg)}
#pane .art{font-size:var(--fs-3)}
#pane .art:hover{background:var(--bg);box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgba(11,16,35,.06)}

/* artifact header, after the mockup's .shead */
.pn-shead{display:flex;align-items:center;gap:var(--sp-2);height:36px;padding:0 var(--sp-1) 0 var(--sp-3);border-bottom:1px solid var(--line);background:var(--bg);flex:none;min-width:0;font-size:var(--fs-2)}
.pn-ti{font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.pn-sz{color:var(--fg-3);font-size:var(--fs-1);white-space:nowrap;flex:none}
.pn-shead .icon-btn{width:24px;height:24px;border-radius:var(--r8);flex:none}
.pn-shead .icon-btn svg.i{width:14px;height:14px}
.pn-shead .pill{flex:none}
.pn-tb{display:flex;align-items:center;overflow:hidden;gap:var(--sp-1);min-height:34px;padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);border-bottom:1px solid var(--line);background:var(--bg-2);flex:none}
.pn-tb .btn.ghost{padding:0 6px;color:var(--fg-2)}
.pn-tb .btn.ghost:hover{color:var(--fg)}
.pn-tb .seg{background:var(--bg-3)}
.pn-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pn-tb>.btn,.pn-tb>.seg{flex:none}
#v-chat.pn-wide:not(.pane-off):not(.traj-wide) #ctabs-end{display:none}
.pn-notes{flex:none}
.pn-note{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2);line-height:17px;border-bottom:1px solid var(--line)}
.pn-note>span{flex:1;min-width:0}
.pn-note.warn{background:var(--warn-soft);color:var(--warn)}
.pn-note.err{background:var(--err-soft);color:var(--err)}
.pn-note .btn{flex:none;color:var(--fg)}
.pn-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
.pn-body>.empty{height:auto;flex:1}
.pn-body .spin{vertical-align:-1px;margin-right:var(--sp-1)}

/* text kinds */
.pn-doc{flex:1;min-height:0;overflow:auto;background:var(--bg)}
.pn-doc article.a{max-width:720px;margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-8)}
.pn-doc article.a h1{font-size:var(--fs-6);line-height:26px;margin:0 0 var(--sp-3);letter-spacing:-.01em}
.pn-doc article.a h2{font-size:var(--fs-5);margin:var(--sp-5) 0 var(--sp-2)}
.pn-doc article.a p{margin:0 0 var(--sp-3)}
.pn-doc .pn-codewrap{padding:var(--sp-3)}
.pn-doc .pn-codewrap .sqlwrap{margin:0}
.pn-doc .sqlblock{max-height:none}
.pn-doc .pn-pre,.pn-doc.docv pre.pn-pre{margin:0;padding:var(--sp-3) var(--sp-4) var(--sp-6);background:transparent;box-shadow:none;border-radius:0;white-space:pre-wrap;word-break:break-word;overflow:visible;font-family:var(--mono);font-size:var(--fs-2);line-height:19px}
.pn-src{flex:1;min-height:0;width:100%;border:0;outline:0;resize:none;margin:0;padding:var(--sp-3) var(--sp-4);background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:var(--fs-2);line-height:19px;white-space:pre;overflow:auto;tab-size:2}
.pn-src:focus-visible{outline:0}
.pn-src[readonly]{color:var(--fg-2)}
.pn-frame{flex:1;width:100%;height:100%;min-height:0;border:0;background:#fff;display:block}
.pn-doc>.pn-frame{height:100%}

/* image, binary, errors */
.pn-imgwrap{flex:1;min-height:0;overflow:auto;padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;background:var(--bg-2)}
.pn-imgwrap a{display:block;max-width:100%;cursor:zoom-in}
.pn-imgwrap img{display:block;max-width:100%;height:auto;border-radius:var(--r8);box-shadow:var(--sh-1);background:var(--bg)}
.pn-card{margin:var(--sp-4);padding:var(--sp-4);border-radius:var(--r16);box-shadow:var(--sh-1);background:var(--bg);display:flex;flex-direction:column;gap:var(--sp-3)}
.pn-card.pn-bin{align-items:center;text-align:center;gap:var(--sp-1);padding:var(--sp-6) var(--sp-4)}
.pn-card.pn-bin b{font-weight:500;overflow-wrap:anywhere;margin-top:var(--sp-2)}
.pn-card.pn-bin p{margin:var(--sp-2) 0 var(--sp-3)}
.pn-card .btn.primary svg.i{width:14px;height:14px}
.pn-row{display:flex;gap:var(--sp-2)}
.pn-ic.pn-big{width:40px;height:40px;border-radius:var(--r12)}
.pn-ic.pn-big svg.i{width:20px;height:20px;stroke-width:1.7}

/* ---------- spreadsheet grid ---------- */
.pn-fbar{display:flex;align-items:center;gap:var(--sp-2);height:26px;padding:0 var(--sp-3);border-bottom:1px solid var(--line);flex:none;min-width:0;background:var(--bg)}
.pn-ref{flex:none;min-width:34px;color:var(--fg-3);font-size:var(--fs-1)}
.pn-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-gridwrap{flex:1;min-height:0;overflow:auto;background:var(--bg);outline:0;scroll-padding:52px 8px 8px 52px}
.pn-gridwrap:focus-visible{outline:0}
.pn-grid{border-collapse:separate;border-spacing:0;font-family:var(--mono);font-size:var(--fs-2);line-height:18px;width:max-content;min-width:100%}
.pn-grid th,.pn-grid td{height:26px;padding:3px var(--sp-2);border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;min-width:44px;text-align:left;font-weight:400;position:relative;cursor:cell}
.pn-grid thead th{position:sticky;top:0;z-index:2;background:var(--bg-2);border-bottom:1px solid var(--line);font:600 var(--fs-1)/18px var(--mono);color:var(--fg-2)}
.pn-grid.pn-xl .pn-letters th{height:20px;padding-top:0;padding-bottom:0;text-align:center;font-weight:500;color:var(--fg-3);cursor:default}
.pn-grid.pn-xl .pn-hrow th{top:20px}
.pn-grid th.pn-rn{position:sticky;left:0;z-index:1;min-width:38px;width:38px;text-align:right;background:var(--bg-2);color:var(--fg-3);font:400 var(--fs-1)/18px var(--mono);border-right:1px solid var(--line);cursor:default;font-variant-numeric:tabular-nums}
.pn-grid thead th.pn-rn{z-index:3}
.pn-grid tbody tr:hover td{background:var(--bg-2)}
.pn-grid td.pn-num{text-align:right;font-variant-numeric:tabular-nums}
.pn-grid td.pn-fx,.pn-val.pn-fx{color:var(--accent-deep)}
.pn-grid td.pn-fx{background:var(--accent-soft);font-style:italic}
.pn-grid td.pn-fx::before{content:"ƒ";font-style:normal;font-weight:600;margin-right:var(--sp-1);opacity:.7}
.pn-grid .pn-ch,.pn-grid tbody tr:hover td.pn-ch{background:var(--warn-soft)}
.pn-grid .pn-ch::after{content:"";position:absolute;top:0;right:0;border:4px solid transparent;border-top-color:var(--warn);border-right-color:var(--warn)}
.pn-grid tr.pn-selrow th.pn-rn{color:var(--accent-deep);background:var(--sel);font-weight:600}
.pn-grid .pn-sel{box-shadow:inset 0 0 0 2px var(--accent)}
.pn-grid.pn-ro th,.pn-grid.pn-ro td{cursor:default}
.pn-grid .pn-editing{overflow:visible;z-index:4}
.pn-ed{position:absolute;left:-1px;top:-1px;z-index:5;min-height:27px;margin:0;padding:3px var(--sp-2);border:0;outline:0;resize:none;overflow:hidden;white-space:pre;background:var(--bg);color:var(--fg);font:400 var(--fs-2)/18px var(--mono);box-shadow:0 0 0 2px var(--accent),0 6px 18px -8px rgba(11,16,35,.4);border-radius:2px}
.pn-ed:focus-visible{outline:0}
.pn-foot{display:flex;align-items:center;gap:var(--sp-2);height:30px;padding:0 var(--sp-3) 0 var(--sp-1);border-top:1px solid var(--line);background:var(--bg-2);flex:none;min-width:0}
.pn-sheets{display:flex;gap:var(--sp-h);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.pn-sheets::-webkit-scrollbar{display:none}
.pn-sheets button{display:inline-flex;align-items:center;gap:var(--sp-1);flex:none;height:22px;padding:0 var(--sp-2);border-radius:var(--r8);font-size:var(--fs-2);font-weight:500;color:var(--fg-2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-sheets button:hover{background:var(--bg-3);color:var(--fg)}
.pn-sheets button.on{background:var(--bg);color:var(--fg);box-shadow:var(--sh-1)}
.pn-stat{flex:none;color:var(--fg-3);font-size:var(--fs-1);white-space:nowrap}
@container (max-width:380px){.pn-tb{padding-left:var(--sp-2)}}
/* running tools, background tasks and subagents */
.pn-run{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;padding:6px var(--sp-2);border-radius:var(--r8);font-size:var(--fs-2)}
.pn-run[data-hdfs],.pn-run[data-act-scroll]{cursor:pointer}.pn-run[data-hdfs]:hover,.pn-run[data-act-scroll]:hover{background:var(--bg-3)}
.pn-run .g{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:600 10px var(--mono);background:var(--bg-3);color:var(--fg-3)}
.pn-run.on .g{background:var(--accent-soft)}.pn-run.ok .g{background:var(--ok);color:#fff}.pn-run.err .g{background:var(--err);color:#fff}
.pn-run .g .spin{width:10px;height:10px}
.pn-run .m{min-width:0}.pn-run b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-run small{display:block;color:var(--fg-3);font-size:var(--fs-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-run .r{color:var(--fg-3);font-size:var(--fs-1)}
/* data lake tab */
.pn-lhead{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2);color:var(--fg-2);padding:2px 2px var(--sp-2)}.pn-lhead .grow{flex:1}
.pn-lq{display:flex;flex-direction:column;gap:6px;padding:var(--sp-3);border-radius:var(--r12);box-shadow:var(--sh-1);background:var(--bg);margin-bottom:var(--sp-2);min-width:0}
.pn-lq.on{box-shadow:0 0 0 1.5px var(--accent)}.pn-lq.mini{padding:var(--sp-2) var(--sp-3);cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.pn-lq .h,.pn-lq .b{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}.pn-lq .grow{flex:1}
.pn-lq .pill .spin{width:8px;height:8px;margin-right:4px}.pn-lq .t{font-size:var(--fs-1);color:var(--fg-3)}
.pn-lq .q{font-size:var(--fs-1);color:var(--fg);overflow-wrap:anywhere;line-height:1.5}
.pn-lq .w{font-size:var(--fs-2);color:var(--fg-2);overflow-wrap:anywhere}.pn-lq .w.bad{color:var(--err)}
.pn-lq .hq-strip{gap:4px}.pn-lq .hq-strip .st b{display:none}.pn-lq .hq-strip .st.running b,.pn-lq .hq-strip .st.failed b{display:inline}
.pn-lq .hq-strip .ln{flex:1 1 6px;min-width:6px}
/* count of data lake queries; while one is running it takes the accent colour and a small pulsing dot */
#pane .pbar .sw .n.live{color:var(--accent-deep);font-weight:600;display:inline-flex;align-items:center;gap:4px}
#pane .pbar .sw .n.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pn-pulse 1.4s ease-in-out infinite}
@keyframes pn-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){#pane .pbar .sw .n.live::before{animation:none}}
/* approvals and answers of the conversation */
.pn-perm{font-size:var(--fs-1);color:var(--fg-3);padding:0 var(--sp-2) 4px}
.pn-ask{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--sp-2);align-items:start;padding:6px var(--sp-2);border-radius:var(--r8);font-size:var(--fs-2)}
.pn-ask.wait{cursor:pointer;box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 50%,transparent);margin-bottom:4px}
.pn-ask .g{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--mono);background:var(--bg-3);color:var(--fg-3);margin-top:1px}
.pn-ask.wait .g{background:var(--warn);color:#fff}.pn-ask.ok .g{background:var(--ok);color:#fff}.pn-ask.no .g{background:var(--err);color:#fff}
.pn-ask .m{min-width:0}.pn-ask b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-ask b i{font-style:normal;font-weight:400;color:var(--fg-3)}
.pn-ask small{display:block;color:var(--fg-3);font-size:var(--fs-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Your input" tab: approvals and questions in full */
.pn-more{font:inherit;font-size:var(--fs-1);text-transform:none;letter-spacing:0;color:var(--accent-deep);margin-left:6px}.pn-more:hover{text-decoration:underline}
.pn-in{display:flex;flex-direction:column;gap:6px;padding:var(--sp-3);border-radius:var(--r12);box-shadow:var(--sh-1);background:var(--bg);margin-bottom:var(--sp-2);min-width:0}
.pn-in.wait{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--warn) 60%,transparent);cursor:pointer}
.pn-in .h{display:flex;align-items:center;gap:var(--sp-2);min-width:0}.pn-in .h b{flex:1;min-width:0;font-weight:600;font-size:var(--fs-3);overflow-wrap:anywhere}
.pn-in .g{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--mono);flex:none;background:var(--bg-3);color:var(--fg-3)}
.pn-in.wait .g{background:var(--warn);color:#fff}.pn-in.ok .g{background:var(--ok);color:#fff}.pn-in.no .g{background:var(--err);color:#fff}
.pn-in .m{display:flex;flex-wrap:wrap;gap:2px var(--sp-3);font-size:var(--fs-1);color:var(--fg-3)}.pn-in .m b{font-weight:600;color:var(--fg-2)}
.pn-in .why{margin:0;font-size:var(--fs-2);color:var(--fg-2);line-height:1.5}
.pn-in .sqlwrap{margin:0}.pn-in pre.codeblock{margin:0;max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:var(--sp-2) var(--sp-3);background:var(--bg-2);border-radius:var(--r8);font-size:var(--fs-1)}
.pn-kv{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-1);overflow-wrap:anywhere}
.pn-qa{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0}
.pn-qa dt{font-size:var(--fs-2);color:var(--fg-2);margin-top:6px}.pn-qa dt small{display:block;font-size:var(--fs-1);color:var(--fg-3)}
.pn-qa dd{margin:0;font-size:var(--fs-3);font-weight:600;overflow-wrap:anywhere}
.pn-note{font-size:var(--fs-2);padding:6px var(--sp-2);border-radius:var(--r8);background:var(--bg-2)}.pn-note i{font-style:normal;font-weight:600;color:var(--fg-3);margin-right:6px}