/* A single answer card with a call beside it. The hit-or-snap timing is kept. */
.snap-call-mode { display: inline-flex; flex: 0 0 auto; padding: 3px; border: 1px solid rgba(17,45,80,.3); border-radius: 999px; background: #fffaf2; }
.snap-call-mode button { min-width: 62px; min-height: 32px; padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; color: #173f70; cursor: pointer; font: 800 .72rem/1 inherit; }
.snap-call-mode button[aria-pressed="true"] { background: #173f70; color: #fffaf2; }
.snap-call-mode button:focus-visible { outline: 3px solid #b34e42; outline-offset: 2px; }
#snap-pile-answer .snap-card { width: min(100%, 285px); min-height: 220px; padding: 24px; border: 2px solid #8d7042; border-radius: 27px; background: #fffaf2; box-shadow: 0 12px 23px rgba(31,44,55,.15); transform: none; }
#snap-pile-answer.is-fresh .snap-card { box-shadow: 0 12px 23px rgba(31,44,55,.15), 0 0 0 3px rgba(217,69,62,.3); }
#snap-answer:not(.is-empty)::before { content: ""; position: absolute; top: 43%; left: -21px; width: 0; height: 0; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-right: 22px solid #8d7042; }
#snap-answer:not(.is-empty)::after { content: ""; position: absolute; top: calc(43% + 3px); left: -17px; right: auto; bottom: auto; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-right: 19px solid #fffaf2; transform: none; }
#snap-answer.is-empty::before, #snap-answer.is-empty::after { content: none; }
#snap-pile-answer .snap-card.is-empty { background: rgba(255,250,242,.45); border-style: dashed; box-shadow: none; }
.snap-audio-call { display: grid; place-items: center; min-height: 82px; min-width: 170px; padding: 12px; border: 1px solid #173f70; border-radius: 13px; color: #173f70; background: #f4f6f5; cursor: pointer; font: 800 1rem/1.2 inherit; }
.snap-audio-call:hover, .snap-audio-call:focus-visible { background: #e1eced; outline: 3px solid rgba(23,63,112,.22); }
.snap-stage[data-call-mode="audio"] #snap-answer .snap-value, .snap-stage[data-call-mode="audio"] #snap-answer .snap-picture { display: none; }
@media (max-width: 560px) {
  .snap-bar { justify-content: center; }
  .snap-call-mode { order: 2; }
  #snap-answer:not(.is-empty)::before { top: -21px; left: calc(50% - 17px); border-left: 17px solid transparent; border-right: 17px solid transparent; border-bottom: 22px solid #8d7042; border-top: 0; }
  #snap-answer:not(.is-empty)::after { top: -17px; left: calc(50% - 14px); border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 19px solid #fffaf2; border-top: 0; }
}