/* Yappy v14 — branded tutorial characters + WhatsApp iOS call cards */

.bubble.call-entry.wa-call-card{
  padding:7px 8px;
  min-width:228px;
  max-width:min(292px,78vw);
  border-radius:18px;
}
.wa-call-main{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:52px;
}
.wa-call-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.72);
  color:var(--text-main);
  position:relative;
  flex:none;
}
.bubble.call-entry.out .wa-call-icon{
  background:rgba(255,255,255,.54);
}
:root[data-theme="dark"] .wa-call-icon{
  background:rgba(255,255,255,.08);
  color:#f4f4f5;
}
:root[data-theme="dark"] .bubble.call-entry.out .wa-call-icon{
  background:rgba(255,255,255,.11);
}
.wa-call-glyph{
  width:31px;
  height:31px;
  position:relative;
  display:grid;
  place-items:center;
}
.wa-call-glyph>svg:first-child{width:26px;height:26px;display:block}
.wa-call-arrow{
  position:absolute;
  width:15px;
  height:15px;
  right:-1px;
  top:-1px;
}
.wa-call-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.wa-call-copy strong{
  font-size:15.5px;
  line-height:19px;
  font-weight:650;
  color:var(--text-main);
  white-space:normal;
}
.wa-call-copy span{
  font-size:13.5px;
  line-height:17px;
  color:var(--bubble-meta);
}
.wa-call-main time{
  align-self:end;
  padding:0 1px 2px 4px;
  color:var(--bubble-meta);
  font-size:11.5px;
  line-height:14px;
  white-space:nowrap;
}
.bubble.call-entry.is-alert .wa-call-copy strong{color:var(--text-main)}
.bubble.call-entry.is-alert .wa-call-icon{background:rgba(255,23,68,.055)}
:root[data-theme="dark"] .bubble.call-entry.is-alert .wa-call-icon{background:rgba(255,23,68,.1)}

/* Keep sender label from squeezing call content in groups. */
.bubble.call-entry.wa-call-card .sender-name{margin:0 3px 3px}

@media(max-width:360px){
  .bubble.call-entry.wa-call-card{min-width:210px;max-width:82vw}
  .wa-call-main{grid-template-columns:44px minmax(0,1fr) auto;gap:8px}
  .wa-call-icon{width:44px;height:44px}
  .wa-call-copy strong{font-size:15px}
}