/* * 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); } /* Avatar frame (rounded rectangle). IDLE/ACTIVE で常に同じサイズ・同じ位置を維持する。 切替時の違和感をなくすため scale や margin-top の変動は行わない。 */ .avatar-frame { position: relative; width: 260px; height: 320px; flex-shrink: 0; } .avatar-photo { width: 100%; height: 100%; border-radius: 24px; position: relative; 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 */ .avatar-photo video, .avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-photo svg { width: 100%; height: 100%; display: block; } /* 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 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 slightly smaller so it shares the viewport with the greeting + action buttons without forcing a scroll */ .avatar-frame { width: 220px; height: 270px; } /* greeting block: tighter spacing */ .greeting-block { padding: 16px; } /* 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; } }