@import url("storyverse-v36-10-chat-wrap.css?v=20260906-2348");

/* Storyverse v36.8 — Julia People layout + chat stability polish */
.people-app,
.people-app .people-list,
.people-app .people-card{box-sizing:border-box;min-width:0;max-width:100%}
.people-app{width:100%;overflow:hidden}
.people-list{
  width:100%;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:10px!important;
  padding:0 0 14px!important;
  overflow:visible;
}
.people-card{
  width:100%!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:11px!important;
  padding:10px 12px!important;
  overflow:hidden!important;
  text-align:left!important;
}
.people-card>img{width:48px!important;height:48px!important;min-width:48px!important;border-radius:50%!important;object-fit:cover!important}
.people-card>div{min-width:0!important;overflow:hidden!important}
.people-card strong,.people-card span,.people-card small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.people-card strong{white-space:nowrap}
.people-card span{white-space:nowrap}
.people-card small{
  white-space:pre-line!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden!important;
  line-height:1.3!important;
  margin-top:3px!important;
}
.people-card>i{justify-self:end;align-self:center;min-width:0}

/* Keep the message composer visually stable while the live data layer updates. */
.message-compose textarea#message-text{overflow-anchor:none}
.conversation-list{overflow-anchor:none}

@media(max-width:700px){
  .people-list{grid-template-columns:1fr!important;padding:0 2px 14px!important}
  .people-card{grid-template-columns:46px minmax(0,1fr) 16px!important;padding:9px 10px!important}
  .people-card>img{width:46px!important;height:46px!important;min-width:46px!important}
}