.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: auto 1fr auto; gap: 8px; }
.sticker-btn { padding: 0 12px; font-size: 20px; }
.sticker-btn[aria-expanded="true"] { border-color: var(--sun); }
.sticker-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 172px; margin-bottom: 8px; padding: 8px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.sticker-tray[hidden] { display: none; }
.tray-item { display: grid; place-items: center; aspect-ratio: 1; padding: 4px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.tray-item:hover, .tray-item:focus-visible { border-color: var(--sun); }
.tray-item img { width: 100%; height: 100%; }
.tray-empty { grid-column: 1 / -1; margin: 4px; color: var(--muted); font-size: 14px; }
.tray-empty a { color: var(--sun); font-weight: 800; }
.bubble.has-sticker { background: transparent; padding-left: 4px; padding-right: 4px; }
.bubble .sticker { display: block; width: 110px; height: 110px; margin-top: 2px; }
.sign-in { display: grid; place-items: center; text-decoration: none; }

.dalam-game .chat-head { min-height: 22px; }
.dalam-game .chat-head .back, .dalam-game .chat-head h1 { display: none; }
.dalam-game .chat { padding-top: 0; }