/* The supplied transparent portrait stays intact; each surface crops it in CSS. */
.sophie-portrait {
  position:relative;
  display:block;
  width:34px;
  height:34px;
  flex-shrink:0;
  overflow:hidden;
  border-radius:50%;
  background:#e9f0e1;
}
.sophie-portrait img.sophie-portrait-image {
  position:absolute;
  width:190%;
  max-width:none;
  height:auto;
  left:50%;
  top:-3%;
  transform:translateX(-50%);
  border-radius:0;
}
.nav-mobile-chat .sophie-portrait { width:36px; height:36px; }
.szmg-chathead .sophie-portrait { width:46px; height:46px; }
.mp-answer-author .sophie-portrait { width:30px; height:30px; }

.sophie-av { position:relative; height:270px; overflow:visible; }
.sophie-av img {
  position:absolute;
  width:235px;
  max-width:none;
  height:auto;
  top:0;
  left:50%;
  transform:translateX(-50%);
}
.sb-av { height:250px; }
.sb-av img { width:220px; max-width:none; margin-left:-29px; }

.mp-welcome-portrait {
  position:relative;
  width:200px;
  height:200px;
  overflow:hidden;
  margin:0 auto 20px;
  mask-image:linear-gradient(to bottom,#000 85%,transparent 100%);
}
.mp-welcome-portrait img {
  position:absolute;
  width:250px;
  max-width:none;
  height:auto;
  top:0;
  left:50%;
  transform:translateX(-50%);
}

@media(max-width:1000px) {
  .sb-av { position:relative; overflow:hidden; width:118px; height:118px; border-radius:50%; background:#dfe9d7; }
  .sb-av img { position:absolute; width:190%; margin:0; top:-3%; left:50%; transform:translateX(-50%); }
}
/* Stack before the text column becomes cramped. Keep the portrait inside the card. */
@media(max-width:760px) {
  .assistant { flex-direction:column; padding:24px; gap:20px; }
  .assistant-main { width:100%; padding-bottom:0; }
  .assistant-main h2 { font-size:clamp(1.4rem, 4vw, 1.65rem); line-height:1.3; margin-bottom:8px; }
  .sophie-av { align-self:center; width:120px; height:120px; margin:0; border-radius:50%; background:#e9f0e1; overflow:hidden; }
  .sophie-input { padding-left:14px; gap:6px; }
  .sophie-input input { font-size:1rem; }
  .sophie-chips { gap:8px; }
  .sophie-av img { width:190%; height:auto; top:-3%; }
}
@media(max-width:600px) {
  .szmg-chathead .sophie-portrait { width:36px; height:36px; }
  .mp-welcome-portrait { width:160px; height:160px; margin-bottom:16px; }
  .mp-welcome-portrait img { width:200px; }
}