/* MyApp Chat – mobile-first */
.myapp-chat{display:grid;grid-template-columns:1fr;min-height:70vh;max-height:85vh;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.myapp-chat__sidebar{display:flex;flex-direction:column;border-right:1px solid #eee;background:#fafbfc}
.myapp-chat__sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid #eee}
.myapp-chat__sidebar-head h2{margin:0;font-size:1.1rem}
.myapp-chat__new{width:2rem;height:2rem;border:0;border-radius:50%;background:#1a1a2e;color:#fff;font-size:1.25rem;cursor:pointer}
.myapp-chat__list{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.myapp-chat__item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;border-bottom:1px solid #f0f0f0}
.myapp-chat__item:hover,.myapp-chat__item.is-active{background:#eef1f6}
.myapp-chat__item img,.myapp-chat__avatar-fallback{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#d1d5db;flex-shrink:0}
.myapp-chat__item div{min-width:0;flex:1}
.myapp-chat__item strong,.myapp-chat__item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myapp-chat__item small{color:#6b7280;font-size:.8rem}
.myapp-chat__badge{background:#1a1a2e;color:#fff;font-size:.7rem;padding:.15rem .45rem;border-radius:999px}
.myapp-chat__main{display:none;flex-direction:column;min-height:0}
.myapp-chat--open .myapp-chat__sidebar{display:none}
.myapp-chat--open .myapp-chat__main{display:flex}
.myapp-chat__header{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid #eee}
.myapp-chat__back{border:0;background:transparent;font-size:1.5rem;cursor:pointer;line-height:1}
.myapp-chat__peer{display:flex;align-items:center;gap:.65rem}
.myapp-chat__avatar{border-radius:50%;object-fit:cover}
.myapp-chat__typing{display:block;color:#6b7280}
.myapp-chat__messages{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.65rem;background:#f7f8fa}
.myapp-chat__bubble{display:flex;gap:.5rem;max-width:85%;align-items:flex-end}
.myapp-chat__bubble.is-mine{align-self:flex-end;flex-direction:row-reverse}
.myapp-chat__msg-avatar{border-radius:50%;object-fit:cover}
.myapp-chat__bubble-body{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:.55rem .75rem}
.myapp-chat__bubble.is-mine .myapp-chat__bubble-body{background:#1a1a2e;color:#fff;border-color:#1a1a2e}
.myapp-chat__bubble-body p{margin:0;line-height:1.4;word-break:break-word}
.myapp-chat__bubble-body time{display:block;margin-top:.25rem;font-size:.7rem;opacity:.7}
.myapp-chat__composer{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid #eee;background:#fff}
.myapp-chat__composer input{flex:1;border:1px solid #d1d5db;border-radius:10px;padding:.65rem .8rem;font-size:1rem}
.myapp-chat__composer button{border:0;background:#1a1a2e;color:#fff;border-radius:10px;padding:.65rem 1rem;cursor:pointer}
.myapp-chat__dialog{border:0;border-radius:12px;padding:1.25rem;max-width:20rem}
.myapp-chat__dialog::backdrop{background:rgba(0,0,0,.4)}
.myapp-chat__dialog label{display:flex;flex-direction:column;gap:.35rem;margin:1rem 0}
.myapp-chat__dialog-actions{display:flex;gap:.5rem;justify-content:flex-end}
@media (min-width:768px){
  .myapp-chat{grid-template-columns:280px 1fr}
  .myapp-chat__main{display:flex}
  .myapp-chat--open .myapp-chat__sidebar{display:flex}
  .myapp-chat__back{display:none}
}