/* ============================================================
   Collage kit — composable decorations for screenshots & mockups.
   The trick WhatsApp uses: calm chrome, colorful CONTENT, and UI
   fragments floating outside the device rectangle.

   Recipe for any feature screenshot:

     <div class="shot">
       <img class="shot__img" src="assets/my-screenshot.png" alt="…" />
       <span class="float chip-toast" style="--t:-18px; --l:-24px">📌 Pinned note</span>
       <span class="float chip-confirm" style="--b:40px; --r:-20px">Updated on Google</span>
       <span class="float chip-react" style="--b:-14px; --l:32px">👍 ❤️</span>
     </div>

   Position a chip with any of --t/--r/--b/--l (top/right/bottom/left,
   negative values push it OUTSIDE the shot). Works on .shot, on
   .hero-visual, and on .mini-card — anything position:relative.
   ============================================================ */

/* ── the shot container ─────────────────────────────────────── */
.shot{position:relative;display:block;}
.shot__img{display:block;width:100%;border-radius:var(--r-card);}

/* ── float positioning: --t/--r/--b/--l, negatives go outside ── */
.float{
  position:absolute;z-index:3;
  top:var(--t,auto);right:var(--r,auto);bottom:var(--b,auto);left:var(--l,auto);
}
@media(max-width:560px){ .float.hide-sm, .hide-sm{display:none !important;} }

/* ── chips ──────────────────────────────────────────────────── */
.chip-toast{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;border-radius:14px;padding:11px 16px;
  font-size:14px;font-weight:500;color:var(--text);
  box-shadow:var(--sh-float);white-space:nowrap;
}
.chip-confirm{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border-radius:var(--pill);padding:10px 16px;
  font-size:14px;font-weight:500;color:var(--text);
  box-shadow:var(--sh-float);white-space:nowrap;
}
.chip-confirm::before{
  content:"✓";display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--brand-fill);color:#fff;font-size:12px;font-weight:700;
}
.chip-react{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border-radius:var(--pill);padding:8px 14px;
  font-size:18px;line-height:1;box-shadow:var(--sh-float);white-space:nowrap;
}
.chip-voice{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--tint);border-radius:var(--pill);padding:8px 16px 8px 8px;
  box-shadow:var(--sh-float);white-space:nowrap;
}
.chip-voice img{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;}
.chip-voice .play{
  width:0;height:0;border-left:10px solid var(--brand-fill);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.chip-voice .wave{display:block;color:var(--brand-fill);}
.chip-voice .dur{font-size:12.5px;font-weight:500;color:var(--muted);}

/* ── photo bubbles inside chat threads ──────────────────────── */
.bubble.media{padding:5px;line-height:0;}
.bubble.media img{display:block;width:100%;max-width:200px;border-radius:13px;}
.phone-thread.mini .bubble.media img{max-width:180px;}

/* ── photo avatars ──────────────────────────────────────────── */
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}

/* ── doodle wallpaper (our own trade-tool line art, very faint) ── */
.doodle{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%230F2A43' stroke-opacity='.04' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 14c5 7 8 11 8 15a8 8 0 1 1-16 0c0-4 3-8 8-15z'/%3E%3Cpath d='M104 18a8 8 0 1 0 5 14l16 16 6-6-16-16a8 8 0 0 0-11-8z'/%3E%3Cpath d='M22 106c0-12 10-21 23-21 0 13-10 23-23 21zM22 106c6-6 11-9 17-13'/%3E%3Cpath d='M106 88l-9 18h9l-7 18 18-22h-10l8-14z'/%3E%3Ccircle cx='72' cy='58' r='5'/%3E%3Cpath d='M60 132l10-9 10 9v10H60z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}

/* containers that host floats */
.hero-visual{z-index:1;}
.mini-card{position:relative;}