/* Storia Tipicoins — vignette e balloon dedicati */

.comic-balloon--cb-driver {
  top: -0.75rem;
  left: 0;
  max-width: 13.5rem;
  transform: rotate(-1deg) scale(0.88);
}

.comic-balloon--cb-driver::after,
.comic-balloon--cb-driver::before {
  content: '';
  position: absolute;
  bottom: -13px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #1a1a1a;
  border-bottom: 0;
  transform-origin: top center;
}

.comic-balloon--cb-driver::before {
  bottom: -7px;
  border: 8px solid transparent;
  border-top-color: var(--white);
  border-bottom: 0;
  z-index: 1;
}

.comic-balloon--cb-driver::after {
  left: 72%;
  transform: translateX(-50%) rotate(18deg);
}

.comic-balloon--cb-driver::before {
  left: 72%;
  transform: translateX(-50%) rotate(18deg);
}

.story-scene--active .comic-balloon--cb-driver {
  animation: comic-balloon-in-waitress 0.55s ease-out 0.45s forwards;
}

.comic-balloon--cb-ask {
  top: -0.75rem;
  left: 0;
  max-width: 14rem;
  transform: rotate(-1deg) scale(0.88);
}

.comic-balloon--cb-ask::after,
.comic-balloon--cb-ask::before {
  content: '';
  position: absolute;
  bottom: -13px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #1a1a1a;
  border-bottom: 0;
  transform-origin: top center;
}

.comic-balloon--cb-ask::before {
  bottom: -7px;
  border: 8px solid transparent;
  border-top-color: var(--white);
  border-bottom: 0;
  z-index: 1;
}

.comic-balloon--cb-ask::after {
  left: 72%;
  transform: translateX(-50%) rotate(18deg);
}

.comic-balloon--cb-ask::before {
  left: 72%;
  transform: translateX(-50%) rotate(18deg);
}

.story-scene--active .comic-balloon--cb-ask {
  animation: comic-balloon-in-waitress 0.55s ease-out 0.45s forwards;
}

.comic-balloon--cb-reply {
  top: -0.95rem;
  left: 6%;
  right: auto;
  max-width: 10.5rem;
  padding: 0.55rem 0.75rem;
  transform: rotate(-2deg) scale(0.88);
}

.comic-balloon--cb-reply::after,
.comic-balloon--cb-reply::before {
  content: '';
  position: absolute;
  bottom: -13px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #1a1a1a;
  border-bottom: 0;
  transform-origin: top center;
}

.comic-balloon--cb-reply::before {
  bottom: -7px;
  border: 8px solid transparent;
  border-top-color: var(--white);
  border-bottom: 0;
  z-index: 1;
}

.comic-balloon--cb-reply::after {
  left: 68%;
  transform: translateX(-50%) rotate(16deg);
}

.comic-balloon--cb-reply::before {
  left: 68%;
  transform: translateX(-50%) rotate(16deg);
}

.story-scene--active .comic-balloon--cb-reply {
  animation: comic-balloon-in-cb-reply 0.55s ease-out 0.45s forwards;
}

@keyframes comic-balloon-in-cb-reply {
  from {
    opacity: 0;
    transform: rotate(-2deg) scale(0.75) translateY(8px);
  }
  to {
    opacity: 1;
    transform: rotate(-2deg) scale(1) translateY(0);
  }
}

.comic-balloon--cb-tipicooo {
  top: -1.1rem;
  left: 4%;
  right: auto;
  max-width: 15.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.35;
  transform: rotate(-2deg) scale(0.88);
}

.comic-balloon--cb-tipicooo::after,
.comic-balloon--cb-tipicooo::before {
  content: '';
  position: absolute;
  bottom: -13px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #1a1a1a;
  border-bottom: 0;
  transform-origin: top center;
}

.comic-balloon--cb-tipicooo::before {
  bottom: -7px;
  border: 8px solid transparent;
  border-top-color: var(--white);
  border-bottom: 0;
  z-index: 1;
}

