/* css/07-po-message.css — Project Officer message card (.pomsg, kept).
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- Project Officer message ---------------------------------------
   A glass card, not a dialog and not a toast: it holds its place until the
   inspector acknowledges it, and it never takes focus.

   wave9: it now renders INLINE at the top of the list flow — right after the
   one decision card, above the Pending/Draft/Done tabs — in every
   orientation. It used to float as a bottom overlay on the stream column in
   landscape, which is exactly what verify-wave9 caught: at 604 px it landed
   on top of the tabs and the per-street stack chip instead of beside them.
   Being IN the flow costs real space (the incident list scrolls a little
   shorter for as long as the message sits unacknowledged), but that is the
   point — it pushes content down instead of covering it. In portrait it sits
   in the same relative spot: above the decision card's row (see the portrait
   block), because portrait's own order runs guidance → camera wall → map →
   message → decision.
   -------------------------------------------------------------------------- */
/* wave13 — a QUIET NOTICE in the same card family as .inc-card: same radius,
   same 14 px horizontal padding, same 1 px border, a 3 px blue left rule where
   an incident carries its severity rule. Three rows:
     1  inbox glyph + "Project Officer" + " · 14:41"
     2  the message, 15px/500, two lines then an ellipsis (a tap shows it all)
     3  a right-aligned 36 px ghost "Acknowledge" — only while unacknowledged
   Acknowledged, it collapses to ONE muted line and fades. */
.pomsg{border-radius:var(--r-sm);padding:12px 14px;
  background:rgba(10,15,17,.62);border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--info);
  display:flex;flex-direction:column;gap:7px;min-width:0;
  transition:opacity .5s var(--ease)}
.pomsg .from{display:flex;align-items:center;gap:6px;min-width:0;
  font-size:var(--fz-body);font-weight:600;color:var(--info)}
.pomsg .from>span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pomsg .from svg{width:16px;height:16px;stroke-width:2.2;flex:0 0 auto}
.pomsg .from .at{font-size:var(--fz-body);color:var(--tx2);font-weight:500;flex:0 0 auto}
.pomsg .body2{font-size:var(--fz-md);font-weight:500;line-height:1.34;color:var(--tx);
  min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pomsg.open .body2{-webkit-line-clamp:8}
/* wave13 fix 2: the ack row is the SAME shape as an incident card's action
   row — one 48 px full-width ghost button with a check glyph — so the notice
   and the decision below it read as one component family, not two. */
.pomsg .ackrow{display:flex}
.pomsg .ack{height:48px;width:100%;flex:1 1 auto;padding:0 14px;border-radius:12px;
  font-size:var(--fz-body);font-weight:700;background:transparent;
  border:1px solid rgba(255,255,255,.18);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  transition:transform .16s var(--ease),background .16s}
.pomsg .ack:active{transform:scale(.975)}
.pomsg .ack svg{width:18px;height:18px;stroke-width:2.4}
/* acknowledged: one muted line, no button, then it fades out of the list */
.pomsg.acked{padding:10px 14px;gap:0}
.pomsg.acked .one{display:flex;align-items:center;gap:7px;min-width:0;
  font-size:var(--fz-body);color:var(--tx3);font-weight:500}
.pomsg.acked .one svg{width:15px;height:15px;stroke-width:2.4;color:var(--acc);flex:0 0 auto}
.pomsg.acked .one>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pomsg.fading{opacity:0}
#view-drive .pomsg{flex:0 0 auto;margin:0}