/* ==========================================================================
   Khio Life — LIVE card bubbles in the in-app text chat (/imchat)
   The chrome around public/js/life/imchat-cards.js. The card itself is drawn
   inside the iframe by public/imsg/imsg-kit.css (.view-embed), so everything
   here is the BUBBLE: its width, its rounding, and the clip that lets the card
   run edge to edge inside it the way it does inside an iMessage balloon.
   ========================================================================== */

/* Same near-naked treatment as .b.cardimg (the poster bubble): no padding, no
   background of its own, the card is the bubble. Full width of Khio's side of
   the thread so a habits grid is not squeezed into a strip. */
.b.khiocard {
  padding: 0;
  background: transparent;
  border: none;
  /* Wider than a text bubble on purpose. The card family is laid out for a
     phone-width column (the hub gives it the viewport minus 32px), so a 75%
     bubble squeezes the habits grid until the streak column is cut off. */
  width: calc(100vw - 40px);
  max-width: 352px;
  border-radius: 18px;
  overflow: hidden;   /* the card has square corners; this is what rounds it */
  /* The frame arrives with no measured height. Hold a card-ish box until the
     height handshake lands, so the thread does not jump on every card. */
  min-height: 190px;
  transition: min-height 0.18s ease;
}
.b.khiocard.is-ready { min-height: 0; }

.khiocard-frame {
  display: block;
  width: 100%;
  height: 190px;
  border: 0;
  /* The hub paints its own surface; a white default would flash through the
     rounded corners on a dark thread before the frame paints. */
  background: transparent;
  color-scheme: normal;
}

/* Poster fallback: an older card past the live budget, an expired session, or
   a frame that could not load. Matches .b.cardimg exactly. */
.b.khiocard.is-poster { min-height: 0; }
.b.khiocard.is-poster .khiocard-frame { display: none; }
.b.khiocard a { display: block; }
.b.khiocard img { display: block; width: 100%; border-radius: 18px; }

.khiocard-note {
  margin: 6px 2px 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
}