/* * OmniTwinX v2 — Design tokens & layout * * 「未来的な AI エージェント」を表現する暗テーマ + 「南国の太陽」の明テーマ。 * `` で切替。デフォルトは dark。 */ /* ============================================ Theme: DARK (default) — "未来的な AI エージェント" ============================================ */ [data-theme="dark"] { --bg-deep: #050818; --surface-glass: rgba(20, 20, 30, 0.5); --surface-glass-strong: rgba(30, 30, 45, 0.7); --border-subtle: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --accent-primary: #8B7FFF; --accent-secondary: #4FC4FF; --accent-glow: rgba(139, 127, 255, 0.4); --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.65); --text-tertiary: rgba(255, 255, 255, 0.4); --ambient-1: rgba(139, 127, 255, 0.20); --ambient-2: rgba(79, 196, 255, 0.16); } /* ============================================ Theme: LIGHT ("南国の太陽") ============================================ */ [data-theme="light"] { --bg-deep: #FAF5EE; --surface-glass: rgba(255, 255, 255, 0.55); --surface-glass-strong: rgba(255, 255, 255, 0.75); --border-subtle: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.12); --accent-primary: #7C6FE8; --accent-secondary: #FF8B65; --accent-glow: rgba(255, 139, 101, 0.35); --text-primary: #1A1F3A; --text-secondary: rgba(26, 31, 58, 0.65); --text-tertiary: rgba(26, 31, 58, 0.4); --ambient-1: rgba(255, 200, 140, 0.45); --ambient-2: rgba(120, 200, 255, 0.30); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg-deep); color: var(--text-primary); font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif; font-size: 14px; line-height: 1.5; overflow: hidden; -webkit-font-smoothing: antialiased; transition: background 0.6s ease, color 0.6s ease; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 20% 20%, var(--ambient-1) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, var(--ambient-2) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(20, 20, 40, 0.0) 0%, var(--bg-deep) 80%); z-index: -1; animation: ambient 24s ease-in-out infinite alternate; transition: background 0.6s ease; } @keyframes ambient { from { transform: translate(0, 0) scale(1); } to { transform: translate(-3%, 2%) scale(1.1); } } /* === Top nav === */ .top-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; height: 72px; background: var(--surface-glass); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); position: relative; z-index: 10; } .logo { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-flex; align-items: center; } .logo-img { height: 48px; width: auto; display: block; } [data-theme="dark"] .logo-img { /* SVG ロゴ (黒前提) を暗背景で見やすくするため invert させて白っぽく */ filter: invert(1) hue-rotate(180deg) brightness(1.1); } .top-right { display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.04); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-primary); transition: all 0.2s; } .theme-toggle:hover { background: rgba(255,255,255,0.08); } /* 管理者向け: TOP 画面右上に表示する Django Admin への戻りリンク (admin の「サイトを表示」ボタンと対称的な役割) */ .admin-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: all 0.2s; } .admin-link:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); border-color: var(--accent-primary); } .admin-link i { font-size: 14px; } .user-pill { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); border-radius: 999px; cursor: pointer; transition: all 0.2s; font-size: 13px; color: var(--text-secondary); text-decoration: none; } .user-pill:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); } .user-avatar-mini { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: white; } /* === Layout === */ .app-layout { display: grid; grid-template-columns: 264px 1fr; height: calc(100vh - 72px); gap: 16px; padding: 16px; } /* === Sidebar === */ .sidebar { background: var(--surface-glass); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; } .sidebar-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); font-weight: 600; padding: 14px 8px 6px; } .sidebar-section-title:first-child { padding-top: 4px; } /* 「その他」セクション (ログアウト等) はサイドバー最下部に固定 */ .sidebar-section-title.sidebar-section-bottom { margin-top: auto; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: all 0.15s; font-size: 13.5px; color: var(--text-secondary); border: 1px solid transparent; user-select: none; text-decoration: none; } .nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); } [data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.03); } .nav-item.recent { background: linear-gradient(120deg, rgba(139,127,255,0.12), rgba(79,196,255,0.06)); border-color: rgba(139,127,255,0.20); color: var(--text-primary); } [data-theme="light"] .nav-item.recent { background: linear-gradient(120deg, rgba(124,111,232,0.10), rgba(255,139,101,0.08)); border-color: rgba(124,111,232,0.25); } .nav-item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; } .nav-item.recent .nav-item-dot { background: var(--accent-primary); box-shadow: 0 0 10px var(--accent-glow); } .nav-item-meta { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-tertiary); opacity: 0.7; } .nav-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item-progress { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em; } .nav-item-progress.completed { background: rgba(79, 227, 79, 0.18); color: #4FE34F; } [data-theme="light"] .nav-item-progress.completed { background: rgba(45, 145, 45, 0.18); color: #2D912D; } .nav-item-progress.in-progress { background: rgba(139, 127, 255, 0.20); color: var(--accent-primary); } .sidebar-footer { /* sidebar-section-bottom が margin-top: auto を持つので、footer 側で 重複させると flex の auto 空間が等分されて「その他」が中央に押し戻されてしまう。 footer は section-bottom の直後に置き、自然に最下部に並ばせる。 */ padding: 12px 12px 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-secondary); letter-spacing: 0.08em; border-top: 1px solid var(--border-subtle); } /* === Main canvas: AVATAR-CENTRIC === */ .canvas { background: var(--surface-glass); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: 20px; position: relative; display: flex; flex-direction: column; align-items: center; /* 縦方向は flex-start。アバターは常に上部の同じ位置に固定し、 IDLE/ACTIVE 切替で位置がジャンプしないようにする。 */ justify-content: flex-start; padding: 80px 40px 40px; /* 縦に収まらない時はスクロールで全要素に到達できるようにする。 overflow:hidden のままだと、ビューポート高が足りない場合 (小さいノート PC / ブラウザ表示倍率 100% 等) に「会話を開始」ボタン等が下に隠れて クリップされ、スクロールもできず操作不能になる (2026-06-08 PICC で発覚, AI A0608-04)。横は崩さないため hidden のまま。 */ overflow-y: auto; overflow-x: hidden; transition: filter 0.4s ease; } /* empty-state 時のみ縦中央寄せに戻す (KB 無し時) */ .canvas.empty { justify-content: center; padding-top: 40px; } .canvas.video-open { filter: blur(8px) brightness(0.5); } /* TOP 画面 (アバターステージ) 用の canvas モディファイア。 ステージを大きく取るため上部余白を詰め、チャット欄をステージ幅に合わせる。 */ .canvas.stage { padding: 44px 40px 32px; } .canvas.stage .chat-area { max-width: 880px; margin-top: 18px; } /* Avatar stage frame (案A シネマステージ, 2026-09-04). LiveAvatar の 16:9 映像をクロップせずに最大幅 880px で表示する。 縦が短いビューポートでは高さ基準で縮小する (下限 480px 幅)。 IDLE/ACTIVE で常に同じサイズ・同じ位置を維持する。 */ .avatar-frame { position: relative; width: min(880px, 100%, max(calc((100vh - 420px) * 1.7778), 480px)); aspect-ratio: 16 / 9; flex-shrink: 0; } .avatar-photo { /* absolute 配置でフレームに張り付ける。中身 (縦長の静止画など) の 固有サイズがフレームの aspect-ratio (16:9) を押し広げないようにするため。 */ position: absolute; inset: 0; border-radius: 24px; z-index: 2; overflow: hidden; box-shadow: 0 20px 80px rgba(139, 127, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, #4FC4FF 0%, #8B7FFF 100%); } [data-theme="light"] .avatar-photo { box-shadow: 0 20px 60px rgba(124, 111, 232, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.05); } /* Replaced by LiveAvatar video stream when in session. LIVE 映像は元々 16:9 なので cover でフレームにぴったり収まる。 IDLE ⇔ LIVE はクロスフェード (canvas.chat-open で opacity 切替)。 */ .avatar-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 2; opacity: 0; transition: opacity 0.6s ease; } .canvas.chat-open .avatar-photo video { opacity: 1; } /* IDLE の静止画 (avatar_image) は縦長のことが多く、cover だと頭が 切れるため contain で全体を表示する。左右の余白は avatar-backdrop (同じ画像のぼかし拡大) が埋める。 */ .avatar-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; } .avatar-photo svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; } .avatar-photo img, .avatar-photo svg { transition: opacity 0.6s ease; } .canvas.chat-open .avatar-photo img, .canvas.chat-open .avatar-photo svg { opacity: 0; } /* 静止画の左右余白を埋めるぼかし背景 (同じ画像を拡大+blur して敷く) */ .avatar-backdrop { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(28px) brightness(0.55) saturate(1.1); transform: scale(1.15); } /* 接続中オーバーレイ (「話しかける」押下〜セッション開始までの間、 canvas.connecting で表示。ステージを薄暗くしてスピナーを出す) */ .stage-connecting { position: absolute; inset: 0; z-index: 4; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(5, 8, 24, 0.55); backdrop-filter: blur(2px); color: rgba(255, 255, 255, 0.9); font-size: 13px; letter-spacing: 0.08em; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .canvas.connecting:not(.chat-open) .stage-connecting { opacity: 1; } .stage-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: var(--accent-primary); animation: spin 0.9s linear infinite; } /* ステージ左上の KB 名オーバーレイ (旧 greeting-label の移設先) */ .stage-name { position: absolute; top: 14px; left: 18px; z-index: 3; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); } /* 残り利用時間バッジのステージ上オーバーレイ版。 映像 (=常に暗め) の上に載るため、テーマによらず暗背景+白文字で固定する。 */ .avatar-frame .remaining-badge { position: absolute; top: 10px; right: 14px; z-index: 3; margin-top: 0; background: rgba(0, 0, 0, 0.45); border-color: transparent; color: rgba(255, 255, 255, 0.85); } .avatar-frame .remaining-badge .remaining-badge-label { color: rgba(255, 255, 255, 0.6); } .avatar-frame .remaining-badge .remaining-badge-value { color: #FFFFFF; } .avatar-frame .remaining-badge.is-low { background: rgba(255, 159, 67, 0.25); border-color: rgba(255, 159, 67, 0.5); } /* Live indicator badge */ .avatar-live-dot { position: absolute; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(0,0,0,0.7); border-radius: 999px; z-index: 3; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: white; } .avatar-live-dot-pulse { width: 6px; height: 6px; border-radius: 50%; background: #888; } .canvas.chat-open .avatar-live-dot { background: rgba(0,0,0,0.7); } .canvas.chat-open .avatar-live-dot-pulse { background: #4FE34F; animation: live-pulse 1.5s ease-in-out infinite; box-shadow: 0 0 8px rgba(79, 227, 79, 0.6); } @keyframes live-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Halo rings */ .halo { position: absolute; border-radius: 32px; border: 1px solid rgba(139, 127, 255, 0.3); pointer-events: none; z-index: 1; } [data-theme="light"] .halo { border-color: rgba(124, 111, 232, 0.25); } .halo-1 { inset: -14px; animation: halo-pulse 3.5s ease-in-out infinite; } .halo-2 { inset: -36px; border-radius: 40px; border-color: rgba(79, 196, 255, 0.18); animation: halo-pulse 3.5s ease-in-out infinite 0.5s; } [data-theme="light"] .halo-2 { border-color: rgba(255, 139, 101, 0.30); } .halo-3 { inset: -64px; border-radius: 48px; border-color: rgba(139, 127, 255, 0.10); animation: halo-pulse 3.5s ease-in-out infinite 1s; } [data-theme="light"] .halo-3 { border-color: rgba(124, 111, 232, 0.10); } @keyframes halo-pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } .avatar-frame::before { content: ''; position: absolute; inset: -32px; border-radius: 36px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); z-index: 0; animation: breathe-hero 4s ease-in-out infinite; } @keyframes breathe-hero { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.08); } } .canvas.chat-open .avatar-frame::before { animation: breathe-fast 1.6s ease-in-out infinite; } @keyframes breathe-fast { 0%, 100% { opacity: 0.7; transform: scale(1.02); } 50% { opacity: 1; transform: scale(1.12); } } /* === Greeting === */ /* IDLE/ACTIVE/履歴閲覧の 3 状態で共通レイアウトを維持するため、 greeting-block は常時表示する (中身は KB 名ラベルのみ)。 */ .greeting-block { margin-top: 24px; text-align: center; max-width: 640px; } /* 当月残り利用時間バッジ (アバター名の下に表示) */ .remaining-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .remaining-badge .bi { font-size: 12px; opacity: 0.8; } .remaining-badge-label { color: var(--text-tertiary); } .remaining-badge-value { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--text-primary); letter-spacing: 0.02em; } /* 残りわずか (5 分未満) で警告色 */ .remaining-badge.is-low { border-color: rgba(255, 159, 67, 0.5); background: rgba(255, 159, 67, 0.12); } .remaining-badge.is-low .remaining-badge-value { color: #ffb86b; } .greeting-label { font-size: 11px; color: var(--accent-primary); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; font-family: 'JetBrains Mono', monospace; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; } .greeting-label::before, .greeting-label::after { content: ''; width: 24px; height: 1px; background: var(--accent-primary); opacity: 0.4; } .greeting-text { font-size: 22px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.5; color: var(--text-primary); } .greeting-text .user-highlight { background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; } /* === CTA buttons === */ /* action-row は IDLE/ACTIVE 共通で常時表示し、同じ位置に [start-or-end] [動画を観る] の 2 ボタンが並ぶ。 - IDLE 中: 「話しかける」が表示、「会話を終える」は非表示 - ACTIVE 中 (chat-open): 「会話を終える」が表示、「話しかける」は非表示 - 「動画を観る」は常時表示 (チャット中でも動画にピボット可能) 全ボタンは同じスタイル (背景色統一) で「どちらも選択可能」を表現. */ .action-row { margin-top: 28px; display: flex; gap: 14px; justify-content: center; } /* sw-stop-btn は IDLE では非表示、chat-open のみ表示 */ #sw-stop-btn { display: none; } .canvas.chat-open #sw-start-btn { display: none; } .canvas.chat-open #sw-stop-btn { display: flex; } .action-btn { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; letter-spacing: -0.01em; transition: all 0.2s; border: 1px solid transparent; /* デフォルトは紫グラデーション (primary). 両ボタンとも同じ「選択できる」見た目を保つ. */ background: linear-gradient(120deg, var(--accent-primary), #6F62E8); color: white; box-shadow: 0 4px 20px rgba(139,127,255,0.3); } [data-theme="light"] .action-btn { box-shadow: 0 4px 20px rgba(124,111,232,0.25); } .action-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(139,127,255,0.5); } /* secondary バリアント (現在は使用せず、将来の拡張用に残置) */ .action-btn.secondary { background: rgba(255,255,255,0.04); border-color: var(--border-subtle); color: var(--text-primary); box-shadow: none; } [data-theme="light"] .action-btn.secondary { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); } .action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .action-btn:disabled:hover { transform: none; box-shadow: 0 4px 20px rgba(139,127,255,0.3); } /* セッション接続中などのローディング状態. テキストは残したまま視覚的に 「処理中」を示し、クリックを無効化する. */ .action-btn.is-loading { opacity: 0.7; cursor: wait; position: relative; } .action-btn.is-loading::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 4px; border: 2px solid rgba(255,255,255,0.4); border-top-color: rgba(255,255,255,1); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .action-btn-icon { font-size: 16px; } /* === 質問サジェストチップ === */ /* セッション中 (chat-open) のみ表示。クリックでそのままテキスト送信する。 「何を話せばいいか分からない」初見ユーザーの発話ハードルを下げる。 */ .suggest-row { display: none; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; max-width: 880px; } .canvas.chat-open .suggest-row { display: flex; } .suggest-chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); font-size: 13px; font-family: inherit; cursor: pointer; transition: all 0.2s; } .suggest-chip:hover { color: var(--text-primary); border-color: var(--accent-primary); background: rgba(139, 127, 255, 0.10); } [data-theme="light"] .suggest-chip { background: rgba(255, 255, 255, 0.6); } /* === Chat panel === */ .chat-area { display: none; flex-direction: column; width: 100%; max-width: 680px; margin-top: 24px; flex: 1; min-height: 0; } /* chat-open 中、または過去メッセージがある間 (has-messages) は表示し続ける. セッション終了後もユーザーが履歴を読めるようにするため. */ .canvas.chat-open .chat-area, .canvas.has-messages .chat-area { display: flex; } /* セッション終了後 (has-messages だが chat-open ではない) は、入力エリアを隠す. 「セッションを再開」するには上部の「話しかける」ボタンを使う. */ .canvas.has-messages:not(.chat-open) .chat-input-area { display: none; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px 0; display: flex; flex-direction: column; gap: 14px; } .chat-messages .chat-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-tertiary); margin: auto; text-align: center; } .chat-messages .chat-placeholder i { font-size: 32px; } /* AvatarChatController が出力するメッセージ (.message + .user/.assistant) を v2 風に */ .chat-messages .message { display: flex; gap: 8px; align-items: flex-start; max-width: 90%; } .chat-messages .message.user { align-self: flex-end; flex-direction: row-reverse; } .chat-messages .message.assistant { align-self: flex-start; } .chat-messages .message-avatar { display: none; /* v2 ではメッセージごとの小アイコンは不要 (大きいアバターが上にいる) */ } .chat-messages .message-content { font-size: 14px; line-height: 1.6; padding: 11px 16px; border-radius: 18px; } .chat-messages .message.user .message-content { background: linear-gradient(120deg, var(--accent-primary), #6F62E8); color: white; border-radius: 18px 18px 4px 18px; box-shadow: 0 4px 16px rgba(139,127,255,0.25); } .chat-messages .message.assistant .message-content { background: rgba(255,255,255,0.06); border: 1px solid var(--border-subtle); border-radius: 18px 18px 18px 4px; color: var(--text-primary); } [data-theme="light"] .chat-messages .message.assistant .message-content { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.06); } .chat-input-area { display: flex; gap: 10px; align-items: center; padding-top: 14px; border-top: 1px solid var(--border-subtle); } .chat-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 12px 18px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none; } [data-theme="light"] .chat-input { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.08); } .chat-input::placeholder { color: var(--text-tertiary); } .chat-input:focus { border-color: var(--accent-primary); } .chat-input:disabled { opacity: 0.5; cursor: not-allowed; } .chat-mic-btn, .chat-send-btn { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: all 0.15s; } .chat-mic-btn { background: rgba(255,255,255,0.06); border: 1px solid var(--border-subtle); color: var(--text-secondary); } .chat-mic-btn.active, .chat-mic-btn.recording { background: linear-gradient(120deg, var(--accent-primary), #6F62E8); color: white; border-color: transparent; box-shadow: 0 0 16px var(--accent-glow); } .chat-mic-btn:disabled { opacity: 0.4; cursor: not-allowed; } .chat-send-btn { background: linear-gradient(120deg, var(--accent-primary), #6F62E8); color: white; } .chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* chat-end-btn は廃止. 「会話を終える」は action-row 内の #sw-stop-btn が担う. */ /* Status badge (used by AvatarChatController) — hidden in v2 (LIVE indicator covers it) */ .v2-status-hidden { display: none; } /* === Video Modal === */ .video-modal-backdrop { position: fixed; inset: 0; background: rgba(2, 4, 16, 0.5); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 100; animation: fadeIn 0.25s ease; } [data-theme="light"] .video-modal-backdrop { background: rgba(250, 245, 238, 0.6); } .video-modal-backdrop.open { display: flex; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .video-modal { width: 880px; max-width: 92vw; background: var(--surface-glass-strong); backdrop-filter: blur(40px); border: 1px solid var(--border-strong); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.6); animation: slideUp 0.3s ease; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .paused-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; background: linear-gradient(120deg, rgba(255,160,80,0.2), rgba(255,180,100,0.15)); border-bottom: 1px solid rgba(255,160,80,0.3); font-size: 12px; color: #FFB070; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; } [data-theme="light"] .paused-banner { background: linear-gradient(120deg, rgba(255,139,101,0.18), rgba(255,200,140,0.18)); color: #B85432; border-bottom-color: rgba(255,139,101,0.3); } .paused-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: #FFB070; animation: paused-pulse 2s ease-in-out infinite; } [data-theme="light"] .paused-banner-dot { background: #FF8B65; } @keyframes paused-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .video-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); } .video-modal-title-text { font-size: 15px; font-weight: 500; } .video-modal-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; } .video-modal-close:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); } .video-modal-frame { aspect-ratio: 16/9; background: #0a0a1a; display: flex; align-items: center; justify-content: center; position: relative; } .video-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .video-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,0.4); } .video-placeholder-icon { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,255,255,0.04); } .video-placeholder-text { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } /* === Form pages (profile / contact) === glass card に form を入れて、avatar canvas と同じビジュアル言語で見せる. */ .form-card { width: 100%; max-width: 560px; background: var(--surface-glass-strong); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 36px 36px 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .form-card-header { text-align: center; margin-bottom: 28px; } .form-card-eyebrow { font-size: 11px; color: var(--accent-primary); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; font-family: 'JetBrains Mono', monospace; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; } .form-card-eyebrow::before, .form-card-eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--accent-primary); opacity: 0.4; } .form-card-title { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--text-primary); margin: 0; } .form-card-subtitle { font-size: 13px; color: var(--text-tertiary); margin-top: 8px; } .form-field { margin-bottom: 18px; } .form-field label, .form-field .form-label { display: block; font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-bottom: 6px; letter-spacing: 0.02em; } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"], .form-field input[type="password"], .form-field textarea, .form-field select, .form-field .form-control { display: block; width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s, background 0.15s; } [data-theme="light"] .form-field input[type="text"], [data-theme="light"] .form-field input[type="email"], [data-theme="light"] .form-field input[type="tel"], [data-theme="light"] .form-field input[type="password"], [data-theme="light"] .form-field textarea, [data-theme="light"] .form-field select, [data-theme="light"] .form-field .form-control { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.08); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus, .form-field .form-control:focus { border-color: var(--accent-primary); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(139, 127, 255, 0.15); } .form-field textarea { min-height: 120px; resize: vertical; } .form-field-error { color: #FF8B65; font-size: 12px; margin-top: 6px; } .form-field-help { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; } /* checkbox 用. agree_kiyaku など */ .form-field.is-checkbox label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-primary); } .form-field.is-checkbox input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-primary); } .form-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; } /* メタ情報カード (Profile ページの「アカウント情報」セクション) */ .info-card { width: 100%; max-width: 560px; background: var(--surface-glass); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 20px 24px; margin-top: 18px; } .info-card-title { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; font-family: 'JetBrains Mono', monospace; margin-bottom: 12px; } .info-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; } .info-item-label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 2px; } .info-item-value { font-size: 13px; color: var(--text-primary); word-break: break-all; } /* messages (django messages framework) を v2 風に */ .flash-messages { width: 100%; max-width: 560px; margin-bottom: 16px; } .flash-message { padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 8px; background: rgba(139, 127, 255, 0.12); border: 1px solid rgba(139, 127, 255, 0.3); color: var(--text-primary); } .flash-message.error, .flash-message.warning { background: rgba(255, 139, 101, 0.12); border-color: rgba(255, 139, 101, 0.4); color: #FFB070; } /* form を中央配置するための canvas モディファイア */ .canvas.form-page { justify-content: center; align-items: center; padding: 40px 24px; overflow-y: auto; } /* === Empty / no-KB state === */ .canvas.empty { align-items: center; justify-content: center; } .empty-state { text-align: center; max-width: 480px; color: var(--text-secondary); } .empty-state h2 { font-size: 24px; color: var(--text-primary); font-weight: 500; margin-bottom: 12px; letter-spacing: -0.02em; } .empty-state p { font-size: 14px; line-height: 1.6; } /* ======================================================================== List / Table 系 (user_list.html 等の管理系一覧画面) ======================================================================== */ /* 一覧系ページ用の canvas modifier (form-page よりワイド) */ .canvas.list-page { align-items: stretch; justify-content: flex-start; padding: 32px 24px 48px; overflow-y: auto; } /* 一覧コンテナ (form-card のワイド版) */ .list-card { width: 100%; max-width: 1400px; margin: 0 auto; background: var(--surface-glass-strong); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 28px 28px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .list-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .list-card-eyebrow { font-size: 11px; color: var(--accent-primary); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; } .list-card-title { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; color: var(--text-primary); margin: 0; } .list-card-meta { font-size: 12px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; } /* データテーブル (v2 dark theme) */ .data-table-wrap { width: 100%; overflow-x: auto; border-radius: 12px; border: 1px solid var(--border-subtle); } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text-primary); } .data-table thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02); white-space: nowrap; } .data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); } .data-table .col-emphasis { color: var(--text-primary); font-weight: 500; } .data-table .col-muted { color: var(--text-tertiary); } .data-table .col-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: right; } .data-table a { color: var(--accent-primary); text-decoration: none; } .data-table a:hover { text-decoration: underline; } /* ロール / ステータスバッジ (v2 風) */ .role-badge, .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid transparent; } .role-badge.admin { background: rgba(139, 127, 255, 0.15); border-color: rgba(139, 127, 255, 0.4); color: #c7c0ff; } .role-badge.client { background: rgba(79, 196, 255, 0.13); border-color: rgba(79, 196, 255, 0.4); color: #a8e1ff; } .role-badge.customer { background: rgba(255, 255, 255, 0.05); border-color: var(--border-subtle); color: var(--text-secondary); } .status-badge.active { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.4); color: #6ee7b7; } .status-badge.locked { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; } .status-badge.inactive { background: rgba(255, 255, 255, 0.04); border-color: var(--border-subtle); color: var(--text-tertiary); } /* インライン編集ボタン (table 内) */ .row-action { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 12px; text-decoration: none; transition: all 0.15s; } .row-action:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); border-color: var(--accent-primary); } .list-empty { text-align: center; padding: 48px 16px; color: var(--text-tertiary); font-size: 14px; } .list-empty .list-empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.4; } /* ============================================================ Mobile drawer chrome — §11.1 Phase 2 ------------------------------------------------------------ These two elements (hamburger button + backdrop) exist in the DOM on every viewport but are HIDDEN on desktop. They only become visible inside the @media (max-width: 768px) block below. Keeping the desktop default here (display:none) guarantees the desktop layout is untouched — the elements take no space and do not render. ============================================================ */ .mobile-menu-btn { display: none; /* desktop: never shown */ background: transparent; border: none; color: var(--text-secondary); font-size: 22px; cursor: pointer; padding: 6px 8px; align-items: center; justify-content: center; } .sidebar-backdrop { display: none; /* desktop: never shown */ } /* ============================================================ Mobile responsive (≤768px) — §11.1 ------------------------------------------------------------ Goal: Make the elevator-pitch use case work on iPhone. The desktop layout (everything above) is unchanged; this block only applies when the viewport is narrow. Root cause of HIRO's bug ("下までスクロールできない"): html/body had `overflow: hidden` .app-layout had `height: calc(100vh - 72px)` (固定) .canvas had `overflow: hidden` The three together locked vertical scroll on small viewports, so the "会話を開始" button rolled below the fold and was unreachable on iPhone. The overrides below unlock scrolling, stack the layout into a single column, and shrink chrome so the avatar + start button + chat input all fit / reach within one comfortable scroll on a phone. Out of scope for Phase 1: - Sidebar drawer (hidden entirely on mobile for now; HIRO can still navigate via top-nav logo → /) - Other end-user pages beyond main.html — handled in a follow-up Phase 3 if cheap ============================================================ */ @media (max-width: 768px) { /* unlock vertical scroll */ html, body { overflow: auto; } /* show hamburger button on mobile */ .mobile-menu-btn { display: inline-flex; } /* slim top-nav */ .top-nav { padding: 0 12px; height: 56px; position: sticky; top: 0; z-index: 50; /* keep above drawer/backdrop */ } .logo-img { height: 36px; } .top-right { gap: 8px; } .user-pill span { display: none; } .user-pill { padding: 4px; } /* layout: single column, height adapts to content */ .app-layout { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 56px); padding: 8px; gap: 0; } /* ----- Sidebar drawer (Phase 2) ----- The sidebar becomes a fixed slide-in panel from the left. Hidden off-screen by default (translateX(-100%)); the .open class (toggled by the hamburger JS) slides it in. */ .sidebar { display: flex; /* override Phase 1's none */ position: fixed; top: 56px; /* below the slim top-nav */ left: 0; bottom: 0; width: 260px; max-width: 80vw; border-radius: 0 16px 16px 0; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 45; will-change: transform; } .sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0, 0, 0, 0.5); } /* backdrop behind the open drawer. CRITICAL: pointer-events must be 'none' while the drawer is closed. An opacity:0 element is invisible but STILL intercepts taps, so without this the (invisible) backdrop would swallow every tap on the avatar / start / mic buttons below it and the page would feel completely dead on a phone. Only when the drawer is open (.visible) does it capture taps — so tapping the dim area closes the drawer. */ .sidebar-backdrop { display: block; position: fixed; inset: 56px 0 0 0; /* cover area below top-nav */ background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; /* closed: let taps pass through */ transition: opacity 0.25s ease; z-index: 40; } .sidebar-backdrop.visible { opacity: 1; pointer-events: auto; /* open: capture tap to close */ } /* prevent body scroll while the drawer is open */ body.drawer-open { overflow: hidden; } /* canvas: unlock overflow, tighter padding for narrow viewport, extra bottom padding so the start button is comfortably above iOS Safari's home indicator bar */ .canvas { overflow: visible; padding: 32px 16px 80px; border-radius: 16px; min-height: calc(100vh - 80px); } /* avatar stage: full width of the narrow canvas (16:9 は aspect-ratio が維持) */ .avatar-frame { width: 100%; } .canvas.stage { padding: 24px 16px 80px; } /* action buttons: wrap if needed, ensure full tap targets */ .action-row { gap: 10px; margin-top: 20px; flex-wrap: wrap; } .action-btn { font-size: 13px; min-height: 44px; } /* chat input: 44×44 minimum (iOS guideline) for mic + send */ .chat-mic-btn, .chat-send-btn { min-width: 44px; min-height: 44px; } .chat-input { font-size: 16px; } /* prevents iOS zoom on focus */ .chat-area { margin-top: 16px; } .chat-input-area { padding: 8px; } /* video modal: use most of viewport on mobile */ .video-modal { width: 96vw; max-width: 96vw; } .video-modal-frame iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; } } /* ======================================================================== 会話履歴 (backlog §13.11 フェーズ 2): 一覧の絞り込みバー + トランスクリプト ======================================================================== */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle); } .filter-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-tertiary); } .filter-item select, .filter-item input[type="date"] { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 7px 10px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; color-scheme: dark; } [data-theme="light"] .filter-item select, [data-theme="light"] .filter-item input[type="date"] { background: rgba(255, 255, 255, 0.7); color-scheme: light; } .filter-item select:focus, .filter-item input[type="date"]:focus { border-color: var(--accent-primary); } .filter-sep { color: var(--text-tertiary); } .filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: none; background: linear-gradient(120deg, var(--accent-primary), #6F62E8); color: white; font-size: 13px; font-family: inherit; cursor: pointer; } .filter-reset { font-size: 12px; color: var(--text-tertiary); text-decoration: none; } .filter-reset:hover { color: var(--text-primary); } .mode-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border-subtle); color: var(--text-secondary); } .mode-badge.voice { color: #4FC4FF; border-color: rgba(79, 196, 255, 0.35); } .mode-badge.chat { color: var(--accent-primary); border-color: rgba(139, 127, 255, 0.35); } .data-table tr.row-link { cursor: pointer; } .pager { display: flex; justify-content: center; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--text-secondary); } .pager a { color: var(--accent-primary); text-decoration: none; } /* トランスクリプト (トップ画面の吹き出しスタイルを再利用) */ .transcript-card { max-width: 900px; } .transcript-card .back-link { color: var(--text-tertiary); text-decoration: none; letter-spacing: 0.08em; } .transcript-card .back-link:hover { color: var(--accent-primary); } .transcript-card .title-sep { margin: 0 10px; color: var(--text-tertiary); font-weight: 400; } .transcript-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; } .transcript-meta i { margin-right: 4px; opacity: 0.7; } .chat-messages.transcript { flex: none; overflow: visible; padding: 8px 4px 0; gap: 12px; } .chat-messages.transcript .message { flex-direction: column; gap: 2px; } .chat-messages.transcript .message.user { align-items: flex-end; } .chat-messages.transcript .message.assistant { align-items: flex-start; } .chat-messages.transcript .message-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-tertiary); padding: 0 6px; } /* 狭い画面でバッジ・行操作リンクが折り返さないように */ .mode-badge, .data-table .row-action { white-space: nowrap; } /* ======================================================================== 管理機能ハブ (backlog §13.12): パートナー企業向けの機能カード ======================================================================== */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .hub-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle); color: var(--text-primary); text-decoration: none; transition: all 0.2s; } .hub-card:hover { border-color: var(--accent-primary); background: rgba(139, 127, 255, 0.08); transform: translateY(-2px); } [data-theme="light"] .hub-card { background: rgba(255, 255, 255, 0.6); } .hub-card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); } .hub-card-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .hub-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .hub-card-stat { margin-top: auto; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-tertiary); } .hub-card-num { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 500; color: var(--text-primary); } .hub-card-warn { margin-left: auto; color: #ffb86b; } /* 一覧ページ共通: 見出し上の戻りリンクと注記 */ .list-card .back-link { color: var(--text-tertiary); text-decoration: none; letter-spacing: 0.08em; } .list-card .back-link:hover { color: var(--accent-primary); } .list-note { margin-top: 14px; font-size: 12px; color: var(--text-tertiary); } .data-table .row-action + .row-action { margin-left: 10px; } /* フォームページ共通: セクション見出し・必須マーク・戻りリンク (ユーザー編集など) */ .form-section-title { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-tertiary); } .form-section-title:first-of-type { margin-top: 4px; } .required-mark { color: #ff8b8b; margin-left: 2px; } .form-card .back-link { color: var(--text-tertiary); text-decoration: none; letter-spacing: 0.08em; } .form-card .back-link:hover { color: var(--accent-primary); } /* 会話欄のシステム通知 (LiveAvatar 切断などの異常終了の説明) */ .chat-messages .chat-notice { align-self: center; max-width: 90%; padding: 6px 14px; border-radius: 999px; font-size: 12px; color: var(--text-secondary); background: rgba(255, 159, 67, 0.12); border: 1px solid rgba(255, 159, 67, 0.35); text-align: center; }