/* amber-dialog.css — die Chat-Sprechblasen (Hero der Startseite).
   „Du" links (neutrale Blase), „amber" rechts (amber getönt). Blasen-Breite
   600px = Bezugsbreite fuer die CTA-Card. Als geteilte Quelle, damit de/en
   und kuenftige Verwendungen nicht auseinanderlaufen. */
.dialog{
  width:100%;
  max-width:600px;
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:26px;
}
.msg{ display:flex; flex-direction:column; gap:7px; }
.msg .who{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx3);
}
.bubble{
  border-radius:14px;
  padding:22px 26px;
  font-size:clamp(22px,3.6vw,32px);
  line-height:1.32;
  font-weight:300;
  letter-spacing:-.01em;
}
.msg.you{ align-items:flex-start; text-align:left; }
.msg.you .who{ align-self:flex-start; }
.msg.you .bubble{
  background:var(--bg2);
  color:var(--tx);
  border-bottom-left-radius:3px;
  align-self:flex-start;
  max-width:82%;
}
.msg.amber{ align-items:flex-end; text-align:left; }
.msg.amber .who{ align-self:flex-end; }
.msg.amber .bubble{
  background:var(--amb);
  border:1px solid var(--ambb);
  color:var(--tx);
  border-bottom-right-radius:3px;
  align-self:flex-end;
  max-width:92%;
}
@media(max-width:640px){
  .bubble{ max-width:100%!important; }
}