/*
 * ボタンの見た目だけ（ほかの部分は CSS を使わず、HTML だけで作っている）
 * パソコンの Chrome のふつうのボタンと同じ、四角くて小さいボタンにする
 * iPhone（Safari）でも青い丸いボタンにならず、同じ見た目になる
 */
button {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 13px;
  line-height: normal;
  padding: 2px 8px;
  margin: 0;
  border: 1px solid #767676;
  border-radius: 2px;
  background: #efefef;
  color: #000000;
  cursor: default;
  touch-action: manipulation; /* 2回たたいたときの拡大をしない */
  -webkit-tap-highlight-color: transparent;
}
button:hover { background: #e5e5e5; border-color: #4f4f4f; }
button:active { background: #f5f5f5; border-color: #8d8d8d; }
button:focus-visible { outline: 2px solid #101010; outline-offset: 1px; }
button:disabled { background: #efefef; border-color: #c5c5c5; color: #a0a0a0; }

/* 発言の横の「削除」などは、少しだけ小さく */
button.small { font-size: 12px; padding: 1px 6px; vertical-align: 1px; }

/*
 * プルダウン（文字色・自動リロード間隔など）と入力欄も、Chrome と同じ四角い形にする
 * iPhone の灰色で丸い見た目をやめる。プルダウンの「∨」は、CSS の線（グラデーション）で描く
 */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 13px;
  line-height: normal;
  margin: 0;
  border: 1px solid #767676;
  border-radius: 2px;
  background-color: #ffffff;
  color: #000000;
}
select {
  padding: 2px 22px 2px 6px;
  background-image:
    linear-gradient(45deg, transparent 50%, #333333 50%),
    linear-gradient(135deg, #333333 50%, transparent 50%);
  background-position: right 11px center, right 7px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
select:hover { border-color: #4f4f4f; }
textarea,
input[type="text"],
input[type="password"],
input[type="number"] {
  padding: 3px 4px;
}
textarea { resize: vertical; }
select:focus-visible,
textarea:focus,
input:focus { outline: 2px solid #101010; outline-offset: 0; }

/* スマホ：16px より小さいと、押したときに画面が拡大されてしまうので、入力欄とプルダウンだけ 16px にする */
@media (pointer: coarse) {
  select,
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="number"] {
    font-size: 16px;
  }
}

/* チャットの発言欄：横長にする（画面が狭いときは、はみ出さない幅に） */
#msg {
  box-sizing: border-box;
  width: calc(100% - 3.2rem); /* 「発言 」の幅を引いた残り */
  max-width: 40em;
  vertical-align: top;
  resize: none;
  overflow-y: hidden;
}
/* 行の間を少しあける */
#chat select,
#chat textarea,
#chat button { margin: 2px 0; }