/* Lagos Life chat input. Owner 5c. Spec: inputs.html#chat-input.
   The "Say something to the 6 players here…" row in the place sheet (cap/05, cap/33).
   Markup: <form class="ll-chat-input">
             <label class="ll-chat-input__label" for="chat">Chat at Dangote Petroleum Refinery</label>
             <input class="ll-chat-input__field" id="chat" type="text" enterkeyhint="send" autocomplete="off" maxlength="200"
                    placeholder="Say something to the 6 players here…">
             <button class="ll-chat-input__send ll-icon-button ll-icon-button--primary ll-interactive" type="submit"
                     aria-label="Send" aria-disabled="true">…</button>
           </form>
   44px tall (was 36px at 14px text): 16px text stops iOS zooming the whole HUD on focus. */

.ll-chat-input { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; }

/* Visually hidden label: the placeholder is not a label, and the field sits in a place sheet whose title names the room. */
.ll-chat-input__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ll-chat-input__field {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  height: var(--control-md);
  margin: 0;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--mist);
  color: var(--ink);
  font: var(--type-body-lg);
  text-overflow: ellipsis;
}
.ll-chat-input__field::placeholder { color: var(--ink-placeholder); opacity: 1; }
.ll-chat-input__field:focus-visible,
.ll-chat-input__field[data-demo-state="focus"] {
  outline: var(--focus-width) solid var(--ring);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--focus-halo);
}
.ll-chat-input__field:disabled { color: var(--ink-inactive); cursor: not-allowed; }
.ll-chat-input__field:disabled::placeholder { color: var(--ink-inactive); }

.ll-chat-input__send svg { width: var(--icon-md); height: var(--icon-md); }