/* ═══════════════ e'thix AI — Documents ═══════════════
   Owner: W3 ETHIX-DOCUMENTS. Linked after every existing stylesheet, so it styles the document chips of the composer's
   tray (.tray-item.doc, built by chat.js's attachments region) and the chat's note without editing shell.css. The states
   are the server's (uploading, reading, ready, failed): a spinner only while something is really in flight, never a
   bar that fills at an invented rate. CSP is style-src 'self': nothing here is inline. */

/* the tray wraps once it carries the note, so the note takes a line of its own under the chips */
.attach-tray.has-docs-note{flex-wrap:wrap}

.tray-item.doc{max-width:260px}
/* a chip rebuilt for a change of state (chat.js marks it .shown) keeps still: only a new document makes an entrance */
.tray-item.doc.shown{animation:none}
.tray-item.doc .ti-state{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray-item.doc.st-ready .ti-state{color:color-mix(in srgb,var(--ok) 70%,var(--ink))}
.tray-item.doc.st-failed{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.tray-item.doc.st-failed .ti-ic{background:linear-gradient(135deg,#E8A193,#B04A3E)}
.tray-item.doc.st-failed .ti-state{color:color-mix(in srgb,var(--danger) 70%,var(--ink));white-space:normal;overflow:visible}

.tray-item.doc .ti-busy{
  flex:none;width:14px;height:14px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--ink) 14%,transparent);border-top-color:var(--gold-deep,var(--ink-soft));
  animation:docs-spin .9s linear infinite;
}
@keyframes docs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tray-item.doc .ti-busy{animation:none;border-top-color:var(--muted)}}
html.reduce-motion .tray-item.doc .ti-busy{animation:none;border-top-color:var(--muted)}

/* waiting its turn to upload: nothing is in flight yet, so no spinner, and the icon is quieter than a live one's */
.tray-item.doc.st-waiting .ti-ic{opacity:.6}
/* the way to «My documents» on a document_quota refusal, inside the chip's text */
.tray-item.doc .ti-act{
  justify-self:start;min-height:24px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:11px;font-weight:600;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}

/* The note's width leaves room for its 6px inset: at a plain 100% it overflowed the tray (overflow-x:auto) by 6px at
   every width, drawing a scrollbar under it on classic-scrollbar desktops and clipping its end edge. */
.attach-tray .docs-note{
  flex:1 0 calc(100% - 6px);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-inline-start:6px;padding:8px 12px;
  border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);font-size:12.5px;line-height:1.55;
}
.docs-note p{margin:0;flex:1 1 240px}
.docs-note .docs-handoff{flex:none}
/* D1/D9: what the documents are to this consultation, on its own line under the note; «مستنداتي» inline in it */
.docs-note .docs-case{flex-basis:100%;color:var(--ink)}
.docs-note .ti-act{min-height:24px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (max-width:640px){
  .tray-item.doc{max-width:200px}
  /* a phone chip leaves 58–88px for the state: it wraps (as the failed state already does) instead of being cut */
  .tray-item.doc .ti-state{white-space:normal;overflow:visible}
  /* N19 (wave 5): a phone keeps the documents to ONE row that scrolls sideways (composer-dock.css: snap, faded edges,
     keyboard) so the tray never grows over the thread. Each chip is most of the row — its state and a failure's reason
     still read on a line or two — and the next one peeks in at the edge, so it is plain there is more to scroll to.
     More specific than the max-width rules around it, so it holds at every phone width. */
  .attach-tray.has-docs{flex-wrap:wrap}
  .attach-tray.has-docs .tray-item.doc{flex:0 0 auto;width:min(80%,260px);max-width:none;margin-inline-start:6px;scroll-snap-align:start}
  .docs-note .docs-handoff{flex:1 1 100%}
}
@media (max-width:380px){
  .tray-item.doc{max-width:170px}
}

/* «My documents»: every stored document, its state and a delete button */
.docs-mine{display:grid;gap:12px}
.docs-mine-lead{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.6}
.docs-mine-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.docs-mine-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.docs-mine-ic{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(135deg,#8DB4F0,#3F6FC2);
}
.docs-mine-row.st-failed .docs-mine-ic{background:linear-gradient(135deg,#E8A193,#B04A3E)}
.docs-mine-txt{display:grid;min-width:0;flex:1;line-height:1.35}
.docs-mine-txt b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docs-mine-txt small{font-size:12px;color:var(--muted)}
.docs-mine-row.st-ready .docs-mine-txt small{color:var(--ok)}
.docs-mine-row.st-failed .docs-mine-txt small{color:var(--danger)}
.docs-mine-del{flex:none;color:var(--ink-soft)}
@media (hover:hover){.docs-mine-del:hover{background:var(--danger-soft);color:var(--danger)}}

/* ═══ W4 readingpass (D2, D4): «استخرج الوقائع» (docs.js readingPanel) — in the case file's document rows and «مستنداتي» ═══ */
.docs-mine-row:has(.dr){flex-wrap:wrap}
.docs-mine-row > .dr{flex:1 1 100%;min-width:0}
.dr{display:grid;gap:8px;margin-top:6px;min-width:0}
.dr-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dr-go{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.dr-go svg{width:16px;height:16px;flex:none}
.dr-hide{min-height:36px}
.dr-status{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.dr-status:empty{display:none}
.dr-status.is-error{color:color-mix(in srgb,var(--danger,#b42318) 75%,var(--ink));font-weight:600}
.dr[aria-busy="true"] .dr-go{opacity:.7;cursor:progress}
.dr-out{display:grid;gap:8px;padding:10px 12px;border-radius:var(--r-sm,12px);border:1px solid var(--line);
  background:color-mix(in srgb,var(--accent-a,#6d5dfc) 5%,var(--surface));min-width:0}
.dr-out[hidden]{display:none}
.dr-h{margin:0;font-size:13.5px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.dr-h:focus-visible{outline:2px solid var(--accent-a,#6d5dfc);outline-offset:2px;border-radius:4px}
.dr-sum,.dr-foot p{margin:0;font-size:12.5px;line-height:1.65;color:var(--ink-soft)}
.dr-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dr-i{display:grid;gap:4px;padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);min-width:0}
.dr-i.is-disputed{border-color:color-mix(in srgb,var(--warn,#b54708) 45%,var(--line))}
.dr-i.is-proposed{border-style:dashed}
.dr-v{margin:0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.dr-k{color:var(--ink-soft)}
.dr-tag{display:inline-block;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid var(--line);
  color:var(--ink-soft);white-space:normal}
.dr-tag.is-proposed{border-style:dashed}
.dr-tag.is-held{color:color-mix(in srgb,var(--ok,#067647) 75%,var(--ink));border-color:color-mix(in srgb,var(--ok,#067647) 40%,var(--line))}
.dr-tag.is-disputed{color:color-mix(in srgb,var(--warn,#b54708) 75%,var(--ink));border-color:color-mix(in srgb,var(--warn,#b54708) 45%,var(--line))}
.dr-parts{margin:0;padding-inline-start:18px;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.dr-note{margin:0;font-size:12px;line-height:1.6;color:color-mix(in srgb,var(--warn,#b54708) 70%,var(--ink))}
.dr-q{margin:0;padding-inline-start:10px;border-inline-start:3px solid color-mix(in srgb,var(--accent-b,#8b7cf6) 50%,var(--line));
  font-size:12.5px;line-height:1.65;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.dr-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:12px}
.dr-ok{color:color-mix(in srgb,var(--ok,#067647) 75%,var(--ink));font-weight:700}
.dr-foot{display:grid;gap:6px;justify-items:start}
.dr-foot .b{min-height:36px}
@media (max-width:414px){
  .dr-out{padding:8px 10px}
  .dr-go,.dr-hide,.dr-foot .b{min-height:40px}
}

/* N20 (N19): the note is ONE line — what the documents are to this answer — with «لماذا؟»; the reason and what the
   document is to this consultation unfold under it (aria-expanded). «افتح في الوكيل» is a compact chip at the end of
   the tray's row, so the composer above the keyboard stays about a quarter of a phone screen. */
.attach-tray .docs-note{padding:4px 10px;gap:4px 10px}
.docs-note-sum{display:flex;align-items:center;gap:8px;flex:1 1 100%;min-width:0}
.docs-note-line{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docs-note-why{flex:none;min-height:24px;padding:0 2px;border:0;background:none;font:inherit;font-weight:600;color:var(--ink);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;border-radius:6px}
.docs-note-why:focus-visible{outline:2px solid var(--accent-b);outline-offset:2px}
.docs-note-more{display:grid;gap:4px;flex:1 1 100%;min-width:0}
.docs-note-more[hidden]{display:none}
.docs-note.is-open .docs-note-line{white-space:normal}
.tray-scroll > .docs-handoff{flex:none;align-self:center;min-height:36px;white-space:nowrap;scroll-snap-align:start}
.tray-scroll > .docs-handoff .i{width:16px;height:16px}
@media (pointer:coarse){.tray-scroll > .docs-handoff{min-height:44px}}
@media (max-width:640px){
  /* N20: a ready or waiting chip is one compact line on a phone — its state ellipsised (the note under the row says
     what it means); a failed chip keeps its reason whole (the st-failed rule above wraps it) */
  .attach-tray.has-docs .tray-item.doc{padding-block:4px;width:min(64%,240px)}
  .attach-tray.has-docs .tray-item.doc .ti-ic{width:32px;height:32px;border-radius:9px}
  .attach-tray.has-docs .tray-item.doc:not(.st-failed) .ti-state{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .attach-tray.has-docs{padding-bottom:4px}
  /* N20 final: with ONE document, its chip gives way so «افتح في الوكيل» fits whole beside it (it was cut at the
     tray's edge at 375, mid-word); with two or more the row scrolls as before */
  .tray-scroll:not(:has(> .tray-item.doc ~ .tray-item.doc)) > .tray-item.doc{flex:1 1 auto;width:auto;min-width:0;max-width:240px}
  .tray-scroll:not(:has(> .tray-item.doc ~ .tray-item.doc)) > .tray-item.doc .ti-txt{min-width:0}
  /* the note is a quiet line, not a second card */
  .attach-tray .docs-note{padding:0 6px;background:none;border:0;font-size:12px}
  .attach-tray .docs-note.is-open{padding:6px 10px;background:var(--surface-2);border:1px solid var(--line)}
}