/* ── Buttons ── */
.btn{padding:7px 18px;font-size:14px;font-weight:500;font-family:var(--font-sans);letter-spacing:-.01em;border:1px solid var(--rule2);border-radius:var(--r-pill);background:transparent;color:var(--ink2);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.btn:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-lt)}
.btn-solid{background:var(--cta);border-color:transparent;color:var(--cta-ink);font-weight:600}
.btn-solid:hover{background:var(--cta-hover);border-color:transparent;color:var(--cta-ink)}
.btn-sm{padding:5px 14px;font-size:12px}
.btn-danger{border-color:var(--red);color:var(--red);background:transparent}
.btn-danger:hover{background:var(--red-lt);border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.35;cursor:not-allowed}
/* ── Page container ── */
.page{flex:1;overflow:hidden;display:flex;flex-direction:column}
.page-scroll{flex:1;overflow-y:auto;padding:20px;background:var(--w)}
/* ── Stats row ── */
.kpi-bar{display:grid;grid-template-columns:repeat(4,1fr);flex-shrink:0;background:var(--off)}
.kpi{padding:16px 22px;border-right:1px solid var(--rule);background:var(--off)}
.kpi:last-child{border-right:none}
.kpi-n{font-family:var(--font-sans);font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1}
.kpi-n.c-blue{color:var(--cyan)}.kpi-n.c-red{color:var(--red)}.kpi-n.c-green{color:var(--green)}.kpi-n.c-amber{color:var(--amber)}.kpi-n.c-purple{color:var(--purple)}
.kpi-l{font-family:var(--font-sans);font-size:12px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-top:4px}
/* ── Collapsible sections ── */
/* Carets are injected after each .kpi-bar / .filter-bar / .tab-bar by
   applyCollapsibleHeaders(); per-section state lives in localStorage so the
   layout sticks across reloads and page changes. */
/* Bars whose content can reach the right edge reserve space for the caret so
   it never overlaps them (filter-bar's right-aligned "N of M" counter,
   tab-bar's rightmost tab). NOT .kpi-bar — it's a grid of 1fr columns with
   nothing right-aligned, and the padding would just shrink every column. */
.filter-bar[data-sec-id]:not(.sec-collapsed),.tab-bar[data-sec-id]:not(.sec-collapsed){padding-right:80px}
.sec-caret{position:absolute;top:8px;right:10px;background:var(--off2);border:1px solid var(--rule);cursor:pointer;color:var(--ink2);font-size:11px;font-weight:500;padding:4px 11px;border-radius:var(--r-pill);line-height:1;z-index:2;font-family:var(--font-sans);display:inline-flex;align-items:center;gap:4px;transition:all .12s;letter-spacing:.02em;opacity:.8}
.sec-caret:hover{color:var(--purple);border-color:var(--purple);background:var(--purple-lt);opacity:1}
.sec-collapsed{padding:8px 18px!important;min-height:0!important;cursor:pointer;display:flex!important;align-items:center;gap:8px;grid-template-columns:none!important;flex-wrap:nowrap;background:var(--off2)!important;border-bottom:1px dashed var(--rule)!important}
.sec-collapsed > *:not(.sec-caret){display:none!important}
.sec-collapsed::before{content:attr(data-collapsed-label);color:var(--ink2);font-size:12px;font-style:normal;font-family:var(--font-sans);font-weight:500;letter-spacing:.02em}
.sec-collapsed:hover{background:var(--purple-lt)!important;border-color:var(--purple)!important}
.sec-collapsed:hover::before{color:var(--purple)}
.sec-collapsed .sec-caret{position:static;background:transparent;border:none;padding:0;opacity:.7}
/* ── Tags / Pills ── */
.tag{font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:2px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:3px}
.tag-open{color:var(--cyan);background:var(--cyan-lt)}
.tag-pending{color:var(--amber);background:var(--amber-lt)}
.tag-escalated{color:var(--escalate);background:var(--escalate-lt)}
.tag-gdpr{color:var(--red);background:var(--red-lt)}
.tag-resolved{color:var(--green);background:var(--green-lt)}
.tag-urgent{color:var(--red);background:var(--red-lt)}
.tag-high{color:var(--amber);background:var(--amber-lt)}
.tag-normal{color:var(--ink2);background:var(--off2)}
/* --ink4 on --off2 measured 2.26:1 — below AA even before the retheme.
   --ink3 keeps "low" visually quiet while staying legible. */
