/* ============================================================
   スマホ表示の横はみ出し防止(全画面共通の仕組み)  task#10913
   読み込み順: 全CSSの最後。mobile-guard.js と対で動く。

   層1(このCSSの前半): どの画面でも効く土台。ページ全体を横に動かさず、
       はみ出しの主因(select の選択肢幅・画像・長いURL)を先に止める。
   層2(このCSSの後半 + mobile-guard.js): 画面幅を超えた要素を実測で見つけ、
       下の mg-* クラスを付けて直す。新しい画面や表を足しても個別対応は要らない。

   画面側で横に広げたい領域は overflow-x: auto の枠に入れること(中は検査しない)。
   検査から外したい要素には data-mg-skip を付ける。
   判定幅を変えるときは mobile-guard.js の QUERY も同じ値にする。

   層0(task#11050): iOS は画面が拡大されるとレイアウトと無関係に左右へ動くので、
       拡大の入口を閉じる。ダブルタップは下の touch-action、入力欄の自動拡大は
       mobile-guard.js が付ける mg-input と maximum-scale=1 で止める。
   縦に流す一覧は overflow-x: hidden を書くこと。overflow-y: auto だけだと
   横方向も auto に計算され、指で左右に動く。overflow-x: hidden かつ
   overflow-y: auto/scroll の枠は「縦の一覧」とみなし、JS が中まで検査する。
   overflow-x: auto の枠は意図した横スクロールとして中を検査しない。
   ============================================================ */
@media (max-width: 780px), (pointer: coarse) and (max-width: 1024px) {
  html { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
  body { max-width: 100%; overflow-x: clip; overflow-wrap: break-word; }

  html, body { touch-action: manipulation; }

  select { max-width: 100%; min-width: 0; box-sizing: border-box; text-overflow: ellipsis; }
  input, textarea { max-width: 100%; box-sizing: border-box; }
  img, video, iframe, embed, object { max-width: 100%; }
  pre { max-width: 100%; overflow-x: auto; }

  /* チャット: 会話と一覧は縦だけに動かす。コードと表は折り返し、横へ動く場所を減らす
     (列が多くて収まらない表だけが、表の中で横スクロールする) */
  .chat-messages, .chat-ch-list, .chat-pin-body, #chatChannelList, #chatUserList, #chatSearchList { overflow-x: hidden !important; }
  .chat-messages { touch-action: pan-y pinch-zoom; }
  .chat-messages .md-pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .chat-messages .md-tbl { white-space: normal; }
  .chat-messages .md-tbl th, .chat-messages .md-tbl td { min-width: 5.5em; }

  .mg-input { font-size: 16px !important; }
  .mg-tbl { display: block !important; max-width: 100% !important; overflow-x: auto !important; }
  .mg-fit { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  .mg-wrap { flex-wrap: wrap !important; }
  .mg-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .mg-text { overflow-wrap: anywhere !important; min-width: 0 !important; }
  .mg-scroll { max-width: 100% !important; overflow-x: auto !important; }
}