family-chat {display:block}
.chat-page {padding-top:calc(12px + env(safe-area-inset-top))}
family-chat a,.chat-page a {text-decoration:none}
.chat-compose {display:grid;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.chat-compose textarea {display:block;width:100%;resize:vertical;min-height:48px;max-height:180px;padding:10px 12px;background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:11px;font-size:16px}
.chat-compose button,.chat-older {justify-self:end;padding:6px 15px;min-height:40px}
.chat-feed {list-style:none;margin:0;padding:0}
.chat-feed li {padding:12px 14px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.chat-feed li:first-child {border-top:0}
.chat-feed header {display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.chat-feed time {flex:none;color:var(--sub);font-size:11px}
.chat-feed p {margin:5px 0 0;white-space:pre-wrap}
family-chat:not([full]) .chat-feed p {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chat-status:not(:empty),.chat-empty {padding:10px 14px;margin:0;color:var(--sub);font-size:13px}
.chat-older {margin:8px 12px}
family-chat [hidden] {display:none!important}

family-chat:not([full]) .chat-compose {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 7px 10px;
}
family-chat:not([full]) .chat-compose textarea {min-height:38px;height:38px;padding:7px 10px}
family-chat:not([full]) .chat-compose button {min-height:38px;padding:6px 12px}
family-chat:not([full]) .chat-feed li {padding:6px 11px;font-size:14px;line-height:1.35}
family-chat:not([full]) .chat-feed p {margin-top:2px}
family-chat:not([full]) .chat-status:empty {margin:0}