/* FAMA — feed app additions (feed, post, activity). The prototype's posts.css and the
   page sheets are verbatim; this file only adds what live data needs on top of them:
   real images inside the placeholder shapes (.av, .ph), the BodyRenderer's mention and
   inline-chip classes, the mention/#skill suggestion list shared by every composer, and
   the media viewer (the prototype has data-open but no viewer design). */

/* avatars + media: real images fill the prototype's placeholder shapes */
.av{overflow:hidden;text-decoration:none}
.av>img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.pmedia .ph>img,.pmedia .ph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pmedia .ph>video{cursor:default}
.projframe .cover{position:relative;overflow:hidden}
.projframe .cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mtile .ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mtile .ph>.iconbtn{z-index:1}
.projpick .pthumb{width:56px;height:42px;border-radius:8px;object-fit:cover;flex:none;background:var(--line)}

/* BodyRenderer output: mentions read like the prototype's .mention, comment link chips inline */
.feed-mention{color:var(--purple-dk);font-weight:600;text-decoration:none}
.feed-mention:hover{text-decoration:underline}
.feed-chip{display:inline-flex;align-items:center;gap:4px;padding:0 var(--s2);border:var(--border);border-radius:var(--radius-pill);font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);vertical-align:baseline}
.feed-chip:hover{border-color:var(--ink)}
.feed-chip .chip-glyph{width:14px;height:14px}
.feed-chip .chip-preview{display:none}

/* mention + #skill suggestions (shared by the composer and every comment box) */
.mwrap{position:relative;flex:1;min-width:0}
.sugg{list-style:none;margin:var(--s1) 0 0;padding:var(--s1);border:var(--border);border-radius:var(--s3);background:var(--white)}
.sugg button{display:flex;gap:var(--s3);align-items:center;width:100%;border:0;background:none;padding:var(--s2);border-radius:var(--s2);cursor:pointer;text-align:start}
.sugg button:hover,.sugg button:focus-visible,.sugg button.on{background:var(--cream)}
.sugg b{font-weight:600}
.mwrap>.sugg{position:absolute;z-index:30;inset-inline-start:0;top:100%;width:max-content;min-width:240px;max-width:min(320px,100%);max-height:240px;overflow:auto}
.sugg .av{width:32px;height:32px;font-size:12px}

/* media viewer (no prototype design: a plain dark dialog in the system's tokens) */
dialog.viewer{border:0;padding:0;background:transparent;max-width:min(1100px,calc(100% - 32px));max-height:calc(100% - 32px);width:100%;color:var(--cream)}
dialog.viewer::backdrop{background:rgba(20,17,15,.9)}
dialog.viewer figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
dialog.viewer img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border-radius:var(--s3)}
dialog.viewer figcaption{font-size:var(--t-meta);color:var(--line)}
dialog.viewer .vbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
dialog.viewer .iconbtn{background:rgba(255,255,255,.12);border-color:transparent;color:var(--cream)}

/* comment rows in the inline panel: pending + failed sends */
.clist li.pending{opacity:.6}
.clist .fail{color:var(--rose-fg);font-weight:600;font-size:var(--t-meta)}
.pcomments .err,.add .err{margin-top:var(--s1)}
.posts-more{display:block;margin:var(--s5) auto 0}
.strip .pp>a:not(.av){color:inherit;text-decoration:none}
.strip .pp>a:not(.av):hover b{color:var(--purple-dk)}