/* Attachments and documents: composer chips (attach.js), document viewers in the side pane (docview.js),
   the read_document card (doc_tool.js). Tokens come from app.css; everything works in both themes. */

/* ---------- file kinds added to the pane ---------- */
.pn-k-doc,.art .ic.pn-k-doc{background:#2b579a}.pn-k-slides,.art .ic.pn-k-slides{background:#c4532d}

/* ---------- composer: attach button, tray, drop veil ---------- */
.at-btn{width:26px;height:26px;border-radius:var(--r-full);display:grid;place-items:center;color:var(--fg-2);flex:none}
.at-btn:hover{background:var(--bg-3);color:var(--fg)}
.at-btn:focus-visible,.at-x:focus-visible,.at-open:focus-visible,.dv-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.at-btn svg.i{width:16px;height:16px}
.at-tray{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin:0 0 var(--sp-2);padding:1px;max-height:142px;overflow-y:auto}
.at-tray[hidden]{display:none}
.at-chip{position:relative;display:flex;align-items:center;gap:var(--sp-1);max-width:260px;min-width:0;height:40px;padding:0 var(--sp-1) 0 0;border-radius:var(--r12);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.at-open{display:flex;align-items:center;gap:var(--sp-2);min-width:0;height:100%;padding:0 var(--sp-1) 0 var(--sp-2);text-align:left;border-radius:var(--r12)}
button.at-open:hover b{color:var(--accent-deep)}
.at-chip .pn-ic,.dv-chip .pn-ic{width:22px;height:22px;border-radius:var(--r8);display:grid;place-items:center;color:#fff;flex:none}
.at-chip .pn-ic svg.i,.dv-chip .pn-ic svg.i{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.at-th{width:26px;height:26px;border-radius:var(--r8);object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--line)}
.at-t{display:flex;flex-direction:column;min-width:0;line-height:15px}
.at-t b{font-size:var(--fs-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.at-t small{font-size:var(--fs-1);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.at-x{width:20px;height:20px;border-radius:var(--r-full);display:grid;place-items:center;color:var(--fg-3);flex:none}
.at-x:hover{background:var(--bg-4);color:var(--fg)}.at-x svg.i{width:11px;height:11px}
.at-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);transition:width .15s linear;border-radius:0 2px 2px 0}
.at-chip.err{background:var(--err-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--err) 30%,transparent);max-width:420px}
.at-chip.err .at-t small{color:var(--err);white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.at-chip.err .pn-ic{background:var(--err)}
.at-chip.up .at-t b{color:var(--fg-2)}
.at-sum{font-size:var(--fs-1);color:var(--fg-3);margin-left:auto;padding-right:var(--sp-1)}
.chat{position:relative}
.at-veil{position:absolute;inset:var(--sp-2);z-index:30;display:none;place-items:center;border-radius:var(--r20);background:color-mix(in srgb,var(--bg) 86%,transparent);box-shadow:inset 0 0 0 2px var(--accent);pointer-events:none}
.at-veil>div{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);color:var(--accent-deep)}
.at-veil b{font-size:var(--fs-5);font-weight:600}.at-veil span{font-size:var(--fs-2);color:var(--fg-2)}
.chat.at-drop .at-veil{display:grid}

/* ---------- file chips (user message, tool cards) ---------- */
.dv-chip{display:inline-flex;align-items:center;gap:var(--sp-2);max-width:280px;min-width:0;height:30px;padding:0 var(--sp-2) 0 var(--sp-1);border-radius:var(--r12);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-2);text-align:left;vertical-align:middle}
.dv-chip:hover{box-shadow:inset 0 0 0 1px var(--line-2);background:var(--bg-2)}
.dv-chip:hover .dv-cn{color:var(--accent-deep)}
.dv-cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:500;color:var(--fg)}
.dv-cs{flex:none;color:var(--fg-3);font-size:var(--fs-1);white-space:nowrap}
.u-att{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-1);max-width:78%;margin-top:calc(var(--sp-2) * -1)}

