/* Concept B2: messenger-specific interfaces, isolated from Concept A and Concept B. */
.catalog-concept-b-realistic .demo-card[data-channel="whatsapp"] .sms-screen-content,
.catalog-concept-b-realistic .demo-card[data-channel="telegram"] .sms-screen-content,
.catalog-concept-b-realistic .demo-card[data-channel="max"] .sms-screen-content{
  padding:0;
  overflow:hidden
}
.catalog-concept-b-realistic .messenger-ui{
  display:grid;
  grid-template-rows:48px minmax(0,1fr) 38px;
  width:100%;
  height:100%;
  background:#f2f5f6;
  color:#173148
}
.catalog-concept-b-realistic .messenger-header{
  display:grid;
  grid-template-columns:10px 28px minmax(0,1fr) 16px;
  gap:5px;
  align-items:center;
  padding:7px 7px 6px;
  border-bottom:1px solid rgba(16,40,62,.08);
  background:rgba(255,255,255,.96)
}
.catalog-concept-b-realistic .messenger-back{
  color:#708490;
  font-size:18px;
  line-height:1
}
.catalog-concept-b-realistic .messenger-avatar{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:10px;
  font-weight:800
}
.catalog-concept-b-realistic .messenger-contact{
  display:flex;
  min-width:0;
  flex-direction:column
}
.catalog-concept-b-realistic .messenger-contact b{
  overflow:hidden;
  font-size:9px;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap
}
.catalog-concept-b-realistic .messenger-contact small{
  margin-top:2px;
  font-size:6.5px;
  line-height:1;
  white-space:nowrap
}
.catalog-concept-b-realistic .messenger-menu{
  color:#71838e;
  font-size:8px;
  letter-spacing:-1px
}
.catalog-concept-b-realistic .messenger-chat{
  display:flex;
  align-items:flex-start;
  padding:18px 9px 10px;
  overflow:hidden
}
.catalog-concept-b-realistic .messenger-bubble{
  display:flex;
  width:88%;
  min-height:74px;
  padding:13px 10px 7px;
  border-radius:13px 13px 13px 4px;
  flex-direction:column;
  justify-content:space-between;
  box-sizing:border-box;
  box-shadow:0 3px 10px rgba(16,40,62,.08)
}
.catalog-concept-b-realistic .messenger-bubble>span{
  font-size:10.5px;
  font-weight:550;
  line-height:1.35
}
.catalog-concept-b-realistic .messenger-bubble small{
  display:flex;
  align-items:center;
  align-self:flex-end;
  gap:3px;
  margin-top:7px;
  color:#71838e;
  font-size:6.8px;
  line-height:1
}
.catalog-concept-b-realistic .messenger-bubble small i{
  font-size:7px;
  font-style:normal;
  font-weight:800;
  letter-spacing:-2px
}
.catalog-concept-b-realistic .messenger-compose{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:5px;
  align-items:center;
  padding:6px 7px;
  border-top:1px solid rgba(16,40,62,.08);
  background:rgba(255,255,255,.96)
}
.catalog-concept-b-realistic .messenger-compose span{
  display:flex;
  height:24px;
  align-items:center;
  padding:0 8px;
  border:1px solid #dae3e7;
  border-radius:999px;
  background:#fff;
  color:#8a9aa4;
  font-size:7px
}
.catalog-concept-b-realistic .messenger-compose i{
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:15px;
  font-style:normal;
  line-height:1
}

.catalog-concept-b-realistic .messenger-whatsapp .messenger-avatar,
.catalog-concept-b-realistic .messenger-whatsapp .messenger-compose i{background:#20a866}
.catalog-concept-b-realistic .messenger-whatsapp .messenger-contact small,
.catalog-concept-b-realistic .messenger-whatsapp .messenger-bubble small i{color:#169354}
.catalog-concept-b-realistic .messenger-whatsapp .messenger-chat{
  background-color:#efeae2;
  background-image:radial-gradient(circle at 8px 8px,rgba(62,94,76,.055) 1px,transparent 1.2px),radial-gradient(circle at 20px 21px,rgba(62,94,76,.04) 1px,transparent 1.2px);
  background-size:28px 28px
}
.catalog-concept-b-realistic .messenger-whatsapp .messenger-bubble{background:#fff}

.catalog-concept-b-realistic .messenger-telegram .messenger-avatar,
.catalog-concept-b-realistic .messenger-telegram .messenger-compose i{background:#2b9bd7}
.catalog-concept-b-realistic .messenger-telegram .messenger-contact small,
.catalog-concept-b-realistic .messenger-telegram .messenger-bubble small i{color:#238cc5}
.catalog-concept-b-realistic .messenger-telegram .messenger-chat{background:#e7f1f7}
.catalog-concept-b-realistic .messenger-telegram .messenger-bubble{background:#fff}

.catalog-concept-b-realistic .messenger-max .messenger-avatar,
.catalog-concept-b-realistic .messenger-max .messenger-compose i{background:#6d59d6}
.catalog-concept-b-realistic .messenger-max .messenger-contact small{color:#6d59d6}
.catalog-concept-b-realistic .messenger-max .messenger-chat{background:#f1eef9}
.catalog-concept-b-realistic .messenger-max .messenger-bubble{background:#e5def8}

@media(max-width:620px){
  .catalog-concept-b-realistic .messenger-ui{grid-template-rows:43px minmax(0,1fr) 34px}
  .catalog-concept-b-realistic .messenger-header{grid-template-columns:9px 25px minmax(0,1fr) 14px;padding:6px}
  .catalog-concept-b-realistic .messenger-avatar{width:25px;height:25px;font-size:9px}
  .catalog-concept-b-realistic .messenger-contact b{font-size:8px}
  .catalog-concept-b-realistic .messenger-chat{padding:14px 8px 8px}
  .catalog-concept-b-realistic .messenger-bubble{min-height:66px;padding:11px 9px 7px}
  .catalog-concept-b-realistic .messenger-bubble>span{font-size:9.2px}
  .catalog-concept-b-realistic .messenger-compose{padding:5px 6px}
  .catalog-concept-b-realistic .messenger-compose span{height:22px}
  .catalog-concept-b-realistic .messenger-compose i{width:20px;height:20px}
}