/* Shared shell geometry for the three messenger hero mockups. */
:root{
  --messenger-phone-width:232px;
  --messenger-phone-ratio:1/2.12;
  --messenger-phone-border:2px;
  --messenger-phone-radius:38px;
  --messenger-screen-radius:36px;
  --messenger-island-width:46px;
  --messenger-island-height:11px;
}

.hero-format-demo .format-phone,
.tg-phone,
.max-phone{
  width:var(--messenger-phone-width);
  height:auto;
  aspect-ratio:var(--messenger-phone-ratio);
  padding:0;
  border:var(--messenger-phone-border) solid var(--ink);
  border-radius:var(--messenger-phone-radius);
  background:transparent;
  box-shadow:0 10px 24px rgba(16,40,62,.08);
}

.hero-format-demo .format-screen,
.tg-phone-screen,
.max-phone-screen{
  height:100%;
  border-radius:var(--messenger-screen-radius);
  background:#fff;
  overflow:hidden;
}

.hero-format-demo .format-speaker,
.tg-island,
.max-phone-island{
  top:11px;
  left:50%;
  width:var(--messenger-island-width);
  height:var(--messenger-island-height);
  border-radius:999px;
  background:var(--ink);
  transform:translateX(-50%);
}

/* Shared sender card: channel identity changes only through the avatar colour. */
.messenger-sender{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.messenger-sender-avatar{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.messenger-sender-copy{display:flex;min-width:0;flex-direction:column}
.messenger-sender-copy strong{color:var(--ink);font-size:11px;line-height:1.2}
.messenger-sender-copy small{margin-top:2px;color:var(--muted);font-size:8px;line-height:1.3}
.messenger-sender--whatsapp .messenger-sender-avatar{background:var(--green)}
.messenger-sender--telegram .messenger-sender-avatar{background:var(--tg-blue)}
.messenger-sender--max .messenger-sender-avatar{background:var(--max-purple)}
.max-phone-screen{padding:43px 14px 17px}
.max-phone-dialog{height:auto;padding:20px 0 0}

/* MAX keeps its purple outer card, while the actual display stays white. */
.max-demo-stage{min-height:540px}
.max-demo-stage::before{opacity:.22}
.max-phone{top:24px;left:calc(50% - 190px)}
.max-phone-dialog{background:#fff}
.max-format-note,.max-schedule-note{right:20px;width:128px}

@media(max-width:760px){
  :root{--messenger-phone-width:226px}
  .tg-phone-stage{min-height:480px}
}

@media(max-width:540px){
  :root{--messenger-phone-width:min(214px,100%)}
  .max-demo-stage{min-height:600px}
  .max-phone{top:20px;left:50%;transform:translateX(-50%)}
  .max-format-note,.max-schedule-note{right:16px;left:16px;width:auto}
  .max-format-note{bottom:88px}
  .max-schedule-note{bottom:18px}
}