.comic-balloon--cb-tipicooo::after {
  left: 65%;
  transform: translateX(-50%) rotate(16deg);
}

.comic-balloon--cb-tipicooo::before {
  left: 65%;
  transform: translateX(-50%) rotate(16deg);
}

.story-scene--active .comic-balloon--cb-tipicooo {
  animation: comic-balloon-in-cb-reply 0.55s ease-out 0.45s forwards;
}

.comic-balloon--cb-contact {
  top: -0.75rem;
  left: 0;
  max-width: 12.5rem;
  transform: rotate(-1deg) scale(0.88);
}

.comic-balloon--cb-contact::after,
.comic-balloon--cb-contact::before {
  content: '';
  position: absolute;
  bottom: -13px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #1a1a1a;
  border-bottom: 0;
  transform-origin: top center;
}

.comic-balloon--cb-contact::before {
  bottom: -7px;
  border: 8px solid transparent;
  border-top-color: var(--white);
  border-bottom: 0;
  z-index: 1;
}

.comic-balloon--cb-contact::after {
  left: 72%;
  transform: translateX(-50%) rotate(18deg);
}

.comic-balloon--cb-contact::before {
  left: 72%;
  transform: translateX(-50%) rotate(18deg);
}

.story-scene--active .comic-balloon--cb-contact {
  animation: comic-balloon-in-waitress 0.55s ease-out 0.45s forwards;
}

/* ── Mock app Tipicoins (scene 6–8) ── */

.app-invite-lead {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

.app-cta--outline {
  background: var(--white);
  color: var(--blue-dark);
  border: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.app-cta--outline.app-cta--muted {
  opacity: 0.55;
}

.app-toast {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: #e6f4ea;
  border: 1px solid #a5d6a7;
  color: #1b5e20;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.app-toast--inline {
  margin-top: 0.65rem;
  animation: tipicoins-toast-in 0.45s ease-out;
}

@keyframes tipicoins-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-message-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem;
  margin-bottom: 0.85rem;
  text-align: left;
}

.app-message-from {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-dark);
}

.app-message-text {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.4;
}

.app-message-link {
  margin: 0;
  font-size: 0.72rem;
  color: var(--blue);
  word-break: break-all;
}

.app-store-card {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.app-store-card .app-cta {
  margin-top: 0.75rem;
}

.app-amount--static {
  font-size: 1rem;
  padding: 0.55rem;
}

.app-success-card--link {
  border-color: var(--light-blue);
  background: linear-gradient(180deg, #eef6fc 0%, var(--white) 100%);
}

.app-link-badge {
  display: inline-block;
  margin: 0.65rem 0 0;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--yellow-soft);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-dark);
}

.app-summary-card--tipicoins {
  border-color: var(--yellow);
}

.app-summary-card--tipicoins .app-summary-icon {
  color: var(--blue-dark);
  background: var(--yellow-soft);
  font-size: 1.1rem;
}

.phone-frame--inviter {
  box-shadow: 0 8px 28px rgba(35, 56, 126, 0.18);
}

.app-step--tipicoins .app-body--cream {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .app-toast--inline,
  .comic-balloon--cb-driver,
  .comic-balloon--cb-ask,
  .comic-balloon--cb-reply,
  .comic-balloon--cb-tipicooo,
  .comic-balloon--cb-contact {
    animation: none !important;
  }

  .story-scene--active .comic-balloon--cb-driver,
  .story-scene--active .comic-balloon--cb-ask,
  .story-scene--active .comic-balloon--cb-contact {
    opacity: 1;
    transform: rotate(-1deg) scale(1);
  }

  .story-scene--active .comic-balloon--cb-reply,
  .story-scene--active .comic-balloon--cb-tipicooo {
    opacity: 1;
    transform: rotate(-2deg) scale(1);
  }
}