@charset "UTF-8"; :root { --bg: #f6f6f8; --panel: #ffffff; --ink: #1c1c20; /* 薄いグレー文字。2026-08-13 に #6b6b76 → 濃いめへ(文字の見やすさ改善。全画面) */ --muted: #51515c; --line: #dcdce4; --accent: #d8455f; --accent-ink: #ffffff; --user-bubble: #2f2f38; --char-bubble: #ffffff; } * { box-sizing: border-box; } body { margin: 0; /* 背景はユーザーがGPTで生成した淡い画像(2026-08-13。UI改善第3弾 要望2)。 * 読み込めない環境でも --bg の無地で成立する */ background: var(--bg) url("bg.jpg") no-repeat center center fixed; background-size: cover; color: var(--ink); /* UD系(BIZ UDPGothic = Win10以降標準)優先。細くかすれがちな Yu Gothic 直行を * 避ける(2026-08-13 文字の見やすさ改善。管理側から全画面へ展開) */ font-family: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif; line-height: 1.7; } a { color: inherit; } /* ---------- 枠 ---------- */ /* 画面左端の基本メニュー(kyarapu 風。全画面共通の固定サイドバー) */ :root { --side-w: 200px; } .side-nav { position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); background: var(--panel); border-right: 1px solid var(--line); padding: 16px 12px; overflow-y: auto; z-index: 100; display: flex; flex-direction: column; gap: 4px; } .site-title { font-weight: bold; font-size: 18px; text-decoration: none; padding: 0 8px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .side-nav nav { display: flex; flex-direction: column; gap: 2px; } .side-link { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 15px; } .side-link:hover { color: var(--ink); background: #f0f0f4; } .side-link.active { color: var(--ink); font-weight: bold; background: #f0f0f4; } .side-icon { width: 22px; text-align: center; flex-shrink: 0; } .side-icon img { width: 22px; height: 22px; display: block; margin: 0 auto; } .side-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ダミーリンク(準備中)の見せ方: 薄くして「予定」バッジを添える */ .side-badge { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; flex-shrink: 0; } .side-link.dummy { opacity: .65; } body.has-side { padding-left: var(--side-w); } /* 画面右上に常時表示するアイコン群(kyarapu 風。履歴レールの左隣に置く) */ .top-actions { position: fixed; top: 12px; right: 16px; z-index: 95; display: flex; gap: 8px; } body.has-rail .top-actions { right: calc(var(--rail-w) + 16px); } .top-action { width: 40px; height: 40px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 17px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); opacity: .85; } .top-action:hover { border-color: var(--accent); opacity: 1; } .top-action img { width: 22px; height: 22px; display: block; } /* 右上の検索欄(旧「キャラ検索」ダミーアイコンの置き換え。2026-08-13) */ .top-search { display: flex; align-items: center; margin: 0; height: 40px; padding: 0 4px 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } .top-search:focus-within { border-color: var(--accent); } .top-search input[type="search"] { width: 190px; border: none; background: none; padding: 0; font-size: 14px; border-radius: 0; } .top-search input[type="search"]:focus { outline: none; } .top-search button { width: 32px; height: 32px; border: none; border-radius: 50%; background: none; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .top-search button:hover { background: #f0f0f4; } .top-search button img { width: 18px; height: 18px; display: block; opacity: .8; } /* 右上の通知パネル(旧「告知」ダミーアイコンの置き換え。2026-08-13。 * kyarapu のベル→右上ドロップダウンの簡易版。details ベースでJS無効でも開閉可) */ .notice-menu { position: relative; } .notice-menu > summary { list-style: none; cursor: pointer; user-select: none; position: relative; } .notice-menu > summary::-webkit-details-marker { display: none; } .notice-menu[open] > summary { border-color: var(--accent); opacity: 1; } /* 未読件数バッジ(2026-08-26。以前は文字なしの赤丸 .notice-dot)。 * 赤地に白抜きの数字。サイドバーの .side-count と同じ見た目で、 * アイコンの右上に少しはみ出して乗せる */ .notice-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; box-sizing: border-box; background: var(--accent); color: var(--accent-ink); border: 2px solid #fff; font-size: 11px; font-weight: bold; line-height: 14px; text-align: center; white-space: nowrap; } /* パネル内の未読項目(個人宛て=サーバ側で印付け / 全員宛て=app.js が * 付け外し)。タイトルの前に小さな赤点 */ .notice-item.unread .notice-item-title::before { content: ''; display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin: 0 6px 2px 0; } .notice-panel { position: absolute; right: 0; top: 48px; z-index: 96; width: 340px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .14); padding: 4px 16px 10px; text-align: left; } .notice-panel-title { font-weight: bold; font-size: 14px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); } .notice-item { padding: 12px 0; border-bottom: 1px solid var(--line); } .notice-item:last-child { border-bottom: none; } .notice-item-title { font-weight: bold; font-size: 13px; margin: 0 0 2px; } .notice-item-body { font-size: 14px; margin: 0; white-space: pre-wrap; word-break: break-word; } .notice-item-meta { color: var(--muted); font-size: 12px; margin: 4px 0 0; } .notice-item-meta a { color: var(--accent); } .notice-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 56px 0; } .notice-empty img { width: 44px; height: 44px; opacity: .3; display: block; margin: 0 auto 12px; } /* 右上のマイページパネル(旧「マイページ」ダミーアイコンの置き換え。2026-08-13。 * kyarapu のアバター→右上ドロップダウンの簡易版。details ベースでJS無効でも開閉可) */ .mypage-menu { position: relative; } .mypage-menu > summary { list-style: none; cursor: pointer; user-select: none; } .mypage-menu > summary::-webkit-details-marker { display: none; } .mypage-menu[open] > summary { border-color: var(--accent); opacity: 1; } .mypage-panel { position: absolute; right: 0; top: 48px; z-index: 96; width: 300px; max-width: calc(100vw - 32px); max-height: min(72vh, 640px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .14); padding: 14px 16px; text-align: left; } .mypage-account { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); } .mypage-account:hover { border-color: var(--accent); } .mypage-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: bold; } .mypage-account-text { min-width: 0; } .mypage-name { display: block; font-weight: bold; font-size: 15px; overflow-wrap: anywhere; } .mypage-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; } .mypage-chevron { margin-left: auto; color: var(--muted); font-size: 18px; } .mypage-gold { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; } .mypage-gold-amount { font-size: 14px; font-weight: bold; } .mypage-charge { background: var(--ink); color: #fff; text-decoration: none; font-size: 12px; padding: 5px 14px; border-radius: 15px; } .mypage-section { color: var(--muted); font-size: 12px; letter-spacing: .06em; margin: 14px 0 2px; padding: 0 4px; } .mypage-link { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; } /* ダミー項目は button 要素(JS無効対策)。リンク版と見た目を揃える */ button.mypage-link { width: 100%; background: none; border: none; cursor: pointer; font: inherit; font-size: 14px; text-align: left; } .mypage-link:hover { background: #f0f0f4; } .mypage-link.dummy { opacity: .6; } .mypage-link-icon { width: 20px; text-align: center; flex-shrink: 0; } .mypage-logout { margin-top: 12px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; } .mypage-note { color: var(--muted); font-size: 12px; margin: 10px 0 0; } /* 課金(チャージ)ページ billing.php(旧「課金」ダミーアイコンの置き換え。2026-08-13。 * kyarapu のチャージ=前払いゴールド方式を模した仮ページ。購入ボタンはダミー) */ .billing-balance { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 24px; padding: 14px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } .billing-balance-label { color: var(--muted); font-size: 14px; } .billing-balance-amount { font-size: 20px; font-weight: bold; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 32px; } .plan-card { position: relative; text-align: center; padding: 22px 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); } .plan-card.featured { border-color: var(--accent); } .plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; padding: 2px 12px; border-radius: 10px; white-space: nowrap; } .plan-name { color: var(--muted); font-size: 14px; margin: 0 0 6px; overflow-wrap: anywhere; } .plan-gold { font-size: 26px; font-weight: bold; margin: 0; } .plan-gold-unit { font-size: 15px; } .plan-bonus { color: var(--accent); font-size: 13px; margin: 4px 0 0; } .plan-desc { color: var(--muted); font-size: 13px; margin: 8px 0 0; overflow-wrap: anywhere; } /* 購入は button 要素(ダミー操作のJS無効対策)。従来のリンク風の見た目 */ .plan-buy { display: block; width: 100%; margin-top: 14px; padding: 9px 0; background: var(--ink); color: #fff; text-decoration: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; border-radius: 20px; } .plan-buy:hover { opacity: .85; } .billing-usage h2 { font-size: 16px; } .plan-usage-table { border-collapse: collapse; margin: 8px 0; } .plan-usage-table th, .plan-usage-table td { border: 1px solid var(--line); padding: 8px 16px; font-size: 14px; text-align: left; background: var(--panel); } .plan-usage-table th { font-weight: normal; color: var(--muted); } /* 右上アイコンと page-head が重ならないよう本文の上余白を確保 */ main { max-width: 960px; margin: 0 auto; padding: 68px 20px 60px; } .site-footer { text-align: center; color: var(--muted); font-size: 13px; padding: 20px; border-top: 1px solid var(--line); } /* ダミーリンク押下時のトースト(app.js が出す) */ .cp-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 13px; padding: 8px 18px; border-radius: 16px; z-index: 200; opacity: 0; transition: opacity .2s; } .cp-toast.show { opacity: .92; } /* ---------- 見出し・共通 ---------- */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } h1 { font-size: 22px; margin: 0; } h2 { font-size: 16px; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .hint { color: var(--muted); font-size: 14px; margin: 4px 0 16px; } .btn { display: inline-block; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; font-size: 15px; cursor: pointer; } .btn:hover { background: #f0f0f4; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-primary:hover { opacity: .9; background: var(--accent); } .btn-sm { padding: 4px 10px; font-size: 14px; } .btn-danger { color: var(--accent); } .errors { background: #fdecef; border: 1px solid #f3b8c2; color: #8c1a2c; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; } .errors p { margin: 0 0 6px; font-weight: bold; } .errors ul { margin: 0; padding-left: 20px; } .notice { background: #eaf6ec; border: 1px solid #b6ddbf; color: #1f5c2e; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; } .notice p { margin: 0 0 6px; font-weight: bold; } .notice ul { margin: 0; padding-left: 20px; } .empty { color: var(--muted); text-align: center; padding: 60px 20px; } /* ---------- キャラ一覧 ---------- */ .card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .card-thumb { aspect-ratio: 2 / 3; background: #e6e6ec; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; } .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-body { padding: 12px 14px; flex: 1; } .card-name { font-weight: bold; margin: 0 0 4px; } .card-desc { color: var(--muted); font-size: 14px; margin: 0; } .card-meta { color: var(--muted); font-size: 13px; margin-top: 8px; } .card-actions { display: flex; gap: 8px; padding: 0 14px 14px; } .card-actions .btn { flex: 1; text-align: center; } /* バナー直下の「＋ 新しいキャラを作る」(2026-08-28 夜 ユーザー要望)。 * PC は列の中央に幅を絞った大きめのボタン、スマホ(末尾の節)は横幅いっぱい */ .home-create { margin: 0 0 18px; text-align: center; } .home-create .btn { display: inline-block; min-width: 320px; padding: 12px 24px; font-size: 16px; font-weight: bold; border-radius: 12px; box-shadow: 0 2px 8px rgba(216, 69, 95, .25); } /* ---------- ホーム上部のタブ+人気タグチップ(2026-08-14 今後の課題5) ---------- */ .home-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .home-tab { padding: 8px 14px; font-size: 15px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .home-tab:hover { color: var(--ink); } .home-tab.active { color: var(--ink); font-weight: bold; border-bottom-color: var(--accent); } .home-tab-tag { font-size: 14px; } /* ランキング表示の順位バッジ(サムネ左上) */ .card-thumb { position: relative; } .card-rank { position: absolute; top: 8px; left: 8px; z-index: 1; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 8px; background: rgba(20, 20, 24, .62); color: #fff; font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: center; } /* ハッシュタグのチップ(キャラカード・検索結果共通。2026-08-14 今後の課題2) */ .card-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; } .tag-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; background: #fceff2; color: var(--accent); font-size: 12px; text-decoration: none; overflow-wrap: anywhere; } a.tag-chip:hover { background: #f7dde4; } .tag-chip.active { background: var(--accent); color: var(--accent-ink); } .search-result-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; } /* ---------- 画面右端のチャット履歴レール(kyarapu 風。全画面共通) ---------- */ :root { --rail-w: 84px; } .history-rail { position: fixed; right: 0; bottom: 0; top: 0; width: var(--rail-w); /* 枠は持たない: kyarapu 風にアイコンが浮いて見せる(UI改善第3弾 要望1) */ background: transparent; padding: 14px 8px 16px; overflow-y: auto; z-index: 90; /* 左サイドバー(100)の下 */ scrollbar-width: none; display: flex; flex-direction: column; align-items: center; gap: 14px; } .history-rail::-webkit-scrollbar { display: none; } /* 履歴に出すキャラ単位のアイコン */ .recent-char { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; width: 100%; } .recent-char-thumb { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #e6e6ec; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); /* 枠なしでも背景から浮いて見えるように */ display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .recent-char:hover .recent-char-thumb { border-color: var(--accent); } .recent-char-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .recent-char-initial { font-size: 20px; color: var(--muted); } .recent-char-name { max-width: 100%; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-char:hover .recent-char-name { color: var(--accent); } /* レールと本文の重なり回避: 余白が足りない幅のときだけ本文を左へ寄せる。 * (サイドバー200px を除いた残り幅で中央配置なので、右側余白が * レール84px 以上になるのは 200 + 960 + 84×2 = 1328px 以上のとき) */ @media (max-width: 1328px) { body.has-rail main { margin-right: var(--rail-w); } } /* 中間幅ではサイドバーをアイコンのみに畳む */ @media (max-width: 1000px) { :root { --side-w: 56px; } .side-nav { padding: 12px 6px; } .site-title { display: none; } .side-link { justify-content: center; padding: 9px 4px; } .side-label, .side-nav .side-badge { display: none; } } /* スマホ幅(800px 以下)の枠は**ファイル末尾の「スマホ表示」節**にまとめてある * (SPEC §23。2026-08-28 作り直し。それまでは、ここでサイドバーを上部の横並び * バーに畳んでいた)。サイドバー・履歴レールはスマホでは出さない */ /* ---------- フォーム ---------- */ .form-section { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-bottom: 20px; } /* キャラ作成フォームのタブ(JS有効時のみ #form-tabs の hidden が外れる) */ .form-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 20px; } .form-tabs button { border: none; background: none; cursor: pointer; padding: 10px 16px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; font-family: inherit; } .form-tabs button:hover { color: var(--ink); } .form-tabs button.active { color: var(--ink); font-weight: bold; border-bottom-color: var(--accent); } form.tabs-on .form-section { display: none; } form.tabs-on .form-section.tab-active { display: block; } .field { margin-bottom: 20px; } .field:last-child { margin-bottom: 0; } .field > label { display: block; font-weight: bold; font-size: 14px; margin-bottom: 2px; } .field .desc { color: var(--muted); font-size: 13px; margin: 0 0 6px; } .required { color: var(--accent); font-size: 12px; margin-left: 4px; } input[type="text"], input[type="number"], textarea, select { width: 100%; padding: 8px 10px; font-size: 15px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; line-height: 1.6; background: #fff; color: var(--ink); } textarea { resize: vertical; } input:focus, textarea:focus, select:focus { outline: 2px solid #c9c9d6; outline-offset: -1px; } /* OS標準の見た目のままだった部品のモダン化(2026-08-13 ユーザー要望): * ファイル選択ボタンは ::file-selector-button で丸型ボタン(.btn 相当)に、 * チェックボックス類は accent-color でテーマ色に */ /* 幅は既定だと狭い固定幅で「選択されていません」が中間省略されるため欄いっぱいに */ input[type="file"] { font-size: 13px; color: var(--muted); width: 100%; } input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 16px; border: 1px solid #f1c5cf; border-radius: 999px; background: #fceff2; color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.5; cursor: pointer; } input[type="file"]:hover::file-selector-button { background: #f8dee5; } /* 管理側のファイル選択ボタンは主色の青系の淡色 */ body.admin input[type="file"]::file-selector-button { background: #e9f0fd; border-color: #bfd3f7; } body.admin input[type="file"]:hover::file-selector-button { background: #dce8fb; } /* 全体を囲む共通の focus 枠はファイル入力には不釣り合いなので、ボタン側に付け替え */ input[type="file"]:focus { outline: none; } input[type="file"]:focus-visible::file-selector-button { outline: 2px solid #c9c9d6; outline-offset: 1px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* 管理側は主色の青(サイドバー --admin-blue と同色) */ body.admin input[type="checkbox"], body.admin input[type="radio"] { accent-color: #2563eb; } .counter { text-align: right; color: var(--muted); font-size: 13px; margin-top: 2px; } .counter.over { color: var(--accent); font-weight: bold; } .repeat-item { border: 1px solid var(--line); border-radius: 6px; padding: 14px; margin-bottom: 12px; background: #fafafc; } .repeat-item[hidden] { display: none; } /* 空き枠の段階表示(app.js)。hidden を勝たせる保険 */ .repeat-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: bold; color: var(--muted); margin-bottom: 10px; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-actions { display: flex; gap: 12px; align-items: center; position: sticky; bottom: 0; background: var(--bg); padding: 16px 0; border-top: 1px solid var(--line); } .form-actions .spacer { flex: 1; } /* ---------- チャット ---------- */ /* 枠(ヘッダ・メッセージ欄・入力欄)は**画面いっぱい**に広げる * (2026-08-20 第3回 ユーザー要望「まだ窮屈。固定部分を除いた画面全部で * スクロールする感じに」。きゃらぷのチャット画面と同じ構え)。 * 読みやすさは枠の幅ではなく**中の会話1列**で担保する — 吹き出しの行は * --chat-col で中央に寄せる(720px だと長めのセリフが1行に収まらないため * 900px にした 2026-08-14 課題4 の経緯を引き継ぎ、レール廃止で空いた分を * 少し足して 1000px ≈ 全角62字/行)。 * スクロール領域(=.messages)自体は画面幅いっぱいのままなので、 * スクロールバーは画面の右端に出る */ .chat-wrap { max-width: none; margin: 0; --chat-col: 1000px; } .chat-wrap > .messages > * { width: 100%; max-width: var(--chat-col); margin-left: auto; margin-right: auto; } /* 会話の列に合わせるもの: 入力欄・エラー/完了メッセージ・未回答の注記・ * 再生成の操作行。ヘッダだけは画面いっぱいのまま(上部バーとして伸ばす) */ .chat-wrap > .chat-input, .chat-wrap > .errors, .chat-wrap > .notice, .chat-wrap > .chat-tools { width: 100%; max-width: var(--chat-col); margin-left: auto; margin-right: auto; } /* 「このチャットはフィクションです」(メッセージ欄の先頭に流し込む注記) */ .chat-fiction-note { text-align: center; color: var(--muted); font-size: 12px; margin: 0; } /* 会話中ずっとキャラ名・初期設定・操作が見えるよう上部に貼り付ける * (2026-08-20 ユーザー要望)。ページ全体のスクロールはそのままで、 * ヘッダだけが上端で止まる(sticky)。会話が下を通り抜けるので背景は不透明 */ .chat-head { position: sticky; z-index: 40; display: flex; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; margin-bottom: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); } /* キャラ名と初期設定/あなたの名前は**横並びの1行**にする(2026-08-20 第2回。 * 「チャットの表示部分が狭い」— 固定部分を薄くしてメッセージ欄に高さを回す。 * きゃらぷのチャット見出しも1行 48px 相当) */ .chat-head-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; } /* 幅が足りないときの縮み方: まず meta(初期設定/あなた)が … で縮み、 * それでも足りなければ名前も縮む。右の操作ボタンや検索欄とぶつかって * はみ出すより、切り詰める方を選ぶ(2026-08-20 第5回で同じ行に統合したため) */ .chat-head-title .name, .chat-head-title .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-head-title .name { flex-shrink: 1; min-width: 4em; } .chat-head-title .meta { flex-shrink: 3; } /* 止まる位置の変遷(2026-08-20): 右上の固定バー(.top-actions = 検索欄+ * 通知+マイページ)と重ならないよう 0 → 60px → 46px と下げてきたが、 * **第5回で上部バーと同じ行に統合した**ため 0 に戻した。ヘッダ自身が * 画面上端のバーで、その右端に検索欄・アイコンが乗る(下の統合ブロック)。 * 800px 以下では .top-actions が静的になり一緒にスクロールするので、 * この 0 のままで重ならない */ .chat-head { top: 0; } /* チャット画面の右上バーだけ細身にする(上と対。ここを縮めた分だけ * ヘッダ・メッセージ欄が上に上がる。他ページの見え方は変えない) */ body:has(.chat-wrap) .top-actions { top: 6px; } body:has(.chat-wrap) .top-action { width: 36px; height: 36px; } body:has(.chat-wrap) .top-search { height: 36px; } /* ---- チャット画面だけ「アプリ型」の枠にする(2026-08-20 ユーザー要望。 * 参考: きゃらぷのチャットルーム)。画面全体はスクロールさせず、 * ヘッダと入力欄を上下に固定して**メッセージ欄だけが内側でスクロール**する。 * これで会話が右上の検索欄やヘッダの下を通り抜けて見えることがなくなる。 * 実装はフレックス1本: .chat-wrap を縦フレックスにし、.messages だけ * flex:1 + overflow-y:auto。他の要素(ヘッダ・注記・ツール・入力欄)は * 内容なりの高さで上下に残る。PHP 側の構造は変えていない ---- */ body:has(.chat-wrap) { overflow: hidden; } /* 画面全体は動かさない */ body:has(.chat-wrap) .site-footer { display: none; } main:has(.chat-wrap) { display: flex; height: 100vh; height: 100dvh; /* 画面いっぱい(左サイドバーの右から画面の右端まで)。右端のチャット履歴 * レールはチャット画面では出していない(layout.php の $onChat)ので、 * その 84px もここに回っている */ max-width: none; padding-left: 16px; padding-right: 16px; /* 上余白なし = ヘッダが画面の上端に付く(第5回で上部バーと統合) */ padding-top: 0; padding-bottom: 10px; /* 退避経路(codexレビュー推奨1 2026-08-20): 固定側(エラー表示・ヘッダ・ * 再送/再生成・入力欄・おすすめ回答)の合計が画面より高くなったら、 * 枠自体をスクロールできるようにして画面外の操作を拾えなくしない */ overflow-y: auto; } .chat-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; } .chat-wrap > .messages { flex: 1 1 auto; overflow-y: auto; /* 0 まで潰れると会話が1行も見えなくなるので下限を置く。ここを割り込む * 高さのときは上の overflow-y: auto 側で逃がす(codexレビュー推奨1) */ min-height: 120px; padding-right: 6px; /* スクロールバーが吹き出しに重ならないように */ } /* 従来どおり画面全体をスクロールさせる場合(=固定枠を解除する条件): * - PC で高さ 640px 以下: 低いウィンドウ・ブラウザ拡大・大きい文字設定。 * 固定部分だけで画面が埋まり、会話がほとんど見えなくなる * (codexレビュー推奨1 2026-08-20。幅の分岐だけでは防げない)。 * 上部バーが固定のままなのでヘッダも画面上端(0)のバーのまま。 * 本文はその下をスクロールする * - 幅 800px 以下は 2026-08-28 からここでは扱わない(スマホ表示=末尾の節。 * 固定入力欄+ページスクロール。100dvh 固定はアドレスバーの伸縮で * 入力欄が跳ねるので使わない、という方針は同じ) */ @media (min-width: 801px) and (max-height: 640px) { .chat-head { top: 0; } body:has(.chat-wrap) { overflow: auto; } body:has(.chat-wrap) .site-footer { display: block; } main:has(.chat-wrap) { display: block; height: auto; overflow: visible; padding: 0 16px 60px; } .chat-wrap { display: block; } .chat-wrap > .messages { overflow: visible; min-height: 0; padding-right: 0; } } /* ---- チャット画面の上部は「1本のバー」にする(2026-08-20 第5回 ユーザー要望 * 「検索部分と固定部分の間の“背景らしき横長の表示”はいらない」)。 * 第4回は白帯(body::before)を敷いて2段を白でつないだが、上段は検索欄が * 右端にあるだけで**左が丸ごと空きの帯**になり、余計な段に見えていた。 * そこで帯をやめ、**チャットの見出しと検索欄・アイコンを同じ行**に置く: * ①ヘッダを画面上端(top:0)の高さ48pxのバーにする(カードはやめ、 * 左右いっぱい=負のマージン -16px は main の左右 padding と対、 * 下線1本だけ) * ②検索欄・アイコン(.top-actions は position:fixed のまま)から枠と影を * 外し、バーの右端に乗っているように見せる * ③その分ヘッダの右に場所を空ける(padding-right)。空ける幅は * .top-actions の実寸 = 検索欄242 + 8 + アイコン36×3 + 8×2 = 374px に * 右余白16と間隔16を足した 406 → 410px * 狭い画面(800px 以下)では .top-actions が静的になり同じ行に置けないので * 掛けない(従来どおりカード表示) ---- */ @media (min-width: 801px) { body:has(.chat-wrap) .chat-head { min-height: 48px; margin: 0 -16px 12px; padding: 6px 20px; padding-right: 410px; border: none; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; } body:has(.chat-wrap) .top-search { background: #f0f0f4; border-color: transparent; box-shadow: none; } body:has(.chat-wrap) .top-search:focus-within { border-color: var(--accent); } body:has(.chat-wrap) .top-action { background: transparent; border-color: transparent; box-shadow: none; opacity: 1; } body:has(.chat-wrap) .top-action:hover, body:has(.chat-wrap) .notice-menu[open] > summary { background: #f0f0f4; } } /* 同じ行に検索欄まで並べるには 1200px では足りない(キャラ名+初期設定と * 右の操作3つで 700px 前後を使う)。狭いときは検索欄だけ畳んでアイコンを * 残す — 検索はサイドバーのホームから辿れる */ @media (min-width: 801px) and (max-width: 1200px) { body:has(.chat-wrap) .top-search { display: none; } body:has(.chat-wrap) .chat-head { padding-right: 160px; } /* アイコン3つ分 */ } /* ---- 立ち絵パネル(課題⑤ 第1段 2026-08-27。きゃらぷの「登場人物の画像」の * 第一歩)。プロフィール画像を会話の列の**左**に固定で出す。 * ・置き方は position: fixed(.chat-wrap の縦フレックスに手を入れない。 * 左サイドバーの右隣、ヘッダの下に置く) * ・会話の列(.messages・入力欄・注記・操作行)はパネルぶん右へ寄せる= * .chat-wrap の padding-left。ヘッダだけは画面いっぱいのバーのままに * したいので、その分を負のマージンで戻す(801px 以上の -16px と対) * ・出す条件は **1201px 以上かつ高さ 641px 以上**だけ。1200px 以下は * 検索欄を畳む幅で、パネル 280px を引くと会話の列が 700px を切る。 * 800px 以下・高さ 640px 以下は固定枠自体を解除している(上の退避)ので * 一緒に出さない。スマホの見せ方は第2段・スマホアプリ風UIで決める * ・画像は切り抜かない(width:auto + max-width/max-height)。1:1 の画像は * 280×280、2:3 なら 280×420 になる。画面が低いときは高さ側で縮む * ・画像が無いキャラでは