.chat {
  position: fixed;
  inset: 0;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
}
.chat-head { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.chat-head h1 { margin: 0; font-size: 26px; font-weight: 900; font-style: italic; color: var(--sun); }
.chat-head .back { font-size: 22px; padding: 4px 8px 4px 0; }
.online-count { margin-left: auto; color: var(--muted); font-size: 14px; }

.log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.bubble { align-self: flex-start; max-width: 82%; padding: 7px 11px; background: var(--panel); border-radius: 10px; overflow-wrap: anywhere; }
.bubble.mine { align-self: flex-end; background: #4a2a1f; }
.bubble header { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; font-weight: 800; color: var(--sun); }
.bubble time { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.bubble p { margin: 2px 0 0; line-height: 1.35; }
.empty { margin: auto; color: var(--muted); }

.notice { margin: 0; min-height: 1.3em; font-size: 14px; color: #ff9b85; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sign-in { display: grid; place-items: center; text-decoration: none; }