/* ---------- viewers: shared ---------- */
.dv{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg);container-type:inline-size}
.dv-bar{display:flex;align-items:center;gap:var(--sp-h);min-height:34px;padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--line);background:var(--bg-2);flex:none;min-width:0}
.dv-bar .icon-btn{width:24px;height:24px;border-radius:var(--r8);flex:none}.dv-bar .icon-btn svg.i{width:14px;height:14px}
.dv-bar .icon-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-deep)}
.dv-bar .icon-btn:focus-visible,.dv-zoom:focus-visible,.dv-pg:focus-visible,.dv-toc:focus-visible,.dv-th:focus-visible,.dv-res:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.dv-sep{width:1px;height:16px;background:var(--line-2);margin:0 var(--sp-1);flex:none}
.dv-pg{width:38px;height:22px;text-align:center;border-radius:var(--r4);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);font-size:var(--fs-2);border:0;color:var(--fg)}
.dv-of{font-size:var(--fs-2);color:var(--fg-3);white-space:nowrap;padding:0 var(--sp-1)}
.dv-zoom{min-width:44px;height:22px;border-radius:var(--r4);font-size:var(--fs-2);color:var(--fg-2)}.dv-zoom:hover{background:var(--bg-3);color:var(--fg)}
.dv-find{display:flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-2);border-radius:var(--r8);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);min-width:0;flex:0 1 190px;color:var(--fg-3)}
.dv-find:focus-within{box-shadow:inset 0 0 0 1px var(--accent)}
.dv-find svg.i{width:12px;height:12px;flex:none}
.dv-find input{border:0;outline:0;background:transparent;font-size:var(--fs-2);min-width:0;width:100%;color:var(--fg)}
.dv-find input::-webkit-search-cancel-button{display:none}
.dv-hits{font-size:var(--fs-1);color:var(--fg-3);white-space:nowrap;padding:0 var(--sp-1);min-width:0}
.dv-hits:empty{display:none}
.dv-hits:empty+.icon-btn,.dv-hits:empty+.icon-btn+.icon-btn{display:none}
mark.dv-m,.dv-res mark,.dt-sn mark{background:color-mix(in srgb,#f5c542 55%,transparent);color:inherit;border-radius:2px;padding:0 1px}
mark.dv-m.on{background:var(--accent);color:var(--accent-fg)}
@container (max-width:400px){.dv-pdf .dv-of,.dv-pdf .dv-sep{display:none}.dv-find{flex-basis:110px}}

/* ---------- PDF ---------- */
.dv-main{flex:1;min-height:0;display:flex}
.dv-thumbs{width:84px;flex:none;overflow-y:auto;padding:var(--sp-2) var(--sp-1);display:flex;flex-direction:column;gap:var(--sp-2);border-right:1px solid var(--line);background:var(--bg-2)}
.dv-thumbs[hidden]{display:none}
.dv-th{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px;border-radius:var(--r8);color:var(--fg-3);font-size:var(--fs-1)}
.dv-th img{width:100%;height:auto;display:block;background:#fff;border-radius:2px;box-shadow:0 0 0 1px var(--line-2)}
.dv-th:hover{background:var(--bg-3)}.dv-th.on{background:var(--accent-soft);color:var(--accent-deep)}.dv-th.on img{box-shadow:0 0 0 2px var(--accent)}
.dv-pages{--z:1;flex:1;min-width:0;overflow:auto;padding:var(--sp-2);background:var(--bg-3);outline:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.dv-page{position:relative;width:calc(var(--z) * 100%);flex:none;margin:0 auto;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 2px 8px -4px rgba(0,0,0,.25);border-radius:2px}
.dv-pages:has(.dv-page){align-items:flex-start}
.dv-page img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:2px}
.dv-page img:not([src]){visibility:hidden}
.dv-marks{position:absolute;inset:0;pointer-events:none}
.dv-marks i{position:absolute;background:rgba(245,197,66,.42);box-shadow:0 0 0 1px rgba(200,150,0,.55);border-radius:2px;mix-blend-mode:multiply}
.dv-pn{position:absolute;right:6px;bottom:6px;font-size:10px;line-height:16px;padding:0 6px;border-radius:var(--r-full);background:rgba(11,16,35,.62);color:#fff}
.dv-results{max-height:168px;overflow-y:auto;border-bottom:1px solid var(--line);background:var(--bg);flex:none}
.dv-results[hidden]{display:none}
.dv-rh{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);font-size:var(--fs-1);color:var(--fg-3);position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line-soft)}
.dv-rh .icon-btn{width:20px;height:20px}.dv-rh .icon-btn svg.i{width:11px;height:11px}
.dv-res{display:flex;gap:var(--sp-2);align-items:baseline;width:100%;text-align:left;padding:5px var(--sp-3);font-size:var(--fs-2);line-height:17px;color:var(--fg-2)}
.dv-res:hover{background:var(--bg-2)}.dv-res.on{background:var(--sel);color:var(--fg)}
.dv-res .pill{flex:none}

/* ---------- images ---------- */
.dv-canvas{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:var(--sp-3);outline:0;
  background:conic-gradient(var(--bg-3) 25%,var(--bg-2) 0 50%,var(--bg-3) 0 75%,var(--bg-2) 0) 0 0/16px 16px}
.dv-canvas img{display:block;max-width:none;box-shadow:0 0 0 1px var(--line-2);background:var(--bg);cursor:zoom-out;image-rendering:auto}
.dv-canvas img.fit{max-width:100%;max-height:100%;width:auto;height:auto;cursor:zoom-in;object-fit:contain}
.dv-dim{padding-right:var(--sp-2);white-space:nowrap}

/* ---------- Word and PowerPoint ---------- */
.dv-toc{height:24px;max-width:46%;min-width:0;border-radius:var(--r8);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);border:0;font-size:var(--fs-2);color:var(--fg);padding:0 var(--sp-1)}
.dv-scroll{flex:1;min-height:0;overflow:auto;outline:0;position:relative}
.dv-article{max-width:720px;margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-8);font-size:var(--fs-4);line-height:22px}
.dv-article section{scroll-margin-top:8px;border-radius:var(--r8)}
.dv-article h2{font-size:var(--fs-6);line-height:26px;margin:var(--sp-5) 0 var(--sp-2);letter-spacing:-.01em}
.dv-article section:first-child h2{margin-top:0}
.dv-article h3{font-size:var(--fs-5);margin:var(--sp-5) 0 var(--sp-2)}
.dv-article h4{font-size:var(--fs-4);margin:var(--sp-4) 0 var(--sp-1)}
.dv-article p,.dv-sb p{margin:0 0 var(--sp-2)}
.dv-li{position:relative;padding-left:var(--sp-4)}.dv-li::before{content:"";position:absolute;left:4px;top:9px;width:4px;height:4px;border-radius:50%;background:var(--fg-3)}
.dv-at>h2,.dv-at>h3,.dv-at>h4,.dv-slide.dv-at h3{color:var(--accent-deep)}
.dv-slide.dv-at{box-shadow:0 0 0 2px var(--accent)}
.dv-tw{overflow:auto;margin:var(--sp-2) 0 var(--sp-3);border-radius:var(--r8);box-shadow:var(--sh-1)}
.dv-table{border-collapse:collapse;font-size:var(--fs-2);line-height:17px;min-width:100%}
.dv-table th,.dv-table td{padding:5px 10px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.dv-table th{background:var(--bg-2);font-weight:600;color:var(--fg-2);white-space:nowrap}
.dv-table tr:last-child td{border-bottom:0}
.dv-deck{background:var(--bg-3);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3)}
.dv-slide{background:var(--bg);border-radius:var(--r12);box-shadow:var(--sh-1);padding:var(--sp-4);scroll-margin-top:8px;flex:none}
.dv-slide header{display:flex;gap:var(--sp-2);align-items:baseline;margin-bottom:var(--sp-2)}
.dv-slide h3{margin:0;font-size:var(--fs-5);line-height:22px;font-weight:600}
.dv-sn{flex:none;min-width:22px;height:18px;line-height:18px;text-align:center;border-radius:var(--r4);background:var(--bg-3);color:var(--fg-2);font-size:var(--fs-1)}
.dv-sb{font-size:var(--fs-3);line-height:20px;color:var(--fg)}
.dv-notes{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px dashed var(--line-2);color:var(--fg-2);font-size:var(--fs-2)}
.dv-notes .lbl-mono{display:block;font-size:10px;color:var(--fg-3);margin-bottom:var(--sp-1)}

