@    white-space: pre;
  @    text-align: left;
  @    opacity: 0.8;
  @ }
  @ #chat-drop-zone {
  @   box-sizing: content-box;
  @   background-color: #e0e0e0;
  @   flex: 1 1 auto;
  @   padding: 0.5em 1em;
  @   border: 1px solid #808080;
  @   border-radius: 0.25em;
  @ }
  @ #chat-drop-zone.dragover {
  @   border: 1px dashed green;
  @ }

  @     <input type="text" name="msg" id="sbox" \
  @      placeholder="Type message here.">
  @     <input type="submit" value="Send">
  @   </div>
  @   <div id='chat-input-file'>
  @     <input type="file" name="file">
  @     <div id="chat-drop-zone">


  @        <div id="chat-drop-details"></div>
  @      </div>
  @   </div>
  @ </div>
  @ </form>
  @ <hr>

(function(){
  const form = document.querySelector('#chat-form');
  let mxMsg = 0;
  const F = window.fossil, D = F.dom;
  const _me = F.user.name;
  /* State for paste and drag/drop */
  const BlobXferState = {
    dropZone: document.querySelector('#chat-drop-zone'),
    dropDetails: document.querySelector('#chat-drop-details'),

    blob: undefined
  };
  /** Updates the paste/drop zone with details of the pasted/dropped
      data. */
  const updateDropZoneContent = function(blob){
    const bx = BlobXferState, dd = bx.dropDetails;
    bx.blob = blob;
    D.clearElement(dd);
    if(!blob) return;
    D.append(dd, "Name: ", blob.name,
             D.br(), "Size: ",blob.size);
    if(blob.type && blob.type.startsWith("image/")){
      const img = D.img();
      D.append(dd, D.br(), img);
      const reader = new FileReader();
      reader.onload = (e)=>img.setAttribute('src', e.target.result);
      reader.readAsDataURL(blob);

    //console.debug("pasted item =",item);
    if('file'===item.kind){
      updateDropZoneContent(items[0].getAsFile());
    }else if('string'===item.kind){
      item.getAsString((v)=>form.msg.value = v);
    }
  };
  if(true){/* Add help button for drag/drop/paste zone */
    const help = D.div();
    BlobXferState.dropDetails.parentNode.insertBefore(
      help,BlobXferState.dropDetails
    );
    F.helpButtonlets.create(
      help,
      "Drag/drop a file into this spot, or paste an image "+
        "from the clipboard if supported by your environment."
    );
  }

  /* Injects element e as a new row in the chat, at the top of the list */
  const injectMessage = function f(e){
    if(!f.injectPoint){
      f.injectPoint = document.querySelector('#message-inject-point');
    }
    if(f.injectPoint.nextSibling){
      f.injectPoint.parentNode.insertBefore(e, f.injectPoint.nextSibling);

  min-width: 9em /*avoid unsightly "underlap" with the user name label*/;
}
/* User name for the post (a LEGEND element) */
.message-row .message-user {
  border-radius: 0.25em 0.25em 0 0;
  padding: 0 0.5em;
  /*text-align: left; Firefox requires the 'align' attribute */
  margin: 0 0.15em;
  padding: 0 0.5em 0em 0.5em;
  margin-bottom: 0.4em;
  cursor: pointer;
}

  db_prepare(&q,
     "SELECT name FROM sqlite_schema /*scan*/"
     " WHERE type='table'"
     " AND name NOT IN ('admin_log', 'blob','delta','rcvfrom','user','alias',"
                       "'config','shun','private','reportfmt',"
                       "'concealed','accesslog','modreq',"
                       "'purgeevent','purgeitem','unversioned',"
                       "'subscriber','pending_alert','alert_bounce','chat')"
     " AND name NOT GLOB 'sqlite_*'"
     " AND name NOT GLOB 'fx_*'"
  );
  while( db_step(&q)==SQLITE_ROW ){
    blob_appendf(&sql, "DROP TABLE IF EXISTS \"%w\";\n", db_column_text(&q,0));
  }
  db_finalize(&q);