/* チャット入力の、根っこの直し。2026-09-21
 *
 * ユーザー「いや、チャット欄はLINE返信センス王とかでも書きにくいと言われていた。根本的な問題。
 *   チャットうっても、入力中見えないとか、細かい使いづらさがひどい」
 *
 * 調べて出てきた原因は3つ。どれも1か所の不具合ではなく、入力欄ぜんぶに効く形だった。
 *   [A] font の短縮形に inherit を混ぜると、宣言が丸ごと捨てられる
 *   [B] 16px 未満の入力欄は、iOS が焦点を当てた瞬間に画面を拡大する
 *   [C] 下に貼りついた欄は、スマホの鍵盤の下に隠れる
 *
 * 既存のファイルは1行も書き換えず、後から当てる。
 * （卓の画面 page-community-table.php は別セッションの担当なので触らない）
 */

/* ---- [A] 捨てられていた宣言を入れ直す --------------------------------------
 * 返信センス王の返信欄は `font:14px/1.7 inherit` と書かれている。
 * font の短縮形は「大きさ／行間 書体」の並びで、書体の所に inherit は置けない。
 * 文法違反なので、ブラウザはこの1行を丸ごと捨てる。
 * 結果、返信欄だけ既定の等幅 13px になり、日本語が読みにくく打ちにくかった。
 * 星の採点ボタンも同じ書き方で捨てられていた。 */
.ct__rgta { font-family: inherit; font-size: 16px; line-height: 1.7; }
.ct__rgstar { font-family: inherit; font-weight: 900; font-size: 14px; line-height: 1; }

/* ---- [B] 焦点で拡大させない ------------------------------------------------
 * iOS Safari は、16px 未満の入力欄に焦点が当たると自動で画面を拡大する。
 * 拡大すると画面がずれ、下に貼りついた入力欄が鍵盤の裏へ回る。
 * これが「打っても入力中が見えない」の正体。16px にすると拡大しない。 */
.ct__in,
.ctd__in,
.cp__ta,
.cd__ta,
.g4-cf__clue input,
.g4-cf__clue select,
.g4-it__in,
.g4__sheetin,
#g4NjName,
#g4AtGenre,
#g4Clue,
.cpc-search__input,
.kbdlg__in,
.kbdlg__ta { font-size: 16px; }

/* 打っている所が見えるように、字と下地をはっきりさせる */
.ct__rgta,
.ct__in,
.ctd__in { color: #2f2836; background: #fff; caret-color: #c0418a; }
.ct__rgta::placeholder,
.ct__in::placeholder,
.ctd__in::placeholder { color: #b3a7c2; }
.ct__rgta:focus,
.ct__in:focus,
.ctd__in:focus { outline: none; border-color: #c0418a; box-shadow: 0 0 0 3px rgba(192,65,138,.16); }

/* ---- [C] 鍵盤の上に逃がす --------------------------------------------------
 * .ctd は position: fixed; bottom: 0。iOS の鍵盤は画面を押し上げないので、
 * 入力欄が鍵盤の裏に入り、何を打っているか見えなくなる。
 * js/chat-input-fix.js が鍵盤の高さを --msv-kb に入れるので、その分だけ上げる。
 * 鍵盤が閉じているときは 0 なので、元と同じ位置になる。 */
.ctd { bottom: var(--msv-kb, 0px); transition: bottom .12s ease-out; }
.ctd.has-nav { bottom: calc(var(--msv-kb, 0px) + 66px + env(safe-area-inset-bottom)); }
/* 鍵盤が出ている間は、下ナビの分を足さない（下ナビも鍵盤の裏にいる） */
.ctd.is-kb,
.ctd.is-kb.has-nav { bottom: var(--msv-kb, 0px); padding-bottom: 6px; }
/* 鍵盤が出ている間は、流れるコメントを止めて画面を静かにする */
.is-kb-open .ctd__fly { display: none; }
@media (prefers-reduced-motion: reduce) { .ctd { transition: none; } }

/* 打っている最中は、過去の発言より入力欄を優先して見せる */
.ctd.is-kb .ctd__list { max-height: 0; margin: 0; }

/* ---- [D] KBGAP1002 鍵盤と欄の間に「なぞの空間」を作らない（2026-10-02） ----
 * Android の Brave で、欄と鍵盤の間に下ナビの角と余白が挟まっていた。
 * js/chat-input-fix.js が、鍵盤の間だけ html に is-kb-open（チャットの欄なら msv-kb-dock も）を付け、
 * --msv-kb に「画面の下端から鍵盤の上端まで」を入れる（画面がずれた分は引いてある）。
 *   ・下ナビは鍵盤の裏にいて役に立たないので隠す
 *   ・個別チャットの欄は sticky だと文書が送られた時に会話の終わりで止まるので、鍵盤の間は fixed で鍵盤のすぐ上に付ける
 *   ・抜けた欄の高さぶん、会話の下に場所を空けて最後の発言が隠れないようにする
 *   ・safe-area は鍵盤の間は足さない（鍵盤がその場所を覆っている） */
html.is-kb-open .cmsocial-bottom { display: none !important; }
html.is-kb-open body .ctd,
html.is-kb-open body .ctd.has-nav,
html.is-kb-open body .ctd.is-kb.has-nav { bottom: var(--msv-kb, 0px); transition: none; }
html.is-kb-open body .cg__in { bottom: var(--msv-kb, 0px); padding-bottom: 8px; }
html.msv-kb-dock body .cd__in:not(:has(.cd__dr:not([hidden]))) {
	position: fixed; left: 0; right: 0; bottom: var(--msv-kb, 0px); z-index: 960;
	margin: 0 auto; max-width: 640px; box-sizing: border-box; padding-bottom: 6px;
}
html.msv-kb-dock body .cd { padding-bottom: calc(10px + var(--msv-dock-h, 56px)); }