.tag-low{color:var(--ink3);background:var(--off2)}
.tag-neutral{color:var(--ink2);background:var(--off2)}
.tag-closed{color:var(--ink2);background:var(--off2)}
.closure-date{margin-top:8px;color:var(--ink2);font-size:12px;line-height:1.5}
.closure-note{margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere}
#closure-error{white-space:pre-wrap;color:var(--red);font-size:13px}
.closure-modal .modal-body>p{margin-bottom:16px}
@media(max-width:768px){.closure-modal .btn,.closure-modal select{min-height:44px}}
/* ── Table ── */
.tbl{width:100%;border-collapse:collapse;background:var(--off)}
.tbl th{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:10px 14px;border-bottom:1px solid var(--rule);text-align:left;cursor:pointer;white-space:nowrap;user-select:none}
.tbl th:hover{color:var(--ink)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:middle;font-size:14px;color:var(--ink2)}
.tbl tr:hover td{background:var(--purple-lt)}
.tbl tr.active td{background:var(--purple-lt)}
.tbl td.bold{font-weight:500;color:var(--ink)}
/* ── Filter bar ── */
.filter-bar{display:flex;align-items:center;gap:6px;padding:10px 20px;flex-wrap:wrap;flex-shrink:0;background:var(--off)}
.filter-label{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.filter-select{font-family:var(--font-sans);font-size:11px;padding:5px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);background:#ffffff;color:var(--ink2);cursor:pointer;outline:none}
.filter-select:focus{border-color:var(--purple)}
.filter-tag{font-family:var(--font-sans);font-size:11px;padding:3px 11px;border:1px solid var(--rule2);border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:4px;color:var(--ink2);background:var(--off2)}
.filter-tag.active{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:600}
.filter-tag.active .rm{color:rgba(255,255,255,0.7)}
.filter-tag.active .rm:hover{color:#fff}
/* "More filters" disclosure and the row it reveals (issue #447). The row is
   .filter-subbar, NOT a second .filter-bar: collapsible.js indexes .filter-bar
   elements by position to build the data-sec-id it persists, so a row that
   appears and disappears would shuffle those ids — and a disclosure shouldn't
   carry its own collapse caret anyway. */
.filter-more{font-family:var(--font-sans);font-size:11px;padding:3px 11px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--off2);color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .12s;white-space:nowrap}
.filter-more:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-lt)}
.filter-more.open{border-color:var(--rule3);color:var(--ink);background:var(--off)}
.filter-more-caret{font-size:9px;line-height:1;opacity:.7}
.filter-more-n{font-family:var(--font-mono);font-size:10px;font-weight:600;line-height:1;padding:1px 6px;border-radius:var(--r-pill);background:var(--purple);color:#fff}
/* A full-width child of .filter-bar, so it wraps onto its own line and is
   hidden along with everything else when the section is collapsed. */
.filter-subbar{flex-basis:100%;display:flex;align-items:center;gap:6px;padding:8px 0 0;margin-top:2px;border-top:1px solid var(--rule);flex-wrap:wrap}
/* Always in the DOM so aria-controls resolves; [hidden] alone loses to the
   display:flex above, so it needs an explicit rule. */
.filter-subbar[hidden]{display:none}
.filter-subbar-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--rule2)}
/* Divides the chips you can PICK (views, pinned searches) from the chips that
   are currently APPLIED — both are .filter-tag, and only the × told them
   apart. */
.filter-sep{width:1px;align-self:center;height:16px;margin:0 4px;background:var(--rule2)}
/* A pinned saved search sits among the built-in view chips; the dashed edge
   marks it as one of yours rather than one of the six standard views. */
.filter-tag-saved{border-style:dashed}
.filter-tag .rm{cursor:pointer;color:var(--ink3);font-size:11px;line-height:1}
.filter-tag .rm:hover{color:var(--red);cursor:pointer}
/* ── Tab bar ── */
.tab-bar{display:flex;padding:0 20px;flex-shrink:0;background:var(--off)}
.tab{padding:10px 14px;font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.tab:hover{color:var(--purple)}
.tab.active{color:var(--purple);border-bottom-color:var(--purple)}
/* ── Header tabs (merged-page switcher, sits inside .topbar in place of .tb-title) ── */
.hdr-tabs{display:flex;align-items:center;gap:2px;margin-right:auto}
.hdr-tab{padding:5px 13px;font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink3);cursor:pointer;border-radius:var(--r-pill);transition:color .12s,background .12s;white-space:nowrap}
.hdr-tab:hover{color:var(--ink);background:var(--purple-lt)}
.hdr-tab.active{color:var(--purple);background:var(--purple-lt)}
/* ── Modal ── */
.modal-bg{position:absolute;inset:0;background:rgba(19,14,48,0.35);display:flex;align-items:center;justify-content:center;z-index:100}

