/* ========================================================= My Context — デザインシステム ネイティブアプリ品質を目指した、落ち着いた高級感のあるUI。 ライト/ダーク両対応、固定シェル＋内部スクロール、ボトムシート。 ========================================================= */ :root { /* 既定は「霧（kiri）」固定。OSのダーク設定では切り替えず、常に霧で表示する。 */ color-scheme: light; /* 余白・角丸・モーション（禅：少し大きめの角丸で柔らかく） */ --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --gap: 16px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --shell-max: 1080px; /* 書体（禅）：UIはゴシック、本人の言葉は明朝で一次資料として保全する */ --font-ui: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; --font-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; /* 霧（kiri）— 涼やかな水面。既定（ライト） */ --bg: #e7eaec; --bg2: #dde1e4; --bg-grad-1: rgba(35, 40, 44, 0.05); --bg-grad-2: rgba(90, 117, 133, 0.05); --surface: #f3f5f6; --surface-2: #e9eced; --surface-3: #dde2e4; --ink: #23282c; --ink-soft: #6c7780; --ink-faint: #9aa4ac; --line: rgba(35, 40, 44, 0.10); --line-strong: rgba(35, 40, 44, 0.16); --accent: #5a7585; --accent-press: #496374; --accent-ink: #456072; --accent-soft: rgba(90, 117, 133, 0.12); --on-accent: #ffffff; /* 砂・水面・小石・波紋（見えてきたこと） */ --sand: #e1e5e7; --sand-line: rgba(35, 40, 44, 0.05); --stone-1: #c0c8cd; --stone-2: #aab4ba; --stone-edge: rgba(35, 40, 44, 0.14); --ripple-ring: rgba(90, 117, 133, 0.42); --ripple-core: rgba(90, 117, 133, 0.9); /* 補助の意味色（結果カード等の他画面で使用。禅の地に馴染むよう中和） */ --rose: #9c5563; --rose-soft: #e6dee0; --rose-ink: #7e2f3a; --gold: #8a6a3c; --gold-soft: #e6e1d6; --gold-ink: #5f4a23; /* 影 */ --shadow-soft: 0 2px 14px rgba(35, 40, 44, 0.06); --shadow-sm: 0 1px 2px rgba(35, 40, 44, 0.06), 0 2px 8px rgba(35, 40, 44, 0.05); --shadow: 0 1px 2px rgba(35, 40, 44, 0.06), 0 8px 28px rgba(35, 40, 44, 0.08); --shadow-md: 0 10px 30px rgba(35, 40, 44, 0.10); --shadow-lg: 0 24px 60px rgba(35, 40, 44, 0.16); /* 旧・ユーザー吹き出し（禅では右寄せ＋右ボーダーに変更。互換のためトークンは残す） */ --user-bubble: #5a7585; --user-bubble-ink: #ffffff; } /* 墨（sumi）— 深い炭。既定は霧。将来 を付けた時だけ適用する（自動切替しない）。 */ :root[data-theme="sumi"] { /* 墨（sumi）— 深い炭。ダーク */ --bg: #16140f; --bg2: #1c1a13; --bg-grad-1: rgba(207, 141, 91, 0.06); --bg-grad-2: rgba(236, 230, 216, 0.03); --surface: #201d16; --surface-2: #26221a; --surface-3: #2e2920; --ink: #ece6d8; --ink-soft: #9b927f; --ink-faint: #6d6657; --line: rgba(236, 230, 216, 0.10); --line-strong: rgba(236, 230, 216, 0.18); --accent: #cf8d5b; --accent-press: #e0a978; --accent-ink: #e0a978; --accent-soft: rgba(207, 141, 91, 0.12); --on-accent: #1a1206; --sand: #1c1a14; --sand-line: rgba(236, 230, 216, 0.04); --stone-1: #4a4537; --stone-2: #37332a; --stone-edge: rgba(236, 230, 216, 0.14); --ripple-ring: rgba(207, 141, 91, 0.40); --ripple-core: rgba(207, 141, 91, 0.9); --rose: #df93a0; --rose-soft: #33241f; --rose-ink: #f0c2c9; --gold: #d7a767; --gold-soft: #332b1f; --gold-ink: #ecd2a6; --shadow-soft: 0 2px 18px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 34px rgba(0, 0, 0, 0.5); --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.5); --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.62); --user-bubble: #cf8d5b; --user-bubble-ink: #1a1206; } /* 夜（yoru）— 生きた背景と同じ青墨系。背景だけでなく、文字・面・線も一緒に沈める。 */ :root[data-theme="yoru"], :root[data-theme="night"], :root[data-theme="dark"] { color-scheme: dark; --bg: #172027; --bg2: #1c2831; --bg-grad-1: rgba(155, 182, 196, 0.12); --bg-grad-2: rgba(78, 108, 124, 0.12); --surface: rgba(31, 42, 50, 0.88); --surface-2: rgba(39, 53, 63, 0.92); --surface-3: rgba(49, 66, 78, 0.96); --ink: #e4edf1; --ink-soft: #a8b8c1; --ink-faint: #748692; --line: rgba(218, 235, 242, 0.13); --line-strong: rgba(218, 235, 242, 0.23); --accent: #9bb6c4; --accent-press: #b2cbd6; --accent-ink: #c8dce5; --accent-soft: rgba(155, 182, 196, 0.17); --on-accent: #14212a; --sand: #1d2a33; --sand-line: rgba(218, 235, 242, 0.06); --stone-1: #394b56; --stone-2: #2d3d47; --stone-edge: rgba(218, 235, 242, 0.14); --ripple-ring: rgba(155, 182, 196, 0.44); --ripple-core: rgba(190, 214, 224, 0.9); --rose: #e6a0ae; --rose-soft: rgba(230, 160, 174, 0.15); --rose-ink: #f3c7d0; --gold: #d7b47a; --gold-soft: rgba(215, 180, 122, 0.15); --gold-ink: #ead3a8; --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.22); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 2px 10px rgba(0, 0, 0, 0.18); --shadow: 0 1px 2px rgba(0, 0, 0, 0.26), 0 10px 34px rgba(0, 0, 0, 0.28); --shadow-md: 0 14px 38px rgba(0, 0, 0, 0.32); --shadow-lg: 0 28px 68px rgba(0, 0, 0, 0.44); --user-bubble: #9bb6c4; --user-bubble-ink: #14212a; --cta-consult-bg: #86a2af; } *, *::before, *::after { box-sizing: border-box; } /* HTML の hidden 属性は、後続の display 指定に常に勝つようにする */ [hidden] { display: none !important; } html, body { width: 100%; height: 100%; /* ★縦の overflow:hidden は付けない＝ブラウザ標準の「下に引っ張って更新（プル・トゥ・リフレッシュ）」を残す。 キーボードで画面が崩れる問題は、各画面を flex で高さ充填する方式（#app / #app > *）で解決済み。 */ /* ★横方向だけは隠す＝画面を左右にスライドできてしまう（横オーバーフロー）のを止める。 これがあると、オンボでスワイプした時にページが横にずれ、ホームツアーのスポット位置までズレていた（作者FB 2026-06-13）。 縦（プル更新）は overflow-y に触らないので維持される。 */ overflow-x: hidden; overscroll-behavior-x: none; max-width: 100%; } body { min-width: 0; margin: 0; background: radial-gradient(120% 80% at 85% -10%, var(--bg-grad-1), transparent 60%), radial-gradient(120% 90% at -10% 110%, var(--bg-grad-2), transparent 55%), var(--bg); color: var(--ink); font-family: var(--font-ui); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :root[data-theme="yoru"] body, :root[data-theme="night"] body, :root[data-theme="dark"] body { background: radial-gradient(120% 92% at 72% 6%, rgba(63, 84, 96, 0.76), transparent 60%), radial-gradient(120% 90% at 6% 110%, rgba(25, 36, 44, 0.88), transparent 58%), var(--bg); } /* 本人の言葉（一次資料）は明朝で保全する（禅デザインの原則） */ .mincho { font-family: var(--font-mincho); } button, textarea, input, select { font: inherit; color: inherit; } /* iOSは16px未満の入力欄にフォーカスするとページ全体を自動ズームする。 画面ごとの個別指定やインラインstyleより強く、文字入力系だけを16px以上に固定する。 */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select { font-size: 16px !important; } button { border: 0; background: none; cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.5; } a { color: var(--accent-ink); } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; } /* アクセント面のボタンは、白系のアウトラインで見やすく */ .primary-button:focus-visible, .send-button:focus-visible { outline-color: var(--on-accent); outline-offset: 3px; } ::selection { background: var(--accent-soft); } /* ---------- アプリシェル（固定100dvh、内部スクロール） ---------- */ .app-shell { /* 生きた背景（#ambientCanvas）より前面に重ねる */ position: relative; z-index: 1; /* アンビエントモードから戻る時のフェードイン（入りは body.ambient-zen 側の 0.8s が優先） */ transition: opacity 0.35s ease; display: flex; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; /* モバイルブラウザのアドレスバー等を引いた「最小ビューポート(svh)」を採用し、 下部の操作ボタン（入力欄・ここまでをまとめる/保存して終わる）が常に画面内に収まるようにする。 dvh はバーの開閉で高さが変わり、下端が一瞬隠れる（＝まとめるが見えない・要スクロール）ことがあった。 svh で隙間が出ても body 背景＝アプリと同色(#e7eaec)なので継ぎ目は見えない。 */ height: 100vh; /* 古いブラウザ用フォールバック */ height: 100svh; height: var(--app-h, 100svh); /* JS(setupViewportHeight)が visualViewport の実高さを流し込む＝キーボードで下端が隠れない */ overflow: hidden; } /* ===== 生きた背景（ambient.js が描く Canvas）。app-shell の背面いっぱいに固定 ===== */ #ambientCanvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } /* ambient 有効時＝bodyのグラデは canvas が代替する（二重描画を避ける）。 停止（3段階目）もキャンバスは表示したまま＝ambient.js の bare モードがエフェクト層だけ描かない（z358）。 （z353の旧方式＝キャンバス非表示＋この背景で代替は、夜トーンで景色が別物になった。 body.ambient-stopped クラスは状態の印としてだけ残っている＝ここでの見た目制御は無し） */ body.ambient-on { background: none; } /* 起動イントロ：背景が一度だけ呼吸し、ワードマークが淡く現れて消える */ #bootIntro { position: fixed; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 24px 70px; pointer-events: none; } #bootIntro .boot-mark { font-family: var(--font-mincho); font-size: 22px; font-weight: 500; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--ink); opacity: 0; transition: opacity 0.26s ease-out; } #bootIntro.in .boot-mark { opacity: 0.94; } #bootIntro.out .boot-mark { opacity: 0; transition: opacity 0.2s ease-in; } @media (prefers-reduced-motion: reduce) { #bootIntro { display: none; } } /* 6日目のソフト通知。画面を奪わず、必要な人だけ全画面へ進める */ .trial-day6-banner { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 54px); left: 14px; right: 14px; z-index: 4; pointer-events: none; } .trial-day6-banner[hidden] { display: none; } .trial-day6-banner button { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 84%, transparent); color: var(--ink); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; gap: 3px; justify-items: start; padding: 10px 14px; pointer-events: auto; } .trial-day6-banner span { font-size: 13.5px; font-weight: 700; } .trial-day6-banner small { font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); } /* 7日後の全画面ペイウォール。シートではなく、呼吸する背景の上に重ねる */ .pw-takeover { position: fixed; inset: 0; z-index: 1180; color: var(--ink); background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity 0.38s ease; } .pw-takeover.open { opacity: 1; pointer-events: auto; } .pw-takeover[hidden] { display: none; } .pwt-act1, .pwt-act2 { min-height: 100%; width: 100%; } .pwt-act1 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 28px) 24px calc(env(safe-area-inset-bottom, 0px) + 34px); overflow: hidden; } .pwt-eyebrow { margin: 0 0 18px; font-size: 12px; letter-spacing: 0.12em; color: var(--ink-soft); } .pwt-sky { position: relative; width: min(78vw, 390px); aspect-ratio: 1 / 0.84; margin: 0 auto 18px; } .pwt-star { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(0.3); opacity: 0; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--delay); } .pw-takeover.act1-on .pwt-star { opacity: 0.95; transform: translate(-50%, -50%) scale(1); } .pwt-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); } .pwt-star-label { position: absolute; left: 14px; top: -7px; white-space: nowrap; font-size: 11.5px; color: var(--ink-soft); opacity: 0; transition: opacity 0.65s ease; transition-delay: calc(var(--delay) + 0.35s); } .pw-takeover.act1-on .pwt-star-label { opacity: 1; } .pwt-constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease 2.9s; } .pw-takeover.act1-on .pwt-constellation { opacity: 0.34; } .pwt-constellation path { fill: none; stroke: var(--accent); stroke-width: 1; stroke-linecap: round; } .pwt-stats, .pwt-grown, .pwt-next { opacity: 0; transform: translateY(10px); transition: opacity 0.7s ease, transform 0.7s var(--ease); } .pw-takeover.act1-on .pwt-stats { opacity: 1; transform: translateY(0); transition-delay: 3.1s; } .pw-takeover.act1-on .pwt-grown { opacity: 1; transform: translateY(0); transition-delay: 3.7s; } .pw-takeover.act1-on .pwt-next { opacity: 1; transform: translateY(0); transition-delay: 4.4s; } .pwt-stats { margin: 4px 0 20px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); text-align: center; } .pwt-stats b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } .pwt-grown { margin: 0 0 18px; font-family: var(--font-mincho); font-size: 19px; line-height: 1.55; } .pwt-next, .pwt-later, .pwt-close, .pwt-footer-links button { background: transparent; border: 0; color: var(--accent-ink); cursor: pointer; } .pwt-next { min-height: 44px; padding: 8px 18px; font-size: 14px; } .pwt-act2 { position: relative; display: flex; justify-content: center; } .pwt-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 14px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; color: var(--ink-soft); } .pwt-scroll { width: min(100%, 520px); height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: calc(env(safe-area-inset-top, 0px) + 58px) 20px calc(env(safe-area-inset-bottom, 0px) + 28px); } .pwt-act2 .eyebrow, .pwt-title, .pwt-lead, .pwt-includes, .pwt-plans, .pwt-cta, .pwt-disclosure, .pwt-later, .pwt-trust, .pwt-details, .pwt-footer-links { opacity: 0; transform: translateY(10px); } .pw-takeover.act2-on .pwt-act2 .eyebrow, .pw-takeover.act2-on .pwt-title, .pw-takeover.act2-on .pwt-lead, .pw-takeover.act2-on .pwt-includes, .pw-takeover.act2-on .pwt-plans, .pw-takeover.act2-on .pwt-cta, .pw-takeover.act2-on .pwt-disclosure, .pw-takeover.act2-on .pwt-later, .pw-takeover.act2-on .pwt-trust, .pw-takeover.act2-on .pwt-details, .pw-takeover.act2-on .pwt-footer-links { opacity: 1; transform: translateY(0); transition: opacity 0.58s ease, transform 0.58s var(--ease); } .pw-takeover.act2-on .pwt-title { transition-delay: 0.05s; } .pw-takeover.act2-on .pwt-lead { transition-delay: 0.22s; } .pw-takeover.act2-on .pwt-includes { transition-delay: 0.32s; } .pw-takeover.act2-on .pwt-plans { transition-delay: 0.4s; } .pw-takeover.act2-on .pwt-cta, .pw-takeover.act2-on .pwt-disclosure { transition-delay: 0.58s; } .pw-takeover.act2-on .pwt-later, .pw-takeover.act2-on .pwt-trust, .pw-takeover.act2-on .pwt-details, .pw-takeover.act2-on .pwt-footer-links { transition-delay: 0.75s; } .pwt-title { margin: 8px 0 12px; font-family: var(--font-mincho); font-size: 24px; line-height: 1.52; letter-spacing: 0; font-weight: 500; color: var(--ink); } .pwt-lead { margin: 0 0 22px; font-size: 14px; line-height: 1.85; color: var(--ink-soft); } /* プレミアムに含まれるもの（3.1.2(c)：折りたたまない常時表示の内容リスト） */ .pwt-includes { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .pwt-includes p { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); } .pwt-includes p span { font-weight: 400; color: var(--ink-soft); } .pwt-includes ul { margin: 0; padding: 0 0 0 18px; font-size: 12.5px; line-height: 1.85; color: var(--ink-soft); } .pwt-includes ul li { margin: 0; } .pwt-includes small { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.7; color: var(--ink-faint); } .pwt-plans { display: grid; gap: 10px; margin: 0 0 18px; } .pwt-plan { position: relative; display: block; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); padding: 15px 16px 14px; cursor: pointer; } .pwt-plan[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); } .pwt-badge { position: absolute; top: -9px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; background: var(--accent); color: var(--on-accent); padding: 3px 10px; border-radius: 999px; } .pwt-plan-head, .pwt-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pwt-plan-head b { font-size: 15px; color: var(--ink); } .pwt-plan-head small { font-size: 11px; color: var(--accent-ink); font-weight: 600; } .pwt-price { justify-content: flex-start; margin-top: 6px; } .pwt-price b { font-size: 24px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .pwt-price.monthly b { font-size: 20px; font-weight: 700; } .pwt-price small, .pwt-note { font-size: 12px; color: var(--ink-soft); } .pwt-note { display: block; margin-top: 4px; } .pwt-cta { width: 100%; padding: 16px; font-size: 16px; font-weight: 700; border-radius: 14px; } .pwt-diagnostic { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-soft); font-size: 11.5px; line-height: 1.65; } .pwt-diagnostic-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .pwt-diagnostic-head strong { color: var(--ink); font-size: 12.5px; } .pwt-diagnostic-head button { min-height: 32px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--accent-ink); font-size: 11px; padding: 5px 10px; } .pwt-diagnostic pre { white-space: pre-wrap; word-break: break-word; margin: 0; font: inherit; color: var(--ink-soft); } .pwt-disclosure { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink-soft); text-align: center; } .pwt-later { display: block; min-height: 44px; margin: 10px auto 0; padding: 8px 16px; color: var(--ink-soft); font-size: 13px; } .pwt-trust { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 20px 0 18px; padding: 18px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .pwt-trust div { text-align: center; padding: 0 4px; } .pwt-trust div + div { border-left: 1px solid var(--line); } .pwt-trust b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 13px; } .pwt-trust span { display: block; color: var(--ink-soft); font-size: 11.5px; line-height: 1.65; } .pwt-details { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 12px; } .pwt-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; } .pwt-details summary::-webkit-details-marker { display: none; } .pwt-details summary small { color: var(--ink-faint); font-weight: 400; white-space: nowrap; } .pwt-details ul { margin: 12px 0 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.85; color: var(--ink-soft); } .pwt-details p { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.7; } .pwt-details dl { margin: 12px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); } .pwt-details dt { color: var(--ink); font-weight: 700; margin-top: 10px; } .pwt-details dd { margin: 2px 0 0; padding: 0; } .pwt-footer-links { display: flex; justify-content: center; gap: 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; } .pwt-footer-links button, .pwt-footer-links a { min-height: 44px; padding: 4px 0; color: var(--accent-ink); font-size: 12px; text-decoration: underline; display: inline-flex; align-items: center; } @media (prefers-reduced-motion: reduce) { .pw-takeover, .pwt-star, .pwt-star-label, .pwt-constellation, .pwt-stats, .pwt-grown, .pwt-next, .pwt-act2 .eyebrow, .pwt-title, .pwt-lead, .pwt-plans, .pwt-cta, .pwt-disclosure, .pwt-later, .pwt-trust, .pwt-details, .pwt-footer-links { transition: none !important; } } /* ambient 有効時は静的背景SVG（砂紋・波紋）を薄く残す。消さない＝エフェクト無効端末のフォールバック。 うるさければ 0 へ（まず 0.25 で試す＝実装仕様書 §3-3）。 */ body.ambient-on .g-sand, body.ambient-on .g-ripple, body.ambient-on .chat-ripple, body.ambient-on .auth-ripple { opacity: 0.25; } /* 背景の一時停止ボタン（トップバー右・30px円・ボーダーなし・❚❚/▶） 霧トーン：ほぼ不透明な --surface(#f3f5f6) の円が霧背景から浮いて見える（作者FB z350） → 半透明＋既存の backdrop-blur で霧に溶かし、アイコンも一段淡く（--ink-faint）。 */ .ambient-pause { width: 30px; height: 30px; flex: none; padding: 0; border-radius: 50%; border: 0; background: rgba(243, 245, 246, 0.5); color: var(--ink-faint); display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 0.15s var(--ease); } /* 夜・墨トーンは従来どおり（--surface 地に --ink-soft）＝「かなりいい感じ」を変えない */ :root[data-theme="yoru"] .ambient-pause, :root[data-theme="night"] .ambient-pause, :root[data-theme="dark"] .ambient-pause, :root[data-theme="sumi"] .ambient-pause { background: var(--surface); color: var(--ink-soft); } .ambient-pause:active { transform: scale(0.92); } /* ★iOS(WebKit)専用・入力中だけ：アプリの箱を「見えている範囲」に固定する。 原因＝iOSはキーボードを出すとページ全体をスクロールして入力欄を上げ、その分だけ箱ごと上にズレ、 上の問い/ヘッダーが画面外へ消え、箱の下に body 背景（灰色）が露出する（実機計測で docScroll>0・shell.top=-docScroll を確認）。 Android/PC は interactive-widget が効きページ自体が縮む（スクロールしない）ので起きない＝この対策は iOS だけに当て、Android体験は一切変えない。 入力中だけ position:fixed で箱を visualViewport にピン留めし、ページのスクロール自体を無くす（top/height は JS が実寸で当てる）。 入力していない時は通常フロー＝「下に引っ張って更新」も維持。 */ body.kb-pin .app-shell { position: fixed; left: 0; right: 0; top: 0; /* JS(updateIosKeyboardPin)が visualViewport.offsetTop/height を実寸で上書き */ } /* キーボード中は箱が狭い（=visualViewport.height）ので、入力に集中できるよう上のワードマーク帯を隠して高さを稼ぐ。 入力を終える（kb-pin解除）と元に戻る。iOSのキーボード中だけ＝Android/PCは常に表示のまま。 */ body.kb-pin .topbar { display: none; } /* 各画面を「箱の高さに収める」＝下の操作バー（保存/送信）を必ずキーボードの上に見せ、長い中身（チャットログ/日記textarea）は 内部スクロールに回す。通常は #app > * を flex:1 0 auto（縮まない）にしているが、ピン留めで箱の高さが確定するこの状態だけ 縮める（flex-shrink:1）＝下端の操作が画面外に押し出されない。iOSのキーボード中だけ。 */ body.kb-pin #app > * { flex: 1 1 auto; min-height: 0; } /* 日記：深掘りコントロールは下のバー(.jw-bar)の左に移したので、キーボード中も隠さない（バーは画面最下部で書く欄の高さを食わない）。 旧「そのまま日記になります…」ヒントは撤去。iOSのキーボード中の挙動はバーごと固定されるので書く欄は従来どおり確保される。 */ /* ガイドの「味見」入力欄は画面中段（.guide-body の中）にあり、.guide-body は通常スクロールしない箱。 キーボード中はページ全体を固定してスクロールを無くす（kb-pin）ため、隠れた入力欄を見せる scrollIntoView が スクロールする箱を見つけられず味見欄が出せなくなる。そこでキーボード中だけ .guide-body をスクロール箱にする＝ updateIosKeyboardPin が呼ぶ revealFocusedInput が .guide-body を動かして味見欄を表示できる。iOSのキーボード中だけ。 */ body.kb-pin .guide-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: none; max-width: 100%; touch-action: pan-y; } .topbar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: min(var(--shell-max), 100%); margin: 0 auto; /* 上余白を詰める。env(safe-area-inset-top)＝ノッチ/Dynamic Island機だけその高さが自動で入り、無い機種は0。 その上に足す余白を 12px→6px、非ノッチ機の最低値を 22px→8px に縮小（ロゴはノッチに隠れないまま、全体的に上へ詰まる）。 */ padding: calc(max(env(safe-area-inset-top), 8px) + 4px) clamp(16px, 4vw, 28px) 8px; } /* タイトルは中央に、細くトラッキングしたワードマーク（設計の入口ヘッダーに合わせる） */ .brand { grid-column: 2; justify-self: center; color: var(--ink-soft); text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: 0.38em; text-transform: uppercase; padding-left: 0.38em; /* 字間の末尾分を相殺し、見た目を中央へ */ white-space: nowrap; transition: color 0.15s var(--ease); } .brand:hover { color: var(--ink-soft); } .top-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; } .icon-button { min-height: 40px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-sm); transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease); } .icon-button:hover { transform: translateY(-1px); border-color: var(--line-strong); } .icon-button:active { transform: translateY(0); } .main { flex: 1; min-width: 0; min-height: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; -webkit-overflow-scrolling: touch; } /* ★各画面が必ず #app の高さを満たすように flex で埋める（重要）。 日記・チャット・ガイド等は height:100% で高さを満たしていたが、iOS Safari では親(#app)の高さが flex 由来＝不定とみなされ % が解決せず、中身の高さに潰れて「入力欄が上に寄り下に空白」になっていた。 #app を縦並び flex にし、各画面ルートを flex:1 で埋める＝% に依存せず確実に高さ一杯になる。 背の高い画面は縮まずあふれて #app（overflow-y:auto）がスクロールする（クリップしない）。 ※ #app（ID）で限定＝ホームのカード内 span.main 等には影響させない。 */ #app { display: flex; flex-direction: column; /* ★横方向は絶対にあふれさせない（画面が横に超過するのを防ぐ）。装飾SVGや非折返しテキストが WebKit(iPhoneのSafari/Chrome)で横にあふれて画面幅を超える問題のガード。縦スクロールは overflow-y:auto のまま。 */ overflow-x: hidden; overscroll-behavior-x: none; } #app > * { flex: 1 0 auto; /* 高さ一杯まで伸びる・縮まない（あふれたら #app がスクロール） */ min-height: 0; max-width: 100%; /* 画面幅を超えない（横はみ出し防止） */ } /* ボトムシート展開中は背後をスクロールさせない */ body.sheet-open .chat-log, body.sheet-open .main { overflow: hidden; } /* ---------- 汎用 ---------- */ .eyebrow { margin: 0 0 10px; color: var(--accent-ink); /* 設計の .mc-eyebrow と同一（11px / 700 / 字間 0.16em） */ font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } .lead { color: var(--ink-soft); font-size: 16.5px; } .muted { color: var(--ink-soft); } .primary-button { min-height: 50px; padding: 13px 22px; border-radius: 999px; background: var(--accent); color: var(--on-accent); /* 設計の .mc-btn と同じ 600（旧 800 は未読込ウェイトで 700 に丸められていた） */ font-weight: 600; letter-spacing: 0.02em; box-shadow: var(--shadow-sm); transition: transform 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease); } .primary-button:hover { background: var(--accent-press); transform: translateY(-1px); box-shadow: var(--shadow-md); } .primary-button:active { transform: translateY(0); } .primary-button.block, .secondary-button.block { width: 100%; } .secondary-button { min-height: 50px; padding: 13px 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 700; transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease); } .secondary-button:hover { transform: translateY(-1px); background: var(--surface-2); } .ghost-button { min-height: 38px; padding: 7px 14px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; font-weight: 700; transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease); } .ghost-button:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); } /* ========================================================= 入口（ホーム）：今日は、何の話から？ ／ ⋯メニュー ========================================================= */ /* 右上メニュー：白丸で囲まず、素の「⋯」だけ（設計に合わせる） */ .menu-button { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; box-shadow: none; color: var(--ink-soft); border-radius: 50%; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .menu-button:hover { color: var(--ink); background: transparent; transform: none; } .entry { width: min(560px, 100%); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding: clamp(16px, 4vw, 32px) clamp(20px, 6vw, 36px) calc(env(safe-area-inset-bottom) + 30px); } .entry-center { flex: 1; display: flex; flex-direction: column; /* 中身が縦に収まる時は中央寄せ／キーボード等で縮んで収まらない時は上揃え＝上が見切れてスクロール不能になるのを防ぐ（safe）。 */ justify-content: center; justify-content: safe center; gap: 20px; padding: 20px 0; } .entry-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: 0.85; } .entry-kicker { margin: 0; color: var(--accent-ink); font-size: 13px; font-weight: 600; line-height: 1.6; letter-spacing: 0.01em; } .entry-prompt { margin: 0; /* 設計と同じ 30px 相当（375px幅で30px）。フォントは Zen Kaku Gothic New で同一。 */ font-size: clamp(26px, 8vw, 32px); line-height: 1.5; /* 太さは作者の希望で 400（設計の 500 より軽く＝入口を静かに見せる） */ font-weight: 400; letter-spacing: 0.02em; } .entry-reassure { margin: -4px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; } /* ===== 新ホーム（はなす／つかう）＋「問いで発見する」画面（Claude Designの使用感に合わせたガワ） ===== */ .home2 { gap: 30px; padding-top: clamp(20px, 7vw, 46px); } .home2-sec { display: flex; flex-direction: column; } .home2-sec[hidden] { display: none; } .home2-eyebrow { margin: 0 0 12px; color: var(--ink-faint); font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; } .home2-title { margin: 0 0 12px; font-size: clamp(26px, 8vw, 33px); line-height: 1.45; font-weight: 400; letter-spacing: 0.02em; } .home2-sub { margin: 0 0 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.75; } .home2-cards { display: flex; flex-direction: column; gap: 12px; } .home2-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); cursor: pointer; } .home2-card:hover { border-color: var(--accent); } .home2-card.subtle { background: transparent; box-shadow: none; border-color: var(--line); } .home2-card-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); } .home2-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .home2-card-title { font-size: 16px; font-weight: 700; color: var(--ink); } .home2-card-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; } .home2-card-meta { margin-top: 4px; font-size: 12px; color: var(--ink-faint); } .home2-card-chev { flex: none; color: var(--ink-faint); font-size: 20px; } .home2 .entry-privacy { margin-top: auto; } /* 「問いで発見する」画面 */ .screen-back { align-self: flex-start; margin-bottom: 16px; padding: 4px 2px; background: transparent; border: none; color: var(--ink-soft); font-size: 14px; cursor: pointer; } .screen-back:hover { color: var(--accent-ink); } .discover { padding-top: clamp(16px, 5vw, 30px); } .discover .entry-selectors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .discover-label { margin: 4px 0 10px; color: var(--ink-faint); font-size: 12.5px; font-weight: 600; } .discover-cta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px; border-radius: var(--r-md); background: var(--accent-ink); border: none; color: #fff; cursor: pointer; box-shadow: var(--shadow-md); } .discover-cta-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; } .discover-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .discover-cta-title { font-size: 16px; font-weight: 700; } .discover-cta-desc { font-size: 12.5px; opacity: 0.85; line-height: 1.6; } .discover-cta .home2-card-chev { color: rgba(255, 255, 255, 0.7); } .discover-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--ink-faint); font-size: 12px; } .discover-divider::before, .discover-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .discover .entry-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .discover .entry-chip.more { grid-column: 1 / -1; } .discover .entry-write, .discover .entry-mode { margin-top: 14px; } /* 日記の「受け取りました。」リザルト画面 */ .jdone { padding-top: clamp(16px, 5vw, 30px); } .jdone-date { margin: 16px 0 8px; color: var(--accent-ink); font-size: 14px; font-weight: 700; } .jdone-body { margin-bottom: 6px; } .jdone-para { margin: 0 0 12px; font-size: 16px; line-height: 1.9; color: var(--ink); white-space: pre-wrap; /* 書く画面(.jw-flow-you)と同じく、本人が入れた改行をそのまま残す */ word-break: break-word; } .jdone-para:last-child { margin-bottom: 0; } .jdone-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; } .jdone-primary { padding: 15px; border-radius: var(--r-md); background: var(--accent-ink); color: var(--on-accent); font-size: 15px; font-weight: 700; cursor: pointer; border: none; box-shadow: var(--shadow-md); } .jdone-close { padding: 12px; background: transparent; border: none; color: var(--ink-soft); font-size: 14px; cursor: pointer; } .jdone-close:hover { color: var(--accent-ink); } /* そっと、見えてきたこと（還元の可視化・断定せず控えめに） */ .jdone-seen { margin-top: 20px; padding: 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); } .jdone-seen-head { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); } .jdone-seen-loading { margin: 0; color: var(--ink-faint); font-size: 13px; } .jdone-seen-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); } .jdone-seen-row:first-of-type { border-top: 0; } .jdone-seen-label { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); line-height: 1.5; } .jdone-seen-value { font-size: 13.5px; color: var(--ink); line-height: 1.65; } .jdone-seen-foot { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; } /* よかったら、もう少しだけ（任意の一問＝日記と対話の橋） */ .jdone-ask { margin-top: 14px; padding: 16px; border-radius: var(--r-md); background: var(--accent-soft); } .jdone-ask-head { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-ink); } .jdone-ask-q { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--ink); } .jdone-ask-actions { display: flex; gap: 10px; } .jdone-ask-yes { padding: 9px 20px; border-radius: 999px; background: var(--accent-ink); color: var(--on-accent); font-size: 14px; font-weight: 700; border: none; cursor: pointer; } .jdone-ask-no { padding: 9px 18px; border-radius: 999px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft); font-size: 14px; cursor: pointer; } /* 4つの話題を2×2グリッドで（全部同じ大きさ） */ .entry-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .entry-chip { padding: 11px 17px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow-soft); transition: transform 0.15s var(--ease), border-color 0.15s var(--ease); } .entry-chip:hover { border-color: var(--accent); transform: translateY(-1px); } .entry-chip:active { transform: scale(0.97); } /* 「その他の話題」シートの中身 */ .topic-sheet-note { margin: 0 6px 14px; color: var(--ink-soft); font-size: 13px; } .topic-group { margin-bottom: 18px; } .topic-group-label { margin: 0 4px 9px; color: var(--ink-faint); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .topic-grid { display: flex; flex-wrap: wrap; gap: 8px; } .topic-chip { padding: 10px 15px; border-radius: 13px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; text-align: left; transition: transform 0.15s var(--ease), border-color 0.15s var(--ease); } .topic-chip:hover { border-color: var(--accent); transform: translateY(-1px); } .topic-chip:active { transform: scale(0.97); } /* 「話を振ってほしい」：完全受け身の入口（AIから振る）。チップとは別の、やさしい誘いのボタン */ /* 下段の固定2つ（その他の話題／話を振ってほしい）を横並び1行に */ .entry-lead { margin-top: 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .entry-fixed-btn { padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; text-align: center; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); transition: transform 0.15s var(--ease), border-color 0.15s var(--ease); } .entry-fixed-btn:hover { transform: translateY(-1px); border-color: var(--accent); } .entry-fixed-btn:active { transform: scale(0.98); } /* 「その他の話題」＝点線で控えめに（"入口がもっとある"合図） */ .entry-fixed-btn.more { border-style: dashed; border-color: var(--accent); color: var(--accent-ink); background: transparent; } /* 「話を振ってほしい」＝重要機能なので accent の淡い地で少し主張（でも溶け込む） */ .entry-fixed-btn.lead { background: var(--accent-soft); color: var(--accent-ink); } .entry-write { display: flex; } /* 日記の入口（控えめなテキストリンク。.entry-write-toggle を流用＝同じ静かなトーン）。 */ .entry-journal { display: flex; margin-top: 2px; } .entry-write-toggle { align-self: flex-start; padding: 4px 2px; background: transparent; border: 0; border-bottom: 1px solid transparent; color: var(--ink-faint); font-size: 13px; transition: color 0.15s var(--ease), border-color 0.15s var(--ease); } .entry-write-toggle:hover { color: var(--ink-soft); border-bottom-color: var(--line-strong); } /* 2-3 「今日は軽めに」：任意の対話モード。入口の静けさを壊さない極小・控えめ。既定オフ＝ほぼ気配だけ。 */ .entry-mode { display: grid; grid-template-columns: 1fr auto 1fr; /* 中央列にセグメント本体＝画面中央に。ラベルは左列に右寄せで添える（やや右寄り見えの解消） */ align-items: center; margin: 14px 0 18px; /* 上下に余白＝「話を振ってもらう」と密着させない（作者FB） */ } /* 対話ペースの3段セグメント（さっと/ふつう/じっくり）＝入口で先に選び、出口の期待値を立てる */ .pace-label { grid-column: 1; justify-self: end; padding-right: 8px; font-size: 12px; color: var(--ink-faint); } .pace-seg { grid-column: 2; display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--accent-soft); } .pace-opt { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; padding: 5px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .pace-opt .pace-t { font-size: 12.5px; font-weight: 600; } .pace-opt .pace-n { font-size: 10px; color: var(--ink-faint); } .pace-opt.is-on { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-soft); } .pace-opt.is-on .pace-n { color: var(--accent-ink); opacity: 0.75; } .entry-mode-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: var(--ink-faint); font-size: 12.5px; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .entry-mode-toggle:hover { color: var(--ink-soft); } .entry-mode-toggle.on { color: var(--accent); background: var(--accent-soft); } /* ホームの「いまの私（役割＝分人）」セレクタ。チャットの「いま：◯◯」と同じ作法の控えめピル。 */ /* 「いまの私」と「問いの立て方」を同じ行に横並び（収まらない時だけ折り返す） */ .entry-selectors { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 6px 0 2px; } .entry-role { display: flex; justify-content: center; } .entry-role:empty { display: none; /* 片方が非表示の時、横並びの余分な隙間を作らない */ } .entry-role-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink-soft); font-size: 12.5px; transition: border-color 0.15s var(--ease), transform 0.15s var(--ease); } .entry-role-btn:hover { border-color: var(--line-strong); transform: translateY(-1px); } .entry-role-btn.ghost { background: transparent; border-style: dashed; box-shadow: none; color: var(--ink-faint); } .entry-role-now { color: var(--ink-faint); font-size: 11px; font-weight: 700; } .entry-role-btn strong { color: var(--accent-ink); font-weight: 800; } .entry-role-caret { color: var(--ink-faint); font-size: 11px; } .entry-field { display: flex; align-items: center; gap: 10px; width: 100%; border-bottom: 1.5px solid var(--line-strong); padding-bottom: 10px; } .entry-input { flex: 1; border: 0; background: transparent; font-size: 16px; color: var(--ink); } .entry-input:focus { outline: none; } .entry-go { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: var(--shadow-soft); transition: transform 0.16s var(--ease); } .entry-go:active { transform: scale(0.92); } .entry-foot { margin: 0; text-align: center; font-size: 12.5px; color: var(--ink-faint); } /* 2-1 プライバシー透明性："使う前"にそっと安心を渡す。entry-foot より小さく・控えめに。 */ .entry-privacy { margin: 10px auto 0; max-width: 30em; padding: 0 14px; text-align: center; font-size: 11px; line-height: 1.55; color: var(--ink-faint); opacity: 0.8; } /* ===== 初回言語選択（ログイン・ガイドより前に1度だけ表示） ===== */ body.language-choice-screen { overflow: hidden; } .language-choice-gate { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; box-sizing: border-box; min-height: var(--app-h, 100svh); padding: calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px); overflow-y: auto; background: var(--bg); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .language-choice-gate[hidden] { display: none; } .language-choice-card { width: min(460px, 100%); box-sizing: border-box; padding: clamp(28px, 7vw, 42px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-lg); text-align: center; } .language-choice-brand { margin: 0 0 28px; color: var(--ink); font-family: var(--font-mincho); font-size: 17px; letter-spacing: 0.08em; } .language-choice-eyebrow { margin: 0 0 10px; color: var(--ink-faint); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; } .language-choice-title { display: flex; flex-direction: column; gap: 5px; margin: 0; color: var(--ink); font-size: clamp(22px, 6vw, 28px); font-weight: 400; line-height: 1.45; } .language-choice-title [lang="ja"] { color: var(--ink-soft); font-size: 0.72em; } .language-choice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; } .language-choice-option { position: relative; min-height: 118px; padding: 24px 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--surface); color: var(--ink); cursor: pointer; transition: transform 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease); } .language-choice-option:hover, .language-choice-option:focus-visible, .language-choice-option.recommended { border-color: var(--accent); background: var(--accent-soft); } .language-choice-option:focus-visible { outline: 2px solid var(--accent); outline-color: color-mix(in srgb, var(--accent) 42%, transparent); outline-offset: 3px; } .language-choice-option:active { transform: scale(0.98); } .language-choice-option:disabled { cursor: wait; opacity: 0.68; } .language-choice-option strong, .language-choice-option small { display: block; } .language-choice-option strong { font-size: 20px; font-weight: 600; } .language-choice-option small { margin-top: 7px; color: var(--ink-soft); font-size: 12px; } .language-choice-badge { position: absolute; top: 9px; left: 50%; display: none; width: max-content; max-width: calc(100% - 16px); transform: translateX(-50%); color: var(--accent-ink); font-size: 9px; font-weight: 700; letter-spacing: 0.02em; } .language-choice-option.recommended .language-choice-badge { display: block; } .language-choice-note { margin: 22px 0 0; color: var(--ink-faint); font-size: 11.5px; line-height: 1.7; } @media (max-width: 350px) { .language-choice-options { grid-template-columns: 1fr; } .language-choice-option { min-height: 92px; } } /* ===== ログイン画面（メール＋Google・Supabase設定時のみ表示） ===== */ .auth-center { gap: 16px; max-width: 420px; margin: 0 auto; } .auth-form { display: flex; flex-direction: column; gap: 10px; } .auth-input { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 16px; transition: border-color 0.15s var(--ease); } .auth-input:focus { outline: none; border-color: var(--accent); } .auth-or { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: 12.5px; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; box-shadow: var(--shadow-soft); transition: transform 0.15s var(--ease), border-color 0.15s var(--ease); } .auth-google:hover { border-color: var(--accent); transform: translateY(-1px); } .auth-google:active { transform: translateY(0); } .auth-message { margin: 0; min-height: 18px; font-size: 13px; line-height: 1.6; color: var(--accent-ink); } .auth-message.error { color: var(--rose); } /* ログイン画面の背景：水面の干渉波（ジャーナリング・問いと同じモチーフ＝入口のテンションを上げる）。本体は上に重ねる。 */ .entry.auth { position: relative; } .auth-ripple { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .auth-ripple circle { fill: none; stroke: var(--accent); stroke-width: 1.3; vector-effect: non-scaling-stroke; } .entry.auth > *:not(.auth-ripple) { position: relative; z-index: 1; } /* 送信中：控えめなドット */ .auth-loading { display: inline-flex; align-items: center; gap: 8px; } /* 送信済み：背景に溶けないパネル＋待機中の波紋パルス（この案内が必ず読まれるように・トンマナは水の波紋で維持） */ .auth-message.sent { display: flex; align-items: flex-start; gap: 13px; margin-top: 4px; padding: 14px 16px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); animation: authSentIn .45s ease both; } @keyframes authSentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .auth-sent-pulse { flex: none; position: relative; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--accent); } .auth-sent-pulse::before, .auth-sent-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); animation: authPulse 2.4s ease-out infinite; } .auth-sent-pulse::after { animation-delay: 1.2s; } @keyframes authPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.4); opacity: 0; } } .auth-sent-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .auth-sent-head { font-size: 13.5px; font-weight: 700; color: var(--accent-ink); letter-spacing: .01em; } .auth-sent-text { font-size: 13px; line-height: 1.7; color: var(--ink); } .auth-sent-wait { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 11.5px; color: var(--accent-ink); opacity: .82; } @media (prefers-reduced-motion: reduce) { .auth-sent-pulse::before, .auth-sent-pulse::after { animation: none; } .auth-message.sent { animation: none; } } /* ログイン画面では右上の ⋯ メニューを出さない（未ログインでは保存箱・設定は不要） */ body.auth-screen .top-actions { display: none; } /* はじめてのガイド表示中は、右上の ⋯ メニューを出さない＝ガイドが終わるまで離脱導線を作らない（全員に読んでもらう） */ body.guide-screen .top-actions { display: none; } /* ★初回チュートリアル中だけ＝上の「My Context」ロゴでホームへ抜けられないようにする（作者FB 2026-06-13）。 route() の guard が hash 遷移自体も #guide へ戻すが、見た目でも押せないことを示す（カーソル・タップ無効）。 メニュー再読（guide-screen だが guide-forced は付かない）はロゴで自由に戻れる。 */ body.guide-forced .brand { pointer-events: none; cursor: default; } /* これまでの話（名前つきスレッド）の一覧 */ .thread-list { display: flex; flex-direction: column; gap: 10px; } .thread-card { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-soft); overflow: hidden; transition: border-color 0.15s var(--ease); } .thread-card:hover { border-color: var(--line-strong); } .thread-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; text-align: left; background: transparent; border: 0; transition: background 0.14s var(--ease); } .thread-card-main:hover { background: var(--accent-soft); } .thread-card-name { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread-card-snippet { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread-card-meta { font-size: 11px; color: var(--ink-faint); } .thread-card-actions { display: flex; flex: none; } .thread-card-btn { width: 42px; display: grid; place-items: center; background: transparent; border: 0; border-left: 1px solid var(--line); color: var(--ink-faint); font-size: 14px; transition: background 0.14s var(--ease), color 0.14s var(--ease); } .thread-card-btn:hover { background: var(--surface-2); color: var(--ink-soft); } .thread-card-btn.del:hover { color: var(--rose); } /* ホームの「相談を磨く」導線 */ .home-consult-btn { margin-top: 12px; width: 100%; min-height: 46px; padding: 11px 18px; border-radius: 999px; background: var(--accent-soft); border: 1px solid transparent; color: var(--accent-ink); font-size: 14.5px; font-weight: 700; transition: transform 0.15s var(--ease), border-color 0.15s var(--ease); } .home-consult-btn:hover { transform: translateY(-1px); border-color: var(--accent); } /* 「どの私？」役割(分人)の選択リスト。行は .thread-card と同じ作法（✎✕は .thread-card-btn を流用）。 */ .role-list { display: flex; flex-direction: column; gap: 8px; } .role-row { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-soft); overflow: hidden; transition: border-color 0.15s var(--ease); } .role-row.on { border-color: var(--accent); } .role-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; text-align: left; background: transparent; border: 0; transition: background 0.14s var(--ease); } .role-row-main:hover { background: var(--accent-soft); } .role-row-name { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .role-row-meta { font-size: 11.5px; color: var(--ink-faint); } .role-row-actions { display: flex; flex: none; } .role-add { margin-top: 12px; width: 100%; padding: 11px 16px; border-radius: 999px; background: var(--accent-soft); border: 1px solid transparent; color: var(--accent-ink); font-size: 14px; font-weight: 700; transition: transform 0.15s var(--ease), border-color 0.15s var(--ease); } .role-add:hover { transform: translateY(-1px); border-color: var(--accent); } /* 「これまでの話」を私(役割)ごとにまとめる見出し */ .thread-group + .thread-group { margin-top: 18px; } .thread-group-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); } .thread-group-count { font-size: 11px; font-weight: 600; color: var(--ink-faint); } /* 相談デスク：人格（スレッド）ピッカー「どのあなたで考える？」 */ .consult-personas { margin-bottom: 16px; } .consult-personas-label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); } .persona-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .persona-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-size: 13px; font-weight: 600; transition: background 0.14s var(--ease), border-color 0.14s var(--ease), color 0.14s var(--ease); } .persona-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); } .persona-chip.on::before { content: "✓ "; } .persona-chip.fixed { background: var(--accent); color: var(--on-accent); border-color: transparent; cursor: default; } /* ⋯メニュー（ボトムシート） */ #menuBackdrop { z-index: 55; } .menu-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; width: min(var(--shell-max), 100%); margin: 0 auto; max-height: 80svh; max-height: 80dvh; background: var(--surface); border-top: 1px solid var(--line); border-radius: var(--r-xl) var(--r-xl) 0 0; /* 影は .open の時だけ付ける。閉時は translateY(101%) で画面直下に待機しているため、 常時影だと全シート分のぼかしが画面下端へはみ出して重なり、底に固定の暗い帯として見える */ box-shadow: none; transform: translateY(101%); /* opacity も遷移させる＝設定サブシート表示中に1枚目が「奥に沈む」動き（.behind）用 */ transition: transform 0.34s var(--ease), opacity 0.3s ease, box-shadow 0.34s var(--ease); display: flex; flex-direction: column; overflow: hidden; overscroll-behavior-x: none; touch-action: pan-y; } .menu-sheet.open { transform: translateY(0); box-shadow: var(--shadow-lg); } /* 閉じている／閉じアニメ中のシートは、タップを素通しにする。 閉じ遷移（0.34s）の間もシートは z-index 60/30 のまま画面下部を覆っており、 閉じた直後のホーム操作を行ボタンが吸ってしまう＝「まれにタップの判定がずれる」の原因（作者FB z350）。 開く時は .open が即付与されるので、開いたシートの操作には影響しない。 */ .menu-sheet:not(.open), .context-panel:not(.open) { pointer-events: none; } .menu-sheet-inner { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* プルダウン展開時に内側スクロールが背面へ抜けないように */ overscroll-behavior-x: none; touch-action: pan-y; padding: 2px clamp(16px, 4vw, 22px) calc(env(safe-area-inset-bottom) + 22px); } .menu-sheet .eyebrow { margin: 2px 6px 8px; } /* メニューのグループ小見出し（あなたの記録／コンテキスト／設定・サポート）。薄く小さく、上に余白でグループを分ける。 */ .menu-group-label { margin: 18px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-faint); } .menu-group-label[hidden] { display: none; } .menu-row { width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 6px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); transition: background 0.14s var(--ease); } .menu-row:last-of-type { border-bottom: 0; } .menu-row:hover { background: var(--surface-2); } .menu-row:active { background: var(--accent-soft); } /* シートで「いま選ばれている」行を強調（問いの立て方の現在値など） */ .menu-row.on { background: var(--accent-soft); } .menu-row.on .menu-row-label::before { content: "✓ "; color: var(--accent-ink); font-weight: 700; } .menu-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .menu-row-label { font-size: 15.5px; font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; } .menu-row-count { margin-left: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); } .menu-row-desc { font-size: 12.5px; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; } .menu-row-chev { flex: none; color: var(--ink-faint); font-size: 22px; line-height: 1; } .menu-foot { margin: 14px 6px 2px; font-size: 11.5px; line-height: 1.6; } /* テスト中のバージョン表示（控えめ・等幅で読みやすく） */ .menu-version { margin: 8px 6px 0; font-size: 10.5px; color: var(--ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; } /* ===== メニュー再構成（z316）：1行表記・エフェクトプルダウン・設定サブシート・プレミアムカード ===== */ /* 1行表記の行（説明文なし）。従来の2行行（.menu-row-main入り）より少し詰める。 */ .menu-row-slim { padding: 14px 6px; } /* 行の右端（件数・現在値・›）をひとまとめに */ .menu-row-meta { flex: none; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-faint); } .menu-row-meta .menu-row-count { margin-left: 0; } /* 未処理の振り分けがある時だけ最上部に出るアクセント帯 */ .menu-sort-band { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; padding: 13px 14px; border: 0; border-radius: 12px; background: var(--accent-soft); text-align: left; } .menu-sort-band[hidden] { display: none; } .menu-sort-band-label { font-size: 13.5px; font-weight: 600; color: var(--accent-ink); } .menu-sort-band .menu-row-chev { color: var(--accent-ink); } /* エフェクト行の直下に展開するプルダウン（雨/滴/にじみ/墨流し） */ .menu-fx-chev { font-size: 13px; line-height: 1; color: var(--ink-faint); } .menu-fx-wrap { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.55s var(--ease), opacity 0.45s ease; } .menu-fx-wrap.open { max-height: 220px; opacity: 1; } .menu-fx-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px 11px 26px; border: 0; background: transparent; border-radius: 12px; font-size: 13.5px; color: var(--ink-soft); } .menu-fx-opt.on { color: var(--accent); font-weight: 600; } .menu-fx-mark { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line); box-sizing: border-box; } .menu-fx-opt.on .menu-fx-mark { border: 0; background: var(--accent); box-shadow: 0 0 8px rgba(90, 117, 133, 0.7); } /* プレミアム購読の独立カード（枠線・タイトル＋一行説明） */ .menu-card { width: 100%; display: flex; flex-direction: column; gap: 4px; margin: 18px 0 4px; padding: 15px 16px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: background 0.14s var(--ease); } .menu-card:active { background: var(--accent-soft); } .menu-card[hidden] { display: none; } .menu-card-title { font-size: 14.5px; font-weight: 700; color: var(--ink); } .menu-card-desc { font-size: 12.5px; color: var(--ink-soft); } /* 夜トーンのシートは背景から浮きすぎない程度に、不透明度を少し上げる。 */ :root[data-theme="yoru"] .menu-sheet, :root[data-theme="night"] .menu-sheet, :root[data-theme="dark"] .menu-sheet, :root[data-theme="yoru"] .context-panel, :root[data-theme="night"] .context-panel, :root[data-theme="dark"] .context-panel { background: rgba(29, 39, 47, 0.96); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); } /* フッター1行：「プライバシーについて ・ ver」（狭い端末では ver だけ折り返す） */ .menu-foot-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 6px; margin: 14px 0 0; font-size: 11.5px; color: var(--ink-faint); text-align: center; } .menu-foot-line .menu-version { margin: 0; } .menu-foot-link { flex: none; white-space: nowrap; border: 0; background: transparent; padding: 4px 2px; font-size: 11.5px; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; } /* 設定サブシート（2枚目）が開いている間、1枚目のメニューは奥に沈む。 ★沈んでいる間はタップも受け取らない（pointer-events:none）＝見た目どおり無効。 これが無いと、設定シートの上の空き領域で沈んだメニューの行（取り込む等）が押せてしまう（テスターFB 2026-07-20）。 素通りしたタップは #menuBackdrop に届く＝「外を押したら全部閉じる」が正しく機能する。 */ .menu-sheet.open.behind { transform: translateY(26px) scale(0.975); opacity: 0.45; pointer-events: none; } /* サブシートの「もどる」 */ .menu-sub-back { border: 0; background: transparent; padding: 8px 6px 2px; text-align: left; font-size: 13.5px; color: var(--ink-soft); } /* 設定サブシート内の「AIへの送信」トグル置き場（プライバシー内と同じ見た目・行間に馴染ませる） */ .settings-consent { padding: 12px 6px; border-bottom: 1px solid var(--line); } /* 言語切替はOS標準のselectを使い、選択肢とキーボード操作をそのまま利用できるようにする。 */ .settings-language-row { cursor: pointer; } .settings-language-select { max-width: 10em; border: 0; background: transparent; color: var(--ink-soft); text-align: right; text-align-last: right; cursor: pointer; } .settings-language-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* 取り込み画面の「詳細ノート（原文）」入口のプロバッジ（メニューから移設・z316） */ .imp-pro-badge { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap; } /* エフェクトのプルダウン展開時でもメニューがはみ出さないよう、メニューシートだけ高さの上限を広げる */ #menuSheet { max-height: calc(100dvh - 92px); } /* ========================================================= ホーム ========================================================= */ .home { width: min(720px, 100%); margin: 0 auto; padding: clamp(20px, 5vw, 44px) clamp(16px, 4vw, 28px) 60px; } .fresh-badge { padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: 11.5px; font-weight: 700; white-space: nowrap; } .fresh-badge.stale { color: var(--rose); border-color: var(--rose); } /* 「あなたのコンテキスト」を即表示したまま裏で最新化している時の、控えめな更新中インジケータ */ .unified-updating { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; white-space: nowrap; } .unified-updating .thinking-dots { gap: 3px; } .unified-updating .thinking-dots span { width: 5px; height: 5px; background: var(--accent-ink); } .link-button { margin-top: 10px; padding: 4px 2px; background: none; border: 0; color: var(--accent-ink); font-size: 13px; font-weight: 700; text-decoration: underline; } .imported-list { display: flex; flex-wrap: wrap; gap: 8px; } .imported-list:not(:empty) { margin-top: 12px; } .imported-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); } .imported-chip button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); color: var(--ink-soft); font-size: 14px; line-height: 1; } .imported-chip button:hover { color: var(--rose); } /* メニュー内の「読み込み済み」表示（読み込めた確認になる・常時残る） */ .menu-imported { margin: 2px 0 6px; padding: 12px 6px 4px; border-top: 1px solid var(--line); } .menu-imported-head { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); } /* メニューの「あなたのこと（取り込み済み）」＝ファイル名でなく中身を見せる */ .profile-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .profile-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; } .profile-row-k { font-size: 11px; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.02em; } .profile-row-v { font-size: 13px; line-height: 1.6; color: var(--ink); } .profile-clear { margin-top: 12px; padding: 2px 0; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--ink-faint); font-size: 12px; cursor: pointer; transition: color 0.15s var(--ease), border-color 0.15s var(--ease); } .profile-clear:hover { color: var(--rose); border-bottom-color: var(--rose); } /* ========================================================= チャット画面 ========================================================= */ .chat-screen { position: relative; height: 100%; width: min(var(--shell-max), 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); /* 行を全高に＝.chat-main が高さ一杯になる（% に依存しない） */ padding: 0 clamp(0px, 2vw, 20px); } .chat-main { display: flex; flex-direction: column; min-height: 0; height: 100%; } /* モバイル（2カラムが無い幅）はチャット画面を flex 縦並びにして .chat-main を確実に高さ充填。 grid の行stretch依存をやめる＝iPhone(WebKit)でも下端の入力欄が確実に最下部に来る。デスクトップは下の @media で2カラムgrid。 */ @media (max-width: 899px) { .chat-screen { display: flex; flex-direction: column; } .chat-main { flex: 1 1 auto; } } /* チャット上部の「いま：◯◯」場面バー */ .chat-spacebar { flex: none; padding: 6px clamp(12px, 3vw, 18px) 2px; } .chat-spacebar:empty { display: none; } /* どの私・どの問いの立て方か（作成時固定・編集不可）。それとなく見えて目立たない＝薄く小さく。タップで意味を開く。 */ /* 上部の左側。spacebar 撤去によりこれが最上段＝上余白を持たせる。右の「見えてきたこと」チップ(absolute)と重ならないよう幅を制限。 */ .chat-meta { flex: none; padding: 3px clamp(12px, 3vw, 18px) 2px; } /* 上を詰めて2段メタの中央線を右の「見えてきたこと」チップに合わせる（作者FB） */ .chat-meta[hidden] { display: none; } .chat-meta-btn { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 60%; background: none; border: 0; padding: 2px 2px; cursor: pointer; line-height: 1.35; color: var(--ink-faint); letter-spacing: .02em; text-align: left; } .chat-meta-lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .chat-meta-role { font-weight: 600; color: var(--ink-soft); font-size: 12.5px; } /* 1段目＝この私 */ .chat-meta-mode { align-self: flex-start; font-size: 11px; color: var(--ink-faint); border-bottom: 1px dotted var(--line-strong); padding-bottom: 1px; } /* 2段目＝立て方（タップの手がかり） */ .chat-meta-info { margin-top: 1px; } .chat-meta-sep { opacity: .45; } .chat-meta-info { flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 9px; font-style: italic; color: var(--ink-faint); } .chat-meta-note { margin: 6px 2px 2px; padding: 11px 13px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.75; color: var(--ink-soft); } .chat-meta-note[hidden] { display: none; } .chat-meta-note p { margin: 0 0 7px; } .chat-meta-note p:last-child { margin-bottom: 0; } .chat-meta-note strong { color: var(--ink); font-weight: 600; } .chat-meta-fix { color: var(--ink-faint); font-size: 11.5px; } .spacebar-details { position: relative; display: inline-block; } .spacebar-summary { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); cursor: pointer; list-style: none; font-size: 13.5px; } .spacebar-summary::-webkit-details-marker { display: none; } .spacebar-now { color: var(--ink-faint); font-size: 11.5px; font-weight: 700; } .spacebar-summary strong { color: var(--accent-ink); font-weight: 800; } .spacebar-caret { color: var(--ink-faint); font-size: 11px; } /* 切替先が無い時の静的ラベル（プルダウンでなく「いま：◯◯」だけ）。見た目は同じピル・操作不可。 */ .spacebar-static { cursor: default; } .spacebar-static strong { color: var(--accent-ink); font-weight: 800; } .spacebar-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; min-width: 200px; display: grid; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); } .space-switch-item { text-align: left; padding: 10px 12px; border-radius: var(--r-sm); background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; } .space-switch-item:hover { background: var(--surface-2); } .space-switch-item.add { color: var(--accent-ink); border-top: 1px solid var(--line); margin-top: 2px; border-radius: 0 0 var(--r-sm) var(--r-sm); } /* 日記の上部バー：左「‹ とじる」＋右「いまの私」セレクタ（この日記のコンテキストをどの私に貯めるか）。 */ .journal-rolebar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px clamp(12px, 3vw, 18px) 4px; } .journal-rolebar[hidden] { display: none; } .journal-close { background: transparent; border: none; color: var(--ink-soft); font-size: 14px; cursor: pointer; padding: 4px 2px; } .journal-close:hover { color: var(--accent-ink); } .journal-role-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); cursor: pointer; font-size: 13.5px; } .journal-role-btn strong { color: var(--accent-ink); font-weight: 800; } /* 日記ふりかえりの「どの私」フィルター（横スクロールのチップ列・選択は控えめ強調）。 */ .journal-filter { display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 14px; scrollbar-width: none; } .journal-filter::-webkit-scrollbar { display: none; } .journal-filter-chip { flex: none; padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .journal-filter-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); } /* 日記ふりかえりのキーワード検索窓。 */ .journal-search { padding: 2px 0 10px; } .journal-search-input { width: 100%; padding: 10px 15px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-size: 14px; -webkit-appearance: none; appearance: none; } .journal-search-input::placeholder { color: var(--ink-faint); } /* 検索一致のハイライト（本文抜粋の中）。控えめな accent-soft。 */ mark.search-hit { background: var(--accent-soft); color: var(--accent-ink); border-radius: 3px; padding: 0 1px; } .chat-log { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 20px; padding: 22px clamp(16px, 4vw, 24px) 8px; scroll-behavior: smooth; overscroll-behavior: contain; } .bubble { max-width: 100%; line-height: 1.62; white-space: pre-line; animation: bubble-in 0.26s var(--ease); } @keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } .bubble.ai { align-self: flex-start; max-width: 32ch; padding: 2px 0 0; background: transparent; border: 0; box-shadow: none; color: var(--ink); } /* 禅：AIの問いの前に、静かなアクセントの一線を引く */ .bubble.ai::before { content: ""; display: block; width: 18px; height: 2px; margin-bottom: 14px; border-radius: 2px; background: var(--accent); opacity: 0.65; } .bubble.user { align-self: flex-end; max-width: 28ch; padding: 2px 14px 2px 0; text-align: right; background: transparent; color: var(--ink); border: 0; border-right: 2px solid var(--accent); border-radius: 0; box-shadow: none; font-size: 16px; line-height: 1.7; } /* 日記の各記述（ふりかえりで編集できる）。user bubble に合わせて右寄せ。 */ .journal-entry { display: flex; flex-direction: column; align-items: flex-end; } .journal-entry-edit { margin: 2px 14px 0 0; /* 右端を user bubble の padding-right(14px) に合わせる */ background: transparent; border: none; color: var(--ink-faint); font-size: 11.5px; cursor: pointer; padding: 2px 2px; } .journal-entry-edit:hover { color: var(--accent-ink); } .journal-entry.editing { align-items: stretch; /* 編集中はテキストエリアを全幅に */ } .journal-edit { width: 100%; } .inline-actions .journal-edit-del { margin-right: auto; /* 削除は左へ（取消／保存は右） */ } .bubble-reply { margin: 0 0 8px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; } .bubble-question { margin: 0; font-size: 19px; line-height: 1.72; font-weight: 500; letter-spacing: 0.01em; } .bubble.thinking { display: inline-flex; gap: 9px; align-items: center; padding: 4px 0; } /* 思考中バブルにはアクセント線を出さない */ .bubble.ai.thinking::before { display: none; } .thinking-dots { display: inline-flex; gap: 5px; align-items: center; } .thinking-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: blink 1.3s infinite both; } .thinking-dots span:nth-child(2) { animation-delay: 0.18s; } .thinking-dots span:nth-child(3) { animation-delay: 0.36s; } .thinking-text { color: var(--ink-soft); font-size: 13.5px; } @keyframes blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } } /* 入力ゾーン（下部固定） */ .composer-zone { flex: none; /* 下端の余白：ホームインジケーター分(safe-area)＋少し。safe-area が 0 を返す環境（ホームボタン機・Safari）でも 最低8pxは確保しつつ、空きすぎないよう詰める（旧 max(...,20)+14=34px → max(...,8)+6=14px）。 */ padding: 8px clamp(12px, 3vw, 18px) calc(max(env(safe-area-inset-bottom), 8px) + 6px); background: transparent; } /* 入力中に「いま答えている問い」を入力欄の真上にピン留め（キーボードで上部が隠れても読める）。 */ .composer-question { margin-bottom: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--accent-soft); border-left: 2px solid var(--accent); display: flex; flex-direction: column; gap: 2px; } .composer-question[hidden] { display: none; } .composer-question-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-ink); } .composer-question-text { font-size: 13.5px; line-height: 1.55; color: var(--ink); /* 長い問いは3行で省略（入力の邪魔をしない）。多くの問いは1〜2文で収まる。 */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .quick-replies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* 4択を2列×2行に収める（縦に積んで問いが押し出されるのを防ぐ） */ align-items: stretch; width: 100%; gap: 7px; margin-bottom: 10px; } .quick-replies:empty { margin: 0; } /* 2列に収めるぶん、選択肢は少し小さく・センター寄せ・2行まで折返し可 */ .quick-replies .chip { width: 100%; min-width: 0; min-height: 42px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; padding: 7px 8px; text-align: center; line-height: 1.28; box-sizing: border-box; white-space: normal; overflow: hidden; } /* チップ内の文字だけを最大2行に閉じ込める。長い候補はJSで tight/tiny を付けて縮小する。 */ .quick-replies .chip-text { min-width: 0; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .quick-replies .chip.tight .chip-text { font-size: 11.5px; } .quick-replies .chip.tiny .chip-text { font-size: 10.5px; line-height: 1.22; } /* 言語化ヘルプ（「うまく言えない」→候補）もiPhone SEでは最大2段に収める。 */ .quick-replies.suggest { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quick-replies.suggest .chip { text-align: center; justify-self: stretch; } /* 入力欄に写した候補だけ、枠色で静かに示す */ .quick-replies.suggest .chip.picked { border-color: var(--accent); background: var(--accent-soft); } .chip { padding: 9px 15px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--accent-ink); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-soft); transition: transform 0.14s var(--ease), background 0.14s var(--ease), border-color 0.14s var(--ease); animation: bubble-in 0.2s var(--ease); } .chip:hover { transform: translateY(-1px); background: var(--accent-soft); border-color: var(--accent); } .chip:active { transform: translateY(0); } .composer { display: flex; align-items: flex-end; gap: 9px; padding: 6px 6px 6px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 24px; box-shadow: var(--shadow-soft); transition: border-color 0.15s var(--ease); } .composer:focus-within { border-color: var(--accent); } .composer-input { flex: 1; min-height: 36px; max-height: 168px; padding: 8px 6px 8px 8px; border: 0; background: transparent; resize: none; line-height: 1.5; font-size: 16px; /* iOSのズーム防止 */ } .composer-input:focus { outline: none; } .composer-input::placeholder { color: var(--ink-faint); } .send-button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); transition: transform 0.14s var(--ease), background 0.14s var(--ease); } .send-button:hover { background: var(--accent-press); transform: translateY(-1px); } .send-button:active { transform: scale(0.94); } /* 日記の送信ボタンは丸アイコンでなく「残す」テキストの濃ピル（新デザイン）。 */ .send-button--text { width: auto; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--accent-ink); color: var(--on-accent); font-size: 14px; font-weight: 700; } .send-button--text:hover { background: var(--accent-press); } /* 音声入力ボタン：送信（塗りaccent）と差をつけた控えめな丸。非対応ブラウザではJSで隠す */ .mic-button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line-strong); transition: transform 0.14s var(--ease), background 0.14s var(--ease), color 0.14s var(--ease), border-color 0.14s var(--ease); } .mic-button[hidden] { display: none; } /* hidden を display:grid より優先（非対応時は出さない） */ .mic-button:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); } .mic-button:active { transform: scale(0.94); } /* 録音中：accentで満たし、やさしく明滅（警告色の赤は使わない＝禅トーン） */ .mic-button.recording { background: var(--accent); color: var(--on-accent); border-color: var(--accent); animation: micPulse 1.25s var(--ease) infinite; } @keyframes micPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .composer-helpers { display: flex; gap: 22px; margin-top: 11px; justify-content: center; } /* 禅：対話の逃げ道（うまく言えない/とばす）は、控えめなテキストリンクに */ .composer-helpers .ghost-button { min-height: auto; padding: 4px 2px; border: 0; border-radius: 0; background: transparent; color: var(--ink-faint); font-size: 12.5px; font-weight: 500; border-bottom: 1px solid transparent; } .composer-helpers .ghost-button:hover { background: transparent; border-color: transparent; color: var(--ink-soft); border-bottom-color: var(--line-strong); } /* 禅：チャット内に常設する「終わる出口」。控えめだが、いつでも見える位置に。 */ .finish-row { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 4px; /* 「うまく言えない/質問を変える」との間を詰める（旧12px・作者FB） */ } .finish-row[hidden] { display: none; } .finish-link { min-height: auto; padding: 5px 4px; border: 0; background: transparent; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); border-bottom: 1px solid transparent; transition: color 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease), transform 0.14s var(--ease); } .finish-link[hidden] { display: none; } .finish-link:hover { color: var(--ink-soft); border-bottom-color: var(--line-strong); } /* 2-5 受け身で終われる安心：「保存して終わる」を初回から少し見やすく（控えめな常設アンダーライン＋ink-soft）。 */ .finish-link.pause { color: var(--ink-soft); border-bottom-color: var(--line); } /* 「ここまでをまとめる」＝十分話せた時に加わる主アクション。淡いピルで少しだけ存在感を持たせる。 */ .finish-link.summarize { padding: 7px 17px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; border-bottom: 0; } .finish-link.summarize:hover { background: var(--accent); color: var(--on-accent); border-bottom: 0; transform: translateY(-1px); } /* 日記の「深掘りの問いをもらう」：淡いピル（◎アイコン付き）。 */ .finish-link.deepen-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; border-bottom: 0; } .finish-link.deepen-pill:hover { background: var(--accent); color: var(--on-accent); border-bottom: 0; transform: translateY(-1px); } .deepen-pill-icon { font-size: 13px; line-height: 1; } /* 日記の日付見出し（チャットログ冒頭）。 */ .journal-date { margin: 0 0 4px; align-self: flex-start; color: var(--accent-ink); font-size: 15px; font-weight: 700; } /* ---------- 初回TTV：最初の数分で「もう渡せる」を見せる控えめなカード ---------- */ .first-value { position: relative; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-soft); animation: fvIn 0.3s var(--ease); } .first-value[hidden] { display: none; } @keyframes fvIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* 右上の×＝「閉じる（=ただ非表示）」。続けたい時は上の対話を打てばよい。 */ .fv-close { position: absolute; top: 7px; right: 9px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-faint); font-size: 19px; line-height: 1; transition: color 0.14s var(--ease), background 0.14s var(--ease); } .fv-close:hover { color: var(--ink-soft); background: var(--surface-2); } .fv-title { margin: 0 28px 8px 0; font-size: 14px; font-weight: 600; color: var(--ink); } .fv-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; } .fv-list li { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; } .fv-k { flex: none; min-width: 6em; color: var(--ink-faint); } .fv-v { min-width: 0; color: var(--ink-soft); } .fv-note { margin: 0 0 12px; font-size: 12px; line-height: 1.55; color: var(--ink-faint); } /* 既定は1つの主ボタン。押すと下の選択（fv-choices）に切り替わる＝選択は“貼ると決めてから”出す。 */ .fv-primary { width: 100%; min-height: 44px; border-radius: 12px; font-size: 14px; } .fv-choices { animation: fvIn 0.2s var(--ease); } .fv-choices[hidden] { display: none; } .fv-choices-label { margin: 0 0 8px; font-size: 12px; color: var(--ink-faint); text-align: center; } .fv-actions { display: flex; gap: 8px; } .fv-ai { min-height: 40px; border-radius: 12px; font-size: 13px; } /* 受け取りカード（対話を締めた後の「使う」導線）。容器は .first-value、中身は .fv-* を流用。 下の控えめな二次行（コピー／しっかりまとめる）だけ専用。 */ .cv-more { display: flex; justify-content: center; gap: 18px; margin-top: 12px; } .cv-link { background: transparent; border: 0; border-bottom: 1px solid transparent; color: var(--ink-faint); font-size: 12.5px; padding: 4px 2px; transition: color 0.14s var(--ease), border-color 0.14s var(--ease); } .cv-link:hover { color: var(--ink-soft); border-bottom-color: var(--line-strong); } /* 矛盾/更新の検知バー：会話を邪魔せず、チャット下部に小さく・控えめに。 */ .update-notice { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); animation: fvIn 0.3s var(--ease); } .update-notice[hidden] { display: none; } .update-notice-text { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); display: flex; align-items: baseline; gap: 7px; } .update-notice-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); align-self: center; } .update-notice-actions { display: flex; gap: 8px; } .update-notice-btn { flex: 1; min-height: 34px; border-radius: 9px; font-size: 12.5px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); transition: background 0.14s var(--ease), color 0.14s var(--ease), border-color 0.14s var(--ease); } .update-notice-btn.apply { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .update-notice-btn:hover { border-color: var(--ink-faint); } .update-notice-btn.apply:hover { background: var(--accent); color: var(--on-accent); } /* ---------- ホーム：あなたのコンテキストへの導線 ---------- */ /* 小さな中央寄せピルにして周囲に溶け込ませる（横長カードをやめる・地は透明・影なし） */ .entry-you:empty { display: none; } /* 上部の導線（あなたのコンテキスト／相談を磨く）を縦に積む。中央寄せ・小さめの間隔 */ .entry-you { margin: 0 auto 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .home-you { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; padding: 7px 14px; border-radius: 999px; background: transparent; border: 1px solid var(--line); box-shadow: none; text-align: left; transition: border-color 0.14s var(--ease), background 0.14s var(--ease); } .home-you:hover { border-color: var(--line-strong); background: var(--surface); } .home-you.ghost { border-style: dashed; } .home-you-main { min-width: 0; display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .home-you-label { font-weight: 600; color: var(--ink); font-size: 13px; } .home-you-desc { font-size: 11.5px; color: var(--ink-faint); } .home-you-chev { color: var(--ink-faint); font-size: 16px; align-self: center; } /* ---------- あなたのコンテキスト（統合画面） ---------- */ .unified-screen { width: min(var(--shell-max, 560px), 100%); margin: 0 auto; padding: 8px clamp(16px, 4vw, 28px) calc(env(safe-area-inset-bottom) + 32px); } .unified-head { padding: 6px 0 14px; } .unified-head .link-button { padding: 4px 0; color: var(--ink-soft); } .unified-title { font-size: 24px; line-height: 1.35; color: var(--ink); margin: 6px 0 8px; } .unified-sub { font-size: 13px; color: var(--ink-soft); line-height: 1.6; } .unified-status { color: var(--ink-soft); padding: 28px 4px 4px; text-align: center; } /* 統合中の「動いてる感」：カテゴリが順に灯る段階表示＋見通し（CSSのみ・実進捗ではなく演出）。 */ .unified-progress { padding: 6px 0 20px; } .mc-wait { display: grid; justify-items: center; gap: 13px; padding: 18px 10px 14px; text-align: center; } .mc-wait-water { position: relative; width: 118px; height: 74px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; } .mc-wait-ring { position: absolute; width: 22px; height: 22px; border: 1px solid var(--ripple-ring); border-radius: 50%; opacity: 0; animation: waitRipple 3.6s var(--ease) infinite; } .mc-wait-ring.r2 { animation-delay: 1.15s; } .mc-wait-ring.r3 { animation-delay: 2.3s; } .mc-wait-core { width: 8px; height: 8px; border-radius: 50%; background: var(--ripple-core); opacity: 0.72; box-shadow: 0 0 18px var(--accent-soft); } @keyframes waitRipple { 0% { opacity: 0.58; transform: scale(0.3); } 72% { opacity: 0.1; transform: scale(5.1); } 100% { opacity: 0; transform: scale(5.8); } } .mc-wait-copy { display: grid; gap: 5px; max-width: 36ch; } .mc-wait-title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; } .mc-wait-text { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; } .mc-wait-eta, .mc-wait-note { margin: 0; color: var(--ink-faint); font-size: 12px; line-height: 1.65; } .context-float-layer { position: fixed; inset: 0; z-index: 86; pointer-events: none; } .context-float-scrim { position: absolute; inset: 0; background: rgba(90, 117, 133, 0.055); } .context-float-layer.is-running .context-float-scrim { background: rgba(90, 117, 133, 0.07); } .context-float-layer.is-busy .context-float-scrim { background: rgba(90, 117, 133, 0.055); } .context-ripple-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .context-ripple-ring { position: absolute; left: 50%; top: 50%; width: clamp(104px, 24vmin, 172px); height: clamp(104px, 24vmin, 172px); border: 1px solid rgba(90, 117, 133, 0.24); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.12); animation: contextFullRipple 9.8s ease-out infinite; animation-delay: var(--ripple-delay, 0s); } .context-ripple-ring.r2 { --ripple-delay: 1.95s; } .context-ripple-ring.r3 { --ripple-delay: 3.9s; } .context-ripple-ring.r4 { --ripple-delay: 5.85s; } .context-ripple-ring.r5 { --ripple-delay: 7.8s; } @keyframes contextFullRipple { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); } 10% { opacity: 0.23; } 72% { opacity: 0.07; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(8.8); } } .context-float-card { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 82px); width: min(520px, calc(100vw - 32px)); max-height: min(46vh, 380px); overflow: auto; transform: translateX(-50%); border: 1px solid rgba(35, 40, 44, 0.13); border-radius: var(--r-md); background: rgba(247, 249, 250, 0.88); box-shadow: 0 12px 34px rgba(35, 40, 44, 0.12); color: var(--ink-soft); } .context-float-card-prompt { display: grid; gap: 8px; padding: 15px 17px 17px; pointer-events: auto; } .context-float-card-running, .context-float-card-busy { background: rgba(247, 249, 250, 0.68); border-color: rgba(35, 40, 44, 0.10); box-shadow: 0 10px 28px rgba(35, 40, 44, 0.09); pointer-events: none; } .context-float-card-busy { padding: 14px 16px; text-align: center; } .context-float-running-copy, .context-float-busy-copy { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 138px); width: min(430px, calc(100vw - 42px)); transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; padding: 10px 14px 11px; border: 1px solid rgba(35, 40, 44, 0.08); border-radius: var(--r-sm); background: rgba(247, 249, 250, 0.66); box-shadow: 0 10px 26px rgba(35, 40, 44, 0.08); text-align: center; pointer-events: none; color: var(--ink-soft); } .context-float-card-running .mc-wait { padding: 14px 10px 12px; } .context-float-card-running .mc-wait-water { width: 132px; height: 80px; opacity: 0.78; } .context-float-card-running .mc-wait-copy { max-width: 34ch; } .context-float-title, .context-float-body, .context-float-note { margin: 0; } .context-float-title { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.7; } .context-float-body { color: var(--ink-soft); font-size: 13px; line-height: 1.75; } .context-float-note { color: var(--ink-faint); font-size: 12.5px; line-height: 1.75; } .context-float-action { margin-top: 3px; } body.context-screen[data-ctx-tone="night"] .context-float-scrim { background: rgba(126, 164, 182, 0.08); } body.context-screen[data-ctx-tone="night"] .context-float-layer.is-running .context-float-scrim { background: rgba(126, 164, 182, 0.10); } body.context-screen[data-ctx-tone="night"] .context-ripple-ring { border-color: rgba(185, 210, 220, 0.24); } body.context-screen[data-ctx-tone="night"] .context-float-running-copy, body.context-screen[data-ctx-tone="night"] .context-float-busy-copy { border-color: rgba(207, 216, 220, 0.12); background: rgba(24, 34, 40, 0.58); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); } body.context-screen[data-ctx-tone="night"] .context-float-card { border-color: rgba(207, 216, 220, 0.18); background: rgba(28, 37, 43, 0.76); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22); } body.context-screen[data-ctx-tone="night"] .context-float-card-running, body.context-screen[data-ctx-tone="night"] .context-float-card-busy { background: rgba(28, 37, 43, 0.56); } @media (max-width: 520px) { .context-float-card { bottom: calc(env(safe-area-inset-bottom) + 70px); width: calc(100vw - 28px); } .context-float-running-copy, .context-float-busy-copy { bottom: calc(env(safe-area-inset-bottom) + 122px); width: calc(100vw - 34px); } } .unified-busy-note, .unified-manual-update { margin: 10px 0 14px; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); font-size: 13px; line-height: 1.75; } .unified-busy-note { text-align: center; } .unified-manual-update { display: grid; gap: 9px; } .unified-manual-update p { margin: 0; } .unified-manual-update strong { color: var(--ink); } .unified-manual-update .primary-button { margin-top: 2px; } .unify-steps { list-style: none; margin: 16px auto; padding: 0; display: flex; flex-direction: column; gap: 7px; width: max-content; max-width: 100%; } .unify-steps li { font-size: 14px; color: var(--ink-faint); opacity: 0.3; animation: unifyStep 3.6s ease-in-out infinite; } .unify-steps li:nth-child(2) { animation-delay: 0.5s; } .unify-steps li:nth-child(3) { animation-delay: 1s; } .unify-steps li:nth-child(4) { animation-delay: 1.5s; } .unify-steps li:nth-child(5) { animation-delay: 2s; } .unify-steps li:nth-child(6) { animation-delay: 2.5s; } @keyframes unifyStep { 0%, 100% { opacity: 0.3; } 12% { opacity: 1; color: var(--accent-ink); } 32% { opacity: 0.55; color: var(--ink-faint); } } .unify-eta { text-align: center; font-size: 12px; color: var(--ink-faint); margin-top: 8px; } .unified-empty { padding: 16px 0; } .unified-empty-lead { font-size: 17px; color: var(--ink); margin-bottom: 8px; } .unified-empty .primary-button { margin-top: 14px; } /* 「あなたのコンテキスト」の私(役割)セレクタ。横スクロールのチップ行（相談の人格チップを流用）。 */ .unified-roles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; /* ★スクロールしても画面上に張り付く（作者FB）。スクロール容器は .main（#app）＝親階層に overflow制限が無いので機能する。 下のカードと重ならないよう不透明な背景を付ける。z-indexは固定通知バー(#sortBar:80)より下、カード(0)より上で控えめに。 */ position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 6px 0 8px; } /* 夜トーンの放射グラデーションに馴染ませる：フラットな地色帯が浮くのを防ぎ、すりガラスで背景を透かす。 backdrop-filter 非対応ブラウザは上の不透明 var(--bg) にフォールバック。 */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .unified-roles { background: transparent; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } } .unified-roles-label { font-size: 11px; font-weight: 700; color: var(--ink-faint); } .unified-roles-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .unified-roles-chips .persona-chip { flex: none; /* 横スクロールで全部見せる（折り返さない） */ } /* 「全部のあなた」一望ビューの、私ごとのセクション見出し */ .unified-allsec + .unified-allsec { margin-top: 20px; } .unified-allsec-head { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--accent-ink); } /* 「別の私へ移す（一文ずつ）」：各一文＋移し先チップ */ .unified-move { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .move-line { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); } .move-line-text { font-size: 13.5px; color: var(--ink); line-height: 1.5; } .move-line-targets { display: flex; flex-wrap: wrap; gap: 6px; } .move-target { padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--accent-ink); font-size: 12px; font-weight: 600; transition: background 0.14s var(--ease), border-color 0.14s var(--ease); } .move-target:hover { background: var(--accent-soft); border-color: var(--accent); } /* 取り込み中の通知バー（画面下に固定）。processing=控えめのグレー／ready=accentで「準備ができました」。 位置はsafe-area考慮で下端から余白を取る。チャットのcomposer上にも被らないよう、上に少し浮かせる。 */ .sort-bar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); /* composer(下端入力欄)より上に出す */ transform: translateX(-50%); z-index: 80; max-width: calc(100% - 32px); padding: 9px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; font-weight: 600; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08); display: inline-flex; align-items: center; gap: 8px; cursor: default; transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease); } .sort-bar[data-state="ready"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); cursor: pointer; } .sort-bar[data-state="ready"]:hover { filter: brightness(1.02); } .sort-bar-text { display: inline-flex; align-items: center; gap: 8px; } /* 取り込んだメモの振り分け画面（#sort）。move系と同じトーンで、まとめて／種類ごと／一文ごとに各私へ。 */ .sort-section { margin: 0 0 22px; } .sort-section-head { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink-soft); } .sort-section-sub { display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint); margin-top: 3px; } .sort-target-row { display: flex; flex-wrap: wrap; gap: 8px; } .sort-target { padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; transition: background 0.14s var(--ease), border-color 0.14s var(--ease); } .sort-target:hover { background: var(--accent-soft); border-color: var(--accent); } .sort-target-strong { background: var(--accent-soft); border-color: var(--accent); } /* 「全部まとめて」は塗りで強調 */ /* 「× 捨てる」＝控えめなグレー塗り（このアプリの世界観に馴染ませる）。 作者FB「白地に赤は浮く」→ surface-2の塗り＋通常のink文字に。色味で目立たせず、形（×）と文言で識別する。 */ .sort-delete { color: var(--ink); background: var(--surface-2); border-color: var(--line); } .sort-delete:hover { background: var(--line); border-color: var(--line-strong); color: var(--ink); } .sort-cat { margin: 0 0 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); } .sort-cat-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .sort-cat-label { font-size: 13.5px; font-weight: 700; color: var(--ink); } .sort-cat-whole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sort-cat-whole-label { font-size: 11.5px; color: var(--ink-faint); } .sort-lines { display: flex; flex-direction: column; gap: 8px; } .sort-line { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .sort-line-text { font-size: 13px; color: var(--ink); line-height: 1.5; } .sort-line-targets { display: flex; flex-wrap: wrap; gap: 6px; } .sort-skip { margin-top: 6px; } /* 振り分け改善：元に戻すバー／初心者向け説明／新しい私を作る */ .sort-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--line); } .sort-undo-label { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; min-width: 0; } .sort-undo-btn { flex: none; padding: 7px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; } .sort-undo-btn:hover { border-color: var(--accent); } .sort-intro { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .sort-intro-h { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--accent-ink); } .sort-intro-b { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); } .sort-intro-b b { color: var(--ink); font-weight: 600; } .sort-create { display: inline-flex; align-items: center; margin: 0 0 18px; padding: 9px 18px; border-radius: 999px; background: transparent; border: 1px dashed var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s ease; } .sort-create:hover { background: var(--accent-soft); } /* 「選んでから決定」：選んだ行き先チップをハイライト／行き先が決まった一文はそっと印 */ .sort-target.is-picked { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .sort-target.sort-delete.is-picked { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--surface); } .sort-line.is-set { opacity: .96; } .sort-line.is-set .sort-line-text::after { content: " ✓"; color: var(--accent-ink); font-weight: 700; } /* 下に固定の「決定」バー。#sortBody はこのぶん下に余白を取る（.sort-bottom-space）。 */ .sort-bottom-space { height: 76px; } .sort-commit { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px clamp(14px, 4vw, 22px) calc(env(safe-area-inset-bottom) + 10px); background: transparent; display: flex; justify-content: center; } .sort-commit[hidden] { display: none; } .sort-commit-btn { width: min(560px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 20px; border-radius: 16px; cursor: pointer; border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); font-size: 15px; font-weight: 600; } .sort-commit[data-state="ready"] .sort-commit-btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .sort-commit[data-state="incomplete"] .sort-commit-btn { background: var(--surface); color: var(--ink-soft); } .sort-commit-count { font-size: 14px; } .sort-commit-go { font-size: 13.5px; opacity: .92; } .sort-commit[data-state="incomplete"] .sort-commit-go { color: var(--ink-faint); } .unified-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } /* 固めない（無常性）の問い直し。警告色(rose)でなく穏やかなaccentで「変わっていい」を誘う。 */ .unified-reask { margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; line-height: 1.55; } .unified-cards { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; } /* 役割表示の下に添える「共通のあなた」セクション（コピーに付く共通項目を、ここでオン/オフできる） */ .unified-common-attach { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .unified-common-head { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--ink-soft); } .unified-common-sub { display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint); margin-top: 3px; } .unified-card { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); transition: opacity 0.18s var(--ease); } .unified-card.off { opacity: 0.5; } /* カードの折りたたみ（既定たたみ＝冒頭プレビュー／見出しタップで全開） */ .unified-card-headmain.foldable { background: transparent; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; } /* 「続きを見る」＝見切れている下端（カード末尾）に控えめなシェブロン（⌄＝開く／⌃＝閉じる）。タイトル横の▼より自然。 */ .unified-foldmore { display: block; width: 100%; background: transparent; border: 0; cursor: pointer; color: var(--ink-soft); font-size: 15px; line-height: 1; padding: 8px 0 3px; margin-top: 2px; text-align: center; } .unified-foldmore:hover { color: var(--ink-soft); } .unified-card:not(.has-more) .unified-foldmore { display: none; } /* 冒頭で全部見えるカードは続きの印を出さない */ .unified-card:not(.has-more) .unified-card-headmain.foldable { cursor: default; } /* たためないカードはポインタにしない */ .unified-cardbody.clamped { position: relative; max-height: 72px; overflow: hidden; } .unified-card.has-more .unified-cardbody.clamped::after { /* たたみ中、まだ下に続く合図のフェード */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; } .unified-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .unified-card-label { font-weight: 600; color: var(--ink); } .unified-card-hint { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; } /* ⑥ 種類ごとの最終更新日（その種類の下に小さく）。長く更新されていない種類に気づけるように */ .unified-card-date { flex-basis: 100%; font-size: 10.5px; font-weight: 600; color: var(--ink-faint); margin-top: 3px; } .unified-text { color: var(--ink); line-height: 1.7; font-size: 14.5px; } /* 文字列カテゴリの「一文ごと箇条書き」表示（和文の「・」＋ぶら下げインデント） */ .unified-bullets { margin: 0; padding: 0; list-style: none; } .unified-bullets li { color: var(--ink); font-size: 14.5px; line-height: 1.6; padding-left: 1.2em; text-indent: -1.2em; } .unified-bullets li + li { margin-top: 5px; } .unified-bullets li::before { content: "・"; color: var(--ink-faint); } .unified-words { display: flex; flex-direction: column; gap: 4px; } .unified-word { color: var(--ink); font-size: 15px; } /* カード見出し・編集 */ .unified-card-headmain { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; } .unified-card-tools { display: flex; align-items: center; gap: 10px; flex: none; } /* 段階開示：編集/深掘りは「⋯」に畳む（初期表示は内容＋on/off＋貼るCTAを主役に）。 */ .unified-more { background: transparent; border: 0; color: var(--ink-faint); font-size: 18px; line-height: 1; padding: 2px 9px; border-radius: 8px; letter-spacing: 1px; } .unified-more:hover { color: var(--ink-soft); background: var(--surface-2); } .unified-card.editing { border-color: var(--accent); } .unified-edit { width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 15px; resize: vertical; min-height: 96px; font-family: inherit; } .unified-edit:focus { outline: none; border-color: var(--accent); } .unified-edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; } .unified-edit-choice { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } /* オン/オフ スイッチ（ピル型） */ .unified-toggle { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); border: 0; flex: none; cursor: pointer; transition: background 0.18s var(--ease); } .unified-toggle.on { background: var(--accent); } .unified-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.18s var(--ease); } .unified-toggle.on .unified-toggle-knob { transform: translateX(18px); } /* 追尾CTA：画面下に貼り付く（縦に長い画面でも、一番下までスクロールせずコピー/相談できる） */ .unified-cta { position: sticky; bottom: 0; margin: 18px calc(-1 * clamp(16px, 4vw, 28px)) 0; padding: 12px clamp(16px, 4vw, 28px) calc(env(safe-area-inset-bottom) + 12px); background: transparent; } .unified-cta-label { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-bottom: 8px; } .unified-cta-count { color: var(--ink-faint); } .unified-cta-count::before { content: "・"; margin: 0 6px; color: var(--ink-faint); } .unified-cta-row { display: flex; gap: 8px; } .cta-ai { flex: 1; min-height: 46px; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-sm); transition: transform 0.14s var(--ease), background 0.14s var(--ease); /* でも