/* Area: chat (CHAT-SPEC §1, mockup docs/mockups/chat/2-studio-split.html). Owned by the chat area.
   Loaded on every page, so everything is scoped under .pg-chat. The four-column grid, the icon rail and
   the agent drawer frame live in shell.css (`body.studio`); this file styles what is inside the columns:
   threads, the chat (header, messages, steps, artifact chips, approval card, composer), the stage and
   the drawer's content. Shared pieces (.btn, .icon-btn, .seg, .menu, .inp, .spinner, .avatar,
   .project-switch, .pdot, .noprev) come from components.css and shell.css. */

/* ---------- threads column ---------- */
.pg-chat .threads .hd{display:flex;align-items:center;gap:8px;padding:14px 14px 8px}
.pg-chat .threads .hd h2{font-size:15px;flex:1}
.pg-chat .threads .newchat{margin:4px 12px 10px}
.pg-chat .threads .newchat .btn .i{width:12px;height:12px}
.pg-chat .threads h6{font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 14px 4px;margin:0}
.pg-chat .threads .tscroll{overflow-y:auto;min-height:0;flex:1}
.pg-chat .threads .tnone{padding:12px 16px;color:var(--muted);font-size:12.5px}
.pg-chat .tlist{display:flex;flex-direction:column;gap:2px;padding:0 8px}
.pg-chat .titem{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:7px 8px;border-radius:var(--radius-ctl);color:var(--text-2);min-width:0}
.pg-chat .titem:hover{background:var(--panel);color:var(--text)}
.pg-chat .titem.active{background:var(--raised);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.pg-chat .titem .th{width:34px;height:34px;border-radius:7px;background:var(--panel);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;color:var(--muted)}
.pg-chat .titem .th.has{background:#F4F3F0}
.pg-chat .titem .th img{width:100%;height:100%;object-fit:cover}
.pg-chat .titem .tx{min-width:0}
.pg-chat .titem .tx b{display:block;font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-chat .titem .tx span{display:block;font:11px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-chat .threads .foot{margin-top:auto;padding:10px 12px;border-top:1px solid var(--line)}
.pg-chat .threads .foot .project-menu{display:block}
.pg-chat .threads .foot .project-switch{width:100%;max-width:none;height:34px}
.pg-chat .threads .foot .project-switch .nm{flex:1;text-align:left}
.pg-chat .threads .foot .menu{top:auto;bottom:calc(100% + 6px);left:0;right:auto;width:100%;min-width:0}

/* ---------- chat header ---------- */
.pg-chat .chat > .hd{display:flex;align-items:center;gap:6px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);min-width:0}
.pg-chat .chat > .hd .title{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--head);padding:4px 6px;border-radius:7px;min-width:60px;flex:0 1 auto;color:var(--text)}
.pg-chat .chat > .hd .title:hover{background:var(--panel)}
.pg-chat .chat > .hd .title .i{color:var(--muted)}
.pg-chat .chat > .hd .rename{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.pg-chat .chat > .hd .rename .inp{height:30px;flex:1;min-width:0}
.pg-chat .chat > .hd .spacer{flex:1;min-width:0}
.pg-chat .chat > .hd .inline{display:inline-flex}
.pg-chat .statechip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--radius-pill);font:500 11px var(--mono);color:var(--violet-text);background:var(--violet-soft);border:1px solid var(--violet-line);white-space:nowrap}
.pg-chat .statechip i{width:6px;height:6px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px var(--violet-soft);animation:xw-pulse 1.6s ease-in-out infinite}
.pg-chat .statechip.waiting_approval{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}
.pg-chat .statechip.waiting_approval i{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);animation:none}
.pg-chat .statechip.failed{color:var(--fail);background:var(--fail-soft);border-color:var(--fail-line)}
.pg-chat .statechip.failed i{background:var(--fail);box-shadow:none;animation:none}
.pg-chat .status-bits{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pg-chat .status-bits:empty{display:none}
.pg-chat .taskid{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:var(--radius-pill);font:500 11px var(--mono);color:var(--muted);background:var(--surface);border:1px solid var(--line);cursor:copy;white-space:nowrap}
.pg-chat .taskid:hover{color:var(--text);border-color:var(--line-2)}
.pg-chat .taskid.copied{color:var(--pass);border-color:var(--pass-line);background:var(--pass-soft)}
.pg-chat .taskid.copied::after{content:" · copied"}
.pg-chat .agentchip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px 0 8px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--panel);font-size:12px;color:var(--text-2);white-space:nowrap;min-width:0}
.pg-chat .agentchip:hover{border-color:var(--muted)}
.pg-chat .agentchip .dot{width:7px;height:7px;border-radius:50%;background:var(--pass);flex:none}
.pg-chat .agentchip .dot.off{background:var(--faint)}
.pg-chat .agentchip b{font-weight:600;color:var(--text)}
.pg-chat .agentchip .m{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pg-chat .agentchip.compact .m{display:none}
.pg-chat .agentchip .i{color:var(--muted)}

/* ---------- messages ---------- */
.pg-chat .scroll{overflow-y:auto;min-height:0;padding:18px 16px 8px;outline:none}
.pg-chat .hello{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:60%;padding:24px 8px}
.pg-chat .hello h2{font-size:22px}
.pg-chat .hello p{color:var(--muted);font-size:12.5px;max-width:40ch}
.pg-chat .starters{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-width:100%}
.pg-chat .starters .chip{height:auto;min-height:32px;padding:6px 12px;white-space:normal;text-align:left;font-weight:400;color:var(--text-2)}
.pg-chat .msg{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;margin:0 0 18px}
.pg-chat .msg .who{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.pg-chat .msg .who img{width:16px;height:16px}
.pg-chat .msg .body{font-size:13.5px;line-height:1.55;min-width:0}
.pg-chat .msg .body p{margin:0 0 8px;overflow-wrap:anywhere}
.pg-chat .msg .body p:last-child{margin-bottom:0}
.pg-chat .msg.user{grid-template-columns:minmax(0,1fr);justify-items:end}
.pg-chat .msg.user .bubble{max-width:86%;background:var(--raised);border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:9px 13px;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.pg-chat .msg.user .bubble p{margin:0 0 6px}
.pg-chat .msg.user .bubble p:last-child{margin:0}
.pg-chat .msg.note .body{font-size:12.5px;color:var(--text-2)}
.pg-chat .msg.note.fail .who{color:var(--fail);border-color:var(--fail-line)}
.pg-chat .msg.note.fail .body b{color:var(--fail)}
.pg-chat .msg.note.fail form{margin-top:8px}

/* tool steps */
.pg-chat .xc-steps{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin:8px 0;overflow:hidden}
.pg-chat .xc-steps .sum{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:12px;color:var(--text-2);background:var(--surface)}
.pg-chat .xc-steps .sum .i{color:var(--violet-text)}
.pg-chat .xc-steps .sum .r{margin-left:auto;font:11px var(--mono);color:var(--muted);white-space:nowrap}
.pg-chat .xc-steps .step{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 11px;border-top:1px solid var(--line)}
.pg-chat .xc-steps .step .dot{width:7px;height:7px;border-radius:50%;background:var(--faint);justify-self:center}
.pg-chat .xc-steps .step.done .dot{background:var(--pass)}
.pg-chat .xc-steps .step.run .dot{background:var(--violet);box-shadow:0 0 0 3px var(--violet-soft);animation:xw-pulse 1.6s ease-in-out infinite}
.pg-chat .xc-steps .step.wait .dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.pg-chat .xc-steps .step.fail .dot{background:var(--fail)}
.pg-chat .xc-steps .step.denied .dot{background:var(--line-2)}
.pg-chat .xc-steps .step.denied .tool{text-decoration:line-through;color:var(--muted)}
.pg-chat .xc-steps .step .tool{font:500 12px var(--mono);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-chat .xc-steps .step .tool em{font-style:normal;color:var(--muted)}
.pg-chat .xc-steps .step .tool .srv{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-xs);padding:0 4px;margin-left:4px}
.pg-chat .xc-steps .step .meta{font:11px var(--mono);color:var(--muted);white-space:nowrap}
.pg-chat .xc-steps .step .args{grid-column:2/-1;font:11px/1.5 var(--mono);color:var(--fail);margin-top:-2px;overflow-wrap:anywhere}
.pg-chat .xc-steps .step .sub{grid-column:2/-1;font:11px/1.5 var(--mono);color:var(--muted);margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-chat .xc-steps .step .sub::before{content:"└ ";color:var(--faint)}

/* inline artifact chips (also the stage's versions strip) */
.pg-chat .inline-arts{display:flex;gap:8px;margin:8px 0 2px;flex-wrap:wrap}
.pg-chat .mini,.pg-chat .ver{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);color:var(--text-2);font-size:12px;text-decoration:none;min-width:0;text-align:left}
.pg-chat a.mini:hover,.pg-chat a.ver:hover{border-color:var(--line-2);color:var(--text)}
.pg-chat .mini.on,.pg-chat .ver.on{border-color:var(--lime-line);box-shadow:0 0 0 1px var(--lime-line);color:var(--text)}
.pg-chat .mini .th,.pg-chat .ver .th{width:30px;height:30px;border-radius:6px;overflow:hidden;display:grid;place-items:center;background:var(--raised);color:var(--muted);flex:none}
.pg-chat .ver .th{width:34px;height:34px}
.pg-chat .mini .th.has,.pg-chat .ver .th.has{background:#F4F3F0}
.pg-chat .mini .th img,.pg-chat .ver .th img{width:100%;height:100%;object-fit:cover}
.pg-chat .mini b,.pg-chat .ver b{display:block;font-weight:600;color:inherit;white-space:nowrap}
.pg-chat .mini > span:last-child > span,.pg-chat .ver > span:last-child > span{display:block;font:10.5px var(--mono);color:var(--muted);white-space:nowrap}
.pg-chat .ver.build .th{background:var(--planned-stripes)}
.pg-chat .ver.build{border-style:dashed}
/* audio artifacts: an inline player card (ui/inspector/_audio.html, compact) with the stage link as its header */
.pg-chat .xc-audio{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:8px;padding:8px 10px 10px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel)}
.pg-chat .xc-audio.on{border-color:var(--lime-line);box-shadow:0 0 0 1px var(--lime-line)}
.pg-chat .xc-audio-h{display:flex;align-items:center;gap:8px;min-width:0;color:var(--text-2);font-size:12px;text-decoration:none}
.pg-chat .xc-audio-h:hover{color:var(--text)}
.pg-chat .xc-audio-h .i{flex:none;color:var(--muted)}
.pg-chat .xc-audio-h b{font-weight:600;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-chat .xc-audio-h > span{font:10.5px var(--mono);color:var(--muted);white-space:nowrap;margin-left:auto}
.pg-chat .xc-audio .xa-player.compact .xa-wave{height:56px}
.pg-chat .xc-audio .xa-facts{display:none}

/* approval card */
.pg-chat .approve{border:1px solid var(--line-2);border-radius:var(--radius-panel);background:var(--panel);margin:10px 0 4px;overflow:hidden;box-shadow:var(--shadow-pop)}
.pg-chat .approve .ah{padding:12px 14px 10px;border-bottom:1px solid var(--line)}
.pg-chat .approve .ah h3{font-size:14px;display:flex;align-items:center;gap:8px;min-width:0}
.pg-chat .approve .ah h3 .srv{font:500 10.5px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-xs);padding:1px 5px;margin-left:auto;white-space:nowrap}
.pg-chat .approve .ah p{margin:4px 0 0;color:var(--text-2);font-size:12.5px}
.pg-chat .xc-field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line)}
.pg-chat .xc-field .l{font-weight:600;font-size:12.5px;flex:none}
.pg-chat .xc-field .v{display:flex;align-items:center;gap:8px;font:11.5px var(--mono);color:var(--text-2);min-width:0;text-align:right;overflow-wrap:anywhere}
.pg-chat .xc-field .v img{width:26px;height:26px;border-radius:5px;background:#F4F3F0;object-fit:cover;flex:none}
.pg-chat .approve .cost{display:flex;justify-content:flex-end;align-items:center;gap:6px;padding:8px 14px;font-size:12px;color:var(--text-2)}
.pg-chat .approve .cost b{font:600 12px var(--mono);color:var(--lime)}
.pg-chat .approve .af{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--line);background:var(--surface);align-items:center}
.pg-chat .approve .af .l{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.pg-chat .approve .af form{margin:0}
.pg-chat .approve .af .btn{height:30px}

/* the poller */
.pg-chat .poll{display:flex;align-items:center;gap:8px;min-height:8px;margin:0 0 10px 36px;font:11.5px var(--mono);color:var(--muted)}
.pg-chat .poll.reconnecting .w{visibility:hidden;position:relative}
.pg-chat .poll.reconnecting .w::after{content:"Reconnecting…";visibility:visible;position:absolute;left:0;top:0}

/* ---------- composer ---------- */
.pg-chat .composer{padding:8px 12px 12px;border-top:1px solid var(--line)}
.pg-chat .cbox{border:1px solid var(--line-2);background:var(--panel);border-radius:var(--radius-lg);padding:10px 10px 8px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.pg-chat .cbox:focus-within{border-color:var(--lime-line);box-shadow:0 0 0 3px var(--lime-soft)}
.pg-chat .cbox.off{opacity:.75}
.pg-chat .cbox textarea{display:block;width:100%;min-height:44px;max-height:200px;resize:none;background:transparent;border:0;outline:0;color:var(--text);font:13.5px/1.5 var(--ui);padding:3px 6px;overflow-y:auto}
.pg-chat .cbox textarea::placeholder{color:var(--muted)}
.pg-chat .cbox textarea:disabled{cursor:not-allowed}
.pg-chat .cerr{font-size:12px;color:var(--fail);margin:0 6px 4px}
.pg-chat .cbar{display:flex;align-items:center;gap:4px;margin-top:6px;min-width:0}
.pg-chat .cbar .spacer{flex:1}
.pg-chat .cbar .icon-btn{width:28px;height:28px;border-radius:7px;color:var(--muted)}
.pg-chat .cbar .icon-btn:disabled{opacity:.5}
/* the image chip (paste, drop, the paperclip; chat-attach.js) */
.pg-chat .cbox.drag{border-color:var(--lime-line);box-shadow:0 0 0 3px var(--lime-soft);border-style:dashed}
/* One chip per attached file (chat-attach.js draws them), wrapping into rows. */
.pg-chat .cimgs{display:flex;flex-wrap:wrap;gap:6px;margin:0 4px 6px;min-width:0}
.pg-chat .cimgs[hidden]{display:none}
.pg-chat .cimg{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 5px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface);max-width:100%;min-width:0;flex:0 1 auto}
.pg-chat .cimg-th{width:36px;height:36px;flex:none;object-fit:cover;border-radius:6px;background:var(--panel)}
.pg-chat .cimg-au{display:grid;place-items:center;color:var(--text-2);font-size:16px}
.pg-chat .cimg-name{font:12px var(--mono);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.pg-chat .cimg-x{width:24px;height:24px;flex:none;border-radius:7px;color:var(--muted);font-size:15px;line-height:1}
.pg-chat .cimg-x:hover{color:var(--text);background:var(--panel)}
/* The full-pane drop target over the thread and stage (the threads rail and icon rail stay out of it). */
.pg-chat .cdrop{position:fixed;top:0;bottom:0;left:calc(var(--iconrail-w, 48px) + var(--threads-w, 256px));right:0;z-index:40;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 70%,transparent);border:2px dashed var(--lime-line);pointer-events:none}
.pg-chat .cdrop[hidden]{display:none}
.pg-chat .cdrop-in{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 30px;border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--lime-line);box-shadow:0 10px 40px rgba(0,0,0,.35);color:var(--text);font:600 15px var(--head)}
.pg-chat .cdrop-in .i{width:22px;height:22px;color:var(--lime)}
.pg-chat .cdrop-in span{font:12px var(--mono);color:var(--muted)}
/* Sending: the Send button spins and the hint's status line says what's uploading. */
.pg-chat .send.busy .i{display:none}
.pg-chat .send.busy::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid rgba(0,0,0,.25);border-top-color:var(--lime-ink);animation:xw-spin .7s linear infinite}
.pg-chat .composer .hint [data-attach-status]{color:var(--text-2)}
.pg-chat .composer .hint [data-attach-status][hidden]{display:none}
.pg-chat .sel{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 10px;border:1px solid var(--line-2);border-radius:var(--radius-ctl);background:var(--surface);font:500 12.5px var(--ui);color:var(--text);white-space:nowrap}
.pg-chat select.sel{appearance:none;padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;background-size:4px 4px;background-repeat:no-repeat;max-width:150px;text-overflow:ellipsis;cursor:pointer}
.pg-chat span.sel{color:var(--text-2)}
.pg-chat .send{width:30px;height:30px;border-radius:9px;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;margin-left:4px;flex:none}
.pg-chat .send:hover{filter:brightness(1.06)}
.pg-chat .send:disabled{opacity:var(--disabled-opacity)}
.pg-chat .composer .hint{display:flex;justify-content:space-between;gap:12px;font:11px var(--mono);color:var(--faint);margin:7px 8px 0;min-width:0}
.pg-chat .composer .hint span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-chat .composer .hint span:last-child{flex:none}
.pg-chat .cbox.off + .hint{color:var(--muted)}

