.app-shell { min-height:0; }
.view { height:calc(100dvh - 154px); min-height:0; padding-bottom:max(26px,env(safe-area-inset-bottom)); }
.tabbar { height:calc(68px + env(safe-area-inset-bottom)); }
.capture-dialog,.player-dialog { max-width:100vw; }
@media (max-width:699px) { .capture-dialog,.player-dialog { width:100vw; border-radius:0; } }
.message-list { display:grid; gap:9px; }
.message-row { display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:11px; align-items:center; width:100%; padding:11px; border:1px solid var(--line); border-radius:17px; background:#fff; text-align:left; }
.message-avatar { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#292723; color:#fff; font-weight:800; overflow:hidden; }
.message-avatar img { width:100%; height:100%; object-fit:cover; }
.message-row>span { display:grid; min-width:0; }
.message-row b,.message-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-row small,.message-row time { color:var(--muted); }
.message-row time { font-size:10px; }
.message-row em { justify-self:end; min-width:19px; padding:3px 6px; border-radius:99px; background:var(--red); color:#fff; font:normal 700 10px Manrope; text-align:center; }
.message-empty { padding:50px 20px; text-align:center; color:var(--muted); }
.chat-view { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; margin:0 -16px; }
.chat-head { display:flex; align-items:center; gap:10px; padding:8px 16px 12px; border-bottom:1px solid var(--line); }
.chat-head button { border:0; background:none; font-size:25px; }
.chat-head span { display:grid; }
.chat-messages { overflow:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.chat-bubble { align-self:flex-start; max-width:82%; padding:10px 12px; border:1px solid var(--line); border-radius:15px 15px 15px 4px; background:#fff; font-size:13px; overflow-wrap:anywhere; }
.chat-bubble.mine { align-self:flex-end; border-color:var(--red); border-radius:15px 15px 4px 15px; background:var(--red); color:#fff; }
.chat-bubble small { display:block; margin-top:4px; opacity:.66; font-size:9px; }
.chat-compose { display:flex; flex:none; align-items:center; gap:8px; height:64px; min-height:64px; padding:9px 12px max(9px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--paper); }
.chat-compose input { min-width:0; height:44px; min-height:44px; flex:1; border:1px solid var(--line); border-radius:14px; padding:0 14px; background:#fff; line-height:44px; }
.chat-compose button { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:13px; background:var(--red); color:#fff; }
.chat-compose button svg { width:19px; height:19px; }
.post img.post-media { display:block; width:100%; height:auto; max-height:none; object-fit:contain; background:#eeeae1; }
.post video.post-media { width:100%; height:clamp(190px,40vw,420px); object-fit:contain; background:#111; }
@media (min-width:500px) and (max-width:699px) {
  .app-shell { width:100%; max-width:none; box-shadow:none; }
  .view { padding-inline:clamp(18px,5vw,34px); }
  .chat-view { margin-inline:calc(-1 * clamp(18px,5vw,34px)); }
}
@media (max-height:600px) {
  .status-bar { display:none; }
  .view { height:calc(100dvh - 126px); }
  .welcome h1,.section-head h1 { font-size:24px; }
  .moment-card { height:170px; }
}
@media (min-width:700px) {
  .view { height:calc(100dvh - 86px); }
  .view[data-current="messages"] { display:block; max-width:920px; }
  .chat-view { margin:0; height:calc(100dvh - 150px); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
}