/* «عرض مرفقات البطاقة داخلها (٢+٣)» (public/card-media.js): images and files of a card's own message INSIDE the card.
   Chat card: big image + thumbnail strip + counter, file rows with a type badge and «معاينة».
   Approvals box (.compact): a row of thumbnails + file chips (the window is ~56vh), the viewer zooms.
   Every colour and size is a token (--att-* in theme-tokens.css); RTL by logical properties; light + dark. */
.cm{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.cm-gal{display:flex;flex-direction:column;gap:var(--att-th-gap);min-width:0}
.cm-big{position:relative;margin:0;border-radius:var(--att-radius);overflow:hidden;aspect-ratio:var(--att-big-ratio);max-height:var(--att-big-max);border:.5px solid var(--att-ring);background:var(--att-shimmer);background-size:200% 100%;animation:cmsh 1.2s linear infinite;cursor:zoom-in;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.cm-big img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;user-select:none;-webkit-user-drag:none}
.cm-big.ld,.cm-th.ld{animation:none;background:var(--att-bg)}
.cm-cnt{position:absolute;bottom:var(--space-2);inset-inline-end:var(--space-2);padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--att-pill-bg);color:var(--att-pill-ink);font-size:var(--fs-xxs);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;pointer-events:none}
.cm-zoom{position:absolute;top:var(--space-2);inset-inline-end:var(--space-2);width:26px;height:26px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--att-pill-bg);color:var(--att-pill-ink);pointer-events:none}
.cm-zoom svg{width:14px;height:14px}
.cm-err-t{display:none}
.cm-big.err{animation:none;background:var(--att-bg);cursor:pointer}
.cm-big.err img,.cm-big.err .cm-zoom{visibility:hidden}
.cm-big.err .cm-err-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-3);text-align:center;color:var(--att-err-ink);font-size:var(--fs-xs)}
.cm-err-t svg{width:28px;height:28px}
.cm-cap{font-size:var(--bubble-sub-fs);line-height:var(--bubble-sub-lh);color:var(--bubble-ink2);unicode-bidi:plaintext}
.cm-strip{display:flex;gap:var(--att-th-gap);overflow-x:auto;padding:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cm-strip::-webkit-scrollbar{display:none}
.cm-th{position:relative;flex:none;width:var(--att-th);height:var(--att-th);padding:0;border:.5px solid var(--att-ring);border-radius:var(--att-th-radius);overflow:hidden;background:var(--att-shimmer);background-size:200% 100%;animation:cmsh 1.2s linear infinite;cursor:pointer;color:inherit;font:inherit}
.cm-th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cm-th.err img{visibility:hidden}
.cm-th.on{outline:2px solid var(--att-on);outline-offset:1px}
.cm-more b{position:absolute;inset:0;display:grid;place-items:center;background:var(--att-more-bg);color:var(--att-more-ink);font-size:var(--fs);font-weight:var(--fw-bold)}
.cm-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--att-th-gap)}
.cm-row[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.cm-row[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cm-row[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cm.compact .cm-th{width:auto;height:auto;aspect-ratio:4/3;cursor:zoom-in}
.cm-row[data-n="1"] .cm-th{aspect-ratio:auto;height:var(--att-row-one)}
.cm-files{display:flex;flex-direction:column;gap:var(--att-th-gap)}
.cm-file{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:.5px solid var(--att-file-border);border-radius:var(--att-radius);background:var(--att-file-bg);cursor:pointer;min-width:0}
.cm-fi{flex:none;width:var(--att-fi);height:var(--att-fi);border-radius:var(--att-fi-radius);display:grid;place-items:center;font-style:normal;font-size:var(--att-fi-fs);font-weight:700;color:var(--att-fi-ink);background:var(--att-k-other)}
.cm-fi[data-k=pdf]{background:var(--att-k-pdf)}.cm-fi[data-k=sheet]{background:var(--att-k-sheet)}.cm-fi[data-k=doc]{background:var(--att-k-doc)}
.cm-fi[data-k=zip]{background:var(--att-k-zip)}.cm-fi[data-k=slide]{background:var(--att-k-slide)}.cm-fi[data-k=video]{background:var(--att-k-video)}
.cm-fn{flex:1;min-width:0;display:flex;flex-direction:column;text-align:start}
.cm-fn b{font-weight:var(--fw-medium);font-size:var(--fs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-fn small{font-size:var(--fs-xs);color:var(--text3);text-align:start}
.cm-pv{flex:none;display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border:0;border-radius:var(--radius-sm);background:none;color:var(--text2);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.cm-pv svg{width:16px;height:16px}
.cm-pv:hover,.cm-file:hover{background:var(--hover)}
.cm-chips{display:flex;flex-wrap:wrap;gap:var(--att-th-gap)}
.cm-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:var(--att-chip-h);padding:0 var(--space-3);border-radius:var(--radius-pill);border:.5px solid var(--stroke);background:var(--elevated);color:var(--text2);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.cm-chip svg{width:14px;height:14px;flex:none}
.cm-chip span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cm-note{display:flex;align-items:center;gap:6px;padding:5px var(--space-3);border-radius:var(--radius-pill);background:var(--att-note-bg);color:var(--att-note-ink);font-size:var(--fs-xxs)}
.cm-note svg{width:13px;height:13px;flex:none}
.cm-big:focus-visible,.cm-th:focus-visible,.cm-pv:focus-visible,.cm-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* an answered (locked) card keeps its buttons inert, but its pictures and files still open */
.card.locked .cm button{pointer-events:auto}
/* the chat chip that stands in for a waiting card: up to 3 stacked thumbnails + «(3 صور)» */
.cm-cthumbs{display:inline-flex;flex:none}
.cm-cthumbs img{width:var(--att-cthumb);height:var(--att-cthumb);border-radius:var(--att-cthumb-radius);object-fit:cover;object-position:top;border:1.5px solid var(--att-cthumb-ring);background:var(--att-bg)}
.cm-cthumbs img+img{margin-inline-start:-8px}
.ab-chip .cm-cl{font-style:normal;color:var(--text3)}
/* the app's full viewer (.lb) opens above the approvals box when a picture inside it is tapped */
:root:has(.ab-ov) .lb{z-index:var(--att-lb-z)}
@keyframes cmsh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.cm-big,.cm-th{animation:none}}