/* 骨格。左の縦ナビ・上の細いバー・そこに載る画面の器と、入る前の関門（ログイン・ * 立場選択・アカウント設定・支援要請・通知）。 * * **移動（どの画面に居るか）は左、操作（いま何をするか）は画面の中。** * 以前はヘッダー1本にボタンが9個並んでいて、画面切替とその場の操作が * 同じ見た目で混ざっていた。業務ソフトに見えなかった主因はここ。 */ * { box-sizing:border-box; margin:0; } html, body { height:100%; } body { font-family:var(--font); background:var(--canvas); color:var(--ink); font-size:var(--f-md); line-height:1.7; -webkit-font-smoothing:antialiased; display:flex; overflow:hidden; } /* ============ 左の縦ナビ ============ */ #nav { width:var(--nav-w); flex-shrink:0; background:var(--nav-bg); color:var(--nav-ink); display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--nav-line); } #nav .brand { display:flex; align-items:baseline; gap:var(--s2); height:var(--top-h); padding:0 var(--s4); flex-shrink:0; border-bottom:1px solid var(--nav-line); color:var(--nav-ink-strong); font-size:var(--f-lg); font-weight:600; letter-spacing:.04em; } #nav .brand small { font-size:var(--f-xs); color:var(--nav-ink-dim); font-weight:400; letter-spacing:.08em; } #nav .navmain { padding:var(--s3) var(--s2) var(--s2); display:flex; flex-direction:column; gap:2px; flex-shrink:0; } .navitem { display:flex; align-items:center; gap:var(--s2); width:100%; text-align:left; border:none; background:none; color:var(--nav-ink); font-family:inherit; font-size:var(--f-md); padding:var(--s2) var(--s3); border-radius:var(--r1); cursor:pointer; transition:background .12s ease, color .12s ease; } .navitem:hover { background:var(--nav-hover); color:var(--nav-ink-strong); } /* 現在地は**面と左の細い棒**で示す。文字色だけだと暗い地の上で読み取れない */ .navitem.on { background:var(--nav-active); color:var(--nav-ink-strong); font-weight:600; box-shadow:inset 3px 0 0 var(--accent-line); } .navitem[hidden] { display:none; } /* しるしは**単色の線画**。絵文字は環境で字面が変わり、勝手に色を持つ */ .ic { width:16px; height:16px; flex-shrink:0; } .navitem .ic { opacity:.75; } .navitem.on .ic, .navitem:hover .ic { opacity:1; } /* 過去の会話。ナビの中で唯一伸び縮みする段 */ #side { flex:1; min-height:0; overflow-y:auto; padding:0 var(--s2) var(--s2); border-top:1px solid var(--nav-line); margin-top:var(--s2); } #side.hidden, #side[hidden] { display:none; } #side .sidehead { display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s3) var(--s2); position:sticky; top:0; background:var(--nav-bg); z-index:1; } #side h3 { flex:1; font-size:var(--f-xs); font-weight:600; color:var(--nav-ink-dim); letter-spacing:.08em; } #nav .navfoot { flex-shrink:0; padding:var(--s2); border-top:1px solid var(--nav-line); } #newSession { width:100%; border:1px dashed var(--nav-line); border-radius:var(--r1); background:none; color:var(--nav-ink); font-family:inherit; font-size:var(--f-md); padding:var(--s2); cursor:pointer; transition:background .12s ease, color .12s ease; } #newSession:hover { background:var(--nav-hover); color:var(--nav-ink-strong); } #newSession[hidden] { display:none; } /* ナビの中の小さな押しもの（履歴の畳み） */ .navmini { border:none; background:none; color:var(--nav-ink-dim); cursor:pointer; font-family:inherit; font-size:var(--f-xs); padding:2px var(--s1); border-radius:var(--r1); } .navmini:hover { background:var(--nav-hover); color:var(--nav-ink-strong); } .navmini[hidden] { display:none; } /* ============ 右側（細いバー＋画面） ============ */ #workspace { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; } header { height:var(--top-h); flex-shrink:0; display:flex; align-items:center; gap:var(--s3); padding:0 var(--s4); background:var(--surface); border-bottom:1px solid var(--line); } header #viewTitle { font-size:var(--f-md); font-weight:600; } header #viewSub { font-size:var(--f-sm); color:var(--ink-2); } header .spacer { flex:1; } /* 自分の情報。**details で開閉する**（開閉のためだけの JS を足さない） */ #userMenu { position:relative; } #userMenu > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--s2); padding:var(--s1) var(--s2); border-radius:var(--r1); font-size:var(--f-sm); color:var(--ink-2); white-space:nowrap; } #userMenu > summary::-webkit-details-marker { display:none; } #userMenu > summary:hover { background:var(--surface-3); } #userMenu > summary .caret { color:var(--ink-3); font-size:10px; } #userMenu .menu { position:absolute; right:0; top:calc(100% + 6px); z-index:25; min-width:190px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--sh2); padding:var(--s1); display:flex; flex-direction:column; } #userMenu .menu button { border:none; background:none; text-align:left; font-family:inherit; font-size:var(--f-md); color:var(--ink); padding:var(--s2) var(--s3); border-radius:var(--r1); cursor:pointer; } #userMenu .menu button:hover { background:var(--surface-3); } #userMenu .menu button[hidden] { display:none; } #userMenu .menu hr { border:none; border-top:1px solid var(--line); margin:var(--s1) 0; } #userMenu .menu .out { color:var(--bad); } #userMenu .menu .build { padding:var(--s1) var(--s3); font-size:var(--f-sm); color:var(--ink-3); line-height:1.5; white-space:pre; } main { flex:1; min-height:0; display:flex; overflow:hidden; } /* hidden 属性は display 指定に負けるため、明示的に打ち消す */ #main[hidden], #admin[hidden], #desk[hidden], #sessDetail[hidden] { display:none; } /* ============ 通知（画面J） ============ */ #bellBtn { position:relative; display:flex; align-items:center; gap:2px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r1); font-size:var(--f-md); padding:var(--s1) var(--s2); cursor:pointer; line-height:1.4; } #bellBtn:hover { background:var(--surface-3); } header .bell { background:var(--bad); color:#fff; border-radius:var(--r-pill); padding:0 5px; font-size:10px; margin-left:var(--s1); font-variant-numeric:tabular-nums; } header .bell[hidden] { display:none; } /* 重なりの順序: 下部バー40 < 会話シート45/46 < 通知50 < ログイン60 < ダイアログ65 */ #notifPanel { position:fixed; top:calc(var(--top-h) + 4px); right:var(--s3); width:340px; max-width:calc(100vw - 24px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); z-index:50; box-shadow:var(--sh2); overflow:hidden; } #notifPanel[hidden] { display:none; } #notifPanel .nh { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); font-size:var(--f-sm); color:var(--ink-2); background:var(--surface-2); } #notifPanel .nh .sp { flex:1; } #notifPanel .nh button { border:none; background:none; color:var(--accent); font-size:var(--f-xs); cursor:pointer; font-family:inherit; padding:2px var(--s1); } #notifPanel .row { display:flex; gap:var(--s2); padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); font-size:var(--f-sm); cursor:pointer; } #notifPanel .row:last-child { border-bottom:none; } #notifPanel .row:hover { background:var(--surface-2); } #notifPanel .row .dot { color:var(--bad); line-height:1.6; } #notifPanel .row .dot.read { color:var(--line-strong); } #notifPanel .row .tt { display:flex; flex-direction:column; } #notifPanel .row .tt .w { font-size:var(--f-xs); color:var(--ink-2); } #notifPanel .none { padding:var(--s4) var(--s3); font-size:var(--f-sm); color:var(--ink-2); } /* ============ 入る前の関門（全画面を覆うもの） ============ */ #login, #roledlg { position:fixed; inset:0; background:var(--canvas); z-index:60; display:flex; align-items:center; justify-content:center; padding:var(--s4); overflow-y:auto; } #login[hidden], #roledlg[hidden] { display:none; } #login .card, #roledlg .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s6); width:100%; max-width:380px; box-shadow:var(--sh2); } #login h2, #roledlg h2 { font-size:var(--f-xl); color:var(--ink); margin-bottom:var(--s1); } #login p, #roledlg p { font-size:var(--f-sm); color:var(--ink-2); margin-bottom:var(--s5); } #login label { font-size:var(--f-sm); color:var(--ink-2); display:block; margin:var(--s3) 0 var(--s1); } #login input { width:100%; } #login .pwwrap { position:relative; } #login .pwwrap input { padding-right:64px; } #login .pwtoggle { position:absolute; right:var(--s1); top:50%; transform:translateY(-50%); border:none; background:none; color:var(--accent); font-size:var(--f-sm); cursor:pointer; padding:var(--s1) var(--s2); width:auto; margin:0; } #login button[type=submit] { width:100%; margin-top:var(--s5); padding:var(--s3); } #login .lerr, #roledlg .lerr { color:var(--bad); font-size:var(--f-sm); margin-top:var(--s3); min-height:16px; } #roledlg .roleitem { width:100%; text-align:left; padding:var(--s3) var(--s4); margin-bottom:var(--s2); cursor:pointer; font-family:inherit; border:1px solid var(--line); border-radius:var(--r2); background:var(--surface); font-size:var(--f-md); transition:border-color .12s ease, background .12s ease; } #roledlg .roleitem:hover { border-color:var(--accent); } #roledlg .roleitem.current { border-color:var(--accent); background:var(--accent-soft); } #roledlg .roleitem .rname { font-weight:600; color:var(--accent); } #roledlg .roleitem .rdesc { display:block; font-size:var(--f-xs); color:var(--ink-2); margin-top:2px; } #roledlg .ghost { width:100%; margin-top:var(--s1); padding:var(--s2); } #roledlg .ghost[hidden] { display:none; } /* ============ ダイアログ（アカウント設定・支援要請） ============ */ #pwdlg, #escdlg { position:fixed; inset:0; background:rgba(16,24,32,.42); z-index:65; display:flex; align-items:center; justify-content:center; padding:var(--s4); overflow-y:auto; } #pwdlg[hidden], #escdlg[hidden] { display:none; } #pwdlg .card2, #escdlg .card2 { background:var(--surface); border-radius:var(--r3); padding:var(--s5); width:100%; box-shadow:var(--sh2); margin:auto; } #pwdlg .card2 { max-width:400px; } #escdlg .card2 { max-width:520px; } #pwdlg h3, #escdlg h3 { font-size:var(--f-lg); margin-bottom:var(--s3); } #pwdlg input { width:100%; margin-bottom:var(--s2); } #pwdlg .row, #escdlg .row { display:flex; gap:var(--s2); margin-top:var(--s2); } #pwdlg .row button, #escdlg .row button { flex:1; } #pwdlg .msg, #escdlg .msg { font-size:var(--f-sm); color:var(--bad); min-height:16px; } #pwdlg .msg.ok { color:var(--ok); } /* メールとパスワードは別々に保存する。節ごとに区切って、どちらの操作か分かるようにする */ #pwdlg .sect { padding-bottom:var(--s4); margin-bottom:var(--s4); border-bottom:1px solid var(--line); } #pwdlg h4 { font-size:var(--f-md); margin-bottom:var(--s1); } #pwdlg .hint2 { font-size:var(--f-xs); color:var(--ink-2); line-height:1.7; margin-bottom:var(--s2); } #escdlg label { font-size:var(--f-sm); color:var(--ink-2); display:block; margin:var(--s3) 0 var(--s1); } #escdlg label .sm { color:var(--ink-3); font-weight:400; } #escdlg textarea { width:100%; resize:vertical; } #escdlg .disclaim { font-size:var(--f-xs); color:var(--ink-2); margin-top:var(--s3); } /* ============ 画面幅への追随 ============ * * **PCとスマホは別の骨格にする。** 幅を縮めただけの画面は、指で使うと必ず破綻する。 * * 〜1180px 左のナビを細める（骨格は同じ） * 〜900px 骨格を組み替える —— **左のナビをやめ、下部のタブバーにする** * * 引き出し（画面の左から滑り出す面）は**PCの発想**なので使わない。 * 親指の届く下端に移動を置き、過去の会話は全面のシートで開く。 */ /* PCでは「履歴」を出さない（左に一覧が常に見えているので、開く操作が要らない）。 **@media より前に置くこと。** 後ろに置くと、同じ詳細度の @media 内の指定に勝ってしまう。 詳細度を上げて解決してはいけない —— `.navitem[hidden]` に勝って隠せなくなる */ .navphone { display:none; } /* --- 中間（ノートPC・横向きタブレット）。ナビだけ細くする --- */ @media (max-width:1180px) { :root { --nav-w:200px; } } /* ============ 〜900px: スマホ・縦タブレットの骨格 ============ */ @media (max-width:900px), (hover:none) and (pointer:coarse) and (max-width:1280px) { /* **文字を一段大きくする。** 画面が狭いほど本文は大きく —— 逆をやると、 まさに「スマホで文字が小さい」になる（2026-09-08 の最初の版がそうだった）。 すべての画面がトークンを見ているので、ここを上げれば全部が上がる。 */ :root { --f-xs:12px; --f-sm:13px; --f-md:14px; --f-lg:16px; --f-xl:22px; --f-num:26px; --top-h:52px; --bar-h:58px; /* 下部タブバー。safe-area は別に足す */ } /* #nav は器としては消し、子を別々の場所へ置く（下部バー・全面シート） */ #nav { display:contents; } #nav .brand { display:none; } /* --- 下部のタブバー。**親指の届く場所に移動を置く** --- */ #nav .navmain { position:fixed; left:0; right:0; bottom:0; z-index:40; flex-direction:row; gap:0; padding:0; background:var(--nav-bg); border-top:1px solid var(--nav-line); padding-bottom:env(safe-area-inset-bottom); /* ホームバーに潜らせない */ } .navitem { flex:1; flex-direction:column; justify-content:center; gap:3px; height:var(--bar-h); padding:0; border-radius:0; font-size:var(--f-xs); box-shadow:none; } .navitem .ic { width:20px; height:20px; } /* 現在地は**上辺の棒**で示す（下部バーでは左の棒は見えない） */ .navitem.on { background:none; box-shadow:inset 0 2px 0 var(--accent-line); } .navitem.on .ic { opacity:1; } .navphone { display:flex; } /* 「履歴」はここでだけ出る */ #workspace { padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom)); } /* --- 過去の会話は**全面のシート**。横から出る面は使わない --- */ /* **下部バーの上で止める。** 全画面を覆うと、タブバーが消えて 「どこにも行けない面」になる（開いた本人しか閉じ方が分からない） */ #side { position:fixed; top:0; left:0; right:0; z-index:45; margin:0; bottom:calc(var(--bar-h) + env(safe-area-inset-bottom)); padding:0 var(--s2) 70px; border-top:none; background:var(--nav-bg); transform:translateY(100%); transition:transform .2s ease; overscroll-behavior:contain; } body.histopen #side { transform:none; } /* 開いていないときは触れないようにする（畳んだ面が指を吸わないように） */ body:not(.histopen) #side { visibility:hidden; } #side .sidehead { padding:var(--s4) var(--s3) var(--s3); } #side h3 { font-size:var(--f-md); color:var(--nav-ink-strong); letter-spacing:0; } .navmini { font-size:var(--f-sm); padding:var(--s2) var(--s3); color:var(--nav-ink); border:1px solid var(--nav-line); border-radius:var(--r1); background:var(--nav-hover); } /* 「新しい会話」はシートの中に置く（下部バーは移動だけに使う） */ #nav .navfoot { position:fixed; left:0; right:0; z-index:46; border-top:none; bottom:calc(var(--bar-h) + env(safe-area-inset-bottom)); padding:var(--s2) var(--s3) var(--s3); background:var(--nav-bg); display:none; } body.histopen #nav .navfoot { display:block; } #newSession { padding:var(--s3); font-size:var(--f-md); } /* --- 上のバー --- */ header { gap:var(--s2); padding:0 var(--s3); } header #viewSub { display:none; } header #viewTitle { font-size:var(--f-lg); } #userMenu > summary .nm { max-width:8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #userMenu .menu { min-width:210px; } #notifPanel { right:var(--s2); left:var(--s2); width:auto; max-height:70vh; overflow-y:auto; } /* ダイアログは下から出す。**上下中央だと、キーボードが出た瞬間に隠れる** */ #pwdlg, #escdlg { align-items:flex-end; padding:0; } #pwdlg .card2, #escdlg .card2 { max-width:none; border-radius:var(--r3) var(--r3) 0 0; max-height:92vh; overflow-y:auto; padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom)); } } /* --- 最小（スマホ縦）。**文字は縮めない。** 余白だけ詰める --- */ @media (max-width:520px) { :root { --s5:16px; --s6:20px; } #login .card, #roledlg .card { padding:var(--s5); } header { padding:0 var(--s2); } } /* --- 指で押す端末では、押しものの当たりを広げる（44px を下回らせない） --- */ @media (pointer:coarse) { #userMenu .menu button { padding-top:11px; padding-bottom:11px; } #userMenu > summary { padding:var(--s2) var(--s2); } .srow button, button.mini, .utable button, .kbchunk button { padding:8px var(--s3); } .subtab, .tab { padding-top:10px; padding-bottom:10px; } } /* --- 動きを減らす設定 --- */ @media (prefers-reduced-motion:reduce) { * { transition:none !important; } }