/* ── Guided tours ── */
#guide-container{position:absolute;inset:0;pointer-events:none;z-index:160}
.guide-layer{position:fixed;inset:0;pointer-events:auto}
.guide-spotlight{position:fixed;border:2px solid var(--purple);border-radius:10px;box-shadow:0 0 0 9999px rgba(32,18,56,.28),0 0 0 4px rgba(109,40,217,.15);pointer-events:none}
.guide-card{position:fixed;display:flex;flex-direction:column;box-sizing:border-box;width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:18px;background:var(--off);border:1px solid var(--rule2);border-radius:14px;box-shadow:0 16px 40px rgba(32,18,56,.2);opacity:0;outline:none}
.guide-meta{display:flex;align-items:center;justify-content:space-between;color:var(--purple);font:500 10px var(--font-mono);letter-spacing:.04em}
.guide-meta button{border:0;background:none;color:var(--purple);font:600 12px var(--font-sans);cursor:pointer;padding:4px}
.guide-card h2,.guide-menu h2{margin:8px 0 4px;font:700 20px var(--font-sans);letter-spacing:-.03em;color:var(--ink)}
.guide-card p,.guide-menu>p{margin:0;color:var(--ink2);font-size:13px;line-height:1.5}
.guide-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:18px}
.guide-foot .btn:last-child{justify-self:end}
.guide-instructions{min-height:0;overflow:auto;margin:14px 0 0;padding:2px 6px 2px 24px;color:var(--ink2);font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.guide-instructions li+li{margin-top:12px}
.guide-instructions:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.guide-meta,.guide-card h2,.guide-card>p,.guide-foot{flex-shrink:0}
.guide-progress{color:var(--ink3);font:500 11px var(--font-mono);white-space:nowrap}
.guide-menu-layer{display:grid;place-items:center;padding:16px;background:rgba(32,18,56,.28)}
.guide-menu{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px;background:var(--off);border:1px solid var(--rule2);border-radius:14px;box-shadow:0 16px 40px rgba(32,18,56,.2);outline:none}
.guide-menu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.guide-menu-head h2{margin-top:3px}
.guide-kicker{color:var(--purple);font:500 10px var(--font-mono);letter-spacing:.08em}
.guide-start{width:100%;justify-content:center;margin:18px 0 10px}
.guide-menu-list{display:grid;gap:6px}
.guide-menu-list>button{display:grid;grid-template-columns:1fr auto;gap:3px 12px;width:100%;padding:12px 14px;text-align:left;border:0;border-radius:var(--r2);background:var(--off2);color:var(--ink);cursor:pointer;font:600 13px var(--font-sans)}
.guide-menu-list>button:hover,.guide-menu-list>button:focus-visible{background:var(--purple-lt);outline:2px solid var(--purple);outline-offset:0}
.guide-menu-list small{grid-column:1;color:var(--ink3);font-size:11px;font-weight:400;line-height:1.4}
.guide-menu-list b{grid-column:2;grid-row:1/3;align-self:center;color:var(--purple)}
.guide-complete{margin-top:14px;color:var(--green);font:500 11px var(--font-mono)}
@media(max-width:600px){.guide-trigger span{display:none}.guide-trigger{min-width:32px}.guide-card{left:12px!important;top:auto!important;bottom:12px}.guide-foot{gap:8px}}
@media(prefers-reduced-motion:reduce){.guide-card{transition:none}}
/* ── Cmd+K quick switcher ── */
#quick-switcher{position:fixed;inset:0;z-index:500}
.qs-backdrop{position:absolute;inset:0;background:rgba(19,14,48,0.40)}
.qs-shell{position:relative;margin:80px auto 0;width:640px;max-width:92vw;background:var(--off);border:1px solid var(--rule2);border-radius:var(--r2);box-shadow:0 24px 60px rgba(19,14,48,0.18);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.qs-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule);background:var(--off)}
.qs-input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-sans);font-size:15px;color:var(--ink);padding:4px 0}
.qs-input::placeholder{color:var(--ink3)}
.qs-hint{font-family:var(--font-mono);font-size:10px;color:var(--ink3);white-space:nowrap}
.qs-list{overflow-y:auto;padding:6px 0}
.qs-group{padding:8px 18px 4px;font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.qs-item{display:flex;align-items:center;gap:10px;padding:8px 18px;cursor:pointer;font-family:var(--font-sans);transition:background .08s}
.qs-active{background:var(--purple-lt)}
.qs-kind{width:20px;color:var(--ink3);font-family:var(--font-mono);font-size:12px;text-align:center;flex-shrink:0}
.qs-active .qs-kind{color:var(--purple)}
.qs-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.qs-label{font-size:13px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-sub{font-size:11px;color:var(--ink3);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-go{font-size:11px;color:var(--purple);font-family:var(--font-mono);width:14px;text-align:right;flex-shrink:0}
.qs-empty{padding:30px 18px;color:var(--ink3);font-size:12px;text-align:center;font-style:italic}
.modal{background:var(--off);border:1px solid var(--rule2);border-radius:var(--r2);width:520px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 24px rgba(19,14,48,0.10)}
.modal-lg{width:720px}
.ks-upload-modal .modal-body>p{margin-bottom:16px}
.ks-upload-modal .btn{min-height:44px}
.ks-upload-modal .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ks-current-file{overflow-wrap:anywhere}
.ks-picker{margin:16px 0}
.ks-drop-zone{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;border:2px dashed var(--ink3);border-radius:var(--r);background:var(--w);text-align:center;color:var(--ink2)}
.ks-drop-zone.is-dragging{border-style:solid;border-color:var(--ink);background:var(--off2)}
.ks-picker[aria-busy="true"] .ks-drop-zone{opacity:.7}
#ks-file-selection{max-width:100%;overflow-wrap:anywhere;color:var(--ink);font-weight:600}
#ks-file-help{margin-top:12px;color:var(--ink2);font-size:12px;line-height:1.6}
.ks-file-error{margin-top:8px;color:var(--red);font-size:13px}
.ks-file-error:empty{margin:0}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-family:var(--font-sans);font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.025em}
.modal-close{cursor:pointer;color:var(--ink3);font-size:18px;line-height:1;padding:2px 6px;border-radius:var(--r)}
.modal-close:hover{color:var(--ink);background:var(--off2)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-foot{padding:12px 20px;border-top:1px solid var(--rule);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
/* ── Form ── */
.form-row{margin-bottom:14px}
.form-label{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px;display:block}
.form-input{width:100%;padding:9px 16px;border:1px solid var(--rule);border-radius:var(--r-pill);font-family:var(--font-sans);font-size:13px;color:var(--ink);background:#ffffff;outline:none;transition:border-color .15s}
.form-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-lt)}
.form-input::placeholder{color:var(--ink4)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
select.form-input{cursor:pointer}
textarea.form-input{resize:vertical;min-height:72px;border-radius:var(--r2)}
/* ── Cards ── */
.card{background:var(--off);border:1px solid transparent;border-radius:var(--r-card);padding:16px;transition:background .15s,border-color .15s}
.card-title{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:14px}
/* ── Widget chrome (dashboard + reports) ── */
.widget{position:relative}
.widget-head{display:flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px;cursor:grab}
.widget-head:active{cursor:grabbing}
.widget-handle{color:var(--ink3);opacity:.4;font-size:13px;letter-spacing:-2px;line-height:1;flex-shrink:0;user-select:none}
.widget:hover .widget-handle{opacity:.85;color:var(--purple)}
.widget-title{flex:1}
.widget-actions{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .12s}
.widget:hover .widget-actions{opacity:1}
.widget-actions button{background:transparent;border:none;cursor:pointer;color:var(--ink3);font-size:13px;padding:3px 6px;border-radius:3px;line-height:1}
.widget-actions button:hover{color:var(--purple);background:var(--purple-lt)}
.widget.dragging{opacity:.45;transform:scale(.985)}
.widget.drop-target-before{box-shadow:-4px 0 0 var(--purple)}
.widget.drop-target-after{box-shadow:4px 0 0 var(--purple)}
.widget-menu{position:fixed;background:var(--off);border:1px solid var(--rule2);border-radius:var(--r);box-shadow:0 8px 24px rgba(19,14,48,0.10);padding:4px;min-width:140px;z-index:200}
.widget-menu-item{padding:6px 10px;font-size:12px;color:var(--ink2);cursor:pointer;border-radius:3px;display:flex;align-items:center;gap:8px}
.widget-menu-item:hover{background:var(--off2);color:var(--ink)}
.widget-menu-item.active{color:var(--purple);font-weight:500}
.widget-menu-divider{height:1px;background:var(--rule);margin:4px 0}
.widget-menu-head{padding:4px 10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
/* ── CSAT stars ── */
.stars{display:flex;gap:2px}
.star{color:var(--amber);font-size:12px}
.star.empty{color:var(--rule2)}
/* ── AI tag chip ── */
.ai-tag-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--rule);border-radius:var(--r-pill);font-size:10px;background:var(--off2);cursor:pointer;transition:all .15s}
.ai-tag-chip:hover{border-color:var(--purple);background:var(--purple-lt)}
.ai-tag-chip .conf{font-family:var(--font-sans);font-size:10px;color:var(--ink3)}
.ai-tag-chip.accepted{border-color:var(--green);background:var(--green-lt);color:var(--green)}
/* ── Misc ── */
.sep{height:1px;background:var(--rule);margin:12px 0}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:8px;color:var(--ink3);background:var(--off);position:relative;overflow:hidden;isolation:isolate}
.empty-line{width:32px;height:1px;background:var(--rule2)}
.empty-txt{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sla-ok{color:var(--green);font-weight:500}.sla-warn{color:var(--amber);font-weight:500}.sla-breach{color:var(--red);font-weight:500}.sla-snoozed{color:var(--ink3);font-weight:500}
/* Per-row SLA mark in the ticket-ID cell, replacing the SLA column (#447).
   Solid ▲ = breached, hollow △ = at risk, nothing at all for ok/snoozed — so
   the shape carries the meaning as well as the colour, and a clean list shows
   no marks. Sits on the row's own background, so it survives both the hover
   and selected-row tints, which paint behind it. */
.sla-flag{font-size:9px;line-height:1;margin-right:5px;vertical-align:1px;font-weight:700}
.link{color:var(--purple);cursor:pointer;text-decoration:underline}
.link:hover{color:var(--ink)}
/* ── Colour picker ── */
.accent-swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .1s}
.swatch.active{border-color:var(--ink);transform:scale(1.15)}
/* ── Toggle switch ── */
.toggle{position:relative;display:inline-block;width:32px;height:18px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--rule2);border-radius:18px;cursor:pointer;transition:.2s}
.toggle-slider:before{content:'';position:absolute;width:12px;height:12px;left:3px;top:3px;background:#ffffff;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:var(--green)}
.toggle input:checked+.toggle-slider:before{transform:translateX(14px)}
.toggle input:disabled+.toggle-slider{opacity:.45;cursor:not-allowed}
/* ── Context source chips ── */
.source-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border:1px solid var(--rule);border-radius:var(--r-pill);font-size:12px;font-weight:500;color:var(--ink2);background:var(--off2)}
.source-chip.on{border-color:var(--purple);background:var(--purple-lt);color:var(--purple)}
/* ── Attach zone ── */
.attach-zone{border:1px dashed var(--rule2);border-radius:var(--r2);padding:10px;text-align:center;font-family:var(--font-sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);cursor:pointer;transition:all .1s;margin-top:6px}
.attach-zone:hover{border-color:var(--ink);color:var(--ink)}
/* ── Presence (real-time viewer chips + composing banner) ── */
.presence-chips{display:inline-flex;align-items:center;gap:0;padding-right:4px}
.presence-chips:empty{display:none}
.presence-chip{position:relative;width:24px;height:24px;border-radius:50%;background:var(--ink);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:600;border:2px solid var(--off);margin-left:-6px;flex-shrink:0;transition:border-color .2s}
.presence-chip:first-child{margin-left:0}
.presence-chip-initials{letter-spacing:.02em}
.presence-typing-dot{position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:var(--purple);border:1.5px solid var(--off);animation:presence-pulse 1.2s ease-in-out infinite}
@keyframes presence-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
.presence-banner{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--purple-lt);border-bottom:1px solid var(--purple);color:var(--purple);font-size:11.5px;line-height:1.4}
.presence-banner strong{font-weight:600;color:var(--purple)}
.presence-banner-dot{width:7px;height:7px;border-radius:50%;background:var(--purple);flex-shrink:0;animation:presence-pulse 1.2s ease-in-out infinite}

/* Copy controls remain available to pointer and keyboard users. */
.copy-value{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:28px;height:28px;margin-left:4px;padding:4px;border:0;border-radius:4px;background:transparent;color:var(--ink3);cursor:pointer;flex-shrink:0}
.copy-value:hover{background:var(--off);color:var(--ink)}
.copy-value:focus-visible{outline:2px solid var(--purple);outline-offset:2px}