/* Lifecycle is backend truth. Motion decorates only its explicit permission. */
/* AW reply 038 (Owner: "the companion style wrapped around it ... simplistic yet BEAUTIFUL. Subtle"): the one card every
   output wears (pictures, video, files, documents, games, reminders), in the chat, the Console and the Stage. Its hairline
   edge and a breath of fill are the head companion's colours (the theme's --amber-500 / --violet-500), so every card
   changes with the head. */
.vivian-media-card { box-sizing:border-box; max-width:100%; margin-top:12px; padding:12px; overflow:hidden; border-radius:var(--radius-md, 16px);
  border:1px solid color-mix(in srgb, var(--amber-500, #aab4ff) 34%, transparent);
  background:linear-gradient(150deg, color-mix(in srgb, var(--amber-500, #7882d2) 7%, transparent), color-mix(in srgb, var(--violet-500, #7882d2) 4%, transparent) 70%);
  color:var(--text-primary, #f6efe4); font-family:var(--font-family, system-ui, -apple-system, sans-serif); font-size:var(--fs-base, 15px); line-height:1.45; font-weight:400; text-align:left; }
.vivian-media-content { display:grid; gap:8px; }
.vivian-media-content img,.vivian-media-content video { display:block; object-fit:contain; max-width:100%; height:auto; }
.vivian-media-status { font-size:.75rem; opacity:.7; margin-top:8px; }
.vivian-media-actions { justify-self:end; position:relative; }
.vivian-media-actions summary { cursor:pointer; padding:10px; }
.vivian-media-actions button,.vivian-media-actions a { min-height:44px; display:inline-flex; align-items:center; padding:8px 12px; color:inherit; background:transparent; border:0; text-decoration:none; cursor:pointer; }
[data-vivian-permission="INTRO"].vivian-media-card { animation:vivian-card-intro .25s ease-out; }
[data-vivian-permission="PREPARE"] .vivian-media-status,
[data-vivian-permission="LOOP"] .vivian-media-status,
[data-vivian-permission="FINALIZE"] .vivian-media-status { animation:vivian-media-breathe 2s ease-in-out infinite; }
[data-vivian-permission="RESOLVE_SUCCESS"].vivian-media-card { background:rgba(120,130,210,.035); }
[data-vivian-permission="RESOLVE_FAILURE"].vivian-media-card { border-color:rgba(240,110,110,.4); }
[data-vivian-permission="RESOLVE_CANCEL"].vivian-media-card { opacity:.75; }
[data-vivian-permission="HOLD_INTERRUPTED"] .vivian-media-status,
[data-vivian-permission="HOLD_UNCERTAIN"] .vivian-media-status,
[data-vivian-permission="DECORATIVE_ONLY"] .vivian-media-status { animation:none; }
/* MEDIA-COMPLETE-R1 item 12 (AW reply 011): the card's explicit type and colour (so it never borrows its surface's bubble
   or page styles) now live on the one card rule above, for every state and every kind of card (AW reply 038). */
.vivian-media-card:is([data-visual-truth="COMPLETE"],[data-visual-truth="FAILED"],[data-visual-truth="CANCELLED"],[data-visual-truth="UNKNOWN"]) .vivian-media-status {
  margin-top:8px; font-size:var(--fs-xs, 12px); line-height:1.4; opacity:1; color:var(--text-secondary, #bcb4c6); }
.vivian-media-card[data-visual-truth="FAILED"] { border-color:rgba(242,104,95,.4); }
.vivian-media-card[data-visual-truth="FAILED"] .vivian-media-status { color:var(--status-failed, #f2685f); }
.vivian-media-card[data-visual-truth="CANCELLED"] { opacity:.75; }
.vivian-media-card[data-visual-truth="UNKNOWN"] .vivian-media-status { color:var(--status-pending, #e8c15c); }
@keyframes vivian-media-breathe { 50% { opacity:.4; } }
@keyframes vivian-card-intro { from { opacity:.5; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .vivian-media-card,.vivian-media-card * { animation:none !important; transition:none !important; } }