/* ---------- stage ---------- */
.pg-chat .stage > .hd{display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface);min-width:0}
.pg-chat .stage > .hd .who{display:flex;flex-direction:column;justify-content:center;gap:1px;flex:1 1 auto;min-width:72px;min-height:32px}
.pg-chat .stage > .hd h2{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.pg-chat .stage > .hd .sub{font:11px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-chat .stage > .hd .seg > *{padding:0 10px}
.pg-chat .stage > .hd .seg > .off{color:var(--faint);cursor:default}
.pg-chat .stage > .hd .btn .i{width:12px;height:12px}
.pg-chat .view{position:relative;min-height:0;display:grid;place-items:center;background:var(--viewer-bg);overflow:hidden}
.pg-chat .view .frame{height:min(76%,560px);max-width:82%;aspect-ratio:1/1;border-radius:18px;background:#F4F3F0;display:grid;place-items:center;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);position:relative}
.pg-chat .view .frame img{width:100%;height:100%;object-fit:contain}
.pg-chat .view .frame model-viewer{width:100%;height:100%}
/* an audio version on the stage: the full player (waveform, play, exports) on a wide light card */
.pg-chat .view .frame.xa-frame{aspect-ratio:auto;height:auto;width:min(88%,720px);max-width:none;padding:20px;place-items:stretch}
.pg-chat .view .frame.xa-frame .xa-player{color:var(--text)}
.pg-chat .view .frame .noprev{color:#6b6f78}
.pg-chat .view .frame .mv-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#3b3f48;font-size:12px}
.pg-chat .view .frame .mv-fallback img{max-height:70%;width:auto}
.pg-chat .view .frame .mv-fallback a{text-decoration:underline}
.pg-chat .view .ov{position:absolute;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pg-chat .view .ov.tl{left:16px;top:14px}
.pg-chat .view .ov.tr{right:16px;top:14px}
.pg-chat .view .ov.br{right:16px;bottom:14px}
.pg-chat .view .ov.bl{left:16px;bottom:14px}
.pg-chat .view .ov .icon-btn{background:rgba(16,19,27,.85);border-color:var(--overlay-line)}
.pg-chat .view .nothing{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--text-2);padding:24px}
.pg-chat .view .nothing .ic{width:42px;height:42px;border-radius:var(--radius-panel);background:var(--raised-2);display:grid;place-items:center;color:var(--text-2)}
.pg-chat .view .nothing .ic .i{width:20px;height:20px}
.pg-chat .view .nothing h3{font-size:15px;color:var(--text)}
.pg-chat .view .nothing p{font-size:12.5px;color:var(--muted);max-width:40ch}
.pg-chat .tagc{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--radius-xs);font:500 11px var(--mono);border:1px solid var(--line-2);color:var(--text-2);background:var(--surface);white-space:nowrap}
.pg-chat .tagc.lime{color:var(--lime);border-color:var(--lime-line);background:var(--lime-soft)}
.pg-chat .tagc.violet{color:var(--violet-text);border-color:var(--violet-line);background:var(--violet-soft)}
.pg-chat .tagc.pass{color:var(--pass);border-color:var(--pass-line);background:var(--pass-soft)}
.pg-chat .tagc.off{color:var(--muted);border-style:dashed}
.pg-chat .stage > .ft{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;min-width:0;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface)}
.pg-chat .versions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.pg-chat .facts{display:flex;gap:14px;flex-wrap:wrap;font:11.5px var(--mono);color:var(--muted);margin-left:8px}
.pg-chat .facts i{font-style:normal;color:var(--text-2)}
.pg-chat .stage > .ft .acts{display:flex;gap:6px}

/* ---------- agent drawer content ---------- */
.pg-chat .agent{display:flex;flex-direction:column;min-height:0;height:100%}
.pg-chat .agent .hd{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pg-chat .agent .hd h2{font-size:15px;flex:1}
.pg-chat .agent .bd{overflow-y:auto;min-height:0;padding:14px 16px 24px;flex:1}
.pg-chat .agent h4{font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.pg-chat .agent .bd > form > h4:first-of-type,.pg-chat .agent .bd > h4:first-child{margin-top:0}
.pg-chat .agent .saved{display:flex;align-items:center;gap:6px;color:var(--pass);font-size:12px;margin:0 0 10px}
.pg-chat .xc-row{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);margin-bottom:6px}
.pg-chat .xc-row > .i{color:var(--muted);margin-top:2px}
.pg-chat .xc-row .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pg-chat .xc-row .nm b{display:block;font-weight:600;font-size:12.5px}
.pg-chat .xc-row .nm > span,.pg-chat .xc-row.col > span{font:11px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.pg-chat .xc-row.col{flex-direction:column;align-items:stretch;gap:6px}
.pg-chat .xc-row.col b{font-weight:600;font-size:12.5px}
.pg-chat .xc-row .inp{height:30px;font-size:12.5px}
.pg-chat .xc-row textarea.inp{height:auto;min-height:96px}
.pg-chat .xc-row .nm .acts{display:flex;gap:6px;margin-top:4px}
.pg-chat .xc-row.srv .nm .fail-t{font-style:normal;overflow-wrap:anywhere}
.pg-chat .tools{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;padding:4px 10px 8px}
.pg-chat .tools div{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font:12px var(--mono);color:var(--text-2);min-width:0}
.pg-chat .tools div em{font-style:normal;color:var(--muted);font-size:11px}
.pg-chat .sw2{display:inline-block;width:28px;height:16px;border-radius:999px;background:var(--line-2);position:relative;flex:none;cursor:pointer;border:0;padding:0;vertical-align:middle}
.pg-chat .sw2::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--text-2);transition:left var(--t-fast) var(--ease)}
.pg-chat .sw2.on{background:var(--lime)}
.pg-chat .sw2.on::after{left:14px;background:var(--lime-ink)}
.pg-chat .sw2.fixed{opacity:.6;cursor:default}
.pg-chat label.sw2 input{position:absolute;opacity:0;width:1px;height:1px}
.pg-chat label.sw2:has(input:checked){background:var(--lime)}
.pg-chat label.sw2:has(input:checked)::after{left:14px;background:var(--lime-ink)}
.pg-chat label.sw2:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.pg-chat .addsrv{border:1px dashed var(--line-2);border-radius:var(--radius-box);padding:10px;display:grid;gap:8px;margin-bottom:6px}
.pg-chat .addsrv .t{font-weight:600;font-size:12.5px}
.pg-chat .addsrv .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pg-chat .addsrv .r{display:flex;gap:6px;justify-content:flex-end}
.pg-chat .addsrv .inp{height:32px;font-size:12.5px}
.pg-chat .ferr{font-size:11.5px;color:var(--fail);margin:0}
.pg-chat .radio{display:flex;flex-direction:column;gap:4px}
.pg-chat .radio label{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);font-size:12.5px;cursor:pointer}
.pg-chat .radio label.on,.pg-chat .radio label:has(input:checked){border-color:var(--lime-line);box-shadow:inset 0 0 0 1px var(--lime-line)}
.pg-chat .radio label input{margin:0;width:14px;height:14px;accent-color:var(--lime)}
.pg-chat .radio span.d{margin-left:auto;font:11px var(--mono);color:var(--muted)}
.pg-chat .xc-kv{display:grid;grid-template-columns:1fr auto;gap:0 12px;margin:8px 0 0}
.pg-chat .xc-kv div{display:contents}
.pg-chat .xc-kv dt{padding:7px 0;border-bottom:1px solid var(--line);color:var(--text-2);font-size:12.5px;display:flex;align-items:center}
.pg-chat .xc-kv dd{margin:0;padding:5px 0;border-bottom:1px solid var(--line);text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.pg-chat .xc-kv dd .inp{height:28px;width:auto;min-width:0;font:500 12px var(--mono);text-align:right}
.pg-chat .xc-kv dd .inp.num{width:92px}
.pg-chat .xc-kv dd select.inp{text-align:left;width:auto;min-width:118px}
.pg-chat .xc-kv dd .u{font:11px var(--mono);color:var(--muted);white-space:nowrap}
.pg-chat .xc-kv .ferr dt,.pg-chat .xc-kv .ferr dd{border-bottom:0;padding-top:0;color:var(--fail);font-size:11.5px}
.pg-chat .agent .ft{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}

/* ---------- responsive (CHAT-SPEC §1: threads collapse below 1280, the stage below 980) ---------- */
@media (max-width:979px){
  .pg-chat .msg.user .bubble{max-width:92%}
  .pg-chat .inline-arts{gap:6px}
}
@media (max-width:767px){
  .pg-chat .chat > .hd{padding:8px 8px 8px 10px}
  .pg-chat .agentchip .m{display:none}
  .pg-chat .scroll{padding:14px 10px 6px}
  .pg-chat .composer{padding:6px 8px 8px}
  .pg-chat .approve .af{flex-direction:column;align-items:stretch}
  .pg-chat .approve .af .btn{width:100%}
}
@media (pointer:coarse){
  .pg-chat .titem,.pg-chat .mini,.pg-chat .ver,.pg-chat .cbar .icon-btn,.pg-chat .send,.pg-chat .sel,.pg-chat .agentchip,.pg-chat .chat > .hd .title{min-height:44px}
  .pg-chat .send{width:44px}
  .pg-chat .sw2{width:44px;height:24px}
  .pg-chat .sw2::after{width:20px;height:20px}
  .pg-chat .sw2.on::after,.pg-chat label.sw2:has(input:checked)::after{left:22px}
}

/* "Next steps" under the latest agent answer (ui/chat/_message.html, mockup B): a box of up to three numbered
   rows; row 1 is lime and "Suggested"; a mentioned version is a small asset tag. Long labels wrap inside their
   column (min-width:0 + overflow-wrap), the tag truncates rather than overflow. Own classes, not .chip. */
.msg .next-steps{display:block;margin-top:10px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);overflow:hidden;max-width:100%}
.msg .next-steps .ns-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:7px 12px;border-bottom:1px solid var(--line);font:500 11px var(--mono);color:var(--muted)}
.msg .next-steps .ns-list{list-style:none;margin:0;padding:4px;display:flex;flex-direction:column;gap:2px}
.msg .next-steps .ns-row{margin:0;min-width:0}
.msg .next-steps form{margin:0}
.msg .next-steps .ns-btn{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-width:0;padding:8px;border:1px solid transparent;border-radius:var(--radius-ctl);background:transparent;color:var(--text-2);font:400 13px/1.4 var(--ui);text-align:left;text-decoration:none;cursor:pointer}
.msg .next-steps .ns-btn:hover{background:var(--raised);color:var(--text)}
.msg .next-steps .ns-btn .k{width:22px;height:22px;border-radius:var(--radius-xs);display:grid;place-items:center;border:1px solid var(--line-2);font:500 11px var(--mono);color:var(--muted)}
.msg .next-steps .ns-btn .ns-t{min-width:0;overflow-wrap:anywhere;word-break:normal}
.msg .next-steps .ns-btn .go{width:14px;height:14px;color:var(--faint)}
.msg .next-steps .ns-ref{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:0 6px;height:20px;border-radius:var(--radius-badge);background:var(--raised-2);border:1px solid var(--line);font:500 12px var(--ui);color:var(--text);vertical-align:1px;white-space:nowrap}
.msg .next-steps .ns-ref > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.msg .next-steps .ns-ref .i{flex:none;width:12px;height:12px;color:var(--muted)}
.msg .next-steps .primary .ns-btn{background:var(--lime-soft);border-color:var(--lime-line);color:var(--text)}
.msg .next-steps .primary .ns-btn:hover{border-color:var(--lime)}
.msg .next-steps .primary .ns-btn .k{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.msg .next-steps .primary .ns-btn .go{color:var(--lime)}
.msg .next-steps .primary .sug{display:block;font:600 10px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin-bottom:2px}
.msg .next-steps .ns-btn.htmx-request,.msg .next-steps form.htmx-request .ns-btn{opacity:.6;cursor:progress}
@media (pointer:coarse){ .msg .next-steps .ns-btn{min-height:44px} }

/* ---------- storyboards in chat (storyboards-in-chat plan §4; mockups 01, 02, 05) ----------
   Lime marks the selection and a shot the chat just changed, violet marks work in progress. Classes are
   namespaced .sb-; the toggler, counters and tags reuse .seg and .tagc. */

/* the toggler as a selector (before the first message) and the Storyboard segment */
.pg-chat .stage > .hd .seg > button{border:0;background:transparent;font:inherit;cursor:pointer;color:var(--muted)}
.pg-chat .stage > .hd .seg > button.off{color:var(--faint);cursor:pointer}
.pg-chat .stage > .hd .seg > button.off:hover,.pg-chat .stage > .hd .seg > button:hover{color:var(--text);background:rgba(255,255,255,.03)}
.pg-chat .stage > .hd .seg > button.on{background:var(--raised-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.pg-chat .stage > .hd .seg > .sb.on{background:var(--lime-soft);color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime-line)}
.pg-chat .stage > .hd .seg > .sb.on:hover{color:var(--lime);background:var(--lime-soft)}
.pg-chat .stage > .hd .seg .i{width:14px;height:14px}
.pg-chat .tagc.dark{background:var(--overlay);border-color:var(--overlay-line);color:var(--text)}
.pg-chat .tagc.fail{color:var(--fail);border-color:var(--fail-line);background:var(--fail-soft)}
.pg-chat .tagc .i{width:12px;height:12px}

/* the board */
.pg-chat .sb-view{display:block;overflow-y:auto;background:var(--bg)}
.pg-chat .sb-view.empty{background:var(--viewer-bg)}
.pg-chat .sb-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px 0}
.pg-chat .sb-counters{display:flex;gap:8px;flex-wrap:wrap}
.pg-chat .sb-time{margin-left:auto;font:11px var(--mono);color:var(--muted);white-space:nowrap}
.pg-chat .sb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 16px;margin:0;list-style:none}
.pg-chat .sb-card{position:relative;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);overflow:hidden;min-width:0;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.pg-chat .sb-card:hover{border-color:var(--line-2)}
.pg-chat .sb-pick{display:block;width:100%;text-align:left;background:transparent;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer}
.pg-chat .sb-pick:focus-visible{outline:2px solid var(--lime);outline-offset:-2px;border-radius:var(--radius-box)}
.pg-chat .sb-th{display:block;position:relative;aspect-ratio:16/9;background:var(--planned-stripes);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden}
.pg-chat .sb-card.drawn .sb-th{background:#E9E6DF;box-shadow:none}
.pg-chat .sb-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-chat .sb-badge{position:absolute;left:6px;top:6px;z-index:2}
.pg-chat .sb-tag{position:absolute;right:6px;top:6px;z-index:3;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-xs);font:600 11px var(--mono);background:var(--lime);color:var(--lime-ink);white-space:nowrap}
.pg-chat .sb-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:500 11px var(--mono);color:var(--muted)}
.pg-chat .sb-lbl .i{width:16px;height:16px}
.pg-chat .sb-lbl.fail{color:var(--fail)}
.pg-chat .sb-card.queued,.pg-chat .sb-card.empty{border-style:dashed}
.pg-chat .sb-card.drawing{border-color:var(--violet-line)}
.pg-chat .sb-card.drawing .sb-th img{filter:blur(9px) grayscale(.4) brightness(.9);transform:scale(1.08)}
.pg-chat .sb-shimmer{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 30%,rgba(185,160,255,.28) 50%,transparent 70%);background-size:200% 100%;animation:xw-shimmer 1.6s linear infinite}
.pg-chat .sb-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:var(--radius-pill);background:var(--overlay);border:1px solid var(--violet-line);color:var(--violet-text);font:500 11px var(--mono);white-space:nowrap}
.pg-chat .sb-pill .spinner{width:12px;height:12px;border-width:2px;border-color:var(--violet-line);border-top-color:var(--violet-text)}
.pg-chat .sb-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.35);z-index:2;overflow:hidden}
.pg-chat .sb-bar i{display:block;height:100%;background:var(--violet);transition:width .6s linear}
.pg-chat .sb-bar:not([aria-valuenow]) i{width:40%!important;animation:sb-slide 1.4s ease-in-out infinite}
@keyframes sb-slide{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.pg-chat .sb-card.failed{border-color:var(--fail-line)}
.pg-chat .sb-card.changed,.pg-chat .sb-card.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.pg-chat .sb-m{display:flex;flex-direction:column;gap:4px;padding:7px 9px 9px}
.pg-chat .sb-t{display:flex;gap:7px;align-items:baseline;min-width:0}
.pg-chat .sb-no{font:600 11.5px var(--mono);color:var(--lime);flex:none}
.pg-chat .sb-cap{font-size:12px;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pg-chat .sb-card.queued .sb-cap,.pg-chat .sb-card.empty .sb-cap{color:var(--text-2)}
.pg-chat .sb-d{font:500 10.5px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-chat .sb-fail{display:flex;align-items:center;gap:8px;padding:0 9px 9px;font:500 10.5px var(--mono);color:var(--muted)}
.pg-chat .sb-fail form{margin:0}
.pg-chat .sb-fail .btn{height:22px;padding:0 8px;font-size:11px;border-radius:var(--radius-xs)}
.pg-chat .sb-qa{position:absolute;right:6px;top:6px;z-index:3;display:flex;gap:3px;opacity:0;transition:opacity var(--t-fast) var(--ease)}
.pg-chat .sb-card:hover .sb-qa,.pg-chat .sb-card:focus-within .sb-qa{opacity:1}
.pg-chat .sb-qa form{margin:0}
.pg-chat .sb-qa .icon-btn{width:24px;height:24px;border-radius:5px;background:var(--overlay);border:1px solid var(--overlay-line);color:var(--text)}
.pg-chat .sb-qa .icon-btn:hover{background:var(--raised-2)}
.pg-chat .sb-qa .icon-btn:disabled{opacity:.5;cursor:not-allowed}

/* the empty state: "Your storyboard builds here", meta chips, the S01…S06 placeholders */
.pg-chat .sb-view .sb-hello{text-align:center;padding:48px 16px 0}
.pg-chat .sb-view .sb-hello h3{font-size:16px;color:var(--text)}
.pg-chat .sb-view .sb-hello p{color:var(--muted);font-size:12.5px;margin-top:4px}
.pg-chat .sb-chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.pg-chat .sb-ph{margin-top:24px}
.pg-chat .sb-ph .sb-card{pointer-events:none}
.pg-chat .sb-ph .sb-card:nth-child(2){opacity:.9}
.pg-chat .sb-ph .sb-card:nth-child(3){opacity:.8}
.pg-chat .sb-ph .sb-card:nth-child(4){opacity:.7}
.pg-chat .sb-ph .sb-card:nth-child(5){opacity:.62}
.pg-chat .sb-ph .sb-card:nth-child(6){opacity:.55}
.pg-chat .sb-ph .sb-cap{color:var(--faint)}
.pg-chat .hello.sb-hello .badge{width:44px;height:44px;border-radius:12px;background:var(--lime-soft);border:1px solid var(--lime-line);display:grid;place-items:center;color:var(--lime)}
.pg-chat .hello.sb-hello .badge .i{width:20px;height:20px}

/* the footer: facts, Stop while busy, Open in editor (disabled until a panel is drawn) */
.pg-chat .sb-footer .facts{margin-left:0}
.pg-chat .sb-footer .facts .strong{color:var(--text-2)}
.pg-chat .sb-footer .acts{display:flex;gap:6px;align-items:center}
.pg-chat .sb-footer .acts form{margin:0}

/* the finished board (plan §4.6; mockup 03): the animatic player above the grid, the lime Open in editor in
   the header, `Ready` in the chat header */
.pg-chat .sb-player{padding:14px 16px 4px}
.pg-chat .sb-player .anim-frame{width:min(100%,calc(62vh * (var(--anim-ar,16/9))))}
.pg-chat .sb-view.ready .sb-top{padding-top:8px}
.pg-chat .statechip.idle{color:var(--pass);background:var(--pass-soft);border-color:var(--pass-line)}
.pg-chat .statechip.idle i{background:var(--pass);box-shadow:none;animation:none}

/* the chat column: the Plan card (plan §4.3; mockup 02) and the finished board's cards (plan §4.6; mockup 03) */
.pg-chat .plan-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin:8px 0;overflow:hidden}
.pg-chat .plan-card .ph{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:12px;color:var(--text-2);background:var(--surface);border-bottom:1px solid var(--line)}
.pg-chat .plan-card .ph .i{color:var(--violet-text)}
.pg-chat .plan-card .ph b{font-weight:600;color:var(--text)}
.pg-chat .plan-card .ph .r{margin-left:auto;font:11px var(--mono);color:var(--muted);white-space:nowrap}
.pg-chat .plan-card .pl{margin:0;padding:6px 11px 8px 30px;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--text-2)}
.pg-chat .plan-card .pl li{display:flex;gap:7px;align-items:baseline;min-width:0;padding-left:2px}
.pg-chat .plan-card .pl li::marker{font:11px var(--mono);color:var(--muted)}
.pg-chat .plan-card .pl .code{font:600 11.5px var(--mono);color:var(--lime);flex:none}
.pg-chat .plan-card .pl .f{flex:none;color:var(--text)}
.pg-chat .plan-card .pl .a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.pg-chat .sb-cards{display:flex;flex-direction:column;gap:6px;margin:8px 0 2px;align-items:flex-start}
.pg-chat .sb-cards .mini .th.wide{width:52px;height:30px}
.pg-chat .sb-cards .sb-card-link:first-child{border-color:var(--lime-line);box-shadow:0 0 0 1px var(--lime-line);color:var(--text)}
.pg-chat .sb-cards .sb-card-link:first-child:hover{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.pg-chat .sb-cards .mini .th .i{color:var(--muted)}

/* the composer: the sliders icon, the quiet line and the settings popover */
.pg-chat .composer{position:relative}
.pg-chat .cbar .sb-set{color:var(--muted)}
.pg-chat .cbar .sb-set:hover,.pg-chat .cbar .sb-set[aria-expanded="true"]{color:var(--text);background:var(--surface)}
.pg-chat .composer .hint > :last-child{flex:none}
.pg-chat .composer .hint .qline{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.pg-chat .composer .hint .qline:hover,.pg-chat .composer .hint .qline[aria-expanded="true"]{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.pg-chat .sb-pop{position:absolute;right:56px;bottom:78px;z-index:45;width:min(300px,calc(100% - 24px));max-height:min(70vh,520px);overflow-y:auto;border-radius:var(--radius-pop);background:var(--raised);border:1px solid var(--line-2);box-shadow:var(--shadow-menu);padding:6px}
.pg-chat .sb-pop[hidden]{display:none}
.pg-chat .sb-pop form{margin:0}
.pg-chat .sb-group{border:0;margin:0;padding:0 0 4px;min-width:0}
.pg-chat .sb-group legend{font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 8px 4px}
.pg-chat .sb-opt{position:relative;display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--radius-ctl);color:var(--text-2);font-size:12.5px;cursor:pointer}
.pg-chat .sb-opt:hover,.pg-chat .sb-opt:has(input:checked){background:var(--raised-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.pg-chat .sb-opt:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:-2px}
.pg-chat .sb-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pg-chat .sb-opt .sb-ck{width:14px;height:14px;color:var(--lime);visibility:hidden;flex:none}
.pg-chat .sb-opt:has(input:checked) .sb-ck{visibility:visible}
.pg-chat .sb-opt .sb-nm{flex:1;min-width:0}
.pg-chat .sb-opt .sb-nm small{display:block;font-size:11px;color:var(--muted)}
.pg-chat .sb-opt .k{font:500 10.5px var(--mono);color:var(--muted)}
.pg-chat .sb-opt .sb-sw{width:40px;height:24px;border-radius:4px;overflow:hidden;flex:none;border:1px solid var(--line-2)}
.pg-chat .sb-opt .sb-sw img{display:block;width:100%;height:100%;object-fit:cover}
.pg-chat .sb-opt.dis{opacity:.5;cursor:not-allowed}
.pg-chat .sb-opt.dis:hover{background:transparent;box-shadow:none;color:var(--text-2)}

@media (max-width:979px){
  .pg-chat .sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-chat .sb-pop{right:12px}
}
@media (prefers-reduced-motion:reduce){
  .pg-chat .sb-shimmer{animation:none;background:rgba(185,160,255,.14)}
  .pg-chat .sb-bar:not([aria-valuenow]) i{animation:none;width:100%!important;opacity:.45}
}
@media (pointer:coarse){
  .pg-chat .sb-qa{opacity:1}
  .pg-chat .sb-qa .icon-btn,.pg-chat .sb-fail .btn{min-width:32px;min-height:32px}
}