/* ============================================================
   Polls feature tile: an iOS poll balloon drawn in HTML/CSS/JS
   (js/polls-demo.js builds it; votes ease in while it is on screen).
   Drawn in iOS light appearance on white, like the neighbouring screenshots.
   ============================================================ */
.imsg .feature-media.is-poll,
.specimen-media.is-poll { background: #fff; container-type: inline-size; }

.poll-demo {
  --poll-amber: #F3BF6E;
  --poll-cream: #FCEFE0;
  --poll-amber-ink: #B97A1E;
  --poll-avatar: #5E5E63;
  --poll-gray: #E9E9EB;
  position: relative; width: min(300px, 78%);
  padding: 13px 13px 14px; margin-left: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: #000; text-align: left; -webkit-font-smoothing: antialiased;
}
/* The balloon: an SVG path sized to the content (see bubblePath in polls-demo.js). */
.poll-art { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.poll-art path { fill: var(--poll-gray); }
.poll-demo > :not(.poll-art) { position: relative; }

.poll-q { font-size: 15px; line-height: 19px; font-weight: 600; letter-spacing: -.01em; }
.poll-sub { margin-top: 1px; font-size: 11.5px; line-height: 15px; color: #6C6C70; }
.poll-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }

.poll-opt {
  --share: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  box-sizing: border-box; height: 30px; padding: 0 6px 0 12px; border-radius: 999px;
  width: calc(64% + 36% * var(--share));
  background: var(--poll-cream); color: var(--poll-amber-ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: width .7s cubic-bezier(.2, .8, .2, 1), background-color .35s ease, color .35s ease;
}
.poll-opt.is-voted { background: var(--poll-amber); color: #fff; }
.poll-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.poll-end { position: relative; display: flex; align-items: center; justify-content: flex-end; flex: none; height: 20px; min-width: 20px; }
.poll-ring {
  width: 16px; height: 16px; margin-right: 2px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--poll-amber); transition: opacity .25s ease, transform .25s ease;
}
.poll-opt.is-voted .poll-ring { position: absolute; right: 0; opacity: 0; transform: scale(.5); }
.poll-faces { display: flex; }
.poll-face {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  margin-left: -2px; box-shadow: 0 0 0 1.5px var(--poll-amber);
  background: var(--poll-avatar); color: #fff; font-size: 8.5px; font-weight: 600; letter-spacing: .02em;
  animation: poll-face-in .42s cubic-bezier(.3, 1.5, .5, 1) both;
}
.poll-face:first-child { margin-left: 0; }
@keyframes poll-face-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* Resetting between loops: everything fades back at once. */
.poll-demo.is-resetting .poll-faces { opacity: 0; transition: opacity .3s ease; }

/* Small tiles (narrow phones) */
@container (max-width: 300px) {
  .poll-demo { width: 84%; padding: 11px 11px 12px; }
  .poll-q { font-size: 14px; line-height: 18px; }
  .poll-sub { font-size: 11px; }
  .poll-opts { gap: 5px; margin-top: 7px; }
  .poll-opt { height: 27px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .poll-opt, .poll-ring { transition: none; }
  .poll-face { animation: none; }
}