/* 同期の通常状態では欄を増やさず、競合・切断時だけ既存の補助階層で案内する。 */ .draft-sync-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs) var(--gap-s); padding: var(--gap-s) var(--gap-m); color: var(--text-muted); background: var(--surface); border-radius: var(--radius-m); font-size: var(--fs-meta); } .draft-sync-note > span { margin-right: auto; } .draft-sync-note > button { flex-shrink: 0; font-size: var(--fs-meta); } /* =========================================================== Jukeblox style.css — v4 "Graphite"（2026-09-27 全面再設計） DESIGN.md v4 準拠。色・余白・角丸・書体・影は必ず :root のトークンを参照する。 生 hex は :root（DESIGN.md のトークン定義）にだけ存在する。 構成 1. トークン 2. 基本 3. 部品（ボタン・入力・メニュー等） 4. 骨格・サイドバー 5. ペイン 6. 会話ストリーム 7. 入力欄 8. プレビュー 9. ダイアログ・設定 10. 動きの抑制・強制カラー =========================================================== */ /* =========================================================== 1. トークン =========================================================== */ :root { /* --- 面（暗い順）。色相は 215° 前後の青みグラファイト1系統だけ --- */ --canvas: #0F1318; /* 窓の地・サイドバー。ペインはこの上に浮く */ --sunken: #12171D; /* コード・作業ログなど「中に沈む」面 */ --bg: #151A21; /* ペインの地（会話を読む面） */ --surface: #1B2129; /* カード・AIの発言・入力欄・ダイアログ */ --surface-2: #232A34; /* 操作部品の面 */ --surface-3: #2B333E; /* 操作部品のホバー・押下 */ --border: #272F3A; /* 区切りの細線 */ --border-strong: #353E4B; /* 浮いた面の輪郭・入力欄の枠 */ /* --- 文字 --- */ --text: #E8ECF1; /* 本文 */ --text-muted: #A5AEBB; /* 補助・メタ情報 */ --text-faint: #808A9A; /* 最弱（時刻・パス等。どの面の上でも 4.4:1 以上） */ /* --- アクセント。プロバイダ2色が唯一のブランド色、青は「押す」と「今ここ」だけ --- */ --accent: #4CA0EA; /* 主要操作・フォーカス・選択 */ --on-accent: #07111C; --accent-claude: #D97757; /* Claude コーラル */ --accent-codex: #1FA37A; /* Codex ティール */ /* --- 状態 --- */ --danger: #E5484D; --ok: #46A758; --warn: #E5A13D; --on-warn: var(--canvas); /* §12ff 注意色で塗った札の文字（API クレジット消費中） */ /* §12an 緊急停止バナー専用。--danger より強い唯一の色で、他へは転用しない */ --critical: #FF2E46; --on-critical: #FFFFFF; /* --- 思考量ピッカー専用（DESIGN.md「思考量ピッカー」） --- */ --tuning-violet: #A36AF4; --tuning-violet-light: #6E36B9; /* --- 影の墨。影はこの1色の透過だけで作る --- */ --shadow-ink: #020406; /* --- 形 --- */ --radius-xs: 4px; --radius-s: 6px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 16px; --radius-pill: 999px; --gap-xs: 4px; --gap-s: 8px; --gap-m: 12px; --gap-l: 16px; --gap-xl: 24px; --control-h: 30px; /* 文字ボタン・入力の高さ */ --icon-btn: 28px; /* アイコンボタンの一辺 */ --sidebar-default-w: 264px; --sidebar-w: var(--sidebar-default-w); --sidebar-min-w: 200px; --sidebar-max-w: 480px; --sidebar-resize-hit: 6px; --main-min-w: 320px; /* 提供ロゴの表示寸法。余白のある正本を変更せず、横組みは表示枠で上下の余白だけを詰める。 */ --brand-mark-size: 20px; --brand-logo-width: 288px; /* 会話は文字を読む前にアイコンで見分ける。既存の寸法の段にそろえる。 */ --conv-icon-list-size: 20px; /* 2026-10-12: 28 → 20（一覧のアイコンを小さく。見出しは 32 のまま） */ --conv-icon-header-size: calc(2 * var(--gap-l)); --conv-icon-avatar-size: calc(2 * var(--gap-xl) - var(--gap-xs)); /* --- 書体 --- */ --font-ui: "Segoe UI Variable Text", "Segoe UI", "Yu Gothic UI", "Hiragino Sans", sans-serif; --font-display: "Segoe UI Variable Display", "Segoe UI", "Yu Gothic UI", "Hiragino Sans", sans-serif; --font-mono: "Cascadia Code", "Cascadia Mono", Consolas, "Yu Gothic UI", monospace; --fs-micro: 11px; /* 時刻・パスなど視線を奪ってはいけない最小要素 */ --fs-meta: 12px; /* 補助情報・小さな操作 */ --fs-ui: 13px; /* UIの基本 */ --fs-body: 14px; /* 会話本文・入力 */ --conversation-font-family: "Noto Sans JP", system-ui, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif; --conversation-font-size: 15px; --fs-title: 16px; /* ペインタイトル（「どの作業か」が最重要情報のため最大） */ --fs-h: 18px; /* 設定ページ見出し・本文 h1 */ /* --- 動き --- */ --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 120ms; --t-mid: 160ms; --t-slow: 220ms; /* --- 以下はすべて上のトークンからの派生（新色ではない） --- */ --bg-sidebar: var(--canvas); /* 旧名（mobile.css・pair.html 互換） */ --accent-claude-soft: color-mix(in srgb, var(--accent-claude) 15%, transparent); --accent-codex-soft: color-mix(in srgb, var(--accent-codex) 15%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent); --focus: color-mix(in srgb, var(--accent) 60%, transparent); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); --scrim: color-mix(in srgb, var(--shadow-ink) 62%, transparent); --shim: color-mix(in srgb, var(--text) 55%, var(--text-faint)); /* ホバーは不透明面ではなく透過の「洗い」。状態色で染まったペインの上でも同じ見え方になる */ --wash: color-mix(in srgb, var(--text) 6%, transparent); --wash-strong: color-mix(in srgb, var(--text) 10%, transparent); --surface-hover: color-mix(in srgb, var(--text) 5%, var(--surface)); --selection: color-mix(in srgb, var(--accent) 16%, var(--canvas)); --glass-edge: color-mix(in srgb, var(--text) 7%, transparent); /* 入力欄のガラス（2026-09-29・DESIGN.md「入力欄のガラス」）: 下を流れる会話が透けてぼける面。 新色ではなく面の透過・文字色の照り返し・影の墨だけで作る */ --glass-fill: color-mix(in srgb, var(--surface) 42%, transparent); --glass-rim: color-mix(in srgb, var(--text) 16%, transparent); --glass-shine: color-mix(in srgb, var(--text) 8%, transparent); --glass-floor: color-mix(in srgb, var(--shadow-ink) 40%, transparent); --glass-blur: blur(10px) saturate(1.8); --user-bubble: color-mix(in srgb, var(--accent) 12%, var(--surface)); --input-bg: color-mix(in srgb, var(--canvas) 55%, var(--surface)); --elev-1: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 35%, transparent); --elev-2: 0 10px 28px -8px color-mix(in srgb, var(--shadow-ink) 70%, transparent), 0 2px 6px color-mix(in srgb, var(--shadow-ink) 35%, transparent); --elev-3: 0 28px 72px -16px color-mix(in srgb, var(--shadow-ink) 85%, transparent), 0 4px 14px color-mix(in srgb, var(--shadow-ink) 40%, transparent); /* 状態の面符号（DESIGN.md「状態の面符号」）。混色率はユーザーと詰めた現行値を維持。 色は暖色の3段（2026-09-30 ユーザー指示「緑は違う色彩。オレンジ・黄・赤で」）: 作業中=オレンジ / 待機=黄 / 要対応=赤。 オレンジは赤（--danger）と黄（--state-wait）の見た目の中間に置く（OKLCH の色相 約59°・明るさ 0.73 が、赤 約23°/0.63 と黄 約94°/0.83 のどちらともほぼ中間）。 2026-09-30 ユーザー指摘「作業のオレンジが赤に近く見づらい」で #EC7A30（約50°）から変更: 暗い地に薄く混ぜると橙は赤茶に沈み、要対応の赤と同じ系統に見えたため */ --state-run: #F28C28; --state-wait: #E6C33F; --run-tint: color-mix(in srgb, var(--state-run) 14%, var(--bg)); --run-tint-strong: color-mix(in srgb, var(--state-run) 25%, var(--bg)); --attn-tint: color-mix(in srgb, var(--danger) 11%, var(--bg)); --attn-tint-strong: color-mix(in srgb, var(--danger) 21%, var(--bg)); --wait-tint: color-mix(in srgb, var(--state-wait) 11%, var(--bg)); --wait-tint-strong: color-mix(in srgb, var(--state-wait) 21%, var(--bg)); /* CSS で描く小アイコン（mask 用。形だけを使うので色は持たない） */ --mask-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E"); --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } /* ライトテーマは未実装（DESIGN.md）。緊急停止の赤だけは明るい地用の値を先に持つ */ [data-theme="light"] { --critical: #E0102E; } /* =========================================================== 2. 基本 =========================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } /* iOS（Safari・iPhone アプリの WKWebView）は横向きなどで文字を勝手に大きくする。字の大きさはトークンだけで決める（2026-10-01） */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-ui); line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "palt" 0; color-scheme: dark; } [hidden] { display: none !important; } button, input, textarea, select { font: inherit; color: inherit; } ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); } :focus:not(:focus-visible) { outline: none; } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--text-faint); } *::-webkit-scrollbar-corner { background: transparent; } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { display: block; flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .icon.is-ok { color: var(--ok); } kbd { font-family: var(--font-ui); font-size: var(--fs-micro); line-height: 1; color: var(--text-faint); padding: 3px 5px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); background: var(--wash); } /* =========================================================== 3. 部品 視覚階層: primary=送信（塗り）だけ / secondary=枠付き面 / tertiary=文字・アイコンのみ =========================================================== */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-h); padding: 0 var(--gap-m); background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius-m); font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background var(--t-fast) ease, box-shadow var(--t-fast) ease, opacity var(--t-fast) ease; } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); } .btn-primary:active { background: color-mix(in srgb, var(--accent) 88%, var(--shadow-ink)); } .btn-primary:disabled { opacity: .42; cursor: not-allowed; background: var(--accent); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-h); padding: 0 var(--gap-m); background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-m); font-size: var(--fs-ui); white-space: nowrap; cursor: pointer; transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } .btn:hover { background: var(--surface-3); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn:disabled:hover { background: var(--surface-2); } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--text-muted); border: 0; border-radius: var(--radius-s); padding: var(--gap-xs) var(--gap-s); font-size: var(--fs-ui); cursor: pointer; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .btn-ghost:hover { background: var(--wash); color: var(--text); } .btn-ghost:active { background: var(--wash-strong); } .btn-ghost:disabled { opacity: .45; cursor: not-allowed; } .btn-ghost:disabled:hover { background: transparent; color: var(--text-muted); } /* アイコンボタン（28px 四方）。文字グリフ（✕ や /）が入っても同じ当たり判定 */ .btn-icon { justify-content: center; flex: 0 0 auto; width: var(--icon-btn); height: var(--icon-btn); padding: 0; font-size: 14px; line-height: 1; } .btn-danger { display: inline-flex; align-items: center; gap: var(--gap-s); min-height: var(--control-h); padding: 0 var(--gap-m); background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 60%, transparent); border-radius: var(--radius-m); font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background var(--t-fast) ease; } .btn-danger:hover { background: var(--danger-soft); } /* 入力欄。ダイアログやカードより一段沈んだ面で「書き込む場所」を示す */ .input { width: 100%; min-height: 32px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-m); padding: 5px 10px; font-size: var(--fs-ui); transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; } .input::placeholder { color: var(--text-faint); } .input:hover { border-color: color-mix(in srgb, var(--text) 18%, var(--border-strong)); } .input:focus { outline: none; border-color: var(--focus); box-shadow: var(--ring); } select.input { cursor: pointer; } select.input option, select.input optgroup { background: var(--surface); color: var(--text); } .input-num { max-width: 14rem; } .input-area { min-height: 5em; resize: vertical; line-height: 1.6; padding-block: 7px; } .input-mono { font-family: var(--font-mono); font-size: 12.5px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* セグメント（プレビューの表示幅など、少数の排他選択） */ .seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--wash); border-radius: var(--radius-m); } .seg-item { display: flex; align-items: center; } .seg-btn { display: inline-flex; align-items: center; gap: var(--gap-xs); background: transparent; border: 0; border-radius: var(--radius-s); padding: 2px var(--gap-s); font-size: var(--fs-meta); color: var(--text-muted); cursor: pointer; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .seg-btn:hover { color: var(--text); } .seg-item.is-active .seg-btn { background: var(--surface-3); color: var(--text); box-shadow: var(--elev-1); } /* ドット・バッジ（静的データ。枠もホバーも持たない） */ .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-faint); } .dot-claude { background: var(--accent-claude); } .dot-codex { background: var(--accent-codex); } .dot-gemini { background: var(--accent); } .dot-ollama { background: var(--text-muted); } .dot-chatgpt { background: var(--text-muted); } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--text-muted); white-space: nowrap; } .badge.prov-claude { color: var(--accent-claude); } .badge.prov-codex { color: var(--accent-codex); } .badge.prov-gemini { color: var(--accent); } .badge.prov-ollama { color: var(--text-muted); } .prov-chatgpt { --provider-color: var(--text-muted); } /* メニュー（浮く面。影と輪郭で地から離す） */ .menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 18ch; padding: var(--gap-xs); display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--elev-2); } .menu-up { top: auto; bottom: calc(100% + 6px); } .menu.message-menu { position: fixed; right: auto; min-width: 24ch; max-width: calc(100vw - var(--gap-l)); max-height: calc(100vh - var(--gap-l)); overflow-y: auto; } .message-menu .menu-item > .icon { width: var(--gap-l); height: var(--gap-l); flex: 0 0 auto; } .menu-item { display: flex; align-items: center; gap: var(--gap-xs); background: transparent; border: 0; border-radius: var(--radius-s); padding: 6px 10px; font-size: var(--fs-ui); color: var(--text); text-align: left; cursor: pointer; white-space: nowrap; transition: background var(--t-fast) ease; } .menu-item:hover, .menu-item:focus-visible { background: var(--wash-strong); outline: none; } .menu-item[aria-current="true"] { color: var(--text); } .menu-mark { display: inline-block; width: 1.4em; color: var(--accent); font-weight: 600; } .menu-empty { padding: 6px 10px; font-size: var(--fs-meta); color: var(--text-faint); } .menu-label { padding: 6px 10px 2px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; color: var(--text-faint); } /* トースト */ /* 入力欄（各ペインの下端）を隠さないよう、上端の中央に出す */ .toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 200; max-width: min(60ch, calc(100vw - 32px)); padding: 9px 16px; border-radius: 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--elev-2); font-size: var(--fs-ui); } body.has-emergency .toast { top: 54px; } .toast.is-error { border-color: color-mix(in srgb, var(--danger) 60%, var(--border-strong)); color: var(--danger); } /* スピナー・シマー・キャレット */ .spinner { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 14%, transparent); border-top-color: var(--state-run); /* 動いている＝作業中のオレンジ（状態の色とそろえる） */ animation: spin 900ms linear infinite; } .spinner-s { width: 10px; height: 10px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } .shimmer { background: linear-gradient(90deg, var(--text-faint), var(--shim), var(--text-faint)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.4s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } } /* §12fl（2026-10-11 Mac で重い）: Mac のアプリでは、光が流れる表示（背景の位置を毎フレーム動かす＝文字を毎フレーム描き直す）をやめ、 薄くなって戻る明滅にする（不透明度は描き直さずに重ねるだけで動く）。「作業中」の合図であることは同じ */ .is-mac-host .shimmer { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text-faint); -webkit-text-fill-color: currentColor; animation: shimmer-fade 2.4s ease-in-out infinite; } @keyframes shimmer-fade { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .caret { display: inline-block; width: 7px; height: 1.1em; vertical-align: text-bottom; background: var(--accent); margin-left: 2px; border-radius: 1px; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* 汎用の注記 */ .note { margin: 0; font-size: var(--fs-meta); color: var(--text-muted); } .note.is-err { color: var(--danger); } .auto-reason { margin: 6px 0 0; padding-inline: var(--gap-m); font-size: var(--fs-meta); color: var(--text-muted); overflow-wrap: anywhere; } .usage-burn-warning { color: var(--warn); font-size: inherit; margin-block: var(--gap-s); overflow-wrap: anywhere; } /* =========================================================== 4. 骨格・サイドバー =========================================================== */ .app { display: flex; height: 100vh; overflow: hidden; background: var(--canvas); } /* ===== 緊急停止バナー（§12an） ===== 作動中だけ最上部に全幅。--critical はここ専用。点滅・スライドはしない */ .emergency-bar { display: flex; align-items: center; gap: var(--gap-m); min-height: 40px; padding: var(--gap-s) var(--gap-l); background: var(--critical); color: var(--on-critical); font-size: var(--fs-body); font-weight: 700; line-height: 1.4; } .emergency-text { flex: 1 1 auto; min-width: 0; } .emergency-release { flex: 0 0 auto; font-size: var(--fs-ui); font-weight: 700; background: transparent; color: var(--on-critical); border: 1px solid var(--on-critical); border-radius: var(--radius-s); padding: var(--gap-xs) var(--gap-m); cursor: pointer; transition: background var(--t-fast) ease; } .emergency-release:hover { background: color-mix(in srgb, var(--on-critical) 18%, transparent); } .emergency-release:disabled { opacity: .55; cursor: default; } .emergency-release:focus-visible { outline: 2px solid var(--on-critical); outline-offset: 2px; } body.has-emergency { display: flex; flex-direction: column; } body.has-emergency .app { height: calc(100vh - 40px); flex: 1 1 auto; min-height: 0; } /* ===== サイドバー ===== 窓の地（--canvas）と同じ面。境界線を持たず、右のペインが浮くことで区切る */ .sidebar { position: relative; width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); display: flex; flex-direction: column; gap: 6px; background: var(--canvas); padding: 0 10px 10px; min-height: 0; } /* 会話を広く読むため一覧と使用量を一緒に隠す。再表示は同じ位置の控えめな操作に残す。 */ .sidebar-rail { display: none; flex: 0 0 auto; padding: var(--gap-s) var(--gap-xs); background: var(--canvas); } :root:not(.is-mobile-client).is-sidebar-hidden .sidebar { display: none; } :root:not(.is-mobile-client).is-sidebar-hidden .sidebar-rail { display: block; } .sidebar-toggle { flex: 0 0 auto; } :root.is-mobile-client .sidebar-toggle { display: none; } .sidebar-resize { position: absolute; right: 0; top: var(--gap-s); bottom: var(--gap-s); width: var(--sidebar-resize-hit); z-index: 5; } .sidebar-resize:focus-visible { outline: none; background-size: 2px calc(100% - 24px); } :root.is-mobile-client .sidebar-resize { display: none; } :root.is-sidebar-resizing, :root.is-sidebar-resizing * { cursor: col-resize !important; user-select: none !important; } .brand { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 0 0 8px; user-select: none; } .is-desktop-host .brand { cursor: move; } .brand-mark { width: var(--brand-mark-size); height: var(--brand-mark-size); flex: 0 0 auto; object-fit: contain; } .brand-name { display: inline-flex; align-items: center; gap: var(--gap-xs); font-family: var(--font-display); font-size: 15px; font-weight: 650; letter-spacing: .01em; } .brand-logo { display: block; width: min(var(--brand-logo-width), 100%); height: auto; aspect-ratio: 4; object-fit: cover; } .brand-spacer { flex: 1 1 auto; } .window-controls { display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: -4px; cursor: default; } .window-control { width: 30px; height: 28px; display: inline-grid; place-items: center; padding: 0; background: transparent; color: var(--text-muted); border: 0; border-radius: var(--radius-s); cursor: pointer; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .window-control .icon { width: 16px; height: 16px; } .window-control:hover { background: var(--wash-strong); color: var(--text); } .window-close:hover { background: var(--danger); color: var(--on-critical); } .execution-context { margin: -4px 0 2px; padding: 0 8px; color: var(--text-muted); font-size: var(--fs-meta); } /* 主導線の並び: ［＋ 新しい会話］（secondary）＋ CLI取込（tertiary アイコン） */ .sidebar-actions { display: flex; align-items: center; gap: 4px; } .btn-newconv { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--gap-s); height: 34px; padding: 0 var(--gap-m); background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-m); font-size: var(--fs-ui); font-weight: 600; text-align: left; cursor: pointer; transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } .btn-newconv .icon { color: var(--accent); } .btn-newconv:hover { background: var(--surface-2); } .btn-newconv-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-ghost.btn-import { width: 34px; height: 34px; } /* 検索。入力欄なので沈んだ面、左に虫眼鏡・右にショートカット */ .search-box { position: relative; display: flex; align-items: center; height: 32px; margin-top: 2px; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-m); transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; } .search-box:hover { border-color: var(--border-strong); } .search-box:focus-within { border-color: var(--focus); box-shadow: var(--ring); } .search-icon { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--text-faint); pointer-events: none; } .conv-search { flex: 1 1 auto; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; padding: 0 var(--gap-s) 0 31px; font-size: var(--fs-ui); } .conv-search:focus-visible { outline: none; } .conv-search::placeholder { color: var(--text-faint); } .conv-search::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; cursor: pointer; } .search-kbd { margin-right: 6px; flex: 0 0 auto; } .search-box:focus-within .search-kbd { display: none; } /* §12fn スレッド内検索の帯（見出しの帯のすぐ下・押したときと Ctrl+F のときだけ）。入力欄は会話一覧の検索と同じ沈んだ面、 前後と閉じるは見出しの道具と同じ控えめなアイコンボタン。件数は数字の幅をそろえて揺れないように */ .thread-search { flex: 0 0 auto; display: flex; align-items: center; gap: var(--gap-xs); padding: var(--gap-s) var(--gap-m); border-bottom: 1px solid var(--border); } .thread-search-box { flex: 1 1 auto; min-width: 0; margin-top: 0; } .thread-search-count { flex: 0 0 auto; min-width: 5.5em; text-align: right; white-space: nowrap; font-size: var(--fs-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; } .thread-search .btn-icon:disabled { opacity: .4; cursor: default; } /* 固定した目次は一段明るい中立面で会話と区切る。青は元の発言へ戻る操作の印。 */ .thread-announcements { flex: 0 0 auto; min-width: 0; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); box-shadow: inset 2px 0 var(--accent); font-size: var(--fs-meta); color: var(--text); } .latest-instruction { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-xs); flex: 0 0 auto; min-width: 0; width: calc(100% - var(--gap-m) * 2); margin: var(--gap-s) var(--gap-m); padding: var(--gap-m) var(--gap-l); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-xl); background: var(--selection); box-shadow: var(--elev-1); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .latest-instruction:hover { background: var(--surface-hover); color: var(--text); } .latest-instruction-label { flex: 0 0 auto; color: var(--accent); font-size: var(--fs-meta); font-weight: 600; } .latest-instruction-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: normal; overflow-wrap: anywhere; font-family: var(--font-ui); font-size: var(--fs-h); font-weight: 600; line-height: 1.5; } .latest-instruction[data-status="pending"] .latest-instruction-text, .latest-instruction[data-status="unavailable"] .latest-instruction-text { color: var(--text-muted); font-size: var(--fs-ui); font-weight: 400; } .queue-settings-dialog { width: min(440px, calc(100vw - var(--gap-xl) * 2)); } .queue-settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-m); margin-block: var(--gap-m); color: var(--text-muted); font-size: var(--fs-ui); } .queue-settings-row .queue-param, .queue-settings-row .queue-speed-select { flex: 0 1 68%; min-width: 0; max-width: 68%; } .msg-queued .queue-model-value, .msg-queued .queue-effort-value { color: var(--text); } .msg-queued .msg-replyref { align-self: flex-end; border-left: 2px solid var(--accent); border-radius: var(--radius-xs); background: var(--wash); color: var(--text-muted); padding: var(--gap-xs) var(--gap-s); } .answer-summary-actions { display: flex; justify-content: flex-end; margin-top: var(--gap-xs); } .answer-summary-button { min-height: var(--icon-btn); padding: 0 var(--gap-s); font-size: var(--fs-meta); color: var(--text-muted); } .queue-text-dialog { width: min(36rem, calc(100vw - var(--gap-xl))); } .queue-text-input { width: 100%; } .queue-text-error { color: var(--danger); font-size: var(--fs-meta); } .announcement-summary { display: flex; align-items: center; gap: var(--gap-s); min-height: var(--control-h); padding: var(--gap-xs) var(--gap-l); cursor: pointer; list-style: none; } .announcement-summary::-webkit-details-marker { display: none; } .announcement-summary:hover { background: var(--wash); color: var(--text); } .announcement-summary > .icon { width: var(--gap-l); height: var(--gap-l); flex: 0 0 auto; } .announcement-summary > .icon:first-child { color: var(--accent); } .announcement-label { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .announcement-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .announcement-summary > .announcement-chevron { transform: rotate(90deg); width: var(--gap-m); height: var(--gap-m); } .thread-announcements[open] .announcement-chevron { transform: rotate(-90deg); } .announcement-list { max-height: min(36vh, 320px); overflow-y: auto; padding: 0 var(--gap-s) var(--gap-xs); } .announcement-row { display: flex; align-items: center; gap: var(--gap-xs); } .announcement-jump { min-width: 0; flex: 1; text-align: left; white-space: normal; overflow-wrap: anywhere; padding: var(--gap-s); font-size: var(--fs-meta); line-height: 1.5; } .announcement-remove { flex: 0 0 auto; } .ahead .msg-copy + .msg-copy { margin-left: 0; } .pane.is-tight .announcement-preview { display: none; } /* 見つけた語の印。ほかの一致は淡く、今の一致は塗りつぶして濃い文字（読める濃さのまま位置が分かる） */ mark.search-hit { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 2px; } mark.search-hit.is-current { background: var(--warn); color: var(--on-accent); } /* ===== 会話一覧 ===== */ .conv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 4px -6px 0; padding: 0 6px 4px; } .conv-empty { margin: var(--gap-m) 0 0; padding: 0 var(--gap-s); font-size: var(--fs-meta); color: var(--text-faint); } /* プロジェクト分類は一覧の見出し。面を重ねず、フォルダと開閉の印で会話のまとまりを示す。 */ .project-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-s); padding: 0 var(--gap-xs); } .project-toolbar-label { font-size: var(--fs-meta); color: var(--text-faint); } /* §12ez 会話一覧の並びの切り替え。押せる控えめなボタン（フォルダの開閉と同じ格: 地なし・ホバーで wash） */ .project-sort { display: inline-flex; align-items: center; gap: var(--gap-xs); min-width: 0; min-height: var(--icon-btn); padding: 0 var(--gap-xs); border-radius: var(--radius-m); font-size: var(--fs-meta); color: var(--text-faint); } .project-sort:hover { background: var(--wash); color: var(--text); } .project-sort .icon { width: var(--gap-m); height: var(--gap-m); flex: 0 0 auto; } .project-sort .project-sort-chevron { transform: rotate(90deg); } .project-sort-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* §12ez カスタムの並べ替え: 離すと入る位置に細い線（ペインへの移動・フォルダへの移動と同じアクセント色） */ .conv-row.is-order-before::before, .conv-row.is-order-after::after { content: ""; position: absolute; left: var(--gap-xs); right: var(--gap-xs); height: 2px; border-radius: 1px; background: var(--accent); pointer-events: none; z-index: 2; } .conv-row.is-order-before::before { top: -1px; } .conv-row.is-order-after::after { bottom: -1px; } .project-folder { margin-bottom: var(--gap-s); border-radius: var(--radius-m); } .project-folder-head { display: flex; align-items: center; min-width: 0; } .project-folder-toggle { display: flex; flex: 1 1 auto; align-items: center; gap: var(--gap-xs); min-width: 0; min-height: var(--control-h); padding: var(--gap-xs); border-radius: var(--radius-m); text-align: left; font-size: var(--fs-ui); color: var(--text-muted); } .project-folder-toggle:hover { background: var(--wash); color: var(--text); } .project-chevron { width: var(--gap-m); height: var(--gap-m); flex: 0 0 auto; transition: transform var(--t-fast) ease; } .project-folder-toggle[aria-expanded="true"] .project-chevron { transform: rotate(90deg); } .project-folder-icon { width: var(--gap-l); height: var(--gap-l); flex: 0 0 auto; } .project-folder-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .project-folder-count { margin-left: auto; color: var(--text-faint); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } .project-folder-state { width: calc(2 * var(--gap-xs)); height: calc(2 * var(--gap-xs)); border-radius: 50%; flex: 0 0 auto; } .project-folder-state.is-running { background: var(--state-run); } .project-folder-state.is-attention { background: var(--danger); } .project-folder-state.is-waiting { background: var(--state-wait); } .project-folder-empty { margin: 0; padding: var(--gap-xs) var(--gap-xl); color: var(--text-faint); font-size: var(--fs-meta); } .project-folder-menu-button { flex: 0 0 auto; color: var(--text-faint); } .project-folder.is-project-drop-target { background: var(--selection); box-shadow: inset 0 0 0 1px var(--accent); } /* §12jo「連携アプリ」の場所: 小見出しは押せない文字だけ（.menu-label と同じ格）。アプリの行はフォルダの印の代わりに頭文字のタイル （アプリだと一目で分かる形。面と輪郭は紫のトークンを薄く）。案件のフォルダは 1 段下げる（中の会話は普段のフォルダと同じく見出しにそろえる） */ .linked-apps { margin-bottom: var(--gap-s); } .linked-apps .project-folder { margin-bottom: 0; } .linked-apps-caption { margin: 0; padding: var(--gap-xs) var(--gap-xs) 2px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; color: var(--text-faint); } .linked-app-tile { display: grid; place-items: center; width: var(--gap-l); height: var(--gap-l); flex: 0 0 auto; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--aurora-violet) 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aurora-violet) 55%, transparent); color: color-mix(in srgb, var(--aurora-violet) 55%, var(--text)); font-size: var(--fs-micro); font-weight: 600; line-height: 1; } .is-linked-case { padding-left: var(--gap-l); } .project-popover { position: fixed; inset: auto; z-index: 90; width: min(calc(10 * var(--icon-btn)), calc(100vw - 2 * var(--gap-s))); min-width: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-m); } .project-popover .menu-item { flex: 0 0 auto; min-width: 0; min-height: var(--control-h); } .project-popover .menu-item > .icon { flex: 0 0 auto; } .project-menu-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .project-popover .menu-mark { flex: 0 0 auto; width: auto; } .project-popover .menu-item.is-destructive { color: var(--danger); } /* 続けて移動するとき、直前の保存通知が選択肢を覆わない。再試行のある起動エラーには触れない。 */ body.has-project-menu #toast { visibility: hidden; } .project-folder-dialog { width: min(calc(14 * var(--icon-btn)), calc(100vw - 2 * var(--gap-l))); } .project-folder-dialog .field { margin-block: var(--gap-m); } .conv-row { position: relative; margin-bottom: 1px; } .conv-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: var(--radius-m); padding: 6px 8px 6px 6px; color: var(--text-muted); cursor: grab; touch-action: pan-y; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .conv-item:hover, .conv-row:hover .conv-item { background: var(--wash); color: var(--text); } .conv-item.is-active { background: var(--selection); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); } /* 行のホバー操作（§12bg）: 右から［削除（CLI の履歴も）］［アーカイブ（CLI は残す）／戻す］。 削除だけがホバーで赤（破壊的）、アーカイブは戻せるので本文色に起こすだけ */ .conv-row:hover .conv-item { padding-right: calc(var(--icon-btn) * 2 + var(--gap-s)); } .conv-del, .conv-arch { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 26px; height: 26px; opacity: 0; pointer-events: none; transition: opacity var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease; } .conv-arch { right: calc(3px + 26px + 2px); } .conv-project { position: absolute; top: 50%; right: calc(.75 * var(--gap-xs) + 2 * var(--icon-btn)); transform: translateY(-50%); width: var(--icon-btn); height: var(--icon-btn); opacity: 0; pointer-events: none; } .conv-project .icon { width: var(--gap-l); height: var(--gap-l); } .conv-row.has-project-action:hover .conv-item { padding-right: calc(3 * var(--icon-btn) + var(--gap-s)); } .conv-row:hover .conv-project, .conv-project:focus-visible { opacity: 1; pointer-events: auto; } .conv-del .icon, .conv-arch .icon { width: 15px; height: 15px; } .conv-del:hover { color: var(--danger); } .conv-arch:hover { color: var(--text); } .conv-row:hover .conv-del, .conv-del:focus-visible, .conv-row:hover .conv-arch, .conv-arch:focus-visible { opacity: 1; pointer-events: auto; } /* アーカイブ済み（§12bg）: 一覧の下の畳んだ見出し（押せる tertiary）。開くと行を弱い文字で並べる */ .btn-ghost.conv-archive-toggle { display: flex; align-items: center; gap: var(--gap-xs); width: 100%; margin: var(--gap-s) 0 2px; padding: 4px var(--gap-s) 4px 6px; border-radius: var(--radius-m); font-size: var(--fs-meta); color: var(--text-faint); text-align: left; } .btn-ghost.conv-archive-toggle:hover { color: var(--text-muted); } .conv-archive-toggle .icon { width: 12px; height: 12px; flex: 0 0 auto; transition: transform var(--t-fast) ease; } .conv-archive-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); } .conv-archive-count { margin-left: auto; font-variant-numeric: tabular-nums; } .conv-row.is-archived .conv-item { color: var(--text-faint); } .conv-row.is-archived:hover .conv-item, .conv-row.is-archived .conv-item.is-active { color: var(--text-muted); } .conv-item-head { display: flex; align-items: center; gap: 7px; min-width: 0; } .conv-item-head > .dot { width: 7px; height: 7px; } /* 会話のアイコンは一覧と見出しで形が読み取れる大きさ。画像は角丸、絵文字は OS の絵文字の書体。 */ .conv-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .conv-icon.is-emoji { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", var(--font-ui); line-height: 1; } .conv-icon.is-image { object-fit: cover; } .conv-item-head > .conv-icon { width: var(--conv-icon-list-size); height: var(--conv-icon-list-size); } .conv-item-head > .conv-icon.is-emoji { font-size: calc(var(--conv-icon-list-size) - var(--gap-xs)); } .conv-item-head > .conv-icon.is-image { border-radius: var(--radius-xs); } /* アイコンが無い会話の未設定の印: 薄い面（wash）に吹き出しの線（--text-faint）。押せない静的な印なので輪郭は持たせない */ .conv-item-head > .conv-icon.is-none { border-radius: var(--radius-xs); background: var(--wash); color: var(--text-faint); } .conv-icon.is-none .icon { width: 14px; height: 14px; } .conv-icon.is-provider { overflow: hidden; } .conv-icon.is-provider img { width: 100%; height: 100%; object-fit: contain; } .conv-item-head > .conv-icon.brand-ollama { background: var(--text); } .conv-item-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-ui); line-height: 1.5; } .conv-item.is-active .conv-item-title { font-weight: 600; } /* 六点グリップ（2026-09-14）。常設だが最弱の色で、行ホバー時だけ起こす */ .conv-drag-handle { flex: 0 0 auto; width: 10px; margin-right: -2px; font-size: 12px; line-height: 1; text-align: center; color: color-mix(in srgb, var(--text-faint) 55%, transparent); transition: color var(--t-fast) ease; } .conv-item:hover .conv-drag-handle, .conv-item:focus-visible .conv-drag-handle { color: var(--text-muted); } .conv-item-sub { display: flex; align-items: baseline; gap: var(--gap-s); min-width: 0; padding-left: 26px; } /* §12dl: iPhone の一覧の行だけに出す材料（送り手の丸・時刻・2 行目）。PC の行には出さない（ios.css が iPhone で出す） */ .conv-avatar, .conv-item-time, .conv-item-line { display: none; } .conv-item-queued { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--text-faint); line-height: 1.5; } .conv-item-badge { flex: 0 0 auto; font-size: var(--fs-micro); line-height: 1.6; white-space: nowrap; padding: 0 6px; border-radius: var(--radius-pill); color: var(--text-muted); background: var(--wash); } .conv-item-badge.is-danger { color: var(--danger); background: var(--danger-soft); } .conv-item-badge.is-wait { color: var(--state-wait); background: color-mix(in srgb, var(--state-wait) 14%, transparent); } /* §12br: 状態の色（ペインの面符号と同じ）: 作業中=オレンジ / 待機=黄 / 要対応=赤。行の地に薄く塗り、左端に同じ色の線。 開いている会話の目印（青い細い全周枠・太字）は状態の色より優先して残す */ .conv-row.is-running .conv-item { background: var(--run-tint); box-shadow: inset 2px 0 0 var(--state-run); color: var(--text); } .conv-row.is-waiting .conv-item { background: var(--wait-tint); box-shadow: inset 2px 0 0 var(--state-wait); color: var(--text); } .conv-row.is-attention .conv-item { background: var(--attn-tint); box-shadow: inset 2px 0 0 var(--danger); color: var(--text); } .conv-row.is-running:hover .conv-item { background: var(--run-tint-strong); } .conv-row.is-waiting:hover .conv-item { background: var(--wait-tint-strong); } .conv-row.is-attention:hover .conv-item { background: var(--attn-tint-strong); } .conv-row.is-running .conv-item.is-active, .conv-row.is-waiting .conv-item.is-active, .conv-row.is-attention .conv-item.is-active { box-shadow: inset 0 0 0 1px var(--accent); } .conv-item.is-thread-drag-src { outline: 1px solid var(--focus); outline-offset: -1px; } /* ===== §12bl: つないだPC（サイドバー。相手がいるときだけ） ===== 見出しは使用量と同じ。相手ごとに「状態の点・名前・種類・画面を開く・ファイル」の1行と、最近の会話（会話一覧の行をそのまま使う） */ .peers { flex: 0 0 auto; max-height: 32vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 0 -2px; padding: 10px 2px 6px; border-top: 1px solid var(--border); } .peers-head { display: flex; align-items: center; gap: 6px; padding: 0 0 0 6px; min-height: 24px; } .peers-title { flex: 1 1 auto; margin: 0; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; color: var(--text-faint); } .peers-head .btn-icon { width: 24px; height: 24px; } .peers-head .btn-icon .icon { width: 14px; height: 14px; } .peers-body { display: flex; flex-direction: column; gap: var(--gap-s); } .peer-head { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 2px 0 6px; } .peer-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--border-strong); } .peer-dot.is-online { background: var(--ok); } .peer-dot.is-offline { background: var(--text-faint); } .peer-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-ui); font-weight: 600; color: var(--text); } .peer-platform { flex: 1 1 auto; font-size: var(--fs-micro); color: var(--text-faint); white-space: nowrap; } .peer-head .btn-icon { width: 26px; height: 26px; flex: 0 0 auto; } .peer-head .btn-icon .icon { width: 15px; height: 15px; } .peer-error { margin: 2px 0 0; padding: 0 6px 0 19px; font-size: var(--fs-micro); color: var(--warn); } .peer-convs { display: flex; flex-direction: column; margin-top: 2px; } .conv-item.peer-conv { cursor: pointer; padding-left: 13px; } /* ===== 使用量（サイドバー常設） ===== 常に見えるダッシュボード。主役は残量%（18px/600）。1アカウント=1枚のカードで、 窓（5時間枠・週次枠…）は2列に並べて高さを半分にする（一覧の表示行数を確保するため） */ .usage { flex: 0 0 auto; max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap-s); margin: 0 -2px; padding: 10px 2px 2px; border-top: 1px solid var(--border); } .usage-head { display: flex; align-items: center; gap: 6px; padding: 0 0 0 6px; min-height: 24px; } .usage-title { flex: 0 0 auto; margin: 0; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; color: var(--text-faint); } .usage-time { margin-left: auto; font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } /* §12dx クレジット・リセット券の表示（題のすぐ右の tertiary の切替）。オンの間は --accent の文字と淡い面。隠している間に 追加クレジット ON・券の問題があれば --warn の小さな点（DESIGN「Codex追加クレジット」の「一目で分かる」を残す） */ .usage-head .usage-extras-toggle { position: relative; margin-left: -2px; } .usage-head .usage-extras-toggle[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .usage-extras-toggle.has-notice::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); } /* §12dx 会話一覧と使用量の境目（PC）。ペインの仕切りと同じく平常は透明、ホバー・ドラッグ中・キーボードで選んだときだけ 2px の青線。 高さ 0 の帯を使用量の上端の細線に重ね（上の隙間を打ち消す）、つかめる幅は上下 5px ずつ */ .usage-split { position: relative; flex: 0 0 auto; height: 0; margin-bottom: -6px; z-index: 2; touch-action: none; outline: none; } .usage-split::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; cursor: row-resize; background: linear-gradient(var(--accent), var(--accent)) no-repeat center / calc(100% - 12px) 0; transition: background-size var(--t-fast) ease; } .usage-split:hover::before, .usage-split.is-dragging::before, .usage-split:focus-visible::before { background-size: calc(100% - 12px) 2px; } :root:not(.is-mobile-client) .sidebar > .usage-split { order: 5; } .is-mobile-client .usage-split { display: none; } /* 高さを決めたあと（線を動かした・覚えた高さ）: 使用量はその高さ。窓が低ければ使用量から縮み、会話一覧は 120px 残す */ :root:not(.is-mobile-client) .sidebar.has-usage-height > .usage { flex: 0 1 var(--usage-h); max-height: none; min-height: 64px; } :root:not(.is-mobile-client) .sidebar.has-usage-height > .conv-list { min-height: 120px; } .usage-source-tabs { display: inline-flex; align-items: center; gap: var(--gap-xs); } .usage-source-tabs button { min-height: var(--control-h); padding: 0 var(--gap-s); border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-meta); cursor: pointer; } .usage-source-tabs button:hover { background: var(--surface-3); color: var(--text); } .usage-source-tabs button[aria-pressed="true"] { background: var(--surface-2); color: var(--accent); } .api-usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-s); } .api-usage-name { color: var(--text); font-weight: 600; } .api-usage-spent { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .api-usage-period, .api-usage-note, .api-usage-details { color: var(--text-faint); font-size: var(--fs-meta); } .api-usage-note { margin: var(--gap-xs) 0 var(--gap-s); } .api-usage-note.is-error { color: var(--warn); } .api-usage-metrics { display: flex; flex-wrap: wrap; gap: var(--gap-xs) var(--gap-s); color: var(--text-muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } .api-usage-metrics > span { white-space: nowrap; } .api-usage-details summary { cursor: pointer; color: var(--text-muted); } .api-usage-details p { margin: var(--gap-xs) 0; line-height: 1.6; } .usage-head .btn-icon { width: 24px; height: 24px; } .usage-head .btn-icon .icon { width: 14px; height: 14px; } /* カード（アカウント）どうしの切れ目を読みやすく（2026-09-30 ユーザー指摘「Claude・Codex・Codex Sub の境があいまい」で 6px → 8px） */ .usage-body { display: flex; flex-direction: column; gap: var(--gap-s); } .usage-note { margin: 0; padding: 0 6px; font-size: var(--fs-micro); color: var(--text-faint); } .usage-body > .acc-hidden-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs); padding: 0 6px; font-size: var(--fs-meta); } .usage-card { display: flex; flex-direction: column; gap: var(--gap-xs); padding: var(--gap-xs) var(--gap-s); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; } .usage-card > * { min-width: 0; } .usage-card-head { display: flex; align-items: center; gap: 6px; min-width: 0; } .usage-card-head .dot { width: 7px; height: 7px; } .usage-account-toggle { flex: 0 0 auto; width: 20px; height: 24px; margin-left: calc(-1 * var(--gap-xs)); } .usage-account-toggle .icon { width: 12px; height: 12px; transform: rotate(90deg); } .usage-card.is-collapsed .usage-account-toggle .icon { transform: none; } .usage-account-details { display: flex; flex-direction: column; gap: var(--gap-xs); } .usage-account-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--gap-xs); max-width: 65%; color: var(--text-muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } .usage-account-summary > span { white-space: nowrap; } .usage-account-summary .is-warn, .usage-account-warning { color: var(--warn); } .usage-account-summary .is-danger { color: var(--danger); } .usage-card.is-collapsed .usage-plan { display: none; } .usage-account-warning { font-size: var(--fs-meta); } .usage-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-ui); font-weight: 600; line-height: 1.4; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usage-plan { flex: 0 0 auto; font-size: 10.5px; color: var(--text-faint); padding: 0 6px; border-radius: var(--radius-pill); background: var(--wash); } .usage-row { display: grid; grid-template-columns: minmax(2ch, max-content) minmax(var(--gap-s), 1fr) 4ch; grid-template-rows: var(--gap-xl); align-items: center; column-gap: var(--gap-s); min-width: 0; min-height: var(--gap-xl); } .usage-row-top { display: flex; align-items: baseline; gap: var(--gap-xs); min-width: 0; } .usage-win { flex: 0 1 auto; min-width: 0; max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-meta); line-height: 1.3; color: var(--text-muted); } .usage-reset { grid-column: 1 / -1; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-micro); line-height: 1.4; color: var(--text-faint); font-variant-numeric: tabular-nums; } .usage-pct { text-align: right; font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .usage-bar { height: 5px; border-radius: var(--radius-pill); background: var(--wash-strong); overflow: hidden; } .usage-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); } .usage-row.is-warn .usage-bar-fill { background: var(--warn); } .usage-row.is-warn .usage-pct { color: var(--warn); } .usage-row.is-danger .usage-bar-fill { background: var(--danger); } .usage-row.is-danger .usage-pct { color: var(--danger); } .usage-detail { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usage-err { background: var(--danger-soft); border-left: 2px solid var(--danger); border-radius: var(--radius-s); padding: 4px 8px; font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.6; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .usage-stale { font-size: var(--fs-micro); color: var(--text-faint); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usage-pending { font-size: var(--fs-meta); color: var(--text-faint); } /* 追加クレジット（2026-09-30 ユーザー指示で作り直し「クレジットの利用は注意が必要なので、もっと目を引くデザインに」）: 残高は読むだけのデータ（枠なし・数字だけ太く）、利用の可否はスイッチ。ON はスイッチと「ON」の文字だけを注意色にする。 行ごとの囲みは同日「目立ちすぎて Claude・Codex・Codex Sub の境があいまい」でやめた（囲みの縁がカードの縁と競った） */ .usage-codex-credits, .usage-claude-credits { display: flex; flex-direction: column; min-width: 0; } .usage-credit-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs); min-width: 0; } .usage-credit-label { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--text-muted); } .usage-credit-balance { flex: 1 0 auto; min-width: 0; white-space: nowrap; font-size: var(--fs-meta); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .usage-credit-state { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--text-faint); } .usage-codex-credits.is-on .usage-credit-state, .usage-claude-credits.is-on .usage-credit-state { color: var(--warn); font-weight: 600; } /* §12ff API クレジット消費中（2026-10-10 ユーザー「かなりわかりやすくクレジット消費中って一目でわかるデザインにしてほしい」）: 返答している最中だけ、注意色（--warn）で塗ったカプセルにコインの印と文字。状態の面符号（作業中のオレンジ等）は薄い地と線で、 色相が近いので、塗りつぶしの形・コインの印・文字で見分ける。押せない静的な札なので輪郭・ホバーは持たせない。 終わった返答の札は注意色の文字だけに戻す（過去の返答が並んでも騒がしくしない） */ .credit-pill, .badge.badge-api-credit.is-live, .conv-item-badge.is-credit, .usage-credit-live { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; background: var(--warn); color: var(--on-warn); font-weight: 650; border-radius: var(--radius-s); } .credit-pill { gap: 4px; height: 22px; padding: 0 9px 0 6px; font-size: var(--fs-meta); } .credit-pill .icon { width: 15px; height: 15px; } .badge.badge-api-credit { gap: 4px; color: var(--warn); font-weight: 600; } .badge.badge-api-credit .icon { width: 14px; height: 14px; } .badge.badge-api-credit.is-live { padding: 1px 8px 1px 5px; color: var(--on-warn); } .conv-item-badge.is-credit { gap: 2px; padding: 0 6px 0 3px; font-size: var(--fs-micro); line-height: 1.6; } .conv-item-badge.is-credit .icon { width: 12px; height: 12px; } .usage-credit-live { align-self: flex-start; margin-top: 3px; gap: 3px; padding: 0 7px 0 4px; font-size: var(--fs-micro); line-height: 1.6; } .usage-credit-live .icon { width: 12px; height: 12px; } /* 送る前の注記: 送信の注記と同じガラスの小片に、注意色の文字とコインの印（塗らない＝まだ使っていない） */ .composer > .composer-note.composer-credit:not([hidden]) { display: flex; align-items: center; gap: 6px; color: var(--warn); font-weight: 600; } .composer-credit .icon { width: 15px; height: 15px; } /* §12eq Claude の無料APIクレジット: 残りは読むだけのデータ（追加クレジットの残高と同じ格）。設定は控えめな押せる部品（ghost） */ .btn-ghost.usage-credit-setup { flex: 0 0 auto; font-size: var(--fs-meta); padding: 3px 8px; } /* スイッチ: 押せる部品なので面（トラック）と輪郭を持つ。OFF は中立の灰、ON は注意色で塗ってつまみを右へ */ .usage-credit-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--gap-xs); min-height: var(--icon-btn); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 600; line-height: 1; color: var(--text-muted); transition: background var(--t-fast) ease; } .usage-credit-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .usage-credit-toggle:hover { background: var(--wash); } .usage-credit-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .usage-credit-toggle:disabled { opacity: .5; cursor: not-allowed; } .usage-credit-toggle:disabled:hover { background: transparent; } .usage-credit-track { position: relative; flex: 0 0 auto; width: 30px; height: 16px; border-radius: var(--radius-pill); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); transition: background var(--t-fast) var(--ease); } .usage-credit-knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .usage-credit-toggle[aria-checked="true"] { color: var(--warn); } .usage-credit-toggle[aria-checked="true"] .usage-credit-track { background: var(--warn); box-shadow: none; } .usage-credit-toggle[aria-checked="true"] .usage-credit-knob { transform: translateX(14px); background: var(--canvas); } /* 無料APIクレジットのスイッチ（2026-10-12・iPhone と同じく行で切り替える）: 無料分なので ON は注意色ではなくアクセントの青。 使っている最中は「消費中」の注意色の札で知らせる。鍵・月の額の設定は右端の歯車（アイコンだけの tertiary） */ .usage-credit-toggle.is-free[aria-checked="true"] { color: var(--accent); } .usage-credit-toggle.is-free[aria-checked="true"] .usage-credit-track { background: var(--accent); } .btn-ghost.btn-icon.usage-credit-setup.is-icon { width: 24px; height: 24px; padding: 0; } .usage-credit-main.has-switch .usage-credit-toggle { margin-left: auto; } .usage-credit-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--gap-s); min-width: 0; } .usage-credit-sub .usage-credit-balance { flex: 0 1 auto; } .usage-credit-sub .usage-credit-live { align-self: center; margin-top: 0; } .btn-ghost.btn-icon.usage-credit-setup.is-icon .icon { width: 15px; height: 15px; } /* リセット券（2026-09-30 ユーザー指示で作り直し「妙に詳細まで書かれている。もっとコンパクトでいい」）: Claude・Codex 共通の1行「リセット券 N枚 · 補足（期限・予約中など） ……［操作］」。対象枠・正確な期限は title と使用前の確認へ */ .usage-reset-line { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .usage-reset-row { display: flex; align-items: center; gap: var(--gap-xs); min-width: 0; min-height: 24px; } /* 枚数は縮めない（切れるのは補足のほう） */ .usage-reset-label { flex: 0 0 auto; white-space: nowrap; font-size: var(--fs-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; } .usage-reset-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .usage-reset-meta::before { content: '· '; } /* 操作は行の右端へ寄せる（最初の操作だけ margin-left:auto） */ .usage-reset-row > button { flex: 0 0 auto; } .usage-reset-row > span + button { margin-left: auto; } /* 使う（消費は取り消せない）は枠付き secondary の小さい形。予約・取消・再確認は文字だけの tertiary */ .btn.usage-reset-use, .btn.usage-reset-action { min-height: 22px; padding: 0 10px; border-radius: var(--radius-s); font-size: var(--fs-micro); font-weight: 600; } .btn.usage-reset-use:hover:not(:disabled), .btn.usage-reset-action:hover:not(:disabled) { border-color: var(--accent); } .btn-ghost.usage-reset-reserve, .btn-ghost.usage-reset-reserve-cancel, .btn-ghost.usage-reset-recheck { min-height: 22px; padding: 0 6px; font-size: var(--fs-micro); } .usage-reset-status { font-size: var(--fs-micro); line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; } .usage-reset-status.is-danger { color: var(--danger); } .usage-reset-problem { display: flex; align-items: center; gap: var(--gap-xs); min-width: 0; } .usage-reset-problem > .usage-reset-status { flex: 1 1 auto; min-width: 0; } /* 文字ボタン（ログイン設定・旧サーバの公式リンク）の文字をカードの本文の左端にそろえる（ホバー面だけ外へはみ出す） */ .btn-ghost.usage-relogin, .btn-ghost.usage-reset-official { align-self: flex-start; flex: 0 0 auto; font-size: var(--fs-meta); padding: 3px 8px; margin-left: -8px; } /* 計画再起動の待機（§12l）。静的な進行表示 */ .restart-note { display: flex; align-items: center; gap: var(--gap-s); flex: 0 0 auto; padding: 0 var(--gap-xs); white-space: nowrap; font-size: var(--fs-meta); color: var(--warn); line-height: 1.5; } .sidebar-foot { flex-wrap: wrap; } .sidebar-rail .restart-note { margin-left: var(--gap-xs); } :root:not(.is-mobile-client).is-sidebar-hidden.has-pending-update .sidebar-rail { display: flex; align-items: flex-start; } .sidebar-rail .restart-note { min-height: var(--icon-btn); } /* 下端: 接続状態（静的）と、頻度の低い道具（レイアウト・リモート・Auto・設定） */ .sidebar-foot { display: flex; align-items: center; gap: 2px; padding-top: 8px; border-top: 1px solid var(--border); } .conn-state { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding-left: 6px; font-size: var(--fs-micro); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conn-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--text-faint); } /* 平常（接続済み）は緑のドットだけで静かに。接続中・切断のときだけ文言で知らせる */ .conn-state.is-live { color: var(--text-muted); font-size: 0; gap: 0; } .conn-state.is-live::before { background: var(--ok); } .conn-state.mobile-connection-state.is-live { font-size: var(--fs-micro); gap: 6px; } /* モバイルの上端バーは幅に余裕があるので文言も出す */ .conn-state.is-down { color: var(--warn); } .conn-state.is-down::before { background: var(--warn); } .sidebar-tools { display: flex; align-items: center; gap: 2px; } .sidebar-tools .layout-pick { position: relative; } .sidebar-tools .menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; } .layout-pick { position: relative; flex: 0 0 auto; } /* §12bq: 並べ方の選択（横6×縦2のマス目をなぞって選ぶ）。マスは押せる部品なので沈んだ面＋輪郭、 選ぶ範囲（と現在の並び）は --accent で塗る。現在か候補かは下の文言で区別する */ .menu.layout-grid-menu { min-width: 0; padding: 6px 10px 10px; } .layout-grid-menu .menu-label { padding: 0 0 6px; } .layout-grid { display: grid; gap: 4px; } .layout-cell { width: 28px; height: 20px; padding: 0; background: var(--sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); cursor: pointer; transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } .layout-cell.is-on { background: color-mix(in srgb, var(--accent) 45%, var(--sunken)); border-color: var(--accent); } .layout-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .layout-grid-caption { margin-top: 8px; font-size: var(--fs-meta); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .sidebar-foot .btn-icon .icon { width: 17px; height: 17px; } /* ===== §12bw: PC の画面のサイドバーの並び（2026-09-30 ユーザー指示）===== 上から「道具の列（接続状態・レイアウト・CLI 取込・リモート・Auto・設定）→ 開発中のプロジェクト詳細 → 会話一覧 → 検索 → つないだPC → 使用量」。 アプリ名は Windows のタイトルバーに任せ、サイドバーの名前（.brand）は出さない（名前が上下に2つ並んでいたため）。 ［＋ 新しい会話］は出さない（新しい会話は空きペインから）。設定もアイコンだけ（歯車）。 並べ替えは DOM を動かさず order で行う: 窓を細くすると同じ DOM が iPhone と同じ引き出し（.is-mobile-client）になり、そちらは従来の並びのまま */ :root:not(.is-mobile-client):not(.is-desktop-host) .sidebar { padding-top: 8px; } :root:not(.is-mobile-client):not(.is-desktop-host) .sidebar > .brand { display: none; } :root:not(.is-mobile-client) .sidebar > .brand { order: -3; } :root:not(.is-mobile-client) .sidebar > .sidebar-foot { order: -2; padding: 0 0 8px; border-top: 0; border-bottom: 1px solid var(--border); } :root:not(.is-mobile-client) .sidebar > .execution-context { order: -1; } :root:not(.is-mobile-client) .sidebar > .sidebar-actions { display: none; } :root:not(.is-mobile-client) .sidebar > .hangar-entry-wrap { order: 1; } :root:not(.is-mobile-client) .sidebar > .conv-list { order: 2; } :root:not(.is-mobile-client) .sidebar > .search-box { order: 0; margin-top: 0; } :root:not(.is-mobile-client) .sidebar > .peers { order: 4; } :root:not(.is-mobile-client) .sidebar > .usage { order: 5; } :root:not(.is-mobile-client) .sidebar > .restart-note { order: 0; } /* 並べ方のメニューは上端の列から下へ開く */ :root:not(.is-mobile-client) .sidebar-tools .menu { top: calc(100% + 6px); bottom: auto; } /* 道具の列に移した CLI 取込は、列の他のアイコンと同じ大きさ */ .sidebar-tools .btn-ghost.btn-import { width: var(--icon-btn); height: var(--icon-btn); } /* §12bw: 会話一覧の一番上に固定した「開発中のプロジェクト詳細」の行。会話の行と同じ部品（押せる行・六点グリップ・ ペインに出ている間は選択の面と青線）で、プロバイダの点の代わりに格子のアイコン。会話ではないので細線で一覧と区切る */ .hangar-entry-wrap { flex: 0 0 auto; margin: 0 -6px; padding: 0 6px 6px; border-bottom: 1px solid var(--border); } .hangar-entry-wrap[hidden] { display: none; } .hangar-entry-icon { width: 14px; height: 14px; color: var(--text-muted); } .conv-item.is-active .hangar-entry-icon { color: var(--accent); } .pane-recent-sep { height: 1px; margin: 3px 6px; background: var(--border); } /* Auto設定・調査。状態があるときだけ短い文言を添える（承認待ちは warn） */ .btn-ghost.btn-operations { position: relative; } .btn-ghost.btn-operations.has-status { width: auto; padding: 0 8px 0 6px; gap: 5px; white-space: nowrap; } .ops-status { font-size: var(--fs-micro); font-weight: 600; color: var(--accent); white-space: nowrap; } .btn-operations.is-waiting .ops-status { color: var(--warn); } /* =========================================================== 5. ペイン =========================================================== */ .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 8px 8px 8px 0; background: var(--canvas); } .main:has(~ .preview:not([hidden])) { padding-right: 0; } /* ペイングリッド（v1.5）。列/行トラックは app.js の renderGridTracks() が 「ペイン / 仕切り / ペイン …」の順で inline 指定する。仕切り（6px）がそのまま溝になる */ .panes { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } /* ペイン1枚＝窓の地に浮いた1枚のパネル */ .pane { position: relative; transform-origin: top left; isolation: isolate; /* 浮き台の重なり順をペインの中に閉じる */ min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-l); transition: border-color var(--t-mid) ease; } .panes.is-multi .pane.is-active { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); } /* 状態の面符号: 稼働=オレンジ / 要対応=赤 / 裏で待機=黄（2026-09-30 緑から変更）。1ペイン1色（優先度は app.js）。 本文のカード・吹き出しは不透明なので可読性は変わらない。会話一覧の行も同じ色（.conv-row.is-*） */ .pane.is-running { background: var(--run-tint); } .pane.is-running .topbar { background: var(--run-tint-strong); border-bottom-color: color-mix(in srgb, var(--state-run) 55%, var(--border)); } .pane.is-attention { background: var(--attn-tint); } .pane.is-attention .topbar { background: var(--attn-tint-strong); border-bottom-color: color-mix(in srgb, var(--danger) 50%, var(--border)); } .pane.is-waiting { background: var(--wait-tint); } .pane.is-waiting .topbar { background: var(--wait-tint-strong); border-bottom-color: color-mix(in srgb, var(--state-wait) 50%, var(--border)); } /* ペインのドラッグ入れ替え（§12s）・一覧からのドラッグ */ .panes.is-multi .topbar, .panes.is-multi .conv-title { cursor: grab; } .panes.is-multi .topbar { touch-action: none; } body.is-pane-dragging { cursor: grabbing; user-select: none; } body.is-pane-dragging * { cursor: grabbing !important; } .pane.is-drag-src { opacity: 1; } .pane.is-pane-moving { z-index: 5; will-change: transform; } /* §12ex ファイルのドロップ（is-file-drop）も、会話の移動（is-drop-target）と同じ縁と札で「ここに落とせる」を示す */ .pane.is-drop-target, .pane.is-file-drop { outline: 2px solid var(--accent); outline-offset: -2px; } .pane.is-drop-target::after, .pane.is-file-drop::after { content: attr(data-drop-hint); position: absolute; right: var(--gap-m); bottom: var(--gap-m); z-index: 10; max-width: calc(100% - var(--gap-xl)); pointer-events: none; padding: 5px 10px; border-radius: var(--radius-m); background: var(--surface-2); color: var(--text); border: 1px solid var(--focus); box-shadow: var(--elev-2); font: var(--fs-meta)/1.5 var(--font-ui); } .pane-drag-ghost { position: fixed; left: 0; top: 0; z-index: 10050; pointer-events: none; width: 320px; max-width: calc(100vw - var(--gap-xl)); will-change: transform; } .pane-drag-card { padding: var(--gap-m) var(--gap-l); border: 1px solid var(--accent); border-radius: var(--radius-l); background: var(--surface-2); color: var(--text); box-shadow: var(--elev-3); transform-origin: top left; font-family: var(--font-ui); } .pane-drag-title { font-size: var(--fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pane-drag-hint { margin-top: var(--gap-xs); font-size: var(--fs-meta); color: var(--text-muted); } /* 仕切り。平常は溝（透明）、ホバー・ドラッグ中だけ中央に青い線 */ .pane-split { background: transparent; touch-action: none; background-repeat: no-repeat; background-position: center; transition: background-color var(--t-fast) ease; } .pane-split-col { cursor: col-resize; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 100%; } .pane-split-row { cursor: row-resize; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 0; } .pane-split-col:hover, .pane-split-col.is-dragging { background-size: 2px calc(100% - 24px); } .pane-split-row:hover, .pane-split-row.is-dragging { background-size: calc(100% - 24px) 2px; } /* 狭いペイン（ResizeObserver が幅 560px 未満で付ける）。余白を詰め、cwd を最初に諦める */ .pane.is-narrow .topbar { padding: 6px 6px 6px 12px; gap: var(--gap-s); } .pane.is-narrow .topbar .chip:not(.ctx-chip) { display: none; } /* §12fv: 見出しの道具が 1 つ増えた（［選ぶ］）ので、狭いペインでは文脈量の札の「コンテキスト」の文言を隠して数字だけにする（全文は title。API クレジットの札と同じ扱い） */ .pane.is-narrow .ctx-chip .ctx-label { display: none; } .pane.is-narrow .stream { padding: 14px 12px calc(var(--dock-h, 0px) + var(--gap-m)); } .pane.is-narrow .composer { padding: 2px 12px 10px; } .pane.is-narrow .bubble { max-width: 92%; } /* §12bq: さらに狭いペイン（330px 未満。横6列を 1920px 幅で並べた 270px 前後）。 ヘッダは文脈量の表示を諦めて閉じるボタンを残す。入力欄の設定は1行のまま「思考量」の見出しを諦めて値（段階の色）だけにし （読み上げ名とツールチップには「思考量」が残る）、値の短い思考量は縮めずに長いモデル名から省略する */ .pane.is-tight .topbar .ctx-chip { display: none; } /* §12fv: 見出しの道具が 7 つになったので、さらに狭いペインでは道具のボタンの幅だけ 24px に詰める（高さ 28px の押せる範囲は残す） */ .pane.is-tight .topbar-tools .btn-icon { width: 24px; } .pane.is-tight .credit-pill > span { display: none; } /* §12ff: 狭いペインはコインの印だけ（文言は title） */ .pane.is-tight .credit-pill { padding: 0 4px; } .pane.is-tight .conv-title { min-width: 4ch; } .pane.is-tight .tuning-effort-label { display: none; } .pane.is-tight .composer-tuning-trigger { overflow: hidden; padding: 0 8px; } .pane.is-tight .composer-effort-trigger { flex-shrink: 0; } /* ===== ペインヘッダ ===== */ .topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); background: transparent; transition: background var(--t-mid) ease; } .topbar-spacer { flex: 1 1 auto; } .topbar-tools { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; } .pane-dot { width: 9px; height: 9px; flex: 0 0 auto; } .topbar > .spinner { width: 11px; height: 11px; } /* §12dy 題の左の会話のアイコン（付いているときだけ）。押すと選ぶ窓なので tertiary（枠なし・ホバーで --wash） */ .conv-icon-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--conv-icon-header-size) + var(--gap-s)); height: calc(var(--conv-icon-header-size) + var(--gap-s)); margin: 0 calc(-.75 * var(--gap-s)) 0 calc(-1 * var(--gap-xs)); padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; cursor: pointer; transition: background var(--t-fast) ease; } .conv-icon-btn:hover:not(:disabled) { background: var(--wash); } .conv-icon-btn:disabled { cursor: default; } .conv-icon-btn > .conv-icon { width: var(--conv-icon-header-size); height: var(--conv-icon-header-size); } .conv-icon-btn > .conv-icon.is-emoji { font-size: calc(var(--conv-icon-header-size) - var(--gap-xs)); } .conv-icon-btn > .conv-icon.is-image { border-radius: var(--radius-s); } /* §12dy アイコンを選ぶ窓。絵文字は 8 列の格子（押せるので tertiary の升目: ホバーで --wash、選ばれているものは選択の面と青の輪）、 下にほかの絵文字の欄、画像の行（secondary）。外すは左端の tertiary（ダイアログの取り消し系の置き方） */ .conv-icon-dialog { width: min(420px, calc(100vw - 32px)); } /* §12ea 題（一覧の行）のすぐ下に出す吹き出し。画面全体は暗くしない（どの会話の操作かを見失わない）。暗い地から浮かせるのは影と枠だけ。 位置は conv-icon.js が基準の要素から決める */ .conv-icon-dialog.is-anchored { position: fixed; inset: auto; margin: 0; z-index: 150; max-height: calc(100vh - 16px); box-shadow: var(--elev-3); } .conv-icon-dialog.is-anchored[open] { animation: conv-icon-pop var(--t-fast) var(--ease); } @keyframes conv-icon-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .conv-icon-name { margin: -6px 0 0; font-size: var(--fs-meta); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-icon-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; } .conv-icon-choice { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-m); background: transparent; cursor: pointer; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", var(--font-ui); font-size: 20px; line-height: 1; transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } .conv-icon-choice:hover:not(:disabled) { background: var(--wash); } .conv-icon-choice[aria-pressed="true"] { background: var(--selection); border-color: var(--accent); } .conv-icon-custom { display: flex; gap: var(--gap-s); } .conv-icon-custom > .input { flex: 1 1 auto; min-width: 0; } .conv-icon-images { display: flex; flex-wrap: wrap; gap: var(--gap-s); } .conv-icon-images > .btn { display: inline-flex; align-items: center; gap: 6px; } /* §12dz 開発中のアプリのアイコン: 絵文字と同じ枡に画像を入れる。作業フォルダのアプリは枠を accent で示す（押した状態と同じ表し方は避け、枠だけ） */ .conv-icon-apps { display: flex; flex-direction: column; gap: 4px; max-height: 168px; overflow-y: auto; } .conv-icon-apps-label { margin: 0; font-size: var(--fs-meta); color: var(--text-muted); } .conv-icon-app > img { width: 24px; height: 24px; border-radius: var(--radius-xs); object-fit: cover; display: block; } .conv-icon-app.is-current { border-color: var(--accent); } .conv-icon-dialog .modal-actions > .conv-icon-remove { margin-right: auto; } .conv-title { flex: 0 1 auto; min-width: 10ch; max-width: 46ch; background: transparent; border: 0; border-radius: var(--radius-s); padding: 3px 6px; margin-left: -6px; font-family: var(--font-display); font-size: var(--fs-title); font-weight: 650; color: var(--text); letter-spacing: .005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: background var(--t-fast) ease; } .conv-title:hover { background: var(--wash); } .conv-title-input { width: 40ch; max-width: 100%; background: var(--input-bg); border: 1px solid var(--focus); border-radius: var(--radius-s); box-shadow: var(--ring); padding: 2px 6px; font-family: var(--font-display); font-size: var(--fs-title); font-weight: 650; } .conv-title-input:focus { outline: none; } /* cwd・文脈量は静的データ。枠も面も持たせず、文字の格だけで下げる */ .chip { flex: 0 10 auto; min-width: 0; max-width: 42ch; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-chip { flex: 0 0 auto; font-family: var(--font-ui); font-size: var(--fs-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; padding-left: 10px; border-left: 1px solid var(--border); } /* 実行タイマー（見積に対する経過。完了率ではない） */ .run-timer { display: grid; gap: 4px; flex: 0 1 208px; min-width: 176px; font-size: var(--fs-meta); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 2px 4px 0; cursor: default; } .run-timer-labels { display: flex; justify-content: space-between; gap: var(--gap-s); line-height: 1.3; } .run-timer-remaining { color: var(--text-muted); font-weight: 500; } .run-timer-track { display: block; height: 4px; overflow: hidden; background: color-mix(in srgb, var(--warn) 18%, transparent); border-radius: var(--radius-pill); } .run-timer-fill { display: block; width: 100%; height: 100%; background: var(--warn); border-radius: var(--radius-pill); transform: scaleX(var(--run-progress, 0)); transform-origin: left; transition: transform var(--t-mid) ease; } .run-timer.is-over .run-timer-remaining { color: var(--text); } .run-timer.is-indeterminate .run-timer-fill { background: repeating-linear-gradient(110deg, transparent 0 var(--gap-xs), var(--warn) var(--gap-xs) var(--gap-s)); opacity: .5; transition: none; } .pane.is-narrow .topbar:has(.run-timer:not([hidden])) { flex-wrap: wrap; } /* 実行中はタイマーに場所を譲り、cwd を畳む（タイトルと文脈量を優先） */ .topbar:has(.run-timer:not([hidden])) > .chip:not(.ctx-chip) { display: none; } .pane.is-narrow .run-timer { order: 10; flex: 1 0 100%; min-width: 0; } /* 稼働状況の細帯（ヘッダ直下の details） */ .run-activity { flex: 0 0 auto; min-width: 0; padding: 5px 16px; border-bottom: 1px solid var(--border); color: var(--text-faint); font-size: var(--fs-meta); line-height: 1.6; } .run-activity-summary { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; list-style: none; cursor: pointer; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; transition: color var(--t-fast) ease; } .run-activity-summary::-webkit-details-marker { display: none; } .run-activity-summary::before, .progress-report-history > summary::before, .research-result > summary::before { content: ""; width: 10px; height: 10px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--mask-chevron) center / contain no-repeat; mask: var(--mask-chevron) center / contain no-repeat; transition: transform var(--t-fast) var(--ease); } .run-activity[open] > .run-activity-summary::before, .progress-report-history[open] > summary::before, .research-result[open] > summary::before { transform: rotate(90deg); } .run-activity-summary:hover { color: var(--text); } .run-activity-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .run-activity.is-unconfirmed .run-activity-summary { color: var(--text); } .run-activity-body { padding: 6px 0 4px 16px; max-height: 180px; overflow-y: auto; color: var(--text-muted); } .run-activity-lines { white-space: pre-line; overflow-wrap: anywhere; margin-bottom: var(--gap-s); } /* =========================================================== 6. 会話ストリーム =========================================================== */ /* 横スクロールはコードフェンスの中だけに閉じ込める（v1.17.5 の教訓: overflow-y だけだと横も auto になる） */ /* 入力欄（下端の浮き台 .pane-dock）はストリームの上に重なる。台の高さ（--dock-h・app.js が実測）だけ 下に余白を取り、最下部では最後の発言が台の上に見え、遡ると台のガラス越しにぼけて流れる。 溝を常に確保（scrollbar-gutter）して、台をスクロールバーの手前で止め、列の中心をそろえる */ .stream { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 20px 24px calc(var(--dock-h, 0px) + var(--gap-l)); scrollbar-gutter: stable; scroll-behavior: auto; /* 入力欄の下端より下（ペインの縁まで）に会話がくっきり覗かないよう、最下部だけ溶かす（スクロール端の効果） */ -webkit-mask-image: linear-gradient(to top, transparent var(--gap-xs), var(--shadow-ink) var(--gap-xl)); mask-image: linear-gradient(to top, transparent var(--gap-xs), var(--shadow-ink) var(--gap-xl)); } .stream-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; overflow-wrap: break-word; } /* §12fl 会話の流れの先頭の［以前のメッセージ N 件を表示］（tertiary。作業ログの［以前の作業ログ N 件を表示］と同じ扱いの文字ボタン）。 長い会話は最近の分だけを描き、古い分は押したときに足す */ .btn-ghost.stream-older { align-self: center; min-height: 28px; padding: 3px 12px; font-size: var(--fs-meta); color: var(--accent); } .phase > *, .ahead > *, .afoot > * { min-width: 0; } /* ----- あなたの発言（右寄せの吹き出し。メタは吹き出しの下） ----- */ .msg-user { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .msg-user > .uhead { order: 2; } .uhead { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; min-height: 24px; padding: 0 2px; } .to-label { font-size: var(--fs-meta); color: var(--text-faint); } .to-label.prov-claude { color: color-mix(in srgb, var(--accent-claude) 85%, var(--text)); } .to-label.prov-codex { color: color-mix(in srgb, var(--accent-codex) 85%, var(--text)); } .to-label.prov-gemini { color: color-mix(in srgb, var(--accent) 85%, var(--text)); } .to-label.prov-ollama { color: var(--text-muted); } .queue-model { min-width: 0; overflow-wrap: anywhere; } .queue-param.opt-sel { width: auto; max-width: min(28ch, 100%); min-width: 0; font-size: var(--fs-meta); min-height: var(--control-h); padding-inline: var(--gap-s); } .queue-param:disabled { opacity: .55; } .queue-speed { display: inline-flex; align-items: center; flex: 0 0 auto; } .queue-speed .icon { width: var(--fs-ui); height: var(--fs-ui); } .bubble { max-width: min(78%, 700px); padding: 10px 14px; background: var(--user-bubble); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 14px 14px 4px 14px; } .bubble .md { font-size: var(--fs-body); } /* §12cx: 長い会話を開く速さ。画面の外の古い発言はレイアウトと描画を後回しにする（見えてから計る。一度描いた大きさは覚える）。 400 件近い会話では、開くたびの全体のレイアウトが描画の時間の 2/3 を占めていた。直近の数件（読んでいる・操作する所）は対象外 */ .stream-inner > .msg:nth-last-child(n+7) { content-visibility: auto; contain-intrinsic-size: auto 180px; } /* §12cx: 会話の取得を待つ間。開く会話の題だけ先に出し、前の会話の中身は隠して「読み込み中…」を真ん中に */ .pane.is-loading-conv .stream > :not(.conv-loading) { display: none; } .conv-loading { display: flex; align-items: center; justify-content: center; gap: var(--gap-s); min-height: 50%; color: var(--text-muted); font-size: var(--fs-meta); } /* 待機中・予約の発言: 同じ吹き出しのまま、破線の輪郭と弱い文字で「まだ送られていない」を示す */ .queue-list { display: flex; flex-direction: column; gap: 18px; } /* つまみだけが操作部。本文とAI名の静かな表示を保ち、移動中だけ行き先を空ける。 */ .queue-grip.btn-icon { flex: 0 0 auto; cursor: grab; touch-action: none; user-select: none; color: var(--text-muted); } .is-queue-dragging { position: relative; z-index: 1; } .is-queue-dragging .queue-grip { cursor: grabbing; color: var(--accent); background: var(--wash); } .msg-queued.is-queue-dragging .bubble { border-color: var(--accent); box-shadow: var(--elev-3); } .is-queue-shifting { transition: transform var(--t-mid) var(--ease); } .msg-queued .bubble { color: var(--text-muted); background: var(--surface); border-style: dashed; border-color: var(--border-strong); } .queue-badge, .inject-badge { flex: 0 0 auto; } /* §12by: 待機中の吹き出しの［割り込む］。✕ と同じ tertiary（文字だけ・ホバーで洗い）で、割り込める実行中だけ出る */ .btn-ghost.queue-inject { flex: 0 0 auto; padding: 2px 8px; font-size: var(--fs-meta); } /* §12cw: 質問への回答を待って止めている待機文の［このまま送る］。［割り込む］と同じ tertiary */ .btn-ghost.queue-release { flex: 0 0 auto; padding: 2px 8px; font-size: var(--fs-meta); } /* 割り込みの配達状態（静的な文字だけ。押せる部品と同じ枠や面は持たせない） */ .inject-state { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--text-faint); } .inject-state.is-pending { color: var(--text-muted); } .autoresume-badge, .schedule-badge { flex: 0 0 auto; color: var(--warn); } .sched-error { margin-top: var(--gap-xs); font-size: var(--fs-meta); color: var(--warn); } /* ----- AI の発言（不透明カード。左端の細い線と見出しの色で出自を示す） ----- */ .ablock { --prov: var(--border-strong); position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: inset 2px 0 0 var(--prov), var(--elev-1); padding: 12px 18px 14px 20px; } .ablock.prov-claude { --prov: var(--accent-claude); } .ablock.prov-codex { --prov: var(--accent-codex); } .ablock.prov-gemini { --prov: var(--accent); } .ablock.prov-ollama { --prov: var(--text-muted); } .ablock.prov-chatgpt { --prov: var(--text-muted); } .ahead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 26px; margin-bottom: 6px; } .ahead .badge.prov-claude, .ahead .badge.prov-codex { font-weight: 600; } .ahead .model { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); } .ahead .time { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .ahead .msg-copy { margin-left: auto; } .afoot { display: flex; align-items: center; gap: var(--gap-m); flex-wrap: wrap; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--border); font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .btn-retry { font-size: var(--fs-meta); margin-left: auto; } /* §12ds: エラー停止の［確認済み］（赤い表示を消すだけ）。再試行と同じ大きさの ghost で、再試行の右に並べる */ .btn-dismiss-attention { font-size: var(--fs-meta); } /* コピー・返信は常時表示。ホバー時は既存の ghost の見た目で反応する */ .msg-copy { width: 26px; height: 26px; opacity: 1; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .msg-copy .icon { width: 14px; height: 14px; } .msg .md, .pane .composer-input, .pane .jukeblox-question textarea { font-family: var(--conversation-font-family); font-size: var(--conversation-font-size); line-height: 1.7; font-kerning: normal; font-feature-settings: normal; } .msg .md h1 { font-size: 1.35em; } .msg .md h2 { font-size: 1.2em; } .msg .md h3, .msg .md h4, .msg .md h5, .msg .md h6 { font-size: 1.05em; } .msg .md code, .msg .md pre code { font-size: .9em; } .msg .md table { font-size: inherit; } /* 実行フェーズ・思考インジケータ（§12z） */ .phase { display: flex; align-items: center; gap: var(--gap-s); font-size: var(--fs-ui); color: var(--text-muted); margin: 4px 0; } .think-spark { color: var(--accent-claude); display: inline-block; animation: think-pulse 1.6s ease-in-out infinite; } .think-elapsed { color: var(--text-faint); font-variant-numeric: tabular-nums; margin-right: -4px; } /* §12bp: 思考ブロックで届いた最新の途中経過。決まり文句の代わりに1行（長い分は省略記号、全文はツールチップ） */ .think-note { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @keyframes think-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } /* 延命（§12n）・外部作業の待機表示 */ /* 待機中・外部作業の完了待ちはストリーム直下（本文の列の外）に置かれるので、列と同じ幅・中央にそろえる （2026-09-29 ユーザー指摘「ここのメッセージがやりとり中のメッセージより幅が広い」） */ .linger-note { display: flex; align-items: center; gap: var(--gap-s); max-width: 860px; margin: var(--gap-s) auto 0; padding: 6px 10px; border-radius: var(--radius-m); background: var(--wash); font-size: var(--fs-meta); color: var(--text-muted); } .linger-note-text { min-width: 0; } .linger-end { font-size: var(--fs-meta); margin-left: auto; flex: none; } .external-task-note { flex-direction: column; align-items: stretch; } /* §12cu 自動で続けるの状態（オンの間だけストリーム末尾に出る。待機中の表示と同じ静的な枠＋［オフにする］） */ .auto-continue-mark { flex: none; } .auto-continue-text { font-variant-numeric: tabular-nums; } /* §12dg 回数の選択と［オフにする］は1つのまとまり（右寄せ）。狭い画面では文の下の行へ一緒に折り返す */ .auto-continue-note { flex-wrap: wrap; } .auto-continue-note .auto-continue-text { flex: 1 1 14em; } .auto-continue-actions { display: inline-flex; align-items: center; gap: var(--gap-xs); flex: none; margin-left: auto; } .auto-continue-actions .linger-end { margin-left: 0; } /* 回数の選択: ［オフにする］と同じ tertiary の格（面なし・ホバーで --wash）に ▾ を添え、押すと一覧が開くことを示す。 見えるのは名札（.auto-continue-max-face）で、ネイティブの select は透明にして上に重ねる（iPhone で拡大させない 16px） */ .auto-continue-max-pick { position: relative; flex: none; display: inline-flex; align-items: center; padding: var(--gap-xs) 20px var(--gap-xs) var(--gap-s); border-radius: var(--radius-s); color: var(--text-muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .auto-continue-max-pick:hover { background: var(--wash); color: var(--text); } .auto-continue-max-pick:focus-within { background: var(--wash); color: var(--text); box-shadow: 0 0 0 1px var(--focus) inset; } .auto-continue-max-pick::after { content: ""; position: absolute; right: 7px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: currentColor; pointer-events: none; -webkit-mask: var(--mask-chevron) center / contain no-repeat; mask: var(--mask-chevron) center / contain no-repeat; transform: rotate(90deg); } .auto-continue-max { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none; border: 0; font-size: 16px; } .auto-continue-max:disabled { cursor: default; } .auto-continue-max option { background: var(--surface); color: var(--text); } .afoot-autocontinue { color: var(--text-muted); } .external-task-note .run-activity-lines { margin-bottom: 0; } /* §12dt: 作業ごとの詳しい行は［詳細］に畳む（自動状況報告の履歴と同じ .progress-report-history の畳み）。開いた中身は見出しの下に1行あけて置く */ .external-task-details > .run-activity-lines { display: block; margin-top: var(--gap-xs); } .btn-ghost.external-task-dismiss { align-self: flex-start; max-width: 100%; font: inherit; white-space: normal; text-align: left; } /* リミット停止の自動再開予約（§12am）・別アカウントで続ける（§12w） */ .afoot-resume { display: inline-flex; align-items: center; gap: var(--gap-s); flex-wrap: wrap; } .afoot-resume-text { color: var(--warn); } .afoot-resume-err { font-size: var(--fs-micro); color: var(--text-faint); } .btn-resume-cancel { font-size: var(--fs-meta); } .afoot-switch { display: inline-flex; align-items: center; gap: var(--gap-s); flex-wrap: wrap; } .afoot-switch-label { color: var(--text-muted); } .afoot-switch-sel { background: var(--input-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: var(--fs-meta); padding: 2px 6px; } .afoot-switch-go { font-size: var(--fs-meta); font-weight: 600; } /* ----- 作業ログ（items） ----- */ .items { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; } .btn-ghost.items-head { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 26px; padding: 3px 8px 3px 4px; margin-left: -4px; font-size: var(--fs-meta); color: var(--text-muted); text-align: left; } .items-tri { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-faint); } .items-tri .icon { width: 12px; height: 12px; transition: transform var(--t-fast) var(--ease); } .items-head[aria-expanded="true"] .items-tri .icon { transform: rotate(90deg); } .items-head-label { flex: 0 0 auto; } .items-head-live { flex: 1 1 auto; min-width: 0; font-size: var(--fs-meta); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .items-list { display: flex; flex-direction: column; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; } .item { background: transparent; overflow: hidden; } .item + .item { border-top: 1px solid var(--border); } /* §12cx: 軽い版で前の分を受け取っていない作業ログの先頭の［以前の作業ログ N 件を表示］（tertiary。行と同じ高さ・左寄せ） */ .btn-ghost.items-more { justify-content: flex-start; min-height: 28px; padding: 3px 10px; border-radius: 0; border-bottom: 1px solid var(--border); font-size: var(--fs-meta); color: var(--accent); } .item > summary { display: flex; align-items: center; gap: var(--gap-s); min-height: 28px; padding: 3px 10px; cursor: pointer; list-style: none; transition: background var(--t-fast) ease; } .item > summary::-webkit-details-marker { display: none; } .item > summary:hover { background: var(--wash); } .item-kind { width: 1.4em; flex: 0 0 auto; text-align: center; font-size: var(--fs-meta); color: var(--text-faint); } .item-title { flex: 0 0 auto; font-size: var(--fs-meta); color: var(--text-muted); } .item-detail { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-status { flex: 0 0 auto; font-size: var(--fs-meta); } .item-status.is-ok { color: var(--ok); } .item-status.is-error { color: var(--danger); } .item-out { margin: 0; padding: 8px 12px 10px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text-muted); max-height: 22em; overflow: auto; } .item.kind-error { background: var(--danger-soft); } /* §12bp: 途中経過（思考ブロック由来）は読むだけの静的な行。開閉・ホバー・状態印なしで全文を折り返す */ .item.kind-note { display: flex; align-items: baseline; gap: var(--gap-s); min-height: 28px; padding: 5px 10px; } .item-note-text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-meta); line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; } /* エラー（読むもの。等幅そのまま） */ .errbox { margin-top: var(--gap-s); padding: 8px 12px; background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-left: 3px solid var(--danger); border-radius: var(--radius-m); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; } /* 停止確認に失敗した会話（入力欄の上） */ .stopfail-note { display: flex; align-items: center; gap: var(--gap-s); flex-wrap: wrap; margin: 0 auto 6px; padding: 6px 10px; background: var(--danger-soft); border-left: 3px solid var(--danger); border-radius: var(--radius-m); font-size: var(--fs-meta); color: var(--text-muted); } .stopfail-note-text { flex: 1 1 auto; min-width: 0; } .stopfail-retry { flex: 0 0 auto; font-size: var(--fs-meta); } /* ----- Markdown 本文 ----- */ .md { font-size: var(--fs-body); line-height: 1.7; } .md > *:first-child { margin-top: 0; } .md > *:last-child { margin-bottom: 0; } .md p { margin: 0 0 10px; } .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font-family: var(--font-display); font-weight: 650; line-height: 1.45; margin: 18px 0 8px; color: var(--text); } .md h1 { font-size: var(--fs-h); } .md h2 { font-size: var(--fs-title); } .md h3, .md h4, .md h5, .md h6 { font-size: var(--fs-body); } .md ul, .md ol { margin: 0 0 10px; padding-left: 1.5em; } .md li { margin: 3px 0; } .md li::marker { color: var(--text-faint); } .md blockquote { margin: 0 0 10px; padding: 2px 14px; border-left: 2px solid var(--border-strong); color: var(--text-muted); } .md hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; } .md a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; } .md a:hover { text-decoration-color: var(--accent); } .md code { font-family: var(--font-mono); font-size: 12.5px; background: var(--wash-strong); border-radius: var(--radius-xs); padding: 1px 5px; } .md strong { font-weight: 650; color: var(--text); } .md table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: var(--fs-ui); } .md th, .md td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; vertical-align: top; } .md th { background: var(--wash); color: var(--text-muted); font-weight: 600; } /* 添付画像（静的なデータ表示。原寸はリンク） */ .attach-fig { margin: 0 0 var(--gap-m); display: flex; flex-direction: column; gap: var(--gap-xs); } .attach-fig a { display: inline-block; line-height: 0; align-self: flex-start; text-decoration: none; } .attach-img { display: block; max-height: 240px; max-width: 100%; border-radius: var(--radius-m); border: 1px solid var(--border); } .attach-path { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); line-height: 1.5; word-break: break-all; } .generated-image { margin-top: var(--gap-s); } .generated-image .attach-path a { line-height: inherit; text-decoration: underline; } .generated-image.is-unavailable .attach-img { display: none; } .generated-image.is-unavailable .attach-path { display: block !important; } .attach-pdf { display: flex; flex-wrap: wrap; gap: var(--gap-s); align-items: baseline; } .attach-pdf a { color: var(--accent); } /* コードフェンス（沈んだ面） */ .codeblock { margin: 0 0 12px; overflow: hidden; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-m); } .codehead { display: flex; align-items: center; justify-content: space-between; padding: 3px 4px 3px 12px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); } .codehead .copy { background: transparent; border: 0; border-radius: var(--radius-s); color: var(--text-faint); font-family: var(--font-ui); font-size: var(--fs-micro); padding: 2px 8px; cursor: pointer; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .codehead .copy:hover { background: var(--wash-strong); color: var(--text); } .codeblock pre { margin: 0; padding: 10px 14px 12px; overflow-x: auto; } .codeblock code { background: transparent; padding: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; white-space: pre; } /* ----- 質問カード（§12o jukeblox-question）。押せる部品の集合なので、青みの面＋輪郭 ----- */ .jukeblox-question:not(.is-ready) { display: none; } .jukeblox-question.is-ready { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: var(--radius-l); } .dq-title { font-size: var(--fs-meta); font-weight: 600; color: color-mix(in srgb, var(--accent) 70%, var(--text)); } .dq-q { display: flex; flex-direction: column; gap: 6px; } .dq-question { font-size: var(--fs-ui); font-weight: 600; } .dq-opts { display: flex; flex-wrap: wrap; gap: 6px; } .dq-opt { min-height: 30px; padding: 4px 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-m); font-size: var(--fs-ui); text-align: left; cursor: pointer; transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } .dq-opt:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); } .dq-opt.is-picked { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .dq-opt:disabled { opacity: .5; cursor: default; } .dq-opt:disabled:hover { background: var(--surface-2); border-color: var(--border-strong); } .dq-opt.is-picked:disabled:hover { background: var(--accent); border-color: var(--accent); } .dq-other { min-height: 32px; padding: 5px 10px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-m); font-size: var(--fs-ui); } .dq-other:focus { outline: none; border-color: var(--focus); box-shadow: var(--ring); } .dq-answer-input { position: relative; } .dq-answer-input .dq-other { display: block; width: 100%; min-width: 0; } .dq-answer-input:has(.voice-input-toggle:not([hidden])) .dq-other { min-height: calc(var(--icon-btn) + var(--gap-s)); padding-right: calc(var(--icon-btn) + var(--gap-xl)); } .dq-voice-tools { position: absolute; right: var(--gap-m); bottom: var(--gap-xs); } .dq-voice-tools .voice-input-toggle[aria-pressed="true"] { color: var(--accent); background: var(--selection); } .dq-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--gap-s); } /* §12ds: ［答えずに閉じる］は送信より一段弱い（ghost）。押せる部品の見た目は既存の btn-ghost のまま */ .btn-ghost.dq-dismiss { font-size: var(--fs-meta); } /* §12cw: 入力欄の上の帯の［回答する］で移ってきたとき、どのカードかを一瞬だけ輪郭で示す */ .jukeblox-question.is-ready.is-flash { animation: dq-flash 1.6s ease-out; } @keyframes dq-flash { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } } @media (prefers-reduced-motion: reduce) { .jukeblox-question.is-ready.is-flash { animation: none; box-shadow: var(--ring); } } /* Codex App Server のネイティブ要求（承認・質問） */ .codex-request { display: grid; gap: var(--gap-s); margin-bottom: var(--gap-m); padding: var(--gap-m); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-radius: var(--radius-l); } .codex-request-code { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; font: var(--fs-micro)/1.6 var(--font-mono); background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 8px 10px; } .codex-request-path, .codex-request-status { font-size: var(--fs-meta); color: var(--text-muted); overflow-wrap: anywhere; } /* §12hz 長いコマンドの畳み: 読むだけの 1 行の要約（等幅・控えめの色）と、押して開く［全文を表示］ */ .codex-request-command { display: grid; gap: var(--gap-xs); } .codex-request-summary { font: var(--fs-micro)/1.6 var(--font-mono); color: var(--text-muted); overflow-wrap: anywhere; } .codex-request-command summary { cursor: pointer; font-size: var(--fs-meta); } /* MCP ツール承認の引数名（実行内容の見出し）。値は下の .codex-request-code に等幅で出す */ .codex-request-param { font: var(--fs-micro)/1.4 var(--font-mono); color: var(--text-muted); margin-bottom: calc(-1 * var(--gap-xs)); } .codex-request-field { display: grid; gap: var(--gap-xs); font-size: var(--fs-ui); } .codex-request-field input, .codex-request-field select { min-width: 0; width: 100%; min-height: 32px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-m); padding: 4px 10px; } .codex-request-field input[type="checkbox"] { width: 18px; min-height: 18px; } .codex-request-actions { display: flex; flex-wrap: wrap; gap: var(--gap-s); } .codex-request-actions button { min-height: 30px; padding: 0 var(--gap-m); background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-m); cursor: pointer; } .codex-request-actions button:hover { background: var(--surface-3); } .codex-request-error { color: var(--danger); font-size: var(--fs-meta); } /* 承認・確認カードの置き場（2026-09-29）: ストリームの外＝入力欄の直上に固定する。 返答の作業ログ先頭（本文より上）に出していた頃は、最下部を見ていると気づけなかった。 長い差分・コマンドでも入力欄を押し出さないよう高さを抑え、欄の中だけスクロールする */ .approval-dock { flex: 0 0 auto; max-height: min(45vh, 440px); overflow-y: auto; overscroll-behavior: contain; padding: var(--gap-s) 24px 0; } .approval-dock[hidden] { display: none; } .approval-dock > .codex-request { max-width: 860px; margin: 0 auto var(--gap-s); box-shadow: var(--elev-2); } .pane.is-narrow .approval-dock { padding: var(--gap-xs) 12px 0; } .codex-request-field :focus-visible, .codex-request-actions :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ChatGPT 主担当の受け渡し */ .chatgpt-primary-status { color: var(--text); font-weight: 600; margin: var(--gap-s) 0; } .chatgpt-primary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-s); margin: var(--gap-s) 0; } .chatgpt-handoff pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 8px 10px; font-family: var(--font-mono); font-size: var(--fs-micro); } .chatgpt-primary-reports { margin: var(--gap-m) 0; font-size: var(--fs-meta); color: var(--text-muted); } .chatgpt-primary-reports p { white-space: pre-wrap; overflow-wrap: anywhere; } .chatgpt-account .acc-dir { overflow-wrap: anywhere; white-space: normal; } /* ChatGPT 補助の結果・定期状況報告（AI本文とは区別する静的資料） */ .research-result { margin-top: var(--gap-m); color: var(--text-muted); font-size: var(--fs-meta); } .research-result > summary, .progress-report-history > summary { display: flex; align-items: center; gap: 6px; width: fit-content; list-style: none; cursor: pointer; transition: color var(--t-fast) ease; } .research-result > summary::-webkit-details-marker, .progress-report-history > summary::-webkit-details-marker { display: none; } .research-result > summary:hover, .progress-report-history > summary:hover { color: var(--text); } .research-result-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6px; } .progress-reports { margin-top: var(--gap-m); padding-top: 10px; border-top: 1px dashed var(--border-strong); color: var(--text-muted); font-size: var(--fs-meta); line-height: 1.6; overflow-wrap: anywhere; } .progress-report-title { font-weight: 600; font-variant-numeric: tabular-nums; } .progress-report-history { margin-top: var(--gap-xs); } .progress-report-history > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .progress-report-history[open] { max-height: 280px; overflow-y: auto; } .progress-report-entry { padding-top: var(--gap-s); } .progress-report-details { white-space: pre-line; } /* ----- 空状態 ----- */ .empty { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 10px; padding: var(--gap-l); background: radial-gradient(420px 260px at 50% 42%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%); } .empty-brand { display: flex; flex-direction: column; align-items: center; gap: var(--gap-s); max-width: 100%; } .empty-sub { margin: 0 0 var(--gap-m); color: var(--text-muted); font-size: var(--fs-ui); } .empty .btn-primary { min-height: 34px; padding: 0 var(--gap-l); } .pane-recent { width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--gap-xs); margin-bottom: var(--gap-s); } .pane-recent-title { margin: 0; padding: 0 var(--gap-s); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; color: var(--text-faint); } .pane-recent-list { display: flex; flex-direction: column; gap: 1px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); } .pane-recent-empty { margin: 0; padding: 6px 10px; font-size: var(--fs-meta); color: var(--text-faint); } /* §12bv: 空きペインから Hangar を出す secondary（空状態の primary「新しい会話」と同じ高さ） */ .empty .btn-empty-hangar { min-height: 34px; padding: 0 var(--gap-l); } .empty .btn-empty-hangar .icon { color: var(--text-muted); } /* ===== Hangar のペイン（§12bv・DESIGN.md「Hangar のペイン」）===== 会話の代わりに「開発中のアプリの一覧」を映すペイン。面・線・文字・ボタンは Jukeblox の部品だけで作り、 色は意味にだけ使う（未登録＝赤の点、未コミット＝警告色の文字）。ジャンルは文字で示す（色を持ち込まない）。 押せるのはタイル（面＋輪郭＋ホバー）と操作ボタンだけ。見出し・件数・詳細の情報は枠のない文字 */ .hangar-title { display: none; } .pane.is-hangar .hangar-title { display: block; flex: 0 1 auto; min-width: 0; font-family: var(--font-display); font-size: var(--fs-title); font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pane.is-hangar .topbar .conv-title, .pane.is-hangar .topbar .conv-title-input, .pane.is-hangar .topbar .chip, .pane.is-hangar .topbar .run-timer, .pane.is-hangar .topbar [data-el="btnExport"], .pane.is-hangar .topbar [data-el="btnPreview"], .pane.is-hangar .topbar [data-el="btnMove"], .pane.is-hangar .run-activity, .pane.is-hangar .pane-dock { display: none !important; } .hangar { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; container-name: hangar; } .hangar[hidden] { display: none; } .hangar-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-s) var(--gap-m); padding: var(--gap-m) var(--gap-xl) var(--gap-s); } .hangar-summary-row { display: flex; align-items: center; gap: var(--gap-s); min-width: 0; } .hangar-summary { margin: 0; font-size: var(--fs-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; } .hangar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-s); min-width: 0; } .hangar-group { width: auto; } .hangar-search { width: 220px; margin-top: 0; } .hangar-warn { flex: 0 0 auto; margin: 0 var(--gap-xl) var(--gap-s); padding: var(--gap-s) var(--gap-m); background: color-mix(in srgb, var(--warn) 8%, transparent); border-left: 3px solid var(--warn); border-radius: var(--radius-s); font-size: var(--fs-meta); color: var(--text); overflow-wrap: anywhere; } .hangar-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; } .hangar-list { flex: 1 1 auto; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap-xl); padding: var(--gap-xs) var(--gap-xl) var(--gap-xl); } .hangar-empty { margin: var(--gap-l) 0; font-size: var(--fs-ui); color: var(--text-faint); } .hangar-sec { display: flex; flex-direction: column; gap: var(--gap-m); } .hangar-sec-head { display: flex; align-items: baseline; gap: var(--gap-s); min-width: 0; margin: 0; font-family: var(--font-display); font-size: var(--fs-title); font-weight: 650; color: var(--text); } .hangar-sec-count { color: var(--text-faint); font-weight: 600; font-variant-numeric: tabular-nums; } .hangar-sec-hint { min-width: 0; font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: 400; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hangar-dot { flex: 0 0 auto; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); } .hangar-dot.is-attention { background: var(--danger); } .hangar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--gap-m); } .hangar-tile { display: flex; align-items: flex-start; gap: var(--gap-m); min-width: 0; text-align: left; padding: var(--gap-m); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-l); cursor: pointer; font: inherit; transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } .hangar-tile:hover { background: var(--surface-hover); border-color: var(--border-strong); } .hangar-tile.is-selected { background: var(--selection); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); } .hangar-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .hangar-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-m); overflow: hidden; display: grid; place-items: center; } .hangar-icon img { width: 100%; height: 100%; object-fit: contain; } .hangar-icon.is-initial { background: var(--surface-2); border: 1px solid var(--border); } .hangar-initial { font-family: var(--font-display); font-size: 17px; font-weight: 650; color: var(--text-muted); } .hangar-icon.is-large { width: 52px; height: 52px; border-radius: var(--radius-l); } .hangar-icon.is-large .hangar-initial { font-size: 22px; } .hangar-tile-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .hangar-tile-top { display: flex; align-items: baseline; gap: var(--gap-s); min-width: 0; } .hangar-tile-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hangar-tile-time { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } /* この1週間に更新したもの: 色を足さず、文字の格を1段上げる */ .hangar-tile-time.is-fresh { color: var(--text-muted); font-weight: 600; } .hangar-tile-purpose { font-size: var(--fs-meta); line-height: 1.55; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hangar-tile-purpose.is-missing { color: var(--text-faint); } .hangar-tile-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--gap-xs); font-size: var(--fs-micro); color: var(--text-faint); } .hangar-sep { color: var(--text-faint); } .hangar-dirty { color: var(--warn); } .hangar-detail { flex: 0 0 360px; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap-l); padding: var(--gap-m) var(--gap-xl) var(--gap-xl); background: var(--bg); border-left: 1px solid var(--border); } .hangar-detail[hidden] { display: none; } /* 横に並べる幅が無いブロック（一覧が 420px を切る）では、詳細を一覧の上に重ねる */ @container hangar (max-width: 780px) { .hangar-detail { position: absolute; inset: 0; z-index: 2; border-left: 0; } } .hangar-detail-head { display: flex; align-items: flex-start; gap: var(--gap-m); } .hangar-detail-titles { flex: 1 1 auto; min-width: 0; } .hangar-detail-name { margin: 0; font-family: var(--font-display); font-size: var(--fs-h); font-weight: 650; color: var(--text); overflow-wrap: anywhere; } .hangar-detail-sub { margin: 2px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-xs); font-size: var(--fs-meta); color: var(--text-muted); } .hangar-detail-purpose { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--text); overflow-wrap: anywhere; } .hangar-detail-purpose.is-missing { color: var(--text-faint); } .hangar-detail-actions { display: flex; flex-wrap: wrap; gap: var(--gap-s); } .hangar-block { display: flex; flex-direction: column; gap: var(--gap-s); } .hangar-block-title { margin: 0; font-size: var(--fs-ui); font-weight: 650; color: var(--text); } .hangar-facts { margin: 0; display: flex; flex-direction: column; gap: var(--gap-s); } .hangar-fact dt { font-size: var(--fs-micro); color: var(--text-faint); } .hangar-fact dd { margin: 0; font-size: var(--fs-ui); color: var(--text); overflow-wrap: anywhere; } .hangar-fact dd.is-mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } .hangar-commits, .hangar-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .hangar-commits { gap: var(--gap-s); } .hangar-commits li { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hangar-commit-subject { font-size: var(--fs-ui); color: var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hangar-commit-time { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .hangar-docs { gap: 1px; } .hangar-doc { margin-left: calc(-1 * var(--gap-s)); } .hangar-doc .icon { color: var(--text-faint); } .hangar-edit { display: flex; flex-direction: column; gap: var(--gap-m); } .hangar-field { display: flex; flex-direction: column; gap: var(--gap-xs); } .hangar-field-label { font-size: var(--fs-meta); color: var(--text-muted); } .hangar-check { display: flex; align-items: center; gap: var(--gap-s); font-size: var(--fs-ui); color: var(--text); cursor: pointer; } .hangar-edit-error { margin: 0; padding: var(--gap-s) var(--gap-m); background: var(--danger-soft); border-left: 3px solid var(--danger); border-radius: var(--radius-s); font-size: var(--fs-meta); color: var(--text); } .hangar-edit-actions { display: flex; justify-content: flex-end; gap: var(--gap-s); } .hangar-edit-note { margin: 0; font-size: var(--fs-micro); color: var(--text-faint); } .pane.is-narrow .hangar-bar { padding-inline: var(--gap-m); } .pane.is-narrow .hangar-list { padding-inline: var(--gap-m); } .pane.is-narrow .hangar-detail { padding-inline: var(--gap-m); } .pane.is-narrow .hangar-warn { margin-inline: var(--gap-m); } .pane.is-narrow .hangar-search { width: auto; flex: 1 1 140px; } /* =========================================================== 7. 入力欄 1枚のカードに「添付 → 本文 → ツール列（左: 送り先と送信設定 / 右: 送信系）」 =========================================================== */ /* 下端の浮き台（承認欄＋入力欄）。会話ストリームの上に重ね、右はスクロールバーの溝の手前で止める。 台そのものは透明で操作を下へ通し（ホイール・文字選択）、カードと注記だけが操作を受ける */ .pane-dock { position: absolute; left: 0; right: var(--stream-gutter, 0px); bottom: 0; z-index: 3; display: flex; flex-direction: column; pointer-events: none; } .pane-dock > .approval-dock, .pane-dock > .question-dock, .pane-dock > .composer > * { pointer-events: auto; } /* §12cw: 未回答の質問の帯（入力欄の真上）。質問カードが画面の外にある間だけ出し、［回答する］でカードへ移る。 帯は静的な知らせなので入力欄の注記と同じガラスの小片に載せ、押せるのは右端の［回答する］だけ */ .question-dock { position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--gap-s); width: min(calc(100% - 48px), 860px); margin: 0 auto 6px; padding: 3px 4px 3px var(--gap-m); border-radius: var(--radius-m); font-size: var(--fs-meta); } .question-dock[hidden] { display: none; } .pane.is-narrow .question-dock { width: calc(100% - 24px); } .question-dock-label { flex: 0 0 auto; font-weight: 600; color: color-mix(in srgb, var(--accent) 70%, var(--text)); } .question-dock-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); } .btn-ghost.question-dock-go { flex: 0 0 auto; padding: 2px 10px; font-size: var(--fs-meta); } .composer { flex: 0 0 auto; padding: 2px 24px 14px; } .composer > * { max-width: 860px; margin-left: auto; margin-right: auto; } .composer-note { font-size: var(--fs-meta); color: var(--text-muted); } .composer-note.is-error { color: var(--danger); } /* 入力欄の上（送信の注記）と下（Auto・ChatGPT主担当の説明）の1行も会話の上に浮くので、 同じガラスの小片に載せて読めるようにする。幅は文の長さだけ、左端は入力欄にそろえる */ .composer > .composer-note:not([hidden]), .composer > .auto-reason:not([hidden]) { position: relative; isolation: isolate; display: block; width: fit-content; max-width: min(100%, 860px); margin: 0 0 6px max(0px, calc((100% - 860px) / 2)); padding: 3px var(--gap-m); border-radius: var(--radius-m); } .composer > .auto-reason:not([hidden]) { margin: 6px 0 0 max(0px, calc((100% - 860px) / 2)); } /* 入力欄のガラス（DESIGN.md「入力欄のガラス」）: 半透明の面＋背後のぼかしと彩度＋上辺の照り返し＋細い縁。 ガラスの層は疑似要素に分ける。箱そのものに backdrop-filter を付けると、中の fixed 配置（メニュー等）の 基準が箱に変わり、入れ子のぼかしも効かなくなるため */ .composer-box { position: relative; isolation: isolate; background: transparent; border: 1px solid var(--glass-rim); border-radius: var(--radius-xl); padding: 10px 8px 7px 14px; box-shadow: var(--elev-2); transition: border-color var(--t-mid) ease, box-shadow var(--t-mid) ease; } .composer-box::before, .composer > .composer-note:not([hidden])::before, .composer > .auto-reason:not([hidden])::before, .question-dock::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--glass-shine), transparent 45%), var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-floor); } .composer-box::before { border-radius: calc(var(--radius-xl) - 1px); } .composer > .composer-note:not([hidden])::before, .composer > .auto-reason:not([hidden])::before, .question-dock::before { box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-shine); } /* OS で「透明効果」を切っている人には、ぼかしをやめて不透明の面に戻す */ @media (prefers-reduced-transparency: reduce) { .composer-box::before, .composer > .composer-note:not([hidden])::before, .composer > .auto-reason:not([hidden])::before, .question-dock::before { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* §12fl（2026-10-11 Mac で重い）: Mac のアプリ（WKWebView）も同じ不透明の面にする。返答が流れてスクロールする会話の真上でのぼかしは、 WebKit では描くたびに背後を読み直すため、古い Mac（Intel の内蔵 GPU）で重かった。縁・照り返し・影はそのまま */ .is-mac-host .composer-box::before, .is-mac-host .composer > .composer-note:not([hidden])::before, .is-mac-host .composer > .auto-reason:not([hidden])::before, .is-mac-host .question-dock::before { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } .composer-box:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); box-shadow: var(--ring), var(--elev-2); } .composer.is-dropping .composer-box { border-color: var(--focus); box-shadow: var(--ring); } .composer-input { display: block; width: 100%; background: transparent; border: 0; resize: none; padding: 2px 6px 8px 0; font-size: var(--fs-body); line-height: 1.6; max-height: 17.5em; overflow-y: auto; /* 2026-09-30 ユーザー指示「メッセージ入力欄のスクロールマークはいらない」: 長文はホイール・キー操作でスクロールできるが、 上下の矢印つきのバーは出さない（WebView2 は scrollbar-width、WKWebView は ::-webkit-scrollbar で隠す） */ scrollbar-width: none; } .composer-input::-webkit-scrollbar { display: none; } .composer-input::placeholder { color: var(--text-faint); } .composer-input:focus { outline: none; } /* 入力欄の中の並び（2026-09-30 ユーザー指示「/ とスケジュールボタンは送信ボタンの上へ移動・右合わせ」）: 添付の列 → 本文とその右隣の道具（/・予約・高速）→ 下の行（送り先・モデル・エフォート・権限 … 停止・割込・送信）。 道具の右端は送信ボタンの右端にそろう（どちらも入力欄の右の余白で止まる） */ .composer-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap-s); grid-template-areas: "attach attach" "input tools" "foot foot"; } .composer-box > .attach-row { grid-area: attach; } .composer-box > .composer-input { grid-area: input; } .composer-box > .composer-tools { grid-area: tools; } .composer-box > .composer-foot { grid-area: foot; } .composer-tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-xs); align-self: start; margin-top: -2px; } /* 「もう少しボタンっぽく」: 面と輪郭を持つ小さな secondary（送信の primary より弱い）。3つとも文字なしの正方形アイコン。高速は ON の間だけ青で塗る */ .composer-tools .btn-icon, .composer-tools .btn-ghost.tuning-fast-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-btn); height: var(--icon-btn); padding: 0; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-m); color: var(--text-muted); } .composer-tools .btn-icon .icon { width: 16px; height: 16px; } .composer-tools .btn-icon:hover, .composer-tools .btn-ghost.tuning-fast-toggle:hover { background: var(--surface-3); color: var(--text); } .composer-tools .btn-icon[aria-expanded="true"] { background: var(--surface-3); color: var(--text); } .composer-tools .btn-ghost.tuning-fast-toggle svg { width: 14px; height: 14px; } .composer-tools .btn-ghost.tuning-fast-toggle[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); } .composer-tools .btn-ghost.tuning-fast-toggle[aria-pressed="true"] svg { fill: currentColor; } .composer-tools .btn-ghost.tuning-fast-toggle:disabled { opacity: .5; cursor: not-allowed; background: var(--surface-2); } /* §12cu ［»］自動で続ける: 高速と同じ「オンの間だけ青の面」の切替（押せる部品）。状態の文字はストリーム末尾の静的な枠が持つ */ .composer-tools .btn-icon.auto-continue-toggle[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); } .composer-tools .btn-icon.auto-continue-toggle:disabled { opacity: .5; cursor: default; } /* §12dj 音声入力のマイク（道具の左端）。聞き取り中は高速・»と同じ「オンの間だけ青の面」。声の大きさで輪が広がる（--voice-level 0〜1、 voice-input.js が 0.4 秒ごとに書く）。準備中は薄く。新しい色・部品は足していない */ .composer-tools .btn-icon.voice-input-toggle { position: relative; } .composer-tools .btn-icon.voice-input-toggle[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); } .composer-tools .btn-icon.voice-input-toggle[data-state="listening"]::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 calc(1px + 5px * var(--voice-level, 0)) color-mix(in srgb, var(--accent) 32%, transparent); transition: box-shadow 90ms linear; } .composer-tools .btn-icon.voice-input-toggle[data-state="starting"] { opacity: .65; } .composer-tools .btn-icon.voice-input-toggle:disabled { opacity: .45; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .composer-tools .btn-icon.voice-input-toggle[data-state="listening"]::after { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent); transition: none; } } .composer-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-height: 32px; margin-left: -6px; } .target-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; row-gap: 2px; min-width: 0; } .composer-foot > .target-row { flex: 1 1 auto; } .target-label, .opt-label { font-size: var(--fs-meta); color: var(--text-faint); } .composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex: 0 0 auto; margin-left: auto; } .composer-actions .btn-icon .icon { width: 17px; height: 17px; } .composer-actions > .btn-primary { margin-left: 4px; padding: 0 12px; border-radius: 10px; } /* 2026-09-30「このボタンの余白美しくないな」: 全角の閉じかっこ「）」は字面の右側（約0.6字）が空白なので、 文言の末尾が「）」（送信（待機））のときは右の余白をその分だけ詰めて、文字の左右の空きをそろえる。 Yu Gothic UI は palt / halt / text-spacing-trim が効かないため、書体の機能ではなく余白で合わせる */ .composer-actions > .btn-primary.trim-end-paren { padding-right: calc(12px - .6em); } .composer-actions > .btn-danger { margin-left: 4px; border-radius: 10px; } /* §12br: 割り込み（走行中のターンに今すぐ届ける）。既定の送信＝待機に追加（primary）の隣の secondary */ .composer-actions > .btn.btn-inject, .composer-actions > .btn.btn-resume { margin-left: 4px; border-radius: 10px; white-space: nowrap; } .schedule-wrap, .command-wrap { position: relative; } .command-trigger { font-family: var(--font-mono); font-size: 15px; font-weight: 600; } /* 送り先。option には色を付けられないので、選択中プロバイダの色は左のドットが担う */ .target-pick { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 22px 0 9px; border-radius: var(--radius-m); cursor: pointer; transition: background var(--t-fast) ease; } .target-pick::after { content: ""; position: absolute; right: 7px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--text-faint); pointer-events: none; -webkit-mask: var(--mask-chevron) center / contain no-repeat; mask: var(--mask-chevron) center / contain no-repeat; transform: rotate(90deg); } .target-pick:hover { background: var(--wash); } .target-pick:focus-within { background: var(--wash); box-shadow: 0 0 0 1px var(--focus) inset; } .target-select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--text); cursor: pointer; max-width: 26ch; text-overflow: ellipsis; field-sizing: content; } .target-select:focus { outline: none; } .target-select:disabled { color: var(--text-faint); cursor: default; } .target-select optgroup { background: var(--surface); color: var(--text-muted); } .target-select option { background: var(--surface); color: var(--text); } /* 送信パラメータ（ポップオーバー内の小型セレクタ） */ .opts { display: flex; align-items: center; gap: var(--gap-s); flex-wrap: wrap; row-gap: 2px; } .opt-field { display: inline-flex; align-items: center; gap: var(--gap-xs); } .opt-sel { background: transparent; border: 0; border-radius: var(--radius-s); padding: var(--gap-xs); font-size: var(--fs-meta); color: var(--text-muted); cursor: pointer; max-width: 26ch; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .opt-sel:hover { background: var(--wash); color: var(--text); } .opt-sel.is-set { color: var(--text); } .opt-sel option { background: var(--surface); color: var(--text); } .opt-custom { background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-s); padding: 2px var(--gap-s); font-size: var(--fs-meta); width: 22ch; } /* 添付チップ（送信前）。押せるのは✕だけ */ .attach-row { display: flex; flex-wrap: wrap; gap: var(--gap-s); padding: 2px 0 10px; } .attach-chip { position: relative; width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--radius-m); overflow: hidden; background: var(--sunken); border: 1px solid var(--border); } .attach-thumb { display: block; width: 100%; height: 100%; object-fit: cover; } .attach-chip.is-uploading .attach-thumb { opacity: .4; } .attach-chip-file { width: 148px; display: flex; align-items: center; gap: var(--gap-xs); padding: 0 var(--gap-s); padding-right: var(--gap-l); } .attach-file-icon { flex: 0 0 auto; color: var(--text-muted); font-size: var(--fs-micro); font-weight: 700; } .attach-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-meta); color: var(--text); } .attach-spin { position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -6px; } .btn-ghost.attach-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; justify-content: center; font-size: var(--fs-micro); line-height: 1; background: color-mix(in srgb, var(--shadow-ink) 70%, transparent); color: var(--text); border-radius: var(--radius-pill); } .btn-ghost.attach-del:hover { background: var(--danger); color: var(--on-critical); } /* コマンド・予約メニュー（入力欄から上へ開く） */ .command-menu { min-width: 31ch; } .command-item { display: grid; grid-template-columns: 9ch minmax(0, 1fr); align-items: baseline; gap: var(--gap-s); } .command-code { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .command-label { color: var(--text-muted); font-size: var(--fs-meta); } .sched-menu { min-width: 26ch; } .sched-dt-row { display: flex; align-items: center; gap: var(--gap-xs); padding: 2px 4px 4px 10px; } .sched-dt { width: auto; min-height: 26px; font-size: var(--fs-meta); padding: 2px 6px; color-scheme: dark; color: var(--text); } /* ----- 思考量ピッカー（DESIGN.md「思考量ピッカー」）。挙動の契約は従来どおり ----- */ .composer-toolbar, .composer-tuning-panel, .composer-tuning-trigger { --tuning-control-height: 28px; --tuning-icon-size: 32px; --tuning-track-height: 28px; --tuning-thumb-size: 32px; --tuning-radius: var(--gap-xl); --tuning-pill-radius: var(--radius-pill); --tuning-reasoning-blue: var(--accent); --tuning-color: var(--effort-tint, var(--accent)); --tuning-value-ink: color-mix(in srgb, var(--tuning-color) 76%, var(--text)); --tuning-value-hover-ink: color-mix(in srgb, var(--tuning-color) 65%, var(--text)); --tuning-font-size: var(--fs-meta); --tuning-meta-size: var(--fs-micro); --tuning-value-size: 18px; --tuning-motion: 160ms; --tuning-snap-motion: 200ms; --tuning-ultra-motion: 800ms; --tuning-ease: var(--ease); } [data-theme="light"] .composer-toolbar, [data-theme="light"] .composer-tuning-panel, [data-theme="light"] .composer-tuning-trigger { --tuning-violet: var(--tuning-violet-light); } .composer-toolbar { flex-wrap: nowrap; gap: 2px; min-width: 0; min-height: var(--tuning-control-height); } .composer-toolbar .target-pick { flex: 0 1 auto; max-width: 38%; min-width: 0; height: var(--tuning-control-height); } .composer-toolbar .target-select { min-width: 0; max-width: 20ch; height: var(--tuning-control-height); font-size: var(--tuning-font-size); } .composer-toolbar .target-pick .dot { flex-shrink: 0; } .composer-tuning-trigger { display: inline-flex; align-items: center; gap: var(--gap-xs); flex: 0 1 auto; min-width: 0; max-width: 100%; height: var(--tuning-control-height); border: 0; border-radius: var(--tuning-pill-radius); padding: 0 11px; background: var(--wash); color: var(--text-muted); cursor: pointer; font-size: var(--tuning-font-size); text-align: left; transition: background var(--tuning-motion) var(--tuning-ease), color var(--tuning-motion) var(--tuning-ease); } .composer-tuning-trigger:hover { background: var(--wash-strong); color: var(--text); } .composer-tuning-trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--tuning-color) 16%, transparent); color: var(--text); } .composer-tuning-trigger:disabled { cursor: default; color: var(--text-faint); } /* モデルと思考量は別々のピル（2026-09-29 ユーザー指示。Claude の入力欄と同じく1つずつ選ぶ）。 モデルは名前を太字、思考量は段階の色（--tuning-color）で読む。狭いときはモデル名から省略する。 思考量の値は短いので縮めない（§12bq のさらに狭い面と同じ方針）。2026-10-02: 見出しが付いていた頃の flex-shrink 2 のままだと、約380pxの面でボタンだけが縮み「エフォート未指定」の文字が隣の権限に重なっていた */ .composer-model-trigger { flex: 0 1 auto; } .composer-effort-trigger { flex: 0 0 auto; } .tuning-model { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .tuning-effort { flex-shrink: 0; white-space: nowrap; color: var(--tuning-value-ink); } /* 権限（2026-09-30 ユーザー指示「ドロップダウンは、モデル、エフォート、権限にし、見出しはいらない」）: ネイティブの select を、モデル・エフォートと同じ丸い面の選択肢にする。危険な権限は ⚠ と注意色の文字 */ .composer-perm-pick { position: relative; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: var(--gap-xs); height: var(--tuning-control-height); padding: 0 22px 0 11px; border-radius: var(--tuning-pill-radius); background: var(--wash); transition: background var(--tuning-motion) var(--tuning-ease); } .composer-perm-pick:hover { background: var(--wash-strong); } .composer-perm-pick:focus-within { background: var(--wash-strong); box-shadow: 0 0 0 1px var(--focus) inset; } .composer-perm-pick::after { content: ""; position: absolute; right: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--text-faint); pointer-events: none; -webkit-mask: var(--mask-chevron) center / contain no-repeat; mask: var(--mask-chevron) center / contain no-repeat; transform: rotate(90deg); } .composer-perm-pick .opt-sel { appearance: none; -webkit-appearance: none; min-width: 0; max-width: 16ch; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: var(--tuning-font-size); color: var(--text-muted); text-overflow: ellipsis; field-sizing: content; } .composer-perm-pick .opt-sel:focus { outline: none; } .composer-perm-pick .opt-sel option { background: var(--surface); color: var(--text); } .composer-perm-pick.is-danger .opt-sel { color: var(--warn); } .tuning-fast, .tuning-risk { flex-shrink: 0; white-space: nowrap; font-size: var(--tuning-meta-size); } .tuning-fast { color: var(--text-muted); } .tuning-risk { color: var(--warn); } .tuning-caret { display: inline-grid; place-items: center; flex-shrink: 0; width: var(--gap-s); height: var(--gap-s); margin-left: 2px; color: var(--text-faint); transition: transform var(--tuning-motion) var(--tuning-ease); } .tuning-caret::before { content: ''; width: var(--gap-xs); height: var(--gap-xs); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); } .composer-tuning-trigger[aria-expanded="true"] .tuning-caret { transform: rotate(180deg); } .composer-tuning-panel { position: fixed; inset: auto; margin: 0; width: 336px; max-width: calc(100vw - var(--gap-l)); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-s); padding: var(--gap-m); border: 1px solid var(--border-strong); border-radius: var(--tuning-radius); background: var(--surface-2); color: var(--text); overflow: auto; font-family: var(--font-ui); font-size: var(--tuning-font-size); box-shadow: var(--elev-3); opacity: 0; transform: translateY(var(--gap-xs)) scale(.98); transform-origin: bottom left; transition: opacity var(--tuning-motion) var(--tuning-ease), transform var(--tuning-motion) var(--tuning-ease), display var(--tuning-motion) allow-discrete, overlay var(--tuning-motion) allow-discrete; } .composer-tuning-panel:popover-open { opacity: 1; transform: none; } .composer-tuning-panel[popover]:not(:popover-open):not(.is-fallback-open) { display: none; } .composer-tuning-panel.opens-below { transform-origin: top left; } .composer-tuning-panel.is-fallback-open { z-index: 100; opacity: 1; transform: none; } @starting-style { .composer-tuning-panel:popover-open { opacity: 0; transform: translateY(var(--gap-xs)) scale(.98); } } .tuning-reasoning { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-s); min-width: 0; } .tuning-overview { position: relative; display: grid; grid-template-columns: var(--tuning-icon-size) minmax(0, 1fr) var(--tuning-icon-size); align-items: start; gap: var(--gap-xs); } .tuning-overview .tuning-fast-toggle { grid-column: 1; } .tuning-overview .tuning-summary { grid-column: 2; } .tuning-overview .tuning-reset { grid-column: 3; } .btn-ghost.tuning-fast-toggle, .composer-reset.tuning-reset { display: inline-grid; place-items: center; flex-shrink: 0; width: var(--tuning-icon-size); height: var(--tuning-icon-size); padding: 0; border: 0; border-radius: var(--tuning-pill-radius); background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--tuning-motion) var(--tuning-ease), color var(--tuning-motion) var(--tuning-ease), transform var(--tuning-motion) var(--tuning-ease); } .tuning-fast-toggle svg, .tuning-reset svg { width: var(--gap-l); height: var(--gap-l); } .btn-ghost.tuning-fast-toggle:hover, .composer-reset.tuning-reset:hover { background: var(--wash-strong); color: var(--text); } .btn-ghost.tuning-fast-toggle[aria-pressed="true"] { color: var(--tuning-color); } .btn-ghost.tuning-fast-toggle[aria-pressed="true"] svg { fill: currentColor; } .tuning-fast-toggle:active, .composer-reset.tuning-reset:active { transform: scale(.92); } .btn-ghost.tuning-fast-toggle:disabled, .composer-reset.tuning-reset:disabled { cursor: default; color: var(--text-faint); opacity: .5; background: transparent; } /* 中央は押せない静的な表示（思考量の段階と、その思考量で動くモデル名）。面もホバーも持たせない */ .tuning-summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; min-height: 40px; padding: 0 var(--gap-xs); } .tuning-summary .effort-value { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: var(--tuning-value-size); font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--tuning-value-ink); } .tuning-notice { position: absolute; inset: 0 calc(var(--tuning-icon-size) + var(--gap-xs)); display: grid; place-items: center; padding: 0 var(--gap-xs); border-radius: var(--radius-m); background: var(--surface-2); color: var(--text-muted); text-align: center; font-size: var(--tuning-font-size); line-height: 1.5; pointer-events: none; } .tuning-selected-model { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tuning-font-size); line-height: 1.5; color: var(--text-muted); } .tuning-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-s); min-width: 0; } /* モデルの画面の見出し:「モデル」／変更中の項目数（静的）／CLI設定に戻す */ .tuning-detail-heading { display: flex; align-items: center; gap: var(--gap-s); min-width: 0; padding-left: var(--gap-s); color: var(--text-muted); font-size: var(--tuning-font-size); } .tuning-detail-heading .tuning-title { flex: 1 1 auto; min-width: 0; color: var(--text); font-weight: 600; } .tuning-detail-heading .composer-param-state { flex: 0 1 auto; text-align: right; } .tuning-model-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; max-height: calc(var(--gap-xl) * 8); overflow-y: auto; overscroll-behavior: contain; } .tuning-model-option { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-xs); width: 100%; min-width: 0; min-height: var(--tuning-control-height); padding: var(--gap-xs) var(--gap-s); border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text-muted); cursor: pointer; font-size: var(--tuning-font-size); text-align: left; overflow-wrap: anywhere; transition: background var(--tuning-motion) var(--tuning-ease), color var(--tuning-motion) var(--tuning-ease); } .tuning-model-option:hover { color: var(--text); background: var(--wash-strong); } .tuning-model-option:disabled, .tuning-model-option:disabled:hover { color: var(--text-faint); background: transparent; cursor: default; } .composer-tuning-panel.is-auto .tuning-summary .effort-value, .composer-tuning-panel.is-auto .tuning-selected-model { color: var(--text-faint); } .tuning-model-option[aria-pressed="true"] { background: color-mix(in srgb, var(--tuning-color) 14%, transparent); color: var(--text); } .tuning-model-option[aria-pressed="true"]::after { content: ''; width: 14px; height: 14px; flex-shrink: 0; background: var(--tuning-color); -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat; } .composer-tuning-panel .opt-field { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; min-width: 0; gap: var(--gap-s); } .composer-tuning-panel .opt-field.tuning-model-field { grid-template-columns: minmax(0, 1fr); } .composer-tuning-panel .opt-label { color: var(--text-muted); font-size: var(--tuning-font-size); } .composer-tuning-panel .opt-sel { width: 100%; min-width: 0; max-width: none; height: var(--tuning-control-height); text-overflow: ellipsis; padding: var(--gap-xs) var(--gap-s); background: var(--input-bg); color: var(--text); font-size: var(--tuning-font-size); border: 1px solid var(--border-strong); border-radius: var(--radius-s); } .composer-tuning-panel .opt-custom { width: 100%; min-width: 0; height: var(--tuning-control-height); font-size: var(--tuning-font-size); } .composer-tuning-panel .opt-field.effort-control { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-width: 0; padding: 0; border: 0; } .effort-track-wrap { position: relative; isolation: isolate; width: 100%; min-width: 0; touch-action: none; } .effort-visual { position: absolute; inset: 50% 0 auto; height: var(--tuning-track-height); transform: translateY(-50%); overflow: clip; overflow-clip-margin: var(--gap-s); pointer-events: none; --effort-visual-offset: calc(var(--tuning-thumb-size) / 2 + (100% - var(--tuning-thumb-size)) * var(--effort-position, 0)); } .effort-rail { position: absolute; inset: 0; border-radius: var(--tuning-pill-radius); background: var(--wash-strong); } .effort-fill { position: absolute; inset: 0 auto 0 0; width: var(--effort-visual-offset); border-radius: var(--tuning-pill-radius); background: var(--accent); overflow: hidden; transition: width var(--tuning-snap-motion) var(--tuning-ease); } .effort-ultra-wash { position: absolute; inset: 0; opacity: var(--effort-ultra, 0); transform: translateX(calc((1 - var(--effort-ultra, 0)) * 100%)); background: linear-gradient(105deg, color-mix(in srgb, var(--tuning-violet) 72%, var(--accent)), var(--tuning-violet)); transition: transform var(--tuning-ultra-motion) var(--tuning-ease), opacity var(--tuning-ultra-motion) var(--tuning-ease); } .effort-ultra-wash::before { content: ''; position: absolute; inset: -80% -35%; background: radial-gradient(ellipse at 35% 60%, color-mix(in srgb, var(--text) 28%, transparent), transparent 40%), radial-gradient(ellipse at 75% 45%, color-mix(in srgb, var(--text) 21%, transparent), transparent 38%); animation: tuning-nebula-drift 4.8s ease-in-out infinite alternate paused; } .effort-stops { position: absolute; inset: 0 calc(var(--tuning-thumb-size) / 2); } .effort-stop { position: absolute; top: 50%; width: var(--gap-xs); height: var(--gap-xs); border-radius: var(--tuning-pill-radius); background: color-mix(in srgb, var(--text) 28%, transparent); transform: translate(-50%, -50%); transition: transform var(--tuning-motion) var(--tuning-ease), background var(--tuning-motion) var(--tuning-ease); } .effort-stop.is-nearest { transform: translate(-50%, -50%) scale(2); background: color-mix(in srgb, var(--text) 42%, transparent); } .effort-thumb { position: absolute; left: var(--effort-visual-offset); top: 50%; width: var(--tuning-thumb-size); height: var(--tuning-thumb-size); border-radius: var(--tuning-pill-radius); background: var(--text); transform: translate(-50%, -50%); border: 1px solid color-mix(in srgb, var(--text) 75%, var(--text-muted)); box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-ink) 45%, transparent); transition: left var(--tuning-snap-motion) var(--tuning-ease), transform var(--tuning-motion) var(--tuning-ease); } .effort-track-wrap:hover .effort-thumb, .effort-track-wrap:has(.effort-range:focus-visible) .effort-thumb { transform: translate(-50%, -50%) scale(1.0625); } .effort-track-wrap:active .effort-thumb, .effort-control.is-dragging .effort-thumb { transform: translate(-50%, -50%) scale(1.125); } .effort-control.is-dragging .effort-fill, .effort-control.is-dragging .effort-thumb { transition: none; } .effort-thumb::after { content: none; position: absolute; inset: calc(var(--gap-m) * -1); border-radius: var(--tuning-pill-radius); opacity: 0; background: radial-gradient(circle at 12% 36%, var(--tuning-violet) 1.5px, transparent 2.5px), radial-gradient(circle at 30% 12%, var(--tuning-violet) 1px, transparent 2px), radial-gradient(circle at 68% 10%, var(--tuning-violet) 1.5px, transparent 2.5px), radial-gradient(circle at 91% 40%, var(--tuning-violet) 1px, transparent 2px), radial-gradient(circle at 78% 83%, var(--tuning-violet) 1.5px, transparent 2.5px), radial-gradient(circle at 25% 89%, var(--tuning-violet) 1px, transparent 2px); } .effort-control.is-motion-active.is-ultra-entering .effort-thumb::after { content: ''; animation: tuning-ultra-burst 700ms ease-out both; } .effort-range { position: relative; z-index: 2; appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; margin: 0; padding: 0; height: calc(var(--tuning-thumb-size) + var(--gap-xs)); border: 0; border-radius: var(--tuning-pill-radius); background: transparent; cursor: pointer; color: transparent; touch-action: none; } .effort-range::-webkit-slider-runnable-track { height: var(--tuning-track-height); border-radius: var(--tuning-pill-radius); background: transparent; } .effort-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: var(--tuning-thumb-size); height: var(--tuning-thumb-size); margin-top: calc((var(--tuning-track-height) - var(--tuning-thumb-size)) / 2); border: 0; border-radius: var(--tuning-pill-radius); background: transparent; } .effort-range::-moz-range-track, .effort-range::-moz-range-progress { height: var(--tuning-track-height); border-radius: var(--tuning-pill-radius); background: transparent; } .effort-range::-moz-range-thumb { width: var(--tuning-thumb-size); height: var(--tuning-thumb-size); border: 0; border-radius: var(--tuning-pill-radius); background: transparent; } .effort-range:disabled { cursor: default; } .effort-track-wrap:has(.effort-range:disabled) .effort-visual { opacity: .45; } .effort-track-wrap:has(.effort-range:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--tuning-pill-radius); } .effort-range:focus-visible { outline: none; } .effort-control.is-unresolved .effort-thumb, .effort-control.is-unresolved .effort-fill { opacity: 0; } .effort-sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: var(--tuning-pill-radius); opacity: var(--effort-particles, 0); transition: opacity var(--tuning-motion) var(--tuning-ease); } .effort-sparkles::before, .effort-sparkles::after { content: ''; position: absolute; inset: -40% -40%; opacity: .65; background-image: radial-gradient(circle at 4% 48%, var(--text) 1px, transparent 2px), radial-gradient(circle at 11% 20%, var(--text) 1px, transparent 2px), radial-gradient(circle at 19% 72%, var(--text) 1px, transparent 2px), radial-gradient(circle at 31% 40%, var(--text) .5px, transparent 1.5px), radial-gradient(circle at 47% 68%, var(--text) 1px, transparent 2px), radial-gradient(circle at 53% 28%, var(--text) 1.5px, transparent 2.5px), radial-gradient(circle at 68% 64%, var(--text) 1px, transparent 2px), radial-gradient(circle at 77% 24%, var(--text) 1.5px, transparent 2.5px), radial-gradient(circle at 94% 52%, var(--text) 1px, transparent 2px); background-size: calc(var(--gap-xl) * 9) calc(var(--gap-xl) * 2); animation: tuning-particle-drift 3.8s linear infinite paused; } .effort-sparkles::after { opacity: .4; background-position: var(--gap-xl) var(--gap-m); animation-duration: 5.2s; animation-direction: reverse; } .effort-control.is-motion-active .effort-sparkles::before, .effort-control.is-motion-active .effort-sparkles::after, .effort-control.is-motion-active .effort-ultra-wash::before { animation-play-state: running; } @keyframes tuning-particle-drift { from { background-position: 0 0; } to { background-position: calc(var(--gap-xl) * 9) calc(var(--gap-xl) * -2); } } @keyframes tuning-nebula-drift { from { transform: translateX(-8%) rotate(-7deg); } to { transform: translateX(12%) rotate(9deg); } } @keyframes tuning-ultra-burst { 0% { opacity: 0; transform: scale(.4) rotate(-10deg); } 18% { opacity: .8; } 100% { opacity: 0; transform: scale(1.35) rotate(12deg); } } .composer-param-state { font-size: var(--tuning-meta-size); color: var(--text-muted); white-space: normal; overflow-wrap: anywhere; } /* =========================================================== 8. ブラウザプレビュー =========================================================== */ .split { flex: 0 0 6px; width: 6px; margin: 8px 0; background: transparent; cursor: col-resize; touch-action: none; background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: center; background-size: 0 100%; transition: background-size var(--t-fast) ease; } .split:hover, .split.is-dragging { background-size: 2px calc(100% - 24px); } .preview { flex: 0 0 auto; min-width: 0; margin: 8px 8px 8px 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-l); } .preview-bar { display: flex; align-items: center; gap: var(--gap-xs); flex-wrap: wrap; min-height: 46px; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--border); } .preview-url { flex: 1 1 16ch; min-width: 12ch; height: 28px; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 0 10px; font-family: var(--font-mono); font-size: var(--fs-micro); } .preview-url:focus { outline: none; border-color: var(--focus); box-shadow: var(--ring); } .preview-url::placeholder { color: var(--text-faint); } .preview-seg { flex: 0 0 auto; } .preview-note { margin: 0; padding: 4px 12px; font-size: var(--fs-micro); color: var(--text-faint); border-bottom: 1px solid var(--border); } .preview-open { position: relative; flex: 0 0 auto; } .preview-stage { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; background: var(--sunken); } .preview-frame { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: var(--surface); } .preview-stage.is-fixed .preview-frame { flex: 0 0 auto; max-width: 100%; } /* =========================================================== 9. ダイアログ・設定 =========================================================== */ .modal { width: min(520px, calc(100vw - 2 * var(--gap-l))); max-height: calc(100vh - 2 * var(--gap-xl)); padding: 0; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--elev-3); } .modal-wide { width: min(700px, calc(100vw - 2 * var(--gap-l))); } .modal::backdrop { background: var(--scrim); backdrop-filter: blur(3px); } .modal[open] { animation: modal-in var(--t-mid) var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } } .modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .modal-title { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 650; letter-spacing: .005em; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-s); } .modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--gap-s); margin: 4px -22px -20px; padding: 12px 22px 14px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--canvas) 30%, var(--surface)); } .modal-err { margin: 0; color: var(--danger); font-size: var(--fs-ui); white-space: pre-wrap; } /* §12eq 無料APIクレジットの設定（使用量の「設定」から開く）。鍵の行は入力欄を伸ばし、ボタンは右に固定 */ .claude-credits-content { display: flex; flex-direction: column; gap: 14px; } .claude-credits-keyrow { display: flex; align-items: center; gap: var(--gap-s); min-width: 0; } .claude-credits-keyrow .input { flex: 1 1 auto; min-width: 0; } .claude-credits-keyhint { flex: 1 1 auto; min-width: 0; font-size: var(--fs-ui); color: var(--text); } .claude-credits-ledger { margin: 0; } .field { display: flex; flex-direction: column; gap: 5px; } .field-label { font-size: var(--fs-meta); font-weight: 600; color: var(--text-muted); } .field-help { font-size: var(--fs-meta); color: var(--text-faint); line-height: 1.55; } p.field-help { margin: 0; } .glm-zcode-connection { display: grid; gap: var(--gap-m); min-width: 0; } .glm-zcode-connection .field-help { overflow-wrap: anywhere; } .glm-zcode-connection .field > input { min-width: 0; width: 100%; } .glm-zcode-connection [data-zcode-quota] { display: grid; gap: var(--gap-xs); } .btn.pair-start { align-self: flex-start; } .field-hint { margin: 0 0 var(--gap-xs); font-size: var(--fs-meta); color: var(--text-faint); line-height: 1.6; } .field-inline { flex: 0 0 auto; } .field-grow { flex: 1 1 auto; min-width: 0; } .field.is-set > .field-label { color: var(--text); } .field-warn { font-size: var(--fs-meta); color: var(--warn); } .field-err { font-size: var(--fs-meta); color: var(--danger); white-space: pre-wrap; } .field.has-err .input { border-color: var(--danger); } .sect { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 18px; } .sect:first-of-type { border-top: 0; padding-top: 0; } .sect-title { margin: 0; font-size: var(--fs-ui); font-weight: 650; color: var(--text); } /* ----- 操作ダイアログ（Auto設定・調査 / 文書ビューア）は大判 ----- */ .operations-dialog { width: calc(100vw - 2 * var(--gap-l)); max-width: calc(var(--gap-xl) * 50); height: calc(100dvh - 2 * var(--gap-l)); max-height: none; overflow: hidden; } .operations-dialog[open] { display: flex; flex-direction: column; } .operations-dialog > .modal-head { padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .operations-dialog > iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--bg); } .document-dialog > .modal-body { flex: 1; min-height: 0; overflow: auto; } .document-dialog .modal-title { min-width: 0; overflow-wrap: anywhere; } .document-path { margin: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); } .document-path.is-error { color: var(--danger); } .document-content { min-width: 0; overflow-wrap: anywhere; } .document-actions { display: flex; gap: var(--gap-s); margin-bottom: var(--gap-m); } .document-actions a { display: inline-flex; align-items: center; min-height: var(--control-h); text-decoration: none; } .document-preview { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius-m); } .document-pdf { display: block; width: 100%; height: 65vh; border: 0; border-radius: var(--radius-m); background: var(--surface); } .document-source { white-space: pre-wrap; font-family: var(--font-mono); margin: 0; } .document-line { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); } /* ----- 設定ウィンドウ: 左ナビ＋右の本文（本文だけスクロール） ----- */ .modal-settings { width: min(980px, calc(100vw - 2 * var(--gap-l))); height: min(720px, calc(100vh - 2 * var(--gap-xl))); max-height: none; overflow: hidden; } .modal-settings[open] { display: flex; } .settings-shell { flex: 1 1 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: 212px minmax(0, 1fr); padding: 0; gap: 0; } .set-nav { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 18px 10px; background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); border-right: 1px solid var(--border); } .set-nav > .modal-title { padding: 0 10px; font-size: var(--fs-h); } .set-tabs { display: flex; flex-direction: column; gap: 2px; } .set-tabs .seg-item { display: block; } .set-tabs .seg-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; background: transparent; color: var(--text-muted); border: 0; border-radius: var(--radius-m); font-size: var(--fs-ui); text-align: left; cursor: pointer; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .set-tabs .seg-btn .icon { width: 16px; height: 16px; } .set-tabs .seg-btn:hover { background: var(--wash); color: var(--text); } .set-tabs .seg-item.is-active .seg-btn { background: var(--selection); color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); } .set-tab-mark { width: 9px; height: 9px; margin: 0 3.5px; } .set-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .set-tabbar { flex: 0 0 auto; position: relative; display: flex; align-items: flex-start; gap: var(--gap-s); min-height: 48px; padding: 10px 10px 0 32px; } .set-note { flex: 1 1 auto; max-width: 100%; margin-top: 4px; padding: 6px 10px; border-radius: var(--radius-m); background: var(--wash); white-space: pre-wrap; } .set-note.is-err { background: var(--danger-soft); } .set-close { margin-left: auto; flex: 0 0 auto; } .set-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 32px 32px; } .set-panel { display: flex; flex-direction: column; gap: 22px; max-width: 760px; } .set-panel > .sect:first-child > .sect-title { font-family: var(--font-display); font-size: var(--fs-h); font-weight: 650; } .set-panel .sect { gap: 12px; } /* 設定項目は「左=名前と説明 / 右=操作」の行。行どうしは細線で区切る */ .set-fields { display: flex; flex-direction: column; } .set-fields > .field, #set-panel-safety .sect > .field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); column-gap: var(--gap-xl); row-gap: 4px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--border); } .set-fields > .field:first-child { border-top: 1px solid var(--border); } .set-fields > .field > *, #set-panel-safety .sect > .field > * { grid-column: 1 / -1; } .set-fields > .field > .field-label, #set-panel-safety .sect > .field > .field-label { grid-column: 1; grid-row: 1; font-size: var(--fs-ui); font-weight: 500; color: var(--text-muted); align-self: center; } .set-fields > .field > .field-help { grid-column: 1; grid-row: 2; } .set-fields > .field > .input:not(.input-area):not([id$="-custom"]), #set-panel-safety .sect > .field > .input { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .set-fields > .field > .input[id$="-custom"] { grid-column: 2; } /* 説明の無い項目（2026-10-07 説明文を短くした）は、操作を名前の行にそろえる */ .set-fields > .field:not(:has(> .field-help)) > .input:not(.input-area):not([id$="-custom"]) { grid-row: 1; } .set-fields > .field > .input-num { justify-self: start; } .set-fields > .field > .field-err, .set-fields > .field > .field-warn { grid-column: 2; } /* 値が入っている（CLI既定から外れている）項目は名前を本文色・太字に起こす（枠やホバーは足さない） */ .set-fields > .field.is-set > .field-label { color: var(--text); font-weight: 600; } .set-fields > .set-group { margin: 26px 0 8px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; color: var(--text-faint); } .set-fields > .set-group:first-child { margin-top: 4px; } .set-fields > .set-group + .field { border-top: 1px solid var(--border); } #set-panel-safety .sect { gap: 0; } #set-panel-safety .sect > .field-hint { margin: 8px 0 14px; } #set-panel-safety .sect > .field:first-of-type { border-top: 1px solid var(--border); } #set-panel-safety .sect > .field > .field-label { color: var(--text); } /* ----- アカウント ----- */ .acc-list { display: flex; flex-direction: column; gap: var(--gap-s); } .acc-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 6rem 6.5rem var(--icon-btn) var(--icon-btn); align-items: center; column-gap: 4px; row-gap: 6px; padding: 10px 8px 10px 14px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--radius-l); } .acc-del-slot { width: 100%; } .acc-row > .btn-ghost { white-space: nowrap; justify-content: center; } .acc-row > .btn-ghost.acc-cliconf { padding: 4px 6px; gap: 5px; } .acc-row > .btn-ghost.acc-cliconf .icon { width: 15px; height: 15px; } .acc-row > .acc-del:hover { color: var(--danger); } .acc-row-sub, .acc-row > .acc-share { grid-column: 1 / -1; } .acc-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-body); font-weight: 600; } /* §12ee 並べ替えのつまみ: 会話一覧の六点と同じく、常設だが最弱の色で、行にマウスを載せる・フォーカスで起こす（押せる tertiary）。 運んでいる行はペインの入れ替えと同じ持ち上げ（--surface-2・--accent の輪郭・--elev-3）、ほかの行は行き先を空けるように滑る */ .acc-name > .acc-grip { width: 22px; height: 26px; min-width: 22px; margin: 0 -4px 0 -10px; padding: 0; color: color-mix(in srgb, var(--text-faint) 55%, transparent); cursor: grab; touch-action: none; } .acc-name > .acc-grip .icon { width: 16px; height: 16px; } .acc-row:hover .acc-grip, .acc-grip:focus-visible { color: var(--text-muted); } .acc-grip:hover { color: var(--text); } .acc-row.is-shifting { transition: transform var(--t-mid) var(--ease); } .acc-row.is-dragging { position: relative; z-index: 2; background: var(--surface-2); border-color: var(--accent); box-shadow: var(--elev-3); } .acc-row.is-dragging .acc-grip { cursor: grabbing; color: var(--text); } .acc-name > span:not(.dot):not(.acc-dir) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-name .btn-icon { width: 24px; height: 24px; } .acc-name .btn-icon .icon { width: 14px; height: 14px; } .acc-name .acc-dir { font-weight: 400; } .acc-state { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: var(--fs-meta); white-space: nowrap; color: var(--text-muted); } .acc-state .dot { width: 6px; height: 6px; background: currentColor; } .acc-state.is-in { color: var(--ok); } .acc-state.is-out, .acc-state.is-stale { color: var(--warn); } .acc-hidden-note { color: var(--warn); overflow-wrap: anywhere; } .acc-name-input { flex: 1 1 auto; min-width: 0; max-width: 24ch; background: var(--input-bg); color: var(--text); border: 1px solid var(--focus); border-radius: var(--radius-s); box-shadow: var(--ring); padding: 1px 6px; font-size: var(--fs-ui); font-family: inherit; } .acc-name-input:focus { outline: none; } .acc-dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); } .acc-share { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: var(--fs-meta); color: var(--text-muted); cursor: pointer; transition: color var(--t-fast) ease; } .acc-share:hover { color: var(--text); } .acc-share input { margin: 0; cursor: pointer; } .acc-share input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .acc-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-l); } .acc-form-row { display: flex; gap: var(--gap-s); align-items: flex-end; } .acc-form-title { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--text); } .acc-form-actions { display: flex; justify-content: flex-end; } .health-box { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-l); font-size: var(--fs-meta); color: var(--text-muted); } .health-line { display: flex; gap: var(--gap-s); align-items: baseline; padding: 2px 0; } .health-key { color: var(--text-faint); flex: 0 0 8em; } .health-val { font-family: var(--font-mono); font-size: var(--fs-micro); overflow-wrap: anywhere; } .health-val.is-missing { color: var(--danger); } /* 設定「モデルの自動更新」: 見出しの右に secondary の「今すぐ確認」。状況は状態欄と同じ静的表示だが、 日本語の文なので等幅ではなく UI 書体で読む */ .sect-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-s); } #provider-updates-box .health-val, #push-status-box .health-val { font-family: var(--font-ui); font-size: var(--fs-meta); } #provider-updates-box .health-key, #push-status-box .health-key { flex-basis: 7.5em; } /* ----- CLI設定（設定の上に重ねる小ダイアログ） ----- */ #cliconf-target { white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono); font-size: var(--fs-micro); } #cliconf-reset { margin-right: auto; } #cliconf-note { white-space: pre-wrap; } /* ----- CLIセッションの読み込み ----- */ .import-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-m); } .import-list { display: flex; flex-direction: column; gap: 1px; max-height: 46vh; overflow-y: auto; padding: 4px; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-l); } .import-item { display: flex; align-items: center; gap: var(--gap-xs); } .import-row { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: transparent; border: 0; border-radius: var(--radius-m); padding: 7px 10px; text-align: left; cursor: pointer; transition: background var(--t-fast) ease; } .import-row:hover { background: var(--wash-strong); } .import-row:disabled { cursor: not-allowed; } .import-del { flex: 0 0 auto; opacity: 0; pointer-events: none; transition: opacity var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease; } .import-item:hover .import-del, .import-del:focus-visible { opacity: 1; pointer-events: auto; } .import-list.is-busy .import-row, .import-list.is-busy .import-del { opacity: .45; } .import-row-top { display: flex; align-items: baseline; gap: var(--gap-s); font-size: var(--fs-micro); color: var(--text-faint); } .import-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .import-cwd { font-family: var(--font-mono); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .import-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .import-preview { font-size: var(--fs-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .import-preview.is-empty { color: var(--text-faint); } .import-sub { font-size: var(--fs-meta); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .import-state { display: flex; align-items: center; gap: var(--gap-s); padding: var(--gap-s); font-size: var(--fs-ui); color: var(--text-muted); } /* ----- リモート接続（§12m / §12u） ----- */ #remote-modal-body { display: flex; flex-direction: column; gap: var(--gap-m); } .remote-state { display: flex; align-items: center; gap: var(--gap-m); flex-wrap: wrap; } .remote-state-on { font-size: var(--fs-body); font-weight: 600; color: var(--ok); } .remote-state-off { font-size: var(--fs-body); font-weight: 600; color: var(--text-muted); } .remote-state-meta { font-size: var(--fs-meta); color: var(--text-faint); font-family: var(--font-mono); } .remote-token-row { display: flex; align-items: center; gap: var(--gap-s); flex-wrap: wrap; } .remote-token-view { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted); background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 2px var(--gap-s); max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 8桁コードは離れた端末から読み取って打つので大きく（マイクロ規律の例外） */ .pair-issue { display: flex; flex-direction: column; gap: var(--gap-s); margin-top: var(--gap-s); padding: var(--gap-m) var(--gap-l); background: var(--sunken); border: 1px solid var(--border-strong); border-radius: var(--radius-l); } .pair-issue-code { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: .15em; font-variant-numeric: tabular-nums; text-align: center; } .pair-issue-info { font-size: var(--fs-meta); color: var(--text-muted); } .pair-issue-remain { font-size: var(--fs-meta); color: var(--warn); font-variant-numeric: tabular-nums; } .pair-issue-warn { font-size: var(--fs-meta); padding: 4px 10px; background: var(--danger-soft); border-left: 3px solid var(--danger); border-radius: var(--radius-s); } .pair-devices { display: flex; flex-direction: column; gap: var(--gap-xs); margin-top: var(--gap-s); } .pair-device-row { display: flex; align-items: center; gap: var(--gap-s); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-m); } /* §12bl: リモート接続の窓の「つないだPC」。端末のペアリングと同じ部品（行・入力欄・ボタン）で組む */ .peer-pair { margin-top: var(--gap-l); padding-top: var(--gap-m); border-top: 1px solid var(--border); } .peer-pair-row { display: flex; align-items: center; gap: var(--gap-s); } .peer-pair-row .input { flex: 1 1 auto; min-width: 0; } .peer-pair .input.peer-code { flex: 0 0 12ch; font-family: var(--font-mono); letter-spacing: .12em; } .peer-pair-step { display: flex; flex-direction: column; gap: 6px; } .peer-pair > .btn { align-self: flex-start; } /* §12bl: 相手の PC のファイル。一覧は沈んだ面の1枚の箱。フォルダは押して中へ入る行（ホバーで --wash）、 ファイルは読むだけの行に tertiary の「受け取る」 */ .peer-files-bar { display: flex; align-items: center; gap: 4px; margin: 2px 0 var(--gap-s); } .peer-files-roots { background: var(--input-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-s); font-size: var(--fs-meta); padding: 2px 6px; } .peer-files-path { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); } .peer-files-list { display: flex; flex-direction: column; height: min(50vh, 420px); overflow-y: auto; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-m); } .peer-files-empty { margin: var(--gap-m); font-size: var(--fs-meta); color: var(--text-faint); } .peer-file-row { display: flex; align-items: center; gap: var(--gap-s); min-height: 30px; padding: 0 6px 0 10px; } .peer-file-row + .peer-file-row { border-top: 1px solid var(--border); } .peer-file-row.is-dir { padding: 0; } .peer-file-open { display: flex; align-items: center; gap: var(--gap-s); width: 100%; min-height: 30px; padding: 0 10px; background: transparent; border: 0; color: var(--text); text-align: left; cursor: pointer; transition: background var(--t-fast) ease; } .peer-file-open:hover, .peer-file-open:focus-visible { background: var(--wash); outline: none; } .peer-file-label { display: flex; align-items: center; gap: var(--gap-s); flex: 1 1 auto; min-width: 0; color: var(--text-muted); } .peer-file-open .icon, .peer-file-label .icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-faint); } .peer-file-open .icon { color: var(--accent); } .peer-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-meta); } .peer-file-size, .peer-file-meta { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .peer-file-get { flex: 0 0 auto; font-size: var(--fs-meta); padding: 2px 8px; text-decoration: none; } .peer-files-status { min-height: 1.5em; margin: 6px 0 0; font-size: var(--fs-meta); color: var(--text-muted); } .peer-files-status.is-error { color: var(--danger); } /* 会話の移動メニュー（既存の .menu を面のヘッダのボタンの下に固定位置で出す） */ .menu.peer-move-menu { z-index: 60; } .pair-device-name { font-size: var(--fs-ui); font-weight: 600; } .pair-device-meta { font-size: var(--fs-micro); color: var(--text-faint); flex: 1 1 auto; } /* 設定ウィンドウが窓より狭いとき: 項目は縦積み、ナビは上へ */ @media (max-width: 820px) { .settings-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .set-nav { flex-direction: row; align-items: center; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; } .set-tabs { flex-direction: row; } .set-tabs .seg-btn { width: auto; white-space: nowrap; } .set-tabbar { padding-left: 20px; } .set-scroll { padding: 0 20px 24px; } /* 権限（安全度）のタブも同じ「名前の下に操作」へ（2026-10-01 iPhone で設定を開けるようにした際、2列のまま名前の列が 1文字幅に潰れていた） */ .set-fields > .field, #set-panel-safety .sect > .field { grid-template-columns: minmax(0, 1fr); } .set-fields > .field > .input:not(.input-area):not([id$="-custom"]), .set-fields > .field > .input[id$="-custom"], #set-panel-safety .sect > .field > .input, .set-fields > .field > .field-err, .set-fields > .field > .field-warn { grid-column: 1; grid-row: auto; } .set-fields > .field > .input-num { justify-self: start; } .acc-row { grid-template-columns: minmax(0, 1fr) auto auto; } } /* タッチ主体の端末では押す対象を 44px に広げる */ @media (pointer: coarse) { .composer-toolbar, .composer-tuning-panel, .composer-tuning-trigger { --tuning-control-height: 44px; --tuning-icon-size: var(--tuning-control-height); } .composer-tuning-panel .effort-range { height: var(--tuning-control-height); } .external-task-dismiss { min-height: 44px; } .progress-report-history > summary, .run-activity-summary { min-height: 44px; } .codex-request-actions button, .codex-request-field input, .codex-request-field select { min-height: 44px; } } /* =========================================================== 10. 動きの抑制・強制カラー =========================================================== */ @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } .shimmer { animation: none; color: var(--text-muted); -webkit-text-fill-color: currentColor; } .caret, .think-spark { animation: none; } .modal[open] { animation: none; } .run-timer-fill, .items-tri .icon, .run-activity-summary::before, .progress-report-history > summary::before, .research-result > summary::before, .usage-credit-track, .usage-credit-knob, .acc-row.is-shifting { transition: none; } .pane.is-pane-moving, .pane-drag-ghost { will-change: auto; } .composer-tuning-panel, .composer-tuning-trigger, .tuning-caret, .btn-ghost.tuning-fast-toggle, .composer-reset.tuning-reset, .tuning-model-option, .effort-sparkles, .effort-fill, .effort-thumb, .effort-stop, .effort-ultra-wash { transition: none; } .composer-tuning-panel, .tuning-fast-toggle:active, .composer-reset.tuning-reset:active { transform: none; } .effort-track-wrap:hover .effort-thumb, .effort-track-wrap:active .effort-thumb, .effort-track-wrap:has(.effort-range:focus-visible) .effort-thumb, .effort-control.is-dragging .effort-thumb { transform: translate(-50%, -50%); } .effort-sparkles::before, .effort-sparkles::after, .effort-ultra-wash::before, .effort-control.is-motion-active.is-ultra-entering .effort-thumb::after { animation: none; } @starting-style { .composer-tuning-panel:popover-open { opacity: 1; transform: none; } } } @media (forced-colors: active) { .effort-rail { border: 1px solid CanvasText; } .effort-fill, .effort-thumb { background: Highlight; } .effort-thumb { border-color: CanvasText; } .effort-stop { background: CanvasText; } .effort-ultra-wash, .effort-sparkles { display: none; } .pane, .ablock, .composer-box, .modal { border: 1px solid CanvasText; } .composer-box::before, .composer > .composer-note::before, .composer > .auto-reason::before { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; } } /* §12et 読めなかった会話ファイルの知らせ（一覧の先頭） */ .conv-skipped { margin: 4px 8px 6px; padding: 6px 8px; border-radius: 6px; background: var(--danger-soft); color: var(--danger); font-size: 12px; line-height: 1.4; word-break: break-all; } /* §12fd 返信: 入力欄の上の返信先（静的な引用。押せるのは×だけ）。左のアクセントの線は「どこへ返すか」の印 */ .reply-row { display: flex; align-items: center; gap: var(--gap-s); margin-bottom: var(--gap-xs); padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) var(--gap-s); border-left: 2px solid var(--accent); border-radius: var(--radius-s); background: var(--wash); font-size: var(--fs-meta); color: var(--text-muted); } .reply-row > .icon { width: var(--gap-m); height: var(--gap-m); flex: 0 0 auto; color: var(--accent); } .reply-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .reply-row-text b { font-weight: 600; color: var(--text); } .reply-row-quote { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reply-row-close { flex: 0 0 auto; } /* 人の発言の上の返信先: 押すとその発言へ移動する控えめなボタン（地なし・ホバーで wash） */ .msg-replyref { display: inline-flex; align-items: center; gap: var(--gap-xs); max-width: min(100%, 560px); padding: 2px var(--gap-s) 2px var(--gap-xs); border: 0; border-left: 2px solid var(--border); border-radius: var(--radius-s); background: transparent; font: inherit; font-size: var(--fs-meta); color: var(--text-faint); text-align: left; cursor: pointer; } .msg-replyref:hover { background: var(--wash); color: var(--text-muted); } .msg-replyref .icon { width: var(--gap-m); height: var(--gap-m); flex: 0 0 auto; } .msg-replyref-who { flex: 0 0 auto; } .msg-replyref-quote { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 返信先へ移動したとき、その発言を少しだけ光らせる */ .msg.is-reply-target .bubble, .msg.is-reply-target .ablock { animation: reply-flash 1.8s ease-out; } @keyframes reply-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } } @media (prefers-reduced-motion: reduce) { .msg.is-reply-target .bubble, .msg.is-reply-target .ablock { animation: none; outline: 2px solid var(--accent); } } /* §12hj スレッド間リレー。つまみは会話一覧の六点と同じ格（平常は faint → 発言のホバーで muted → つまみのホバーで text。コピーと同じ 26px の ghost）。 落とし先はペインへの移動と同じアクセントの縁と札、一覧の行は選択の面＋アクセントの枠。印は返信先と同じ控えめなボタンと、枠も面も無い静的な文字。 新しい色は作らず既存のトークンだけ */ .msg-relay-grip { width: 26px; height: 26px; cursor: grab; touch-action: none; user-select: none; color: var(--text-faint); } .msg-relay-grip .icon { width: 14px; height: 14px; } .msg:hover .msg-relay-grip { color: var(--text-muted); } .msg-relay-grip:hover, .msg-relay-grip:focus-visible { color: var(--text); } .msg-relay-grip.is-thread-drag-src { color: var(--accent); background: var(--wash); } .ahead .msg-relay-grip { margin-left: auto; } .ahead .msg-relay-grip:not([hidden]) + .msg-copy { margin-left: 0; } .pane.is-forgetting .msg-relay-grip, html.is-mobile-client .msg-relay-grip { display: none; } .conv-row .conv-item.is-relay-target, .relay-new-slot.is-relay-target { background: var(--selection); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); } .relay-new-slot { flex: 0 0 auto; display: flex; align-items: center; gap: var(--gap-xs); margin: var(--gap-xs) 0; padding: 6px 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius-m); font-size: var(--fs-ui); color: var(--text-muted); } .relay-new-slot.is-relay-target { border-color: var(--accent); } .relay-new-slot .icon { width: 14px; height: 14px; flex: 0 0 auto; } :root:not(.is-mobile-client) .sidebar > .relay-new-slot { order: 2; } .relay-menu { max-width: min(44ch, calc(100vw - var(--gap-l))); } .relay-menu .menu-item { min-width: 0; gap: var(--gap-s); } .relay-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .relay-menu .conv-icon { width: var(--conv-icon-list-size); height: var(--conv-icon-list-size); border-radius: var(--radius-xs); } .relay-menu .conv-icon.is-emoji { font-size: calc(var(--conv-icon-list-size) - var(--gap-xs)); } .relay-menu .conv-icon.is-none { background: var(--wash); color: var(--text-faint); } .relay-menu .conv-icon.brand-ollama { background: var(--text); } .relay-new-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-relay-notes { display: flex; flex-direction: column; gap: 2px; max-width: min(100%, 560px); } .msg-user > .msg-relay-notes { order: 3; align-items: flex-end; } .msg-assistant > .msg-relay-notes { margin-top: var(--gap-xs); padding-left: var(--gap-s); } .msg-relay-note { display: flex; align-items: center; gap: var(--gap-xs); min-width: 0; font-size: var(--fs-meta); color: var(--text-faint); } .msg-relay-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-icon.msg-relay-open { width: 22px; height: 22px; flex: 0 0 auto; } .msg-relay-open .icon { width: 12px; height: 12px; } /* §12fv 選んだ発言を AI に忘れさせる。選択モードの間は入力欄を隠し、同じ場所・同じガラスの面に選択の帯（件数・［キャンセル］・danger の ［AI に忘れさせる…］）。選べる発言の左に丸いチェック（未選択は輪だけ・選択中は accent の塗り）、選んだ発言は accent の輪郭。 新しい部品の色は作らず、既存のトークン（border-strong・accent・on-accent・glass）と既存のボタン（ghost・danger）だけを使う */ .forget-bar { display: none; } .pane.is-forgetting .pane-dock > .composer { display: none; } .pane.is-forgetting .forget-bar { position: relative; isolation: isolate; pointer-events: auto; display: flex; align-items: center; gap: var(--gap-s); width: min(calc(100% - 48px), 860px); margin: 2px auto 14px; padding: 8px 8px 8px 16px; border: 1px solid var(--glass-rim); border-radius: var(--radius-xl); box-shadow: var(--elev-2); } .pane.is-forgetting .forget-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--glass-shine), transparent 45%), var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .pane.is-narrow.is-forgetting .forget-bar { width: calc(100% - 24px); } .forget-count { flex: 1 1 auto; min-width: 0; font-size: var(--fs-ui); color: var(--text); font-variant-numeric: tabular-nums; } .pane.is-forgetting .msg.is-pickable { position: relative; padding-left: 34px; cursor: pointer; } .pane.is-forgetting .msg.is-pickable:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-m); } .forget-check { position: absolute; left: 6px; top: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: transparent; border: 1.5px solid var(--border-strong); background: transparent; transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } .forget-check .icon { width: 14px; height: 14px; } .pane.is-forgetting .msg.is-pickable:hover > .forget-check { border-color: var(--text-faint); } .msg.is-picked > .forget-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .msg.is-picked .bubble, .msg.is-picked .ablock { outline: 2px solid var(--accent); outline-offset: 2px; } .msg.is-picked.forgot-generic, .msg.is-picked:not(:has(.bubble, .ablock)) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-l); } /* 忘れさせた発言: 中身だけ薄くし、「AI は覚えていない」の印（静的な文字・押せない）は薄くしない */ .msg.is-forgotten .bubble, .msg.is-forgotten .msg-replyref, .msg.is-forgotten .ablock > :not(.ahead), .msg.is-forgotten .ahead > :not(.forgot-label):not(button), .msg.is-forgotten.forgot-generic > :not(.forgot-label) { opacity: .45; } .forgot-label { font-size: var(--fs-micro); color: var(--text-faint); white-space: nowrap; } .forgot-generic > .forgot-label { display: block; margin-bottom: var(--gap-xs); } /* 確認のダイアログ: 下見の説明と、この時間帯に書かれた自動メモリの一覧（既定は外す。チェックしたものだけ消す） */ .forget-lead { margin: 0; font-size: var(--fs-ui); line-height: 1.7; color: var(--text-muted); } .forget-mem { display: flex; flex-direction: column; gap: 6px; } .forget-mem-title { font-size: var(--fs-ui); font-weight: 600; color: var(--text); } .forget-mem-list { max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--sunken); } .forget-mem-row { display: flex; align-items: flex-start; gap: var(--gap-s); padding: 8px 10px; border-top: 1px solid var(--border); cursor: pointer; } .forget-mem-row:first-child { border-top: 0; } .forget-mem-row:hover { background: var(--wash); } .forget-mem-row input { flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--accent); } .forget-mem-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .forget-mem-name { font-size: var(--fs-ui); font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .forget-mem-desc { font-size: var(--fs-meta); color: var(--text-muted); overflow-wrap: anywhere; } .forget-mem-meta { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .forget-mem-note { font-size: var(--fs-meta); color: var(--text-faint); } .forget-dialog .modal-actions > .btn-ghost:first-child { margin-right: auto; }