/* The draft lives inside the visual viewport; gameplay controls rest while writing. */
body.writing [data-writing-muted], body.writing [data-writing-muted] * {
  visibility:hidden !important; pointer-events:none !important; transition:none !important;
}
body.writing #chat {
  z-index:90; display:grid; grid-template-columns:1fr auto auto; gap:8px;
  pointer-events:auto; padding:10px; border-radius:18px;
  color:#2b1405; background:rgba(255,235,200,.98); box-shadow:0 10px 30px -10px #000;
}
body #chatIn.on {
  grid-column:1 / -1; box-sizing:border-box; width:100%; min-height:24px;
  padding:8px 10px; border-radius:10px; resize:none;
  font:400 16px/24px Rubik,Arial,sans-serif; text-align:start;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal;
  user-select:text; -webkit-user-select:text;
  color:#2b1405; background:#fff5e3; box-shadow:none;
  touch-action:pan-y; overscroll-behavior:contain;
}
body #chatSend, body #chatClose {
  display:none; position:static; transform:none; min-height:40px;
  border:0; border-radius:10px; padding:6px 16px; cursor:pointer;
  font:700 14px Rubik,Arial,sans-serif; color:#2b1405;
}
body.writing #chatSend { display:block; grid-column:2; background:linear-gradient(160deg,#ffd977,#ffb02e); }
body.writing #chatClose { display:block; grid-column:3; background:#efd9b8; }
body #chatHelp { display:none; }
body.writing #chatHelp { display:block; grid-column:1; grid-row:2; align-self:center; font-size:11px; line-height:1.3; }
body #chat :focus-visible { outline:2px solid #9d4e09; outline-offset:2px; }
/* Last heard messages remain beside the world after avatar bubbles disappear. */
#chatFeed{position:fixed;z-index:22;left:max(14px,env(safe-area-inset-left));top:132px;width:min(265px,28vw);max-height:170px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#d3bb8b66 transparent;direction:rtl;text-align:start;pointer-events:auto;color:#f4ead8;font:12px/1.55 Rubik,Arial,sans-serif}
#chatFeed[hidden]{display:none}
#chatFeed p{margin:3px 0;padding:5px 9px;border-radius:7px;background:#171923b0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:0 1px 2px #0008}
#chatFeed bdi{font-weight:600;color:#f4d9a3}
#chatFeed .mine bdi{color:#bfdfc8}
#chatLatest{position:sticky;bottom:0;display:block;margin:5px auto 1px;padding:5px 10px;border:1px solid #d8bd88;border-radius:15px;background:#f1dfb8;color:#30273c;font:500 11px/1.4 Rubik,Arial,sans-serif;cursor:pointer;box-shadow:0 2px 8px #0005;z-index:1}
#chatLatest[hidden]{display:none}
body.modal-open:not(.writing) #chatFeed{visibility:hidden}
@media(pointer:coarse),(max-width:600px){#chatFeed{top:124px;left:max(10px,env(safe-area-inset-left));width:min(190px,46vw);max-height:122px;font-size:11px}#chatFeed p{padding:4px 7px}}
@media(max-height:500px){#chatFeed{top:90px;max-height:105px;width:min(220px,28vw)}}