/* One surface owns the fill and border; the icon remains fixed above it. */
.contact-hint{--contact-label-limit:calc(100vw - 40px - env(safe-area-inset-right));isolation:isolate;overflow:visible}
.contact-hint>svg{position:relative;z-index:1;pointer-events:none}
.contact-hint:has(.contact-channel)>svg{width:22px;height:22px;transform:translateY(-6px)}
.contact-channel{position:absolute;z-index:1;bottom:8px;left:0;width:56px;pointer-events:none;text-align:center;white-space:nowrap;font:600 9px/1.2 Arial,sans-serif;letter-spacing:0;color:var(--text)}
.contact-hint-surface{
  position:absolute;right:0;top:0;z-index:0;display:block;
  width:56px;height:56px;padding:0;
  border:1px solid var(--contact-hint-border,var(--gold));border-radius:28px;
  background:var(--chrome-reflection),var(--chrome-bg);box-shadow:0 5px 22px rgba(0,0,0,.35);
  color:#fff;font-size:15.6px;font-weight:600;line-height:54px;text-align:left;
  overflow:hidden;pointer-events:none;opacity:.84;
  transition:width .8s cubic-bezier(.32,.1,.2,1),opacity .42s ease,background-color .2s,border-color .2s,box-shadow .16s;
}
/* The reveal window follows the surface, inset from its moving border.
   A short mask softens newly uncovered letters without blurring the icon. */
.contact-hint-reveal{
  position:absolute;inset:0 67px 0 8px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12px);
  mask-image:linear-gradient(to right,transparent,#000 12px);
}
.contact-hint-text{
  position:absolute;top:0;right:0;display:block;width:max-content;
  max-width:calc(var(--contact-label-limit) - 90px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.contact-hint.is-hint-visible .contact-hint-surface{
  width:min(var(--contact-label-width,56px),var(--contact-label-limit));pointer-events:auto;opacity:1;
  transition:width .72s cubic-bezier(.22,.7,.18,1),opacity .42s ease,background-color .2s,border-color .2s,box-shadow .16s;
}
.contact-hint:hover .contact-hint-surface{background:var(--contact-hint-hover,#30271d);box-shadow:0 7px 25px rgba(0,0,0,.45)}
.contact-hint:active .contact-hint-surface{border-color:var(--gold-light);box-shadow:inset 0 2px 7px rgba(0,0,0,.55),inset 0 -1px 0 rgba(var(--gold-rgb,216,191,134),.13)}

.profile-whatsapp{--contact-hint-border:rgba(37,211,102,.55);--contact-hint-hover:#14251b}

/* Mirror the same surface toward the right on Home. */
.profile-card-whatsapp{--contact-label-limit:var(--card-whatsapp-label-max,calc(100vw - 88px))}
.profile-card-whatsapp .profile-card-whatsapp-label{left:0;right:auto;font-size:clamp(13px,4vw,15.6px)}
.profile-card-whatsapp .contact-hint-reveal{
  inset:0 8px 0 67px;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 12px);
  mask-image:linear-gradient(to left,transparent,#000 12px);
}
.profile-card-whatsapp .contact-hint-text{left:0;right:auto}
@media(prefers-reduced-motion:reduce){.contact-hint .contact-hint-surface,.contact-hint.is-hint-visible .contact-hint-surface{transition:none}}