/* ---------- text and code ---------- */
.dv-codewrap{display:flex;flex-direction:column;min-height:100%}
.dv-cbar{position:sticky;top:0;z-index:2}
.dv-cbar .lbl-mono{font-size:10px;color:var(--fg-3);padding:0 var(--sp-1)}
.dv-code,.pn-doc.docv pre.dv-code{margin:0;padding:var(--sp-2) 0 var(--sp-6);background:transparent;box-shadow:none;border-radius:0;font-family:var(--mono);font-size:var(--fs-2);line-height:19px;white-space:pre;overflow:visible;counter-reset:dvl;outline:0;min-width:max-content;max-height:none}
.dv-l{display:block;padding-right:var(--sp-4);counter-increment:dvl}
.dv-l::before{content:counter(dvl);display:inline-block;width:calc(var(--lw,3ch) + 20px);padding-right:12px;margin-right:12px;text-align:right;color:var(--fg-3);border-right:1px solid var(--line-soft);user-select:none;font-variant-numeric:tabular-nums;position:sticky;left:0;background:var(--bg)}
.dv-l.dv-hl{background:var(--sel)}.dv-l.dv-hl::before{background:var(--sel);color:var(--accent-deep);border-right-color:var(--accent);font-weight:600}

/* ---------- spreadsheet extras ---------- */
.dv-rz{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:3}
.dv-rz:hover,.pn-dragging .dv-rz:active{background:var(--accent);opacity:.5}
.pn-grid td.dv-hl,.pn-grid th.dv-hl,.pn-grid tbody tr:hover td.dv-hl{background:var(--sel)}
.pn-grid .dv-ht{box-shadow:inset 0 2px 0 var(--accent)}.pn-grid .dv-hb{box-shadow:inset 0 -2px 0 var(--accent)}
.pn-grid .dv-hlft{box-shadow:inset 2px 0 0 var(--accent)}.pn-grid .dv-hr{box-shadow:inset -2px 0 0 var(--accent)}
.pn-grid .dv-ht.dv-hlft{box-shadow:inset 2px 2px 0 var(--accent)}.pn-grid .dv-ht.dv-hr{box-shadow:inset -2px 2px 0 var(--accent)}
.pn-grid .dv-hb.dv-hlft{box-shadow:inset 2px -2px 0 var(--accent)}.pn-grid .dv-hb.dv-hr{box-shadow:inset -2px -2px 0 var(--accent)}
.pn-grid .dv-ht.dv-hb{box-shadow:inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.pn-grid .dv-ht.dv-hb.dv-hlft{box-shadow:inset 2px 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.pn-grid .dv-ht.dv-hb.dv-hr{box-shadow:inset -2px 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.pn-grid .dv-hlft.dv-hr{box-shadow:inset 2px 0 0 var(--accent),inset -2px 0 0 var(--accent)}
.pn-grid .dv-ht.dv-hlft.dv-hr{box-shadow:inset 2px 2px 0 var(--accent),inset -2px 0 0 var(--accent)}
.pn-grid .dv-hb.dv-hlft.dv-hr{box-shadow:inset 2px -2px 0 var(--accent),inset -2px 0 0 var(--accent)}
.pn-grid .dv-ht.dv-hb.dv-hlft.dv-hr{box-shadow:inset 0 0 0 2px var(--accent)}

/* ---------- read_document card ---------- */
.act.dt-act .io{grid-template-columns:minmax(0,1fr)}
.act.dt-act .io>div:first-child{display:none}
.act.dt-act .io>div+div{border:0}
.act.dt-act .io .lbl{display:none}
.dt{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.dt-head{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.dt-what{font-size:var(--fs-2);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-variant-numeric:tabular-nums}
.dt-head .btn{flex:none;color:var(--accent-deep)}
.dt-pages{display:flex;gap:var(--sp-2);align-items:flex-end;overflow-x:auto;padding:2px}
.dt-pg{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;width:92px;padding:3px;border-radius:var(--r8);font-size:var(--fs-1);color:var(--fg-3)}
.dt-pg img{width:100%;max-height:130px;object-fit:contain;object-position:top;background:#fff;border-radius:2px;box-shadow:0 0 0 1px var(--line-2);display:block}
.dt-pg:hover{background:var(--bg-3);color:var(--fg)}.dt-pg:hover img{box-shadow:0 0 0 2px var(--accent)}
.dt-pg .pill{font-style:normal;height:15px;font-size:10px}
.dt-pg:focus-visible,.dt-hit:focus-visible,.dt-sheet:focus-visible,.dt-ol:focus-visible,.dt-img:focus-visible,.dt-saved:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dt-text{font-size:var(--fs-2);line-height:18px;color:var(--fg-2);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px}
.dt-more{font-size:var(--fs-1);color:var(--fg-3);padding:0 2px}
.dt-place{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-2);min-width:0}
.dt-tw{overflow:auto;max-height:230px;border-radius:var(--r8);box-shadow:var(--sh-1)}
.dt-table{border-collapse:collapse;font:var(--fs-2)/17px var(--mono);min-width:100%}
.dt-table th,.dt-table td{padding:3px 9px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.dt-table thead th{position:sticky;top:0;background:var(--bg-2);font-weight:600;color:var(--fg-2);font-size:var(--fs-1);border-bottom:1px solid var(--line)}
.dt-table .num{text-align:right;font-variant-numeric:tabular-nums}
.dt-table .dt-rn{color:var(--fg-3);background:var(--bg-2);text-align:right;font-weight:400;font-size:var(--fs-1);width:1%;border-right:1px solid var(--line)}
.dt-table tr:last-child td{border-bottom:0}
.dt-hits{display:flex;flex-direction:column;border-radius:var(--r8);box-shadow:var(--sh-1);overflow:hidden}
.dt-hit{display:flex;gap:var(--sp-2);align-items:baseline;text-align:left;padding:6px var(--sp-3);font-size:var(--fs-2);line-height:17px;color:var(--fg-2);border-bottom:1px solid var(--line-soft);min-width:0}
.dt-hit:last-child{border-bottom:0}.dt-hit:hover{background:var(--bg-2);color:var(--fg)}
.dt-hit .pill{flex:none}.dt-sn{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dt-sheets{display:flex;flex-direction:column;gap:var(--sp-1)}
.dt-sheet{display:grid;grid-template-columns:auto auto auto 1fr;column-gap:var(--sp-2);align-items:baseline;text-align:left;padding:6px var(--sp-2);border-radius:var(--r8);font-size:var(--fs-2);min-width:0}
.dt-sheet:hover{background:var(--bg-2)}
.dt-sheet b{font-weight:600}.dt-sheet .num{color:var(--fg-3)}.dt-sheet .pill{font-style:normal}
.dt-sheet small{grid-column:1 / -1;color:var(--fg-3);font-size:var(--fs-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-types{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.dt-ty{display:inline-flex;gap:var(--sp-1);align-items:baseline;height:20px;padding:0 var(--sp-2);border-radius:var(--r4);background:var(--bg-2);font-size:var(--fs-1)}
.dt-ty b{font-weight:500;font-family:var(--mono)}.dt-ty i{font-style:normal;color:var(--fg-3)}
.dt-outline{display:flex;flex-direction:column}
.dt-ol{display:flex;gap:var(--sp-2);align-items:baseline;text-align:left;padding:3px var(--sp-2);border-radius:var(--r8);font-size:var(--fs-2);color:var(--fg-2);min-width:0}
.dt-ol .num{color:var(--fg-3);min-width:18px;text-align:right;flex:none}
.dt-ol span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-ol:hover{background:var(--bg-2);color:var(--fg)}.dt-ol.on{color:var(--accent-deep);font-weight:500}
.dt-img{display:block;align-self:flex-start;border-radius:var(--r8);overflow:hidden;box-shadow:var(--sh-1);max-width:min(100%,260px)}
.dt-img img{display:block;max-width:100%;max-height:170px}
.dt-code{max-height:230px;overflow:auto !important;border-radius:var(--r8);box-shadow:var(--sh-1);padding:var(--sp-1) 0 !important;min-width:0 !important}
.dt-saved{display:inline-flex;align-items:center;gap:var(--sp-2);align-self:flex-start;padding:3px var(--sp-2) 3px 3px;border-radius:var(--r8);font-size:var(--fs-2)}
.dt-saved:hover{background:var(--bg-2)}
.dt-grp{display:flex;flex-direction:column;gap:var(--sp-1)}.dt-grp .lbl-mono{font-size:10px;color:var(--fg-3)}
.dt-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.sv-doc .dt-head .btn{display:none}