:root { --bg: #0f1117; --surface: #1a1d27; --surface2: #242736; --border: #2e3144; --text: #e4e4e7; --text2: #a1a1aa; --primary: #6366f1; --primary-hover: #818cf8; --green: #22c55e; --yellow: #eab308; --red: #ef4444; --orange: #f97316; --radius: 8px; } /* ═══════════════════════════════════════════ THEME 2 · 晴空（Light） ═══════════════════════════════════════════ */ [data-theme="light"] { --bg: #eef2f7; --surface: #ffffff; --surface2: #f5f7fb; --border: #d8e0ea; --text: #18243a; --text2: #58697e; --primary: #5b5cf6; --primary-hover: #4640dd; --green: #15803d; --yellow: #9a6c04; --red: #b91c1c; --orange: #c2410c; --radius: 8px; } /* Fix rgba(255,255,255,…) highlights invisible on white backgrounds */ [data-theme="light"] .msg.assistant .bubble code { background: rgba(0,0,0,0.06); } [data-theme="light"] .msg.assistant .bubble th { background: rgba(0,0,0,0.04); } [data-theme="light"] .invite-code-input { background: rgba(0,0,0,0.04); } [data-theme="light"] .member-stats .stat { background: rgba(0,0,0,0.04); } [data-theme="light"] .chatroom-panel { background: linear-gradient(180deg,rgba(0,0,0,0.01),transparent 18%); } [data-theme="light"] .cr-msg.system .cr-msg-content { background: rgba(91,92,246,0.07); border-color: rgba(91,92,246,0.2); } [data-theme="light"] .cr-msg.system.meeting-event .cr-msg-content { background: rgba(21,128,61,0.08); border-color: rgba(21,128,61,0.22); } [data-theme="light"] .chatroom-meeting-banner { background: rgba(91,92,246,0.05); border-color: rgba(91,92,246,0.22); } [data-theme="light"] .chatroom-meeting-banner.inactive { background: rgba(0,0,0,0.02); border-color: var(--border); } [data-theme="light"] .meeting-card { background: rgba(0,0,0,0.03); } [data-theme="light"] .meeting-member-chip { background: rgba(0,0,0,0.05); color: var(--text2); } [data-theme="light"] .meeting-member-chip.key { background: rgba(154,108,4,0.1); color: #7c5504; } [data-theme="light"] .meeting-pill.active { border-color: rgba(91,92,246,0.45); background: rgba(91,92,246,0.1); color: #3730a3; } [data-theme="light"] .meeting-pill.warn { color: #991b1b; background: rgba(185,28,28,0.1); border-color: rgba(185,28,28,0.35); } [data-theme="light"] .notif-detail-body { background: rgba(0,0,0,0.03); } [data-theme="light"] .chatroom-memory { background: rgba(0,0,0,0.02); } [data-theme="light"] .chatroom-extract-result { background: rgba(91,92,246,0.05); border-color: rgba(91,92,246,0.15); } [data-theme="light"] .session-item.active { background: rgba(91,92,246,0.1); } [data-theme="light"] .invite-copy-btn { color: var(--primary); border-color: rgba(91,92,246,0.35); background: rgba(91,92,246,0.08); } [data-theme="light"] .invite-copy-btn:hover { color: var(--primary-hover); border-color: var(--primary); } [data-theme="light"] .team-leave-btn { background: rgba(91,92,246,0.08); border-color: rgba(91,92,246,0.25); color: var(--primary); } [data-theme="light"] .auth-tab.active { background: rgba(91,92,246,0.08); border-color: var(--primary); color: var(--text); } [data-theme="light"] .meeting-member-check:hover { background: rgba(91,92,246,0.05); border-color: rgba(91,92,246,0.3); } [data-theme="light"] .theme-btn.active { background: rgba(91,92,246,0.1); border-color: var(--primary); color: var(--text); } /* ═══════════════════════════════════════════ THEME 3 · 暖岩（Warm Stone） 设计理念：行政办公室的暖灯质感——深棕木纹桌面 搭配琥珀金点缀，久看不疲，沉稳而有格调 ═══════════════════════════════════════════ */ [data-theme="warm"] { --bg: #16130f; --surface: #1f1c16; --surface2: #28241c; --border: #3a3428; --text: #f2ece0; --text2: #a8997e; /* 温暖的棕灰色 */ --primary: #e09a38; /* 琥珀金 */ --primary-hover: #edb15a; --green: #5ca86b; --yellow: #c8a030; --red: #c85858; --orange: #d07438; --radius: 8px; } /* Amber primary → dark text ensures readability on gold buttons */ [data-theme="warm"] .btn-new-chat, [data-theme="warm"] .login-box button, [data-theme="warm"] .chatroom-input-area button, [data-theme="warm"] .btn-submit, [data-theme="warm"] .chat-input-area button, [data-theme="warm"] .ph-action-btn, [data-theme="warm"] .notif-jump-btn { color: #16130f; font-weight: 700; } [data-theme="warm"] .sidebar-avatar, [data-theme="warm"] .member-avatar { color: #16130f; } [data-theme="warm"] .session-item.active { background: rgba(224,154,56,0.14); } [data-theme="warm"] .chatroom-meeting-banner { border-color: rgba(224,154,56,0.28); background: rgba(224,154,56,0.06); } [data-theme="warm"] .meeting-pill.active { border-color: rgba(224,154,56,0.45); background: rgba(224,154,56,0.18); color: var(--text); } [data-theme="warm"] .meeting-member-chip.key { background: rgba(200,160,48,0.15); color: #e8c870; } [data-theme="warm"] .auth-tab.active { background: rgba(224,154,56,0.12); border-color: var(--primary); } [data-theme="warm"] .invite-copy-btn { color: var(--primary-hover); border-color: rgba(224,154,56,0.4); background: rgba(224,154,56,0.1); } [data-theme="warm"] .invite-copy-btn:hover { border-color: var(--primary); color: #f5c870; } [data-theme="warm"] .team-leave-btn { background: rgba(224,154,56,0.1); border-color: rgba(224,154,56,0.3); color: #f0c870; } [data-theme="warm"] .chatroom-extract-result { background: rgba(224,154,56,0.06); border-color: rgba(224,154,56,0.18); } [data-theme="warm"] .chatroom-extract-result h4 { color: var(--primary); } [data-theme="warm"] .extract-chip { background: rgba(224,154,56,0.12); color: var(--primary); } [data-theme="warm"] .theme-btn.active { background: rgba(224,154,56,0.14); border-color: var(--primary); color: var(--text); } /* ═══════════════════════════════════════════ Theme switcher widget (sidebar footer) ═══════════════════════════════════════════ */ .theme-switcher-row { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-top: 1px solid var(--border); } .theme-switcher-label { font-size: 11px; color: var(--text2); flex-shrink: 0; margin-right: 2px; } .content-mode-row { display:flex; align-items:center; gap:5px; padding:7px 10px; border-top:1px solid var(--border); } .content-mode-row .theme-switcher-label { min-width:48px; } .content-mode-btn { flex:1; padding:6px 7px; border:1px solid var(--border); border-radius:6px; background:none; color:var(--text2); cursor:pointer; font-size:11px; } .content-mode-btn:hover, .content-mode-btn.active { border-color:var(--primary); color:var(--text); background:color-mix(in srgb,var(--primary) 10%,transparent); } .mem-toggle-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--border); } .mem-toggle-label { font-size: 11px; color: var(--text2); flex: 1; } .mem-toggle-label span { font-weight: 600; } .mem-toggle-switch { position: relative; width: 32px; height: 18px; flex-shrink: 0; cursor: pointer; } .mem-toggle-switch input { opacity: 0; width: 0; height: 0; } .mem-toggle-track { position: absolute; inset: 0; background: var(--border); border-radius: 18px; transition: background .2s; } .mem-toggle-switch input:checked + .mem-toggle-track { background: var(--primary); } .mem-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .2s; } .mem-toggle-switch input:checked ~ .mem-toggle-thumb { transform: translateX(14px); } .mem-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: background .2s; } .mem-status-dot.on { background: #22c55e; } .theme-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 3px; border-radius: 6px; border: 1px solid var(--border); background: none; cursor: pointer; font-size: 11px; color: var(--text2); transition: border-color .15s, background .15s, color .15s; white-space: nowrap; } .theme-btn:hover { border-color: var(--primary); color: var(--text); background: var(--surface2); } .theme-btn.active { border-color: var(--primary); background: rgba(99,102,241,0.1); color: var(--text); font-weight: 600; } .theme-swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.25); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); height: 100vh; display: flex; } /* ══════════════════════════════════════════════════════ LOGIN PAGE — 双栏设计 · 品牌区 + 玻璃磨砂卡片 ══════════════════════════════════════════════════════ */ #login-screen { position: fixed; inset: 0; z-index: 999; display: flex; align-items: stretch; background: var(--bg); overflow: hidden; } #login-screen.hidden { display: none; } /* 动态光晕背景 */ .login-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .login-orb { position: absolute; border-radius: 50%; filter: blur(110px); animation: loginOrbDrift 22s ease-in-out infinite; } .login-orb-1 { width: 680px; height: 680px; background: var(--primary); top: -240px; left: -200px; opacity: 0.18; animation-delay: 0s; } .login-orb-2 { width: 500px; height: 500px; background: #06b6d4; bottom: -160px; left: 28%; opacity: 0.12; animation-delay: -8s; } .login-orb-3 { width: 440px; height: 440px; background: var(--primary-hover); top: 32%; right: -120px; opacity: 0.11; animation-delay: -15s; } @keyframes loginOrbDrift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(26px,-16px) scale(1.07); } 66% { transform: translate(-16px,26px) scale(0.94); } } .login-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px); background-size: 30px 30px; } /* 左侧品牌面板 */ .login-brand-panel { width: 46%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; padding: 64px 56px; position: relative; } .login-brand-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .login-logo-icon { width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 8px 28px rgba(99,102,241,0.45); } .login-logo-text { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(135deg, var(--text) 0%, var(--primary-hover) 65%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .login-brand-tagline { font-size: 15px; color: var(--text2); font-weight: 400; margin-bottom: 10px; } .login-brand-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: var(--primary); background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.28); border-radius: 999px; padding: 3px 12px; margin-bottom: 52px; } .login-feature-list { display: flex; flex-direction: column; gap: 26px; } .login-feature-item { display: flex; align-items: flex-start; gap: 16px; } .login-fi-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 20px; } .login-fi-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .login-fi-desc { font-size: 12px; color: var(--text2); line-height: 1.6; } /* 分隔线 */ .login-divider { width: 1px; flex-shrink: 0; align-self: stretch; background: linear-gradient(to bottom, transparent 0%, var(--border) 14%, var(--border) 86%, transparent 100%); } /* 右侧表单面板 */ .login-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 48px; position: relative; } .login-card { width: 100%; max-width: 392px; background: rgba(255,255,255,0.032); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; padding: 36px 32px 30px; box-shadow: 0 28px 72px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08); } .login-card-head { text-align: center; margin-bottom: 26px; } .login-card-head h2 { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .login-card-head p { font-size: 13px; color: var(--text2); } /* 标签栏 — pill 滑动风格 */ .auth-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; margin-bottom: 20px; } .auth-tab { background: none; border: none; border-radius: 8px; padding: 8px 4px; font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; } .auth-tab:hover { color: var(--text); } .auth-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.22); } .auth-fields.hidden { display: none; } .auth-hint { font-size: 11px; color: var(--text2); margin: -4px 0 12px; text-align: left; line-height: 1.55; } /* 输入框 */ .login-card input, .login-card select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: 14px; margin-bottom: 10px; outline: none; transition: border-color .18s, background .18s, box-shadow .18s; font-family: inherit; } .login-card input:focus, .login-card select:focus { border-color: var(--primary); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 3px rgba(99,102,241,0.18); } .login-card input::placeholder, .login-card select::placeholder { color: var(--text2); opacity: 0.8; } /* 错误信息 */ .login-error { color: var(--red); font-size: 13px; font-weight: 500; margin-bottom: 10px; min-height: 18px; text-align: center; } /* 提交按钮 */ .login-card #auth-submit { width: 100%; border: none; border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px; color: white; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); box-shadow: 0 4px 18px rgba(99,102,241,0.42); transition: opacity .18s, transform .12s, box-shadow .18s; margin-top: 4px; } .login-card #auth-submit:hover { opacity: 0.91; transform: translateY(-1px); box-shadow: 0 8px 30px rgba(99,102,241,0.58); } .login-card #auth-submit:active { transform: translateY(0); } /* 默认体验账号公示框 */ .login-demo { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 12px; background: color-mix(in srgb, var(--primary) 5%, transparent); } .login-demo-title { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 9px; letter-spacing: 0.3px; } .login-demo-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .login-demo-label { flex: 0 0 32px; font-size: 12px; color: var(--text2); font-weight: 600; } .login-demo-val { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text); font-weight: 600; background: var(--bg2, rgba(127,127,127,0.08)); padding: 4px 9px; border-radius: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .login-demo-copy { flex: 0 0 auto; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .login-demo-copy:hover { color: var(--primary); border-color: var(--primary); } .login-demo-copy.copied { color: #fff; background: var(--primary); border-color: var(--primary); } .login-demo-fill { width: 100%; margin-top: 5px; border: none; cursor: pointer; background: transparent; color: var(--primary); font-size: 12.5px; font-weight: 600; padding: 5px; border-radius: 7px; transition: background .15s; } .login-demo-fill:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } /* 备案信息页脚（工信部 ICP 备案 + 企业信息） */ .login-beian { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 16px 44px 18px; border-top: 1px solid rgba(255,255,255,0.06); background: linear-gradient(to top, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.05) 72%, transparent 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .login-beian-inner { max-width: 1180px; margin: 0 auto; } .login-beian-intro { font-size: 12px; line-height: 1.7; color: var(--text2); opacity: 0.7; margin: 0 0 11px; text-align: left; } .login-beian-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; } .login-beian-org { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text2); opacity: 0.84; line-height: 1.7; } .login-beian-org span { position: relative; padding: 0 13px; } .login-beian-org span:first-child { padding-left: 0; } .login-beian-org b { color: var(--text); font-weight: 600; opacity: 0.95; } .login-beian-org span + span::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: var(--border); } .login-beian-icp a { color: var(--text2); text-decoration: none; opacity: 0.66; font-size: 12px; white-space: nowrap; letter-spacing: 0.3px; transition: color .18s, opacity .18s; } .login-beian-icp a:hover { color: var(--primary-hover); opacity: 1; } /* 为页脚预留空间，避免遮挡两栏内容 */ .login-brand-panel { padding-bottom: 140px; } .login-form-panel { padding-bottom: 140px; } /* 晴空主题 overrides */ [data-theme="light"] .login-card { background: rgba(255,255,255,0.78); border-color: rgba(0,0,0,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.95); } [data-theme="light"] .login-card input, [data-theme="light"] .login-card select { background: rgba(0,0,0,0.035); } [data-theme="light"] .login-card input:focus, [data-theme="light"] .login-card select:focus { background: rgba(91,92,246,0.04); box-shadow: 0 0 0 3px rgba(91,92,246,0.14); } [data-theme="light"] .login-logo-text { background: linear-gradient(135deg, #18243a 0%, #5b5cf6 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .login-fi-icon { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } [data-theme="light"] .login-grid { background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px); } [data-theme="light"] .login-orb-2 { background: #0ea5e9; } [data-theme="light"] .login-brand-badge { background: rgba(91,92,246,0.1); border-color: rgba(91,92,246,0.28); } /* 暖岩主题 overrides */ [data-theme="warm"] .login-card { background: rgba(255,255,255,0.025); border-color: rgba(224,154,56,0.2); box-shadow: 0 28px 72px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.06); } [data-theme="warm"] .login-card input, [data-theme="warm"] .login-card select { background: rgba(255,255,255,0.04); } [data-theme="warm"] .login-card input:focus, [data-theme="warm"] .login-card select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(224,154,56,0.2); } [data-theme="warm"] .login-logo-icon { background: linear-gradient(135deg, #e09a38 0%, #f0b55a 100%); box-shadow: 0 8px 28px rgba(224,154,56,0.48); } [data-theme="warm"] .login-logo-text { background: linear-gradient(135deg, #f2ece0 0%, #f0b55a 65%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="warm"] .login-brand-badge { color: var(--primary); background: rgba(224,154,56,0.1); border-color: rgba(224,154,56,0.32); } [data-theme="warm"] .login-orb-1 { background: #c87028; opacity: 0.14; } [data-theme="warm"] .login-orb-2 { background: #d47438; opacity: 0.1; } [data-theme="warm"] .login-orb-3 { background: #c8a030; opacity: 0.09; } [data-theme="warm"] .login-card #auth-submit { background: linear-gradient(135deg, #e09a38 0%, #f0b55a 100%); color: #16130f; box-shadow: 0 4px 18px rgba(224,154,56,0.48); } [data-theme="warm"] .login-card #auth-submit:hover { box-shadow: 0 8px 30px rgba(224,154,56,0.62); } /* Layout */ .sidebar { width: 260px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } /* Sidebar */ .sidebar-header { padding: 16px 20px; border-bottom: 1px solid var(--border); } .sidebar-user { display: flex; align-items: center; gap: 10px; } .sidebar-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: white; flex-shrink: 0; } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-info .name { font-size: 14px; font-weight: 600; } .sidebar-user-info .role { font-size: 11px; color: var(--text2); } .btn-logout { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text2); font-size: 11px; padding: 3px 8px; cursor: pointer; flex-shrink: 0; } .btn-logout:hover { border-color: var(--red); color: var(--red); } .nav { flex: 1; padding: 8px; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius); cursor: pointer; color: var(--text2); font-size: 13px; transition: all 0.15s; } .nav-item:hover, .nav-item.active { background: var(--surface2); color: var(--text); } .nav-item .badge { margin-left: auto; background: var(--red); color: white; font-size: 10px; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; } .nav-item .caret { margin-left: auto; font-size: 11px; opacity: 0.8; transition: transform 0.15s ease; } .nav-item.expanded .caret { transform: rotate(90deg); } .nav-submenu { display: none; padding-left: 32px; margin: 2px 0 4px; } .nav-submenu.show { display: block; } .nav-sub-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius); cursor: pointer; color: var(--text2); font-size: 12px; text-decoration: none; transition: all 0.15s; } .nav-sub-item:hover, .nav-sub-item.active { background: var(--surface2); color: var(--text); } .sidebar-footer { padding: 10px 8px; border-top: 1px solid var(--border); } .sidebar-footer .backup-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: var(--radius); cursor: pointer; color: var(--text2); font-size: 12px; background: none; border: 1px solid var(--border); transition: all 0.15s; text-align: left; } .sidebar-footer .backup-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--primary); } .sidebar-footer .backup-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sidebar-footer .backup-btn + .backup-btn { margin-top: 6px; } /* Global search */ .sidebar-search { padding: 8px 12px; border-bottom: 1px solid var(--border); position: relative; } .sidebar-search input { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); color: var(--text); font-size: 12px; outline: none; box-sizing: border-box; } .sidebar-search input:focus { border-color: var(--primary); } .search-results-dropdown { position: absolute; left: 8px; right: 8px; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-height: calc(100vh - 300px); overflow-y: auto; z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .search-result-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 12px; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: var(--surface2); } .search-result-item .sr-type { font-size: 10px; color: var(--primary); text-transform: uppercase; font-weight: 600; } .search-result-item .sr-title { font-weight: 500; color: var(--text); margin: 2px 0; } .search-result-item .sr-snippet { font-size: 11px; color: var(--text2); } .search-result-item .sr-snippet b { color: var(--primary); font-weight: 600; } /* Panels */ .panel { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; } .panel.active { display: flex; } /* Chat layout: sessions sidebar + message area */ .chat-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; } .chat-sessions-sidebar { width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .chat-sessions-header { padding: 10px 10px 6px; border-bottom: 1px solid var(--border); } .btn-new-chat { width: 100%; background: var(--primary); color: white; border: none; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; justify-content: center; } .btn-new-chat:hover { background: var(--primary-hover); } .chat-sessions-list { flex: 1; overflow-y: auto; padding: 6px; } .session-item { position: relative; display: flex; align-items: center; gap: 0; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; color: var(--text2); font-size: 13px; transition: background 0.12s; margin-bottom: 2px; } .session-item:hover { background: var(--surface2); color: var(--text); } .session-item.active { background: rgba(99,102,241,0.15); color: var(--text); } .session-item-body { flex: 1; min-width: 0; } .session-item-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .session-item-title-input { width: 100%; background: var(--surface); border: 1px solid var(--primary); border-radius: 4px; color: var(--text); font-size: 13px; padding: 1px 4px; outline: none; } .session-item-time { font-size: 11px; color: var(--text2); margin-top: 2px; } .session-item-delete { flex-shrink: 0; background: none; border: none; color: var(--text2); cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 13px; opacity: 0; transition: opacity 0.1s; line-height: 1; } .session-item:hover .session-item-delete { opacity: 1; } .session-item-delete:hover { color: var(--red); background: rgba(239,68,68,0.1); } /* Message area */ .chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; } .msg { max-width: 80%; margin-bottom: 16px; } .msg.user { margin-left: auto; } .msg .bubble { padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.6; word-break: break-word; } .msg.user .bubble { white-space: pre-wrap; background: var(--primary); color: white; border-bottom-right-radius: 4px; } .msg.assistant .bubble { background: var(--surface2); border-bottom-left-radius: 4px; } .msg.assistant .bubble h2 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; } .msg.assistant .bubble h3 { font-size: 14px; font-weight: 600; margin: 10px 0 4px; } .msg.assistant .bubble p { margin: 6px 0; } .msg.assistant .bubble ul, .msg.assistant .bubble ol { margin: 6px 0 6px 20px; } .msg.assistant .bubble li { margin: 2px 0; } .msg.assistant .bubble strong { font-weight: 600; } .msg.assistant .bubble em { font-style: italic; } .msg.assistant .bubble code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 3px; font-size: 13px; } .msg.assistant .bubble table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 13px; } .msg.assistant .bubble th, .msg.assistant .bubble td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } .msg.assistant .bubble th { background: rgba(255,255,255,0.05); font-weight: 600; } .msg.assistant .bubble hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; } .msg .time { font-size: 11px; color: var(--text2); margin-top: 4px; padding: 0 4px; } .msg.user .time { text-align: right; } .chat-archived-link { text-align: center; padding: 8px; font-size: 12px; color: var(--primary); cursor: pointer; } .chat-archived-link:hover { text-decoration: underline; } .chat-input-area { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-end; } .chat-input-area textarea { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--text); font-size: 14px; outline: none; resize: none; overflow-y: hidden; min-height: 40px; max-height: 160px; line-height: 1.5; font-family: inherit; } .chat-input-area textarea:focus { border-color: var(--primary); } .chat-input-area button { background: var(--primary); color: white; border: none; border-radius: var(--radius); padding: 10px 20px; cursor: pointer; font-size: 14px; } .chat-input-area button:hover { background: var(--primary-hover); } .chat-input-area button:disabled { opacity: 0.5; cursor: not-allowed; } .chat-input-stack { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .chat-voice-status { min-height: 18px; font-size: 12px; color: var(--text2); padding-left: 2px; } .chat-voice-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 20px; flex-wrap: wrap; } .team-data-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; color: var(--text2); font-size: 12px; cursor: pointer; user-select: none; } .team-data-toggle input { position: absolute; opacity: 0; pointer-events: none; } .team-data-toggle-track { width: 34px; height: 18px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); padding: 2px; transition: background .16s, border-color .16s; flex-shrink: 0; } .team-data-toggle-thumb { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--text2); transition: transform .16s, background .16s; } .team-data-toggle input:checked + .team-data-toggle-track { background: color-mix(in srgb, var(--green) 24%, var(--surface2)); border-color: var(--green); } .team-data-toggle input:checked + .team-data-toggle-track .team-data-toggle-thumb { transform: translateX(16px); background: var(--green); } .team-data-toggle input:focus-visible + .team-data-toggle-track { outline: 2px solid var(--primary); outline-offset: 2px; } .team-data-toggle:has(input:checked) .team-data-toggle-label { color: var(--text); font-weight: 600; } .team-data-query-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--green); font-size: 11px; } .team-data-sources { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; } .team-data-sources summary { color: var(--text2); font-size: 12px; cursor: pointer; list-style: none; } .team-data-sources summary::-webkit-details-marker { display: none; } .team-data-sources summary::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform .15s; } .team-data-sources[open] summary::before { transform: rotate(90deg); } .team-data-source-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .team-data-source { width: 100%; display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); padding: 7px 8px; text-align: left; font-size: 11px; } button.team-data-source { cursor: pointer; } button.team-data-source:hover { border-color: var(--primary); } .team-data-source-kind { color: var(--primary); font-weight: 600; white-space: nowrap; } .team-data-source-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-data-source-time { color: var(--text2); white-space: nowrap; } .chat-voice-status.listening { color: var(--primary); } .chat-voice-status.error { color: var(--red); } .chat-voice-draft { display:none; margin: 2px 0 2px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(99,102,241,0.28); background: rgba(99,102,241,0.08); } .chat-voice-draft.show { display:block; } .chat-voice-draft-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; } .chat-voice-draft-title { font-size:11px; font-weight:700; color:#c7d2fe; letter-spacing:.04em; text-transform:uppercase; } .chat-voice-draft-meta { font-size:11px; color:var(--text2); } .chat-voice-draft-body { font-size:13px; line-height:1.65; color:var(--text); white-space:pre-wrap; word-break:break-word; } .chat-voice-draft-body .interim { color:rgba(226,232,240,0.72); } .chat-voice-btn { min-width: 92px; background: var(--surface2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } .chat-voice-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; } .chat-voice-btn.recording { background: rgba(239,68,68,0.14) !important; color: var(--red) !important; border-color: rgba(239,68,68,0.4) !important; } .chat-voice-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Dashboard */ .dashboard { padding: 24px; overflow-y: auto; flex: 1; } .dashboard h2 { font-size: 20px; margin-bottom: 16px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 24px; } .stat-card { background: var(--surface2); border-radius: var(--radius); padding: 14px; text-align: center; } .stat-card .num { font-size: 24px; font-weight: 700; } .stat-card .label { font-size: 11px; color: var(--text2); margin-top: 2px; } .stat-card.green .num { color: var(--green); } .stat-card.yellow .num { color: var(--yellow); } .stat-card.red .num { color: var(--red); } .stat-card.primary .num { color: var(--primary); } /* Mission Control */ .mission-summary { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .mission-pill { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: default; } .mission-pill.red { background: rgba(239,68,68,0.14); color: #f87171; } .mission-pill.yellow { background: rgba(234,179,8,0.14); color: #facc15; } .mission-pill.green { background: rgba(34,197,94,0.14); color: #4ade80; } .mission-pill.muted { background: var(--surface2); color: var(--text2); } .mission-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .mission-pill.red .mission-dot { background: #ef4444; animation: mc-pulse 2s ease-in-out infinite; } .mission-pill.yellow .mission-dot { background: #eab308; } .mission-pill.green .mission-dot { background: #22c55e; } @keyframes mc-pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } } .mc-section { margin-bottom: 18px; } .mc-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text2); } .mc-section-head .mc-icon { font-size: 15px; } .mc-card { background: var(--surface2); border-radius: var(--radius); padding: 11px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; transition: background 0.15s; } .mc-card:hover { background: var(--surface); } .mc-card.red { border-left: 3px solid #ef4444; } .mc-card.yellow { border-left: 3px solid #eab308; } .mc-card.green { border-left: 3px solid #22c55e; } .mc-card .mc-info { flex: 1; min-width: 0; } .mc-card .mc-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-card .mc-meta { font-size: 11px; color: var(--text2); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; } .mc-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } .mc-badge.overdue { background: rgba(239,68,68,0.18); color: #f87171; } .mc-badge.soon { background: rgba(234,179,8,0.18); color: #facc15; } .mc-badge.done { background: rgba(34,197,94,0.18); color: #4ade80; } .mc-badge.key { background: rgba(239,68,68,0.12); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); } .mc-empty { font-size: 12px; color: var(--text2); padding: 8px 0; } .mc-divider { height: 1px; background: var(--border); margin: 18px 0; opacity: 0.5; } .account-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 16px; } .account-card-label { font-size: 14px; color: var(--text2); margin-bottom: 8px; } .account-card-name { font-size: 20px; font-weight: 700; } .account-card-company { font-size: 12px; color: var(--text2); margin-top: 6px; } .invite-row-title { font-size: 14px; color: var(--text2); margin-top: 14px; margin-bottom: 8px; } .invite-row { display: flex; align-items: center; gap: 10px; } .invite-code-input { flex: 1; min-width: 0; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text); font-size: 18px; font-weight: 600; letter-spacing: 0.5px; } .invite-copy-btn { border: 1px solid rgba(99,102,241,0.45); color: var(--primary-hover); background: rgba(99,102,241,0.12); border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; } .invite-copy-btn:hover { border-color: var(--primary); color: #c7d2fe; } .account-card-hint { font-size: 12px; color: var(--text2); margin-top: 10px; line-height: 1.6; } .account-card-actions { display: flex; gap: 10px; margin-top: 14px; } .team-leave-btn, .account-danger-btn { flex: 1; border-radius: 999px; padding: 11px 16px; font-size: 15px; font-weight: 600; cursor: pointer; } .team-leave-btn { border: 1px solid rgba(99,102,241,0.28); background: rgba(99,102,241,0.12); color: #dbe3ff; } .team-leave-btn:hover { border-color: rgba(129,140,248,0.75); background: rgba(99,102,241,0.2); } .team-leave-btn:disabled { opacity: 0.6; cursor: not-allowed; } .account-danger-btn { border: 1px solid rgba(239,68,68,0.62); background: rgba(239,68,68,0.08); color: #f87171; } .account-danger-btn:hover { border-color: var(--red); background: rgba(239,68,68,0.16); } /* Business lines & Nodes */ .bl-section { margin-bottom: 24px; } .bl-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .bl-header h3 { font-size: 16px; } .bl-header .bl-badge { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--surface2); color: var(--text2); } .node-list { display: flex; flex-direction: column; gap: 8px; } .node-card { background: var(--surface2); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--border); } .node-card.pending { border-left-color: var(--text2); } .node-card.in_progress { border-left-color: var(--primary); } .node-card.completed { border-left-color: var(--green); } .node-card.blocked { border-left-color: var(--red); } .node-card.stalled { border-left-color: var(--orange); } .plain-task-summary { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; padding: 8px 10px; border-left: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); color: var(--text); } .plain-task-summary-line { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: 7px; } .plain-task-summary-line > span:first-child { padding-top: 1px; color: var(--primary-hover); font-size: 10.5px; font-weight: 700; } .plain-task-summary-line p { min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; } .plain-task-summary.compact { display: block; margin-top: 4px; padding: 0; border: 0; background: transparent; } .plain-task-summary.compact .plain-task-summary-line { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 5px; } .plain-task-summary.compact .plain-task-summary-line > span:first-child { color: var(--text2); font-size: 10px; } .plain-task-summary.compact .plain-task-summary-line p { display: -webkit-box; overflow: hidden; color: var(--text2); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .plain-task-pending { padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--yellow); font-size: 10px; font-weight: 500; white-space: nowrap; } .node-info .plain-task-summary { max-width: 720px; } .node-info { flex: 1; min-width: 0; } .node-title { font-size: 13px; font-weight: 500; } .node-meta { font-size: 11px; color: var(--text2); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; } .node-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; } .node-actions button { font-size: 11px; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .node-actions button:hover { border-color: var(--primary); } .node-btn-complete { color: var(--green) !important; font-size: 14px !important; font-weight: 700; border-color: rgba(34,197,94,0.3) !important; } .node-btn-complete:hover { background: rgba(34,197,94,0.12) !important; border-color: var(--green) !important; } .node-btn-delete { color: var(--red) !important; font-size: 14px !important; font-weight: 700; border-color: rgba(239,68,68,0.3) !important; } .node-btn-delete:hover { background: rgba(239,68,68,0.12) !important; border-color: var(--red) !important; } /* Team dashboard */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 24px; } .member-card { background: var(--surface2); border-radius: var(--radius); padding: 16px; } .member-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .member-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: white; } .member-name { font-size: 14px; font-weight: 600; } .member-role { font-size: 11px; color: var(--text2); } .member-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 12px; text-align: center; } .member-stats .stat { padding: 4px; border-radius: 4px; background: rgba(255,255,255,0.03); } .member-stats .stat .val { font-weight: 700; font-size: 16px; } .member-stats .stat .lbl { color: var(--text2); font-size: 10px; } .progress-bar { height: 4px; background: var(--border); border-radius: 2px; margin-top: 8px; overflow: hidden; } .progress-bar .fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.3s; } /* Notifications */ .notif-panel { padding: 24px; overflow-y: auto; flex: 1; } .notif-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .notif-card { background: var(--surface2); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; border-left: 3px solid var(--primary); transition: opacity 0.2s, box-shadow 0.15s; user-select: none; } .notif-card:hover { box-shadow: 0 0 0 1px rgba(99,102,241,0.25); } .notif-card.read { opacity: 0.6; border-left-color: var(--border); } .notif-card .notif-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; } .notif-card .notif-content { font-size: 12px; color: var(--text2); line-height: 1.5; } .notif-card .notif-time { font-size: 11px; color: var(--text2); margin-top: 4px; } .notif-type-icon { display: inline-block; width: 20px; text-align: center; margin-right: 4px; } .notif-category-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 2px; } .notif-category-tab { min-width: 72px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; background: var(--surface2); color: var(--text2); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; } .notif-category-tab b { min-width: 19px; border-radius: 4px; padding: 1px 4px; background: var(--surface); color: var(--text); font-size: 10px; } .notif-category-tab.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface2)); color: var(--primary-hover); } .notif-module { margin-bottom: 18px; } .notif-module-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .notif-module-head h3 { margin: 0; font-size: 14px; } .notif-module-head span { display: block; margin-top: 3px; color: var(--text2); font-size: 10.5px; } .notif-module-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); } .notif-module-list .notif-card { margin: 0; border-width: 0 0 1px 3px; border-radius: 0; } .notif-module-list .notif-card:last-child { border-bottom-width: 0; } .notif-module-empty { padding: 28px 14px; color: var(--text2); text-align: center; font-size: 12px; } .api-usage-body { flex: 1; overflow-y: auto; padding: 20px 24px 32px; } .api-usage-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .api-usage-range, .api-usage-scope { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .api-usage-range button, .api-usage-scope button { border: 0; border-right: 1px solid var(--border); padding: 7px 11px; background: var(--surface2); color: var(--text2); cursor: pointer; font-size: 12px; } .api-usage-range button:last-child, .api-usage-scope button:last-child { border-right: 0; } .api-usage-range button.active, .api-usage-scope button.active { background: var(--primary); color: #fff; } .api-usage-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .api-usage-kpi, .api-usage-section { border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); } .api-usage-kpi { min-width: 0; padding: 15px; } .api-usage-kpi > span, .api-usage-kpi > strong, .api-usage-kpi > small { display: block; } .api-usage-kpi > span { color: var(--text2); font-size: 11px; } .api-usage-kpi > strong { margin-top: 7px; font-size: 25px; } .api-usage-kpi > small { margin-top: 6px; color: var(--text2); font-size: 10.5px; line-height: 1.45; } .api-usage-section { min-width: 0; padding: 15px; margin-bottom: 14px; } .api-usage-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; } .api-usage-section-head h3 { margin: 0; font-size: 14px; } .api-usage-section-head span { display: block; margin-top: 3px; color: var(--text2); font-size: 10.5px; } .api-usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .api-rank-row { padding: 9px 0; border-bottom: 1px solid var(--border); } .api-rank-row:last-child { border-bottom: 0; } .api-rank-head { display: flex; justify-content: space-between; gap: 9px; min-width: 0; } .api-rank-head strong { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .api-rank-head span, .api-rank-meta { color: var(--text2); font-size: 10px; white-space: nowrap; } .api-rank-track { height: 4px; margin-top: 7px; overflow: hidden; background: var(--surface); } .api-rank-track span { display: block; height: 100%; background: var(--primary); } .api-rank-meta { margin-top: 5px; } .api-daily-chart { height: 190px; display: flex; align-items: stretch; gap: 5px; overflow-x: auto; padding-top: 18px; } .api-daily-column { min-width: 34px; flex: 1; display: grid; grid-template-rows: 14px 1fr 16px; gap: 4px; text-align: center; } .api-daily-value, .api-daily-column b { overflow: hidden; color: var(--text2); font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .api-daily-bar { min-height: 100px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border); } .api-daily-bar i { width: min(22px, 72%); display: block; background: var(--green); } .api-usage-table-wrap { overflow-x: auto; } .api-usage-table { width: 100%; border-collapse: collapse; font-size: 11px; } .api-usage-table th, .api-usage-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; } .api-usage-table th { color: var(--text2); font-weight: 600; } .api-usage-table td strong, .api-usage-table td small { display: block; } .api-usage-table td small { margin-top: 2px; color: var(--text2); font-size: 9px; } .api-usage-table sup { margin-left: 2px; color: var(--yellow); font-size: 8px; } .api-status { display: inline-flex; border-radius: 4px; padding: 3px 6px; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } .api-status.success { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); } .api-status.partial { background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--yellow); } .api-usage-empty { width: 100%; padding: 34px 12px; color: var(--text2); text-align: center; font-size: 12px; } .api-usage-empty.error { color: var(--red); } /* Notification detail modal */ .notif-detail-type { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px; } .notif-detail-body { font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; background: rgba(255,255,255,0.03); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; color: var(--text); } .notif-detail-meta { font-size: 12px; color: var(--text2); margin-bottom: 16px; } .notif-jump-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: white; border: none; border-radius: var(--radius); padding: 9px 18px; font-size: 14px; cursor: pointer; font-weight: 600; } .notif-jump-btn:hover { opacity: 0.88; } .node-card.highlight-pulse { animation: highlightPulse 1.8s ease-out; } @keyframes highlightPulse { 0%{box-shadow:0 0 0 3px rgba(99,102,241,0.7);} 100%{box-shadow:none;} } .task-toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 220; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 24px)); pointer-events: none; } .task-toast { background: var(--surface); border: 1px solid rgba(99,102,241,0.35); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.28); padding: 12px 12px 10px; pointer-events: auto; } .task-toast.urgent { border-color: color-mix(in srgb, var(--red) 70%, var(--border)); box-shadow: 0 8px 28px color-mix(in srgb, var(--red) 22%, transparent); } .task-toast.urgent .task-toast-title, .task-toast.urgent .task-toast-link { color: var(--red); } .task-toast-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.4; } .task-toast-body { font-size: 12px; color: var(--text2); margin-top: 4px; line-height: 1.5; white-space: pre-wrap; } .task-toast-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .task-toast-link { font-size: 12px; color: var(--primary-hover); cursor: pointer; } .task-toast-link:hover { color: #c7d2fe; text-decoration: underline; } .task-toast-close { border: none; background: transparent; color: var(--text2); cursor: pointer; font-size: 12px; } .task-toast-close:hover { color: var(--text); } .join-review-list { display: flex; flex-direction: column; gap: 10px; max-height: 48vh; overflow-y: auto; } .join-review-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface2); } .join-review-title { font-size: 13px; font-weight: 600; } .join-review-meta { font-size: 12px; color: var(--text2); margin-top: 4px; line-height: 1.5; } .join-review-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .join-review-actions button { border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 12px; } .join-approve-btn { background: rgba(34,197,94,0.14); color: #bbf7d0; border-color: rgba(34,197,94,0.35); } .join-reject-btn { background: rgba(239,68,68,0.12); color: #fca5a5; border-color: rgba(239,68,68,0.35); } /* Tasks panel */ .tasks-panel { padding: 24px; overflow-y: auto; flex: 1; } .briefing-box { background: var(--surface2); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; line-height: 1.7; font-size: 14px; } .briefing-box h2 { font-size: 16px; margin: 12px 0 6px; } .briefing-box h3 { font-size: 14px; margin: 10px 0 4px; } .briefing-box p { margin: 6px 0; } .briefing-box ul, .briefing-box ol { margin: 6px 0 6px 20px; } .briefing-box strong { font-weight: 600; } .briefing-box hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; } .briefing-audio-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .briefing-speech-btn { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 6px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 600; } .briefing-speech-btn:hover { border-color: var(--primary); } .briefing-speech-btn:disabled { opacity: .68; cursor: wait; } .briefing-speech-status { min-width: 0; color: var(--text2); font-size: 11px; line-height: 1.4; } .briefing-audio-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: mc-pulse 1.2s ease-in-out infinite; } .task-discussion-trigger { cursor: pointer; } .task-discussion-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .node-info.task-discussion-trigger:hover .node-title { color: var(--primary); } .mc-completed-details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .mc-completed-details > summary::-webkit-details-marker { display: none; } .mc-completed-details .mc-fold-label { color: var(--text2); font-size: 11px; font-weight: 500; } .mc-completed-details[open] .mc-fold-label { font-size: 0; } .mc-completed-details[open] .mc-fold-label::after { content: '收起'; font-size: 11px; } .mc-completed-list { display: grid; gap: 8px; padding-top: 8px; } .team-analytics { margin: 12px 16px 20px; padding: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .team-analytics-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .team-period-control { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); } .team-period-control button { min-height: 30px; padding: 5px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text2); cursor: pointer; font-size: 11px; white-space: nowrap; } .team-period-control button:hover { color: var(--text); } .team-period-control button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.18); font-weight: 600; } .team-period-control button:disabled { cursor: wait; opacity: .6; } .team-chart-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; } .team-chart-panel { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .team-chart-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13px; font-weight: 600; } .team-chart-title strong { color: var(--text2); font-size: 11px; font-weight: 500; } .team-chart-canvas { position: relative; width: 100%; height: 260px; } /* Announcements */ .announcements-panel { flex: 1; overflow-y: auto; padding: 20px 24px 36px; } .announcement-list { width: min(880px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .announcement-state-group { display: inline-flex; align-items: center; gap: 6px; } .announcement-read-state.archived { color: var(--text2); border-color: var(--border); background: var(--surface2); } .announcement-item { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 22px; } .announcement-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 14px; } .announcement-item-head h2 { font-size: 18px; line-height: 1.35; margin-top: 4px; overflow-wrap: anywhere; } .announcement-item-date { font-size: 12px; color: var(--text2); } .announcement-read-state { flex: 0 0 auto; font-size: 11px; color: var(--text2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 9px; } .announcement-read-state.unread { color: var(--primary-hover); border-color: var(--primary); background: rgba(99,102,241,0.1); } .announcement-item-summary { color: var(--text2); font-size: 14px; line-height: 1.7; margin-top: 14px; } .announcement-item-content { margin-top: 16px; } .announcement-section + .announcement-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .announcement-section h3 { font-size: 15px; margin: 0 0 8px; } .announcement-section p { color: var(--text2); font-size: 13px; line-height: 1.75; } .announcement-section ul { color: var(--text); font-size: 13px; line-height: 1.75; margin: 9px 0 0 20px; } .announcement-section li + li { margin-top: 4px; } .announcement-empty { padding: 60px 20px; text-align: center; color: var(--text2); } #announcement-modal .announcement-modal { max-width: 680px; max-height: 84vh; overflow-y: auto; padding: 0; } .announcement-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); } #announcement-modal .announcement-modal-head h3 { margin: 0 0 5px; font-size: 20px; } .announcement-modal-date { font-size: 12px; color: var(--text2); } .announcement-modal-close { width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface2); color: var(--text2); cursor: pointer; font-size: 20px; line-height: 1; } .announcement-modal-close:hover { color: var(--text); border-color: var(--primary); } .announcement-modal-body { padding: 18px 24px 4px; } .announcement-modal-summary { color: var(--text2); font-size: 14px; line-height: 1.7; margin-bottom: 18px; } .announcement-modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 22px; } .announcement-modal-actions button { min-height: 38px; border-radius: 8px; padding: 8px 16px; border: 1px solid var(--border); cursor: pointer; font-size: 14px; } .announcement-modal-actions .view-board { color: var(--text); background: var(--surface2); } .announcement-modal-actions .acknowledge { color: white; background: var(--primary); border-color: var(--primary); } /* Modals */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; align-items: center; justify-content: center; } /* Team selector (shown at login when user has multiple teams) */ #team-selector-screen { position: fixed; inset: 0; z-index: 998; display: none; align-items: center; justify-content: center; flex-direction: column; background: var(--bg); } #team-selector-screen.show { display: flex; } .team-selector-box { background: rgba(255,255,255,0.035); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 32px 28px; width: 90%; max-width: 480px; box-shadow: 0 24px 64px rgba(0,0,0,0.3); } [data-theme="light"] .team-selector-box { background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.08); } .team-selector-box h2 { margin-bottom: 6px; font-size: 20px; font-weight: 700; } .team-selector-box p { color: var(--text2); font-size: 14px; margin-bottom: 20px; line-height: 1.5; } .team-option { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .team-option:hover { border-color: var(--primary); background: rgba(99,102,241,0.06); } .team-option .t-name { font-size: 15px; font-weight: 600; } .team-option .t-role { font-size: 12px; color: var(--text2); margin-top: 2px; } .team-option .t-btn { font-size: 13px; padding: 6px 14px; border-radius: 8px; border: none; background: var(--primary); color: #fff; cursor: pointer; white-space: nowrap; } /* Sidebar team switcher */ .sidebar-team-switcher { margin-top: 4px; font-size: 11px; color: var(--text2); cursor: pointer; display: flex; align-items: center; gap: 4px; } .sidebar-team-switcher:hover { color: var(--primary); } .sidebar-team-dropdown { display: none; position: absolute; left: 8px; right: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 200; overflow: hidden; } .sidebar-team-dropdown.show { display: block; } .sidebar-team-option { padding: 10px 14px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .sidebar-team-option:hover { background: rgba(99,102,241,0.1); } .sidebar-team-option.active { color: var(--primary); font-weight: 600; } .sidebar-team-option .t-active-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); } .modal-overlay#feedback-modal, .modal-overlay#feedback-view-modal { z-index: 130; } .modal-overlay#assistance-modal, .modal-overlay#transfer-modal { z-index: 110; } .modal-overlay.show { display: flex; } .modal { background: var(--surface); border-radius: 12px; padding: 24px; width: 90%; max-width: 480px; } .modal h3 { margin-bottom: 16px; } .modal select, .modal textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; color: var(--text); font-size: 14px; margin-bottom: 12px; } .modal-input { width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:10px;color:var(--text);font-size:14px; } .modal textarea { height: 100px; resize: vertical; font-family: inherit; } .modal-buttons { display: flex; gap: 10px; justify-content: flex-end; } .modal-buttons button { padding: 8px 16px; border-radius: var(--radius); border: none; cursor: pointer; font-size: 14px; } .btn-cancel { background: var(--surface2); color: var(--text); } .btn-submit { background: var(--primary); color: white; } .feedback-view-list { display: flex; flex-direction: column; gap: 10px; max-height: 54vh; overflow-y: auto; margin: 14px 0; } .feedback-view-empty { padding: 22px 12px; color: var(--text2); font-size: 13px; text-align: center; } .feedback-report { border: 1px solid var(--border); border-radius: 8px; padding: 13px; background: var(--surface2); } .feedback-report-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--text2); font-size: 11px; } .feedback-report-meta strong { color: var(--text); font-size: 13px; } .feedback-report-content { margin-top: 10px; color: var(--text); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } .feedback-attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .feedback-attachment { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: var(--surface); color: var(--primary-hover); cursor: pointer; text-align: left; } .feedback-attachment:hover { border-color: var(--primary); } .feedback-attachment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feedback-attachment small { flex: 0 0 auto; color: var(--text2); } .assistance-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; } .assistance-scope label { position: relative; } .assistance-scope input { position: absolute; opacity: 0; pointer-events: none; } .assistance-scope span { display: flex; justify-content: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; color: var(--text2); font-size: 13px; cursor: pointer; } .assistance-scope input:checked + span { border-color: var(--primary); background: rgba(99,102,241,.12); color: var(--primary-hover); font-weight: 600; } .assistance-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 180px; overflow-y: auto; margin-bottom: 12px; } .assistance-member { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); font-size: 13px; cursor: pointer; } .assistance-member input { accent-color: var(--primary); } .assistance-member span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .assistance-urgent { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 14px; padding: 10px; border: 1px solid color-mix(in srgb, var(--red) 32%, var(--border)); border-radius: 7px; color: var(--text); font-size: 13px; cursor: pointer; } .assistance-urgent input { margin-top: 2px; accent-color: var(--red); } .assistance-urgent small { display: block; margin-top: 3px; color: var(--text2); line-height: 1.45; } /* Loading */ .typing { display: inline-flex; gap: 4px; padding: 8px 0; } .typing span { width: 6px; height: 6px; background: var(--text2); border-radius: 50%; animation: bounce 1.4s infinite; } .typing span:nth-child(2) { animation-delay: 0.2s; } .typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} } /* Team member card clickable */ .member-card.clickable { cursor: pointer; transition: border-color 0.2s, transform 0.1s; border: 1px solid transparent; } .member-card.clickable:hover { border-color: var(--primary); transform: translateY(-1px); } /* Member detail modal */ .member-detail-modal .modal { max-width: 700px; max-height: 85vh; overflow-y: auto; } .member-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; background: var(--surface); } .member-detail-avatar { width: 40px; height: 40px; flex: 0 0 40px; overflow: hidden; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: white; } .member-detail-info h3 { margin: 0; font-size: 18px; } .member-detail-info .role-tag { font-size: 11px; color: var(--text2); } .member-detail-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 16px; } .member-detail-stats .mini-stat { text-align: center; padding: 8px; background: var(--surface2); border-radius: 6px; } .member-detail-stats .mini-stat .num { font-size: 18px; font-weight: 700; } .member-detail-stats .mini-stat .lbl { font-size: 10px; color: var(--text2); } .member-task-filters { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .member-task-filters .filter-btn { padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text2); font-size: 12px; cursor: pointer; } .member-task-filters .filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); } /* Chatroom */ .chatroom-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 18%); } .chatroom-header { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .chatroom-header h3 { font-size: 15px; margin: 0; } .chatroom-header-actions { display: flex; gap: 6px; } .chatroom-header-actions button { padding: 5px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 12px; cursor: pointer; } .chatroom-header-actions button:hover { border-color: var(--primary); color: var(--primary); } .chatroom-header-actions button.primary-btn { background: var(--primary); color: white; border-color: var(--primary); } .chatroom-header-actions button.warn-btn { background: rgba(239,68,68,0.12); color: var(--red); border-color: rgba(239,68,68,0.35); } .chatroom-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 12px; } .chatroom-meeting-banner { margin: 12px 20px 0; border-radius: 12px; padding: 14px 16px; border: 1px solid rgba(99,102,241,0.25); background: radial-gradient(circle at top right, rgba(99,102,241,0.18), transparent 35%), linear-gradient(135deg, rgba(36,39,54,0.98), rgba(26,29,39,0.98)); } .chatroom-meeting-banner.inactive { border-style: dashed; background: rgba(255,255,255,0.02); } .meeting-banner-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .meeting-banner-title { font-size: 15px; font-weight: 700; } .meeting-banner-sub { font-size: 12px; color: var(--text2); margin-top: 2px; } .meeting-pills { display: flex; gap: 6px; flex-wrap: wrap; } .meeting-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; border: 1px solid var(--border); color: var(--text2); } .meeting-pill.active { color: white; border-color: rgba(99,102,241,0.35); background: rgba(99,102,241,0.22); } .meeting-pill.warn { color: #fecaca; border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.16); } .meeting-pill.ok { color: #bbf7d0; border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.14); } .meeting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .meeting-card { background: rgba(255,255,255,0.03); border-radius: 10px; padding: 10px 12px; } .meeting-card-label { font-size: 11px; color: var(--text2); margin-bottom: 4px; } .meeting-card-value { font-size: 13px; line-height: 1.5; } .meeting-member-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .meeting-member-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; background: rgba(255,255,255,0.05); color: var(--text2); } .meeting-member-chip.key { color: #fde68a; background: rgba(234,179,8,0.14); } .chatroom-messages { flex: 1; min-height: 240px; overflow-y: auto; padding: 16px 20px; } .cr-msg { margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px; } .cr-msg.own { flex-direction: row-reverse; } .cr-msg-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: white; flex-shrink: 0; } .cr-msg.own .cr-msg-avatar { background: var(--green); } .cr-msg-avatar.external { background: var(--orange); } .cr-msg-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(72%, 680px); } .cr-msg.own .cr-msg-body { align-items: flex-end; } .cr-msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .cr-msg.own .cr-msg-header { flex-direction: row-reverse; } .cr-msg-name { font-size: 13px; font-weight: 600; } .cr-msg-platform { font-size: 10px; color: var(--orange); background: rgba(249,115,22,0.1); padding: 1px 6px; border-radius: 8px; } .cr-msg-badge { font-size: 10px; color: var(--primary); background: rgba(99,102,241,0.12); padding: 1px 6px; border-radius: 8px; } .cr-msg-time { font-size: 10px; color: var(--text2); } .cr-msg-reply-btn { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text2); cursor: pointer; font-size: 16px; line-height: 24px; opacity: 0; } .cr-msg:hover .cr-msg-reply-btn, .cr-msg-reply-btn:focus-visible { opacity: 1; } .cr-msg-reply-btn:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); } .cr-msg-content { max-width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 4px 10px 10px 10px; background: var(--surface2); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .cr-msg.own .cr-msg-content { border-color: color-mix(in srgb, var(--green) 36%, var(--border)); border-radius: 10px 4px 10px 10px; background: color-mix(in srgb, var(--green) 20%, var(--surface2)); } .cr-msg.system { justify-content: center; } .cr-msg.system .cr-msg-content { max-width: min(86%, 760px); } .cr-msg.system .cr-msg-content { font-size: 12px; color: var(--text2); background: var(--surface2); padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.04); } .cr-msg.system.ai-moderator .cr-msg-content { background: rgba(99,102,241,0.12); color: var(--text); border-color: rgba(99,102,241,0.25); } .cr-msg.system.meeting-event .cr-msg-content { background: rgba(34,197,94,0.12); color: var(--text); border-color: rgba(34,197,94,0.22); } .cr-msg.recalled .cr-recalled-placeholder { background: transparent; border-style: dashed; color: var(--text2); font-size: 12.5px; font-style: italic; } .cr-system-badge { display: inline-flex; align-items: center; margin-right: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.08); color: var(--text2); } .cr-reply-quote { width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 5px; padding: 6px 9px; border: 0; border-left: 2px solid var(--primary); border-radius: 0; background: color-mix(in srgb, var(--primary) 7%, var(--surface2)); color: var(--text2); font: inherit; font-size: 11px; text-align: left; cursor: pointer; } .cr-reply-quote:hover { background: color-mix(in srgb, var(--primary) 13%, var(--surface2)); } .cr-reply-quote strong { color: var(--text); font-weight: 600; } .cr-reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chatroom-replying-to { display: none; align-items: center; gap: 8px; padding: 7px 10px; border-left: 2px solid var(--primary); background: var(--surface2); color: var(--text2); font-size: 11px; } .chatroom-replying-to.show { display: flex; } .chatroom-replying-to span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chatroom-replying-to button { width: 24px !important; min-width: 24px; height: 24px; padding: 0 !important; border: 0; background: transparent !important; color: var(--text2) !important; font-size: 16px !important; } .message-context-menu { display: none; position: fixed; z-index: 300; min-width: 124px; padding: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.28); } .message-context-menu.show { display: block; } .message-context-menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; text-align: left; font-size: 13px; } .message-context-menu button:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } .message-context-icon { font-size: 17px; line-height: 1; } .chatroom-extract-area { flex-shrink: 0; } .chatroom-input-area { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); display: flex; gap: 8px; background: rgba(15,17,23,0.96); backdrop-filter: blur(10px); position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -10px 24px rgba(0,0,0,0.18); align-items: flex-end; } .chatroom-input-stack { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pending-image-list { display: none; gap: 7px; flex-wrap: wrap; } .pending-image-list.show { display: flex; } .pending-image { position: relative; width: 58px; height: 58px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface2); } .pending-image img { width: 100%; height: 100%; object-fit: cover; } .pending-image button { position: absolute; top: 2px; right: 2px; width: 20px !important; min-width: 20px; height: 20px; padding: 0 !important; border: 0; border-radius: 4px !important; background: rgba(0,0,0,.7) !important; color: #fff !important; line-height: 20px; } .chatroom-image-btn { width: 42px; min-width: 42px; padding: 10px 0 !important; background: var(--surface2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; font-size: 18px !important; } .message-image-grid { width: min(360px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 5px; } .message-image-grid.count-1 { grid-template-columns: minmax(0, 260px); } .message-image-button { appearance: none; display: block; overflow: hidden; min-height: 0; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); cursor: zoom-in; aspect-ratio: 4 / 3; } .message-image-button img { width: 100%; height: 100%; display: block; object-fit: cover; } .message-image-grid.count-1 .message-image-button { aspect-ratio: auto; max-height: 320px; } .message-image-grid.count-1 .message-image-button img { height: auto; max-height: 320px; object-fit: contain; } .message-image-viewer { width: min(94vw, 1100px); max-width: 1100px; padding: 12px; } .message-image-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 10px; } .message-image-viewer-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .message-image-viewer img { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: #101216; } .chatroom-voice-status { min-height: 18px; font-size: 12px; color: var(--text2); padding-left: 2px; } .chatroom-voice-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 20px; flex-wrap: wrap; } .chatroom-voice-status.listening { color: var(--primary); } .chatroom-voice-status.error { color: var(--red); } .chatroom-voice-mode-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .chatroom-voice-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); white-space: nowrap; } .chatroom-voice-mode input { accent-color: var(--primary); } .chatroom-voice-draft { display:none; margin: 2px 0 2px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(99,102,241,0.28); background: rgba(99,102,241,0.08); } .chatroom-voice-draft.show { display:block; } .chatroom-voice-draft-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; } .chatroom-voice-draft-title { font-size:11px; font-weight:700; color:#c7d2fe; letter-spacing:.04em; text-transform:uppercase; } .chatroom-voice-draft-meta { font-size:11px; color:var(--text2); } .chatroom-voice-draft-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .chatroom-voice-draft-btn { border:1px solid rgba(99,102,241,0.22); background:rgba(15,23,42,0.28); color:var(--text); border-radius:999px; padding:4px 10px; font-size:11px; cursor:pointer; } .chatroom-voice-draft-btn:hover { border-color:rgba(99,102,241,0.38); color:#c7d2fe; } .chatroom-voice-draft-body { font-size:13px; line-height:1.65; color:var(--text); white-space:pre-wrap; word-break:break-word; } .chatroom-voice-draft-body .interim { color:rgba(226,232,240,0.72); } .chatroom-input-area textarea { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--text); font-size: 14px; outline: none; resize: none; overflow-y: hidden; min-height: 40px; max-height: 160px; line-height: 1.5; font-family: inherit; } .chatroom-input-area textarea:focus { border-color: var(--primary); } .chatroom-input-area button { background: var(--primary); color: white; border: none; border-radius: var(--radius); padding: 10px 16px; cursor: pointer; font-size: 14px; } .chatroom-voice-btn { min-width: 92px; background: var(--surface2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } .chatroom-voice-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; } .chatroom-voice-btn.recording { background: rgba(239,68,68,0.14) !important; color: var(--red) !important; border-color: rgba(239,68,68,0.4) !important; } .chatroom-voice-btn:disabled { opacity: 0.6; cursor: not-allowed; } .chatroom-extract-result { background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius); padding: 14px; margin: 8px 20px; } .chatroom-extract-result h4 { font-size: 14px; color: var(--primary); margin-bottom: 8px; } .chatroom-extract-result .extract-summary { font-size: 13px; margin-bottom: 8px; line-height: 1.5; } .chatroom-extract-result .extract-block { margin-top: 10px; } .chatroom-extract-result .extract-label { font-size: 12px; margin-bottom: 4px; font-weight: 600; } .chatroom-extract-result .extract-line { font-size: 12px; color: var(--text2); line-height: 1.5; margin-top: 2px; } .chatroom-extract-result .extract-chip { display: inline-block; background: rgba(99,102,241,0.12); color: var(--primary); font-size: 11px; padding: 3px 10px; border-radius: 10px; margin: 2px 4px 2px 0; } .chatroom-extract-result .extract-task { display: inline-block; background: rgba(34,197,94,0.15); color: var(--green); font-size: 11px; padding: 3px 10px; border-radius: 10px; margin: 2px 4px 2px 0; } .chatroom-channels-layout { display: flex; flex: 1; min-height: 0; } .chatroom-channel-sidebar { width: 180px; min-width: 180px; border-right: 1px solid var(--border); overflow-y: auto; padding: 8px 0; background: rgba(0,0,0,0.02); } [data-theme="dark"] .chatroom-channel-sidebar { background: rgba(255,255,255,0.02); } .channel-sidebar-header { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text2); padding: 8px 12px; letter-spacing: 0.5px; } .channel-sidebar-divider { font-size: 10px; color: var(--text2); padding: 12px 12px 4px; border-top: 1px solid var(--border); margin-top: 4px; } .channel-section-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 10px 4px 12px; border-top: 1px solid var(--border); margin-top: 4px; color: var(--text2); font-size: 10px; } .channel-add-btn { width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: var(--text2); cursor: pointer; font-size: 18px; line-height: 24px; padding: 0; } .channel-add-btn:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); } .channel-item { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; font-size: 13px; border-radius: 6px; margin: 2px 6px; transition: background 0.15s; } .channel-item:hover { background: rgba(99,102,241,0.08); } .channel-item.active { background: rgba(99,102,241,0.15); color: var(--primary); font-weight: 600; } .channel-icon { font-size: 14px; flex-shrink: 0; } .channel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-meta { font-size: 10px; color: var(--text2); flex-shrink: 0; } .channel-delete-btn { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text2); opacity: 0; pointer-events: none; cursor: pointer; font: inherit; font-size: 16px; line-height: 22px; text-align: center; transition: background 0.15s, color 0.15s, opacity 0.15s; } .channel-delete-btn:hover { background: rgba(239,68,68,0.15); color: var(--red); } .channel-delete-btn:disabled { opacity: .45; cursor: wait; } .channel-item:hover .channel-delete-btn, .channel-item:focus-within .channel-delete-btn { opacity: 1; pointer-events: auto; } .channel-empty { color: var(--text2); font-size: 12px; padding: 8px 12px; } .chatroom-channel-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .chatroom-task-board { border-top: 1px solid var(--border); padding: 12px 20px; flex-shrink: 0; } .task-board-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .task-board-title { font-size: 14px; font-weight: 700; } .task-board-refresh-btn { font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; } .task-board-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 8px; } .task-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .task-card-title { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-card-status { font-size: 11px; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; margin-left: 8px; } .task-card-status.pending { background: rgba(234,179,8,0.15); color: #eab308; } .task-card-status.in_progress { background: rgba(59,130,246,0.15); color: #3b82f6; } .task-card-status.completed { background: rgba(34,197,94,0.15); color: #22c55e; } .task-card-status.blocked { background: rgba(239,68,68,0.15); color: #ef4444; } .task-card-meta { font-size: 11px; color: var(--text2); display: flex; gap: 12px; margin-bottom: 6px; } .task-card-desc { font-size: 12px; color: var(--text2); margin-bottom: 8px; max-height: 40px; overflow: hidden; } .task-card-actions { display: flex; gap: 6px; flex-wrap: wrap; } .task-card-actions button { font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; transition: background 0.15s; } .task-card-actions button:hover { background: rgba(99,102,241,0.1); border-color: var(--primary); color: var(--primary); } .task-card-discussion { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; } .task-disc-list { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; } .task-disc-entry { display: flex; align-items: baseline; gap: 6px; font-size: 12px; } .task-disc-badge { font-size: 10px; padding: 1px 6px; border-radius: 6px; background: rgba(99,102,241,0.12); color: var(--primary); flex-shrink: 0; } .task-disc-entry.claim .task-disc-badge { background: rgba(34,197,94,0.15); color: #22c55e; } .task-disc-entry.reject .task-disc-badge { background: rgba(239,68,68,0.15); color: #ef4444; } .task-disc-entry.need_info .task-disc-badge { background: rgba(234,179,8,0.15); color: #eab308; } .task-disc-name { font-weight: 600; flex-shrink: 0; } .task-disc-content { flex: 1; min-width: 0; } .task-disc-time { color: var(--text2); margin-left: auto; flex-shrink: 0; } .task-disc-input { display: flex; gap: 6px; margin-top: 6px; } .task-disc-input input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--text); font-size: 12px; } .task-disc-input button { font-size: 11px; padding: 6px 12px; border-radius: 6px; border: none; background: var(--primary); color: white; cursor: pointer; } .chatroom-layout { display: flex; gap: 12px; flex: 1; min-height: 0; } .chatroom-layout .chatroom-main { flex: 1; min-width: 0; } .chatroom-layout .chatroom-memory { width: 320px; min-width: 320px; } .chatroom-main { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } .chatroom-memory { margin: 12px 20px 0 0; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .chatroom-memory-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .chatroom-memory-title { font-size: 13px; font-weight: 700; } .chatroom-memory-sub { font-size: 11px; color: var(--text2); margin-top: 3px; } .chatroom-memory-body { padding: 14px 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .chatroom-insights-board { display: flex; flex-direction: column; gap: 12px; } .insight-section { border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; background: rgba(255,255,255,0.02); padding: 12px; } .insight-title { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; } .insight-main { font-size: 13px; line-height: 1.55; } .insight-list { display: flex; flex-direction: column; gap: 8px; } .insight-list-item { font-size: 12px; line-height: 1.5; color: var(--text); } .insight-list-item span { color: var(--text2); } .insight-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .insight-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 10px; background: rgba(99,102,241,0.12); color: var(--primary); } .candidate-task-card { border: 1px solid rgba(34,197,94,0.14); border-radius: 10px; padding: 10px 12px; background: rgba(34,197,94,0.06); } .candidate-task-title { font-size: 13px; font-weight: 600; line-height: 1.45; } .candidate-task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--text2); } .candidate-task-desc { font-size: 11px; color: var(--text2); line-height: 1.5; margin-top: 6px; } .mem-section-title { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; } .mem-empty { font-size: 12px; color: var(--text2); padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); } .mem-card { border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.02); } .mem-card-title { font-size: 13px; font-weight: 600; line-height: 1.4; } .mem-card-meta { font-size: 11px; color: var(--text2); margin-top: 4px; line-height: 1.5; } .mem-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mem-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 10px; background: rgba(99,102,241,0.14); color: var(--primary); } .mem-chip.warn { background: rgba(245,158,11,0.14); color: #fbbf24; } .mem-chip.ok { background: rgba(34,197,94,0.14); color: #86efac; } .mem-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .mem-actions button { border: 1px solid var(--border); background: var(--surface2); color: var(--text2); border-radius: 999px; font-size: 11px; padding: 4px 9px; cursor: pointer; } .mem-actions button:hover { border-color: var(--primary); color: var(--primary); } .mem-status { font-size: 11px; color: var(--text2); } .mem-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: inline-block; } .mem-sync-dot.ok { background: #22c55e; } .mem-sync-dot.warn { background: #f59e0b; } .mem-sync-dot.off { background: #64748b; } /* Partner cards */ .partner-card { background: var(--surface2); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; border-left: 3px solid var(--primary); } .partner-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .partner-card-header h4 { margin: 0; font-size: 15px; } .partner-card-header .partner-company { font-size: 12px; color: var(--text2); } .partner-card-header .partner-industry { font-size: 11px; background: rgba(99,102,241,0.1); color: var(--primary); padding: 2px 8px; border-radius: 8px; } .shared-client-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; margin-top: 6px; cursor: pointer; transition: background 0.15s; } .shared-client-item:hover { background: rgba(99,102,241,0.08); } .shared-client-name { font-size: 13px; font-weight: 500; } .shared-client-company { font-size: 11px; color: var(--text2); } .task-progress-mini { display: flex; gap: 8px; font-size: 11px; color: var(--text2); margin-left: auto; } .task-progress-mini span { display: flex; align-items: center; gap: 3px; } /* Client detail team section */ .cd-team-section { margin-bottom: 16px; } .cd-team-header { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 6px 10px; border-radius: 6px; } .cd-team-header.my-team { background: rgba(99,102,241,0.1); color: var(--primary); } .cd-team-header.partner-team { background: rgba(249,115,22,0.1); color: var(--orange); } .cd-task-card { background: var(--surface2); border-radius: 6px; padding: 10px 12px; margin-bottom: 6px; } .cd-task-title { font-size: 13px; font-weight: 500; } .cd-task-meta { font-size: 11px; color: var(--text2); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; } .partner-activity-section { margin-top: 16px; } .partner-activity-card { background: rgba(249,115,22,0.05); border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; border-left: 2px solid var(--orange); } .partner-activity-card .team-tag { font-size: 10px; background: rgba(249,115,22,0.15); color: var(--orange); padding: 1px 6px; border-radius: 8px; } /* Meeting invite modal */ .meeting-invite-hint { font-size: 13px; color: var(--text2); margin-bottom: 14px; line-height: 1.5; } .business-line-delete-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; margin: 10px 0 14px; } .business-line-delete-task { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--surface2); } .business-line-delete-task-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .business-line-delete-task-meta { flex: 0 0 auto; color: var(--text2); font-size: 12px; } .meeting-invite-actions { display: flex; gap: 8px; margin-bottom: 12px; } .meeting-invite-actions button { font-size: 12px; padding: 4px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface2); color: var(--text2); cursor: pointer; } .meeting-invite-actions button:hover { border-color: var(--primary); color: var(--primary); } .meeting-member-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; margin-bottom: 16px; } .meeting-member-check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); cursor: pointer; user-select: none; } .meeting-member-check:hover { border-color: var(--primary); background: rgba(99,102,241,0.06); } .meeting-member-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } .meeting-member-check-name { font-size: 14px; } .meeting-member-check-role { font-size: 11px; color: var(--text2); margin-left: auto; } .meeting-mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .meeting-mode-option { position: relative; display: block; cursor: pointer; } .meeting-mode-option input { position: absolute; opacity: 0; pointer-events: none; } .meeting-mode-option span { display: flex; min-height: 68px; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); } .meeting-mode-option strong { font-size: 13px; } .meeting-mode-option small { color: var(--text2); font-size: 11px; line-height: 1.45; } .meeting-mode-option input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: rgba(99,102,241,0.08); } .meeting-offline-mode-note { margin-bottom: 16px; padding: 10px 12px; border-left: 3px solid var(--primary); background: rgba(99,102,241,.08); color: var(--text2); font-size: 12px; line-height: 1.6; } .meeting-offline-mode-note[hidden], .meeting-online-participants[hidden] { display: none; } .offline-meeting-console { flex: 0 0 auto; margin: 10px 20px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .offline-meeting-console[hidden] { display: none; } .offline-meeting-console-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--border); } .offline-meeting-console-title { display: flex; align-items: center; gap: 9px; min-width: 0; } .offline-meeting-console-title-mark { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(239,68,68,.12); color: var(--red); font-size: 12px; } .offline-meeting-console-title strong { display: block; font-size: 13px; } .offline-meeting-console-title small { display: block; margin-top: 2px; color: var(--text2); font-size: 10px; } .offline-meeting-console-head-actions { display: flex; align-items: center; gap: 6px; } .offline-meeting-status-badge { min-width: 62px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); color: var(--text2); font-size: 10px; font-weight: 700; text-align: center; white-space: nowrap; } .offline-meeting-status-badge.checking, .offline-meeting-status-badge.connecting { border-color: rgba(99,102,241,.4); color: var(--primary-hover); } .offline-meeting-status-badge.recording { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); color: var(--green); } .offline-meeting-status-badge.paused, .offline-meeting-status-badge.degraded { border-color: rgba(234,179,8,.42); background: rgba(234,179,8,.08); color: var(--yellow); } .offline-meeting-status-badge.error { border-color: rgba(239,68,68,.42); background: rgba(239,68,68,.08); color: var(--red); } .offline-meeting-icon-btn { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--text2); cursor: pointer; } .offline-meeting-icon-btn:hover { background: var(--surface2); color: var(--text); } .offline-meeting-console.collapsed .offline-meeting-console-head { border-bottom: 0; } .offline-meeting-console.collapsed .offline-meeting-console-body { display: none; } .offline-meeting-console-body { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); min-height: 218px; } .offline-meeting-preflight { min-width: 0; padding: 12px; border-right: 1px solid var(--border); } .offline-meeting-section-label { margin-bottom: 8px; color: var(--text2); font-size: 10px; font-weight: 700; } .offline-meeting-checks { display: flex; flex-direction: column; gap: 5px; } .offline-meeting-check { min-height: 30px; display: grid; grid-template-columns: 16px 62px minmax(0,1fr); align-items: center; gap: 5px; font-size: 10.5px; } .offline-meeting-check-dot { width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--text2); } .offline-meeting-check.ready .offline-meeting-check-dot { background: var(--green); } .offline-meeting-check.warn .offline-meeting-check-dot { background: var(--yellow); } .offline-meeting-check.error .offline-meeting-check-dot { background: var(--red); } .offline-meeting-check-name { color: var(--text2); } .offline-meeting-check-value { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; } .offline-meeting-device-select { width: 100%; height: 32px; margin-top: 8px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; outline: 0; background: var(--surface2); color: var(--text); font: inherit; font-size: 10.5px; } .offline-meeting-device-select:focus { border-color: var(--primary); } .offline-meeting-status-message { min-height: 32px; margin-top: 8px; padding: 7px 8px; border-left: 2px solid var(--border); background: var(--surface2); color: var(--text2); font-size: 10.5px; line-height: 1.5; } .offline-meeting-status-message.warn { border-left-color: var(--yellow); color: var(--yellow); } .offline-meeting-status-message.error { border-left-color: var(--red); color: var(--red); } .offline-meeting-status-message.ready { border-left-color: var(--green); } .offline-meeting-preflight-action { width: 100%; min-height: 30px; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text2); font: inherit; font-size: 10.5px; cursor: pointer; } .offline-meeting-preflight-action:hover { border-color: var(--primary); color: var(--text); } .offline-meeting-live { min-width: 0; display: flex; flex-direction: column; } .offline-meeting-metrics { display: grid; grid-template-columns: 92px 110px minmax(120px, 1fr); border-bottom: 1px solid var(--border); } .offline-meeting-metric { min-width: 0; padding: 9px 11px; border-right: 1px solid var(--border); } .offline-meeting-metric:last-child { border-right: 0; } .offline-meeting-metric span { display: block; color: var(--text2); font-size: 9.5px; } .offline-meeting-metric strong { display: block; min-height: 18px; margin-top: 3px; color: var(--text); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .offline-meeting-timer { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } .offline-meeting-level { display: flex; align-items: center; gap: 7px; margin-top: 6px; } .offline-meeting-level-track { height: 5px; min-width: 56px; flex: 1; overflow: hidden; border-radius: 3px; background: var(--border); } .offline-meeting-level-bar { width: 0; height: 100%; background: var(--green); transition: width .08s linear, background-color .12s; } .offline-meeting-level-label { width: 26px; color: var(--text2); font-size: 9px; text-align: right; } .offline-meeting-controls { min-height: 46px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--border); } .offline-meeting-controls button { min-height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; } .offline-meeting-controls button:hover { border-color: var(--primary); } .offline-meeting-controls button:disabled { opacity: .5; cursor: not-allowed; } .offline-meeting-controls .primary { border-color: var(--primary); background: var(--primary); color: #fff; } .offline-meeting-controls .danger { border-color: rgba(239,68,68,.45); color: var(--red); } .offline-meeting-controls-note { min-width: 0; margin-left: auto; color: var(--text2); font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .offline-meeting-transcript { min-height: 0; flex: 1; display: flex; flex-direction: column; } .offline-meeting-transcript-head { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; } .offline-meeting-transcript-head strong { font-size: 10.5px; } .offline-meeting-transcript-head span { color: var(--text2); font-size: 9.5px; } .offline-meeting-transcript-body { height: 96px; min-height: 72px; overflow-y: auto; padding: 0 10px 9px; scroll-behavior: smooth; } .offline-meeting-empty { min-height: 64px; display: grid; place-items: center; color: var(--text2); font-size: 10.5px; text-align: center; } .offline-meeting-line { display: grid; grid-template-columns: 52px 56px minmax(0,1fr); gap: 7px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); font-size: 11px; line-height: 1.5; } .offline-meeting-line-time { color: var(--text2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .offline-meeting-line-speaker { color: var(--primary-hover); } .offline-meeting-line.interim { opacity: .68; } .offline-meeting-line-content { min-width: 0; overflow-wrap: anywhere; } .offline-console-active .chatroom-input-area > .chatroom-voice-btn, .offline-console-active .chatroom-voice-toolbar, .offline-console-active .chatroom-voice-draft { display: none !important; } .meeting-review-modal { width: min(920px, calc(100vw - 32px)); max-width: 920px; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; } .modal.meeting-review-modal { overflow: hidden; } .meeting-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .meeting-review-meta { color: var(--text2); font-size: 12px; margin-top: 4px; } .meeting-review-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; overflow-x: auto; } .meeting-review-tab { padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text2); cursor: pointer; white-space: nowrap; } .meeting-review-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .meeting-review-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; } .meeting-review-modal > .modal-buttons { flex: 0 0 auto; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); background: var(--surface); } .meeting-review-panel { display: none; } .meeting-review-panel.active { display: block; } .meeting-review-status { padding: 10px 12px; border-left: 3px solid var(--primary); background: var(--surface2); font-size: 13px; line-height: 1.55; margin-bottom: 12px; } .meeting-review-section { margin-bottom: 18px; } .meeting-review-section h4 { font-size: 13px; margin: 0 0 8px; } .meeting-review-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .meeting-review-section-head h4 { margin-bottom: 3px; } .meeting-review-section-head p { margin: 0; color: var(--text2); font-size: 11px; line-height: 1.5; } .meeting-speaker-row { display: grid; grid-template-columns: 74px minmax(0, 1.35fr) minmax(210px, .8fr); align-items: start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .meeting-speaker-label { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; } .meeting-speaker-label-mark { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(99,102,241,.13); color: var(--primary-hover); } .meeting-speaker-samples { min-width: 0; } .meeting-speaker-samples-title { margin-bottom: 5px; color: var(--text2); font-size: 10px; } .meeting-speaker-sample { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 6px; margin-top: 4px; font-size: 11px; line-height: 1.45; } .meeting-speaker-sample time { color: var(--text2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .meeting-speaker-sample span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; } .meeting-speaker-controls { min-width: 0; } .meeting-speaker-controls-label { display: block; margin-bottom: 5px; color: var(--text2); font-size: 10px; } .meeting-speaker-guest { margin-top: 6px; } .meeting-speaker-kind-hint { min-height: 16px; margin-top: 5px; color: var(--text2); font-size: 9.5px; line-height: 1.4; } .meeting-speaker-row select, .meeting-speaker-row input, .meeting-proposal input, .meeting-proposal textarea, .meeting-proposal select { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); padding: 7px 9px; font: inherit; } .meeting-proposal { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; } .meeting-proposal.created { opacity: .72; } .meeting-proposal-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .meeting-proposal-title-row .meeting-proposal-label { margin-top: 0; } .meeting-proposal-dirty { color: var(--yellow); font-size: 10px; } .meeting-proposal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px 120px; gap: 8px; margin-top: 8px; } .meeting-proposal textarea { min-height: 62px; resize: vertical; } .meeting-proposal-label { display: block; color: var(--text2); font-size: 11px; margin: 8px 0 4px; } .meeting-assignee-list { display: flex; flex-wrap: wrap; gap: 6px; } .meeting-assignee-option { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text2); font-size: 11px; } .meeting-assignee-option input { width: auto; } .meeting-proposal-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .meeting-proposal-source { margin-top: 10px; padding: 8px 10px; border-left: 2px solid var(--border); background: var(--surface2); color: var(--text2); font-size: 11px; line-height: 1.55; } .meeting-proposal-source span { display: block; margin-bottom: 2px; color: var(--text); font-size: 10px; font-weight: 700; } .meeting-proposal-evidence { padding: 0; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 11px; cursor: pointer; } .meeting-proposal-empty { display: grid; justify-items: start; gap: 7px; padding: 18px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text2); font-size: 12px; } .meeting-proposal-empty strong { color: var(--text); font-size: 13px; } .meeting-transcript-row { display: grid; grid-template-columns: 68px 120px minmax(0,1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.55; } .meeting-transcript-row.highlight { margin: 0 -6px; padding-right: 6px; padding-left: 6px; background: rgba(234,179,8,.1); } .meeting-transcript-id { color: var(--primary); font-family: ui-monospace, monospace; } .meeting-decision-row { padding: 9px 0; border-bottom: 1px solid var(--border); line-height: 1.55; } .meeting-decision-evidence { display: block; color: var(--text2); font-size: 11px; margin-top: 3px; } /* ═══════════════════════════════════════════ VISUAL POLISH — Phase 2 App Enhancement ═══════════════════════════════════════════ */ /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text2); } /* ── Sidebar brand bar ── */ .sidebar-brand { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(145deg, rgba(99,102,241,0.08) 0%, transparent 70%); } .sidebar-brand-icon { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 2px 8px rgba(99,102,241,0.4); } .sidebar-brand-text { font-size: 13px; font-weight: 700; letter-spacing: 0.2px; background: linear-gradient(130deg, var(--text) 25%, var(--primary-hover) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Sidebar header ── */ .sidebar-header { padding: 14px 16px 12px; } .sidebar-avatar { box-shadow: 0 0 0 2px rgba(99,102,241,0.4), 0 2px 8px rgba(0,0,0,0.28); } /* ── Nav item active state: left accent bar ── */ .nav-item { position: relative; } .nav-item.active { background: rgba(99,102,241,0.12); color: var(--primary); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; background: linear-gradient(to bottom, var(--primary), var(--primary-hover)); border-radius: 0 3px 3px 0; } .nav-item .badge { font-weight: 700; } /* ── Panel header bar (.ph) ── */ .ph { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 58px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .ph-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--text); letter-spacing: -0.2px; } .ph-action-btn { background: var(--primary); color: white; border: none; border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 0.2px; transition: opacity 0.15s, transform 0.1s; } .ph-action-btn:hover { opacity: 0.88; transform: translateY(-1px); } .ph-action-btn:active { transform: translateY(0); } .ph-action-btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .ph-action-btn-ghost:hover { border-color: var(--primary); color: var(--text); } /* ── Stat cards: gradient + hover lift ── */ .stat-card { border: 1px solid var(--border); border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); } .stat-card .num { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; } .stat-card.primary { border-color: rgba(99,102,241,0.22); background: linear-gradient(145deg, rgba(99,102,241,0.1) 0%, var(--surface2) 100%); } .stat-card.green { border-color: rgba(34,197,94,0.22); background: linear-gradient(145deg, rgba(34,197,94,0.09) 0%, var(--surface2) 100%); } .stat-card.yellow { border-color: rgba(234,179,8,0.22); background: linear-gradient(145deg, rgba(234,179,8,0.09) 0%, var(--surface2) 100%); } .stat-card.red { border-color: rgba(239,68,68,0.22); background: linear-gradient(145deg, rgba(239,68,68,0.09) 0%, var(--surface2) 100%); } /* ── BL section header ── */ .bl-header h3 { font-size: 15px; font-weight: 700; } .bl-badge { background: rgba(99,102,241,0.12); color: var(--primary); border: 1px solid rgba(99,102,241,0.22); border-radius: 999px; padding: 2px 10px; font-weight: 600; } /* ── Node cards ── */ .node-card { border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; transition: box-shadow 0.15s; } .node-card:hover { box-shadow: 0 2px 14px rgba(0,0,0,0.16); } .node-card.in_progress { box-shadow: 0 0 0 1px rgba(99,102,241,0.12); } .node-actions select, .node-actions button { border-radius: 6px; transition: border-color 0.12s, color 0.12s, background 0.12s; } .node-actions button:hover { background: rgba(99,102,241,0.1); color: var(--primary); border-color: rgba(99,102,241,0.4); } /* ── Team member cards ── */ .member-card { border: 1px solid var(--border); border-radius: 12px; transition: transform 0.2s, border-color 0.18s, box-shadow 0.2s; } .member-card.clickable:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.18); } .member-avatar { box-shadow: 0 0 0 2px rgba(99,102,241,0.25); } .member-detail-avatar { box-shadow: 0 0 0 2px rgba(99,102,241,0.25); } .progress-bar { height: 5px; border-radius: 3px; margin-top: 10px; } .progress-bar .fill { background: linear-gradient(90deg, var(--primary) 0%, var(--green) 100%); border-radius: 3px; } /* ── Notification cards ── */ .notif-card { border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; transition: box-shadow 0.15s, transform 0.12s; } .notif-card:hover { transform: translateX(3px); box-shadow: 0 2px 12px rgba(0,0,0,0.15); } /* ── Tasks panel ── */ .tasks-section-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; } .tasks-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } .briefing-box { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 20px; } /* ── Account cards ── */ .account-card { border-radius: 14px; box-shadow: 0 1px 8px rgba(0,0,0,0.1); } .account-card-name { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; } .invite-code-input { border-radius: 10px; } .account-card-actions { flex-wrap: wrap; } /* ── Simplified dashboard layout ── */ .dashboard-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; } .dashboard-primary, .dashboard-secondary { min-width: 0; display: flex; flex-direction: column; gap: 16px; } .dashboard-secondary .account-card { margin-bottom: 0; } .dashboard-hero { position: relative; overflow: hidden; background: radial-gradient(circle at top right, rgba(34,197,94,0.16), transparent 28%), radial-gradient(circle at bottom left, rgba(99,102,241,0.22), transparent 36%), linear-gradient(145deg, rgba(18,23,38,0.92) 0%, rgba(25,34,58,0.82) 50%, rgba(19,23,34,0.96) 100%); border: 1px solid rgba(129,140,248,0.24); border-radius: 24px; padding: 22px; box-shadow: 0 18px 42px rgba(8,15,32,0.34); } .dashboard-hero::after { content: ''; position: absolute; inset: auto -40px -56px auto; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,255,255,0.11) 0%, transparent 68%); pointer-events: none; } .dashboard-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #c7d2fe; font-weight: 700; } .dashboard-headline { font-size: 28px; font-weight: 800; line-height: 1.18; margin-top: 10px; max-width: 20ch; } .dashboard-subline { font-size: 13px; color: rgba(226,232,240,0.76); line-height: 1.75; margin-top: 10px; max-width: 58ch; } .dashboard-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: end; position: relative; z-index: 1; } .dashboard-hero-side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .dashboard-score-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; padding: 16px; backdrop-filter: blur(12px); } .dashboard-score-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(226,232,240,0.62); } .dashboard-score-value { font-size: 34px; font-weight: 800; margin-top: 8px; } .dashboard-score-meta { font-size: 12px; color: rgba(226,232,240,0.74); line-height: 1.7; margin-top: 8px; } .focus-pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .focus-pill, .panel-chip, .team-focus-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600; } .focus-pill { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(241,245,249,0.92); } .panel-chip { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.22); color: var(--primary-hover); } .team-focus-chip { background: rgba(15,23,42,0.24); border: 1px solid rgba(255,255,255,0.08); color: var(--text); } .dashboard-glance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .dashboard-glance-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 12px 14px; } .dashboard-glance-label { font-size: 11px; color: rgba(226,232,240,0.64); } .dashboard-glance-value { font-size: 20px; font-weight: 800; margin-top: 6px; } .dashboard-card { background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(15,23,42,0.12) 100%); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: 0 8px 24px rgba(2,6,23,0.16); } .panel-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .panel-section-title { font-size: 16px; font-weight: 700; line-height: 1.3; } .panel-section-subtitle { font-size: 12px; color: var(--text2); line-height: 1.6; margin-top: 4px; } .dashboard-focus-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .dashboard-focus-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.05); } .dashboard-focus-item.clickable { cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; } .dashboard-focus-item.clickable:hover { transform: translateY(-1px); border-color: rgba(99,102,241,0.24); background: rgba(99,102,241,0.08); box-shadow: 0 10px 22px rgba(15,23,42,0.18); } .dashboard-focus-item.clickable:focus-visible { outline: none; border-color: rgba(99,102,241,0.32); box-shadow: 0 0 0 2px rgba(99,102,241,0.16); } .dashboard-focus-icon { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(99,102,241,0.16); font-size: 14px; flex-shrink: 0; } .dashboard-focus-copy { min-width: 0; } .dashboard-focus-copy strong { display: block; font-size: 13px; } .dashboard-focus-copy span { display: block; font-size: 12px; color: var(--text2); line-height: 1.65; margin-top: 3px; } .dashboard-focus-meta { font-size: 11px; color: rgba(191,219,254,0.78); margin-top: 6px; } .dashboard-focus-jump { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--primary-hover); } .business-line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .business-line-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 16px; padding: 15px; } .business-line-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .business-line-title { font-size: 14px; font-weight: 700; } .business-line-desc { font-size: 12px; color: var(--text2); line-height: 1.6; margin-top: 6px; } .business-line-meter { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 12px; } .business-line-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary) 0%, var(--green) 100%); } .business-line-meta { font-size: 11px; color: var(--text2); display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .business-line-list { display: flex; flex-direction: column; gap: 7px; } .business-line-row { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.025); color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; } .business-line-row:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, transparent); } .business-line-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; } .business-line-row-main { min-width: 0; display: flex; align-items: baseline; gap: 10px; } .business-line-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .business-line-row-main span, .business-line-row-counts span { color: var(--text2); font-size: 12px; white-space: nowrap; } .business-line-row-counts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; } .business-line-row-counts .active { color: var(--primary-hover); } .business-line-row-counts .risk { color: var(--red); font-weight: 600; } .business-line-row-counts .business-line-arrow { color: var(--text); font-size: 15px; } .account-stack { display: flex; flex-direction: column; gap: 12px; } .account-card { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(15,23,42,0.16) 100%); border: 1px solid rgba(148,163,184,0.14); box-shadow: 0 12px 28px rgba(2,6,23,0.18); } .account-card::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.18), transparent 70%); pointer-events: none; } .account-card-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: rgba(203,213,225,0.62); } .account-card-company { line-height: 1.6; } .account-form-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .account-form-row .invite-code-input { font-size: 14px; } .dashboard-side-rail { display: flex; flex-direction: column; gap: 12px; } .dashboard-status-card { border-radius: 18px; padding: 16px 18px; background: linear-gradient(180deg, rgba(34,197,94,0.1) 0%, rgba(15,23,42,0.08) 100%); border: 1px solid rgba(34,197,94,0.18); } .dashboard-status-card.warn { background: linear-gradient(180deg, rgba(239,68,68,0.1) 0%, rgba(15,23,42,0.08) 100%); border-color: rgba(239,68,68,0.18); } .dashboard-status-title { font-size: 13px; font-weight: 700; } .dashboard-status-copy { font-size: 12px; color: var(--text2); line-height: 1.7; margin-top: 6px; } .dashboard-task-stats { grid-template-columns: repeat(5, minmax(120px, 1fr)); } .dashboard-stat-link { appearance: none; width: 100%; border: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer; position: relative; overflow: hidden; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; } .dashboard-stat-link::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--primary); opacity: .85; } .dashboard-stat-link.yellow::before { background: var(--yellow); } .dashboard-stat-link.green::before { background: var(--green); } .dashboard-stat-link.red::before { background: var(--red); } .dashboard-stat-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 48%, var(--border)); background: var(--surface); box-shadow: 0 10px 24px rgba(2,6,23,.16); } .dashboard-stat-link:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); } .dashboard-stat-link:active { transform: translateY(0); } .stat-link-hint { margin-top: 9px; font-size: 11px; font-weight: 600; color: var(--text2); } .dashboard-stat-link:hover .stat-link-hint { color: var(--primary-hover); } .dashboard-live-card, .dashboard-discussion-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 26px rgba(2,6,23,.14); } .dashboard-live-card { padding: 18px; } .dashboard-live-head, .dashboard-discussion-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .dashboard-live-updated { display: flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--text2); font-size: 11px; } .dashboard-live-updated > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent); animation: dashboard-live-pulse 2s ease-in-out infinite; } @keyframes dashboard-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .38; } } .dashboard-team-statuses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; } .dashboard-team-status { display: grid; grid-template-columns: 9px auto 1fr; align-items: center; gap: 7px; min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); } .dashboard-team-status-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--text2); } .dashboard-team-status strong { font-size: 16px; line-height: 1; } .dashboard-team-status > span:last-child { color: var(--text2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-team-status.pending .dashboard-team-status-dot { background: var(--yellow); } .dashboard-team-status.in_progress .dashboard-team-status-dot { background: var(--primary); } .dashboard-team-status.completed .dashboard-team-status-dot { background: var(--green); } .dashboard-team-status.blocked .dashboard-team-status-dot { background: var(--red); } .dashboard-team-status.stalled .dashboard-team-status-dot { background: var(--orange); } .dashboard-live-track { display: flex; gap: 2px; height: 6px; margin: 10px 0 16px; overflow: hidden; border-radius: 3px; background: var(--surface); } .dashboard-live-segment { min-width: 3px; background: var(--text2); } .dashboard-live-segment.pending { background: var(--yellow); } .dashboard-live-segment.in_progress { background: var(--primary); } .dashboard-live-segment.completed { background: var(--green); } .dashboard-live-segment.blocked { background: var(--red); } .dashboard-live-segment.stalled { background: var(--orange); } .dashboard-live-segment.empty { flex: 1; opacity: .18; } .dashboard-event-list { max-height: 330px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; } .dashboard-event-row { appearance: none; width: 100%; min-height: 62px; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .dashboard-event-row:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); } .dashboard-event-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: -2px; } .dashboard-event-row.is-new { animation: dashboard-event-new 1.8s ease-out; } @keyframes dashboard-event-new { 0% { background: color-mix(in srgb, var(--green) 22%, transparent); } 100% { background: transparent; } } .dashboard-event-time { color: var(--text2); font-size: 11px; white-space: nowrap; } .dashboard-event-main { min-width: 0; } .dashboard-event-main strong, .dashboard-event-main > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-event-main strong { font-size: 13px; } .dashboard-event-main > span { margin-top: 4px; color: var(--text2); font-size: 11px; } .dashboard-event-transition { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .dashboard-event-status, .dashboard-event-origin { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--text2); } .dashboard-event-status.pending { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 36%, var(--border)); } .dashboard-event-status.in_progress { color: var(--primary-hover); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .dashboard-event-status.completed { color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, var(--border)); } .dashboard-event-status.blocked { color: var(--red); border-color: color-mix(in srgb, var(--red) 38%, var(--border)); } .dashboard-event-status.stalled { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 38%, var(--border)); } .dashboard-event-row.checklist { background: color-mix(in srgb, var(--green) 3%, transparent); } .dashboard-event-status.checklist { color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, var(--border)); background: color-mix(in srgb, var(--green) 8%, var(--surface)); } .dashboard-event-arrow { color: var(--text2); font-size: 11px; } .dashboard-discussion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .dashboard-discussion-card { min-width: 0; padding: 16px; } .dashboard-discussion-head { align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .dashboard-discussion-head > span { color: var(--text2); font-size: 11px; } .dashboard-feed-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; } .dashboard-feed-scroll:hover, .dashboard-feed-scroll:focus { scrollbar-color: color-mix(in srgb, var(--text2) 45%, transparent) transparent; outline: none; } .dashboard-feed-scroll::-webkit-scrollbar { width: 7px; } .dashboard-feed-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } .dashboard-feed-scroll:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text2) 38%, transparent); } .dashboard-feed-scroll.hot { max-height: 280px; } .dashboard-feed-scroll.latest { max-height: 380px; } .dashboard-feed-scroll.long { max-height: 380px; } .dashboard-hot-row, .dashboard-latest-row { appearance: none; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .dashboard-hot-row:last-child, .dashboard-latest-row:last-child { border-bottom: 0; } .dashboard-hot-row:hover, .dashboard-latest-row:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); } .dashboard-hot-row:focus-visible, .dashboard-latest-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: -2px; } .dashboard-hot-row { height: 56px; display: flex; align-items: center; gap: 10px; padding: 7px 8px; } .dashboard-hot-rank { width: 24px; height: 24px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--surface); color: var(--text2); font-size: 11px; font-weight: 700; } .dashboard-hot-rank.top { background: color-mix(in srgb, var(--orange) 14%, var(--surface)); color: var(--orange); } .dashboard-hot-copy, .dashboard-latest-copy { min-width: 0; } .dashboard-hot-copy strong, .dashboard-hot-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-hot-copy strong { font-size: 12px; } .dashboard-hot-copy span { margin-top: 3px; color: var(--text2); font-size: 10px; } .dashboard-latest-row { height: 76px; display: flex; align-items: flex-start; gap: 9px; padding: 9px 8px; } .dashboard-long-add { border: 1px solid var(--primary); border-radius: 6px; padding: 4px 9px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary-hover); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; } .dashboard-long-row { appearance: none; width: 100%; min-height: 58px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .dashboard-long-row:last-child { border-bottom: 0; } .dashboard-long-row:hover { background: color-mix(in srgb, var(--green) 7%, transparent); } .dashboard-long-priority { width: 7px; height: 26px; border-radius: 2px; background: var(--yellow); } .dashboard-long-priority.p1 { background: var(--red); } .dashboard-long-priority.p3 { background: var(--green); } .dashboard-long-copy { min-width: 0; } .dashboard-long-copy strong, .dashboard-long-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-long-copy strong { font-size: 12px; } .dashboard-long-copy span { margin-top: 4px; color: var(--text2); font-size: 10.5px; } .dashboard-long-status { border-radius: 4px; padding: 3px 5px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-hover); font-size: 10px; white-space: nowrap; } .dashboard-long-status.paused { background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--yellow); } .dashboard-long-status.completed { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); } .form-label { display: block; margin: 11px 0 5px; color: var(--text2); font-size: 11px; font-weight: 600; } .btn-danger { border: 1px solid color-mix(in srgb, var(--red) 55%, var(--border)); border-radius: 6px; padding: 8px 14px; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); cursor: pointer; } .dashboard-discussion-avatar { width: 28px; height: 28px; flex: 0 0 28px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; } .dashboard-discussion-avatar img { width: 100%; height: 100%; object-fit: cover; } .dashboard-latest-meta, .dashboard-latest-content, .dashboard-latest-task { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-latest-meta { color: var(--text2); font-size: 10px; } .dashboard-latest-meta strong { color: var(--text); font-size: 11px; } .dashboard-latest-content { margin-top: 4px; font-size: 12px; } .dashboard-latest-task { margin-top: 4px; color: var(--primary-hover); font-size: 10px; } .dashboard-feed-empty { display: flex; min-height: 96px; align-items: center; justify-content: center; color: var(--text2); font-size: 12px; } .team-focus-board { background: linear-gradient(135deg, rgba(99,102,241,0.14) 0%, rgba(15,23,42,0.22) 60%, var(--surface2) 100%); border: 1px solid rgba(99,102,241,0.22); border-radius: 18px; padding: 18px; margin-bottom: 18px; } .team-focus-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .section-empty { font-size: 13px; color: var(--text2); line-height: 1.7; padding: 4px 0; } .briefing-placeholder { background: rgba(15,23,42,0.2); border: 1px dashed rgba(255,255,255,0.12); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 12px; color: var(--text2); line-height: 1.7; } .team-section { margin-top: 18px; } /* ── Chat ── */ .msg.user .bubble { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); box-shadow: 0 2px 10px rgba(99,102,241,0.25); } .chat-input-area { background: var(--surface); padding: 14px 20px; } .chat-input-area input { border-radius: 10px; padding: 11px 14px; } .chat-input-area button { border-radius: 10px; font-weight: 600; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); } .btn-new-chat { border-radius: 8px; font-weight: 700; } .session-item.active { color: var(--primary); } /* ── Chatroom ── */ .chatroom-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .chatroom-input-area input { border-radius: 10px; } .chatroom-input-area button { border-radius: 10px; font-weight: 600; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); } .chatroom-meeting-banner { border-radius: 14px; } .chatroom-memory { border-radius: 14px; } .cr-msg-avatar { box-shadow: 0 1px 4px rgba(0,0,0,0.25); } /* ── Partner cards ── */ .partner-card { border-radius: 12px; border-left-width: 4px; transition: box-shadow 0.15s; } .partner-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.18); } .shared-client-item { border-radius: 8px; } /* ── Modals ── */ .modal { border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,0.4); } .modal h3 { font-size: 18px; font-weight: 700; } .btn-submit { border-radius: 8px; font-weight: 600; transition: opacity 0.15s, transform 0.1s; } .btn-submit:hover { opacity: 0.88; transform: translateY(-1px); } .btn-cancel { border-radius: 8px; border: 1px solid var(--border); transition: border-color 0.15s; } .btn-cancel:hover { border-color: var(--text2); } /* ── Stall Alert List Panel ── */ .stall-list-panel { max-width: 600px; width: 94vw; display: flex; flex-direction: column; max-height: 80vh; } .stall-list-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .stall-list-header h3 { margin: 0; } .stall-list-close { background: none; border: none; font-size: 24px; color: var(--text2); cursor: pointer; padding: 0 4px; line-height: 1; } .stall-list-close:hover { color: var(--text); } .stall-list-body { overflow-y: auto; flex: 1; min-height: 0; padding: 8px 0; } .stall-list-item { padding: 12px 0; border-bottom: 1px solid var(--border); } .stall-list-item:last-child { border-bottom: none; } .stall-item-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stall-item-msg { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 8px; } .stall-item-actions { display: flex; gap: 8px; flex-wrap: wrap; } .stall-item-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .stall-item-btn:hover { background: var(--hover); border-color: var(--accent); } .stall-item-btn .stall-icon { font-size: 14px; } .stall-list-footer { padding-top: 12px; border-top: 1px solid var(--border); text-align: right; } .stall-batch-btn { font-size: 13px; padding: 8px 20px; } .stall-detail-hint { font-size: 13px; color: var(--text2); margin-bottom: 12px; line-height: 1.5; } .collab-request-task { font-size: 12px; color: var(--text2); margin-bottom: 8px; } /* ── Panel fade-in ── */ .panel.active { animation: phFadeIn 0.16s ease-out; } @keyframes phFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* ── Light theme (晴空) overrides ── */ [data-theme="light"] .sidebar-brand { background: linear-gradient(145deg, rgba(91,92,246,0.05) 0%, transparent 70%); } [data-theme="light"] .sidebar-brand-text { background: linear-gradient(130deg, #18243a 25%, #5b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .ph { background: rgba(255,255,255,0.94); } [data-theme="light"] .sidebar-avatar { box-shadow: 0 0 0 2px rgba(91,92,246,0.35), 0 2px 8px rgba(0,0,0,0.1); } [data-theme="light"] .stat-card.primary { border-color: rgba(91,92,246,0.2); background: linear-gradient(145deg, rgba(91,92,246,0.08) 0%, #f5f7fb 100%); } [data-theme="light"] .stat-card.green { border-color: rgba(21,128,61,0.2); background: linear-gradient(145deg, rgba(21,128,61,0.07) 0%, #f5f7fb 100%); } [data-theme="light"] .stat-card.yellow { border-color: rgba(154,108,4,0.2); background: linear-gradient(145deg, rgba(154,108,4,0.07) 0%, #f5f7fb 100%); } [data-theme="light"] .stat-card.red { border-color: rgba(185,28,28,0.2); background: linear-gradient(145deg, rgba(185,28,28,0.07) 0%, #f5f7fb 100%); } [data-theme="light"] .member-avatar { box-shadow: 0 0 0 2px rgba(91,92,246,0.22); } [data-theme="light"] .bl-badge { background: rgba(91,92,246,0.1); border-color: rgba(91,92,246,0.2); } [data-theme="light"] .msg.user .bubble { box-shadow: 0 2px 10px rgba(91,92,246,0.18); } [data-theme="light"] .chat-input-area button { background: linear-gradient(135deg, #5b5cf6 0%, #4640dd 100%); } [data-theme="light"] .chatroom-input-area button { background: linear-gradient(135deg, #5b5cf6 0%, #4640dd 100%); } /* ── Warm theme (暖岩) overrides ── */ [data-theme="warm"] .sidebar-brand { background: linear-gradient(145deg, rgba(224,154,56,0.08) 0%, transparent 70%); } [data-theme="warm"] .sidebar-brand-icon { background: linear-gradient(135deg, #e09a38 0%, #f0b55a 100%); box-shadow: 0 2px 8px rgba(224,154,56,0.42); } [data-theme="warm"] .sidebar-brand-text { background: linear-gradient(130deg, #f2ece0 25%, #f0b55a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="warm"] .sidebar-avatar { box-shadow: 0 0 0 2px rgba(224,154,56,0.5), 0 2px 8px rgba(0,0,0,0.3); } [data-theme="warm"] .nav-item.active { background: rgba(224,154,56,0.14); color: var(--primary); } [data-theme="warm"] .nav-item.active::before { background: linear-gradient(to bottom, #e09a38, #f0b55a); } [data-theme="warm"] .stat-card.primary { border-color: rgba(224,154,56,0.25); background: linear-gradient(145deg, rgba(224,154,56,0.1) 0%, var(--surface2) 100%); } [data-theme="warm"] .bl-badge { background: rgba(224,154,56,0.12); color: var(--primary); border-color: rgba(224,154,56,0.25); } [data-theme="warm"] .member-avatar { box-shadow: 0 0 0 2px rgba(224,154,56,0.3); } [data-theme="warm"] .progress-bar .fill { background: linear-gradient(90deg, #e09a38 0%, #5ca86b 100%); } [data-theme="warm"] .msg.user .bubble { box-shadow: 0 2px 10px rgba(224,154,56,0.28); } [data-theme="warm"] .chat-input-area button { background: linear-gradient(135deg, #e09a38 0%, #f0b55a 100%); } [data-theme="warm"] .chatroom-input-area button { background: linear-gradient(135deg, #e09a38 0%, #f0b55a 100%); } [data-theme="warm"] .node-card.in_progress { box-shadow: 0 0 0 1px rgba(224,154,56,0.15); } /* ===== ONBOARDING TOUR ===== */ /* Spotlight overlay — 4 mask panels surrounding the highlight hole */ #ob-overlay { display: none; position: fixed; inset: 0; z-index: 9000; pointer-events: none; } #ob-overlay.active { display: block; pointer-events: none; } .ob-mask { position: fixed; background: rgba(0,0,0,0.58); transition: top 0.28s ease, left 0.28s ease, right 0.28s ease, bottom 0.28s ease, width 0.28s ease, height 0.28s ease; } /* Highlight ring around the spotted element */ #ob-spotlight-ring { display: none; position: fixed; z-index: 9001; border: 2px solid rgba(99,102,241,0.8); border-radius: 8px; box-shadow: 0 0 0 4px rgba(99,102,241,0.2), 0 0 20px rgba(99,102,241,0.3); pointer-events: none; transition: all 0.28s ease; } #ob-spotlight-ring.active { display: block; } /* Guide card — always fixed bottom-right, never moves off screen */ #ob-guide-card { display: none; position: fixed; bottom: 28px; right: 28px; width: 340px; z-index: 9100; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); pointer-events: all; animation: ob-slide-up 0.22s ease; } #ob-guide-card.active { display: block; } @keyframes ob-slide-up { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ob-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ob-card-step { font-size: 11px; color: var(--text2); font-weight: 600; letter-spacing: 0.5px; background: var(--surface2); padding: 2px 8px; border-radius: 10px; } .ob-card-skip { font-size: 12px; color: var(--text2); background: none; border: none; cursor: pointer; padding: 2px 6px; } .ob-card-skip:hover { color: var(--text); } /* progress dots */ .ob-dots { display: flex; gap: 5px; margin-bottom: 12px; } .ob-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.2s; } .ob-dot.done { background: var(--primary); } .ob-dot.current { background: var(--primary); width: 18px; border-radius: 3px; } .ob-card-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; } .ob-card-desc { font-size: 13px; color: var(--text2); line-height: 1.65; margin-bottom: 14px; } /* action button (interactive step) */ .ob-action-btn { display: block; width: 100%; padding: 9px 14px; margin-bottom: 10px; background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(99,102,241,0.05) 100%); border: 1px dashed rgba(99,102,241,0.5); border-radius: 8px; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; transition: background 0.18s, border-color 0.18s; } .ob-action-btn:hover { background: rgba(99,102,241,0.2); border-color: var(--primary); } .ob-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ob-action-btn.done { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.5); color: #10b981; cursor: default; } .ob-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .ob-btn-next { padding: 8px 20px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; } .ob-btn-next:hover { opacity: 0.88; } .ob-btn-next:disabled { opacity: 0.45; cursor: not-allowed; } /* welcome modal */ #ob-welcome-modal { display: none; position: fixed; inset: 0; z-index: 9200; background: rgba(0,0,0,0.65); align-items: center; justify-content: center; } #ob-welcome-modal.active { display: flex; } .ob-welcome-box { background: var(--surface); border-radius: 16px; padding: 36px 40px; max-width: 500px; width: 92%; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,0.45); animation: ob-pop-in 0.25s ease; } @keyframes ob-pop-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ob-welcome-icon { font-size: 52px; margin-bottom: 16px; } .ob-welcome-box h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; } .ob-welcome-box p { font-size: 14px; color: var(--text2); line-height: 1.75; margin-bottom: 6px; } .ob-welcome-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 24px; text-align: left; } .ob-feat-item { display: flex; align-items: flex-start; gap: 8px; background: var(--surface2); border-radius: 8px; padding: 10px 12px; font-size: 13px; } .ob-feat-item .icon { font-size: 18px; flex-shrink: 0; } .ob-feat-item .text { color: var(--text2); line-height: 1.5; } .ob-feat-item .text b { color: var(--text); display: block; font-size: 13px; margin-bottom: 2px; } .ob-welcome-team-preview { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; } .ob-mock-chip { display: flex; align-items: center; gap: 7px; background: var(--surface2); border-radius: 20px; padding: 6px 14px; font-size: 13px; } .ob-mock-chip .av { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .ob-mock-chip .lbl { color: var(--text2); font-size: 11px; } .ob-welcome-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .ob-start-btn { padding: 11px 30px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .ob-start-btn:hover { opacity: 0.88; } .ob-skip-all-btn { padding: 11px 20px; background: var(--surface2); color: var(--text2); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; cursor: pointer; } /* finish modal */ #ob-finish-modal { display: none; position: fixed; inset: 0; z-index: 9200; background: rgba(0,0,0,0.65); align-items: center; justify-content: center; } #ob-finish-modal.active { display: flex; } .ob-finish-box { background: var(--surface); border-radius: 16px; padding: 40px; max-width: 460px; width: 92%; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,0.45); animation: ob-pop-in 0.25s ease; } .ob-finish-box h2 { font-size: 21px; font-weight: 700; margin-bottom: 10px; } .ob-finish-box p { font-size: 13px; color: var(--text2); line-height: 1.75; margin-bottom: 8px; } .ob-finish-warn { font-size: 12px; color: var(--yellow); margin-bottom: 26px; } .ob-finish-btns { display: flex; gap: 10px; justify-content: center; } .ob-confirm-btn { padding: 11px 30px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .ob-confirm-btn:hover { opacity: 0.88; } /* demo badge */ .demo-badge { display: inline-block; font-size: 10px; font-weight: 600; background: rgba(99,102,241,0.15); color: var(--primary); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; } /* ===== END ONBOARDING ===== */ /* Team information library */ .library-shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 40px; } .library-composer { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; } .library-composer textarea { width: 100%; min-height: 96px; resize: vertical; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.7; outline: none; } .library-composer textarea::placeholder { color: var(--text2); } .library-composer-files { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; } .library-staged-file { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 30px; align-items: center; gap: 8px; min-height: 42px; padding: 6px 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; } .library-file-symbol { display: grid; place-items: center; width: 28px; height: 28px; color: var(--primary-hover); font-size: 17px; } .library-staged-copy { min-width: 0; } .library-staged-copy strong, .library-staged-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .library-staged-copy strong { font-size: 12px; } .library-staged-copy span { color: var(--text2); font-size: 10px; margin-top: 2px; } .library-scope-button, .library-icon-button { border: 0; background: transparent; color: var(--text2); cursor: pointer; font: inherit; } .library-scope-button { padding: 5px 7px; border-radius: 5px; font-size: 11px; white-space: nowrap; } .library-scope-button:hover { color: var(--primary-hover); background: color-mix(in srgb, var(--primary) 8%, transparent); } .library-icon-button { width: 30px; height: 30px; padding: 0; border-radius: 5px; font-size: 18px; } .library-icon-button:hover { color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); } .library-composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .library-add-button { border: 1px solid var(--border); background: var(--surface2); color: var(--text); min-height: 34px; padding: 0 11px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; } .library-add-button:hover { border-color: var(--primary); color: var(--primary-hover); } .library-post-scope { margin-left: auto; } .library-publish-button { border: 0; min-height: 34px; padding: 0 16px; border-radius: 6px; background: var(--primary); color: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; } .library-publish-button:disabled { opacity: .55; cursor: wait; } .library-filter-panel { margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--border); } .library-search-row { position: relative; display: flex; align-items: center; } .library-search-row::before { content: '\2315'; position: absolute; left: 11px; color: var(--text2); font-size: 17px; pointer-events: none; } .library-search-row input { width: 100%; height: 38px; padding: 0 38px 0 36px; border: 1px solid var(--border); border-radius: 6px; outline: none; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; } .library-search-row input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .library-search-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent); } .library-search-clear { position: absolute; right: 4px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--text2); cursor: pointer; font-size: 18px; } .library-search-clear:hover { color: var(--text); background: var(--surface2); } .library-filter-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 34px; gap: 7px; margin-top: 8px; } .library-filter-row select { min-width: 0; width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 11px; cursor: pointer; } .library-filter-reset { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text2); cursor: pointer; font-size: 17px; } .library-filter-reset:hover { border-color: var(--primary); color: var(--primary-hover); } .library-filter-summary { min-height: 18px; padding-top: 7px; color: var(--text2); font-size: 10.5px; } .library-feed { margin-top: 14px; border-top: 1px solid var(--border); } .library-post { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 18px 2px; border-bottom: 1px solid var(--border); } .library-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; overflow: hidden; background: var(--primary); color: #fff; font-size: 16px; font-weight: 700; } .library-avatar img { width: 100%; height: 100%; object-fit: cover; } .library-post-main { min-width: 0; } .library-post-head { display: flex; align-items: center; gap: 8px; min-height: 24px; } .library-post-head strong { color: var(--primary-hover); font-size: 14px; } .library-post-delete { margin-left: auto; border: 0; background: transparent; color: var(--text2); width: 28px; height: 28px; border-radius: 5px; cursor: pointer; font-size: 18px; } .library-post-delete:hover { color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); } .library-post-text { margin-top: 5px; color: var(--text); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-wrap; } .library-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: min(510px, 100%); margin-top: 10px; } .library-image-grid.one { grid-template-columns: minmax(0, 360px); } .library-image-link { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 1; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; cursor: zoom-in; } .library-image-grid.one .library-image-link { aspect-ratio: 4 / 3; } .library-image-link img { width: 100%; height: 100%; display: block; object-fit: cover; } .library-image-scope { position: absolute; right: 4px; bottom: 4px; padding: 2px 5px; border-radius: 3px; background: rgba(0,0,0,.68); color: #fff; font-size: 9px; } .library-doc-list { display: flex; flex-direction: column; gap: 6px; width: min(560px, 100%); margin-top: 10px; } .library-doc-row { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 50px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); text-align: left; font: inherit; cursor: pointer; } .library-doc-row:hover { border-color: var(--primary); } .library-doc-row strong, .library-doc-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .library-doc-row strong { font-size: 12px; } .library-doc-row span { color: var(--text2); font-size: 10px; margin-top: 3px; } .library-file-visibility { color: var(--text2); font-size: 10px; white-space: nowrap; } .library-post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; color: var(--text2); font-size: 10.5px; } .library-comments { width: min(560px, 100%); margin-top: 9px; padding: 5px 9px; border-radius: 5px; background: var(--surface2); } .library-comment { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: start; gap: 7px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); } .library-comment:last-child { border-bottom: 0; } .library-comment-copy { min-width: 0; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; } .library-comment-copy strong { margin-right: 5px; color: var(--primary-hover); font-weight: 650; } .library-comment-copy strong::after { content: ':'; } .library-comment-copy span { white-space: pre-wrap; } .library-comment time { padding-top: 2px; color: var(--text2); font-size: 9.5px; white-space: nowrap; } .library-comment > button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text2); cursor: pointer; font-size: 15px; } .library-comment > button:hover { background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--red); } .library-comment-composer { display: flex; width: min(560px, 100%); min-height: 34px; margin-top: 8px; gap: 6px; } .library-comment-composer input { min-width: 0; flex: 1; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; outline: none; background: var(--surface2); color: var(--text); font: inherit; font-size: 12px; } .library-comment-composer input:focus { border-color: var(--primary); } .library-comment-composer button { min-width: 52px; padding: 0 10px; border: 0; border-radius: 5px; background: var(--primary); color: #fff; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; } .library-comment-composer button:disabled { opacity: .55; cursor: wait; } .library-empty { padding: 44px 12px; text-align: center; color: var(--text2); font-size: 13px; } .library-loading { width: 18px; height: 18px; margin: 30px auto; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; } .library-load-more-wrap { display: flex; justify-content: center; padding-top: 14px; } .library-load-more { min-width: 112px; min-height: 34px; padding: 0 15px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: 12px; } .library-load-more:hover { border-color: var(--primary); color: var(--primary-hover); } .library-load-more:disabled { opacity: .55; cursor: wait; } .library-audience-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .library-audience-member { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 5px 7px; border-radius: 5px; cursor: pointer; } .library-audience-member:hover { background: var(--surface2); } .library-audience-member input { width: 16px; height: 16px; accent-color: var(--primary); } .library-audience-all { display: flex; align-items: center; gap: 9px; padding: 8px 7px 11px; border-bottom: 1px solid var(--border); } .library-audience-hint { margin: 10px 0 14px; color: var(--text2); font-size: 11px; line-height: 1.5; } /* Personal information library */ #team-library-content { flex-direction: column; min-height: 0; } .library-space-switcher { position: sticky; top: 0; z-index: 20; display: flex; justify-content: center; gap: 3px; flex: 0 0 auto; padding: 10px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); } .library-space-tab { min-height: 34px; padding: 0 18px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .library-space-tab:hover { color: var(--text); background: var(--surface2); } .library-space-tab.active { border-color: var(--border); background: var(--surface); color: var(--text); box-shadow: inset 0 -2px 0 var(--primary); } .library-space-tab span { margin-left: 3px; color: var(--green); font-size: 10px; } #personal-library-space { min-height: calc(100vh - 120px); } .personal-library-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-height: calc(100vh - 120px); } .pl-sidebar { min-width: 0; padding: 16px 12px 28px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 45%, var(--bg)); } .pl-sidebar-head, .pl-sidebar-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pl-sidebar-head { min-height: 32px; padding: 0 8px 10px; } .pl-sidebar-head strong { font-size: 13px; } .pl-sidebar-section-head { margin-top: 18px; padding: 0 7px 7px; color: var(--text2); font-size: 10.5px; font-weight: 700; text-transform: uppercase; } .pl-nav-list, .pl-folder-tree { display: flex; flex-direction: column; gap: 2px; } .pl-nav-item, .pl-folder-row { width: 100%; min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text2); text-align: left; font: inherit; font-size: 12px; cursor: pointer; } .pl-nav-item:hover, .pl-folder-row:hover { background: var(--surface2); color: var(--text); } .pl-nav-item.active, .pl-folder-row.active { background: color-mix(in srgb, var(--primary) 13%, var(--surface)); color: var(--primary-hover); font-weight: 650; } .pl-nav-item span, .pl-folder-row > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-nav-item small { min-width: 21px; color: inherit; font-size: 9.5px; text-align: right; } .pl-folder-children { margin-left: 12px; padding-left: 5px; border-left: 1px solid var(--border); } .pl-folder-actions { display: none; flex: 0 0 auto; gap: 1px; } .pl-folder-row:hover .pl-folder-actions, .pl-folder-row:focus-within .pl-folder-actions { display: flex; } .pl-folder-actions button { width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: var(--text2); cursor: pointer; font-size: 13px; } .pl-folder-actions button:hover { background: var(--surface); color: var(--text); } .pl-icon-btn { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--text2); font: inherit; font-size: 17px; cursor: pointer; } .pl-icon-btn:hover { background: var(--surface2); color: var(--text); } .pl-main { min-width: 0; padding: 0 18px 40px; } .pl-toolbar { position: sticky; top: 55px; z-index: 15; display: grid; grid-template-columns: minmax(150px, 210px) minmax(210px, 1fr) auto; gap: 8px; align-items: center; min-height: 62px; padding: 10px 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); } .pl-team-filter, .pl-filter-bar select, .pl-batch-bar select, .pl-batch-bar input { min-width: 0; height: 36px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; outline: none; background: var(--surface); color: var(--text); font: inherit; font-size: 11.5px; } .pl-team-filter:focus, .pl-filter-bar select:focus, .pl-batch-bar select:focus, .pl-batch-bar input:focus { border-color: var(--primary); } .pl-search { position: relative; min-width: 0; display: flex; align-items: center; } .pl-search > span { position: absolute; left: 11px; z-index: 1; color: var(--text2); font-size: 16px; pointer-events: none; } .pl-search input { width: 100%; height: 38px; padding: 0 35px 0 34px; border: 1px solid var(--border); border-radius: 6px; outline: none; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; } .pl-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 13%, transparent); } .pl-search button { position: absolute; right: 4px; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text2); font-size: 17px; cursor: pointer; } .pl-search button:hover { background: var(--surface2); color: var(--text); } .pl-new-wrap { position: relative; } .pl-primary-btn { min-height: 38px; padding: 0 15px; border: 0; border-radius: 6px; background: var(--primary); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; } .pl-primary-btn:hover { filter: brightness(1.08); } .pl-primary-btn:disabled { opacity: .55; cursor: wait; } .pl-new-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 190px; padding: 5px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: 0 14px 34px rgba(0,0,0,.28); } .pl-new-menu.show { display: block; } .pl-new-menu button { width: 100%; min-height: 36px; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 7px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 12px; cursor: pointer; } .pl-new-menu button:hover { background: var(--surface2); } .pl-new-menu button span { display: grid; place-items: center; color: var(--primary-hover); font-weight: 700; } .pl-import-banner { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 8px 10px 8px 12px; border: 1px solid color-mix(in srgb, var(--yellow) 36%, var(--border)); border-radius: 6px; background: color-mix(in srgb, var(--yellow) 7%, var(--surface)); color: var(--text); font-size: 11.5px; } .pl-import-banner[hidden], .pl-batch-bar[hidden], .pl-table-head[hidden] { display: none; } .pl-import-banner button { min-height: 28px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--yellow) 42%, var(--border)); border-radius: 5px; background: var(--surface); color: var(--text); font: inherit; font-size: 11px; cursor: pointer; } .pl-context-row { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px 8px; } .pl-breadcrumb { color: var(--text); font-size: 15px; font-weight: 700; } .pl-result-summary { min-height: 16px; margin-top: 4px; color: var(--text2); font-size: 10.5px; } .pl-private-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 10.5px; } .pl-filter-bar { display: flex; align-items: center; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .pl-filter-bar select { width: auto; min-width: 118px; height: 32px; } .pl-view-toggle { display: flex; margin-left: auto; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } .pl-view-toggle button { width: 29px; height: 27px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text2); font-size: 15px; cursor: pointer; } .pl-view-toggle button.active { background: var(--surface2); color: var(--primary-hover); } .pl-batch-bar { min-height: 49px; display: flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 6px; background: color-mix(in srgb, var(--primary) 7%, var(--surface)); } .pl-batch-bar strong { flex: 0 0 auto; margin-right: 3px; font-size: 11px; } .pl-batch-bar select { width: 130px; height: 30px; } .pl-batch-bar input { min-width: 120px; flex: 1; height: 30px; } .pl-batch-bar > button:not(.pl-icon-btn) { min-height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); font: inherit; font-size: 10.5px; cursor: pointer; white-space: nowrap; } .pl-batch-bar > button:hover { border-color: var(--primary); } .pl-batch-bar > button.danger { color: var(--red); } .pl-table-head, .pl-item-row { display: grid; grid-template-columns: 32px minmax(190px, 1.7fr) 78px minmax(100px, .8fr) minmax(100px, .9fr) 112px 66px; gap: 9px; align-items: center; } .pl-table-head { min-height: 36px; padding: 0 7px; border-bottom: 1px solid var(--border); color: var(--text2); font-size: 9.5px; text-transform: uppercase; } .pl-table-head input, .pl-item-check input { width: 15px; height: 15px; accent-color: var(--primary); } .pl-items { min-height: 180px; } .pl-item-row { min-height: 64px; padding: 7px; border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent); color: var(--text); cursor: pointer; } .pl-item-row:hover { background: color-mix(in srgb, var(--surface2) 72%, transparent); } .pl-item-row.selected { background: color-mix(in srgb, var(--primary) 9%, transparent); } .pl-item-check { display: grid; place-items: center; height: 100%; cursor: default; } .pl-item-name { min-width: 0; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 9px; } .pl-item-icon { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); color: var(--primary-hover); font-size: 10px; font-weight: 750; } .pl-item-icon img { width: 100%; height: 100%; display: block; object-fit: cover; } .pl-item-copy { min-width: 0; } .pl-item-copy strong, .pl-item-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-item-copy strong { font-size: 12px; line-height: 1.4; } .pl-item-copy small { margin-top: 3px; color: var(--text2); font-size: 9.5px; } .pl-item-tags { display: flex; gap: 4px; margin-top: 4px; overflow: hidden; } .pl-tag { max-width: 88px; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--green) 10%, var(--surface2)); color: color-mix(in srgb, var(--green) 72%, var(--text)); font-size: 8.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-item-cell { min-width: 0; color: var(--text2); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-team-badge { display: inline-flex; max-width: 100%; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-team-badge.universal { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, var(--border)); } .pl-team-badge.historical { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 32%, var(--border)); } .pl-item-actions { display: flex; justify-content: flex-end; gap: 2px; } .pl-item-actions button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text2); font-size: 15px; cursor: pointer; } .pl-item-actions button:hover { background: var(--surface); color: var(--text); } .pl-item-actions button.favorite { color: var(--yellow); } .pl-items.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 12px 0; } .pl-items.grid .pl-item-row { position: relative; display: flex; min-width: 0; min-height: 218px; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); } .pl-items.grid .pl-item-check { position: absolute; top: 12px; left: 12px; z-index: 2; width: 22px; height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--surface) 86%, transparent); } .pl-items.grid .pl-item-name { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .pl-items.grid .pl-item-icon { width: 100%; height: auto; aspect-ratio: 4 / 3; font-size: 18px; } .pl-items.grid .pl-item-copy { min-height: 45px; } .pl-items.grid .pl-item-cell { display: none; } .pl-items.grid .pl-item-actions { margin-top: auto; border-top: 1px solid var(--border); padding-top: 5px; } .pl-empty { min-height: 220px; display: grid; place-items: center; padding: 40px 14px; color: var(--text2); text-align: center; font-size: 12px; } .pl-detail-backdrop { display: none; position: fixed; inset: 0; z-index: 119; background: rgba(0,0,0,.48); } .pl-detail-backdrop.show { display: block; } .pl-detail { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(420px, 94vw); display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--surface); box-shadow: -18px 0 45px rgba(0,0,0,.3); transform: translateX(105%); transition: transform .18s ease; } .pl-detail.show { transform: translateX(0); } .pl-detail-head { flex: 0 0 auto; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 15px; border-bottom: 1px solid var(--border); } .pl-detail-head strong { font-size: 13px; } .pl-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 15px; } .pl-detail-actions { flex: 0 0 auto; min-height: 58px; display: flex; align-items: center; gap: 7px; padding: 10px 15px; border-top: 1px solid var(--border); background: var(--surface); } .pl-detail-actions button { min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); font: inherit; font-size: 11px; cursor: pointer; } .pl-detail-actions button.primary { margin-left: auto; border-color: var(--primary); background: var(--primary); color: #fff; font-weight: 700; } .pl-detail-actions button.danger { color: var(--red); } .pl-detail-preview { width: 100%; min-height: 130px; display: grid; place-items: center; margin-bottom: 15px; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--primary-hover); font-size: 34px; font-weight: 750; } .pl-detail-preview img { width: 100%; max-height: 280px; display: block; object-fit: contain; } .pl-field { display: block; margin-bottom: 12px; } .pl-field > span { display: block; margin-bottom: 5px; color: var(--text2); font-size: 10.5px; font-weight: 650; } .pl-field input, .pl-field select, .pl-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 6px; outline: none; background: var(--surface2); color: var(--text); font: inherit; font-size: 12px; } .pl-field input, .pl-field select { min-height: 38px; padding: 0 9px; } .pl-field textarea { min-height: 120px; padding: 9px; resize: vertical; line-height: 1.65; } .pl-field input:focus, .pl-field select:focus, .pl-field textarea:focus { border-color: var(--primary); } .pl-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin: 2px 0 13px; } .pl-detail-meta div { min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); } .pl-detail-meta span, .pl-detail-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-detail-meta span { color: var(--text2); font-size: 9px; } .pl-detail-meta strong { margin-top: 3px; font-size: 10.5px; font-weight: 600; } .pl-extracted { max-height: 230px; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text2); font-family: inherit; font-size: 10.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .pl-form-modal { max-width: 620px; max-height: 90vh; overflow-y: auto; } .pl-form-modal .pl-field textarea { margin-bottom: 0; } .pl-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .pl-upload-picker { width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 10px; border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 7px; background: color-mix(in srgb, var(--primary) 5%, var(--surface2)); color: var(--text); font: inherit; cursor: pointer; } .pl-upload-picker span { color: var(--primary-hover); font-size: 21px; } .pl-upload-picker strong { font-size: 12px; } .pl-upload-selection { display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto; margin-bottom: 12px; } .pl-upload-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 31px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); font-size: 10.5px; } .pl-upload-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-upload-file small { flex: 0 0 auto; color: var(--text2); } /* ═══════════════════════════════════════════ Team view tabs (list / kanban / library) ═══════════════════════════════════════════ */ .team-view-tabs { display: flex; gap: 4px; background: var(--surface2); border-radius: var(--radius); padding: 3px; } .team-view-tab { background: none; border: none; color: var(--text2); font-size: 13px; padding: 5px 14px; border-radius: calc(var(--radius) - 2px); cursor: pointer; font-weight: 500; transition: all .15s; } .team-view-tab.active { background: var(--primary); color: #fff; } .team-view-tab:not(.active):hover { color: var(--text); background: rgba(255,255,255,0.06); } /* ═══════════════════════════════════════════ Kanban Board ═══════════════════════════════════════════ */ .kanban-main-row { display: flex; gap: 14px; align-items: flex-start; padding: 0 16px 16px; } .kanban-board { flex: 1; min-width: 0; display: flex; gap: 12px; overflow-x: auto; } .kanban-column { flex: 1; min-width: 220px; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; } .kanban-column-header { padding: 12px 14px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .kanban-column-header .col-count { background: var(--surface2); border-radius: 10px; padding: 2px 8px; font-size: 11px; color: var(--text2); font-weight: 500; } .kanban-column-body { flex: 1; padding: 8px; overflow-y: auto; min-height: 60px; transition: background .15s; } .kanban-column-body.drag-over { background: rgba(99,102,241,0.08); } .kanban-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; cursor: grab; transition: box-shadow .15s, transform .1s; } .kanban-card:active { cursor: grabbing; } .kanban-card.dragging { opacity: 0.5; transform: scale(0.97); } .kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .kanban-card-title { font-size: 13px; font-weight: 500; margin-bottom: 6px; line-height: 1.4; } .kanban-card-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .kanban-card-meta span { font-size: 11px; color: var(--text2); } .kanban-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; } .kanban-badge.p1 { background: rgba(239,68,68,0.15); color: var(--red); } .kanban-badge.p2 { background: rgba(234,179,8,0.15); color: var(--yellow); } .kanban-badge.p3 { background: rgba(34,197,94,0.15); color: var(--green); } .kanban-badge.deadline-warn { color: var(--orange); } .kanban-badge.deadline-over { color: var(--red); font-weight: 700; } .kanban-filter-bar { display: flex; gap: 8px; padding: 12px 16px; align-items: center; flex-wrap: wrap; } .kanban-filter-bar select { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; font-size: 13px; } .kanban-filter-context { display: none; align-items: center; gap: 8px; margin-left: auto; padding: 4px 5px 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 11%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); color: var(--text); font-size: 12px; } .kanban-filter-context.show { display: flex; } .kanban-filter-context button { border: 0; border-radius: 999px; padding: 4px 8px; background: var(--surface); color: var(--text2); font-size: 11px; cursor: pointer; } .kanban-filter-context button:hover { color: var(--primary); } .kanban-column-empty { padding: 20px 10px; color: var(--text2); font-size: 12px; text-align: center; } /* Kanban — Summary Strip */ .kanban-kpi-strip { padding: 0 16px 12px; display: flex; gap: 12px; align-items: stretch; } .kanban-summary-bar { flex: 2; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .kanban-summary-stats { display: flex; gap: 10px; flex-shrink: 0; } .kanban-kpi-tile { min-width: 100px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; text-align: center; } .kanban-kpi-label { font-size: 11px; color: var(--text2); font-weight: 500; } .kanban-kpi-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; } .kanban-kpi-sub { font-size: 11px; color: var(--text2); margin-top: 2px; } .kanban-kpi-tile.risk { border-top: 3px solid var(--red); } .kanban-kpi-tile.secured { border-top: 3px solid var(--green); } .kanban-kpi-tile.rate { border-top: 3px solid var(--primary); } .kanban-kpi-tile.velocity { border-top: 3px solid var(--orange); } /* Progress bar */ .kanban-progress-track { display: flex; height: 28px; border-radius: 6px; overflow: hidden; gap: 2px; } .kanban-progress-seg { display: flex; align-items: center; justify-content: center; min-width: 0; transition: flex 0.3s; } .kanban-progress-seg span { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .kanban-progress-legend { display: flex; gap: 12px; flex-wrap: wrap; } .kanban-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text2); } .kanban-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } /* Priority tinted cards — 柔和底纹，高=红 中=琥珀 低=浅绿 */ .kanban-card.prio-1 { background: color-mix(in srgb, var(--red) 9%, var(--surface2)); border-color: color-mix(in srgb, var(--red) 32%, var(--border)); } .kanban-card.prio-1:hover { box-shadow: 0 2px 10px color-mix(in srgb, var(--red) 25%, transparent); } .kanban-card.prio-2 { background: color-mix(in srgb, var(--yellow) 6%, var(--surface2)); border-color: color-mix(in srgb, var(--yellow) 22%, var(--border)); } .kanban-card.prio-3 { background: color-mix(in srgb, var(--green) 5%, var(--surface2)); border-color: color-mix(in srgb, var(--green) 18%, var(--border)); } /* Enhanced cards */ .kanban-card.urgency-high { border-left: 3px solid var(--red); } .kanban-card.urgency-warn { border-left: 3px solid var(--orange); } /* Comment chip on kanban cards */ .kanban-comment-chip { margin-left: auto; min-height: 20px; padding: 1px 5px; border-radius: 10px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text2); background: rgba(127,127,127,0.12); white-space: nowrap; } .kanban-comment-chip.has-comments { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); font-weight: 600; } .kanban-comment-chip .kanban-comment-icon { line-height: 1; } .kanban-comment-chip .kanban-comment-total { color: inherit; font-weight: inherit; } .kanban-comment-chip .kanban-comment-unread { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; } .kanban-comment-chip .kanban-comment-unread[hidden] { display: none; } /* ═══════════════════════════════════════════ Task Discussion modal (GitHub-style thread) ═══════════════════════════════════════════ */ #task-discussion-modal { z-index: 120; } #task-discussion-modal .modal { width: min(1100px, calc(100vw - 32px)); max-width: 1100px; height: min(760px, calc(100vh - 40px)); max-height: 90vh; display: flex; flex-direction: column; } .td-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; } .td-head h3 { margin-bottom: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .td-count { font-size: 12px; color: var(--text2); white-space: nowrap; } .td-close { background: none; border: none; color: var(--text2); font-size: 18px; cursor: pointer; padding: 2px 6px; } .td-close:hover { color: var(--text); } /* 任务上下文条：状态 / 优先级 / 负责人 / 截止 */ .td-context { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text2); padding: 6px 10px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); } .td-context:empty { display: none; } .td-context-meta { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .td-feedback-action { flex: 0 0 auto; min-height: 28px; margin-left: auto; padding: 5px 11px; border: 1px solid var(--primary); border-radius: 6px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary-hover); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .td-feedback-action:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); } .td-feedback-action:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; } .td-plain-task { width: 100%; } .td-plain-task .plain-task-summary { margin: 2px 0 8px; background: color-mix(in srgb, var(--primary) 7%, var(--surface)); } .td-plain-task .plain-task-summary-line p { font-size: 13px; line-height: 1.65; } .td-plain-task-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 2px 7px; } .td-plain-task-actions details { flex: 1; min-width: 0; } .td-plain-task-actions summary { color: var(--text2); cursor: pointer; font-size: 11px; } .td-plain-task-actions details > div { margin-top: 7px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text2); font-size: 11px; line-height: 1.55; } .td-plain-task-actions p { margin: 4px 0 0; } .td-plain-task-actions button { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text2); cursor: pointer; font-size: 11px; } .td-plain-task-actions button:hover { border-color: var(--primary); color: var(--primary-hover); } .td-plain-task-actions button:disabled { cursor: wait; opacity: .65; } .td-ctx-status { font-weight: 600; padding: 1px 8px; border-radius: 8px; color: var(--st); background: color-mix(in srgb, var(--st) 14%, transparent); } .td-ctx-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text2); opacity: .5; } .td-business-line { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .td-business-line > span { white-space: nowrap; } .td-business-line select { max-width: 150px; padding: 3px 24px 3px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; } .td-business-line select:disabled { opacity: .55; } .td-assignee-picker { position: relative; } .td-assignee-picker summary { max-width: 240px; overflow: hidden; color: var(--text2); cursor: pointer; text-overflow: ellipsis; white-space: nowrap; } .td-assignee-menu { position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; width: min(250px, calc(100vw - 56px)); max-height: 280px; overflow-y: auto; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: 0 12px 28px rgba(0,0,0,.24); } .td-assignee-menu label { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 6px; color: var(--text); cursor: pointer; } .td-assignee-menu input { accent-color: var(--primary); } .td-assignee-menu button { width: 100%; margin-top: 7px; padding: 7px 9px; border: 0; border-radius: 6px; background: var(--primary); color: #fff; cursor: pointer; } .td-assignee-menu button:disabled { opacity: .6; cursor: wait; } .td-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); gap: 14px; flex: 1; min-height: 0; margin-top: 10px; } .td-thread-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .td-checklist { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface2) 65%, transparent); } .td-checklist-loading, .td-checklist-empty { min-height: 180px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; color: var(--text2); font-size: 12px; text-align: center; } .td-checklist-generating { width: 28px; height: 28px; margin-bottom: 5px; border: 2px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-top-color: var(--primary); border-radius: 50%; animation: td-checklist-spin .8s linear infinite; } .td-checklist-generating.small { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; } @keyframes td-checklist-spin { to { transform: rotate(360deg); } } .td-checklist-empty strong, .td-checklist-head strong { font-size: 13px; } .td-checklist-empty span, .td-checklist-head span { color: var(--text2); font-size: 11px; } .td-checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 7px; } .td-checklist-head > div { display: flex; align-items: baseline; gap: 8px; } .td-check-progress-label { font-weight: 600; color: var(--primary) !important; } .td-check-progress { height: 3px; margin: 0 12px 6px; overflow: hidden; border-radius: 2px; background: var(--border); } .td-check-progress span { display: block; height: 100%; background: var(--green); transition: width .2s ease; } .td-checklist-items { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 0 6px 7px; } .td-checklist-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-height: 38px; padding: 5px 6px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .td-checklist-item:first-child { border-top: 0; } .td-checklist-item.saving { opacity: .55; pointer-events: none; } .td-check-dot { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; } .td-check-dot span { width: 12px; height: 12px; border: 2px solid var(--text2); border-radius: 50%; transition: all .15s; } .td-checklist-item.completed .td-check-dot span { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--surface2); } .td-check-content { min-width: 0; color: var(--text); font-size: 12px; line-height: 1.5; word-break: break-word; } .td-checklist-item.completed .td-check-content { color: var(--text2); text-decoration: line-through; text-decoration-thickness: 1px; } .td-check-main { min-width: 0; } .td-check-content { display: block; font-weight: 600; line-height: 1.45; } .td-check-accept { display: block; margin-top: 3px; color: var(--text2); font-size: 11px; line-height: 1.45; } .td-check-details { margin-top: 5px; color: var(--text2); font-size: 11px; } .td-check-details summary { color: var(--primary-hover); cursor: pointer; user-select: none; } .td-check-details p { margin-top: 4px; line-height: 1.55; } .td-check-stale { margin: 0 8px 8px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--yellow) 42%, var(--border)); border-radius: 7px; background: color-mix(in srgb, var(--yellow) 8%, transparent); color: var(--text); font-size: 11px; line-height: 1.5; } .td-check-stale button { margin-left: 8px; border: 0; border-radius: 5px; padding: 4px 7px; background: var(--primary); color: white; cursor: pointer; } .td-check-stale.td-check-updating { display: flex; align-items: center; gap: 8px; } .td-checklist.is-updating .td-checklist-items { opacity: .48; pointer-events: none; } .td-check-update-state { position: absolute; z-index: 3; inset: 50% auto auto 50%; width: min(250px, calc(100% - 30px)); transform: translate(-50%, -50%); display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 3px 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 24px rgba(0,0,0,.2); color: var(--text); } .td-check-update-state strong { font-size: 12px; } .td-check-update-state > span:last-child { grid-column: 2; color: var(--text2); font-size: 10px; line-height: 1.4; } .td-check-filter { margin-left:auto; border:1px solid var(--border); border-radius:5px; padding:3px 7px; background:var(--surface); color:var(--text2); cursor:pointer; font-size:10px; } .td-check-updated { max-width: 70px; overflow: hidden; color: var(--text2); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .td-check-edit { padding: 4px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--primary); cursor: pointer; font-size: 11px; } .td-check-edit:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } .td-checklist-item.editing { display: block; padding: 8px 6px; } .td-check-edit-form { display: grid; gap: 7px; } .td-check-edit-form textarea, .td-check-edit-form input { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; resize: vertical; } .td-check-edit-form > div { display: flex; justify-content: flex-end; gap: 7px; } .td-check-edit-form button { padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text2); cursor: pointer; font-size: 11px; } .td-check-edit-form button.primary { border-color: var(--primary); background: var(--primary); color: white; } .td-list { flex: 1; overflow-y: auto; margin: 0 0 10px; display: flex; flex-direction: column; gap: 12px; min-height: 180px; padding-right: 4px; } .td-empty { text-align: center; padding: 32px 12px; color: var(--text); } .td-retry-btn { margin-top: 10px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 6px 16px; cursor: pointer; font-size: 12px; } .td-retry-btn:hover { border-color: var(--primary); color: var(--primary); } /* 加载骨架 */ .td-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 8px 2px; } .td-skeleton div { height: 44px; border-radius: 10px; background: linear-gradient(90deg, var(--surface2) 25%, color-mix(in srgb, var(--text2) 12%, var(--surface2)) 50%, var(--surface2) 75%); background-size: 200% 100%; animation: td-shimmer 1.2s infinite; } .td-skeleton div:nth-child(2) { width: 80%; } .td-skeleton div:nth-child(3) { width: 62%; } @keyframes td-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* 日期分隔线 */ .td-day-sep { display: flex; align-items: center; gap: 10px; color: var(--text2); font-size: 11px; margin: 2px 0; } .td-day-sep::before, .td-day-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* 聊天式气泡：自己的发言靠右 */ .td-comment { display: flex; gap: 10px; max-width: 88%; } .td-comment.own { flex-direction: row-reverse; align-self: flex-end; } .td-avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .td-comment-body { min-width: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; border-top-left-radius: 4px; padding: 8px 12px; } .td-comment.own .td-comment-body { border-radius: 12px; border-top-right-radius: 4px; border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface2)); } .td-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .td-comment.own .td-comment-head { flex-direction: row-reverse; } .td-comment-author { font-weight: 600; font-size: 13px; } .td-comment.own .td-comment-author { color: var(--primary); } .td-comment-time { font-size: 11px; color: var(--text2); } .td-delete-btn { margin-left: auto; background: none; border: none; color: var(--text2); font-size: 11px; cursor: pointer; padding: 2px 4px; border-radius: 4px; opacity: 0; transition: opacity .15s; } .td-comment.own .td-delete-btn { margin-left: 0; margin-right: auto; } .td-comment:hover .td-delete-btn { opacity: 1; } .td-delete-btn:hover { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); } .td-comment-content { font-size: 13px; line-height: 1.6; word-break: break-word; } .td-reply-btn { background: none; border: none; color: var(--text2); font-size: 11px; cursor: pointer; padding: 2px 4px; opacity: 0; } .td-comment:hover .td-reply-btn { opacity: 1; } .td-reply-btn:hover { color: var(--primary); } /* 撤回按钮：与回复/删除一致的悬停渐显，hover 时橙色高亮突出 */ .td-recall-btn { background: none; border: none; color: var(--text2); font-size: 11px; cursor: pointer; padding: 2px 4px; border-radius: 4px; opacity: 0; transition: opacity .15s; } .td-comment:hover .td-recall-btn { opacity: 1; } .td-recall-btn:hover { color: var(--orange, #f97316); background: color-mix(in srgb, var(--orange, #f97316) 12%, transparent); } .td-reply-quote { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 2px 0 6px; padding: 6px 8px; border: 0; border-left: 2px solid var(--primary); border-radius: 0; background: color-mix(in srgb, var(--primary) 7%, transparent); color: var(--text2); font: inherit; font-size: 11px; text-align: left; cursor: pointer; } .td-reply-quote:hover { background: color-mix(in srgb, var(--primary) 13%, transparent); } .td-reply-quote strong { color: var(--text); font-weight: 600; } .td-reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; } .td-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; min-width: min(310px, 62vw); } .td-file-attachment { width: 100%; min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) 22px; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; } .td-file-attachment:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); } .td-file-badge { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 5px; background: color-mix(in srgb, var(--primary) 14%, var(--surface2)); color: var(--primary); font-size: 9px; font-weight: 700; } .td-file-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .td-file-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; } .td-file-meta small { color: var(--text2); font-size: 10px; } .td-file-download { color: var(--text2); font-size: 18px; text-align: center; } .td-composer { border-top: 1px solid var(--border); padding-top: 12px; } .td-replying-to { display: none; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 8px; border-left: 2px solid var(--primary); background: var(--surface2); color: var(--text2); font-size: 11px; } .td-replying-to.show { display: flex; } .td-replying-to span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td-replying-to button { width: 24px; height: 24px; border: 0; background: transparent; color: var(--text2); cursor: pointer; font-size: 14px; } .td-composer textarea { min-height: 44px; max-height: 160px; margin-bottom: 8px; resize: none; overflow-y: auto; } .td-composer-foot { display: flex; align-items: center; gap: 10px; } .td-attachment-btn { width: 34px; min-width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); cursor: pointer; font-size: 17px; } .td-attachment-btn:hover { border-color: var(--primary); color: var(--primary); } .td-library-attachment-btn { width: auto; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; } .td-library-attachment-btn span[aria-hidden="true"] { font-size: 16px; } .td-attachment-preview { margin-bottom: 8px; align-items: stretch; } .pending-file { position: relative; width: min(260px, 100%); height: 58px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); } .pending-file > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pending-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .pending-file small { color: var(--text2); font-size: 10px; } .pending-file button { width: 20px; min-width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text2); cursor: pointer; font-size: 15px; } .pending-file button:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); } .td-composer-hint { font-size: 11px; color: var(--text2); flex: 1; } .td-char-count { font-size: 11px; color: var(--orange); white-space: nowrap; } #td-post-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 8px 20px; cursor: pointer; font-size: 13px; font-weight: 600; } #td-post-btn:disabled { opacity: .6; cursor: default; } #td-post-btn:hover:not(:disabled) { filter: brightness(1.08); } #td-library-picker-modal, #message-image-viewer { z-index: 160; } .td-library-picker { width: min(640px, calc(100vw - 32px)); max-width: 640px; max-height: min(720px, calc(100vh - 32px)); padding: 0; overflow: hidden; display: flex; flex-direction: column; } .td-library-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 13px; border-bottom: 1px solid var(--border); } .td-library-picker-head h3 { margin: 0; font-size: 16px; } .td-library-picker-head p { margin-top: 4px; color: var(--text2); font-size: 11px; } .td-library-picker-close { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text2); cursor: pointer; font-size: 18px; } .td-library-picker-close:hover { background: var(--surface2); color: var(--text); } .td-library-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .td-library-toolbar input, .td-library-toolbar select { width: 100%; height: 36px; min-width: 0; margin: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; outline: 0; background: var(--surface2); color: var(--text); font: inherit; font-size: 12px; } .td-library-toolbar input:focus, .td-library-toolbar select:focus { border-color: var(--primary); } .td-library-list { min-height: 120px; max-height: 430px; flex: 1 1 220px; overflow-y: auto; padding: 0 20px; } .td-library-row { min-height: 62px; display: grid; grid-template-columns: 18px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); cursor: pointer; } .td-library-row:hover, .td-library-row.selected { background: color-mix(in srgb, var(--primary) 7%, transparent); } .td-library-row.disabled { cursor: default; opacity: .48; } .td-library-row input { width: 16px; height: 16px; accent-color: var(--primary); } .td-library-file-icon { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--primary) 14%, var(--surface2)); color: var(--primary); font-size: 9px; font-weight: 700; } .td-library-file-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .td-library-file-copy strong, .td-library-file-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td-library-file-copy strong { font-size: 12px; } .td-library-file-copy small, .td-library-file-size { color: var(--text2); font-size: 10px; } .td-library-file-size { white-space: nowrap; } .td-library-state { min-height: 120px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; color: var(--text2); font-size: 12px; text-align: center; } .td-library-state.error { color: var(--red); } .td-library-state button { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); cursor: pointer; } .td-library-load-more { align-self: center; margin: 8px 0; padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text2); cursor: pointer; font-size: 11px; } .td-library-load-more:hover { border-color: var(--primary); color: var(--primary); } .td-library-picker-foot { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 12px 20px; border-top: 1px solid var(--border); } .td-library-picker-foot span { margin-right: auto; color: var(--text2); font-size: 11px; } .td-library-picker-foot button { min-height: 34px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); cursor: pointer; } .td-library-picker-foot button.primary { border-color: var(--primary); background: var(--primary); color: #fff; } .td-library-picker-foot button:disabled { cursor: default; opacity: .5; } /* ═══════════════════════════════════════════ 个人资料 modal + 队内昵称冲突提醒 ═══════════════════════════════════════════ */ #profile-modal .modal.profile-modal { max-width: 760px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; } .pf-banner { position: relative; text-align: center; padding: 26px 20px 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 24%, var(--surface)) 0%, color-mix(in srgb, var(--primary) 8%, var(--surface)) 60%, var(--surface) 100%); border-bottom: 1px solid var(--border); } .pf-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text2); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .pf-close:hover { color: var(--text); background: color-mix(in srgb, var(--text2) 12%, transparent); } .pf-avatar-wrap { position: relative; width: 84px; height: 84px; margin: 0 auto 10px; cursor: pointer; } .pf-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent), 0 6px 18px rgba(0,0,0,0.25); } .pf-avatar img { width: 100%; height: 100%; object-fit: cover; } .pf-avatar-edit { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: transform .12s; } .pf-avatar-wrap:hover .pf-avatar-edit { transform: scale(1.12); } .pf-banner-name { font-size: 18px; font-weight: 700; } .pf-banner-sub { font-size: 12px; color: var(--text2); margin-top: 3px; } .pf-switch-v2 { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 16px; border: none; border-radius: 999px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 3px 12px rgba(99,102,241,0.35); transition: transform .15s, box-shadow .15s; } .pf-switch-v2:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,0.5); } .pf-body { padding: 16px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .pf-section { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; } .pf-section-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; } .pf-section-sub { font-size: 11px; font-weight: 400; color: var(--text2); margin-left: 6px; } .pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .pf-field { display: flex; flex-direction: column; gap: 4px; } .pf-field span { font-size: 11px; color: var(--text2); } .pf-tag { font-style: normal; font-size: 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 6px; padding: 0 5px; margin-left: 3px; } .pf-field input { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 13px; } .pf-field input:focus { outline: none; border-color: var(--primary); } .pf-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; justify-content: flex-end; } .pf-msg { font-size: 12px; flex: 1; min-height: 15px; } .pf-msg.ok { color: var(--green); } .pf-msg.err { color: var(--red); } .pf-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 18px; cursor: pointer; font-size: 13px; font-weight: 600; } .pf-btn:hover { border-color: var(--primary); color: var(--primary); } .pf-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; } .pf-btn.primary:hover { filter: brightness(1.08); color: #fff; } .pf-btn.danger { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); color: var(--red); } .pf-btn.danger:hover { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); } .pf-btn:disabled { opacity: .6; cursor: default; } .pf-team-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); flex-wrap: wrap; } .pf-team-row:last-child { border-bottom: none; } .pf-team-name { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-team-role { font-size: 10px; padding: 1px 7px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 600; flex-shrink: 0; } .pf-team-conflict { font-size: 10px; padding: 1px 7px; border-radius: 8px; background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); font-weight: 600; flex-shrink: 0; } .pf-team-row input { flex: 1; min-width: 130px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); font-size: 12px; } .pf-team-row input:focus { outline: none; border-color: var(--primary); } .pf-team-save { background: none; border: 1px solid var(--border); color: var(--text2); border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 12px; flex-shrink: 0; } .pf-team-save:hover { border-color: var(--primary); color: var(--primary); } .pf-current-team, .pf-team-expand { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--surface); } .pf-team-expand { margin-top: 10px; } .pf-current-team.empty { border-style: dashed; } .pf-current-team-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .pf-overline { font-size: 10px; font-weight: 700; color: var(--text2); text-transform: uppercase; margin-bottom: 5px; } .pf-current-team-name { font-size: 18px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; } .pf-current-team-meta, .pf-team-help { color: var(--text2); font-size: 11px; line-height: 1.6; margin-top: 4px; } .pf-connect-state { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--text2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; } .pf-connect-state.connected { color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, var(--border)); background: color-mix(in srgb, var(--green) 8%, transparent); } .pf-team-invite-label { font-size: 11px; color: var(--text2); margin-top: 14px; } .pf-team-invite-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .pf-team-invite-row code { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: 1px; overflow-wrap: anywhere; } .pf-team-management-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .pf-team-expand p { margin: 0 0 10px; font-size: 11px; color: var(--text2); line-height: 1.6; } .pf-team-form { display: flex; gap: 8px; margin-top: 8px; } .pf-team-form input { flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 12px; } .pf-team-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 13%, transparent); } .pf-pending-state { margin-top: 10px; padding: 7px 9px; border-radius: 8px; background: color-mix(in srgb, var(--yellow) 10%, transparent); color: var(--yellow); font-size: 11px; } .admin-role-desc { color: var(--text2); font-size: 13px; line-height: 1.65; margin: 0 0 14px; } .admin-role-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .admin-role-field span { color: var(--text2); font-size: 11px; font-weight: 600; } .admin-role-field select { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 13px; } .admin-role-field select:focus { outline: none; border-color: var(--primary); } .admin-role-warning { border-left: 3px solid var(--red); background: color-mix(in srgb, var(--red) 8%, var(--surface2)); color: var(--text2); padding: 10px 12px; font-size: 12px; line-height: 1.6; margin-bottom: 12px; } .admin-role-error { color: var(--red); font-size: 12px; min-height: 18px; margin-top: 6px; } .admin-role-request-meta { color: var(--primary); font-size: 12px; font-weight: 600; margin-bottom: 10px; } .member-admin-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } /* 冲突提醒弹窗 */ #nickname-conflict-modal .modal.nc-modal { max-width: 480px; } .nc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .nc-head h3 { margin: 0; } .nc-icon { font-size: 22px; } .nc-desc { font-size: 13px; color: var(--text2); line-height: 1.6; margin: 0 0 12px; } .nc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; flex-wrap: wrap; background: var(--surface2); } .nc-team { font-size: 13px; font-weight: 600; } .nc-row input { flex: 1; min-width: 120px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); font-size: 12px; } .nc-row input:focus { outline: none; border-color: var(--primary); } .nc-foot { display: flex; justify-content: flex-end; margin-top: 6px; } /* 头像图片通用 */ .sidebar-avatar img, .member-avatar img, .member-detail-avatar img, .td-avatar img, .ka-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .sidebar-avatar, .member-avatar, .member-detail-avatar, .td-avatar, .ka-avatar { overflow: hidden; } /* ═══════════════════════════════════════════ 模板选择 (workflow templates + flowchart canvas) ═══════════════════════════════════════════ */ #panel-wftemplates { display: none; flex-direction: column; } #panel-wftemplates.active { display: flex; } .wft-generate-bar { display: flex; gap: 10px; align-items: center; padding: 16px; flex-wrap: wrap; } .wft-generate-bar input { flex: 1; min-width: 220px; max-width: 420px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text); font-size: 14px; } .wft-generate-bar select { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text); font-size: 13px; cursor: pointer; } #wft-step-count { flex: 0 0 auto; min-width: 0; width: 104px; } #wft-generate-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 10px 18px; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap; } #wft-generate-btn:disabled { opacity: .7; cursor: default; } #wft-generate-hint { width: 100%; font-size: 12px; color: var(--primary); min-height: 16px; padding: 0 2px; } .wft-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding: 0 16px 20px; overflow-y: auto; } .wft-empty { grid-column: 1/-1; text-align: center; padding: 48px 24px; color: var(--text); max-width: 420px; margin: 0 auto; } .wft-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; display: flex; flex-direction: column; gap: 6px; } .wft-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: 0 4px 14px rgba(0,0,0,0.18); transform: translateY(-1px); } .wft-card-head { display: flex; align-items: center; } .wft-tag { font-size: 11px; font-weight: 700; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); padding: 2px 8px; border-radius: 10px; } .wft-card-del { margin-left: auto; background: none; border: none; color: var(--text2); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity .15s; } .wft-card:hover .wft-card-del { opacity: 1; } .wft-card-del:hover { color: var(--red); } .wft-card-name { font-size: 15px; font-weight: 700; } .wft-card-desc { font-size: 12px; color: var(--text2); } .wft-card-meta { display: flex; gap: 6px; font-size: 11px; color: var(--text2); } .wft-card-open { font-size: 12px; color: var(--primary); font-weight: 600; margin-top: 2px; } /* Canvas view */ #wft-canvas-view { flex: 1; display: flex; flex-direction: column; min-height: 0; } .wft-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .wft-toolbar .wft-tb-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 6px 12px; font-size: 12.5px; cursor: pointer; } .wft-toolbar .wft-tb-btn:hover { border-color: var(--primary); color: var(--primary); } .wft-toolbar .wft-tb-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } #wft-canvas-title { font-size: 15px; font-weight: 700; margin-right: 4px; } #wft-canvas-stats { font-size: 12px; color: var(--text2); } #wft-save-state { font-size: 11.5px; color: var(--text2); margin-left: auto; } #wft-zoom-label { font-size: 12px; color: var(--text2); min-width: 40px; text-align: center; } .wft-canvas-wrap { flex: 1; display: flex; min-height: 0; position: relative; } #wft-viewport { flex: 1; position: relative; overflow: hidden; background: var(--bg); background-image: radial-gradient(color-mix(in srgb, var(--text2) 22%, transparent) 1px, transparent 1px); background-size: 22px 22px; cursor: grab; } #wft-viewport:active { cursor: grabbing; } #wft-viewport.link-mode { cursor: crosshair; } #wft-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; } .wft-phase-label { position: absolute; font-size: 12.5px; font-weight: 700; padding: 3px 12px; border-radius: 14px; border: 1.5px solid; background: var(--surface); white-space: nowrap; } .wft-phase-count { opacity: .75; font-weight: 600; margin-left: 2px; } .wft-node { position: absolute; width: 210px; height: 78px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 8px 10px; cursor: pointer; user-select: none; display: flex; flex-direction: column; justify-content: space-between; transition: box-shadow .12s; } .wft-node:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.25); z-index: 5; } .wft-node.selected { outline: 2px solid var(--primary); outline-offset: 1px; z-index: 6; } .wft-node.link-from { outline: 2px dashed var(--orange); outline-offset: 1px; } .wft-node.done { opacity: .78; } .wft-node.prio-1 { background: color-mix(in srgb, var(--red) 9%, var(--surface)); } .wft-node.prio-2 { background: color-mix(in srgb, var(--yellow) 5%, var(--surface)); } .wft-node.prio-3 { background: color-mix(in srgb, var(--green) 5%, var(--surface)); } .wft-node-top { display: flex; gap: 7px; align-items: flex-start; min-height: 0; } .wft-node-idx { flex-shrink: 0; min-width: 20px; height: 20px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .wft-node-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wft-node-foot { display: flex; gap: 6px; align-items: center; font-size: 10.5px; color: var(--text2); } .wft-node-duration { white-space: nowrap; } .wft-node-assignee { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } .wft-node-assignee.assigned { color: var(--primary); font-weight: 600; } .wft-node-chat { color: var(--primary); font-weight: 600; white-space: nowrap; } .wft-node-check { color: var(--green); font-weight: 800; } /* Drawer */ #wft-drawer { position: absolute; top: 0; right: -360px; width: 340px; height: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,0.22); transition: right .2s ease; display: flex; flex-direction: column; z-index: 20; } #wft-drawer.open { right: 0; } .wft-drawer-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; } #wft-drawer-idx { color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 10px; background: var(--primary); } #wft-drawer-phase-name { font-size: 12px; color: var(--text2); flex: 1; } .wft-drawer-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; } .wft-drawer-body label { font-size: 11.5px; color: var(--text2); font-weight: 600; margin-bottom: -6px; } .wft-drawer-body input, .wft-drawer-body select, .wft-drawer-body textarea { width: 100%; box-sizing: border-box; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; color: var(--text); font-size: 13px; } .wft-drawer-body textarea { height: 76px; resize: vertical; font-family: inherit; } .wft-drawer-row { display: flex; gap: 8px; } .wft-drawer-row > div { flex: 1; display: flex; flex-direction: column; gap: 4px; } .wft-assign-box { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--primary) 4%, var(--surface2)); } .wft-assign-box .wft-assign-title { font-size: 12px; font-weight: 700; } #wft-drawer-task-state { font-size: 11.5px; color: var(--text2); line-height: 1.5; } #wft-drawer-assign-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; } #wft-drawer-assign-btn:disabled { opacity: .6; cursor: default; } #wft-drawer-discuss-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; } #wft-drawer-discuss-btn:hover { border-color: var(--primary); color: var(--primary); } .wft-drawer-danger { background: none; border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border)); color: var(--red); border-radius: var(--radius); padding: 7px 12px; font-size: 12.5px; cursor: pointer; } .wft-drawer-danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); } .wft-drawer-close { margin-left: auto; background: none; border: none; color: var(--text2); font-size: 16px; cursor: pointer; } .wft-rel-entry { border: 1px solid color-mix(in srgb, #0ea5e9 42%, var(--border)); border-radius: 8px; background: color-mix(in srgb, #0ea5e9 9%, var(--surface2)); padding: 10px 12px; color: var(--text); cursor: pointer; text-align: left; } .wft-rel-entry:hover { border-color: #0ea5e9; background: color-mix(in srgb, #0ea5e9 14%, var(--surface2)); } .wft-rel-entry-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; } .wft-rel-entry-title span:last-child { margin-left: auto; color: #38bdf8; font-size: 15px; } /* Relation knowledge graph */ #wft-relations-view { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); } .wft-rel-toolbar { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; } .wft-rel-back, .wft-rel-icon-btn, .wft-rel-action { height: 32px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--text); cursor: pointer; font-size: 12px; } .wft-rel-back, .wft-rel-action { padding: 0 11px; } .wft-rel-icon-btn { width: 32px; padding: 0; font-size: 17px; } .wft-rel-back:hover, .wft-rel-icon-btn:hover, .wft-rel-action:hover { border-color: var(--primary); color: var(--primary); } .wft-rel-heading { min-width: 170px; margin-right: 2px; } .wft-rel-heading strong { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .wft-rel-heading span { display: block; margin-top: 1px; color: var(--text2); font-size: 10.5px; } .wft-rel-source { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 8px; border: 1px solid color-mix(in srgb, #0ea5e9 38%, var(--border)); color: #38bdf8; background: color-mix(in srgb, #0ea5e9 8%, transparent); font-size: 10.5px; font-weight: 700; white-space: nowrap; } .wft-rel-source::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: wft-rel-source-pulse 2s ease-out infinite; } .wft-rel-source.workflow { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 38%, var(--border)); background: color-mix(in srgb, var(--yellow) 8%, transparent); } .wft-rel-segments { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; padding: 2px; background: var(--surface2); } .wft-rel-segments button { height: 26px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text2); cursor: pointer; font-size: 11.5px; white-space: nowrap; } .wft-rel-segments button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.18); } .wft-rel-spacer { flex: 1; } .wft-rel-zoom { display: flex; align-items: center; gap: 4px; } #wft-rel-zoom-label { min-width: 38px; color: var(--text2); text-align: center; font-size: 11px; } .wft-rel-main { flex: 1; min-height: 0; display: flex; } #wft-rel-viewport { flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: grab; touch-action: none; background-color: var(--bg); background-image: radial-gradient(color-mix(in srgb, var(--text2) 18%, transparent) 1px, transparent 1px); background-size: 24px 24px; animation: wft-rel-grid-drift 24s linear infinite; } #wft-rel-viewport.dragging { cursor: grabbing; } #wft-rel-world { position: absolute; left: 0; top: 0; width: 1500px; height: 960px; transform-origin: 0 0; } #wft-rel-svg { position: absolute; inset: 0; width: 1500px; height: 960px; overflow: visible; pointer-events: none; } .wft-rel-edge-group { opacity: 1; transition: opacity .22s ease; } .wft-rel-edge, .wft-rel-edge-glow, .wft-rel-edge-flow { fill: none; stroke-linecap: round; } .wft-rel-edge-glow { opacity: .13; filter: blur(2px); } .wft-rel-edge-flow { stroke-dasharray: 4 17; animation: wft-rel-edge-flow 1.25s linear infinite; } .wft-rel-edge-group.is-entering { animation: wft-rel-edge-in .55s cubic-bezier(.22,.8,.28,1) backwards; animation-delay: var(--rel-delay, 0ms); } .wft-rel-edge-group.selected .wft-rel-edge-glow { opacity: .3; } .wft-rel-edge-group.selected .wft-rel-edge { stroke-width: 4px; } .wft-rel-edge-group.selected .wft-rel-edge-label { font-size: 12px; } .wft-rel-edge-label { font-size: 10.5px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; transition: opacity .2s ease; } .wft-rel-particle { pointer-events: none; filter: drop-shadow(0 0 4px currentColor); } .wft-rel-node { position: absolute; width: 210px; height: 88px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: 8px; background: var(--surface); box-shadow: 0 5px 16px rgba(0,0,0,.2); cursor: move; user-select: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .22s ease, filter .22s ease; will-change: transform, opacity; } .wft-rel-node.is-entering { animation: wft-rel-node-in .58s cubic-bezier(.18,.88,.3,1.15) backwards; animation-delay: var(--rel-delay, 0ms); } .wft-rel-node:hover, .wft-rel-node.hovered, .wft-rel-node.selected { transform: translateY(-3px) scale(1.025); border-color: color-mix(in srgb, var(--primary) 65%, var(--border)); box-shadow: 0 10px 26px rgba(0,0,0,.3); z-index: 4; } .wft-rel-node.drag-active { transform: scale(1.045); box-shadow: 0 13px 32px color-mix(in srgb, var(--primary) 24%, rgba(0,0,0,.35)); transition-duration: .08s; z-index: 8; } .wft-rel-node.drop-feedback { animation: wft-rel-node-drop .38s cubic-bezier(.2,.9,.32,1.2); } .wft-rel-node.center { width: 240px; height: 108px; padding: 13px 14px; border: 2px solid var(--primary); border-top-width: 4px; cursor: move; box-shadow: 0 9px 28px color-mix(in srgb, var(--primary) 22%, transparent); animation: wft-rel-center-breathe 3.2s ease-in-out infinite; z-index: 3; } .wft-rel-node.center.is-entering { animation: wft-rel-node-in .62s cubic-bezier(.18,.88,.3,1.15) backwards, wft-rel-center-breathe 3.2s .65s ease-in-out infinite; } .wft-rel-node.center:hover, .wft-rel-node.center.drag-active { animation-play-state: paused; } #wft-rel-world.has-rel-hover .wft-rel-node:not(.center):not(.hovered) { opacity: .22; filter: saturate(.35); } #wft-rel-world.has-rel-hover .wft-rel-edge-group:not(.hovered) { opacity: .1; } #wft-rel-world.has-rel-hover .wft-rel-edge-group.hovered .wft-rel-edge-glow { opacity: .34; } #wft-rel-world.has-rel-hover .wft-rel-edge-group.hovered .wft-rel-edge { stroke-width: 4px; } #wft-rel-world.has-rel-hover .wft-rel-edge-group.hovered .wft-rel-edge-label { font-size: 12px; } #wft-rel-viewport.node-dragging .wft-rel-particle { display: none; } .wft-rel-node-head { display: flex; align-items: center; gap: 7px; min-width: 0; } .wft-rel-node-phase { min-width: 0; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; } .wft-rel-node-score { margin-left: auto; flex: 0 0 auto; border-radius: 4px; padding: 2px 5px; color: #fff; font-size: 10px; font-weight: 800; } .wft-rel-node-title { color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .wft-rel-node.center .wft-rel-node-title { font-size: 15px; } .wft-rel-node-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--text2); font-size: 10px; } .wft-rel-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wft-rel-direct { flex: 0 0 auto; color: var(--green); font-weight: 700; } .wft-rel-loading { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); } .wft-rel-loading[hidden] { display: none; } .wft-rel-loader { width: 30px; height: 30px; border: 3px solid color-mix(in srgb, var(--primary) 20%, transparent); border-top-color: var(--primary); border-radius: 50%; animation: wft-rel-spin .8s linear infinite; } @keyframes wft-rel-spin { to { transform: rotate(360deg); } } @keyframes wft-rel-grid-drift { to { background-position: 48px 24px; } } @keyframes wft-rel-source-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } } @keyframes wft-rel-edge-flow { to { stroke-dashoffset: -42; } } @keyframes wft-rel-edge-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wft-rel-node-in { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } } @keyframes wft-rel-node-drop { 0% { transform: scale(1.045); } 55% { transform: scale(.975); } 100% { transform: scale(1); } } @keyframes wft-rel-center-breathe { 0%, 100% { box-shadow: 0 9px 28px color-mix(in srgb, var(--primary) 18%, transparent); } 50% { box-shadow: 0 9px 35px color-mix(in srgb, var(--primary) 38%, transparent); } } .wft-rel-motion-paused #wft-rel-viewport, .wft-rel-motion-paused .wft-rel-source::before, .wft-rel-motion-paused .wft-rel-edge-flow, .wft-rel-motion-paused .wft-rel-node { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { #wft-rel-viewport, .wft-rel-source::before, .wft-rel-edge-flow, .wft-rel-edge-group, .wft-rel-node { animation: none !important; transition-duration: .01ms !important; } .wft-rel-particle { display: none; } } .wft-rel-loading strong { font-size: 13px; } .wft-rel-loading span { color: var(--text2); font-size: 11.5px; } .wft-rel-inspector { width: 310px; flex: 0 0 310px; min-height: 0; overflow-y: auto; border-left: 1px solid var(--border); background: var(--surface); } .wft-rel-inspector-section { padding: 14px 15px; border-bottom: 1px solid var(--border); } .wft-rel-inspector-label { margin-bottom: 7px; color: var(--text2); font-size: 10.5px; font-weight: 700; text-transform: uppercase; } #wft-rel-summary { color: var(--text); font-size: 12.5px; line-height: 1.65; } .wft-rel-detail-empty { padding: 22px 4px; color: var(--text2); text-align: center; font-size: 12px; } .wft-rel-detail-title { font-size: 14px; font-weight: 700; line-height: 1.4; } .wft-rel-detail-phase { margin-top: 3px; color: var(--text2); font-size: 11px; } .wft-rel-meter-row { display: flex; align-items: center; gap: 9px; margin: 12px 0 10px; } .wft-rel-meter { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface2); } .wft-rel-meter > span { display: block; height: 100%; border-radius: inherit; } .wft-rel-meter-row b { min-width: 34px; font-size: 13px; } .wft-rel-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .wft-rel-detail-tags span { padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--text2); font-size: 10.5px; } .wft-rel-reason { margin: 0 0 12px; color: var(--text); font-size: 12px; line-height: 1.6; } .wft-rel-focus-btn { width: 100%; height: 32px; border: 1px solid var(--primary); border-radius: 7px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); cursor: pointer; font-size: 12px; font-weight: 700; } .wft-rel-focus-btn:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); } .wft-rel-list { display: flex; flex-direction: column; } .wft-rel-list-item { width: 100%; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; } .wft-rel-list-item:last-child { border-bottom: 0; } .wft-rel-list-item:hover, .wft-rel-list-item.active { color: var(--primary); } .wft-rel-list-dot { width: 7px; height: 7px; border-radius: 50%; } .wft-rel-list-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; } .wft-rel-list-score { color: var(--text2); font-size: 10.5px; font-weight: 700; } .wft-toolbar-search { width:128px; padding:5px 7px; border:1px solid var(--border); border-radius:6px; background:var(--surface2); color:var(--text); font-size:11px; } .wft-edge-type { padding:5px 6px; border:1px solid var(--border); border-radius:6px; background:var(--surface2); color:var(--text); font-size:11px; } /* Chart row (hidden) */ .kanban-chart-row { display: none; } /* ═══════════════════════════════════════════ Trend indicators on stat cards ═══════════════════════════════════════════ */ .stat-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; margin-top: 4px; } .stat-trend.up { color: var(--green); } .stat-trend.down { color: var(--red); } .stat-trend.flat { color: var(--text2); } /* ═══════════════════════════════════════════ Meeting Minutes Modal ═══════════════════════════════════════════ */ .minutes-content { max-height: 65vh; overflow-y: auto; padding: 16px; background: var(--surface2); border-radius: var(--radius); border: 1px solid var(--border); font-size: 14px; line-height: 1.8; } .minutes-content h3 { font-size: 15px; margin: 16px 0 8px; color: var(--primary); } .minutes-content h3:first-child { margin-top: 0; } .minutes-content ul { padding-left: 18px; margin: 4px 0; } .minutes-content li { margin: 4px 0; } .minutes-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; } .minutes-actions button { padding: 8px 16px; border-radius: var(--radius); font-size: 13px; cursor: pointer; border: 1px solid var(--border); } .minutes-actions .btn-copy { background: var(--primary); color: #fff; border: none; } .minutes-actions .btn-copy:hover { background: var(--primary-hover); }