/*
 * Browser-level guard for the direct/group chat composer.
 *
 * React Native Web normally resets native input chrome. Some installed PWAs
 * can retain an older textarea rule and show a tall white focus rectangle.
 * These selectors deliberately target only the field whose placeholder is
 * "Message", so ordinary forms and multiline comment composers are untouched.
 */
input[placeholder="Message"],
textarea[placeholder="Message"],
[data-testid="cartel-direct-composer-input"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 4px 0 14px !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  line-height: 21px !important;
  overflow: hidden !important;
  resize: none !important;
}

input[placeholder="Message"]:focus,
input[placeholder="Message"]:focus-visible,
textarea[placeholder="Message"]:focus,
textarea[placeholder="Message"]:focus-visible,
[data-testid="cartel-direct-composer-input"]:focus,
[data-testid="cartel-direct-composer-input"]:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/*
 * Keep the rounded input shell on the same 44px center line as the +,
 * wallet, send, and microphone controls—even while an older cached bundle
 * supplies the surrounding React Native Web styles.
 */
div:has(> input[placeholder="Message"]),
div:has(> textarea[placeholder="Message"]),
div:has(> [data-testid="cartel-direct-composer-input"]) {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  align-items: center !important;
  overflow: hidden !important;
}